/* Ref Desk — aiRef admin console styling.
 *
 * The aiRef paper identity (docs/DESIGN_SYSTEM.md), worn properly: a crisp
 * product layer resting on real-feeling paper — grain, torn edges, tape
 * strips, angled mounts and one believable light direction — with cyan/pink
 * as equal accent sides (never success/error) and lime absent from product
 * chrome (§3.2; the favicon carries the desk's single lime fleck).
 * Everything is same-origin: self-hosted variable fonts, data-URI textures,
 * no CDN anything (docs/SECURITY.md §3.8 + the admin CSP in firebase.json).
 */

/* ---------- Self-hosted variable fonts (SIL OFL) ---------- */
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk-var-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ----------
 * Theme contract: the COMPLETE light palette lives here on bare :root, so no
 * colour exists only inside a media query. The dark override set appears
 * twice below — under the prefers-color-scheme media query (guarded so an
 * explicit "light" choice wins) and under :root[data-theme="dark"] (so an
 * explicit "dark" choice wins even on a light OS). theme.js stamps
 * data-theme before first paint; no attribute = follow the system. */
:root {
  color-scheme:light;
  --paper:#F7F1E3; --surface:#FCF8EE; --surface2:#FFFFFF; --ink:#050505;
  --sub:#5B5547; --faint:#8C8574; --line:#E3D9C4; --line-soft:#EDE5D2;
  --ink-surface:#050505; --on-ink:#F7F1E3;
  --cyan:#17CFF3; --cyan-deep:#086A84; --cyan-soft:#E0F8FD; --cyan-tint:#F0FCFE;
  --pink:#FF3C8E; --pink-deep:#B8005C; --pink-soft:#FFE9F2;
  --lime:#D9FF3F; /* reserved: never product chrome — see §3.2 */
  --mat:#FFFFFF;  /* the white mount board a collage print is taped to */
  --warn-bg:#FBF3DC; --warn-line:#E4D3A2; --warn-ink:#6C5619;
  --danger-bg:#FBEDEA; --danger-line:#E7C2BA; --danger-ink:#8F2F23;
  --chart-fill:#0EA8CC;
  /* Cut-paper shadows: a crisp contact edge + one soft warm throw. */
  --shadow:0 1px 2px rgba(38,32,21,.14), 0 22px 48px -28px rgba(38,32,21,.5);
  --shadow-deep:0 2px 3px rgba(38,32,21,.2), 0 34px 70px -30px rgba(38,32,21,.55);
  --grain-opacity:.05;
  /* Theme-dependent element details, hoisted to tokens so the dark theme is
     one substitutable value set (no element rule lives only in dark). */
  --mount-border-color:transparent;          /* dark: hairline on dark felt */
  --hero-eyebrow:var(--cyan);                /* dark hero is lit paper — deep cyan */
  --hero-copy:#BAB29F;
  --hero-decor-filter:none;                  /* dark: invert ivory decor to ink */
  --hero-decor-opacity:.07;
  --auth-card-shadow:0 1px 2px rgba(38,32,21,.16), 10px 14px 0 -5px var(--surface2), 10px 14px 0 -4px var(--line), 0 30px 64px -28px rgba(38,32,21,.55);
  --avatar-bg:var(--paper);                  /* dark: surface2 so it reads on ink */
  --toast-bg:var(--ink-surface); --toast-ink:var(--on-ink); --toast-border:transparent;
  --display:'Space Grotesk','Inter',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease-settle:cubic-bezier(.22,.9,.3,1);
  /* Paper grain tiles (inline turbulence — no network fetch). */
  --grain-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-ivory:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-body:var(--grain-ink);
  /* Torn-edge masks (transposed from Artwork/overlays/torn-divider.svg).
     tear-x: a vertical tear, paper solid to the right; tear-y: horizontal,
     paper solid below. Painted with currentColor-free elements + CSS vars so
     both themes share one asset. */
  --tear-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='13 0 27 1600' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M24 0L28 42 18 76 29 113 21 147 34 186 23 230 30 267 19 309 27 350 17 391 29 432 22 478 36 520 25 563 32 608 20 650 30 695 17 741 29 786 22 832 33 879 20 920 31 968 18 1012 28 1058 21 1102 34 1148 24 1191 30 1237 19 1281 28 1326 17 1368 31 1410 22 1457 34 1500 20 1548 29 1600L140 1600L140 0Z'/%3E%3C/svg%3E");
  --tear-y:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 13 1600 27' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 24L42 28 76 18 113 29 147 21 186 34 230 23 267 30 309 19 350 27 391 17 432 29 478 22 520 36 563 25 608 32 650 20 695 30 741 17 786 29 832 22 879 33 920 20 968 31 1012 18 1058 28 1102 21 1148 34 1191 24 1237 30 1281 19 1326 28 1368 17 1410 31 1457 22 1500 34 1548 20 1600 29V140H0Z'/%3E%3C/svg%3E");
  /* Hand-drawn court geometry, ivory ink — ambient decoration on ink panels. */
  --court-ivory:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%23F7F1E3' stroke-width='2'%3E%3Ccircle cx='300' cy='300' r='168' stroke-dasharray='10 16'/%3E%3Ccircle cx='300' cy='300' r='262'/%3E%3Cpath d='M38 300H562M300 38V562' stroke-dasharray='2 10'/%3E%3C/g%3E%3C/svg%3E");
}
* { box-sizing:border-box; margin:0; padding:0; }
html { min-width:280px; background:var(--paper); }
body { font-family:var(--body); color:var(--ink); background:var(--paper); line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:clip; }
/* Whole-desk paper grain: one physical print, everything under it. */
body::after { content:""; position:fixed; inset:0; z-index:400; pointer-events:none; opacity:var(--grain-opacity); background:var(--grain-body); background-size:240px 240px; }
button,input,textarea,select { font:inherit; }
button { color:inherit; }
a { color:var(--cyan-deep); text-decoration-thickness:.12em; text-underline-offset:.16em; }
img { display:block; max-width:100%; }
::selection { background:var(--cyan); color:#050505; }
h1,h2,h3,.side-brand > span:last-child { font-family:var(--display); line-height:1.1; font-weight:700; letter-spacing:-.02em; }
h1 { font-size:clamp(1.8rem,3vw,2.4rem); }
h2 { font-size:clamp(1.4rem,2.5vw,1.9rem); }
h3 { font-size:1.1rem; }
[hidden] { display:none !important; }
:focus-visible { outline:3px solid var(--cyan); outline-offset:3px; }
.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; }
.skip-link { position:fixed; z-index:1000; top:8px; left:8px; padding:9px 13px; border-radius:8px; background:var(--ink-surface); color:var(--on-ink); font-weight:700; transform:translateY(-150%); }
.skip-link:focus { transform:none; }
/* Sentence case everywhere (brand book p. 12) — the eyebrow is a set label,
   not shouting caps. */
