/* The grammar is unusable without its contract, so it carries it: `--md-*` (the macro-lab theme sheet every
 * other consumer imports for itself — `HorrorView`, `CellIdentityPage`, `MacroDashboardLab`, …) and `--pf-*` /
 * `--md-prov-*` (the platform's own). Without the first, every `var(--md-chart-*)` in an SVG is an invalid
 * value: strokes vanish and fills fall back to black — measured on the first capture of the fixture page,
 * where the whole `why` chart rendered as five black dots. CSS imports are idempotent, so a shell that also
 * imports them pays nothing. Reported to Lane 0: `PlatformPage.tsx` should import the theme sheet too. */
/*
 * Macro Dashboard Lab — design-system token contract (--md-*).
 *
 * THE DESIGN RULING roster (2026-07-06): exactly three candidate themes —
 * glass-cleaned / warm / hybrid — expressed entirely as overrides of this
 * contract, keyed by [data-md-theme="<id>"] on the .md-root wrapper. Light is
 * the base; .dark on the same wrapper supplies dark overrides. The retired
 * bake-off skins (glass, signal, intel, report) and clone chrome (immersive,
 * creative) were removed with the roster reduction; `analytics` is retained
 * because production surfaces (CellDataLakeSection, CellIdentityPage) mount it
 * directly — it is NOT a ruling candidate.
 *
 * Primitives consume ONLY these tokens (via var(--md-*) or the helper classes
 * .md-panel / .md-title / .md-metric). They never reach for app glass classes.
 */

