:root {
  color-scheme: light;
  /* GapSure brand: deep emerald and teal, with gold as the accent (brand guide, Oct 2026) */
  --ground: #f3f4f6;
  --surface: #ffffff;
  --ink: #0b1220;
  --ink-2: #475467;
  --ink-3: #6b7689;
  --rule: #e1e4e8;
  --rule-soft: #eceef1;
  --series: #0b7a6e;
  --series-soft: #e2f2ef;
  --good: #0b7a6e;   --good-bg: #e2f2ef;
  --warn: #a86f00;   --warn-bg: #fdf3dc;
  --crit: #d93a3a;   --crit-bg: #fde7e7;
  --focus: #0b7a6e;
  --accent: #d89c07; --accent-light: #e5b84a;
  --navy: #005b52; --navy-2: #00463f; --navy-ink: #cfe9e4; --navy-hover: rgba(255,255,255,.08); --navy-active: #0b7a6e;
  --primary: #005b52; --primary-ink: #ffffff;
  --shadow: 0 1px 2px rgba(11,18,32,.04), 0 4px 14px rgba(11,18,32,.05);
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Montserrat", "Inter", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #0b1220; --surface: #1e293b; --ink: #eef2f6; --ink-2: #b4bfcd; --ink-3: #8b97a8;
    --rule: #2c3a50; --rule-soft: #243146; --series: #00a686; --series-soft: #0f2e2b;
    --good: #2fc4a2; --good-bg: #0f2e2b; --warn: #e5b84a; --warn-bg: #33280d; --crit: #ef7b74; --crit-bg: #3a1b1a;
    --focus: #2fc4a2;
    --accent: #e5b84a; --accent-light: #f0cd74;
    --navy: #08101c; --navy-2: #0b1626; --navy-ink: #b9c8c5; --navy-hover: rgba(255,255,255,.06); --navy-active: #0f8e78;
    /* dark ink on teal: white on #00a686 is under 3:1, too faint for button text */
    --primary: #00a686; --primary-ink: #04201c;
    --shadow: 0 1px 2px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --ground: #0b1220; --surface: #1e293b; --ink: #eef2f6; --ink-2: #b4bfcd; --ink-3: #8b97a8;
    --rule: #2c3a50; --rule-soft: #243146; --series: #00a686; --series-soft: #0f2e2b;
    --good: #2fc4a2; --good-bg: #0f2e2b; --warn: #e5b84a; --warn-bg: #33280d; --crit: #ef7b74; --crit-bg: #3a1b1a;
    --focus: #2fc4a2;
    --accent: #e5b84a; --accent-light: #f0cd74;
    --navy: #08101c; --navy-2: #0b1626; --navy-ink: #b9c8c5; --navy-hover: rgba(255,255,255,.06); --navy-active: #0f8e78;
    /* dark ink on teal: white on #00a686 is under 3:1, too faint for button text */
    --primary: #00a686; --primary-ink: #04201c;
    --shadow: 0 1px 2px rgba(0,0,0,.3);
  }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--ground); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.5; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
a { color: var(--series); }

/* ---------- Buttons, pills, fields ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--rule); background: var(--surface); border-radius: 6px; padding: 6px 12px; font-weight: 500;
  text-decoration: none; color: var(--ink);
}
.btn:hover { border-color: var(--ink-3); }
.btn.primary { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.btn.primary:hover { opacity: .9; }
.btn.danger { color: var(--crit); }
.btn.danger.solid { background: var(--crit); color: #fff; border-color: var(--crit); }
.btn.small { padding: 3px 9px; font-size: 12.5px; }
.btn.link { border: 0; background: none; padding: 0; color: var(--series); font-weight: 500; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn svg { width: 14px; height: 14px; }

.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; border-radius: 999px; padding: 2px 9px; width: fit-content; white-space: nowrap; }
.pill.good { color: var(--good); background: var(--good-bg); }
.pill.warn { color: var(--warn); background: var(--warn-bg); }
.pill.crit { color: var(--crit); background: var(--crit-bg); }
.pill.plain { color: var(--ink-2); background: var(--rule-soft); }
.pill.live { color: var(--series); background: var(--series-soft); }
.pill svg { width: 12px; height: 12px; }

.form { display: grid; gap: 14px; }
.form .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.field { display: grid; gap: 5px; align-content: start; }
.field label, .field .lbl { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.field .hint { font-size: 12px; color: var(--ink-3); }
.field input[type=text], .field input[type=email], .field input[type=password], .field textarea, .field select {
  border: 1px solid var(--rule); background: var(--ground); border-radius: 6px; padding: 7px 10px; width: 100%;
}
.field input[type=file] { max-width: 100%; }
.field textarea { min-height: 64px; resize: vertical; }
.form-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.msg { font-size: 13px; color: var(--ink-2); }
.msg.err { color: var(--crit); }
.msg.ok { color: var(--good); }

/* ---------- Auth ---------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.auth-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 28px; display: grid; gap: 18px; }
.auth-card h1 { font-size: 22px; margin: 0; letter-spacing: -0.01em; }
.auth-card .lede { color: var(--ink-2); margin: 4px 0 0; }
.auth-card .switch { font-size: 13px; color: var(--ink-2); text-align: center; }

/* ---------- Shell ---------- */
.topbar {
  position: sticky; top: 0; z-index: 5; background: var(--surface); border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; gap: 12px 24px; padding: 10px 20px; flex-wrap: wrap;
}
.topbar .brand { font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
.topbar .org { color: var(--ink-3); font-size: 13px; }
.topbar nav { display: flex; gap: 4px; }
.topbar nav a { text-decoration: none; color: var(--ink-2); padding: 5px 10px; border-radius: 6px; font-weight: 500; }
.topbar nav a[aria-current="page"] { background: var(--rule-soft); color: var(--ink); }
.topbar .me { margin-left: auto; display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--ink-2); }

main { max-width: 1240px; margin: 0 auto; padding: 20px 20px 48px; }
.layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; }

.sidebar { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; position: sticky; top: 70px; }
.sidebar-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--rule-soft); }
.sidebar-head h2 { font-size: 13px; margin: 0; color: var(--ink-2); font-weight: 600; }
.client-list { list-style: none; margin: 0; padding: 4px; max-height: calc(100vh - 160px); overflow-y: auto; }
.client-list a { display: grid; gap: 1px; padding: 8px 10px; border-radius: 6px; text-decoration: none; color: var(--ink); }
.client-list a:hover { background: var(--rule-soft); }
.client-list a[aria-current="page"] { background: var(--series-soft); }
.client-list .cname { font-weight: 500; }
.client-list .csub { font-size: 12px; color: var(--ink-3); }

.content { display: grid; gap: 20px; min-width: 0; }
.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 18px 20px; min-width: 0; }
.panel h2 { font-size: 15px; font-weight: 600; margin: 0 0 2px; }
.panel h3 { font-size: 14px; font-weight: 600; margin: 0 0 2px; }
.panel .sub { color: var(--ink-3); font-size: 12.5px; margin: 0 0 14px; }
.panel.danger-zone { border-color: var(--crit); }

.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px 20px; }
.page-head h1 { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
.page-head .meta { color: var(--ink-2); margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); }
.tabs a { padding: 8px 12px; text-decoration: none; color: var(--ink-2); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

.banner { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--warn); background: var(--warn-bg); border-radius: 8px; padding: 10px 14px; }
.banner strong { color: var(--warn); }
.banner.err { border-color: var(--crit); background: var(--crit-bg); }
.banner.err strong { color: var(--crit); }
.banner svg { flex: none; margin-top: 2px; width: 16px; height: 16px; }

/* ---------- KPIs + charts ---------- */
.kpis { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); padding: 0; overflow: hidden; }
.kpi { padding: 16px 20px; border-left: 1px solid var(--rule-soft); display: grid; gap: 4px; align-content: start; }
.kpi:first-child { border-left: 0; }
.kpi .label { font-size: 12px; color: var(--ink-2); }
.kpi .value { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }
.kpi.hero .value { font-size: 34px; }
.kpi .note { font-size: 12.5px; color: var(--ink-3); }

.coverage-bar { display: flex; gap: 2px; height: 14px; border-radius: 4px; overflow: hidden; margin: 4px 0 12px; background: var(--rule-soft); }
.coverage-bar span { display: block; height: 100%; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--ink-2); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.legend b { color: var(--ink); font-weight: 500; }
.sw-good { background: var(--good); } .sw-warn { background: var(--warn); } .sw-crit { background: var(--crit); }

.grid2 { display: grid; grid-template-columns: 1fr 1.6fr; gap: 20px; align-items: start; }
.chart { position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .axis text, .chart .vlbl { fill: var(--ink-2); font-family: var(--mono); font-size: 11px; }
.chart .plbl { fill: var(--ink); font-family: var(--mono); font-size: 11.5px; }
.chart .grid line { stroke: var(--rule-soft); }
.chart .bar { fill: var(--series); }
.chart .hit { fill: transparent; }
.chart .row:hover .bar { fill: var(--ink); }
.chart .sb { fill: var(--ink-3); font-family: var(--sans); font-size: 10px; letter-spacing: 0.04em; }
.tip {
  position: absolute; pointer-events: none; background: var(--ink); color: var(--surface); border-radius: 6px;
  padding: 8px 10px; font-size: 12px; line-height: 1.45; min-width: 190px; box-shadow: 0 4px 16px rgb(0 0 0 / .18); z-index: 2;
}
.tip .t { font-family: var(--mono); font-weight: 500; }
.tip .d { opacity: .75; margin-bottom: 4px; }
.tip .r { display: flex; justify-content: space-between; gap: 16px; }
.tip .r span:last-child { font-family: var(--mono); }

/* ---------- Tables ---------- */
.tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.chip { border: 1px solid var(--rule); background: var(--surface); border-radius: 999px; padding: 4px 11px; cursor: pointer; font-size: 13px; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.search { margin-left: auto; border: 1px solid var(--rule); background: var(--surface); border-radius: 6px; padding: 5px 10px; width: 220px; max-width: 100%; }
.table-wrap { overflow-x: auto; border-top: 1px solid var(--rule); }
.table-wrap.tall { max-height: 560px; overflow-y: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--rule-soft); text-align: left; white-space: nowrap; vertical-align: middle; }
th { font-size: 11.5px; font-weight: 500; color: var(--ink-2); position: sticky; top: 0; background: var(--surface); z-index: 1; }
th button { all: unset; cursor: pointer; }
th button:focus-visible { outline: 2px solid var(--focus); }
th.r, td.r { text-align: right; }
td.wrap { white-space: normal; min-width: 180px; color: var(--ink-2); }
td.mono { font-family: var(--mono); font-weight: 500; }
td.pos { color: var(--good); }
td.muted { color: var(--ink-3); }
tbody tr:hover { background: var(--rule-soft); }
tr.sel-row { cursor: pointer; }
tr.sel-row[aria-selected="true"] { background: var(--series-soft); }
tr.sel-row[aria-selected="true"] td:first-child { box-shadow: inset 3px 0 0 var(--series); }
td select { border: 1px solid var(--rule); background: var(--surface); border-radius: 6px; padding: 3px 6px; }
.empty { text-align: center; color: var(--ink-3); padding: 28px; }
.empty-state { text-align: center; padding: 56px 20px; display: grid; gap: 10px; justify-items: center; }
.empty-state h2 { font-size: 20px; margin: 0; }
.empty-state p { color: var(--ink-2); margin: 0; max-width: 52ch; }
.copyline { display: flex; gap: 8px; align-items: center; }
.copyline input { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12.5px; border: 1px solid var(--rule); background: var(--ground); border-radius: 6px; padding: 6px 10px; }
.spin { width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--surface); padding: 8px 14px; border-radius: 6px; font-size: 13px; z-index: 20; box-shadow: 0 4px 16px rgb(0 0 0 / .2); }

@media (max-width: 960px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .client-list { max-height: 220px; }
}
@media (max-width: 860px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi:nth-child(3) { border-left: 0; }
  .kpi { border-top: 1px solid var(--rule-soft); }
  .kpi.hero, .kpi:nth-child(2) { border-top: 0; }
  .grid2 { grid-template-columns: 1fr; }
  .search { margin-left: 0; width: 100%; }
  .topbar .me { margin-left: 0; }
  main { padding: 16px 16px 40px; }
}
@media (max-width: 480px) { .kpis { grid-template-columns: 1fr; } .kpi { border-left: 0; border-top: 1px solid var(--rule-soft); } .kpi.hero { border-top: 0; } }

/* ---------- Opportunity (Play 3) ---------- */
.map-table select { border: 1px solid var(--rule); background: var(--ground); border-radius: 6px; padding: 4px 8px; min-width: 200px; max-width: 280px; }
.map-table td.wrap { font-family: var(--mono); font-size: 12px; }
.map-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; margin-top: 14px; }
.valbar { display: inline-block; width: 90px; height: 8px; border-radius: 4px; background: var(--rule-soft); overflow: hidden; margin-right: 10px; vertical-align: middle; }
.valbar span { display: block; height: 100%; background: var(--series); border-radius: 4px; }
.qual { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px 20px; }
.qual > div { display: grid; gap: 2px; align-content: start; }
.qual .label { font-size: 12px; color: var(--ink-2); }
.qual .value { font-size: 20px; font-weight: 500; }
.qual .note { font-size: 12px; color: var(--ink-3); }
.table-wrap.spaced { margin-top: 14px; }
.page-head.tight { margin-bottom: 10px; }
.flush { margin: 0; }
.panel .sub.flush { margin: 0; }
.note-line { margin: 6px 0 0; }
.note-block { margin: 12px 0 0; }

