/* ==== clu-tokens:begin ==== */
/* clu-tokens:begin */
/* Clu design tokens - the ONE source of truth for colour, type, spacing,
   radius, line, elevation and motion. Source: docs/design/CLU_DESIGN.md
   (v2.1.1, 2026-10-06), which supersedes the v1.0 PDF where they differ.

   Colour is ROLE-based: one role name, two values (light here; dark in the
   dark blocks below). No token is named after a colour, because "paper" stops
   being paper at night. Everything here uses the --clu- namespace: the role
   name in CLU_DESIGN.md is the part after it (surface-page -> --clu-surface-page).

   Consumers (never hand-edit their copies - run
   python scripts/sync_clu_tokens.py after changing this file, and
   tests/test_clu_tokens.py fails if any copy drifts):
     - tools/ui.html, <style id="clu-tokens">  (the live app + Results brief)
     - tools/ui.html, CLU_TOKENS_CSS           (inlined into the downloaded
                                                 HTML, which has no app
                                                 stylesheet to inherit from)

   Fonts are not loaded from here: both the live page and the downloaded
   HTML use Latin-subset woff2 copies embedded from tools/fonts/, so neither
   ever asks a font host for anything.

   No gradients anywhere in UI. No green in the evidence layer (findings, tags,
   charts). Green exists for ONE token, state-complete (CLU_DESIGN v2.1 Rulings):
   the dot beside the words "Analysis complete", nothing else. Saffron is
   one marker per view: never a background, never body text, never a status. */

:root {
  /* color-scheme is set on the root in both modes so native inputs, selects and
     scrollbars render correctly. */
  color-scheme: light;

  /* ---- SURFACE ---- */
  --clu-surface-page: #F8F7F4;    /* page background (never pure white) */
  --clu-surface-card: #FFFFFF;    /* finding cards, panels */
  --clu-surface-raised: #FFFFFF;  /* banners, menus, popovers (light adds elevation-2) */
  --clu-surface-soft: #E8ECFA;    /* wells inside a card (next step) */

  /* ---- TEXT ---- */
  --clu-text-primary: #10142B;    /* body and headings */
  --clu-text-muted: #5F6673;      /* secondary, captions, how-we-know */
  --clu-text-on-primary: #FFFFFF; /* text on a filled primary */
  --clu-text-placeholder: #5F6673; /* inputs before entry. RULING: text-muted in light; the guideline's #8B93A5 is 3.08:1 on white and fails AA (README, guideline feedback) */
  --clu-text-disabled: #A9AFBC;   /* disabled labels (exempt from contrast) */

  /* ---- BORDER ---- */
  --clu-border-hairline: #E3E1DA; /* dividers, card edges, 1px */
  --clu-border-strong: #1B2A6B;   /* the finding-card boundary, 1.5px */
  --clu-border-focus: #1B2A6B;    /* 2px ring, 2px offset */

  /* ---- BRAND & ACCENT ---- */
  --clu-brand-primary: #1B2A6B;       /* headings, buttons, outlines, progress, chart-1 */
  --clu-brand-primary-hover: #16225A; /* hover and pressed */
  --clu-accent-saffron: #FFB020;      /* marker, trail head, logo dot */
  --clu-accent-saffron-quiet: #FFB020; /* dark only: saffron areas wider than 120px */
  --clu-accent-coral: #FF6B4A;        /* loss: drop-offs, abandons, errors. 2.8:1 on white, so never text in light */

  /* ---- STATUS (evidence layer: the only pills, with state chips) ---- */
  --clu-status-supported: #2F5BEA;    /* data suggests this / explains part of it */
  --clu-status-testable: #7B61D9;     /* test with A/B test (violet means go test) */
  --clu-status-research: #5F6673;     /* needs user research (filled) / data doesn't suggest this (outlined) */

  /* ---- SYSTEM STATE (process layer) ---- */
  --clu-state-running: #B9770E;             /* running dot only, never text */
  --clu-state-complete: #2F7D5B;            /* the "Analysis complete" dot only (v2.1 ruling: green permitted for this one token) */
  --clu-state-failed: var(--clu-accent-coral); /* RULING: an alias of accent-coral in both modes */

  /* ---- CHART ---- */
  --clu-chart-1: #1B2A6B;
  --clu-chart-2: #5B8DEF;
  --clu-chart-3: #FF6B4A;   /* not yet in use */
  --clu-chart-4: #9B7BE0;   /* not yet in use */
  --clu-chart-5: #C4A484;   /* not yet in use */
  --clu-chart-grid: #E3E1DA; /* not yet in use */
  --clu-chart-axis: #5F6673; /* not yet in use */

  /* ---- ELEVATION (light: one shadow; dark: surface + hairline, no shadow) ---- */
  --clu-elevation-1: 0 16px 40px rgba(27, 42, 107, .12);
  --clu-elevation-2: 0 16px 40px rgba(27, 42, 107, .12);
  --clu-elevation-overlay: 0 16px 40px rgba(27, 42, 107, .12);

  /* ---- Evidence-tag tint and highlight wash (used by dark only) ---- */
  --clu-tag-tint: 12%;             /* dark uses 14% (CLU_DESIGN L129); light keeps solid fills by ruling, so this is unused in light */
  --clu-highlight-wash-alpha: 12%; /* dark highlight wash (CLU_DESIGN L187); tokenised by ruling */

  /* ---- Evidence tags (docs/design/frames/05-results). Both modes are soft tints: light is a precomputed 14% tint of the status
     colour on the card (the download opens in old environments, so no computed mixing) with the status colour deepened toward the ink
     for AA (4.5:1 checked); dark is a 14% tint of the status colour with status-coloured text. ---- */
  --clu-tag-supported-bg: #E2E8FC;   --clu-tag-supported-fg: #284BC0;
  --clu-tag-testable-bg: #EDE9FA;   --clu-tag-testable-fg: #6350B3;
  --clu-tag-research-bg: #E9EAEB;   --clu-tag-research-fg: #4E5463;
  --clu-tag-outline-bg: var(--clu-surface-card);         /* "data doesn't suggest this": outline, no fill in dark */
  --clu-tag-outline-fg: var(--clu-status-research);
  --clu-tag-outline-border: var(--clu-status-research);

  /* ---- The Marker (L183): saffron fill; light text is brand-primary (white on saffron is 1.8:1) ---- */
  --clu-marker-fg: var(--clu-brand-primary);

  /* ---- The Highlight (L187): light = a saffron bar behind one phrase; dark = 3px saffron left rule + a
     12% wash of accent-saffron-quiet, text-primary text ---- */
  --clu-hl-color: var(--clu-brand-primary);
  --clu-hl-shadow: inset 0 -0.42em 0 var(--clu-accent-saffron);
  --clu-hl-bg: transparent;
  --clu-hl-rule-width: 0px;

  /* ---- The Trail (L185): light = dotted brand at 30%; dark = solid border-strong ---- */
  --clu-trail-color: rgba(27, 42, 107, .3);
  --clu-trail-dasharray: var(--clu-trail-dash) var(--clu-trail-dash);

  /* ---- Coral blocks (L193). Light: decoration (coral is 2.8:1, never text; the drop callout keeps its
     Ink Blue boundary). Dark: 1px coral border, 10% tint, coral for the label only. ---- */
  --clu-coral-block-bg: var(--clu-surface-raised);
  --clu-coral-block-border-width: 1.5px;
  --clu-coral-label: var(--clu-text-primary);
  /* Status text on a coral tint (the counter chip at zero, the limit chip, the signed-out box, field errors). Coral itself
     is 2.8:1 on white, so light uses a deeper coral (5.2:1 on the precomputed tint); dark uses the accent, which is 5.9:1. */
  --clu-coral-text: #B3361A;
  --clu-text-on-danger: #141B2D; /* text on a solid coral fill in both modes (white on coral is 2.8:1) */
  --clu-coral-tint: #FFEAE6;
  --clu-escalation-label: var(--clu-text-muted);
  --clu-drop-note-border: var(--clu-strong-line);
  --clu-drop-note-accent: 4px solid var(--clu-accent-coral);
  --clu-inline-error-border: 0 solid transparent;
  --clu-inline-error-rule: 3px solid var(--clu-accent-coral);
  --clu-inline-error-padding: 0 0 0 var(--clu-space-12);
  --clu-inline-error-radius: 0;
  --clu-inline-error-bg: transparent;

  /* ---- Dropzone (L220): 1.5px dashed text-muted in light, border-strong in dark ---- */
  --clu-dropzone-border: var(--clu-text-muted);

  /* ---- The mark (L205): brand-primary in light, text-primary in dark. Never pure white. The saffron dot never changes. ---- */
  --clu-wordmark-fill: var(--clu-brand-primary);

  /* ---- Spacing ---- */
  --clu-space-4: 4px;
  --clu-space-8: 8px;
  --clu-space-12: 12px;
  --clu-space-16: 16px;
  --clu-space-24: 24px;
  --clu-space-32: 32px;
  --clu-space-48: 48px;
  --clu-space-64: 64px;
  --clu-space-96: 96px;

  /* ---- Radius ---- */
  --clu-radius-sm: 6px;    /* chips inner, tags */
  --clu-radius-md: 10px;   /* buttons, inputs - never pills */
  --clu-radius-lg: 16px;   /* cards, finding card */
  --clu-radius-xl: 24px;   /* sections, photos */
  --clu-radius-pill: 999px; /* evidence tags and state chips only */

  /* ---- Lines ---- */
  --clu-hairline-width: 1px;
  --clu-hairline: 1px solid var(--clu-border-hairline);
  --clu-strong-line-width: 1.5px;
  --clu-strong-line: 1.5px solid var(--clu-border-strong);

  /* ---- The trail: dotted connector, ending in a Saffron dot ---- */
  --clu-trail-width: 2px;
  --clu-trail-dash: 6px;
  --clu-trail-dot: var(--clu-accent-saffron);

  /* ---- Motion ---- */
  --clu-motion: 160ms ease-out;

  /* ---- Grid (1440 canvas) ---- */
  --clu-grid-columns: 12;
  --clu-grid-margin: 96px;
  --clu-grid-gutter: 24px;
  --clu-grid-max: 1440px;

  /* ---- Type: families, with system fallbacks ---- */
  --clu-font-sans: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --clu-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --clu-numeric: tabular-nums;  /* everywhere numbers align */
  --clu-measure: 66ch;          /* max line length */

  /* ---- Type scale: size / line-height / tracking / weight ---- */
  --clu-hero-size: 64px;      --clu-hero-line: 68px;      --clu-hero-track: -0.02em;   --clu-hero-weight: 800;
  --clu-h2-size: 40px;        --clu-h2-line: 46px;        --clu-h2-track: -0.01em;     --clu-h2-weight: 700;
  --clu-h3-size: 24px;        --clu-h3-line: 30px;        --clu-h3-track: -0.005em;    --clu-h3-weight: 600;
  --clu-body-l-size: 18px;    --clu-body-l-line: 28px;    --clu-body-l-track: 0;       --clu-body-l-weight: 400;
  --clu-body-size: 16px;      --clu-body-line: 24px;      --clu-body-track: 0;         --clu-body-weight: 400;
  --clu-ui-label-size: 14px;  --clu-ui-label-line: 20px;  --clu-ui-label-track: 0;     --clu-ui-label-weight: 500;
  --clu-eyebrow-size: 12px;   --clu-eyebrow-line: 16px;   --clu-eyebrow-track: 0.08em; --clu-eyebrow-weight: 500;
  --clu-metric-size: 13px;    --clu-metric-line: 18px;    --clu-metric-track: 0;       --clu-metric-weight: 500;
  --clu-big-number-size: 40px; --clu-big-number-line: 44px; --clu-big-number-track: 0; --clu-big-number-weight: 500;
  --clu-code-size: 13px;      --clu-code-line: 20px;      --clu-code-track: 0;         --clu-code-weight: 400;
}

/* clu-dark:begin */
/* DARK (CLU_DESIGN v2.0 dark column). The same declarations appear twice, because CSS cannot share a
   declaration block between a media query and an attribute selector: once for the OS preference (unless
   the page is pinned light), once for the data-theme="dark" override. tests/test_clu_tokens.py fails if
   the two ever differ. The download inlines the LIGHT block only: everything from here to clu-dark:end
   is stripped from it, so it stays light whatever the OS says. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --clu-surface-page: #0D1424;   --clu-surface-card: #141C30;   --clu-surface-raised: #1C2540;   --clu-surface-soft: #19233D;
    --clu-text-primary: #E8ECF5;   --clu-text-muted: #A2ADC4;     --clu-text-on-primary: #0D1424;
    --clu-text-placeholder: #8892AC; --clu-text-disabled: #7B86A3;
    --clu-border-hairline: #2E3A57; --clu-border-strong: #667499; --clu-border-focus: #7BA6F5;
    --clu-brand-primary: #5B8DEF;  --clu-brand-primary-hover: #7BA6F5;
    --clu-accent-saffron: #FFB020; --clu-accent-saffron-quiet: #E9A835; --clu-accent-coral: #FF8A6B;
    --clu-status-supported: #7CB0FF; --clu-status-testable: #A98CFF; --clu-status-research: #98A3BC;
    --clu-state-running: #E0A33A;
    --clu-state-complete: #4FB783;
    --clu-chart-1: #6E9BF2; --clu-chart-2: #A9C7FF; --clu-chart-3: #FF8A6B; --clu-chart-4: #B79BFF; --clu-chart-5: #D9BE92;
    --clu-chart-grid: #232D47;     --clu-chart-axis: #667499;
    --clu-elevation-1: none;       --clu-elevation-2: none;       --clu-elevation-overlay: 0 8px 32px rgba(0, 0, 0, .5);
    --clu-tag-tint: 14%;

    --clu-tag-supported-bg: color-mix(in srgb, var(--clu-status-supported) var(--clu-tag-tint), transparent); --clu-tag-supported-fg: var(--clu-status-supported);
    --clu-tag-testable-bg: color-mix(in srgb, var(--clu-status-testable) var(--clu-tag-tint), transparent);   --clu-tag-testable-fg: var(--clu-status-testable);
    --clu-tag-research-bg: color-mix(in srgb, var(--clu-status-research) var(--clu-tag-tint), transparent);   --clu-tag-research-fg: var(--clu-status-research);
    --clu-tag-outline-bg: transparent; --clu-tag-outline-fg: var(--clu-status-research); --clu-tag-outline-border: var(--clu-status-research);

    --clu-marker-fg: var(--clu-text-on-primary);

    --clu-hl-color: var(--clu-text-primary);
    --clu-hl-shadow: none;
    --clu-hl-bg: color-mix(in srgb, var(--clu-accent-saffron-quiet) var(--clu-highlight-wash-alpha), transparent);
    --clu-hl-rule-width: 3px;

    --clu-trail-color: var(--clu-border-strong);
    --clu-trail-dasharray: none;

    --clu-coral-block-bg: color-mix(in srgb, var(--clu-accent-coral) 10%, var(--clu-surface-raised));
    --clu-coral-block-border-width: 1px;
    --clu-coral-label: var(--clu-accent-coral);
    --clu-coral-text: var(--clu-accent-coral);
    --clu-coral-tint: color-mix(in srgb, var(--clu-accent-coral) 14%, var(--clu-surface-card));
    --clu-escalation-label: var(--clu-accent-coral);
    --clu-drop-note-border: 1px solid var(--clu-accent-coral);
    --clu-drop-note-accent: 1px solid var(--clu-accent-coral);
    --clu-inline-error-border: 1px solid var(--clu-accent-coral);
    --clu-inline-error-rule: 1px solid var(--clu-accent-coral);
    --clu-inline-error-padding: var(--clu-space-8) var(--clu-space-12);
    --clu-inline-error-radius: var(--clu-radius-md);
    --clu-inline-error-bg: color-mix(in srgb, var(--clu-accent-coral) 10%, var(--clu-surface-raised));

    --clu-dropzone-border: var(--clu-border-strong);

    --clu-wordmark-fill: var(--clu-text-primary);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --clu-surface-page: #0D1424;   --clu-surface-card: #141C30;   --clu-surface-raised: #1C2540;   --clu-surface-soft: #19233D;
  --clu-text-primary: #E8ECF5;   --clu-text-muted: #A2ADC4;     --clu-text-on-primary: #0D1424;
  --clu-text-placeholder: #8892AC; --clu-text-disabled: #7B86A3;
  --clu-border-hairline: #2E3A57; --clu-border-strong: #667499; --clu-border-focus: #7BA6F5;
  --clu-brand-primary: #5B8DEF;  --clu-brand-primary-hover: #7BA6F5;
  --clu-accent-saffron: #FFB020; --clu-accent-saffron-quiet: #E9A835; --clu-accent-coral: #FF8A6B;
  --clu-status-supported: #7CB0FF; --clu-status-testable: #A98CFF; --clu-status-research: #98A3BC;
  --clu-state-running: #E0A33A;
  --clu-state-complete: #4FB783;
  --clu-chart-1: #6E9BF2; --clu-chart-2: #A9C7FF; --clu-chart-3: #FF8A6B; --clu-chart-4: #B79BFF; --clu-chart-5: #D9BE92;
  --clu-chart-grid: #232D47;     --clu-chart-axis: #667499;
  --clu-elevation-1: none;       --clu-elevation-2: none;       --clu-elevation-overlay: 0 8px 32px rgba(0, 0, 0, .5);
  --clu-tag-tint: 14%;

  --clu-tag-supported-bg: color-mix(in srgb, var(--clu-status-supported) var(--clu-tag-tint), transparent); --clu-tag-supported-fg: var(--clu-status-supported);
  --clu-tag-testable-bg: color-mix(in srgb, var(--clu-status-testable) var(--clu-tag-tint), transparent);   --clu-tag-testable-fg: var(--clu-status-testable);
  --clu-tag-research-bg: color-mix(in srgb, var(--clu-status-research) var(--clu-tag-tint), transparent);   --clu-tag-research-fg: var(--clu-status-research);
  --clu-tag-outline-bg: transparent; --clu-tag-outline-fg: var(--clu-status-research); --clu-tag-outline-border: var(--clu-status-research);

  --clu-marker-fg: var(--clu-text-on-primary);

  --clu-hl-color: var(--clu-text-primary);
  --clu-hl-shadow: none;
  --clu-hl-bg: color-mix(in srgb, var(--clu-accent-saffron-quiet) var(--clu-highlight-wash-alpha), transparent);
  --clu-hl-rule-width: 3px;

  --clu-trail-color: var(--clu-border-strong);
  --clu-trail-dasharray: none;

  --clu-coral-block-bg: color-mix(in srgb, var(--clu-accent-coral) 10%, var(--clu-surface-raised));
  --clu-coral-block-border-width: 1px;
  --clu-coral-label: var(--clu-accent-coral);
  --clu-coral-text: var(--clu-accent-coral);
  --clu-coral-tint: color-mix(in srgb, var(--clu-accent-coral) 14%, var(--clu-surface-card));
  --clu-escalation-label: var(--clu-accent-coral);
  --clu-drop-note-border: 1px solid var(--clu-accent-coral);
  --clu-drop-note-accent: 1px solid var(--clu-accent-coral);
  --clu-inline-error-border: 1px solid var(--clu-accent-coral);
  --clu-inline-error-rule: 1px solid var(--clu-accent-coral);
  --clu-inline-error-padding: var(--clu-space-8) var(--clu-space-12);
  --clu-inline-error-radius: var(--clu-radius-md);
  --clu-inline-error-bg: color-mix(in srgb, var(--clu-accent-coral) 10%, var(--clu-surface-raised));

  --clu-dropzone-border: var(--clu-border-strong);

  --clu-wordmark-fill: var(--clu-text-primary);
}
/* clu-dark:end */
/* clu-tokens:end */
/* ==== clu-tokens:end ==== */
/* ==== clu-results:begin ==== */
/* clu-results:begin */
/* Clu Results components - the shared styling for the Results brief.

   The live Results page and the downloaded HTML render the SAME markup, so
   they must not each carry their own copy of these rules. This file is the
   one place they live; scripts/sync_clu_tokens.py copies it into tools/ui.html
   (a <style id="clu-results"> for the live page, and CLU_RESULTS_CSS which
   buildDownloadHtml inlines). Every value comes from tools/clu-tokens.css.

   Rules this file obeys (tests/test_clu_brand_system.py pins them):
     - Bricolage says, Plex Mono measures: every counted number is mono.
     - Text under 20px is never heavier than 500; only headlines are bold.
     - Uppercase is for eyebrows and evidence tags only.
     - Pills are for evidence tags only; buttons and chips are 6-10px radius.
     - No gradients. No green anywhere. Saffron is the
       finding marker, the headline highlight and the trail dot: never a
       background for reading, never body text. */