.md-root {
  /* ---- canonical contract: defaults (analytics-light family) ---- */
  --md-bg: #f4f5f7;
  --md-surface: #ffffff;
  --md-surface-2: #f7f8fa;
  --md-surface-3: #eef0f3;
  --md-border: #e3e6eb;
  --md-border-strong: #cbd1da;
  --md-text: #0f172a;
  --md-text-secondary: #475569;
  --md-text-muted: #94a3b8;
  --md-accent: #2563eb;
  --md-accent-2: #7c3aed;
  --md-accent-soft: rgba(37, 99, 235, 0.1);
  --md-accent-text: #2563eb;
  --md-positive: #059669;
  --md-negative: #e11d48;
  --md-warning: #d97706;
  --md-neutral: #64748b;
  --md-radius: 16px;
  --md-radius-sm: 10px;
  --md-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.05);
  --md-blur: 0px;
  --md-grid: transparent;
  --md-chart-brand: #2563eb;
  --md-chart-competitive: #f59e0b;
  --md-chart-industry: #0ea5e9;
  --md-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --md-font-display: var(--md-font-sans);
  /* Editorial headline face. Defaults to the display face so every existing
   * theme is pixel-identical; a theme that needs serif titles WITH sans
   * numerics (fresh) overrides this independently of --md-font-display. */
  --md-font-serif: var(--md-font-display);
  --md-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* Signature gradient for CTA/orb/progress fills. Defaults to the accent
   * pair every theme already carries. */
  --md-accent-gradient: linear-gradient(95deg, var(--md-accent), var(--md-accent-2));

  background: var(--md-bg);
  color: var(--md-text);
  font-family: var(--md-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ------------------------------------------------------- glass-cleaned
 * Candidate 1: the existing glass system, CLEANED. Same materiality
 * (translucent white surfaces, backdrop blur, neon-purple accents), with the
 * drifted numbers pulled back to one value each:
 *   · radius     18/12px  -> 12/8px       ONE radius scale for the whole skin
 *   · blur       28px     -> 20px         the canonical .glass blur (index.css)
 *   · borders    ad-hoc 0.10/0.16 -> the real stroke system: --glass-stroke
 *                0.12 + --glass-stroke-emphasis 0.22 (light); 0.10/0.20 (dark)
 *   · shadow     bespoke 0 8px 32px -> --shadow-soft, the app's one soft
 *                elevation (0 4px 24px + 0 1px 4px); dark keeps its single
 *                0 8px 40px black veil
 *   · surfaces   verbatim --glass-surface ladder (0.80 / sunken 0.04 /
 *                elevated 0.95 light; 0.05 / 0.03 / 0.08 dark) — no new stops
 *   · type       one scale: Inter for display, body, and metrics alike
 */
.md-root[data-md-theme="glass-cleaned"] {
  --md-bg: hsl(220 20% 97%);
  --md-surface: rgba(255, 255, 255, 0.8);
  --md-surface-2: rgba(20, 20, 30, 0.04);
  --md-surface-3: rgba(255, 255, 255, 0.95);
  --md-border: rgba(20, 20, 30, 0.12);
  --md-border-strong: rgba(20, 20, 30, 0.22);
  --md-text: hsl(220 15% 10%);
  --md-text-secondary: hsl(220 12% 32%);
  --md-text-muted: hsl(220 10% 48%);
  --md-accent: hsl(265 70% 52%);
  --md-accent-2: hsl(330 70% 52%);
  --md-accent-soft: hsl(265 70% 52% / 0.12);
  --md-accent-text: hsl(265 70% 52%);
  --md-positive: hsl(152 60% 38%);
  --md-negative: hsl(0 84% 55%);
  --md-warning: hsl(38 92% 48%);
  --md-radius: 12px;
  --md-radius-sm: 8px;
  --md-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
  --md-blur: 20px;
  --md-chart-brand: #8b5cf6;
  --md-chart-competitive: #f59e0b;
  --md-chart-industry: #06b6d4;
}
.md-root[data-md-theme="glass-cleaned"].dark {
  --md-bg: #000000;
  --md-surface: rgba(255, 255, 255, 0.05);
  --md-surface-2: rgba(255, 255, 255, 0.03);
  --md-surface-3: rgba(255, 255, 255, 0.08);
  --md-border: rgba(255, 255, 255, 0.1);
  --md-border-strong: rgba(255, 255, 255, 0.2);
  --md-text: hsl(210 40% 98%);
  --md-text-secondary: rgba(255, 255, 255, 0.66);
  --md-text-muted: rgba(255, 255, 255, 0.45);
  --md-accent: hsl(265 89% 66%);
  --md-accent-2: hsl(330 85% 66%);
  --md-accent-soft: hsl(265 89% 66% / 0.18);
  --md-accent-text: hsl(265 89% 78%);
  --md-positive: hsl(152 76% 45%);
  --md-negative: hsl(0 84% 62%);
  --md-warning: #fbbf24;
  --md-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

/* ---------------------------------------------------------------- warm
 * Candidate 2: the Culturas --cx- system mapped VERBATIM onto the contract.
 * Light = the stone reading canvas (.culturas-canvas-stone): stone paper
 * ladder (#f2f0ec -> lift -> lift-2 -> stone-well), ink ladder text, bronze
 * gold accents, plum as the second hue, basin/event/memory for pos/neg/warn,
 * the soft neumorphic stone shadow, DM Serif Display titles over Be Vietnam
 * Pro body. Dark = the warm-noir canvas (.culturas-zone): #1a1418 ladder,
 * warm-paper ink, bright -tx hue variants, the cx-elev-card shadow. */
.md-root[data-md-theme="warm"] {
  --md-bg: #f2f0ec;             /* --cx-bg (stone) */
  --md-surface: #efede7;        /* --cx-lift */
  --md-surface-2: #eae7df;      /* --cx-lift-2 */
  --md-surface-3: #e4e0d6;      /* --cx-stone-well */
  --md-border: rgba(30, 28, 24, 0.1);         /* --cx-line */
  --md-border-strong: rgba(30, 28, 24, 0.16); /* --cx-line-2 */
  --md-text: #1e1c18;                          /* --cx-ink */
  --md-text-secondary: rgba(30, 28, 24, 0.64); /* --cx-ink-70 */
  --md-text-muted: rgba(30, 28, 24, 0.42);     /* --cx-ink-48 */
  --md-accent: #9a7b2f;                        /* --cx-gold (stone) */
  --md-accent-2: #6e5588;                      /* --cx-title (plum) */
  --md-accent-soft: rgba(154, 123, 47, 0.12);
  --md-accent-text: #8a7240;                   /* --cx-gold-tx (stone) */
  --md-positive: #4f7a48;                      /* --cx-basin-tx (stone) */
  --md-negative: #a6413a;                      /* --cx-event-tx (stone) */
  --md-warning: #bc7a5e;                       /* --cx-memory-tx (stone) */
  --md-neutral: rgba(30, 28, 24, 0.42);
  --md-radius: 12px;
  --md-radius-sm: 8px;
  --md-shadow: 3px 3px 8px rgba(110, 86, 32, 0.13), -3px -3px 7px rgba(255, 253, 247, 0.9); /* --cx-neu-soft */
  --md-blur: 0px;
  --md-chart-brand: #9a7b2f;      /* gold */
  --md-chart-competitive: #3d6e96; /* --cx-corpus */
  --md-chart-industry: #4f7a48;    /* basin */
  --md-font-sans: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --md-font-display: "DM Serif Display", Georgia, "Times New Roman", serif; /* --culturas-serif */
}
.md-root[data-md-theme="warm"].dark {
  --md-bg: #1a1418;             /* --cx-bg (noir) */
  --md-surface: #241b1e;        /* --cx-lift */
  --md-surface-2: #140f12;      /* --cx-bg-deep (sunken) */
  --md-surface-3: #2a2024;      /* --cx-lift-2 */
  --md-border: rgba(232, 224, 210, 0.09);        /* --cx-line (noir) */
  --md-border-strong: rgba(232, 224, 210, 0.14); /* --cx-line-2 */
  --md-text: #e8e0d2;                             /* --cx-ink (warm paper) */
  --md-text-secondary: rgba(232, 224, 210, 0.7);  /* --cx-ink-70 */
  --md-text-muted: rgba(232, 224, 210, 0.48);     /* --cx-ink-48 */
  --md-accent: #b8983f;                           /* --cx-gold (noir) */
  --md-accent-2: #a98fb6;                         /* --cx-title-tx */
  --md-accent-soft: rgba(184, 152, 63, 0.18);
  --md-accent-text: #d9c383;                      /* --cx-gold-tx */
  --md-positive: #7ba873;                         /* --cx-basin-tx */
  --md-negative: #d08178;                         /* --cx-event-tx */
  --md-warning: #d5bba2;                          /* --cx-memory-tx */
  --md-neutral: rgba(232, 224, 210, 0.48);
  --md-shadow: inset 0 1px 0 rgba(232, 224, 210, 0.06), 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px -16px rgba(0, 0, 0, 0.6); /* --cx-elev-card */
  --md-chart-brand: #b8983f;
  --md-chart-competitive: #6e9cc4; /* --cx-corpus-tx */
  --md-chart-industry: #7ba873;
}

/* -------------------------------------------------------------- hybrid
 * Candidate 3: glass's materiality carrying warm's palette + typography.
 * Light is grounded in the light-first brand shell
 * (.culturas-zone.culturas-canvas-stone in index.css), which already defines
 * glass surfaces over the stone canvas: translucent white cards (0.72 /
 * elevated 0.92) + warm hairlines (hsl 30 10% 10% strokes) on #f2f0ec, with the
 * cleaned 20px blur, 12/8 radii, and --shadow-soft elevation from candidate 1.
 * Text/accents/charts are warm's ink + bronze/plum; titles are DM Serif
 * Display. Dark = glass's white-alpha card ladder rebuilt from warm ink
 * (rgba(232,224,210,·)) over the noir-deep canvas. */
.md-root[data-md-theme="hybrid"] {
  --md-bg: #f2f0ec;                       /* warm stone canvas */
  --md-surface: rgba(255, 255, 255, 0.72);  /* brand-shell --glass-surface */
  --md-surface-2: rgba(28, 26, 23, 0.04);   /* brand-shell --glass-surface-sunken */
  --md-surface-3: rgba(255, 255, 255, 0.92); /* brand-shell --glass-surface-elevated */
  --md-border: rgba(28, 26, 23, 0.12);       /* brand-shell --glass-stroke */
  --md-border-strong: rgba(28, 26, 23, 0.22); /* brand-shell --glass-stroke-emphasis */
  --md-text: #1e1c18;                          /* --cx-ink (stone) */
  --md-text-secondary: rgba(30, 28, 24, 0.64);
  --md-text-muted: rgba(30, 28, 24, 0.42);
  --md-accent: #9a7b2f;                        /* --cx-gold (stone) */
  --md-accent-2: #6e5588;                      /* --cx-title (plum) */
  --md-accent-soft: rgba(154, 123, 47, 0.12);
  --md-accent-text: #8a7240;
  --md-positive: #4f7a48;
  --md-negative: #a6413a;
  --md-warning: #bc7a5e;
  --md-neutral: rgba(30, 28, 24, 0.42);
  --md-radius: 12px;
  --md-radius-sm: 8px;
  --md-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04); /* --shadow-soft */
  --md-blur: 20px;                             /* glass materiality */
  --md-chart-brand: #9a7b2f;
  --md-chart-competitive: #3d6e96;
  --md-chart-industry: #4f7a48;
  --md-font-sans: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --md-font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
}
.md-root[data-md-theme="hybrid"].dark {
  --md-bg: #140f12;                            /* --cx-bg-deep */
  --md-surface: rgba(232, 224, 210, 0.05);     /* glass card ladder in warm ink */
  --md-surface-2: rgba(232, 224, 210, 0.03);
  --md-surface-3: rgba(232, 224, 210, 0.08);
  --md-border: rgba(232, 224, 210, 0.1);
  --md-border-strong: rgba(232, 224, 210, 0.2);
  --md-text: #e8e0d2;
  --md-text-secondary: rgba(232, 224, 210, 0.7);
  --md-text-muted: rgba(232, 224, 210, 0.48);
  --md-accent: #b8983f;
  --md-accent-2: #a98fb6;
  --md-accent-soft: rgba(184, 152, 63, 0.18);
  --md-accent-text: #d9c383;
  --md-positive: #7ba873;
  --md-negative: #d08178;
  --md-warning: #d5bba2;
  --md-neutral: rgba(232, 224, 210, 0.48);
  --md-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  --md-chart-brand: #b8983f;
  --md-chart-competitive: #6e9cc4;
  --md-chart-industry: #7ba873;
}

/* ------------------------------------------------------ signal-bureau
 * Candidate 4: SIGNAL BUREAU — the Culture Atlas terminal-editorial language
 * extracted from .sb-root (src/pages/atlas-test/signalBureau.css). Flat panels
 * on a near-black void, hairline borders, luminous lime/cyan/magenta accents,
 * hard 2px radii, JetBrains Mono metrics, Space-Grotesk / Newsreader display.
 *
 * SB is natively DARK — .dark below carries the .sb-root palette VERBATIM (void
 * ground, lime/cyan/magenta neon, ink ladder, 2px radius, mono/serif type). The
 * light base is a faithful daylight translation of the same language (paper
 * ground, dark ink, the SAME accent hues pulled to legible-on-white variants)
 * so the light-first contract and the light/dark sub-toggle never break. The
 * app-global "Space Grotesk"/"Newsreader"/"JetBrains Mono" faces (app-fonts.css,
 * imported in main.tsx) are the SAME woff2 as SB's namespaced SB-* faces, so we
 * reference the global family names here (macro-lab lives outside .sb-root). */
.md-root[data-md-theme="signal-bureau"] {
  /* daylight translation of the SB language */
  --md-bg: #eceee8;                            /* paper of the SB "ink" #f2f4f0 */
  --md-surface: #f5f6f1;
  --md-surface-2: #e4e6df;
  --md-surface-3: #fbfcf8;
  --md-border: #cfd2c8;                         /* hairline (SB --hair on paper) */
  --md-border-strong: #b4b8ab;                 /* SB --hair-2 on paper */
  --md-text: #16181c;                          /* SB --void as ink */
  --md-text-secondary: #4c525c;                /* SB --ink-dim */
  --md-text-muted: #6a717b;                    /* SB --ink-mute, darkened for paper */
  --md-accent: #5f8a00;                        /* SB --lime, legible on white */
  --md-accent-2: #0090ad;                      /* SB --cyan, legible on white */
  --md-accent-soft: rgba(95, 138, 0, 0.12);
  --md-accent-text: #52780a;
  --md-positive: #5f8a00;                       /* lime = up/positive */
  --md-negative: #d11f56;                       /* SB --magenta, darkened */
  --md-warning: #b87400;                        /* SB --amber, darkened */
  --md-neutral: #6a717b;
  --md-radius: 3px;                             /* SB --rad 2px, +1 for macro cards */
  --md-radius-sm: 2px;
  --md-shadow: 0 1px 0 rgba(22, 24, 28, 0.04), 0 1px 3px rgba(22, 24, 28, 0.08);
  --md-blur: 0px;                               /* SB panels are flat, no blur */
  --md-grid: transparent;
  --md-chart-brand: #5f8a00;                    /* lime */
  --md-chart-competitive: #d11f56;              /* magenta */
  --md-chart-industry: #0090ad;                 /* cyan */
  --md-font-sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --md-font-display: "Newsreader", Georgia, "Times New Roman", serif; /* SB --serif */
  --md-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* SB --mono */
}
.md-root[data-md-theme="signal-bureau"].dark {
  /* .sb-root palette, verbatim */
  --md-bg: #07080b;                            /* --void */
  --md-surface: #0e1014;                       /* --panel */
  --md-surface-2: #050609;                     /* --well (sunken) */
  --md-surface-3: #111318;                     /* --panel-2 (elevated) */
  --md-border: #1c1f26;                        /* --hair */
  --md-border-strong: #23272f;                 /* --hair-2 */
  --md-text: #f2f4f0;                          /* --ink */
  --md-text-secondary: #7a828c;               /* --ink-mute */
  --md-text-muted: #4c525c;                    /* --ink-dim */
  --md-accent: #c6ff3a;                        /* --lime */
  --md-accent-2: #22e0ff;                      /* --cyan */
  --md-accent-soft: rgba(198, 255, 58, 0.14);
  --md-accent-text: #c6ff3a;
  --md-positive: #c6ff3a;                       /* lime = up */
  --md-negative: #ff2e6e;                       /* --magenta */
  --md-warning: #ffb020;                        /* --amber */
  --md-neutral: #4a5058;                        /* --slate */
  --md-shadow: 0 0 0 1px rgba(28, 31, 38, 0.6), 0 8px 30px -18px rgba(0, 0, 0, 0.9);
  --md-chart-brand: #c6ff3a;                    /* lime */
  --md-chart-competitive: #ff2e6e;              /* magenta */
  --md-chart-industry: #22e0ff;                 /* cyan */
}

/* ----------------------------------------------------------------- fresh
 * THE CUSTOMER DRESS (owner-ruled 2026-07-11 — see DECISIONS_REGISTER; Signal
 * Bureau remains the operator instrument's dress). The /macro walkthrough's
 * "fresh" language mapped 1:1 from its :root tokens onto the contract:
 * cool-neutral canvas #F1F2F4, pure-white FLAT cards (no blur), ink ladder
 * #0D1117/#59616E/#9AA1AD, pink #ED3E7B primary signal with the pink→orange
 * hero gradient, soft two-layer ink shadows, generous 22/16 radii, system
 * SF Pro faces with Iowan Old Style EDITORIAL SERIF titles over SANS numerics
 * (the one theme where --md-font-serif ≠ --md-font-display). Light-only:
 * the language is light-first by design (registry supportsDark=false). */
.md-root[data-md-theme="fresh"] {
  --md-bg: #f1f2f4;
  --md-surface: #ffffff;
  --md-surface-2: #f1f2f4;
  --md-surface-3: #e9eaee;
  --md-border: #e8eaef;
  --md-border-strong: #d9dce3;
  --md-text: #0d1117;
  --md-text-secondary: #59616e;
  --md-text-muted: #9aa1ad;
  --md-accent: #ed3e7b;
  --md-accent-2: #ff7a3d;
  --md-accent-soft: rgba(237, 62, 123, 0.1);
  --md-accent-text: #ed3e7b;
  --md-positive: #149a5c;
  --md-negative: #de4444;
  --md-warning: #b25b1e; /* orange ink darkened for on-tint AA (walkthrough .measuring) */
  --md-neutral: #9aa1ad;
  --md-radius: 22px;
  --md-radius-sm: 16px;
  --md-shadow: 0 1px 2px rgba(13, 17, 23, 0.04), 0 14px 34px rgba(13, 17, 23, 0.06);
  --md-blur: 0px;
  --md-grid: transparent;
  --md-chart-brand: #ed3e7b;       /* pink — the brand signal */
  --md-chart-competitive: #3e7bfa; /* blue — competitor chips */
  --md-chart-industry: #12a5a0;    /* teal — field/practice rows */
  --md-font-sans: -apple-system, "SF Pro Text", "Segoe UI Variable Text", "Inter", system-ui, sans-serif;
  --md-font-display: -apple-system, "SF Pro Display", "Segoe UI Variable Display", "Inter", system-ui, sans-serif;
  --md-font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --md-font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --md-accent-gradient: linear-gradient(96deg, #ff4e8e, #ff7a3d);
}

/* ----------------------------------------------------------- analytics
 * RETAINED, non-roster: production surfaces (CellDataLakeSection,
 * CellIdentityPage) mount theme="analytics" directly. Not a ruling candidate. */
.md-root[data-md-theme="analytics"] {
  /* base defaults already match analytics-light */
}
.md-root[data-md-theme="analytics"].dark {
  --md-bg: #0b0f17;
  --md-surface: #121826;
  --md-surface-2: #0f1420;
  --md-surface-3: #1a2233;
  --md-border: #222b3d;
  --md-border-strong: #33405a;
  --md-text: #e6ebf3;
  --md-text-secondary: #9aa6ba;
  --md-text-muted: #6b7588;
  --md-accent: #3b82f6;
  --md-accent-2: #2563eb;
  --md-accent-soft: rgba(59, 130, 246, 0.18);
  --md-accent-text: #7dabff;
  --md-positive: #10b981;
  --md-negative: #f43f5e;
  --md-warning: #fbbf24;
  --md-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* An insight card sits on the same elevation tier as the panels around it: the raised surface and the
 * app's one soft shadow (--md-shadow), where it used to be a flat grey tint (--md-surface-2) with no
 * shadow — which read as a different, flatter object beside the white panels (owner 2026-10-07: "the design
 * system feels a bit flat"; "a lot of inconsistency"). Only existing tokens; no new look. */
.md-insight-card {
  border: 1px solid var(--md-border);
  background-color: var(--md-surface-3);
  box-shadow: var(--md-shadow);
}

/* ============================================================= helpers */

/* A ranked row that IS the navigation (RankBarRow.href) — the chart-before-table
 * default lets a ranking REPLACE a duplicate card grid rather than sit beside
 * one, so the row needs the hover/focus affordance the card used to carry.
 * Negative margins keep the hit area generous without shifting the bar rhythm. */
.md-root .rank-bar-link {
  padding: 4px 8px;
  margin: -4px -8px;
  border-radius: var(--md-radius-sm);
  transition: background-color 140ms ease;
}
.md-root .rank-bar-link:hover {
  background-color: var(--md-surface-2);
}
.md-root .rank-bar-link:focus-visible {
  outline: 2px solid var(--md-accent);
  outline-offset: 1px;
}

.md-panel {
  background: var(--md-surface);
  border: 1px solid var(--md-border);
  border-radius: var(--md-radius);
  box-shadow: var(--md-shadow);
  -webkit-backdrop-filter: blur(var(--md-blur));
  backdrop-filter: blur(var(--md-blur));
}

.md-title {
  font-family: var(--md-font-display);
  color: var(--md-text);
}
.md-root[data-md-title="serif"] .md-title {
  font-family: var(--md-font-serif);
  letter-spacing: -0.005em;
  font-weight: 700;
}
.md-root[data-md-title="plain"] .md-title {
  letter-spacing: -0.015em;
  font-weight: 700;
}
.md-root[data-md-title="gradient"] .md-title {
  background-image: var(--md-accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.md-metric {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  color: var(--md-text);
}
.md-root[data-md-metric="mono"] .md-metric {
  font-family: var(--md-font-mono);
  letter-spacing: -0.01em;
}

/* Serif candidates lead with serif oversized numerals in adaptive callouts. */
.md-root[data-md-title="serif"] .md-title {
  font-feature-settings: "lnum" 1;
}

/* Paper themes get a faint plotting-grid canvas behind the surface. */
.md-root[data-md-surface="paper"] {
  background-image:
    linear-gradient(var(--md-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--md-grid) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
}

/* ============================================ Pattern 2 (decision briefing)
 * A strict type ramp for the decision-first IA: one display-size hero number,
 * a high-contrast verdict line (never the gradient title, which hurt legibility),
 * and a single eyebrow caption. All on the --md-* contract so every skin inherits.
 */
.md-briefing-display {
  font-family: var(--md-font-display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.92;
  color: var(--md-text);
}
.md-root[data-md-metric="mono"] .md-briefing-display {
  font-family: var(--md-font-mono);
  letter-spacing: -0.02em;
}
.md-briefing-verdict {
  font-family: var(--md-font-display);
  font-weight: 600;
  letter-spacing: -0.011em;
  color: var(--md-text);
}
.md-root[data-md-title="serif"] .md-briefing-verdict {
  font-family: var(--md-font-serif);
  font-weight: 550;
}
.md-briefing-eyebrow {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--md-text-muted);
}

/* ============================================ Overview-grade dimension tables (briefing IA) */
.md-dim-table-wrap {
  min-width: 0;
  container-type: inline-size;
  container-name: dim-table;
}
.md-dim-table-scroll {
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pinch-zoom;
  scrollbar-gutter: stable;
  margin: 0 -1rem;
  padding: 0 1rem;
}
.md-dim-table {
  width: 100%;
  min-width: 52rem;
  border-collapse: collapse;
  font-size: 13px;
}
.md-dim-table__caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* A header carries the column's scope ("Engagement rate · last 12 months, every platform"): it wraps inside a
 * bounded width, so a long one never pushes its column and values off the card (One Product round 2). */
.md-dim-table__th {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--md-border);
  white-space: normal;
  overflow-wrap: break-word;
  max-width: 14rem;
  vertical-align: bottom;
}
.md-dim-table__th--left {
  text-align: left;
}
.md-dim-table__th--right,
.md-dim-table__th:not(.md-dim-table__th--left) {
  text-align: right;
}
.md-dim-table__sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--md-text-muted);
  cursor: pointer;
}
.md-dim-table__sort[data-active="true"] {
  color: var(--md-text);
}
.md-dim-table__sort-dir {
  font-family: var(--md-font-mono);
  font-size: 10px;
}
.md-dim-table__row {
  border-bottom: 1px solid var(--md-border);
  transition: background 0.12s ease;
}
.md-dim-table__row[data-clickable="true"] {
  cursor: pointer;
}
.md-dim-table__row[data-clickable="true"]:hover {
  background: var(--md-surface-2);
}
.md-dim-table__row[data-lift-tier="high"] {
  background: color-mix(in srgb, var(--md-positive) 6%, transparent);
}
.md-dim-table__row[data-lift-tier="mid"] {
  background: color-mix(in srgb, var(--md-accent) 4%, transparent);
}
.md-dim-table__row[data-lift-tier="low"] {
  background: color-mix(in srgb, var(--md-negative) 5%, transparent);
}
.md-dim-table__name {
  position: relative;
  padding: 0.75rem;
  min-width: 10rem;
  max-width: 14rem;
  text-align: left;
}
.md-dim-table__bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  max-width: 100%;
  background: color-mix(in srgb, var(--md-accent) 18%, transparent);
  pointer-events: none;
  border-radius: 0 4px 4px 0;
}
.md-dim-table__name-text {
  position: relative;
  display: block;
  font-weight: 600;
  color: var(--md-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.md-dim-table__sub {
  position: relative;
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  color: var(--md-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.md-dim-table__quality {
  position: relative;
  display: inline-block;
  margin-left: 0.5rem;
  padding: 1px 6px;
  border-radius: 999px;
  font-family: var(--md-font-mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: color-mix(in srgb, var(--md-positive) 20%, transparent);
  color: var(--md-positive);
}
.md-dim-table__num {
  padding: 0.75rem;
  text-align: right;
  font-family: var(--md-font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.md-dim-table__muted {
  color: var(--md-text-secondary);
}
.md-dim-table__lift {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.md-dim-table__lift[data-tier="high"] {
  background: color-mix(in srgb, var(--md-positive) 18%, transparent);
  color: var(--md-positive);
}
.md-dim-table__lift[data-tier="mid"] {
  background: color-mix(in srgb, var(--md-accent) 18%, transparent);
  color: var(--md-accent-text);
}
.md-dim-table__lift[data-tier="low"] {
  background: color-mix(in srgb, var(--md-negative) 18%, transparent);
  color: var(--md-negative);
}
.md-dim-table__ws {
  display: inline-flex;
  min-width: 2rem;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--md-border);
  font-weight: 600;
}
.md-dim-table__ws[data-strong="true"] {
  border-color: color-mix(in srgb, var(--md-positive) 40%, transparent);
  background: color-mix(in srgb, var(--md-positive) 12%, transparent);
  color: var(--md-positive);
}
.md-dim-table__action {
  display: inline-flex;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.md-dim-table__action[data-action="scale"] {
  background: color-mix(in srgb, var(--md-positive) 18%, transparent);
  color: var(--md-positive);
}
.md-dim-table__action[data-action="test"] {
  background: color-mix(in srgb, #3b82f6 18%, transparent);
  color: #2563eb;
}
.md-dim-table__action[data-action="explore"] {
  background: color-mix(in srgb, #8b5cf6 18%, transparent);
  color: #7c3aed;
}
.md-dim-table__action[data-action="maintain"],
.md-dim-table__action[data-action="stable"] {
  background: var(--md-surface-3);
  color: var(--md-text-secondary);
}
.md-dim-table__action[data-action="reduce"] {
  background: color-mix(in srgb, var(--md-negative) 18%, transparent);
  color: var(--md-negative);
}
.md-dim-table__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--md-border);
}
.md-dim-table__count {
  font-size: 12px;
  color: var(--md-text-muted);
}
.md-dim-table__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--md-accent-text);
  cursor: pointer;
}
.md-dim-table__more [data-flip="true"] {
  transform: rotate(180deg);
}

/* ================================================= /macro app chrome (fresh)
 * The new customer product's shell devices. Scoped under .md-macro-* (and the
 * fresh theme where the rule is a theme decision) so no other surface shifts. */

/* ---------------------------------------------------------------- the shell
 * TWO LAYOUTS FROM ONE TREE. Desktop: a sticky 216px rail beside the room.
 * Below --md-macro-bp (860px): the rail becomes an off-canvas drawer behind a
 * hamburger and the room takes the full width. /macro is the customer door —
 * a link opened on a phone has to reflow, not scroll sideways.
 * These rules live in CSS (not inline styles on MacroShell) *because* a media
 * query cannot reach an inline style. */
.md-macro-shell {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  min-height: 100vh;
}
.md-macro-rail {
  background: var(--md-surface);
  border-right: 1px solid var(--md-border);
  padding: 22px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 0;
  height: 100vh;
  /* short viewports: the rail scrolls, Ask Copilot never clips */
  overflow-y: auto;
}
.md-macro-railhead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 12px 18px;
}
/* The top bar and the two drawer-dismiss controls only exist below the
 * breakpoint — on desktop the rail is always visible, so they are noise. */
.md-macro-topbar,
.md-macro-railclose,
.md-macro-scrim {
  display: none;
}
.md-macro-gate {
  padding: 28px 24px;
}

@media (max-width: 860px) {
  .md-macro-shell {
    grid-template-columns: minmax(0, 1fr);
  }
  .md-macro-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 40;
    padding: 8px 12px;
    background: var(--md-surface);
    border-bottom: 1px solid var(--md-border);
  }
  .md-macro-burger,
  .md-macro-railclose {
    display: inline-grid;
    place-items: center;
    /* 44px — the touch-target floor, not the icon's optical size */
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border: 1px solid var(--md-border);
    border-radius: 12px;
    background: var(--md-surface);
    color: var(--md-text);
    cursor: pointer;
  }
  .md-macro-topbar-mark {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .md-macro-topbar-mark span {
    font-family: var(--md-font-display);
    font-weight: 800;
    letter-spacing: 0.2em;
    font-size: 13px;
  }
  .md-macro-topbar-mark em {
    font-style: normal;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.28em;
    color: var(--md-text-muted);
    margin-top: 2px;
  }
  .md-macro-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 50;
    border: 0;
    padding: 0;
    background: rgba(13, 17, 23, 0.45);
    cursor: pointer;
  }
  .md-macro-rail {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 60;
    width: min(280px, 84vw);
    height: 100dvh;
    border-right: 1px solid var(--md-border);
    box-shadow: 0 20px 60px rgba(13, 17, 23, 0.28);
    transform: translateX(-100%);
    /* `visibility` (not just transform) so a closed drawer is out of the tab
     * order — an off-screen but focusable rail traps keyboard users. */
    visibility: hidden;
    transition: transform 0.22s ease, visibility 0.22s;
  }
  .md-macro-rail.is-open {
    transform: none;
    visibility: visible;
  }
  .md-macro-railclose {
    width: 40px;
    height: 40px;
  }
  /* Touch sizing for the drawer's own links — 9px padding reads ~36px tall,
   * under the 44px floor. !important because railItem() is an inline style. */
  .md-macro-rail .md-macro-navlink,
  .md-macro-rail .md-macro-copilot {
    padding: 12px !important;
    min-height: 44px;
  }
  .md-macro-gate {
    padding: 18px 14px;
  }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .md-macro-rail {
    transition: none;
  }
}

/* Rail link hover (inline styles can't express :hover; !important beats the
 * inline base — active items keep their ink pill via aria-current). */
.md-macro-rail .md-macro-navlink:not([aria-current="page"]):hover {
  background: var(--md-surface-2) !important;
  color: var(--md-text) !important;
}
.md-macro-copilot:hover {
  filter: brightness(1.05);
}
.md-macro-navlink:focus-visible,
.md-macro-copilot:focus-visible {
  outline: 2px solid var(--md-accent);
  outline-offset: 2px;
}

/* Honest loading skeleton (the RoomStateGate's loading state). */
.md-macro-skel {
  background: linear-gradient(100deg, var(--md-surface) 40%, var(--md-surface-3) 50%, var(--md-surface) 60%);
  background-size: 200% 100%;
  animation: md-macro-shimmer 1.4s ease-in-out infinite;
  border: 1px solid var(--md-border);
}
@keyframes md-macro-shimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -80% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .md-macro-skel { animation: none; }
}

/* Fresh theme decision: ACTIVE scope pills are ink, not accent — this is the
 * approved walkthrough's own treatment (solid-ink active pill) and it fixes
 * the WCAG contrast failure of white-on-pink at 12px (3.8:1 → ~15:1). Other
 * themes keep their accent pills. */
.md-root[data-md-theme="fresh"] [role="tablist"] [role="tab"][aria-selected="true"] {
  background-color: var(--md-text) !important;
  color: var(--md-surface) !important;
}
/*
 * THE PLATFORM — semantic tokens (Lane 0 / Lane C).
 *
 * Scoped under `.md-root.platform` so `macro-themes.css` (worn by every real /macro room) is never edited.
 *
 * 1. Provenance: Northlight's one genuinely new idea — a data-honesty state mapped onto the theme's own
 *    tokens. Provenance is product honesty, so it is a token, not a component constant. apple-11
 *    (2026-09-22) narrowed this from "a distinct color per state" to "the one accent and the one positive
 *    for a grounded/chosen state, one neutral for everything else" — five saturated hues on one screen
 *    read as decoration, not honesty; see the block below.
 * 2. `--cx-*` aliases: the culturas primitives (DisplayHero · VerdictLine · MeaningChip · ConfidenceFill ·
 *    CellMaturity) read these names; aliasing them onto `--md-*` lets them render under any macro-lab theme
 *    without touching their source.
 */
.md-root.platform {
  /* apple-11: ONE accent (the tokens' purple, --md-accent) plus a single semantic pair for
   * positive/negative movement — every other hue collapses onto the accent or a neutral, here,
   * so a buyer never reads five saturated colors on one screen for states that are not five
   * different DECISIONS. Before this the five provenance states alone spanned purple (decision),
   * TWO different magentas (simulated, predicted — both aliased to --md-accent-2), and orange
   * (stale, --md-warning) beside --md-positive's green for `read` — a fifth hue arrived the
   * moment any `--cx-*` badge below (corpus/event/memory) rendered alongside a receipt dot,
   * measured 2026-09-22 against glass-cleaned's own --md-accent (hsl 265, purple), --md-accent-2
   * (hsl 330, magenta), --md-warning (hsl 38, orange) and --md-chart-industry (#06b6d4, cyan).
   * `read` stays --md-positive because it IS the positive half of the pair (a grounded, verified
   * figure); `decision` stays --md-accent because it IS the one accent (an active, chosen state).
   * `simulated` / `predicted` / `stale` are none of those — a hypothetical or aged figure is not a
   * decision and not a verified positive, so each now reads as a plain neutral (--md-text-muted)
   * rather than inventing a third and fourth "meaning" out of leftover theme hues. */
  --md-prov-read: var(--md-positive);
  --md-prov-decision: var(--md-accent);
  --md-prov-simulated: var(--md-text-muted);
  --md-prov-stale: var(--md-text-muted);
  --md-prov-predicted: var(--md-text-muted);

  /* culturas aliases → macro-lab */
  /* --cx-ink / --cx-wordmark (added 2026-09-19, THE PLATFORM TABS REBUILD lane P0): `.cx-figure` and
     `.cx-verdict em` (src/index.css:2022,2024) read these two directly and this block omitted both —
     the reason DisplayHero's hero numeral and VerdictLine's emphasized word have never rendered a
     platform color. `--cx-ink` mirrors `--cx-ink-85`'s alias (src/index.css's own `--cx-ink` is the
     un-alpha'd base every `--cx-ink-NN` derives from); `--cx-wordmark` mirrors `--cx-gold` (identical
     value to `--cx-gold` in index.css's light theme, a near-identical gold variant in dark). Verified
     against src/index.css's `:root`/`.dark` blocks 2026-09-19 — these were the only two `--cx-*`
     custom properties this alias block omitted. */
  --cx-ink: var(--md-text);
  --cx-wordmark: var(--md-accent);
  --cx-gold: var(--md-accent);
  --cx-gold-tx: var(--md-accent-text);
  /* apple-11 (continued): `--cx-basin` is BasinAtlas's own "measured" branch (primitives.tsx /
   * BasinAtlas.tsx: `n.measured ? cx-basin : cx-corpus`) — a grounded read, so it keeps the
   * positive half of the pair, same reasoning as `--md-prov-read` above. `--cx-corpus` was its
   * "not measured" branch and had been aliased to --md-chart-industry (cyan) — a fourth hue for a
   * state that is simply the ABSENCE of the positive one, so it is now the same neutral every
   * other non-accent, non-positive badge uses. `--cx-event` and `--cx-memory` were --md-warning
   * (orange) and --md-accent-2 (magenta) respectively — two more categorical badges, not
   * movement, not a decision — collapsed onto the same neutral. `--cx-title` stays the one accent
   * (a title IS the emphasized, chosen thing, same role as `decision` above). */
  --cx-basin: var(--md-positive);
  --cx-basin-tx: var(--md-positive);
  --cx-corpus: var(--md-text-muted);
  --cx-corpus-tx: var(--md-text-muted);
  --cx-event: var(--md-text-muted);
  --cx-event-tx: var(--md-text-muted);
  --cx-memory: var(--md-text-muted);
  --cx-memory-tx: var(--md-text-muted);
  --cx-title: var(--md-accent);
  --cx-title-tx: var(--md-accent-text);
  --cx-ink-85: var(--md-text);
  --cx-ink-70: var(--md-text-secondary);
  --cx-ink-62: var(--md-text-secondary);
  --cx-ink-55: var(--md-text-muted);
  --cx-ink-48: var(--md-text-muted);
  --cx-ink-42: var(--md-text-muted);
  --cx-lift: var(--md-surface);
  --cx-line: var(--md-border);
  --cx-line-soft: var(--md-border);
  --cx-elev-card: var(--md-shadow);

  /* apple-8/9: ONE primary-action fill and ONE disabled fill, so every `.pf-btn-accent` — the Create
   * layer's "Find creative ideas" / "Develop this idea", the composer send control — reads the same
   * intentional color whether it is actionable or not, instead of an accidental one. `--pf-primary`
   * is `--md-accent` at full strength (the saturation already used by the ENABLED send button in
   * 1440-answered.png, which measured ~6.6:1 white-on-fill — passes AA for 15px text). `--pf-primary-
   * disabled` is `--md-text-muted` (an existing, already-used token, never an invented hex) — close to
   * the mid-grey (~#6b7280) a legitimately-disabled primary action already read as in one capture.
   * Disabled controls carry no WCAG contrast minimum, so the muted token is a deliberate, legible grey
   * rather than a requirement to hit 4.5:1. */
  --pf-primary: var(--md-accent);
  --pf-primary-disabled: var(--md-text-muted);

  /* reading density */
  --pf-body: 16px;
  --pf-title: 20px;
  --pf-eyebrow: 12px;
  --pf-display: 32px;
  --pf-gap: 18px;
  --pf-reading-max: 820px;
  --pf-rail: 272px;
  --pf-rail-collapsed: 56px;
  --pf-layer: 440px;
  --pf-layer-wide: 640px;
  --pf-top: 56px;
}

/*
 * THE PLATFORM — the block grammar's layout sheet (Lane D).
 *
 * LAYOUT ONLY. Every colour and every type face comes from a token:
 * `--md-*` (macro-lab theme contract) · `--md-prov-*` + `--pf-*` (platform-tokens.css).
 * Zero hex, zero rgba, zero named colour in this file.
 *
 * Two local tokens are declared on `.pf-blocks` because the contract has no name for them yet
 * (both reported to Lane 0 as candidates for platform-tokens.css):
 *   · `--pf-serif`  — glass-cleaned does not differentiate `--md-font-serif` from `--md-font-display`
 *     (both resolve to Inter), and the v2 mock the owner approved (`src/pages/macro/platform.html`)
 *     sets its one display line in Playfair Display, already loaded globally by `src/index.css`.
 *   · `--pf-prov-predicted` — `platform-tokens.css` ships four `--md-prov-*` and the `Provenance`
 *     union has a fifth state, `predicted`; it is a modelled judgement, so it borrows the decision hue.
 */

.pf-blocks {
  --pf-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --pf-prov-predicted: var(--md-prov-decision);
  --pf-card-pad-y: 24px;
  --pf-card-pad-x: 26px;

  display: flex;
  flex-direction: column;
  gap: var(--pf-gap, 18px);
  width: 100%;
  max-width: var(--pf-reading-max, 820px);
  margin: 0 auto;
  font-family: var(--md-font-sans);
  font-size: var(--pf-body, 16px);
  line-height: 1.55;
  color: var(--md-text);
}

/* ─────────────────────────────────────────────────────────── the shell */

.pf-block {
  position: relative;
  background: var(--md-surface);
  border: 1px solid var(--md-border);
  border-radius: var(--md-radius);
  box-shadow: var(--md-shadow);
  padding: var(--pf-card-pad-y) var(--pf-card-pad-x);
  min-width: 0;
  -webkit-backdrop-filter: blur(var(--md-blur));
  backdrop-filter: blur(var(--md-blur));
}
.pf-block--quiet {
  box-shadow: none;
  background: var(--md-surface-3);
}
.pf-block--dashed {
  border-style: dashed;
  box-shadow: none;
  background: none;
}
.pf-block--miss {
  border-color: var(--md-border-strong);
  box-shadow: none;
}

.pf-block__example {
  position: absolute;
  top: 9px;
  right: 12px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--md-text-muted);
  opacity: 0.55;
  pointer-events: none;
}

/* ───────────────────────────────────────────────────────── the topline */

.pf-eyebrow {
  font-size: var(--pf-eyebrow, 12px);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--md-text-muted);
  margin: 0 0 10px;
}

.pf-topline {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
@media (min-width: 620px) {
  .pf-topline--split {
    flex-direction: row;
    align-items: flex-start;
    gap: 26px;
  }
  .pf-topline--split .pf-topline__say {
    flex: 1 1 auto;
    min-width: 0;
  }
  .pf-topline--split .pf-topline__fig {
    flex: 0 0 auto;
    max-width: 244px;
    border-left: 1px solid var(--md-border);
    padding-left: 24px;
  }
}

.pf-say {
  font-family: var(--pf-serif);
  font-weight: 600;
  font-size: clamp(21px, 2.3vw, 26px);
  line-height: 1.24;
  letter-spacing: -0.01em;
  color: var(--md-text);
  margin: 0;
  max-width: 34ch;
  text-wrap: pretty;
}
.pf-sowhat {
  font-size: var(--pf-body, 16px);
  line-height: 1.55;
  color: var(--md-text-secondary);
  margin: 12px 0 0;
  max-width: 66ch;
  text-wrap: pretty;
}

/* ────────────────────────────────────────────────────────── the figure */

.pf-fig {
  min-width: 0;
}
.pf-fig__value {
  display: flex;
  align-items: baseline;
  /* apple-19 (round-3) / vocabulary-runtime (round-5): the dot reads as ONE unit with the numeral
     ("11•"), never a word-spaced "11 ." — see `.pf-fig__value .pf-dot` below, which pulls the dot's
     own 16px hit-target padding back in so its 7px visible core sits almost flush against the last
     glyph. This flex gap is the small remainder of that flush spacing, not the whole gap. */
  gap: 1px;
  font-size: var(--pf-display, 32px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.022em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  color: var(--md-text);
}
.pf-fig__value .pf-dot {
  /* The dot button is a 16px hit-target around a 7px core (`.pf-dot`/`.pf-dot::after` below), so its
     own left inset (~4.5px) already reads as space — pulling it in keeps the click target's full
     16px while the VISIBLE core sits flush after the numeral, styled as one unit rather than a
     separate, word-spaced mark. */
  margin-left: -4px;
}
.pf-fig--small .pf-fig__value {
  font-size: 22px;
  letter-spacing: -0.014em;
}
.pf-fig__label {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--md-text-secondary);
  margin: 8px 0 0;
}
.pf-fig__denom {
  font-size: 13px;
  line-height: 1.4;
  color: var(--md-text-muted);
  margin: 3px 0 0;
}

/* the one small receipt dot per figure */
.pf-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  vertical-align: middle;
  flex: 0 0 auto;
  transition: background-color 140ms ease;
}
.pf-dot::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pf-dot-color, var(--md-prov-read));
  transition: transform 140ms ease;
}
.pf-dot:hover,
.pf-dot:focus-visible {
  background: var(--md-surface-2);
  outline: none;
}
.pf-dot:hover::after,
.pf-dot:focus-visible::after {
  transform: scale(1.3);
}
.pf-dot--read { --pf-dot-color: var(--md-prov-read); }
.pf-dot--simulated { --pf-dot-color: var(--md-prov-simulated); }
.pf-dot--predicted { --pf-dot-color: var(--pf-prov-predicted); }
.pf-dot--stale { --pf-dot-color: var(--md-prov-stale); }

/* ─────────────────────────────────────────────── the one expansion / acts */

.pf-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 18px;
}
.pf-expand {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--md-accent-text);
  cursor: pointer;
  border-radius: var(--md-radius-sm);
}
.pf-expand:focus-visible {
  outline: 2px solid var(--md-accent);
  outline-offset: 3px;
}
.pf-expand:hover { text-decoration: underline; }