.grid2.even { grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .grid2.even { grid-template-columns: 1fr; } }

/* ---------- Re-engagement (Play 4) ---------- */
.steps { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; padding: 0; margin: 10px 0 0; font-size: 12.5px; color: var(--ink-3); }
.steps li { display: flex; align-items: center; }
.steps li + li::before { content: ""; width: 22px; height: 1px; background: var(--rule); margin: 0 8px; }
.steps li.done { color: var(--good); }
.steps li.now { color: var(--ink); font-weight: 600; }
.groups-pick { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.groups-pick legend { margin-bottom: 6px; }
label.check { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--rule); border-radius: 8px; padding: 10px 12px; cursor: pointer; font-size: 13.5px; }
label.check input { margin-top: 3px; }
fieldset.tpl { border: 1px solid var(--rule); border-radius: 8px; padding: 12px 14px; margin: 0; display: grid; gap: 10px; }
fieldset.tpl legend { font-weight: 600; font-size: 13px; padding: 0 6px; }
.field textarea.tall { min-height: 190px; font-family: var(--sans); line-height: 1.5; }
.fieldchips { font-size: 12px; color: var(--ink-3); margin: 0; line-height: 1.9; }
.fieldchips code { font-family: var(--mono); background: var(--rule-soft); border-radius: 4px; padding: 1px 5px; color: var(--ink-2); }
.msg-list { display: grid; gap: 6px; }
.msg-list details { border: 1px solid var(--rule); border-radius: 8px; }
.msg-list details.skipped { opacity: .55; }
.msg-list summary { cursor: pointer; padding: 9px 12px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.msg-body { padding: 4px 14px 14px; border-top: 1px solid var(--rule-soft); }
.msg-body .subj { font-weight: 600; margin: 10px 0 6px; }
.msg-body .pre { white-space: pre-wrap; color: var(--ink-2); font-size: 13.5px; }
.side-list { margin-top: 10px; font-size: 13px; }
.side-list summary { cursor: pointer; color: var(--ink-2); }
.kpis.inset { border: 1px solid var(--rule-soft); border-radius: 8px; margin-top: 12px; }

/* ---------- All 12 plays: overview, sub-nav, planned plays ---------- */
.subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -8px; }
.subtabs a { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid var(--rule); border-radius: 999px; text-decoration: none; color: var(--ink-2); font-size: 13px; background: var(--surface); }
.subtabs a[aria-current="page"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.subtabs .pn { font-size: 11px; opacity: .75; }
.subtabs .soon { font-size: 11px; opacity: .7; font-style: italic; }
.overview-note { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.play-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.play-card { display: grid; gap: 8px; align-content: start; padding: 14px; border: 1px solid var(--rule); border-radius: 8px; text-decoration: none; color: inherit; background: var(--surface); }
.play-card:hover { border-color: var(--ink-3); }
.play-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pc-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pc-n { font-size: 12px; color: var(--ink-3); }
.pc-name { font-weight: 600; font-size: 14px; line-height: 1.3; }
.pc-head { font-size: 13px; color: var(--ink-2); min-height: 20px; }
.pc-usd { font-size: 18px; font-weight: 500; color: var(--ink); }
.pc-text.strong { color: var(--ink); font-weight: 500; }
.pc-text.muted { color: var(--ink-3); }
.pc-checks { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px solid var(--rule-soft); display: grid; gap: 5px; font-size: 12.5px; color: var(--ink-2); }
.pc-checks.big { border-top: 0; padding: 0; font-size: 13.5px; gap: 8px; }
.pc-checks li { display: flex; gap: 7px; align-items: flex-start; }
.ck { flex: none; display: inline-flex; margin-top: 2px; }
.ck svg { width: 12px; height: 12px; }
.ck.good { color: var(--good); } .ck.warn { color: var(--warn); } .ck.opt { color: var(--ink-3); }
.pl-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 16px; margin-bottom: 4px; }
.pl-facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; font-size: 13.5px; }
.pl-facts dt { color: var(--ink-3); }
.pl-facts dd { margin: 0; }
.pl-steps { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 13.5px; color: var(--ink-2); }
@media (max-width: 560px) { .pl-facts { grid-template-columns: 1fr; gap: 2px; } .pl-facts dd { margin-bottom: 8px; } }

/* ---------- Play 11 (readiness) and Play 12 (loyalty) ---------- */
.q-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px 18px; }
.q-wide { grid-column: 1 / -1; border: 0; padding: 0; margin: 0; }
.q-wide legend { font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.q-multi { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; }
.q-multi label { display: flex; gap: 6px; align-items: center; }
.field .hint { font-size: 12px; color: var(--ink-3); }
.linkbtn { all: unset; color: var(--series); cursor: pointer; text-decoration: underline; }
.linkbtn:focus-visible { outline: 2px solid var(--focus); }
.pill.big { font-size: 15px; padding: 5px 12px; }
.pill.big svg { width: 14px; height: 14px; }
.kpi .value .of { font-size: 14px; color: var(--ink-3); margin-left: 2px; }
.kpi .value.small { font-size: 15px; font-weight: 500; line-height: 1.35; }
.q-kpis { grid-template-columns: 1.3fr repeat(3, 1fr); }
table.dims td { border-bottom: 0; padding: 6px 0; }
table.dims td.r { padding-left: 12px; }
.q-list { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; }
.q-list.crit li::marker { color: var(--crit); } .q-list.warn li::marker { color: var(--warn); }
.q-list.muted { color: var(--ink-2); }
.q-h3 { margin-top: 16px !important; }
.q-when { color: var(--ink-2); width: 120px; }
@media (max-width: 480px) { .q-kpis { grid-template-columns: 1fr; } }

/* Space the panels of every client tab evenly; empty mount points take no space until filled. */
#tab { display: grid; gap: 20px; min-width: 0; }
#tab > :empty { display: none; }
/* Five client tabs: scroll sideways on narrow phones instead of pushing the page wider. */
.tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.tabs a { white-space: nowrap; flex: none; }
/* Play 2: website scan */
.check-line { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin-top: 4px; }
.check-line input { margin-top: 3px; }
.hint-line { font-size: 12px; color: var(--ink-3); margin: 4px 0 0; max-width: 72ch; }
.scan-ans { margin-top: 6px; font-size: 13px; }
.scan-ans summary { cursor: pointer; color: var(--ink-3); }
.scan-ans p { margin: 6px 0 0; white-space: pre-wrap; color: var(--ink-2); max-width: 80ch; }
h3 .muted { color: var(--ink-3); font-weight: 400; margin-left: 6px; }
/* B5: Diagnose report — reads as a document, and prints on its own */
.subtabs .sub-report { font-weight: 600; }
.rep-doc { display: grid; gap: 22px; padding: 28px; }
.rep-kicker { margin: 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.rep-doc .rep-title { margin: 4px 0 0; font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
.rep-meta { margin: 4px 0 0; color: var(--ink-2); font-size: 13px; }
.rep-summary { margin: 0; font-size: 15px; line-height: 1.6; max-width: 72ch; white-space: pre-wrap; }
.rep-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; padding: 18px 20px;
  border: 1px solid var(--rule); border-radius: 10px; background: var(--series-soft); }
.rep-hero .label { display: block; font-size: 12.5px; color: var(--ink-2); font-weight: 500; }
.rep-hero .note { display: block; font-size: 13px; color: var(--ink-2); margin-top: 6px; max-width: 52ch; }
.rep-big { display: block; font-size: 40px; font-weight: 600; line-height: 1.15; margin-top: 2px; }
.rep-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: start; }
.rep-split .value { display: block; font-size: 22px; font-weight: 600; margin-top: 2px; }
.rep-doc .rep-sec h3 { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.rep-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; max-width: 80ch; }
.rep-note { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); }
.rep-total td { font-weight: 600; border-top: 1px solid var(--ink-3); }
.rep-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.rep-facts { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; margin: 0; font-size: 13.5px; }
.rep-facts dt { color: var(--ink-2); }
.rep-facts dd { margin: 0; text-align: right; font-weight: 500; }
.rep-score { margin: 0; font-size: 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rep-score .num { font-size: 22px; font-weight: 600; }
.rep-fixes { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 8px; font-size: 13px; }
.rep-how { border-top: 1px solid var(--rule); padding-top: 16px; font-size: 13px; color: var(--ink-2); }
@media (max-width: 720px) {
  .rep-doc { padding: 18px; }
  .rep-hero, .rep-split { grid-template-columns: 1fr; }
  .rep-big { font-size: 32px; }
}
@media print {
  :root { --ground: #fff; --surface: #fff; --ink: #121820; --ink-2: #3a4350; --ink-3: #6b7482; --series-soft: #eef4fc; }
  body { background: #fff; }
  .topbar, .sidebar, .tabs, .subtabs, .page-head, .no-print, .toast, .banner { display: none !important; }
  .layout, .content, #tab { display: block !important; }
  .rep-doc { border: 0; padding: 0; box-shadow: none; }
  .rep-hero, .rep-sec { break-inside: avoid; }
  .table-wrap { overflow: visible !important; max-height: none !important; }
  a { color: inherit; text-decoration: none; }
}
/* B6: re-engagement month by month */
.valbar.neg span { background: var(--crit); }
tr.muted td { color: var(--ink-3); }
/* B7: warranty and recall */
.chip-gap { flex-basis: 12px; }
.chip .num { opacity: .75; margin-left: 2px; }
.terms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px 12px; margin-top: 6px; }
.terms-grid label { display: grid; gap: 3px; font-size: 12.5px; color: var(--ink-2); }
.terms-grid input { width: 100%; }
/* B8: upsell */
.up-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 12px; }
.up-tier { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); }
.up-tier .label { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.up-tier .value { font-size: 18px; font-weight: 600; }
.up-tier .note { font-size: 12.5px; color: var(--ink-2); }
/* B10: the client's revenue dashboard (client.js), on its own link and as the team's preview */
.cd { max-width: 980px; display: grid; gap: 20px; }
#cd-preview.cd { max-width: none; }
.cd-head { display: grid; gap: 2px; }
.cd-title { margin: 4px 0 0; font-size: 28px; font-weight: 600; letter-spacing: -.01em; }
.cd-rules { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-2); max-width: 80ch; }
.cd-rules.muted { margin-top: 4px; color: var(--ink-3); }
.cd-rules b { color: var(--ink); font-weight: 500; }
.cd-preview { margin: 0 0 10px; padding: 6px 10px; border-radius: 6px; background: var(--series-soft); color: var(--ink-2); font-size: 12.5px; width: fit-content; }
.cd-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; padding: 20px 22px;
  border: 1px solid var(--rule); border-radius: 10px; background: var(--series-soft); }
.cd-hero .label { display: block; font-size: 12.5px; color: var(--ink-2); font-weight: 500; }
.cd-hero .note { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 4px; max-width: 48ch; }
.cd-big { display: block; font-size: 42px; font-weight: 600; line-height: 1.15; margin-top: 2px; }
.cd-hero-side { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: start; }
.cd-hero-side .value { display: block; font-size: 22px; font-weight: 600; margin-top: 2px; }
.cd-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.cd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; }
.cd-list li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid var(--rule-soft); }
.cd-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.cd-list li > span:first-child:not(.pill) { font-weight: 500; }
.cd-list .muted, .cd .muted { color: var(--ink-3); }
.cd-list .num.muted { margin-left: auto; }
.cd-bars { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 10px; }
.cd-bars li { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 13.5px; }
.cd-bar { display: flex; height: 12px; border-radius: 4px; background: var(--rule-soft); overflow: hidden; }
.cd-bar-a { background: var(--series); }
.cd-bar-p { background: var(--series); opacity: .35; }
.cd-bar-v { text-align: right; white-space: nowrap; }
.cd-entries { list-style: none; margin: 0; padding: 0; display: grid; }
.cd-entries li { padding: 12px 0; border-top: 1px solid var(--rule-soft); }
.cd-entries li:first-child { border-top: 0; padding-top: 0; }
.cd-entry-top { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.cd-entry-usd { font-size: 17px; font-weight: 600; }
.cd-entry-meta { font-size: 12.5px; color: var(--ink-3); }
.cd-entry-sum { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-2); max-width: 80ch; }
.cd-ev { margin-top: 6px; font-size: 12.5px; }
.cd-ev summary { cursor: pointer; color: var(--series); width: fit-content; }
.cd-ev dl, .cd-how-list { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 8px 0 0; }
.cd-ev dt, .cd-how-list dt { color: var(--ink-3); }
.cd-ev dd, .cd-how-list dd { margin: 0; color: var(--ink-2); }
.cd-biz th[scope=row] { font-size: 13px; font-weight: 400; color: var(--ink); position: static; white-space: normal; }
.cd-biz th, .cd-biz td { padding-left: 6px; padding-right: 6px; }
.cd-delta { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }
.cd-delta.up { color: var(--good); } .cd-delta.down { color: var(--crit); }
.cd .play-card { cursor: default; }
.cd .play-card:hover { border-color: var(--rule); }
.cd-how { font-size: 13.5px; color: var(--ink-2); }
.cd-how p { margin: 6px 0 0; max-width: 80ch; }
.cd-how-list { margin: 12px 0 6px; gap: 8px 18px; }
.cd-how-list dt { color: var(--ink); font-weight: 500; }
body.cd-page main.cd { margin: 0 auto; padding: 28px 20px 56px; }
@media (max-width: 720px) {
  .cd-hero, .cd-two { grid-template-columns: 1fr; }
  .cd-big { font-size: 34px; }
  .cd-bars li { grid-template-columns: 1fr auto; }
  .cd-bars .cd-bar { grid-column: 1 / -1; grid-row: 2; }
  .cd-ev dl, .cd-how-list { grid-template-columns: 1fr; gap: 0; }
  .cd-ev dd, .cd-how-list dd { margin-bottom: 6px; }
  body.cd-page main.cd { padding: 18px 16px 40px; }
}
@media (max-width: 420px) { .cd-hero-side { grid-template-columns: 1fr; } }
@media print {
  .cd-hero, .cd-sec { break-inside: avoid; }
  .cd-hero { border: 1px solid #ccd; }
  body.cd-page main.cd { padding: 0; }
}
/* B10: Results tab in the team app */
.lg-policy { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13.5px; color: var(--ink-2); }
.lg-policy b { color: var(--ink); font-weight: 500; }
td .cd-ev { margin-top: 4px; }
.lg-hist { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-2); display: grid; gap: 4px; }
.share-new { margin-top: 12px; }
.lg-card { padding: 16px 20px; }
.field input[type=date], .field input[type=number] { border: 1px solid var(--rule); background: var(--ground); border-radius: 6px; padding: 7px 10px; width: 100%; }
/* Play 9: margin */
.mg-play { margin: 0; padding-left: 20px; display: grid; gap: 14px; }
.mg-play li { padding-left: 4px; }
.mg-play-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }
.mg-play p { margin: 4px 0 0; font-size: 13.5px; max-width: 80ch; }
.mg-rule { color: var(--ink); }
.mg-play .muted, .msg-body .muted { color: var(--ink-3); }
td.neg-txt { color: var(--crit); }
/* Play 10: service */
.sv-triage { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 8px; background: var(--ground); }
/* Play 6: new consumers */
.a6-chan .pc-checks.big { font-size: 13px; }
.spaced { margin-top: 12px; }