/* ---------- numbers and marks ---------- */
.num { font-family: var(--clu-font-mono); font-weight: 500; font-size: 0.94em; font-variant-numeric: var(--clu-numeric); letter-spacing: 0; }
/* inside an element that is already set in mono at its own size, keep that size */
.fc-bignum .num, .fc-bignum-sub .num, .viz-value .num, .result-outcome .num, .signal-kpi .num, .signal-assoc-row .num, .count-pill .num, .hl .num { font-size: inherit; }
/* The highlight: a Saffron bar behind ONE short phrase of the headline. */
.hl {
  color: var(--clu-hl-color); box-shadow: var(--clu-hl-shadow); background: var(--clu-hl-bg);
  border-left: var(--clu-hl-rule-width) solid var(--clu-accent-saffron);
  padding: 0 0.12em; margin: 0 -0.12em 0 calc(-0.12em - var(--clu-hl-rule-width)); white-space: nowrap;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
/* The trail: dotted Ink-30% connector, 2px, 6/6 dash, ending in a Saffron dot. */
.trail { display: flex; flex-direction: column; align-items: flex-start; padding-left: var(--clu-space-16); }
.trail-line { display: block; width: var(--clu-trail-width); height: var(--clu-space-32); overflow: visible; }
.trail-line line { stroke: var(--clu-trail-color); stroke-width: var(--clu-trail-width); stroke-dasharray: var(--clu-trail-dasharray); }
.trail-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--clu-trail-dot); margin-left: -4px; }

/* ---------- chips and evidence tags ---------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--clu-space-4);
  font-family: var(--clu-font-sans); font-size: var(--clu-metric-size); line-height: var(--clu-metric-line); font-weight: 500;
  padding: 2px var(--clu-space-8); border-radius: var(--clu-radius-sm); white-space: nowrap; border: var(--clu-hairline-width) solid transparent;
}
.badge-blue { background: transparent; color: var(--clu-brand-primary); border-color: var(--clu-brand-primary); } /* derived, not in CLU_DESIGN v2.0 */
/* The only action chip ("needs your input"): brand-primary outlined in both modes (ruling), so it differs from the
   muted-outlined state and note chips. */
.badge-action { background: transparent; color: var(--clu-brand-primary); border-color: var(--clu-brand-primary); }
.badge-amber { background: transparent; color: var(--clu-text-muted); border-color: var(--clu-text-muted); } /* derived, not in CLU_DESIGN v2.0 */
.badge-neutral { background: transparent; color: var(--clu-text-muted); border-color: var(--clu-text-muted); } /* derived, not in CLU_DESIGN v2.0 */
/* State chips (the process layer) are pills, like evidence tags: the shape says "status, not action".
   "Analysis complete" is a text-muted outlined chip with a state-complete (green) dot: the one green in the
   product (CLU_DESIGN v2.1 Rulings), always beside the word. A failure chip
   carries the state-failed alias of coral as its border; light coral is 2.8:1 so it is never text. */
.badge-state { border-radius: var(--clu-radius-pill); padding: 2px var(--clu-space-12); }
.badge-state-complete { background: transparent; color: var(--clu-text-muted); border-color: var(--clu-text-muted); }
.badge-state-complete .dot { background: var(--clu-state-complete); }
.badge-state-failed { background: transparent; color: var(--clu-coral-label); border-color: var(--clu-state-failed); }
.clu-wordmark-letters { fill: var(--clu-wordmark-fill); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ---------- shared text helpers ---------- */
.qmeta { font-size: var(--clu-ui-label-size); line-height: var(--clu-ui-label-line); color: var(--clu-text-muted); }
.empty-state { color: var(--clu-text-muted); font-size: var(--clu-ui-label-size); line-height: var(--clu-ui-label-line); padding: var(--clu-space-24) 0; text-align: center; }
.count-pill { font-family: var(--clu-font-mono); font-size: var(--clu-metric-size); color: var(--clu-text-muted); font-weight: 400; }
.suff-list { margin: var(--clu-space-4) 0 0; padding-left: var(--clu-space-24); font-size: var(--clu-ui-label-size); line-height: var(--clu-ui-label-line); color: var(--clu-text-muted); }
.suff-list li { margin: var(--clu-space-4) 0; }

/* ---------- eyebrow: section markers, the only uppercase besides tags ---------- */
.result-section { margin-bottom: var(--clu-space-32); }
.result-section-title {
  font-family: var(--clu-font-mono); font-size: var(--clu-eyebrow-size); line-height: var(--clu-eyebrow-line); font-weight: var(--clu-eyebrow-weight);
  letter-spacing: var(--clu-eyebrow-track); text-transform: uppercase; color: var(--clu-brand-primary);
  margin: var(--clu-space-24) 0 var(--clu-space-12); display: flex; align-items: baseline; gap: var(--clu-space-8);
}

/* ---------- A. status line ---------- */
.result-header { display: flex; align-items: center; gap: var(--clu-space-12); flex-wrap: wrap; margin-bottom: var(--clu-space-24); }
.result-header-sub { font-size: var(--clu-ui-label-size); line-height: var(--clu-ui-label-line); color: var(--clu-text-muted); }

/* ---------- R1 headline ---------- */
.result-headline {
  font-size: var(--clu-h2-size); line-height: var(--clu-h2-line); letter-spacing: var(--clu-h2-track); font-weight: var(--clu-h2-weight);
  color: var(--clu-brand-primary); margin: var(--clu-space-4) 0 var(--clu-space-32); max-width: var(--clu-measure);
}

/* ---------- R2 summary + outcome number ---------- */
.result-summary-grid {
  display: grid; grid-template-columns: 1.5fr 0.85fr; gap: var(--clu-space-32);
  background: var(--clu-surface-card); border: var(--clu-hairline); border-radius: var(--clu-radius-lg);
  padding: var(--clu-space-32); margin-bottom: var(--clu-space-32);
}
.result-summary-text p { font-size: var(--clu-body-size); line-height: var(--clu-body-line); color: var(--clu-text-primary); margin: 0 0 var(--clu-space-8); max-width: var(--clu-measure); }
.result-outcome { border-left: var(--clu-hairline); padding-left: var(--clu-space-24); display: flex; flex-direction: column; justify-content: center; }
.result-outcome strong {
  font-family: var(--clu-font-mono); font-size: var(--clu-big-number-size); line-height: var(--clu-big-number-line);
  font-weight: var(--clu-big-number-weight); color: var(--clu-brand-primary); font-variant-numeric: var(--clu-numeric);
}
.result-outcome > span { font-size: var(--clu-ui-label-size); line-height: var(--clu-ui-label-line); color: var(--clu-text-muted); margin-top: var(--clu-space-8); display: block; }

/* ---------- R3 finding cards ---------- */
.next-cards { display: flex; flex-direction: column; gap: var(--clu-space-16); }
.finding-card-v2 {
  background: var(--clu-surface-card); border: var(--clu-strong-line); border-radius: var(--clu-radius-lg);
  padding: var(--clu-space-24) var(--clu-space-32);
}
.fc-chips { display: flex; gap: var(--clu-space-8); flex-wrap: wrap; margin-bottom: var(--clu-space-16); }
.fc-chip {
  font-family: var(--clu-font-mono); font-size: var(--clu-eyebrow-size); line-height: var(--clu-eyebrow-line); font-weight: var(--clu-eyebrow-weight);
  letter-spacing: var(--clu-eyebrow-track); text-transform: uppercase; padding: var(--clu-space-4) var(--clu-space-8);
  border-radius: var(--clu-radius-sm); background: var(--clu-surface-card); color: var(--clu-brand-primary); border: var(--clu-hairline);
}
/* The marker: the ONE Saffron chip, on the top finding only. */
/* v2.1 (handoff section 6): the priority chip is surface-soft / brand-primary. Saffron is the Highlight under the headline, never also a chip. */
.fc-chip-marker { background: var(--clu-surface-soft); border-color: var(--clu-brand-primary); color: var(--clu-brand-primary); }
.fc-headline {
  font-size: var(--clu-h3-size); line-height: var(--clu-h3-line); letter-spacing: var(--clu-h3-track); font-weight: var(--clu-h3-weight);
  color: var(--clu-text-primary); margin-bottom: var(--clu-space-16); max-width: var(--clu-measure);
}
.fc-bignum-row { display: flex; align-items: baseline; gap: var(--clu-space-12); margin-bottom: var(--clu-space-24); flex-wrap: wrap; }
.fc-bignum {
  font-family: var(--clu-font-mono); font-size: var(--clu-big-number-size); line-height: var(--clu-big-number-line);
  font-weight: var(--clu-big-number-weight); color: var(--clu-brand-primary); font-variant-numeric: var(--clu-numeric);
}
.fc-bignum-sub { font-family: var(--clu-font-mono); font-size: var(--clu-metric-size); line-height: var(--clu-metric-line); font-weight: var(--clu-metric-weight); color: var(--clu-text-muted); }
.fc-divider { border: none; border-top: var(--clu-hairline); margin: 0 0 var(--clu-space-16); }
.fc-explanations-label {
  font-family: var(--clu-font-mono); font-size: var(--clu-eyebrow-size); line-height: var(--clu-eyebrow-line); font-weight: var(--clu-eyebrow-weight);
  letter-spacing: var(--clu-eyebrow-track); text-transform: uppercase; color: var(--clu-text-muted); margin-bottom: var(--clu-space-8);
}
.fc-explanation-row { display: flex; justify-content: space-between; align-items: center; gap: var(--clu-space-16); padding: var(--clu-space-12) 0; border-bottom: var(--clu-hairline); }
.fc-explanation-row:last-child { border-bottom: none; }
.fc-explanation-text { font-size: var(--clu-body-size); line-height: var(--clu-body-line); max-width: var(--clu-measure); }
/* Evidence tags: the only pills. Blue = a check ran, violet = go test,
   grey filled = the data can't say, grey outlined = the data doesn't suggest it. */
.fc-status-chip {
  font-family: var(--clu-font-mono); font-size: var(--clu-eyebrow-size); line-height: var(--clu-eyebrow-line); font-weight: var(--clu-eyebrow-weight);
  letter-spacing: var(--clu-eyebrow-track); text-transform: uppercase; padding: var(--clu-space-4) var(--clu-space-12);
  border-radius: var(--clu-radius-pill); white-space: nowrap; border: var(--clu-hairline-width) solid transparent; flex: 0 0 auto;
}
/* docs/design/frames/05-results: soft tints in both modes (the tokens carry them) */
.fc-status-suggests { background: var(--clu-tag-supported-bg); color: var(--clu-tag-supported-fg); }
.fc-status-ab-test { background: var(--clu-tag-testable-bg); color: var(--clu-tag-testable-fg); }
.fc-status-needs-research { background: var(--clu-tag-research-bg); color: var(--clu-tag-research-fg); }
.fc-status-doesnt-suggest { background: var(--clu-tag-outline-bg); color: var(--clu-tag-outline-fg); border-color: var(--clu-tag-outline-border); }
.fc-next-step { background: var(--clu-surface-soft); border-radius: var(--clu-radius-md); padding: var(--clu-space-16); margin-top: var(--clu-space-16); }
.fc-next-step-label {
  font-family: var(--clu-font-mono); font-size: var(--clu-eyebrow-size); line-height: var(--clu-eyebrow-line); font-weight: var(--clu-eyebrow-weight);
  letter-spacing: var(--clu-eyebrow-track); text-transform: uppercase; color: var(--clu-brand-primary); margin-bottom: var(--clu-space-8);
}
.fc-next-step-text { font-size: var(--clu-body-size); line-height: var(--clu-body-line); max-width: var(--clu-measure); }
.fc-how-we-know { margin-top: var(--clu-space-16); }
.fc-how-we-know summary { font-size: var(--clu-ui-label-size); line-height: var(--clu-ui-label-line); color: var(--clu-text-muted); cursor: pointer; }

/* ---------- R4 evidence panels ---------- */
.evidence-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--clu-space-24); margin-bottom: var(--clu-space-32); }
.evidence-panel { background: var(--clu-surface-card); border: var(--clu-hairline); border-radius: var(--clu-radius-lg); padding: var(--clu-space-24); min-width: 0; }
.evidence-panel h3 { font-size: var(--clu-body-l-size); line-height: var(--clu-body-l-line); font-weight: 500; letter-spacing: 0; color: var(--clu-brand-primary); margin: 0 0 var(--clu-space-4); }
.evidence-panel .sub { font-size: var(--clu-ui-label-size); line-height: var(--clu-ui-label-line); color: var(--clu-text-muted); margin-bottom: var(--clu-space-16); }
/* The callout's boundary is Ink Blue (13:1), so it reads as a distinct block with
   colour removed. The coral left edge is decoration: it marks a loss but carries
   no meaning that the text ("Largest observed drop: ...") does not already say. */
.evidence-drop-note {
  margin-top: var(--clu-space-8); padding: var(--clu-space-12) var(--clu-space-16); border-radius: var(--clu-radius-md);
  background: var(--clu-surface-soft); border: none; color: var(--clu-text-primary);
  font-size: var(--clu-ui-label-size); line-height: var(--clu-ui-label-line);
}
.evidence-drop-note b { color: inherit; font-weight: 500; }
/* docs/design/frames/05-results: the largest drop is a plain soft box - no coral edge, no dotted connector above it */
.evidence-panel .trail { display: none; }
.signal-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: var(--clu-space-12); margin-bottom: var(--clu-space-16); }
.signal-kpi { background: var(--clu-surface-soft); border: var(--clu-hairline); border-radius: var(--clu-radius-md); padding: var(--clu-space-16); } /* derived, not in CLU_DESIGN v2.0 */
.signal-kpi strong {
  font-family: var(--clu-font-mono); font-size: var(--clu-h3-size); line-height: var(--clu-h3-line); font-weight: var(--clu-metric-weight);
  color: var(--clu-brand-primary); display: block; margin-bottom: var(--clu-space-4); font-variant-numeric: var(--clu-numeric);
}
.signal-kpi > span { font-size: var(--clu-ui-label-size); line-height: var(--clu-ui-label-line); color: var(--clu-text-muted); }
.signal-assoc-row { display: flex; justify-content: space-between; gap: var(--clu-space-12); padding: var(--clu-space-8) 0; border-bottom: var(--clu-hairline); font-size: var(--clu-ui-label-size); line-height: var(--clu-ui-label-line); }
.signal-assoc-row:last-child { border-bottom: none; }
.signal-assoc-row b { font-family: var(--clu-font-mono); font-weight: 500; font-variant-numeric: var(--clu-numeric); }