.pf-btn {
  border: 1px solid transparent;
  border-radius: var(--md-radius-sm);
  padding: 10px 16px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  background: var(--md-text);
  color: var(--md-surface-3);
  transition: opacity 140ms ease;
}
.pf-btn:hover { opacity: 0.88; }
.pf-btn:focus-visible { outline: 2px solid var(--md-accent); outline-offset: 2px; }
.pf-btn--primary { background: var(--md-accent); color: var(--md-surface-3); }
.pf-btn--ghost {
  background: var(--md-surface-2);
  color: var(--md-text);
  border-color: var(--md-border);
}
.pf-btn--quiet {
  background: none;
  color: var(--md-text-secondary);
  border-color: transparent;
  padding-left: 6px;
  padding-right: 6px;
}
.pf-btn--quiet:hover { color: var(--md-text); text-decoration: underline; }
.pf-btn--done {
  background: none;
  color: var(--md-positive);
  border-color: var(--md-border);
  cursor: default;
}

/* ───────────────────────────────────────────────────────────── chips */

.pf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  border: 1px solid var(--md-border);
  background: var(--md-surface-2);
  color: var(--md-text-secondary);
  padding: 5px 12px;
  font-size: 13px;
  line-height: 1.35;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-chip--accent {
  color: var(--md-accent-text);
  border-color: var(--md-accent-soft);
  background: var(--md-accent-soft);
}
.pf-chip--positive { color: var(--md-positive); }
.pf-chip--warning { color: var(--md-warning); }
.pf-chip--negative { color: var(--md-negative); }
.pf-chip__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.pf-tier-chip {
  display: inline-flex;
  align-items: center;
  border-radius: var(--md-radius-sm);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pf-tier-chip--home { color: var(--md-positive); background: var(--md-surface-2); }
.pf-tier-chip--one_bridge { color: var(--md-accent-text); background: var(--md-accent-soft); }
.pf-tier-chip--far { color: var(--md-text-secondary); background: var(--md-surface-2); }
.pf-tier-chip--unranked { color: var(--md-text-muted); background: var(--md-surface-2); }

/* ───────────────────────────────────────────────── generic body pieces */

.pf-body { margin-top: 20px; min-width: 0; }
.pf-body--tight { margin-top: 14px; }
.pf-h {
  font-size: var(--pf-title, 20px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.008em;
  color: var(--md-text);
  margin: 0 0 10px;
}
.pf-p {
  font-size: var(--pf-body, 16px);
  line-height: 1.55;
  color: var(--md-text-secondary);
  margin: 0 0 10px;
  max-width: 66ch;
}
.pf-p:last-child { margin-bottom: 0; }
.pf-meta {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--md-text-muted);
  margin: 12px 0 0;
}
.pf-rule {
  height: 1px;
  background: var(--md-border);
  border: 0;
  margin: 18px 0;
}

.pf-rows { display: flex; flex-direction: column; }
.pf-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--md-border);
  min-width: 0;
}
.pf-row:last-child { border-bottom: 0; padding-bottom: 0; }
.pf-row:first-child { padding-top: 0; }
.pf-row__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--md-text);
  min-width: 0;
}
.pf-row__sub {
  font-size: 13.5px;
  color: var(--md-text-muted);
  margin-top: 3px;
}
.pf-row__grow { flex: 1 1 auto; min-width: 0; }
.pf-row__val {
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--md-text);
  text-align: right;
  white-space: nowrap;
}

