/* ═══════════════════════════════════════════════════════════════════════════
   Cited design-system layer (uiux-redesign).
   Additive: formalises the tokens base.html and the served dashboards already
   use, and gives every post-login page one vocabulary for spacing, radii,
   elevation, motion, charts and states. Loaded after base.html's own styles
   and spliced into served dashboards at request time. Colours are the
   existing system — Scope Graphite, Signal Orange, Grid Cyan — nothing new.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* spacing — 4/8 scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px;
  /* radii */
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;
  /* elevation (dark first; light overrides below) */
  --elev-1: 0 1px 2px rgba(0,0,0,.35);
  --elev-2: 0 8px 24px -10px rgba(0,0,0,.55);
  --elev-3: 0 24px 60px -16px rgba(0,0,0,.65);
  --overlay: rgba(0,0,0,.62);   /* behind a sheet or modal: covers the whole viewport, sidebar included (v1.8.2) */
  --glow-acc: 0 0 0 1px rgba(255,87,34,.35), 0 0 24px -6px rgba(255,87,34,.45);
  /* motion */
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms; --dur-reveal: 900ms;
  --ease-out: cubic-bezier(.2,.7,.2,1); --ease-in-out: cubic-bezier(.65,0,.35,1); --ease-spring: cubic-bezier(.34,1.3,.64,1);
  /* chart palette: orange, cyan and their tints, plus neutrals. Engines get a
     stable mapping so the same colour means the same engine everywhere. */
  --ch-orange: #FF5722; --ch-cyan: #4FA8BC; --ch-cyan-deep: #2E7A8C; --ch-cyan-soft: #8FCFDD;
  --ch-orange-soft: #FFA07A; --ch-neutral: #6E7580; --ch-neutral-soft: #394049;
  --ch-grid: rgba(195,201,209,.12); --ch-axis: #6E7580;
  --ch-sand: #C8C7C3; --ch-sand-deep: #454C54;
  /* Engines (round 5): three hues of their own, apart from the orange that means "you" and the red that
     means "failed" — Gemini cyan 191°, Perplexity blue 228°, ChatGPT rose 332°. Measured in CIEDE2000
     under normal, protan, deutan and tritan vision; ChatGPT's line is also dashed, failures also
     hollow with an ×, so nothing relies on colour alone. -ink is the text shade (AA ≥ 4.5:1). */
  --eng-gemini: #4FA8BC; --eng-perplexity: #7088E4; --eng-chatgpt: #D68595;
  --eng-gemini-rgb: 79,168,188; --eng-perplexity-rgb: 112,136,228; --eng-chatgpt-rgb: 214,133,149;
  --eng-gemini-ink: #4FA8BC; --eng-perplexity-ink: #8FA2EA; --eng-chatgpt-ink: #D68595;
  /* "you" (the score line, "you were named") and failures */
  --you: #FF5722; --you-rgb: 255,87,34; --fail: #E5484D; --fail-rgb: 229,72,77;
  /* heatmap fills: each engine's own hue, only the amount of it varies with the value */
  --heat-gemini-rgb: 79,168,188; --heat-perplexity-rgb: 112,136,228; --heat-chatgpt-rgb: 214,133,149;
  /* status (semantic, separate from the accent) */
  --ok: #22c97a; --warn: #f5a623; --bad: #f06060;
  --ok-rgb: 34,201,122; --warn-rgb: 245,166,35; --bad-rgb: 240,96,96;
  /* round 8: a drop is the text ink with its ▼, never the failure red (#f06060 is ΔE 4.3 from "you"
     under tritanopia and 6.7 from --ok under deuteranopia); a gain stays green */
  --drop: var(--txp, #EEF1F4);
  /* texture */
  --scope-grid: repeating-linear-gradient(0deg, rgba(79,168,188,.045) 0 1px, transparent 1px 28px),
                repeating-linear-gradient(90deg, rgba(79,168,188,.045) 0 1px, transparent 1px 28px);
}
[data-theme=light] {
  /* #22c97a is 2.1:1 on paper; #137A3A is 5.2:1 (worst ΔE 6.3, against failed under deutan — a
     failure is also hollow with an ×) */
  --ok: #137A3A; --ok-rgb: 19,122,58; --drop: var(--txp, #12151A);
  /* the same three engines in the palette's light-mode values (text stays AA on paper) */
  --eng-gemini: #1A8BA5; --eng-gemini-rgb: 26,139,165; --eng-perplexity: #3557C4; --eng-perplexity-rgb: 53,87,196;
  --eng-chatgpt: #B94687; --eng-chatgpt-rgb: 185,70,135;
  --eng-gemini-ink: #0F6577; --eng-perplexity-ink: #27449E; --eng-chatgpt-ink: #963A6E;
  --you: #C43A0D; --you-rgb: 196,58,13; --fail: #B4232A; --fail-rgb: 180,35,42;
  --heat-gemini-rgb: 26,139,165; --heat-perplexity-rgb: 53,87,196; --heat-chatgpt-rgb: 185,70,135;
  --elev-1: 0 1px 2px rgba(20,23,28,.08);
  --elev-2: 0 8px 24px -12px rgba(20,23,28,.18);
  --elev-3: 0 24px 60px -18px rgba(20,23,28,.25);
  --overlay: rgba(20,23,28,.42);
  --glow-acc: 0 0 0 1px rgba(255,87,34,.25), 0 0 20px -8px rgba(255,87,34,.35);
  --ch-grid: rgba(20,23,28,.08); --ch-axis: #7a8089;
  --ch-neutral-soft: #D6D2CA;
  --scope-grid: repeating-linear-gradient(0deg, rgba(46,122,140,.05) 0 1px, transparent 1px 28px),
                repeating-linear-gradient(90deg, rgba(46,122,140,.05) 0 1px, transparent 1px 28px);
}