.bundle-promise{margin:4px 0 8px;color:var(--ink-2);font-size:13px}
.bundle-promise strong{color:inherit;font-weight:600}

/* next step, data strip and the Data tab */
.next-step { border-left: 3px solid var(--ink); }
.next-step .eyebrow { margin: 0 0 2px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; }
.next-step h2 { margin: 0 0 4px; }
.next-step .btn { margin-top: 6px; display: inline-block; }
.data-strip { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; text-decoration: none; color: inherit; }
.data-strip .link { margin-left: auto; color: var(--ink-2); }
.data-dots { display: inline-flex; gap: 4px; }
.data-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--rule); }
.data-dots i.ready { background: var(--good, #1f7a3f); }
.data-dots i.draft { background: var(--warn, #b8860b); }
.all-plays > summary { display: flex; align-items: baseline; gap: 12px; cursor: pointer; list-style: none; padding: 6px 0 10px; }
.all-plays > summary::-webkit-details-marker { display: none; }
.all-plays > summary::before { content: ""; flex: none; align-self: center; width: 22px; height: 22px; border-radius: 6px;
  border: 1px solid var(--rule); background: var(--surface)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5' fill='none' stroke='%235b6573' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
  center / 14px no-repeat; transition: transform .15s ease, background-color .15s ease; }
.all-plays > summary:hover::before { background-color: var(--rule-soft); }
.all-plays > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
.all-plays[open] > summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .all-plays > summary::before { transition: none; } }
.all-plays > summary h2 { margin: 0; font-size: 16px; }
.src-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.src { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 8px; }
.src.ready { opacity: .85; }
.src-main { min-width: 0; }
.src-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.src-name { font-weight: 600; }
.src-why { margin: 4px 0; color: var(--ink-2); font-size: 13px; }
.src-unlocks { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: 12px; color: var(--ink-2); }
.play-chip { border: 1px solid var(--rule); border-radius: 99px; padding: 1px 8px; text-decoration: none; color: var(--ink); white-space: nowrap; }
.play-chip .num { color: var(--ink-2); }
.src-act { flex: none; }
@media (max-width: 620px) { .src { flex-direction: column; } }
.call-bar { display: inline-block; width: 120px; height: 6px; border-radius: 3px; background: var(--rule-soft); overflow: hidden; vertical-align: middle; }
.call-bar i { display: block; height: 100%; background: var(--ink-2); }
.call-bar i.hot { background: var(--crit); }

/* play 14: quotes */
input.narrow { width: 7.5em; text-align: right; }
.q-text { width: 100%; min-height: 220px; margin-top: 8px; font: inherit; font-size: 13px; }
tr.q-detail td { background: var(--rule-soft); }

/* play 15: cold outbound */
.ob-item { border-top: 1px solid var(--rule-soft); padding: 8px 0; margin: 0; }
.ob-body { white-space: pre-wrap; font: inherit; font-size: 13px; background: var(--rule-soft); padding: 10px 12px; border-radius: 6px; margin: 8px 0; }
.ob-step, .ob-checks { border: 1px solid var(--rule-soft); border-radius: 8px; padding: 10px 12px; margin: 10px 0; }
.ob-step legend, .ob-checks legend { font-weight: 600; padding: 0 4px; }
.ob-email { width: 100%; min-width: 180px; }

/* play 13: ads & UGC */
.ad-set { border-top: 1px solid var(--rule-soft); padding: 8px 0; margin: 0; }
.ad-link { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 12px; background: var(--rule-soft); border-radius: 6px; overflow-wrap: anywhere; }

/* client dashboard charts */
.cd-chart { position: relative; margin-top: 8px; }
.cd-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.cd-grid { stroke: var(--rule-soft); stroke-width: 1; }
.cd-axis { font-size: 11px; fill: var(--ink-3); font-family: inherit; }
.cd-axis.strong { fill: var(--ink-2); font-weight: 600; }
.cd-mark { stroke: var(--ink-3); stroke-width: 1; }
.cd-line { fill: none; stroke: var(--series); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cd-line.dash { stroke-dasharray: 5 4; }
.cd-area { fill: var(--series); fill-opacity: .1; stroke: none; }
.cd-dot { fill: var(--series); stroke: var(--surface); stroke-width: 2; }
.cd-dot.hollow { fill: var(--surface); stroke: var(--series); }
.cd-cross { stroke: var(--ink-3); stroke-width: 1; }
.cd-hit { cursor: crosshair; }
.cd-tip { position: absolute; top: 0; display: grid; gap: 2px; padding: 6px 10px; font-size: 12.5px; background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.08); pointer-events: none; white-space: nowrap; color: var(--ink); }
.cd-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); margin: 6px 0 0; }
.cd-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cd-key { display: inline-block; width: 18px; border-top: 2px solid var(--series); }
.cd-key.dash { border-top-style: dashed; }
.cd-table { margin-top: 6px; font-size: 12.5px; }
.cd-table summary { cursor: pointer; color: var(--ink-3); }
.cd-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 8px; }
.cd-tile { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--rule-soft); border-radius: 8px; }
.cd-tile .value { font-size: 24px; font-weight: 600; color: var(--ink); }
.cd-tile .label { font-size: 12.5px; color: var(--ink-2); }
@media print { .cd-tip, .cd-table summary { display: none; } }
.cd-stack { display: grid; gap: 20px; }

/* client dashboard theme: navy bar, light blue-grey ground, white cards, blue / green / orange accents */
body.cd-page {
  --cd-navy: #005b52; --cd-navy-2: #00463f; --cd-blue: #0b7a6e; --cd-blue-bg: #e2f2ef; --cd-green: #0b7a6e;
  --cd-green-bg: #e2f2ef; --cd-orange: #b07800; --cd-orange-bg: #fdf3dc; --cd-red: #d93a3a;
  --ground: #f3f4f6; --surface: #ffffff; --rule: #e1e4e8; --rule-soft: #eceef1; --ink: #0b1220; --ink-2: #475467;
  --ink-3: #6b7689; --series: var(--cd-blue); --series-soft: var(--cd-blue-bg);
  background: var(--ground); font-family: var(--sans);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) body.cd-page {
    --cd-navy: #08101c; --cd-navy-2: #0b1626; --cd-blue: #00a686; --cd-blue-bg: #0f2e2b; --cd-green: #2fc4a2;
    --cd-green-bg: #0f2e2b; --cd-orange: #e5b84a; --cd-orange-bg: #33280d;
    --ground: #0b1220; --surface: #1e293b; --rule: #2c3a50; --rule-soft: #243146; --ink: #eef2f6; --ink-2: #b4bfcd;
    --ink-3: #8b97a8;
  }
}
:root[data-theme="dark"] body.cd-page {
    --cd-navy: #08101c; --cd-navy-2: #0b1626; --cd-blue: #00a686; --cd-blue-bg: #0f2e2b; --cd-green: #2fc4a2;
    --cd-green-bg: #0f2e2b; --cd-orange: #e5b84a; --cd-orange-bg: #33280d;
    --ground: #0b1220; --surface: #1e293b; --rule: #2c3a50; --rule-soft: #243146; --ink: #eef2f6; --ink-2: #b4bfcd;
    --ink-3: #8b97a8;
  }
body.cd-page main.cd { max-width: 1080px; padding-top: 0; }
.cd-bar-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 -20px 4px; padding: 14px 24px;
  background: linear-gradient(90deg, var(--cd-navy), var(--cd-navy-2)); color: #fff; border-radius: 0 0 12px 12px; }
