/* ============================================================================
   OBF Attribution Dashboard — OBF Dreams brand system

   Built to the OBF Dreams brand kit (Layouts and brand instructions/OBF Dreams
   Branding). The rules that shape everything here:

   • White app, blue accent. #337AB7 appears only as an accent — active nav,
     links, focus rings, primary buttons, table-header tints, active tabs.
     Structure comes from 1px hairlines, never from fills.
   • The chrome is identical whichever brand's data is on screen. RedFish and
     Mira are DATA inside this product, not visual identities — their colours
     survive only as identity dots beside their names.
   • Light only. No dark mode, no `.dark` block, colorScheme pinned to light.
   • Roboto for headings, Inter for body/UI, self-hosted. 1.3 line-height ratio.
     No letter-spacing on headings; the wordmark alone carries -0.01em.
   • Motion is 120ms ease on colour/background/border/shadow only. Nothing
     moves, grows or transforms on hover.

   Chart series keep the CVD-validated dataviz palette: chart colour is data
   identity, not chrome, and six channels cannot be told apart with the kit's
   three-step ramp. The kit itself puts blue first in charts, so series 1
   remaining blue is consistent with it.

   Every colour literal in the app lives in this file.
   ========================================================================== */

/* ---- self-hosted fonts (kit rule: never a runtime third-party stylesheet) -- */
@font-face { font-family: 'Inter';  font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter';  font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter';  font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/roboto-400.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/roboto-500.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/roboto-700.woff2') format('woff2'); }

:root {
  color-scheme: light;

  /* ---- OBF Dreams brand tokens ------------------------------------------- */
  --brand-accent:   #337AB7;
  --accent-hover:   #2C6699;
  --accent-active:  #255A87;
  --accent-subtle:  rgba(51, 122, 183, 0.10);
  --accent-ring:    rgba(51, 122, 183, 0.30);
  --brand-navy:     #203354;   /* ink only, never a fill */

  --bg-base:        #FFFFFF;
  --surface:        #FFFFFF;
  --surface-raised: #F5F6F8;
  --surface-sunken: #F7F8FA;
  --line:           #E5E7EB;
  --line-strong:    #D5D8DE;

  --text-heading:   #111827;
  --text-body:      #374151;
  --text-muted:     #6B7280;
  --text-faint:     #9CA3AF;
  --text-on-accent: #FFFFFF;

  --success:        #1B7F4F;
  --warning:        #A66A00;
  --danger:         #C4322A;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --font-heading: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  /* Brand identity dots — brands are data, these colours never touch chrome.
     Values are each operating brand's official primary from its own kit. */
  --brand-dot-obf:     #337AB7;
  --brand-dot-mira:    #C3A544;
  --brand-dot-redfish: #aa0203;

  /* ---- chart tokens (consumed by charts.js; names kept stable) ------------ */
  --surface-1: #FFFFFF;               /* chart surface / marker rings */
  --plane:     #FFFFFF;
  --ink-1:     #111827;
  --ink-2:     #374151;
  --ink-3:     #6B7280;
  --gridline:  #E5E7EB;
  --axis:      #D5D8DE;
  --hair:        #E5E7EB;
  --hair-strong: #D5D8DE;
  --wash: rgba(51, 122, 183, 0.06);

  /* categorical channel series — CVD-validated, order fixed */
  --s1: #2a78d6;  --s2: #eb6834;  --s3: #1baf7a;
  --s4: #eda100;  --s5: #e87ba4;  --s6: #008300;
  /* slot 7 (Google LSA): the reference palette's violet. Validated in render
     order meta, google, lsa, organic, referral, direct, email on #FFFFFF —
     worst adjacent CVD dE 9.1, normal-vision dE 19.6, all gates pass. */
  --s7: #4a3aa7;

  /* ordinal funnel ramp — one hue, contrast rising with depth */
  --ord1: #86b6ef; --ord2: #5598e7; --ord3: #2a78d6;
  --ord4: #1c5cab; --ord5: #104281;

  /* status (charts + pills) mapped to the kit's semantic set */
  --good:     #1B7F4F;
  --critical: #C4322A;
  --delta-up: #1B7F4F;

  /* shell geometry — from the kit, exact */
  --rail-w: 264px;
  --brandrow-h: 84px;
}

* { box-sizing: border-box; }

html { scrollbar-color: var(--surface-raised) transparent; scrollbar-width: thin; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-base);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent-subtle); color: var(--text-heading); }