/* ── numerals: every number lines up ─────────────────────────────────────── */
.num, .tnum, td.num, .stat-value, .ov-score, .hero-stat-big, .kpi-val, .ds-delta { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; }

/* ── focus: visible everywhere, never removed ─────────────────────────────── */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--grid, #4FA8BC); outline-offset: 2px; border-radius: var(--r-xs);
}

/* ── background texture (dark mode only, behind everything) ──────────────── */
html[data-theme=dark] body.has-sidebar::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--scope-grid);
  mask-image: radial-gradient(120% 80% at 70% 0%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(120% 80% at 70% 0%, #000 0%, transparent 70%);
}

/* ── cards ───────────────────────────────────────────────────────────────── */
.card { box-shadow: var(--elev-1); }
.card.lift-hover { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base); }
.card.lift-hover:hover { box-shadow: var(--elev-2); }
.ds-card-hdr { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.ds-card-title { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--txp); }
.ds-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mu); }
.ds-caption { font-size: 12px; color: var(--mu); line-height: 1.5; }

/* ── stat tile ───────────────────────────────────────────────────────────── */
.stat-tile { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2) var(--sp-4); align-items: end; }
.stat-value { font-family: var(--font-mono); font-size: 34px; font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--txp); }
.stat-value .unit { font-size: 15px; font-weight: 600; color: var(--mu); margin-left: 2px; }
.ds-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill); }
.ds-delta.up   { color: var(--ok);   background: rgba(var(--ok-rgb), .12); }
.ds-delta.down { color: var(--bad);  background: rgba(var(--bad-rgb), .12); }
.ds-delta.drop { color: var(--drop); background: rgba(110,117,128, .16); }
.ds-delta.flat { color: var(--mu);   background: rgba(110,117,128, .14); }
.ds-delta.new  { color: var(--grid); background: rgba(var(--grid-rgb), .12); }

/* ── verdict / badges / pills (one family) ───────────────────────────────── */
.badge, .pill, .verdict { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--r-pill); line-height: 1.4; white-space: nowrap; }
.verdict.strong, .badge-ok   { color: var(--ok);   background: rgba(var(--ok-rgb), .12); }
.verdict.moderate, .badge-warn { color: var(--warn); background: rgba(var(--warn-rgb), .14); }
.verdict.low, .badge-bad     { color: var(--bad);  background: rgba(var(--bad-rgb), .12); }
.verdict.early, .badge-neutral { color: var(--mu); background: rgba(110,117,128, .14); }
.badge-acc { color: var(--acc); background: rgba(var(--acc-rgb), .12); }
.badge-grid { color: var(--grid); background: rgba(var(--grid-rgb), .12); }
.eng-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.eng-dot.gemini { background: var(--eng-gemini); } .eng-dot.perplexity { background: var(--eng-perplexity); } .eng-dot.chatgpt { background: var(--eng-chatgpt); }

