/*
 * 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);
}

.md-insight-card {
  border: 1px solid var(--md-border);
  background-color: var(--md-surface-2);
}

/* ============================================================= 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: 600;
}
.md-root[data-md-title="plain"] .md-title {
  letter-spacing: -0.015em;
  font-weight: 650;
}
.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;
}
.md-dim-table__th {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--md-border);
  white-space: nowrap;
}
.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;
}