/* Focus is mandatory on every interactive element — outline plus soft halo. */
:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--accent-ring);
  border-radius: var(--radius-md);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: var(--surface-raised);
  background-clip: content-box;
  border: 2px solid transparent;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--line); }

a { color: var(--brand-accent); }

button { font-family: var(--font-body); }

/* ---- type utilities (1.3 ratio scale) ------------------------------------- */
.text-label { font-size: 13px; line-height: 16.9px; font-weight: 500; }
.text-meta  { font-size: 12px; line-height: 15.6px; font-weight: 400; color: var(--text-muted); }

/* ============================================================================
   Shell — fixed left rail, top bar, brand tab strip, scrolling content pane
   ========================================================================== */
.app {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  height: 100vh;
  overflow: hidden;
}

/* ---- left rail (kit §6.2, geometry exact) --------------------------------- */
.rail {
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.brand-row {
  height: var(--brandrow-h);            /* 84px including the 1px border */
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
}
.brand-row img { width: 52px; height: 52px; object-fit: contain; }
.wordmark {
  font-family: var(--font-heading);
  font-size: 19px; line-height: 26px; font-weight: 700;
  letter-spacing: -0.01em;              /* the one sanctioned tracking exception */
  color: var(--text-heading);
  margin: 0;
}

.nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;                              /* 2px, not 0 and not 8px */
}

/* Nav item: 44px derives from 10px padding + the 24px line box. Links, not
   buttons — middle-click and open-in-new-tab must work. */
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-size: 15px; line-height: 24px; font-weight: 600;
  color: var(--text-body);
  transition: color 120ms ease, background-color 120ms ease;
}
.nav-item svg { width: 18px; height: 18px; flex: none; }
.nav-item:hover { background: var(--accent-subtle); color: var(--text-heading); }
/* Hover and active share one background; only the text separates them, so
   hovering the item you are already on changes nothing. */
.nav-item[aria-current="page"] { background: var(--accent-subtle); color: var(--brand-accent); }

.rail-foot {
  flex: none;
  border-top: 1px solid var(--line);
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.rail-foot-text { min-width: 0; padding: 0 4px; }
.rail-foot-name {
  font-size: 13px; line-height: 20px; font-weight: 600;
  color: var(--text-heading);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail-foot-sub {
  font-size: 13px; line-height: 20px; font-weight: 400;
  color: #767676;                        /* literal from the client's layout spec */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.signout-btn {
  flex: none;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; border-radius: 6px;
  color: var(--text-muted); cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
}
.signout-btn svg { width: 16px; height: 16px; }
.signout-btn:hover { background: var(--accent-subtle); color: var(--text-heading); }

/* auth-off warning (only shown when the login is deliberately disabled) */
.auth-off {
  display: flex; gap: 8px; align-items: flex-start;
  border: 1px solid var(--warning); border-radius: var(--radius-md);
  padding: 9px 10px; font-size: 12px; line-height: 15.6px; color: var(--text-body);
}
.auth-off .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); margin-top: 3px; flex: none; }
.auth-off b { display: block; color: var(--text-heading); font-size: 13px; line-height: 16.9px; }
.auth-off-detail { margin-top: 2px; }

/* ---- right column --------------------------------------------------------- */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* Top bar — same 84px as the brand row, so the dividers align across the rail. */
.topbar {
  height: var(--brandrow-h);
  flex: none;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.topbar-group { display: flex; align-items: center; gap: 10px; }
.topbar-group .text-label { color: var(--text-muted); }
.topbar-spacer { flex: 1 1 auto; }

/* Peer-action buttons: every button in a group shares one treatment (tinted);
   the selected one is solid accent. Fixed 32px height. */
.btn-group { display: flex; gap: 6px; }
.btn-tinted {
  height: 32px;
  padding: 0 12px;
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--radius-md);
  border: 1px solid var(--accent-ring);
  background: var(--accent-subtle);
  color: var(--brand-accent);
  font-size: 14px; line-height: 18.2px; font-weight: 500;
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}
.btn-tinted:hover { background: var(--brand-accent); border-color: var(--brand-accent); color: var(--text-on-accent); }
.btn-tinted[aria-pressed="true"] {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: var(--text-on-accent);
}

