/* =========================================================================
   Foxie UI — HubSpot-2026 design system
   Derived from computed styles of packages/data-sync/docs/hubspot-benchmark/
   brand-reference (portal 7559762, captured 2026-08-20).

   This file REPLACES the legacy dashboard/styles.css. It keeps the legacy
   class vocabulary (.card, .kpi, .clients, .pill, .btn, .rail, .tab …) so
   page-level markup survives, but re-expresses every one of them in the
   HubSpot visual language, and adds the .hs-* application shell.
   ========================================================================= */

/* ---------- 1. tokens ---------- */
:root {
  /* type */
  --font-sans: "Lexend Deca", "HubSpot Sans", Helvetica, Arial, sans-serif;
  --font-mono: "Source Code Pro", ui-monospace, SFMono-Regular, monospace;

  /* neutral ramp (HubSpot greys) */
  --n-0:   #ffffff;
  --n-50:  #fafafa;
  --n-100: #f5f5f5;
  --n-150: #f0f0f0;
  --n-200: #e6e6e6;
  --n-300: #cccccc;
  --n-400: #b3b3b3;
  --n-500: #8a8a8a;
  --n-600: #666666;
  --n-700: #4d4d4d;
  --n-800: #333333;
  --n-900: #141414;

  /* interaction — teal is reserved for interaction only */
  --teal-link:    #006162;
  --teal-hover:   #004a4b;
  --teal-primary: #00494b;
  --teal-tint:    #eaf3f3;

  /* status hues — kept separate from interaction colour */
  --good:      #009a71;
  --good-bg:   #e5f5f0;
  --good-text: #00644d;

  --watch:      #d39913;
  --watch-bg:   #fdf3e0;
  --watch-text: #7a5605;

  --risk:      #d9002b;
  --risk-bg:   #fdeaed;
  --risk-text: #a1001f;

  --info:      #016de1;
  --info-bg:   #e8f2fe;
  --info-text: #00458f;

  --purple:    #6a78d1;
  --magenta:   #f2547d;
  --orange:    #ff7a59;

  /* legacy aliases — page-level inline CSS references these, so remapping
     them here re-skins every page-specific rule for free. */
  --bg:            var(--n-100);
  --card:          var(--n-0);
  --border:        var(--n-300);
  --border-strong: var(--n-500);
  --text:          var(--n-900);
  --text-2:        var(--n-800);
  --text-3:        var(--n-600);
  --muted-bg:      var(--n-100);

  /* geometry */
  --radius:      16px;
  --radius-sm:   8px;
  --radius-xs:   6px;
  --radius-pill: 999px;
  --shadow: none;
  --shadow-float: 0 2px 8px rgba(20, 20, 20, .12), 0 0 1px rgba(20, 20, 20, .16);

  --rail-w: 236px;
  --topbar-h: 44px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--n-800);
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5 { font-weight: 500; color: var(--text); margin: 0; }
::selection { background: #cfe6e6; }

/* ---------- 2. application shell ---------- */

/* 2a. global dark top bar */
.hs-topbar {
  height: var(--topbar-h);
  background: var(--n-800);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  color: var(--n-0);
  flex-shrink: 0;
}
.hs-logo {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--orange);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 600; font-size: 14px;
  flex-shrink: 0;
  letter-spacing: -.02em;
}
.hs-search {
  flex: 0 1 560px;
  height: 30px;
  background: var(--n-700);
  border: 1px solid #5c5c5c;
  border-radius: var(--radius-pill);
  display: flex; align-items: center;
  gap: 8px;
  padding: 0 12px 0 16px;
  color: #d9d9d9;
  font-size: 13px;
  margin-left: 8px;
}
.hs-search svg { width: 14px; height: 14px; opacity: .8; margin-left: auto; }
.hs-topbar-spacer { flex: 1; }
.hs-top-actions { display: flex; align-items: center; gap: 2px; }
.hs-top-btn {
  height: 30px;
  min-width: 30px;
  padding: 0 8px;
  border: 0; background: transparent;
  color: #f0f0f0;
  border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500;
  position: relative;
}
.hs-top-btn:hover { background: var(--n-700); }
.hs-top-btn svg { width: 16px; height: 16px; }
.hs-top-sep { width: 1px; height: 20px; background: #5c5c5c; margin: 0 6px; }
.hs-top-badge {
  position: absolute; top: 1px; right: 1px;
  min-width: 14px; height: 14px;
  border-radius: var(--radius-pill);
  background: var(--risk); color: #fff;
  font-size: 9px; font-weight: 600;
  display: grid; place-items: center;
  padding: 0 3px;
}
.hs-account {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 10px;
  border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 500; color: #f0f0f0;
  border: 0; background: transparent;
}
.hs-account:hover { background: var(--n-700); }
.hs-account .hs-avatar-dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: #d9d9d9;
}

/* 2b. shell body: dark nav + light content panel */
.hs-shell { display: flex; min-height: calc(100vh - var(--topbar-h)); background: var(--n-800); }

