/* =========================================================================
   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;
}

/* =========================================================================
   33. AGILEDAY DIRECTION — palette layer  (nudge-03)
   Values are lifted from agileday.com's own :root token block and its
   computed styles, not estimated:
     --black-new #030712 · --darkest-gray-new #111827 · --button-hover-gray #1f2937
     --button-active-gray #374151 · --gray-font-new #4b5563 · --gray-dark #6b7280
     --gray-light #d5d8de · --gray-light-new #e5e7eb · --lightest-gray-new #efeff1
     --gray-new #fafafa · --purple #90c · --pink #d3f · --light-purple #e8e0ff
     --blue #3a69f8 · --green #004f3b
   The ramp is cool (blue-cast) where the HubSpot ramp was pure grey.
   Agileday spends its darkest ink on ONE thing — the primary action — and
   keeps magenta as a garnish. The rail therefore comes out of the dark.
   ========================================================================= */
:root {
  /* neutral ramp — Agileday's, one-for-one */
  --n-0:   #ffffff;
  --n-50:  #fcfcfd;
  --n-100: #fafafa;
  --n-150: #f7f8f8;
  --n-200: #efeff1;
  --n-300: #e5e7eb;
  --n-400: #d5d8de;
  --n-500: #9ca3af;
  --n-600: #6b7280;
  --n-700: #4b5563;
  --n-800: #374151;
  --n-900: #111827;
  --ink:   #030712;

  /* interaction — near-black carries the primary action, magenta is the hit */
  --teal-primary: #111827;      /* primary button fill  (was #00494b) */
  --teal-hover:   #5c007c;
  --teal-link:    #7d00a8;      /* link text, 7.2:1 on white */
  --teal-tint:    #f7edfc;
  --accent:       #9900cc;      /* = agileday --purple */
  --accent-tint:  #f7edfc;
  --accent-line:  #e8ccf6;

  /* status — re-tuned into the cool ramp; separation is carried by hue AND
     by four different pill treatments, not by hue alone */
  --good:      #0f7a5e;
  --good-bg:   #eaf5f1;
  --good-text: #0b5b46;
  --good-border: #b6dbcd;

  --watch:      #b45309;
  --watch-bg:   #fdf5e9;
  --watch-text: #8a3f07;
  --watch-border: #e8cd9c;

  --risk:      #b3123c;
  --risk-bg:   #fdf0f4;
  --risk-text: #8f0e30;
  --risk-border: #edb6c6;

  --info:      #3a69f8;         /* = agileday --blue */
  --info-bg:   #eef2fe;
  --info-text: #1c3fbc;
  --info-border: #c3d0fb;

  --series-good:    #0f7a5e;
  --series-watch:   #b45309;
  --series-risk:    #b3123c;
  --series-unknown: #d5d8de;
  --series-churned: #4b5563;

  --purple:  #9900cc;
  --magenta: #dd33ff;
  --orange:  #111827;           /* the app mark goes black, like their wordmark */

  --text:   #030712;
  --text-2: #374151;
  --text-3: #6b7280;
  --border: #e5e7eb;
  --border-strong: #d5d8de;
  --bg:     #fafafa;
  --muted-bg: #fafafa;

  --shadow-card: none;          /* Agileday elevates with hairlines only */
  --shadow-float: 0 4px 16px rgba(3, 7, 18, .08);
  --topbar-h: 56px;
}