/* ── skeletons (honest: only while a real fetch is in flight) ────────────── */
.skeleton { position: relative; overflow: hidden; background: rgba(110,117,128,.16); border-radius: var(--r-sm); color: transparent !important; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); animation: ds-shimmer 1.4s var(--ease-in-out) infinite; }
@keyframes ds-shimmer { to { transform: translateX(100%); } }

/* ── empty state ─────────────────────────────────────────────────────────── */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); padding: var(--sp-8) var(--sp-5); color: var(--mu); }
.empty-state svg { width: 112px; height: 72px; display: block; margin-bottom: var(--sp-2); }
.empty-state .es-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--txp); }
.empty-state .es-text { font-size: 13px; max-width: 360px; line-height: 1.55; }
.empty-state .btn { margin-top: var(--sp-2); }

/* ── charts ──────────────────────────────────────────────────────────────── */
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid line { stroke: var(--ch-grid); stroke-width: 1; }
.chart .axis text { fill: var(--ch-axis); font-size: 10px; font-family: var(--font-mono); }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .area { opacity: .14; }
.chart .dot { stroke: var(--surface); stroke-width: 2; }
.chart .dot.last { r: 4.5; }
.chart-caption { font-size: 12px; color: var(--mu); margin-top: var(--sp-2); line-height: 1.5; }
.chart-wrap { position: relative; }
.chart-tip { position: absolute; z-index: 20; pointer-events: none; transform: translate(-50%, calc(-100% - 10px)); background: var(--txp); color: var(--bg); font-size: 11.5px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; padding: 5px 8px; border-radius: var(--r-sm); white-space: nowrap; box-shadow: var(--elev-2); opacity: 0; transition: opacity var(--dur-fast); }
.chart-tip.on { opacity: 1; }
.chart-empty { display: flex; align-items: center; justify-content: center; min-height: 48px; font-size: 12px; color: var(--mu); border: 1px dashed var(--border); border-radius: var(--r-md); }
/* draw-on-enter: real data only; the static equivalent is the final frame */
.chart .draw { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); animation: ds-draw var(--dur-reveal) var(--ease-out) forwards; }
@keyframes ds-draw { to { stroke-dashoffset: 0; } }
/* round 6: the draw-in finishes — the area fills in under the line and the end dot lands as the line arrives */
.chart:has(.line.draw) .area { animation: ds-area-in var(--dur-reveal) var(--ease-out) both; }
.chart:has(.line.draw) .dot.last { transform-box: fill-box; transform-origin: center; animation: ds-dot-in 260ms var(--ease-out) calc(var(--dur-reveal) - 140ms) both; }
@keyframes ds-area-in { from { opacity: 0; } }
@keyframes ds-dot-in { from { opacity: 0; transform: scale(.2); } }
.ring { transform: rotate(-90deg); transform-origin: 50% 50%; }
.ring .track { stroke: var(--border); }
.ring .arc { transition: stroke-dashoffset var(--dur-reveal) var(--ease-out); }

/* ── heatmap (overview) ──────────────────────────────────────────────────── */
.heat { display: grid; gap: 4px; }
.heat-cell { height: 26px; border-radius: var(--r-xs); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums; color: var(--txp); }
.heat-cell.none { background: rgba(110,117,128,.12); color: var(--mu); }