.hs-nav {
  width: var(--rail-w);
  flex-shrink: 0;
  background: var(--n-800);
  padding: 10px 12px 20px;
  display: flex; flex-direction: column;
  gap: 2px;
  color: #f0f0f0;
}
.hs-nav-item {
  display: flex; align-items: center; gap: 12px;
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 400;
  color: #f0f0f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hs-nav-item svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .92; }
.hs-nav-item:hover { background: var(--n-700); }
.hs-nav-item.is-active { background: var(--n-700); font-weight: 500; }
.hs-nav-sep { height: 1px; background: #4d4d4d; margin: 10px 8px; }
.hs-nav-label {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: #9c9c9c; padding: 12px 14px 6px; font-weight: 500;
}
.hs-nav-badge {
  margin-left: auto;
  background: var(--n-700);
  border: 1px solid #5c5c5c;
  color: #f0f0f0;
  font-size: 11px; font-weight: 500;
  border-radius: var(--radius-pill);
  padding: 0 7px; height: 18px;
  display: inline-flex; align-items: center;
}
.hs-nav-item.is-active .hs-nav-badge { background: #5c5c5c; }

/* the light rounded content plate that floats on the dark shell */
.hs-main {
  flex: 1;
  min-width: 0;
  background: var(--n-100);
  border-radius: 16px 0 0 0;
  padding: 0;
  display: flex; flex-direction: column;
}

/* 2c. page header strip inside the plate */
.hs-page-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 24px;
  flex-wrap: wrap;
}
.hs-page-title {
  font-size: 22px; font-weight: 500; letter-spacing: -.01em;
  color: var(--text);
  display: inline-flex; align-items: center; gap: 8px;
}
.hs-page-sub { font-size: 13px; color: var(--n-600); }
.hs-page-head .hs-spacer { flex: 1; }
.hs-page-actions { display: flex; align-items: center; gap: 8px; }

.hs-content { padding: 0 24px 32px; min-width: 0; }

/* ---------- 3. buttons ---------- */
.btn, .hs-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--n-500);
  background: var(--n-0);
  color: var(--text);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease;
}
.btn:hover, .hs-btn:hover { background: var(--n-100); border-color: var(--n-900); }
.btn svg, .hs-btn svg { width: 14px; height: 14px; color: var(--n-800); flex-shrink: 0; }

.btn.is-on, .hs-btn.is-on, .hs-btn--toggled {
  background: var(--n-200);
  border-color: var(--n-500);
  color: var(--text);
  font-weight: 500;
}
.hs-btn--primary {
  background: var(--teal-primary);
  border-color: var(--teal-primary);
  color: #fff;
}
.hs-btn--primary:hover { background: #003435; border-color: #003435; }
.hs-btn--primary svg { color: #fff; }
.hs-btn--ghost {
  border-color: transparent;
  background: transparent;
  font-weight: 500;
}
.hs-btn--ghost:hover { background: var(--n-200); border-color: transparent; }
.hs-btn--disabled, .btn[disabled] {
  background: var(--n-100); border-color: var(--n-200); color: var(--n-500);
  cursor: default;
}
.hs-btn--sm { height: 24px; padding: 0 12px; font-size: 12px; }
.hs-btn--icon { width: 32px; padding: 0; }
.hs-btn--icon.hs-btn--sm { width: 24px; }

/* legacy quick-launch style CTA */
.quick-launch-btn, .ql-btn {
  background: var(--teal-primary) !important;
  border: 1px solid var(--teal-primary) !important;
  color: #fff !important;
  border-radius: var(--radius-pill) !important;
}

/* ---------- 4. cards ---------- */
.card, .hs-card {
  background: var(--n-0);
  border: 1px solid var(--n-300);
  border-radius: var(--radius);
  box-shadow: none;
}
.card-header, .hs-card-head {
  padding: 16px 20px 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.card-title, .hs-card-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 2px;
  letter-spacing: -.005em;
}
.card-title-sm { font-size: 14px; font-weight: 500; margin: 0; }
.card-sub, .hs-card-sub { font-size: 12px; color: var(--n-600); margin: 0; font-weight: 400; }
.card-title-row { display: flex; align-items: center; gap: 8px; }
.card-icon { width: 15px; height: 15px; color: var(--n-600); }
.see-all {
  font-size: 13px;
  color: var(--teal-link);
  font-weight: 500;
  cursor: pointer;
}
.see-all:hover { color: var(--teal-hover); text-decoration: underline; }
.card-footer-note {
  margin: 0 20px;
  padding: 12px 0 16px;
  border-top: 1px solid var(--n-200);
  font-size: 13px;
  color: var(--n-600);
}
.card-footer-note b { color: var(--text); font-weight: 500; }

/* ---------- 5. links / text helpers ---------- */
.link, a.link {
  color: var(--teal-link);
  font-weight: 500;
  text-decoration: none;
}
.link:hover { text-decoration: underline; color: var(--teal-hover); }
.t-strong { font-weight: 500; }
.t-muted { color: var(--n-600); margin-left: 4px; font-weight: 400; }
.dash { color: var(--n-500); }
.amount { font-variant-numeric: tabular-nums; color: var(--text); }

/* ---------- 6. tabs (saved-view strip) ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: auto;
  min-height: 46px;
  border-bottom: 1px solid var(--n-300);
  margin: 0 0 16px;
  flex-wrap: wrap;
}
.tabs { display: flex; gap: 0; align-items: stretch; min-height: 44px; flex-wrap: wrap; }
.tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 400;
  color: var(--n-800);
  position: relative;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  white-space: nowrap;
}
.tab:hover { background: var(--n-200); }
/* the first saved-view tab doubles as the page title — only in the saved-view strip */
.topbar .tabs .tab:first-child {
  font-size: 22px; font-weight: 500; color: var(--text);
  padding-left: 0; margin-right: 8px;
}
.topbar .tabs .tab:first-child:hover { background: transparent; }
.tab.is-active {
  color: var(--text);
  font-weight: 500;
  background: var(--n-0);
  border: 1px solid var(--n-300);
  border-bottom-color: var(--n-0);
  margin-bottom: -1px;
}
.tab.is-active::after { content: none; }
.tab-badge {
  display: inline-flex; align-items: center;
  padding: 0 7px; height: 18px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 500;
  background: var(--n-200);
  color: var(--n-800);
}
.tab-badge-g { background: var(--good-bg); color: var(--good-text); }
.tab-badge-r { background: var(--risk-bg); color: var(--risk-text); }

/* filter / period control */
.period {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px;
  border: 1px solid var(--n-500);
  border-radius: var(--radius-pill);
  background: var(--n-0);
  color: var(--text);
  font-size: 12px;
}
.period svg { width: 14px; height: 14px; color: var(--n-800); }

/* ---------- 7. KPI strip ---------- */
.kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.kpi {
  background: var(--n-0);
  border: 1px solid var(--n-300);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: none;
}
.kpi-label {
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--n-600);
  font-weight: 500;
  margin-bottom: 6px;
}
.kpi-value {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.kpi-value-good { color: var(--good-text); }
.kpi-suffix { font-size: 14px; color: var(--n-600); font-weight: 400; }
.kpi-delta { font-size: 12px; margin-top: 6px; color: var(--n-600); }
.delta-up { color: var(--good-text); font-weight: 500; }
.delta-down { color: var(--risk-text); font-weight: 500; }
.delta-flat { color: var(--n-600); }

/* ---------- 8. layout grid ---------- */
.app { display: block; min-height: 100vh; }
.main { padding: 0; min-width: 0; }
.body-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  margin-bottom: 16px;
}
.side-col { display: flex; flex-direction: column; gap: 16px; }
.side-card { padding-bottom: 8px; }
.side-card .card-header { padding: 16px 20px 12px; }

/* ---------- 9. tables ---------- */
.table-card { overflow: hidden; }
.table-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--n-300);
}
.table-title { font-size: 16px; font-weight: 500; }
.table-actions { display: flex; gap: 8px; align-items: center; }