/* ---------- charts: the five chart colours in order, no green, no gradients ---------- */
.viz-block { margin: var(--clu-space-8) 0 var(--clu-space-12); }
.viz-row { display: flex; align-items: center; gap: var(--clu-space-12); padding: var(--clu-space-4) 0; font-size: var(--clu-ui-label-size); line-height: var(--clu-ui-label-line); }
.viz-row-label { flex: 0 0 auto; width: 140px; max-width: 40%; color: var(--clu-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viz-track { flex: 1; height: var(--clu-space-8); border-radius: var(--clu-radius-sm); background: var(--clu-surface-soft); overflow: hidden; } /* derived, not in CLU_DESIGN v2.0 */
.viz-fill { display: block; height: 100%; border-radius: var(--clu-radius-sm); background: var(--clu-chart-1); }
.viz-fill.viz-fill-highlight { background: var(--clu-chart-2); }
.viz-value { flex: 0 0 auto; min-width: 48px; text-align: right; font-family: var(--clu-font-mono); font-size: var(--clu-metric-size); line-height: var(--clu-metric-line); font-weight: var(--clu-metric-weight); font-variant-numeric: var(--clu-numeric); }
.viz-caption { font-size: var(--clu-ui-label-size); line-height: var(--clu-ui-label-line); color: var(--clu-text-muted); margin: var(--clu-space-4) 0 var(--clu-space-12); }
.viz-spark { display: flex; align-items: flex-end; gap: 2px; height: 48px; margin: var(--clu-space-8) 0 var(--clu-space-12); }
.viz-spark-bar { flex: 1; min-width: 2px; background: var(--clu-chart-1); border-radius: 2px 2px 0 0; }
.viz-spark-bar.viz-fill-highlight { background: var(--clu-chart-2); }

/* ---------- R5 footer ---------- */
.result-footer { font-size: var(--clu-ui-label-size); line-height: var(--clu-ui-label-line); color: var(--clu-text-muted); margin: var(--clu-space-4) 0 var(--clu-space-16); display: flex; justify-content: space-between; gap: var(--clu-space-16); flex-wrap: wrap; }
.result-footer b { color: var(--clu-text-primary); font-weight: 500; }

/* ---------- appendix: disclosure, per-finding detail, older result blocks ---------- */
details.how-we-analysed { margin-top: var(--clu-space-8); border-top: var(--clu-hairline); padding-top: var(--clu-space-24); }
details.how-we-analysed > summary { font-size: var(--clu-body-l-size); line-height: var(--clu-body-l-line); font-weight: 500; color: var(--clu-brand-primary); cursor: pointer; list-style: none; }
details.how-we-analysed > summary::-webkit-details-marker { display: none; }
details.how-we-analysed[open] > summary { margin-bottom: var(--clu-space-16); }
.evidence-toggle { margin-bottom: var(--clu-space-8); }
.evidence-toggle summary { font-size: var(--clu-ui-label-size); line-height: var(--clu-ui-label-line); font-weight: 500; cursor: pointer; padding: var(--clu-space-8) 0; }
.evidence-toggle[open] summary { margin-bottom: var(--clu-space-4); }
.detail-row { padding: var(--clu-space-8) 0; border-bottom: var(--clu-hairline); }
.detail-row:last-child { border-bottom: none; }
.detail-row-main { font-size: var(--clu-ui-label-size); line-height: var(--clu-ui-label-line); margin-bottom: var(--clu-space-4); }
.finding-card { padding: var(--clu-space-16) 0; border-bottom: var(--clu-hairline); }
.finding-card:last-child { border-bottom: none; }
.finding-stmt { font-size: var(--clu-body-size); line-height: var(--clu-body-line); margin-bottom: var(--clu-space-8); max-width: var(--clu-measure); }
.finding-meta { display: flex; align-items: center; gap: var(--clu-space-12); flex-wrap: wrap; }
.finding-basis { font-size: var(--clu-ui-label-size); line-height: var(--clu-ui-label-line); color: var(--clu-text-muted); }
.hero-card { background: var(--clu-surface-card); border: var(--clu-hairline); border-radius: var(--clu-radius-lg); padding: var(--clu-space-32); margin-bottom: var(--clu-space-24); }
.hero-label { font-family: var(--clu-font-mono); font-size: var(--clu-eyebrow-size); line-height: var(--clu-eyebrow-line); font-weight: var(--clu-eyebrow-weight); letter-spacing: var(--clu-eyebrow-track); text-transform: uppercase; color: var(--clu-brand-primary); margin-bottom: var(--clu-space-8); }
.hero-text { font-size: var(--clu-body-l-size); line-height: var(--clu-body-l-line); color: var(--clu-text-primary); margin: 0; }
.insight-hero { background: var(--clu-surface-soft); border-radius: var(--clu-radius-lg); padding: var(--clu-space-24); } /* derived, not in CLU_DESIGN v2.0 */
.insight-hero.insight-secondary { background: var(--clu-surface-page); border: var(--clu-hairline); margin-top: var(--clu-space-12); padding: var(--clu-space-16) var(--clu-space-24); } /* derived, not in CLU_DESIGN v2.0 */
.insight-sowhat { font-size: var(--clu-body-size); line-height: var(--clu-body-line); margin-bottom: var(--clu-space-12); max-width: var(--clu-measure); }
.insight-action { font-size: var(--clu-body-size); line-height: var(--clu-body-line); }
.insight-action-label { display: block; font-family: var(--clu-font-mono); font-size: var(--clu-eyebrow-size); line-height: var(--clu-eyebrow-line); font-weight: var(--clu-eyebrow-weight); letter-spacing: var(--clu-eyebrow-track); text-transform: uppercase; color: var(--clu-brand-primary); margin-bottom: var(--clu-space-4); }
.insight-support { margin-top: var(--clu-space-12); }
.insight-support summary { font-size: var(--clu-ui-label-size); color: var(--clu-text-muted); cursor: pointer; }
.insight-support p { margin: var(--clu-space-8) 0 var(--clu-space-4); font-size: var(--clu-ui-label-size); }
.more-insights { margin-top: var(--clu-space-12); }
.more-insights summary { font-size: var(--clu-ui-label-size); color: var(--clu-text-muted); cursor: pointer; padding: var(--clu-space-4) 0; }
.context-card { border: var(--clu-strong-line); background: var(--clu-surface-soft); border-radius: var(--clu-radius-lg); padding: var(--clu-space-24); margin-bottom: var(--clu-space-12); } /* derived, not in CLU_DESIGN v2.0 */
.context-card:last-child { margin-bottom: 0; }
.context-lead { font-size: var(--clu-ui-label-size); line-height: var(--clu-ui-label-line); margin-bottom: var(--clu-space-8); }
.context-question { font-size: var(--clu-body-size); line-height: var(--clu-body-line); margin-bottom: var(--clu-space-12); }
.followup-card { padding: var(--clu-space-12) 0; border-bottom: var(--clu-hairline); }
.followup-card:last-child { border-bottom: none; }
.followup-q { font-size: var(--clu-body-size); line-height: var(--clu-body-line); margin-bottom: var(--clu-space-4); }
.followup-why { font-size: var(--clu-ui-label-size); line-height: var(--clu-ui-label-line); color: var(--clu-text-muted); }
.ai-note { font-size: var(--clu-ui-label-size); color: var(--clu-text-muted); margin-top: var(--clu-space-8); }

@media (max-width: 720px) {
  .result-headline { font-size: var(--clu-h3-size); line-height: var(--clu-h3-line); letter-spacing: var(--clu-h3-track); font-weight: var(--clu-h3-weight); }
  .result-summary-grid { grid-template-columns: 1fr; padding: var(--clu-space-24); }
  .result-outcome { border-left: none; border-top: var(--clu-hairline); padding-left: 0; padding-top: var(--clu-space-16); }
  .finding-card-v2 { padding: var(--clu-space-16); }
  .fc-headline { font-size: var(--clu-body-l-size); line-height: var(--clu-body-l-line); letter-spacing: 0; font-weight: 500; }
  .fc-explanation-row { flex-direction: column; align-items: flex-start; gap: var(--clu-space-8); }
  .viz-row-label { width: 96px; }
}
@media (max-width: 780px) {
  .evidence-grid { grid-template-columns: 1fr; }
}

/* ---------- fix/figma-fidelity: Results as in docs/design/frames/05-results ---------- */
.finding-card-v2 { border: var(--clu-hairline); padding: var(--clu-space-24) var(--clu-space-32) var(--clu-space-16); }
.fc-chips { align-items: center; gap: var(--clu-space-12); margin-bottom: var(--clu-space-16); }
.fc-chip { border: none; background: none; padding: 0; border-radius: 0; color: var(--clu-text-muted); font-size: 11px; letter-spacing: 0.1em; }
.fc-chip.fc-chip-priority { background: var(--clu-surface-soft); color: var(--clu-brand-primary); padding: 3px var(--clu-space-8); border-radius: var(--clu-radius-sm); }
.fc-headline { font-size: 22px; line-height: 30px; letter-spacing: -0.005em; font-weight: 600; max-width: none; margin-bottom: var(--clu-space-12); }
.fc-bignum-row { margin-bottom: var(--clu-space-16); gap: var(--clu-space-12); }
.fc-bignum { font-family: var(--clu-font-sans); font-size: 36px; line-height: 40px; font-weight: 500; }
.fc-bignum .num { font-family: inherit; }
.fc-bignum-sub { font-family: var(--clu-font-sans); font-size: 14px; font-weight: 400; }
.fc-divider { display: none; }
.fc-explanation-row { padding: 14px 0; }
.fc-explanation-text { font-size: 15px; max-width: none; }
.fc-next-step { margin-top: var(--clu-space-16); }
.fc-next-step-text { font-size: 15px; max-width: none; }
.fc-how-we-know { margin-top: var(--clu-space-16); }
.fc-how-label { font-family: var(--clu-font-mono); font-size: 10px; letter-spacing: var(--clu-eyebrow-track); text-transform: uppercase; color: var(--clu-text-muted); display: flex; align-items: center; gap: var(--clu-space-8); margin-bottom: var(--clu-space-4); }
.fc-how-label::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--clu-text-muted); }
.fc-how-text { font-size: 13px; line-height: 20px; color: var(--clu-text-muted); margin: 0 0 var(--clu-space-4); }
.fc-how-rule { font-size: 12px; line-height: 18px; color: var(--clu-text-muted); margin: 0 0 var(--clu-space-8); }
.feedback-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--clu-space-8); border-top: var(--clu-hairline); padding-top: var(--clu-space-12); margin-top: var(--clu-space-12); }
.feedback-q { font-size: 13px; color: var(--clu-text-muted); margin-right: var(--clu-space-4); }
.feedback-row .fb-pill { background: transparent; color: var(--clu-text-primary); border: var(--clu-hairline); border-radius: var(--clu-radius-pill); padding: 3px 12px; font-size: 12px; font-weight: 500; }
.feedback-row .fb-pill:hover { background: var(--clu-surface-soft); }
.feedback-row .fb-add { background: none; border: none; color: var(--clu-brand-primary); font-size: 12px; font-weight: 500; padding: 3px 4px; }
.feedback-note-wrap { flex-basis: 100%; }
.feedback-note-wrap textarea { width: 100%; margin-top: var(--clu-space-4); box-sizing: border-box; }
.fc-madewith { border-top: var(--clu-hairline); }

.result-summary-grid { grid-template-columns: 1.6fr 1fr; gap: 0; padding: 0; margin-bottom: var(--clu-space-16); }
.result-summary-text { padding: var(--clu-space-24) var(--clu-space-32); }
.result-summary-text p { font-size: 15px; line-height: 24px; margin: 0 0 var(--clu-space-8); max-width: none; }
.result-outcome { padding: var(--clu-space-24) var(--clu-space-32); justify-content: flex-start; }
.result-outcome strong { font-family: var(--clu-font-sans); font-size: 40px; line-height: 44px; font-weight: 500; }
.result-outcome strong .num { font-family: inherit; }
.result-outcome > span { font-size: 14px; line-height: 20px; }
.eyebrow { font-family: var(--clu-font-mono); font-size: 10px; line-height: 14px; letter-spacing: var(--clu-eyebrow-track); text-transform: uppercase; color: var(--clu-text-muted); margin: 0 0 var(--clu-space-12); }
.read-strip { display: flex; gap: var(--clu-space-24); align-items: baseline; margin: 0 0 var(--clu-space-16); padding: 0 var(--clu-space-4); }
.read-strip .eyebrow { margin: 0; flex: 0 0 auto; }
.read-strip-text { font-size: 13px; line-height: 20px; color: var(--clu-text-muted); }
.more-findings { font-size: 13px; color: var(--clu-text-muted); margin: var(--clu-space-16) var(--clu-space-4) var(--clu-space-24); }
.evidence-grid { grid-template-columns: 1.5fr 1fr; align-items: start; }
.evidence-panel .eyebrow { margin-bottom: var(--clu-space-12); }
.panel-lede { font-size: 13px; line-height: 20px; color: var(--clu-text-muted); margin: 0 0 var(--clu-space-16); }
.signal-group { display: flex; gap: var(--clu-space-12); padding: var(--clu-space-16) 0; border-top: var(--clu-hairline); }
.signal-group:first-of-type { border-top: none; }
.signal-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 7px; flex: 0 0 auto; }
.signal-dot.ready { background: var(--clu-status-testable); }
.signal-dot.research { background: var(--clu-status-research); }
.signal-dot.ruled { background: var(--clu-status-supported); }
.signal-title { font-size: 14px; font-weight: 600; color: var(--clu-text-primary); }
.signal-text { font-size: 13px; line-height: 20px; color: var(--clu-text-muted); margin: 2px 0 0; }
.result-band { display: flex; align-items: center; justify-content: space-between; gap: var(--clu-space-32); flex-wrap: wrap; background: var(--clu-brand-primary); color: var(--clu-text-on-primary); border-radius: var(--clu-radius-lg); padding: var(--clu-space-24) var(--clu-space-32); margin: var(--clu-space-24) 0 0; }
.band-copy { flex: 1 1 420px; min-width: 0; }
.band-eyebrow { font-family: var(--clu-font-mono); font-size: 10px; letter-spacing: var(--clu-eyebrow-track); text-transform: uppercase; margin-bottom: var(--clu-space-8); }
.band-text { font-size: 17px; line-height: 26px; font-weight: 500; margin: 0 0 var(--clu-space-8); color: var(--clu-text-on-primary); background: var(--clu-brand-primary); max-width: none; }
.band-source { font-family: var(--clu-font-mono); font-size: 11px; }
.band-actions { display: flex; gap: var(--clu-space-12); flex-wrap: wrap; }
.band-primary { background: var(--clu-surface-card); color: var(--clu-brand-primary); border: 1.5px solid var(--clu-surface-card); border-radius: var(--clu-radius-md); padding: 10px 18px; font-weight: 600; }
.band-secondary { background: var(--clu-brand-primary); color: var(--clu-text-on-primary); border: 1.5px solid var(--clu-text-on-primary); border-radius: var(--clu-radius-md); padding: 10px 18px; font-weight: 600; }
.band-primary:hover, .band-secondary:hover { opacity: 0.9; }
.band-primary:focus-visible, .band-secondary:focus-visible { outline: 2px solid var(--clu-text-on-primary); outline-offset: 2px; }
/* clu-results:end */
/* ==== clu-results:end ==== */
/* ==== clu-shell:begin ==== */
/* The app shell and the five steps. Every value is a Clu token
   (tools/clu-tokens.css); the Results components live in tools/clu-results.css. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--clu-surface-page); color: var(--clu-text-primary); font-family: var(--clu-font-sans);
  font-size: var(--clu-body-size); line-height: var(--clu-body-line); font-weight: var(--clu-body-weight);
  font-variant-numeric: var(--clu-numeric); min-height: 100vh; -webkit-font-smoothing: antialiased;
}
.mono, code, kbd { font-family: var(--clu-font-mono); font-variant-numeric: var(--clu-numeric); }
code { font-size: var(--clu-code-size); line-height: var(--clu-code-line); }
a { color: var(--clu-brand-primary); text-underline-offset: 2px; } /* derived, not in CLU_DESIGN v2.0 */
h1, h2, h3 { font-weight: 600; margin: 0 0 var(--clu-space-4); color: var(--clu-brand-primary); }
p { margin: 0 0 var(--clu-space-12); color: var(--clu-text-muted); max-width: var(--clu-measure); }
.hidden { display: none !important; }
:focus-visible { outline: 2px solid var(--clu-border-focus); outline-offset: 2px; }

/* ---------- layout shell: 12 columns, 96px margin, 24px gutter on a 1440 canvas ---------- */
.shell { max-width: var(--clu-grid-max); margin: 0 auto; padding: 0 var(--clu-grid-margin) var(--clu-space-96); }
.topbar { position: sticky; top: 0; background: var(--clu-surface-page); z-index: 10; padding: var(--clu-space-24) 0 0; }

