@charset "UTF-8";
/* ============================================================
   Apple restyle (2026-10-21) — a layer over styles.css
   ============================================================
   Loaded AFTER styles.css (index.html), so a plain rule here wins on source order and
   none of styles.css's measured invariants (grid floors, [hidden] guards, the bounded
   rail media queries) had to be edited. Deleting the one <link> restores the previous
   "instrument panel" look exactly.

   What it changes, and nothing else:
   · COLOURS → NOT CHANGED. styles.css's palette stands (see the :root note below).
   · TYPE → the platform's system font, figures in tabular numerals, and sentence-case
     labels. The all-caps mono eyebrows were the strongest "terminal" tell in the file.
   · CHROME → translucent rail + sticky header material, larger radii, softer cards.

   What it deliberately does NOT touch: --rev-a…d, --hm-0…6, --spd-1…5, --buy-bar and the
   other VALIDATED data palettes (CVD/lightness-checked — see CLAUDE.md), every grid
   template, and the semantic meaning of --good / --warn / --violet.
   ⚠️ Same discipline as styles.css: colours through tokens, never literals in a rule. */

:root {
  /* COLOURS ARE styles.css's, UNCHANGED (per user, 2026-10-21: "before they were good").
     The first cut of this layer swapped in Apple's grey/black system palette and a blue
     accent; it read as off-brand. Every neutral, the white accent and the semantic hues
     stay the tinted, contrast-solved ramp in styles.css. Only what the restyle NEEDS that
     styles.css has no token for is defined here, derived from that ramp. */
  --chrome: var(--glass-bg);                 /* translucent rail/header material = --surface @72% */
  --chrome-edge: var(--line-soft);

  /* ── radius: bigger, and still nested (inner = outer − padding) ── */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;

  /* ── type ── */
  /* SF on Apple devices, Segoe UI on Windows, Inter (webfont, fetched only when it is
     actually the face in use) everywhere else — never the platform's generic system-ui,
     which on Linux/ChromeOS is a wide DejaVu that wraps the rail labels. */
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
             "Segoe UI", "Inter", "Helvetica Neue", Roboto, sans-serif;
  --font: var(--display);
  /* Figures move off IBM Plex Mono onto the system face's TABULAR digits (see the
     tabular-nums rule below), so columns still align. --code keeps a real monospace for
     ids and sync detail strings. */
  --mono: var(--display);
  --code: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ls-caps: 0;   /* sentence-case labels need no caps tracking */
  --ls-wide: 0.01em;
  --ls-open: 0;

  /* critically damped — Apple's default for UI that didn't follow a flick */
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
}

/* ── base ─────────────────────────────────────────────────────────────── */
body {
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}
.grain { display: none !important; }        /* the film grain was finish, not information */
code, kbd, samp, .st-detail { font-family: var(--code); }

/* ── labels: sentence case, system face ─────────────────────────────────
   The uppercase-mono micro-caps (tile labels, column headers, eyebrows) become Apple's
   secondary-label style: same face as the data, smaller, quieter. Sizes are one step
   UP from before because lowercase reads smaller than caps at the same em. */
.total-label, .vt-head > span, .at-head > span, .ot-count, .dr-cap, .dr-month,
.ver-filter > span, .at-sub, .mkt-table th, .dr-quick-lab, .fnl-hint, .exp-label,
.field-label, .st-errkind, .st-anomhist summary, .brand-sub {
  font-family: var(--font); text-transform: none; letter-spacing: 0;
}
.total-label { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--label); }
.vt-head > span, .at-head > span, .mkt-table th {
  font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--label); text-transform: none;
}
/* the labels carried their own capitalisation from the source text ("WEBINAR DAY" was
   written "Webinar day"), so lifting the transform is enough — but a few are authored in
   lower case; first-letter keeps them looking like labels rather than typos. */
.total-label::first-letter, .at-head > span::first-letter, .vt-head > span::first-letter { text-transform: uppercase; }
/* The same sentence-case treatment for every other eyebrow / section label in the file
   (Executive, Forecast, Revenue mix, Buyers journey, Daily, Call Audit, Search, the
   setters scatter, the date picker). Tags and pills that MARK a value are left as caps:
   they are badges, not labels. */
.exm-lab, .fc-bhead > span, .fc-hlab, .fc-klab, .fc-nlab, .fc-whead > span,
.as-sec-h, .bc-title, .buy-grp-t, .drep-eyebrow, .drep-grphead, .jd-sec > summary > h3,
.rev-head, .rev-src-head, .sc-sub, .set-viewlbl, .wb-glance .g-lab, .rg-note, .dr-dow,
.sc-ylab, .sc-xlab, .sc-ymax, .sc-ymin, .sc-xmin, .sc-xmax,
#view-callaudit .ca-eye, #view-callaudit .ca-eye-inline, #view-callaudit .ca-h, #view-callaudit .ca-k {
  font-family: var(--font); text-transform: none; letter-spacing: 0;
}
.fnl-tag { font-family: var(--font); text-transform: none; letter-spacing: 0; font-size: var(--fs-xs); }
.at-total > .at-name, .at-total > span:first-child { font-family: var(--font); text-transform: none; letter-spacing: 0; }