.clients, .hs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.clients thead th, .hs-table thead th {
  text-align: left;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--n-600);
  text-transform: none;
  font-weight: 500;
  padding: 10px 16px;
  border-bottom: 1px solid var(--n-300);
  background: var(--n-0);
  white-space: nowrap;
}
.clients thead th.ta-center, .hs-table thead th.ta-center { text-align: center; }
.clients thead th.ta-right,  .hs-table thead th.ta-right  { text-align: right; }
.clients tbody td, .hs-table tbody td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--n-300);
  vertical-align: middle;
  color: var(--text);
  height: 44px;
}
.clients tbody tr:hover, .hs-table tbody tr:hover { background: var(--n-50); }
.clients tbody tr:last-child td, .hs-table tbody tr:last-child td { border-bottom: none; }

/* primary (name) column is the one saturated scan-line per row */
.name-cell { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: center; }
.name-main { font-weight: 500; font-size: 14px; color: var(--teal-link); }
.name-main:hover { text-decoration: underline; }
.name-sub  { font-size: 12px; color: var(--n-600); margin-top: 1px; font-weight: 400; }

.ta-center { text-align: center; }
.ta-right  { text-align: right; }

.table-footer {
  padding: 14px 20px;
  font-size: 13px;
  color: var(--n-600);
  border-top: 1px solid var(--n-300);
}

/* pagination (HubSpot bottom-centre pill row) */
.hs-pagination {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 14px 20px;
  font-size: 13px;
}
.hs-page-btn {
  min-width: 28px; height: 28px;
  border-radius: var(--radius-pill);
  border: 0; background: transparent;
  color: var(--text); font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 8px;
}
.hs-page-btn:hover { background: var(--n-200); }
.hs-page-btn.is-active { background: var(--n-200); font-weight: 500; }

/* ---------- 10. status vocabulary ---------- */
.pill, .hs-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px;
  font-weight: 400;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  background: var(--n-200);
  color: var(--n-900);
  white-space: nowrap;
}
.pill-good  { background: var(--good-bg);  color: var(--good-text); }
.pill-watch { background: var(--watch-bg); color: var(--watch-text); }
.pill-risk  { background: var(--risk-bg);  color: var(--risk-text); }

.status-pill-tbl {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--radius-xs);
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
}
.status-pill-tbl .sp-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sp-risk    { background: var(--risk-bg);  color: var(--risk-text);  }
.sp-risk    .sp-dot { background: var(--risk); }
.sp-watch   { background: var(--watch-bg); color: var(--watch-text); }
.sp-watch   .sp-dot { background: var(--watch); }
.sp-grow    { background: var(--good-bg);  color: var(--good-text);  }
.sp-grow    .sp-dot { background: var(--good); }
.sp-unknown { background: var(--n-200);    color: var(--n-600);      }
.sp-unknown .sp-dot { background: var(--n-500); }