.cd-brand { font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.cd-bar-client { font-size: 13px; color: #c6d3e8; }
body.cd-page .rep-kicker { color: var(--cd-blue); }
body.cd-page .cd-title { font-size: 30px; font-weight: 700; color: var(--ink); }
body.cd-page .panel { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 1px 2px rgba(16,35,66,.04), 0 4px 14px rgba(16,35,66,.05); }
body.cd-page .panel h2 { font-size: 17px; font-weight: 600; color: var(--ink); }
.cd-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cd-kpi { display: grid; gap: 2px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16,35,66,.04), 0 4px 14px rgba(16,35,66,.05); }
.cd-kpi-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.cd-kpi-value { font-size: 28px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.cd-kpi-label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.cd-kpi-note { font-size: 12px; color: var(--ink-3); }
.cd-kpi.money { background: linear-gradient(180deg, var(--cd-green-bg), var(--surface) 70%); }
.cd-kpi.money .cd-kpi-icon { background: var(--cd-green-bg); color: var(--cd-green); }
.cd-kpi.money .cd-kpi-value { color: var(--cd-green); }
.cd-kpi.blue .cd-kpi-icon { background: var(--cd-blue-bg); color: var(--cd-blue); }
.cd-kpi.blue .cd-kpi-value { color: var(--cd-blue); }
.cd-kpi.warn { background: linear-gradient(180deg, var(--cd-orange-bg), var(--surface) 70%); }
.cd-kpi.warn .cd-kpi-icon { background: var(--cd-orange-bg); color: var(--cd-orange); }
.cd-kpi.warn .cd-kpi-value { color: var(--cd-orange); }
body.cd-page .cd-tile { background: var(--surface); border-color: var(--rule); border-radius: 10px; }
body.cd-page .cd-tile .value { color: var(--cd-blue); }
body.cd-page .cd-entry-usd { color: var(--cd-green); }
body.cd-page #cdRevChart .cd-line, body.cd-page #cdValueChart .cd-line { stroke: var(--cd-green); }
body.cd-page #cdRevChart .cd-area, body.cd-page #cdValueChart .cd-area { fill: var(--cd-green); }
body.cd-page #cdRevChart .cd-dot, body.cd-page #cdValueChart .cd-dot { fill: var(--cd-green); }
body.cd-page #cdValueChart .cd-dot.hollow { fill: var(--surface); stroke: var(--cd-green); }
body.cd-page #cdValueChart .cd-key { border-top-color: var(--cd-green); }
body.cd-page .cd-bar-a { background: var(--cd-blue); }
body.cd-page .cd-bar-p { background: var(--cd-blue); opacity: .3; }
body.cd-page .pill.good { color: var(--cd-green); background: var(--cd-green-bg); }
body.cd-page .pill.warn { color: var(--cd-orange); background: var(--cd-orange-bg); }
@media (max-width: 860px) { .cd-kpis { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .cd-kpis { grid-template-columns: 1fr; } .cd-bar-top { margin: 0 -16px 4px; padding: 12px 16px; } }
@media print { .cd-bar-top { background: none; color: var(--ink); border-bottom: 2px solid var(--ink); border-radius: 0; } .cd-bar-client { color: var(--ink-2); } }
body.cd-page .cd-kpi-value, body.cd-page .cd-tile .value, body.cd-page .cd-entry-usd { font-family: "IBM Plex Sans", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.cd-brand { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .cd-bar-client { display: none; } }

/* ---------------------------------------------------------------- app frame (reference design) */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.appnav { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px; padding: 18px 12px;
  background: linear-gradient(180deg, var(--navy), var(--navy-2)); color: var(--navy-ink); overflow-y: auto; }
.appnav-brand { color: #fff; font-weight: 700; font-size: 21px; letter-spacing: -.02em; text-decoration: none; padding: 2px 10px 14px; }
.appnav-group { display: grid; gap: 2px; }
.appnav-group + .appnav-group { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.appnav-label { margin: 0 10px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: rgba(198,211,232,.6); }
.appnav a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 8px; color: var(--navy-ink);
  text-decoration: none; font-weight: 500; font-size: 14px; }
.appnav a svg { width: 18px; height: 18px; flex: none; opacity: .9; }
.appnav a:hover { background: var(--navy-hover); color: #fff; }
.appnav a[aria-current="page"] { background: var(--navy-active); color: #fff; box-shadow: inset 3px 0 0 var(--accent); }
.appnav-foot { margin-top: auto; display: grid; gap: 8px; padding-top: 14px; }
.appnav-client { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 10px; background: rgba(255,255,255,.06); color: #fff; }
.appnav-client b { display: block; font-size: 13px; }
.appnav-client small { display: block; font-size: 11.5px; color: var(--navy-ink); }
.appnav-avatar { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--primary); color: var(--primary-ink); font-weight: 700; }
.appnav-new { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px dashed rgba(255,255,255,.2); border-radius: 8px;
  background: none; color: var(--navy-ink); font: inherit; font-size: 13px; cursor: pointer; }
.appnav-new:hover { color: #fff; border-color: rgba(255,255,255,.4); }
.appnav-new svg { width: 14px; height: 14px; }
.appmain { min-width: 0; display: flex; flex-direction: column; }
.menu-btn { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; padding: 0;
  border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); color: var(--ink); cursor: pointer; }
.menu-btn svg { width: 20px; height: 20px; }
.nav-backdrop { display: none; }
@media (prefers-reduced-motion: reduce) { .appnav { transition: none; } }
.apptop { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px; padding: 10px 24px;
  background: var(--surface); border-bottom: 1px solid var(--rule); }
.client-pick { font: inherit; font-weight: 600; font-size: 15px; color: var(--ink); background: var(--surface); border: 1px solid var(--rule);
  border-radius: 8px; padding: 6px 30px 6px 10px; max-width: 360px; }
.apptop-org { font-weight: 600; }
.apptop-me { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.apptop-me .avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--series-soft); color: var(--series); font-weight: 700; font-size: 13px; }
.apptop-me .who b { display: block; font-size: 13px; }
.apptop-me .who small { display: block; font-size: 11.5px; color: var(--ink-3); text-transform: capitalize; }
.appmain main { max-width: 1280px; width: 100%; margin: 0; padding: 24px 28px 56px; }
.content { gap: 18px; }

/* components */
.panel { border-radius: 12px; border-color: var(--rule); box-shadow: var(--shadow); padding: 18px 22px; }
.panel h2 { font-size: 17px; font-weight: 600; }
.page-head h1 { font-size: 28px; font-weight: 700; letter-spacing: -.015em; }
.btn { border-radius: 8px; font-weight: 600; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn.primary:hover { opacity: 1; filter: brightness(1.07); }
.btn:not(.primary):not(.danger) { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 45%, var(--rule)); }
.kpis { border-radius: 12px; gap: 0; }
.kpi .value { font-size: 26px; font-weight: 700; color: var(--series); }
.kpi.hero .value { font-size: 34px; color: var(--good); }
.kpi .label { font-weight: 600; color: var(--ink); font-size: 12.5px; }
.bundle-promise { margin: 0; color: var(--ink-2); }
.bundle-promise strong { color: var(--ink); }
.subtabs { gap: 2px; margin-top: 0; border-bottom: 1px solid var(--rule); flex-wrap: nowrap; overflow-x: auto; }
.subtabs a { border: 0; border-radius: 0; background: none; padding: 9px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--ink-2); font-weight: 500; font-size: 14px; white-space: nowrap; }
.subtabs a:hover { color: var(--ink); }
.subtabs a[aria-current="page"] { background: none; color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.subtabs .pn { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px;
  background: var(--rule-soft); color: var(--ink-2); font-size: 11px; opacity: 1; }
.subtabs a[aria-current="page"] .pn { background: var(--series-soft); color: var(--primary); }
th { color: var(--ink-2); font-weight: 600; }
.pill { border-radius: 6px; font-weight: 600; }
.play-card { border-radius: 12px; box-shadow: var(--shadow); }
.client-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.client-card { display: flex; gap: 12px; align-items: center; padding: 16px; background: var(--surface); border: 1px solid var(--rule);
  border-radius: 12px; box-shadow: var(--shadow); text-decoration: none; color: var(--ink); }
.client-card:hover { border-color: var(--primary); }
.client-card b { display: block; }
.client-card small { display: block; color: var(--ink-3); font-size: 12.5px; }

@media (max-width: 900px) {
  /* phones: the menu slides in from the left, opened by the button in the top bar (as in InvoGuard) */
  .app { grid-template-columns: 1fr; }
  .appnav { position: fixed; top: 0; left: 0; bottom: 0; z-index: 30; width: 265px; height: 100dvh; overflow-y: auto;
            transform: translateX(-100%); transition: transform .2s; padding: 20px 14px; }
  .app.nav-open .appnav { transform: translateX(0); box-shadow: 0 0 40px rgb(0 0 0 / .3); }
  .appnav a { min-height: 46px; font-size: 14px; }
  .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 25; background: rgb(16 46 34 / .38); }
  .menu-btn { display: inline-flex; }
  .apptop { padding: 8px 16px; gap: 10px; }
  .apptop-me .who { display: none; }
  .client-pick { max-width: 55vw; }
  .appmain main { padding: 18px 16px 40px; }
}

.greet h2 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.ov-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ov-kpi { display: grid; gap: 2px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px;
  box-shadow: var(--shadow); text-decoration: none; color: var(--ink); }
.ov-kpi:hover { border-color: var(--primary); }
.ov-kpi .v { font-family: var(--sans); font-size: 28px; font-weight: 700; color: var(--series); letter-spacing: -.01em; line-height: 1.2; }
.ov-kpi .l { font-weight: 600; font-size: 13.5px; }
.ov-kpi .n { font-size: 12px; color: var(--ink-3); }
.ov-kpi.money { background: linear-gradient(180deg, var(--good-bg), var(--surface) 75%); }
.ov-kpi.money .v { color: var(--good); }
.ov-kpi.warn { background: linear-gradient(180deg, var(--warn-bg), var(--surface) 75%); }
.ov-kpi.warn .v { color: var(--warn); }
@media (max-width: 1000px) { .ov-kpis { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .ov-kpis { grid-template-columns: 1fr; } }
.subtabs { overflow-y: hidden; scrollbar-width: none; }

/* Lift logo: GapSure's mark and the Lift wordmark */
.logo { display: inline-flex; align-items: center; gap: 11px; }
.logo-mark { width: 38px; height: 38px; flex: none; object-fit: contain; }
.logo-word { font-family: var(--display); font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.logo-word { color: #fff; }
.appnav-brand { padding: 4px 8px 20px; }
.auth-logo .logo-word { color: var(--primary); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .auth-logo .logo-word { color: var(--ink); }
}
:root[data-theme="dark"] .auth-logo .logo-word { color: var(--ink); }
.appnav a.appnav-brand .logo-mark { width: 38px; height: 38px; opacity: 1; }
.appnav a.appnav-brand:hover { background: none; }
/* headings in the brand's display face */
h1, h2, .cd-title { font-family: var(--display); }

/* play 17: AI assurance test calls */
.as-calls { display: flex; flex-direction: column; gap: 6px; }
.as-call { border: 1px solid var(--rule-soft); border-radius: 8px; }
.as-call > summary { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; list-style: none; }
.as-call > summary::-webkit-details-marker { display: none; }
.as-call > summary .pn { min-width: 22px; color: var(--ink-2); }
.as-call > summary .as-title { flex: 1; min-width: 0; }
.as-call[open] > summary { border-bottom: 1px solid var(--rule-soft); }
.as-body { padding: 10px 14px 14px; }
.as-ai { background: var(--rule-soft); border-radius: 8px; padding: 10px 12px; margin: 10px 0; }
ul.tight { margin: 4px 0 8px; padding-left: 20px; }
@media (max-width: 640px) { .as-call > summary { flex-wrap: wrap; } }
/* per-client play access */
.play-card.pc-off { opacity: .55; }
.pa-bundle { border: 0; padding: 0; margin: 0 0 12px; }
.pa-bundle legend { font-weight: 600; margin-bottom: 4px; }
/* the logo's green arrow disappears on the emerald nav, so the mark sits on a white tile there */
.appnav-brand .logo-mark { background: none; padding: 0; box-shadow: none; }

/* phones: nothing may push the page wider than the screen */
.appmain, .appmain main, #view, #tab, .content { min-width: 0; }
#tab { grid-template-columns: minmax(0, 1fr); }
#tab > *, .content > * { min-width: 0; }
.page-head > div { min-width: 0; }
.meta, .meta span, .sub, .hint, td { overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .page-head h1 { font-size: 24px; }
}
/* iPhones zoom into any form field under 16px when it's tapped */
@media (max-width: 900px) { input, select, textarea { font-size: 16px; } }
/* the light / dark switch in the top bar: the menu button's square, shown at every width */
.menu-btn.theme-btn { display: inline-flex; width: 34px; height: 34px; }
.menu-btn.theme-btn svg { width: 18px; height: 18px; }
/* collapsible side menu (wider screens): an icon beside the logo shrinks the menu to icons; labels stay as tooltips */
.appnav-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.appnav-head .appnav-brand { min-width: 0; }
.appnav-collapse { display: grid; place-items: center; width: 32px; height: 32px; flex: none; margin-bottom: 16px; padding: 0; border: 0;
  border-radius: 8px; background: none; color: var(--navy-ink); cursor: pointer; }
.appnav-collapse:hover { background: var(--navy-hover); color: #fff; }
.appnav-collapse svg { width: 18px; height: 18px; }
@media (min-width: 901px) {
  .app { transition: grid-template-columns .2s; }
  .app.nav-collapsed { grid-template-columns: 72px minmax(0, 1fr); }
  .app.nav-collapsed .appnav { padding-left: 10px; padding-right: 10px; }
  .app.nav-collapsed .appnav-head { flex-direction: column; gap: 4px; }
  .app.nav-collapsed .appnav-brand { padding: 4px 0 4px; display: flex; justify-content: center; }
  .app.nav-collapsed .logo-word,
  .app.nav-collapsed .appnav-label,
  .app.nav-collapsed .appnav a:not(.appnav-brand) > span,
  .app.nav-collapsed .appnav-client > span:not(.appnav-avatar) { display: none; }
  .app.nav-collapsed .appnav a { justify-content: center; padding-left: 0; padding-right: 0; }
  .app.nav-collapsed .appnav-client { justify-content: center; padding: 6px 0; background: none; }
  .app.nav-collapsed .appnav-new { justify-content: center; font-size: 0; gap: 0; padding: 8px 0; }
}
@media (max-width: 900px) { .appnav-collapse { display: none; } }
@media (prefers-reduced-motion: reduce) { .app { transition: none; } }
/* no visible scroll bars, as in InvoGuard: the page and side menu still scroll with wheel, trackpad, touch and keys */
html, .appnav { scrollbar-width: none; }
html::-webkit-scrollbar, .appnav::-webkit-scrollbar { display: none; }

/* "by GapSure" under the wordmark */
.logo-text { display: inline-flex; flex-direction: column; gap: 4px; }
.logo-by { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .04em; line-height: 1; color: #9aa4b2; }
.auth-logo .logo-by { color: var(--ink-3); }
@media (min-width: 901px) { .app.nav-collapsed .logo-by { display: none; } }
.appnav-brand .logo-word { font-size: 17px; white-space: nowrap; }
.appnav-head a.appnav-brand { padding-left: 4px; padding-right: 0; }
.appnav-brand .logo { gap: 8px; }
.appnav-brand .logo-mark { width: 32px !important; height: 32px !important; }

/* ================================================================ GapSure design system v2 (Nov 2026)
   One visual language for RevGuard and InvoGuard: calm neutrals, emerald for action, gold only as a marker,
   colour reserved for meaning. This layer sits last and only restyles; behaviour is unchanged. */
:root {
  --ground: #f6f7f9; --surface: #ffffff; --surface-2: #fafbfc; --ink: #0d1321; --ink-2: #4a5565; --ink-3: #737d8c;
  --rule: #e4e7ec; --rule-soft: #eef0f3;
  --primary: #0b6b5f; --primary-hover: #095c52; --primary-ink: #ffffff; --series: #0b6b5f; --series-soft: #e6f3f0;
  --good: #0b7a5c; --good-bg: #e7f5ef; --warn: #9a6400; --warn-bg: #fdf4e1; --crit: #c8322f; --crit-bg: #fdecea;
  --focus: #0b6b5f; --ring: 0 0 0 3px rgb(11 107 95 / .18);
  --accent: #c9940a; --accent-light: #e5b84a;
  --nav-bg: #0b1a18; --navy: #0b1a18; --navy-2: #0b1a18; --navy-ink: #a9bab6; --navy-hover: rgb(255 255 255 / .05); --navy-active: rgb(255 255 255 / .08);
  --shadow-xs: 0 1px 2px rgb(16 24 40 / .05);
  --shadow: 0 1px 2px rgb(16 24 40 / .04), 0 1px 3px rgb(16 24 40 / .04);
  --shadow-lg: 0 12px 32px -12px rgb(16 24 40 / .18), 0 2px 6px rgb(16 24 40 / .05);
  --r-sm: 6px; --r: 8px; --r-lg: 12px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0a0f16; --surface: #111822; --surface-2: #151d29; --ink: #edf1f5; --ink-2: #aab4c2; --ink-3: #7d8899;
    --rule: #222c3a; --rule-soft: #1a2330;
    --primary: #12a389; --primary-hover: #19b398; --primary-ink: #03211c; --series: #2bbf9f; --series-soft: #0f2a27;
    --good: #34c79f; --good-bg: #0f2a24; --warn: #e5b84a; --warn-bg: #2e240d; --crit: #f07c75; --crit-bg: #341a19;
    --focus: #2bbf9f; --ring: 0 0 0 3px rgb(43 191 159 / .25);
    --nav-bg: #070d0c; --navy: #070d0c; --navy-2: #070d0c; --navy-ink: #95a6a2; --navy-hover: rgb(255 255 255 / .05); --navy-active: rgb(255 255 255 / .08);
    --shadow-xs: 0 1px 2px rgb(0 0 0 / .3); --shadow: 0 1px 2px rgb(0 0 0 / .35); --shadow-lg: 0 16px 40px -12px rgb(0 0 0 / .6);
  }
}
:root[data-theme="dark"] {
    --ground: #0a0f16; --surface: #111822; --surface-2: #151d29; --ink: #edf1f5; --ink-2: #aab4c2; --ink-3: #7d8899;
    --rule: #222c3a; --rule-soft: #1a2330;
    --primary: #12a389; --primary-hover: #19b398; --primary-ink: #03211c; --series: #2bbf9f; --series-soft: #0f2a27;
    --good: #34c79f; --good-bg: #0f2a24; --warn: #e5b84a; --warn-bg: #2e240d; --crit: #f07c75; --crit-bg: #341a19;
    --focus: #2bbf9f; --ring: 0 0 0 3px rgb(43 191 159 / .25);
    --nav-bg: #070d0c; --navy: #070d0c; --navy-2: #070d0c; --navy-ink: #95a6a2; --navy-hover: rgb(255 255 255 / .05); --navy-active: rgb(255 255 255 / .08);
    --shadow-xs: 0 1px 2px rgb(0 0 0 / .3); --shadow: 0 1px 2px rgb(0 0 0 / .35); --shadow-lg: 0 16px 40px -12px rgb(0 0 0 / .6);
}

/* type: one family, a tight scale, tabular figures */
body { font-size: 14px; line-height: 1.55; letter-spacing: -.006em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01", "ss03"; text-rendering: optimizeLegibility; }
h1, h2, h3, .cd-title { font-family: var(--sans); color: var(--ink); }
.num, .kpi .value, .ov-kpi .v, .cd-kpi-value, .rep-big, .cd-big, td.r { font-variant-numeric: tabular-nums; }
::selection { background: rgb(11 107 95 / .18); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* navigation: a quiet dark rail; gold marks where you are */
.appnav { background: var(--nav-bg); border-right: 1px solid rgb(255 255 255 / .04); padding: 16px 10px; gap: 2px; }
.appnav-group { gap: 1px; }
.appnav-group + .appnav-group { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgb(255 255 255 / .06); }
.appnav-label { margin: 2px 10px 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; color: rgb(169 186 182 / .55); }
.appnav a { padding: 7px 10px; gap: 10px; border-radius: var(--r); font-size: 13.5px; font-weight: 500; color: var(--navy-ink);
  transition: background-color .12s ease, color .12s ease; position: relative; }
.appnav a svg { width: 17px; height: 17px; opacity: .7; }
.appnav a:hover { background: var(--navy-hover); color: #fff; }
.appnav a:hover svg, .appnav a[aria-current="page"] svg { opacity: 1; }
.appnav a[aria-current="page"] { background: var(--navy-active); color: #fff; box-shadow: none; }
.appnav a[aria-current="page"]::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent-light); }
.appnav a.appnav-brand::before { display: none; }
.appnav-client { background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .06); border-radius: var(--r-lg); }
.appnav-avatar { background: linear-gradient(135deg, #12a389, #0b6b5f); color: #fff; border-radius: 8px; }
.appnav-new { border-style: solid; border-color: rgb(255 255 255 / .1); border-radius: var(--r); transition: border-color .12s, color .12s, background-color .12s; }
.appnav-new:hover { background: var(--navy-hover); }
.nav-backdrop { background: rgb(5 12 11 / .5); backdrop-filter: blur(2px); }

/* top bar: translucent, sticky, one line */
.apptop { min-height: 60px; padding: 10px 28px; background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(12px); -webkit-backdrop-filter: saturate(1.6) blur(12px); border-bottom: 1px solid var(--rule); }
.client-pick { font-size: 14px; font-weight: 600; border: 1px solid var(--rule); background-color: var(--surface); border-radius: var(--r);
  padding: 7px 32px 7px 12px; box-shadow: var(--shadow-xs); cursor: pointer; transition: border-color .12s; }
.client-pick:hover { border-color: color-mix(in srgb, var(--ink-3) 50%, var(--rule)); }
.apptop-me { gap: 8px; }
.apptop-me .avatar { width: 32px; height: 32px; background: var(--series-soft); color: var(--primary); font-size: 12px; }
.apptop-me .who b { font-size: 13px; font-weight: 600; }
.apptop-me .who small { font-size: 11.5px; }
.menu-btn { width: 36px; height: 36px; border-radius: var(--r); box-shadow: var(--shadow-xs); transition: background-color .12s; }
.menu-btn:hover { background: var(--surface-2); }

/* page frame */
.appmain main { padding: 32px 36px 72px; max-width: 1320px; }
.content { gap: 24px; }
#tab { gap: 20px; }
.page-head { align-items: flex-end; padding-bottom: 4px; }
.page-eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--primary); }
.page-head h1 { font-size: 30px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
.page-head .meta { margin-top: 10px; font-size: 13px; }
.bundle-promise { font-size: 14px; max-width: 80ch; }

/* surfaces */
.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 22px 24px; }
.panel h2 { font-size: 16px; font-weight: 650; letter-spacing: -.012em; margin-bottom: 4px; }
.panel h3 { font-size: 14px; font-weight: 650; letter-spacing: -.006em; }
.panel .sub { font-size: 13px; color: var(--ink-3); margin-bottom: 16px; }
.empty-state h2 { font-size: 20px; letter-spacing: -.02em; }
.banner { border-radius: var(--r-lg); padding: 12px 16px; border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.banner.err { border-color: color-mix(in srgb, var(--crit) 35%, transparent); }
.next-step { border-left: 1px solid var(--rule); position: relative; overflow: hidden; }
.next-step::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg, var(--primary), var(--accent-light)); }
.next-step .eyebrow { color: var(--primary); letter-spacing: .08em; }

/* buttons: primary is the one emerald thing on a screen; the rest stay neutral */
.btn { min-height: 34px; padding: 0 14px; border-radius: var(--r); font-size: 13.5px; font-weight: 600; letter-spacing: -.003em;
  box-shadow: var(--shadow-xs); transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease; }
.btn:not(.primary):not(.danger):not(.link) { color: var(--ink); background: var(--surface); border-color: var(--rule); }
.btn:not(.primary):not(.link):hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--ink-3) 45%, var(--rule)); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 1px 2px rgb(11 107 95 / .25); }
.btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); filter: none; }
.btn.danger { color: var(--crit); background: var(--surface); border-color: color-mix(in srgb, var(--crit) 30%, var(--rule)); }
.btn.danger.solid { color: #fff; background: var(--crit); border-color: var(--crit); }
.btn.small { min-height: 28px; padding: 0 10px; font-size: 12.5px; }
.btn.link { min-height: 0; padding: 0; box-shadow: none; color: var(--primary); }
.btn.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:active:not(:disabled) { transform: translateY(.5px); }

/* fields */
.field { gap: 6px; }
.field label, .field .lbl { font-size: 13px; font-weight: 550; color: var(--ink); }
.field input[type=text], .field input[type=email], .field input[type=password], .field input[type=date], .field input[type=number],
.field textarea, .field select, .search, .copyline input, .map-table select, td select {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow-xs);
  transition: border-color .12s ease, box-shadow .12s ease; }
.field input[type=text], .field input[type=email], .field input[type=password], .field input[type=date], .field input[type=number], .field select { min-height: 36px; padding: 7px 11px; }
.field textarea { padding: 9px 11px; line-height: 1.5; }
.field input:hover, .field textarea:hover, .field select:hover, .search:hover { border-color: color-mix(in srgb, var(--ink-3) 40%, var(--rule)); }
.field input:focus, .field textarea:focus, .field select:focus, .search:focus, .client-pick:focus, td select:focus {
  outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.field input[readonly], .field textarea[readonly] { background: var(--surface-2); box-shadow: none; }
::placeholder { color: color-mix(in srgb, var(--ink-3) 75%, transparent); }
.search { min-height: 34px; padding: 6px 11px; }
label.check { border-radius: var(--r); transition: border-color .12s, background-color .12s; }
label.check:hover { border-color: color-mix(in srgb, var(--ink-3) 40%, var(--rule)); background: var(--surface-2); }
input[type=checkbox], input[type=radio] { accent-color: var(--primary); }

/* tables: small-caps headers, roomy rows */
.table-wrap { border-top: 1px solid var(--rule); }
th { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-2);
  padding: 9px 12px; border-bottom: 1px solid var(--rule); }
td { padding: 11px 12px; font-size: 13.5px; }
tbody tr { transition: background-color .1s; }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }

/* chips, pills, tabs */
.pill { border-radius: 999px; font-size: 12px; font-weight: 600; padding: 2px 9px; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent); }
.chip { border-radius: 999px; padding: 5px 12px; font-weight: 500; transition: background-color .12s, border-color .12s; }
.chip:hover { border-color: color-mix(in srgb, var(--ink-3) 45%, var(--rule)); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.subtabs { gap: 4px; }
.subtabs a { padding: 10px 12px; font-size: 13.5px; transition: color .12s, border-color .12s; }
.subtabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--primary); }

/* numbers: ink by default; colour only where it means something */
.kpis { border-radius: var(--r-lg); }
.kpi { padding: 18px 22px; gap: 6px; }
.kpi .label, .ov-kpi .l { font-size: 12.5px; font-weight: 550; color: var(--ink-2); }
.kpi .value { font-size: 26px; font-weight: 650; letter-spacing: -.025em; color: var(--ink); font-family: var(--sans); }
.kpi.hero .value { font-size: 34px; color: var(--good); }
.ov-kpis { gap: 16px; }
.ov-kpi { padding: 18px 20px; gap: 4px; border-radius: var(--r-lg); background: var(--surface); transition: border-color .12s, box-shadow .12s; }
.ov-kpi:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--rule)); box-shadow: var(--shadow-lg); }
.ov-kpi .v { order: 2; font-size: 30px; font-weight: 650; letter-spacing: -.03em; color: var(--ink); }
.ov-kpi .l { order: 1; }
.ov-kpi .n { order: 3; }
.ov-kpi.money, .ov-kpi.warn { background: var(--surface); }
.ov-kpi.money .v { color: var(--good); }
.ov-kpi.warn .v { color: var(--warn); }
.play-card, .client-card { border-radius: var(--r-lg); transition: border-color .12s, box-shadow .12s; }
.play-card:hover, .client-card:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--rule)); box-shadow: var(--shadow-lg); }
.greet h2 { font-size: 22px; letter-spacing: -.02em; }