/* ---------- rail: the five steps ---------- */
.rail { display: flex; align-items: center; gap: 0; margin-bottom: var(--clu-space-32); padding-bottom: var(--clu-space-16); border-bottom: var(--clu-hairline); }
.rail-step { display: flex; align-items: center; gap: var(--clu-space-12); cursor: default; padding: var(--clu-space-4) 0; }
.rail-step.clickable { cursor: pointer; }
.rail-num {
  width: 28px; height: 28px; border-radius: var(--clu-radius-sm); display: flex; align-items: center; justify-content: center;
  font-family: var(--clu-font-mono); font-size: var(--clu-metric-size); font-weight: 500; border: var(--clu-strong-line-width) solid var(--clu-text-muted);
  color: var(--clu-text-muted); flex-shrink: 0; background: var(--clu-surface-card); transition: background var(--clu-motion), border-color var(--clu-motion), color var(--clu-motion);
}
.rail-step.done .rail-num { background: var(--clu-brand-primary); border-color: var(--clu-brand-primary); color: var(--clu-text-on-primary); }
.rail-step.current .rail-num { background: var(--clu-surface-card); border-color: var(--clu-brand-primary); color: var(--clu-brand-primary); } /* derived, not in CLU_DESIGN v2.0 */
.rail-label { font-size: var(--clu-ui-label-size); line-height: var(--clu-ui-label-line); font-weight: var(--clu-ui-label-weight); color: var(--clu-text-muted); white-space: nowrap; }
.rail-step.current .rail-label { color: var(--clu-brand-primary); }
.rail-connector { flex: 1; height: 1.5px; background: var(--clu-border-hairline); margin: 0 var(--clu-space-12); min-width: var(--clu-space-16); }
.topbar-brand { padding-bottom: var(--clu-space-16); }
.clu-wordmark { display: inline-flex; line-height: 0; }
.clu-wordmark svg { height: 32px; width: auto; display: block; }

/* ---------- cards ---------- */
.card { background: var(--clu-surface-card); border: var(--clu-hairline); border-radius: var(--clu-radius-lg); padding: var(--clu-space-24); margin-bottom: var(--clu-space-16); }
.card-raised { background: var(--clu-surface-card); }
.card-title {
  font-family: var(--clu-font-mono); font-size: var(--clu-eyebrow-size); line-height: var(--clu-eyebrow-line); font-weight: var(--clu-eyebrow-weight);
  letter-spacing: var(--clu-eyebrow-track); text-transform: uppercase; color: var(--clu-brand-primary); margin-bottom: var(--clu-space-16);
}

/* ---------- buttons and inputs: 10px radius, never pills ---------- */
button { font-family: inherit; font-size: var(--clu-ui-label-size); line-height: var(--clu-ui-label-line); font-weight: var(--clu-ui-label-weight); cursor: pointer; }
/* Inside the product the working primary is Ink fill: Saffron stays for findings. */
.btn {
  background: var(--clu-brand-primary); color: var(--clu-text-on-primary); border: var(--clu-strong-line-width) solid var(--clu-brand-primary); border-radius: var(--clu-radius-md);
  padding: var(--clu-space-8) var(--clu-space-24); transition: background var(--clu-motion), color var(--clu-motion), border-color var(--clu-motion);
}
.btn:hover { background: var(--clu-brand-primary-hover); border-color: var(--clu-brand-primary-hover); }
.btn:active { background: var(--clu-brand-primary); border-color: var(--clu-brand-primary); }
/* Disabled (CLU_DESIGN states table): disabled text, hairline, no fill. */
.btn:disabled, .btn:disabled:hover, .btn-secondary:disabled { background: transparent; color: var(--clu-text-disabled); border: var(--clu-hairline); cursor: not-allowed; }
.btn-secondary { background: transparent; color: var(--clu-brand-primary); border: var(--clu-strong-line-width) solid var(--clu-brand-primary); }
.btn-secondary:hover { background: var(--clu-surface-soft); border-color: var(--clu-brand-primary); } /* derived, not in CLU_DESIGN v2.0 */
.btn-row { display: flex; gap: var(--clu-space-12); margin-top: var(--clu-space-24); align-items: center; }
select, input[type=text] {
  font-family: inherit; font-size: var(--clu-ui-label-size); line-height: var(--clu-ui-label-line); padding: var(--clu-space-8) var(--clu-space-12);
  border-radius: var(--clu-radius-md); border: var(--clu-hairline-width) solid var(--clu-text-muted); background: var(--clu-surface-card); color: var(--clu-text-primary);
  min-width: 220px; max-width: 100%;
}
input[type=text].mono, select.mono { font-family: var(--clu-font-mono); }
input::placeholder, textarea::placeholder { color: var(--clu-text-placeholder); opacity: 1; }
textarea { font-family: inherit; border-radius: var(--clu-radius-md); border: var(--clu-hairline-width) solid var(--clu-text-muted); background: var(--clu-surface-card); color: var(--clu-text-primary); }
table { width: 100%; border-collapse: collapse; font-size: var(--clu-ui-label-size); line-height: var(--clu-ui-label-line); }
th, td { text-align: left; padding: var(--clu-space-8) var(--clu-space-12); border-bottom: var(--clu-hairline); vertical-align: top; }
th { color: var(--clu-text-muted); font-family: var(--clu-font-mono); font-weight: 500; font-size: var(--clu-eyebrow-size); letter-spacing: var(--clu-eyebrow-track); text-transform: uppercase; }
details > summary:focus-visible { outline: 2px solid var(--clu-border-focus); outline-offset: 2px; }

/* ---------- Add data ---------- */
.page-h1 {
  text-align: center; font-size: var(--clu-h2-size); line-height: var(--clu-h2-line); letter-spacing: var(--clu-h2-track); font-weight: var(--clu-h2-weight);
  margin: var(--clu-space-48) auto var(--clu-space-12); color: var(--clu-brand-primary); max-width: var(--clu-measure);
}
.page-h1.page-h1-solo { margin-bottom: var(--clu-space-48); }
.page-subcopy { text-align: center; font-size: var(--clu-body-l-size); line-height: var(--clu-body-l-line); color: var(--clu-text-muted); max-width: 640px; margin: 0 auto var(--clu-space-48); }
.step1-block { margin-top: var(--clu-space-48); }
.step1-block:first-of-type { margin-top: 0; }
.section-heading { font-size: var(--clu-h3-size); line-height: var(--clu-h3-line); letter-spacing: var(--clu-h3-track); font-weight: var(--clu-h3-weight); color: var(--clu-brand-primary); text-align: left; margin-bottom: var(--clu-space-4); }
.section-sub { font-size: var(--clu-body-size); line-height: var(--clu-body-line); color: var(--clu-text-muted); text-align: left; margin: 0 0 var(--clu-space-16); }

/* -- data-shape example cards: illustrative only, never selectable -- */
/* min(280px, 100%) caps the auto minimum at the available width and
   min-width: 0 on the card removes its own min-content floor, so the
   preview table's overflow-x: auto engages instead of blowing the page out
   horizontally on narrow viewports. */
.example-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--clu-grid-gutter); }
.example-card {
  border: var(--clu-hairline); border-radius: var(--clu-radius-lg); padding: var(--clu-space-24); min-width: 0;
  background: var(--clu-surface-card); cursor: default; transition: box-shadow var(--clu-motion);
}
.example-card-head { display: flex; align-items: center; gap: var(--clu-space-12); margin-bottom: var(--clu-space-12); }
.example-icon { width: 28px; height: 28px; border-radius: var(--clu-radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--clu-surface-soft); color: var(--clu-brand-primary); } /* derived, not in CLU_DESIGN v2.0 */
.example-card-title { font-size: var(--clu-body-size); line-height: var(--clu-body-line); font-weight: 500; }
.example-card-desc { font-size: var(--clu-ui-label-size); line-height: var(--clu-ui-label-line); color: var(--clu-text-muted); margin-bottom: var(--clu-space-16); }
.example-preview-wrap { overflow-x: auto; border: var(--clu-hairline); border-radius: var(--clu-radius-md); margin-bottom: var(--clu-space-12); }
.example-preview-table { width: 100%; border-collapse: collapse; font-size: var(--clu-metric-size); line-height: var(--clu-metric-line); font-family: var(--clu-font-mono); white-space: nowrap; }
.example-preview-table th, .example-preview-table td { padding: var(--clu-space-8) var(--clu-space-12); border-bottom: var(--clu-hairline); text-align: left; }
.example-preview-table tr:last-child td { border-bottom: none; }
.example-preview-table th { color: var(--clu-text-muted); }
.example-card-footer { font-size: var(--clu-ui-label-size); line-height: var(--clu-ui-label-line); color: var(--clu-text-muted); }

/* -- dropzone -- */
.dropzone {
  border: var(--clu-strong-line-width) dashed var(--clu-dropzone-border); border-radius: var(--clu-radius-lg); padding: var(--clu-space-24) var(--clu-space-24) var(--clu-space-64);
  text-align: center; background: var(--clu-surface-card); transition: border-color var(--clu-motion), background var(--clu-motion);
}
.dropzone.dragover { border-color: var(--clu-brand-primary); background: var(--clu-surface-soft); } /* derived, not in CLU_DESIGN v2.0 */
.dropzone-icon { color: var(--clu-brand-primary); margin: 0 auto var(--clu-space-16); display: flex; justify-content: center; }
.dropzone-title { font-size: var(--clu-body-l-size); line-height: var(--clu-body-l-line); font-weight: 500; margin-bottom: var(--clu-space-4); }
.dropzone-meta { font-size: var(--clu-ui-label-size); line-height: var(--clu-ui-label-line); color: var(--clu-text-muted); margin-bottom: var(--clu-space-24); }
.dropzone-hint { font-size: var(--clu-ui-label-size); line-height: var(--clu-ui-label-line); color: var(--clu-text-muted); margin-top: var(--clu-space-16); }

/* -- staged file card(s) -- */
.file-card {
  display: flex; align-items: center; gap: var(--clu-space-16); flex-wrap: wrap;
  background: var(--clu-surface-card); border: var(--clu-strong-line); border-radius: var(--clu-radius-lg); padding: var(--clu-space-24); margin-bottom: var(--clu-space-12);
}
.file-card-icon { width: 36px; height: 36px; border-radius: var(--clu-radius-md); background: var(--clu-surface-soft); color: var(--clu-brand-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* derived, not in CLU_DESIGN v2.0 */
.file-card-info { flex: 1 1 220px; min-width: 0; }
.file-card-name { font-size: var(--clu-body-l-size); line-height: var(--clu-body-l-line); font-weight: 500; color: var(--clu-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-card-meta { font-size: var(--clu-ui-label-size); line-height: var(--clu-ui-label-line); color: var(--clu-text-muted); margin-top: 2px; }
.file-card-controls { display: flex; align-items: center; gap: var(--clu-space-16); flex-shrink: 0; }
.file-replace-link { background: none; border: none; color: var(--clu-brand-primary); font-size: var(--clu-ui-label-size); font-weight: 500; cursor: pointer; font-family: inherit; padding: var(--clu-space-4); text-decoration: underline; text-underline-offset: 2px; }
.file-remove-btn { background: none; border: none; color: var(--clu-text-muted); cursor: pointer; padding: var(--clu-space-8); border-radius: var(--clu-radius-md); display: flex; }
.file-remove-btn:hover { color: var(--clu-text-primary); background: var(--clu-surface-soft); } /* derived, not in CLU_DESIGN v2.0 */
/* An error is coral: a border and a marker, never coral text (it fails AA on white). */
.file-card.file-card-error { border: var(--clu-coral-block-border-width) solid var(--clu-accent-coral); background: var(--clu-coral-block-bg); }
.inline-error {
  color: var(--clu-text-primary); border: var(--clu-inline-error-border); border-left: var(--clu-inline-error-rule);
  padding: var(--clu-inline-error-padding); border-radius: var(--clu-inline-error-radius); background: var(--clu-inline-error-bg);
}

/* -- page footer: persists across all steps -- */
.page-footer { margin-top: var(--clu-space-48); padding-top: var(--clu-space-24); border-top: var(--clu-hairline); }
.page-footer p { margin: 0 0 var(--clu-space-4); font-size: var(--clu-ui-label-size); line-height: var(--clu-ui-label-line); color: var(--clu-text-muted); text-align: left; }
.page-footer p:last-child { margin-bottom: 0; }
.page-footer-row { display: flex; align-items: center; justify-content: space-between; gap: var(--clu-space-16); flex-wrap: wrap; }
/* No cross-fade on a theme switch (CLU_DESIGN L72): while the theme flips, every transition is off for a frame. */
:root[data-theme-switching] *, :root[data-theme-switching] *::before, :root[data-theme-switching] *::after { transition: none !important; }

/* ---------- sample grid (kept, unreachable from Step 1) ---------- */
.sample-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--clu-space-12); margin-top: var(--clu-space-16); }
.sample-card { border: var(--clu-hairline); border-radius: var(--clu-radius-md); padding: var(--clu-space-16); background: var(--clu-surface-card); cursor: pointer; text-align: left; transition: border-color var(--clu-motion), background var(--clu-motion); }
.sample-card.selected { border: var(--clu-strong-line); background: var(--clu-surface-soft); } /* derived, not in CLU_DESIGN v2.0 */
.sample-card .kicker { font-family: var(--clu-font-mono); font-size: var(--clu-eyebrow-size); font-weight: 500; text-transform: uppercase; letter-spacing: var(--clu-eyebrow-track); color: var(--clu-brand-primary); margin-bottom: var(--clu-space-4); }
.sample-card h4 { margin: 0 0 var(--clu-space-4); font-size: var(--clu-ui-label-size); font-weight: 500; }
.sample-card p { margin: 0; font-size: var(--clu-ui-label-size); }
.sample-card .try-link { font-size: var(--clu-ui-label-size); color: var(--clu-brand-primary); font-weight: 500; margin-top: var(--clu-space-8); display: inline-block; }

/* ---------- match step ---------- */
.qcard { border-bottom: var(--clu-hairline); padding: var(--clu-space-16) 0; }
.qcard:first-child { padding-top: 0; }
.qcard:last-child { border-bottom: none; }
.qcard h3 { font-size: var(--clu-body-size); line-height: var(--clu-body-line); font-weight: 500; margin-bottom: var(--clu-space-4); }
.qitem { display: flex; align-items: center; gap: var(--clu-space-12); padding: var(--clu-space-4) 0; flex-wrap: wrap; }
.qitem label { min-width: 200px; font-size: var(--clu-ui-label-size); line-height: var(--clu-ui-label-line); }
.confirm-toggle { display: flex; gap: var(--clu-space-8); }
.confirm-toggle button { padding: var(--clu-space-4) var(--clu-space-16); border-radius: var(--clu-radius-md); border: var(--clu-strong-line-width) solid var(--clu-brand-primary); background: var(--clu-surface-card); color: var(--clu-brand-primary); font-size: var(--clu-ui-label-size); transition: background var(--clu-motion), color var(--clu-motion); }
.confirm-toggle button.active { background: var(--clu-brand-primary); color: var(--clu-text-on-primary); }
.context-note { font-size: var(--clu-ui-label-size); line-height: var(--clu-ui-label-line); color: var(--clu-text-muted); background: var(--clu-surface-page); border-radius: var(--clu-radius-md); padding: var(--clu-space-8) var(--clu-space-12); margin-top: var(--clu-space-8); white-space: pre-wrap; } /* derived, not in CLU_DESIGN v2.0 */
.confidence-pill { font-size: var(--clu-ui-label-size); color: var(--clu-text-muted); }

.match-row { border-bottom: var(--clu-hairline); padding: var(--clu-space-16) 0; display: flex; align-items: center; gap: var(--clu-space-16); flex-wrap: wrap; }
.match-row:first-child { padding-top: 0; }
.match-row:last-child { border-bottom: none; }
.match-sentence { flex: 1 1 360px; font-size: var(--clu-body-size); line-height: var(--clu-body-line); max-width: var(--clu-measure); }
.match-control { flex: 0 0 auto; }
.match-why { flex-basis: 100%; }
/* Points at exactly the Match field(s) a "needs_reconfirmation" result named. */
.match-needs-review { outline: 2px solid var(--clu-brand-primary); outline-offset: 4px; border-radius: var(--clu-radius-md); background: var(--clu-surface-soft); } /* derived, not in CLU_DESIGN v2.0 */
.match-why summary { font-size: var(--clu-ui-label-size); color: var(--clu-text-muted); cursor: pointer; }
details.more-options { margin-top: var(--clu-space-8); border-top: var(--clu-hairline); padding-top: var(--clu-space-4); }
details.more-options summary { font-size: var(--clu-ui-label-size); font-weight: 500; color: var(--clu-text-primary); cursor: pointer; padding: var(--clu-space-12) 0; }
details.more-options[open] summary { margin-bottom: var(--clu-space-8); }

.understanding-card { border-bottom: var(--clu-hairline); padding: var(--clu-space-4) 0; }
.understanding-card:last-child { border-bottom: none; }
.understanding-card summary { padding: var(--clu-space-12) 0; cursor: pointer; font-size: var(--clu-ui-label-size); line-height: var(--clu-ui-label-line); list-style: none; }
.understanding-card summary::-webkit-details-marker { display: none; }
.understanding-card summary code { font-size: var(--clu-metric-size); }
.understanding-edit { padding: var(--clu-space-4) 0 var(--clu-space-12) 0; }
details.advanced-settings { margin-top: var(--clu-space-32); padding-top: var(--clu-space-24); border-top: var(--clu-hairline); }
details.advanced-settings > summary { font-size: var(--clu-body-l-size); line-height: var(--clu-body-l-line); font-weight: 500; color: var(--clu-brand-primary); cursor: pointer; list-style: none; }
details.advanced-settings > summary::-webkit-details-marker { display: none; }
details.advanced-settings[open] > summary { margin-bottom: var(--clu-space-12); }

.essential-mappings { margin-bottom: var(--clu-space-24); }
.essential-mapping-card { background: var(--clu-surface-page); border: var(--clu-hairline); border-radius: var(--clu-radius-md); padding: var(--clu-space-16); margin-bottom: var(--clu-space-12); } /* derived, not in CLU_DESIGN v2.0 */
.essential-mapping-title { font-weight: 500; font-size: var(--clu-body-size); line-height: var(--clu-body-line); margin-bottom: var(--clu-space-4); }
.essential-mapping-current { margin: var(--clu-space-8) 0; font-size: var(--clu-ui-label-size); line-height: var(--clu-ui-label-line); display: flex; align-items: center; gap: var(--clu-space-8); flex-wrap: wrap; }

.mapping-examples { margin: var(--clu-space-8) 0; font-size: var(--clu-ui-label-size); line-height: var(--clu-ui-label-line); color: var(--clu-text-muted); }
.mapping-examples code { font-size: var(--clu-metric-size); }
.mapping-example-item { display: inline-block; margin: 2px var(--clu-space-12) 2px 0; }
.mapping-note { font-size: var(--clu-ui-label-size); color: var(--clu-text-muted); margin: var(--clu-space-4) 0 0; }
.mapping-actions { display: flex; gap: var(--clu-space-8); margin-top: var(--clu-space-12); flex-wrap: wrap; }
.mapping-actions button { font-size: var(--clu-ui-label-size); }
.mapping-actions button.active { background: var(--clu-surface-soft); border-color: var(--clu-brand-primary); color: var(--clu-brand-primary); } /* derived, not in CLU_DESIGN v2.0 */
details.mapping-change { margin-top: var(--clu-space-12); }
details.mapping-change summary { font-size: var(--clu-ui-label-size); cursor: pointer; color: var(--clu-brand-primary); list-style: none; }
details.mapping-change summary::-webkit-details-marker { display: none; }
details.mapping-change .mapping-change-body { margin-top: var(--clu-space-8); padding-top: var(--clu-space-8); border-top: 1px dashed var(--clu-border-hairline); }
.badge-review { background: transparent; color: var(--clu-brand-primary); border: var(--clu-hairline-width) solid var(--clu-brand-primary); } /* derived, not in CLU_DESIGN v2.0 */

.outcome-radio-group { display: flex; flex-direction: column; gap: var(--clu-space-8); margin: var(--clu-space-12) 0; }
.outcome-radio-option { display: flex; align-items: center; gap: var(--clu-space-12); border: var(--clu-hairline); border-radius: var(--clu-radius-md); padding: var(--clu-space-12); cursor: pointer; background: var(--clu-surface-card); transition: border-color var(--clu-motion); }
.outcome-radio-option:hover { border-color: var(--clu-brand-primary); }
.outcome-radio-option.selected { border: var(--clu-strong-line); background: var(--clu-surface-soft); } /* derived, not in CLU_DESIGN v2.0 */
.outcome-radio-option input[type="radio"] { margin: 0; flex-shrink: 0; accent-color: var(--clu-brand-primary); }
.outcome-radio-label { flex: 1; font-size: var(--clu-ui-label-size); line-height: var(--clu-ui-label-line); }
.outcome-radio-rate { font-family: var(--clu-font-mono); font-size: var(--clu-metric-size); color: var(--clu-text-muted); white-space: nowrap; }

.quick-tag-card .mapping-actions button.recommended::after { content: " (recommended)"; font-weight: 400; font-size: var(--clu-metric-size); }
.journey-proposal-path { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--clu-space-4) var(--clu-space-8); font-size: var(--clu-body-size); line-height: 28px; font-weight: 500; margin: var(--clu-space-8) 0; }
.journey-proposal-path .journey-step { white-space: nowrap; }
.journey-proposal-path .journey-arrow { color: var(--clu-text-muted); }

/* -- Match's three groups: focus / settings / limitations -- */
.match-group { margin-top: var(--clu-space-32); padding-top: var(--clu-space-24); border-top: var(--clu-hairline); }
.match-group:first-of-type { margin-top: var(--clu-space-24); }
.match-group-title { font-size: var(--clu-body-l-size); line-height: var(--clu-body-l-line); font-weight: 500; color: var(--clu-brand-primary); margin-bottom: var(--clu-space-4); }
.focus-group .focus-heading { font-size: var(--clu-h3-size); line-height: var(--clu-h3-line); letter-spacing: var(--clu-h3-track); font-weight: var(--clu-h3-weight); color: var(--clu-brand-primary); margin-bottom: var(--clu-space-4); }
.focus-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--clu-space-12); margin-top: var(--clu-space-12); }
.focus-card {
  border: var(--clu-hairline); border-radius: var(--clu-radius-md); padding: var(--clu-space-16); background: var(--clu-surface-card);
  cursor: pointer; text-align: left; transition: border-color var(--clu-motion), background var(--clu-motion); font: inherit; color: inherit; display: block; width: 100%;
}
.focus-card:hover { border-color: var(--clu-brand-primary); }
.focus-card.selected { border: var(--clu-strong-line); background: var(--clu-surface-soft); } /* derived, not in CLU_DESIGN v2.0 */
.focus-card-title { font-size: var(--clu-body-size); line-height: var(--clu-body-line); font-weight: 500; margin-bottom: var(--clu-space-4); }
.focus-card-desc { font-size: var(--clu-ui-label-size); line-height: var(--clu-ui-label-line); color: var(--clu-text-muted); }
.focus-card-other { border-style: dashed; }