/* ---- chrome: the shell comes out of the dark -------------------------- */
.hs-topbar {
  background: var(--n-0);
  color: var(--ink);
  border-bottom: 1px solid var(--n-300);
  padding: 0 20px;
  gap: 14px;
}
.hs-logo { background: #111827; color: #fff; }
.hs-search {
  background: var(--n-0);
  border: 1px solid var(--n-300);
  color: var(--n-600);
  height: 34px;
}
.hs-top-btn { color: var(--n-700); }
.hs-top-btn:hover { background: var(--n-200); }
.hs-top-sep { background: var(--n-300); }
.hs-account { color: var(--n-900); }
.hs-account:hover { background: var(--n-200); }
.hs-account .hs-avatar-dot { background: var(--n-400); }
.hs-top-badge { background: var(--risk); }

.hs-shell { background: var(--n-0); }
.hs-nav {
  background: var(--n-0);
  border-right: 1px solid var(--n-300);
  color: var(--n-700);
  padding: 12px 12px 24px;
}
.hs-nav-item { color: var(--n-700); font-weight: 400; }
.hs-nav-item:hover { background: var(--n-200); }
.hs-nav-item.is-active {
  background: var(--accent-tint);
  color: var(--ink);
  font-weight: 500;
}
.hs-nav-item.is-active svg { color: var(--accent); opacity: 1; }
.hs-nav-sep { background: var(--n-300); }
.hs-nav-label { color: var(--n-500); }
.hs-nav-badge {
  background: var(--n-0);
  border: 1px solid var(--n-300);
  color: var(--n-700);
}
.hs-nav-item.is-active .hs-nav-badge {
  background: var(--n-0);
  border-color: var(--accent-line);
  color: var(--teal-link);
}

.hs-main { background: var(--n-100); border-radius: 0; }

/* ---- surfaces --------------------------------------------------------- */
.card, .hs-card,
.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 {
  background: var(--n-0);
  border-color: var(--n-300);
  box-shadow: none;
}
.clients thead th, .hs-table thead th, .hs-list thead th { background: var(--n-0); color: var(--n-600); }
.clients tbody tr:hover, .hs-table tbody tr:hover { background: var(--n-100); }

/* ---- buttons: near-black primary, hairline secondary ------------------- */
.btn, .hs-btn { border-color: var(--n-300); color: var(--n-900); }
.btn:hover, .hs-btn:hover { background: var(--n-100); border-color: var(--n-400); }
.btn svg, .hs-btn svg { color: var(--n-700); }
.hs-btn--primary,
.quick-launch-btn, .ql-btn {
  background: #111827 !important;
  border-color: #111827 !important;
  color: #fff !important;
}
.hs-btn--primary:hover { background: #1f2937; border-color: #1f2937; }
.btn.is-on, .hs-btn.is-on, .hs-btn--toggled { background: var(--n-200); border-color: var(--n-400); }
.period { border-color: var(--n-300); }
.period svg { color: var(--n-700); }

/* ---- status: four treatments, so hue is not the only carrier ----------- */
.status-pill-tbl, .pill, .hs-tag { font-weight: 500; border: 1px solid transparent; }
.sp-risk, .pill-risk   { background: var(--risk);  color: #fff; border-color: var(--risk); }
.sp-risk .sp-dot       { background: #fff; }
.sp-watch, .pill-watch { background: var(--watch-bg); color: var(--watch-text); border-color: var(--watch-border); }
.sp-grow, .pill-good   { background: var(--good-bg);  color: var(--good-text);  border-color: transparent; }
.sp-unknown            { background: var(--n-0); color: var(--n-600); border-color: var(--n-400); }
.sp-unknown .sp-dot    { background: transparent; border: 1.5px solid var(--n-500); box-sizing: border-box; }

/* selection + focus carry the accent */
.col-check input[type="checkbox"] { accent-color: var(--accent); }
::selection { background: #f0d7fb; }
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* =========================================================================
   34. AGILEDAY DIRECTION — type layer  (nudge-03)
   Measured from agileday.com:
     one family (Inter) for everything; h1 64/80 w500 ls -1px (-0.0156em);
     h2 48/64 w500 ls -0.5px (-0.0104em); lead 20/30 w400 #4b5563;
     body 16/24 w400 #030712; button 14 w500 ls +0.14px (+0.01em) r8.
     Weight histogram in their stylesheet: 500 × 62, 400 × 25, 600 × 5.
   So: 500 is the heading weight, 400 is the text weight, nothing above 500,
   negative tracking on display sizes, positive tracking on control labels.
   ========================================================================= */
:root {
  --font-sans: Inter, "Lexend Deca", Helvetica, Arial, sans-serif;
}
body { font-size: 14px; letter-spacing: 0; }
h1, h2, h3, h4, h5 { font-weight: 500; letter-spacing: -.011em; }
strong, b { font-weight: 500; }

/* display / value sizes take Agileday's negative tracking */
.hs-page-title, .topbar .tabs .tab:first-child { font-size: 22px; letter-spacing: -.011em; font-weight: 500; }
.kc-val, .pf-kpi-value, .pf-donut-num, .sc-kpi-num, .pv8-num, .kpi-value, .hs-kpi-value {
  letter-spacing: -.022em; font-weight: 500; font-variant-numeric: tabular-nums;
}
.card-title, .hs-card-title, .table-title { letter-spacing: -.011em; font-weight: 500; }

/* control labels take their +0.01em */
.btn, .hs-btn, .period, .tab, .ftab, .hs-page-btn {
  letter-spacing: .01em; font-weight: 500; font-size: 13px;
}
.btn, .hs-btn { border-radius: 8px; }
.tab, .ftab { font-weight: 400; font-size: 14px; letter-spacing: 0; }
.tab.is-active, .ftab.is-active, .ftab.active, .tab.active { font-weight: 500; }
.clients thead th, .hs-table thead th, .hs-list thead th {
  font-weight: 500; font-size: 12px; letter-spacing: .01em; color: var(--n-600);
}
.hs-nav-item { font-size: 14px; letter-spacing: 0; }
.kc-label, .sc-kpi-lbl, .pf-kpi-label, .sc-sub-label, .pf-chart-sub {
  letter-spacing: .01em; font-weight: 500; text-transform: none;
}

/* nothing above 500 anywhere */
.hs-logo, .hs-top-badge, .hs-nav-badge, .tab-badge, .avatar, .hs-badge { font-weight: 500; }

/* ---- interaction colour is spent sparingly, the way they spend magenta ---
   Their tables and lists carry dark ink, not a link hue. Only the explicit
   "go somewhere else" affordances take the accent. */
.name-main, a.name-main, .ri-name, .sc-list .name { color: var(--ink); font-weight: 500; }
.name-main:hover { color: var(--teal-link); text-decoration: underline; }
.see-all, .pv8-see-all, .hs-card-foot a, .hs-card-foot .see-all, .link, a.link {
  color: var(--teal-link); font-weight: 500; letter-spacing: 0;
}

/* =========================================================================
   35. AGILEDAY DIRECTION — detail layer  (nudge-03)
   Their geometry, measured: buttons r8 / 1px #e5e7eb / 6px 12px padding,
   cards r12–r16 / 1px hairline / no shadow, chips r6–r8 white-on-hairline,
   large plates r32. Almost nothing on their page is a true pill; the
   prototype was pills-by-default. Density is unchanged — same row heights,
   same six-across KPI row, same nine-row table.
   ========================================================================= */
:root {
  --radius:    12px;
  --radius-sm:  8px;
  --radius-xs:  6px;
}

/* controls come off the pill */
.hs-search, .period, .hs-top-btn, .hs-account, .hs-page-btn,
.hs-nav-badge, .tab-badge, .hs-btn, .btn, .quick-launch-btn, .ql-btn {
  border-radius: 8px !important;
}
.hs-nav-badge, .tab-badge, .hs-page-btn { border-radius: 6px !important; }
.avatar, .rl-avatar, .status-dot, .dot, .dotm, .sp-dot, .hs-avatar-dot { border-radius: 50% !important; }
.hs-nav-item { border-radius: 8px; }

/* chips are white on a hairline, the way their feature chips are */
.rl-tag, .ri-tag, .rich-item .ri-tag, .chip, .hs-chip {
  background: var(--n-0);
  border: 1px solid var(--n-300);
  color: var(--n-700);
  border-radius: 6px;
  font-weight: 400;
}

/* names in list cards read as ink, matching the table below them */
.rl-name, .rich-item .ri-name { color: var(--ink); }
.rl-item:hover .rl-name, .rich-item:hover .ri-name { color: var(--teal-link); text-decoration: underline; }

/* the four status treatments reach the page-local pills too */
.rl-pill { border: 1px solid transparent; font-weight: 500; }
.rl-pill.cat-risk   { background: var(--risk); color: #fff; border-color: var(--risk); }
.rl-pill.cat-watch  { background: var(--watch-bg); color: var(--watch-text); border-color: var(--watch-border); }
.rl-pill.cat-good   { background: var(--good-bg);  color: var(--good-text);  border-color: transparent; }
.rl-pill.cat-unmeas { background: var(--n-0); color: var(--n-600); border-color: var(--n-400); }
.status-pill-port { font-weight: 500; }

/* elevation is a hairline, never a shadow */
.card, .hs-card, .ov-card, .kpi-group, .tbl-card, .list-card, .trend-card,
.pv8-card, .sig-card, .scard, .pcard, .tcard { box-shadow: none; }
.hs-menu, .pd-pop, .tlpop, .ql-panel, .signal-tooltip {
  box-shadow: var(--shadow-float);
  border: 1px solid var(--n-300);
  border-radius: 12px;
}

/* separators are all one hairline value */
.pv8-divider, .hs-nav-sep, .card-footer-note, .table-footer, .topbar,
.sc-kpis, .pf-donut-row, .rich-item, .rl-item {
  border-color: var(--n-300);
}
.topbar { border-bottom-color: var(--n-300); }

/* the rail's active row: a magenta hit on an otherwise white shell */
.hs-nav-item.is-active { background: #f5e8fc; }

/* the KPI cluster reads as one bordered strip, hairline-divided */
.kpi-group { border-color: var(--n-300); }
.kc { border-left-color: var(--n-300); }

/* inputs: 8px rect, hairline, not a heavy #333 border */
.hs-input, .hs-select, .hs-textarea,
input[type="text"], input[type="search"], input[type="email"],
input:not([type]), select, textarea {
  border-color: var(--n-300);
  border-radius: 8px;
  font-size: 14px;
  min-height: 36px;
}

/* =========================================================================
   36. AGILEDAY DIRECTION — final pass  (nudge-03)
   Page-local <style> blocks sit after the linked sheet, so a handful of
   rules need one more class of specificity to reach them. Nothing new is
   decided here; this is the same three layers landing everywhere.
   ========================================================================= */
.hs-content .rl-name, .hs-content .rich-item .ri-name, .hs-content .name-main {
  color: var(--ink);
}
.hs-content .rl-item:hover .rl-name,
.hs-content .rich-item:hover .ri-name,
.hs-content .name-main:hover { color: var(--teal-link); text-decoration: underline; }

.hs-content .rl-pill { border: 1px solid transparent; font-weight: 500; }
.hs-content .rl-pill.cat-risk   { background: var(--risk); color: #fff; border-color: var(--risk); }
.hs-content .rl-pill.cat-watch  { background: var(--watch-bg); color: var(--watch-text); border-color: var(--watch-border); }
.hs-content .rl-pill.cat-good   { background: var(--good-bg);  color: var(--good-text);  border-color: transparent; }
.hs-content .rl-pill.cat-unmeas { background: var(--n-0); color: var(--n-600); border-color: var(--n-400); }
.hs-content .rl-tag, .hs-content .rich-item .ri-tag {
  background: var(--n-0); border: 1px solid var(--n-300); color: var(--n-700); border-radius: 6px;
}
.hs-content .status-pill-port.cat-risk,  .hs-content .status-pill-port.sp-risk  { background: var(--risk); color: #fff; }
.hs-content .rl-avatar, .hs-content .avatar { background: var(--n-200); color: var(--n-700); }

/* card corners follow the token, including the page-local card classes */
.hs-content .ov-card, .hs-content .kpi-group, .hs-content .tbl-card,
.hs-content .pv8-card, .hs-content .list-card, .hs-content .trend-card,
.hs-content .scard, .hs-content .pcard, .hs-content .tcard, .hs-content .sig-card {
  border-radius: var(--radius);
}
.hs-content .ab-name, .hs-content .acct-name, .hs-content .cust-name { color: var(--ink); }
.hs-content .ab-row:hover .ab-name { color: var(--teal-link); text-decoration: underline; }

/* =========================================================================
   37. MIXPANEL DIRECTION v2 — palette layer  (nudge-01-mixpanel-v2)

   Round one made this product near-black. That is rejected: Foxie sells to
   commercial and delivery leadership, and a dark operator console reads as an
   IT tool. So the canonical LIGHT product UI (§33–36, the Agileday restyle) is
   kept, and only tuned toward Mixpanel's visual language.

   What comes from Mixpanel, measured off _sources/mixpanel:
     ink #1F2023 (near-black, faint blue bias) · ground #FFFFFF / #FAFAFA
     hairline #EAEAEA · brand violet #7856FF
   What is deliberately NOT taken from them: their secondary data ramp
   (coral / amber / mint / sky). Round one mapped status onto it and lost the
   traffic light. Status here stays red / amber / green / grey; the tones are
   only cooled and de-yellowed a little so they sit under a violet accent.
   ========================================================================= */

/* Garnett is Mixpanel's licensed brand face, pulled from their own CDN so the
   app renders sit convincingly on the page. Study asset — a clean rebuild must
   replace it, and it is the one thing here that needs network. */
@font-face { font-family: "Garnett Medium";  src: url("https://framerusercontent.com/assets/rEHnEvAsgbukh0QUeqSHBvG6PnI.woff2"); font-display: swap; font-weight: 500; }
@font-face { font-family: "Garnett Regular"; src: url("https://framerusercontent.com/assets/v6eZbzgEth8Leebqk8eQxltDlKQ.woff2"); font-display: swap; font-weight: 400; }

:root {
  /* neutral ramp — Mixpanel's ground and ink, with the mid-tones carrying a
     faint violet bias so grey and accent read as one family */
  --n-0:   #ffffff;
  --n-50:  #fdfdfe;
  --n-100: #fafafa;
  --n-150: #f6f6f8;
  --n-200: #f0f0f3;
  --n-300: #eaeaee;   /* their #EAEAEA hairline, +violet */
  --n-400: #d8d8de;
  --n-500: #a3a0ad;
  --n-600: #6e6b79;
  --n-700: #4a4753;
  --n-800: #33313b;
  --n-900: #26242c;
  --ink:   #1f2023;   /* Mixpanel's ink, exact */

  /* interaction — near-black carries the primary action the way their black
     pill buttons do; violet is the one saturated hue on the screen */
  --teal-primary: #1f2023;
  --teal-hover:   #4a28c4;
  --teal-link:    #5b36e6;      /* 6.7:1 on white */
  --teal-tint:    #f1edff;
  --accent:       #7856ff;      /* Mixpanel brand violet */
  --accent-tint:  #f1edff;
  --accent-line:  #ddd3ff;

  /* status — STILL A TRAFFIC LIGHT. red risk, amber watch, green stable,
     grey unmeasured. Only the tone moved: the red picks up a little magenta
     and the green a little cyan, so neither fights the violet. */
  --good:      #0b7a5b;
  --good-bg:   #e9f5f0;
  --good-text: #085b44;
  --good-border: #b4dccc;

  --watch:      #b65c05;
  --watch-bg:   #fdf3e6;
  --watch-text: #8a4503;
  --watch-border: #ebcda2;

  --risk:      #d62252;
  --risk-bg:   #fdeef3;
  --risk-text: #a4103a;
  --risk-border: #f2bfcf;

  --info:      #1f7ae0;
  --info-bg:   #eaf3fd;
  --info-text: #14539c;
  --info-border: #bcdaf7;

  --series-good:    #0b7a5b;
  --series-watch:   #b65c05;
  --series-risk:    #d62252;
  --series-unknown: #d8d8de;
  --series-churned: #4a4753;

  --purple:  #7856ff;
  --magenta: #a993ff;
  --orange:  #1f2023;

  --text:   #1f2023;
  --text-2: #4a4753;
  --text-3: #6e6b79;
  --border: #eaeaee;
  --border-strong: #d8d8de;
  --bg:     #fafafa;
  --muted-bg: #fafafa;

  --shadow-card: none;
  --shadow-float: 0 4px 16px rgba(31, 32, 35, .10);
}

/* the near-black primary button and the app mark follow the ink */
.hs-logo { background: #1f2023; }
.hs-btn--primary, .quick-launch-btn, .ql-btn {
  background: #1f2023 !important; border-color: #1f2023 !important;
}
.hs-btn--primary:hover { background: #33313b; border-color: #33313b; }

/* the rail's active row: a violet hit on an otherwise white shell */
.hs-nav-item.is-active { background: #f1edff; }
::selection { background: #ded4ff; }

/* status pills keep their four distinct treatments (fill / tint+border /
   tint / outline), so hue is never the only carrier */
.sp-risk, .pill-risk, .hs-content .rl-pill.cat-risk,
.hs-content .status-pill-port.cat-risk, .hs-content .status-pill-port.sp-risk {
  background: var(--risk); color: #fff; border-color: var(--risk);
}
.sp-grow, .pill-good, .hs-content .rl-pill.cat-good {
  background: var(--good-bg); color: var(--good-text);
}

/* =========================================================================
   38. MIXPANEL DIRECTION v2 — type + detail layer

   Mixpanel run three faces and give each a clear job: Garnett (geometric
   display grotesque) at 500 on every heading AND every button label; Inter for
   running text; a mono for anything that behaves like a label on a machine.
   The app takes the same three-role split. In a product screen the third role
   is what does the work — it gives the KPI captions and column headers back
   the job §21 of the old sheet had flattened out of them, and it is the single
   change that most makes the screen read as Mixpanel's.
   ========================================================================= */
:root {
  --font-sans:    Inter, "Lexend Deca", Helvetica, Arial, sans-serif;
  --font-display: "Garnett Medium", "Garnett Regular", Inter, Helvetica, sans-serif;
  --font-mono:    "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* display: page titles, card headlines, and every figure read as a number */
.hs-page-title, .topbar .tabs .tab:first-child,
.card-title, .hs-card-title, .table-title,
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.02em;
}
.hs-page-title, .topbar .tabs .tab:first-child { font-size: 23px; }
.kc-val, .pf-kpi-value, .pf-donut-num, .sc-kpi-num, .pv8-num, .kpi-value,
.hs-kpi-value, .rs-num, .sig-num, .pl-val {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
/* buttons take the display face at 500, the way theirs do */
.hs-btn, .btn, .quick-launch-btn, .ql-btn {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0;
}

/* mono: the micro-label role — KPI captions, column headers, chart axes */
.kc-label, .sc-kpi-lbl, .pf-kpi-label, .sc-sub-label, .pf-chart-sub,
.kpi-label, .hs-kpi-label, .eyebrow, .section-label, .micro-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--n-600);
}
.clients thead th, .hs-table thead th, .hs-list thead th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--n-600);
}
.rcr-arr, .fx-caption, .table-footer, .hs-page-note { font-family: var(--font-mono); }

/* running text stays Inter and stays at working density */
body { font-family: var(--font-sans); font-size: 14px; }
.hs-nav-item { font-family: var(--font-sans); font-size: 14px; }

/* ---- detail: Mixpanel compose in hairline-ruled compartments ----------- */
/* the workspace is their #FAFAFA ground; cards are white cells ruled onto it */
.hs-main { background: #fafafa; }
.card, .hs-card, .ov-card, .kpi-group, .tbl-card, .list-card, .trend-card,
.pv8-card, .sig-card, .scard, .pcard, .tcard, .portfolio-card {
  background: #fff;
  border: 1px solid var(--n-300);
  box-shadow: none;
}
/* their compartments are squarer than Agileday's; corners come in a step */
:root { --radius: 10px; --radius-sm: 8px; --radius-xs: 6px; }
.hs-content .ov-card, .hs-content .kpi-group, .hs-content .tbl-card,
.hs-content .pv8-card, .hs-content .list-card, .hs-content .trend-card,
.hs-content .scard, .hs-content .pcard, .hs-content .tcard,
.hs-content .sig-card { border-radius: 10px; }
/* the KPI strip is one ruled band, divided rather than spaced */
.kc { border-left: 1px solid var(--n-300); }
.kpi-group > .kc:first-child { border-left: 0; }

/* the active tab carries the violet underline they use on their own nav */
.tab.is-active, .tab.active, .ftab.is-active, .ftab.active {
  box-shadow: inset 0 -3px 0 var(--accent);
}
.hs-nav-item.is-active svg { color: var(--accent); }

/* demo chrome: the "Prototypes" menu navigates between mock screens and is
   not product UI — it must never reach a marketing render */
.protodd, .pd-btn, .pd-pop { display: none !important; }

/* 38b. density repair — mono column headers are wider than the sentence-case
   ones they replaced, and were stealing width from the name column until rows
   wrapped to two lines. Working density is locked, so the tracking comes back
   in and the primary column stops wrapping. */
.clients thead th, .hs-table thead th, .hs-list thead th {
  font-size: 10px; letter-spacing: .06em; white-space: nowrap;
}
.clients .name-main, .hs-table .name-main, .clients td .name-main { white-space: nowrap; }
/* the card headline's trailing meta is running text, not display */
.card-title .sub, .hs-card-title .sub, .table-title .sub,
.card-title small, .hs-card-title small {
  font-family: var(--font-sans); letter-spacing: 0; font-weight: 400;
}