/* figures: the system face at semibold reads like the Health / Stocks numbers */
.total-val { font-family: var(--font); font-weight: var(--fw-bold); letter-spacing: -0.025em; }
/* Tabular figures ON NUMBER CELLS ONLY. Set body-wide, Inter (and SF) also make the
   hyphen and colon tabular, which set "Ad-by-ad" as "Ad - by - ad" in every label. */
.num, .total-val, .dr-val, .window, .freshness, .st-when, .mkt-table td,
.atable.ovt .at-row > span:not(:first-child), .vt-row > span:not(.vt-ver) { font-variant-numeric: tabular-nums; }

/* ── rail: translucent sidebar material ─────────────────────────────────
   Desktop only (>640px): on a phone the rail is an off-canvas drawer over a scrim and
   must stay opaque. */
@media (min-width: 641px) {
  .rail {
    background: var(--chrome);
    -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
    border-right: 1px solid var(--chrome-edge); box-shadow: none;
  }
}
.rail-item { border-radius: var(--r-sm); color: var(--text); font-weight: var(--fw-medium); }
.rail-item:hover { background: var(--wash-2); color: var(--ink); }
/* macOS sidebar selection: a tinted fill with the label in white, not an inverted pill */
.rail-item.is-active { background: var(--accent); color: var(--accent-ink); font-weight: var(--fw-semi); box-shadow: none; }
.rail-subitem { border-radius: var(--r-sm); color: var(--muted); }
.rail-subitem:hover { color: var(--ink); background: var(--wash-1); }
.rail-subitem.is-active { color: var(--accent-dim); background: var(--accent-soft); font-weight: var(--fw-semi); }

/* ── header: sticky translucent bar, content scrolls under it ───────────
   The body's own gutters are mirrored as negative margins so the material reaches both
   edges of the content column. Desktop only, for the same reason as the rail. */
@media (min-width: 641px) {
  .topbar {
    --gut-l: clamp(var(--space-7), 3vw, var(--space-12));
    --gut-r: clamp(var(--space-7), 4vw, var(--space-13));
    position: sticky; top: 0;
    margin: calc(-1 * var(--space-9)) calc(-1 * var(--gut-r)) 0 calc(-1 * var(--gut-l));
    padding: var(--space-8) var(--gut-r) var(--space-7) var(--gut-l);
    background: var(--chrome);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--chrome-edge);
    align-items: center;
  }
}
/* phone menu button: a quiet grey control, not a solid-blue square */
.nav-burger { background: var(--surface-2); color: var(--ink); border-color: transparent; box-shadow: none; }
.view-title { font-weight: var(--fw-bold); letter-spacing: -0.03em; font-size: clamp(var(--fs-3xl), 1rem + 1.2vw, var(--fs-4xl)); }
.freshness { font-family: var(--font); font-weight: var(--fw-medium); font-size: var(--fs-xs); letter-spacing: 0; }
.freshness::before { box-shadow: none; }

/* ── cards ───────────────────────────────────────────────────────────── */
.wb, .mkt-card, .drep-day, .totals, .rev-card, .set-alert, .atable.st-table, .ca-panel {
  border-radius: var(--r-lg); border: 0;
  box-shadow: var(--shadow-1);
}
.wb { background: var(--surface); }
.wb-head { background: transparent; padding: var(--space-8) var(--space-9); }
.wb-head:hover { background: var(--wash-1); filter: none; }
.wb.open .wb-head { border-bottom-color: var(--line-soft); }
.wb-name { letter-spacing: -0.02em; font-weight: var(--fw-bold); }
.totals { background: var(--surface); }
.wb .totals { border-radius: 0; box-shadow: none; }
.total.accent { background: var(--wash-1); }
.totals { --tot-rule: var(--line-soft); }

/* tags: iOS-style capsules, tinted fill instead of an outlined box */
.tag {
  font-family: var(--font); text-transform: none; letter-spacing: 0;
  font-size: var(--fs-2xs); font-weight: var(--fw-semi);
  border-radius: var(--r-full); border: 0; padding: var(--space-1) var(--space-5);
  background: var(--wash-2); color: var(--text);
}
.tag.event { background: var(--accent-soft); color: var(--accent-dim); }
.tag.masterclass { background: var(--violet-line); color: var(--ink); }