/* ── signature: score reveal ─────────────────────────────────────────────── */
.reveal-pop { animation: ds-pop var(--dur-slow) var(--ease-spring) both; }
@keyframes ds-pop { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
.reveal-in { animation: ds-in var(--dur-slow) var(--ease-out) both; }
@keyframes ds-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── moments ─────────────────────────────────────────────────────────────── */
.moment { display: flex; align-items: center; gap: var(--sp-3); padding: 10px 14px; border-radius: var(--r-md); background: linear-gradient(90deg, rgba(var(--acc-rgb),.14), rgba(var(--grid-rgb),.10)); border: 1px solid rgba(var(--acc-rgb),.3); font-size: 13px; color: var(--txp); }
.moment .moment-k { font-family: var(--font-display); font-weight: 700; }
.moment .moment-x { margin-left: auto; background: none; border: none; color: var(--mu); cursor: pointer; font-size: 16px; line-height: 1; }

/* ── getting started dock ────────────────────────────────────────────────── */
.gs-dock { display: flex; align-items: center; gap: var(--sp-4); padding: 10px 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); margin: 0 0 var(--sp-6); box-shadow: var(--elev-1); flex-wrap: wrap; position: static; }
.gs-dock-slot { padding-top: var(--sp-6); padding-bottom: 0; animation: none; }
#main > .gs-dock { margin: 0 0 var(--sp-6); }
.gs-dock .gs-title { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mu); }
.gs-dock .gs-steps { display: flex; gap: 6px; flex-wrap: wrap; }
.gs-dock .gs-step { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tx); padding: 4px 10px; border-radius: var(--r-pill); background: rgba(110,117,128,.1); }
.gs-dock .gs-step.done { color: var(--mu); text-decoration: line-through; }
.gs-dock .gs-step.next { color: var(--acc); background: rgba(var(--acc-rgb),.12); font-weight: 600; }
.gs-dock .gs-bar { flex: 1 1 120px; height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; min-width: 80px; }
.gs-dock .gs-bar > i { display: block; height: 100%; width: var(--p, 0%); background: linear-gradient(90deg, var(--acc), var(--grid)); transition: width var(--dur-slow) var(--ease-out); }
.gs-dock .gs-x { margin-left: auto; background: none; border: none; color: var(--mu); cursor: pointer; font-size: 18px; line-height: 1; }