/* a labelled share bar (practices, standing) */
.pf-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--md-surface-2);
  overflow: hidden;
  margin-top: 8px;
}
.pf-bar > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--md-chart-industry);
  transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pf-bar--you > i { background: var(--md-chart-brand); }
.pf-bar--rival > i { background: var(--md-chart-competitive); }

/* ───────────────────────────────────────────────────────── why: chart */

.pf-why {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  min-width: 0;
}
@media (min-width: 680px) {
  .pf-why--aside {
    flex-direction: row;
  }
  .pf-why__chart { flex: 1 1 auto; min-width: 0; }
  .pf-why__aside { flex: 0 0 180px; width: 180px; }
}
.pf-why__aside {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.pf-aside-cell {
  background: var(--md-surface-2);
  border-radius: var(--md-radius-sm);
  padding: 12px 14px;
  min-width: 0;
}
.pf-chart { width: 100%; height: auto; display: block; overflow: visible; }
.pf-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--md-text-muted);
}
.pf-chart__legend span { display: inline-flex; align-items: center; gap: 7px; }
.pf-chart__swatch { width: 12px; height: 3px; border-radius: 2px; }

/* ──────────────────────────────────────────────────── profile & quotes */

.pf-quote {
  border-left: 2px solid var(--md-border-strong);
  padding: 2px 0 2px 14px;
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--md-text-secondary);
  max-width: 62ch;
  /* A real caption's unbroken hashtag chain has no break opportunity — this block lives in the
   * thread column, outside .pf-layer, so views.css's blanket rule for panels does not reach it. */
  overflow-wrap: anywhere;
}
.pf-quote:last-child { margin-bottom: 0; }
.pf-quote cite {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  font-style: normal;
  color: var(--md-text-muted);
}
.pf-grid2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 620px) {
  .pf-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
.pf-grid3 { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 620px) {
  .pf-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pf-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.pf-list li {
  font-size: 15px;
  line-height: 1.45;
  color: var(--md-text-secondary);
  padding-left: 15px;
  border-left: 2px solid var(--md-border-strong);
}
.pf-list--yes li { border-left-color: var(--md-positive); }
.pf-list--no li { border-left-color: var(--md-negative); }
.pf-list--take li { border-left-color: var(--md-accent); }

/* ────────────────────────────────────────────────────── movement rows */

.pf-move {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--md-border);
  min-width: 0;
}
.pf-move:last-child { border-bottom: 0; padding-bottom: 0; }
.pf-move:first-child { padding-top: 0; }
.pf-move__spark { flex: 0 0 62px; width: 62px; height: 22px; display: block; overflow: visible; }
.pf-move__pts {
  flex: 0 0 auto;
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
  min-width: 56px;
}
.pf-move__pts--up { color: var(--md-positive); }
.pf-move__pts--down { color: var(--md-negative); }
.pf-move__pts--flat { color: var(--md-text-muted); }

/* ─────────────────────────────────────────────────────── tiers: rings */

.pf-rings-wrap { display: flex; flex-direction: column; gap: 22px; }
.pf-rings {
  background: var(--md-surface-2);
  border-radius: var(--md-radius);
  padding: 10px;
}
.pf-rings svg { width: 100%; max-width: 440px; height: auto; display: block; margin: 0 auto; }
.pf-tiers { display: flex; flex-direction: column; gap: 22px; }
/* one column: the rings first, then the rows at full reading width (a 2-col split left the rows at ~220px) */
.pf-tier-group { min-width: 0; }
.pf-tier-group__hd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.pf-tier-group__n { font-size: 13px; color: var(--md-text-muted); }
.pf-tier {
  border-top: 1px solid var(--md-border);
  padding: 13px 0;
  min-width: 0;
}
.pf-tier:first-of-type { border-top: 0; padding-top: 0; }
.pf-tier__head { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.pf-tier__head > .pf-chip { flex: 0 0 auto; }
.pf-locked-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.pf-locked-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 14px;
  border: 1px dashed var(--md-border-strong);
  border-radius: var(--md-radius-sm);
  padding: 13px 16px;
  min-width: 0;
}

/* ────────────────────────────────────────────── stages rail + the dial */

.pf-stages { display: flex; flex-direction: column; position: relative; }
.pf-stages::before {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 16px;
  bottom: 16px;
  width: 1px;
  background: var(--md-border);
}
.pf-stage {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 9px 0;
  min-width: 0;
  position: relative;
}
.pf-stage__st {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--md-border-strong);
  position: relative;
  box-shadow: 0 0 0 3px var(--md-surface);
}
.pf-stage--done .pf-stage__st { background: var(--md-prov-read); }
.pf-stage--running .pf-stage__st { background: var(--md-accent); }
.pf-stage--held .pf-stage__st { background: var(--md-prov-stale); }
.pf-stage--todo .pf-stage__st { background: var(--md-border-strong); }
.pf-stage--running .pf-stage__st::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid var(--md-accent);
  opacity: 0.45;
  animation: pf-pulse 1.5s ease-out infinite;
}
@keyframes pf-pulse {
  0% { transform: scale(0.6); opacity: 0.6; }
  100% { transform: scale(1.25); opacity: 0; }
}
.pf-stage__rail {
  position: absolute;
}
.pf-stage__nm { flex: 1 1 auto; min-width: 0; font-size: 15.5px; font-weight: 600; color: var(--md-text); }
.pf-stage__nm small { display: block; font-size: 13px; font-weight: 400; color: var(--md-text-muted); margin-top: 2px; }
.pf-stage__rt { flex: 0 0 auto; font-size: 13.5px; color: var(--md-text-muted); font-variant-numeric: tabular-nums; }
.pf-stage--todo .pf-stage__nm { color: var(--md-text-muted); }