/* auth */
.auth { background: radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 60%), var(--ground); }
.auth-card { border-radius: 16px; padding: 32px; box-shadow: var(--shadow-lg); gap: 20px; }
.auth-card h1 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.auth-card .btn.primary { min-height: 40px; }

.toast { border-radius: var(--r); padding: 10px 16px; box-shadow: var(--shadow-lg); font-weight: 500; }

@media (max-width: 900px) {
  .appnav a[aria-current="page"]::before { left: -14px; }
  .apptop { padding: 8px 16px; min-height: 56px; }
  .appmain main { padding: 22px 16px 48px; }
  .page-head h1 { font-size: 24px; }
  .panel { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) { .btn, .appnav a, .ov-kpi, .play-card, .client-card, tbody tr { transition: none; } }

/* ---------------------------------------------------------------- v2.1: command menu, record list, data clarity */
/* hairline borders and a crisper UI size */
:root { --hair: color-mix(in srgb, var(--rule) 85%, transparent); }
body { font-size: 13.5px; }
.panel { border-color: var(--hair); }
kbd { font: 500 11px/1 var(--sans); padding: 3px 5px; border-radius: 4px; border: 1px solid var(--rule); background: var(--surface-2); color: var(--ink-3); }

/* top-bar search button */
.cmdk-btn { display: inline-flex; align-items: center; gap: 8px; min-width: 240px; height: 34px; padding: 0 8px 0 10px; margin-left: 8px;
  border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface-2); color: var(--ink-3); font: inherit; font-size: 13px;
  cursor: pointer; transition: border-color .12s, background-color .12s; }
.cmdk-btn:hover { border-color: color-mix(in srgb, var(--ink-3) 45%, var(--rule)); background: var(--surface); }
.cmdk-btn svg { width: 15px; height: 15px; flex: none; }
.cmdk-btn span { flex: 1; text-align: left; }
.cmdk-btn:focus-visible { outline: none; box-shadow: var(--ring); }

/* command menu */
.cmdk-back { position: fixed; inset: 0; z-index: 60; display: grid; justify-items: center; align-items: start; padding: 12vh 16px 16px;
  background: rgb(8 13 20 / .38); backdrop-filter: blur(3px); animation: cmdk-fade .12s ease-out; }
.cmdk { width: min(620px, 100%); background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; box-shadow: 0 24px 64px -12px rgb(8 13 20 / .45);
  overflow: hidden; animation: cmdk-pop .14s cubic-bezier(.2,.9,.3,1.2); }