/* ── live run scope ──────────────────────────────────────────────────────── */
.scope { position: relative; width: 100%; max-width: 360px; margin: 0 auto; overflow: hidden; border-radius: var(--r-md); }
.scope svg { width: 100%; max-width: 320px; aspect-ratio: 1; display: block; margin: 0 auto; }
.scope .ring-l { fill: none; stroke: var(--border2, var(--border)); stroke-width: 1.4; opacity: .8; }
.scope-wait { padding: 40px 0; text-align: center; font-size: 12.5px; color: var(--mu); font-style: italic; }
.scope .sweep { transform-origin: 50% 50%; animation: ds-sweep 3.2s linear infinite; }
/* the last answer is in: the sweep stops, the rings settle, the report is being built */
.scope.done .sweep { animation: none; opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); }
.scope.done .ring-l { opacity: 1; stroke-width: 1.5; }
.scope.done svg { filter: drop-shadow(0 0 10px rgba(255,87,34,.25)); }
.scope .blip { fill: var(--you); filter: drop-shadow(0 0 6px rgba(var(--you-rgb),.75)); }
.scope .q-dot.fail { fill: none; stroke: var(--fail); stroke-width: 1.2; }
.scope .fail-x { stroke: var(--fail); stroke-width: 1.1; stroke-linecap: round; }
.scope .ring-name { font-size: 7.5px; font-weight: 700; letter-spacing: .02em; paint-order: stroke; stroke: var(--surface, var(--bg)); stroke-width: 2.4px; }
.scope-legend span { display: inline-flex; align-items: center; white-space: nowrap; }
.scope-legend .sl { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.scope-legend .sl-named { background: var(--you); } .scope-legend .sl-answered { background: var(--mu); }
.scope-legend .sl-waiting { border: 1.5px solid var(--border2, var(--border)); }
.scope-legend .sl-fail { width: 12px; height: 12px; vertical-align: -2px; margin-right: 3px; }
.scope-legend .sl-fail circle { fill: none; stroke: var(--fail); stroke-width: 1.2; } .scope-legend .sl-fail path { stroke: var(--fail); stroke-width: 1.2; stroke-linecap: round; }
.scope .blip.miss { fill: var(--mu); filter: none; opacity: .7; }
.scope .q-dot { fill: var(--border2, var(--border)); }
.scope .q-dot.lit { fill: var(--mu); }
@keyframes ds-sweep { to { transform: rotate(360deg); } }
.scope-legend { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; font-size: 11.5px; color: var(--mu); margin-top: var(--sp-2); }

/* ── reduced motion: every animation has its static end state ────────────── */
@media (prefers-reduced-motion: reduce) {
  .skeleton::after, .scope .sweep { animation: none; }
  .chart .draw { animation: none; stroke-dashoffset: 0; }
  .chart:has(.line.draw) .area, .chart:has(.line.draw) .dot.last { animation: none; }
  .reveal-pop, .reveal-in, .cp { animation: none; }
  .ring .arc, .card.lift-hover, .gs-dock .gs-bar > i, .chart-tip { transition: none; }
}

/* ── page transitions (Chromium; others get none) ────────────────────────── */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* ── consistency overrides for the existing component classes ────────────── */
.btn { border-radius: var(--r-sm); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), filter var(--dur-fast), border-color var(--dur-fast); }
.btn-sm, .btn[style*="font-size:12px"] { font-size: 12px; padding: 6px 12px; }
.btn-primary:hover, .btn-danger:hover { box-shadow: var(--glow-acc); }
.btn-ghost:hover { box-shadow: var(--elev-1); }
.btn-danger { background: transparent; color: var(--acc); border: 1px solid rgba(var(--acc-rgb), .5); box-shadow: none; }
.btn-danger:hover { background: rgba(var(--acc-rgb), .1); }
input[type=checkbox], input[type=radio] { accent-color: var(--acc); color-scheme: light; }
html[data-theme=dark] input[type=checkbox], html[data-theme=dark] input[type=radio] { color-scheme: dark; }
.tbl-wrap th { font-size: 11px; letter-spacing: .08em; }
.tbl-wrap td.num, .tbl-wrap th.num { text-align: right; font-variant-numeric: tabular-nums; }
.fin-sec-lbl, .team-title, .info-card-title { font-family: var(--font-display); }
/* engine pills on the Overview and anywhere a plain engine name is shown */
.ov-eng, .eng-pill { background: rgba(110,117,128,.14); color: var(--mu); border-left: 3px solid var(--mu); }
.ov-eng.gemini, .eng-pill.gemini { border-left-color: var(--eng-gemini); color: var(--eng-gemini-ink); background: rgba(var(--eng-gemini-rgb), .12); }
.ov-eng.perplexity, .eng-pill.perplexity { border-left-color: var(--eng-perplexity); color: var(--eng-perplexity-ink); background: rgba(var(--eng-perplexity-rgb), .12); }
.ov-eng.chatgpt, .eng-pill.chatgpt { border-left-color: var(--eng-chatgpt); color: var(--eng-chatgpt-ink); background: rgba(var(--eng-chatgpt-rgb), .12); }
[data-theme=light] .ov-eng.chatgpt, [data-theme=light] .eng-pill.chatgpt { color: #246070; }
/* bars primitive */
.ds-bars { display: flex; flex-direction: column; gap: 8px; }
.ds-bar-row { display: grid; grid-template-columns: minmax(80px, 1.2fr) 3fr auto; gap: 10px; align-items: center; font-size: 12.5px; }
.ds-bar-label { color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-bar-track { height: 8px; border-radius: 4px; background: rgba(110,117,128,.18); overflow: hidden; }
.ds-bar-track > i { display: block; height: 100%; border-radius: 4px; transform-origin: left; animation: ds-grow var(--dur-reveal) var(--ease-out) both; }
@keyframes ds-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .ds-bar-track > i { animation: none; } }
.ds-bar-val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--txp); font-size: 12px; min-width: 36px; text-align: right; }
.ds-bar-note { grid-column: 1 / -1; font-size: 11px; color: var(--mu); margin-top: -4px; }