.pf-dial { margin-bottom: 4px; }
.pf-dial__k {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  color: var(--md-text-muted);
  margin-bottom: 8px;
}
.pf-dial__k b { color: var(--md-text); font-variant-numeric: tabular-nums; font-weight: 600; }

/* ───────────────────────────────────────────────── simulate: answers */

.pf-sim-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 620px) {
  .pf-sim-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}
.pf-sim-card {
  border: 1px solid var(--md-border);
  border-radius: var(--md-radius-sm);
  background: var(--md-surface-2);
  padding: 14px 16px;
  min-width: 0;
}
.pf-sim-card__p { font-size: 15.5px; font-weight: 600; color: var(--md-text); margin: 0 0 8px; }
.pf-sim-card__q {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--md-text-secondary);
  margin: 10px 0 0;
  font-style: italic;
}
.pf-sim-card__cites { display: flex; gap: 5px; margin-top: 10px; align-items: center; }

/* staged reveal — content is always in the DOM; only the entrance is animated */
.pf-reveal { animation: pf-rise 340ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes pf-rise {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-reveal { animation: none; }
  .pf-stage--running .pf-stage__st::after { animation: none; }
  .pf-bar > i { transition: none; }
}

/* ───────────────────────────────────────────── decision / plays cards */

.pf-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 720px) {
  .pf-mini-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.pf-mini {
  background: var(--md-surface-2);
  border-radius: var(--md-radius-sm);
  padding: 13px 14px;
  min-width: 0;
}
.pf-mini span {
  display: block;
  font-size: var(--pf-eyebrow, 12px);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--md-text-muted);
  margin-bottom: 6px;
}
.pf-mini b { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--md-text); }