/* ---------- analyze step: a calm, generic "working" state, no fake percentage ---------- */
.ledger { display: flex; gap: var(--clu-space-24); flex-wrap: wrap; margin-bottom: var(--clu-space-24); }
.ledger .stat { font-size: var(--clu-ui-label-size); }
.ledger .stat .num { font-family: var(--clu-font-mono); font-size: var(--clu-body-l-size); font-weight: 500; display: block; }
.analyzing-state { text-align: center; padding: var(--clu-space-32) var(--clu-space-12); }
.analyzing-primary { font-size: var(--clu-body-l-size); line-height: var(--clu-body-l-line); font-weight: 500; margin-bottom: var(--clu-space-8); }
.analyzing-support { font-size: var(--clu-ui-label-size); line-height: var(--clu-ui-label-line); color: var(--clu-text-muted); margin: 0 auto var(--clu-space-24); }
.progress-bar { height: 6px; border-radius: var(--clu-radius-sm); background: var(--clu-surface-soft); overflow: hidden; max-width: 320px; margin: 0 auto var(--clu-space-24); } /* derived, not in CLU_DESIGN v2.0 */
.progress-bar-fill { height: 100%; width: 40%; border-radius: var(--clu-radius-sm); background: var(--clu-brand-primary); animation: progress-indeterminate 1.4s ease-in-out infinite; }
@keyframes progress-indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
@media (prefers-reduced-motion: reduce) { .progress-bar-fill { animation: none; width: 100%; } }
.escalation-live { border: var(--clu-coral-block-border-width) solid var(--clu-accent-coral); background: var(--clu-coral-block-bg); border-radius: var(--clu-radius-md); padding: var(--clu-space-12) var(--clu-space-16); margin-bottom: var(--clu-space-8); font-size: var(--clu-ui-label-size); line-height: var(--clu-ui-label-line); }
.match-conflict-banner:empty { display: none; }
.match-conflict-banner { border: var(--clu-coral-block-border-width) solid var(--clu-accent-coral); background: var(--clu-coral-block-bg); border-radius: var(--clu-radius-lg); padding: var(--clu-space-16) var(--clu-space-24); margin: var(--clu-space-16) 0; }
.match-conflict-banner strong { color: var(--clu-coral-label); font-weight: 500; }
.notice-card { border: var(--clu-strong-line); }
.notice-card.notice-error { border: var(--clu-coral-block-border-width) solid var(--clu-accent-coral); background: var(--clu-coral-block-bg); }
.escalation-live > .badge { color: var(--clu-escalation-label); }

/* ---------- Results (app-only bits; the components are in tools/clu-results.css) ---------- */
.result-feedback-row { display: flex; align-items: center; gap: var(--clu-space-12); font-size: var(--clu-ui-label-size); color: var(--clu-text-muted); margin-bottom: var(--clu-space-24); }

/* ---------- responsive: usable without horizontal overflow at 400px ---------- */
@media (max-width: 1024px) {
  .shell { padding: 0 var(--clu-space-48) var(--clu-space-64); }
}
@media (max-width: 640px) {
  .shell { padding: 0 var(--clu-space-16) var(--clu-space-64); }
  .page-h1 { font-size: var(--clu-h3-size); line-height: var(--clu-h3-line); letter-spacing: var(--clu-h3-track); font-weight: var(--clu-h3-weight); margin-top: var(--clu-space-32); }
  .page-subcopy { font-size: var(--clu-body-size); line-height: var(--clu-body-line); }
  .rail-label { display: none; }
  .rail-connector { margin: 0 var(--clu-space-8); }
  .card { padding: var(--clu-space-16); }
  .example-grid { grid-template-columns: minmax(0, 1fr); }
  .file-card { flex-direction: column; align-items: flex-start; }
  /* width: 100% lets .file-card-name's ellipsis engage in the column layout */
  .file-card-info { width: 100%; }
  .file-card-controls { width: 100%; justify-content: flex-end; }
  .dropzone { padding: var(--clu-space-32) var(--clu-space-16); }
  #continueBtn { width: 100%; }
  .btn-row { flex-wrap: wrap; }
  /* A <select> auto-sizes to its widest <option> regardless of max-width; an
     explicit width overrides that so a long column name cannot scroll the page. */
  select, input[type=text] { min-width: 0; width: 100%; }
  /* Must come after the unconditional rule above: same specificity, so source order decides. */
  .match-control { flex: 1 1 100%; min-width: 0; }
  .match-row { min-width: 0; }
  /* a wide table scrolls inside its card instead of widening the page */
  .card table { display: block; overflow-x: auto; }
}
.qmeta { margin-bottom: var(--clu-space-8); }
/* the small unclassed buttons (Match actions, feedback) read as secondary buttons */
.mapping-actions button, .feedback-row button { background: transparent; color: var(--clu-brand-primary); border: var(--clu-strong-line-width) solid var(--clu-brand-primary); border-radius: var(--clu-radius-md); padding: var(--clu-space-4) var(--clu-space-12); transition: background var(--clu-motion); }
.mapping-actions button:hover, .feedback-row button:hover { background: var(--clu-surface-soft); } /* derived, not in CLU_DESIGN v2.0 */
.feedback-row textarea { padding: var(--clu-space-8); }
/* ==== clu-shell:end ==== */
/* ==== clu-app-v2:begin ==== */
/* ==========================================================================
   App shell v2 (CLU_HANDOFF sections 3, 5, 6, 7). Every colour is a --clu-
   token; every transition is var(--clu-motion) (160ms ease-out); no shadow
   except the modal overlay. prefers-reduced-motion switches motion off.
   ========================================================================== */

/* -- header: 64 high, wordmark left; chip, toggle, avatar right; hairline below -- */
.topbar { padding: 0; }
.app-header { display: flex; align-items: center; justify-content: space-between; gap: var(--clu-space-16); height: 64px; border-bottom: var(--clu-hairline); }
.app-header .clu-wordmark svg { height: 28px; }
.app-header-right { display: flex; align-items: center; gap: var(--clu-space-16); min-width: 0; }
.usage-chip {
  font-family: var(--clu-font-mono); font-weight: 500; font-size: var(--clu-eyebrow-size); line-height: 1; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--clu-text-muted); background: var(--clu-surface-soft); border: var(--clu-hairline); border-radius: var(--clu-radius-pill);
  padding: var(--clu-space-8) var(--clu-space-12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw;
}
.avatar {
  width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--clu-brand-primary); color: var(--clu-text-on-primary);
  font-weight: 600; display: inline-flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; position: relative;
  transition: background var(--clu-motion);
}
.avatar::after { content: ""; position: absolute; inset: -4px; } /* 44x44 target */
.avatar:hover { background: var(--clu-brand-primary-hover); }
.avatar:active { background: var(--clu-brand-primary); }

/* -- theme toggle: track 64x36, knob 28, 4px inset, icon 15, 44x44 hit area -- */
.theme-toggle { background: none; border: none; padding: 4px 0; min-width: 64px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
.theme-toggle-track {
  position: relative; display: block; width: 64px; height: 36px; border-radius: var(--clu-radius-pill);
  background: var(--clu-surface-card); border: var(--clu-hairline); box-sizing: border-box; color: var(--clu-text-muted);
}
:root[data-theme="dark"] .theme-toggle-track { background: var(--clu-surface-raised); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle-track { background: var(--clu-surface-raised); } }
.theme-toggle-icon { position: absolute; top: 50%; width: 15px; height: 15px; margin-top: -7.5px; }
.theme-toggle-icon.sun { left: 12px; }
.theme-toggle-icon.moon { right: 12px; }
.theme-toggle-knob {
  position: absolute; top: 3px; left: 3px; width: 28px; height: 28px; border-radius: 50%; background: var(--clu-brand-primary); color: var(--clu-text-on-primary);
  transform: translateX(0); transition: transform var(--clu-motion); /* the knob moves; the track colour never animates */
}
.theme-toggle[aria-checked="true"] .theme-toggle-knob { transform: translateX(28px); }
.theme-toggle-knob .theme-toggle-icon { left: 50%; margin-left: -7.5px; transition: opacity var(--clu-motion); }
.theme-toggle-knob .sun { opacity: 1; }
.theme-toggle-knob .moon { opacity: 0; right: auto; }
.theme-toggle[aria-checked="true"] .theme-toggle-knob .sun { opacity: 0; }
.theme-toggle[aria-checked="true"] .theme-toggle-knob .moon { opacity: 1; }
.theme-toggle:hover .theme-toggle-knob { background: var(--clu-brand-primary-hover); }
.theme-toggle:active .theme-toggle-knob { background: var(--clu-brand-primary); }
.theme-toggle:focus-visible { outline: 2px solid var(--clu-border-focus); outline-offset: 2px; }
.theme-toggle:disabled { opacity: 0.45; cursor: default; }
.theme-toggle-float { position: absolute; top: var(--clu-space-16); right: var(--clu-grid-margin); z-index: 5; }
.shell { position: relative; }
.shell.card-screen .topbar, .shell.card-screen .page-footer .page-footer-row { }
.shell.card-screen .app-header { display: none; }
.shell:not(.card-screen) .theme-toggle-float { display: none; }

/* -- stepper: <nav aria-label="Steps">; done = brand box with a tick; current = card fill + 1.5px brand border; next = hairline; connectors FILL -- */
.rail { padding: var(--clu-space-24) 0; margin-bottom: var(--clu-space-24); border-bottom: var(--clu-hairline); }
.rail-num { width: 28px; height: 28px; border-radius: var(--clu-radius-sm); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; font-family: var(--clu-font-mono); font-weight: 500; border: var(--clu-hairline); color: var(--clu-text-muted); background: transparent; flex-shrink: 0; }
.rail-step.current .rail-num { background: var(--clu-surface-card); border: var(--clu-strong-line-width) solid var(--clu-brand-primary); color: var(--clu-brand-primary); box-shadow: none; }
.rail-step.done .rail-num { background: var(--clu-brand-primary); border-color: var(--clu-brand-primary); color: var(--clu-text-on-primary); }
.rail-connector { position: relative; height: 1px; background: var(--clu-border-hairline); }
.rail-connector::after { content: ""; position: absolute; inset: 0; background: var(--clu-brand-primary); transform: scaleX(0); transform-origin: left; transition: transform var(--clu-motion); }
.rail-connector.filled::after { transform: scaleX(1); }
.rail-step.clickable:focus-visible { outline: 2px solid var(--clu-border-focus); outline-offset: 2px; }
@media (max-width: 640px) { .rail-label { display: none; } .rail-step.current .rail-label { display: inline; }
  /* "Diagnosis" (65px) is longer than the old "Results" (50px): tighter connectors keep the current label inside the rail down to 320px */
  .rail-connector { min-width: var(--clu-space-4); margin: 0 var(--clu-space-4); } }

/* -- footer -- */
.page-footer { margin-top: var(--clu-space-64); }
/* Sign in, first-run, profile incomplete, session expired, limit screens and Account carry only the copyright:
   a file can exist only on the flow screens, so the retention sentence is shown there and nowhere else. */
.shell.screen-active .footer-retention { display: none; }
.example-card:hover { box-shadow: none; }

/* -- card-only screens (sign in, first-run, session expired, and the app-shell screens) -- */
.shell.screen-active #main > section:not(#screen) { display: none !important; }
.shell.screen-active #rail { display: none !important; }
.auth-wrap { display: flex; justify-content: center; padding: var(--clu-space-64) 0 var(--clu-space-32); }
.auth-card { width: 100%; max-width: 440px; background: var(--clu-surface-card); border: var(--clu-hairline); border-radius: var(--clu-radius-lg); padding: var(--clu-space-32); box-sizing: border-box; }
.auth-card .clu-wordmark svg { height: 26px; }
.auth-card h1 { font-size: var(--clu-h3-size); margin: var(--clu-space-24) 0 var(--clu-space-8); }
.auth-sub { color: var(--clu-text-muted); margin: 0 0 var(--clu-space-24); }
.auth-card label { display: block; font-size: var(--clu-ui-label-size); font-weight: 500; margin: var(--clu-space-16) 0 var(--clu-space-4); }
.auth-card input, .auth-card select { width: 100%; box-sizing: border-box; }
.auth-card .btn, .auth-card .btn-secondary { width: 100%; justify-content: center; margin-top: var(--clu-space-16); }
.auth-divider { display: flex; align-items: center; gap: var(--clu-space-12); color: var(--clu-text-muted); font-size: var(--clu-ui-label-size); margin: var(--clu-space-16) 0 0; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--clu-border-hairline); }
.auth-fine { color: var(--clu-text-muted); font-size: var(--clu-ui-label-size); margin: var(--clu-space-16) 0 0; }
.auth-link { background: none; border: none; padding: var(--clu-space-4) 0; color: var(--clu-brand-primary); font-weight: 500; text-decoration: underline; cursor: pointer; }
.auth-phone-row { display: flex; gap: var(--clu-space-8); }
.auth-phone-row select { width: 96px; flex: 0 0 96px; }
.auth-phone-row input { flex: 1; min-width: 0; }
.auth-card .inline-error { margin-top: var(--clu-space-16); }
input[type=email], input[type=tel], input[type=text], select, textarea {
  font-family: inherit; font-size: var(--clu-body-size); color: var(--clu-text-primary); background: var(--clu-surface-card);
  border: var(--clu-hairline); border-radius: var(--clu-radius-md); padding: var(--clu-space-12) var(--clu-space-12); box-sizing: border-box;
}
input[type=email], input[type=tel] { width: 100%; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--clu-border-focus); outline-offset: 2px; }
.btn:focus-visible, .btn-secondary:focus-visible, button:focus-visible { outline: 2px solid var(--clu-border-focus); outline-offset: 2px; }
.btn-secondary.is-waitlist, .btn.is-waitlist { background: transparent; color: var(--clu-text-muted); border: var(--clu-hairline); cursor: default; }
.btn.is-waitlist:hover { background: transparent; border: var(--clu-hairline); }