.btn-secondary {
  height: 32px;
  padding: 0 12px;
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-body);
  font-size: 14px; line-height: 18.2px; font-weight: 500;
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}
.btn-secondary:hover { background: var(--surface-raised); color: var(--text-heading); }

.btn-primary {
  height: 36px;
  width: 100%;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--brand-accent);
  color: var(--text-on-accent);
  font-family: var(--font-body);
  font-size: 14px; line-height: 18.2px; font-weight: 500;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-active); }
.btn-primary:disabled { opacity: 0.6; cursor: default; }

/* ---- brand tab strip (kit §5.5 product tabs: tint + accent + underline) ---- */
.tabstrip {
  flex: none;
  display: flex;
  gap: 2px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-body);
  font-size: 14px; line-height: 18.2px; font-weight: 500;
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}
.tab:hover { background: var(--accent-subtle); color: var(--text-heading); }
.tab[aria-selected="true"] {
  background: var(--accent-subtle);
  color: var(--brand-accent);
  border-bottom-color: var(--brand-accent);
}
.brand-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--dot, var(--text-faint)); }

/* ---- content — the only scroll region ------------------------------------- */
.content-pane { flex: 1; min-height: 0; overflow-y: auto; background: var(--bg-base); }
.content {
  padding: 16px;
  display: flex; flex-direction: column; gap: 20px;
}
@media (min-width: 1280px) { .content { padding: 28px 32px 40px; gap: 24px; } }

/* ---- page head ------------------------------------------------------------
   Title and one short line. Anything longer belongs behind an info button. */
.page-head {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 12px 16px;
  padding-bottom: 4px;
}
.page-head-text { min-width: 0; }
.page-title {
  font-family: var(--font-heading);
  font-size: 32px; line-height: 41.6px; font-weight: 400;
  color: var(--text-heading);
  margin: 0;
}
.page-note { font-size: 14px; line-height: 18.2px; color: var(--text-muted); margin: 4px 0 0; max-width: 75ch; }

/* Provisional definitions: one quiet chip, explanation on request. */
.chip-provisional {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 2px 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 12px; line-height: 15.6px; font-weight: 500;
  color: var(--text-muted);
  background: var(--surface);
}
.chip-provisional > .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warning); flex: none; }
.chip-provisional .info-btn { width: 24px; height: 24px; }

/* ---- cards and panels ----------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px 24px 24px;
  min-width: 0;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.card-title-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.card-center { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 40px 24px; }
.muted { color: var(--text-muted); }
.muted-line { font-size: 14px; line-height: 18.2px; color: var(--text-muted); margin: 0 0 8px; }

/* ---- info button + popover -------------------------------------------------
   Explanations live one click away, so the page itself stays quiet. */
.info-wrap { position: relative; display: inline-flex; }
.info-btn {
  width: 28px; height: 28px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; border-radius: 50%;
  color: var(--text-faint); cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
}
.info-btn svg { width: 16px; height: 16px; }
.info-btn:hover, .info-btn[aria-expanded="true"] { color: var(--brand-accent); background: var(--accent-subtle); }
.info-btn:focus-visible { border-radius: 50%; }
.popover {
  position: absolute; z-index: 30;
  top: calc(100% + 6px); left: -8px;
  width: max-content; max-width: min(340px, calc(100vw - 48px));
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: 8px;
  text-align: left; white-space: normal;
}
.popover[hidden] { display: none; }
.popover p { margin: 0; font-size: 13px; line-height: 19px; font-weight: 400; color: var(--text-body); font-family: var(--font-body); }
.popover b { color: var(--text-heading); font-weight: 600; }
.page-head .popover { left: auto; right: -2px; }