.pf-plays { display: flex; flex-direction: column; gap: 12px; }
.pf-play {
  display: flex;
  gap: 15px;
  border: 1px solid var(--md-border);
  border-radius: var(--md-radius-sm);
  background: var(--md-surface-2);
  padding: 16px 18px;
  min-width: 0;
}
.pf-play__n {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--md-accent-text);
  padding-top: 2px;
  min-width: 20px;
}
.pf-play__b { flex: 1 1 auto; min-width: 0; }
.pf-play__t { font-size: 16.5px; font-weight: 600; line-height: 1.35; color: var(--md-text); margin: 0 0 6px; }
.pf-play__acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

.pf-link-card {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  border: 1px solid var(--md-border);
  border-radius: var(--md-radius-sm);
  background: var(--md-surface-2);
  padding: 16px 18px;
  min-width: 0;
}
.pf-link-card__b { flex: 1 1 260px; min-width: 0; }

.pf-preview { display: flex; flex-direction: column; gap: 10px; }
.pf-preview__ln { display: flex; gap: 12px; align-items: baseline; min-width: 0; }
.pf-preview__k {
  flex: 0 0 96px;
  font-size: var(--pf-eyebrow, 12px);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--md-text-muted);
}
.pf-preview__v { flex: 1 1 auto; min-width: 0; font-size: 15px; color: var(--md-text-secondary); }
.pf-preview__v--blur {
  color: transparent;
  background: repeating-linear-gradient(
    90deg,
    var(--md-surface-2) 0,
    var(--md-surface-2) var(--pf-held-run, 120px),
    transparent var(--pf-held-run, 120px),
    transparent calc(var(--pf-held-run, 120px) + 7px)
  );
  border-radius: 4px;
  max-width: 62%;
  user-select: none;
}