/* -- account + plan card -- */
.plan-card { background: var(--clu-surface-card); border: var(--clu-hairline); border-radius: var(--clu-radius-lg); padding: var(--clu-space-24); margin-bottom: var(--clu-space-16); }
.plan-card .plan-line { font-weight: 500; font-size: var(--clu-body-l-size); margin: 0 0 var(--clu-space-12); }
.plan-progress { height: 6px; border-radius: var(--clu-radius-pill); background: var(--clu-surface-soft); overflow: hidden; }
.plan-progress > span { display: block; height: 100%; background: var(--clu-brand-primary); }
.account-row { display: flex; align-items: center; justify-content: space-between; gap: var(--clu-space-16); flex-wrap: wrap; }
.danger-zone { border-top: var(--clu-hairline); margin-top: var(--clu-space-24); padding-top: var(--clu-space-24); }
.btn-danger { background: transparent; color: var(--clu-text-primary); border: var(--clu-strong-line-width) solid var(--clu-accent-coral); }
.btn-danger:hover { background: var(--clu-coral-block-bg); }
.scrim { position: fixed; inset: 0; background: color-mix(in srgb, var(--clu-text-primary) 55%, transparent); display: flex; align-items: center; justify-content: center; padding: var(--clu-space-16); z-index: 50; }
.dialog { background: var(--clu-surface-raised); border: var(--clu-hairline); border-radius: var(--clu-radius-lg); padding: var(--clu-space-24); width: 100%; max-width: 440px; box-shadow: var(--clu-elevation-overlay); }
.dialog h2 { margin-bottom: var(--clu-space-8); }
.dialog .btn-row { justify-content: flex-end; }

/* -- file card: replace / delete (inline confirm) -- */
.file-card-retention { font-size: var(--clu-ui-label-size); color: var(--clu-text-muted); margin-top: 2px; }
.file-delete-btn { background: none; border: none; color: var(--clu-text-muted); cursor: pointer; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--clu-radius-md); transition: color var(--clu-motion); }
.file-delete-btn svg { width: 24px; height: 24px; }
.file-delete-btn:hover, .file-delete-btn:focus-visible { color: var(--clu-accent-coral); }
.file-delete-confirm { display: flex; align-items: center; gap: var(--clu-space-12); flex-wrap: wrap; font-size: var(--clu-ui-label-size); }
.soft-note { background: var(--clu-surface-soft); border-radius: var(--clu-radius-md); padding: var(--clu-space-12) var(--clu-space-16); color: var(--clu-text-muted); font-size: var(--clu-ui-label-size); margin: var(--clu-space-12) 0; }

/* -- orb slots and stage lists (02a Reading, 04 Analyze) -- */
.orb-slot { display: inline-block; flex-shrink: 0; line-height: 0; vertical-align: middle; }
.orb-slot canvas { display: block; }
.orb-slot.inline { vertical-align: -5px; margin-right: var(--clu-space-8); }
.orb-row { display: flex; align-items: center; gap: var(--clu-space-16); }
.reading-panel { background: var(--clu-surface-card); border: var(--clu-hairline); border-radius: var(--clu-radius-lg); padding: var(--clu-space-24); margin: var(--clu-space-16) 0; }
.reading-panel h2 { margin: 0; }
.reading-file { color: var(--clu-text-muted); font-size: var(--clu-ui-label-size); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-list { list-style: none; margin: var(--clu-space-16) 0 0; padding: 0; }
.stage-list li { display: flex; align-items: center; gap: var(--clu-space-12); padding: var(--clu-space-8) 0; color: var(--clu-text-muted); border-top: var(--clu-hairline); }
.stage-list li:first-child { border-top: none; }
.stage-list .stage-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--clu-text-muted); box-sizing: border-box; flex-shrink: 0; }
.stage-list li.done .stage-dot { background: var(--clu-brand-primary); border-color: var(--clu-brand-primary); }
.stage-list li.running { color: var(--clu-text-primary); }
.stage-list li.running .stage-dot { background: var(--clu-state-running); border-color: var(--clu-state-running); }
.stage-list .stage-count { margin-left: auto; font-family: var(--clu-font-mono); font-size: var(--clu-metric-size); color: var(--clu-text-muted); }

/* -- results: download buttons, notice, watermark, card line -- */
.result-header { display: flex; align-items: center; gap: var(--clu-space-12); flex-wrap: wrap; }
.result-header .result-header-actions { margin-left: auto; }
#step-5 { position: relative; }
.pro-notice { display: flex; align-items: center; gap: var(--clu-space-8); color: var(--clu-text-muted); font-size: var(--clu-ui-label-size); margin: 0 0 var(--clu-space-16); }
.pro-notice::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--clu-text-muted); flex-shrink: 0; }
.pro-watermark { position: absolute; inset: 0; overflow: hidden; pointer-events: none; user-select: none; -webkit-user-select: none; z-index: 4; color: var(--clu-text-primary); opacity: var(--clu-watermark-opacity); }
.pro-watermark span { position: absolute; transform-origin: 0 0; transform: rotate(24deg); font-family: var(--clu-font-mono); font-weight: 500; font-size: 16px; letter-spacing: 0.08em; white-space: nowrap; }
:root { --clu-watermark-opacity: 0.19; }
:root[data-theme="dark"] { --clu-watermark-opacity: 0.17; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --clu-watermark-opacity: 0.17; } }
.fc-madewith { display: flex; align-items: center; justify-content: flex-end; gap: var(--clu-space-8); border-top: var(--clu-hairline); margin-top: var(--clu-space-16); padding-top: 10px; font-family: var(--clu-font-mono); font-weight: 500; font-size: 10px; letter-spacing: 0.04em; color: var(--clu-brand-primary); }
.fc-madewith::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--clu-accent-saffron); flex-shrink: 0; }
.plus-note { margin: var(--clu-space-8) 0 0; }

/* -- numbers set in mono inside sentences (one helper: cluNumify) -- */
.num { font-family: var(--clu-font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }

/* -- reduced motion: nothing moves -- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
/* fidelity:begin */
/* ---- fidelity pass (docs/design/fidelity-log.md) ---- */

/* shell: a full-width header bar, a content column, a full-width footer band */
.shell { max-width: none; padding: 0; }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: clamp(24px, 8.33vw, 120px); box-sizing: content-box; }
.wrap.narrow { max-width: 1200px; }
.topbar { position: static; padding: 0; background: transparent; }
.app-header { height: 64px; background: var(--clu-surface-card); border-bottom: var(--clu-hairline); display: block; }
.app-header-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: var(--clu-space-16); }
.rail { padding: var(--clu-space-24) 0 0; margin-bottom: var(--clu-space-32); border-bottom: none; }
main.wrap { padding-bottom: var(--clu-space-64); }
.usage-chip { border: none; background: var(--clu-surface-soft); color: var(--clu-text-muted); }
.avatar { width: auto; min-width: 36px; height: 36px; padding: 0 var(--clu-space-8); border-radius: var(--clu-radius-pill); background: var(--clu-surface-soft); color: var(--clu-brand-primary); font-size: 12px; letter-spacing: 0.04em; }
.avatar:hover { background: var(--clu-surface-soft); box-shadow: none; outline: 1.5px solid var(--clu-brand-primary); outline-offset: -1.5px; }
.theme-toggle-float { right: clamp(24px, 8.33vw, 120px); }
.page-footer { margin-top: 0; padding: var(--clu-space-32) 0; border-top: var(--clu-hairline); background: var(--clu-surface-page); }
.page-footer-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--clu-space-32); }
.footer-retention { max-width: 760px; margin: 0; font-size: 12px; line-height: 18px; color: var(--clu-text-muted); }
.page-footer-row { margin: 0; flex-shrink: 0; }
.page-footer-row p { margin: 0; font-family: var(--clu-font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--clu-text-muted); }
.shell.no-footer .page-footer { display: none; }
.shell.screen-active .footer-retention { display: none; }
.shell.screen-active .page-footer-inner { justify-content: flex-end; }

/* screen headings: eyebrow, H1 (left-aligned, text-primary), lede */
.eyebrow { font-family: var(--clu-font-mono); font-size: 11px; line-height: 16px; letter-spacing: var(--clu-eyebrow-track); text-transform: uppercase; color: var(--clu-text-muted); margin: 0 0 var(--clu-space-12); }
.screen-h1 { font-size: 40px; line-height: 46px; letter-spacing: -0.02em; font-weight: 600; color: var(--clu-text-primary); margin: 0 0 var(--clu-space-16); text-align: left; }
.screen-lede { font-size: var(--clu-body-size); line-height: 24px; color: var(--clu-text-muted); margin: 0 0 var(--clu-space-24); max-width: 980px; }

/* 01 Add data: the dropzone */
.dropzone { border: 1.5px dashed var(--clu-brand-primary); border-radius: var(--clu-radius-lg); padding: var(--clu-space-64) var(--clu-space-24) var(--clu-space-48); background: transparent; }
.dropzone.dragover { background: var(--clu-surface-soft); }
.dropzone-title { font-size: var(--clu-body-size); font-weight: 600; margin-bottom: var(--clu-space-8); color: var(--clu-text-primary); }
.dropzone-meta { font-size: 13px; color: var(--clu-text-muted); margin-bottom: var(--clu-space-24); }
.dropzone-hint { font-size: 12px; color: var(--clu-text-muted); margin-top: var(--clu-space-12); }

/* 01b File received */
.file-card { border: 1.5px solid var(--clu-brand-primary); padding: var(--clu-space-16) var(--clu-space-24); flex-wrap: nowrap; }
.file-type-badge { width: 40px; height: 40px; border-radius: var(--clu-radius-md); background: var(--clu-surface-soft); color: var(--clu-text-muted); display: inline-flex; align-items: center; justify-content: center; font-family: var(--clu-font-mono); font-size: 10px; letter-spacing: 0.04em; flex-shrink: 0; }
.file-card-name { font-size: 16px; font-weight: 600; }
.file-card-meta { font-family: var(--clu-font-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--clu-text-muted); margin-top: 4px; }
/* A policy number ("within 2 days") is not a value from the data: plain, like the footer sentence it repeats (CLU_DESIGN.md, 27 Oct). */
.file-card-meta .policy-text { font-family: var(--clu-font-sans); letter-spacing: normal; }
.file-card .file-replace-link { color: var(--clu-brand-primary); text-decoration: none; }
.soft-note { display: flex; align-items: center; gap: var(--clu-space-12); background: var(--clu-surface-soft); border-radius: var(--clu-radius-md); padding: var(--clu-space-12) var(--clu-space-16); color: var(--clu-text-primary); font-size: var(--clu-ui-label-size); margin: var(--clu-space-12) 0 var(--clu-space-24); }
.soft-note::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--clu-brand-primary); flex-shrink: 0; }
.step-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--clu-space-16); margin-top: var(--clu-space-24); }
.step-actions .btn-secondary, .step-actions .btn { margin: 0; }

/* screen-h1 is 36px in the frames; the footer text is 12px (needs the specificity to beat `.page-footer p`) */
.screen-h1 { font-size: 36px; line-height: 42px; }
.page-footer .footer-retention { font-size: 12px; line-height: 18px; margin: 0; }
.page-footer .page-footer-row p { font-size: 11px; line-height: 16px; }