.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.s-good  { background: var(--good); }
.s-watch { background: var(--watch); }
.s-risk  { background: var(--risk); }
.s-open  { background: transparent; border: 1.5px solid var(--n-400); }

.sig-num {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
}
.sig-num .sig-ico { font-size: 12px; margin-left: 4px; }
.sig-growth { color: var(--good-text); }
.sig-growth .sig-ico { color: var(--good); }
.sig-risk { color: var(--risk-text); }
.sig-risk .sig-ico { color: var(--risk); }

.clients.hide-status .col-status { display: none; }

/* ---------- 11. avatars ---------- */
.avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--n-900);
  background: var(--n-200);
  flex-shrink: 0;
}
.avatar-lg { width: 30px; height: 30px; font-size: 11px; }

/* ---------- 12. charts ---------- */
.chart-card { display: flex; flex-direction: column; }
.chart-legend {
  display: flex; gap: 16px;
  margin: 0; padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--n-800);
}
.chart-legend li { display: inline-flex; align-items: center; gap: 6px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.dot-good  { background: var(--good); }
.dot-watch { background: var(--watch); }
.dot-risk  { background: var(--risk); }
.chart-wrap { padding: 8px 16px 18px; height: 260px; }

.donut-row { display: flex; align-items: center; gap: 20px; padding: 4px 20px 16px; }
.donut-wrap { position: relative; width: 108px; height: 108px; flex-shrink: 0; }
.donut-wrap canvas { width: 108px !important; height: 108px !important; }
.donut-center {
  position: absolute; inset: 0;
  transform: none;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; pointer-events: none;
}
.donut-num { font-size: 24px; font-weight: 500; line-height: 1; color: var(--text); }
.donut-lbl { font-size: 12px; color: var(--n-600); margin-top: 3px; }

.legend-list {
  list-style: none; margin: 0; padding: 0;
  font-size: 14px;
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; min-width: 0;
}
.legend-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px;
  border-radius: var(--radius-xs);
  color: var(--text);
}
.legend-list li.li-risk  { background: var(--risk-bg); }
.legend-list li.li-watch { background: var(--watch-bg); }
.legend-list li.li-good  { background: var(--good-bg); }
.legend-list .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.legend-list b {
  color: var(--text); font-weight: 500; font-size: 14px;
  min-width: 20px; display: inline-block;
  font-variant-numeric: tabular-nums;
}
.legend-list .lbl { color: var(--n-800); }

/* ---------- 13. sub-sections & mini lists ---------- */
.sub-section { border-top: 1px solid var(--n-200); padding: 14px 20px 6px; }
.sub-label {
  font-size: 12px; letter-spacing: 0; color: var(--n-600);
  text-transform: none; font-weight: 500; margin-bottom: 10px;
}
.account-mini { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.account-mini li {
  display: grid; grid-template-columns: 24px 1fr auto auto;
  gap: 10px; align-items: center; font-size: 13px;
}
.acc-name { font-weight: 500; color: var(--teal-link); }
.acc-amount { color: var(--n-600); font-size: 13px; }

/* rich list rows (used on the overview subject cards) */
.rich-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rich-item {
  display: grid; grid-template-columns: 30px 1fr auto;
  column-gap: 12px; align-items: start;
  padding: 12px 0;
  border-top: 1px solid var(--n-200);
  cursor: pointer;
}
.rich-item:first-child { border-top: none; }
.rich-item:hover { background: var(--n-50); }
.rich-item .ri-body { min-width: 0; }
.rich-item .ri-name { font-weight: 500; font-size: 14px; color: var(--teal-link); }
.rich-item .ri-tags { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.rich-item .ri-tag {
  font-size: 12px; background: var(--n-200); color: var(--n-800);
  padding: 2px 8px; border-radius: var(--radius-xs); white-space: nowrap;
}
.rich-item .ri-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.rich-item .ri-secondary { font-size: 13px; color: var(--n-600); font-variant-numeric: tabular-nums; }

/* ---------- 14. forms ---------- */
.hs-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.hs-label { font-size: 13px; font-weight: 500; color: var(--text); }
.hs-help  { font-size: 12px; color: var(--n-600); }
.hs-input, .hs-select, .hs-textarea,
input[type="text"], input[type="search"], input[type="email"], select, textarea {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text);
  background: var(--n-0);
  border: 1px solid var(--n-500);
  border-radius: var(--radius-xs);
  padding: 8px 12px;
  min-height: 36px;
  outline: none;
}
.hs-input:focus, .hs-select:focus, .hs-textarea:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--teal-primary);
  box-shadow: 0 0 0 1px var(--teal-primary);
}
.hs-searchbar {
  display: flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px;
  border: 1px solid var(--n-500);
  border-radius: var(--radius-xs);
  background: var(--n-0);
  font-size: 14px; color: var(--n-600);
  flex: 1; min-width: 200px;
}
.hs-searchbar svg { width: 15px; height: 15px; }