/* ── served dashboards: the same vocabulary (targets the generator's ids) ── */
#main .sec-hdr { font-family: var(--font-display); font-size: 20px; letter-spacing: -.02em; }
#main .sec-hdr-icon-chip, #main .sec-hdr > span:first-child { border-radius: var(--r-md); }
#main [style*="border-radius:14px"] { border-radius: var(--r-lg) !important; }
#score-tri-grid { box-shadow: var(--elev-2); }
/* A hidden tooltip bubble is still a 240px box past the right edge; on a
   phone that alone widens the page. Hidden means hidden. */
.cited-tooltip__bubble { visibility: hidden; }
.cited-tooltip:hover .cited-tooltip__bubble, .cited-tooltip:focus-visible .cited-tooltip__bubble,
.cited-tooltip--left:hover .cited-tooltip__bubble, .cited-tooltip--left:focus-visible .cited-tooltip__bubble { visibility: visible; }
/* ── phone: every served dashboard block is one column and nothing is wider than the screen ── */
@media (max-width: 780px) {
  #main [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  #score-tri-grid .hero-main, #score-tri-grid .hero-tile { padding: 20px 18px !important; }
  #score-tri-grid .hero-main { grid-template-columns: 1fr !important; justify-items: center; text-align: center; }
  #score-tri-grid .hero-verdict-row { justify-content: center; }
  #score-tri-grid #what-this-means { text-align: left; }
  #score-tri-grid .hero-side { grid-template-columns: 1fr !important; justify-items: center; }
  #score-tri-grid .hero-tiles { grid-template-columns: 1fr !important; }
  #score-tri-grid .hero-tile + .hero-tile { border-left: none !important; border-top: 1px solid var(--bd, var(--border)) !important; }
  #main table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #main { padding-left: 16px !important; padding-right: 16px !important; min-width: 0; }
  #main, #s-shell, #main > section, #main > div { max-width: 100% !important; min-width: 0; }
  #main img, #main svg:not(.sb-icon) { max-width: 100%; }
  #main [style*="white-space:nowrap"], #main .hdr-biz-lnk { white-space: normal !important; }
  #eng-toggles { gap: 2px !important; padding: 2px !important; }
  #eng-toggles .etog { padding: 0 9px !important; height: 30px !important; font-size: 11px !important; }
  /* on a phone a tooltip is a bottom sheet shown on tap: fixed to the screen, so it can never widen the page */
  .cited-tooltip__bubble { display: none; position: fixed !important; left: 16px !important; right: 16px !important; top: auto !important; bottom: 16px !important; width: auto !important; transform: none !important; }
  .cited-tooltip:hover .cited-tooltip__bubble, .cited-tooltip:focus-visible .cited-tooltip__bubble,
  .cited-tooltip:focus .cited-tooltip__bubble { display: block; }
}
#score-arc { filter: drop-shadow(0 0 10px rgba(255,87,34,.35)); }
#score-num { font-variant-numeric: tabular-nums; }
#score-label { border-radius: var(--r-pill); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 10.5px !important; }
#score-delta { font-variant-numeric: tabular-nums; }
#main table th { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mu); }
#main .dash-stagger.lift-hover:hover { box-shadow: var(--elev-2); }
#main .kpi-val, #main [id$="-num"] { font-variant-numeric: tabular-nums; }
html[data-theme=dark] #main .card, html[data-theme=dark] #main [style*="background:var(--card)"] { box-shadow: var(--elev-1); }

/* ── page header: title + subtitle on the left, controls on the right, one shared baseline;
      on narrow screens the controls wrap onto their own row, left-aligned ──────────── */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3) var(--sp-5); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.page-head-text { min-width: 0; flex: 1 1 320px; }