/* 02a Reading + 04 Analyze: an eyebrow, the orb and a title, an explainer, stages in a soft well */
.reading-card, .analyze-card { padding: var(--clu-space-24) var(--clu-space-24) var(--clu-space-32); border-radius: var(--clu-radius-lg); margin-top: var(--clu-space-24); }
.reading-card .eyebrow, .analyze-card .eyebrow, .understand-card .eyebrow { margin-bottom: var(--clu-space-24); }
.reading-title { font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -0.005em; margin: 0; color: var(--clu-text-primary); }
.reading-file { font-family: var(--clu-font-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--clu-text-muted); margin-top: 4px; }
.reading-lede { color: var(--clu-text-muted); font-size: 15px; line-height: 24px; margin: var(--clu-space-24) 0 var(--clu-space-16); max-width: 940px; }
.reading-foot { color: var(--clu-text-muted); font-size: 13px; margin: var(--clu-space-16) 0 0; }
.orb-row { gap: var(--clu-space-16); }
.stage-list.well { background: var(--clu-surface-page); border-radius: var(--clu-radius-lg); padding: var(--clu-space-4) var(--clu-space-16); margin: 0; }
.stage-list li { gap: var(--clu-space-12); padding: 14px 0; }
.stage-list .stage-dot { width: 8px; height: 8px; border: none; background: var(--clu-border-hairline); }
.stage-list li.done .stage-dot { background: var(--clu-brand-primary); }
.stage-list li.running .stage-dot { background: var(--clu-state-running); }
.stage-list .stage-label { font-size: 14px; font-weight: 500; color: var(--clu-text-muted); white-space: nowrap; }
.stage-list li.running .stage-label, .stage-list li.done .stage-label { color: var(--clu-text-primary); }
.stage-list li.done .stage-label { color: var(--clu-text-muted); }
.stage-list .stage-detail { font-family: var(--clu-font-mono); font-size: 11px; letter-spacing: 0.01em; color: var(--clu-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.stage-list .stage-state { margin-left: auto; padding-left: var(--clu-space-12); font-family: var(--clu-font-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--clu-text-muted); flex-shrink: 0; }
.stage-list li.running .stage-state { color: var(--clu-state-running); }
.run-status { text-align: left; padding: var(--clu-space-8) 0 var(--clu-space-16); }
.run-bar { height: 6px; border-radius: var(--clu-radius-pill); background: var(--clu-surface-soft); overflow: hidden; }
.run-bar > span { display: block; height: 100%; background: var(--clu-state-running); border-radius: var(--clu-radius-pill); transition: width var(--clu-motion); }
.run-step { display: flex; align-items: baseline; gap: var(--clu-space-12); margin-top: var(--clu-space-16); flex-wrap: wrap; }
.run-step-now { font-size: 14px; font-weight: 600; color: var(--clu-text-primary); }
.run-step-hint { font-size: 13px; color: var(--clu-text-muted); }

/* 02 Understand */
.understand-card { padding: var(--clu-space-24); }
.stat-row { display: flex; gap: var(--clu-space-48); flex-wrap: wrap; margin: 0 0 var(--clu-space-16); }
.stat-row .stat { display: block; }
.stat-number { display: block; font-size: 28px; line-height: 34px; font-weight: 500; letter-spacing: -0.01em; color: var(--clu-text-primary); }
.stat-label { display: block; font-family: var(--clu-font-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--clu-text-muted); margin-top: 2px; }
.date-line { color: var(--clu-text-muted); font-size: 15px; margin: 0 0 var(--clu-space-24); }
.date-line .num, .understand-card .date-line .num { font-family: inherit; font-weight: inherit; }
.understand-card table { width: 100%; }
.understand-card th { font-family: var(--clu-font-mono); font-size: 10px; letter-spacing: var(--clu-eyebrow-track); text-transform: uppercase; color: var(--clu-text-muted); font-weight: 500; }
.understand-card td .badge { background: var(--clu-surface-soft); border: none; color: var(--clu-brand-primary); font-family: var(--clu-font-mono); font-size: 10px; letter-spacing: 0.04em; padding: 3px 9px; border-radius: var(--clu-radius-pill); }
.understand-card td .badge.badge-neutral, .understand-card td .badge.badge-amber { color: var(--clu-text-muted); }
.understand-card .null-high { color: var(--clu-text-muted); }
.understand-card details > summary { list-style: none; cursor: pointer; color: var(--clu-brand-primary); font-weight: 500; font-size: 14px; padding: var(--clu-space-16) 0 var(--clu-space-8); }
.understand-card details > summary::-webkit-details-marker { display: none; }
.understand-card details > summary::before { content: "\25B8"; font-size: 10px; margin-right: 8px; }
.understand-card details[open] > summary::before { content: "\25BE"; }
.empty-note { color: var(--clu-text-muted); font-size: 14px; line-height: 22px; margin: var(--clu-space-8) 0 var(--clu-space-24); }
.date-only-warning { margin: var(--clu-space-12) 0; }
.date-only-warning .date-only-alt { margin: var(--clu-space-8) 0 0; }
.date-only-warning .date-only-alt .btn { margin-left: var(--clu-space-8); min-height: 44px; }

/* First-run and the profile editor (docs/design/frames/first-run*) */
.firstrun-card { max-width: 466px; padding: 40px; border-radius: var(--clu-radius-lg); }
.firstrun-card h1 { font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.01em; color: var(--clu-text-primary); margin: var(--clu-space-24) 0 var(--clu-space-8); }
.firstrun-card .auth-sub { font-size: 14px; line-height: 21px; margin: 0 0 var(--clu-space-32); }
.field-label { display: block; font-size: 14px; font-weight: 500; color: var(--clu-text-primary); margin: 0 0 var(--clu-space-12); }
.chip-group { display: flex; flex-wrap: wrap; gap: var(--clu-space-8); margin-bottom: var(--clu-space-8); }
.role-chip, .age-chip { background: var(--clu-surface-card); color: var(--clu-text-primary); border: var(--clu-hairline); border-radius: var(--clu-radius-md); padding: 8px 14px; font-size: 14px; font-weight: 500; cursor: pointer; }
.role-chip[aria-checked="true"], .age-chip[aria-checked="true"] { background: var(--clu-surface-soft); border: 1.5px solid var(--clu-brand-primary); color: var(--clu-brand-primary); padding: 7.5px 13.5px; }
.role-chip:hover, .age-chip:hover { background: var(--clu-surface-soft); }
.firstrun-card .field-label + .chip-group + .field-error + .field-label, .profile-edit .field-label + .chip-group + .field-error + .field-label { margin-top: var(--clu-space-16); }
/* feat/age-and-diagnoses: "Your age" (frames first-run-age / first-run-under18): the same chips as the role, a helper line
   under them, or - for Under 18 - a coral-dot notice in its place */
/* first-run on a phone (frames first-run-under18.mobile / 244:3517): no card, a 24px heading, no subtitle or helper, a full-width button */
@media (max-width: 640px) {
  .auth-wrap:has(.firstrun-card) { padding: var(--clu-space-24) 0 var(--clu-space-32); }
  .firstrun-card { border: none; background: transparent; padding: 0 4px; }
  .firstrun-card h1 { font-size: 24px; line-height: 30px; margin-top: var(--clu-space-16); }
  .firstrun-card .auth-sub, .firstrun-card .field-help, .firstrun-card .cta-note { display: none; }
  .firstrun-card h1 { margin-bottom: var(--clu-space-24); }
  .firstrun-card .cta-row .btn { width: 100%; }
}
.age-slot { margin: 0 0 var(--clu-space-24); }
.age-help { font-size: 12px; line-height: 18px; color: var(--clu-text-muted); margin: var(--clu-space-8) 0 0; }
.age-notice { display: flex; align-items: flex-start; gap: var(--clu-space-8); margin: var(--clu-space-8) 0 0; font-size: 13px; line-height: 19px; color: var(--clu-text-primary); }
.age-notice .field-error-dot { margin-top: 7px; }
.age-notice .auth-link { font-size: inherit; padding: 0; margin: 0 0 0 4px; }
.age-chip:disabled { cursor: default; }
.age-chip:disabled:hover { background: var(--clu-surface-card); }
.age-chip[aria-checked="true"]:disabled:hover { background: var(--clu-surface-soft); }
.saved-note { margin: var(--clu-space-16) 0 0; font-size: 13px; line-height: 19px; color: var(--clu-text-muted); }
body.viewing-saved .wrap:has(> #rail) { display: none; }
.copy-mobile { display: none; }
@media (max-width: 640px) { .copy-desktop { display: none; } .copy-mobile { display: inline; } }
.phone-field { position: relative; display: flex; align-items: stretch; border: var(--clu-hairline); border-radius: var(--clu-radius-md); background: var(--clu-surface-card); height: 44px; }
.phone-field:focus-within { outline: 2px solid var(--clu-border-focus); outline-offset: 2px; }
.phone-field.has-error { border: 1.5px solid var(--clu-accent-coral); }
.phone-prefix { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; border-right: var(--clu-hairline); padding: 0 var(--clu-space-12); color: var(--clu-text-primary); font-size: 14px; font-weight: 500; cursor: pointer; border-radius: var(--clu-radius-md) 0 0 var(--clu-radius-md); }
.phone-dial { font-family: var(--clu-font-sans); }
.phone-field input[type=tel] { flex: 1; min-width: 0; border: none; background: transparent; padding: 0 var(--clu-space-12); font-size: 15px; color: var(--clu-text-primary); outline: none; font-family: var(--clu-font-mono); }
.phone-field input[type=tel]::placeholder { font-family: var(--clu-font-sans); }
.country-list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; background: var(--clu-surface-raised); border: var(--clu-hairline); border-radius: var(--clu-radius-md); padding: var(--clu-space-8); }
.country-search { width: 100%; box-sizing: border-box; margin-bottom: var(--clu-space-8); font-size: 14px; }
.country-list ul { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; }
.country-list li { display: flex; gap: var(--clu-space-12); align-items: center; padding: 8px var(--clu-space-8); border-radius: var(--clu-radius-sm); cursor: pointer; font-size: 14px; }
.country-list li:hover, .country-list li[aria-selected="true"] { background: var(--clu-surface-soft); }
.country-list li .dial { margin-left: auto; color: var(--clu-text-muted); font-family: var(--clu-font-mono); font-size: 12px; }
.field-error { display: flex; align-items: flex-start; gap: var(--clu-space-8); min-height: 0; margin-top: var(--clu-space-8); font-size: 13px; line-height: 19px; color: var(--clu-coral-label); }
.field-error:empty { display: none; }
.field-error-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--clu-accent-coral); margin-top: 7px; flex: 0 0 auto; }
.field-error .auth-link { font-size: inherit; color: var(--clu-coral-label); padding: 0; margin: 0; }
.field-help { font-size: 12px; line-height: 18px; color: var(--clu-text-muted); margin: var(--clu-space-8) 0 var(--clu-space-24); }
.cta-row { display: flex; align-items: center; gap: var(--clu-space-16); flex-wrap: wrap; }
.cta-row .btn { width: auto; margin: 0; }
.cta-note { font-size: 13px; color: var(--clu-text-muted); }
.profile-edit { border-top: var(--clu-hairline); margin-top: var(--clu-space-24); padding-top: var(--clu-space-24); }
.profile-edit h2 { font-size: var(--clu-body-l-size); margin: 0 0 var(--clu-space-16); color: var(--clu-text-primary); }
/* ---- addendum: header states, sign in, signed out, profile, limit screens, Account, delete dialog ---- */
a.btn, a.btn-secondary { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* header: the counter chip is brand blue while there is room and coral at zero; the avatar opens a two-item menu */
.usage-chip { color: var(--clu-brand-primary); background: var(--clu-surface-soft); }
.usage-chip.is-zero { background: var(--clu-coral-tint); color: var(--clu-coral-text); }
.avatar-wrap { position: relative; display: inline-flex; }
.avatar-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 168px; z-index: 40; display: flex; flex-direction: column; background: var(--clu-surface-raised); border: var(--clu-hairline); border-radius: var(--clu-radius-md); padding: var(--clu-space-4); }
.avatar-menu button { text-align: left; background: none; border: none; padding: 10px 12px; border-radius: var(--clu-radius-sm); font-size: 14px; font-weight: 500; color: var(--clu-text-primary); cursor: pointer; }
.avatar-menu button:hover, .avatar-menu button:focus-visible { background: var(--clu-surface-soft); }
.clu-wordmark { text-decoration: none; }

/* sign in / link sent / signed out: a compact centred card, useclu.com under it, no footer band */
.auth-wrap.centered { flex-direction: column; align-items: center; padding-top: clamp(40px, 17.8vh, 134px); }
.auth-card.compact { max-width: 366px; padding: 34px; }
.auth-card.compact.wide { max-width: 433px; }
.auth-card h1 { color: var(--clu-text-primary); }
.auth-card.compact h1 { font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -0.01em; margin: var(--clu-space-24) 0 var(--clu-space-12); }
.auth-card.compact h1.after-pill { margin-top: 20px; }
.auth-card.compact .auth-sub { font-size: 15px; line-height: 21px; margin: 0 0 var(--clu-space-24); }
.btn-google { background: var(--clu-surface-card); color: var(--clu-text-primary); border: var(--clu-hairline); gap: 10px; font-weight: 500; }
.btn-google:hover { background: var(--clu-surface-soft); }
.auth-divider { font-family: var(--clu-font-mono); font-size: 10px; letter-spacing: var(--clu-eyebrow-track); text-transform: uppercase; }
.auth-terms { border-top: var(--clu-hairline); margin-top: var(--clu-space-24); padding-top: var(--clu-space-16); }
.auth-terms p { margin: 0; font-size: 12px; line-height: 18px; color: var(--clu-text-muted); }
.auth-terms a { color: var(--clu-text-muted); text-decoration: underline; text-underline-offset: 2px; }
.auth-site { font-family: var(--clu-font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--clu-text-muted); margin: var(--clu-space-48) 0 0; text-align: center; }
.status-pill { display: inline-block; margin-top: var(--clu-space-24); font-family: var(--clu-font-mono); font-size: 10px; letter-spacing: var(--clu-eyebrow-track); text-transform: uppercase; background: var(--clu-surface-soft); color: var(--clu-brand-primary); padding: 5px 10px; border-radius: var(--clu-radius-pill); }
.resend-note:empty { display: none; }
.coral-box { border: 1px solid var(--clu-accent-coral); background: var(--clu-coral-tint); border-radius: var(--clu-radius-md); padding: 12px 14px; margin: 0 0 var(--clu-space-24); }
.coral-box p { margin: 0; font-size: 13px; line-height: 19px; color: var(--clu-text-primary); }
.coral-box p.coral-box-eyebrow { font-family: var(--clu-font-mono); font-size: 10px; letter-spacing: var(--clu-eyebrow-track); text-transform: uppercase; color: var(--clu-coral-text); margin-bottom: 2px; }
.auth-card .btn.btn-auto, .auth-card .btn-secondary.btn-auto, .btn-auto { width: auto; }
.center-card { max-width: 600px; text-align: center; padding: 40px; }
.center-card h1 { font-size: 26px; line-height: 32px; font-weight: 600; letter-spacing: -0.01em; margin: var(--clu-space-24) 0 var(--clu-space-12); }
.center-card .auth-sub { max-width: 440px; margin: 0 auto var(--clu-space-24); font-size: 15px; line-height: 22px; }
.center-card .btn { margin-top: 0; }
.saffron-dot { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--clu-accent-saffron); margin: 0 auto; }
.flag { width: 20px; height: 15px; border-radius: 2px; display: block; object-fit: cover; outline: 1px solid var(--clu-border-hairline); outline-offset: -1px; }
.phone-flag { display: inline-flex; }
.country-list li .flag { flex: 0 0 auto; }
.field-error { color: var(--clu-coral-text); }
.field-error .auth-link { color: var(--clu-coral-text); }

/* limit screens */
.limit-card { max-width: 600px; text-align: center; padding: 40px 40px 28px; }
.status-chip { display: inline-block; font-family: var(--clu-font-mono); font-size: 10px; letter-spacing: var(--clu-eyebrow-track); text-transform: uppercase; padding: 5px 12px; border-radius: var(--clu-radius-pill); background: var(--clu-surface-soft); color: var(--clu-brand-primary); }
.status-chip.is-coral { background: var(--clu-coral-tint); color: var(--clu-coral-text); }
.limit-card h1 { font-size: 26px; line-height: 32px; font-weight: 600; letter-spacing: -0.01em; margin: 20px 0 var(--clu-space-12); }
.limit-card .auth-sub { max-width: 500px; margin: 0 auto var(--clu-space-24); font-size: 15px; line-height: 22px; }
.limit-actions { display: flex; gap: var(--clu-space-12); justify-content: center; flex-wrap: wrap; }
.limit-card .limit-actions .btn, .limit-card .limit-actions .btn-secondary { margin: 0; width: auto; }
.limit-card .plus-note:empty { display: none; }
.limit-def { font-size: 13px; line-height: 19px; color: var(--clu-text-muted); margin: var(--clu-space-16) auto 0; max-width: 480px; }
.limit-rule { border: none; border-top: var(--clu-hairline); margin: var(--clu-space-24) 0 var(--clu-space-16); }
.limit-foot { font-size: 13px; line-height: 19px; color: var(--clu-text-muted); margin: 0 auto; max-width: 480px; }

/* Account: four cards */
.acct-page { max-width: 720px; padding: 40px 0 0; }
.acct-title { font-size: 34px; line-height: 40px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 var(--clu-space-24); color: var(--clu-text-primary); }
.acct-card { background: var(--clu-surface-card); border: var(--clu-hairline); border-radius: var(--clu-radius-lg); padding: 28px 30px; margin-bottom: 20px; }
.acct-card h2 { font-size: 18px; line-height: 24px; font-weight: 600; margin: 0 0 var(--clu-space-8); color: var(--clu-text-primary); }
.acct-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; align-items: center; gap: var(--clu-space-16); padding: 20px 0; border-bottom: var(--clu-hairline); min-height: 44px; }
.acct-row.is-editing { align-items: start; grid-template-columns: 200px minmax(0, 1fr); }
.acct-label { color: var(--clu-text-muted); font-size: 14px; }
.acct-value { font-size: 15px; color: var(--clu-text-primary); overflow-wrap: anywhere; }
.acct-value .mono, .plan-usage.mono { font-family: var(--clu-font-mono); font-size: 14px; }
.acct-value .muted { color: var(--clu-text-muted); }
.acct-value .chip-group { margin-bottom: 0; }
.btn-sm { padding: 8px 16px; font-size: 14px; width: auto; margin: 0; }
.acct-card .btn, .acct-card .btn-secondary { width: auto; margin: 0; }
.acct-edit-actions { display: flex; gap: var(--clu-space-8); margin-top: var(--clu-space-16); }
.acct-edit-actions .btn, .acct-edit-actions .btn-secondary { padding: 8px 18px; font-size: 14px; }
.tz-select { width: 100%; max-width: 380px; }
.acct-help { font-size: 13px; line-height: 19px; color: var(--clu-text-muted); margin: var(--clu-space-16) 0 0; }
.acct-value .field-help { margin: var(--clu-space-8) 0 0; }
.plan-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--clu-space-16); margin: var(--clu-space-8) 0 var(--clu-space-16); }
.plan-name { font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -0.01em; color: var(--clu-text-primary); }
.plan-usage { margin: 6px 0 0; color: var(--clu-text-muted); letter-spacing: 0.02em; }
.acct-card .plan-progress { margin-bottom: var(--clu-space-16); }
.plan-def { font-size: 13px; line-height: 19px; color: var(--clu-text-muted); margin: 0; }
.waitlist-status:empty { display: none; }
.danger-card { border: 1.5px solid var(--clu-accent-coral); }
.danger-row { display: flex; justify-content: space-between; align-items: center; gap: var(--clu-space-24); margin-top: var(--clu-space-16); }
.danger-row h3 { font-size: 15px; line-height: 22px; font-weight: 600; margin: 0 0 6px; color: var(--clu-text-primary); }
.danger-row p { margin: 0; font-size: 13px; line-height: 19px; color: var(--clu-text-muted); max-width: 470px; }
.btn-danger { background: transparent; color: var(--clu-coral-text); border: 1.5px solid var(--clu-accent-coral); flex-shrink: 0; }
.btn-danger:hover { background: var(--clu-coral-tint); }
@media (max-width: 640px) { .acct-row, .acct-row.is-editing { grid-template-columns: 1fr; gap: 6px; } .danger-row, .plan-head { flex-direction: column; align-items: flex-start; } }