/* ---------- 15. alerts / banners ---------- */
.hs-alert, .mockup-banner {
  display: flex; align-items: center; gap: 12px;
  background: var(--info-bg);
  border: 1px solid #b6d9fb;
  border-radius: var(--radius);
  padding: 14px 18px;
  font-size: 14px;
  color: var(--text);
  margin: 0 0 16px;
}
.hs-alert a, .mockup-banner a { color: var(--teal-link); font-weight: 500; text-decoration: none; }
.hs-alert a:hover, .mockup-banner a:hover { text-decoration: underline; }
.hs-alert--caution { background: var(--watch-bg); border-color: #f0dda0; }
.hs-alert--danger  { background: var(--risk-bg);  border-color: #f5b8c1; }
.hs-alert--success { background: var(--good-bg);  border-color: #a8ded0; }

/* ---------- 16. empty state ---------- */
.hs-empty {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 10px;
  padding: 56px 24px;
  color: var(--n-600);
}
.hs-empty h3 { font-size: 18px; font-weight: 500; color: var(--text); }
.hs-empty p { margin: 0; font-size: 14px; max-width: 420px; }
.hs-empty-actions { display: flex; gap: 10px; margin-top: 8px; }

/* ---------- 17. progress ---------- */
.hs-progress { height: 8px; border-radius: var(--radius-pill); background: var(--n-200); overflow: hidden; }
.hs-progress > span { display: block; height: 100%; background: var(--teal-primary); border-radius: inherit; }

/* ---------- 18. legacy rail fallback (pages not yet reshelled) ---------- */
.rail {
  background: var(--n-800);
  border-right: none;
  display: flex; flex-direction: column;
  justify-content: space-between; align-items: center;
  padding: 12px 0;
}
.logo {
  width: 28px; height: 28px;
  background: var(--orange); color: #fff;
  border-radius: 8px;
  display: grid; place-items: center;
  font-weight: 600; font-size: 14px; margin-bottom: 18px;
}
.rail-nav, .rail-bottom { display: flex; flex-direction: column; gap: 4px; }
.rail-btn {
  width: 34px; height: 34px;
  border: none; background: transparent;
  border-radius: 10px;
  display: grid; place-items: center;
  color: #f0f0f0; padding: 0;
}
.rail-btn svg { width: 18px; height: 18px; }
.rail-btn.is-active { background: var(--n-700); color: #fff; }

/* ---------- 19. utility ---------- */
.hs-stack   { display: flex; flex-direction: column; gap: 16px; }
.hs-row     { display: flex; align-items: center; gap: 10px; }
.hs-divider { height: 1px; background: var(--n-300); margin: 16px 0; }
.hs-muted   { color: var(--n-600); }
.hs-mono    { font-family: var(--font-mono); }
.hs-num     { font-variant-numeric: tabular-nums; }

/* ---------- 20. shell reset ----------
   Legacy pages carried three different frame implementations (.app grid with
   an icon rail, .app grid with a 220px sidebar, and a bare centred .page).
   shell.js removes the old frames; these rules neutralise what they left
   behind so the unified shell owns all page-level layout. */
.hs-content > .app,
.hs-content .app {
  display: block !important;
  grid-template-columns: none !important;
  min-height: 0 !important;
  background: transparent !important;
}
.hs-content .main {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}
.hs-content > .page,
.hs-content .app > .page {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.hs-content .container,
.hs-content .wrap { max-width: none !important; margin: 0 !important; }

/* ---------- 21. shell polish ---------- */
.hs-account { white-space: nowrap; }
.hs-account svg { width: 14px; height: 14px; opacity: .8; }
.hs-top-btn svg { flex-shrink: 0; }
.hs-content { padding-top: 18px; }

/* HubSpot has no uppercase micro-labels — normalise the legacy eyebrow labels
   wherever the pages declared their own. Sentence case, 12px, grey. */
.kpi-label, .sub-label, .sc-sub-label, .pf-kpi-label, .sum-label,
.card-label, .metric-label, .stat-label, .section-label,
.rail-label, .eyebrow, .overline, .col-label, .field-label, .lbl-caps {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--n-600) !important;
}

/* Legacy table headers frequently re-declared uppercase inline */
table thead th { text-transform: none; letter-spacing: 0; }

/* segmented filter tabs (".ftab", ".filter-tabs") -> HubSpot saved-view tabs */
.filter-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--n-300); margin-bottom: 16px; }
.ftab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 16px; height: 40px;
  font-size: 14px; color: var(--n-800);
  border-radius: 8px 8px 0 0;
  cursor: pointer;
}
.ftab:hover { background: var(--n-200); }
.ftab.active, .ftab.is-active {
  background: var(--n-0);
  border: 1px solid var(--n-300);
  border-bottom-color: var(--n-0);
  margin-bottom: -1px;
  font-weight: 500;
  color: var(--text);
}
.ftab .count, .ftab .badge, .ftab span[class*="count"] {
  background: var(--n-200); color: var(--n-800);
  border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 500;
  padding: 0 7px; height: 18px;
  display: inline-flex; align-items: center;
}

/* ---------- 22. recurring prototype patterns ---------- */

/* action toolbar above a table/list — HubSpot renders these as a quiet text row,
   not a row of same-weight outlined pills (their own documented weak spot). */
.hs-toolbar {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  background: var(--n-0);
  border: 1px solid var(--n-300);
  border-radius: var(--radius);
  padding: 8px 12px;
  margin-bottom: 12px;
}
.hs-toolbar > * { flex-shrink: 0; }
.hs-toolbar-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px;
  border: 0; background: transparent;
  border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 500; color: var(--n-900);
}
.hs-toolbar-btn:hover { background: var(--n-200); }
.hs-toolbar-btn svg { width: 14px; height: 14px; }
.hs-toolbar-sep { width: 1px; height: 20px; background: var(--n-300); margin: 0 6px; }