.cmdk-in { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--rule); }
.cmdk-in svg { width: 18px; height: 18px; color: var(--ink-3); flex: none; }
.cmdk-in input { flex: 1; min-width: 0; height: 52px; border: 0; outline: 0; background: none; font-size: 15px; color: var(--ink); }
.cmdk-list { list-style: none; margin: 0; padding: 6px; max-height: min(420px, 55vh); overflow-y: auto; }
.cmdk-group { padding: 10px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.cmdk-list [role=option] { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r); cursor: pointer; color: var(--ink-2); }
.cmdk-list [role=option] svg { width: 16px; height: 16px; flex: none; opacity: .75; }
.cmdk-list [role=option] > span:not(.cmdk-av) { flex: 1; color: var(--ink); font-weight: 500; }
.cmdk-list [role=option] small { color: var(--ink-3); font-size: 12px; }
.cmdk-list [aria-selected=true] { background: var(--series-soft); }
.cmdk-list [aria-selected=true] svg { opacity: 1; color: var(--primary); }
.cmdk-av, .rec-av { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 6px; font-size: 11px; font-weight: 700;
  color: #fff; background: linear-gradient(135deg, #12a389, #0b6b5f); }
.cmdk-none { padding: 24px; text-align: center; color: var(--ink-3); }
.cmdk-foot { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--rule); background: var(--surface-2); font-size: 12px; color: var(--ink-3); }
.cmdk-foot kbd { margin-right: 3px; }
@keyframes cmdk-fade { from { opacity: 0; } }
@keyframes cmdk-pop { from { opacity: 0; transform: translateY(-6px) scale(.985); } }
@media (prefers-reduced-motion: reduce) { .cmdk-back, .cmdk { animation: none; } }

/* record list (clients) */
.rec { padding: 0; overflow: hidden; }
.rec-tools { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; padding: 14px 16px; }
.rec-tools .search { margin-left: 0; width: 280px; }
.rec-table th button { display: inline-flex; gap: 4px; align-items: center; }
.rec-table th[aria-sort=ascending] button::after { content: "↑"; color: var(--primary); }
.rec-table th[aria-sort=descending] button::after { content: "↓"; color: var(--primary); }
.rec-table th:first-child, .rec-table td:first-child { padding-left: 16px; }
.rec-table th:last-child, .rec-table td:last-child { padding-right: 16px; }
.rec-table tr.sel-row { cursor: pointer; }
.rec-table tr.sel-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus); }
.rec-name { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.rec-name b { display: block; font-weight: 600; }
.rec-name:hover b { text-decoration: underline; text-underline-offset: 3px; }
.rec-name .rec-av { width: 28px; height: 28px; font-size: 12px; border-radius: 7px; }
.rec-name small, .rec-two small { display: block; font-size: 12px; color: var(--ink-3); }
.rec-two span { display: block; }
.rec-count { margin: 0; padding: 10px 16px; border-top: 1px solid var(--rule-soft); font-size: 12px; color: var(--ink-3); }
.tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 500; color: var(--ink-2);
  background: var(--rule-soft); box-shadow: inset 0 0 0 1px var(--hair); }
td .muted, td.muted { color: var(--ink-3); }

/* status badges: a leading dot carries the colour, the text stays readable */
.pill.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.good, .pill.warn, .pill.crit, .pill.live, .pill.plain { box-shadow: none; }

/* data clarity: right-aligned figures line up, labels sit quietly above values */
td.r, th.r, td.num { font-variant-numeric: tabular-nums; }
.kpi .label, .ov-kpi .l { text-transform: none; letter-spacing: 0; }
.ov-kpi .v, .kpi .value { font-feature-settings: "tnum", "cv11"; }
.ov-kpi { border-color: var(--hair); }

@media (max-width: 900px) {
  .cmdk-btn { display: none; }
  .apptop-me { margin-left: 0; }
  .rec-tools .search { width: 100%; }
  .rec-table th:nth-child(3), .rec-table td:nth-child(3), .rec-table th:nth-child(6), .rec-table td:nth-child(6) { display: none; }
}

/* ---------------------------------------------------------------- v2.2: side menu with a client switcher and labelled groups */
.appnav { gap: 0; padding-top: 14px; }
.appnav-head { margin-bottom: 10px; }
.appnav-switch { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 14px; padding: 8px 10px; text-align: left; font: inherit;
  color: #fff; background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .07); border-radius: var(--r-lg);
  cursor: pointer; transition: background-color .12s, border-color .12s; }