/* delete dialog: neutral scrim, a soft well, a solid coral confirm */
.scrim { background: color-mix(in srgb, black 34%, transparent); }
.dialog-delete { max-width: 433px; padding: 30px; }
.dialog-delete h2 { font-size: 22px; line-height: 28px; font-weight: 600; margin: 0 0 var(--clu-space-12); }
.dialog-lede { color: var(--clu-text-muted); font-size: 15px; line-height: 22px; margin: 0 0 20px; }
.dialog-well { background: var(--clu-surface-page); border-radius: var(--clu-radius-md); padding: 12px 14px; margin-bottom: 20px; }
.dialog-well p { margin: 0; font-size: 13px; line-height: 19px; color: var(--clu-text-primary); }
.dialog-well p.well-eyebrow { font-family: var(--clu-font-mono); font-size: 10px; letter-spacing: var(--clu-eyebrow-track); text-transform: uppercase; color: var(--clu-brand-primary); margin-bottom: 2px; }
.dialog-delete .field-label { margin: 0 0 var(--clu-space-8); font-size: 13px; }
.dialog-delete input { width: 100%; font-family: var(--clu-font-mono); }
.dialog-delete .btn-row { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.dialog-delete .btn-row .btn, .dialog-delete .btn-row .btn-secondary { width: auto; margin: 0; }
.btn-danger-solid { background: var(--clu-accent-coral); color: var(--clu-text-on-danger); border: 1px solid var(--clu-accent-coral); font-weight: 600; }
.btn-danger-solid:hover:not(:disabled) { background: var(--clu-accent-coral); filter: brightness(0.95); }
/* addendum tuning after the first comparison */
.btn-google { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.status-pill { display: block; width: fit-content; }
.auth-card .btn-secondary, .acct-card .btn-secondary, .limit-actions .btn-secondary, .dialog-delete .btn-secondary { border: var(--clu-hairline); color: var(--clu-text-primary); font-weight: 500; background: var(--clu-surface-card); }
.auth-card .btn-secondary:hover, .acct-card .btn-secondary:hover, .limit-actions .btn-secondary:hover, .dialog-delete .btn-secondary:hover { background: var(--clu-surface-soft); }
.auth-card.compact { padding: 32px 34px 30px; }
.auth-card.compact h1 { margin: 20px 0 10px; }
.auth-card.compact .auth-sub { margin-bottom: 20px; }
.auth-card.compact .btn, .auth-card.compact .btn-secondary { margin-top: 12px; }
.auth-card.compact label { margin-top: 14px; }
.auth-card.compact .auth-divider { margin-top: 14px; }
.auth-terms { margin-top: 20px; padding-top: 14px; }
.auth-terms p { font-size: 11px; }
.auth-site { margin-top: 44px; }
.center-card { padding: 34px 40px 30px; }
.center-card h1 { font-size: 24px; line-height: 30px; margin: 20px 0 8px; }
.center-card .auth-sub { font-size: 14px; line-height: 21px; margin-bottom: 20px; }
.dialog-delete h2, .dialog h2 { color: var(--clu-text-primary); }
.btn-danger-solid:disabled { background: var(--clu-coral-tint); color: var(--clu-coral-text); border: 1px solid transparent; opacity: 0.8; }
.cta-row .btn:disabled { background: var(--clu-brand-primary); color: var(--clu-text-on-primary); border-color: var(--clu-brand-primary); opacity: 0.4; }
/* ---- consent (docs/design/CLU_HANDOFF.md v1.7 §5): a 20px/radius-5 box, whole row is the hit target (>=44px) ---- */
label.consent-row { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 6px 0; cursor: pointer; font-size: 14px; line-height: 20px; color: var(--clu-text-primary); }
.consent-row input[type=checkbox] { width: 20px; height: 20px; margin: 1px 0 0; border-radius: 5px; accent-color: var(--clu-brand-primary); flex-shrink: 0; cursor: pointer; }
.consent-row a { color: var(--clu-brand-primary); text-decoration: underline; text-underline-offset: 2px; }
/* unticked: no fill, hairline border, text-disabled, and the Google mark at 40% - never a real `disabled` attribute,
   so the button stays in tab order and a screen reader still says why (aria-disabled) */
[data-consent-gated].is-consent-disabled { background: transparent; color: var(--clu-text-disabled); border-color: var(--clu-border-hairline); }
[data-consent-gated].is-consent-disabled:hover { background: transparent; }
.btn-google.is-consent-disabled svg { opacity: 0.4; }
.status-pill.is-coral { background: var(--clu-coral-tint); color: var(--clu-coral-text); }
/* fidelity:end */
/* ---- GA4 Phase 0, Stage 1: Connect Google Analytics (tabs, connect screens, day chips, pull progress, source card) ---- */
.ga4-tabs { display: flex; flex-wrap: wrap; gap: var(--clu-space-8); margin: 0 0 var(--clu-space-24); border-bottom: var(--clu-hairline); }
.ga4-tab { display: inline-flex; align-items: center; gap: var(--clu-space-8); min-height: 44px; padding: 0 var(--clu-space-16); margin-bottom: -1px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--clu-text-muted); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.ga4-tab:hover { color: var(--clu-text-primary); }
.ga4-tab[aria-selected="true"] { color: var(--clu-brand-primary); border-bottom-color: var(--clu-brand-primary); }
.ga4-pill { font-family: var(--clu-font-mono); font-size: 10px; line-height: 14px; letter-spacing: var(--clu-eyebrow-track); text-transform: uppercase; padding: 2px var(--clu-space-8); border: var(--clu-hairline); border-radius: var(--clu-radius-pill); color: var(--clu-text-muted); }
.ga4-fake-badge { display: inline-block; margin: 0 0 var(--clu-space-16); padding: var(--clu-space-4) var(--clu-space-8); font-family: var(--clu-font-mono); font-size: 11px; line-height: 16px; letter-spacing: var(--clu-eyebrow-track); border: 1px dashed var(--clu-accent-coral); border-radius: var(--clu-radius-sm); background: var(--clu-coral-tint); color: var(--clu-text-primary); }
.ga4-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--clu-space-24); align-items: start; }
.ga4-grid > .card { margin-bottom: 0; }
.ga4-h2 { font-size: var(--clu-h3-size); line-height: var(--clu-h3-line); letter-spacing: var(--clu-h3-track); font-weight: var(--clu-h3-weight); color: var(--clu-text-primary); margin: 0 0 var(--clu-space-12); } /* the h3 design token (24px / 30px, CLU_DESIGN.md), at every width: the token has no smaller phone size */
.ga4-h3 { font-size: 18px; line-height: 28px; letter-spacing: 0; font-weight: 600; color: var(--clu-text-primary); margin: 0 0 var(--clu-space-12); }
.ga4-intro { color: var(--clu-text-muted); margin: 0 0 var(--clu-space-24); max-width: var(--clu-measure); }
.ga4-field { margin: 0 0 var(--clu-space-16); }
.ga4-field input[type=text], .ga4-dates input[type=date] { width: 100%; min-height: 44px; box-sizing: border-box; font-family: var(--clu-font-mono); font-size: 15px; }
.ga4-dates input[type=date] { background: var(--clu-surface-card); color: var(--clu-text-primary); border: var(--clu-hairline); border-radius: var(--clu-radius-md); padding: var(--clu-space-8) var(--clu-space-12); }
.ga4-field input.has-error { border: 1.5px solid var(--clu-accent-coral); }
.ga4-field .field-help { margin: var(--clu-space-8) 0 0; }
.ga4-screen .btn, .ga4-screen .btn-secondary { min-height: 44px; }
.ga4-note { font-size: 13px; line-height: 19px; color: var(--clu-text-muted); margin: var(--clu-space-12) 0 0; max-width: var(--clu-measure); }
.ga4-side { background: var(--clu-surface-soft); border-radius: var(--clu-radius-lg); padding: var(--clu-space-24); }
.ga4-side ol { margin: 0 0 var(--clu-space-16); padding-left: var(--clu-space-24); }
.ga4-side li { margin: 0 0 var(--clu-space-12); color: var(--clu-text-primary); }
.ga4-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--clu-brand-primary); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; background: none; border: none; padding: 0; font-size: inherit; cursor: pointer; }
.ga4-alert { margin: 0 0 var(--clu-space-24); }
.ga4-alert-title { display: flex; align-items: center; gap: var(--clu-space-8); font-weight: 600; margin: 0 0 var(--clu-space-8); color: var(--clu-text-primary); }
.ga4-alert-title .field-error-dot { margin-top: 0; }
.ga4-alert p { margin: 0 0 var(--clu-space-12); }
.ga4-address { display: flex; flex-wrap: wrap; align-items: center; gap: var(--clu-space-12); margin: 0 0 var(--clu-space-12); }
.ga4-address code { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; padding: var(--clu-space-12); border: var(--clu-hairline); border-radius: var(--clu-radius-md); background: var(--clu-surface-card); font-size: 13px; line-height: 20px; }
.ga4-connected { display: flex; align-items: center; gap: var(--clu-space-8); font-weight: 600; margin: 0 0 var(--clu-space-8); }
.ga4-check { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid var(--clu-brand-primary); color: var(--clu-brand-primary); }
.ga4-neutral .ga4-connected { margin: 0; align-items: flex-start; font-weight: 400; }
.ga4-neutral .ga4-check { flex: none; margin-top: 2px; }
.ga4-id { font-family: var(--clu-font-mono); font-size: 15px; overflow-wrap: anywhere; margin: 0 0 var(--clu-space-8); }
.ga4-divider { border: none; border-top: var(--clu-hairline); margin: var(--clu-space-24) 0; }
.ga4-chip { min-height: 44px; }
.ga4-chip[aria-pressed="true"] { background: var(--clu-surface-soft); border: 1.5px solid var(--clu-brand-primary); color: var(--clu-brand-primary); padding: 7.5px 13.5px; }
.ga4-chip:disabled { color: var(--clu-text-disabled); cursor: not-allowed; }
.ga4-chip:disabled:hover { background: var(--clu-surface-card); }
.ga4-dates { display: flex; flex-wrap: wrap; gap: var(--clu-space-16); margin: var(--clu-space-16) 0 0; }
.ga4-dates > div { flex: 1 1 160px; }
.ga4-progress { max-width: none; margin: 0 0 var(--clu-space-24); }
.ga4-progress .progress-bar-fill { animation: none; transition: width var(--clu-motion); }
.ga4-steps { list-style: none; margin: 0 0 var(--clu-space-24); padding: 0; }
.ga4-steps li { display: flex; align-items: center; gap: var(--clu-space-12); min-height: 32px; color: var(--clu-text-muted); }
.ga4-steps li[data-state="done"] { color: var(--clu-text-primary); }
.ga4-steps li[data-state="current"] { color: var(--clu-text-primary); font-weight: 500; }
.ga4-step-mark { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--clu-border-hairline); box-sizing: border-box; }
.ga4-steps li[data-state="done"] .ga4-step-mark { background: var(--clu-brand-primary); border-color: var(--clu-brand-primary); }
.ga4-steps li[data-state="current"] .ga4-step-mark { border-color: var(--clu-state-running); background: var(--clu-state-running); }
.ga4-source { border: 1.5px solid var(--clu-brand-primary); }
.ga4-source .eyebrow { margin-bottom: var(--clu-space-8); }
.ga4-source-title { font-weight: 600; margin: 0 0 var(--clu-space-4); }
.ga4-source-id { font-family: var(--clu-font-mono); font-size: 14px; overflow-wrap: anywhere; margin: 0 0 var(--clu-space-4); }
.ga4-source-range { white-space: nowrap; } /* "22 to 28 Jan 2021" never breaks across lines */
.ga4-sample-note { margin: 0 0 var(--clu-space-16); }
.ga4-eyebrow-id { text-transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ga4-privacy { font-size: var(--clu-ui-label-size); line-height: var(--clu-ui-label-line); color: var(--clu-text-muted); margin: var(--clu-space-24) 0 0; }
/* the Connect screens carry their own privacy line; the upload footer is left as it is and simply not shown beside it */
.shell:has(#step-1:not(.hidden) .ga4-screen) .footer-retention { display: none; }
@media (max-width: 760px) {
  .ga4-grid { grid-template-columns: 1fr; }
  .ga4-h3 { font-size: 17px; line-height: 26px; }
  .ga4-main .cta-row .btn, .ga4-card .cta-row .btn { width: 100%; }
}
/* Plus checkout (P4): Figma 451:258 checkout, 451:326 pending, 451:376 success, 451:437 failed; the 3-day banner is 461:503. Tokens only. */
.pay-card { max-width: 720px; text-align: center; padding: 44px 48px 40px; }
.pay-card h1 { font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -0.01em; margin: 18px 0 var(--clu-space-12); }
.pay-card .auth-sub { max-width: 560px; margin: 0 auto var(--clu-space-24); font-size: 16px; line-height: 25px; }
.pay-field { text-align: left; margin: 0 0 var(--clu-space-16); }
.pay-field label { display: block; font-size: 14px; font-weight: 500; margin-bottom: var(--clu-space-8); color: var(--clu-text-primary); }
.pay-field .tz-select { max-width: none; }
.pay-help, .pay-fine { font-size: 13px; line-height: 19px; color: var(--clu-text-muted); }
.pay-help { margin: var(--clu-space-8) 0 0; }
.pay-fine { margin: var(--clu-space-16) auto 0; max-width: 560px; }
.pay-fine:empty { display: none; }
.pay-fine a { color: inherit; text-decoration: underline; }
.pay-summary { text-align: left; margin: 0 0 var(--clu-space-24); }
.pay-row { display: flex; justify-content: space-between; gap: var(--clu-space-16); padding: 12px 0; font-size: 14px; border-top: var(--clu-hairline); }
.pay-row:first-child { border-top: none; }
.pay-row > span:first-child { color: var(--clu-text-muted); }
.pay-row > span:last-child { text-align: right; color: var(--clu-text-primary); overflow-wrap: anywhere; }
.pay-status { display: inline-flex; align-items: center; gap: 10px; background: var(--clu-surface-page); padding: 12px 16px; border-radius: var(--clu-radius-md); margin: 0 0 var(--clu-space-24); font-size: 14px; max-width: 100%; overflow-wrap: anywhere; }
.pay-dot { color: var(--clu-state-running); flex: 0 0 auto; }
.pay-card .inline-error { text-align: left; margin: 0 0 var(--clu-space-16); }
.pay-card .limit-actions .btn, .pay-card .limit-actions .btn-secondary { margin: 0; width: auto; padding: 14px 22px; min-height: 44px; }  /* Figma: 14px / 22px padding; 44px tap target */
.plus-ends-banner { display: flex; align-items: center; gap: var(--clu-space-12); background: var(--clu-surface-card); border: var(--clu-hairline); border-radius: var(--clu-radius-md); padding: 12px 12px 12px 20px; margin: 0 0 var(--clu-space-24); }
.plus-ends-banner p { flex: 1 1 auto; margin: 0; font-size: 15px; line-height: 22px; color: var(--clu-text-primary); }
.plus-ends-banner .btn-secondary { flex: 0 0 auto; margin: 0; width: auto; }
@media (max-width: 640px) {
  .pay-card { padding: 32px 20px 28px; }
  .pay-card h1 { font-size: 26px; line-height: 32px; }
  .pay-card .limit-actions { flex-direction: column; }
  .pay-card .limit-actions .btn, .pay-card .limit-actions .btn-secondary { width: 100%; }
  .plus-ends-banner { flex-wrap: wrap; padding: 16px; }
  .plus-ends-banner .btn-secondary { width: 100%; }
}
/* Receipt (/receipt/{no}): the legal-page look on the app's tokens. A sandbox payment is watermarked. Print: light only, A4, none of the app's chrome. */
.receipt-sheet { position: relative; overflow: hidden; text-align: left; }
.receipt-sheet h1 { margin-top: var(--clu-space-8); }
.receipt-from { margin: 0; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--clu-text-muted); }
.receipt-note { margin: 0 0 var(--clu-space-24); font-size: 14px; line-height: 22px; color: var(--clu-text-muted); }
.receipt-sheet .pay-summary { margin-bottom: var(--clu-space-16); }
.receipt-test { margin: 0 0 var(--clu-space-16); font-size: 14px; font-weight: 700; color: var(--clu-coral-text); }
.receipt-watermark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 24px; transform: rotate(-24deg); font-size: 44px; line-height: 52px; font-weight: 700; letter-spacing: 0.04em; color: var(--clu-text-muted); opacity: 0.16; pointer-events: none; user-select: none; }
.receipt-sheet .receipt-actions { justify-content: flex-start; }
@media print {
  @page { size: A4; margin: 0; }  /* margin 0 is what stops Chrome printing its own date, title and address; the spacing is the sheet's padding below */
  :root:root:root { color-scheme: light; }
  html, body { background: Canvas !important; color: CanvasText !important; }
  .theme-toggle-float, .topbar, .page-footer, .rail, .receipt-actions { display: none !important; }
  .shell, #main, .auth-wrap { display: block !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; background: none !important; }
  .receipt-sheet { max-width: none; margin: 0; padding: 16mm !important; border: none !important; box-shadow: none !important; background: Canvas !important; color: CanvasText !important; }
  .receipt-sheet *, .receipt-sheet h1 { color: CanvasText !important; }
  .receipt-sheet .pay-row { border-top: 1px solid GrayText !important; }
  .receipt-watermark { color: GrayText !important; opacity: 0.25; }
}
/* ==== clu-app-v2:end ==== */