/* ---- collapsed detail ------------------------------------------------------ */
.disclosure {
  border-top: 1px solid var(--line);
  padding-top: 4px;
}
.disclosure summary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 4px;
  font-size: 13px; line-height: 16.9px; font-weight: 500;
  color: var(--text-muted);
  cursor: pointer; list-style: none;
  border-radius: var(--radius-md);
  transition: color 120ms ease;
}
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary::before {
  content: ''; width: 6px; height: 6px; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  rotate: -45deg; margin-right: 2px;
}
.disclosure[open] summary::before { rotate: 45deg; }
.disclosure summary:hover { color: var(--brand-accent); }
.disclosure-body { display: flex; flex-direction: column; gap: 10px; padding: 6px 4px 8px; max-width: 80ch; }
.disclosure-body p { margin: 0; font-size: 14px; line-height: 21px; color: var(--text-body); }
.disclosure-body b { color: var(--text-heading); font-weight: 600; }
.card-title {
  font-family: var(--font-heading);
  font-size: 20px; line-height: 26px; font-weight: 500;
  color: var(--text-heading);
  margin: 0;
}

.view-toggle {
  flex: none;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--accent-ring);
  background: var(--accent-subtle);
  color: var(--brand-accent);
  font-size: 12px; line-height: 15.6px; font-weight: 500;
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}
.view-toggle:hover { background: var(--brand-accent); border-color: var(--brand-accent); color: var(--text-on-accent); }