.appnav-switch.static { cursor: default; }
.appnav-switch:not(.static):hover { background: rgb(255 255 255 / .07); border-color: rgb(255 255 255 / .12); }
.appnav-switch:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-light); }
.appnav-switch > span:not(.appnav-avatar) { flex: 1; min-width: 0; }
.appnav-switch b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appnav-switch small { display: block; font-size: 11.5px; color: var(--navy-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appnav-switch .appnav-avatar { width: 30px; height: 30px; font-size: 13px; }
.appnav-chev { width: 16px; height: 16px; flex: none; color: var(--navy-ink); }
.appnav-group .appnav-label { margin-top: 14px; }
.appnav-group .appnav-label:first-child { margin-top: 2px; }
.appnav-group + .appnav-group { margin-top: 16px; padding-top: 14px; }
.appnav-foot { padding-top: 12px; }
.appnav-new { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; color: var(--navy-ink); font-size: 13.5px; font-weight: 500; }
.appnav-new svg { width: 16px; height: 16px; }
.appnav-new:hover { color: #fff; }
@media (min-width: 901px) {
  .app.nav-collapsed .appnav-switch { justify-content: center; padding: 6px 0; background: none; border-color: transparent; }
  .app.nav-collapsed .appnav-switch > span:not(.appnav-avatar), .app.nav-collapsed .appnav-chev, .app.nav-collapsed .appnav-new span { display: none; }
  .app.nav-collapsed .appnav-group .appnav-label { display: block; height: 1px; margin: 10px 8px; font-size: 0; background: rgb(255 255 255 / .08); }
  .app.nav-collapsed .appnav-group .appnav-label:first-child { display: none; }
  .app.nav-collapsed .appnav-new { justify-content: center; padding: 8px 0; }
}
/* the menu's switcher replaces the top-bar client picker on wide screens; phones keep the picker (the menu is a drawer there) */
@media (min-width: 901px) { .app:has(.appnav-switch) .client-pick { display: none; } .app:has(.appnav-switch) .cmdk-btn { margin-left: 0; } }

/* ---------------------------------------------------------------- v2.3: full-width pages, a roomier, centred menu */
.appmain main { max-width: none; padding-left: clamp(24px, 3vw, 48px); padding-right: clamp(24px, 3vw, 48px); }
.app { grid-template-columns: 256px minmax(0, 1fr); }
.appnav { padding: 16px 14px; }
.appnav a, .appnav-new { padding: 9px 12px; gap: 12px; font-size: 14px; }
.appnav a svg, .appnav-new svg { width: 18px; height: 18px; }
.appnav a[aria-current="page"]::before { left: -14px; }
.appnav-group { gap: 2px; }
.appnav-label { margin-left: 12px; margin-right: 12px; }
.appnav-switch { padding: 10px 12px; }
.appnav-head { padding: 0 4px; }
@media (min-width: 901px) {
  .app.nav-collapsed { grid-template-columns: 72px minmax(0, 1fr); }
  .app.nav-collapsed .appnav { padding-left: 12px; padding-right: 12px; }
  .app.nav-collapsed .appnav a[aria-current="page"]::before { left: -12px; }
}
@media (max-width: 900px) { .app { grid-template-columns: 1fr; } .appnav { width: 280px; } }
/* v2.3.1: the menu's items form a centred column (equal space either side), not a full-width list hugging the left */
@media (min-width: 901px) {
  .app:not(.nav-collapsed) .appnav { padding-left: 0; padding-right: 0; align-items: center; }
  .app:not(.nav-collapsed) .appnav > * { width: 208px; max-width: calc(100% - 28px); }
  .app:not(.nav-collapsed) .appnav a[aria-current="page"]::before { left: -24px; }
}
@media (min-width: 901px) { .app:not(.nav-collapsed) .appnav > .appnav-head { width: 100%; max-width: none; padding: 0 14px 0 18px; } }

/* ---------------------------------------------------------------- collapsible panels (collapse.js) */
.cl-title { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.cl-btn { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; padding: 0; margin-left: -4px; border: 0; border-radius: 6px;
  background: none; color: var(--ink-3); cursor: pointer; transition: background-color .12s, color .12s; }
.cl-btn svg { width: 15px; height: 15px; transition: transform .15s ease; }
.cl-title:hover .cl-btn { background: var(--rule-soft); color: var(--ink); }
.cl-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.panel.is-collapsed .cl-btn svg { transform: rotate(-90deg); }
.panel.is-collapsed > :not(.cl-head) { display: none !important; }
.panel.is-collapsed { padding-top: 14px; padding-bottom: 14px; }
.panel.is-collapsed .cl-head { margin-bottom: 0; }
.panel.is-collapsed .cl-head .sub, .panel.is-collapsed .cl-head p { display: none; }
.panel.is-collapsed .cl-title { margin: 0; }
@media (prefers-reduced-motion: reduce) { .cl-btn svg { transition: none; } }

/* phones: the top bar fits in one line. The client picker takes the space that's left and shrinks; the initials avatar
   steps aside (the name is in the menu), and Sign out stays visible. */
@media (max-width: 600px) {
  .apptop { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .apptop .client-pick, .apptop .apptop-org { flex: 1 1 0; min-width: 0; max-width: none; width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .apptop-me { flex: none; gap: 6px; margin-left: 0; }
  .apptop-me .avatar { display: none; }
  .apptop-me #signOut { padding: 0 10px; }
}
/* form rows never push wider than a phone: columns shrink below 210px when they must, and file pickers fit their field */
.form .row { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.field { min-width: 0; }
.field input[type=file] { width: 100%; min-width: 0; font-size: 13px; }

/* ---------------------------------------------------------------- nav text in white */
.appnav a:not(.appnav-brand), .appnav-new { color: #fff; }

/* ---------------------------------------------------------------- collapsible sections as plain text: no box, a hairline between */
.panel[data-cl] { background: none; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; box-shadow: none; padding-left: 0; padding-right: 0; margin-bottom: 0; }
.panel[data-cl] + .panel[data-cl] { margin-top: 0; }

/* ---------------------------------------------------------------- report on phones: keep it to the screen width */
.rep-doc { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.rep-doc > *, .rep-hero > *, .rep-cols > * { min-width: 0; }
.rep-cols { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
@media (max-width: 720px) {
  .rep-doc { padding: 16px; gap: 18px; }
  .rep-doc .rep-title { font-size: 22px; }
  .rep-hero { padding: 14px; gap: 14px; }
  .rep-big { font-size: 28px; }
  .rep-split { grid-template-columns: 1fr 1fr; gap: 12px; }
  .rep-split .value { font-size: 18px; }
  .rep-split .note { font-size: 12px; }
  .rep-doc .table-wrap { margin: 0 -16px; padding: 0 16px; }
  .rep-doc table { font-size: 12.5px; }
  .rep-doc td.wrap { min-width: 140px; }
  .rep-facts { font-size: 13px; }
}

/* ---------------------------------------------------------------- collapsible sections stack one at a time, never side by side */
.grid2:has(> .panel) { grid-template-columns: minmax(0, 1fr); gap: 0; }

/* ---------------------------------------------------------------- metric cards: labels, figures and notes line up across a row on every screen */
.kpis { grid-auto-rows: auto; row-gap: 0; }
.kpi { grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; gap: 0; align-content: stretch; min-width: 0; }
.kpi > * { min-width: 0; overflow-wrap: anywhere; }
.kpi > * + * { margin-top: 6px; }
.kpi > .label { align-self: start; }
.kpi > .value { align-self: end; }
/* figures never break across lines; cards drop to two (or one) a row when there isn't room for four */
.kpis { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.kpi { border: 0; box-shadow: -1px 0 0 var(--rule-soft), 0 -1px 0 var(--rule-soft); }
.kpi > .value { white-space: nowrap; overflow-wrap: normal; }
.kpis { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.kpi { container-type: inline-size; }
.kpi > .value { font-size: min(26px, 13cqi); }
.kpi.hero > .value { font-size: min(34px, 15cqi); }

/* ---------------------------------------------------------------- play tabs on phones: wrap onto a second line so every tab is visible */
@media (max-width: 720px) {
  .subtabs { flex-wrap: wrap; overflow: visible; gap: 0 2px; }
  .subtabs a { padding: 9px 10px; white-space: nowrap; }
}
@media (max-width: 720px) {
  .subtabs { gap: 8px; border-bottom: 0; padding-bottom: 4px; }
  .subtabs a { padding: 7px 14px; margin: 0; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--ink-2); }
  .subtabs a[aria-current="page"] { background: var(--primary); border-color: var(--primary); color: #fff; }
}
/* play tabs as rounded buttons on every screen size */
.subtabs { flex-wrap: wrap; overflow: visible; gap: 8px; border-bottom: 0; padding-bottom: 4px; }
.subtabs a { padding: 7px 14px; margin: 0; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--ink-2); white-space: nowrap; }
.subtabs a:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--rule)); color: var(--ink); }
.subtabs a[aria-current="page"] { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ---------------------------------------------------------------- report v2: short and chart-led */
.rep-doc { gap: 26px; }
.rep-big { font-family: var(--sans); font-size: clamp(30px, 5vw, 44px); font-weight: 700; letter-spacing: -.025em; color: var(--good); }
.rep-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 20px 22px; }
.rep-hero-top { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: flex-end; justify-content: space-between; }
.rep-expect { text-align: right; }
.rep-expect .value { display: block; font-size: 24px; font-weight: 650; font-family: var(--sans); margin-top: 2px; }
.rep-stack { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--rule-soft); }
.rep-stack .wb, .rep-legend .wb { background: var(--primary); }
.rep-stack .pr, .rep-legend .pr { background: var(--accent); }
.rep-legend { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13px; color: var(--ink-2); }
.rep-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.rep-legend b { color: var(--ink); margin-left: 4px; font-family: var(--sans); }
.rep-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.rep-bar-head { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.rep-bar-head .num { font-family: var(--sans); font-weight: 650; }
.rep-bar { height: 10px; margin-top: 6px; border-radius: 999px; background: var(--rule-soft); overflow: hidden; }
.rep-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 70%, var(--accent))); }
.rep-bars .rep-note { margin-top: 5px; font-size: 12.5px; }
.rep-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 14px; }
.rep-card { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px solid var(--rule); border-radius: var(--r-lg, 12px); background: var(--surface); min-width: 0; }
.rep-card > div { min-width: 0; }
.rep-card h3 { margin: 0 0 6px; font-size: 14px; font-weight: 650; }
.rep-card p { margin: 0 0 4px; font-size: 13px; line-height: 1.45; }
.rep-card .rep-note { margin: 4px 0 0; font-size: 12.5px; }
.rep-ring { width: 72px; height: 72px; flex: none; }
.rep-ring circle { fill: none; stroke-width: 8; }
.rep-ring .track { stroke: var(--rule-soft); }
.rep-ring .fill { stroke-linecap: round; stroke: var(--good); }
.rep-ring.warn .fill { stroke: var(--accent); }
.rep-ring.crit .fill { stroke: var(--crit, #c0392b); }
.rep-ring text { font: 700 20px var(--sans); fill: var(--ink); }
.rep-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 10px; counter-reset: st; }
.rep-steps li { position: relative; display: grid; gap: 4px; padding: 14px 14px 14px 46px; border-radius: 10px; background: var(--series-soft); counter-increment: st; }
.rep-steps li::before { content: counter(st); position: absolute; left: 14px; top: 14px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font: 700 12px var(--sans); color: #fff; background: var(--primary); }
.rep-steps .when { font-size: 12px; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.rep-steps .what { font-size: 13.5px; }
.rep-steps .num { font-family: var(--sans); font-weight: 650; font-size: 15px; }
.rep-how { display: grid; gap: 6px; font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.rep-how p { margin: 0; }
.rep-how b { color: var(--ink-2); }
@media (max-width: 720px) {
  .rep-hero { padding: 16px; }
  .rep-expect { text-align: left; }
  .rep-ring { width: 60px; height: 60px; }
}
@media print {
  .rep-stack span, .rep-bar span, .rep-legend i, .rep-steps li, .rep-steps li::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rep-card, .rep-steps li, .rep-bars li { break-inside: avoid; }
}
.rep-cards { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.rep-card { flex-direction: column; }
@media (max-width: 560px) { .rep-card { flex-direction: row; } }

/* ---------------------------------------------------------------- play 19: reviews */
.banner.good { border-color: color-mix(in srgb, var(--good) 35%, transparent); background: color-mix(in srgb, var(--good) 8%, var(--surface)); }
.rv-themes { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.rv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.rv-head b { font-size: 15px; }
.rv-n { margin-left: auto; font-family: var(--sans); font-weight: 650; font-size: 18px; }
.rv-bar { height: 8px; margin-top: 8px; border-radius: 999px; background: var(--rule-soft); overflow: hidden; }
.rv-bar span { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.rv-meta { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-3); }
.rv-fix { margin: 6px 0 0; font-size: 13.5px; }
.rv-q { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid var(--rule); background: var(--surface-2); border-radius: 0 8px 8px 0; font-size: 13px; color: var(--ink-2); }
.rv-stars { color: var(--accent); letter-spacing: 1px; margin-right: 4px; }

/* ---------------------------------------------------------------- evidence labels: is a figure measured, an estimate, or booked? */
.kpi[data-ev] > .label::after, .ov-kpi[data-ev] > .l::after, .rep-hero [data-ev] > .label::after, .ev-tag::after {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; vertical-align: 1px;
  font: 600 10px/1.5 var(--sans); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
[data-ev="measured"] > .label::after, [data-ev="measured"] > .l::after, .ev-tag[data-ev="measured"]::after {
  content: "Measured"; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); }
[data-ev="estimate"] > .label::after, [data-ev="estimate"] > .l::after, .ev-tag[data-ev="estimate"]::after {
  content: "Estimate"; color: color-mix(in srgb, var(--accent) 75%, var(--ink)); background: color-mix(in srgb, var(--accent) 16%, transparent); }
[data-ev="booked"] > .label::after, [data-ev="booked"] > .l::after, .ev-tag[data-ev="booked"]::after {
  content: "Booked"; color: #fff; background: var(--good); }
.ev-tag { display: inline; }
.ev-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.ev-legend .ev-tag::after { margin-left: 0; margin-right: 4px; }
@media print { .ev-tag::after, .kpi[data-ev] > .label::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* ---------------------------------------------------------------- play 20: phone test */
.pt-slots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 10px; }
.pt-slots li { display: grid; gap: 4px; padding: 12px 14px; border: 1px dashed var(--rule); border-radius: 10px; font-size: 13px; }
.pt-slots li.done { border-style: solid; background: var(--series-soft); }
.pt-slots .pt-when { font-size: 12px; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.pt-slots b { font-size: 14px; }

/* ---------------------------------------------------------------- play 21: competitors */
.cp-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cp-head { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.cp-head b { font-weight: 550; min-width: 0; overflow-wrap: anywhere; }
.cp-head .num { flex: none; color: var(--ink-2); }
.cp-bars li:not(.you) .rv-bar span { background: color-mix(in srgb, var(--ink-3) 55%, transparent); }
.cp-bars li.you b { font-weight: 700; color: var(--primary); }
tr.cp-you td { background: var(--series-soft); }

/* ---------------------------------------------------------------- play 22: markets */
.mk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mk-list summary { display: grid; grid-template-columns: 28px minmax(0, 1fr) 40px minmax(60px, 160px); gap: 10px; align-items: center;
  padding: 10px 8px; border-radius: 8px; cursor: pointer; list-style: none; }
.mk-list summary::-webkit-details-marker { display: none; }
.mk-list summary:hover { background: var(--surface-2); }
.mk-rank { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--series-soft); color: var(--primary); font: 700 12px var(--sans); }
.mk-name { min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.mk-score { text-align: right; font-family: var(--sans); font-weight: 700; font-size: 16px; }
.mk-bar { margin-top: 0; }
.mk-why { padding: 4px 8px 14px 46px; }
.mk-trades { border: 0; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 6px 14px; }
.mk-trades legend { font-size: 13px; font-weight: 600; margin-bottom: 6px; padding: 0; }
@media (max-width: 600px) { .mk-list summary { grid-template-columns: 24px minmax(0, 1fr) 36px; } .mk-bar { display: none; } .mk-why { padding-left: 8px; } }
.mk-list li, .mk-list details, .mk-why { min-width: 0; }
.mk-why .dims td:last-child { white-space: normal; }
.rv-pane { margin-top: 14px; }
#rvIn .chips { margin-top: 4px; }
.rv-pane .form-foot { margin-top: 16px; }

/* ---------------------------------------------------------------- Ask AI (chat.js) */
/* ChatGPT-style page: conversation list on the left, the thread centred, the composer pinned at the bottom. */
.ai { --ai-brand: #005b52; --ai-brand-2: #0b7a6e; display: grid; grid-template-columns: 264px minmax(0, 1fr);
  height: calc(100vh - 230px); height: calc(100dvh - 230px); min-height: 460px; position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--shadow); }
.ai svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.ai-side { display: flex; flex-direction: column; min-height: 0; background: var(--ground); border-right: 1px solid var(--rule); }
.ai-new { display: flex; align-items: center; gap: 8px; margin: 12px; padding: 10px 12px; border-radius: 10px; font-weight: 600;
  color: var(--ink); background: var(--surface); border: 1px solid var(--rule); text-decoration: none; }
.ai-new:hover { border-color: var(--ai-brand-2); }
.ai-list { flex: 1; overflow-y: auto; padding: 0 8px 8px; }
.ai-list-label { margin: 14px 8px 4px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.ai-list-empty { margin: 10px 8px; font-size: 13px; color: var(--ink-3); }
.ai-item { display: flex; align-items: center; border-radius: 8px; }
.ai-item a { flex: 1; min-width: 0; padding: 8px; color: var(--ink); text-decoration: none; font-size: 13.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-item:hover, .ai-item.current { background: var(--series-soft); }
.ai-item.current a { font-weight: 600; }
.ai-item-btn { display: none; place-items: center; flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px;
  background: none; color: var(--ink-3); cursor: pointer; }
.ai-item-btn svg { width: 15px; height: 15px; }
.ai-item:hover .ai-item-btn, .ai-item.current .ai-item-btn, .ai-item-btn:focus-visible { display: grid; }
.ai-item-btn:hover { color: var(--ink); background: var(--surface); }
.ai-side-note { margin: 0; padding: 10px 14px 14px; font-size: 11.5px; color: var(--ink-3); border-top: 1px solid var(--rule-soft); }
.ai-backdrop { display: none; }

.ai-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ai-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--rule-soft); }
.ai-bar h2 { flex: 1; min-width: 0; margin: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-icon { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; cursor: pointer;
  background: none; color: var(--ink-2); }
.ai-icon:hover, .ai-icon[aria-pressed="true"] { background: var(--series-soft); color: var(--ai-brand-2); }
.ai-hist { display: none; }

.ai-thread { flex: 1; overflow-y: auto; padding: 24px 16px; }
.ai-msgs { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.ai-msg { display: flex; gap: 12px; align-items: flex-start; }
.ai-msg.user { justify-content: flex-end; }
.ai-bubble { max-width: 80%; padding: 10px 15px; border-radius: 18px; background: var(--series-soft); color: var(--ink);
  white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.ai-mark { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, var(--ai-brand-2), var(--ai-brand)); }
.ai-mark svg { width: 15px; height: 15px; fill: var(--accent-light); stroke: none; }
.ai-mark.lg { width: 56px; height: 56px; box-shadow: 0 6px 18px rgba(0, 70, 63, .25); }
.ai-mark.lg svg { width: 26px; height: 26px; }
.ai-answer { position: relative; flex: 1; min-width: 0; padding: 4px 34px 0 0; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
.ai-answer p { margin: 0 0 10px; }
.ai-answer p:last-of-type, .ai-answer ul:last-of-type, .ai-answer ol:last-of-type { margin-bottom: 0; }
.ai-answer ul, .ai-answer ol { margin: 4px 0 10px; padding-left: 20px; }
.ai-answer li { margin: 3px 0; }
.ai-answer strong { font-weight: 650; }
.ai-msg.err .ai-answer { padding: 10px 14px; border-radius: 12px; background: var(--crit-bg); color: var(--crit); }
.ai-say { position: absolute; top: 2px; right: 0; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0;
  border-radius: 50%; background: none; color: var(--ink-3); cursor: pointer; }
.ai-say svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.ai-say:hover { background: var(--series-soft); color: var(--ai-brand-2); }
.ai-answer.typing { display: flex; gap: 5px; padding-top: 12px; }
.ai-answer.typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); animation: ai-dot 1.2s infinite ease-in-out; }
.ai-answer.typing i:nth-child(2) { animation-delay: .15s; }
.ai-answer.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ai-dot { 0%, 80%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }

.ai-empty { max-width: 640px; margin: 6vh auto 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
.ai-empty h3 { margin: 16px 0 6px; font: 700 20px/1.3 var(--display); color: var(--ink); text-wrap: balance; }
.ai-empty p { margin: 0 0 20px; color: var(--ink-3); }
.ai-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.ai-chip { text-align: left; padding: 12px 14px; border-radius: 12px; cursor: pointer; font: 500 14px/1.35 var(--sans); color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule); transition: border-color .12s, background .12s; }
.ai-chip:hover { border-color: var(--ai-brand-2); background: var(--series-soft); }

.ai-composer { margin: 0; padding: 8px 16px 12px; }
.ai-box { max-width: 760px; margin: 0 auto; display: flex; align-items: flex-end; gap: 6px; padding: 8px 8px 8px 16px;
  border: 1px solid var(--rule); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); }
.ai-box:focus-within { border-color: var(--ai-brand-2); box-shadow: 0 0 0 3px var(--series-soft); }
.ai-box textarea { flex: 1; min-width: 0; resize: none; max-height: 200px; padding: 8px 0; border: 0; outline: none;
  background: none; color: var(--ink); font: 15px/1.45 var(--sans); }
.ai-mic, .ai-send { flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; cursor: pointer; }
.ai-mic { border: 0; background: none; color: var(--ink-2); }
.ai-mic:hover { background: var(--series-soft); color: var(--ai-brand-2); }
.ai-mic.listening { background: var(--crit); color: #fff; animation: ai-pulse 1.4s infinite; }
.ai-mic.listening svg { fill: currentColor; }
@keyframes ai-pulse { 0% { box-shadow: 0 0 0 0 rgba(217, 58, 58, .45); } 70% { box-shadow: 0 0 0 10px rgba(217, 58, 58, 0); } 100% { box-shadow: none; } }
.ai-send { border: 0; color: #fff; background: var(--ai-brand); }
.ai-send:hover { background: var(--ai-brand-2); }
.ai-send:disabled, .ai-mic:disabled { opacity: .4; cursor: default; }
.ai-note { max-width: 760px; margin: 6px auto 0; text-align: center; font-size: 11.5px; color: var(--ink-3); }
.ai :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Narrow screens: the conversation list becomes a drawer behind the history button. */
@media (max-width: 860px) {
  .ai { grid-template-columns: minmax(0, 1fr); }
  .ai-hist { display: grid; }
  .ai-side { position: absolute; inset: 0 auto 0 0; z-index: 3; width: min(300px, 85%); transform: translateX(-102%);
    transition: transform .2s ease; box-shadow: 0 0 40px rgba(11, 18, 32, .25); }
  .ai-side.open { transform: none; }
  .ai-backdrop:not([hidden]) { display: block; position: absolute; inset: 0; z-index: 2; background: rgba(11, 18, 32, .35); }
  .ai-item-btn { display: grid; }
}
@media (max-width: 600px) {
  .ai { height: calc(100vh - 170px); height: calc(100dvh - 170px); min-height: 380px; border-radius: 12px; }
  .ai-thread { padding: 16px 12px; }
  .ai-chips { grid-template-columns: 1fr; }
  .ai-bubble { max-width: 88%; }
  .ai-composer { padding: 6px 8px 8px; }
  .ai-note { display: none; }
}
/* Touch screens (phones and iPads) zoom in on text boxes under 16px. */
@media (pointer: coarse) { .ai-box textarea { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .ai-side, .ai-answer.typing i, .ai-mic.listening { animation: none; transition: none; } }
/* The rounded box shows focus (:focus-within), so the text field inside it needs no outline of its own. */
.ai .ai-box textarea:focus-visible { outline: none; }
/* Ask AI fills the whole area below the top bar, edge to edge, like a chat app: no page padding, no card frame.
   The top bar is 60px tall (56px at 900px wide and below). */
#view:has(> .content-ai) { padding: 0; max-width: none; }
.content-ai { gap: 0; }
.content-ai .ai { height: calc(100vh - 60px); height: calc(100dvh - 60px); min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
@media (max-width: 900px) { .content-ai .ai { height: calc(100vh - 56px); height: calc(100dvh - 56px); } }
/* "Forgot password?" sits under the password field, right-aligned. */
.auth .btn.link.forgot { justify-self: end; margin-top: 2px; font-size: 13px; }
/* Ask AI about one feature: the button on a feature's page, and the "About …" chip above the composer. */
.btn.ask-about { display: inline-flex; gap: 6px; align-items: center; }
.btn.ask-about svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ai-focus { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 8px max(16px, calc((100% - 760px) / 2)) 0; padding: 6px 6px 6px 12px; border: 1px solid var(--rule); border-radius: 999px; font-size: 13px;
  color: var(--ink-2); background: var(--surface); }
.ai-focus[hidden] { display: none; }
/* An action Ask AI offers under its answer: nothing runs until "Do it". */
.ai-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 10px;
  padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); }
.ai-act > div:first-child { display: grid; gap: 2px; min-width: 0; }
.ai-act small { color: var(--ink-3); }
.ai-act-btns { display: flex; gap: 6px; }
.ai-act.done { border-color: var(--good); color: var(--ink-2); }
/* Overview: what to do next (ranked by rules) and the team's weekly note. */
.ns-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; counter-reset: ns; }
.ns-list li { counter-increment: ns; }
.ns-list a { display: grid; gap: 2px; padding: 10px 12px 10px 40px; border: 1px solid var(--rule); border-radius: 10px;
  color: inherit; text-decoration: none; position: relative; }
.ns-list a::before { content: counter(ns); position: absolute; left: 12px; top: 10px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--surface); border: 1px solid var(--rule); font-size: 12px; display: grid; place-items: center; }
.ns-list a:hover { border-color: var(--ink-3); }
.ns-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ns-usd { margin-left: auto; font-weight: 600; white-space: nowrap; }
.ns-usd small { font-weight: 400; color: var(--ink-3); }
.ns-why { color: var(--ink-3); font-size: 0.92em; }
.wk-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.wk-lines { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.wk-btns { display: flex; gap: 6px; margin-top: 10px; }
.wk-all { margin: 10px 0 0; font-size: 13px; }
/* Client settings as a side panel over All clients (clients.js openClientSettings). */
.cs-wrap { position: fixed; inset: 0; z-index: 40; }
.cs-backdrop { position: absolute; inset: 0; background: rgb(8 13 20 / .38); }
.cs-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(680px, 100%); overflow-y: auto; background: var(--ground);
  box-shadow: -8px 0 32px rgb(0 0 0 / .18); padding: 0 24px 32px; animation: cs-in .16s ease-out; }
.cs-head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 18px 0 12px; margin-bottom: 8px; background: var(--ground); border-bottom: 1px solid var(--rule); }
.cs-title { margin: 2px 0 0; font-size: 22px; }
@keyframes cs-in { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (max-width: 640px) { .cs-drawer { padding: 0 16px 24px; } }
/* ---- Client overview (overview.js): charts coloured by class; one colour per program, light and dark. */
:root { --p-auditor: #5b6b8c; --p-audit: #0b7a6e; --p-never-miss: #2f6fd1; --p-win-back: #c98a00; --p-close: #8a4fd1;
  --p-new: #d9622b; --p-margin: #c23b6b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --p-auditor: #94a3c4; --p-audit: #2fc4a2;
  --p-never-miss: #6ea2f0; --p-win-back: #e5b84a; --p-close: #b28af0; --p-new: #f08a5a; --p-margin: #ef7aa3; } }
:root[data-theme="dark"] { --p-auditor: #94a3c4; --p-audit: #2fc4a2; --p-never-miss: #6ea2f0; --p-win-back: #e5b84a;
  --p-close: #b28af0; --p-new: #f08a5a; --p-margin: #ef7aa3; }
.prog-auditor { fill: var(--p-auditor); background: var(--p-auditor); } .prog-audit { fill: var(--p-audit); background: var(--p-audit); }
.prog-never-miss { fill: var(--p-never-miss); background: var(--p-never-miss); } .prog-win-back { fill: var(--p-win-back); background: var(--p-win-back); }
.prog-close { fill: var(--p-close); background: var(--p-close); } .prog-new { fill: var(--p-new); background: var(--p-new); }
.prog-margin { fill: var(--p-margin); background: var(--p-margin); }
.seg-counted { fill: var(--good); background: var(--good); } .seg-settling { fill: var(--accent); background: var(--accent); }
.seg-found { fill: var(--series-soft); background: var(--series-soft); stroke: var(--series); stroke-width: .3; }
.ov2-greet { margin-bottom: 12px; }
.ov2-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.ov2-card { margin: 0; display: flex; flex-direction: column; gap: 12px; color: inherit; text-decoration: none; }
.ov2-money { grid-column: 1 / -1; }
a.ov2-card:hover { border-color: var(--ink-3); }
.ov2-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ov2-head h2 { margin: 0; font-size: 15px; }
.ov2-money-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ov2-money-nums > div { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; }
.ov2-money-nums .v { font-size: 28px; font-weight: 700; font-family: var(--display); line-height: 1.1; }
.ov2-money-nums .l { grid-column: 2; color: var(--ink-3); font-size: 12.5px; }
.ov2-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.ov2-stack { width: 100%; height: 14px; border-radius: 7px; overflow: hidden; display: block; background: var(--rule-soft); }
.ov2-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ov2-bars a { display: grid; grid-template-columns: 9.5em 1fr auto; gap: 10px; align-items: center; color: inherit; text-decoration: none; }
.ov2-bars a:hover .ov2-bar-name { text-decoration: underline; }
.ov2-bar-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov2-bar { width: 100%; height: 12px; display: block; }
.ov2-bar .track { fill: var(--rule-soft); }
.ov2-bar-v { font-weight: 600; text-align: right; white-space: nowrap; }
.ov2-bar-v small { font-weight: 400; color: var(--ink-3); }
.ov2-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 12px; color: var(--ink-3); }
.ov2-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ov2-rings { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-around; }
.ov2-rings a { display: grid; justify-items: center; gap: 6px; color: inherit; text-decoration: none; font-size: 12.5px; }
.ov2-rings svg { width: 92px; height: 92px; }
.ring-track { fill: none; stroke: var(--rule-soft); stroke-width: 3.4; }
.ring { fill: none; stroke-width: 3.4; stroke-linecap: round; }
.ring-good { stroke: var(--good); } .ring-warn { stroke: var(--accent); }
.ring-v { font: 700 8.5px var(--display); fill: var(--ink); }
.ov2-cols { width: 100%; height: auto; display: block; }
.ov2-cols .col { fill: var(--series); } .ov2-cols g:hover .col { fill: var(--primary); }
.ov2-cols .col-l { font-size: 9px; fill: var(--ink-3); }
.ov2-total { margin: 0; color: var(--ink-3); font-size: 12.5px; } .ov2-total .num { color: var(--ink); font-weight: 600; }
.ov2-moves { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ov2-moves a { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 12px;
  border: 1px solid var(--rule); border-radius: 10px; color: inherit; text-decoration: none; }
.ov2-moves a:hover { border-color: var(--ink-3); }
.ov2-rank { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600;
  background: var(--series-soft); color: var(--series); }
.ov2-move { display: grid; } .ov2-move small { color: var(--ink-3); }
.ov2-move-v { font-weight: 700; font-size: 15px; }
@media (max-width: 760px) { .ov2-grid { grid-template-columns: 1fr; } .ov2-money-nums .v { font-size: 22px; }
  .ov2-bars a { grid-template-columns: 7.5em 1fr auto; } }
.ov2-dot.seg-found { box-shadow: inset 0 0 0 1.5px var(--series); }

/* Free demo: the sample-data bar and guided tour (js/demo-tour.js) */
.demo-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:10px 20px;background:#fff3cd;color:#4f3a00;font-size:14px}
.demo-bar-actions{display:flex;flex-wrap:wrap;gap:8px}
.demo-tour{position:fixed;right:20px;bottom:20px;z-index:60;width:min(360px,calc(100vw - 32px));padding:18px;border-radius:12px;background:#fff;color:#17332c;border:1px solid #dbe4df;box-shadow:0 18px 44px rgba(7,52,42,.28)}
.demo-tour h2{margin:0 0 6px;font-size:18px;color:#0b4a3a}
.demo-tour p{margin:0;font-size:14px;line-height:1.45}
.demo-tour .demo-tour-count{margin-bottom:4px;font-size:12px;font-weight:600;color:#52665f}
.demo-tour-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:14px}
.demo-tour-foot span{display:flex;gap:6px}
@media(max-width:600px){.demo-tour{right:16px;bottom:16px}}

.packet h4{margin:14px 0 4px}
.grid3{border-collapse:collapse;margin:6px 0;width:auto!important}
.grid3 td{border:1px solid var(--line,#ccc);width:44px;height:32px;text-align:center;font-variant-numeric:tabular-nums}
/* An opened lead sits inside the wide leads table: keep it screen-wide and pinned left on small screens. */
.lead-detail{position:sticky;left:12px;max-width:calc(var(--wrap-w,100%) - 24px);overflow-wrap:anywhere}
.packet ul,.packet ol{padding-left:20px}
.packet .form-foot{flex-wrap:wrap;gap:8px}
@media (max-width:720px){.packet h3{margin-top:4px}.grid3 td{width:38px;height:30px}}
@media (pointer:coarse){.lead-detail .btn.small,.lead-detail select{min-height:40px;padding-top:8px;padding-bottom:8px}}
/* The lead detail is a grid: without this its one column grows to the widest child (a long dropdown option, a packet
   line) and the packet runs off the right edge on phones. */
.lead-detail{grid-template-columns:minmax(0,1fr)}
.lead-detail>*{min-width:0}
.lead-detail select{max-width:100%}

/* Revenue opportunities in the review packet */
.packet .opps{padding-left:20px}
.packet .opps>li{margin:0 0 14px}
.packet .opps p{margin:4px 0}

/* client feedback popup (js/feedback.js) */
.fb-back { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgb(8 13 20 / .38);
  backdrop-filter: blur(3px); animation: cmdk-fade .12s ease-out; }
.fb { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--surface); border: 1px solid var(--rule);
  border-radius: 14px; box-shadow: 0 24px 64px -12px rgb(8 13 20 / .45); padding: 24px; display: grid; gap: 16px; }
.fb h2 { margin: 0; font-size: 20px; }
.fb-scale { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.fb-scale legend { padding: 0; margin-bottom: 8px; color: var(--ink-2); }
.fb-nums { display: grid; grid-template-columns: repeat(var(--n, 11), 1fr); gap: 4px; }
.fb-nums label { position: relative; }
.fb-nums input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.fb-nums span { display: grid; place-items: center; height: 38px; border: 1px solid var(--rule); border-radius: 6px; font-variant-numeric: tabular-nums; }
.fb-nums input:checked + span { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.fb-nums input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.fb-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); }
.fb textarea { width: 100%; resize: vertical; }
@media (max-width: 420px) { .fb-nums.wide { grid-template-columns: repeat(6, 1fr); } .fb { padding: 18px; } }
@media (prefers-reduced-motion: reduce) { .fb-back { animation: none; } }

/* lead qualifier reasons (js/leads.js) */
.fit-reasons { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 4px; }
.fit-reasons span { display: inline-block; width: 1.2em; font-weight: 600; }
.fit-pass span, .fit-plus span { color: var(--good, #1f7a4d); }
.fit-fail span { color: var(--crit, #b42318); }
.fit-check span { color: var(--warn, #a15c07); }