.page-head .page-title { margin: 0; line-height: 1.2; }
.page-head-sub { font-size: 13px; color: var(--mu); margin: 4px 0 0; line-height: 1.45; }
.page-head-kicker { font-size: 12px; color: var(--mu); margin: 0 0 4px; }
.page-head-tools { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; flex: 0 0 auto; }
.page-head-tools form { margin: 0; }
@media (max-width: 780px) { .page-head-tools { width: 100%; justify-content: flex-start; } }
.btn.btn-sm { padding: 6px 12px; font-size: 12.5px; }
.btn-ghost.btn-warn { color: var(--warn); }
.btn svg { width: 14px; height: 14px; flex: none; }
/* toggle switch (a labelled checkbox) */
.ds-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--tx); cursor: pointer; user-select: none; position: relative; margin: 0; }
.ds-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ds-switch i { width: 30px; height: 18px; border-radius: 999px; background: var(--border2, var(--border)); position: relative; flex: none; transition: background var(--dur-base) var(--ease-out); }
.ds-switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: var(--elev-1); transition: transform var(--dur-base) var(--ease-out); }
.ds-switch input:checked + i { background: var(--acc); }
.ds-switch input:checked + i::after { transform: translateX(12px); }
.ds-switch input:focus-visible + i { outline: 2px solid var(--grid); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ds-switch i, .ds-switch i::after { transition: none; } }
/* the Overview's "This week" line — real moments only, hidden when there are none */
.ov-week { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-size: 12.5px; color: var(--mu); margin: -6px 0 18px; }
.ov-week strong { color: var(--txp); font-weight: 600; }
.ov-week .ds-eyebrow { margin-right: 4px; }

/* ── admin pages: the same vocabulary as the rest (no new features) ─────── */
.page-hdr { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3) var(--sp-5); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.fin-sec-lbl, .ov-lbl, .ov-cell-lbl, .fin-period { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mu); }
.fin-sec-lbl { margin-bottom: var(--sp-4); display: flex; align-items: center; gap: 8px; }
.fin-sec-lbl::before { content: ""; width: 3px; height: 12px; border-radius: 2px; background: var(--acc); }
.ov-val, .fin-val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.card.ov-card, .card.fin-summary { border-radius: var(--r-lg); }
.ov-card:hover { box-shadow: var(--elev-2); }
/* badge family: status, role, kind, filter pills */
.status-badge, .role-badge, .role-pill, .ws-kind-pill, .unverified-badge, .acc-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4; }
.status-new { background: rgba(var(--bad-rgb), .12); color: var(--bad); }
.status-viewed { background: rgba(110,117,128,.14); color: var(--mu); }
.status-responded { background: rgba(var(--ok-rgb), .12); color: var(--ok); }
.filter-pill, .users-filter a { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600; color: var(--mu); background: var(--bg); border: 1px solid var(--border); text-decoration: none; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.filter-pill:hover, .users-filter a:hover { border-color: var(--acc); color: var(--txp); }
.filter-pill.active, .users-filter a.on { background: rgba(var(--acc-rgb), .1); color: var(--acc); border-color: var(--acc); }
.row-icon { width: 30px; height: 30px; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; color: var(--mu); background: transparent; border: 1px solid transparent; cursor: pointer; transition: color var(--dur-fast), border-color var(--dur-fast); }
.row-icon:hover { color: var(--txp); border-color: var(--border); background: transparent; }
/* tables: one style — eyebrow headers, numerals that line up, calmer rows */
.tbl-wrap { border-radius: var(--r-md); }
.tbl-wrap th { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mu); font-weight: 700; }
.tbl-wrap td { font-variant-numeric: tabular-nums; }
.tbl-wrap .num-th, .tbl-wrap .num-td, .tbl-wrap td.num, .tbl-wrap th.num { text-align: right; }
.tbl-wrap tbody tr:hover { background: color-mix(in srgb, var(--acc) 4%, transparent); }
/* fields and inline ghost buttons share one scale */
.card .field label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mu); font-weight: 700; }
.btn-ghost[style*="font-size:12px"], .btn[style*="padding:6px 12px"] { font-size: 12.5px !important; padding: 6px 12px !important; }
.card[style*="padding:20px 24px"], .card[style*="padding:22px 24px"], .card[style*="padding:24px 26px"] { padding: var(--sp-6) !important; }
.card[style*="margin-bottom:28px"] { margin-bottom: var(--sp-6) !important; }
.warn-banner { border-radius: var(--r-md); }

/* ── text direction follows the text itself (English and Arabic side by side) ── */
/* v1.8.9: plaintext picks the direction from the first strong letter, so it applies only where no
   dir is set — a question with dir="rtl" (htmlclean.text_dir, from its language) keeps it even when it
   starts with a Latin name («Abdali Hospital في عمّان …؟») */