.eyebrow { margin-bottom:7px; color:var(--cyan-deep); font-family:var(--display); font-size:.82rem; font-weight:600; letter-spacing:.05em; }
/* Section label on a strip of cyan tape — ink text (≈10.9:1 on cyan). */
.eyebrow-tape { display:inline-block; width:max-content; padding:.34rem .8rem; background:var(--cyan); color:#050505; letter-spacing:.04em; transform:rotate(-1.6deg); box-shadow:0 2px 3px rgba(0,0,0,.35); margin-bottom:1rem; }
.fatal { min-height:100vh; display:grid; place-items:center; align-content:center; gap:10px; padding:30px; text-align:center; }

/* Brand mark: two cut-paper flags, cyan and pink — equal sides. */
.brand-mark { display:flex; gap:6px; align-items:flex-end; }
.brand-mark span { display:block; width:26px; height:34px; clip-path:polygon(5% 2%, 97% 0, 100% 95%, 3% 100%); }
.brand-mark .mark-cyan { background:var(--cyan); transform:rotate(-7deg); }
.brand-mark .mark-pink { background:var(--pink); height:28px; transform:rotate(5deg) translateY(-4px); clip-path:polygon(2% 4%, 100% 0, 96% 98%, 0 94%); }
.brand-mark.small span { width:12px; height:17px; }
.brand-mark.small .mark-pink { height:14px; transform:rotate(5deg) translateY(-2px); }

/* Tape strips — the collage fastener. Applied as pseudo-elements on mounts
   and cards; flat flag fills at slight translucency, tiny cast shadow. */
.mount { position:relative; margin:0; background:var(--mat); border:1px solid var(--mount-border-color); padding:clamp(9px,1vw,14px); box-shadow:var(--shadow-deep); transform:rotate(var(--tilt,-2.2deg)); }
.mount img { width:100%; height:auto; }
.mount::before,.mount::after { content:""; position:absolute; width:clamp(58px,6vw,92px); height:clamp(18px,2vw,26px); opacity:.88; box-shadow:0 2px 3px rgba(5,5,5,.28); }
.mount::before { top:calc(clamp(18px,2vw,26px) / -2.3); left:7%; transform:rotate(-5deg); }
.mount::after { bottom:calc(clamp(18px,2vw,26px) / -2.3); right:7%; transform:rotate(4deg); }
.tape-mix::before { background:var(--cyan); }
.tape-mix::after { background:var(--pink); }
.mount figcaption { padding:10px 4px 2px; font-size:.74rem; font-weight:600; color:#3A3628; letter-spacing:.01em; }

/* Authentication */
.auth-screen { position:relative; z-index:1; min-height:100svh; display:grid; grid-template-columns:minmax(320px,1.08fr) minmax(390px,.92fr); background:var(--ink); }
/* The ink canvas keeps #050505 in BOTH themes, so its text is literal ivory —
   var(--paper) would go near-black in dark mode and vanish. */
.auth-brand { position:relative; min-height:100svh; display:flex; flex-direction:column; padding:44px clamp(28px,5vw,72px) clamp(30px,5vh,54px); color:#F7F1E3; background:#050505; }
/* Ivory grain + hand-drawn court geometry breathe on the ink side. */
.auth-brand::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.07; background:var(--grain-ivory); background-size:240px 240px; }
.auth-brand::after { content:""; position:absolute; left:-14%; bottom:-16%; width:min(58vw,620px); aspect-ratio:1; pointer-events:none; opacity:.08; background:var(--court-ivory) center/contain no-repeat; }
.auth-brand > * { position:relative; z-index:2; }
.auth-brand-copy { max-width:580px; margin-top:clamp(28px,5vh,72px); }
.auth-brand-copy h1 { max-width:10ch; font-size:clamp(3.2rem,6.5vw,6rem); letter-spacing:-.04em; }
.auth-brand-copy > p:last-child { max-width:44ch; margin-top:20px; color:#BAB29F; font-size:1.06rem; font-weight:500; }
/* The decision-confidence collage, mounted large and confidently: white mat,
   two tape strips, a real tilt, overlapping the torn seam into the panel. */
.auth-art { z-index:3; align-self:flex-end; width:min(37vw,46vh,520px); margin:clamp(18px,3.5vh,40px) calc(clamp(22px,2.5vw,48px) * -1) 0 0; --tilt:-2.4deg; }
.auth-fragments { position:absolute; inset:0; z-index:1; pointer-events:none; }
.auth-fragments i { position:absolute; display:block; }
.auth-fragments i:nth-child(1) { right:9%; top:9%; width:110px; height:148px; background:var(--cyan); transform:rotate(-9deg); opacity:.16; clip-path:polygon(6% 0, 100% 4%, 94% 100%, 0 96%); }
.auth-fragments i:nth-child(2) { left:56%; top:38%; width:86px; height:118px; background:var(--pink); transform:rotate(7deg); opacity:.13; clip-path:polygon(0 5%, 96% 0, 100% 94%, 5% 100%); }
.auth-fragments i:nth-child(3) { left:6%; bottom:30%; width:70px; height:94px; background:#F7F1E3; transform:rotate(-4deg); opacity:.09; clip-path:polygon(4% 2%, 100% 0, 97% 98%, 0 94%); }
.auth-panel { position:relative; display:grid; place-items:center; min-height:100svh; padding:38px clamp(24px,3.5vw,48px); background:var(--paper); }
/* The panel is a paper sheet laid over the ink desk — its left edge is torn. */
.auth-panel::before { content:""; position:absolute; top:0; bottom:0; left:-24px; width:25px; background:var(--paper); -webkit-mask:var(--tear-x) 0 0/100% 100%; mask:var(--tear-x) 0 0/100% 100%; filter:drop-shadow(-3px 0 4px rgba(0,0,0,.3)); pointer-events:none; }
/* Sign-in card: a raised sheet with an under-sheet peeking out and one tape
   strip per flag side — equal weight, no hierarchy. */
.auth-card { position:relative; width:min(500px,100%); padding:clamp(28px,4.5vw,50px); border:1px solid var(--line); border-radius:6px; background:var(--surface); transform:rotate(-.4deg); box-shadow:var(--auth-card-shadow); }
.auth-card::before,.auth-card::after { content:""; position:absolute; width:74px; height:22px; opacity:.85; box-shadow:0 2px 3px rgba(5,5,5,.22); }
.auth-card::before { top:-11px; left:10%; transform:rotate(-4deg); background:var(--cyan); }
.auth-card::after { bottom:-11px; right:9%; transform:rotate(3deg); background:var(--pink); }
.auth-lock { width:52px; height:52px; display:grid; place-items:center; margin-bottom:24px; border-radius:12px; color:var(--on-ink); background:var(--ink-surface); font-size:1.3rem; transform:rotate(-2deg); box-shadow:0 2px 0 rgba(38,32,21,.25); }
.auth-step > p:not(.eyebrow), .auth-small { color:var(--sub); font-weight:500; }
.auth-step h2 { margin-bottom:12px; }
.auth-loading { min-height:300px; display:flex; flex-direction:column; justify-content:center; }
.auth-loader { position:relative; height:4px; margin:26px 0 14px; overflow:hidden; border-radius:999px; background:var(--line-soft); }
.auth-loader i { position:absolute; inset:0; display:block; }
.auth-loader i::after { content:""; position:absolute; inset:0; width:45%; border-radius:999px; background:var(--cyan); animation:auth-track 1.45s ease-in-out infinite; }
.auth-loading-note { color:var(--faint) !important; font-size:.78rem; }
@keyframes auth-track { from { transform:translateX(-125%); } to { transform:translateX(245%); } }
.auth-assurances { display:grid; gap:10px; margin:26px 0; list-style:none; color:var(--sub); font-weight:600; }
.auth-assurances span { display:inline-grid; place-items:center; width:21px; height:21px; margin-right:8px; border-radius:50%; background:var(--cyan-soft); color:var(--cyan-deep); font-size:.72rem; }
.auth-small { margin-top:17px; text-align:center; font-size:.77rem; }
/* Literal white in both themes — the Google G keeps its own ground. */
.google-mark { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#fff; color:#4285F4; font-family:Arial,sans-serif; font-weight:900; }
.auth-step form { display:grid; gap:13px; margin-top:24px; }
.totp-qr { width:232px; height:232px; max-width:100%; display:block; margin:20px auto 8px; border:10px solid #fff; border-radius:8px; background:#fff; image-rendering:pixelated; box-shadow:var(--shadow); }
.auth-step label { display:grid; gap:7px; color:var(--sub); font-size:.8rem; font-weight:600; }
.otp { width:100%; padding:12px; text-align:center; border:1.5px solid var(--line); border-radius:8px; color:var(--ink); background:var(--surface2); font:700 1.8rem/1.2 var(--display); letter-spacing:.35em; font-variant-numeric:tabular-nums; }
.totp-factor { width:100%; min-height:44px; padding:9px 12px; border:1.5px solid var(--line); border-radius:8px; background:var(--surface2); color:var(--ink); font-weight:600; }
.secret-box { display:grid; grid-template-columns:1fr auto; gap:7px 14px; margin-top:22px; padding:18px; border:1px solid var(--line); border-radius:10px; background:var(--cyan-tint); }
.secret-box span { color:var(--sub); font-size:.74rem; font-weight:700; letter-spacing:.04em; }
.secret-box b,.secret-box code { grid-column:1/-1; overflow-wrap:anywhere; }
.secret-box code { padding:10px; border-radius:6px; background:var(--surface2); color:var(--ink); font-size:.95rem; font-weight:700; letter-spacing:.08em; user-select:all; }
.secret-box button { justify-self:start; margin-top:5px; }

/* Buttons — crisp product controls; the press answers with a paper nudge and
   a hard cyan+pink offset (both flags, equal weight — the site's signature). */
.button { display:inline-flex; min-height:42px; align-items:center; justify-content:center; gap:8px; border:0; border-radius:7px; padding:10px 17px; cursor:pointer; font-weight:600; transition:transform .18s var(--ease-settle),box-shadow .18s var(--ease-settle),filter .2s; }
.button:disabled { opacity:.45; cursor:not-allowed; }
.button-primary { background:var(--ink-surface); color:var(--on-ink); }
.button-primary:hover:not(:disabled) { transform:translate(-2px,-2px) rotate(-.3deg); box-shadow:3px 3px 0 var(--cyan), 6px 6px 0 var(--pink); }
.button-secondary { border:1.5px solid var(--line); background:var(--surface2); color:var(--ink); }
.button-secondary:hover:not(:disabled) { transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--cyan); }
.button-quiet { background:transparent; color:var(--sub); }
.button-quiet:hover:not(:disabled) { color:var(--ink); }
.button-danger { border:1.5px solid var(--danger-line); background:var(--danger-bg); color:var(--danger-ink); }
.button-danger:hover:not(:disabled) { transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--danger-line); }
.button:active:not(:disabled) { transform:none; box-shadow:none; }
.button-wide { width:100%; }
.button-small { min-height:34px; padding:7px 11px; font-size:.76rem; }
.form-error { margin-top:13px; padding:11px 13px; border-radius:8px; background:var(--danger-bg); color:var(--danger-ink); font-size:.82rem; font-weight:600; }
.notice { display:grid; gap:4px; padding:14px 16px; border-radius:10px; font-size:.82rem; }
.notice b { font-weight:700; }
.notice span { color:inherit; opacity:.9; }
.notice-warn { margin-top:18px; border:1px solid var(--warn-line); background:var(--warn-bg); color:var(--warn-ink); }
.notice-info { margin:17px 0; border:1px solid var(--line); background:var(--cyan-tint); color:var(--cyan-deep); }
.period-select { width:max-content; max-width:100%; display:flex; align-items:center; gap:9px; color:var(--sub); font-size:.76rem; font-weight:600; }
.period-select select { min-height:38px; border:1px solid var(--line); border-radius:7px; padding:6px 10px; background:var(--surface2); color:var(--ink); }

/* App shell */
.app-shell { position:relative; z-index:1; min-height:100svh; display:grid; grid-template-columns:250px minmax(0,1fr); }
.sidebar { position:fixed; z-index:30; inset:0 auto 0 0; width:250px; display:flex; flex-direction:column; padding:25px 16px 18px; color:#F7F1E3; background:#050505; }
/* Ivory grain on the ink desk; the workspace sheet tears over its right edge. */
.sidebar::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.06; background:var(--grain-ivory); background-size:240px 240px; }
.sidebar::before { content:""; position:absolute; top:0; bottom:0; right:-21px; width:22px; background:var(--paper); -webkit-mask:var(--tear-x) 0 0/100% 100%; mask:var(--tear-x) 0 0/100% 100%; filter:drop-shadow(-3px 0 4px rgba(0,0,0,.32)); pointer-events:none; }
.sidebar > * { position:relative; z-index:1; }
.side-brand { display:flex; align-items:center; gap:11px; padding:4px 8px 22px; border-bottom:1px solid rgba(247,241,227,.12); }
.side-brand > span:last-child { color:#F7F1E3; font-size:.95rem; }
.side-nav { display:grid; gap:5px; margin-top:22px; }
.side-nav button { position:relative; width:100%; display:flex; align-items:center; gap:11px; border:0; border-radius:8px; padding:11px 12px; background:transparent; color:#BAB29F; cursor:pointer; text-align:left; font-weight:600; }
.side-nav button span { width:24px; color:#7D7666; font:700 1rem/1 var(--display); text-align:center; }
.side-nav button:hover,.side-nav button.is-active { background:rgba(247,241,227,.1); color:#F7F1E3; }
.side-nav button.is-active span { color:var(--cyan); }
.side-nav button.is-active::before { content:""; position:absolute; left:-6px; top:9px; bottom:9px; width:4px; border-radius:2px; background:var(--cyan); transform:rotate(-2deg); }
.side-foot { display:grid; gap:11px; margin-top:auto; padding-top:18px; border-top:1px solid rgba(247,241,227,.12); }
.side-user { display:flex; gap:9px; align-items:center; min-width:0; }
.side-user > div { min-width:0; }
.side-user b,.side-user small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-user small { color:#8C8574; font-size:.7rem; }
.avatar { flex:none; width:36px; height:36px; display:grid; place-items:center; border-radius:8px; background:var(--avatar-bg); color:var(--ink); font:700 .78rem/1 var(--display); transform:rotate(-2deg); box-shadow:0 2px 0 rgba(0,0,0,.4); }
.side-foot button,.side-foot a { border:0; background:transparent; color:#8C8574; cursor:pointer; font-size:.76rem; font-weight:600; text-decoration:none; text-align:left; }
.side-foot button:hover,.side-foot a:hover { color:#F7F1E3; }
.workspace { grid-column:2; min-width:0; padding:0 clamp(18px,3vw,45px) 70px; }
.topbar { min-height:92px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 0; }
.topbar .eyebrow { margin:0; }
.topbar h1 { font-size:1.75rem; }
.top-actions { display:flex; align-items:center; gap:9px; }
.secure-pill { display:flex; align-items:center; gap:7px; padding:8px 12px; border:1px solid var(--line); border-radius:999px; background:var(--surface2); color:var(--sub); font-size:.72rem; font-weight:600; }
/* Cyan = lock/confidence semantics (§3.1); lime is never a status dot. */
.secure-pill i { width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 3px rgba(23,207,243,.18); }
.icon-button,.menu-button { width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--line); border-radius:8px; background:var(--surface2); cursor:pointer; font-weight:700; transition:transform .18s var(--ease-settle),box-shadow .18s var(--ease-settle); }
.icon-button:hover,.menu-button:hover { transform:translate(-1px,-1px); box-shadow:2px 2px 0 var(--cyan); }
.icon-button:active,.menu-button:active { transform:none; box-shadow:none; }
.menu-button { display:none; }
/* Theme control — a small segmented paper chip (sign-in panel + topbar).
   The pressed segment is an ink chip (inkSurface — inverts to lit paper in
   dark mode, §4), never a cyan/pink status colour. aria-pressed carries the
   state for both CSS and assistive tech; theme.js keeps it in sync. */
.theme-toggle { display:inline-flex; gap:2px; padding:3px; border:1px solid var(--line); border-radius:999px; background:var(--surface2); box-shadow:0 1px 2px rgba(38,32,21,.12); }
.theme-toggle button { width:30px; height:30px; display:grid; place-items:center; border:0; border-radius:999px; background:transparent; color:var(--sub); cursor:pointer; font-size:.9rem; line-height:1; transition:transform .18s var(--ease-settle),background-color .18s,color .18s; }
.theme-toggle button:hover { color:var(--ink); }
/* The chosen segment sits like a pressed-on paper dot, slightly askew. */
.theme-toggle button[aria-pressed="true"] { background:var(--ink-surface); color:var(--on-ink); transform:rotate(-4deg); }
.auth-theme-toggle { position:absolute; top:16px; right:clamp(16px,2.5vw,28px); z-index:5; }
.view { max-width:1420px; margin:auto; animation:view-settle .45s var(--ease-settle); }
@keyframes view-settle { from { opacity:0; transform:translateY(14px) rotate(.2deg); } }
.view > * + * { margin-top:28px; }
/* Overview hero: an ink statement panel with the live-score collage taped on,
   riding up over the panel edge the way a real desk collage would. */
.hero-panel { position:relative; min-height:210px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(18px,3vw,40px); align-items:center; padding:36px 42px; border-radius:14px; background:var(--ink-surface); color:var(--on-ink); box-shadow:var(--shadow-deep); }
.hero-panel::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:var(--hero-decor-opacity); filter:var(--hero-decor-filter); background:var(--grain-ivory); background-size:240px 240px; }
.hero-panel::after { content:""; position:absolute; left:-70px; top:-90px; width:340px; aspect-ratio:1; pointer-events:none; opacity:var(--hero-decor-opacity); filter:var(--hero-decor-filter); background:var(--court-ivory) center/contain no-repeat; }
.hero-panel > * { position:relative; z-index:1; }
.hero-panel .eyebrow { color:var(--hero-eyebrow); }
.hero-panel h2 { max-width:22ch; font-size:clamp(1.8rem,3.4vw,2.7rem); }
.hero-panel p:not(.eyebrow) { max-width:64ch; margin-top:13px; color:var(--hero-copy); font-weight:500; }
.hero-art { width:clamp(220px,24vw,330px); margin:-34px 2px -2px 0; --tilt:2.2deg; }
.section-head,.page-intro { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.section-head .eyebrow { margin-bottom:3px; }
.section-head h2 { font-size:1.3rem; }
.page-intro { padding:18px 2px 5px; }
.page-intro > div { max-width:760px; }
.page-intro p:not(.eyebrow) { margin-top:9px; color:var(--sub); font-weight:500; }
.page-help { border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--sub); box-shadow:0 1px 2px rgba(38,32,21,.08); }
.page-help summary { padding:12px 15px; color:var(--ink); cursor:pointer; font-size:.79rem; font-weight:600; }
.page-help summary::marker { color:var(--cyan-deep); }
.page-help[open] summary { border-bottom:1px solid var(--line); }
.page-help > p { margin:12px 17px 15px; font-size:.78rem; }
.data-note { align-self:center; color:var(--faint); font-size:.72rem; font-weight:600; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; margin-top:15px; padding-top:9px; }
.metric-grid-small { margin:0 0 22px; }
.metric-card { position:relative; min-width:0; padding:20px; border:1px solid var(--line); border-radius:10px; background:var(--surface); box-shadow:var(--shadow); }
.metric-card > span { color:var(--faint); font-size:.74rem; font-weight:700; letter-spacing:.03em; }
.metric-card b { display:block; margin:7px 0 2px; overflow:hidden; text-overflow:ellipsis; color:var(--ink); font:700 clamp(1.5rem,3vw,2.1rem)/1 var(--display); font-variant-numeric:tabular-nums; }
.metric-card small { color:var(--sub); font-size:.73rem; font-weight:500; }
/* Cyan/pink are equal accent sides, never good/bad: the tone is a short strip
   of tape holding the card to the desk. */
.metric-card[data-tone]::before { content:""; position:absolute; top:-8px; left:16px; width:56px; height:16px; opacity:.9; box-shadow:0 1px 2px rgba(5,5,5,.2); transform:rotate(-3deg); }
.metric-card[data-tone="cyan"]::before { background:var(--cyan); }
.metric-card[data-tone="pink"]::before { background:var(--pink); }
.split-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.panel { min-width:0; padding:24px; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:var(--shadow); }
.tier-bars,.queue-list { display:grid; gap:13px; margin-top:21px; }
.tier-row { display:grid; grid-template-columns:105px 1fr auto; gap:12px; align-items:center; font-size:.8rem; font-weight:600; }
.tier-row i { display:block; height:9px; border-radius:999px; background:var(--line-soft); overflow:hidden; }
.tier-row i::after { content:''; display:block; width:var(--pct); height:100%; border-radius:inherit; background:var(--chart-fill); }
.tier-row b { font-variant-numeric:tabular-nums; }
.queue-item { display:grid; grid-template-columns:38px 1fr auto; gap:11px; align-items:center; padding:12px; border-radius:10px; background:var(--paper); }
.queue-item > span:first-child { width:38px; height:38px; display:grid; place-items:center; border-radius:8px; background:var(--surface2); border:1px solid var(--line-soft); transform:rotate(-1.5deg); }
.queue-item b,.queue-item small { display:block; }
.queue-item small { color:var(--faint); font-size:.7rem; }
.queue-item > strong { font-family:var(--display); font-variant-numeric:tabular-nums; }

.state-strip { display:flex; align-items:center; gap:14px; padding:17px 20px; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:0 1px 2px rgba(38,32,21,.08); }
.state-strip div { flex:1; min-width:0; }
.state-strip b,.state-strip span { display:block; }
.state-strip span { color:var(--faint); font-size:.7rem; }
.state-strip i { color:var(--cyan-deep); font-style:normal; }
.record-list { display:grid; gap:11px; }
.record-card { display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(95px,.5fr)) auto; gap:14px; align-items:center; padding:16px 18px; border:1px solid var(--line); border-radius:10px; background:var(--surface); box-shadow:0 1px 2px rgba(38,32,21,.1); transition:transform .18s var(--ease-settle),box-shadow .18s var(--ease-settle); }
.record-card:hover { border-color:var(--faint); transform:translateY(-1px); box-shadow:var(--shadow); }
.record-main { min-width:0; }
.record-main b,.record-main small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.record-main small,.record-cell small { color:var(--faint); font-size:.7rem; }
.record-cell b,.record-cell small { display:block; }
.status-badge { display:inline-flex; width:max-content; margin-top:5px; padding:4px 8px; border-radius:999px; background:var(--line-soft); color:var(--sub); font-size:.68rem; font-weight:700; letter-spacing:.03em; }
.status-badge[data-state="approved"] { background:var(--ink-surface); color:var(--on-ink); }
.status-badge[data-state="sent"],.status-badge[data-state="sending"] { background:var(--cyan-soft); color:var(--cyan-deep); }
.status-badge[data-state="failed"],.status-badge[data-state="cancelled"] { background:var(--danger-bg); color:var(--danger-ink); }
.record-actions { display:flex; gap:7px; }
.record-actions button,.record-actions a { min-height:34px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:7px; padding:6px 10px; background:var(--surface2); color:var(--ink); cursor:pointer; font-size:.72rem; font-weight:600; text-decoration:none; }
.record-actions .danger-link { border-color:var(--danger-line); color:var(--danger-ink); }
.load-more { margin:18px auto 0; display:flex; }
.activation-gate { padding:17px 19px; border:1px solid var(--warn-line); border-radius:10px; background:var(--warn-bg); color:var(--warn-ink); }
.activation-gate p { margin-top:4px; font-size:.8rem; font-weight:500; }
.activation-gate[data-ready="true"] { border-color:var(--line); background:var(--cyan-tint); color:var(--cyan-deep); }

.table-shell { overflow:auto; border:1px solid var(--line); border-radius:10px; background:var(--surface); box-shadow:var(--shadow); }
table { width:100%; border-collapse:collapse; font-size:.8rem; }
th,td { padding:13px 15px; border-bottom:1px solid var(--line-soft); text-align:left; white-space:nowrap; }
/* Sentence case everywhere — even table headers (brand book p. 12). */
th { color:var(--faint); background:var(--paper); font-size:.7rem; font-weight:700; letter-spacing:.03em; }
tbody tr:last-child td { border-bottom:0; }
.table-primary,.table-secondary { display:block; }
.table-primary { color:var(--ink); font-size:.82rem; }
.table-secondary { margin-top:3px; color:var(--faint); font-size:.68rem; font-weight:500; }
td button { border:1px solid var(--line); border-radius:7px; padding:6px 9px; background:var(--surface2); cursor:pointer; font-size:.7rem; font-weight:600; }

/* Single-series magnitude chart: one hue, thin bars, rounded data-end at the
   top, 2px surface gaps, per-bar tooltips + edge date ticks carry the values. */
.bar-chart { min-height:230px; display:flex; align-items:end; gap:2px; margin:20px 0 26px; padding-top:20px; border-bottom:1px solid var(--line); }
.chart-bar { flex:1; min-width:2px; height:var(--height); position:relative; border-radius:4px 4px 0 0; background:var(--chart-fill); }
.chart-bar span { display:none; position:absolute; left:50%; bottom:-24px; translate:-50% 0; color:var(--faint); font-size:.62rem; white-space:nowrap; }
.chart-bar:first-child span,.chart-bar:last-child span,.chart-bar:nth-child(15n + 1) span { display:block; }

/* Dialogs and forms */
dialog { color:var(--ink); }
dialog::backdrop { background:rgba(5,5,5,.62); backdrop-filter:blur(5px); }
.editor-dialog { width:min(880px,calc(100% - 28px)); max-width:none; max-height:calc(100svh - 28px); margin:auto; border:0; border-radius:10px; background:var(--surface); box-shadow:0 40px 100px -30px rgba(5,5,5,.7); overflow:hidden; }
.dialog-shell { max-height:calc(100svh - 28px); display:flex; flex-direction:column; }
.dialog-shell > header,.dialog-shell > footer { flex:none; display:flex; justify-content:space-between; gap:18px; align-items:center; padding:18px 23px; border-bottom:1px solid var(--line); background:var(--surface); }
.dialog-shell > footer { border-top:1px solid var(--line); border-bottom:0; }
.dialog-shell > footer > div { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.dialog-close { width:38px; height:38px; border:1px solid var(--line); border-radius:8px; background:var(--surface2); cursor:pointer; font-size:1.3rem; }
.editor-fields { min-height:0; flex:1; display:grid; align-content:start; gap:17px; overflow:auto; padding:24px; }
.editor-fields label,.support-content label { display:grid; gap:6px; color:var(--sub); font-size:.76rem; font-weight:700; }
.editor-fields input:not([type="checkbox"]),.editor-fields textarea,.editor-fields select,.support-content textarea { width:100%; min-height:42px; border:1.5px solid var(--line); border-radius:8px; padding:9px 11px; background:var(--surface2); color:var(--ink); }
.editor-fields textarea { resize:vertical; line-height:1.55; }
.editor-fields fieldset { display:grid; gap:8px; border:1px solid var(--line); border-radius:10px; padding:14px; }
.editor-fields legend { padding:0 7px; color:var(--sub); font-size:.76rem; font-weight:700; }
.editor-fields legend span { color:var(--faint); font-size:.66rem; font-weight:500; }
.field-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; align-items:end; }
.locked-fields { padding:14px 16px; border:1px solid var(--warn-line); border-radius:10px; background:var(--warn-bg); }
.locked-fields p { margin-top:4px; color:var(--warn-ink); font-size:.74rem; }
.editor-validation { color:var(--sub); font-size:.74rem; }
.editor-validation:empty { display:none; }
.editor-validation.is-error { padding:11px 13px; border-radius:8px; background:var(--danger-bg); color:var(--danger-ink); font-weight:600; }
.save-note { color:var(--faint); font-size:.72rem; }
.field-help { margin-top:-8px; color:var(--faint); font-size:.69rem; }
.support-dialog { width:min(620px,calc(100% - 28px)); max-width:none; margin:auto; border:0; border-radius:10px; background:var(--surface); overflow:hidden; }
.support-content { display:grid; gap:16px; padding:22px; }
.support-content > p { color:var(--sub); font-weight:500; }
.support-detail { padding:15px; border-radius:10px; background:var(--paper); border:1px solid var(--line-soft); }
.support-detail dl { display:grid; grid-template-columns:auto 1fr; gap:7px 14px; font-size:.8rem; }
.support-detail dt { color:var(--faint); font-weight:700; }
.confirm-dialog { width:min(440px,calc(100% - 28px)); margin:auto; border:0; border-radius:10px; padding:0; background:var(--surface); }
.confirm-dialog form { display:grid; justify-items:center; gap:13px; padding:30px; text-align:center; }
.confirm-dialog p { color:var(--sub); }
.confirm-dialog form > div:last-child { display:flex; gap:8px; }
.confirm-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:10px; background:var(--warn-bg); border:1px solid var(--warn-line); color:var(--warn-ink); font:700 1.5rem/1 var(--display); transform:rotate(-2deg); }
.reauth-modal { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:20px; background:rgba(5,5,5,.66); backdrop-filter:blur(5px); }
.reauth-modal form { width:min(440px,100%); padding:28px; border-radius:10px; background:var(--surface); box-shadow:0 30px 80px -25px rgba(5,5,5,.7); }
.reauth-modal p:not(.eyebrow) { margin:10px 0 18px; color:var(--sub); }
.reauth-modal label { display:grid; gap:6px; color:var(--sub); font-size:.78rem; font-weight:600; }
.reauth-modal form > div { display:flex; justify-content:flex-end; gap:8px; margin-top:17px; }
.toast { position:fixed; z-index:200; right:22px; bottom:22px; max-width:min(410px,calc(100% - 44px)); padding:13px 17px; border:1px solid var(--toast-border); border-radius:10px; background:var(--toast-bg); color:var(--toast-ink); box-shadow:0 20px 50px -20px rgba(5,5,5,.7); font-size:.8rem; font-weight:600; transform:rotate(-.4deg); }
/* Errors use the danger palette, never flag pink — cyan/pink stay equal
   sides and are never success/error (brand book pp. 11, 21). */
.toast[data-tone="error"] { outline:2px solid #F0A297; outline-offset:-2px; }

@media (max-width:1100px) {
  .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .record-card { grid-template-columns:minmax(0,1fr) repeat(2,minmax(90px,.5fr)) auto; }
  .record-card .record-cell:nth-of-type(3) { display:none; }
}
@media (max-width:900px) {
  .hero-panel { grid-template-columns:1fr; }
  .hero-art { display:none; }
}
@media (max-width:820px) {
  .auth-screen { grid-template-columns:1fr; }
  .auth-brand { min-height:0; padding:30px 26px 56px; }
  .auth-brand-copy { margin-top:34px; }
  .auth-brand-copy h1 { font-size:3rem; }
  .auth-brand::after { left:auto; right:-20%; bottom:-30%; }
  .auth-art { align-self:center; width:min(74vw,380px); margin:30px 0 0; }
  .auth-panel { min-height:0; padding:40px 18px 34px; }
  /* Stacked: the paper sheet now tears along its top edge instead. The mask
     repeats at a fixed 900px rhythm so the tear keeps its hand-torn scale
     instead of stretching into a zigzag. */
  .auth-panel::before { top:-22px; bottom:auto; left:0; right:0; width:auto; height:23px; -webkit-mask:var(--tear-y) 0 0/1600px 100% repeat-x; mask:var(--tear-y) 0 0/1600px 100% repeat-x; filter:drop-shadow(0 -3px 4px rgba(0,0,0,.3)); }
  .app-shell { display:block; }
  .sidebar { transform:translateX(-105%); transition:transform .24s ease; box-shadow:20px 0 60px -30px #000; }
  .sidebar::before { display:none; }
  .app-shell.menu-open .sidebar { transform:none; }
  .app-shell.menu-open .sidebar::before { display:block; }
  .workspace { padding:0 18px 60px; }
  .menu-button { display:grid; }
  .topbar { justify-content:flex-start; }
  .top-actions { margin-left:auto; }
  .split-grid { grid-template-columns:1fr; }
  .dialog-shell { overflow:hidden; }
}
@media (max-width:560px) {
  .auth-brand { padding-bottom:48px; }
  .auth-brand-copy { margin-top:26px; }
  .auth-brand-copy h1 { font-size:2.6rem; }
  .auth-brand-copy > p:last-child { display:none; }
  .auth-art { width:min(84vw,340px); }
  .auth-art figcaption { display:none; }
  .auth-card { padding:26px 20px; }
  .secure-pill { display:none; }
  .hero-panel { min-height:180px; padding:28px 24px; }
  .metric-grid { grid-template-columns:1fr; }
  .section-head,.page-intro { align-items:stretch; flex-direction:column; }
  .state-strip { align-items:stretch; flex-direction:column; }
  .state-strip i { rotate:90deg; align-self:center; }
  .record-card { grid-template-columns:1fr auto; }
  .record-cell { display:none !important; }
  .record-actions { grid-column:2; grid-row:1; flex-direction:column; }
  .dialog-shell > header,.dialog-shell > footer { padding:15px; }
  .dialog-shell > footer { align-items:stretch; flex-direction:column; }
  .dialog-shell > footer > div { justify-content:stretch; }
  .dialog-shell > footer .button { flex:1; }
  .editor-fields { padding:16px; }
  .field-row { grid-template-columns:1fr; }
  th,td { padding:11px 12px; }
}
@media (max-width:340px) {
  .workspace { padding-left:10px; padding-right:10px; }
  .topbar h1 { font-size:1.4rem; }
  .hero-panel { padding:22px 17px; }
  .hero-panel h2 { font-size:1.6rem; }
  .auth-brand { padding:24px 18px 40px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
/* ---------- Dark theme ----------
 * Dark mode keeps the ink desk; statement panels become lit paper scraps
 * (inkSurface inverts on purpose, §4) and rasters are never inverted — the
 * ink canvases (.auth-brand, .sidebar) and white grounds (.totp-qr,
 * .google-mark, .mount figcaption) are literal in the base rules and need no
 * override here. Every other difference is a token below.
 *
 * The SAME value set appears twice ON PURPOSE — keep both copies identical:
 *   1. media-guarded, skipped when the user explicitly chose light;
 *   2. attribute-selected, applied when the user explicitly chose dark.
 * So an explicit choice beats the OS in both directions, and "system" (no
 * data-theme attribute) follows prefers-color-scheme live. */
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    color-scheme:dark;
    --paper:#0B0A08; --surface:#161511; --surface2:#201E19; --ink:#F7F1E3;
    --sub:#BAB29F; --faint:#7D7666; --line:#2C2A23; --line-soft:#23211B;
    --ink-surface:#F2ECDD; --on-ink:#050505;
    --cyan-deep:#5FD9F2; --cyan-soft:#0F3540; --cyan-tint:#0D2830;
    --pink-deep:#FF7AB0; --pink-soft:#3A1424;
    --mat:#F2ECDD; /* a print resting on dark felt keeps its ivory board (§7.5) */
    --warn-bg:#2A2415; --warn-line:#514422; --warn-ink:#E2C87E;
    --danger-bg:#301814; --danger-line:#5C2C24; --danger-ink:#F0A297;
    --chart-fill:#0D93B5;
    --shadow:0 1px 2px rgba(0,0,0,.6), 0 22px 48px -28px rgba(0,0,0,.85);
    --shadow-deep:0 2px 3px rgba(0,0,0,.65), 0 34px 70px -30px rgba(0,0,0,.9);
    --grain-body:var(--grain-ivory);
    --grain-opacity:.04;
    --mount-border-color:var(--line);
    --hero-eyebrow:#086A84;
    --hero-copy:#5B5547;
    --hero-decor-filter:invert(1);
    --hero-decor-opacity:.06;
    --auth-card-shadow:0 1px 2px rgba(0,0,0,.6), 10px 14px 0 -5px var(--surface2), 10px 14px 0 -4px var(--line), 0 30px 64px -28px rgba(0,0,0,.9);
    --avatar-bg:var(--surface2);
    --toast-bg:var(--surface2); --toast-ink:var(--ink); --toast-border:var(--line);
  }
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --paper:#0B0A08; --surface:#161511; --surface2:#201E19; --ink:#F7F1E3;
  --sub:#BAB29F; --faint:#7D7666; --line:#2C2A23; --line-soft:#23211B;
  --ink-surface:#F2ECDD; --on-ink:#050505;
  --cyan-deep:#5FD9F2; --cyan-soft:#0F3540; --cyan-tint:#0D2830;
  --pink-deep:#FF7AB0; --pink-soft:#3A1424;
  --mat:#F2ECDD; /* a print resting on dark felt keeps its ivory board (§7.5) */
  --warn-bg:#2A2415; --warn-line:#514422; --warn-ink:#E2C87E;
  --danger-bg:#301814; --danger-line:#5C2C24; --danger-ink:#F0A297;
  --chart-fill:#0D93B5;
  --shadow:0 1px 2px rgba(0,0,0,.6), 0 22px 48px -28px rgba(0,0,0,.85);
  --shadow-deep:0 2px 3px rgba(0,0,0,.65), 0 34px 70px -30px rgba(0,0,0,.9);
  --grain-body:var(--grain-ivory);
  --grain-opacity:.04;
  --mount-border-color:var(--line);
  --hero-eyebrow:#086A84;
  --hero-copy:#5B5547;
  --hero-decor-filter:invert(1);
  --hero-decor-opacity:.06;
  --auth-card-shadow:0 1px 2px rgba(0,0,0,.6), 10px 14px 0 -5px var(--surface2), 10px 14px 0 -4px var(--line), 0 30px 64px -28px rgba(0,0,0,.9);
  --avatar-bg:var(--surface2);
  --toast-bg:var(--surface2); --toast-ink:var(--ink); --toast-border:var(--line);
}

/* ── Audience data-depth pass ──────────────────────────────────────────────
   Provider chips, the anonymous-accounts toggle row and the wider surface
   bars added with the Ref Desk data-depth work. Tokens only — both themes. */
.audience-controls { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin:14px 0 2px; }
.audience-controls .data-note { margin-left:auto; }
.control-toggle { display:inline-flex; align-items:center; gap:8px; color:var(--sub); font-size:.76rem; font-weight:600; cursor:pointer; }
.control-toggle input { width:16px; height:16px; accent-color:var(--chart-fill); }
.chip-row { display:inline-flex; flex-wrap:wrap; gap:5px; }
.chip { display:inline-flex; align-items:center; padding:3px 8px; border-radius:999px; border:1px solid var(--line-soft); background:var(--surface2); color:var(--sub); font-style:normal; font-size:.66rem; font-weight:700; letter-spacing:.03em; white-space:nowrap; }
.chip[data-kind="anonymous"] { border-style:dashed; }
.chip[data-kind="google.com"],.chip[data-kind="apple.com"],.chip[data-kind="password"] { color:var(--ink); }
#costSurfaces .tier-row { grid-template-columns:minmax(150px,auto) 1fr auto; }
@media (max-width:640px) { .audience-controls .data-note { margin-left:0; flex-basis:100%; } }