/* ───────────────────────────────────────────────────── receipts panel */

.pf-receipts {
  font-family: var(--md-font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--md-text);
  min-width: 0;
}
.pf-receipts__h {
  font-family: var(--pf-serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.pf-receipts__lede { font-size: 14px; color: var(--md-text-muted); margin: 0 0 20px; }
.pf-receipts__sec {
  font-size: var(--pf-eyebrow, 12px);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--md-text-muted);
  margin: 22px 0 10px;
}
.pf-receipts__sec:first-of-type { margin-top: 0; }
.pf-rc {
  display: flex;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--md-border);
  min-width: 0;
}
.pf-rc:last-child { border-bottom: 0; }
.pf-rc__k { flex: 0 0 108px; font-size: 13.5px; color: var(--md-text-muted); }
.pf-rc__v { flex: 1 1 auto; min-width: 0; font-size: 14.5px; color: var(--md-text); }
.pf-rc__ex {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: var(--md-text-secondary);
  margin: 6px 0 0;
  font-style: italic;
  overflow-wrap: anywhere;
}
/* THE ONE monospace in the product: the operator-grade facts inside the receipts layer. */
.pf-receipts .pf-rc__facts {
  display: block;
  font-family: var(--md-font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--md-text-secondary);
  margin: 7px 0 0;
  overflow-wrap: anywhere;
}
.pf-receipts .pf-rc__facts b { color: var(--md-text); font-weight: 600; }