/* ── tables ──────────────────────────────────────────────────────────── */
.vt-head, .atable.ovt .at-head, .atable .at-head { background: transparent; }
.atable.ovt .at-head > span:first-child, .vt-head > span:first-child,
#board-ads .at-head > span:first-child { background: var(--surface); }
.at-body .at-row:hover, .atable.ovt .at-body .at-row:hover,
#board-ads .at-body .at-row:hover { background: var(--wash-1); }
.atable.ovt .at-body .at-row:hover > .at-name,
#board-ads .at-body .at-row:hover > .at-name { background: var(--surface-2); }
.vt-row.is-all, .at-row.at-total { background: var(--wash-1); }
.vt-row.is-all .vt-ver { color: var(--ink); }

/* ── segmented controls (All/Ads/Organic, Counts/Costs/…) ───────────────
   A recessed track with a raised grey thumb, the iOS UISegmentedControl. */
/* background-COLOR, not the shorthand: the phone block in styles.css paints a scroll
   shade onto this element with background-image, and a shorthand here would erase it. */
.src-toggle {
  background-color: var(--surface); border: 0; border-radius: var(--r-sm);
  padding: var(--space-1); gap: var(--space-1);
}
.src-btn {
  border-radius: calc(var(--r-sm) - var(--space-1)); color: var(--muted);
  font-weight: var(--fw-medium); padding: var(--space-3) var(--space-7);
  transition: background var(--dur-2) var(--ease), color var(--dur-1) var(--ease-soft);
}
.src-btn + .src-btn { border-left: 0; }
.src-btn:hover { color: var(--ink); }
.src-btn.is-active {
  background: var(--surface-3); color: var(--ink); font-weight: var(--fw-semi);
  box-shadow: var(--shadow-1);
}
.seg { background: var(--surface); border: 0; border-radius: var(--r-sm); padding: var(--space-1); }
.seg button { border-radius: calc(var(--r-sm) - var(--space-1)); border: 0; }
.seg button[aria-pressed="true"] { background: var(--surface-3); color: var(--ink); }

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn { border-radius: var(--r-full); border: 0; background: var(--wash-2); color: var(--ink); font-weight: var(--fw-semi); }
.btn:hover { background: var(--wash-3); color: var(--ink); }
.btn.ghost { background: transparent; color: var(--accent-dim); }
.btn.ghost:hover { background: var(--accent-soft); color: var(--accent-dim); }
.btn.solid { background: var(--accent); color: var(--accent-ink); border: 0; box-shadow: none; }
.btn.solid:hover { background: var(--solid-hover); color: var(--accent-ink); transform: none; }
.set-addbtn, .dr-quick-btn { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: none; }
.dr-quick-name { color: var(--accent-ink); }
.exp-go.is-primary { background: var(--accent); border-color: var(--accent); }

/* ── date range control ─────────────────────────────────────────────── */
.daterange { background: var(--surface); border: 0; border-radius: var(--r-md); }
.dr-trigger { border-radius: calc(var(--r-md) - var(--space-2)); font-family: var(--font); }
.dr-trigger:hover { background: var(--wash-2); }
.dr-val { font-family: var(--font); font-weight: var(--fw-semi); }
.dr-cap { font-size: var(--fs-2xs); color: var(--label); }

/* ── floating layers: real material ─────────────────────────────────── */
.dr-pop, .toast, .sales-pop, .grade-split, .mkt-tip, .exp-card, .drawer-panel {
  border-radius: var(--r-lg);
}
.dr-pop, .toast, .mkt-tip {
  background: var(--pop-bg); border: 0;
  -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  box-shadow: var(--shadow-2);
}
.exp-card { background: var(--surface); border: 0; }
.drawer-panel { background: var(--surface); border-left: 0; border-radius: var(--r-lg) 0 0 var(--r-lg); }

/* ── inputs ─────────────────────────────────────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea {
  border-radius: var(--r-sm);
}

/* ── focus: Apple's thick blue ring ─────────────────────────────────── */
:focus-visible { outline-color: var(--accent); }

/* ── press feedback: scale, not a 1px drop ──────────────────────────────
   Placed after every .btn / .src-btn rule above so it wins on source order (the
   styles.css note on :active vs .btn.solid:hover applies here too). */
.btn:active, .btn.solid:active, .btn.ghost:active, .src-btn:active, .seg button:active,
.dr-quick-btn:active, .exp-go:active, .rail-item:active, .set-addbtn:active {
  transform: scale(0.97); transition: transform 100ms ease-out;
}

/* ── user preferences (must stay LAST) ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .btn:active, .btn.solid:active, .btn.ghost:active, .src-btn:active, .seg button:active,
  .dr-quick-btn:active, .exp-go:active, .rail-item:active, .set-addbtn:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .rail, .topbar, .dr-pop, .toast, .mkt-tip {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    background: var(--surface) !important;
  }
}
@media (prefers-contrast: more) {
  .wb, .totals, .src-toggle, .daterange { outline: 1px solid var(--line); outline-offset: -1px; }
}