[dir="auto"], .q-text:not([dir]), .sidebar-label, .cp-item > span, .heat-name, .ov-client, .page-title, .rq-quote:not([dir]), .bidi:not([dir]) { unicode-bidi: plaintext; }
.q-text[dir], .rq-quote[dir], .bidi[dir] { unicode-bidi: isolate; text-align: start; }
/* names in lists and labels keep the column's left edge whatever their script; paragraphs (questions, quotes) align by their own direction */
.heat-name, .ov-client, .sidebar-label, .cp-item > span, .sw-item > span, .sw-cur, .page-title { text-align: left; }

/* ── breadcrumbs: workspace › client › page ───────────────────────────────── */
.client-crumbs a { color: var(--mu); text-decoration: none; } .client-crumbs a:hover { color: var(--txp); text-decoration: underline; }
.client-crumbs .crumb-sep, .hdr-crumb-sep { color: var(--mu); opacity: .7; margin: 0 2px; }
.hdr-crumb { font-size: 12px; color: var(--mu); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.hdr-crumb-ws { color: var(--mu); text-decoration: none; } a.hdr-crumb-ws:hover { color: var(--txp); text-decoration: underline; }
.hdr-crumb-page { margin-left: 2px; }
@media (max-width: 780px) { .hdr-crumb { display: none; } }
/* phone breadcrumb: the client name only; tapping it opens the switcher (the drawer, then its menu) */
.crumb-phone { display: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--mu); background: none; border: none; padding: 0; margin: 0 0 4px; cursor: pointer; text-align: left; unicode-bidi: plaintext; }
.crumb-phone .crumb-chev { font-size: 11px; opacity: .8; }
@media (max-width: 780px) { .crumb-phone { display: inline-flex; align-items: center; gap: 4px; } .client-crumbs { display: none; }
  /* only where the crumb button was injected (people with the switcher); everyone else keeps the business name */
  .crumb-phone ~ .hdr-biz-lnk { display: none !important; } }

/* ── Social networks (v1.8.4): each network's own colours, a small filled circle with a white glyph,
   the same size and shape everywhere a link appears (profile strip, its popover, setup and
   Configuration). Brand colours are the one exception to "red means failure" — YouTube is red — so
   they appear only next to their links, small. X and TikTok are black, inverted in dark mode. ── */
:root { --soc-ink: #FFFFFF; --soc-ink-fg: #000000; }
[data-theme=light] { --soc-ink: #000000; --soc-ink-fg: #FFFFFF; }
.soc { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--soc-size, 20px); height: var(--soc-size, 20px);
       border-radius: 50%; color: #FFFFFF; vertical-align: middle; }
.soc svg { width: 58%; height: 58%; display: block; fill: currentColor; }
.soc-instagram { background: linear-gradient(45deg, #F58529 0%, #DD2A7B 45%, #8134AF 75%, #515BD4 100%); }
.soc-facebook { background: #1877F2; }
.soc-linkedin { background: #0A66C2; }
.soc-youtube { background: #FF0000; }
.soc-x, .soc-tiktok { background: var(--soc-ink); color: var(--soc-ink-fg); }
.soc-stack { display: inline-flex; align-items: center; }
.soc-stack .soc + .soc { margin-left: -5px; box-shadow: 0 0 0 1.5px var(--surface, var(--card)); }

/* ── A truncated name or question (v1.8.4) is its own isolated box: with dir="auto" an Arabic
   name is a right-to-left box, so its ellipsis falls on the left and the start of the name stays
   visible. Inside an English line ("Top rival: …") the line's own ellipsis would cut the right
   end — where an Arabic name begins. Use <bdi class="trunc" dir="auto">. ── */
.trunc { display: inline-block; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
         vertical-align: bottom; unicode-bidi: isolate; }
.soc-label { display: flex !important; align-items: center; gap: 8px; }
/* the radar before a run starts (v1.8.4): rings and grey dots, no sweep */
.scope.waiting .sweep { animation: none; opacity: 0; }

/* When the plan allows the next run (_next_run_note.html): the client page and the wizard (v1.8.5) */
.next-run-note { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--mu); }
.next-run-note svg { flex: none; }