/* segmented control (Contacts | Companies) */
.hs-segmented {
  display: inline-flex; padding: 2px;
  background: var(--n-200);
  border-radius: var(--radius-pill);
}
.hs-segmented > * {
  height: 28px; padding: 0 14px;
  border: 0; background: transparent;
  border-radius: var(--radius-pill);
  font-size: 13px; color: var(--n-800);
  display: inline-flex; align-items: center;
}
.hs-segmented > .is-active {
  background: var(--n-0);
  color: var(--text);
  font-weight: 500;
}

/* skeleton / placeholder rows the prototype used as filler */
.hs-skeleton, .skeleton, .placeholder-bar {
  background: var(--n-200);
  border-radius: var(--radius-pill);
  height: 10px;
}

/* numbers stay in the UI face, tabular — HubSpot never sets figures in mono */
.pct, .percent, .num, td .num { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }

/* collapsible record-section header (left rail of the record pages) */
.hs-section {
  background: var(--n-0);
  border: 1px solid var(--n-300);
  border-radius: var(--radius);
  margin-bottom: 12px;
}
.hs-section-head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px;
  font-size: 15px; font-weight: 500; color: var(--text);
}
.hs-section-head .hs-chevron { width: 14px; height: 14px; color: var(--n-800); }
.hs-section-head .hs-count { font-size: 13px; color: var(--n-600); font-weight: 400; }
.hs-section-body { padding: 0 18px 16px; }

/* Elements the prototype pinned to the viewport now collide with the shell.
   Handled per page rather than globally — a blanket override would also
   flatten legitimate overlays and drawers. */

/* ---------- 23. record-page patterns (raised by the record-pages pass) ---------- */

/* the remaining page-local eyebrow-label class names */
.sec-label, .synthesis-title, .panel-title, .rtable-heading, .tg-label,
.tl-sec, .lsec-toggle, .why-label, .afb-src, .scard-title, .q-label,
.trend-month {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* collapsible record left rail — was duplicated verbatim across four pages */
.hs-rail { display: flex; flex-direction: column; gap: 12px; }
.hs-rail-card {
  background: var(--n-0);
  border: 1px solid var(--n-300);
  border-radius: var(--radius);
  padding: 14px 18px;
}
.hs-rail-head {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  background: none; border: 0; padding: 0;
  font: 500 14px/1.4 var(--font-sans);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.hs-rail-head .hs-rail-sub { font-weight: 400; font-size: 12px; color: var(--n-600); }
.hs-rail-head .hs-rail-chev { margin-left: auto; color: var(--n-500); transition: transform .18s ease; }
.hs-rail-head[aria-expanded="true"] .hs-rail-chev { transform: rotate(90deg); }
.hs-rail-body { padding-top: 12px; }

.hs-empty > svg { width: 40px; height: 40px; color: var(--n-500); }

/* bespoke record tables share the list-view convention: teal primary column */
.rtable td:first-child a,
.rtable .stxt-name,
.rtable .r-name { color: var(--teal-link); font-weight: 500; }
.rtable td:first-child a:hover,
.rtable .r-name:hover { text-decoration: underline; }

/* ---------- 24. legacy frame neutralisation (raised by the core-pages pass) ----------
   Several pages built their own full-viewport frame: `height:100vh; overflow:hidden` on
   `.app`/`.main` with an inner `overflow-y:auto` scroller, or a fixed `.overlay` / `.ql-scrim`.
   Inside the unified shell those either trap scrolling or cover the navigation. */
.hs-content .app,
.hs-content .main,
.hs-content .content,
.hs-content .overlay {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
/* Only a DIRECT child of the content plate is a leftover legacy frame. Nested,
   script-toggled dialogs use the same class names and must stay fixed. */
.hs-content > .overlay,
.hs-content > .ql-scrim {
  position: static !important;
  inset: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ---------- 25. promoted status vocabulary ----------
   Every page reinvented the same three status tags under different names. */
.tag-good, .pill-green, .abs-good, .risk-none, .risk-low, .db-settled,
.tag-watch, .pill-amber, .abs-watch, .risk-medium, .db-undecided,
.tag-risk, .pill-red, .abs-poor, .risk-high, .db-stop {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 400;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  white-space: nowrap;
}
.tag-good, .pill-green, .abs-good, .risk-none, .risk-low, .db-settled   { background: var(--good-bg);  color: var(--good-text); }
.tag-watch, .pill-amber, .abs-watch, .risk-medium, .db-undecided        { background: var(--watch-bg); color: var(--watch-text); }
.tag-risk, .pill-red, .abs-poor, .risk-high, .db-stop                   { background: var(--risk-bg);  color: var(--risk-text); }

/* ---------- 26. promoted pill-button vocabulary ----------
   ~8 near-identical local button rules across the prototype, now one box. */
.ctrl-btn, .filter-pill, .af-btn, .act-btn, .release-btn, .opt, .tlbtn, .qarrow {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--n-500);
  background: var(--n-0);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 400; line-height: 1;
  white-space: nowrap;
}
.ctrl-btn:hover, .filter-pill:hover, .af-btn:hover, .act-btn:hover,
.release-btn:hover, .opt:hover, .tlbtn:hover, .qarrow:hover {
  background: var(--n-100); border-color: var(--n-900);
}
.ctrl-btn.is-active, .filter-pill.is-active, .filter-pill.active, .opt.selected {
  background: var(--n-200); font-weight: 500;
}
.hs-btn--icon-round, .tlbtn, .qarrow { width: 32px; padding: 0; }

/* ---------- 27. control resets & meters (raised by the activity pass) ---------- */
.ftab, .etab { background: none; border: 0; font-family: inherit; }

/* bare <input> with no type attribute fell through to browser defaults */
input:not([type]),
input[type="number"], input[type="url"], input[type="tel"], input[type="date"] {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text);
  background: var(--n-0);
  border: 1px solid var(--n-500);
  border-radius: var(--radius-xs);
  padding: 8px 12px;
  min-height: 36px;
  outline: none;
}

/* stage / percentage meter — matches the onboarding capture */
.hs-meter { display: flex; align-items: center; gap: 10px; }
.hs-meter .hs-progress { flex: 1; height: 8px; }
.hs-meter .hs-meter-val {
  font-size: 12px; color: var(--n-600);
  font-variant-numeric: tabular-nums;
  min-width: 36px; text-align: right;
}

/* ---------- 28. card footer & chart status series (raised by the portfolio pass) ---------- */
.hs-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--n-200);
  font-size: 13px;
  color: var(--n-600);
}
.hs-card-foot a, .hs-card-foot .see-all { color: var(--teal-link); font-weight: 500; }

