@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap");

/* =============================================================================
   SEENBOARD PROTOTYPE · assets/theme.css · the ONE styling file
   -----------------------------------------------------------------------------
   HOW TO RESTYLE EVERYTHING
   Edit section 1 (design controls). Every page, colour, space, radius, shadow
   and font in the prototype derives from those ~40 knobs through var(), calc()
   and color-mix(in oklab, …). Nothing below section 3 contains a literal
   colour, so you never need to touch sections 3–7 to change the look.

   · Try values live on the app's /design page, then press "Copy CSS" and paste
     the block over section 1.
   · A preset (section 2) is a ready-made set of knob values. Preview one with
     ?preset=harbor on any page; make it permanent by copying its values into
     section 1.
   · Fonts: one family, Manrope (IBM Plex Mono only in code blocks). See docs/TEXT.md.

   HOUSE RULE: never a border, stripe or bar on only part of a rounded shape.
   Rounded things get an outline on all four sides or none; selected/current/
   "You" states use a fill, an even outline, weight or the square marker.
   npm run check (tools/check.mjs) renders every page with ?audit=borders and
   fails violations.

   SECTIONS
     1  Design controls (the only place a designer edits)
     2  Presets
     3  Semantic tokens: derived scales, light theme, dark theme
     4  Base
     5  Layout and shells (app, site, focus, page header, grids)
     6  Components
     7  Utilities
   Contract for page builders: docs/components.md
   ========================================================================== */


/* =============================================================================
   1 · DESIGN CONTROLS
   ========================================================================== */
:root,
.theme-scope {
  /* Brand */
  --accent: #F5B014; /* "Lit" = "you are seen": seen cells, score squares, the primary button; hover, edges, tints and heat derive from it */
  --on-accent: #1E1E1E; /* text and icons on an accent fill (needs 4.5:1 on --accent) */
  --series-you: #BD7D00; /* the "You" line and bars in charts (same in both themes: needs 3:1 on light and dark surfaces) */

  /* Neutrals, light theme */
  --ink: #1E1E1E; /* body text; every grey step is a mix of ink into surface */
  --paper: #F6F6F6; /* page canvas */
  --surface: #FFFFFF; /* cards, tables, chart plots */
  --graphite: #545454; /* logo mark, secondary text, strong borders */

  /* Neutrals, dark theme */
  --ink-dark: #EEEEEE; /* dark-theme text; dark greys are mixes of ink-dark into surface-dark */
  --paper-dark: #161616; /* dark-theme canvas */
  --surface-dark: #1E1E1E; /* dark-theme cards */

  /* Status (always shown with an icon and a word) */
  --positive: #3B7A1A; /* "Improved", correct, OK (light) */
  --warning: #B84A00; /* "At risk", missing, error (light) */
  --negative: #C41E55; /* "Dropped out", wrong, blocked (light) */
  --positive-dark: #87E6AE; /* positive on dark */
  --warning-dark: #ED6E09; /* warning on dark */
  --negative-dark: #FF6F91; /* negative on dark */

  /* Chart series: competitors in fixed order (Juniper 1, Northgate 2, Crumb & Kettle 3, Rise & Rye 4, Sunny Side 5); engines ChatGPT 1, Gemini 2, AI Overviews 3, AI Mode 4 */
  --series-1: #0A50AB; /* cobalt */
  --series-2: #16846B; /* jade */
  --series-3: #911470; /* berry */
  --series-4: #7E56F0; /* iris */
  --series-5: #0197D6; /* sky */
  --series-1-dark: #2990F8; /* cobalt on dark */
  --series-2-dark: #1FA7A3; /* jade on dark */
  --series-3-dark: #BF3469; /* berry on dark */
  --series-4-dark: #7955CF; /* iris on dark */
  --series-5-dark: #127299; /* sky on dark */

  /* Type */
  --font-display: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; /* headlines and big numbers: the same family as the body (one font, docs/TEXT.md) */
  --font-body: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; /* all UI text, labels and numbers */
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* code blocks only (robots.txt) */
  --display-weight: 600; /* weight of headlines and big numbers (hierarchy is size and weight only) */
  --base-size: 16px; /* body size; the whole type scale multiplies it */

  /* Shape and depth */
  --radius: 8px; /* cards; buttons and inputs get half, chips and tags a quarter, modals 1.5x */
  --cell-radius: 0px; /* grid cells, score squares, bullets, swatches (squares stay square) */
  --border-width: 1px; /* every hairline and control outline */
  --elevation: 0; /* 0 = flat cards with hairlines, 1 = soft shadow cards (anything between blends) */

  /* Space and layout */
  --density: 1; /* multiplies the 4px spacing scale and control heights (0.85 compact, 1.15 airy) */
  --content-width: 1200px; /* max width of page content */
  --sidebar-width: 248px; /* app sidebar width on wide screens */

  /* Motion (docs/MOTION.md: brand steps for the loader and squares, a soft glide for things that move) */
  --motion: 1; /* multiplies every duration and distance: 0 = no motion at all, 0.8 snappier, 1.2 slower */
  --motion-fast: 150ms; /* colour and opacity changes, highlight fade, small pop-ins, check marks */
  --motion-base: 240ms; /* glides, expand and collapse, filters, drawers, fade-up */
  --motion-slow: 400ms; /* count-up, square fill, mention sweep: the longest anything takes */
  --motion-stagger: 40ms; /* delay between items that arrive together (rows, answers, header lines) */
  --motion-rise: 6px; /* how far a fade-up travels */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* arriving and moving: quick start, soft landing, no overshoot */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* travelling between two places that are both on screen */
  --shimmer: 1; /* the stepped band on "working" labels: 1 on, 0 off */
  --motion-press: 0.98; /* how far a pressed control shrinks (1 = no press; never applied to cards, rows or tiers) */
  --motion-hold: 1600ms; /* how long a just-changed row keeps its highlight before it settles back */
}


/* =============================================================================
   2 · PRESETS
   Alternative looks. Preview: add ?preset=name to any URL or use design.html.
   Make one permanent: copy its values into section 1.
   Contrast verified with tools/colormix.py audit (text ≥ 4.5:1, marks ≥ 3:1).
   ========================================================================== */

/* Harbor: compact, cool, cobalt accent with white text on it, small radius */
:root[data-preset="harbor"],
.theme-scope[data-preset="harbor"] {
  --accent: #2F5BD3;
  --on-accent: #FFFFFF;
  --series-you: #4069D8;
  --ink: #161C26;
  --paper: #F2F4F7;
  --surface: #FFFFFF;
  --graphite: #485264;
  --ink-dark: #E6EBF2;
  --paper-dark: #0F131A;
  --surface-dark: #161B24;
  --series-1: #B4480F;
  --series-1-dark: #E9824A;
  --radius: 4px;
  --cell-radius: 0px;
  --density: 0.85;
  --sidebar-width: 224px;
}

/* Meadow: airy and soft, green accent, large radius, gentle shadows */
:root[data-preset="meadow"],
.theme-scope[data-preset="meadow"] {
  --accent: #7DCB6A;
  --on-accent: #0B1F12;
  --series-you: #4C9F5F;
  --ink: #121A15;
  --paper: #F3F2EC;
  --surface: #FFFFFF;
  --graphite: #4C5A50;
  --ink-dark: #EAEFE8;
  --paper-dark: #111512;
  --surface-dark: #181E1A;
  --positive: #1C6E8C;
  --positive-dark: #78C8E6;
  --warning: #B04600;
  --series-2: #B4531A;
  --series-2-dark: #E8894A;
  --radius: 16px;
  --cell-radius: 3px;
  --elevation: 1;
  --density: 1.15;
}

/* Newsprint: warm paper, square corners, deeper amber */
:root[data-preset="newsprint"],
.theme-scope[data-preset="newsprint"] {
  --accent: #F2A20C;
  --on-accent: #1A1814;
  --series-you: #B06F00;
  --ink: #1A1814;
  --paper: #EFEBE2;
  --surface: #FAF8F3;
  --graphite: #4D483F;
  --ink-dark: #EEEAE1;
  --paper-dark: #14120E;
  --surface-dark: #1C1915;
  --positive: #30661A;
  --warning: #A04000;
  --radius: 0px;
  --cell-radius: 0px;
}


/* =============================================================================
   3 · SEMANTIC TOKENS
   Pages and components use only these. Literal colours appear here only as
   neutral mixing anchors (black, white, transparent).
   ========================================================================== */

/* 3a · Theme-independent scales (space, size, type, radius) */
:root,
.theme-scope {
  --u: calc(4px * var(--density));
  --space-1: var(--u);
  --space-2: calc(var(--u) * 2);
  --space-3: calc(var(--u) * 3);
  --space-4: calc(var(--u) * 4);
  --space-5: calc(var(--u) * 5);
  --space-6: calc(var(--u) * 6);
  --space-8: calc(var(--u) * 8);
  --space-10: calc(var(--u) * 10);
  --space-12: calc(var(--u) * 12);
  --space-16: calc(var(--u) * 16);
  --space-24: calc(var(--u) * 24);

  --control-sm: calc(32px * var(--density));
  --control-md: calc(40px * var(--density));
  --control-lg: calc(48px * var(--density));
  --topbar-height: calc(60px * var(--density));
  --site-header-height: calc(68px * var(--density));
  --gutter: var(--space-8);

  --fs-2xs: calc(var(--base-size) * 0.75);     /* labels: small, muted, weight 500 (one family, so size and weight carry the rank) */
  --fs-xs: calc(var(--base-size) * 0.8125);
  --fs-sm: calc(var(--base-size) * 0.875);
  --fs-md: var(--base-size);
  --fs-lg: calc(var(--base-size) * 1.125);
  --fs-xl: calc(var(--base-size) * 1.25);
  --fs-2xl: calc(var(--base-size) * 1.5);
  --fs-3xl: calc(var(--base-size) * 2);
  --fs-kpi: calc(var(--base-size) * 2.5);
  --fs-4xl: calc(var(--base-size) * 2.75);
  --fs-5xl: calc(var(--base-size) * 3.5);
  --display-weight-2: var(--display-weight);

  --radius-card: var(--radius);
  --radius-control: calc(var(--radius) / 2);
  --radius-chip: calc(var(--radius) / 4);
  --radius-modal: calc(var(--radius) * 1.5);
  --radius-cell: min(var(--cell-radius), 25%); /* capped so small squares (8px bullets) never turn into dots */
  --radius-pill: 999px;
  --font-wordmark: var(--font-display); /* the logo wordmark: the one family, set heavier */
  --bw: var(--border-width);
  --ring: 2px;

  /* motion, derived from the section 1 knobs (--motion: 0 turns every one of these into "instant") */
  --dur-fast: calc(var(--motion-fast) * var(--motion));
  --dur-base: calc(var(--motion-base) * var(--motion));
  --dur-slow: calc(var(--motion-slow) * var(--motion));
  --stagger: calc(var(--motion-stagger) * var(--motion));
  --rise: calc(var(--motion-rise) * min(var(--motion), 1));
  --ease-steps: steps(4, end); /* brand moments: hover fills, squares, loader */
  --ease: var(--ease-steps); /* hover and press colour changes stay stepped */
  --dur: calc(160ms * var(--motion));
  --press: calc(1 - (1 - var(--motion-press)) * min(var(--motion), 1)); /* 1 (no press) when motion is 0 */
  --hold: calc(var(--motion-hold) * var(--motion));
}

/* 3b · Light theme (default) */
:root,
.theme-scope {
  color-scheme: light;
  --bg-canvas: var(--paper);
  --bg-surface: var(--surface);
  --bg-well: color-mix(in oklab, var(--ink) 6.5%, var(--surface));
  --bg-hover: color-mix(in oklab, var(--ink) 3.5%, var(--surface));
  --bg-raised: var(--surface);
  --bg-inverse: var(--ink);

  --border-hairline: color-mix(in oklab, var(--ink) 10.9%, var(--surface));
  --border-axis: color-mix(in oklab, var(--ink) 18.1%, var(--surface));
  --border-input: color-mix(in oklab, var(--ink) 47.8%, var(--surface));
  --border-strong: var(--graphite);

  --text: var(--ink);
  --text-secondary: var(--graphite);
  --text-subtle: color-mix(in oklab, var(--ink) 61.6%, var(--surface));
  --text-disabled: color-mix(in oklab, var(--ink) 33.7%, var(--surface));
  --text-inverse: var(--surface);
  --text-on-accent: var(--on-accent);
  --text-accent: color-mix(in oklab, var(--accent) 54%, black);
  --logo: var(--graphite);
  --focus-ring: var(--ink);

  /* the Lit family: every step derives from --accent alone (light: deeper = accent mixed toward black) */
  --accent-hover: color-mix(in oklab, var(--accent) 88%, black);
  --accent-pressed: color-mix(in oklab, var(--accent) 79%, black);
  --accent-edge: color-mix(in oklab, var(--accent) 69%, black);
  --accent-tint: color-mix(in oklab, var(--accent) 12%, var(--surface));
  --accent-band: color-mix(in oklab, var(--accent) 28%, var(--surface));
  --accent-line: color-mix(in oklab, var(--accent) 30%, var(--accent-tint));
  --mention-line: var(--accent-pressed);

  /* heat ramp for seen cells: pale Lit (low) -> Lit (~40%) -> deep Lit (100%) */
  --heat-lo: color-mix(in oklab, var(--accent) 50%, var(--surface));
  --heat-hi: var(--accent-pressed);
  --heat-ink-lo: var(--ink);
  --heat-ink-mid: var(--on-accent);
  --heat-ink-hi: var(--on-accent);

  --chart-you: var(--series-you);
  --chart-1: var(--series-1);
  --chart-2: var(--series-2);
  --chart-3: var(--series-3);
  --chart-4: var(--series-4);
  --chart-5: var(--series-5);
  --chart-field: var(--text-subtle);

  --status-positive: var(--positive);
  --status-warning: var(--warning);
  --status-negative: var(--negative);
  --tint-strength: 7%;

  /* track: the empty part of score squares, tallies, progress and bar tracks, inline code and default tags.
     It is --bg-well on surfaces; on well grounds (.card--well, .banner, .email__meta …) section 6 swaps it
     to the surface with a hairline edge so the empty part never disappears into its ground. */
  --bg-track: var(--bg-well);
  --border-track: transparent;

  --checker: color-mix(in oklab, var(--text) 4%, transparent);
  --inverse-line: color-mix(in oklab, var(--text-inverse) 35%, transparent);
  --inverse-hover: color-mix(in oklab, var(--text-inverse) 14%, transparent);
  --scrim: color-mix(in oklab, var(--paper-dark) 48%, transparent);
  --shadow-ink: var(--ink);
  --shadow-card:
    0 1px 2px color-mix(in oklab, var(--shadow-ink) calc(var(--elevation) * 6%), transparent),
    0 calc(var(--elevation) * 8px) calc(var(--elevation) * 24px) color-mix(in oklab, var(--shadow-ink) calc(var(--elevation) * 8%), transparent);
  --shadow-pop:
    0 1px 2px color-mix(in oklab, var(--shadow-ink) 6%, transparent),
    0 8px 24px color-mix(in oklab, var(--shadow-ink) 12%, transparent);
  --card-border: color-mix(in oklab, var(--border-hairline) calc((1 - var(--elevation)) * 100%), transparent);
}

/* 3c · Dark theme: follows the OS unless data-theme="light"; forced by data-theme="dark" */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]),
  :root:not([data-theme="light"]) .theme-scope {
    color-scheme: dark;
    --bg-canvas: var(--paper-dark);
    --bg-surface: var(--surface-dark);
    --bg-well: color-mix(in oklab, var(--ink-dark) 6.8%, var(--surface-dark));
    --bg-hover: color-mix(in oklab, var(--ink-dark) 4%, var(--surface-dark));
    --bg-raised: var(--surface-dark);
    --bg-inverse: var(--ink-dark);
    --border-hairline: color-mix(in oklab, var(--ink-dark) 17.3%, var(--surface-dark));
    --border-axis: color-mix(in oklab, var(--ink-dark) 17.3%, var(--surface-dark));
    --border-input: color-mix(in oklab, var(--ink-dark) 55.6%, var(--surface-dark));
    --border-strong: color-mix(in oklab, var(--ink-dark) 70.7%, var(--surface-dark));
    --text: var(--ink-dark);
    --text-secondary: color-mix(in oklab, var(--ink-dark) 70.7%, var(--surface-dark));
    --text-subtle: color-mix(in oklab, var(--ink-dark) 60.2%, var(--surface-dark));
    --text-disabled: color-mix(in oklab, var(--ink-dark) 40.8%, var(--surface-dark));
    --text-inverse: var(--surface-dark);
    --text-accent: color-mix(in oklab, var(--accent) 60%, var(--ink-dark));
    --logo: var(--ink-dark);
    --focus-ring: var(--ink-dark);
    --accent-edge: color-mix(in oklab, var(--accent) 70%, var(--ink-dark));
    --accent-tint: color-mix(in oklab, var(--accent) 11%, var(--surface-dark));
    --accent-band: color-mix(in oklab, var(--accent) 34%, var(--surface-dark));
    --heat-lo: color-mix(in oklab, var(--accent) 48%, black);
    --heat-hi: color-mix(in oklab, var(--accent) 52%, white);
    --heat-ink-lo: var(--ink-dark);
    --heat-ink-hi: var(--surface-dark);
    --chart-1: var(--series-1-dark);
    --chart-2: var(--series-2-dark);
    --chart-3: var(--series-3-dark);
    --chart-4: var(--series-4-dark);
    --chart-5: var(--series-5-dark);
    --chart-field: var(--text-disabled);
    --status-positive: var(--positive-dark);
    --status-warning: var(--warning-dark);
    --status-negative: var(--negative-dark);
    --tint-strength: 14%;
    --scrim: color-mix(in oklab, black 64%, transparent);
    --shadow-ink: black;
    --shadow-card: 0 calc(var(--elevation) * 8px) calc(var(--elevation) * 24px) color-mix(in oklab, black calc(var(--elevation) * 40%), transparent);
    --shadow-pop: 0 0 0 var(--bw) var(--border-hairline), 0 12px 32px color-mix(in oklab, black 50%, transparent);
    --card-border: var(--border-hairline);
  }
}
:root[data-theme="dark"],
:root[data-theme="dark"] .theme-scope,
body:has(.auth) {
  color-scheme: dark;
  --bg-canvas: var(--paper-dark);
  --bg-surface: var(--surface-dark);
  --bg-well: color-mix(in oklab, var(--ink-dark) 6.8%, var(--surface-dark));
  --bg-hover: color-mix(in oklab, var(--ink-dark) 4%, var(--surface-dark));
  --bg-raised: var(--surface-dark);
  --bg-inverse: var(--ink-dark);
  --border-hairline: color-mix(in oklab, var(--ink-dark) 17.3%, var(--surface-dark));
  --border-axis: color-mix(in oklab, var(--ink-dark) 17.3%, var(--surface-dark));
  --border-input: color-mix(in oklab, var(--ink-dark) 55.6%, var(--surface-dark));
  --border-strong: color-mix(in oklab, var(--ink-dark) 70.7%, var(--surface-dark));
  --text: var(--ink-dark);
  --text-secondary: color-mix(in oklab, var(--ink-dark) 70.7%, var(--surface-dark));
  --text-subtle: color-mix(in oklab, var(--ink-dark) 60.2%, var(--surface-dark));
  --text-disabled: color-mix(in oklab, var(--ink-dark) 40.8%, var(--surface-dark));
  --text-inverse: var(--surface-dark);
  --text-accent: color-mix(in oklab, var(--accent) 60%, var(--ink-dark));
  --logo: var(--ink-dark);
  --focus-ring: var(--ink-dark);
  --accent-edge: color-mix(in oklab, var(--accent) 70%, var(--ink-dark));
  --accent-tint: color-mix(in oklab, var(--accent) 11%, var(--surface-dark));
  --accent-band: color-mix(in oklab, var(--accent) 34%, var(--surface-dark));
  --heat-lo: color-mix(in oklab, var(--accent) 48%, black);
  --heat-hi: color-mix(in oklab, var(--accent) 52%, white);
  --heat-ink-lo: var(--ink-dark);
  --heat-ink-hi: var(--surface-dark);
  --chart-1: var(--series-1-dark);
  --chart-2: var(--series-2-dark);
  --chart-3: var(--series-3-dark);
  --chart-4: var(--series-4-dark);
  --chart-5: var(--series-5-dark);
  --chart-field: var(--text-disabled);
  --status-positive: var(--positive-dark);
  --status-warning: var(--warning-dark);
  --status-negative: var(--negative-dark);
  --tint-strength: 14%;
  --scrim: color-mix(in oklab, black 64%, transparent);
  --shadow-ink: black;
  --shadow-card: 0 calc(var(--elevation) * 8px) calc(var(--elevation) * 24px) color-mix(in oklab, black calc(var(--elevation) * 40%), transparent);
  --shadow-pop: 0 0 0 var(--bw) var(--border-hairline), 0 12px 32px color-mix(in oklab, black 50%, transparent);
  --card-border: var(--border-hairline);
}

/* 3d · Tone helpers: set --series (and --tone) for charts, legends, engine labels and rivals */
.series-you { --series: var(--chart-you); }
.series-1 { --series: var(--chart-1); }
.series-2 { --series: var(--chart-2); }
.series-3 { --series: var(--chart-3); }
.series-4 { --series: var(--chart-4); }
.series-5 { --series: var(--chart-5); }
.series-other { --series: var(--chart-field); }
.engine--chatgpt { --series: var(--chart-1); }
.engine--gemini { --series: var(--chart-2); }
.engine--ai-overviews { --series: var(--chart-3); }
.engine--ai-mode { --series: var(--chart-4); }


/* =============================================================================
   4 · BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; }
body,
.theme-scope {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg-canvas);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body { min-height: 100vh; }
[hidden] { display: none !important; }
img, svg, video { display: block; max-width: 100%; }
p, ul, ol, dl, figure, blockquote, h1, h2, h3, h4, h5, h6 { margin: 0; }
ul, ol { padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
/* Every control eases between its states (hover, focus, pressed, selected, disabled): the stepped "tint" of
   docs/MOTION-COVERAGE.md. Zero specificity, so a component's own transition list always replaces it. */
:where(a, button, input, select, textarea, summary, label, [role="tab"], [data-open], [data-template], [tabindex]:not([tabindex="-1"])) {
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    text-decoration-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) linear, transform var(--dur-fast) var(--ease-out);
}
table { border-collapse: collapse; }
hr { border: 0; height: var(--bw); background: var(--border-hairline); margin: var(--space-8) 0; }

h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd, td { text-wrap: pretty; }
h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--fs-3xl);
  line-height: 1.11;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--display-weight-2);
  font-size: var(--fs-2xl);
  line-height: 1.15;
}
h3, .h3 { font-size: var(--fs-xl); line-height: 1.27; font-weight: 600; }
h4, .h4 { font-size: var(--fs-lg); line-height: 1.33; font-weight: 600; }

a { color: var(--text); text-decoration-line: underline; text-decoration-thickness: max(1px, var(--bw)); text-underline-offset: 0.2em; text-decoration-color: var(--border-input);
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur-fast) var(--ease-out), text-decoration-thickness var(--dur-fast) var(--ease-out); }
a:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
strong, b { font-weight: 600; }
small { font-size: var(--fs-sm); }
mark { background: transparent; color: inherit; }
code, kbd, samp { font-family: var(--font-body); }
/* IBM Plex Mono only in code: code blocks, robots.txt lines in a diff, a code field. Everything else is Plex Sans. */
pre, .code-block, .diff--code .diff__text, .textarea--mono { font-family: var(--font-mono); }
code { font-size: 0.85em; background: var(--bg-track); box-shadow: inset 0 0 0 var(--bw) var(--border-track); padding: 0.1em 0.35em; border-radius: var(--radius-chip); }
::selection { background: var(--accent-band); color: var(--text); }

:focus { outline: none; }
:focus-visible { outline: none; }
/* No focus rings, ever: a focused element takes its hover look, and controls darken their own border.
   Keyboard users still see where they are; nothing is drawn around or outside the element. */
a:focus-visible { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.nav__item:focus-visible { background: var(--bg-hover); color: var(--text); }
.site-nav__link:focus-visible, .site-footer__link:focus-visible { color: var(--text); text-decoration: underline; }
a.card:focus-visible, .card--link:focus-visible { border-color: var(--text); }
.btn--secondary:focus-visible { background: #242428; border-color: #3A3A40; }
.btn--ink:focus-visible { background: color-mix(in oklab, var(--bg-inverse) 84%, var(--bg-canvas)); }
.btn--ghost:focus-visible { background: #1C1C1F; color: #EDEDED; }
.btn--icon:focus-visible { background: var(--bg-hover); }
.segmented__btn:focus-visible, .tabs__tab:focus-visible { color: var(--text); background: var(--bg-hover); }
button.chip:focus-visible { border-color: var(--text); }
.chip__remove:focus-visible { background: var(--bg-well); color: var(--text); }
.vgrid__row:focus-visible > th, .vgrid__row:focus-visible > td, .table tbody tr:focus-visible > * { background: var(--bg-hover); }
.move:focus-visible { border-color: var(--text); }
summary:focus-visible { color: var(--text); text-decoration: underline; }
summary { transition: color var(--dur) var(--ease), text-decoration-color var(--dur-fast) var(--ease-out); }
.tabs__panel:focus-visible { outline: none; }

/* Reduced motion: every duration and distance goes to zero (the same as --motion: 0), loops stop on their
   static mark, and app.js leaves the motion gate (html[data-motion="on"]) off, so nothing moves at all. */
@media (prefers-reduced-motion: reduce) {
  :root, .theme-scope { --motion: 0; --shimmer: 0; }
  *, *::before, *::after, ::backdrop {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* =============================================================================
   5 · LAYOUT AND SHELLS
   app.js builds the shells from <body data-shell="app|site|focus">.
   ========================================================================== */

.skip-link {
  position: absolute; left: var(--space-4); top: var(--space-4); z-index: 200;
  padding: var(--space-2) var(--space-4); background: var(--bg-inverse); color: var(--text-inverse);
  border-radius: var(--radius-control); font-weight: 600; text-decoration: none;
  transform: translateY(calc(-100% - var(--space-4) - 8px));
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus { transform: none; }

/* Brand lockup (mark drawn by app.js into [data-logo]) */
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text); text-decoration: none;
  font-family: var(--font-wordmark); font-weight: 700;
  font-size: 19px; line-height: 1;
}
.brand:hover { text-decoration: none; }
a.brand { transition: color var(--dur) var(--ease), transform var(--dur-fast) var(--ease-out); }
a.brand:focus-visible .brand__word { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.brand__mark { display: block; width: 24px; height: 24px; flex: none; }
.brand__mark svg, .logo { display: block; width: 100%; height: 100%; }
.logo__sq { fill: var(--logo); }
.brand__word { display: block; }
.brand--lg { font-size: 26px; gap: 14px; }
.brand--lg .brand__mark { width: 32px; height: 32px; }

/* ---- App shell ---------------------------------------------------------- */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
}
.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--space-6);
  padding: var(--space-5) var(--space-3) var(--space-4);
  background: var(--bg-surface);
  border-right: var(--bw) solid var(--border-hairline);
}
.sidebar__brand { padding: var(--space-1) var(--space-3) 0; }
.sidebar__footer {
  margin-top: auto; padding: var(--space-4) var(--space-3) 0;
  border-top: var(--bw) solid var(--border-hairline);
  font-size: var(--fs-xs); color: var(--text-subtle); display: grid; gap: var(--space-1);
}
.sidebar__plan { font-weight: 600; color: var(--text-secondary); }
.nav { display: grid; gap: 2px; }
.nav__label {
  padding: var(--space-4) var(--space-3) var(--space-2);
  font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: 500;
 color: var(--text-subtle);
}
.nav__item {
  position: relative; display: flex; align-items: center; gap: var(--space-3);
  min-height: calc(36px * var(--density)); padding: 0 var(--space-3);
  border-radius: var(--radius-control);
  color: var(--text-secondary); text-decoration: none; font-size: var(--fs-sm); font-weight: 500;
}
.nav__item .icon { width: 1.3em; height: 1.3em; }
.nav__item { transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur-fast) var(--ease-out); }
.nav__item:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; }
.nav__item[aria-current="page"] { background: var(--bg-well); color: var(--text); font-weight: 600; }
.nav__text { flex: 1; min-width: 0; }
.app__body { min-width: 0; display: flex; flex-direction: column; }
.app__main {
  width: 100%; max-width: calc(var(--content-width) + var(--gutter) * 2); margin: 0 auto;
  padding: var(--space-10) var(--gutter) var(--space-24);
  flex: 1;
}
.app__scrim { display: none; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--space-3);
  height: var(--topbar-height); padding: 0 var(--gutter);
  background: var(--bg-canvas);
  border-bottom: var(--bw) solid var(--border-hairline);
}
.topbar .topbar__menu, .topbar .topbar__brand { display: none; }
.topbar__business { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.topbar__business .icon { color: var(--text-secondary); width: 18px; height: 18px; }
.topbar__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__place { color: var(--text-subtle); font-size: var(--fs-sm); white-space: nowrap; }
.topbar__spacer { flex: 1; }
.topbar__actions { display: flex; align-items: center; gap: var(--space-2); }
.topbar__updated { font-size: var(--fs-xs); color: var(--text-subtle); white-space: nowrap; margin-right: var(--space-2); }
/* elevate: a sticky header with content scrolled under it gets a soft shadow (square headers only; app.js sets .is-scrolled) */
.topbar, .site-header, .focus__header, .shared-header { transition: box-shadow var(--dur-base) var(--ease-out); }
.is-scrolled { box-shadow: 0 2px 8px color-mix(in oklab, var(--shadow-ink) 8%, transparent); }
a.avatar { transition: background-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease-out); }
a.avatar:hover, a.avatar:focus-visible { background: color-mix(in oklab, var(--logo) 84%, var(--bg-canvas)); }

@media (max-width: 960px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; z-index: 40; top: var(--topbar-height); left: 0; bottom: 0; height: auto;
    width: min(300px, 86vw);
    transform: translateX(-100%); visibility: hidden;
    transition: transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
    box-shadow: var(--shadow-pop);
  }
  .sidebar__brand { display: none; }
  .app[data-nav-open] .sidebar { transform: none; visibility: visible; transition: transform var(--dur-base) var(--ease-out); }
  .app__scrim {
    position: fixed; inset: var(--topbar-height) 0 0 0; z-index: 35; background: var(--scrim); opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out), display var(--dur-base) allow-discrete;
  }
  .app[data-nav-open] .app__scrim { display: block; opacity: 1; }
  @starting-style { .app[data-nav-open] .app__scrim { opacity: 0; } }
  .topbar .topbar__menu, .topbar .topbar__brand { display: inline-flex; }
  .topbar__brand .brand__word { display: none; }
  .topbar__place, .topbar__updated { display: none; }
  .topbar__business .icon { display: none; }
}
@media (max-width: 640px) {
  :root, .theme-scope { --gutter: var(--space-4); }
  .app__main { padding-top: var(--space-6); }
  .topbar { gap: var(--space-2); }
  /* phones: the business name may take two lines instead of collapsing to "Hollow …" */
  .topbar__name { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: var(--fs-sm); line-height: 1.2; }
  .topbar .tag--example { padding-inline: var(--space-1); }
  /* Share keeps its icon and aria-label and stays a 40px target; the word is for screen readers only */
  [data-topbar-share] { min-width: 40px; min-height: 40px; justify-content: center; }
  [data-topbar-share-label] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}

/* ---- Site shell (marketing) --------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--bg-canvas); border-bottom: var(--bw) solid var(--border-hairline);
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--space-8);
  max-width: calc(var(--content-width) + var(--gutter) * 2); margin: 0 auto;
  height: var(--site-header-height); padding: 0 var(--gutter);
}
.site-nav { display: flex; align-items: center; gap: var(--space-6); }
.site-nav__link { color: var(--text-secondary); text-decoration: none; font-size: var(--fs-sm); font-weight: 500;
  text-decoration-line: underline; text-decoration-color: transparent; text-underline-offset: 0.2em;
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur-fast) var(--ease-out); }
.site-nav__link:hover { color: var(--text); text-decoration-color: currentColor; }
.site-nav__link[aria-current="page"] { color: var(--text); }
.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.site-header .site-header__menu { display: none; }
.site-main { display: block; }
/* anchors (#how, #pricing, a deep-linked tab) land below the sticky header, whatever the density */
.site-main [id] { scroll-margin-top: calc(var(--site-header-height) + var(--space-4)); }
.app__main [id], .app__main .tabs__list, .app__main [data-tabs] { scroll-margin-top: calc(var(--topbar-height) + var(--space-4)); }
.site-main .tabs__list, .site-main [data-tabs] { scroll-margin-top: calc(var(--site-header-height) + var(--space-4)); }
.site-main .split__aside--sticky { --sticky-top: calc(var(--site-header-height) + var(--space-6)); }
@media (max-width: 860px) {
  .site-header__inner { gap: var(--space-3); }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--space-2) var(--gutter) var(--space-4);
    background: var(--bg-canvas); border-bottom: var(--bw) solid var(--border-hairline);
  }
  .site-nav { opacity: 0; transition: opacity var(--dur-fast) var(--ease-in-out), display var(--dur-fast) allow-discrete; }
  .site-header[data-nav-open] .site-nav { display: flex; opacity: 1; }
  :root[data-motion="on"] .site-header[data-nav-open] .site-nav { animation: sb-drop-in var(--dur-base) var(--ease-out); }
  :root[data-motion="on"] .site-header[data-nav-open] .site-nav__link { animation: sb-fade-up var(--dur-base) var(--ease-out) both; animation-delay: calc(min(var(--i, 0), 6) * var(--stagger)); }
  .site-nav__link:nth-child(2) { --i: 1; } .site-nav__link:nth-child(3) { --i: 2; } .site-nav__link:nth-child(4) { --i: 3; } .site-nav__link:nth-child(n+5) { --i: 4; }
  .site-nav__link { padding: var(--space-3) 0; border-bottom: var(--bw) solid var(--border-hairline); font-size: var(--fs-md); }
  .site-header .site-header__menu { display: inline-flex; }
  .site-header .site-header__cta { display: none; }
}

.container {
  width: 100%; max-width: calc(var(--content-width) + var(--gutter) * 2);
  margin: 0 auto; padding: 0 var(--gutter);
}
.container--narrow { max-width: calc(760px + var(--gutter) * 2); }
.band { padding: var(--space-24) 0; }
.band--surface { background: var(--bg-surface); border-block: var(--bw) solid var(--border-hairline); }
.band--tight { padding: var(--space-16) 0; }
.band__header { display: grid; gap: var(--space-3); max-width: 720px; margin-bottom: var(--space-12); }
.band__header--center { margin-inline: auto; text-align: center; justify-items: center; }
.band__header:last-child { margin-bottom: 0; }
@media (max-width: 640px) { .band { padding: var(--space-16) 0; } }

.hero { position: relative; padding: var(--space-24) 0 var(--space-16); isolation: isolate; }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-16); align-items: center; }
.hero__content { display: grid; gap: var(--space-5); align-content: start; }
.hero__title {
  font-family: var(--font-display); font-weight: var(--display-weight);
 font-size: var(--fs-5xl); line-height: 1;
}
.hero__lede { font-size: var(--fs-lg); line-height: 1.55; color: var(--text-secondary); max-width: 34em; }
.hero__aside { min-width: 0; }
@media (max-width: 960px) {
  .hero { padding: var(--space-12) 0 var(--space-12); }
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .hero__title { font-size: calc(var(--base-size) * 2.75); }
}

.site-footer { background: var(--bg-surface); border-top: var(--bw) solid var(--border-hairline); padding: var(--space-16) 0 var(--space-10); font-size: var(--fs-sm); }
.site-footer__inner { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: var(--space-10); }
.site-footer__tagline { margin-top: var(--space-3); color: var(--text-secondary); }
.site-footer__title { font-family: var(--font-body); font-size: var(--fs-2xs); color: var(--text-subtle); margin-bottom: var(--space-3); font-weight: 500; }
.site-footer__links { list-style: none; display: grid; gap: var(--space-2); }
.site-footer__link { color: var(--text-secondary); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em;
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur-fast) var(--ease-out); }
.site-footer__link:hover { color: var(--text); text-decoration-color: currentColor; }
.site-footer__base { grid-column: 1 / -1; padding-top: var(--space-6); border-top: var(--bw) solid var(--border-hairline); color: var(--text-subtle); font-size: var(--fs-xs); }
@media (max-width: 640px) { .site-footer__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); } }

/* ---- Focus shell (onboarding) ------------------------------------------- */
.focus { min-height: 100vh; display: flex; flex-direction: column; }
.focus__header {
  display: flex; align-items: center; gap: var(--space-4);
  height: calc(64px * var(--density)); padding: 0 var(--gutter);
  border-bottom: var(--bw) solid var(--border-hairline); background: var(--bg-canvas);
}
.focus__title { flex: 1; text-align: center; font-size: var(--fs-sm); color: var(--text-subtle); }
.focus__actions { display: flex; align-items: center; gap: var(--space-2); }
.focus__main { width: 100%; max-width: calc(720px + var(--gutter) * 2); margin: 0 auto; padding: var(--space-12) var(--gutter) var(--space-24); flex: 1; }
@media (max-width: 640px) { .focus__title { display: none; } .focus__header { justify-content: space-between; } .focus__main { padding-top: var(--space-8); } }
/* phones: logo mark only, like the app topbar, so "Save and exit" stays on screen */
@media (max-width: 480px) { .focus__header { gap: var(--space-2); } .focus__header .brand__word { display: none; } }


/* ---- Shared board shell (/s/:token, docs/SHARING.md 5.3) ----------------
   The read-only page anyone with the link sees: a square header (brand, business, theme), the content at the app's
   width without a sidebar, and a plain footer. Rules are full-width lines on square elements, never edges. */
.shared-header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--space-4);
  height: var(--topbar-height); padding: 0 max(var(--gutter), calc((100% - var(--content-width)) / 2));
  background: var(--bg-canvas); border-bottom: var(--bw) solid var(--border-hairline);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.shared-header .topbar__business { min-width: 0; }
.shared__main {
  display: block; width: 100%; max-width: calc(var(--content-width) + var(--gutter) * 2); margin: 0 auto;
  padding: var(--space-10) var(--gutter) var(--space-16);
}
.shared__main [id] { scroll-margin-top: calc(var(--topbar-height) + var(--space-4)); }
.shared-footer {
  padding: var(--space-6) max(var(--gutter), calc((100% - var(--content-width)) / 2)) var(--space-10);
  border-top: var(--bw) solid var(--border-hairline);
  font-size: var(--fs-sm); color: var(--text-secondary);
}
.shared-footer a { color: inherit; transition: color var(--dur) var(--ease), text-decoration-color var(--dur-fast) var(--ease-out); }
.shared-footer a:hover, .shared-footer a:focus-visible { color: var(--text); }
@media (max-width: 640px) {
  .shared-header { gap: var(--space-2); }
  .shared-header .brand__word, .shared-header .topbar__place { display: none; }
  .shared__main { padding-top: var(--space-6); }
}

/* ---- Page header (verdict-first rhythm) --------------------------------- */
.page-header { display: grid; gap: var(--space-3); margin-bottom: var(--space-10); }
.page-header:last-child { margin-bottom: 0; }
.page-header__title { max-width: 22em; }
.page-header__lede { font-size: var(--fs-lg); line-height: 1.55; color: var(--text-secondary); max-width: 40em; }
.page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.page-header__meta { font-size: var(--fs-sm); color: var(--text-subtle); }
.page-header__score { margin: var(--space-2) 0; }
/* two scores (Google's AI + ChatGPT) as the "one number" step: a pair of cards, stacked on phones */
.page-header__scores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin: var(--space-2) 0; }
.page-header--split { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-8); align-items: end; }
.page-header--split > * { grid-column: 1; }
.page-header--split > .page-header__actions { grid-column: 2; grid-row: 1 / span 4; align-self: end; margin: 0; }
@media (max-width: 760px) {
  .page-header--split { grid-template-columns: minmax(0, 1fr); }
  .page-header--split > .page-header__actions { grid-column: 1; grid-row: auto; }
  .page-header__scores { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  h1, .h1, .page-header__title { font-size: calc(var(--base-size) * 1.875); }
  .page-header__lede { font-size: var(--fs-md); }
}
@media (max-width: 640px) {
  /* phones: filled actions share one full width; a ghost action sits on its own line, label on the text edge */
  .page-header__actions > .btn:not(.btn--ghost), .hero__content > .cluster > .btn:not(.btn--ghost) { flex: 1 1 100%; }
  /* a "?" hint after the button stays on the button's line */
  .page-header__actions:has(> .hint) > .btn:not(.btn--ghost) { flex-basis: 0; }
  .page-header__actions > .btn--ghost:not(.btn--icon), .hero__content > .cluster > .btn--ghost:not(.btn--icon) { margin-inline-start: calc((var(--btn-pad) + var(--bw)) * -1); }
}
/* the last block of each score card body sits on the bottom, so the metric rows of the two cards line up
   even when one card's score label wraps and the other's doesn't */
.page-header__scores > .card > .card__body { grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; gap: var(--space-6); }
.page-header__scores .score--lg { gap: var(--space-3) var(--space-6); }
.page-header__scores .score--lg .score__num { font-size: var(--fs-5xl); line-height: 0.95; }
.page-header__scores .score__figure { gap: var(--space-2); }
.page-header__scores .metrics--divided { --metrics-gap: var(--space-6); margin-left: 0; clip-path: none; padding-top: var(--space-5); border-top: var(--bw) solid var(--border-hairline); }
.page-header__scores .metrics--divided > .metric { padding-left: 0; border-left: 0; }
.page-header__scores > .card > .card__body > :first-child:not(:last-child) { align-self: start; }

/* ---- Sections ----------------------------------------------------------- */
.section { margin-top: var(--space-12); }
.section:first-child { margin-top: 0; }
.section__header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-6); margin-bottom: var(--space-5); }
.section__heading { display: grid; gap: var(--space-1); min-width: 0; flex: 1 1 20rem; }
.section__title {
  font-family: var(--font-display); font-weight: var(--display-weight-2);
  font-size: var(--fs-xl); line-height: 1.2;
}
.section__lede { color: var(--text-secondary); max-width: 44em; }
.section__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); flex: none; max-width: 100%; }
/* a header whose only action is a "?" hint keeps it on the title's line, never orphaned below it on a phone */
.section__header:is(:has(> .section__actions > .hint:only-child), :has(> .hint:last-child)) { flex-wrap: nowrap; align-items: flex-start; }
@media (max-width: 640px) { .section__actions > .btn--ghost:first-child:not(.btn--icon) { margin-inline-start: calc((var(--btn-pad) + var(--bw)) * -1); } }

/* ---- Grids and splits --------------------------------------------------- */
.grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 260px)), 1fr)); }
.grid--tight { gap: var(--space-4); }
@media (max-width: 1100px) { .grid:not(.grid--auto) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } }
@media (max-width: 640px) {
  .grid:not(.grid--auto) { grid-template-columns: minmax(0, 1fr); }
  .stack--lg > .grid { row-gap: var(--space-8); }   /* stacked items keep the stack's rhythm */
}

.split { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split--aside-left { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.split__main, .split__aside { min-width: 0; display: grid; gap: var(--space-6); align-content: start; }
.split__aside--sticky {
  --sticky-top: calc(var(--topbar-height) + var(--space-6));
  position: sticky; top: var(--sticky-top);
  /* never taller than the screen: a long aside scrolls on its own (the small inset keeps focus rings visible) */
  max-height: calc(100dvh - var(--sticky-top) - var(--space-6)); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--space-1); margin: calc(var(--space-1) * -1); scrollbar-width: thin;
}
/* a page whose form is the point (sign up, log in): heading and form first, the supporting list after them. On a
   phone the form comes straight after the heading instead of after the list. */
.split--form { grid-template-areas: "main aside" "more aside"; }
.split--form > .split__main { grid-area: main; }
.split--form > .split__aside { grid-area: aside; }
.split__more { grid-area: more; min-width: 0; display: grid; gap: var(--space-6); align-content: start; }
@media (max-width: 960px) {
  .split--form { grid-template-areas: "main" "aside" "more"; }
  .split, .split--even, .split--aside-left { grid-template-columns: minmax(0, 1fr); }
  .split__aside--sticky { position: static; max-height: none; overflow: visible; padding: 0; margin: 0; }
}


/* =============================================================================
   6 · COMPONENTS
   ========================================================================== */

/* ---- Icons (app.js replaces <i data-icon="name"> with svg.icon) ---------- */
.icon {
  display: inline-block; flex: none; width: 1.15em; height: 1.15em; vertical-align: -0.2em;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter;
}
.icon--sm { width: 14px; height: 14px; }
.icon--lg { width: 24px; height: 24px; }
[data-icon] { font-style: normal; }

/* ---- Cards -------------------------------------------------------------- */
.card {
  display: block; position: relative; min-width: 0;
  background: var(--bg-surface);
  border: var(--bw) solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  --card-pad: var(--space-6);
  padding: var(--card-pad);
}
.card--well { background: var(--bg-well); border-color: transparent; box-shadow: none; }
.card--callout { background: var(--accent-tint); border-color: var(--accent-line); box-shadow: none; }
.card--outline { background: transparent; border-color: var(--border-axis); box-shadow: none; }
.card--flush { padding: 0; overflow: hidden; }
.card--compact { --card-pad: var(--space-4); }
.card { transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
a.card, .card--link { color: inherit; text-decoration: none; }
a.card:hover, .card--link:hover { border-color: var(--border-strong); box-shadow: var(--shadow-pop); }
a.card:focus-visible, .card--link:focus-visible { box-shadow: var(--shadow-pop); }
.card--selected { border-color: var(--text); box-shadow: inset 0 0 0 var(--bw) var(--text), var(--shadow-card); }
.card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; }
.card__heading { display: grid; gap: var(--space-1); min-width: 0; }
/* a "?" hint at the end of a card header stays beside the title; the title wraps instead */
.cluster:has(> :is(.card__title, .h3, .h4) + .hint:last-child) { flex-wrap: nowrap; align-items: flex-start; }
.card__header:has(> .hint:last-child) { flex-wrap: nowrap; }
.card__eyebrow { font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: 500; color: var(--text-secondary); }
.card__title { font-size: var(--fs-lg); line-height: 1.3; font-weight: 600; }
.card__title--display { font-family: var(--font-display); font-weight: var(--display-weight-2); font-size: var(--fs-xl); }
.card__meta { font-size: var(--fs-sm); color: var(--text-subtle); }
.card__body { display: grid; gap: var(--space-4); }
.card__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--bw) solid var(--border-hairline); }
.card--flush > .card__header { padding: var(--space-5) var(--card-pad) 0; }
.card--flush > .card__footer { margin: 0; padding: var(--space-4) var(--card-pad); }
.card__section { padding: var(--space-5) var(--card-pad); border-top: var(--bw) solid var(--border-hairline); }
/* tables, source lists and pagers that fill a flush card start and end on the card's own text edge */
.card--flush .table :is(th, td):first-child, .card--flush .table > caption { padding-inline-start: var(--card-pad); }
.card--flush .table :is(th, td):last-child { padding-inline-end: var(--card-pad); }
.card--flush .source, .card--flush > .pager { padding-inline: var(--card-pad); }
/* fill: for cards in a row that the grid stretches to one height; the footer sits on the bottom edge */
.card--fill { display: flex; flex-direction: column; }
.card--fill > .card__body { flex: 1 0 auto; align-content: start; }
.card--fill > .card__footer { margin-top: auto; min-height: calc(var(--control-sm) + var(--space-4) + var(--bw)); }
.card--flush.card--fill > .card__footer { min-height: calc(var(--control-sm) + var(--space-4) * 2 + var(--bw)); }
.card--fill > :has(+ .card__footer) { margin-bottom: var(--space-5); }

/* Track fills (--bg-track, section 3) follow their ground: surfaces use the well grey,
   well grounds swap to the surface with a hairline so empty squares, tracks and code chips stay visible */
.card, .answer, .move, .tier, .email, .table-wrap, .preset__card { --bg-track: var(--bg-well); --border-track: transparent; }
.card--well, .banner, .email__meta, .answer__note, .sms__bubble, .checker-field, .empty { --bg-track: var(--bg-surface); --border-track: var(--border-axis); }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  /* Redesign 01: Manrope; indigo main, mint confirm, lime new, coral danger; press shrinks, arrow nudges */
  --btn-indigo: #5E6AD2; --btn-mint: #2DD4A7; --btn-lime: #C6F432; --btn-coral: #FF6B4A; --btn-on-light: #0F0F10;
  --btn-h: var(--control-md); --btn-pad: var(--space-4);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--btn-h); padding: 0 var(--btn-pad);
  border: var(--bw) solid transparent; border-radius: 6px;
  background: transparent; color: var(--text);
  font-family: "Manrope", var(--font-body); font-size: var(--fs-sm); font-weight: 600; line-height: 1.1;
  text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease), text-decoration-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:hover { text-decoration: none; }
.btn .icon { width: 1.25em; height: 1.25em; }
.btn:active:not([disabled]):not([aria-disabled="true"]) { transform: scale(0.96); }
.btn--primary, .btn--confirm, .btn--new, .btn--danger { box-shadow: none; } /* no top highlight: a one-sided inset stripe on a rounded shape breaks the border rule */
.btn--primary { background: var(--btn-indigo); color: #fff; }
.btn--confirm { background: var(--btn-mint); color: var(--btn-on-light); }
.btn--new { background: var(--btn-lime); color: var(--btn-on-light); }
.btn--danger { background: var(--btn-coral); color: var(--btn-on-light); }
:is(.btn--primary, .btn--confirm, .btn--new, .btn--danger):is(:hover, :focus-visible) { filter: brightness(1.08); }
/* a trailing icon (arrow) slides forward on hover */
.btn > .icon:last-child:not(:first-child) { transition: transform 200ms cubic-bezier(.2,.8,.2,1); }
.btn:hover > .icon:last-child:not(:first-child) { transform: translateX(3px); }
.btn--secondary { background: #1C1C1F; border-color: #2E2E33; color: #EDEDED; }
.btn--secondary:hover { background: #242428; border-color: #3A3A40; }
.btn--ink { background: var(--bg-inverse); color: var(--text-inverse); }
.btn--ink:hover { background: color-mix(in oklab, var(--bg-inverse) 84%, var(--bg-canvas)); }
.btn--sm { --btn-h: var(--control-sm); --btn-pad: var(--space-3); font-size: var(--fs-xs); }
.btn--sm .icon { width: 1.3em; height: 1.3em; }
.btn--lg { --btn-h: var(--control-lg); --btn-pad: var(--space-6); font-size: var(--fs-md); }
/* ghost comes after the sizes so its tighter padding wins at every size (sm, md, lg) */
.btn--ghost { --btn-pad: var(--space-3); color: #8A8A8F; }
.btn--ghost:hover { background: #1C1C1F; color: #EDEDED; }
.btn--ghost.btn--flush { color: var(--text); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--border-input); }
.btn--ghost.btn--flush:hover { text-decoration-color: currentColor; }
/* flush: a ghost link that starts a line of text ("See every source"): no inline padding, so its label lines up with the text above */
.btn--flush { --btn-pad: 0px; border-inline-width: 0; }
.btn--flush:hover { background: transparent; }
/* a ghost button that starts a row (card footer; section and page-header actions once they wrap under the heading on phones)
   pulls its label back onto the text edge */
.card__footer > .btn--ghost:first-child:not(.btn--icon) { margin-inline-start: calc((var(--btn-pad) + var(--bw)) * -1); }
.btn--block { display: flex; width: 100%; }
.btn--icon { width: var(--btn-h); padding: 0; text-decoration: none; }
.btn--icon:hover { background: var(--bg-hover); }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--bg-well); color: var(--text-disabled); border-color: transparent; box-shadow: none; cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; min-inline-size: var(--btn-w, auto); }
/* busy: the label is swapped for the busy words with a small ticking mark before them (app.js, busyForms) */
.btn__mark { flex: none; width: 13px; height: 13px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; }
.btn__mark > i { display: none; }
:root[data-motion="on"] .btn__mark { animation: sb-btn-spin 700ms linear infinite; }
@keyframes sb-btn-spin { to { transform: rotate(360deg); } }
.btn__busy { min-width: 0; }
:root[data-motion="on"] .btn__busy { animation: sb-fade-in var(--dur-fast) var(--ease-out) both; }

/* ---- Form controls ------------------------------------------------------ */
.field { display: grid; gap: var(--space-2); min-width: 0; align-content: start; }
.field__label { font-size: var(--fs-sm); font-weight: 600; }
.field__optional { font-weight: 400; color: var(--text-subtle); }
.field__hint { font-size: var(--fs-sm); color: var(--text-subtle); }
.field__error { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--status-negative); }
.fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-3); min-width: 0; }
.fieldset > legend { padding: 0; margin-bottom: var(--space-3); font-size: var(--fs-sm); font-weight: 600; }
/* inline form: fields side by side with the submit button at the end (hero free check, add a location); stacks on phones */
.form-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.form-row > .field { flex: 1 1 12rem; }
.form-row > .btn { flex: none; }
@media (max-width: 640px) { .form-row > .btn { flex: 1 1 100%; } }

/* Redesign 02 · inputs: quiet field (H1), input group (H2), composer (H3). 6px corners; focus only brightens the border */
.input, .select, .textarea, .input-group, .composer {
  --field-bg: color-mix(in oklab, var(--text) 3%, var(--bg-surface));
  --field-line: var(--border-input);
  --field-line-hover: var(--border-strong);
  --field-line-focus: color-mix(in oklab, var(--text) 55%, var(--bg-surface));
}
.input, .select, .textarea {
  width: 100%; min-height: var(--control-md); padding: 0 var(--space-3);
  background: var(--field-bg); color: var(--text);
  border: 1px solid var(--field-line); border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,.035);
  font-family: "Manrope", var(--font-body); font-size: var(--fs-sm); font-weight: 500; line-height: 1.4;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--text-subtle); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--field-line-hover); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--field-line-focus); }
.field__label { font-family: "Manrope", var(--font-body); }

/* H2 · input group: icon, text prefix, shortcut hint or a small button inside one field */
.input-group {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: var(--control-md);
  padding: 0 4px 0 var(--space-3); background: var(--field-bg); border: 1px solid var(--field-line); border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,.035); cursor: text;
  font-family: "Manrope", var(--font-body); font-size: var(--fs-sm);
  transition: border-color var(--dur) var(--ease);
}
.input-group:hover { border-color: var(--field-line-hover); }
.input-group:focus-within { border-color: var(--field-line-focus); }
.input-group > .icon { flex: none; width: 16px; height: 16px; color: var(--text-subtle); transition: color var(--dur) var(--ease); }
.input-group:focus-within > .icon { color: var(--text); }
.input-group > .input { flex: 1; min-width: 0; min-height: calc(var(--control-md) - 2px); padding: 0; border: 0; background: transparent; box-shadow: none; }
.input-group__prefix { flex: none; color: var(--text-subtle); margin-right: calc(var(--space-2) * -1); }
.input-group > .kbd, .input-group > kbd { flex: none; margin-right: 4px; }
.input-group > .btn { flex: none; min-height: 26px; --btn-pad: var(--space-2); border-radius: 4px; font-size: var(--fs-xs); }
.field--invalid .input-group { border-color: var(--status-negative); }

/* H3 · composer: a writing box with a counter bar under the text */
.composer {
  display: grid; gap: var(--space-2); padding: var(--space-3); background: var(--field-bg);
  border: 1px solid var(--field-line); border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,.035); cursor: text;
  transition: border-color var(--dur) var(--ease);
}
.composer:hover { border-color: var(--field-line-hover); }
.composer:focus-within { border-color: var(--field-line-focus); }
.composer > .textarea { min-height: 2.9em; padding: 0; border: 0; background: transparent; box-shadow: none; resize: none; font-size: var(--fs-md); }
.composer__bar { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); color: var(--text-subtle); }
.composer__count { margin-left: auto; font-variant-numeric: tabular-nums; }
.composer__count.is-near { color: var(--status-warning); }
.input--sm, .select--sm { min-height: var(--control-sm); font-size: var(--fs-sm); }
.input--lg { min-height: var(--control-lg); font-size: var(--fs-lg); }
.textarea { min-height: calc(var(--control-md) * 2); padding: var(--space-3); line-height: 1.55; resize: vertical; }
/* drafts grow with their text (up to 60% of the screen), so a phone shows the whole draft and its sign-off */
@supports (field-sizing: content) { .textarea { field-sizing: content; max-height: 60vh; } }
@supports not (field-sizing: content) { .textarea:not([rows]) { min-height: calc(var(--control-md) * 3.4); } }
.textarea--mono { font-family: var(--font-mono); font-size: var(--fs-xs); }
.select {
  appearance: none; padding-right: var(--space-10); cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
    linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.field--invalid .input, .field--invalid .select, .field--invalid .textarea, .input[aria-invalid="true"] { border-color: var(--status-negative); }
.field--invalid .composer { border-color: var(--status-negative); }
.input-group > .input[aria-invalid="true"] { border: 0; }
.input[disabled], .select[disabled], .textarea[disabled] { background: var(--bg-well); color: var(--text-disabled); cursor: not-allowed; }
.input[readonly] { background: var(--bg-well); }

.search { position: relative; display: flex; }
.search > .icon { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-subtle); pointer-events: none; }
.search__input { padding-left: calc(var(--space-3) + 18px + var(--space-2)); }
.search > .icon { transition: color var(--dur) var(--ease); }
.search:focus-within > .icon { color: var(--text); }

/* Redesign 04 · toggles: indigo checkbox whose tick draws in, radio dot that pops, small-cornered mint switch,
   choice cards with an even indigo outline. Labels brighten when chosen. */
.choice, .switch { --toggle-on: #5E6AD2; --toggle-line: color-mix(in oklab, var(--text) 26%, var(--bg-surface)); }
.choice { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-family: "Manrope", var(--font-body); font-size: var(--fs-sm); font-weight: 500; line-height: 1.4; color: var(--text-secondary); user-select: none; transition: color 200ms var(--ease); }
.choice:has(.choice__input:checked) { color: var(--text); }
.choice__input {
  appearance: none; flex: none; margin: 0.1em 0 0; width: 16px; height: 16px;
  display: grid; place-content: center;
  background: transparent; border: 0; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--toggle-line);
  cursor: pointer; transition: background-color 150ms var(--ease), box-shadow 150ms var(--ease), transform 120ms var(--ease-out);
}
.choice__input::before {
  content: ""; width: 12px; height: 12px; background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  clip-path: inset(0 100% 0 0); transition: clip-path 220ms cubic-bezier(.2,.8,.2,1) 30ms;
}
.choice__input:checked { background: var(--toggle-on); box-shadow: inset 0 0 0 1.5px var(--toggle-on); }
.choice__input:checked::before { clip-path: inset(0 0 0 0); }
.choice:active .choice__input:not(:disabled) { transform: scale(0.9); }
.choice__input[type="radio"] { border-radius: 50%; }
.choice__input[type="radio"]::before { -webkit-mask: none; mask: none; clip-path: none; width: 6px; height: 6px; border-radius: 50%; transform: scale(0); transition: transform 200ms cubic-bezier(.2,.8,.2,1.4); }
.choice__input[type="radio"]:checked::before { transform: scale(1); }
.choice:hover .choice__input:not(:checked):not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.choice__input:focus-visible:not(:checked) { box-shadow: inset 0 0 0 1.5px var(--text); }
.choice__input:disabled { background: var(--bg-well); cursor: not-allowed; }
.choice__text { display: grid; gap: 2px; }
.choice__hint { font-size: var(--fs-xs); color: var(--text-subtle); }
.choice--card {
  display: flex; padding: var(--space-3) var(--space-4); border: 0; border-radius: 6px; background: var(--bg-surface);
  box-shadow: inset 0 0 0 1px var(--border-axis);
  transition: box-shadow 150ms var(--ease), background-color 150ms var(--ease), transform 120ms var(--ease-out);
}
.choice--card:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
.choice--card:active { transform: scale(0.98); }
.choice--card:has(.choice__input:checked) { background: color-mix(in oklab, var(--toggle-on) 8%, var(--bg-surface)); box-shadow: inset 0 0 0 1.5px var(--toggle-on); }

.switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; font-family: "Manrope", var(--font-body); font-size: var(--fs-sm); font-weight: 500; user-select: none; }
.switch__input {
  appearance: none; position: relative; flex: none; margin: 0; width: 32px; height: 18px; border-radius: 5px;
  background: color-mix(in oklab, var(--text) 18%, var(--bg-surface)); cursor: pointer;
  transition: background-color 200ms var(--ease);
}
.switch__input::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 3px;
  background: var(--bg-surface); box-shadow: 0 1px 2px rgba(0,0,0,.3);
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), width 120ms var(--ease-out), background-color 200ms var(--ease);
}
.switch:active .switch__input:not(:disabled)::before { width: 18px; }
.switch__input:checked { background: #2DD4A7; }
.switch__input:checked::before { transform: translateX(14px); background: #0F0F10; }
.switch:active .switch__input:checked:not(:disabled)::before { transform: translateX(10px); }
.switch__input:focus-visible::before { box-shadow: 0 0 0 1px var(--text); }
.switch__input:disabled { opacity: .5; cursor: not-allowed; }
.switch__text { display: grid; gap: 2px; }

/* ---- Segmented control -------------------------------------------------- */
.segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--bg-well); border-radius: var(--radius-control); width: max-content; max-width: 100%; }
.segmented__btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: calc(var(--control-sm) - 6px); padding: 0 var(--space-3);
  border: 0; border-radius: max(0px, calc(var(--radius-control) - 2px));
  background: transparent; color: var(--text-secondary); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease-out);
}
.segmented__btn:hover { color: var(--text); }
.segmented__btn[aria-pressed="true"], .segmented__btn[aria-selected="true"] {
  background: var(--bg-surface); color: var(--text);
  box-shadow: 0 0 0 var(--bw) var(--border-hairline), 0 1px 2px color-mix(in oklab, var(--shadow-ink) 8%, transparent);
}

/* ---- Tabs --------------------------------------------------------------- */
.tabs__list { display: flex; gap: var(--space-6); border-bottom: var(--bw) solid var(--border-hairline); overflow-x: auto; scrollbar-width: none; margin-bottom: var(--space-6); }
.tabs__tab {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) 0; border: 0; background: none;
  color: var(--text-secondary); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease-out);
}
.tabs__tab:hover { color: var(--text); }
.tabs__tab[aria-selected="true"] { color: var(--text); }
.tabs__tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--bw) * -1); height: 2px; background: var(--text); }

/* wrap: tabs flow onto a second row instead of scrolling sideways (always on phones) */
.tabs__list--wrap { flex-wrap: wrap; overflow-x: visible; column-gap: var(--space-5); row-gap: 0; }
@media (max-width: 640px) { .tabs__list { flex-wrap: wrap; overflow-x: visible; column-gap: var(--space-5); row-gap: 0; } }

/* ---- Chips (filters and editable values) -------------------------------- */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.filters__label { font-family: var(--font-body); font-size: var(--fs-2xs); color: var(--text-subtle); margin-right: var(--space-1); font-weight: 600; }
.filters + .filters { margin-top: var(--space-3); }
.filters__count { font-size: var(--fs-sm); color: var(--text-subtle); margin-left: auto; }
/* phones: each filter group is one row that scrolls sideways (it fades on the right while more chips wait),
   so three groups take three rows instead of eight. The inset keeps focus rings inside the scroller. */
@media (max-width: 640px) {
  .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: var(--space-1); margin: calc(var(--space-1) * -1); }
  .filters::-webkit-scrollbar { display: none; }
  .filters > * { flex: none; }
  .filters + .filters { margin-top: var(--space-2); }
  .filters__count { margin-left: var(--space-2); }
}
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--control-sm); padding: 0 calc(var(--u) * 2.5);
  background: var(--bg-surface); color: var(--text);
  border: max(1px, var(--bw)) solid var(--border-axis); border-radius: var(--radius-chip);
  font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; text-decoration: none;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur-fast) var(--ease-out);
}
button.chip:hover { border-color: var(--border-strong); }
.chip[aria-pressed="true"] { background: var(--bg-inverse); border-color: var(--bg-inverse); color: var(--text-inverse); }
.chip__count { font-family: var(--font-body); font-size: var(--fs-2xs); color: var(--text-subtle); }
.chip__count { transition: color var(--dur) var(--ease); }
.chip[aria-pressed="true"] .chip__count { color: color-mix(in oklab, var(--text-inverse) 72%, var(--bg-inverse)); }
.chip--removable { padding-right: var(--space-1); }
.chip__remove {
  display: inline-grid; place-items: center; width: calc(var(--control-sm) - 8px); height: calc(var(--control-sm) - 8px); padding: 0;
  border: 0; border-radius: var(--radius-chip); background: transparent; color: var(--text-secondary);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur-fast) var(--ease-out);
}
.chip__remove:hover { background: var(--bg-well); color: var(--text); }
.chip__remove .icon { width: 14px; height: 14px; }
.chip--add { border-style: dashed; color: var(--text-secondary); background: transparent; }
.chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  min-height: var(--control-md); padding: var(--space-2);
  background: var(--bg-surface); border: max(1px, var(--bw)) solid var(--border-input); border-radius: var(--radius-control);
}
.chips { transition: border-color var(--dur) var(--ease); }
.chips:hover { border-color: var(--border-strong); }
.chips:focus-within { border-color: var(--text); }
.chips__input { flex: 1; min-width: 9rem; min-height: calc(var(--control-sm) - 4px); border: 0; background: transparent; font-size: var(--fs-sm); padding: 0 var(--space-1); transition: color var(--dur) var(--ease); }
.chips__input:focus-visible { outline: none; }

/* ---- Stepper ------------------------------------------------------------ */
.stepper__steps { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-2); margin-bottom: var(--space-10); }
.stepper__step { display: grid; gap: var(--space-2); align-content: start; font-size: var(--fs-sm); color: var(--text-subtle); }
.stepper__step { transition: color var(--dur) var(--ease); }
.stepper__step::before { content: ""; height: 4px; background: var(--bg-well); transition: background-color var(--dur) var(--ease); }
.stepper__num { font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: 500; }
.stepper__label { font-weight: 600; }
.stepper__step[aria-current="step"] { color: var(--text); }
.stepper__step[aria-current="step"]::before { background: var(--text); }
.stepper__step--done { color: var(--text-secondary); }
.stepper__step--done::before { background: var(--border-strong); }
.stepper__panel { display: grid; gap: var(--space-6); }
.stepper__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-8); padding-top: var(--space-6); border-top: var(--bw) solid var(--border-hairline); }
@media (max-width: 640px) { .stepper__label { display: none; } }

/* ---- Pagination-lite ---------------------------------------------------- */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); font-size: var(--fs-sm); color: var(--text-secondary); }
.pager__status { font-variant-numeric: tabular-nums; }
.pager__buttons { display: flex; gap: var(--space-2); }

/* ---- Status, confidence, tags, badges ----------------------------------- */
.status, .confidence, .fact-status, .source-status, .bot-status {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; color: var(--text-secondary);
}
.status .icon, .confidence .icon, .fact-status .icon, .source-status .icon, .bot-status .icon { width: 1.15em; height: 1.15em; }
.status, .confidence, .fact-status, .source-status, .bot-status { transition: color var(--dur) var(--ease); }
.status--positive, .fact-status--correct, .source-status--on, .bot-status--ok { color: var(--status-positive); }
.status--warning, .fact-status--missing, .source-status--competitor, .bot-status--error { color: var(--status-warning); }
.status--negative, .status--critical, .fact-status--wrong, .source-status--missing, .bot-status--blocked { color: var(--status-negative); }
.status--neutral, .fact-status--none, .source-status--theirs { color: var(--text-subtle); font-weight: 500; }
.confidence { font-weight: 500; }
.confidence--up { color: var(--status-positive); }
.confidence--down { color: var(--status-warning); }
.confidence--unclear { color: var(--text-secondary); }

.tag {
  display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
  min-height: calc(22px * var(--density)); padding: 2px var(--space-2);
  background: var(--bg-track); color: var(--text-secondary);
  border-radius: var(--radius-chip);
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.tag .icon { width: 12px; height: 12px; }
.tag, .badge { transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.tag--recommended { background: var(--accent-band); color: var(--text); }
.tag--recommended::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--accent); box-shadow: inset 0 0 0 var(--bw) var(--accent-edge); border-radius: var(--radius-cell); }
.tag--example {
  background: transparent; border: max(1px, var(--bw)) dashed var(--border-input); color: var(--text-secondary);
  font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: 500;
}
.tag--locked { background: transparent; box-shadow: inset 0 0 0 max(1px, var(--bw)) var(--border-axis); }
.tag--new { background: var(--bg-inverse); color: var(--text-inverse); }
.tag--outline { background: transparent; box-shadow: inset 0 0 0 max(1px, var(--bw)) var(--border-axis); }

.badge {
  display: inline-grid; place-items: center; min-width: calc(20px * var(--density)); height: calc(20px * var(--density)); padding: 0 5px;
  border-radius: var(--radius-chip); background: var(--bg-track); color: var(--text);
  font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1;
}
.nav__item[aria-current="page"] .badge { background: var(--bg-surface); }
.badge--strong { background: var(--bg-inverse); color: var(--text-inverse); }

/* ---- Banners, alerts, toasts -------------------------------------------- */
.banner {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-control);
  background: var(--bg-well); color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.5;
}
.banner > .icon { margin-top: 1px; width: 18px; height: 18px; }
.banner__body { flex: 1; min-width: 0; }
.banner[data-simulated-notice] { align-items: center; gap: var(--space-2); padding: 0; background: none; color: var(--text-subtle); font-size: var(--fs-xs); }
.banner[data-simulated-notice] > .icon { width: 14px; height: 14px; margin: 0; }
.banner__title { color: var(--text); font-weight: 600; }
.banner__actions { display: flex; gap: var(--space-2); flex: none; }
/* a banner with actions is its own container: when it is narrow (a phone, a side panel) the actions move
   under the text, lined up with it, instead of squeezing the text into a narrow column */
.banner:has(> .banner__actions) { container: banner / inline-size; }
@container banner (max-width: 480px) {
  .banner__body { flex: 1 1 0; }
  .banner__actions { flex: 1 1 100%; flex-wrap: wrap; }
  .banner > .icon ~ .banner__actions { padding-left: calc(18px + var(--space-3)); }
  .banner__actions > .btn--ghost:first-child:not(.btn--icon) { margin-inline-start: calc((var(--btn-pad) + var(--bw)) * -1); }
}
.banner:has(> .banner__actions) { flex-wrap: wrap; }
.banner:has(> .banner__actions) > .banner__body { flex: 1 1 0; }

.alert {
  --tone: var(--text-secondary);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--space-1) var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: color-mix(in oklab, var(--tone) 7%, var(--bg-surface));
  border: var(--bw) solid color-mix(in oklab, var(--tone) 32%, var(--bg-surface));
  border-radius: var(--radius-card);
}
.alert > .icon { grid-row: 1 / span 3; color: var(--tone); width: 20px; height: 20px; margin-top: 1px; }
.alert__label { font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: 600; color: var(--tone); }
.alert__title { font-weight: 500; color: var(--text); }
.alert:not(:has(> .alert__body)) { align-items: center; padding-block: var(--space-3); }
.alert:not(:has(> .alert__body)) > .icon { margin-top: 0; }
.alert__body { font-size: var(--fs-sm); color: var(--text-secondary); }
.alert > :not(.icon):not(.alert__actions) { grid-column: 2; }
.alert__actions { grid-column: 3; grid-row: 1 / span 3; align-self: center; display: flex; gap: var(--space-2); }
.alert--critical { --tone: var(--status-negative); }
.alert--warning { --tone: var(--status-warning); }
.alert--positive { --tone: var(--status-positive); }
@media (max-width: 640px) { .alert { grid-template-columns: auto minmax(0, 1fr); } .alert__actions { grid-column: 2; grid-row: auto; margin-top: var(--space-2); } }

.toasts { position: fixed; right: var(--space-4); bottom: var(--space-16); z-index: 120; display: grid; gap: var(--space-2); justify-items: end; pointer-events: none; }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: var(--space-3);
  max-width: min(420px, calc(100vw - 32px)); padding: var(--space-3) var(--space-4);
  background: var(--bg-inverse); color: var(--text-inverse);
  border-radius: var(--radius-control); box-shadow: var(--shadow-pop);
  font-size: var(--fs-sm); font-weight: 500;
  animation: sb-fade-up var(--dur-base) var(--ease-out);
}
.toast .icon { width: 18px; height: 18px; }
.toast__action { margin-left: var(--space-2); padding: 0; border: 0; background: none; color: inherit; font-weight: 600; text-decoration: underline;
  text-decoration-color: color-mix(in oklab, currentColor 50%, transparent); text-underline-offset: 0.2em;
  transition: text-decoration-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.toast__action:hover, .toast__action:focus-visible { text-decoration-color: currentColor; }
/* leaving: it pops out, then its row closes so the toasts below slide up instead of jumping (app.js removes it after) */
.toast--leaving { overflow: hidden; pointer-events: none; animation: sb-pop-out var(--dur-fast) var(--ease-in-out) forwards, sb-collapse var(--dur-base) var(--ease-out) var(--dur-fast) forwards; }

/* ---- Empty state, loader, progress -------------------------------------- */
.empty {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; justify-items: center; gap: var(--space-3); text-align: center;
  padding: var(--space-12) var(--space-6);
  border: max(1px, var(--bw)) dashed var(--border-axis); border-radius: var(--radius-card);
}
.empty::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: repeating-conic-gradient(var(--checker) 0 25%, transparent 0 50%) 0 0 / 128px 128px;
}
.empty__title { font-size: var(--fs-xl); font-weight: 600; }
.empty__text { color: var(--text-secondary); max-width: 34em; }
.empty__caption { font-family: var(--font-body); font-size: var(--fs-2xs); color: var(--text-subtle); font-weight: 500; }
.empty__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-2); }

.loader { display: inline-flex; align-items: center; gap: var(--space-4); }
.loader__mark { --cell: 8px; display: grid; grid-template-columns: repeat(4, var(--cell)); grid-auto-rows: var(--cell); flex: none; }
.loader__cell { display: block; }
.loader__cell--on { background: var(--logo); animation: sb-light-up calc(1200ms * var(--motion)) steps(1, end) infinite; animation-delay: calc(var(--n, 0) * 120ms * var(--motion)); }
.loader__text { font-size: var(--fs-sm); color: var(--text-secondary); max-width: 34em; }
/* inline loader (beautifului.dev Loading State): a 3x3 grid of 4px pixels, each lighting up on its own beat */
.loader--pixel { gap: 10px; }
.loader--pixel .loader__text { font-weight: 500; }
.loader--pixel .elapsed { font-size: var(--fs-xs); }
.pixels { display: grid; grid-template-columns: repeat(3, 4px); grid-auto-rows: 4px; gap: 1.5px; flex: none; }
.pixels > i { display: block; background: var(--text); border-radius: 1px; opacity: 0.15; }
.pixels > i:nth-child(odd) { opacity: 0.9; }
:root[data-motion="on"] .pixels > i { opacity: 0.15; animation: sb-pixel-on calc(650ms * var(--motion)) ease-in-out infinite; animation-delay: calc(var(--d, 0) * 90ms * var(--motion)); }
@keyframes sb-pixel-on { 0%, 100% { opacity: 0.15; } 18%, 42% { opacity: 1; } 62% { opacity: 0.15; } }
.loader--lg .loader__mark { --cell: 16px; }
.loader--block { display: flex; flex-direction: column; text-align: center; gap: var(--space-5); padding: var(--space-12) var(--space-6); }
.loader--block .loader__text { font-size: var(--fs-md); }
@keyframes sb-light-up { 0% { background: var(--accent); } 10%, 100% { background: var(--logo); } }

.progress { position: relative; height: 8px; background: var(--bg-track); box-shadow: inset 0 0 0 var(--bw) var(--border-track); overflow: hidden; border-radius: var(--radius-cell); }
.progress::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(clamp(0, var(--pct, 0), 100) * 1%); background: var(--border-strong); transition: width var(--dur-base) var(--ease-out); }
.progress--seen::before { background: var(--accent); box-shadow: inset 0 0 0 var(--bw) var(--accent-edge); }
/* none: nothing to count (no AI Overview shown); hatched like the grid's --none cell */
.progress--none { background: repeating-linear-gradient(45deg, var(--border-axis) 0 1.5px, transparent 1.5px 5px), var(--bg-surface); box-shadow: inset 0 0 0 var(--bw) var(--border-axis); }
.progress--none::before { content: none; }
.progress__meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-2); font-size: var(--fs-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.progress__meta > :last-child { white-space: nowrap; color: var(--text); font-weight: 600; }

/* ---- Metric tile -------------------------------------------------------- */
.metric { display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.metric__label { font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: 500; color: var(--text-secondary); }
.metric__value {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: var(--fs-kpi); line-height: 1; font-variant-numeric: tabular-nums;
}
.metric__unit { font-size: 0.5em; font-weight: 600; color: var(--text-secondary); margin-left: 2px; }
.metric__note { font-size: var(--fs-sm); color: var(--text-secondary); }
.metric__source { font-size: var(--fs-xs); color: var(--text-subtle); }
.metric--sm .metric__value { font-size: var(--fs-2xl); }
.metrics { --metric-min: 160px; --metrics-gap: var(--space-6); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--metric-min)), 1fr)); gap: var(--space-6) var(--metrics-gap); }
.metrics:has(> .metric--sm) { --metric-min: 112px; }
/* three tiles: all three in a row, or one per row; never two plus an orphan */
.metrics:has(> .metric:nth-child(3):last-child) {
  grid-template-columns: repeat(auto-fit, minmax(clamp(calc(100% / 3 - var(--metrics-gap)), (var(--metric-min) * 3 + var(--metrics-gap) * 2 - 100%) * 999, 100%), 1fr));
}
/* divided: hairline between tiles; the first tile of every wrapped row loses its line (clip-path hides the leftmost edge) */
.metrics--divided { --metrics-gap: 0px; row-gap: var(--space-6); margin-left: calc((var(--space-6) + var(--bw)) * -1); clip-path: inset(0 0 0 var(--bw)); }
.metrics--divided > .metric { padding-left: var(--space-6); border-left: var(--bw) solid var(--border-hairline); }

/* ---- Score (score square + number + label) ------------------------------ */
.score { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); min-width: 0; }
.score__square { --sq: 10px; --sq-gap: 2px; display: grid; grid-template-columns: repeat(4, var(--sq)); grid-auto-rows: var(--sq); gap: var(--sq-gap); flex: none; }
.score__square--sm { --sq: 6px; --sq-gap: 1px; }
.score__square--lg { --sq: 16px; --sq-gap: 3px; }
.score__square--xl { --sq: 24px; --sq-gap: 4px; }
.score__cell { background: var(--bg-track); box-shadow: inset 0 0 0 var(--bw) var(--border-track); border-radius: var(--radius-cell); }
.score__cell--on { background: var(--accent); box-shadow: inset 0 0 0 var(--bw) var(--accent-edge); }
.score__figure { display: grid; gap: var(--space-1); min-width: 0; flex: 1 1 8em; }
.score__num {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: var(--fs-kpi); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.score__unit { font-size: 0.5em; font-weight: 600; color: var(--text-secondary); margin-left: 2px; }
.score__label { font-size: var(--fs-sm); color: var(--text-secondary); }
.score__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.score__meta--stack { flex-direction: column; align-items: flex-start; }   /* label and confidence on their own lines: score pairs side by side read alike */
.score--sm { gap: var(--space-3); }
.score--sm .score__num { font-size: var(--fs-xl); }
.score--lg .score__num { font-size: var(--fs-4xl); }

/* ---- Tally (k of n squares: one square per question or answer) ---------- */
.tally { --tally: calc(16px * var(--density)); --tally-gap: max(2px, calc(var(--tally) * 0.1875)); display: inline-flex; flex-wrap: wrap; gap: var(--tally-gap); vertical-align: middle; max-width: 100%; }
/* rows of 10: 30 answers read as 3 even rows (falls back to the available width when that is narrower) */
.tally--rows-10 { max-width: min(100%, calc(var(--tally) * 10 + var(--tally-gap) * 9)); }
.tally__cell { display: block; flex: none; width: var(--tally); height: var(--tally); background: var(--bg-track); box-shadow: inset 0 0 0 var(--bw) var(--border-track); border-radius: var(--radius-cell); }
.tally__cell--on { background: var(--accent); box-shadow: inset 0 0 0 var(--bw) var(--accent-edge); }
.tally--sm { --tally: calc(10px * var(--density)); }

/* ---- Engine label ------------------------------------------------------- */
.engine { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 500; color: var(--text); white-space: nowrap; }
.engine::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--series, var(--text-subtle)); border-radius: var(--radius-cell); }
.engine--chatgpt::before { width: 14px; height: 14px; border-radius: 0; -webkit-mask: url("/assets/engines/chatgpt.svg") center / contain no-repeat; mask: url("/assets/engines/chatgpt.svg") center / contain no-repeat; }
/* every AI shows its own mark, drawn in its series colour like ChatGPT's: Gemini's spark, Google's G for AI Overviews and
   AI Mode (both Google; the colour tells them apart) */
.engine--gemini::before, .engine--ai-overviews::before, .engine--ai-mode::before { width: 14px; height: 14px; border-radius: 0; }
.engine--gemini::before { -webkit-mask: url("/assets/engines/gemini.svg") center / contain no-repeat; mask: url("/assets/engines/gemini.svg") center / contain no-repeat; }
.engine--ai-overviews::before { -webkit-mask: url("/assets/engines/ai-overviews.svg") center / contain no-repeat; mask: url("/assets/engines/ai-overviews.svg") center / contain no-repeat; }
.engine--ai-mode::before { -webkit-mask: url("/assets/engines/ai-mode.svg") center / contain no-repeat; mask: url("/assets/engines/ai-mode.svg") center / contain no-repeat; }

/* ---- Visibility grid ---------------------------------------------------- */
.vgrid-wrap { overflow-x: auto; container: vgrid / inline-size; }
.vgrid { --vcell: calc(28px * var(--density)); width: auto; max-width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.vgrid--full { width: 100%; }
.vgrid--sm { --vcell: calc(16px * var(--density)); }
.vgrid--lg { --vcell: calc(36px * var(--density)); }
.vgrid th, .vgrid td { padding: 1px; }
.vgrid__qhead { text-align: left; vertical-align: bottom; padding: 0 var(--space-4) var(--space-3) 0 !important; font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: 500; color: var(--text-subtle); }
.vgrid__engine { width: calc(var(--vcell) + 2px); vertical-align: bottom; padding-bottom: var(--space-3) !important; }
.vgrid__engine > span {
  display: inline-flex; writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: 500;
  color: var(--text-secondary); white-space: nowrap; gap: 6px; align-items: center; margin: 0 auto;
}
.vgrid__engine > .engine::before { width: 6px; height: 6px; }
.vgrid__engine > :is(.engine--chatgpt, .engine--gemini, .engine--ai-overviews, .engine--ai-mode)::before { width: 14px; height: 14px; }
.vgrid__q { text-align: left; font-weight: 400; padding: 1px var(--space-4) 1px 0 !important; line-height: 1.35; min-width: 12rem; white-space: nowrap; }
.vgrid__q-text { color: var(--text); }
.vgrid__q-meta { display: inline-flex; gap: var(--space-1); margin-left: var(--space-2); vertical-align: middle; }
.vgrid--sm .vgrid__q { min-width: 0; font-size: var(--fs-xs); }
.vgrid__group > th { text-align: left; padding: var(--space-5) 0 var(--space-2) !important; font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: 500; color: var(--text-subtle); }
.vgrid tbody > .vgrid__group:first-child > th { padding-top: 0 !important; }
.vgrid__row[data-open], .vgrid__row[data-template] { cursor: pointer; }
.vgrid__row { transition: background-color var(--dur) var(--ease); }
.vgrid__row > th, .vgrid__row > td { transition: background-color var(--dur) var(--ease); }
.vgrid__q-text { transition: text-decoration-color var(--dur-fast) var(--ease-out); }
.vgrid__cell { transition: background-color var(--dur-fast) linear, color var(--dur-fast) linear, box-shadow var(--dur-fast) linear; }
.vgrid__cell::before, .vgrid__cell::after { transition: width var(--dur-fast) var(--ease-out), height var(--dur-fast) var(--ease-out); }
.vgrid__row:hover > .vgrid__q .vgrid__q-text { text-decoration: underline; text-decoration-color: var(--border-input); text-underline-offset: 0.2em; }
.vgrid__row:hover > th, .vgrid__row:hover > td { background: var(--bg-hover); }
.vgrid__row--selected > th, .vgrid__row--selected > td { background: var(--bg-hover); }
.vgrid__row--selected .vgrid__q-text { font-weight: 600; }
/* a full-width grid with room to spare (560px+) labels its engines horizontally, on up to two lines over wider
   columns, instead of the tall rotated band; narrow grids keep the rotation */
@container vgrid (min-width: 560px) {
  .vgrid--full .vgrid__engine { width: calc(var(--space-24) + var(--space-2)); }
  .vgrid--full .vgrid__engine > span { writing-mode: horizontal-tb; transform: none; white-space: normal; text-align: center; justify-content: center; align-items: baseline; max-width: var(--space-24); line-height: 1.3; }
  .vgrid--full .vgrid__engine > .engine::before { flex: none; }
}
/* phones: a narrower question column (and slightly smaller --lg cells) so all four engines fit at 390px */
@media (max-width: 640px) {
  .vgrid .vgrid__q { min-width: 9rem; }
  .vgrid--lg { --vcell: calc(30px * var(--density)); }
}

.vgrid__cell, .legend__swatch {
  position: relative; display: grid; place-items: center; flex: none;
  border-radius: var(--radius-cell);
}
.vgrid__cell {
  width: var(--vcell, 28px); height: var(--vcell, 28px);
  font-family: var(--font-body); font-size: calc(var(--base-size) * 0.6); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1;
}
.vgrid .vgrid__cell { margin: 0 auto; }
.vgrid--sm .vgrid__cell { font-size: 0; }
.legend__swatch { width: 14px; height: 14px; background: var(--series, var(--bg-well)); }

/* seen: heat level from --pct (0–100). 0–40 runs pale Lit → Lit, 40–100 runs Lit → deep Lit. */
.vgrid__cell--seen, .legend__swatch--seen {
  --p: clamp(0, var(--pct, 50), 100);
  --z1: clamp(0, (var(--p) - 19) * 100, 1);
  --z2: clamp(0, (var(--p) - 74) * 100, 1);
  --heat: color-mix(in oklab, var(--heat-hi) clamp(0%, (var(--p) - 40) * 1.6667%, 100%), color-mix(in oklab, var(--accent) clamp(0%, var(--p) * 2.5%, 100%), var(--heat-lo)));
  background: var(--heat);
  color: color-mix(in oklab, var(--heat-ink-hi) calc(var(--z2) * 100%), color-mix(in oklab, var(--heat-ink-mid) calc(var(--z1) * 100%), var(--heat-ink-lo)));
  box-shadow: inset 0 0 0 var(--bw) var(--accent-edge);
}
/* Modern browsers pick black or white numerals from the cell's own luminance (WCAG crossover 0.179),
   so cell numbers stay >= 4.5:1 whatever --accent is. Older browsers keep the three-step ink above. */
@supports (color: color(from red srgb-linear r g b)) {
  .vgrid__cell--seen {
    color: color(from var(--heat) srgb-linear
      clamp(0, (0.179 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 1000, 1)
      clamp(0, (0.179 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 1000, 1)
      clamp(0, (0.179 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 1000, 1));
  }
}
/* open: not yet named; shows an en dash */
.vgrid__cell--open, .legend__swatch--open { background: var(--bg-track); box-shadow: inset 0 0 0 var(--bw) var(--border-track); color: var(--text-subtle); }
.vgrid__cell--open:empty::after { content: "\2013"; font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 400; }
.legend__swatch--open::after { content: "\2013"; font-size: var(--fs-2xs); line-height: 1; color: var(--text-subtle); }
/* someone else picked: open square with a corner square in the rival's series colour (set .series-N) */
.vgrid__cell--other, .legend__swatch--other { background: var(--bg-track); box-shadow: inset 0 0 0 var(--bw) var(--border-track); }
.vgrid__cell--other::before, .legend__swatch--other::before {
  content: ""; position: absolute; top: 0; right: 0; width: 42%; height: 42%; min-width: 5px; min-height: 5px;
  background: var(--series, var(--chart-field)); border-radius: 0 var(--radius-cell) 0 0;
}
/* none: no AI Overview was shown for this question */
.vgrid__cell--none, .legend__swatch--none {
  background: repeating-linear-gradient(45deg, var(--border-axis) 0 1.5px, transparent 1.5px 5px), var(--bg-surface);
  box-shadow: inset 0 0 0 var(--bw) var(--border-axis);
  color: transparent;
}
/* "Who's picked instead" view: data-view="picks" on the table or any wrapper */
[data-view="picks"] .vgrid__cell--seen, [data-view="picks"] .legend__swatch--seen { background: var(--bg-track); color: transparent; box-shadow: inset 0 0 0 var(--bw) var(--border-track); }
[data-view="picks"] .vgrid__cell--seen::after, [data-view="picks"] .legend__swatch--seen::after { content: ""; position: absolute; width: 30%; height: 30%; min-width: 4px; min-height: 4px; background: var(--accent); box-shadow: inset 0 0 0 var(--bw) var(--accent-edge); }
[data-view="picks"] .vgrid__cell--other::before { width: 100%; height: 100%; border-radius: var(--radius-cell); }

.legend { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); font-size: var(--fs-sm); color: var(--text-secondary); }
.legend__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.legend__swatch--line { width: 16px; height: 3px; border-radius: 0; }
.legend__swatch--dashed { width: 16px; height: 3px; border-radius: 0; background: repeating-linear-gradient(90deg, var(--series, var(--chart-field)) 0 4px, transparent 4px 7px); }
.legend__swatch--you { background: var(--chart-you); }

/* ---- Leaderboard -------------------------------------------------------- */
.leaderboard { --max: 100; list-style: none; display: grid; gap: 2px; }
.leaderboard__row {
  display: grid; grid-template-columns: 1.5em minmax(0, 14em) minmax(4em, 1fr) 3.5em; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); font-size: var(--fs-sm);
}
.leaderboard__rank { font-family: var(--font-body); font-size: var(--fs-2xs); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.leaderboard__name { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-weight: 500; }
.leaderboard__name::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--series, var(--chart-field)); border-radius: var(--radius-cell); }
.leaderboard__label { min-width: 0; overflow-wrap: anywhere; } /* long names wrap instead of being cut off */
.leaderboard__bar { position: relative; height: 10px; background: var(--bg-track); box-shadow: inset 0 0 0 var(--bw) var(--border-track); }
.leaderboard__bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--pct, 0) / var(--max) * 100%); background: var(--chart-field); border-radius: 0 var(--radius-chip) var(--radius-chip) 0; transition: width var(--dur-base) var(--ease-out); }
.leaderboard__value { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.leaderboard__row--you { background: var(--bg-well); }
.leaderboard__row--you .leaderboard__name { font-weight: 700; }
.leaderboard__row--you .leaderboard__name::before { background: var(--accent); box-shadow: inset 0 0 0 var(--bw) var(--accent-edge); }
.leaderboard__row--you .leaderboard__bar::before { background: var(--chart-you); }
.leaderboard--color .leaderboard__bar::before { background: var(--series, var(--chart-field)); }
@media (max-width: 640px) {
  .leaderboard__row { grid-template-columns: 1.25em minmax(0, 1fr) auto; row-gap: var(--space-1); }
  .leaderboard__value { grid-row: 1; grid-column: 3; }
  .leaderboard__bar { grid-row: 2; grid-column: 2 / -1; }
}

/* ---- Bar list ----------------------------------------------------------- */
.bars { --max: 100; list-style: none; display: grid; gap: var(--space-3); }
.bars__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); font-size: var(--fs-sm); }
.bars__label { min-width: 0; overflow-wrap: anywhere; }
.bars__value { color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bars__track { grid-column: 1 / -1; position: relative; height: 8px; background: var(--bg-track); box-shadow: inset 0 0 0 var(--bw) var(--border-track); }
.bars__track::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--pct, 0) / var(--max) * 100%); background: var(--series, var(--border-strong)); border-radius: 0 var(--radius-chip) var(--radius-chip) 0; transition: width var(--dur-base) var(--ease-out); }
.bars__item--you .bars__label { font-weight: 700; }
.bars__item--you .bars__track::before { background: var(--chart-you); }
.bars__item--other .bars__track::before { background: repeating-linear-gradient(45deg, var(--chart-field) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--chart-field); }

/* ---- Line chart (app.js draws the SVG from figure[data-chart="line"]) --- */
.chart { --chart-h: calc(280px * var(--density)); display: grid; gap: var(--space-4); min-width: 0; }
.chart__title { font-weight: 600; }
.chart__sub { font-size: var(--fs-sm); color: var(--text-secondary); font-weight: 400; }
.chart__canvas { position: relative; height: var(--chart-h); min-width: 0; font-size: var(--fs-xs); }
.chart--sm { --chart-h: calc(200px * var(--density)); }
.chart--lg { --chart-h: calc(360px * var(--density)); }
.chart__svg { display: block; width: 100%; height: 100%; overflow: visible; font-family: var(--font-body); }
.chart__grid { stroke: var(--border-hairline); stroke-width: var(--bw); }
.chart__axis { stroke: var(--border-axis); stroke-width: var(--bw); }
.chart__tick { fill: var(--text-subtle); font-size: var(--fs-xs); font-weight: 500; font-variant-numeric: tabular-nums; }
.chart__tick--y { text-anchor: end; }
.chart__tick--x { text-anchor: middle; }
.chart__line { fill: none; stroke: var(--series, var(--chart-field)); stroke-width: 2; stroke-linejoin: miter; stroke-linecap: square; }
.chart__line--you { stroke: var(--chart-you); stroke-width: 2.5; }
.chart__line--other { stroke: var(--chart-field); stroke-dasharray: 4 4; stroke-linecap: butt; }
.chart__dot { fill: var(--series, var(--chart-field)); stroke: var(--bg-surface); stroke-width: 2; paint-order: stroke; }
.chart__dot--you { fill: var(--chart-you); }
.chart__label { fill: var(--text-secondary); font-size: var(--fs-xs); font-weight: 500; font-variant-numeric: tabular-nums; }
.chart__label--you { fill: var(--text); font-weight: 700; }
.chart__label-value { fill: var(--text-subtle); font-weight: 500; }
.chart__label--you .chart__label-value { fill: var(--text-secondary); font-weight: 600; }
.chart__marker { stroke: var(--text-subtle); stroke-width: 1; stroke-dasharray: 2 3; }
.chart__marker-dot { fill: var(--text); }
.chart__marker-label { fill: var(--text-secondary); font-size: var(--fs-xs); font-weight: 600; }
.chart__legend { font-size: var(--fs-xs); }
.chart__table { font-size: var(--fs-sm); }
.chart__table > summary { cursor: pointer; color: var(--text-secondary); font-weight: 600; width: max-content; text-decoration: underline; text-decoration-color: var(--border-input); text-underline-offset: 0.2em; }
.chart__table > summary:hover { color: var(--text); text-decoration-color: currentColor; }
.chart__table[open] > summary { margin-bottom: var(--space-3); }

/* ---- Insights: progress board, sparkline, insight card, benchmark range (docs/INSIGHTS.md 7.2) ----
   The board is a stacked table (.table--stack) in a flush card: square rows, full hairlines. An insight is a .card
   (even border all round) with one sentence; a critical one is a full tinted fill, never an edge stripe. The range
   is a square track with no border: a band for the middle half, a median tick and an 8px "You" square, positioned
   from --lo, --hi, --median and --you (0–100), set as data properties by the view. */
.board th[scope="row"] { font-weight: 500; }
.board td, .board th { vertical-align: middle; }
.board td:last-child { width: 1%; }
.spark { display: block; width: 120px; height: 24px; overflow: visible; }
.spark__line { fill: none; stroke: var(--text-secondary); stroke-width: 1.5; stroke-linejoin: miter; stroke-linecap: square; vector-effect: non-scaling-stroke; }
.spark__now { fill: var(--text); }
@media (max-width: 640px) {
  .board.table--stack tr { row-gap: var(--space-2); align-items: baseline; }
  .board.table--stack tr > th[scope="row"] { grid-column: 1; }
  .board.table--stack tr > td:nth-child(2) { grid-column: 2; justify-self: end; text-align: right !important; }
  .board.table--stack td[data-label]::before { content: none; }
  .board.table--stack [data-empty] { display: none; }
  .board.table--stack td:last-child { grid-column: 1 / -1; width: auto; }
  .board.table--stack .spark { width: 160px; height: 38px; }
}

.insight { display: grid; gap: var(--space-3); }
.insight__text { margin: 0; font-size: var(--fs-md); font-weight: 500; line-height: 1.45; color: var(--text); max-width: 46em; }
.insight__foot { min-width: 0; }
.insight__foot > form { display: contents; }
.insight__foot > form > .btn { margin-inline-start: auto; }
.insight__foot > .hint[open] { flex-basis: 100%; order: 9; }
.insight--critical {
  background: color-mix(in oklab, var(--status-negative) var(--tint-strength), var(--bg-surface));
  border-color: color-mix(in oklab, var(--status-negative) 28%, var(--bg-surface));
}
.insight--critical .insight__text { font-weight: 600; }

.range { display: grid; grid-template-columns: minmax(8rem, 20rem) auto; align-items: center; gap: var(--space-2) var(--space-4); min-width: 0; }
.range__track { position: relative; display: block; height: 10px; background: var(--bg-track); box-shadow: inset 0 0 0 var(--bw) var(--border-track); }
.range__band { position: absolute; top: 0; bottom: 0; left: calc(var(--lo, 0) * 1%); width: calc((var(--hi, 0) - var(--lo, 0)) * 1%); background: var(--chart-field); opacity: 0.45; }
.range__median { position: absolute; top: -3px; bottom: -3px; left: calc(var(--median, 0) * 1% - 1px); width: 2px; background: var(--text-secondary); }
.range__you { position: absolute; top: 1px; left: clamp(0px, calc(var(--you, 0) * 1% - 4px), calc(100% - 8px)); width: 8px; height: 8px; background: var(--accent); box-shadow: inset 0 0 0 var(--bw) var(--accent-edge); border-radius: var(--radius-cell); }
.range__text { font-size: var(--fs-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .range { grid-template-columns: minmax(0, 1fr); } }

/* the insights layer switch (Progress · Your category · Metrics): segmented links, the current page selected */
a.segmented__btn { text-decoration: none; }
.segmented__btn[aria-current="page"] {
  background: var(--bg-surface); color: var(--text);
  box-shadow: 0 0 0 var(--bw) var(--border-hairline), 0 1px 2px color-mix(in oklab, var(--shadow-ink) 8%, transparent);
}
.segmented.has-glide > .segmented__btn[aria-current="page"] { background: transparent; box-shadow: none; }

/* ---- Tables ------------------------------------------------------------- */
.table-wrap { overflow-x: auto; background: var(--bg-surface); border: var(--bw) solid var(--card-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.card .table-wrap { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.45; }
.table > caption { caption-side: top; text-align: left; padding: var(--space-4) var(--space-4) var(--space-3); font-weight: 600; font-size: var(--fs-md); }
.table th, .table td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top; border-bottom: var(--bw) solid var(--border-hairline); }
.table thead th { background: var(--bg-well); color: var(--text-secondary); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; vertical-align: bottom; border-bottom-color: var(--border-axis); }
.table tbody th { font-weight: 600; }
.table thead .engine { font-size: inherit; }
.table tbody tr:last-child > * { border-bottom: 0; }
.table--compact th, .table--compact td { padding: var(--space-2) var(--space-3); }
.table--fixed { table-layout: fixed; }
.table__num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table__center { text-align: center !important; }
.table__sub { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--text-subtle); margin-top: 2px; }
.table__row--you > * { background: var(--bg-hover); font-weight: 600; }
.table__row--selected > * { background: var(--bg-hover); }
.table tr[data-open], .table tr[data-template] { cursor: pointer; transition: background-color var(--dur) var(--ease); }
.table tbody tr > * { transition: background-color var(--dur) var(--ease); }
.table tbody tr[data-open]:hover > *, .table tbody tr[data-template]:hover > * { background: var(--bg-hover); }
/* group row: a small label that splits a table into groups (services, source types) */
.table .table__group > th, .table .table__group > td {
  padding-top: var(--space-3); padding-bottom: var(--space-2);
  background: var(--bg-well); border-bottom-color: var(--border-axis);
  font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: 500;
 color: var(--text-subtle);
}
/* actions: a right-aligned cell of small buttons that never wraps (Swap, Edit) */
.table__actions { width: 1%; text-align: right !important; white-space: nowrap; }
.table__actions > .btn + .btn, .table__actions > .btn + a, .table__actions > a + .btn { margin-left: var(--space-2); }
/* filtered tables and lists: the last row still showing loses its hairline */
.table tbody tr:nth-last-child(1 of :not([hidden])) > * { border-bottom: 0; }

/* scrollers fade out on the right while there is more to scroll to (app.js sets data-overflow="end") */
[data-overflow~="end"] { -webkit-mask-image: linear-gradient(to right, black calc(100% - var(--space-10)), transparent); mask-image: linear-gradient(to right, black calc(100% - var(--space-10)), transparent); }

/* pin: the first column stays put while the table scrolls sideways on phones (on by default for comparison tables and bot matrices) */
@media (max-width: 640px) {
  .table--pin tbody th[scope="row"], .compare-table tbody th[scope="row"], .bot-matrix tbody th[scope="row"],
  .table--pin thead th:first-child, .compare-table thead th:first-child, .bot-matrix thead th:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--bg-surface); box-shadow: inset calc(var(--bw) * -1) 0 0 var(--border-hairline);
  }
  .table--pin thead th:first-child, .compare-table thead th:first-child, .bot-matrix thead th:first-child { background: var(--bg-well); }
  /* a pinned label column wraps to a fixed share of the phone so the values beside it stay in view */
  .table--pin tbody th[scope="row"], .table--pin thead th:first-child,
  .compare-table tbody th[scope="row"], .compare-table thead th:first-child { width: min(9rem, 28vw); min-width: min(9rem, 28vw); white-space: normal; }
  .table--pin .table__row--you > th[scope="row"], .compare-table .table__row--you > th[scope="row"] { background: var(--bg-hover); box-shadow: inset calc(var(--bw) * -1) 0 0 var(--border-hairline); }
}

/* stack: on phones each row becomes a small card; cells show their column name from data-label */
@media (max-width: 640px) {
  .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table--stack, .table--stack tbody { display: block; width: 100%; }
  .table--stack tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); padding: var(--space-4); border-bottom: var(--bw) solid var(--border-hairline); }
  .table--stack tbody tr:last-child { border-bottom: 0; }
  .table--stack tbody tr:nth-last-child(1 of :not([hidden])) { border-bottom: 0; }
  .table--stack th, .table--stack td { display: block; min-width: 0; padding: 0; border: 0; }
  .table--stack tr > :first-child, .table--stack .table__full { grid-column: 1 / -1; }
  .table--stack .table__num, .table--stack .table__center, .table--stack .table__actions { text-align: left !important; white-space: normal; width: auto; }
  .table--stack td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: 500; color: var(--text-subtle);
  }
  .table--stack .table__row--you { background: var(--bg-hover); box-shadow: inset 0 0 0 var(--bw) var(--border-hairline); }
  .table--stack .table__row--you > *, .table--stack .table__row--you > :first-child { background: transparent; box-shadow: none; }
  .table--stack .table__group { display: block; padding: 0; }
  .table--stack .table__group > th { display: block; padding: var(--space-3) var(--space-4) var(--space-2); }
  /* in a flush card the stacked rows keep the card's own text edge */
  .card--flush .table--stack :is(th, td):is(:first-child, :last-child) { padding-inline: 0; }
  .card--flush .table--stack tr:not(.table__group) { padding-inline: var(--card-pad); }
  .card--flush .table--stack .table__group > th { padding-inline: var(--card-pad); }
}

.dl { display: grid; grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr); gap: var(--space-3) var(--space-6); font-size: var(--fs-sm); }
.dl > dt { color: var(--text-secondary); font-weight: 500; }
.dl > dd { margin: 0; min-width: 0; overflow-wrap: break-word; }
.dl--stacked { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
.dl--stacked > dt { font-family: var(--font-body); font-size: var(--fs-2xs); color: var(--text-subtle); }
.dl--stacked > dd + dt { margin-top: var(--space-3); }
.dl--divided { column-gap: 0; }
.dl--divided > dt, .dl--divided > dd { padding-bottom: var(--space-3); border-bottom: var(--bw) solid var(--border-hairline); }
.dl--divided > dt { padding-right: var(--space-6); }
.dl--divided > :nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; }
@media (max-width: 640px) { .dl { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); } .dl > dd + dt { margin-top: var(--space-3); } .dl--divided > dt { border: 0; padding: 0; } }

/* ---- Answer excerpt, mentions, feed ------------------------------------- */
.answer { display: grid; align-content: start; gap: var(--space-3); padding: var(--space-5); background: var(--bg-surface); border: var(--bw) solid var(--card-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); min-width: 0; }
.answer--flat { padding: 0; border: 0; background: transparent; border-radius: 0; box-shadow: none; }
.answer__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-size: var(--fs-sm); color: var(--text-secondary); }
.answer__date, .answer__meta { font-family: var(--font-body); font-size: var(--fs-2xs); color: var(--text-subtle); }
.answer__question { font-weight: 600; }
.answer__text { padding-left: var(--space-4); border-left: 2px solid var(--border-axis); line-height: 1.65; color: var(--text); }
.answer__sources { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); font-family: var(--font-body); font-size: var(--fs-2xs); color: var(--text-subtle); }
.answer__sources-label { font-weight: 500; }
.answer__source { color: var(--text-secondary); }
.answer__note { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--bg-well); font-size: var(--fs-sm); color: var(--text-secondary); }
.answer__note > .icon { margin-top: 2px; }
.mention { background: transparent; color: inherit; padding: 0 1px; }
.mention--you { background: var(--accent-band); box-shadow: inset 0 -2px 0 var(--mention-line); font-weight: 600; padding: 0 2px; }
.mention--rival { box-shadow: inset 0 -2px 0 var(--series, var(--chart-field)); }

.feed { list-style: none; display: grid; }
.feed__item { padding: var(--space-5) 0; border-top: var(--bw) solid var(--border-hairline); }
.feed__item:first-child { padding-top: 0; border-top: 0; }
.feed__item:last-child { padding-bottom: 0; }

/* ---- Next-move list ----------------------------------------------------- */
.moves { list-style: none; display: grid; gap: var(--space-2); }
.move {
  position: relative; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: start; gap: var(--space-2) var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-surface); border: var(--bw) solid var(--card-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.move { transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.move::before { content: ""; width: 8px; height: 8px; margin-top: 0.42rem; box-shadow: inset 0 0 0 1.5px var(--border-strong); border-radius: var(--radius-cell); transition: background-color var(--dur) var(--ease-steps), box-shadow var(--dur) var(--ease-steps); }
.move__title { transition: color var(--dur) var(--ease); }
.move__body { display: grid; gap: var(--space-1); min-width: 0; }
.move__meta { font-size: var(--fs-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.move__num { color: var(--text); font-weight: 600; }
.move__title { font-size: var(--fs-md); font-weight: 600; line-height: 1.35; }
.move__why { font-size: var(--fs-sm); color: var(--text-secondary); }
.move__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-self: center; }
.move--next { background: var(--accent-tint); border-color: var(--accent-line); box-shadow: none; }
.move--next::before { background: var(--accent); box-shadow: inset 0 0 0 var(--bw) var(--accent-edge); }
.move--done::before { background: var(--border-strong); box-shadow: none; }
.move--done .move__title { color: var(--text-secondary); text-decoration: line-through; text-decoration-color: var(--border-input); }
.move--done.move--next { background: var(--bg-surface); border-color: var(--card-border); }
.move[data-open], .move[data-tab], .move[data-template] { cursor: pointer; }
.move[data-tab]:hover, .move[data-open]:hover { border-color: var(--border-strong); }
.move[aria-selected="true"], .move--selected { border-color: var(--text); box-shadow: inset 0 0 0 var(--bw) var(--text), var(--shadow-card); }
.moves--compact .move { padding: var(--space-3) var(--space-4); }
/* a detail panel marked done (app.js adds .is-done and a "Done" status to its header) */
.is-done .card__eyebrow, .is-done > .card__header .card__title { color: var(--text-secondary); }
@media (max-width: 640px) { .move { grid-template-columns: 8px minmax(0, 1fr); } .move__actions { grid-column: 2; } }

/* ---- Fact table, source list, comparison table, bot matrix -------------- */
.fact-table td, .fact-table th { vertical-align: middle; }
.fact-table__fact { font-weight: 600; }
.fact-table__yours { color: var(--text-secondary); }

.source-list { list-style: none; container: source-list / inline-size; }
.source {
  display: grid; grid-template-columns: minmax(0, 1fr) 11rem 9rem 9.5rem; align-items: center; gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4); border-bottom: var(--bw) solid var(--border-hairline); font-size: var(--fs-sm);
}
.source:last-child { border-bottom: 0; }
.source:nth-last-child(1 of :not([hidden])) { border-bottom: 0; }
.source--head { padding-block: var(--space-2); background: var(--bg-well); font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); border-bottom-color: var(--border-axis); }
.source__main { display: grid; gap: 2px; min-width: 0; }
.source__name { font-weight: 600; overflow-wrap: anywhere; }
.source__note { color: var(--text-secondary); }
.source__type { justify-self: start; }
.source__used { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.source__used b { color: var(--text); }
/* collapses by its own width, so a source list fits half-width cards and drawers too */
@container source-list (max-width: 600px) {
  .source { grid-template-columns: minmax(0, 1fr) auto; }
  .source__main { grid-column: 1 / -1; }
  .source__used { grid-column: 1; }
  .source--head { display: none; }
}

.compare-table td, .compare-table th { white-space: nowrap; }
.compare-table .table__sub { white-space: normal; }
.compare-table__you { background: var(--bg-hover); font-weight: 600; }
.table thead th.compare-table__you { background: var(--bg-well); color: var(--text); }
.compare-table__best { font-weight: 700; }
.compare-table__best::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; vertical-align: 0.15em; background: var(--text-secondary); border-radius: var(--radius-cell); }

.bot-matrix td, .bot-matrix th { vertical-align: middle; }
.bot-matrix__bot { display: grid; gap: 2px; }
.bot-matrix__name { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; }
.bot-matrix__engine { font-size: var(--fs-xs); font-weight: 400; color: var(--text-subtle); }
.bot-matrix__page { font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: 500; }
/* fit: on phones every page column fits at 390px; status cells show the icon only (the word stays for
   screen readers) and the legend under the table maps icon to word, so it is required with this modifier */
@media (max-width: 640px) {
  .bot-matrix--fit .bot-matrix__engine { display: none; }
  .bot-matrix--fit td .bot-status { font-size: 0; gap: 0; }
  .bot-matrix--fit td .bot-status .icon { width: 18px; height: 18px; }
  .bot-matrix--fit th, .bot-matrix--fit td { padding-left: var(--space-2); padding-right: var(--space-2); }
  .card--flush .bot-matrix--fit :is(th, td):is(:first-child, :last-child) { padding-inline: var(--space-2); }
}

/* ---- Email preview and SMS ---------------------------------------------- */
.email { max-width: 680px; background: var(--bg-surface); border: var(--bw) solid var(--card-border); border-radius: var(--radius-card); box-shadow: var(--shadow-pop); overflow: hidden; }
.email__meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-3); padding: var(--space-4) var(--space-6); background: var(--bg-well); font-size: var(--fs-sm); border-bottom: var(--bw) solid var(--border-hairline); }
.email--fluid { max-width: none; box-shadow: var(--shadow-card); }
.email__meta > dt { color: var(--text-subtle); }
.email__meta > dd { margin: 0; min-width: 0; overflow-wrap: break-word; }
.email__body { display: grid; gap: var(--space-6); padding: var(--space-8); }
.email__title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--fs-2xl); line-height: 1.15; }
.email__lines { list-style: none; display: grid; gap: var(--space-4); }
.email__lines > li { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: var(--space-3); line-height: 1.55; }
.email__lines > li::before { content: ""; width: 8px; height: 8px; margin-top: 0.5em; background: var(--border-strong); border-radius: var(--radius-cell); }
.email__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.email__footer { padding: var(--space-4) var(--space-8); border-top: var(--bw) solid var(--border-hairline); font-size: var(--fs-xs); color: var(--text-subtle); }
@media (max-width: 640px) { .email__body { padding: var(--space-5); } .email__footer { padding: var(--space-4) var(--space-5); } .email__meta { padding: var(--space-3) var(--space-5); } }

.sms { display: grid; gap: var(--space-2); max-width: 22rem; }
.sms__meta { font-family: var(--font-body); font-size: var(--fs-2xs); color: var(--text-subtle); }
.dl--stacked > dd > .sms:first-child .sms__meta { font-family: var(--font-body); font-size: var(--fs-xs); }
.sms__bubble { padding: var(--space-3) var(--space-4); background: var(--bg-well); border-radius: var(--radius-modal) var(--radius-modal) var(--radius-modal) var(--radius-chip); font-size: var(--fs-sm); line-height: 1.5; }

/* ---- Pricing ------------------------------------------------------------ */
.pricing { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
.tier { position: relative; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--bg-surface); border: var(--bw) solid var(--card-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.tier--featured { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text), var(--shadow-card); }
.tier__badge { position: absolute; top: calc(var(--space-3) * -1); left: var(--space-6); }
.tier__name { font-family: var(--font-display); font-weight: var(--display-weight-2); font-size: var(--fs-xl); }
.tier__for { font-size: var(--fs-sm); color: var(--text-secondary); min-height: 2.9em; }
.tier__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1); }
.tier__amount { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--fs-kpi); line-height: 1; font-variant-numeric: tabular-nums; }
.tier__per { font-size: var(--fs-sm); color: var(--text-secondary); }
.tier__annual { font-size: var(--fs-xs); color: var(--text-subtle); }
.tier__list { list-style: none; display: grid; gap: var(--space-2); font-size: var(--fs-sm); padding-top: var(--space-4); border-top: var(--bw) solid var(--border-hairline); }
.tier__list > li { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: var(--space-3); }
.tier__list > li::before { content: ""; width: 8px; height: 8px; margin-top: 0.45em; background: var(--border-strong); border-radius: var(--radius-cell); }
.tier__cta { margin-top: auto; }
.tier { transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
@media (max-width: 1100px) { .pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-8); } }
@media (max-width: 640px) { .pricing { grid-template-columns: minmax(0, 1fr); } }

/* ---- FAQ ---------------------------------------------------------------- */
.faq { border-top: var(--bw) solid var(--border-hairline); }
.faq__item { border-bottom: var(--bw) solid var(--border-hairline); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) 0; cursor: pointer; list-style: none; font-size: var(--fs-lg); font-weight: 600;
  text-decoration-line: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; text-decoration-thickness: max(1px, var(--bw)); }
.faq__q:hover, .faq__q:focus-visible { text-decoration-color: var(--border-input); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.faq__item[open] > .faq__q::after { transform: translateY(2px) rotate(-135deg); }
.faq__a { padding: 0 0 var(--space-5); color: var(--text-secondary); max-width: 42em; }

/* ---- Steps ("how it works") --------------------------------------------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--space-8); }
.step { display: grid; gap: var(--space-3); align-content: start; padding-top: var(--space-5); border-top: 2px solid var(--text); }
.step__num { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); }
.step__title { font-family: var(--font-display); font-weight: var(--display-weight-2); font-size: var(--fs-xl); line-height: 1.2; }
.step__text { color: var(--text-secondary); }
.step__visual { margin-top: var(--space-3); }
/* the visual takes the rest of the step's height and its card fills it, so step visuals in a row end on one line */
.steps > .step { grid-template-rows: auto auto auto 1fr; }
.step__visual { align-self: stretch; display: grid; }
@media (max-width: 860px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* ---- Drawer and modal (<dialog>) ---------------------------------------- */
.drawer, .modal { padding: 0; border: 0; background: var(--bg-raised); color: var(--text); box-shadow: var(--shadow-pop); }
.drawer::backdrop, .modal::backdrop { background: var(--scrim); }
.drawer {
  position: fixed; inset: 0 0 0 auto; margin: 0; width: min(560px, 100vw); height: 100dvh; max-height: none; max-width: 100vw;
  border-left: var(--bw) solid var(--border-hairline);
}
.drawer[open] { display: flex; flex-direction: column; animation: sb-slide-in var(--dur-base) var(--ease-out); }
.modal { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 64px); border-radius: var(--radius-modal); }
.modal[open] { display: flex; flex-direction: column; animation: sb-pop-in var(--dur-fast) var(--ease-out); }
.drawer[open]::backdrop, .modal[open]::backdrop { animation: sb-fade-in var(--dur-base, 240ms) linear; }
/* swap-modal pattern (dialog > form > header/body/footer): the form steps out of the layout so the body scrolls
   between a fixed header and footer, and the submit button never drops below the fold */
.modal > form, .drawer > form { display: contents; }
.dialog__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-bottom: var(--bw) solid var(--border-hairline); }
.dialog__heading { display: grid; gap: var(--space-1); min-width: 0; }
.dialog__eyebrow { font-family: var(--font-body); font-size: var(--fs-2xs); color: var(--text-secondary); font-weight: 500; }
.dialog__title { font-family: var(--font-display); font-weight: var(--display-weight-2); font-size: var(--fs-xl); line-height: 1.2; }
.dialog__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; gap: var(--space-6); align-content: start; padding: var(--space-6); }
.dialog__footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-top: var(--bw) solid var(--border-hairline); }

/* sheet: the Share dialog (docs/SHARING.md 4.5). A centred modal on desktop; under 640px it docks to the bottom, full
   width, top corners rounded and bottom corners square, with the same 1px border on all four sides. */
.stack > .divider { margin: 0; }   /* a rule between stacked sections: the stack's gap is the space */
@media (max-width: 640px) {
  .modal--sheet {
    width: 100%; max-width: 100vw; max-height: 90dvh; margin: auto 0 0;
    border: var(--bw) solid var(--border-hairline); border-radius: var(--radius-modal) var(--radius-modal) 0 0;
  }
  .modal--sheet[open] { --rise: 16px; animation: sb-fade-up var(--dur-base) var(--ease-out); }
  .modal--sheet:not([open]) { transform: translateY(16px); }
  .modal--sheet .dialog__header, .modal--sheet .dialog__body, .modal--sheet .dialog__footer { padding-inline: var(--space-4); }
  .modal--sheet .dialog__footer > .btn { flex: 1 1 auto; }
}

/* ---- Small bits: kbd, code block, avatar, checker rule, lists ----------- */
.kbd { display: inline-block; padding: 1px 6px; font-family: var(--font-body); font-size: var(--fs-2xs); background: var(--bg-surface); border: var(--bw) solid var(--border-axis); border-radius: var(--radius-chip); }
.code-block { margin: 0; padding: var(--space-4); background: var(--bg-well); border-radius: var(--radius-control); font-family: var(--font-mono); font-size: var(--fs-2xs); line-height: 1.7; overflow: auto; white-space: pre; color: var(--text); max-height: 28rem; }
.code-block code { background: none; padding: 0; font-size: inherit; }
/* wrap: long lines (explanatory listings, URLs) wrap instead of scrolling; every code block wraps on phones */
.code-block--wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 640px) { .code-block { white-space: pre-wrap; overflow-wrap: anywhere; } }

.avatar {
  --size: 32px; display: inline-grid; place-items: center; flex: none; width: var(--size); height: var(--size);
  border-radius: var(--radius-control); background: var(--logo); color: var(--bg-surface);
  font-size: calc(var(--size) * 0.38); font-weight: 600; line-height: 1; text-decoration: none;
}
.avatar--sm { --size: 24px; }
.avatar--lg { --size: 48px; }
.avatar--muted { background: var(--bg-well); color: var(--text-secondary); }
.person { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.person__text { display: grid; min-width: 0; font-size: var(--fs-sm); }
.person__name { font-weight: 600; }
.person__meta { color: var(--text-subtle); font-size: var(--fs-xs); }

.checker-rule { display: block; height: 8px; margin: var(--space-12) 0; border: 0; background: repeating-linear-gradient(90deg, var(--border-axis) 0 8px, transparent 8px 16px); }
.checker-field { position: relative; isolation: isolate; }
.checker-field::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(var(--checker) 0 25%, transparent 0 50%) 0 0 / 128px 128px;
}

.list { list-style: none; display: grid; gap: var(--space-2); align-content: start; }
/* items are plain blocks with a positioned marker, so text, links, <code> and <b> flow inline */
.list > li { display: block; position: relative; min-width: 0; padding-left: calc(8px + var(--space-3)); }
.list > li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; box-shadow: inset 0 0 0 1.5px var(--border-strong); border-radius: var(--radius-cell); }
.list--filled > li::before { background: var(--border-strong); box-shadow: none; }
ol.list--numbered { counter-reset: item; }
.list--numbered > li { padding-left: calc(2rem + var(--space-3)); counter-increment: item; }
.list--numbered > li::before { content: counter(item, decimal-leading-zero); top: 0.15em; width: auto; height: auto; box-shadow: none; background: none; font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: 600; color: var(--text-secondary); }

/* ---- Motion (docs/MOTION.md) ---------------------------------------------
   Two families. Brand steps (steps() timing) for the loader, squares lighting up, meters and stepper bars;
   the glide (--ease-out, 150-400ms) for anything that moves or opens. Every entrance is gated by
   html[data-motion="on"], which app.js sets only when motion is allowed: without JS, with reduced motion or
   with --motion: 0, each element simply shows its final state. Motion uses opacity, transform and fills on
   elements that already have their final size, so nothing shifts.
   The nine beautifului.dev keyframes, renamed: fade-in, fade-up and pop-in keep their names (sb-), records-pulse
   is sb-pulse, shimmer-text is sb-shimmer (the soft band, 1.4s linear), pixel-on is sb-pixel-on (the inline
   loader's 3x3 grid) and spin is sb-spin (the ring of a running task row). caret-blink and eq-bounce are not used:
   answers are never typed out as if live, and nothing listens to audio. */
@keyframes sb-fade-in  { from { opacity: 0; } }
@keyframes sb-fade-up  { from { opacity: 0; transform: translateY(var(--rise, 6px)); } }
@keyframes sb-pop-in   { from { opacity: 0; transform: scale(0.97); } }
@keyframes sb-slide-in { from { opacity: 0; transform: translateX(calc(16px * var(--dir, 1) * min(var(--motion, 1), 1))); } }
@keyframes sb-cell-on  { from { background: var(--bg-track); box-shadow: inset 0 0 0 var(--bw) var(--border-track); } }
@keyframes sb-pulse    { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes sb-shimmer  { from { background-position: 150% center; } to { background-position: -50% center; } }
@keyframes sb-mark     { from { background-size: 0% 100%; } }
@keyframes sb-strike   { from { text-decoration-color: transparent; background-color: transparent; } }
@keyframes sb-bar-fill { from { transform: scaleX(0); } }
@keyframes sb-tick     { 0%, 24.99% { background: var(--text); } 25%, 100% { background: var(--text-disabled); } }
/* added for docs/MOTION-COVERAGE.md: leaving, strips arriving from above, bars drawing in, just-changed rows, invalid fields */
@keyframes sb-pop-out  { to { opacity: 0; transform: scale(0.97); } }
@keyframes sb-drop-in  { from { opacity: 0; transform: translateY(calc(var(--rise, 6px) * -1)); } }
@keyframes sb-grow     { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sb-flash    { from { background-color: var(--flash, var(--bg-hover)); } }
@keyframes sb-nudge    { from { transform: translateX(var(--nudge, 3px)); } }
/* helpers of the same vocabulary: a leaving row closes, a swapped icon turns in, a swapped label inks in, the busy mark
   ticks, the page cross-fade and the onboarding step slide */
@keyframes sb-collapse { from { height: auto; } to { height: 0; padding-block: 0; margin-block-end: calc(var(--space-2) * -1); } }
@keyframes sb-turn-in  { from { opacity: 0; transform: rotate(-90deg) scale(0.97); } }
@keyframes sb-ink-in   { from { color: transparent; } }
@keyframes sb-tick-ink { 0%, 24.99% { opacity: 1; } 25%, 100% { opacity: 0.35; } }
@keyframes sb-vt-out   { to { opacity: 0; } }
@keyframes sb-vt-step  { from { opacity: 0; transform: translateX(calc(16px * var(--vt-dir, 1) * min(var(--motion, 1), 1))); } }

/* Entrances: data-anim="fade-up | fade-in | pop-in" with style="--i: n" (capped at 6 steps), or data-stagger on a
   parent so its direct children follow one another. They run on every page view
   (app.js sets html[data-entrance="on"]) and every time a dialog opens; app.js marks the ones below the fold
   .is-static so only what you can see moves. */
[data-stagger] > :nth-child(2) { --i: 1; }
[data-stagger] > :nth-child(3) { --i: 2; }
[data-stagger] > :nth-child(4) { --i: 3; }
[data-stagger] > :nth-child(5) { --i: 4; }
[data-stagger] > :nth-child(6) { --i: 5; }
[data-stagger] > :nth-child(n+7) { --i: 6; }
:root[data-motion="on"][data-entrance="on"] :is([data-anim="fade-up"], [data-stagger] > *),
:root[data-motion="on"] dialog[open] :is([data-anim="fade-up"], [data-stagger] > *) {
  animation: sb-fade-up var(--dur-base) var(--ease-out) both;
  animation-delay: calc(min(var(--i, 0), 6) * var(--stagger));
}
:root[data-motion="on"][data-entrance="on"] [data-anim="fade-in"],
:root[data-motion="on"] dialog[open] [data-anim="fade-in"] {
  animation: sb-fade-in var(--dur-base) var(--ease-out) both;
  animation-delay: calc(min(var(--i, 0), 6) * var(--stagger));
}
:root[data-motion="on"][data-entrance="on"] [data-anim="pop-in"],
:root[data-motion="on"] dialog[open] [data-anim="pop-in"] {
  animation: sb-pop-in var(--dur-fast) var(--ease-out) both;
  animation-delay: calc(min(var(--i, 0), 6) * var(--stagger));
}
/* answer reveal: inside an arriving answer the "you" highlight marks in from the left, then the sources pop in */
:root[data-motion="on"][data-entrance="on"] :is([data-anim], .is-arriving) .mention--you,
:root[data-motion="on"] dialog[open] [data-anim] .mention--you {
  background: linear-gradient(var(--accent-band), var(--accent-band)) 0 0 / 100% 100% no-repeat;
  animation: sb-mark var(--dur-slow) var(--ease-out) both;
  animation-delay: calc(min(var(--i, 0), 6) * var(--stagger) + var(--dur-fast));
}
:root[data-motion="on"][data-entrance="on"] :is([data-anim], .is-arriving) .answer__source,
:root[data-motion="on"] dialog[open] [data-anim] .answer__source {
  display: inline-block;
  animation: sb-pop-in var(--dur-fast) var(--ease-out) both;
  animation-delay: calc(min(var(--i, 0), 6) * var(--stagger) + var(--dur-base));
}
:root[data-motion="on"] :is([data-anim].is-static.is-static:not(.is-below), [data-anim].is-static.is-static *, [data-stagger].is-static.is-static > *, [data-stagger].is-static.is-static > * *) { animation: none; }

/* Gliding highlight: one box per list follows the pointer or keyboard focus (data-glide on the list, a
   <span class="glide"> inside; app.js adds the span when it is missing). Rows stay transparent while the list is
   hovered, so there is only ever one highlight; the current page keeps its own fill. */
[data-glide] { position: relative; }
[data-glide] > :not(.glide) { position: relative; z-index: 1; }
.glide {
  position: absolute; top: 0; left: 0; z-index: 0;
  width: var(--glide-w, 0px); height: var(--glide-h, 0px);
  transform: translate(var(--glide-x, 0px), var(--glide-y, 0px));
  background: var(--bg-hover); border-radius: var(--radius-control);
  opacity: 0; pointer-events: none;
  transition: transform var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out), opacity var(--dur-fast) linear;
}
.is-gliding > .glide { opacity: 1; }
.glide--jump > :is(.glide, .tabs__glide, .segmented__thumb) { transition: opacity var(--dur-fast) linear; }
.is-gliding > :is(.nav__item, [data-glide-item]):is(:hover, :focus-visible):not([aria-current]) { background: transparent; }

/* tabs: one underline slides to the selected tab; segmented controls: one thumb slides behind the pressed option.
   Until app.js has measured (.has-glide), each tab and button draws its own selected look, as without JS. */
.tabs__list, .segmented { position: relative; }
.tabs__glide, .segmented__thumb {
  position: absolute; top: 0; left: 0; pointer-events: none; opacity: 0;
  width: var(--glide-w, 0px); height: var(--glide-h, 0px);
  transform: translate(var(--glide-x, 0px), var(--glide-y, 0px));
  transition: transform var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out);
}
.tabs__glide { background: var(--text); }
.segmented__thumb {
  background: var(--bg-surface); border-radius: max(0px, calc(var(--radius-control) - 2px));
  box-shadow: 0 0 0 var(--bw) var(--border-hairline), 0 1px 2px color-mix(in oklab, var(--shadow-ink) 8%, transparent);
}
.has-glide > :is(.tabs__glide, .segmented__thumb) { opacity: 1; }
.has-glide > .tabs__tab[aria-selected="true"]::after { content: none; }
.segmented > .segmented__btn { position: relative; z-index: 1; }
.segmented.has-glide > .segmented__btn:is([aria-pressed="true"], [aria-selected="true"]) { background: transparent; box-shadow: none; }

/* Height-auto expand. <details class="disclosure"> opens smoothly where the browser can animate its content
   (and natively, at once, elsewhere or without JS). .expand + .expand__inner is the JS version: a button with
   data-expand="#id" and aria-expanded toggles .is-open. Render .is-open when the part must read without JS. */
:root { interpolate-size: allow-keywords; }
.disclosure { min-width: 0; }
.disclosure__summary {
  display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%;
  cursor: pointer; list-style: none; font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary);
}
.disclosure__summary::-webkit-details-marker { display: none; }
.disclosure__summary { text-decoration-line: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; }
.expand-toggle { transition: background-color var(--dur) var(--ease), text-decoration-color var(--dur-fast) var(--ease-out), color var(--dur) var(--ease), transform var(--dur-fast) var(--ease-out); }
.disclosure__summary:hover, .disclosure__summary:focus-visible { color: var(--text); text-decoration: underline; text-decoration-color: var(--border-input); text-underline-offset: 0.2em; }
.disclosure__body { padding-top: var(--space-3); min-width: 0; }
/* hint: a small "?" that opens one or two short sentences (docs/TEXT.md); closed by default, the body flows below */
.hint { display: inline-block; vertical-align: middle; margin-inline-start: var(--space-2); }
.hint[open] { display: block; margin: var(--space-1) 0 0; }
.hint__toggle {
  list-style: none; display: inline-grid; place-items: center; width: 18px; height: 18px; cursor: pointer;
  border-radius: var(--radius-pill); background: var(--bg-well);
  font-size: var(--fs-2xs); font-weight: 600; line-height: 1; color: var(--text-subtle); user-select: none;
}
.hint__toggle::-webkit-details-marker { display: none; }
.hint__toggle:hover, .hint__toggle:focus-visible, .hint[open] > .hint__toggle { color: var(--text); background: var(--bg-hover); }
.hint__body { display: block; padding-top: var(--space-1); font-size: var(--fs-sm); color: var(--text-secondary); max-width: 36em; }
.disclosure__summary .icon, .expand-toggle .icon { transition: transform var(--dur-fast) var(--ease-out); }
.disclosure[open] > .disclosure__summary .icon, .expand-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.faq__q::after { transition: transform var(--dur-fast) var(--ease-out); }
details::details-content {
  block-size: 0; overflow-y: clip; opacity: 0;
  transition: block-size var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), content-visibility var(--dur-base) allow-discrete;
}
details[open]::details-content { block-size: auto; opacity: 1; }
details.is-instant::details-content { transition: none; }   /* opened by a link (app.js reveal): no animation, so the scroll lands */
.expand {
  display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden;
  transition: grid-template-rows var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.expand.is-open { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: grid-template-rows var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.expand__inner { min-height: 0; min-width: 0; overflow: hidden; }
.expand-toggle { display: inline-flex; align-items: center; gap: var(--space-2); }

/* Filters that move rows (FLIP, set up by app.js): rows that stay slide to their new place, rows that come back
   and the empty state fade in. Nothing carries a transform at rest. data-flip="off" on a scope opts out. */
.is-flipping { transform: translate(var(--flip-x, 0px), var(--flip-y, 0px)); transition: none; }
.is-flip-run { transform: translate(var(--flip-x, 0px), var(--flip-y, 0px)); transition: transform var(--dur-base) var(--ease-out); }
:root[data-motion="on"] .is-entering { animation: sb-fade-in var(--dur-base) var(--ease-out) both; animation-delay: calc(var(--dur-fast) / 2); }
:root[data-motion="on"] [data-filter-empty].is-entering { animation-delay: 0s; }

/* Numbers that count up (data-countup on the digits): tabular figures and a reserved width while counting */
[data-countup] { font-variant-numeric: tabular-nums; }
.is-counting { display: inline-block; min-width: calc(var(--ch, 0) * 1ch); text-align: end; }

/* Squares light up row by row (brand steps, 30ms per row, done within 400ms). data-fill="on" on a score square
   or tally, set by app.js on every page view and when polling changes its number (or by the server, e.g. the
   landing board). Off screen they stay lit (data-fill="wait") and light up when they come into view (app.js). */
.score__cell:nth-child(n+5) { --row: 1; }
.score__cell:nth-child(n+9) { --row: 2; }
.score__cell:nth-child(n+13) { --row: 3; }
.score__cell:nth-child(4n+2) { --col: 1; }
.score__cell:nth-child(4n+3) { --col: 2; }
.score__cell:nth-child(4n+4) { --col: 3; }
:root[data-motion="on"] [data-fill="on"] :is(.score__cell--on, .tally__cell--on, .meter__bar--on),
:root[data-motion="on"][data-entrance="on"] [data-anim] .meter__bar--on,
:root[data-motion="on"] dialog[open] [data-anim] .meter__bar--on {
  animation: sb-cell-on 1ms steps(1, end) both;
  animation-delay: calc((var(--row, 0) * 30ms + var(--col, 0) * 8ms) * var(--motion));
}
/* on a page view the fill starts as the header lines land, so it is seen rather than over before first paint */
:root[data-motion="on"][data-entrance="on"] [data-fill="on"] :is(.score__cell--on, .tally__cell--on) {
  animation-delay: calc(var(--dur-fast) + (var(--row, 0) * 30ms + var(--col, 0) * 8ms) * var(--motion));
}

/* Meter: confidence or impact as 1-3 filled square bars, always beside its word */
.meter { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text-secondary); white-space: nowrap; }
.meter__bars { display: inline-flex; align-items: flex-end; gap: 2px; flex: none; }
.meter__bar { display: block; width: 4px; height: 12px; background: var(--bg-track); box-shadow: inset 0 0 0 var(--bw) var(--border-track); }
.meter__bar--on { background: var(--text); box-shadow: none; }
.meter__bar { --row: 0; --col: 0; }
.meter__bar:nth-child(2) { --row: 1; }
.meter__bar:nth-child(3) { --row: 2; }
.meter__word { font-weight: 600; color: var(--text); }

/* Live work: elapsed time, the shimmering "working" label, the pulsing square, task rows, busy panels */
.elapsed { font-family: var(--font-body); font-size: var(--fs-2xs); font-variant-numeric: tabular-nums; color: var(--text-subtle); white-space: nowrap; }
.shimmer { color: var(--text-secondary); }
:root[data-shimmer="on"] .shimmer {
  background: linear-gradient(90deg, var(--text-subtle) 35%, var(--text) 50%, var(--text-subtle) 65%) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sb-shimmer calc(1400ms * var(--motion)) linear infinite;
}
@media (forced-colors: active) { :root[data-shimmer="on"] .shimmer { background: none; color: inherit; animation: none; } }
.pulse { display: inline-block; flex: none; width: 8px; height: 8px; background: var(--text-secondary); border-radius: var(--radius-cell); }
:root[data-motion="on"] .pulse { animation: sb-pulse calc(1200ms * var(--motion)) steps(2, end) infinite; }
.topbar__updated > .pulse { margin-right: var(--space-2); vertical-align: 0.05em; }

/* Live task rows (beautifului.dev Task Rows, "Capsules"): pill rows 44px tall that fade up 80ms apart. Running: a 24px
   ring whose 28% arc spins (1.1s linear) around the count so far. Done / failed: a filled circle with a check or an x
   that pops in (300ms), and a tinted status pill that fades in (200ms) beside the count. */
.tasks { list-style: none; display: grid; gap: var(--space-2); min-width: 0; }
.task {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-1) 10px;
  min-height: 44px; padding: var(--space-1) var(--space-4) var(--space-1) 10px;
  background: var(--bg-well); border-radius: 22px; font-size: var(--fs-sm);
  transition: background-color 300ms var(--ease-out), border-radius 300ms var(--ease-out);
}
.task:has(> .task__note) { border-radius: 14px; padding-block: var(--space-2); }
:root[data-motion="on"] .task { animation: sb-fade-up calc(450ms * var(--motion)) var(--ease-out) both; animation-delay: calc(var(--ri, 0) * 80ms * var(--motion)); }
.task__glyph { display: grid; place-items: center; width: 24px; height: 24px; }
.task__glyph > * { grid-area: 1 / 1; }
.task__spin { position: relative; display: grid; place-items: center; width: 24px; height: 24px; }
.task__ring { position: absolute; inset: 0; width: 24px; height: 24px; overflow: visible; }
.task__track, .task__arc { fill: none; stroke-width: 2; }
.task__track { stroke: var(--border-axis); }
.task__arc { stroke: var(--text-secondary); stroke-linecap: round; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.task[data-state="running"] .task__arc { opacity: 1; }
:root[data-motion="on"] .task[data-state="running"] .task__ring { animation: sb-spin calc(1100ms * var(--motion)) linear infinite; }
.task__n { position: relative; font-size: calc(var(--base-size) * 0.65625); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text); }
.task[data-state="queued"] .task__n { color: var(--text-subtle); }
.task__dot { display: none; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--bg-surface); }
.task__dot .icon { width: 13px; height: 13px; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.task:is([data-state="done"], [data-state="ok"], [data-state="failed"], [data-state="blocked"], [data-state="error"]) .task__spin { display: none; }
.task:is([data-state="done"], [data-state="ok"]) .task__dot--done { display: grid; background: var(--status-positive); }
.task:is([data-state="failed"], [data-state="blocked"]) .task__dot--failed { display: grid; background: var(--status-negative); }
.task[data-state="error"] .task__dot--error { display: grid; background: var(--status-warning); }
:root[data-motion="on"] .task__dot { animation: sb-pop-in calc(300ms * var(--motion)) var(--ease-out) both; }
.task__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--text); transition: color var(--dur) var(--ease); }
.task__state { font-weight: 400; }   /* the state in words, for screen readers (with .visually-hidden) */
.task[data-state="queued"] .task__label { color: var(--text-subtle); }
.task__count { font-family: var(--font-body); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: var(--text-secondary); white-space: nowrap; }
.task__pill {
  display: none; align-items: center; height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-pill);
  font-size: var(--fs-2xs); font-weight: 500; white-space: nowrap;
  --pill: var(--text-secondary); color: var(--pill); background: color-mix(in oklab, var(--pill) 16%, var(--bg-surface));
}
.task:is([data-state="done"], [data-state="ok"]) .task__pill { display: inline-flex; --pill: var(--status-positive); }
.task:is([data-state="failed"], [data-state="blocked"]) .task__pill { display: inline-flex; --pill: var(--status-negative); }
.task[data-state="error"] .task__pill { display: inline-flex; --pill: var(--status-warning); }
:root[data-motion="on"] .task__pill { animation: sb-fade-in calc(200ms * var(--motion)) ease-out both; }
.task__note { grid-column: 2 / -1; font-size: var(--fs-xs); color: var(--text-subtle); }
@keyframes sb-spin { to { transform: rotate(1turn); } }

/* The live check card: pixel loader, shimmering label and elapsed time over the count, a Lit bar, then the rows */
.run { display: grid; gap: var(--space-4); }
.run__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.run__count { font-size: var(--fs-xs); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text-secondary); white-space: nowrap; }
.progress--live { height: 4px; border-radius: var(--radius-pill); }
.progress--live::before { background: var(--accent); border-radius: var(--radius-pill); transition: width calc(600ms * var(--motion)) var(--ease-out); }
.checker-tasks { width: 100%; max-width: 26rem; margin-inline: auto; }   /* the free check's stage rows, under the centred loader */

.busy { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-10) var(--space-6); text-align: center; }
.busy__label { font-size: var(--fs-md); font-weight: 600; }
.busy__meta { font-size: var(--fs-sm); color: var(--text-subtle); }
.is-busy :is(.field, .fieldset, .choice, .chips, .table-wrap) { opacity: 0.55; pointer-events: none; transition: opacity var(--dur-fast) linear; }

/* Before and after: rows to remove are struck on a negative tint, rows to add sit on a positive tint (full-width
   fills, no edge stripe). data-sweep reveals them row by row: removals at 180ms, additions at 440ms, 60ms apart;
   data-settle (app.js) fades the tints back 2s later. Works on .diff rows and on table rows (tr.diff__row--…). */
.diff { display: grid; min-width: 0; background: var(--bg-surface); border: var(--bw) solid var(--border-hairline); border-radius: var(--radius-control); overflow: hidden; font-size: var(--fs-sm); line-height: 1.5; }
.diff > .diff__row { display: grid; grid-template-columns: 1.25em minmax(0, 1fr); gap: var(--space-2); padding: var(--space-2) var(--space-3); }
.diff__sign { font-family: var(--font-body); text-align: center; color: var(--text-subtle); user-select: none; }
.diff__text { min-width: 0; overflow-wrap: anywhere; text-decoration: none; }
.diff__body { display: grid; min-width: 0; }
.diff__label { display: block; font-family: var(--font-body); font-size: var(--fs-2xs); color: var(--text-subtle); }
.diff__row { transition: background-color var(--dur-slow) var(--ease-out); }
.diff__row--del { background-color: color-mix(in oklab, var(--status-negative) var(--tint-strength), var(--bg-surface)); }
.diff__row--del .diff__text { text-decoration: line-through; text-decoration-color: var(--status-negative); color: var(--text-secondary); }
.diff__row--del .diff__sign { color: var(--status-negative); }
.diff__row--add { background-color: color-mix(in oklab, var(--status-positive) var(--tint-strength), var(--bg-surface)); }
.diff__row--add .diff__sign { color: var(--status-positive); }
.diff--code { background: var(--bg-well); border-color: var(--bg-well); font-size: var(--fs-2xs); line-height: 1.7; }
.diff--code > .diff__row { padding-block: 0; }
.diff--code > .diff__row:first-child { padding-top: var(--space-2); }
.diff--code > .diff__row:last-child { padding-bottom: var(--space-2); }
.diff--code .diff__text { white-space: pre-wrap; font-family: var(--font-mono); }
:root[data-motion="on"] [data-sweep] .diff__row--del, :root[data-motion="on"] [data-sweep] .diff__row--del .diff__text {
  animation: sb-strike var(--dur-base) var(--ease-out) both;
  animation-delay: calc((180ms + var(--i, 0) * 60ms) * var(--motion));
}
:root[data-motion="on"] [data-sweep] .diff__row--add {
  animation: sb-fade-up var(--dur-base) var(--ease-out) both;
  animation-delay: calc((440ms + var(--i, 0) * 60ms) * var(--motion));
}
:root[data-motion="on"] :is(details:not([open]), .expand:not(.is-open)) [data-sweep] :is(.diff__row, .diff__text) { animation: none; }
.is-settled :is(.diff__row, .diff__text) { animation: none; }
.is-settled :is(.diff__row--del, .diff__row--add) { background-color: transparent; }

/* Chart scrub: a 1px cursor snaps to the nearest week and a tooltip follows it (app.js, from figure[data-chart]).
   It follows the hand, so the cursor itself never transitions. */
.chart__canvas { touch-action: pan-y; }
.chart__cursor {
  position: absolute; left: 0; top: var(--scrub-top, 0px); height: var(--scrub-h, 100%); width: 1px;
  transform: translateX(var(--scrub-x, 0px)); background: var(--border-input); opacity: 0; pointer-events: none;
}
.chart__tip {
  position: absolute; top: var(--scrub-top, 0px); left: clamp(calc(var(--tip-w, 0px) / 2), var(--scrub-x, 0px), calc(100% - var(--tip-w, 0px) / 2));
  margin-top: var(--space-2); transform: translateX(-50%); z-index: 2;
  display: grid; gap: 2px; min-width: 9rem; padding: var(--space-2) var(--space-3);
  background: var(--bg-raised); border: var(--bw) solid var(--border-hairline); border-radius: var(--radius-control); box-shadow: var(--shadow-pop);
  font-size: var(--fs-xs); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--dur-fast) linear;
}
.is-scrubbing > :is(.chart__cursor, .chart__tip) { opacity: 1; }
.chart__tip-title { font-weight: 600; color: var(--text); }
.chart__tip-row { display: flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.chart__tip-row > b { margin-left: auto; padding-left: var(--space-4); color: var(--text); font-weight: 600; }
.chart__tip-row--you { color: var(--text); font-weight: 600; }

/* Small confirmations and arrivals */
:root[data-motion="on"] .is-copied > .icon { animation: sb-pop-in var(--dur-fast) var(--ease-out) both; }
:root[data-motion="on"] .stepper__step[aria-current="step"]::before { transform-origin: left center; animation: sb-bar-fill var(--dur-slow) var(--ease-steps) both; }

/* ---- Motion for every element (docs/MOTION-COVERAGE.md) --------------------
   One vocabulary, reused everywhere: tint (stepped colour change, in each component above), press, swap, shown,
   flash, nudge, arrivals, reveal, grow, light, turn, icon-nudge, elevate, page and theme. Every rule that starts
   from a hidden, unlit or offset state sits behind html[data-motion="on"] (app.js; never set under reduced motion,
   with --motion: 0 or without JS), so the server HTML is always the finished page. Transforms and opacity only,
   on elements that already have their final size; the one exception is collapse, which animates the space itself. */

/* press: a control shrinks a little while it is held (never cards, rows, moves or tiers) */
:root[data-motion="on"] :is(.btn, button.chip, a.chip, .chip__remove, .segmented__btn, .tabs__tab, .switch__input, .toast__action, .preview-banner__btn, a.avatar, a.brand, .nav__item, .knob__color, .proto-pill):active:not(:disabled, [aria-disabled="true"]) {
  transform: scale(var(--press));
}

/* icon-nudge: an arrow-like icon leans the way it points while its control is hovered or focused (svg.icon[data-i]) */
.icon { transition: transform var(--dur-fast) var(--ease-out); }
:root[data-motion="on"] :is(a, button, summary):is(:hover, :focus-visible) > .icon:is([data-i="arrow-right"], [data-i="chevron-right"], [data-i="send"]) { transform: translateX(2px); }
:root[data-motion="on"] :is(a, button, summary):is(:hover, :focus-visible) > .icon:is([data-i="arrow-left"], [data-i="chevron-left"]) { transform: translateX(-2px); }
:root[data-motion="on"] :is(a, button, summary):is(:hover, :focus-visible) > .icon[data-i="external"] { transform: translate(1px, -1px); }
:root[data-motion="on"] :is(a, button, summary):is(:hover, :focus-visible) > .icon:is([data-i="download"], [data-i="arrow-down"]) { transform: translateY(1px); }

/* turn: an icon swapped by app.js (menu ↔ close, moon ↔ sun) turns in; data-swapped="pop" (done ↔ undo) pops in and the
   label inks in. The new svg is a fresh element, so its animation runs once, on the swap. */
:root[data-motion="on"] [data-swapped] > .icon { animation: sb-turn-in var(--dur-fast) var(--ease-out) both; }
:root[data-motion="on"] [data-swapped="pop"] > .icon { animation-name: sb-pop-in; }
:root[data-motion="on"] .btn[data-swapped="pop"] { animation: sb-ink-in var(--dur-fast) var(--ease-out) both; }

/* fields: an error arrives (it is always news), the invalid control nudges once (never back and forth) */
:root[data-motion="on"] .field__error { animation: sb-fade-up var(--dur-base) var(--ease-out) both; }
:root[data-motion="on"] :is(.field--invalid :is(.input, .select, .textarea, .chips), [aria-invalid="true"]) { animation: sb-nudge var(--dur-base) var(--ease-out); }

/* swap: text that app.js just changed (a count, a poll line, a dialog title) fades in; the old text left at once */
:root[data-motion="on"] :is(span, p, b, strong, output, small, h1, h2, h3, h4)[data-changed] { animation: sb-fade-in var(--dur-fast) var(--ease-out) both; }
:root[data-motion="on"] .badge[data-changed] { animation: sb-pop-in var(--dur-fast) var(--ease-out) both; }   /* nav badge bump: the count changed since last seen */
:root[data-motion="on"] [data-changed] :is(.status, .fact-status, .source-status, .bot-status, .confidence) > .icon,
:root[data-motion="on"] [data-done-status] > .icon { animation: sb-pop-in var(--dur-fast) var(--ease-out) both; }

/* shown: something hidden is shown in place (app.js sets data-shown when [hidden] goes): a tab panel rises, a stepper
   panel slides the way you travel (--dir), strips drop in from above, anything else fades in */
:root[data-motion="on"] [data-shown] { animation: sb-fade-in var(--dur-base) var(--ease-out) both; }
:root[data-motion="on"] :is(.tabs__panel, [role="tabpanel"])[data-shown] { animation-name: sb-fade-up; }
:root[data-motion="on"] .stepper__panel[data-shown] { animation-name: sb-slide-in; }
:root[data-motion="on"] :is(.banner, .alert, .busy)[data-shown] { animation-name: sb-drop-in; }

/* added: a small thing inserted by app.js (a chip typed in, an undone chip) pops in; leaving, it pops out */
:root[data-motion="on"] [data-added] { animation: sb-pop-in var(--dur-fast) var(--ease-out) both; }
:root[data-motion="on"] .is-leaving { animation: sb-pop-out var(--dur-fast) var(--ease-in-out) forwards; pointer-events: none; }

/* flash: a row or block that was just added (data-new, rendered after the POST), changed (data-changed, a save or a
   dialog write-back) or linked to (data-landed) holds a light fill for --motion-hold, then settles. A full fill,
   never an outline or edge stripe; data-changed="positive | warning | negative" tints it with the new status. */
[data-changed="positive"] { --flash: color-mix(in oklab, var(--status-positive) 12%, var(--bg-surface)); }
[data-changed="warning"] { --flash: color-mix(in oklab, var(--status-warning) 12%, var(--bg-surface)); }
[data-changed="negative"] { --flash: color-mix(in oklab, var(--status-negative) 12%, var(--bg-surface)); }
:root[data-motion="on"] :is([data-new], [data-landed]):not(tr),
:root[data-motion="on"] tr:is([data-new], [data-changed], [data-landed]) > *,
:root[data-motion="on"] :is(li, article, section, .card, .answer, .alert, .source):not(.task, tr)[data-changed] {
  animation: sb-flash var(--dur-slow) var(--ease-out) var(--hold) backwards;
}
/* done: the marker square lights (brand steps) and the strike draws across the title */
:root[data-motion="on"] .move--done[data-changed]::before { animation: sb-cell-on 1ms steps(1, end) var(--dur-fast) both; }
:root[data-motion="on"] .move--done[data-changed] .move__title { animation: sb-strike var(--dur-base) var(--ease-out) both; }

/* Arrivals: on every page view, every block on screen fades up after the header lines, one
   after another (app.js marks them .is-arriving with --ai), and the rows of the lists inside follow 40ms apart (--ri,
   capped at 6). Strips drop in; the hero board and empty states fade in. Blocks below the fold use reveal instead. */
:is(tbody, .moves, .feed, .leaderboard, .bars, .source-list, .tasks, .metrics, .list, .email__lines, .grid, .pricing, .steps, .faq, .site-footer__inner, .presets, .specimens) > :nth-child(2) { --ri: 1; }
:is(tbody, .moves, .feed, .leaderboard, .bars, .source-list, .tasks, .metrics, .list, .email__lines, .grid, .pricing, .steps, .faq, .site-footer__inner, .presets, .specimens) > :nth-child(3) { --ri: 2; }
:is(tbody, .moves, .feed, .leaderboard, .bars, .source-list, .tasks, .metrics, .list, .email__lines, .grid, .pricing, .steps, .faq, .site-footer__inner, .presets, .specimens) > :nth-child(4) { --ri: 3; }
:is(tbody, .moves, .feed, .leaderboard, .bars, .source-list, .tasks, .metrics, .list, .email__lines, .grid, .pricing, .steps, .faq, .site-footer__inner, .presets, .specimens) > :nth-child(5) { --ri: 4; }
:is(tbody, .moves, .feed, .leaderboard, .bars, .source-list, .tasks, .metrics, .list, .email__lines, .grid, .pricing, .steps, .faq, .site-footer__inner, .presets, .specimens) > :nth-child(6) { --ri: 5; }
:is(tbody, .moves, .feed, .leaderboard, .bars, .source-list, .tasks, .metrics, .list, .email__lines, .grid, .pricing, .steps, .faq, .site-footer__inner, .presets, .specimens) > :nth-child(n+7) { --ri: 6; }
:root[data-motion="on"][data-entrance="on"] .is-arriving {
  --ad: calc((min(var(--ai, 0), 6) + 2) * var(--stagger));
  animation: sb-fade-up var(--dur-base) var(--ease-out) both;
  animation-delay: var(--ad);
}
:root[data-motion="on"][data-entrance="on"] :is(.banner, .alert).is-arriving { animation-name: sb-drop-in; }
:root[data-motion="on"][data-entrance="on"] :is(.empty, .loader--block, .hero__aside, .busy).is-arriving { animation-name: sb-fade-in; }
:root[data-motion="on"][data-entrance="on"] .is-arriving :is(tbody > tr, .source-list > .source, .tasks > .task, .list > li, .email__lines > li, .metrics > .metric) {
  animation: sb-fade-in var(--dur-base) var(--ease-out) both;
  animation-delay: calc(var(--ad, 0s) + var(--dur-fast) / 2 + min(var(--ri, 0), 6) * var(--stagger));
}
:root[data-motion="on"][data-entrance="on"] .is-arriving :is(.moves > .move, .feed > .feed__item, .leaderboard > .leaderboard__row, .bars > .bars__item) {
  animation: sb-fade-up var(--dur-base) var(--ease-out) both;
  animation-delay: calc(var(--ad, 0s) + var(--dur-fast) / 2 + min(var(--ri, 0), 6) * var(--stagger));
}
/* small things inside an arriving block: a new tag pops in, an SMS bubble pops from its square corner, the "best"
   marker and empty-state squares light up once their row is in */
:root[data-motion="on"][data-entrance="on"] .is-arriving :is(.tag--new, .tier__badge) { animation: sb-pop-in var(--dur-fast) var(--ease-out) both; animation-delay: calc(var(--ad, 0s) + var(--dur-base)); }
:root[data-motion="on"][data-entrance="on"] .is-arriving .sms__bubble { transform-origin: bottom left; animation: sb-pop-in var(--dur-fast) var(--ease-out) both; animation-delay: calc(var(--ad, 0s) + var(--dur-fast)); }
:root[data-motion="on"][data-entrance="on"] .is-arriving .compare-table__best::before,
:root[data-motion="on"][data-entrance="on"] :is(.empty.is-arriving, .is-arriving .empty) .score__cell--on {
  animation: sb-cell-on 1ms steps(1, end) both;
  animation-delay: calc(var(--ad, 0s) + var(--dur-base) + min(var(--ri, 0), 6) * 30ms * var(--motion));
}
/* the shell (app sidebar and topbar, site header, onboarding header) fades in on the first page of a session only;
   it then persists across pages (view transitions keep it in place) */
:root[data-motion="on"][data-session-start="on"] :is(.sidebar, .topbar, .site-header, .focus__header, .shared-header) { animation: sb-fade-in var(--dur-fast) var(--ease-out) both; }

/* reveal: blocks that were below the fold when the page loaded (app.js marks .is-below) rise as they scroll into
   view, linked to the scroll and staggered by column. fill-mode none: at rest, in print, in a full-page capture or
   in a browser without scroll timelines every block is complete. */
@supports (animation-timeline: view()) {
  :root[data-motion="on"] .is-below {
    animation: sb-fade-up linear none;
    animation-duration: auto;
    animation-timeline: view();
    /* capped at the element's own height (100% of its entry range), so a short block at the very end of a page,
       which can never travel 96px into view, still finishes when it is fully on screen */
    animation-range: entry min(calc(min(var(--ri, 0), 3) * 16px), 50%) entry min(calc(96px + min(var(--ri, 0), 3) * 16px), 100%);
  }
}

/* grow: bars draw in from the left on every page view (with their row) and when polling changes their values (data-fill="on",
   set by app.js from the sb-seen store). A clip, not a scale, so the rounded end keeps its shape; later value changes
   slide the fill's width (above). */
:root[data-motion="on"][data-entrance="on"] .is-arriving :is(.leaderboard__bar, .bars__track, .progress)::before,
:root[data-motion="on"] [data-fill="on"] :is(.leaderboard__bar, .bars__track)::before,
:root[data-motion="on"] .progress[data-fill="on"]::before {
  animation: sb-grow var(--dur-slow) var(--ease-out) backwards;
  animation-delay: calc(var(--ad, 0s) + var(--dur-fast) + min(var(--ri, 0), 6) * var(--stagger));
}
/* light: visibility-grid cells and bot-matrix rows light up row by row (brand steps, 30ms a row, done within 400ms) */
:root[data-motion="on"] [data-fill="on"] :is(.vgrid__cell--seen, .vgrid__cell--other) {
  animation: sb-cell-on 1ms steps(1, end) both;
  animation-delay: calc(var(--row, 0) * 30ms * var(--motion));
}
/* on a page view the grid starts once its block has faded in (the hero board, an arriving section) */
:root[data-motion="on"][data-entrance="on"] [data-fill="on"] :is(.vgrid__cell--seen, .vgrid__cell--other) {
  animation-delay: calc(var(--ad, 0s) + var(--dur-fast) + var(--row, 0) * 30ms * var(--motion));
}
:root[data-motion="on"] [data-fill="on"] .bot-matrix tbody > tr { animation: sb-fade-in var(--dur-base) var(--ease-out) both; animation-delay: calc(min(var(--ri, 0), 6) * var(--stagger)); }
:root[data-motion="on"] [data-fill="on"] .bot-matrix .bot-status > .icon { animation: sb-pop-in var(--dur-fast) var(--ease-out) both; animation-delay: calc(min(var(--ri, 0), 6) * var(--stagger) + var(--dur-fast)); }

/* charts: the series draw in left to right (every page view, or new data), then the end dots and labels pop in and markers
   fade in. Hovering a legend item or an end label quiets the other series (data-focus-series, app.js). */
:root[data-motion="on"] .chart[data-fill="on"] .chart__series,
:root[data-motion="on"][data-entrance="on"] .is-arriving .chart__series { animation: sb-grow var(--dur-slow) var(--ease-out) backwards; }
:root[data-motion="on"] .chart[data-fill="on"] :is(.chart__dot, .chart__label),
:root[data-motion="on"][data-entrance="on"] .is-arriving :is(.chart__dot, .chart__label) {
  transform-box: fill-box; transform-origin: center;
  animation: sb-pop-in var(--dur-fast) var(--ease-out) var(--dur-slow) backwards;
}
:root[data-motion="on"] .chart[data-fill="on"] :is(.chart__marker, .chart__marker-dot, .chart__marker-label),
:root[data-motion="on"][data-entrance="on"] .is-arriving :is(.chart__marker, .chart__marker-dot, .chart__marker-label) { animation: sb-fade-in var(--dur-base) var(--ease-out) var(--dur-fast) backwards; }
.chart__line, .chart__dot, .chart__label, .chart .legend__item { transition: opacity var(--dur-fast) linear; }
.chart[data-focus-series] :is(.chart__line, .chart__dot, .chart__label, .legend__item) { opacity: 0.4; }
.chart[data-focus-series="series-you"] [data-series="series-you"], .chart[data-focus-series="series-1"] [data-series="series-1"],
.chart[data-focus-series="series-2"] [data-series="series-2"], .chart[data-focus-series="series-3"] [data-series="series-3"],
.chart[data-focus-series="series-4"] [data-series="series-4"], .chart[data-focus-series="series-5"] [data-series="series-5"],
.chart[data-focus-series="series-other"] [data-series="series-other"] { opacity: 1; }
.chart .legend__item[data-series], .chart__label[data-series] { cursor: default; }

/* insights (docs/INSIGHTS.md 7.6): board rows arrive with their table (above); the sparkline draws in left to right
   with its row and its end square pops in after; the benchmark band grows, the median tick fades in and the "You"
   square lights when its card arrives or when its value is new to this page load (data-fill="on"). A dismissed
   insight's .expand wrapper collapses (app.js), then leaves. */
:root[data-motion="on"][data-entrance="on"] .is-arriving .spark__line { animation: sb-grow var(--dur-slow) var(--ease-out) backwards; animation-delay: calc(var(--ad, 0s) + var(--dur-fast) + min(var(--ri, 0), 6) * var(--stagger)); }
:root[data-motion="on"][data-entrance="on"] .is-arriving .spark__now { transform-box: fill-box; transform-origin: center; animation: sb-pop-in var(--dur-fast) var(--ease-out) backwards; animation-delay: calc(var(--ad, 0s) + var(--dur-slow) + min(var(--ri, 0), 6) * var(--stagger)); }
:root[data-motion="on"][data-entrance="on"] :is([data-anim], .is-arriving) .range__band { transform-origin: left center; animation: sb-grow var(--dur-slow) var(--ease-out) backwards; animation-delay: calc(min(var(--i, 0), 6) * var(--stagger) + var(--dur-fast)); }
:root[data-motion="on"][data-entrance="on"] :is([data-anim], .is-arriving) .range__median { animation: sb-fade-in var(--dur-base) var(--ease-out) backwards; animation-delay: calc(min(var(--i, 0), 6) * var(--stagger) + var(--dur-base)); }
:root[data-motion="on"] .range__you[data-fill="on"] { animation: sb-cell-on 1ms steps(1, end) both, sb-pop-in var(--dur-fast) var(--ease-out) both; animation-delay: calc(var(--dur-slow) + min(var(--i, 0), 6) * var(--stagger)); }
.expand > .expand__inner > .insight { margin: 0; }
/* the share sheet: a swapped-in block (a link made or turned off) fades in; the "until" date settles like a save */
:root[data-motion="on"] .modal--sheet [data-shown] { animation: sb-fade-up var(--dur-base) var(--ease-out) both; }

/* dialogs close the way they opened: the drawer slides out, the modal pops out, the scrim fades (browsers without
   allow-discrete transitions close at once, as before) */
.drawer, .modal {
  transition: opacity var(--dur-base) var(--ease-in-out), transform var(--dur-base) var(--ease-in-out),
    overlay var(--dur-base) allow-discrete, display var(--dur-base) allow-discrete;
}
.modal { transition-duration: var(--dur-fast); }
.drawer:not([open]) { opacity: 0; transform: translateX(calc(16px * min(var(--motion, 1), 1))); }
.modal:not([open]) { opacity: 0; transform: scale(0.97); }
.drawer::backdrop, .modal::backdrop { transition: opacity var(--dur-base) linear, overlay var(--dur-base) allow-discrete, display var(--dur-base) allow-discrete; }
.drawer:not([open])::backdrop, .modal:not([open])::backdrop { opacity: 0; }

/* page: moving between pages of the same shell cross-fades the content and lifts it 6px; the sidebar, topbar and
   headers keep their place, and the current-page fill glides from the old nav item to the new one. Onboarding steps
   slide the way you travel (--vt-dir, app.js). Only without reduced motion; --motion scales it (0 = instant). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.app__main, .site-main, .focus__main, .shared__main { view-transition-name: main; }
.sidebar { view-transition-name: sidebar; }
.topbar { view-transition-name: topbar; }
.site-header { view-transition-name: site-header; }
.focus__header { view-transition-name: focus-header; }
.nav__item[aria-current="page"] { view-transition-name: nav-current; }
::view-transition-group(*) { animation-duration: var(--dur-base); animation-timing-function: var(--ease-out); }
::view-transition-old(root) { animation: none; opacity: 0; }
::view-transition-new(root) { animation: none; }
::view-transition-old(main) { animation: sb-vt-out var(--dur-fast) var(--ease-out) both; }
::view-transition-new(main) { animation: sb-fade-up var(--dur-base) var(--ease-out) both; }
:root:has(:is(.focus__main, body)[data-step])::view-transition-new(main) { animation-name: sb-vt-step; }
::view-transition-old(sidebar), ::view-transition-old(topbar), ::view-transition-old(site-header), ::view-transition-old(focus-header) { animation: none; opacity: 0; }
::view-transition-new(sidebar), ::view-transition-new(topbar), ::view-transition-new(site-header), ::view-transition-new(focus-header) { animation: none; }
/* theme: the whole page cross-fades between light and dark (document.startViewTransition, app.js); the shell names
   step aside so only the root takes part, and colour transitions wait. Without view transitions every colour eases. */
.is-theme-swap :is(.app__main, .site-main, .focus__main, .sidebar, .topbar, .site-header, .focus__header, .nav__item) { view-transition-name: none; }
.is-theme-swap, .is-theme-swap *, .is-theme-swap *::before, .is-theme-swap *::after { transition: none !important; }
/* boot: whatever app.js sets while it binds a page (restored filters, glides taking over) is where the page starts */
.is-booting, .is-booting *, .is-booting *::before, .is-booting *::after { transition: none !important; }
:root.is-theme-swap::view-transition-old(root) { opacity: 1; animation: sb-vt-out var(--dur-base) linear both; }
:root.is-theme-swap::view-transition-new(root) { animation: sb-fade-in var(--dur-base) linear both; }
.is-theming, .is-theming *, .is-theming *::before, .is-theming *::after {
  transition: color var(--dur-base) linear, background-color var(--dur-base) linear, border-color var(--dur-base) linear,
    fill var(--dur-base) linear, stroke var(--dur-base) linear, box-shadow var(--dur-base) linear !important;
}

/* ---- Prototype chrome (added by app.js) --------------------------------- */
.proto-pill {
  position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 90;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
  background: var(--bg-surface); color: var(--text-secondary);
  border: var(--bw) solid var(--border-axis); border-radius: var(--radius-pill); box-shadow: var(--shadow-pop);
  font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: 500; text-decoration: none;
}
.proto-pill { transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease-out); }
.proto-pill:hover { color: var(--text); border-color: var(--border-strong); text-decoration: none; }
.proto-pill .icon { width: 13px; height: 13px; }
.preview-banner {
  position: fixed; left: 50%; bottom: var(--space-4); translate: -50% 0; z-index: 95;
  display: flex; align-items: center; gap: var(--space-3); max-width: calc(100vw - 32px);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  background: var(--bg-inverse); color: var(--text-inverse); border-radius: var(--radius-control); box-shadow: var(--shadow-pop);
  font-size: var(--fs-sm); font-weight: 500;
}
.preview-banner__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preview-banner__btn { flex: none; padding: 4px 10px; background: transparent; color: inherit; border: var(--bw) solid var(--inverse-line); border-radius: var(--radius-chip); font-size: var(--fs-xs); font-weight: 600; text-decoration: none;
  transition: background-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease-out); }
.preview-banner__btn:hover, .preview-banner__btn:focus-visible { background: var(--inverse-hover); text-decoration: none; }
:root[data-motion="on"] .preview-banner { animation: sb-fade-up var(--dur-base) var(--ease-out) both; }
:root[data-motion="on"] .preview-banner.is-leaving { animation: sb-pop-out var(--dur-fast) var(--ease-in-out) forwards; }
@media (max-width: 640px) { .preview-banner { left: auto; right: var(--space-4); translate: none; bottom: calc(var(--space-4) + 36px); } .preview-banner__text { display: none; } }

/* ---- Design page only (design.html): knobs, presets, specimens ---------- */
.knobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--space-8) var(--space-6); }
.knob-group { display: grid; gap: var(--space-3); align-content: start; }
.knob-group__title { font-family: var(--font-body); font-size: var(--fs-2xs); color: var(--text-subtle); font-weight: 500; padding-bottom: var(--space-2); border-bottom: var(--bw) solid var(--border-hairline); }
.knob { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px var(--space-3); font-size: var(--fs-sm); }
.knob__label { display: grid; min-width: 0; cursor: pointer; }
.knob__name { font-family: var(--font-body); font-size: var(--fs-2xs); color: var(--text-subtle); }
.knob__value { font-family: var(--font-body); font-size: var(--fs-2xs); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.knob__color { width: 40px; height: 28px; padding: 2px; background: var(--bg-surface); border: var(--bw) solid var(--border-input); border-radius: var(--radius-chip); cursor: pointer;
  transition: border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease-out); }
.knob__color:hover, .knob__color:focus-visible { border-color: var(--text); }
.knob__range { grid-column: 1 / -1; width: 100%; accent-color: var(--text-secondary); margin: 0; cursor: pointer; transition: accent-color var(--dur) var(--ease), opacity var(--dur-fast) linear; }
.knob__range:hover, .knob__range:focus-visible { accent-color: var(--text); }
.knob__select { grid-column: 1 / -1; }
.presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--space-4); }
.preset { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-5); border: var(--bw) solid var(--border-hairline); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.preset { transition: border-color var(--dur) var(--ease); }
.preset--active { border-color: var(--text); }
.preset__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2) var(--space-3); }
.preset__name { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--fs-xl); line-height: 1.1; }
.preset__note { font-size: var(--fs-xs); color: var(--text-secondary); }
.preset__card { display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--bg-surface); border: var(--bw) solid var(--card-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: var(--space-4); }
.swatch { display: grid; gap: var(--space-1); min-width: 0; }
.swatch__chip { height: 52px; background: var(--swatch); border-radius: var(--radius-control); box-shadow: inset 0 0 0 var(--bw) var(--border-hairline); margin-bottom: var(--space-1); }
.swatch__name { font-family: var(--font-body); font-size: var(--fs-2xs); overflow-wrap: anywhere; }
.swatch__note { font-size: var(--fs-xs); color: var(--text-subtle); }
.specimens { display: grid; gap: var(--space-10); }
.specimen { display: grid; gap: var(--space-4); padding-top: var(--space-6); border-top: var(--bw) solid var(--border-hairline); min-width: 0; }
.specimen__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); }
.specimen__head > .hint[open] { flex-basis: 100%; }
.specimen__title { font-size: var(--fs-lg); font-weight: 600; }
.specimen__classes { font-family: var(--font-body); font-size: var(--fs-2xs); color: var(--text-subtle); line-height: 1.6; max-width: 60em; }
.specimen__body { min-width: 0; }
.type-sample { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--space-2) var(--space-6); align-items: baseline; padding: var(--space-3) 0; border-bottom: var(--bw) solid var(--border-hairline); }
.type-sample__meta { font-family: var(--font-body); font-size: var(--fs-2xs); color: var(--text-subtle); }
@media (max-width: 640px) { .type-sample { grid-template-columns: minmax(0, 1fr); } }


/* =============================================================================
   7 · UTILITIES (small on purpose)
   ========================================================================== */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.stack { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.stack--xs { gap: var(--space-1); }
.stack--sm { gap: var(--space-2); }
.stack--lg { gap: var(--space-8); }
.stack--xl { gap: var(--space-12); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.cluster--sm { gap: var(--space-2); }
.cluster--between { justify-content: space-between; }
.cluster--end { justify-content: flex-end; }
.cluster--top { align-items: flex-start; }
.eyebrow { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 500; color: var(--text-secondary); line-height: 1.33; }
.page-header__eyebrow { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 500; color: var(--text-secondary); line-height: 1.33; }
.display-xl { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--fs-5xl); line-height: 1; }
.display-l { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--fs-4xl); line-height: 1.08; }
@media (max-width: 760px) { .display-xl { font-size: calc(var(--base-size) * 2.75); } .display-l { font-size: calc(var(--base-size) * 2.25); } }
.kpi { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--fs-kpi); line-height: 1; font-variant-numeric: tabular-nums; }
.lede { font-size: var(--fs-lg); line-height: 1.55; color: var(--text-secondary); max-width: 40em; }
.body-s { font-size: var(--fs-sm); }
.caption { font-size: var(--fs-xs); font-weight: 500; color: var(--text-subtle); }
.mono { font-variant-numeric: tabular-nums; }   /* domains and counts: the same family, tabular figures */
.num { font-variant-numeric: tabular-nums; }
.measure { max-width: 42em; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
.text-secondary { color: var(--text-secondary); }
.text-subtle { color: var(--text-subtle); }
.text-accent { color: var(--text-accent); }
.text-positive { color: var(--status-positive); }
.text-warning { color: var(--status-warning); }
.text-negative { color: var(--status-negative); }
.divider { height: var(--bw); margin: var(--space-6) 0; background: var(--border-hairline); border: 0; }

/* Single-column grids get an explicit shrinkable track so wide content (code, tables) never widens the page */
.page-header:not(.page-header--split), .specimens, .specimen, .card__body, .stepper__panel, .dialog__body, .hero__content,
.answer, .move__body, .source__main, .field, .fieldset, .email__body, .step, .knob-group, .preset, .preset__card,
.empty, .band__header, .section__heading, .card__heading, .dialog__heading, .split__main, .split__aside, .feed, .metric, .score__figure {
  grid-template-columns: minmax(0, 1fr);
}
.stack > * { min-width: 0; }

/* ---- Redesign 03 · dropdowns ----------------------------------------------
   app.js swaps each .select for a button + listbox (the native select stays, hidden, for the form).
   I1 select: drops and fades in, tick on the chosen option, groups from <optgroup>.
   I3 searchable: lists longer than 7 get a filter box.
   I2 inline: .select--inline gives a quiet trigger for pickers inside a sentence. */
.dropdown { position: relative; display: block; width: 100%; min-width: 0; }
.dropdown--inline { display: inline-block; width: auto; vertical-align: middle; }
.dropdown > select.select { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.dropdown__trigger {
  --field-bg: color-mix(in oklab, var(--text) 3%, var(--bg-surface));
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%;
  min-height: var(--control-md); padding: 0 var(--space-2) 0 var(--space-3);
  background: var(--field-bg); color: var(--text); border: 1px solid var(--border-input); border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,.035); cursor: pointer; text-align: left;
  font-family: "Manrope", var(--font-body); font-size: var(--fs-sm); font-weight: 500; line-height: 1.4;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.dropdown__trigger:hover { border-color: var(--border-strong); }
.dropdown__trigger:focus-visible, .dropdown.is-open .dropdown__trigger { border-color: color-mix(in oklab, var(--text) 55%, var(--bg-surface)); }
.dropdown__trigger[disabled] { background: var(--bg-well); color: var(--text-disabled); cursor: not-allowed; }
.dropdown__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown__chev { flex: none; width: 14px; height: 14px; color: var(--text-subtle); transition: transform 200ms cubic-bezier(.2,.8,.2,1); }
.dropdown.is-open .dropdown__chev { transform: rotate(180deg); }
.field--invalid .dropdown__trigger { border-color: var(--status-negative); }
.dropdown--inline .dropdown__trigger { width: auto; min-height: 28px; padding: 0 6px; gap: 4px; background: transparent; border-color: transparent; box-shadow: none; color: var(--text-secondary); font-weight: 600; }
.dropdown--inline .dropdown__trigger:hover, .dropdown--inline.is-open .dropdown__trigger { background: var(--bg-well); color: var(--text); border-color: transparent; }
.dropdown--inline .dropdown__chev { width: 12px; height: 12px; }

.dropdown__menu {
  position: fixed; z-index: 1000; min-width: 12rem; max-height: min(320px, 60vh); overflow: auto; padding: 4px;
  background: color-mix(in oklab, var(--bg-surface) 97%, transparent); backdrop-filter: blur(12px);
  border: 1px solid var(--border-input); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.14);
  font-family: "Manrope", var(--font-body); font-size: var(--fs-sm);
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top; pointer-events: none; visibility: hidden;
  transition: opacity 120ms ease-out, transform 160ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 160ms;
}
:root[data-theme="dark"] .dropdown__menu { box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.dropdown__menu.is-up { transform-origin: bottom; transform: translateY(6px) scale(.98); }
.dropdown__menu.is-open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.dropdown__group { padding: 6px 8px 4px; font-size: var(--fs-2xs); font-weight: 600; color: var(--text-subtle); }
.dropdown__sep { height: 1px; margin: 4px 0; background: var(--border-input); }
.dropdown__item {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 30px; padding: 4px 8px;
  border: 0; border-radius: 4px; background: transparent; color: var(--text); cursor: pointer; text-align: left;
  font: inherit; font-weight: 500;
}
.dropdown__item.is-active { background: var(--bg-well); }
.dropdown__item[aria-disabled="true"] { color: var(--text-disabled); cursor: default; }
.dropdown__item .dropdown__tick { flex: none; width: 14px; height: 14px; margin-left: auto; color: var(--btn-indigo, #5E6AD2); visibility: hidden; }
.dropdown__item[aria-selected="true"] .dropdown__tick { visibility: visible; }
.dropdown__search { display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 8px; margin: -4px -4px 4px; border-bottom: 1px solid var(--border-input); position: sticky; top: -4px; background: inherit; }
.dropdown__search .icon { flex: none; width: 14px; height: 14px; color: var(--text-subtle); }
.dropdown__search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; outline: none; }
.dropdown__search input::placeholder { color: var(--text-subtle); }
.dropdown__empty { padding: 8px; font-size: var(--fs-xs); color: var(--text-subtle); }

/* ---- Redesign 05 · tabs (K3 quiet) ------------------------------------------
   Tabs and segmented controls share one look: the chosen one sits on a soft field box that slides,
   the others fade back to half strength. No underline, no well behind the row. */
.tabs__list, .segmented { --tab-box: color-mix(in oklab, var(--text) 7%, var(--bg-surface)); }
.tabs__list { gap: 2px; border-bottom: 0; column-gap: 2px; }
.tabs__list--wrap, .tabs__list { row-gap: 2px; }
@media (max-width: 640px) { .tabs__list { column-gap: 2px; } }
.segmented { gap: 2px; padding: 0; background: transparent; border-radius: 6px; }
.tabs__tab, .segmented__btn {
  min-height: 28px; padding: 0 10px; border-radius: 6px; color: var(--text); opacity: .5;
  font-family: "Manrope", var(--font-body); font-size: var(--fs-sm); font-weight: 600;
  transition: opacity 100ms var(--ease), background-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease-out);
}
.tabs__tab:hover, .segmented__btn:hover { opacity: .75; color: var(--text); }
.tabs__tab[aria-selected="true"], .segmented__btn:is([aria-pressed="true"], [aria-selected="true"], [aria-current="page"]) { opacity: 1; background: var(--tab-box); box-shadow: none; }
.tabs__tab[aria-selected="true"]::after { content: none; }
.tabs__tab:focus-visible, .segmented__btn:focus-visible { opacity: 1; background: var(--tab-box); }
.tabs__glide, .segmented__thumb { background: var(--tab-box); border-radius: 6px; box-shadow: none; transition: transform 280ms cubic-bezier(.2,.8,.2,1), width 280ms cubic-bezier(.2,.8,.2,1), height 280ms cubic-bezier(.2,.8,.2,1); }
.tabs__list > .tabs__tab { position: relative; z-index: 1; }
.has-glide > .tabs__tab[aria-selected="true"], .segmented.has-glide > .segmented__btn:is([aria-pressed="true"], [aria-selected="true"], [aria-current="page"]) { background: transparent; }


/* ---- Redesign 06 · cards -------------------------------------------------------
   L1 ring card: hairline ring + soft drop, 6px corners; a flush card's header becomes a strip over the body.
   L2 structured: Manrope title, small note under it, action top right, footer buttons behind a divider.
   L3 stat tiles: every metric is its own small card with a big count-up number and a tinted note tag. */
.card, .answer, .move {
  --card-ring: color-mix(in oklab, var(--text) 9%, transparent);
  --card-drop: 0 1px 3px rgba(0,0,0,.06);
}
:root[data-theme="dark"] :is(.card, .answer, .move) { --card-ring: rgba(255,255,255,.08); --card-drop: 0 1px 3px rgba(0,0,0,.3); }
.card { border-color: transparent; border-radius: 6px; box-shadow: 0 0 0 1px var(--card-ring), var(--card-drop); --card-pad: var(--space-5); }
.card--well, .card--outline, .card--callout { box-shadow: 0 0 0 1px var(--card-ring); }
.card--well { box-shadow: none; }
.card { transition: box-shadow 200ms var(--ease), transform 200ms cubic-bezier(.2,.8,.2,1); }
a.card:hover, .card--link:hover { border-color: transparent; transform: translateY(-2px); box-shadow: 0 0 0 1px color-mix(in oklab, var(--text) 16%, transparent), 0 8px 20px rgba(0,0,0,.12); }
.card--selected { border-color: transparent; box-shadow: inset 0 0 0 1.5px #5E6AD2, var(--card-drop); }
.card__title { font-family: "Manrope", var(--font-body); font-size: var(--fs-md); font-weight: 700; letter-spacing: -.005em; }
.card__title--display { font-weight: 800; letter-spacing: -.02em; }
.card__eyebrow, .card__meta { font-family: "Manrope", var(--font-body); font-size: var(--fs-xs); color: var(--text-subtle); font-weight: 500; }
.card__header { margin-bottom: var(--space-4); align-items: center; }
.card__footer { justify-content: flex-end; margin-top: var(--space-4); padding-top: var(--space-3); border-top-color: color-mix(in oklab, var(--text) 7%, transparent); }
.card__footer > :first-child:not(.btn) { margin-right: auto; }
.card--flush > .card__header { margin: 0; padding: var(--space-3) var(--card-pad); border-bottom: 1px solid color-mix(in oklab, var(--text) 7%, transparent); }
.card--flush > .card__header .card__title { font-size: var(--fs-sm); }
.card--flush > .card__footer { padding: var(--space-3) var(--card-pad); }
.answer, .move { border-radius: 6px; }

/* L3 · stat tiles */
.metrics, .metrics--divided { --metric-min: 140px; gap: var(--space-2); margin-left: 0; clip-path: none; }
.metrics--divided > .metric { border-left: 0; }
.metrics > .metric.metric {
  padding: var(--space-3); border-radius: 6px; background: var(--bg-surface);
  box-shadow: 0 0 0 1px var(--card-ring, color-mix(in oklab, var(--text) 9%, transparent)), 0 1px 3px rgba(0,0,0,.06);
  transition: transform 200ms cubic-bezier(.2,.8,.2,1), box-shadow 200ms var(--ease);
}
.metrics > .metric.metric:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px color-mix(in oklab, var(--text) 16%, transparent), 0 8px 20px rgba(0,0,0,.12); }
.metric { gap: 2px; }
.metric__label { font-family: "Manrope", var(--font-body); font-size: var(--fs-xs); font-weight: 600; color: var(--text-subtle); }
.metric__value { font-family: "Manrope", var(--font-body); font-weight: 800; letter-spacing: -.02em; margin: 2px 0 4px; }
.metric__note {
  justify-self: start; display: inline-flex; align-items: center; min-height: 20px; padding: 0 6px; border-radius: 4px;
  font-size: var(--fs-2xs); font-weight: 700; color: #4C57C0; background: color-mix(in oklab, #5E6AD2 14%, transparent);
}
:root[data-theme="dark"] .metric__note { color: #9AA2F0; }
.tag { border-radius: 4px; font-family: "Manrope", var(--font-body); }

/* Redesign 06b · L1 everywhere: any card with a header gets the ring card's header strip,
   a small title on a hairline over the body, notes and actions on the right. */
.card > .card__header {
  margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) var(--card-pad);
  padding: 10px var(--card-pad); min-height: 40px; align-items: center; flex-wrap: nowrap;
  border-bottom: 1px solid color-mix(in oklab, var(--text) 7%, transparent);
}
.card--flush > .card__header { margin: 0; }
.card > .card__header .card__heading { flex: 1; display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.card > .card__header .card__title { font-size: var(--fs-sm); font-weight: 700; }
.card > .card__header .card__title--display { font-size: var(--fs-md); }
.card > .card__header .card__eyebrow { order: 2; }
.card > .card__header > :not(.card__heading) { flex: none; }
.card > .card__header .btn { min-height: 26px; }
.card > .card__footer { margin: var(--card-pad) calc(var(--card-pad) * -1) calc(var(--card-pad) * -1); padding: 10px var(--card-pad); }
.card--flush > .card__footer { margin: 0; }

/* Redesign 06b · fixes (moves) and answers as ring cards: title strip on top, actions or text below a hairline */
.move {
  grid-template-columns: calc(8px + var(--space-4)) minmax(0, 1fr); gap: 0 10px; padding: 0;
  border-color: transparent; border-radius: 6px; box-shadow: 0 0 0 1px var(--card-ring), var(--card-drop);
}
.moves--compact .move { padding: 0; }
.move::before { justify-self: end; margin-top: 16px; }
.move > .move__body { padding: 10px var(--space-4) 10px 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-3); }
.move > .move__body > .move__title { flex: 1 1 12rem; font-family: "Manrope", var(--font-body); font-size: var(--fs-sm); font-weight: 700; }
.move > .move__body > .move__meta { font-size: var(--fs-xs); color: var(--text-subtle); }
.move > .move__body > .move__why { flex-basis: 100%; }
.move > .move__actions {
  grid-column: 1 / -1; justify-content: flex-end; padding: 8px var(--space-4);
  border-top: 1px solid color-mix(in oklab, var(--text) 7%, transparent);
}
.move--next { background: var(--bg-surface); border-color: transparent; box-shadow: inset 0 0 0 1.5px #5E6AD2, var(--card-drop); }
.move--next::before { background: #5E6AD2; box-shadow: none; }
.move[data-tab]:hover, .move[data-open]:hover { border-color: transparent; box-shadow: 0 0 0 1px color-mix(in oklab, var(--text) 16%, transparent), 0 8px 20px rgba(0,0,0,.12); }

.answer:not(.answer--flat) { padding: 0 0 var(--space-4); border-color: transparent; border-radius: 6px; box-shadow: 0 0 0 1px var(--card-ring), var(--card-drop); }
.answer:not(.answer--flat) > * { margin-inline: var(--space-4); }
.answer:not(.answer--flat) > .answer__head { margin: 0; padding: 10px var(--space-4); border-bottom: 1px solid color-mix(in oklab, var(--text) 7%, transparent); font-family: "Manrope", var(--font-body); }
.answer__head .answer__question { font-weight: 700; color: var(--text); }
.answer__head :is(.answer__date, .answer__meta):last-child { margin-left: auto; }
.answer__text { border-left: 0; padding-left: 0; }
.answer__note { border-radius: 6px; }

/* ---- Redesign 07 · badges and tags ------------------------------------------------
   M1 status: tinted box with icon; mint = good, lime = heads-up, coral = bad, indigo = in progress, grey = neutral.
   M2 tags: neutral box with a hairline and a small coloured dot; removable chips share the look.
   M3 counts: small hairline number box; strong counts are indigo; solid lime/mint for New/Done. */
:root {
  --c-mint-ink: #0E8A6A; --c-lime-ink: #557000; --c-coral-ink: #C8432A; --c-indigo-ink: #4C57C0; --c-grey-ink: var(--text-secondary);
}
:root[data-theme="dark"] { --c-mint-ink: #2DD4A7; --c-lime-ink: #C6F432; --c-coral-ink: #FF8467; --c-indigo-ink: #9AA2F0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-mint-ink: #2DD4A7; --c-lime-ink: #C6F432; --c-coral-ink: #FF8467; --c-indigo-ink: #9AA2F0; } }

.status, .confidence, .fact-status, .source-status, .bot-status {
  --c: var(--c-grey-ink); --tint: color-mix(in oklab, var(--text) 6%, transparent);
  min-height: 22px; padding: 0 7px; gap: 4px; border-radius: 4px;
  background: var(--tint); color: var(--c);
  font-family: "Manrope", var(--font-body); font-size: var(--fs-xs); font-weight: 600;
}
.status .icon, .confidence .icon, .fact-status .icon, .source-status .icon, .bot-status .icon { width: 12px; height: 12px; }
:is(.status--positive, .fact-status--correct, .source-status--on, .bot-status--ok, .confidence--up) { --c: var(--c-mint-ink); --tint: color-mix(in oklab, #2DD4A7 15%, transparent); }
:is(.status--warning, .fact-status--missing, .source-status--competitor, .bot-status--error, .confidence--down) { --c: var(--c-lime-ink); --tint: color-mix(in oklab, #C6F432 22%, transparent); }
:is(.status--negative, .status--critical, .fact-status--wrong, .source-status--missing, .bot-status--blocked) { --c: var(--c-coral-ink); --tint: color-mix(in oklab, #FF6B4A 15%, transparent); }
:is(.status--neutral, .fact-status--none, .source-status--theirs, .confidence--unclear) { --c: var(--c-grey-ink); font-weight: 600; }
.status--busy, .status--running { --c: var(--c-indigo-ink); --tint: color-mix(in oklab, #5E6AD2 15%, transparent); }

.tag {
  min-height: 22px; padding: 0 8px; gap: 6px; border-radius: 4px;
  background: color-mix(in oklab, var(--text) 4%, var(--bg-surface)); color: var(--text-secondary);
  box-shadow: inset 0 0 0 1px var(--border-axis); font-size: var(--fs-xs); font-weight: 600;
}
.tag.engine::before, .tag--dot::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 1.5px; background: var(--series, #5E6AD2); }
.tag--recommended { background: color-mix(in oklab, #5E6AD2 10%, var(--bg-surface)); color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in oklab, #5E6AD2 30%, transparent); }
.tag--recommended::before { width: 6px; height: 6px; background: #5E6AD2; box-shadow: none; border-radius: 1.5px; }
.tag--new { background: #C6F432; color: #0F0F10; box-shadow: none; font-weight: 700; }
.tag--locked, .tag--outline { background: transparent; }

.chip { min-height: 26px; padding: 0 8px; border-radius: 4px; background: color-mix(in oklab, var(--text) 4%, var(--bg-surface)); border-color: var(--border-axis); font-family: "Manrope", var(--font-body); font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); }
button.chip:hover, a.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip[aria-pressed="true"] { background: #5E6AD2; border-color: #5E6AD2; color: #fff; }
.chip[aria-pressed="true"] .chip__count { color: rgba(255,255,255,.75); }
.chip--removable { padding-right: 4px; }
.chip__remove { width: 18px; height: 18px; border-radius: 3px; color: var(--text-subtle); }
.chip__remove .icon { width: 11px; height: 11px; }
.chip.is-removing { opacity: 0; transform: scale(.9); transition: opacity 150ms, transform 150ms; }
.chips { border-radius: 6px; }

.badge {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 4px;
  background: color-mix(in oklab, var(--text) 4%, var(--bg-surface)); box-shadow: inset 0 0 0 1px var(--border-axis); color: var(--text-secondary);
  font-family: "Manrope", var(--font-body); font-size: var(--fs-2xs); font-weight: 700;
}
.badge--strong { background: #5E6AD2; box-shadow: none; color: #fff; }
.tabs__tab[aria-selected="true"] .badge, .nav__item[aria-current] .badge { background: #5E6AD2; box-shadow: none; color: #fff; }
@keyframes sb-badge-pop { 40% { transform: scale(1.25); } }
.badge.is-bumped, .badge[data-bumped] { animation: sb-badge-pop 350ms cubic-bezier(.2,.8,.2,1.4); }
.status, .confidence, .fact-status, .source-status, .bot-status, .tag, .badge { justify-self: start; align-self: center; width: max-content; max-width: 100%; }

/* ---- Redesign 08 · alerts, banners, toasts ---------------------------------------
   One line each, never wrapped: text ends in an ellipsis and shows in full on hover.
   Alert: ring card with a tinted icon tile. Banner: tinted line with an even hairline. Toast: ring card, tone icon, close. */
.alert {
  --tone: #5E6AD2; --tone-ink: var(--c-indigo-ink);
  grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 2px var(--space-3);
  padding: var(--space-3); background: var(--bg-surface); border: 0; border-radius: 6px;
  box-shadow: 0 0 0 1px var(--card-ring, color-mix(in oklab, var(--text) 9%, transparent)), 0 1px 3px rgba(0,0,0,.06);
}
.alert--critical { --tone: #FF6B4A; --tone-ink: var(--c-coral-ink); }
.alert--warning { --tone: #C6F432; --tone-ink: var(--c-lime-ink); }
.alert--positive { --tone: #2DD4A7; --tone-ink: var(--c-mint-ink); }
.alert > .icon {
  grid-row: 1 / span 3; box-sizing: border-box; width: 28px; height: 28px; padding: 7px; margin: 0; border-radius: 6px;
  background: color-mix(in oklab, var(--tone) 16%, transparent); color: var(--tone-ink); align-self: start;
}
.alert:not(:has(> .alert__body)) { padding-block: var(--space-3); }
.alert:not(:has(> .alert__body)) > .icon { align-self: center; }
.alert__title { font-family: "Manrope", var(--font-body); font-size: var(--fs-sm); font-weight: 700; }
.alert__body { font-size: var(--fs-sm); }
.alert__title, .alert__body, .banner__body, .toast__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.banner {
  --tone: #5E6AD2; --tone-ink: var(--c-indigo-ink);
  align-items: center; min-height: 36px; padding: 6px var(--space-3); border-radius: 6px;
  background: color-mix(in oklab, var(--tone) 9%, var(--bg-surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 26%, transparent);
  color: var(--text); font-family: "Manrope", var(--font-body); font-weight: 500; line-height: 1.4;
}
.banner > .icon { margin: 0; width: 16px; height: 16px; color: var(--tone-ink); }
.banner:has(> .banner__actions) { flex-wrap: nowrap; }
.banner__body { display: flex; align-items: center; gap: var(--space-2); }
.banner[data-simulated-notice] { box-shadow: none; background: none; min-height: 0; }
.banner.is-leaving { opacity: 0; transform: translateY(-4px); transition: opacity 180ms, transform 180ms; }

.toasts { left: 50%; right: auto; bottom: var(--space-4); transform: translateX(-50%); width: min(380px, calc(100vw - 24px)); justify-items: stretch; }
.toast {
  --tone-ink: var(--c-mint-ink);
  max-width: none; gap: 10px; padding: 8px 6px 8px 12px; border-radius: 6px;
  background: var(--bg-surface); color: var(--text);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--text) 12%, transparent), 0 10px 30px rgba(0,0,0,.18);
  font-family: "Manrope", var(--font-body); font-size: var(--fs-sm); font-weight: 600;
  animation: sb-toast-in 350ms cubic-bezier(.2,.8,.2,1);
}
:root[data-theme="dark"] .toast { box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 10px 30px rgba(0,0,0,.45); }
@keyframes sb-toast-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.toast--critical { --tone-ink: var(--c-coral-ink); }
.toast--info { --tone-ink: var(--c-indigo-ink); }
.toast > .icon { flex: none; width: 16px; height: 16px; color: var(--tone-ink); }
.toast__text { flex: 1; }
.toast__action {
  flex: none; margin: 0; min-height: 26px; padding: 0 10px; border-radius: 6px; text-decoration: none;
  background: color-mix(in oklab, var(--text) 5%, var(--bg-surface)); box-shadow: inset 0 0 0 1px var(--border-input); font-size: var(--fs-xs);
}
.toast__action:hover, .toast__action:focus-visible { background: var(--bg-well); }
.toast__close { flex: none; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--text-subtle); cursor: pointer; }
.toast__close:hover { background: var(--bg-well); color: var(--text); }
.toast__close .icon { width: 14px; height: 14px; }
.alert__label { color: var(--tone-ink); font-family: "Manrope", var(--font-body); font-size: var(--fs-2xs); font-weight: 700; }

/* ---- Redesign 09 · dialogs ------------------------------------------------------
   O1 dialog: blurred scrim, zooms in, ring card with a header strip and a footer well.
   O2 step dialog: [data-steps] shows one .dialog__step at a time, sliding along, with "1 / 3" and arrows in the footer.
   O3 sheet: the drawer slides in from the right; on phones it rises from the bottom. */
.drawer, .modal { background: var(--bg-surface); box-shadow: 0 0 0 1px color-mix(in oklab, var(--text) 10%, transparent), 0 20px 50px rgba(0,0,0,.22); font-family: "Manrope", var(--font-body); }
:root[data-theme="dark"] :is(.drawer, .modal) { box-shadow: 0 0 0 1px rgba(255,255,255,.09), 0 20px 50px rgba(0,0,0,.5); }
.drawer::backdrop, .modal::backdrop { background: rgba(0,0,0,.35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal { width: min(420px, calc(100vw - 24px)); border-radius: 6px; }
.modal:not([open]) { transform: scale(0.95); }
.modal[open] { animation: sb-dialog-in 200ms cubic-bezier(.2,.8,.2,1); }
@keyframes sb-dialog-in { from { opacity: 0; transform: scale(.95); } }
.dialog__header { align-items: center; gap: var(--space-2); padding: 8px 8px 8px var(--space-4); min-height: 44px; border-bottom: 1px solid color-mix(in oklab, var(--text) 7%, transparent); }
.dialog__title { font-family: "Manrope", var(--font-body); font-size: var(--fs-sm); font-weight: 700; line-height: 1.3; }
.dialog__eyebrow { font-family: "Manrope", var(--font-body); font-size: var(--fs-2xs); }
.dialog__header .btn--icon { min-height: 28px; width: 28px; }
.dialog__body { gap: var(--space-4); padding: var(--space-4); }
.dialog__footer { align-items: center; gap: 6px; padding: 10px var(--space-4); background: color-mix(in oklab, var(--text) 3%, var(--bg-surface)); border-top: 1px solid color-mix(in oklab, var(--text) 7%, transparent); }
.dialog__footer .btn { min-height: 30px; }

.drawer { width: min(440px, 100vw); border-left: 0; border-radius: 6px 0 0 6px; }
.drawer:not([open]) { transform: translateX(100%); }
.drawer[open] { animation: sb-sheet-in 300ms cubic-bezier(.2,.8,.2,1); }
@keyframes sb-sheet-in { from { transform: translateX(100%); } }
@media (max-width: 640px) {
  .drawer { inset: auto 0 0 0; width: 100vw; height: auto; max-height: 85dvh; border-radius: 6px 6px 0 0; }
  .drawer:not([open]) { transform: translateY(100%); }
  .drawer[open] { animation-name: sb-sheet-up; }
  @keyframes sb-sheet-up { from { transform: translateY(100%); } }
}

.dialog__steps { position: relative; overflow: hidden; display: grid; padding: 0; }
.dialog__steps > .dialog__step { grid-area: 1 / 1; display: grid; gap: var(--space-4); align-content: start; padding: var(--space-4); transition: transform 300ms cubic-bezier(.2,.8,.2,1), opacity 200ms var(--ease); }
.dialog__steps > .dialog__step[aria-hidden="true"] { visibility: hidden; opacity: 0; pointer-events: none; }
.dialog__stepnav { margin-right: auto; display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.dialog__stepnav .btn { min-height: 26px; width: 26px; }
.dialog__stepnav .btn[disabled] { background: transparent; opacity: .35; }

/* ---- Redesign 10 · tables -----------------------------------------------------------
   P1 records: ring card, quiet header band, 38px rows, row hover, your row tinted indigo, sortable headers, summary footer.
   P2 data: filter above, picked rows tinted indigo, pager as the footer.
   P3 changes: gained rows tinted mint, lost rows tinted coral and struck through. */
.table-wrap { border: 0; border-radius: 6px; box-shadow: 0 0 0 1px var(--card-ring, color-mix(in oklab, var(--text) 9%, transparent)), 0 1px 3px rgba(0,0,0,.06); }
.card .table-wrap { box-shadow: none; border-radius: 0; }
.table { font-family: "Manrope", var(--font-body); font-size: var(--fs-sm); }
.table th, .table td { padding: 9px var(--space-3); border-bottom-color: color-mix(in oklab, var(--text) 6%, transparent); vertical-align: middle; }
.table thead th { height: 34px; padding-block: 0; background: color-mix(in oklab, var(--text) 3%, var(--bg-surface)); color: var(--text-subtle); font-size: var(--fs-xs); border-bottom-color: color-mix(in oklab, var(--text) 8%, transparent); }
.table tbody tr:hover > * { background: color-mix(in oklab, var(--text) 3%, var(--bg-surface)); }
.table__row--you > * { background: color-mix(in oklab, #5E6AD2 9%, var(--bg-surface)); color: var(--text); font-weight: 700; }
.table tbody tr.table__row--you:hover > * { background: color-mix(in oklab, #5E6AD2 13%, var(--bg-surface)); }
.table__row--selected > *, .table tbody tr:has(> td > .choice__input:checked) > * { background: color-mix(in oklab, #5E6AD2 12%, var(--bg-surface)); }
.table .table__group > th, .table .table__group > td { font-size: var(--fs-xs); color: var(--text-subtle); }
.table th[data-sort] { cursor: pointer; user-select: none; transition: color 150ms var(--ease); }
.table th[data-sort]:hover, .table th[aria-sort] { color: var(--text); }
.table th[data-sort]::after { content: "↓"; display: inline-block; margin-left: 4px; opacity: 0; transition: transform 200ms var(--ease), opacity 150ms; }
.table th[data-sort]:hover::after { opacity: .4; }
.table th[aria-sort]::after { opacity: 1; }
.table th[aria-sort="ascending"]::after { transform: rotate(180deg); }
.pager { padding: 8px var(--space-3); border-top: 1px solid color-mix(in oklab, var(--text) 7%, transparent); background: color-mix(in oklab, var(--text) 3%, var(--bg-surface)); font-family: "Manrope", var(--font-body); font-size: var(--fs-xs); }
.pager .btn { min-height: 26px; }
.leaderboard__row--you .leaderboard__name::before { background: #5E6AD2; box-shadow: none; }
.leaderboard__row--you .leaderboard__bar::before { background: #5E6AD2; }
.leaderboard__row--you { background: color-mix(in oklab, #5E6AD2 9%, transparent); border-radius: 4px; }
.leaderboard__bar, .leaderboard__bar::before { border-radius: 2px; }

.diff { border: 0; border-radius: 6px; box-shadow: 0 0 0 1px var(--card-ring, color-mix(in oklab, var(--text) 9%, transparent)); font-family: "Manrope", var(--font-body); }
.diff > .diff__row { border-bottom: 1px solid color-mix(in oklab, var(--text) 5%, transparent); }
.diff > .diff__row:last-child { border-bottom: 0; }
.diff__row--add { background-color: color-mix(in oklab, #2DD4A7 11%, var(--bg-surface)); }
.diff__row--add .diff__sign { color: var(--c-mint-ink); font-weight: 700; }
.diff__row--del { background-color: color-mix(in oklab, #FF6B4A 10%, var(--bg-surface)); }
.diff__row--del .diff__sign { color: var(--c-coral-ink); font-weight: 700; }
.diff__row--del .diff__text { color: var(--c-coral-ink); text-decoration-color: color-mix(in oklab, #FF6B4A 60%, transparent); }

/* ---- Redesign 11 · sidebar (Q1) -----------------------------------------------------
   Business at the top, quiet items (others at 60%, the current one on a soft box), badges coloured by meaning,
   free-week card with a mint meter and the person with log out at the bottom. */
.sidebar { gap: var(--space-4); padding: var(--space-2); font-family: "Manrope", var(--font-body); }
.sidebar__workspace { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px; border-radius: 6px; color: var(--text); text-decoration: none; transition: background-color 150ms var(--ease); }
.sidebar__workspace:hover { background: color-mix(in oklab, var(--text) 6%, var(--bg-surface)); text-decoration: none; }
.sidebar__logo { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 5px; background: #5E6AD2; color: #fff; font-size: 11px; font-weight: 800; }
.sidebar__ws-text { flex: 1; min-width: 0; display: grid; }
.sidebar__ws-name { font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__ws-place { font-size: var(--fs-2xs); color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__workspace > .icon { width: 14px; height: 14px; color: var(--text-subtle); }
.nav { gap: 1px; }
.nav__label { padding: var(--space-3) 10px 4px; font-size: var(--fs-2xs); font-weight: 600; }
.nav__item { min-height: 32px; gap: 10px; padding: 0 10px; border-radius: 6px; color: var(--text); opacity: .6; font-size: var(--fs-sm); font-weight: 600; transition: opacity 100ms var(--ease), background-color 150ms var(--ease); }
.nav__item .icon { width: 16px; height: 16px; }
.nav__item:hover { opacity: .85; background: transparent; color: var(--text); }
.nav__item[aria-current="page"] { opacity: 1; background: color-mix(in oklab, var(--text) 6%, var(--bg-surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--text) 5%, transparent); font-weight: 700; }
.nav__item:focus-visible { opacity: 1; background: color-mix(in oklab, var(--text) 6%, var(--bg-surface)); }
.nav__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav__item .badge { box-shadow: none; }
.nav__item[href="/app/fixes"] .badge { background: #C6F432; color: #0F0F10; }
.nav__item[href="/app/details"] .badge, .nav__item[href="/app/site-check"] .badge { background: color-mix(in oklab, #FF6B4A 18%, transparent); color: var(--c-coral-ink); }
.nav__item[aria-current="page"] .badge { background: #5E6AD2; color: #fff; }
.sidebar__footer { gap: 6px; padding: 0; border-top: 0; font-size: var(--fs-xs); }
.sidebar__trial {
  display: grid; gap: 8px; padding: 10px; border-radius: 6px; color: var(--text-secondary); text-decoration: none; white-space: nowrap;
  background: var(--bg-surface); box-shadow: 0 0 0 1px var(--card-ring, color-mix(in oklab, var(--text) 9%, transparent));
  transition: box-shadow 150ms var(--ease);
}
.sidebar__trial:hover { text-decoration: none; box-shadow: 0 0 0 1px color-mix(in oklab, var(--text) 16%, transparent); }
.sidebar__trial b { color: var(--text); }
.sidebar__meter { display: block; height: 4px; border-radius: 2px; background: color-mix(in oklab, var(--text) 8%, transparent); overflow: hidden; }
.sidebar__meter > i { display: block; width: calc(var(--pct, 0) * 1%); height: 100%; border-radius: 2px; background: #2DD4A7; }
.sidebar__plan { padding: 0 10px; }
.sidebar__user { display: flex; align-items: center; gap: 4px; }
.sidebar__me { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 8px; border-radius: 6px; color: var(--text); text-decoration: none; font-size: var(--fs-xs); font-weight: 600; }
.sidebar__me:hover { background: color-mix(in oklab, var(--text) 6%, var(--bg-surface)); text-decoration: none; }
.sidebar__me-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__me .avatar { width: 24px; height: 24px; border-radius: 5px; font-size: 10px; }
.topbar { font-family: "Manrope", var(--font-body); }
/* positions and offsets set by app.js as custom properties (the check allows only those) */
.dropdown__menu { left: var(--dd-x, 0px); top: var(--dd-top, auto); bottom: var(--dd-bottom, auto); min-width: max(12rem, var(--dd-min-w, 0px)); }
.dialog__steps > .dialog__step { transform: translateX(var(--step-x, 0%)); }
.table[data-sortable] tbody tr { transform: translateY(var(--sort-dy, 0px)); transition: transform 300ms cubic-bezier(.2,.8,.2,1); }
.table[data-sortable] tbody tr.is-resorting { transition: none; }
.select--inline { width: auto; }
.toast--positive { --tone-ink: var(--c-mint-ink); }

/* ---- Redesign 11b · logo and collapsible sidebar ----------------------------------------
   The head holds the mark and the collapse button. Collapsed (⌘B, remembered in the sb_sidebar cookie), the sidebar
   is a 56px rail of icons; each shows its name on hover. Phones keep the slide-in menu. */
.sidebar__head { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 36px; padding: 0 2px 0 8px; }
.sidebar__head .brand { font-family: "Manrope", var(--font-body); font-size: 16px; font-weight: 800; gap: 8px; }
.sidebar__head .brand__mark { width: 20px; height: 20px; }
.sidebar__collapse .icon { transition: transform 250ms cubic-bezier(.2,.8,.2,1); }
.app { transition: grid-template-columns 250ms cubic-bezier(.2,.8,.2,1); }
@media (min-width: 961px) {
  .app[data-sidebar="collapsed"] { grid-template-columns: 56px minmax(0, 1fr); }
  .app[data-sidebar="collapsed"] .sidebar { overflow: visible; }
  .app[data-sidebar="collapsed"] :is(.brand__word, .sidebar__ws-text, .sidebar__workspace > .icon, .nav__text, .sidebar__trial, .sidebar__plan, .sidebar__me-name, .sidebar__user > .btn) { display: none; }
  .app[data-sidebar="collapsed"] .sidebar__head { flex-direction: column; padding: 4px 0; gap: 6px; }
  .app[data-sidebar="collapsed"] .sidebar__head .brand { justify-content: center; }
  .app[data-sidebar="collapsed"] .sidebar__collapse .icon { transform: rotate(180deg); }
  .app[data-sidebar="collapsed"] :is(.sidebar__workspace, .nav__item, .sidebar__me) { justify-content: center; padding: 0; }
  .app[data-sidebar="collapsed"] .nav__label { height: 1px; padding: 0; margin: 8px 10px; overflow: hidden; color: transparent; background: color-mix(in oklab, var(--text) 8%, transparent); }
  .app[data-sidebar="collapsed"] .nav__item .badge { position: absolute; top: 3px; right: 5px; min-width: 8px; width: 8px; height: 8px; padding: 0; font-size: 0; border-radius: 2px; }
  .app[data-sidebar="collapsed"] .sidebar [data-tip] { position: relative; }
  .app[data-sidebar="collapsed"] .sidebar [data-tip]:hover::after {
    content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); z-index: 50;
    padding: 4px 8px; border-radius: 4px; white-space: nowrap; pointer-events: none;
    background: var(--bg-inverse); color: var(--text-inverse); font-size: var(--fs-xs); font-weight: 600; opacity: 1;
  }
  .app[data-sidebar="collapsed"] .nav__item:hover { opacity: 1; }
}
@media (max-width: 960px) { .sidebar__head { display: none; } }

/* ---- Redesign 12 · top bar, page headers, section headers ------------------------------
   R1/R2 top bar: 48px, sidebar toggle, hairline, breadcrumb (business › page), live dot by "last checked".
   R1 page header: compact bold title, one muted line, actions on the right. R3 sections: numbered small headings. */
:root { --topbar-height: 48px; }
.topbar { gap: 8px; padding: 0 var(--space-3); font-family: "Manrope", var(--font-body); }
.topbar__sep { width: 1px; height: 16px; background: var(--border-input); flex: none; }
.topbar__crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-sm); white-space: nowrap; }
.topbar__crumbs .icon { width: 12px; height: 12px; color: var(--text-subtle); flex: none; }
.topbar__crumbs .topbar__name { color: var(--text-secondary); font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
.topbar__crumbs .topbar__name:hover { color: var(--text); }
.topbar__crumbs .topbar__name:only-child { color: var(--text); font-weight: 700; }
.topbar__page { font-weight: 700; color: var(--text); }
.topbar__updated { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; }
.topbar__dot { width: 6px; height: 6px; border-radius: 50%; background: #2DD4A7; flex: none; }
.topbar__updated.is-live .topbar__dot { background: #5E6AD2; animation: sb-live-dot 1.6s ease-out infinite; }
.topbar__updated.is-live > .pulse { display: none; }
@keyframes sb-live-dot { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, #5E6AD2 50%, transparent); } 100% { box-shadow: 0 0 0 6px transparent; } }
.topbar .avatar { width: 28px; height: 28px; border-radius: 6px; font-size: 11px; }
@media (max-width: 960px) { .topbar .topbar__toggle, .topbar__sep { display: none; } }

.page-header { gap: 4px; margin-bottom: var(--space-8); grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-6); }
.page-header > * { grid-column: 1; }
.page-header__title { font-family: "Manrope", var(--font-body); font-size: clamp(24px, 2.4vw, 30px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.page-header__lede, .page-header__meta { font-size: var(--fs-sm); color: var(--text-subtle); line-height: 1.45; }
.page-header__actions { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin: 0; gap: 6px; }
.page-header > :is(.page-header__scores, .page-header__score) { grid-column: 1 / -1; margin-top: var(--space-4); }
@media (max-width: 640px) { .page-header__actions { grid-column: 1; grid-row: auto; margin-top: var(--space-3); } }

.app__main { counter-reset: sb-section; }
.section { margin-top: var(--space-10); }
.section__header { align-items: baseline; flex-wrap: nowrap; gap: 10px; margin-bottom: var(--space-3); padding-bottom: 10px; border-bottom: 1px solid color-mix(in oklab, var(--text) 7%, transparent); }
.section__heading { display: flex; align-items: baseline; gap: 10px; flex: 1 1 auto; }
.section__title { font-family: "Manrope", var(--font-body); font-size: var(--fs-md); font-weight: 700; white-space: nowrap; }
.app__main .section__title::before { counter-increment: sb-section; content: counter(sb-section, decimal-leading-zero); margin-right: 10px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.section__lede { font-size: var(--fs-sm); color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.section__actions { gap: 4px; }
.section__actions > a.btn--ghost { color: var(--text-subtle); font-size: var(--fs-xs); }
.section__actions > a.btn--ghost:hover { color: var(--text); }
@media (max-width: 640px) { .section__header { flex-wrap: wrap; } .section__lede { display: none; } }

/* ---- Fix · hints open as a small ring-card popover instead of pushing text into the row ---- */
.hint, .hint[open] { position: relative; display: inline-block; margin: 0 0 0 var(--space-2); vertical-align: middle; }
.hint__body {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; width: max-content; max-width: min(280px, 80vw);
  padding: 8px 10px; border-radius: 6px; background: var(--bg-surface); color: var(--text-secondary);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--text) 12%, transparent), 0 8px 24px rgba(0,0,0,.14);
  font-family: "Manrope", var(--font-body); font-size: var(--fs-xs); font-weight: 500; line-height: 1.45; white-space: normal;
  animation: sb-hint-in 160ms cubic-bezier(.2,.8,.2,1);
}
@keyframes sb-hint-in { from { opacity: 0; transform: translateY(-4px); } }
:is(.card__header, .section__header, .section__actions, .dialog__header, .page-header__actions) .hint__body { left: auto; right: 0; }
.card > .card__header .card__heading { flex-wrap: nowrap; min-width: 0; }
.card > .card__header .card__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ---- Fix · with scores under the title, the page actions sit below them, not beside */
.page-header:has(> .page-header__scores, > .page-header__score) > .page-header__actions { grid-column: 1 / -1; grid-row: auto; margin-top: var(--space-4); align-self: start; }
:is(.card__header, .section__header, .page-header, .dialog__header):has(.hint[open]) { position: relative; z-index: 20; }
.card:has(.hint[open]) { z-index: 20; }

/* the business's own website icon covers the initial once it loads; app.js removes it when it fails */
.sidebar__logo { position: relative; overflow: hidden; }
.sidebar__logo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 2px; background: #fff; border-radius: inherit; }

/* score cards: the two metrics sit beside the main score, stacked, not under a divider */
.page-header__scores > .card > .card__body { grid-template-columns: auto minmax(0, 11rem); grid-template-rows: auto; align-items: center; justify-content: space-between; gap: var(--space-4); }
.page-header__scores > .card > .card__body > .score { align-self: center; }
.page-header__scores .metrics--divided { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-top: 0; border-top: 0; margin: 0; }
.page-header__scores .metrics > .metric.metric { padding: 8px 10px; }
.page-header__scores .metric__value { font-size: var(--fs-xl); margin: 0; }
@media (max-width: 640px) {
  .page-header__scores > .card > .card__body { grid-template-columns: minmax(0, 1fr); }
  .page-header__scores .metrics--divided { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.page-header__scores .score { flex-wrap: nowrap; gap: var(--space-4); }
.page-header__scores .score__square { --sq: 18px; --sq-gap: 3px; }
.page-header__scores .score__figure { flex: 0 1 auto; }
.page-header__scores .score--lg .score__num { font-size: clamp(36px, 3.6vw, 52px); }

/* ---- Redesign 13 · loading and empty ------------------------------------------------
   T1 loaders: indigo pixel mark, shimmering words, ticking time. T2 .skeleton bars shimmer where content will land.
   T3 tasks: rows inside one ring card; running ring indigo, done mint, failed coral, error lime; tinted pills.
   T4 empty: ring card, lime-tinted icon tile, one line, actions. */
.pixels > i { background: #5E6AD2; }
.loader__cell--on { background: #5E6AD2; }
.loader__text, .busy__label { font-family: "Manrope", var(--font-body); font-weight: 600; }

.skeleton { display: block; height: 12px; border-radius: 4px; background: linear-gradient(90deg, color-mix(in oklab, var(--text) 5%, var(--bg-surface)) 0%, color-mix(in oklab, var(--text) 11%, var(--bg-surface)) 50%, color-mix(in oklab, var(--text) 5%, var(--bg-surface)) 100%) 0 0 / 200% 100%; }
:root[data-motion="on"] .skeleton { animation: sb-skeleton 1.4s ease-in-out infinite; }
@keyframes sb-skeleton { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.skeleton--block { height: 36px; border-radius: 6px; }

.tasks { gap: 0; padding: 4px; border-radius: 6px; background: var(--bg-surface); box-shadow: 0 0 0 1px var(--card-ring, color-mix(in oklab, var(--text) 9%, transparent)); }
.card .tasks { box-shadow: none; padding: 0; }
.task { min-height: 36px; padding: 2px 8px; border-radius: 6px; background: transparent; grid-template-columns: 18px minmax(0, 1fr) auto auto; font-family: "Manrope", var(--font-body); }
.task:has(> .task__note) { border-radius: 6px; }
.task__glyph, .task__spin, .task__ring { width: 18px; height: 18px; }
.task__dot { width: 16px; height: 16px; }
.task__dot .icon { width: 10px; height: 10px; }
.task__n { display: none; }
.task__arc { stroke: #5E6AD2; stroke-width: 2.5; }
.task:is([data-state="done"], [data-state="ok"]) .task__dot--done { background: #2DD4A7; color: #0F0F10; }
.task:is([data-state="failed"], [data-state="blocked"]) .task__dot--failed { background: #FF6B4A; color: #0F0F10; }
.task[data-state="error"] .task__dot--error { background: #C6F432; color: #0F0F10; }
.task:is([data-state="done"], [data-state="ok"]) .task__pill { --pill: var(--c-mint-ink); background: color-mix(in oklab, #2DD4A7 15%, transparent); }
.task:is([data-state="failed"], [data-state="blocked"]) .task__pill { --pill: var(--c-coral-ink); background: color-mix(in oklab, #FF6B4A 15%, transparent); }
.task[data-state="error"] .task__pill { --pill: var(--c-lime-ink); background: color-mix(in oklab, #C6F432 22%, transparent); }
.task__pill { border-radius: 4px; font-weight: 600; }
.task__count { color: var(--text-subtle); }

.empty { gap: 6px; padding: var(--space-10) var(--space-5); border: 0; border-radius: 6px; background: var(--bg-surface); box-shadow: 0 0 0 1px var(--card-ring, color-mix(in oklab, var(--text) 9%, transparent)); }
.card .empty { box-shadow: none; background: transparent; padding-block: var(--space-6); }
.empty::before { content: none; }
.empty__tile { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 6px; border-radius: 6px; background: color-mix(in oklab, #C6F432 22%, transparent); color: var(--c-lime-ink); }
.empty__tile .icon { width: 18px; height: 18px; }
.empty__title { font-family: "Manrope", var(--font-body); font-size: var(--fs-md); font-weight: 700; }
.empty__text { font-size: var(--fs-sm); color: var(--text-subtle); }
.empty__actions { gap: 6px; margin-top: var(--space-3); }

/* ---- Redesign 14 · heatmap chart (X1) -----------------------------------------------------
   Engine rows use validated chart steps (deeper than the UI colours so they read on white); "You" is indigo;
   rivals keep their series colours. Strength = colour mixed into the empty track by --v. */
:root { --eng-1: #5E6AD2; --eng-2: #94B814; --eng-3: #0E8C6E; --eng-4: #D9432A; --heat-you: #5E6AD2; --heat-track: color-mix(in oklab, var(--text) 6%, var(--bg-surface)); }
:root[data-theme="dark"] { --eng-1: #6F7BE3; --eng-2: #829F0A; --eng-3: #1A9FA0; --eng-4: #E45A3C; --heat-you: #6F7BE3; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --eng-1: #6F7BE3; --eng-2: #829F0A; --eng-3: #1A9FA0; --eng-4: #E45A3C; --heat-you: #6F7BE3; } }
.chart--heat .chart__canvas { height: auto; }
.chart--heat .chart__legend { display: none; }
.heat { display: grid; grid-template-columns: minmax(72px, 120px) repeat(var(--cols, 26), minmax(0, 1fr)); gap: 3px; align-items: center; font-family: "Manrope", var(--font-body); }
.heat__label { display: flex; align-items: center; gap: 6px; min-width: 0; padding-right: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.heat__label.heat-you { color: var(--text); font-weight: 700; }
.heat__key { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.heat-you { --c: var(--heat-you); } .heat-eng-1 { --c: var(--eng-1); } .heat-eng-2 { --c: var(--eng-2); } .heat-eng-3 { --c: var(--eng-3); } .heat-eng-4 { --c: var(--eng-4); }
.heat .series-1 { --c: var(--series-1); } .heat .series-2 { --c: var(--series-2); } .heat .series-3 { --c: var(--series-3); } .heat .series-4 { --c: var(--series-4); } .heat .series-5 { --c: var(--series-5); } .heat .series-other { --c: var(--text-subtle); }
.heat__cell { aspect-ratio: 1; min-height: 8px; border-radius: 2px; background: color-mix(in oklab, var(--c) calc(var(--v, 0) * 1%), var(--heat-track)); cursor: default; }
.heat__cell.is-empty { background: var(--heat-track); opacity: .5; }
.heat__cell.is-now { box-shadow: 0 0 0 1.5px var(--text); }
.heat__cell:hover { box-shadow: 0 0 0 1.5px var(--text); }
.heat__tick { font-size: var(--fs-2xs); color: var(--text-subtle); white-space: nowrap; overflow: visible; min-width: 0; line-height: 1; padding-top: 4px; }
.heat__mark { height: 4px; }
.heat__mark.is-on { width: 4px; justify-self: center; border-radius: 50%; background: var(--text); cursor: help; }
:root[data-motion="on"] .chart--heat .heat__cell { transform: scale(.4); opacity: 0; transition: transform 450ms cubic-bezier(.2,.8,.2,1.3), opacity 300ms; }
:root[data-motion="on"] .chart--heat.is-drawn .heat__cell { transform: none; opacity: 1; transition-delay: calc(var(--i) * 14ms); }
:root[data-motion="on"] .chart--heat.is-drawn .heat__cell.is-empty { opacity: .5; }
:root[data-motion="on"] .chart--heat.is-waving .heat__cell:not(.is-empty) { animation: sb-heat-wave 3.6s ease-in-out infinite; animation-delay: calc(var(--col) * 55ms + 1s); }
@keyframes sb-heat-wave { 0%, 24%, 100% { filter: brightness(1); } 9% { filter: brightness(1.45); } }
.heat__tip { position: absolute; left: var(--tx, 0); top: var(--ty, 0); transform: translate(-50%, calc(-100% - 6px)); z-index: 5; pointer-events: none; opacity: 0; transition: opacity 120ms;
  padding: 5px 8px; border-radius: 6px; background: var(--bg-surface); box-shadow: 0 0 0 1px color-mix(in oklab, var(--text) 12%, transparent), 0 8px 24px rgba(0,0,0,.16);
  font-family: "Manrope", var(--font-body); font-size: var(--fs-xs); white-space: nowrap; }
.heat__tip.is-on { opacity: 1; }
.heat__tip b { display: block; font-weight: 800; }
.heat__tip small { display: block; color: var(--text-subtle); font-size: var(--fs-2xs); }

/* ---- Redesign 15 · score squares and bar lists -------------------------------------------
   Squares: indigo, 2px corners, no edge; a soft wave rolls diagonally through the lit ones.
   Bars: 2px corners, your bar indigo, others quiet grey (rival colours stay for colour charts); the wave runs down the list. */
.score__cell { border-radius: 2px; box-shadow: none; background: color-mix(in oklab, var(--text) 7%, var(--bg-surface)); }
.score__cell--on { background: var(--heat-you, #5E6AD2); box-shadow: none; }
.score__square > .score__cell:nth-child(1) { --wd: 0ms; }
.score__square > .score__cell:nth-child(2) { --wd: 90ms; }
.score__square > .score__cell:nth-child(3) { --wd: 180ms; }
.score__square > .score__cell:nth-child(4) { --wd: 270ms; }
.score__square > .score__cell:nth-child(5) { --wd: 90ms; }
.score__square > .score__cell:nth-child(6) { --wd: 180ms; }
.score__square > .score__cell:nth-child(7) { --wd: 270ms; }
.score__square > .score__cell:nth-child(8) { --wd: 360ms; }
.score__square > .score__cell:nth-child(9) { --wd: 180ms; }
.score__square > .score__cell:nth-child(10) { --wd: 270ms; }
.score__square > .score__cell:nth-child(11) { --wd: 360ms; }
.score__square > .score__cell:nth-child(12) { --wd: 450ms; }
.score__square > .score__cell:nth-child(13) { --wd: 270ms; }
.score__square > .score__cell:nth-child(14) { --wd: 360ms; }
.score__square > .score__cell:nth-child(15) { --wd: 450ms; }
.score__square > .score__cell:nth-child(16) { --wd: 540ms; }
:root[data-motion="on"] .score__cell--on { animation: sb-sq-wave 3.6s ease-in-out infinite; animation-delay: calc(var(--wd, 0ms) + 1.6s); }
@keyframes sb-sq-wave { 0%, 24%, 100% { filter: brightness(1); transform: scale(1); } 9% { filter: brightness(1.45); transform: scale(1.1); } }

.bars__track, .leaderboard__bar { height: 8px; border-radius: 2px; background: color-mix(in oklab, var(--text) 6%, var(--bg-surface)); box-shadow: none; overflow: hidden; }
.bars__track::before, .leaderboard__bar::before { border-radius: 2px; background: color-mix(in oklab, var(--text) 22%, var(--bg-surface)); }
.leaderboard--color .leaderboard__bar::before, .bars__item[class*="series-"] .bars__track::before, .bars__item[class*="engine--"] .bars__track::before { background: var(--series, color-mix(in oklab, var(--text) 22%, var(--bg-surface))); }
.bars__item--you .bars__track::before, .leaderboard__row--you .leaderboard__bar::before { background: var(--heat-you, #5E6AD2); }
.bars__label, .bars__value, .leaderboard__name, .leaderboard__value { font-family: "Manrope", var(--font-body); }
.bars__value, .leaderboard__value { font-weight: 700; color: var(--text); }
:is(.bars, .leaderboard) > :nth-child(1) { --wd: 0ms; }
:is(.bars, .leaderboard) > :nth-child(2) { --wd: 120ms; }
:is(.bars, .leaderboard) > :nth-child(3) { --wd: 240ms; }
:is(.bars, .leaderboard) > :nth-child(4) { --wd: 360ms; }
:is(.bars, .leaderboard) > :nth-child(5) { --wd: 480ms; }
:is(.bars, .leaderboard) > :nth-child(6) { --wd: 600ms; }
:is(.bars, .leaderboard) > :nth-child(7) { --wd: 720ms; }
:is(.bars, .leaderboard) > :nth-child(8) { --wd: 840ms; }
:is(.bars, .leaderboard) > :nth-child(9) { --wd: 960ms; }
:is(.bars, .leaderboard) > :nth-child(10) { --wd: 1080ms; }
:root[data-motion="on"] :is(.bars__track, .leaderboard__bar)::before { animation: sb-bar-wave 3.6s ease-in-out infinite; animation-delay: calc(var(--wd, 0ms) + 1.6s); }
@keyframes sb-bar-wave { 0%, 24%, 100% { filter: brightness(1); } 9% { filter: brightness(1.5); } }

/* ---- Redesign 16 · answers ------------------------------------------------------------------
   Y1 answer card: your name tinted indigo, rivals on a soft grey box, source chips with a letter tile; the words fade in
   once when the card first scrolls into view. Y2 rows: one line (engine, question, verdict, date) that opens in place.
   Y3 sources: each row leads with a letter tile and lifts on hover. */
.mention { border-radius: 3px; }
.mention--you { background: color-mix(in oklab, #5E6AD2 22%, transparent); color: var(--c-indigo-ink); box-shadow: none; font-weight: 700; padding: 0 3px; }
.mention--rival { background: color-mix(in oklab, var(--text) 8%, transparent); color: var(--text); box-shadow: none; font-weight: 600; padding: 0 3px; }
.answer__text { font-family: "Manrope", var(--font-body); font-size: var(--fs-md); line-height: 1.65; color: var(--text); }
.answer__question { font-family: "Manrope", var(--font-body); font-size: var(--fs-sm); font-weight: 700; }
.answer__head .status, .answer__head .tag { margin-left: auto; }
.answer__head .answer__date { order: 0; }
.answer__sources { gap: 6px; }
.answer__source { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px 0 4px; border-radius: 4px; background: color-mix(in oklab, var(--text) 4%, var(--bg-surface)); box-shadow: inset 0 0 0 1px var(--border-axis); font-size: var(--fs-xs); color: var(--text-secondary); white-space: nowrap; }
.answer__favicon, .source__favicon { display: inline-grid; place-items: center; flex: none; width: 14px; height: 14px; border-radius: 3px; background: color-mix(in oklab, #5E6AD2 20%, var(--bg-surface)); color: var(--c-indigo-ink); font-size: 8px; font-weight: 800; }
.answer__sources-label { display: none; }
.status--busy .icon { width: 11px; height: 11px; }
.answer__text .sb-w { opacity: 0; filter: blur(3px); transition: opacity 250ms, filter 250ms; transition-delay: calc(var(--k) * 30ms); }
.answer__text.is-streamed .sb-w { opacity: 1; filter: none; }

.answer-row > .disclosure__summary { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 var(--space-3); margin: 0 calc(var(--space-3) * -1); border-radius: 6px; font-family: "Manrope", var(--font-body); font-size: var(--fs-sm); text-decoration: none; cursor: pointer; transition: background-color 100ms; }
.answer-row > .disclosure__summary:hover { background: color-mix(in oklab, var(--text) 4%, var(--bg-surface)); text-decoration: none; }
.answer-row > .disclosure__summary > .icon { order: -1; flex: none; color: var(--text-subtle); }
.answer-row__q { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--text); }
.answer-row__date { flex: none; font-size: var(--fs-xs); color: var(--text-subtle); }
.answer-row .engine .engine__name, .answer-row .engine > :not(:first-child) { display: none; }
.answer-row > .disclosure__body { padding: 2px 0 var(--space-3) 26px; }
.feed__item { padding: 0; border-top-color: color-mix(in oklab, var(--text) 6%, transparent); }
.feed__item:first-child, .feed__item:last-child { padding: 0; }
:root[data-motion="on"] .answer-row[open] > .disclosure__body { animation: sb-row-open 300ms cubic-bezier(.2,.8,.2,1); }
@keyframes sb-row-open { from { opacity: 0; transform: translateY(-4px); } }

.source { transition: background-color 150ms var(--ease); border-radius: 6px; }
.source:not(.source--head):hover { background: color-mix(in oklab, var(--text) 4%, var(--bg-surface)); }
.source__main { grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; }
.source__favicon { width: 24px; height: 24px; border-radius: 6px; font-size: 11px; grid-row: span 2; }
.source__name { font-family: "Manrope", var(--font-body); font-weight: 700; }
.source__note { grid-column: 2; font-size: var(--fs-xs); }
.answer-row > .disclosure__summary > .engine { font-size: 0; gap: 0; flex: none; }
.answer-row > .disclosure__body .answer__head { display: none; }

/* ---- Redesign 17 · questions grid as tracker strips (Z3) ----------------------------------------
   Each cell is the last days for that AI (7, scoring.js TRACK): mint = named you, coral = a rival picked first, grey = not named,
   faint = no AI Overview shown, hollow = not asked. Blocks rise in left to right; the wave rolls through them. */
.vgrid__cell--track { display: inline-flex; width: auto; height: auto; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.vgrid__days { display: inline-flex; gap: 2px; }
.vgrid__day { display: block; width: 5px; height: 18px; border-radius: 1px; background: color-mix(in oklab, var(--text) 16%, var(--bg-surface)); }
.vgrid__day--named { background: var(--eng-3, #0E8C6E); }
:root[data-theme="dark"] .vgrid__day--named { background: #2DD4A7; }
.vgrid__day--rival { background: var(--eng-4, #D9432A); }
.vgrid__day--none { background: color-mix(in oklab, var(--text) 7%, var(--bg-surface)); }
.vgrid__day--empty { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--text) 12%, transparent); }
:root[data-motion="on"] .vgrid__day { transform-origin: bottom; animation: sb-day-in 400ms cubic-bezier(.2,.8,.2,1.2) both, sb-day-wave 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * 30ms), calc(var(--i) * 70ms + 1.4s); }
@keyframes sb-day-in { from { transform: scaleY(0); } }
@keyframes sb-day-wave { 0%, 24%, 100% { filter: brightness(1); } 9% { filter: brightness(1.45); } }
.vgrid__engine .engine { white-space: nowrap; }
.legend__swatch--day-named, .legend__swatch--day-rival, .legend__swatch--day-miss, .legend__swatch--day-none, .legend__swatch--day-empty { width: 5px; height: 14px; border-radius: 1px; }
.legend__swatch--day-named { background: var(--eng-3, #0E8C6E); }
:root[data-theme="dark"] .legend__swatch--day-named { background: #2DD4A7; }
.legend__swatch--day-rival { background: var(--eng-4, #D9432A); }
.legend__swatch--day-miss { background: color-mix(in oklab, var(--text) 16%, var(--bg-surface)); }
.legend__swatch--day-none { background: color-mix(in oklab, var(--text) 7%, var(--bg-surface)); }
.legend__swatch--day-empty { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--text) 12%, transparent); }
/* engine names sit level above the strips (no rotated text) */
.vgrid__engine { width: auto; min-width: 72px; text-align: center; }
.vgrid__engine > span { writing-mode: horizontal-tb !important; transform: none !important; white-space: nowrap; justify-content: center; }

/* calmer tracker: a week, not ten days; only named and rival days carry colour, everything else nearly disappears */
.vgrid__days { gap: 3px; }
.vgrid__day { width: 6px; height: 14px; border-radius: 2px; }
.vgrid__day--miss { background: color-mix(in oklab, var(--text) 10%, var(--bg-surface)); }
.vgrid__day--none { background: color-mix(in oklab, var(--text) 5%, var(--bg-surface)); }
.vgrid__day--empty { background: color-mix(in oklab, var(--text) 4%, var(--bg-surface)); box-shadow: none; }
.legend__swatch--day-miss { background: color-mix(in oklab, var(--text) 10%, var(--bg-surface)); }
.legend__swatch--day-empty { background: color-mix(in oklab, var(--text) 4%, var(--bg-surface)); box-shadow: none; }
/* the old square cell's corner marker, dash and fills must not show behind the tracker strips */
.vgrid__cell--track.vgrid__cell--track { background: none; box-shadow: none; color: inherit; }
.vgrid__cell--track::before, .vgrid__cell--track::after { content: none !important; display: none; }

/* ---- Redesign 18 · filter bar ---------------------------------------------------------------
   One search field; the filter icon inside it opens a small popover of chips; a count badge shows how many are on. */
.filter-bar { position: relative; }
.filter-bar > .search { width: 100%; padding-right: 4px; }
.filter-bar__count { flex: none; font-size: var(--fs-xs); color: var(--text-subtle); white-space: nowrap; padding: 0 4px; }
.filter-bar__toggle { position: relative; flex: none; display: grid; place-items: center; width: 28px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--text-subtle); cursor: pointer; transition: background-color 150ms, color 150ms, transform 120ms; }
.filter-bar__toggle:hover, .filter-bar__toggle[aria-expanded="true"] { background: color-mix(in oklab, var(--text) 7%, var(--bg-surface)); color: var(--text); }
.filter-bar__toggle:active { transform: scale(.92); }
.filter-bar__toggle .icon { width: 15px; height: 15px; }
.filter-bar__badge { position: absolute; top: -4px; right: -4px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 4px; background: #5E6AD2; color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; }
.filter-bar__badge[hidden] { display: none; }
.filter-pop {
  position: absolute; z-index: 40; right: 0; top: calc(100% + 6px); width: min(300px, 100%); padding: 12px; border-radius: 6px;
  background: var(--bg-surface); box-shadow: 0 0 0 1px color-mix(in oklab, var(--text) 12%, transparent), 0 10px 30px rgba(0,0,0,.16);
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right; visibility: hidden; pointer-events: none;
  transition: opacity 120ms, transform 160ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 160ms;
}
:root[data-theme="dark"] .filter-pop { box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 10px 30px rgba(0,0,0,.45); }
.filter-bar.is-open .filter-pop { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.filter-pop__label { margin: 0 0 6px; font-family: "Manrope", var(--font-body); font-size: var(--fs-2xs); font-weight: 600; color: var(--text-subtle); }
.filter-pop__label:not(:first-child) { margin-top: 12px; }
.filter-pop .filters { gap: 4px; }
.filter-pop .chip { min-height: 26px; background: none; }
.filter-pop .chip[aria-pressed="true"] { background: #5E6AD2; border-color: #5E6AD2; color: #fff; }
.filter-pop__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 8px; border-top: 1px solid color-mix(in oklab, var(--text) 8%, transparent); font-size: var(--fs-xs); color: var(--text-subtle); }
.search.input-group > .icon { position: static; transform: none; width: 16px; height: 16px; }
.search.input-group .search__input { padding-left: 0; }
/* the filter count sits inside the button, beside the icon, never over the field's edge */
.filter-bar__toggle { display: inline-flex; align-items: center; gap: 4px; width: auto; min-width: 28px; padding: 0 6px; justify-content: center; }
.filter-bar__badge { position: static; min-width: 16px; height: 16px; }
.filter-bar__toggle:has(.filter-bar__badge:not([hidden])) { background: color-mix(in oklab, #5E6AD2 16%, transparent); color: var(--c-indigo-ink); }

/* ---- Redesign 19 · onboarding steps (S1 segments) and progress bars ------------------------------
   Each step is a 4px segment over its label: mint once done, indigo for the current one (it fills in),
   faint for steps ahead. Progress bars match: 2px corners, indigo fill. */
.stepper__steps { gap: 6px; padding: 0; }
.stepper__step { gap: 8px; font-family: "Manrope", var(--font-body); color: var(--text-subtle); }
.stepper__step::before { height: 4px; border-radius: 2px; background: color-mix(in oklab, var(--text) 8%, var(--bg-surface)); }
.stepper__step--done::before { background: #2DD4A7; }
.stepper__step[aria-current="step"]::before { background: linear-gradient(#5E6AD2, #5E6AD2) no-repeat 0 0 / 100% 100%, color-mix(in oklab, var(--text) 8%, var(--bg-surface)); }
:root[data-motion="on"] .stepper__step[aria-current="step"]::before { animation: sb-step-fill 600ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes sb-step-fill { from { background-size: 0% 100%, 100% 100%; } }
.stepper__step--done, .stepper__step[aria-current="step"] { color: var(--text); }
.stepper__num { font-size: var(--fs-2xs); font-weight: 600; color: var(--text-subtle); }
.stepper__label { font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stepper__nav { border-top-color: color-mix(in oklab, var(--text) 7%, transparent); }

.progress { height: 6px; border-radius: 2px; background: color-mix(in oklab, var(--text) 7%, var(--bg-surface)); box-shadow: none; }
.progress::before { border-radius: 2px; background: #5E6AD2; }
.progress--seen::before { background: #5E6AD2; box-shadow: none; }

/* ---- Redesign 20 · pixel avatars (AV1) and account menu (AM1) --------------------------------------- */
.avatar--px { padding: 0; overflow: hidden; background: color-mix(in oklab, var(--text) 6%, var(--bg-surface)); border-radius: 6px; }
.avatar__px { display: block; width: 100%; height: 100%; }
.avatar__px rect { fill: var(--avc); }
.avatar__px--1 { --avc: #5E6AD2; } .avatar__px--2 { --avc: #2DD4A7; } .avatar__px--3 { --avc: var(--eng-2, #94B814); } .avatar__px--4 { --avc: #FF6B4A; }
:root[data-theme="dark"] .avatar__px--3 { --avc: #C6F432; }
.avatar--px:has(.avatar__px--1) { background: color-mix(in oklab, #5E6AD2 14%, var(--bg-surface)); }
.avatar--px:has(.avatar__px--2) { background: color-mix(in oklab, #2DD4A7 14%, var(--bg-surface)); }
.avatar--px:has(.avatar__px--3) { background: color-mix(in oklab, #C6F432 14%, var(--bg-surface)); }
.avatar--px:has(.avatar__px--4) { background: color-mix(in oklab, #FF6B4A 14%, var(--bg-surface)); }

.account { position: relative; }
.account__trigger { width: 28px; height: 28px; border: 0; cursor: pointer; transition: transform 150ms, box-shadow 150ms; }
.account__trigger:hover, .account.is-open .account__trigger { box-shadow: 0 0 0 1px color-mix(in oklab, var(--text) 25%, transparent); }
.account__trigger:active { transform: scale(.94); }
.account__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: 240px; padding: 4px; border-radius: 6px;
  background: var(--bg-surface); box-shadow: 0 0 0 1px color-mix(in oklab, var(--text) 12%, transparent), 0 10px 30px rgba(0,0,0,.16);
  font-family: "Manrope", var(--font-body);
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right; visibility: hidden; pointer-events: none;
  transition: opacity 120ms, transform 160ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 160ms;
}
:root[data-theme="dark"] .account__menu { box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 10px 30px rgba(0,0,0,.45); }
.account.is-open .account__menu { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.account__who { display: flex; align-items: center; gap: 10px; padding: 8px; }
.account__who .avatar { width: 32px; height: 32px; flex: none; }
.account__id { display: grid; min-width: 0; }
.account__id b { font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account__id small { font-size: var(--fs-xs); color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account__plan { display: grid; gap: 6px; margin: 2px 4px 4px; padding: 8px; border-radius: 4px; background: color-mix(in oklab, var(--text) 4%, var(--bg-surface)); color: var(--text-secondary); font-size: var(--fs-xs); text-decoration: none; }
.account__plan b { color: var(--text); }
.account__plan:hover { text-decoration: none; background: color-mix(in oklab, var(--text) 7%, var(--bg-surface)); }
.account__sep { height: 1px; margin: 4px 0; background: color-mix(in oklab, var(--text) 8%, transparent); }
.account__item { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; padding: 0 8px; border-radius: 4px; color: var(--text); font-size: var(--fs-sm); font-weight: 500; text-decoration: none; }
a.account__item:hover { background: color-mix(in oklab, var(--text) 6%, var(--bg-surface)); text-decoration: none; }
.account__item--danger { color: var(--c-coral-ink); }
.account__theme { display: inline-flex; gap: 2px; padding: 2px; border-radius: 4px; background: color-mix(in oklab, var(--text) 5%, var(--bg-surface)); }
.account__theme button { height: 22px; padding: 0 7px; border: 0; border-radius: 3px; background: none; color: var(--text); opacity: .5; font: inherit; font-size: var(--fs-2xs); font-weight: 600; cursor: pointer; transition: opacity 100ms, background-color 150ms; }
.account__theme button:hover { opacity: .8; }
.account__theme button[aria-pressed="true"] { opacity: 1; background: var(--bg-surface); box-shadow: 0 0 0 1px color-mix(in oklab, var(--text) 10%, transparent); }
.account__item--theme { cursor: default; }

/* ---- Redesign 21 · site header (H1 at the top, H2 once scrolled) and footer A ---------------------------- */
.site-header { --site-header-height: 56px; background: var(--bg-canvas); border-bottom: 1px solid color-mix(in oklab, var(--text) 7%, transparent); transition: background-color 300ms, border-color 300ms, padding 300ms cubic-bezier(.2,.8,.2,1); font-family: "Manrope", var(--font-body); }
.site-header__inner { height: 56px; gap: var(--space-4); transition: max-width 300ms cubic-bezier(.2,.8,.2,1), height 300ms, padding 300ms, background-color 300ms, box-shadow 300ms, border-radius 300ms; }
.site-header .brand { font-family: "Manrope", var(--font-body); font-size: 16px; font-weight: 800; gap: 8px; }
.site-header .brand__mark { width: 20px; height: 20px; }
.site-nav { gap: 2px; margin: 0 auto; }
.site-nav__link { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 6px; color: var(--text); opacity: .6; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; text-decoration: none; transition: opacity 100ms, background-color 150ms; }
.site-nav__link:hover { opacity: .9; text-decoration: none; color: var(--text); }
.site-nav__link[aria-current="page"] { opacity: 1; background: color-mix(in oklab, var(--text) 6%, var(--bg-surface)); }
.site-nav__link--login { display: none; }
.site-header__actions { margin-left: 0; gap: 6px; }
.site-header__actions .btn { white-space: nowrap; }
.site-header__login { flex: none; }
.site-header.is-scrolled { background: transparent; border-bottom-color: transparent; box-shadow: none; padding-top: 8px; }
.site-header.is-scrolled .site-header__inner {
  max-width: 760px; height: 48px; padding: 0 8px 0 14px; border-radius: 6px;
  background: color-mix(in oklab, var(--bg-surface) 78%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--text) 10%, transparent), 0 8px 24px rgba(0,0,0,.14);
}
:root[data-theme="dark"] .site-header.is-scrolled .site-header__inner { box-shadow: 0 0 0 1px rgba(255,255,255,.09), 0 8px 24px rgba(0,0,0,.35); }
@media (max-width: 760px) {
  .site-header:not([data-nav-open]) .site-nav { display: none; }
  .site-header .site-header__menu { display: inline-flex; }
  /* phones: the header stays flush with the top edge when scrolled, solid, no floating pill and no gap above it */
  .site-header.is-scrolled { background: var(--bg-canvas); border-bottom-color: color-mix(in oklab, var(--text) 7%, transparent); padding-top: 0; }
  .site-header.is-scrolled .site-header__inner { max-width: none; height: 56px; padding: 0 var(--gutter); border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  :root[data-theme="dark"] .site-header.is-scrolled .site-header__inner { box-shadow: none; }
}
@media (max-width: 860px) {
  .site-header__actions { margin-left: auto; }
  /* the small Log in / Your board button stays beside the menu button, open or closed */
  .site-header .site-header__cta--board { display: inline-flex; }
}

.site-footer { padding: var(--space-6) 0; background: transparent; border-top: 1px solid color-mix(in oklab, var(--text) 7%, transparent); font-family: "Manrope", var(--font-body); }
.site-footer__row { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.site-footer .brand { font-size: 15px; font-weight: 800; gap: 8px; color: var(--text-secondary); }
.site-footer .brand__mark { width: 18px; height: 18px; }
.site-footer__copy { font-size: var(--fs-xs); color: var(--text-subtle); white-space: nowrap; }
.site-footer__links { display: flex; gap: var(--space-4); margin-left: auto; flex-wrap: wrap; }
.site-footer__link { font-size: var(--fs-xs); color: var(--text-subtle); text-decoration: none; white-space: nowrap; }
.site-footer__link:hover { color: var(--text); text-decoration: none; }
@media (max-width: 640px) { .site-footer__links { margin-left: 0; width: 100%; } }

/* ---- Redesign p01 · Overview layouts (the person picks: Grid, Rail, Bento) --------------------------------
   The layouts follow the width of the page area (a container query), so they show beside an open sidebar too;
   narrower than 760px every layout is one column in reading order. */
.app__main { container: main / inline-size; }
.ov { display: grid; gap: var(--space-6); position: relative; }
.ov > * { min-width: 0; }
.ov .section { margin-top: 0; }
.ov-picker { justify-self: end; grid-column: 1 / -1; margin-bottom: calc(var(--space-6) * -1 + 4px); }
.ov__head .page-header { margin-bottom: 0; }
@container main (min-width: 680px) {
  .ov--grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-areas: "pick pick pick pick pick pick" "head head head head head head" "status status status status status status" "strip strip strip strip strip strip" "trend trend trend trend fixes fixes" "rivals rivals rivals latest latest latest"; }
  .ov--bento { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-areas: "pick pick pick pick pick pick" "head head head head head head" "status status status status status status" "trend trend trend trend fixes fixes" "latest latest latest latest fixes fixes" "rivals rivals rivals rivals rivals rivals" "strip strip strip strip strip strip"; }
  .ov-picker { grid-area: pick; }
  .ov__head { grid-area: head; } .ov__status { grid-area: status; } .ov__strip { grid-area: strip; } .ov__fixes { grid-area: fixes; }
  .ov__rivals { grid-area: rivals; } .ov__trend { grid-area: trend; } .ov__latest { grid-area: latest; }
  .ov--rail .ov__fixes, .ov--rail .ov__rivals { position: sticky; top: calc(var(--topbar-height) + var(--space-4)); }
  .ov--rail .ov__rivals .grid, .ov--grid .ov__rivals .grid { grid-template-columns: minmax(0, 1fr); }
  .ov--bento .ov__rivals .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov--rail .ov__head .page-header__scores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ov .section__title::before { content: none; } /* numbers follow source order, not the grid; drop them in the Overview layouts */

/* score cards: the metrics sit beside the score when there is room, and drop under it when there is not (no overlap) */
.page-header__scores > .card > .card__body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.page-header__scores > .card > .card__body > .score { flex: 0 1 auto; min-width: 0; }
.page-header__scores > .card > .card__body > .metrics { flex: 1 1 9rem; max-width: 12rem; }

/* the rail needs room for a full leaderboard beside the main column; narrower, Rail reads as one column */
@container main (min-width: 940px) {
  .ov--rail { grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "pick pick" "head fixes" "status fixes" "strip rivals" "trend rivals" "latest rivals"; align-items: start; }
}
@container main (max-width: 939px) { .ov--rail .ov__fixes, .ov--rail .ov__rivals { position: static; } }
/* leaderboards in narrow spots (the Overview rail) use the compact row: rank, name, value, bar under */
.ov--rail .ov__rivals .leaderboard__row { grid-template-columns: 1.25em minmax(0, 1fr) auto; row-gap: var(--space-1); }
.ov--rail .ov__rivals .leaderboard__bar { grid-column: 2 / -1; grid-row: 2; }
.ov--rail .ov__rivals .leaderboard__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the layout picker sits on its own row above the title, never tucked under the top bar */
.ov-picker { margin-bottom: calc(var(--space-6) * -1 + var(--space-2)); margin-top: 0; }
.ov { padding-top: var(--space-2); }

/* ---- p01b · compact Overview (as in the mockups): tighter gaps, smaller scores, one-line fixes -------------- */
.ov { gap: var(--space-3); }
.ov .page-header__title { font-size: clamp(22px, 2vw, 26px); }
.ov .page-header { gap: 2px; }
.ov .page-header__scores { gap: var(--space-3); margin-top: var(--space-3); }
.ov .page-header__scores > .card { --card-pad: var(--space-4); }
.ov .page-header__scores .score__square { --sq: 14px; --sq-gap: 3px; }
.ov .page-header__scores .score--lg .score__num { font-size: 34px; }
.ov .page-header__scores .metrics > .metric.metric { padding: 6px 10px; }
.ov .page-header__scores .metric__value { font-size: var(--fs-lg); }
.ov .page-header__actions { margin-top: var(--space-3); }
.ov .section__header { margin-bottom: var(--space-2); padding-bottom: 6px; }
.ov .section__title { font-size: var(--fs-sm); }
.ov .section__lede { font-size: var(--fs-xs); }
.ov .moves { gap: 0; border-radius: 6px; box-shadow: 0 0 0 1px var(--card-ring, color-mix(in oklab, var(--text) 9%, transparent)); background: var(--bg-surface); overflow: hidden; }
.ov .move { grid-template-columns: calc(8px + var(--space-3)) minmax(0, 1fr) auto; box-shadow: none; border-radius: 0; border-bottom: 1px solid color-mix(in oklab, var(--text) 6%, transparent); }
.ov .move:last-child { border-bottom: 0; }
.ov .move--next { box-shadow: none; background: color-mix(in oklab, #5E6AD2 8%, var(--bg-surface)); }
.ov .move::before { margin-top: 0; align-self: center; }
.ov .move > .move__body { padding: 8px 0; flex-wrap: nowrap; }
.ov .move > .move__body > .move__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-sm); }
.ov .move > .move__actions { grid-column: auto; padding: 0 var(--space-3) 0 var(--space-2); border-top: 0; gap: 6px; }
.ov .move > .move__actions .btn { min-height: 26px; }
.ov .card { --card-pad: var(--space-4); }
.ov .feed__item .answer-row > .disclosure__summary { min-height: 36px; }
.ov--rail .ov__fixes .move > .move__actions .impact, .ov--rail .ov__fixes .move > .move__actions > :not(.btn) { display: none; }
@container main (min-width: 940px) { .ov--rail .ov__fixes .move > .move__body > .move__meta { display: none; } }

/* ---- p01b · compact Overview cards for all three layouts (matches the mockups) ------------------------------ */
.ov-head { display: flex; align-items: flex-end; gap: var(--space-4); }
.ov-head__text { flex: 1; min-width: 0; }
.ov-head .page-header__title { font-family: "Manrope", var(--font-body); font-size: clamp(22px, 2.2vw, 26px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.ov-head__sub { margin-top: 4px; font-size: var(--fs-sm); color: var(--text-subtle); }
.ov-head__actions { display: flex; gap: 6px; flex: none; }
.ov-head__actions form { display: contents; }
@media (max-width: 640px) { .ov-head { flex-direction: column; align-items: stretch; } }

.kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
@container main (max-width: 679px) { .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi-tile { display: grid; gap: 4px; justify-items: start; padding: var(--space-4); border-radius: 6px; background: var(--bg-surface); box-shadow: 0 0 0 1px var(--card-ring, color-mix(in oklab, var(--text) 9%, transparent)), 0 1px 3px rgba(0,0,0,.06); font-family: "Manrope", var(--font-body); transition: transform 200ms cubic-bezier(.2,.8,.2,1); }
.kpi-tile:hover { transform: translateY(-2px); }
.kpi-tile__label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-subtle); white-space: nowrap; }
.kpi-tile__value { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-tile__tag { display: inline-flex; align-items: center; min-height: 20px; padding: 0 6px; border-radius: 4px; font-size: var(--fs-2xs); font-weight: 700; white-space: nowrap; }
.kpi-tile__tag--grey { background: color-mix(in oklab, var(--text) 7%, transparent); color: var(--text-secondary); }
.kpi-tile__tag--mint { background: color-mix(in oklab, #2DD4A7 15%, transparent); color: var(--c-mint-ink); }
.kpi-tile__tag--coral { background: color-mix(in oklab, #FF6B4A 15%, transparent); color: var(--c-coral-ink); }
.kpi-tile__tag--indigo { background: color-mix(in oklab, #5E6AD2 15%, transparent); color: var(--c-indigo-ink); }
.kpi-tile__tag--lime { background: color-mix(in oklab, #C6F432 22%, transparent); color: var(--c-lime-ink); }

.ov-card { height: 100%; }
.ov-card > .card__header { margin: 0; }
.ov-card__link { font-size: var(--fs-xs); font-weight: 500; color: var(--text-subtle); text-decoration: none; white-space: nowrap; }
.ov-card__link:hover { color: var(--text); text-decoration: none; }
.ov-card__body { padding: var(--space-4); }
.ov-card__body .chart__title { display: none; }
.ov-card__empty { padding: var(--space-4); font-size: var(--fs-sm); color: var(--text-subtle); }
.ov-fixes { list-style: none; }
.ov-fix + .ov-fix { border-top: 1px solid color-mix(in oklab, var(--text) 6%, transparent); }
.ov-fix__link { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 var(--space-4); color: var(--text); text-decoration: none; font-size: var(--fs-sm); transition: background-color 100ms; }
.ov-fix__link:hover { background: color-mix(in oklab, var(--text) 4%, var(--bg-surface)); text-decoration: none; }
.ov-fix__dot { flex: none; width: 8px; height: 8px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.ov-fix--next .ov-fix__dot { background: #5E6AD2; box-shadow: none; }
.ov-fix__title { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-fix__min { flex: none; font-size: var(--fs-xs); color: var(--text-subtle); }
.ov-card--latest .feed { padding: 2px var(--space-4); }
.ov-card--latest .answer-row > .disclosure__summary { margin: 0; padding: 0; }
.ov-card--latest .answer-row__date { display: none; }

/* layouts (replace the earlier area maps): Grid = mockup O1, Rail = O2, Bento = O3 */
.ov__kpis { min-width: 0; }
@container main (min-width: 680px) {
  .ov.ov--grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-areas: "pick pick pick pick pick pick" "head head head head head head" "kpis kpis kpis kpis kpis kpis" "status status status status status status" "strip strip strip strip strip strip" "trend trend trend trend fixes fixes" "rivals rivals rivals latest latest latest"; }
  .ov.ov--bento { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-areas: "pick pick pick pick pick pick" "head head head head head head" "status status status status status status" "kpis kpis kpis kpis kpis kpis" "trend trend trend trend rivals rivals" "latest latest latest latest fixes fixes" "strip strip strip strip strip strip"; }
  .ov--bento .kpi-row { grid-template-columns: 2fr 2fr 1fr 1fr; }
  .ov--bento .kpi-tile:nth-child(-n+2) .kpi-tile__value { font-size: 34px; }
  .ov__kpis { grid-area: kpis; }
}
@container main (min-width: 940px) {
  .ov.ov--rail { grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "pick pick" "head head" "kpis fixes" "status fixes" "trend fixes" "trend rivals" "latest rivals" "strip rivals"; align-items: start; }
  .ov--rail .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov--rail .ov__fixes, .ov--rail .ov__rivals { position: static; }
}
.ov-card--fixes, .ov-card--rivals, .ov-card--trend { min-width: 0; }
/* score squares back on the two score tiles: the squares on the left, label / number / tag beside them */
.kpi-tile--sq { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-4); align-items: center; }
.kpi-tile--sq > .score__square { grid-row: 1 / span 3; --sq: 14px; --sq-gap: 3px; }
.kpi-tile--sq > :not(.score__square) { grid-column: 2; }
/* fixes and rivals share one rail wrapper: stacked tight in Rail, separate grid cells in Grid and Bento */
.ov__rail { display: contents; }
@container main (min-width: 940px) {
  .ov.ov--rail { grid-template-areas: "pick pick" "head head" "kpis rail" "status rail" "strip rail" "trend rail" "latest rail"; }
  .ov--rail .ov__rail { display: grid; gap: var(--space-3); grid-area: rail; align-content: start; }
}
@container main (min-width: 940px) { .ov--rail .ov__rail > * { grid-area: auto; } }
/* the fixes card matches the height of what sits to its left (the tiles in Rail, the chart in Grid and Bento);
   a longer list scrolls inside it. Rivals keep their own place below. */
@container main (min-width: 940px) {
  .ov.ov--rail { grid-template-areas: "pick pick" "head head" "kpis fixes" "status rivals" "strip rivals" "trend rivals" "latest rivals"; align-items: start; }
  .ov--rail .ov__rail { display: contents; }
  .ov--rail .ov__rail > .ov__fixes { grid-area: fixes; }
  .ov--rail .ov__rail > .ov__rivals { grid-area: rivals; }
}
.ov__fixes { align-self: stretch; min-height: 0; position: relative; }
.ov__fixes > .ov-card { position: absolute; inset: 0; height: auto; display: flex; flex-direction: column; }
.ov__fixes > .ov-card > .ov-fixes, .ov__fixes > .ov-card > .ov-card__empty { flex: 1; min-height: 0; overflow-y: auto; }
@container main (max-width: 679px) { .ov__fixes > .ov-card { position: static; } }
@container main (min-width: 680px) and (max-width: 939px) { .ov--rail .ov__fixes > .ov-card { position: static; } }
.ov.ov--grid .ov__fixes, .ov.ov--rail .ov__fixes, .ov.ov--bento .ov__fixes { position: relative; top: auto; }
/* empty areas (no alert, no insights) must not leave double gaps: rows have no gap of their own, each block brings
   its own space below, so a missing block takes nothing */
.ov { row-gap: 0; }
.ov > *, .ov > .ov__rail > * { margin-bottom: var(--space-3); }
.ov > .ov-picker { margin-bottom: var(--space-2); }
/* rivals card: same rule as the fixes card, it fills down to the bottom of what sits beside it; extra rows scroll */
.ov.ov--grid .ov__rivals, .ov.ov--rail .ov__rivals, .ov.ov--bento .ov__rivals { align-self: stretch; position: relative; top: auto; min-height: 0; }
.ov__rivals > .ov-card { position: absolute; inset: 0; height: auto; display: flex; flex-direction: column; }
.ov__rivals > .ov-card > .ov-card__body { flex: 1; min-height: 0; overflow-y: auto; }
@container main (max-width: 679px) { .ov__rivals > .ov-card { position: static; } }
@container main (min-width: 680px) and (max-width: 939px) { .ov--rail .ov__rivals > .ov-card { position: static; } }

/* ---- Redesign p02 · Insights: Tiles, Table + detail, Groups (the person picks; sb_in cookie) ------------------- */
.in > div { display: none; }
.in--tiles > .in__tiles, .in--groups > .in__groups { display: grid; }
.in--table > .in__table { display: grid; }
.in__tiles { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-3); }
.in-tile { color: var(--text); text-decoration: none; }
.in-tile:hover { text-decoration: none; }
.in-tile .kpi-tile__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.in-strip { display: grid; grid-template-columns: repeat(26, minmax(0, 1fr)); gap: 2px; width: 100%; margin-top: 4px; }
.in-strip > i { aspect-ratio: 1; border-radius: 1px; background: color-mix(in oklab, var(--heat-you, #5E6AD2) calc(var(--v) * 1%), var(--heat-track, color-mix(in oklab, var(--text) 6%, var(--bg-surface)))); }
.in-strip > i.is-empty { background: var(--heat-track, color-mix(in oklab, var(--text) 6%, var(--bg-surface))); }
.in__table { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-3); align-items: start; }
.in__board { display: none; }
.in-list { display: grid; }
.in-row { display: grid; grid-template-columns: minmax(0, 1fr) 70px 110px 150px; align-items: center; gap: var(--space-3); width: 100%; min-height: 42px; padding: 0 var(--space-4); border: 0; border-bottom: 1px solid color-mix(in oklab, var(--text) 6%, transparent); background: none; color: var(--text); font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer; transition: background-color 100ms; }
.in-row:last-child { border-bottom: 0; }
.in-row:hover { background: color-mix(in oklab, var(--text) 4%, var(--bg-surface)); }
.in-row.is-on { background: color-mix(in oklab, #5E6AD2 10%, var(--bg-surface)); }
.in-row__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.in-row__value { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.in-row .in-strip { margin: 0; }
.in-row .kpi-tile__tag { justify-self: start; }
.in-detail { position: sticky; top: calc(var(--topbar-height) + var(--space-4)); }
.in-detail__body { display: grid; gap: var(--space-2); justify-items: start; padding: var(--space-4); }
.in-detail__value { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.in-detail__note { font-size: var(--fs-sm); color: var(--text-subtle); }
.in__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
.in-group { list-style: none; }
.in-group li + li { border-top: 1px solid color-mix(in oklab, var(--text) 6%, transparent); }
.in-group__row { display: flex; align-items: center; gap: var(--space-3); min-height: 42px; padding: 0 var(--space-4); color: var(--text); text-decoration: none; font-size: var(--fs-sm); transition: background-color 100ms; }
.in-group__row:hover { background: color-mix(in oklab, var(--text) 4%, var(--bg-surface)); text-decoration: none; }
.in-group__name { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.in-group__value { min-width: 48px; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.in-picker { margin-right: var(--space-2); }
@container main (max-width: 760px) {
  .in__table, .in__groups { grid-template-columns: minmax(0, 1fr); }
  .in-detail { display: none; }
  .in-row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .in-row .in-strip { display: none; }
}
/* count sections on the section itself so nested headings never restart the numbering */
.app__main .section { counter-increment: sb-section; }
.app__main .section__title::before { counter-increment: none; }
/* tracker days as small squares (the score-square look), not bars */
.vgrid__days { gap: 2px; align-items: center; }
.vgrid__day { width: 9px; height: 9px; border-radius: 2px; }
.legend__swatch--day-named, .legend__swatch--day-rival, .legend__swatch--day-miss, .legend__swatch--day-none, .legend__swatch--day-empty { width: 9px; height: 9px; border-radius: 2px; }

/* ---- Redesign p03 · Questions: tiles, then Grid / Panel / Cards (the person picks; sb_q cookie) --------------- */
.q-kpis { margin-bottom: var(--space-3); }
.q { display: grid; gap: var(--space-3); }
.q > .q__panel, .q > .q__cards { display: none; }
.q--panel { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.q--panel > .q__panel { display: block; position: sticky; top: calc(var(--topbar-height) + var(--space-4)); max-height: calc(100vh - var(--topbar-height) - var(--space-8)); overflow: auto; }
.q--panel > .q__picks { grid-column: 1 / -1; }
.q--cards > .q__grid { display: none; }
.q--cards > .q__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); gap: var(--space-3); align-items: start; }
.q__cards .vgrid-wrap { padding: 0 var(--space-3) var(--space-2); }
.q__panel-body { padding: var(--space-3); }
.q__answers { display: grid; gap: var(--space-2); }
.q__answers .answer:not(.answer--flat) { box-shadow: 0 0 0 1px var(--card-ring, color-mix(in oklab, var(--text) 9%, transparent)); }
.q--panel #qgrid .vgrid__row { cursor: pointer; }
.q--panel #qgrid .vgrid__row.is-picked > * { background: color-mix(in oklab, #5E6AD2 10%, var(--bg-surface)); }
.q-picker { margin-right: var(--space-2); }
.q__picks > * { margin: 0; }
@container main (max-width: 900px) { .q--panel { grid-template-columns: minmax(0, 1fr); } .q--panel > .q__panel { position: static; max-height: none; } }

/* ---- Redesign p04 · Competitors: tiles, then Board / Head to head / Cards (the person picks; sb_c cookie) ---- */
.c-kpis { margin-bottom: var(--space-3); }
.c-bar { display: flex; justify-content: flex-end; margin-bottom: var(--space-3); }
.cmp { display: grid; gap: var(--space-3); }
.cmp > div { min-width: 0; }
.cmp .section { margin-top: 0; }
.cmp--board > :is(.cmp__h2h, .cmp__cards, .cmp__why) { display: none; }
.cmp--h2h > :is(.cmp__board, .cmp__cards, .cmp__services, .cmp__trend) { display: none; }
.cmp--cards > :is(.cmp__board, .cmp__h2h, .cmp__services, .cmp__trend, .cmp__why) { display: none; }
@container main (min-width: 940px) {
  .cmp--board { grid-template-columns: 3fr 2fr; grid-template-areas: "board manage" "services services" "trend trend"; align-items: start; }
  .cmp--board > .cmp__board { grid-area: board; } .cmp--board > .cmp__manage { grid-area: manage; }
  .cmp--board > .cmp__services { grid-area: services; } .cmp--board > .cmp__trend { grid-area: trend; }
  .cmp--board .cmp__board .split { grid-template-columns: minmax(0, 1fr); }
  .cmp--board .cmp__manage .form-row { flex-direction: column; align-items: stretch; }
}
.c-vs { display: grid; }
.c-vs__row { display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); align-items: center; gap: var(--space-3); min-height: 44px; padding: 0 var(--space-4); border-top: 1px solid color-mix(in oklab, var(--text) 6%, transparent); }
.c-vs__row:first-child { border-top: 0; }
.c-vs__mine, .c-vs__theirs { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.c-vs__mine { justify-content: flex-end; }
.c-vs__label { text-align: center; font-size: var(--fs-xs); font-weight: 600; color: var(--text-subtle); }
.c-vs__bar { display: block; height: 8px; width: calc(var(--pct) * 1%); max-width: 100%; border-radius: 2px; background: var(--series, color-mix(in oklab, var(--text) 25%, var(--bg-surface))); transition: width 600ms cubic-bezier(.2,.8,.2,1); }
.c-vs__bar--you { background: var(--heat-you, #5E6AD2); }
.c-vs b { font-variant-numeric: tabular-nums; }
.cmp__h2h .tabs__list { margin-bottom: var(--space-3); }
.cmp__h2h .tabs__tab .legend__swatch { width: 8px; height: 8px; border-radius: 2px; }
.c__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); }
.c-card { display: grid; gap: var(--space-3); --card-pad: var(--space-4); }
.c-card__top { display: flex; align-items: center; gap: var(--space-2); }
.c-card__mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: var(--series, #5E6AD2); color: #fff; font-weight: 800; font-size: var(--fs-xs); flex: none; }
.c-card__name { flex: 1; min-width: 0; font-family: "Manrope", var(--font-body); font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-card__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.c-card__nums small { display: block; font-size: var(--fs-2xs); color: var(--text-subtle); font-weight: 600; }
.c-card__nums b { font-size: var(--fs-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
.c-card__strip > i { background: color-mix(in oklab, var(--series, #5E6AD2) calc(var(--v) * 1%), var(--heat-track, color-mix(in oklab, var(--text) 6%, var(--bg-surface)))); }
.c-card__src { display: flex; flex-wrap: wrap; gap: 4px; }
.c-card__actions { display: flex; gap: 6px; }
.c-picker .segmented__btn { white-space: nowrap; }

/* ---- Redesign p05 · Your details: tiles, then Matrix / Cards / Problems (sb_d cookie) ------------------------ */
.dv { display: grid; gap: var(--space-3); }
.dv .section { margin-top: 0; }
.dv--matrix > .dv__cards, .dv--cards > .dv__matrix, .dv--problems > .dv__matrix, .dv--problems > .dv__cards { display: none; }
.dv--matrix .dv__fine, .dv--cards .dv__fine { display: none; }
.dv__problems { display: grid; gap: var(--space-3); }
.dv__problems .section { margin: 0; }
.dv__fine { font-size: var(--fs-xs); color: var(--text-subtle); }
.d-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-3); }
.d-card__body { display: grid; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-4); }
.d-card__value { font-size: var(--fs-sm); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-card__engines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.d-card__engine { display: grid; gap: 4px; font-size: var(--fs-2xs); font-weight: 600; color: var(--text-subtle); }

/* ---- Redesign p06 · Sources: tiles, then List / Gaps / By AI (sb_s cookie) ------------------------------------ */
.s-kpis { margin-bottom: var(--space-3); }
.s-kpis .kpi-tile__value { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv { display: grid; gap: var(--space-3); }
.sv .section { margin-top: 0; }
.sv > div { display: none; }
.sv--list > .sv__list, .sv--gaps > .sv__gaps, .sv--byai > .sv__byai { display: grid; gap: var(--space-6); }
.s__split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
@container main (max-width: 760px) { .s__split { grid-template-columns: minmax(0, 1fr); } }
.s-minis { list-style: none; }
.s-mini { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 var(--space-4); border-top: 1px solid color-mix(in oklab, var(--text) 6%, transparent); font-size: var(--fs-sm); }
.s-mini:first-child { border-top: 0; }
.s-mini .source__favicon { width: 24px; height: 24px; border-radius: 6px; font-size: 11px; }
.s-mini__name { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-mini__used { font-size: var(--fs-xs); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.sv__byai .grid { gap: var(--space-3); }
.sv__byai .card--well { background: var(--bg-surface); box-shadow: 0 0 0 1px var(--card-ring, color-mix(in oklab, var(--text) 9%, transparent)); }

/* ---- Redesign p07 · Fixes: tiles, then List / Board / One at a time (sb_f cookie) ------------------------------ */
.f-kpis { margin-bottom: var(--space-3); }
.fv { display: grid; gap: var(--space-3); }
.fv .section:first-child { margin-top: 0; }
.fv--list > .fv__board, .fv--board > .fv__list, .fv--list > .f-step, .fv--board > .f-step { display: none; }
.fv--focus > .fv__board { display: none; }
.fv--focus #week .split { grid-template-columns: minmax(0, 1fr); }
.fv--focus #week .split__aside, .fv--focus #week .section__header, .fv--focus #backlog, .fv--focus #done { display: none; }
.fv--focus #week { max-width: 760px; margin: 0 auto; width: 100%; }
.f-step { display: flex; align-items: center; gap: var(--space-3); max-width: 760px; margin: 0 auto; width: 100%; }
.f-step__count { font-size: var(--fs-sm); font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.f-step__bar { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.f-step__bar > i { height: 4px; border-radius: 2px; background: color-mix(in oklab, var(--text) 8%, var(--bg-surface)); transition: background-color 300ms; }
.f-step__bar > i.is-done { background: #2DD4A7; }
.f-step__bar > i.is-on { background: #5E6AD2; }
.f-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
@container main (max-width: 760px) { .f-board { grid-template-columns: minmax(0, 1fr); } }
.f-col { display: grid; gap: var(--space-2); align-content: start; }
.f-col__head { display: flex; align-items: center; gap: var(--space-2); padding: 0 2px; font-family: "Manrope", var(--font-body); font-size: var(--fs-sm); font-weight: 700; }
.f-col__empty { padding: var(--space-4); border-radius: 6px; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--text) 8%, transparent); font-size: var(--fs-xs); color: var(--text-subtle); text-align: left; }
.f-card { display: grid; gap: var(--space-2); --card-pad: var(--space-3); transition: transform 200ms cubic-bezier(.2,.8,.2,1); }
.f-card:hover { transform: translateY(-2px); }
.f-card.is-done { opacity: .7; }
.f-card__title { font-family: "Manrope", var(--font-body); font-size: var(--fs-sm); font-weight: 700; line-height: 1.35; }
.f-card__tags, .f-card__actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.f-card__actions form { display: contents; }
.f-card__actions:empty { display: none; }

/* Redesign p08 · Site check: number tiles and three views (Matrix, Cards, Report) */
.sc-kpis { margin-bottom: var(--space-3); }
.sc { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); align-items: start; }
.sc > .section { margin-top: 0; }
.sc--matrix > .sc-report, .sc--matrix > .sc__cards, .sc--cards > .sc-report, .sc--cards > #matrix, .sc--report > #matrix, .sc--report > .sc__cards { display: none; }
@container main (min-width: 940px) {
  .sc--matrix { grid-template-columns: minmax(0, 1fr) 340px; }
  .sc--matrix > * { grid-column: 1; }
  .sc--matrix > .sc__side { grid-column: 2; grid-row: 1 / span 3; }
  .sc--matrix > .sc__side .grid { grid-template-columns: minmax(0, 1fr); }
}
.sc__cards { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.sc-card { display: grid; gap: var(--space-2); padding: var(--space-4); }
.sc-card__top { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.sc-card__name { flex: 1; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-card__engine { font-size: var(--fs-xs); color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-sq { display: flex; gap: 4px; }
.sc-sq__c { width: 14px; height: 14px; border-radius: 2px; background: var(--c-mint, #2DD4A7); animation: sc-pop 400ms cubic-bezier(.2,.8,.2,1.3) both; }
.sc-sq__c:nth-child(2) { animation-delay: 40ms; } .sc-sq__c:nth-child(3) { animation-delay: 80ms; } .sc-sq__c:nth-child(4) { animation-delay: 120ms; } .sc-sq__c:nth-child(n+5) { animation-delay: 160ms; }
.sc-sq__c--blocked { background: var(--c-coral, #FF6B4A); }
.sc-sq__c--error { background: color-mix(in oklab, var(--text) 25%, transparent); }
@keyframes sc-pop { from { transform: scale(.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sc-sq__c { animation: none; } }
.sc-report { padding: 0; }
.sc-report__head { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-6) var(--space-4); text-align: center; }
.sc-report__tile { width: 44px; height: 44px; border-radius: 6px; display: grid; place-items: center; font-size: 20px; font-weight: 800; }
.sc-report__tile--ok { background: color-mix(in oklab, #2DD4A7 18%, transparent); color: var(--c-mint-ink, #2DD4A7); }
.sc-report__tile--warn { background: color-mix(in oklab, #FF6B4A 18%, transparent); color: var(--c-coral-ink, #FF6B4A); }
.sc-report__title { font-size: var(--fs-lg, 16px); }
.sc-report__text { color: var(--text-subtle); }
.sc-report__more { border-top: 1px solid color-mix(in oklab, var(--text) 8%, transparent); }
.sc-report__more > summary { padding: var(--space-3) var(--space-4); font-weight: 700; cursor: pointer; list-style: none; }
.sc-report__more > summary::-webkit-details-marker { display: none; }
.sc-report__row { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-top: 1px solid color-mix(in oklab, var(--text) 5%, transparent); }

/* Redesign p09 · Weekly email: number tiles and three views (Preview, Inbox, Settings) */
.e-kpis { margin-bottom: var(--space-3); }
.ev { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); align-items: start; }
.ev > * { min-width: 0; }
.ev .section { margin-top: 0; }
.ev--settings > .ev__preview { order: 9; }
.ev--inbox > .ev__outbox { order: -1; }
@container main (min-width: 940px) {
  .ev--preview { grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "p d" "p o" "p a"; }
  .ev--inbox { grid-template-columns: 360px minmax(0, 1fr); grid-template-areas: "o p" "d p" "a p"; }
  .ev--settings { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "d o" "a a" "p p"; }
  .ev__preview { grid-area: p; } .ev__delivery { grid-area: d; } .ev__outbox { grid-area: o; } .ev__alerts { grid-area: a; }
  .ev--preview > .ev__preview, .ev--inbox > .ev__preview { position: sticky; top: var(--space-4); }
}

/* Redesign p10 · Settings: three layouts (Side, Top, Cards) */
.st { display: grid; gap: var(--space-3); }
.st--side > .st-cards, .st--top > .st-cards { display: none; }
.st--cards [data-tabs] > .tabs__list { display: none; }
@container main (min-width: 760px) {
  .st--side [data-tabs] { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
  .st--side [data-tabs] > * { grid-column: 2; grid-row: 1; min-width: 0; }
  .st--side [data-tabs] > .tabs__list { grid-column: 1; display: grid; gap: 2px; padding: 6px; margin: 0; border: 0; border-radius: 6px; background: var(--bg-surface); box-shadow: 0 0 0 1px var(--card-ring, color-mix(in oklab, var(--text) 9%, transparent)); position: sticky; top: var(--space-4); }
  .st--side [data-tabs] > .tabs__list .tabs__tab { justify-content: flex-start; width: 100%; height: 32px; padding: 0 10px; border-radius: 6px; }
  .st--side [data-tabs] > .tabs__list .tabs__tab[aria-selected="true"] { background: color-mix(in oklab, var(--text) 8%, transparent); }
  .st--side [data-tabs] > .tabs__list .badge { margin-left: auto; }
  .st--side [data-tabs] > .tabs__list > .tabs__glide, .st--side [data-tabs] > .tabs__list::after { display: none !important; }
}
.st-cards { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.st-card { display: grid; gap: 6px; justify-items: start; padding: var(--space-4); text-align: left; font: inherit; color: inherit; cursor: pointer; border: 0; transition: transform 200ms cubic-bezier(.2,.8,.2,1); }
.st-card:hover { transform: translateY(-2px); }
.st-card.is-on { box-shadow: 0 0 0 1.5px var(--c-indigo, #5E6AD2); }
.st-card__top { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-md, 14px); }
.st-card__text { font-size: var(--fs-xs); color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Redesign p11 · Share: three layouts (Side by side, Three ways, Summary first) */
.sh { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); align-items: start; }
.sh > * { min-width: 0; }
.sh .sh__summary .eyebrow { display: none; }
.sh--side > .sh__mail, .sh--summary > .sh__mail { display: none; }
.sh--ways > .sh__summary { order: 9; }
.sh--summary { max-width: 760px; margin: 0 auto; width: 100%; }
@container main (min-width: 760px) {
  .sh--side { grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "s l" "s t"; }
  .sh--ways { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "l e t" "s s s"; align-items: stretch; }
  .sh--summary { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "s s" "l t"; }
  .sh__summary { grid-area: s; } .sh__link { grid-area: l; } .sh__mail { grid-area: e; } .sh__team { grid-area: t; }
  .sh--side > .sh__summary { grid-row: 1 / span 2; }
}

/* Insights polish · tiles in two groups, a ten-square meter per tile */
.in__tiles { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.in-tgroup { display: grid; gap: var(--space-2); }
.in-tgroup__title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); font-weight: 700; color: var(--text-secondary); }
.in-tgroup__n { height: 18px; padding: 0 6px; border-radius: 4px; display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; background: color-mix(in oklab, var(--text) 8%, transparent); color: var(--text-subtle); }
.in-tgroup__grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container main (min-width: 680px) { .in-tgroup__grid { grid-template-columns: repeat(var(--n3), minmax(0, 1fr)); } }
@container main (min-width: 1040px) { .in-tgroup__grid { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); } }
.in-tile { gap: var(--space-2); }
.in-tile__row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.in-tile .kpi-tile__value { font-size: 28px; line-height: 1; }
.in-meter { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; width: 100%; margin-top: 2px; --tone: #5E6AD2; }
.in-meter--indigo { --tone: #5E6AD2; } .in-meter--mint { --tone: #2DD4A7; } .in-meter--coral { --tone: #FF6B4A; }
.in-meter > i { aspect-ratio: 1; border-radius: 2px; background: color-mix(in oklab, var(--text) 7%, var(--bg-surface)); }
.in-meter > i.is-on { background: var(--tone); animation: in-wave 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * 90ms); }
@keyframes in-wave { 0%, 70%, 100% { opacity: 1; transform: none; } 35% { opacity: .65; transform: scale(.86); } }
@media (prefers-reduced-motion: reduce) { .in-meter > i.is-on { animation: none; } }
.in-tile:hover .in-meter > i.is-on { filter: brightness(1.1); }
/* Rail between 680 and 939: one column in source order (no area map there, so named areas would stack on top of each other) */
@container main (min-width: 680px) and (max-width: 939px) {
  .ov.ov--rail { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
  .ov--rail > *, .ov--rail .ov__rail > * { grid-area: auto; }
  .ov--rail .ov-picker { grid-column: 1 / -1; }
  .ov--rail .ov__fixes > .ov-card { position: static; }
}
.ov-fixes { padding: 2px 0; } /* same as the answers feed, so the rows line up */
/* three across: a short last row stretches to fill it, so no tile sits alone */
@container main (min-width: 680px) and (max-width: 1039px) {
  .in-tgroup__grid > :last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  .in-tgroup__grid > :last-child:nth-child(3n+2) { grid-column: span 2; }
}

/* Redesign · Insights mirrors the Overview: tiles, ring cards, three layouts (Grid, Rail, Bento) */
.ig { display: grid; row-gap: 0; column-gap: var(--space-3); grid-template-columns: minmax(0, 1fr); align-items: start; }
.ig > * { min-width: 0; margin-bottom: var(--space-3); }
.ig > .ov-picker { justify-self: end; margin-bottom: calc(var(--space-6) * -1 + var(--space-2)); }
.ig__head .page-header { margin-bottom: var(--space-3); }
.ig .ov-card { height: 100%; }
.ig-card__body { padding: var(--space-3) var(--space-4); }
.ig-rows { list-style: none; padding: 2px 0; }
.ig-rows li + li { border-top: 1px solid color-mix(in oklab, var(--text) 6%, transparent); }
.ig-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 120px 56px; align-items: center; gap: var(--space-3); min-height: 36px; padding: 0 var(--space-4); color: var(--text); text-decoration: none; font-size: var(--fs-sm); transition: background-color 100ms; }
.ig-row:hover { background: color-mix(in oklab, var(--text) 4%, var(--bg-surface)); text-decoration: none; }
.ig-row__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig-row__value { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.ig-row .in-meter { margin: 0; gap: 2px; }
@container main (max-width: 559px) { .ig-row { grid-template-columns: minmax(0, 1fr) auto 48px; } .ig-row .in-meter { display: none; } }
.ig-card--all > summary { list-style: none; cursor: pointer; }
.ig-card--all > summary::-webkit-details-marker { display: none; }
.ig-card--all .board { margin: 0; }
@container main (min-width: 680px) {
  .ig--grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-areas: "pick pick pick pick pick pick" "head head head head head head" "status status status status status status" "kpis kpis kpis kpis kpis kpis" "top top top top top top" "all all all all cat cat"; }
  .ig--bento { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-areas: "pick pick pick pick pick pick" "head head head head head head" "status status status status status status" "kpis kpis kpis kpis kpis kpis" "top top top top top top" "cat cat all all all all"; }
  .ig--bento .kpi-row { grid-template-columns: 2fr 2fr 1fr 1fr; }
  .ig--bento .kpi-tile:nth-child(-n+2) .kpi-tile__value { font-size: 34px; }
  .ig > .ov-picker { grid-area: pick; }
  .ig__head { grid-area: head; } .ig__status { grid-area: status; } .ig__kpis { grid-area: kpis; } .ig__names { grid-area: names; }
  .ig__fix { grid-area: fix; } .ig__top { grid-area: top; } .ig__cat { grid-area: cat; } .ig__all { grid-area: all; }
  .ig--grid .ig__fix .ig-row, .ig--bento .ig__fix .ig-row { grid-template-columns: minmax(0, 1fr) 48px; }
  .ig--grid .ig__fix .ig-row > :is(.kpi-tile__tag, .in-meter), .ig--bento .ig__fix .ig-row > :is(.kpi-tile__tag, .in-meter) { display: none; }
}
@container main (min-width: 680px) and (max-width: 939px) {
  .ig.ig--rail { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
  .ig--rail > * { grid-area: auto; }
}
@container main (min-width: 940px) {
  .ig.ig--rail { grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "pick pick" "head head" "status status" "kpis cat" "all cat" "top top"; }
  .ig--rail .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ig--rail .ig__fix .ig-row, .ig--rail .ig__top .ig-row { grid-template-columns: minmax(0, 1fr) 48px; }
  .ig--rail .ig__fix .ig-row > :is(.kpi-tile__tag, .in-meter) { display: none; }
  .ig--rail .ig__fix, .ig--rail .ig__top { height: auto; }
}
.ig-card--names, .ig-card--fix, .ig-card--top, .ig-card--cat { min-width: 0; } .ig-all__summary { margin: 0; }
/* Insights layout fixes: the picker sits above the header (no overlap with the layer links), the fixes card
   matches its neighbour's height, the category card takes the full row when nothing changed, smaller squares */
.ig > .ov-picker { margin-bottom: var(--space-2); }
.ig__head .page-header { margin-top: 0; }
.ig__fix, .ig__top, .ig__names { align-self: stretch; }
.ig__all, .ig__cat { align-self: stretch; }
.ig-card--all .board td, .ig-card--all .board th { white-space: nowrap; } .ig-card--all .board td > *, .ig-card--all .board th > * { white-space: nowrap; } .ig-card--all .table-wrap { overflow-x: auto; }
/* the number tiles are the same height in every layout (Grid, Rail, Bento) on Overview and Insights */
.ig .kpi-row, .ov .kpi-row { grid-auto-rows: 1fr; }
.ig .kpi-tile, .ov .kpi-tile { height: 100%; }
.ig--bento .kpi-tile:nth-child(-n+2) .kpi-tile__value, .ov--bento .kpi-tile:nth-child(-n+2) .kpi-tile__value { font-size: inherit; }
.ig .kpi-tile .kpi-tile__value, .ov .kpi-tile .kpi-tile__value { font-size: 28px; }
/* the competitors card shows every row: it sets its own height, and the card beside it stretches to match */
.ov .ov__rivals > .ov-card { position: static; height: 100%; }
.ov .ov__rivals > .ov-card > .ov-card__body { flex: none; overflow: visible; }
.ov .ov__rivals { align-self: stretch; }
/* the fixes card shows every fix: it sets its own height, and the card beside it stretches to match */
.ov .ov__fixes > .ov-card { position: static; height: 100%; }
.ov .ov__fixes > .ov-card > .ov-fixes { flex: none; overflow: visible; }
.ov .ov__trend, .ov .ov__latest, .ov .ov__rivals, .ov .ov__fixes { align-self: stretch; }
.ov .ov__trend > .ov-card, .ov .ov__latest > .ov-card { height: 100%; }
/* Redesign p12 · Measures (M1 filter table): chips with counts, the 10-square meter, 30 daily columns (no line), the trend tag */
.ms { container: ms / inline-size; }
.ms__list { list-style: none; margin: 0; padding: 0; }
.ms__list > li + li { border-top: 1px solid color-mix(in oklab, var(--text) 5%, transparent); }
.ms__list > li.is-hidden { display: none; }
.ms__row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 190px 92px; align-items: center; gap: var(--space-4); min-height: 42px; padding: 0 var(--space-4); color: var(--text); font-size: var(--fs-sm); text-decoration: none; transition: background-color 100ms; }
a.ms__row:hover { background: color-mix(in oklab, var(--text) 4%, var(--bg-surface)); text-decoration: none; }
.ms__row--head { min-height: 32px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-subtle); background: var(--bg-well); border-bottom: 1px solid var(--border-hairline); }
.ms__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ms__now { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); white-space: nowrap; }
.ms__now .in-meter { width: 70px; gap: 2px; margin: 0; flex: none; }
.ms__now .in-meter > i { aspect-ratio: auto; height: 12px; border-radius: 1px; }
.ms__value { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.ms__trend { display: flex; }
.ms-chips .segmented__btn { gap: 6px; }
.ms-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 4px; font-size: var(--fs-2xs); font-weight: 700; background: color-mix(in oklab, var(--text) 8%, transparent); color: var(--text-secondary); }
.ms-cols { display: flex; align-items: flex-end; gap: 1px; height: 22px; --tone: #5E6AD2; }
.ms-cols--indigo { --tone: #5E6AD2; } .ms-cols--mint { --tone: #2DD4A7; } .ms-cols--coral { --tone: #FF6B4A; }
.ms-cols > i { flex: 1; min-width: 2px; min-height: 3px; height: calc(var(--h) * 1%); border-radius: 1px; background: color-mix(in oklab, var(--tone) 72%, transparent); transform-origin: bottom; animation: ms-rise 450ms cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 10ms); }
.ms-cols > i.is-zero { background: color-mix(in oklab, var(--text) 10%, transparent); }
.ms-cols > i.is-none { background: color-mix(in oklab, var(--text) 12%, transparent); }
.ms-cols > i:hover { filter: brightness(1.35); }
@keyframes ms-rise { from { transform: scaleY(0); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .ms-cols > i { animation: none; } }
@container ms (max-width: 559px) {
  .ms__row { grid-template-columns: minmax(0, 1fr) auto 82px; gap: var(--space-3); }
  .ms__days, .ms__now .in-meter { display: none; }
}
@container ms (min-width: 560px) and (max-width: 719px) {
  .ms__row { grid-template-columns: minmax(0, 1fr) 112px 150px 82px; gap: var(--space-3); }
  .ms__now { gap: var(--space-2); }
  .ms__now .in-meter { width: 50px; gap: 1px; }
}
.ig-card--all > .card__header { flex-wrap: wrap; row-gap: var(--space-2); }
.ig-card--all > .card__header > .card__heading { flex: none; }
/* Redesign p13 · Metrics: Rail, Tabbed and Bento (sb_mt cookie); breakdown rows with the 10-square meter */
.mt { display: grid; row-gap: var(--space-3); column-gap: var(--space-3); grid-template-columns: minmax(0, 1fr); align-items: start; }
.mt > * { min-width: 0; }
.mt > .ov-picker { justify-self: end; margin-bottom: var(--space-2); }
.mt__head .page-header { margin: 0 0 var(--space-2); }
.mt__ctrl { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); flex-wrap: wrap; }
.mt__ctrl form { margin-left: auto; }
.mt-scopes { max-width: 100%; }
.mt-hero { display: grid; align-content: space-between; gap: var(--space-3); height: 100%; }
.mt-hero__sub { margin: 0; font-size: var(--fs-xs); color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-chart__body { padding: var(--space-4) var(--card-pad); }
.mt-chart, .mt__hero, .mt__chart { height: 100%; }
.mt-bd { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }
.mt-bd__tabs { display: none; }
.mt-rows { list-style: none; margin: 0; padding: 2px 0; }
.mt-rows > li + li { border-top: 1px solid color-mix(in oklab, var(--text) 5%, transparent); }
.mt-row { display: grid; grid-template-columns: minmax(0, 1fr) 70px 48px; align-items: center; gap: var(--space-3); min-height: 38px; padding: 0 var(--card-pad); color: var(--text); font-size: var(--fs-sm); text-decoration: none; transition: background-color 100ms; }
a.mt-row:hover { background: color-mix(in oklab, var(--text) 4%, var(--bg-surface)); text-decoration: none; }
.mt-row__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mt-row__value { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mt-row .in-meter { gap: 2px; margin: 0; }
.mt-row .in-meter > i { aspect-ratio: auto; height: 12px; border-radius: 1px; }
.mt__side { display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.mt-stats { display: grid; grid-template-columns: minmax(0, 1fr); }
.mt-stat { display: grid; gap: 4px; padding: var(--space-3) var(--card-pad); min-width: 0; }
.mt-stat + .mt-stat { border-top: 1px solid color-mix(in oklab, var(--text) 7%, transparent); }
.mt-stat__label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-stat__value { font-size: 22px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mt-sure { display: flex; gap: 3px; margin-top: 2px; }
.mt-sure > i { flex: 1; height: 6px; border-radius: 2px; background: color-mix(in oklab, var(--text) 9%, transparent); }
.mt-sure > i.is-on { background: #5E6AD2; }
.mt-days { list-style: none; margin: 0; padding: 0; }
.mt-day { display: flex; align-items: center; gap: var(--space-3); min-height: 38px; padding: 0 var(--card-pad); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; }
.mt-day + .mt-day { border-top: 1px solid color-mix(in oklab, var(--text) 5%, transparent); }
.mt-day > b { font-weight: 800; flex: none; }
.mt-day > span { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; }
.mt-next .moves { margin: 0; }
/* Tabbed: one breakdown card, tabs with counts, one panel at a time; the proof as a strip */
.mt--tabs .mt-bd { display: block; background: var(--bg-surface); border-radius: 6px; box-shadow: 0 0 0 1px var(--card-ring), var(--card-drop); overflow: hidden; }
.mt--tabs .mt-bd__tabs { display: inline-flex; margin: var(--space-3) var(--card-pad, var(--space-5)); }
.mt--tabs .mt-bd__card { display: none; box-shadow: none; border-radius: 0; background: none; border-top: 1px solid color-mix(in oklab, var(--text) 7%, transparent); }
.mt--tabs .mt-bd__card.is-active { display: block; }
.mt--tabs .mt-bd__card > .card__header { display: none; }
.mt--tabs .mt__side, .mt--bento .mt__side { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); align-items: stretch; }
.mt--tabs .mt__side > *, .mt--bento .mt__side > * { height: 100%; }
@container main (min-width: 680px) {
  .mt--tabs .mt-stats, .mt--bento .mt-stats { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .mt--tabs .mt-stat + .mt-stat, .mt--bento .mt-stat + .mt-stat { border-top: 0; border-left: 1px solid color-mix(in oklab, var(--text) 7%, transparent); }
  .mt--tabs { grid-template-columns: 240px minmax(0, 1fr); grid-template-areas: "pick pick" "head head" "ctrl ctrl" "hero chart" "bd bd" "side side"; }
  .mt--bento { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-areas: "pick pick pick pick pick pick" "head head head head head head" "ctrl ctrl ctrl ctrl ctrl ctrl" "hero hero chart chart chart chart" "bd bd bd bd bd bd" "side side side side side side"; }
  .mt--bento .mt-bd { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mt > .ov-picker { grid-area: pick; } .mt__head { grid-area: head; } .mt__ctrl { grid-area: ctrl; } .mt__hero { grid-area: hero; }
  .mt__chart { grid-area: chart; } .mt__bd { grid-area: bd; } .mt__side { grid-area: side; }
  .mt--rail > * { grid-area: auto; }
}
@container main (min-width: 940px) {
  .mt.mt--rail { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "pick pick" "head head" "ctrl ctrl" "hero side" "chart side" "bd side"; }
  .mt--rail > .ov-picker { grid-area: pick; } .mt--rail > .mt__head { grid-area: head; } .mt--rail > .mt__ctrl { grid-area: ctrl; } .mt--rail > .mt__hero { grid-area: hero; }
  .mt--rail > .mt__chart { grid-area: chart; } .mt--rail > .mt__bd { grid-area: bd; } .mt--rail > .mt__side { grid-area: side; align-self: start; }
  .mt--rail .mt-hero, .mt--rail .mt__hero, .mt--rail .mt__chart, .mt--rail .mt-chart { height: auto; }
  .mt--rail .mt-hero__sub { display: none; }
  .mt--tabs .mt-hero__sub { display: none; }
}
.mt-real, .mt-unusual, .mt-changed, .mt-next { min-width: 0; }
.mt-bd > .card { height: auto; align-self: start; }
.mt-bd > .mt-bd__card:has(.mt-rows > li:nth-child(5)) { grid-column: 1 / -1; }
.mt-bd { grid-auto-flow: dense; }
/* the heatmap on narrow cards (phones, side rails): each name sits on its own line above its squares, so the
   squares get the full width instead of 3px slivers beside a 120px label column */
.chart--heat .chart__canvas { container: heat / inline-size; }
@container heat (max-width: 520px) {
  .heat { grid-template-columns: repeat(var(--cols, 26), minmax(0, 1fr)); gap: 2px; }
  .heat__label { grid-column: 1 / -1; padding: 6px 0 2px; }
  .heat__label:first-child { padding-top: 0; }
  .heat__axis-gap { display: none; }
}
/* daily heatmap (Metrics, mockup p13): no caption (the card says the period), hatched days with no answers,
   dates first, middle and Today under the squares, no ring on the last square */
.chart--days .chart__title { display: none; }
.chart--days .heat__cell.is-empty, :root[data-motion="on"] .chart--days.is-drawn .heat__cell.is-empty { opacity: 1; background: repeating-linear-gradient(135deg, var(--heat-track) 0 3px, transparent 3px 6px); }
.chart--days .heat__cell.is-now { box-shadow: none; }
.chart--days .heat__cell:hover { box-shadow: 0 0 0 1.5px var(--text); }
.heat__tick--now { justify-self: end; color: var(--c-lime-ink); font-weight: 700; }

/* daily heatmap squares at the mockup's size: 18px at most, 3px apart, centred in their day column */
.chart--days .heat { gap: 3px; }
.chart--days .heat__cell { width: min(100%, 18px); min-height: 0; max-height: 18px; justify-self: center; border-radius: 2px; }
.chart--days .heat .series-1 { --c: #FF6B4A; } .chart--days .heat .series-2 { --c: #2DD4A7; } .chart--days .heat .series-3 { --c: #C6F432; }
/* cards in one breakdown row share a height (no hole beside a short card); in Bento a long list takes two columns
   and two rows with the short ones stacked beside it */
.mt-bd { align-items: stretch; }
.mt-bd > .card { height: 100%; align-self: stretch; }
.mt-bd > .mt-bd__card.is-short { grid-column: auto; }
@container main (min-width: 680px) {
  .mt--bento .mt-bd { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mt.mt--bento .mt-bd > .mt-bd__card:not(.is-short):not(.is-x) { grid-column: span 2; grid-row: span 2; }
}
/* breakdown lists show about 10 rows, then scroll inside the card (Tabbed included) */
.mt-rows { max-height: calc(10 * 39px + 4px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--text) 18%, transparent) transparent; }
.chart--days { --heat-you: #5E6AD2; }
.chart--days .heat { --heat-track: #202024; }
/* Insights number tiles are the Overview's tiles (same squares, sizes and gaps); as links they keep the text colour */
a.kpi-tile { color: var(--text); text-decoration: none; }
a.kpi-tile:hover { text-decoration: none; }
.kpi-tile__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ig, .mt { padding-top: var(--space-2); }
.mt > .ov-picker { margin-bottom: -4px; }
.ov-head--page { padding-top: 14px; margin-bottom: var(--space-6); }
/* page titles stay on one line on every page; a long one ends in an ellipsis and app.js puts it in a hover title */
.page-header__title { max-width: 100%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ---- Overview and Insights fill the window: the tile rows stay as they are, the card rows below stretch down to
   100px above the bottom of the window, and every card scrolls inside itself. app.js sets --fill-top (where the
   page grid starts). One-column widths (phones, Rail below 940px) keep their natural height, each card capped. */
.ov .ov-card > :not(.card__header), .ig .ov-card > :not(.card__header) { max-height: 420px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--text) 18%, transparent) transparent; }
.ig .ig-card--all > .ms { max-height: none; overflow: visible; }
.ig .ig-card--all .ms__list { max-height: 420px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--text) 18%, transparent) transparent; }
@container main (min-width: 680px) {
  .ov:is(.ov--grid, .ov--bento), .ig:is(.ig--grid, .ig--bento) { height: max(560px, calc(100dvh - var(--fill-top, 180px) - 100px + var(--space-3))); align-items: stretch; }
  .ov.ov--grid { grid-template-rows: auto auto auto auto auto minmax(0, 1fr) minmax(0, 1fr); }
  .ov.ov--bento { grid-template-rows: auto auto auto auto minmax(0, 1fr) minmax(0, 1fr) auto; }
  .ig.ig--grid, .ig.ig--bento { grid-template-rows: auto auto auto auto auto minmax(0, 1fr); }
}
@container main (min-width: 940px) {
  .ov.ov--rail, .ig.ig--rail { height: max(560px, calc(100dvh - var(--fill-top, 180px) - 100px + var(--space-3))); align-items: stretch; }
  .ov.ov--rail { grid-template-rows: auto auto auto auto auto minmax(0, 1fr) minmax(0, 1fr); }
  .ig.ig--rail { grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; }
}
@container main (min-width: 680px) {
  :is(.ov--grid, .ov--bento, .ig--grid, .ig--bento) > :is(.ov__trend, .ov__latest, .ov__fixes, .ov__rivals, .ig__all, .ig__cat, .ig__top),
  :is(.ov--grid, .ov--bento) > .ov__rail > * { min-height: 0; height: auto; align-self: stretch; }
  :is(.ov--grid, .ov--bento, .ig--grid, .ig--bento) :is(.ov__trend, .ov__latest, .ov__fixes, .ov__rivals, .ig__all, .ig__cat, .ig__top) > .ov-card { position: static; height: 100%; min-height: 0; display: flex; flex-direction: column; }
  :is(.ov--grid, .ov--bento, .ig--grid, .ig--bento) :is(.ov__trend, .ov__latest, .ov__fixes, .ov__rivals, .ig__all, .ig__cat, .ig__top) > .ov-card > :not(.card__header) { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }
  :is(.ov--grid, .ov--bento, .ig--grid, .ig--bento) .ig-card--all > .ms { display: flex; flex-direction: column; overflow: hidden; }
  :is(.ov--grid, .ov--bento, .ig--grid, .ig--bento) .ig-card--all .ms__list { flex: 1 1 auto; min-height: 0; max-height: none; }
}
@container main (min-width: 940px) {
  :is(.ov--rail, .ig--rail) :is(.ov__trend, .ov__latest, .ov__fixes, .ov__rivals, .ig__all, .ig__cat, .ig__top) { min-height: 0; height: auto; align-self: stretch; }
  :is(.ov--rail, .ig--rail) :is(.ov__trend, .ov__latest, .ov__fixes, .ov__rivals, .ig__all, .ig__cat, .ig__top) > .ov-card { position: static; height: 100%; min-height: 0; display: flex; flex-direction: column; }
  :is(.ov--rail, .ig--rail) :is(.ov__trend, .ov__latest, .ov__fixes, .ov__rivals, .ig__all, .ig__cat, .ig__top) > .ov-card > :not(.card__header) { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }
  .ig--rail .ig-card--all > .ms { display: flex; flex-direction: column; overflow: hidden; }
  .ig--rail .ig-card--all .ms__list { flex: 1 1 auto; min-height: 0; max-height: none; }
}
.app__main:has(> .ov, > .ig) { padding-bottom: calc(100px - var(--space-3)); }
/* ---- Questions: the Overview's top (picker row, header, tiles at the same heights) and the same fill: the cards
   reach 100px above the window bottom and each one scrolls inside itself */
.qp { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0; padding-top: var(--space-2); align-items: start; }
.qp > * { min-width: 0; margin-bottom: var(--space-3); }
.qp > .ov-picker { justify-self: end; margin: 0 0 var(--space-2); }
.qp .q-kpis { margin-bottom: var(--space-3); }
.app__main:has(> .qp) { padding-bottom: calc(100px - var(--space-3)); }
.qp .q > * > .card, .qp .q > .q__panel { display: flex; flex-direction: column; min-height: 0; }
.qp .q__cards > .card > .vgrid-wrap, .qp .q__picks > .card > :not(.card__header):not(.card__footer) { max-height: 420px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
@container main (min-width: 680px) {
  .qp { height: max(560px, calc(100dvh - var(--fill-top, 180px) - 100px + var(--space-3))); grid-template-rows: auto auto auto auto minmax(0, 1fr); }
  .qp:not(:has(.qp__status)) { grid-template-rows: auto auto auto minmax(0, 1fr); }
  .qp > .qp__cards { align-self: stretch; min-height: 0; display: flex; flex-direction: column; }
  .qp > .qp__cards > * { flex: 1 1 auto; min-height: 0; }
  .qp .q { height: 100%; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; align-items: stretch; }
  .qp .q > .q__grid, .qp .q > .q__panel { min-height: 0; }
  .qp .q > .q__grid > .card { height: 100%; }
  .qp .q #grid-card > .card__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .qp .q #grid-card .vgrid-wrap { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .qp .q--panel > .q__panel { position: static; max-height: none; height: 100%; overflow: hidden; }
  .qp .q--panel > .q__panel > .q__panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .qp .q__picks > .card { max-height: 240px; }
  .qp .q__picks > .card > :not(.card__header):not(.card__footer) { flex: 1 1 auto; min-height: 0; max-height: none; }
  .qp .q--cards { grid-template-rows: minmax(0, 1fr) auto; }
  .qp .q--cards > .q__cards { min-height: 0; overflow-y: auto; align-content: start; }
}
.qp > .ov-picker { grid-area: auto; grid-column: 1; }
.qp .q:not(.q--panel) > .q__panel { display: none; }
.qp #grid-card .vgrid-wrap { max-height: 420px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
@container main (min-width: 680px) { .qp .q #grid-card .vgrid-wrap { max-height: none; } }
/* the Picked instead card now lives in the grid card's key: each rival with its count of questions */
.legend__count { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); margin-left: 2px; }
@container main (min-width: 680px) { .qp .q, .qp .q--cards { grid-template-rows: minmax(0, 1fr); } }
/* answer cards use one text size throughout: the AI's name, date, status tag, answer text, sources and the note */
.answer :is(.engine, .answer__date, .status, .answer__text, .answer__source, .answer__note) { font-size: var(--fs-sm); }
.answer .answer__text { line-height: 1.55; }
/* ---- Competitors: the Overview's top (picker row, header, tiles at the same heights) and the same fill: the
   regions below reach 100px above the window bottom and each scrolls inside itself, its heading kept on top */
.cp { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0; padding-top: var(--space-2); align-items: start; }
.cp > * { min-width: 0; margin-bottom: var(--space-3); }
.cp > .ov-picker { justify-self: end; grid-area: auto; grid-column: 1; margin: 0 0 var(--space-2); }
.cp .c-kpis { margin-bottom: var(--space-3); }
.app__main:has(> .cp) { padding-bottom: calc(100px - var(--space-3)); }
.cp .cmp > div { max-height: 520px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--text) 18%, transparent) transparent; }
.cp .cmp .section__header { position: sticky; top: 0; z-index: 2; background: var(--bg-canvas); margin-bottom: var(--space-3); padding-bottom: var(--space-2); }
@container main (min-width: 680px) {
  .cp { height: max(560px, calc(100dvh - var(--fill-top, 180px) - 100px + var(--space-3))); grid-template-rows: auto auto auto minmax(0, 1fr); }
  .cp > .cp__cards { align-self: stretch; min-height: 0; }
  .cp .cmp { height: 100%; min-height: 0; align-items: stretch; }
  .cp .cmp > div { max-height: none; min-height: 0; }
  .cp .cmp.cmp--board { grid-template-columns: 3fr 2fr; grid-template-areas: "board manage" "services trend"; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .cp .cmp--board > .cmp__services { grid-area: services; } .cp .cmp--board > .cmp__trend { grid-area: trend; }
  .cp .cmp.cmp--h2h { grid-template-columns: 3fr 2fr; grid-template-areas: "h2h manage" "why manage"; grid-template-rows: minmax(0, 2fr) minmax(0, 3fr); }
  .cp .cmp--h2h > .cmp__h2h { grid-area: h2h; } .cp .cmp--h2h > .cmp__why { grid-area: why; } .cp .cmp--h2h > .cmp__manage { grid-area: manage; }
  .cp .cmp.cmp--cards { grid-template-columns: 3fr 2fr; grid-template-areas: "cards manage"; grid-template-rows: minmax(0, 1fr); }
  .cp .cmp--cards > .cmp__cards { grid-area: cards; } .cp .cmp--cards > .cmp__manage { grid-area: manage; }
}
/* Questions and Competitors tiles are the Overview's (as in its Bento): two wide share tiles with score squares,
   then two narrow number tiles, same sizes */
.qp .kpi-row, .cp .kpi-row { grid-auto-rows: 1fr; }
.qp .kpi-tile, .cp .kpi-tile { height: 100%; }
.qp .kpi-tile .kpi-tile__value, .cp .kpi-tile .kpi-tile__value { font-size: 28px; }
.qp .kpi-tile--sq .kpi-tile__value, .cp .kpi-tile--sq .kpi-tile__value { font-size: inherit; }
@container main (min-width: 680px) { .qp .kpi-row, .cp .kpi-row { grid-template-columns: 2fr 2fr 1fr 1fr; } }
.cp .section__title::before, .qp .section__title::before { content: none; }
/* ---- Competitors regions as the Overview's ring cards: each region is one card (header strip, scrolling body);
   the cards and tables inside lose their own frames so nothing is a card in a card; tables stay on one line */
.cp .cmp > div:not(.cmp__cards) { background: var(--bg-surface); border-radius: 6px; box-shadow: 0 0 0 1px var(--card-ring, color-mix(in oklab, var(--text) 9%, transparent)), 0 1px 3px rgba(0,0,0,.06); overflow: hidden; display: flex; flex-direction: column; }
.cp .cmp > div > .section { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin: 0; }
.cp .cmp .section__header { position: static; flex: none; margin: 0; padding: var(--space-3) var(--space-4); background: none; border-bottom: 1px solid color-mix(in oklab, var(--text) 7%, transparent); align-items: center; flex-wrap: nowrap; }
.cp .cmp .section__title { font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp .cmp .section__actions { flex-wrap: nowrap; }
.cp .cmp > div > .section > :not(.section__header), .cp .cmp > .cmp__h2h > .c__h2h > .tabs__panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--text) 18%, transparent) transparent; padding: var(--space-3) var(--space-4); }
.cp .cmp > div:not(.cmp__cards) { overflow-y: hidden; }
.cp .cmp :is(.section, .c__h2h) .card, .cp .cmp .section .table-wrap { background: none; box-shadow: none; border-radius: 0; }
.cp .cmp .section .card { padding: 0; }
.cp .cmp .section .card + .card, .cp .cmp .section .stack > .card + .card { border-top: 1px solid color-mix(in oklab, var(--text) 7%, transparent); padding-top: var(--space-3); }
.cp .cmp .section .card--flush > .card__header { padding: 0 0 var(--space-2); border-bottom: 0; }
.cp .cmp .section .split { gap: var(--space-3); }
/* head to head: the rival tabs are the card's header strip */
.cp .cmp > .cmp__h2h > .c__h2h { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.cp .cmp > .cmp__h2h > .c__h2h > .tabs__list { flex: none; margin: 0; padding: var(--space-2) var(--space-3); border-bottom: 1px solid color-mix(in oklab, var(--text) 7%, transparent); }
.cp .cmp > .cmp__h2h > .c__h2h > .tabs__panel[hidden] { display: none; }
.cp .cmp .c__h2h .card--flush > .card__header { padding: 0 0 var(--space-2); border-bottom: 0; }
/* tables on one line: names end in an ellipsis, the buttons always fit */
.cp .cmp table th, .cp .cmp table td { white-space: nowrap; }
.cp .cmp__manage table { table-layout: fixed; width: 100%; }
.cp .cmp__manage table th[scope="row"] { overflow: hidden; text-overflow: ellipsis; }
.cp .cmp__manage table th[scope="row"] > .cluster { flex-wrap: nowrap; min-width: 0; }
.cp .cmp__manage table th[scope="row"] .table__sub { display: block; overflow: hidden; text-overflow: ellipsis; }
.cp .cmp__manage thead th:nth-child(2), .cp .cmp__manage thead th:nth-child(3) { width: 84px; }
.cp .cmp__manage thead th.table__actions { width: 176px; }
.cp .cmp__manage .table__actions { text-align: right; }
.cp .cmp__manage .table__actions form { display: inline; }
.cp .cmp__services table { min-width: 100%; }
.cp .cmp__services td a { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.cp .cmp.cmp--board > :is(.cmp__h2h, .cmp__cards, .cmp__why),
.cp .cmp.cmp--h2h > :is(.cmp__board, .cmp__cards, .cmp__services, .cmp__trend),
.cp .cmp.cmp--cards > :is(.cmp__board, .cmp__h2h, .cmp__services, .cmp__trend, .cmp__why) { display: none; }
.cp .cmp__manage thead th:nth-child(2), .cp .cmp__manage thead th:nth-child(3) { width: 72px; }
.cp .cmp__manage thead th.table__actions { width: 158px; }
.cp .cmp__manage .table__actions .btn { padding-inline: 8px; }
.cp .cmp__manage thead th:nth-child(2) { width: 84px; }
.cp .cmp__manage thead th.table__actions { width: 136px; }

/* items in a scrolling card body keep their full height (the body scrolls; nothing inside gets squeezed and cut) */
.cp .cmp > div > .section > :not(.section__header) > *, .cp .cmp .stack > * { flex-shrink: 0; }

/* ---- Redesign p14 · Why AI picks them (W2 rival tabs): tabs in the header strip, a three-number strip, then the
   pages that name the rival and not you, one line each */
.cp .cmp .why > .section__header { padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2); gap: var(--space-3); }
.why-tabs { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.why-tabs .segmented__btn { gap: 6px; }
.why-tabs .legend__swatch { width: 9px; height: 9px; border-radius: 2px; }
.cp .cmp .why > .why__body { padding: 0; }
.why-panel[hidden] { display: none; }
.why-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid color-mix(in oklab, var(--text) 7%, transparent); }
.why-cell { display: grid; gap: 4px; padding: var(--space-3) var(--space-4); min-width: 0; }
.why-cell + .why-cell { border-left: 1px solid color-mix(in oklab, var(--text) 7%, transparent); }
.why-cell__label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.why-cell__row { display: flex; align-items: center; gap: var(--space-3); min-width: 0; white-space: nowrap; }
.why-cell__value { font-size: 20px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.why-cell__sub { font-size: var(--fs-xs); color: var(--text-subtle); }
.why-meter { width: 60px; gap: 2px; margin: 0; flex: none; }
.why-meter > i { aspect-ratio: auto; height: 10px; border-radius: 1px; }
.why-meter.series-1 { --tone: var(--series-1); } .why-meter.series-2 { --tone: var(--series-2); } .why-meter.series-3 { --tone: var(--series-3); }
.why-meter.series-4 { --tone: var(--series-4); } .why-meter.series-5 { --tone: var(--series-5); } .why-meter.series-coral { --tone: #FF6B4A; }
.why-head, .why-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 64px 100px; gap: var(--space-3); align-items: center; padding: 0 var(--space-4); }
.why-head { height: 30px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-subtle); background: var(--bg-well); white-space: nowrap; }
.why-head > :nth-child(3) { text-align: right; }
.why-pages { list-style: none; margin: 0; padding: 0; }
.why-row { min-height: 36px; font-size: var(--fs-sm); border-bottom: 1px solid color-mix(in oklab, var(--text) 4%, transparent); }
.why-row:hover { background: color-mix(in oklab, var(--text) 4%, var(--bg-surface)); }
.why-row__page { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.why-row > .kpi-tile__tag { justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.why-row__used { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.why-row__fix { color: var(--c-mint-ink); font-weight: 700; font-size: var(--fs-xs); text-decoration: none; white-space: nowrap; }
.why-row__fix:hover { text-decoration: none; filter: brightness(1.2); }
@container main (max-width: 679px) { .why-strip { grid-template-columns: minmax(0, 1fr); } .why-cell + .why-cell { border-left: 0; border-top: 1px solid color-mix(in oklab, var(--text) 7%, transparent); } .why-head, .why-row { grid-template-columns: minmax(0, 1fr) 56px 90px; } .why-head > :nth-child(2), .why-row > .kpi-tile__tag { display: none; } }

/* Head to head is the rival tabs card (it took over the You vs card's numbers) beside your competitors */
@container main (min-width: 680px) { .cp .cmp.cmp--h2h { grid-template-areas: "why manage"; grid-template-rows: minmax(0, 1fr); } }
.why-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* rival strip: "you x%" goes on its own line under the number, so four cells never run into each other */
.why-cell__row { flex-wrap: wrap; row-gap: 2px; }
.why-cell__sub { flex-basis: 100%; }
.why-cell { overflow: hidden; }
/* Competitors tables use the same header row as the rival list: 30px, small grey labels on the well colour */
.cp .cmp table thead th { height: 30px; padding-top: 0; padding-bottom: 0; vertical-align: middle; font-size: var(--fs-xs); font-weight: 600; color: var(--text-subtle); background: var(--bg-well); }

/* Competitors spacing: "Not tracked" is a 30px header row like the others; the rival list sits 12px under its
   numbers and its rows have the same height as the Your competitors rows (18px from the header to the first line) */
.cp .cmp table tr.table__group > th { height: 30px; padding-top: 0; padding-bottom: 0; vertical-align: middle; font-size: var(--fs-xs); font-weight: 600; color: var(--text-subtle); background: var(--bg-well); }
.why-head { margin-top: var(--space-3); }
.why-row { min-height: 55px; }

/* the Bento tile row sits on the page's six columns (tiles span 2, 2, 1, 1), so its gaps line up with the cards
   below instead of drifting the way 2fr 2fr 1fr 1fr does */
@container main (min-width: 680px) {
  .ov--bento .kpi-row, .ig--bento .kpi-row, .qp .kpi-row, .cp .kpi-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  :is(.ov--bento, .ig--bento, .qp, .cp) .kpi-row > .kpi-tile:nth-child(-n+2) { grid-column: span 2; }
}

/* ---- One row height everywhere: every table and table-like list in the app uses the This week's fixes row
   (36px, one line, a 1px hairline between rows). Header rows stay 30px. */
:root { --row-h: 36px; }
.ov-card .feed { align-content: start; }
:is(.app__main, .lp) .table > tbody > tr:not(.table__group) > :is(th, td) { height: var(--row-h); padding-top: 0; padding-bottom: 0; vertical-align: middle; white-space: nowrap; }
:is(.app__main, .lp) .table > tbody > tr:not(.table__group) > :is(th, td) > :is(.table__sub, br) { display: none; }
.app__main .table .btn--sm { min-height: 28px; }
.vgrid__row > :is(th, td) { height: var(--row-h); }
.ms__row:not(.ms__row--head), .ig-row, .mt-row, .mt-day, .why-row, .source:not(.source--head), .ov-fix__link, .leaderboard__row { min-height: var(--row-h); }
.ms__row:not(.ms__row--head), .ig-row, .mt-row, .mt-day, .why-row { height: var(--row-h); }
.why-row { min-height: var(--row-h); }
.source:not(.source--head) { padding-top: 0; padding-bottom: 0; }
.leaderboard__row { padding-top: 0; padding-bottom: 0; }
.feed__item .answer-row > .disclosure__summary { min-height: var(--row-h); }

.leaderboard__label, .source__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }

.s-mini { min-height: var(--row-h); height: var(--row-h); }
.bot-matrix__bot { display: flex; align-items: baseline; gap: var(--space-2); white-space: nowrap; overflow: hidden; }
.bot-matrix__bot > * { overflow: hidden; text-overflow: ellipsis; }
/* group rows inside tables are headers: 30px, like every other header row */
.vgrid tbody > .vgrid__group > th, .vgrid tbody > .vgrid__group:first-child > th { height: 30px; padding: 0 var(--space-3) !important; vertical-align: middle; font-size: var(--fs-xs); font-weight: 600; color: var(--text-subtle); background: var(--bg-well); }

/* empty states: left-aligned, the tile, title and line kept together at the top, however tall the card is */
.empty { display: grid; justify-items: start; align-content: start; text-align: left; }
.empty__actions { justify-content: flex-start; }
.ov-card > .empty, .ov-card > :not(.card__header) > .empty { padding: var(--space-4); }

/* ---- Your details: the Overview's top (picker row, header, tiles at the same heights) and the same fill: the view
   and your confirmed details sit side by side down to 100px above the window bottom; each scrolls inside itself.
   The table and the form are ring cards with a header strip; Cards and Problems keep their own cards and scroll. */
.dp { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0; padding-top: var(--space-2); align-items: start; }
.dp > * { min-width: 0; margin-bottom: var(--space-3); }
.dp > .ov-picker { justify-self: end; grid-area: auto; grid-column: 1; margin: 0 0 var(--space-2); }
.app__main:has(> .dp) { padding-bottom: calc(100px - var(--space-3)); }
.dp .section { margin-top: 0; }
.dp .section__title::before { content: none; }
.dp__cards { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
.dp__cards > * { min-width: 0; }
.dp :is(.dv__matrix, .dp__side, .dp__main) > .section { background: var(--bg-surface); border-radius: 6px; box-shadow: 0 0 0 1px var(--card-ring, color-mix(in oklab, var(--text) 9%, transparent)), 0 1px 3px rgba(0,0,0,.06); overflow: hidden; display: flex; flex-direction: column; }
.dp :is(.dv__matrix, .dp__side, .dp__main) > .section > .section__header { flex: none; margin: 0; padding: var(--space-3) var(--space-4); border-bottom: 1px solid color-mix(in oklab, var(--text) 7%, transparent); align-items: center; flex-wrap: nowrap; }
.dp .section__title { font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp :is(.dv__matrix, .dp__side, .dp__main) > .section > :not(.section__header) { flex: 1 1 auto; min-height: 0; max-height: 520px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--text) 18%, transparent) transparent; }
.dp :is(.dv__matrix, .dp__side, .dp__main) > .section > :not(.section__header) > * { flex-shrink: 0; }
.dp :is(.dv__matrix, .dp__side, .dp__main) .card, .dp .dv__matrix .table-wrap { background: none; box-shadow: none; border-radius: 0; }
.dp .dp__side .split { grid-template-columns: minmax(0, 1fr); gap: 0; }
.dp .dp__side .split > * { gap: 0; }
.dp .dp__side .card { padding: var(--space-4); }
.dp .dp__side .split__aside .card { border-top: 1px solid color-mix(in oklab, var(--text) 7%, transparent); }
.dp .dp__side form.card { display: flex; flex-direction: column; }
.dp .dp__side form.card > .card__footer { position: sticky; bottom: calc(var(--space-4) * -1); background: var(--bg-surface); padding: var(--space-3) 0; margin: 0; z-index: 1; }
.dp .dv__cards, .dp .dv__problems { max-height: 520px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--text) 18%, transparent) transparent; align-content: start; }
.dp .dv__cards > .section > .section__header, .dp .dv__problems > .section > .section__header { margin-bottom: var(--space-2); }
@container main (min-width: 680px) {
  .dp { height: max(560px, calc(100dvh - var(--fill-top, 180px) - 100px + var(--space-3))); grid-template-rows: auto auto auto minmax(0, 1fr); }
  .dp:not(:has(> .ov-picker)) { grid-template-rows: auto auto minmax(0, 1fr); }
  .dp > .dp__cards { align-self: stretch; min-height: 0; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: minmax(0, 1fr); }
  .dp__cards > * { min-height: 0; height: 100%; }
  .dp__main > .dv { height: 100%; min-height: 0; grid-auto-rows: minmax(0, 1fr); }
  .dp__main > .dv > div { min-height: 0; }
  .dp :is(.dv__matrix, .dp__side, .dp__main) > .section { height: 100%; }
  .dp :is(.dv__matrix, .dp__side, .dp__main) > .section > :not(.section__header) { max-height: none; }
  .dp .dv__cards, .dp .dv__problems { max-height: none; }
  .dp .kpi-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .dp .kpi-row > .kpi-tile:nth-child(-n+2) { grid-column: span 2; }
}
.dp .kpi-row { grid-auto-rows: 1fr; }
.dp .kpi-tile { height: 100%; }
.dp .kpi-tile .kpi-tile__value { font-size: 28px; }
.dp .kpi-tile--sq .kpi-tile__value { font-size: inherit; }

.dp__main, .dp__main > .dv, .dp__main > .dv > div, .dp__side { min-width: 0; }
.dp .dv__matrix .table-wrap { overflow-x: auto; }

/* the details table fits its card: fixed columns, the confirmed value ends in an ellipsis */
.dp .fact-table { table-layout: fixed; width: 100%; }
.dp .fact-table thead th:nth-child(1) { width: 150px; }
.dp .fact-table thead th:nth-child(n+3) { width: 104px; }
.dp .fact-table :is(td, th) { overflow: hidden; text-overflow: ellipsis; }

/* Problems (what AI gets wrong / leaves out) is one ring card too: each section's title is a header strip, the
   detail cards inside lose their frames and sit side by side with hairlines */
.dp .dv__problems { background: var(--bg-surface); border-radius: 6px; box-shadow: 0 0 0 1px var(--card-ring, color-mix(in oklab, var(--text) 9%, transparent)), 0 1px 3px rgba(0,0,0,.06); gap: 0; }
.dp .dv__problems > .section > .section__header { margin: 0; padding: var(--space-3) var(--space-4); border-bottom: 1px solid color-mix(in oklab, var(--text) 7%, transparent); align-items: center; flex-wrap: nowrap; }
.dp .dv__problems > .section + .section > .section__header { border-top: 1px solid color-mix(in oklab, var(--text) 7%, transparent); }
.dp .dv__problems .grid { gap: 0; }
.dp .dv__problems .card { background: none; box-shadow: none; border-radius: 0; padding: var(--space-3) var(--space-4); }
.dp .dv__problems .grid > .card + .card { border-left: 1px solid color-mix(in oklab, var(--text) 7%, transparent); }
.dp .dv__problems .card > .card__header { margin-bottom: var(--space-2); }
.dp .dv__problems > .dv__fine { padding: var(--space-3) var(--space-4); margin: 0; }

/* more room for the board: the view takes two thirds beside the form, and in Matrix the table gets three fifths of
   the height above the problems */
@container main (min-width: 680px) {
  .dp > .dp__cards { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .dp__main > .dv.dv--matrix { grid-template-rows: minmax(0, 3fr) minmax(0, 2fr); }
}

/* status as an icon only (the word is its tooltip): a small square chip in the status colours */
.fact-status--icon { display: inline-grid; place-items: center; width: 26px; height: 24px; padding: 0; gap: 0; }
.fact-status--icon .icon { margin: 0; }

/* fix lists (Fixes page, Next on Metrics) are 36px rows too: the title on one line, its minutes on the right */
:is(.app__main, .lp) .moves > .move { min-height: var(--row-h); align-items: center; }
:is(.app__main, .lp) .moves > .move > .move__body { display: flex; align-items: center; gap: var(--space-3); min-width: 0; min-height: var(--row-h); padding-top: 0; padding-bottom: 0; flex-wrap: nowrap; }
:is(.app__main, .lp) .moves > .move > .move__body > .move__title { flex: 1 1 auto; min-width: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-sm); }
:is(.app__main, .lp) .moves > .move > .move__body > .move__meta { flex: none; margin: 0; font-size: var(--fs-xs); color: var(--text-subtle); white-space: nowrap; }

:is(.app__main, .lp) .moves { gap: 0; }
:is(.app__main, .lp) .moves > .move { border: 0; border-radius: 0; box-shadow: none; }
:is(.app__main, .lp) .moves > .move + .move { border-top: 1px solid color-mix(in oklab, var(--text) 6%, transparent); }
:is(.app__main, .lp) .moves > .move::before { margin-top: 0; align-self: center; }
:is(.app__main, .lp) .moves > .move[aria-selected="true"] { background: color-mix(in oklab, #5E6AD2 10%, var(--bg-surface)); }

/* people in a table row: a 24px avatar, the name and email on one line */
.app__main .table .person { align-items: center; gap: var(--space-2); min-width: 0; }
.app__main .table .person .avatar { width: 24px; height: 24px; flex: none; }
.app__main .table .person__text { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; white-space: nowrap; }
.app__main .table .person__meta { overflow: hidden; text-overflow: ellipsis; }

/* every table header row is the same 30px strip: small grey labels, centred vertically, engine names with their marks
   on one line */
:is(.app__main, .lp) .table > thead > tr > th { height: 30px; padding-top: 0; padding-bottom: 0; vertical-align: middle; font-size: var(--fs-xs); font-weight: 600; color: var(--text-subtle); background: var(--bg-well); white-space: nowrap; }
:is(.app__main, .lp) .table > thead > tr > th .engine { display: inline-flex; align-items: center; gap: 6px; font-size: inherit; font-weight: inherit; color: inherit; line-height: 1; vertical-align: middle; }
:is(.app__main, .lp) .table > thead > tr > th .engine :is(svg, .icon, img) { width: 14px; height: 14px; }

/* in table and grid headers each AI is its mark only, 20px; the name is its tooltip and stays readable to screen readers */
:is(.app__main, .lp) .table > thead > tr > th .engine, .vgrid__engine > .engine { font-size: 0; gap: 0; }
:is(.app__main, .lp) .table > thead > tr > th .engine::before, .vgrid__engine > .engine::before { width: 20px; height: 20px; }

/* AI columns: the mark and each status icon centred in their column */
:is(.app__main, .lp) .table > thead > tr > th:has(> .engine), :is(.app__main, .lp) .table > tbody > tr > td:has(> .fact-status--icon) { text-align: center; padding-left: 0; padding-right: 0; }

/* the AIs' original logos everywhere a mark shows: OpenAI's knot in the text colour (its own black/white), Gemini's
   gradient spark, Google's four-colour G for AI Overviews and AI Mode */
.engine--chatgpt::before { background: var(--text); }
.engine--gemini::before, .engine--ai-overviews::before, .engine--ai-mode::before { -webkit-mask: none; mask: none; background: center / contain no-repeat; }
.engine--gemini::before { background-image: url("/assets/engines/gemini-logo.svg"); }
.engine--ai-overviews::before, .engine--ai-mode::before { background-image: url("/assets/engines/google-g.svg"); }

/* What AI gets wrong / leaves out: logos only, the name on hover */
.dp .dv__problems .engine { font-size: 0; gap: 0; }
.dp .dv__problems .engine::before { width: 18px; height: 18px; }

/* ---- Sources: the Overview's top (picker row, header, tiles at the same heights) and the same fill: the regions
   reach 100px above the window bottom and each scrolls inside itself. Every region is one ring card with a header
   strip; the cards, lists and tables inside lose their own frames and sit on hairlines. Your Business Profile shows
   in every view, in the narrower right column: List puts the gaps worth closing above it, Gaps the pages you're on,
   By AI shows it alone. */
.srp { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0; padding-top: var(--space-2); align-items: start; }
.srp > * { min-width: 0; margin-bottom: var(--space-3); }
.srp > .ov-picker { justify-self: end; grid-area: auto; grid-column: 1; margin: 0 0 var(--space-2); }
.srp .s-kpis { margin-bottom: var(--space-3); }
.app__main:has(> .srp) { padding-bottom: calc(100px - var(--space-3)); }
.srp .section { margin-top: 0; }
.srp .section__title::before { content: none; }
.srp__cards { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
.srp__cards > *, .srp .sv > * { min-width: 0; }
.srp .sv { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
.srp .sv > div { display: none; }
.srp .sv--list > :is(.sv__list, .srp__close), .srp .sv--gaps > :is(.sv__gaps, .srp__wins), .srp .sv--byai > .sv__byai, .srp .sv > .srp__side { display: flex; }

/* the ring card: a header strip, then a body that scrolls (capped on phones, filling the card on wider screens) */
.srp__region { flex-direction: column; min-height: 0; background: var(--bg-surface); border-radius: 6px; box-shadow: 0 0 0 1px var(--card-ring, color-mix(in oklab, var(--text) 9%, transparent)), 0 1px 3px rgba(0,0,0,.06); overflow: hidden; }
.srp__cards > .srp__region { display: flex; }
.srp__none > .section > .empty { padding: var(--space-4); }
.srp__region > .section { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin: 0; }
.srp__region > .section > .section__header { flex: none; margin: 0; padding: var(--space-3) var(--space-4); border-bottom: 1px solid color-mix(in oklab, var(--text) 7%, transparent); align-items: center; flex-wrap: nowrap; gap: var(--space-3); }
.srp__region .section__heading { display: flex; align-items: baseline; gap: var(--space-2); flex: 1 1 auto; min-width: 0; }
.srp .section__title { font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; max-width: 100%; }
.srp__region .section__lede { min-width: 0; font-size: var(--fs-xs); color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srp__region .section__actions { flex-wrap: nowrap; gap: var(--space-2); }
.srp__region .section__actions > .card__meta { font-size: var(--fs-xs); white-space: nowrap; }
.srp__region .section__actions .btn { min-height: 26px; }
.srp__region > .section > :not(.section__header) { flex: 1 1 auto; min-height: 0; max-height: 520px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--text) 18%, transparent) transparent; }
.srp__region > .section > :not(.section__header) > * { flex-shrink: 0; }

/* no card in a card: the cards and the table inside a region lose their frames and sit on hairlines */
.srp__region .card { --card-pad: var(--space-4); background: none; border: 0; border-radius: 0; box-shadow: none; }
.srp__region .table-wrap { background: none; border: 0; border-radius: 0; box-shadow: none; }
.srp__region .card + .card, .srp__region .grid > .card + .card { border-top: 1px solid color-mix(in oklab, var(--text) 7%, transparent); }
.srp__region .stack, .srp__region .grid { gap: 0; }
.srp__region .stack > .banner { margin: var(--space-3) var(--space-4); }

/* List: the AI tabs and the search sit on strips at the top; only the rows scroll. The card lets the filter menu
   hang over its edge, so the rows clip to its rounded corners themselves */
.srp .sv__list { overflow: visible; }
.srp .sv__list > .section > [data-tabs] { display: flex; flex-direction: column; overflow: visible; }
.srp .sv__list [data-tabs] > .tabs__list { flex: none; margin: 0; padding: var(--space-2) var(--space-3); border-bottom: 1px solid color-mix(in oklab, var(--text) 7%, transparent); }
.srp .sv__list [data-tabs] > .tabs__panel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.srp .sv__list [data-tabs] > .tabs__panel[hidden] { display: none; }
.srp .sv__list .tabs__panel > .stack { flex: 1 1 auto; min-height: 0; }
.srp .sv__list .tabs__panel > .stack > .filter-bar { flex: none; z-index: 2; padding: var(--space-2) var(--space-3); border-bottom: 1px solid color-mix(in oklab, var(--text) 7%, transparent); }
.srp .sv__list .tabs__panel > .stack > .card { flex: 1 1 auto; min-height: 0; border-radius: 0 0 6px 6px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--text) 18%, transparent) transparent; }
.srp .source { border-radius: 0; column-gap: var(--space-3); }
.srp .source__favicon { grid-row: auto; }
.srp .source--head { position: sticky; top: 0; z-index: 1; min-height: 30px; padding-block: 0; align-items: center; }
.srp .source__type { display: inline-block; max-width: 100%; line-height: 22px; overflow: hidden; text-overflow: ellipsis; }
.srp .source-status { white-space: nowrap; }
@container source-list (width > 600px) { .srp .source { grid-template-columns: minmax(0, 1fr) 8.5rem 4.5rem 8.5rem; } }
@container source-list (min-width: 420px) and (max-width: 600px) {
  .srp .source { grid-template-columns: minmax(0, 1fr) 4.5rem 8.5rem; }
  .srp .source__main, .srp .source__used { grid-column: auto; }
  .srp .source__type, .srp .source--head > :nth-child(2) { display: none; }
  .srp .source--head { display: grid; }
}
@container source-list (max-width: 419.98px) {
  .srp .source { grid-template-columns: minmax(0, 1fr) auto auto; }
  .srp .source__main, .srp .source__used { grid-column: auto; }
  .srp .source__type, .srp .source--head > :nth-child(2) { display: none; }
  .srp .source--head { display: grid; }
}

/* gaps worth closing: one gap per strip, stacked in the narrow column */
.srp .srp__close .grid { grid-template-columns: minmax(0, 1fr); }
.srp .srp__close .stack > .card + .grid { border-top: 1px solid color-mix(in oklab, var(--text) 7%, transparent); }
.srp .srp__close .card__title--display { font-size: var(--fs-sm); }
.srp .srp__close .card > .card__header .card__heading { flex-wrap: wrap; row-gap: 0; }
.srp .srp__close .card > .card__header .card__eyebrow { flex-basis: 100%; }

/* By AI: the three lists side by side on hairlines, one under the other when the card is narrow */
.srp .sv__byai { container: srp-byai / inline-size; }
.srp .sv__byai .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.srp .sv__byai .grid > .card + .card { border-top: 0; border-left: 1px solid color-mix(in oklab, var(--text) 7%, transparent); }
.srp .sv__byai .list > li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container srp-byai (max-width: 560px) {
  .srp .sv__byai .grid { grid-template-columns: minmax(0, 1fr); }
  .srp .sv__byai .grid > .card + .card { border-left: 0; border-top: 1px solid color-mix(in oklab, var(--text) 7%, transparent); }
}

/* Business Profile vs rivals: the table fits its card (fixed columns, names end in an ellipsis, the name on hover) */
.srp .compare-table { table-layout: fixed; width: 100%; }
.srp .compare-table :is(th, td) { overflow: hidden; text-overflow: ellipsis; }
.srp .compare-table thead th:first-child, .srp .compare-table tbody th[scope="row"] { width: 34%; min-width: 0; }
.app__main .srp .compare-table > thead > tr > th .engine { font-size: inherit; gap: 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.app__main .srp .compare-table > thead > tr > th .engine::before { width: 8px; height: 8px; }

@container main (min-width: 680px) {
  .srp { height: max(560px, calc(100dvh - var(--fill-top, 180px) - 100px + var(--space-3))); grid-template-rows: auto auto auto minmax(0, 1fr); }
  .srp:not(:has(> .ov-picker)) { grid-template-rows: auto auto minmax(0, 1fr); }
  .srp:not(:has(> .ov-picker)):not(:has(> .kpi-row)) { grid-template-rows: auto minmax(0, 1fr); }
  .srp > .srp__cards { align-self: stretch; min-height: 0; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: minmax(0, 1fr); }
  .srp__cards > .sv { grid-column: 1 / -1; height: 100%; min-height: 0; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: stretch; }
  .srp__cards > *, .srp .sv > * { min-height: 0; }
  .srp .sv--list { grid-template-areas: "list close" "list side"; grid-template-rows: minmax(0, 3fr) minmax(0, 2fr); }
  .srp .sv--list:not(:has(> .srp__close)) { grid-template-areas: "list side"; grid-template-rows: minmax(0, 1fr); }
  .srp .sv--gaps { grid-template-areas: "gaps wins" "gaps side"; grid-template-rows: minmax(0, 3fr) minmax(0, 2fr); }
  .srp .sv--byai { grid-template-areas: "byai side"; grid-template-rows: minmax(0, 1fr); }
  .srp .sv > .sv__list { grid-area: list; } .srp .sv > .srp__close { grid-area: close; } .srp .sv > .sv__gaps { grid-area: gaps; }
  .srp .sv > .srp__wins { grid-area: wins; } .srp .sv > .sv__byai { grid-area: byai; } .srp .sv > .srp__side { grid-area: side; }
  .srp__region > .section > :not(.section__header) { max-height: none; }
  .srp .kpi-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .srp .kpi-row > .kpi-tile:nth-child(-n+2) { grid-column: span 2; }
}
.srp .kpi-row { grid-auto-rows: 1fr; }
.srp .kpi-tile { height: 100%; }
.srp .kpi-tile .kpi-tile__value { font-size: 28px; }
.srp .kpi-tile--sq .kpi-tile__value { font-size: inherit; }
.srp .kpi-tile__tag { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; line-height: 20px; }

/* ---- Fixes: the Overview's top (picker row, header, tiles at the same heights) and the same fill: the regions of
   the chosen view reach 100px above the window bottom and each scrolls inside itself. List: this week (the fixes
   beside the open one) beside the backlog over done, as ring cards; Board: three columns of framed cards that scroll;
   One at a time: the open fix alone, its title and buttons kept in view. Phones keep natural heights, bodies capped. */
.fp { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0; padding-top: var(--space-2); align-items: start; }
.fp > * { min-width: 0; margin-bottom: var(--space-3); }
.fp > .ov-picker { justify-self: end; grid-area: auto; grid-column: 1; margin: 0 0 var(--space-2); }
.app__main:has(> .fp, > .stack > div > .fp) { padding-bottom: calc(100px - var(--space-3)); }
.fp .ov-head__actions { align-items: center; }
.fp .ov-head__actions .hint__body { left: auto; right: 0; }
.fp .section { margin: 0; }
.fp .section__title::before { content: none; }
.fp .kpi-row { grid-auto-rows: 1fr; }
.fp .kpi-tile { height: 100%; }
.fp .kpi-tile .kpi-tile__value { font-size: 28px; }
.fp .kpi-tile--sq .kpi-tile__value { font-size: inherit; }
.fp .kpi-tile > .kpi-tile__tag { display: inline-block; line-height: 20px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.fp__cards { display: grid; grid-template-columns: minmax(0, 1fr); }
.fp__cards > *, .fp .fv > *, .fp .fv__side > * { min-width: 0; }
.fp .fv--list > .fv__list, .fp .fv--focus > .fv__list, .fp .fv__side { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.fp .fv--focus .fv__side { display: none; }
/* regions are the Overview's ring cards: a header strip, then a body that scrolls; nothing inside keeps a frame */
.fp :is(.fv__list, .fv__side, .fp__cards) > .section { background: var(--bg-surface); border-radius: 6px; box-shadow: 0 0 0 1px var(--card-ring, color-mix(in oklab, var(--text) 9%, transparent)), 0 1px 3px rgba(0,0,0,.06); overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.fp :is(.fv__list, .fv__side, .fp__cards) > .section > .section__header { flex: none; margin: 0; padding: var(--space-3) var(--space-4); border-bottom: 1px solid color-mix(in oklab, var(--text) 7%, transparent); align-items: center; flex-wrap: nowrap; }
.fp .section__title { font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp :is(.fv__list, .fv__side, .fp__cards) > .section > :not(.section__header) { flex: 1 1 auto; min-height: 0; max-height: 520px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--text) 18%, transparent) transparent; }
.fp :is(.fv__list, .fv__side, .fp__cards) > .section > :not(.section__header) > * { flex-shrink: 0; }
.fp :is(.fv__list, .fv__side, .fp__cards) > .section .card { background: none; box-shadow: none; border-radius: 0; }
.fp .fp__cards > .section .card { padding: 0; }
.fp .fp__cards > .section .empty { padding: var(--space-4); background: none; box-shadow: none; border-radius: 0; }
.fp .fv__side > .section > .stack { gap: 0; }
/* fix rows are one 36px line: the title, then its minutes or its buttons on the right */
.fp .moves > .move { grid-template-columns: calc(8px + var(--space-4)) minmax(0, 1fr) auto; }
.fp .moves > .move > .move__actions { grid-column: auto; flex-wrap: nowrap; align-items: center; gap: 6px; padding: 0 var(--space-3) 0 0; border-top: 0; }
.fp .moves > .move > .move__actions .btn { min-height: 26px; padding-inline: 8px; }
.fp .moves > .move > .move__actions form { display: contents; }
/* this week: the list and its progress beside the open fix, a hairline between them */
.fp #week > .split { grid-template-columns: minmax(0, 1fr); gap: 0; }
.fp #week .split__aside { gap: 0; position: static; max-height: none; overflow: visible; padding: 0; margin: 0; }
.fp #week .split__aside > .card { padding: var(--space-3) var(--space-4); border-top: 1px solid color-mix(in oklab, var(--text) 7%, transparent); }
.fp #week .split__main { gap: 0; }
.fp .fv--list #week .split__main { border-top: 1px solid color-mix(in oklab, var(--text) 7%, transparent); }
.fp #week .split__main > .card { padding: 0; }
.fp #week .split__main > .card > .card__header { margin: 0; padding: var(--space-3) var(--space-4); border-bottom: 1px solid color-mix(in oklab, var(--text) 7%, transparent); flex-wrap: nowrap; }
.fp #week .split__main > .card > .card__body { padding: var(--space-4); }
.fp #week .split__main > .card > .card__footer { margin: 0; padding: var(--space-3) var(--space-4); gap: var(--space-2); }
.fp #week .split__main > .card > .card__footer .btn { --btn-h: var(--control-sm); --btn-pad: var(--space-3); font-size: var(--fs-xs); }
/* inside the open fix nothing is a card: the three numbers are one strip, the answer and the email lose their frames */
.fp #week .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.fp #week .metrics > .metric.metric { padding: 0 var(--space-3); border-radius: 0; background: none; box-shadow: none; transform: none; }
.fp #week .metrics > .metric.metric:first-child { padding-left: 0; }
.fp #week .metrics > .metric.metric + .metric { border-left: 1px solid color-mix(in oklab, var(--text) 7%, transparent); }
.fp #week .answer:not(.answer--flat) { padding: 0; border-radius: 0; box-shadow: none; background: none; }
.fp #week .answer:not(.answer--flat) > * { margin-inline: 0; }
.fp #week .answer:not(.answer--flat) > .answer__head { padding: 0 0 var(--space-2); margin-bottom: var(--space-2); }
.fp #week .email { border: 0; border-radius: 0; box-shadow: none; background: none; overflow: visible; }
.fp #week .email__meta { padding: 0 0 var(--space-3); background: none; border-bottom: 1px solid color-mix(in oklab, var(--text) 7%, transparent); }
.fp #week .email__body { padding: var(--space-3) 0 0; gap: var(--space-4); }
.fp #week .email__footer { padding: var(--space-3) 0 0; border-top: 0; }
/* backlog: the filters above the rows; done: the rows, then the share since your first fix below a hairline */
.fp #backlog > .stack > .stack:first-child { gap: var(--space-2); padding: var(--space-2) var(--space-4); border-bottom: 1px solid color-mix(in oklab, var(--text) 7%, transparent); }
.fp #backlog .filters + .filters { margin-top: 0; }
.fp #backlog .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.fp #backlog .filters > * { flex: none; }
.fp #backlog .filters__count { display: none; }
.fp #done > .stack > .card { padding: var(--space-3) var(--space-4); border-top: 1px solid color-mix(in oklab, var(--text) 7%, transparent); }
.fp #done > .stack > .card > .card__header { margin-bottom: var(--space-2); }
.fp #done > .stack > .card > .card__footer { margin: var(--space-3) 0 0; padding: var(--space-3) 0 0; }
/* backlog and done rows show their buttons on hover, so their titles keep the room (always shown on touch) */
@media (hover: hover) {
  .fp .fv__side .move:not(:hover, :focus-within) > .move__actions > .btn,
  .fp .fv__side .move:not(:hover, :focus-within) > .move__actions > form > .btn { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
}
/* board: the columns have no frame and scroll; the cards in them keep theirs */
.fp .f-col__head { min-height: 28px; }
.fp .f-col__body { display: grid; gap: var(--space-2); align-content: start; min-width: 0; max-height: 520px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--text) 18%, transparent) transparent; padding: 3px; margin: 0 -3px; }
@container main (min-width: 680px) {
  .fp { height: max(560px, calc(100dvh - var(--fill-top, 180px) - 100px + var(--space-3))); grid-template-rows: auto auto auto minmax(0, 1fr); }
  .fp:not(:has(> .ov-picker)) { grid-template-rows: auto minmax(0, 1fr); }
  .fp > .fp__cards { align-self: stretch; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .fp__cards > * { min-height: 0; height: 100%; }
  .fp .kpi-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .fp .kpi-row > .kpi-tile:nth-child(-n+2) { grid-column: span 2; }
  .fp .fv { min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .fp .fv.fv--focus:has(> .f-step) { grid-template-rows: auto minmax(0, 1fr); }
  .fp .fv > :is(.fv__list, .fv__board), .fp .fv__side, .fp .fv__side > .section { min-height: 0; }
  .fp :is(.fv__list, .fv__side, .fp__cards) > .section { height: 100%; }
  .fp :is(.fv__list, .fv__side, .fp__cards) > .section > :not(.section__header) { max-height: none; }
  /* List: this week beside the backlog over done (side by side when this week is empty) */
  .fp .fv--list > .fv__list { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: minmax(0, 1fr); }
  .fp .fv--list > .fv__list:is(:not(:has(> #week)), :not(:has(> .fv__side))) { grid-template-columns: minmax(0, 1fr); }
  .fp .fv__side { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .fp .fv__list:has(> #week) > .fv__side { grid-auto-flow: row; grid-template-rows: none; grid-auto-rows: minmax(0, 1fr); }
  .fp .fv__list:has(> #week) > .fv__side:has(> #backlog):has(> #done) { grid-template-rows: minmax(0, 3fr) minmax(0, 2fr); }
  .fp .fv--focus > .fv__list { grid-template-rows: minmax(0, 1fr); }
  /* this week: the list scrolls on its own, the open fix keeps its title and buttons while its body scrolls */
  .fp #week > .split { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: minmax(0, 1fr); align-items: stretch; overflow: hidden; }
  .fp #week .split__aside { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--text) 18%, transparent) transparent; }
  .fp #week .split__main { min-height: 0; display: flex; flex-direction: column; border-top: 0; border-left: 1px solid color-mix(in oklab, var(--text) 7%, transparent); }
  .fp #week .split__main > .card:not([hidden]) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .fp #week .split__main > .card > :is(.card__header, .card__footer) { flex: none; }
  .fp #week .split__main > .card > .card__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--text) 18%, transparent) transparent; }
  .fp .fv--focus #week > .split { grid-template-columns: minmax(0, 1fr); }
  .fp .fv--focus #week .split__main { border-left: 0; }
  /* Board: the three columns fill the height and each scrolls (stacked into equal rows below 760px) */
  .fp .fv--board > .fv__board, .fp .fv__board > .f-board { height: 100%; min-height: 0; }
  .fp .f-board { grid-auto-rows: minmax(0, 1fr); align-items: stretch; }
  .fp .f-col { display: flex; flex-direction: column; min-height: 0; }
  .fp .f-col__head { flex: none; }
  .fp .f-col__body { flex: 1 1 auto; min-height: 0; max-height: none; }
}
/* below 1000px this week is too narrow for two panes: its list sits above the open fix and the whole card scrolls */
@container main (min-width: 680px) and (max-width: 999px) {
  .fp .fv--list #week > .split { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; align-items: start; overflow-y: auto; }
  .fp .fv--list #week .split__aside { overflow: visible; }
  .fp .fv--list #week .split__main { display: block; border-left: 0; border-top: 1px solid color-mix(in oklab, var(--text) 7%, transparent); }
  .fp .fv--list #week .split__main > .card:not([hidden]) { display: block; }
  .fp .fv--list #week .split__main > .card > .card__body { overflow: visible; }
}
@container main (min-width: 1000px) {
  .fp .fv--list > .fv__list { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

/* ---- Site check: the Overview's top (picker row, header, tiles at the same heights) and the same fill: the view's
   region beside the issues, history and robots.txt below it, down to 100px above the window bottom. Each region is a
   ring card with a header strip that scrolls inside itself (the crawler cards just scroll); nothing inside is a card
   in a card. Phones keep natural heights, each region capped. */
.scp { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0; padding-top: var(--space-2); align-items: start; }
.scp > * { min-width: 0; margin-bottom: var(--space-3); }
.scp > .ov-picker { justify-self: end; grid-area: auto; grid-column: 1; margin: 0 0 var(--space-2); }
.scp .sc-kpis { margin-bottom: var(--space-3); }
.app__main:has(> .scp), .app__main:has(> .stack > div > .scp) { padding-bottom: calc(100px - var(--space-3)); }
.scp .section { margin-top: 0; }
.scp .section__title::before { content: none; }
/* the running check, a check that did not finish, a check of another address: one row, the crawlers side by side */
.scp__status { display: grid; gap: var(--space-2); }
.scp__status > .measure { max-width: none; }
.scp__status .tasks { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
/* the regions; each view shows its own (summary, matrix or crawler cards), issues, robots.txt and history show in all */
.scp > .scp__cards { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.scp__cards > * { min-width: 0; min-height: 0; }
.scp .sc--matrix > :is(.scp__report, .scp__bots), .scp .sc--cards > :is(.scp__report, .scp__matrix), .scp .sc--report > :is(.scp__matrix, .scp__bots) { display: none; }
.scp__cards > :not(.scp__bots) { background: var(--bg-surface); border-radius: 6px; box-shadow: 0 0 0 1px var(--card-ring, color-mix(in oklab, var(--text) 9%, transparent)), 0 1px 3px rgba(0,0,0,.06); overflow: hidden; display: flex; flex-direction: column; }
.scp__cards > div > .section { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin: 0; }
.scp__cards > div > .section > .section__header { flex: none; margin: 0; padding: var(--space-3) var(--space-4); border-bottom: 1px solid color-mix(in oklab, var(--text) 7%, transparent); align-items: center; flex-wrap: nowrap; }
.scp__cards > div > .section > .section__header > .section__heading { min-width: 0; }
.scp__cards > div > .section > .section__header > .section__actions { flex-wrap: nowrap; }
.scp .section__title { font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scp__cards > div > .section > :not(.section__header) { flex: 1 1 auto; min-height: 0; max-height: 520px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--text) 18%, transparent) transparent; }
.scp__cards > div > .section > :not(.section__header) > * { flex-shrink: 0; }
/* inside a region: cards and tables lose their frames; issues and robots.txt are flat rows between hairlines */
.scp__cards > :not(.scp__bots) :is(.card, .table-wrap) { background: none; box-shadow: none; border-radius: 0; --card-pad: var(--space-4); }
.scp__cards > :not(.scp__bots) .grid { grid-template-columns: minmax(0, 1fr); gap: 0; align-content: start; }
.scp__cards > :not(.scp__bots) .grid > .card + .card { border-top: 1px solid color-mix(in oklab, var(--text) 7%, transparent); }
.scp__cards > :not(.scp__bots) .card:not(.card--flush):not(.sc-report) { padding: var(--space-3) var(--space-4); }
.scp__cards > :not(.scp__bots) .card:not(.card--flush) > .card__header { margin: 0 0 var(--space-2); padding: 0; min-height: 28px; border-bottom: 0; }
.scp__cards > :not(.scp__bots) .card:not(.card--flush) > .card__footer { margin: var(--space-3) 0 0; padding: 0; min-height: 0; border-top: 0; }
.scp__cards > :not(.scp__bots) .card--fill > :has(+ .card__footer) { margin-bottom: 0; }
.scp__cards > :not(.scp__bots) .card__section:first-child { border-top: 0; }
.scp__cards .card__heading > .cluster { min-width: 0; flex-wrap: nowrap; }
.scp__cards .metrics > .metric.metric { padding: 0; background: none; box-shadow: none; transform: none; }
.scp .sc-report__rows { display: grid; }
.scp .sc-report__row { min-height: var(--row-h); padding-top: 0; padding-bottom: 0; }
.sc-sq__c--ok { background: var(--c-mint, #2DD4A7); }
/* the matrix fits its card: fixed columns, names and paths end in an ellipsis */
.scp .bot-matrix { table-layout: fixed; width: 100%; }
.scp .bot-matrix thead th:first-child { width: 22%; }
.scp .bot-matrix :is(th, td) { overflow: hidden; text-overflow: ellipsis; }
.scp .bot-matrix__name { flex: none; }
/* the crawler cards keep their own frames: the region has none and just scrolls */
.scp__bots { max-height: 520px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--text) 18%, transparent) transparent; padding: 2px; margin: -2px; }
.scp__bots > .sc__cards { align-content: start; }
/* history and robots.txt lists: 36px rows */
@media (min-width: 641px) {
  .scp__cards .dl--divided { row-gap: 0; }
  .scp__cards .dl--divided > :is(dt, dd) { display: flex; align-items: center; min-height: var(--row-h); padding-top: 0; padding-bottom: 0; }
}
@container main (min-width: 680px) {
  .scp:not(.scp--empty) { height: max(560px, calc(100dvh - var(--fill-top, 180px) - 100px + var(--space-3))); grid-template-rows: auto auto auto minmax(0, 1fr); }
  .scp:not(.scp--empty):has(> .scp__status) { grid-template-rows: auto auto auto auto minmax(0, 1fr); }
  .scp > .scp__cards { align-self: stretch; min-height: 0; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: minmax(0, 3fr) minmax(0, 2fr); grid-template-areas: "main issues" "history robots"; }
  .scp > .scp__cards:not(:has(> .scp__issues)) { grid-template-areas: "main robots" "history robots"; }
  .scp__cards > :is(.scp__report, .scp__matrix, .scp__bots) { grid-area: main; }
  .scp__cards > .scp__issues { grid-area: issues; }
  .scp__cards > .scp__robots { grid-area: robots; }
  .scp__cards > .scp__history { grid-area: history; }
  .scp__cards > div > .section > :not(.section__header), .scp__bots { max-height: none; }
  .scp .kpi-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .scp .kpi-row > .kpi-tile:nth-child(-n+2) { grid-column: span 2; }
}
.scp .kpi-row { grid-auto-rows: 1fr; }
.scp .kpi-tile { height: 100%; }
.scp .kpi-tile .kpi-tile__value { font-size: 28px; }
.scp .kpi-tile--sq .kpi-tile__value { font-size: inherit; }
.scp .kpi-tile__tag { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; line-height: 20px; }

/* when a banner wraps the page body (.stack > div), every fill page still keeps its 100px bottom margin */
.app__main:has(> .stack > div > :is(.ov, .ig, .qp, .cp, .dp, .srp, .fp, .scp)) { padding-bottom: calc(100px - var(--space-3)); }

/* ---- review fixes for Sources, Fixes and Site check */
/* By AI: the first card's "?" opens to the right, into the room over the other cards, so the scrolling body never cuts it */
.srp .sv__byai .grid > .card:first-child .hint__body { left: 0; right: auto; }
/* Business Profile table: a long rival name ends in an ellipsis */
.app__main .srp .compare-table > thead > tr > th .engine__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Backlog: the first visible row has no hairline above it (the filters strip already draws one) */
.fp #backlog-list > .move:nth-child(1 of :not([hidden])) { border-top: 0; }
/* Site check: issue "?" popovers open under the card header, across its width, so they stay inside the region */
.scp__cards .card > .card__header { position: relative; }
.scp__cards .card__heading .hint { position: static; }
.scp__cards .card__heading .hint__body { left: 0; right: 0; width: auto; max-width: none; }
/* Site check matrix: statuses as icons only at every width (the word leads each cell's tooltip; the key sits below) */
.scp .bot-matrix td .bot-status { font-size: 0; gap: 0; }
.scp .bot-matrix td .bot-status .icon { width: 18px; height: 18px; }
.scp .sc-matrix-key { padding: var(--space-3) var(--space-4); border-top: 1px solid color-mix(in oklab, var(--text) 7%, transparent); font-size: var(--fs-xs); }
/* Site check matrix group rows are 30px header strips like every other */
.scp .bot-matrix > tbody > tr.table__group > th { height: 30px; padding-top: 0; padding-bottom: 0; vertical-align: middle; font-size: var(--fs-xs); font-weight: 600; color: var(--text-subtle); background: var(--bg-well); }
/* Site check Cards: the crawler cards keep their frames, the section title is a plain heading above them */
.scp__cards > .scp__bots > .section > .section__header { padding: 0; border-bottom: 0; margin-bottom: var(--space-2); }
.scp__cards > .scp__bots > .section > :not(.section__header) { max-height: none; overflow: visible; }
/* banners with a "?": the popover is never clipped; only the title ends in an ellipsis */
.banner__body:has(> .hint) { overflow: visible; }
.banner__body > .banner__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.banner:has(.hint[open]) { position: relative; z-index: 20; }

/* Sources By AI: each column's page list uses the same 36px rows with hairlines as every other list */
.srp .sv__byai .list > li { display: flex; align-items: center; min-height: var(--row-h); margin: 0; border-top: 1px solid color-mix(in oklab, var(--text) 6%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srp .sv__byai .list > li:first-child { border-top: 0; }
.srp .sv__byai .list { gap: 0; }

/* Site check matrix, pivoted: pages down the side in full, one column per crawler with its name centred on one line */
.scp .bot-matrix--pages tbody th.bot-matrix__page { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scp .bot-matrix--pages thead th.bot-matrix__col { text-align: center; padding-left: var(--space-1); padding-right: var(--space-1); }
.scp .bot-matrix--pages thead th.bot-matrix__col .bot-matrix__name { display: block; font-size: inherit; font-weight: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* every view: the main card on the left, History beside it (under the issues when there are any); no robots.txt card.
   Crawler names in the matrix may end in an ellipsis; each column's tooltip has the full name */
@container main (min-width: 680px) {
  .scp > .scp__cards { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "main issues" "main history"; }
  .scp > .scp__cards:not(:has(> .scp__issues)) { grid-template-rows: minmax(0, 1fr); grid-template-areas: "main history"; }
}
.scp .bot-matrix--pages thead th.bot-matrix__col { font-size: var(--fs-xs); }

/* Redesign 21 · landing (L4 "Answer left"): left hero with a typing ChatGPT answer, three example app cards, plans,
   one closing form. Phones (below 640px) drop the rivals and facts cards and the plan cards for one price line. */
.lp { --lp-hair: color-mix(in oklab, var(--text) 7%, transparent); }
.lp-hero { padding: var(--space-12) 0 var(--space-16); }
.lp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-12); align-items: center; }
.lp-hero__copy { display: grid; gap: var(--space-5); align-content: start; }
.lp-h1 { margin: 0; font-size: clamp(34px, 5vw, 56px); line-height: 1.05; letter-spacing: -.035em; font-weight: 800; }
.lp-h2 { margin: 0 0 var(--space-6); font-size: clamp(24px, 3vw, 34px); line-height: 1.1; letter-spacing: -.03em; font-weight: 800; }
.lp-lede { margin: 0; font-size: var(--fs-lg); line-height: 1.5; color: var(--text-secondary); }
.lp-muted { color: var(--text-subtle); font-size: var(--fs-sm); }
.lp-free { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0; font-size: var(--fs-xs); color: var(--text-subtle); }
.lp-free span { display: inline-flex; align-items: center; gap: 4px; }
.lp-free .icon { width: 14px; height: 14px; color: var(--status-positive); }
.lp .form-row .field__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lp .form-row > .field { flex: 1 1 9rem; }
.lp .form-row > .field + .field { flex: 0 1 8rem; }
.lp-band { padding: var(--space-16) 0; border-top: 1px solid var(--lp-hair); }
.lp-cta { padding-bottom: var(--space-20, 80px); }
.lp-cta .form-row, .lp-cta .lp-free { max-width: 640px; }
.lp-cta .lp-free { margin-top: var(--space-4); }

.lp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); align-items: stretch; }
/* the Overview's card padding (16px) and one header height for all three, whatever sits on the right */
.lp-cards > .card { --card-pad: var(--space-4); }
.lp-cards > .ov-card > .card__header { box-sizing: border-box; height: 41px; padding-top: 0; padding-bottom: 0; align-items: center; flex-wrap: nowrap; }
.lp-cards > .ov-card > .card__header .status { line-height: 1; }
/* every card's rows line up: each list opens with the same 30px header strip as the table, then 36px rows with
   hairlines between them, edge to edge */
.lp-colhead { display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 var(--card-pad); font-size: var(--fs-xs); font-weight: 600; color: var(--text-subtle); background: var(--bg-well); }
.lp-cards .ov-fixes { padding: 0; }
/* the fix times read as a left-aligned column under "Time" */
.lp-cards .ov-fix__min { width: 48px; text-align: left; }
.lp-cards .ov-card--fixes .lp-colhead > :last-child { width: 48px; text-align: left; }
.lp-cards .leaderboard { gap: 0; padding: 0; }
.lp-cards .leaderboard__row { box-sizing: border-box; height: var(--row-h); min-height: 0; padding: 0 var(--card-pad); border-radius: 0; }
.lp-cards .leaderboard__row + .leaderboard__row, .lp-cards .ov-fix + .ov-fix { border-top: 0; box-shadow: inset 0 1px 0 color-mix(in oklab, var(--text) 6%, transparent); }
.lp-cards .fact-table > tbody > tr > :is(th, td) { box-sizing: border-box; }

/* the hero answer: types itself out ([data-type], app.js) */
.lp-answer__text { margin: 0; padding: var(--space-4); min-height: 8.5em; font-size: var(--fs-md, 15px); line-height: 1.65; color: var(--text-secondary); }
.lp-answer__text b { color: var(--text); font-weight: 700; }
.lp-answer__src { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0 var(--space-4) var(--space-4); }
.lp-answer__src span { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--radius-chip, 4px); background: var(--bg-well); font-size: var(--fs-2xs); font-weight: 600; color: var(--text-secondary); }
.lp-caret { display: inline-block; width: 7px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--text-secondary); animation: lp-blink 1s steps(2) infinite; }
@keyframes lp-blink { 50% { opacity: 0; } }

/* plans */
.lp-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.lp-plan { display: grid; gap: var(--space-2); align-content: start; }
.lp-plan p { margin: 0; }
.lp-plan__name { font-size: var(--fs-sm); color: var(--text-secondary); font-weight: 600; }
.lp-plan__pick { color: var(--brand-indigo, #5E6AD2); }
.lp-plan__price { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.lp-plan__price .table__sub { display: inline; margin: 0 0 0 2px; font-size: var(--fs-xs); font-weight: 500; color: var(--text-subtle); letter-spacing: 0; }
.lp-plan .btn { margin-top: var(--space-3); }
.lp-plan--pick { box-shadow: 0 0 0 1px color-mix(in oklab, #5E6AD2 60%, transparent), var(--card-drop); }
.lp-show-s { display: none; }

@media (max-width: 960px) {
  .lp-split { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .lp-cards { grid-template-columns: minmax(0, 1fr); }
  .lp-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .lp-hero { padding: var(--space-8) 0 var(--space-10); }
  .lp-band { padding: var(--space-10) 0; }
  .lp-h1 { font-size: 34px; }
  .lp-h2 { font-size: 24px; margin-bottom: var(--space-4); }
  .lp .form-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .lp .form-row > .btn { width: 100%; justify-content: center; }
  .lp-hide-s { display: none; }
  .lp-show-s { display: block; margin: 0; }
}

/* Redesign 22 · onboarding in the app's look: the questions card gets the app's search bar, 30px group rows and
   36px one-line rows; Start free week stays pinned to the bottom of the screen so it is never lost below 25 rows */
.focus__main .table > tbody > tr:not(.table__group) > :is(th, td) { height: var(--row-h); padding-top: 0; padding-bottom: 0; vertical-align: middle; white-space: nowrap; }
.focus__main .table > tbody > tr:not(.table__group) > th { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.focus__main .table > tbody > tr:not(.table__group) > :is(th, td) > :is(.table__sub, br) { display: none; }
.focus__main .table .btn--sm { min-height: 28px; }
.focus__main .table .table__group > th { height: 30px; padding-top: 0; padding-bottom: 0; vertical-align: middle; font-size: var(--fs-xs); font-weight: 600; color: var(--text-subtle); background: var(--bg-well); }
.ob-q__bar { padding: var(--space-4); border-bottom: 1px solid color-mix(in oklab, var(--text) 7%, transparent); }
.ob-finish { position: sticky; bottom: 0; z-index: 5; margin-top: var(--space-4); padding: var(--space-3) 0; background: var(--bg-canvas); }

/* Redesign 23 · a new business's overview: "What to expect" is one card with a 36px row per step (what, when) */
.ov-expect > .card__header { min-height: 44px; margin: 0; padding: 0 var(--space-4); align-items: center; flex-wrap: nowrap; }
.ov-expect__list { list-style: none; margin: 0; padding: 0; }
.ov-expect__row { display: flex; align-items: center; gap: var(--space-3); min-height: var(--row-h); padding: 0 var(--space-4); border-top: 1px solid color-mix(in oklab, var(--text) 6%, transparent); font-size: var(--fs-sm); }
.ov-expect__row::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 2px; box-shadow: inset 0 0 0 1.5px var(--text-subtle); }
.ov-expect__row--next::before { background: #5E6AD2; box-shadow: none; }
.ov-expect__what { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-expect__when { flex: none; font-size: var(--fs-xs); color: var(--text-subtle); white-space: nowrap; }
.app__main > .page-header + .ov-expect, .app__main > .page-header + .card { margin-top: var(--space-6); }

/* Redesign 23 · phones: one clean top bar (menu, mark, page name, share, avatar), titles on up to two lines, square
   tiles full width so their labels and tags fit, plain tiles two to a row */
@media (max-width: 640px) {
  .topbar .topbar__crumbs > .topbar__name, .topbar .topbar__crumbs > .icon { display: none; }
  .topbar .topbar__crumbs > .topbar__name:only-child { display: block; }
  .topbar .topbar__page { overflow: hidden; text-overflow: ellipsis; }
  .topbar .topbar__updated { display: none; }
  .app__main .page-header__title { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  .app__main .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app__main .kpi-row > .kpi-tile--sq { grid-column: 1 / -1; }
  .app__main .kpi-tile__tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; justify-self: start; }
  .app__main .kpi-tile { min-width: 0; }
  /* the single phone column never grows past the screen (a wide row inside used to push it to ~500px) */
  .app__main > .ov, .app__main > .stack > div > .ov { grid-template-columns: minmax(0, 1fr); }
  .hint__body { max-width: calc(100vw - 2 * var(--gutter)); }
  /* the crawler table scrolls sideways so every crawler name reads in full; the page column stays put */
  .scp .table-wrap:has(> .bot-matrix--pages) { overflow-x: auto; overscroll-behavior-x: contain; }
  .scp .bot-matrix--pages { table-layout: auto; width: max-content; min-width: 100%; }
  .scp .bot-matrix--pages .bot-matrix__col { width: auto; min-width: 0; padding-inline: 10px; }
  .scp .bot-matrix--pages :is(th, td):first-child { position: sticky; left: 0; z-index: 1; background: var(--bg-surface); }
  .scp .bot-matrix--pages .bot-matrix__name { overflow: visible; text-overflow: clip; }
}
/* the competitors list: one 36px line per rival (name, share, actions), never stacked into blocks */
.c-manage { width: 100%; table-layout: fixed; }
.c-manage > thead > tr > th:nth-child(2), .c-manage > tbody > tr > td:nth-child(2) { width: 76px; }
.c-manage > thead > tr > th:nth-child(3), .c-manage > tbody > tr > td:nth-child(3) { width: 96px; }
.c-manage > tbody > tr > th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-manage > tbody > tr > th > .cluster { flex-wrap: nowrap; min-width: 0; max-width: 100%; }
.c-manage > tbody > tr > th > .cluster > :last-child { overflow: hidden; text-overflow: ellipsis; }
.c-manage > tbody > tr > th .table__sub { display: none; }
.c-manage > tbody > tr > td { white-space: nowrap; }
.c-manage .table__actions { text-align: right; }
.c-manage .table__actions > * { vertical-align: middle; }
.c-manage .table__actions > form { display: inline-block; }

/* Redesign 24 · log in, sign up, reset: the board's squares as a live field behind one 400px column; the footer sits
   at the bottom of the window on short pages */
body[data-shell="site"] { min-height: 100dvh; display: flex; flex-direction: column; }
body[data-shell="site"] > .site-main { flex: 1 0 auto; }
.auth { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: 100%; background: #09090B; }
.site-main:has(> .auth) { display: grid; }
body:has(.auth) { background: #09090B; }
body:has(.auth) :is(.site-header, .site-footer) { background: #09090B; }
.auth__sea { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.auth__pitch { position: relative; z-index: 1; display: grid; align-content: end; padding: var(--space-12) var(--space-12) var(--space-12) max(var(--gutter), calc((100vw - 1200px) / 2)); }
.auth__line { margin: 0; font-family: "Manrope", var(--font-body); font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -.04em; color: var(--text); }
.auth__line span { color: var(--text-disabled); }
.auth__panel { position: relative; z-index: 1; display: grid; place-items: center; padding: var(--space-16) var(--space-12); }
.auth__panel::before { content: ""; position: absolute; inset: 0 0 0 -220px; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 300px); mask-image: linear-gradient(90deg, transparent, #000 300px); }
.auth__panel::after { content: ""; position: absolute; z-index: -2; inset: 0 0 0 -220px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(20, 20, 24, .4) 300px); }
.auth__panel::before { z-index: -1; background: linear-gradient(180deg, #09090B 0, #09090B 12%, rgba(9, 9, 11, .85) 24%, rgba(9, 9, 11, .45) 38%, rgba(9, 9, 11, .12) 50%, transparent 60%); }
.auth__box { width: 100%; max-width: 360px; display: grid; gap: var(--space-5); }
.auth__head { display: grid; gap: var(--space-2); }
.auth__title { margin: 0; font-family: "Manrope", var(--font-body); font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.auth__lede { font-size: var(--fs-sm); color: var(--text-subtle); }
.auth__card { --card-pad: 0; padding: 0; background: none; box-shadow: none; border: 0; }
.auth__card .stack { gap: var(--space-4); }
.auth__card .field__label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); }
.auth__card .field__hint { font-size: var(--fs-xs); color: var(--text-subtle); }
.auth__card .btn--lg { --btn-h: 42px; font-size: var(--fs-sm); }
.auth__card a:not(.btn) { color: var(--text-subtle); font-size: var(--fs-xs); text-decoration: none; }
.auth__card a:not(.btn):hover { color: var(--text); }
.auth__foot { display: flex; gap: var(--space-2); }
.auth__foot .btn { font-size: var(--fs-xs); color: var(--text-subtle); }
.auth__foot .btn:hover { color: var(--text); }
@media (max-width: 860px) { .auth { grid-template-columns: minmax(0, 1fr); } .auth__pitch { display: none; } .auth__panel { padding: var(--space-10) var(--gutter); } .auth__panel::before, .auth__panel::after { inset: 0; -webkit-mask-image: none; mask-image: none; } .auth__panel::after { background: rgba(20, 20, 24, .4); } }

/* ==== Blog (docs/BLOG.md) ==== */
/* The public blog: index, topic pages and posts (src/views/blog.js). L1 ring cards and hairlines only (an even ring,
   never a side bar), radius 6 (4 for tags, 2 for marks), Manrope everywhere, colours by role (indigo for links into
   the sources, lime for "New"). The hero video loops muted; under prefers-reduced-motion CSS alone swaps it for its
   poster. Long-form prose is the one place with paragraphs (a deliberate exception to docs/TEXT.md). */
.blog-index, .post {
  --blog-ring: color-mix(in oklab, var(--text) 9%, transparent);
  --blog-line: color-mix(in oklab, var(--text) 7%, transparent);
  --blog-drop: 0 1px 3px rgba(0,0,0,.06);
  --blog-stage: #0B0B0C;
}
.blog-index { padding: var(--space-12) 0 var(--space-24); }
.blog-head { display: grid; gap: var(--space-2); margin-bottom: var(--space-8); }
.blog-head__title { font-size: var(--fs-4xl); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }

/* hero media: a dark 16:9 stage with an even ring */
.blog-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: var(--blog-stage); box-shadow: 0 0 0 1px var(--blog-ring), var(--blog-drop); }
.blog-media__video, .blog-media__poster, .blog-media__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-media__poster { display: none; }
@media (prefers-reduced-motion: reduce) {
  .blog-media__video:has(+ .blog-media__poster) { display: none; }
  .blog-media__poster { display: block; }
}

/* the featured post: media and words side by side in one ring card */
.blog-feature { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; }
.blog-feature--text { grid-template-columns: minmax(0, 1fr); }
.blog-feature > .blog-feature__media { border-radius: 0; box-shadow: none; }
.blog-feature__text { display: grid; gap: var(--space-3); align-content: center; padding: var(--space-8); min-width: 0; }
.blog-feature__title { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.blog-feature__dek { color: var(--text-secondary); font-size: var(--fs-md); line-height: 1.5; }

/* topic links: quiet text links, the current one on a soft fill */
.blog-topics { display: flex; flex-wrap: wrap; gap: 2px; margin: var(--space-10) 0 var(--space-6); }
.blog-topics__link {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border-radius: 6px;
  color: var(--text-secondary); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: color 150ms var(--ease), background-color 150ms var(--ease);
}
.blog-topics__link:hover, .blog-topics__link:focus-visible { color: var(--text); background: color-mix(in oklab, var(--text) 5%, transparent); text-decoration: none; }
.blog-topics__link[aria-current="page"] { color: var(--text); background: color-mix(in oklab, var(--text) 8%, var(--bg-surface)); }

/* post cards: poster on top, then tag, title, dek and the date line */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--space-6); }
.post-card { display: flex; flex-direction: column; }
.post-card__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--blog-stage); }
.post-card__body { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-4) var(--space-5) var(--space-5); }
.post-card__title { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.post-card__dek { color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.5; }
.post-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.post-meta { color: var(--text-subtle); font-size: var(--fs-xs); font-weight: 500; font-variant-numeric: tabular-nums; }

/* the post: head, hero, then the body column with the "On this page" list beside it on wide screens */
.post { padding: var(--space-10) 0 var(--space-24); }
.container.post__wrap { max-width: calc(1000px + var(--gutter) * 2); }
.post__head { display: grid; gap: var(--space-3); max-width: 760px; margin-bottom: var(--space-8); }
.post-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--text-subtle); font-size: var(--fs-sm); font-weight: 600; }
.post-crumbs__link { color: var(--text-secondary); text-decoration: none; transition: color 150ms var(--ease); }
.post-crumbs__link:hover, .post-crumbs__link:focus-visible { color: var(--text); text-decoration: none; }
.post__title { font-size: var(--fs-5xl); font-weight: 800; letter-spacing: -.03em; line-height: 1.04; }
.post__dek { color: var(--text-secondary); font-size: var(--fs-xl); line-height: 1.45; }
.post__hero { margin-bottom: var(--space-12); }
.post__layout { display: grid; grid-template-columns: minmax(0, 680px) 220px; grid-template-areas: "main toc"; justify-content: space-between; gap: var(--space-12); align-items: start; }
/* one column that may shrink below its content: a wide table scrolls inside its wrapper instead of widening the page */
.post__main { grid-area: main; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); min-width: 0; }
/* a long list scrolls on its own on a short screen, so the sections below it stay in reach */
.post-toc {
  grid-area: toc; position: sticky; top: calc(var(--site-header-height) + var(--space-6)); display: grid; align-content: start; gap: var(--space-3); font-size: var(--fs-sm);
  max-height: calc(100vh - var(--site-header-height) - var(--space-12)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.post-toc__title { color: var(--text-subtle); font-size: var(--fs-xs); font-weight: 700; }
.post-toc__list { list-style: none; display: grid; gap: var(--space-2); }
.post-toc__link { color: var(--text-secondary); line-height: 1.35; text-decoration: none; transition: color 150ms var(--ease); }
.post-toc__link:hover, .post-toc__link:focus-visible { color: var(--text); text-decoration: none; }

/* the answer first, then the key facts as stat tiles */
.post-verdict { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.01em; line-height: 1.5; }
.post-facts .metric__label { color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.4; }

/* prose: an 18px body on a comfortable measure, Manrope headings, quiet square bullets */
.prose { max-width: 68ch; color: var(--text); font-size: 18px; line-height: 1.7; }
.prose > * + * { margin-top: 1.15em; }
.prose > h2 { margin-top: 2.1em; font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.prose > h3 { margin-top: 1.8em; font-size: 21px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.prose > :first-child { margin-top: 0; }
.prose > :is(h2, h3) + * { margin-top: .6em; }
.prose > :is(ul, ol) { display: grid; gap: .45em; padding-left: 1.3em; }
.prose > ul { list-style: square; }
.prose li::marker { color: var(--text-subtle); }
.prose strong { font-weight: 700; }
.prose a { text-decoration-color: color-mix(in oklab, var(--text) 30%, transparent); }
.prose a:hover { text-decoration-color: currentColor; }
.prose > :is(.table-wrap, figure, .post-quote, .post-facts, .post-cta, .post-section) { margin-top: 1.6em; margin-bottom: .4em; }
.prose .table { font-size: var(--fs-sm); line-height: 1.5; }
.post-quote {
  padding: var(--space-6); border-radius: 6px; background: var(--bg-surface); box-shadow: 0 0 0 1px var(--blog-ring), var(--blog-drop);
  font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.015em; line-height: 1.35;
}
.post-quote > p + p { margin-top: .6em; }
.post-cite { margin-left: 1px; font-size: .68em; font-weight: 700; line-height: 0; vertical-align: super; }
.post-cite > a { padding: 0 1px; color: var(--c-indigo-ink); text-decoration: none; transition: color 150ms var(--ease); }
.post-cite > a:hover, .post-cite > a:focus-visible { color: var(--text); text-decoration: none; }

/* figures and the comparison table: the image in an even ring, a caption of title, note and source */
.post-figure, .post-compare { display: grid; gap: var(--space-3); }
.post-figure__zoom { display: block; border-radius: 6px; transition: opacity 150ms var(--ease); }
.post-figure__zoom:hover, .post-figure__zoom:focus-visible { opacity: .92; }
.post-figure__img { display: block; width: 100%; height: auto; border-radius: 6px; background: var(--blog-stage); box-shadow: 0 0 0 1px var(--blog-ring); }
.post-figure__alt { padding: var(--space-5); border-radius: 6px; background: var(--bg-surface); box-shadow: 0 0 0 1px var(--blog-ring); font-size: var(--fs-md); }
.post-figure__caption { display: grid; gap: 2px; color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.5; }
.post-figure__title { color: var(--text); font-weight: 700; }
.post-figure__source { color: var(--text-subtle); font-size: var(--fs-xs); font-weight: 500; }
.post-compare .compare-table td, .post-compare .compare-table th { white-space: normal; }

/* FAQ, sources and related: sections of the body column with one heading style */
.post-section { display: grid; gap: var(--space-4); }
.post-section__title { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.post-sources { display: grid; gap: var(--space-2); padding-left: 1.6em; color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.55; }
.post-sources > li { padding: 2px 4px; border-radius: 4px; transition: background-color 400ms var(--ease-out); }
.post-sources > li::marker { color: var(--text-subtle); font-weight: 600; }
.post-sources > li:target { background: color-mix(in oklab, #5E6AD2 12%, transparent); }
.post-sources__pub { color: var(--text); font-weight: 600; }
.post-sources__note { color: var(--text-subtle); }
.post-sources__day { margin-top: calc(var(--space-2) * -1); color: var(--text-subtle); font-size: var(--fs-sm); }
.post-related { display: grid; gap: var(--space-6); margin-top: var(--space-16); }

/* the free week: a ring card with the one offer */
.post-cta { display: grid; gap: var(--space-3); padding: var(--space-8); }
.post-cta__title { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.post-cta__note { color: var(--text-secondary); font-size: var(--fs-sm); }
.post-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }

@media (max-width: 1080px) {
  .post__layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main"; }
  .post-toc { display: none; }
}
@media (max-width: 860px) {
  .blog-feature { grid-template-columns: minmax(0, 1fr); }
  .blog-feature__text { padding: var(--space-5); }
  .blog-feature__title { font-size: var(--fs-2xl); }
}
@media (max-width: 640px) {
  .blog-index { padding-top: var(--space-8); }
  .blog-head__title { font-size: var(--fs-3xl); }
  .post { padding-top: var(--space-6); }
  .post__title { font-size: calc(var(--base-size) * 2.25); }
  .post__dek { font-size: var(--fs-lg); }
  .post__hero { margin-bottom: var(--space-8); }
  .prose { font-size: 17px; }
  .prose > h2, .post-section__title { font-size: 24px; }
  .post-quote { padding: var(--space-5); font-size: var(--fs-xl); }
  .post-cta { padding: var(--space-5); }
  .post-verdict { font-size: var(--fs-lg); }
  /* a two-way table: each row's label on a line of its own, its two values side by side under it */
  .post-compare .compare-table:not(:has(th:nth-child(4))) :is(thead, tbody) { display: block; }
  .post-compare .compare-table:not(:has(th:nth-child(4))) tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .post-compare .compare-table:not(:has(th:nth-child(4))) thead th:first-child { display: none; }
  .post-compare .compare-table:not(:has(th:nth-child(4))) tbody th[scope="row"] {
    grid-column: 1 / -1; position: static; width: auto; min-width: 0; box-shadow: none; border-bottom-color: transparent; padding-bottom: 0; color: var(--text-secondary);
  }
}