/* ---- lead block: hero + ribbon -------------------------------------------- */
.lead {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.lead-hero {
  padding: 28px 28px 26px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
}
.hero-label { font-size: 13px; line-height: 16.9px; font-weight: 500; color: var(--text-muted); }
.hero-value {
  font-family: var(--font-heading);
  font-size: 52px; line-height: 60px; font-weight: 400;
  color: var(--brand-navy);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.hero-meta { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 13px; line-height: 18px; color: var(--text-muted); margin-top: 6px; }
.hero-meta b { color: var(--text-heading); font-weight: 500; }
.lead-ribbon { padding: 24px 28px 26px; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.ribbon-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.section-label {
  font-family: var(--font-heading);
  font-size: 20px; line-height: 26px; font-weight: 500;
  color: var(--text-heading); margin: 0;
}

.micro { font-size: 12px; line-height: 15.6px; font-weight: 500; color: var(--text-muted); }

.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 15.6px; color: var(--text-body); }
.legend-swatch { width: 10px; height: 10px; border-radius: var(--radius-sm); flex: none; }
.legend-line { width: 14px; height: 2px; border-radius: 1px; flex: none; }

/* ---- KPI band ---------------------------------------------------------------
   One white panel, figures divided by hairlines. Lines are drawn as outside
   shadows on the left and top of each figure; the panel clips the outer ones,
   so the dividers stay right however the grid wraps. */
.kpi-band {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
@media (max-width: 1180px) { .kpi-band.cols-5, .kpi-band.cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .kpi-band { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.kpi {
  padding: 20px 24px 22px;
  box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line);
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.kpi-label { font-size: 13px; line-height: 16.9px; font-weight: 500; color: var(--text-muted); }
.kpi-value {
  font-family: var(--font-heading);
  font-size: 30px; line-height: 38px; font-weight: 400;
  color: var(--brand-navy);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; min-height: 16px; }
.kpi-delta { font-size: 12px; line-height: 15.6px; font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.kpi-delta.up { color: var(--delta-up); }
.kpi-delta.down { color: var(--danger); }
.kpi-spark { width: 78px; height: 30px; flex: none; }
.kpi-note { font-size: 12px; line-height: 15.6px; color: var(--text-muted); }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.grid-wide { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 900px) { .grid-wide { grid-template-columns: minmax(0, 1fr); } }

/* ---- tables (kit §5.2: tinted header, divider rhythm, no zebra) ------------ */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 18.2px; }
thead th {
  text-align: left;
  font-size: 13px; line-height: 16.9px; font-weight: 500;
  color: var(--brand-accent);
  background: var(--accent-subtle);
  padding: 9px 12px 9px 0;
  white-space: nowrap;
}
thead th:first-child { padding-left: 12px; border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); }
thead th:last-child { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
tbody td {
  padding: 12px 12px 12px 0;
  border-top: 1px solid var(--line);
  color: var(--text-body);
  white-space: nowrap;
}
tbody td:first-child { padding-left: 12px; }
tbody tr { transition: background-color 120ms ease; }
tbody tr:hover { background: var(--surface-raised); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.name { color: var(--text-heading); font-weight: 500; white-space: normal; min-width: 168px; }
.cell-key { display: inline-flex; align-items: center; gap: 7px; }
.cell-swatch { width: 9px; height: 9px; border-radius: 2px; flex: none; }
/* Grouped tables: a market's subtotal row heads its campaigns. */
tbody tr.group-row td {
  background: var(--surface-raised);
  color: var(--text-heading);
  font-weight: 600;
  border-top: 1px solid var(--hair-strong);
}
tbody tr.group-row:hover { background: none; }
td.indent { padding-left: 26px !important; font-weight: 400; }
.rank-delta { font-size: 12px; line-height: 15.6px; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.rank-delta.up { color: var(--delta-up); }
.rank-delta.down { color: var(--danger); }

/* ---- chips / pills (4px radius, meta size, tint + word never colour alone) - */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; line-height: 15.6px; font-weight: 500;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  color: var(--text-body);
  white-space: nowrap;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.pill.ok      { background: rgba(27, 127, 79, 0.10);  border-color: transparent; color: var(--success); }
.pill.ok .dot { background: var(--success); }
.pill.warning { background: rgba(166, 106, 0, 0.10);  border-color: transparent; color: var(--warning); }
.pill.warning .dot { background: var(--warning); }
.pill.critical { background: rgba(196, 50, 42, 0.10); border-color: transparent; color: var(--danger); }
.pill.critical .dot { background: var(--danger); }
.pill.idle .dot { background: var(--text-faint); }

/* ---- health list ----------------------------------------------------------- */
.health-list { display: flex; flex-direction: column; }
.health-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: 14px; line-height: 18.2px;
}
.health-row:first-child { border-top: 0; }
.health-name { color: var(--text-heading); font-weight: 500; }
.health-detail { color: var(--text-muted); font-size: 12px; line-height: 15.6px; margin-top: 2px; }

/* Empty states: a short title and one line on what fills them. */
.empty {
  padding: 36px 18px; text-align: center;
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
}
.empty-title { font-size: 15px; line-height: 19.5px; font-weight: 500; color: var(--text-heading); }
.empty-detail { font-size: 13px; line-height: 18px; color: var(--text-muted); margin-top: 4px; }

.loading { opacity: 0.55; transition: opacity 120ms ease; }

/* ---- SVG chart chrome ------------------------------------------------------ */
.plot { display: block; overflow: visible; }
.gridline { stroke: var(--gridline); stroke-width: 1; shape-rendering: crispEdges; }
.axis-rule { stroke: var(--axis); stroke-width: 1; shape-rendering: crispEdges; }
.crosshair { stroke: var(--axis); stroke-width: 1; pointer-events: none; }
.tick { font-size: 11px; fill: var(--text-muted); font-variant-numeric: tabular-nums; }
.tick-y { text-anchor: end; }
.tick-x { text-anchor: middle; }
.end-label { font-size: 12px; fill: var(--text-body); font-weight: 600; }
.funnel-label, .bar-label { font-size: 13px; fill: var(--text-heading); }
.funnel-value, .bar-value { font-size: 13px; fill: var(--text-body); font-weight: 600; font-variant-numeric: tabular-nums; }
.funnel-rate { font-size: 11px; fill: var(--text-muted); }
.ribbon-label { font-size: 11px; font-weight: 600; fill: #FFFFFF; font-variant-numeric: tabular-nums; }
.ribbon-seg { cursor: default; }
.spark { display: block; }

/* ---- tooltip --------------------------------------------------------------- */
.tip {
  position: fixed; z-index: 40; pointer-events: none;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  box-shadow: var(--shadow-md);
  min-width: 132px; max-width: 260px;
}
.tip-title { font-size: 11px; color: var(--text-muted); margin-bottom: 5px; }
.tip-row { display: flex; align-items: baseline; gap: 7px; padding: 1px 0; }
.tip-key { width: 12px; height: 2px; border-radius: 1px; flex: none; align-self: center; }
.tip-val { font-size: 13px; font-weight: 600; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.tip-label { font-size: 12px; color: var(--text-body); }

/* ---- login ----------------------------------------------------------------- */
.login-wrap {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 24px;
  background: var(--bg-base);
}
.login-card {
  width: 100%; max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 28px 26px 24px;
}
.login-mark { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.login-mark img { width: 52px; height: 52px; object-fit: contain; }
.login-title {
  font-family: var(--font-heading);
  font-size: 19px; line-height: 26px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text-heading); margin: 0;
}
.login-sub { font-size: 13px; line-height: 18px; color: var(--text-muted); margin: 2px 0 0; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 13px; line-height: 16.9px; font-weight: 500; color: var(--text-body); }
.field input {
  font: inherit;
  font-size: 14px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  color: var(--text-heading);
  transition: border-color 120ms ease;
}
.field input::placeholder { color: var(--text-faint); }
.field input:focus { outline: none; border-color: var(--brand-accent); box-shadow: 0 0 0 4px var(--accent-ring); }
.form-error { font-size: 13px; line-height: 18px; color: var(--danger); margin: 0 0 12px; min-height: 1em; }

/* ---- responsive ------------------------------------------------------------ */
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); height: auto; overflow: visible; }
  .rail { flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand-row { border-bottom: 0; }
  .nav { flex-direction: row; flex-wrap: wrap; overflow: visible; }
  .rail-foot { border-top: 0; margin-left: auto; }
  .topbar { height: auto; padding: 12px 16px; flex-wrap: wrap; gap: 12px; }
  .tabstrip { padding: 0 16px; overflow-x: auto; }
  .content-pane { overflow: visible; }
  .lead { grid-template-columns: minmax(0, 1fr); }
  .lead-hero { border-right: 0; border-bottom: 1px solid var(--line); padding: 20px; }
  .lead-ribbon { padding: 20px; }
  .card { padding: 16px 16px 20px; }
  .kpi { padding: 16px; }
  .kpi-value { font-size: 24px; line-height: 31.2px; }
  .page-title { font-size: 24px; line-height: 31.2px; }
  .hero-value { font-size: 40px; line-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================================
   How To Use — the kit's docs-tab pattern (Layouts/docs-tab.md), exact:
   248px sticky section rail in a card, content card at 24px padding, body
   copy capped at 75ch, tables in scroll wrappers, titled notes.
   ========================================================================== */
.guide-grid {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);   /* min-width:0 — a wide table
                                                    must scroll, not the page */
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) { .guide-grid { grid-template-columns: minmax(0, 1fr); } }

.guide-rail {
  position: sticky;
  top: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.guide-rail-entry {
  border: 0;
  background: transparent;
  text-align: left;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: 15px; line-height: 24px; font-weight: 600;
  color: var(--text-body);
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
}
.guide-rail-entry:hover { background: var(--accent-subtle); color: var(--text-heading); }
.guide-rail-entry[aria-current="true"] { background: var(--accent-subtle); color: var(--brand-accent); }

.guide-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  padding: 24px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.guide-panel-head { border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.guide-title {
  font-family: var(--font-heading);
  font-size: 26px; line-height: 34px; font-weight: 600;
  color: var(--text-heading); margin: 0;
}
.guide-summary { font-size: 15px; line-height: 24px; color: var(--text-body); margin: 6px 0 0; max-width: 70ch; }

.guide-h { font-family: var(--font-heading); font-size: 20px; line-height: 28px; font-weight: 600; color: var(--text-heading); margin: 8px 0 0; }
.guide-p { font-size: 16px; line-height: 26px; color: var(--text-body); margin: 0; max-width: 75ch; }
.guide-list { margin: 0; padding-left: 20px; max-width: 75ch; }
.guide-list li { font-size: 16px; line-height: 26px; color: var(--text-body); margin-bottom: 6px; }

.guide-table-wrap { overflow-x: auto; }
.guide-table { border-collapse: collapse; min-width: 520px; width: 100%; }
.guide-table th {
  text-align: left;
  font-size: 13px; line-height: 16.9px; font-weight: 500;
  color: var(--text-muted);
  background: none;
  padding: 0 16px 8px 0;
  border-bottom: 1px solid var(--line);
}
.guide-table td {
  font-size: 14px; line-height: 20px;
  padding: 8px 16px 8px 0;
  border-top: 1px solid var(--surface-raised);
  color: var(--text-body);
  vertical-align: top;
}
.guide-table tr:first-child td { border-top: 0; }
.guide-table td:first-child { font-weight: 600; color: var(--text-heading); white-space: nowrap; }

.guide-note {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px; border-radius: var(--radius-md);
  max-width: 80ch;
}
.guide-note svg { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.guide-note-title { font-size: 15px; line-height: 24px; font-weight: 600; color: var(--text-heading); margin: 0; }
.guide-note-text { font-size: 15px; line-height: 24px; color: var(--text-body); margin: 2px 0 0; max-width: 75ch; }
.guide-note.gap { background: rgba(196, 50, 42, 0.08); }
.guide-note.gap svg { color: var(--danger); }
.guide-note.placeholder { background: var(--surface-sunken); }
.guide-note.placeholder svg { color: var(--text-muted); }

.guide-figure { margin: 0; max-width: 860px; }
.guide-figure img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.guide-figure figcaption { font-size: 12px; line-height: 15.6px; color: var(--text-muted); margin-top: 6px; }

/* ---- page toolbar (Markets & Campaigns) ------------------------------------
   Filters sit in one row above everything they scope. Same label + control
   rhythm as the top bar; wraps rather than scrolls on narrow screens. */
.card.toolbar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 12px 24px;
  padding: 14px 16px;
}
.toolbar-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toolbar-group .text-label { color: var(--text-muted); }
/* Button rows wrap inside the card on narrow screens instead of pushing the
   page sideways. */
.toolbar .btn-group { flex-wrap: wrap; row-gap: 6px; }
.toolbar-spacer { flex: 1 1 auto; }

/* Selects take the kit's input treatment: sunken fill, hairline, accent focus. */
.select {
  font: inherit;
  font-size: 14px; line-height: 18.2px;
  height: 32px;
  max-width: 320px;
  padding: 0 32px 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-sunken) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: var(--text-heading);
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 120ms ease;
}
.select:focus { outline: none; border-color: var(--brand-accent); box-shadow: 0 0 0 4px var(--accent-ring); }

/* ============================================================================
   Welcome dialog and guided tour (public/tour.js)

   Both sit outside #root and above everything in it. The tour dims the page
   with one shadow cast by the highlight box itself, so the "hole" around the
   element needs no extra layers.

   Motion: the highlight glides between elements (driven frame by frame in
   tour.js, so it can travel with the page as it scrolls), the card fades out
   and back in around it, and the dim fades up and away. This is motion that
   answers the person's own click, not decoration; the kit's no-motion rule is
   about hover. Under prefers-reduced-motion it all becomes instant — the
   global rule at the top of this file, and reducedMotion() in tour.js.
   ========================================================================== */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Buttons here are display:inline-flex, which beats the browser's [hidden]. */
.welcome [hidden], .tour-card [hidden], .tour-spot[hidden], .tour-card[hidden] { display: none !important; }

/* ---- welcome ------------------------------------------------------------- */
.welcome-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(17, 24, 39, 0.55);
  /* backwards, not both: once it has played, .is-leaving must be free to
     fade it out again. */
  animation: obf-fade-in 220ms ease backwards;
  transition: opacity 160ms ease;
}
.welcome-backdrop.is-leaving { opacity: 0; }
@keyframes obf-fade-in { from { opacity: 0; } }
@keyframes obf-rise-in { from { opacity: 0; transform: translateY(8px); } }
.welcome {
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 48px rgba(16, 24, 40, 0.18);
  padding: 28px 28px 24px;
  animation: obf-rise-in 260ms ease backwards;
}
.welcome-head { display: flex; align-items: center; gap: 14px; }
.welcome-head img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.welcome-title {
  font-family: var(--font-heading);
  font-size: 24px; line-height: 31.2px; font-weight: 400;
  color: var(--text-heading);
  margin: 0;
}
.welcome-text { font-size: 15px; line-height: 23px; color: var(--text-body); margin: 16px 0 0; }
.welcome-guide {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}
.welcome-guide svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--brand-accent); }
.welcome-guide p { margin: 0; font-size: 14px; line-height: 21px; color: var(--text-body); }
.welcome-link {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--brand-accent);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  transition: color 120ms ease;
}
.welcome-link svg { width: 14px; height: 14px; margin: 0; color: currentColor; }
.welcome-link:hover { color: var(--accent-hover); text-decoration: underline; }
.welcome-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 16px;
  margin-top: 24px;
}
.welcome-check {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; line-height: 16.9px; color: var(--text-muted);
  cursor: pointer;
}
.welcome-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand-accent); cursor: pointer; }
.welcome-buttons { display: flex; gap: 8px; margin-left: auto; }
.welcome .btn-primary, .welcome .btn-secondary { width: auto; height: 36px; padding: 0 18px; }
@media (max-width: 480px) {
  .welcome { padding: 22px 20px 20px; }
  .welcome-buttons { width: 100%; }
  .welcome-buttons > * { flex: 1 1 0; }
}

/* ---- tour: the highlight -------------------------------------------------- */
.tour-spot {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  border-radius: var(--radius-lg);
  /* An accent outline around the element, then the dim over everything else.
     Every state below keeps the same two shadows, only recoloured, so a change
     of state fades rather than snaps. */
  box-shadow: 0 0 0 2px var(--brand-accent), 0 0 0 9999px rgba(17, 24, 39, 0.55);
  transition: box-shadow 220ms ease;
}
/* Nothing to point at: no outline, just the dim. */
.tour-spot.is-center { box-shadow: 0 0 0 2px transparent, 0 0 0 9999px rgba(17, 24, 39, 0.55); }
/* Changing report: a deeper dim while the page underneath is replaced. */
.tour-spot.is-dark { box-shadow: 0 0 0 2px transparent, 0 0 0 9999px rgba(17, 24, 39, 0.72); }
/* Arriving and leaving: no dim at all. Declared last, so it wins. */
.tour-spot.is-off { box-shadow: 0 0 0 2px transparent, 0 0 0 9999px rgba(17, 24, 39, 0); }

/* ---- tour: the card -------------------------------------------------------- */
.tour-card {
  position: fixed;
  z-index: 1001;
  width: 360px;
  max-width: calc(100vw - 32px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(16, 24, 40, 0.20);
  padding: 20px 20px 16px;
  overflow: hidden;
  transition: opacity 160ms ease, transform 160ms ease;
}
.tour-card.is-faded { opacity: 0; transform: translateY(6px); pointer-events: none; }
/* The invisible copy tour.js measures the next step with. Never seen, never
   in the way; the same width as the real card in either layout. */
.tour-card.tour-measure,
.tour-card.tour-measure.is-docked {
  visibility: hidden;
  left: -10000px; right: auto;
  top: 0; bottom: auto;
  transition: none;
}
.tour-card.tour-measure.is-docked { width: calc(100vw - 32px); }
.tour-card.is-docked {
  left: 16px; right: 16px; top: auto;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: auto;
  max-width: none;
}
.tour-progress { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--line); }
.tour-progress-bar { display: block; height: 100%; width: 0; background: var(--brand-accent); }
.tour-meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 12px; line-height: 15.6px; color: var(--text-muted);
  margin-bottom: 8px;
}
.tour-chapter { font-weight: 500; }
.tour-count { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tour-title {
  font-family: var(--font-heading);
  font-size: 18px; line-height: 24px; font-weight: 500;
  color: var(--text-heading);
  margin: 0 0 6px;
}
.tour-body { font-size: 14px; line-height: 21px; color: var(--text-body); margin: 0; }
.tour-card.is-opening .tour-body { color: var(--text-muted); }
.tour-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.tour-spacer { flex: 1 1 auto; }
.tour-card .btn-primary, .tour-card .btn-secondary { width: auto; height: 32px; padding: 0 14px; }
.tour-end {
  border: 0;
  background: transparent;
  padding: 6px 4px;
  margin-left: -4px;
  font-family: var(--font-body);
  font-size: 13px; line-height: 16.9px; font-weight: 500;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 120ms ease;
}
.tour-end:hover { color: var(--brand-accent); }

@media print {
  .welcome-backdrop, .tour-spot, .tour-card { display: none !important; }
}