/* ─────────────────────────────────────────────────────────── phone */

@media (max-width: 560px) {
  .pf-blocks { --pf-card-pad-y: 20px; --pf-card-pad-x: 18px; }
  .pf-say { font-size: 20px; max-width: none; }
  .pf-fig__value { font-size: 28px; }
  .pf-rc__k { flex-basis: 84px; }
  .pf-preview__k { flex-basis: 76px; }
}

/* a block with no card: the "show me" chip and anything else that must not become furniture */
.pf-block-bare {
  position: relative;
  padding: 2px 2px 2px 0;
  min-width: 0;
}
.pf-block-bare .pf-foot { margin-top: 10px; }
.pf-block-bare .pf-block__example { top: -4px; right: 0; }

/* the meaning line: the one sentence that says what the culture MEANS, with its honesty chip beside it */
.pf-lead {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--md-surface-2);
  border-radius: var(--md-radius-sm);
}
.pf-lead__t {
  flex: 1 1 320px;
  min-width: 0;
  margin: 0;
  font-size: 17px;
  line-height: 1.45;
  color: var(--md-text);
  max-width: 54ch;
}
.pf-lead__c { flex: 0 0 auto; }

/* a finding that is not a figure: the discriminate verdict, one line, its own weight */
.pf-finding {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 18px 0 0;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--md-text-secondary);
}
.pf-finding .pf-chip__dot { transform: translateY(-1px); }
.pf-sim-card__q .pf-dot { margin-left: 5px; }

/* the line chart: HTML axis, SVG plot. Nothing in it renders under 13px at any width. */
.pf-lines {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 10px;
  align-items: stretch;
}
.pf-lines { padding-top: 9px; }
.pf-lines__y {
  position: relative;
  /* absolutely-positioned ticks give the grid column no intrinsic width — reserve it, or the top tick is
     clipped by the card edge (measured). */
  width: 40px;
  flex: 0 0 40px;
  height: 190px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--md-text-muted);
  white-space: nowrap;
}
/* each tick sits ON its gridline, not between two of them */
.pf-lines__y span { position: absolute; right: 0; transform: translateY(-50%); }
.pf-lines__plot { position: relative; height: 190px; min-width: 0; }
.pf-lines__plot > i {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--md-border);
}
.pf-lines__plot > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.pf-lines__x {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 13px;
  color: var(--md-text-muted);
  min-width: 0;
}
.pf-lines__x span { flex: 0 1 auto; white-space: nowrap; }
@media (max-width: 560px) {
  .pf-lines__x span:nth-child(even) { display: none; }
}

/* simulate lists: only the populated lists take a column */
.pf-sim-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }

/* integration overrides (2026-09-18): one reading column in the thread — never a 2-col split inside a block */
.pf-block .pf-rings-wrap { display: flex !important; flex-direction: column !important; grid-template-columns: none !important; }
.pf-block .pf-tiers { display: flex !important; flex-direction: column !important; }
.pf-block .pf-sim-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; }
.pf-block .pf-sim-card { max-width: none !important; width: auto; }

/* reading density: chips are 13px, never smaller (the walk's floor) */
.pf-block .pf-chip, .pf-block [class*='chip'] { font-size: 13px; }

/* ───────────────────── inline density — a card woven INTO a chat answer (`<Blocks density="inline">`)
 * The one-copilot chat (`/copilot/next`) mounts the same blocks inside an answer: message width, compact,
 * foldable, no eyebrow, no serif display line, no shadow, and never a card inside the card. */
.pf-blocks--inline {
  max-width: none;
  margin: 0;
  gap: 12px;
}
.pf-block--inline {
  padding: 14px 18px 16px;
  box-shadow: none;
  background: var(--md-surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.pf-block--folded {
  padding-bottom: 14px;
}
.pf-inline-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.pf-inline-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding-top: 2px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--md-text);
  text-wrap: pretty;
}
.pf-inline-example {
  flex: none;
  padding-top: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-text-muted);
}
.pf-inline-fig { flex: none; }
.pf-inline-fold {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: -3px -8px 0 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--md-text-muted);
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}
.pf-inline-fold:hover,
.pf-inline-fold:focus-visible {
  background: var(--md-surface-2);
  color: var(--md-text);
  outline: none;
}
.pf-inline-fold svg { transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.pf-inline-fold[aria-expanded="false"] svg { transform: rotate(-90deg); }
.pf-inline-sowhat {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--md-text-secondary);
  max-width: 64ch;
}
.pf-block--inline .pf-body { margin-top: 10px; }
.pf-block--inline .pf-foot { margin-top: 12px; gap: 12px; }
.pf-block--inline .pf-expand { font-size: 14px; }
.pf-block--inline .pf-btn { font-size: 14px; padding: 8px 14px; }
/* inside a chat answer the verbs are quiet outlines — the answer, not the buttons, is the focal point — and never
 * a second accent beside the brand's own bar */
.pf-block--inline .pf-btn--primary { background: none; color: var(--md-text); border-color: var(--md-border-strong); }
.pf-block--inline .pf-btn--primary:hover { border-color: var(--md-text-secondary); opacity: 1; }
.pf-block--inline .pf-btn--done { background: none; color: var(--md-positive); border-color: var(--md-border); }
.pf-block--inline .pf-card-btn { min-height: 36px; padding: 8px 14px 7px; font-weight: 600; }
.pf-block--inline .pf-card-btn--quiet { border-color: var(--md-border-strong); color: var(--md-text); }
.pf-block--inline .pf-card-btn--quiet:hover { border-color: var(--md-text-secondary); }
.pf-block--inline .pf-plays { gap: 0; }
.pf-block--inline .pf-play {
  border: 0;
  border-top: 1px solid var(--md-border);
  border-radius: 0;
  background: none;
  padding: 12px 0;
}
.pf-block--inline .pf-play:first-child { border-top: 0; padding-top: 2px; }
.pf-block--inline .pf-play:last-child { padding-bottom: 0; }
.pf-block--inline .pf-play__t { font-size: 15.5px; }
.pf-block--inline .pf-play__acts { margin-top: 10px; gap: 8px; align-items: center; }
/* one accent: your row carries the brand colour, every rival row is the neutral ink — colour only for meaning */
.pf-block--inline .pf-bar--rival > i { background: color-mix(in srgb, var(--md-text) 24%, transparent); }
.pf-block--inline .pf-bar { height: 6px; margin-top: 6px; }
/* the rows carry their own padding and rule inline (StandingBlock); at inline density the bars are the rule */
.pf-block--inline .pf-rows > div { padding: 7px 0 !important; border-bottom: 0 !important; }
.pf-block--inline .pf-row__name { font-size: 15px; }
.pf-block--inline .pf-row__val { font-size: 15px; }
@media (prefers-reduced-motion: reduce) {
  .pf-inline-fold,
  .pf-inline-fold svg { transition: none; }
}