/* the canonical five chart/status series — chips and charts must not drift apart */
:root {
  --series-good:      #009a71;
  --series-watch:     #d39913;
  --series-risk:      #d9002b;
  --series-unknown:   #cccccc;
  --series-churned:   #4d4d4d;
}

/* ---------- 29. progress variants & inline icons (raised by the progress pass) ---------- */
/* .hs-progress's fill was hard-wired to the interaction hue — the one colour that must not
   carry status. Progress that means "how healthy" takes a status hue instead. */
.hs-progress--good  > span { background: var(--good); }
.hs-progress--watch > span { background: var(--watch); }
.hs-progress--risk  > span { background: var(--risk); }
.hs-progress--info  > span { background: var(--info); }
.hs-progress--neutral > span { background: var(--n-700); }

/* inline icon helper — 1.6px stroke, currentColor, optically aligned with 14px text */
.gi {
  width: 14px; height: 14px;
  flex-shrink: 0;
  vertical-align: -2px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gi-lg { width: 16px; height: 16px; vertical-align: -3px; }

/* ---------- 30. inline icon sizing (raised by the polish pass) ----------
   Icons are emitted exactly as shell.js's svg() helper does:
   viewBox 0 0 24 24, fill:none, stroke:currentColor, stroke-width 1.6, round caps/joins. */
svg.ic      { width: 14px; height: 14px; flex: 0 0 auto; vertical-align: -2px; color: currentColor; }
svg.ic-16   { width: 16px; height: 16px; vertical-align: -3px; }
svg.ic-mark { width: 11px; height: 11px; vertical-align: 0; }   /* inside 19–20px step/status discs */

/* status dots, where a filled ● / ○ / ◑ glyph used to stand in */
.dotm {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1.6px solid currentColor;
  box-sizing: border-box;
  vertical-align: -1px;
}
.dotm.is-full { background: currentColor; }
.dotm.is-half { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }

/* =========================================================================
   31. Fidelity corrections — measured against the benchmark capture
   (computed styles from brand-reference/*.html, not estimated).
   ========================================================================= */

/* 31.1 the content plate is #f0f0f0, not #f5f5f5 — five units of luminance is
   the entire card-to-canvas contrast budget */
.hs-main { background: var(--n-150); }

/* 31.2 HubSpot cards carry a shadow IN ADDITION to the 1px border */
:root { --shadow-card: 0 1px 8px rgba(20, 20, 20, .08); }
.card, .hs-card, .kpi, .hs-section, .hs-rail-card { box-shadow: var(--shadow-card); }

/* 31.3 row density: HubSpot buys density by moving space sideways, not down */
.clients thead th, .hs-table thead th { padding: 0 24px; height: 36px; }
.clients tbody td, .hs-table tbody td { padding: 2px 24px; height: 40px; }
.name-cell { line-height: 18px; }
.name-sub { margin-top: 0; }

/* 31.5 saved-view tabs: 48px, idle filled #f5f5f5, bordered container merging
   into the panel below */
.tabs {
  border: 1px solid var(--n-300);
  border-radius: 6px 6px 0 0;
  margin-bottom: -1px;
  overflow: hidden;
  min-height: 48px;
}
.tab, .ftab {
  height: 48px;
  padding: 12px 28px;
  border-radius: 0;
  background: var(--n-100);
}
.tab.is-active, .ftab.active, .ftab.is-active {
  background: var(--n-0);
  border: 0;
  border-radius: 6px 0 0 0;
  font-weight: 500;
  margin-bottom: 0;
}
/* the page-title exception stays outside the bordered strip */
.topbar .tabs { border: 0; border-radius: 0; overflow: visible; }
.topbar .tabs .tab:first-child { background: transparent; height: auto; padding: 12px 0; }

/* 31.7 nav rows are 52px in the capture, not 40px */
.hs-nav-item { height: 52px; }
.hs-nav { gap: 0; }

/* 31.8 page title is 20px/500 */
.hs-page-title { font-size: 20px; line-height: 24px; }

/* 31.9 inputs are a size band larger, and their border is #333 — #8a8a8a is
   HubSpot's BUTTON border, not its input border */
.hs-input, .hs-select, .hs-textarea,
input[type="text"], input[type="search"], input[type="email"],
input:not([type]), select, textarea {
  font-size: 16px;
  min-height: 40px;
  padding: 8px 16px;
  border-color: var(--n-800);
}
.hs-label { font-size: 14px; font-weight: 400; }
.hs-field { gap: 2px; }

/* 31.10 anything that opens a list of values is a 6px rectangle; pills are for
   buttons and chips only */
.hs-select, select, .step-select {
  border-radius: var(--radius-xs);
  height: 36px;
}

/* 31.11 progress meters: 6px track, 6px radius, #ebebeb, status fill */
.hs-progress { height: 6px; border-radius: var(--radius-xs); background: #ebebeb; }
.hs-progress > span { border-radius: inherit; background: var(--good); }
.hs-progress--info > span { background: var(--info); }
.hs-progress--teal > span { background: var(--teal-primary); }

/* 31.5b The capture's tabs sit at 28px side padding across five tabs; our saved-view
   strips carry up to eight, so they are set at 20px to keep the strip on one row
   with the period control and the page actions. */
.tab, .ftab { padding: 12px 20px; }
.topbar { flex-wrap: nowrap; }
.topbar .tabs { flex: 0 1 auto; min-width: 0; flex-wrap: wrap; }
.topbar .period { margin-left: auto; flex-shrink: 0; }
.topbar .tabs .tab:first-child { font-size: 20px; line-height: 24px; }

/* 31.5c The contacts-list capture (01) shows the saved-view strip WITHOUT a container
   border — the active tab alone is boxed. The bordered container in 02/08 belongs to the
   record/settings tab strip. Our strips carry more tabs and wrap, so the borderless
   variant is the correct one to generalise. */
.tabs { border: 0; border-radius: 0; overflow: visible; margin-bottom: 0; }
.tab, .ftab { padding: 12px 18px; }
.tab.is-active, .ftab.active, .ftab.is-active {
  background: var(--n-0);
  border: 1px solid var(--n-300);
  border-bottom-color: var(--n-0);
  border-radius: 6px 6px 0 0;
  margin-bottom: -1px;
}

/* =========================================================================
   32. List anatomy, promoted (raised by the final list-view pass)
   ========================================================================= */

/* 32.1 the density rule reaches any table that opts in, not just .clients */
.clients thead th, .hs-table thead th, .hs-list thead th { padding: 0 24px; height: 36px; }
.clients tbody td, .hs-table tbody td, .hs-list tbody td { padding: 2px 24px; height: 40px; }

/* 32.2 the selection and row-expand columns must out-specify the generic cell padding,
   or the header checkbox drifts off its own column */
th.col-check, td.col-check {
  width: 44px !important; min-width: 44px;
  padding-left: 0 !important; padding-right: 0 !important;
  text-align: center !important;
}
th.col-caret, td.col-caret {
  width: 28px !important; min-width: 28px;
  padding-left: 0 !important; padding-right: 0 !important;
  text-align: center !important;
}
.col-check input[type="checkbox"] {
  width: 16px; height: 16px; min-height: 0; padding: 0; margin: 0;
  accent-color: var(--teal-primary);
}
.col-caret svg { width: 14px; height: 14px; color: var(--n-600); vertical-align: middle; }

/* 32.3 the 1px border that belongs on a status-tinted surface */
:root {
  --good-border:  #a8ded0;
  --watch-border: #f0d9a8;
  --risk-border:  #f5b8c1;
  --info-border:  #b6d9fb;
}
.hs-alert          { border-color: var(--info-border); }
.hs-alert--success { border-color: var(--good-border); }
.hs-alert--caution { border-color: var(--watch-border); }
.hs-alert--danger  { border-color: var(--risk-border); }

/* 31.2b One card, one elevation. The page-local card classes carry the same treatment as
   .card/.hs-card, so the set does not render two elevations side by side. */
.treat, .event-card, .lcard, .kpi-card, .pv8-card, .sig-card, .rail-card, .wrap,
.attcard, .afb-event, .swot-cell, .kpi-group, .kpi-element, .tbl-card, .hd-card,
.scard, .panel-card, .donut-card, .topics-card, .pcard, .ov-card, .tcard,
.stepcard, .stagecard, .crm-card, .sunit, .synthesis-box, .survey-panel,
.trend-card, .list-card, .pv8-notes, .ql-panel, .feedcol {
  box-shadow: var(--shadow-card);
}

/* 31.5d Pages mark the current tab as either `.is-active` or `.active`. Both must hit the
   same rule, or a page silently keeps a second tab component. */
.tab.active, .ftab.active, .etab.active,
.tab.is-active, .ftab.is-active, .etab.is-active {
  background: var(--n-0);
  color: var(--text);
  font-weight: 500;
  border: 1px solid var(--n-300);
  border-bottom-color: var(--n-0);
  border-radius: 6px 6px 0 0;
  margin-bottom: -1px;
}