/* GENERATED by scripts/build-stylesheet.mjs from reference/contract-v3/graph-studio.html — DO NOT EDIT.
 *
 * Visual Contract v3: this sheet is the graph-studio surface's oracle stylesheet VERBATIM. Refresh
 * the contract file and run `npm run css`; the release gate runs `--check` and fails on drift.
 */
/* CoreVecta Atlas — contract-v4 canonical token sheet (Wave R0, card atlas-redesign-flagship-2026-08-05)
   ONE token generation for all surfaces. Derived from the designers' system
   (/home/sali/atlasv2/redesign/, Calculatordetail generation) with the ratified red-line
   corrections applied. Dark = brand default; light fully covered. Every oracle embeds this
   block verbatim at the top of its stylesheet. */

:root {
  color-scheme: dark;
  /* surfaces */
  --bg: #07110e;
  --bg-elevated: #0b1713;
  --surface: #10201a;
  --surface-2: #142820;
  --surface-3: #193229;
  --surface-soft: rgba(255, 255, 255, .035);
  /* text */
  --text: #f4f8f5;
  --text-soft: #c0ccc5;
  --text-muted: #8fa198;
  /* lines */
  --line: rgba(216, 239, 225, .13);
  --line-strong: rgba(216, 239, 225, .22);
  /* accent — the reader's color: interactive, CTA, active states */
  --accent: #a7f36d;
  --accent-strong: #86df45;
  --accent-ink: #10200b;          /* text ON accent fills */
  --accent-soft: rgba(167, 243, 109, .12);
  --accent-fill: #a7f36d;         /* non-text graphics: bars, chart strokes, fills */
  /* semantic */
  --teal: #77e7cc;                /* engine/verified secondary */
  --warn: #ffd166;
  --danger: #ff8e8e;
  --blue: #8fc7ff;
  --violet: #c7a8ff;
  /* elevation */
  --shadow: 0 24px 64px rgba(0, 0, 0, .30);
  --shadow-soft: 0 14px 36px rgba(0, 0, 0, .18);
  /* geometry */
  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius: 20px;
  --radius-lg: 28px;
  --header-h: 72px;
  --max: 1380px;
  /* type — Inter first-in-stack ONLY (no webfont, gate law NO REMOTE FONT) */
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f7f2;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f7f1;
  --surface-3: #ebf1e9;
  --surface-soft: rgba(10, 34, 22, .035);
  --text: #102018;
  --text-soft: #3d5146;
  --text-muted: #5c6f64;          /* corrected from #687c71 — 4.98:1 on --bg (was 4.13 FAIL) */
  --line: rgba(15, 42, 27, .12);
  --line-strong: rgba(15, 42, 27, .20);
  --accent: #37791b;              /* corrected from #5dbf2f — 5.37:1 on white as text (was 2.34 FAIL) */
  --accent-strong: #2f6a15;       /* hover/emphasis — 6.58:1 */
  --accent-ink: #ffffff;          /* white on #37791b = 5.37:1 (was 2.34 FAIL) */
  --accent-soft: rgba(82, 181, 38, .12);
  --accent-fill: #4ca224;         /* graphics-only (>=3:1); NEVER as text in light theme */
  --teal: #157d69;                /* 5.04:1 as text — ok */
  --warn: #8f5a00;                /* darkened from #b46f00 (4.03 marginal) for small-text use */
  --danger: #bd3e3e;              /* 5.35:1 — ok */
  --blue: #226dac;
  --violet: #6d4fb0;
  --shadow: 0 24px 64px rgba(41, 63, 49, .13);
  --shadow-soft: 0 14px 36px rgba(41, 63, 49, .09);
}

/* PRINT TOKENS — part of the canonical token region. "An estimate that cannot be printed is
   not an estimate": paper output always resolves the CANONICAL LIGHT VALUES ABOVE, re-declared
   verbatim here so a dark-theme reader prints ink-safe. No new colors are introduced. */
@media print {
  :root {
    color-scheme: light;
    --bg: #f5f7f2;
    --bg-elevated: #ffffff;
    --surface: #ffffff;
    --surface-2: #f4f7f1;
    --surface-3: #ebf1e9;
    --surface-soft: rgba(10, 34, 22, .035);
    --text: #102018;
    --text-soft: #3d5146;
    --text-muted: #5c6f64;
    --line: rgba(15, 42, 27, .12);
    --line-strong: rgba(15, 42, 27, .20);
    --accent: #37791b;
    --accent-strong: #2f6a15;
    --accent-ink: #ffffff;
    --accent-soft: rgba(82, 181, 38, .12);
    --accent-fill: #4ca224;
    --teal: #157d69;
    --warn: #8f5a00;
    --danger: #bd3e3e;
    --blue: #226dac;
    --violet: #6d4fb0;
    --shadow: none;
    --shadow-soft: none;
  }
}

/* ============================================================================
   Base — authored at 390px, built UP (720 / 1080 / 1360 ladder only)
   ============================================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 16% -10%, color-mix(in srgb, var(--teal) 8%, transparent), transparent 34rem),
    radial-gradient(circle at 90% 12%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 30rem),
    var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
svg { display: block; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ======================================================================
   SHARED SHELL — canonical, byte-identical across all eight v4 oracles.
   Normalized from calculator.html (THE SHELL IS ONE SHELL, v4). Refresh
   the shell here and re-run the normalizer; drift fails the css build.
   ====================================================================== */
.skip-link {
  position: fixed; top: 8px; left: 8px; transform: translateY(-150%); z-index: 999;
  padding: 12px 16px; border-radius: var(--radius-xs); background: var(--accent); color: var(--accent-ink); font-weight: 800;
}
.skip-link:focus { transform: none; }
.oracle-note { color: var(--text-muted); font-size: 11px; line-height: 1.45; }
.commercial-slot:empty { display: none; }
.shell-header {
  position: sticky; top: 0; z-index: 60;
  height: var(--header-h);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
}
.header-inner {
  width: min(var(--max), calc(100% - 32px)); height: 100%; margin: 0 auto;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: max-content; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--accent), var(--teal));
  color: var(--accent-ink);
}
.brand-copy { display: grid; line-height: 1; gap: 4px; }
.brand-copy strong { font-size: 17px; letter-spacing: -.015em; font-weight: 800; }
.brand-copy span { display: none; color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.primary-nav { display: none; align-items: center; gap: 4px; }
.nav-link { padding: 10px 13px; border-radius: 11px; color: var(--text-soft); font-size: 15px; font-weight: 700; }
.nav-link:hover { background: var(--surface-soft); color: var(--text); }
.nav-link.active { background: var(--accent-soft); color: var(--accent); }
.header-tools { display: flex; align-items: center; gap: 8px; justify-self: end; }
.tool-btn, .search-btn {
  min-height: 42px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; color: var(--text-soft); font-weight: 700;
  transition: border-color .2s;
}
.tool-btn { width: 42px; padding: 0; }
.tool-btn:hover, .search-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--line-strong); }
.search-btn { width: 42px; padding: 0; }
.search-btn kbd {
  border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px;
  color: var(--text-muted); font-size: 12px; background: var(--surface); font-family: var(--font);
}
.mobile-bottom-nav {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 70;
  display: grid; grid-template-columns: repeat(5, 1fr); padding: 8px;
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--bg-elevated); box-shadow: var(--shadow-soft);
}
.mobile-bottom-nav a {
  min-height: 52px; display: grid; place-items: center; align-content: center; gap: 3px;
  border-radius: 12px; color: var(--text-muted); font-size: 11px; font-weight: 650;
}
.mobile-bottom-nav svg { width: 20px; height: 20px; }
.mobile-bottom-nav a.active { background: var(--accent-soft); color: var(--accent); }
.page { width: min(var(--max), calc(100% - 32px)); margin: 0 auto; padding: 18px 0 24px; }
.breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  color: var(--text-muted); font-size: 14px; font-weight: 650; margin-bottom: 16px;
}
.breadcrumb a:hover { color: var(--text); }
.breadcrumb strong { color: var(--text-soft); font-weight: 650; }
.crumb-sep { opacity: .5; }
.site-footer { margin-top: 40px; border-top: 1px solid var(--line); background: var(--bg-elevated); }
.refnote { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 16px; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.search-btn .search-label, .search-btn kbd { display: none; }
.lang-chip { width: auto; padding: 0 12px; font-size: 14px; font-weight: 800; }
.footer-inner { width: min(var(--max), calc(100% - 32px)); margin: 0 auto; padding: 40px 0 120px; display: grid; gap: 28px; }
.footer-copy { color: var(--text-muted); max-width: 480px; font-size: 14px; margin: 14px 0 0; }
.footer-col strong { display: block; margin-bottom: 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); font-weight: 700; }
.footer-col a { display: block; padding: 5px 0; color: var(--text-soft); font-size: 14px; }
.footer-col a:hover { color: var(--accent); }
@media (min-width: 720px) {
.header-inner { width: min(var(--max), calc(100% - 40px)); gap: 28px; }
.brand-copy span { display: block; }
.search-btn { width: auto; padding: 0 13px; }
.page { width: min(var(--max), calc(100% - 40px)); padding-top: 26px; }
.search-btn .search-label, .search-btn kbd { display: inline-block; }
.footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
.primary-nav { display: flex; }
.mobile-bottom-nav { display: none; }
.footer-inner { grid-template-columns: 1.4fr repeat(3, .6fr); gap: 36px; padding-bottom: 48px; }
}
@media (prefers-reduced-motion: reduce) {
.skip-link { transition: none; }
}
@media print {
.site-footer { margin-top: 12pt; background: none; border-top: 0; }
.refnote { border-top: 1px solid var(--line); }
.page, .footer-inner { width: 100%; padding: 0; }
}
/* ==== end shared shell ==== */


/* ============================================================================
   ORACLE — Graph Studio (Wave R4.1, card atlas-visual-v3-and-studio-r4-2026-08-05).
   Authored from the designers' flagship mockup with the ratified corrections:
   mobile-first base + 720/1080/1360 ladder (the mockup's 1180/1279/560 max-width
   ladder is replaced), contract-v4 tokens only (the mockup's light accent
   family is the exact contrast defect tokens.css corrected — never reintroduced),
   honest family set (only kinds the real AtlasGraphSurface renders), provenance
   badge vocabulary, descriptive-statistics band per ruling R-R4-1, visible
   invalid-cell state (the mockup's silent Number()||0 is banned), PRM guard,
   and the contract's own theme block (localStorage `atlas-theme`, never a
   second key). Reference JS is layout-state-only: mode tabs. Accordions are
   native <details>. The chart stage is a static illustrative SVG ("workspace
   preview"); production mounts the vendored <atlas-graph-surface> renderer,
   whose series colors resolve through the shipped --atlas-series-1..6 bridge —
   in this oracle the illustration uses the ratified graphics hues directly.
   Wave R4.3 amends this oracle with ONE new region: the recipe shelf, its own
   scroll region between the studio shell and the specimen band (banner below).
   ============================================================================ */

/* ============================================================================
   Head — hero with entry CTAs. The head speaks ONLY what the studio ships:
   bring your data, shape it, export it. Recipe counts live in the recipe
   shelf's own band (R4.3), where they are derived in production and marked
   as specimen copy here — the head itself still makes no KPI claims.
   ============================================================================ */
/* The canonical base normalizes button/input/select but not textarea (no oracle used one
   before this surface); the studio's subtitle and paste fields need the same treatment. The
   paste dialog's textarea re-opts into mono deliberately (tabular data). */
textarea { font: inherit; }

.studio-head {
  position: relative; overflow: hidden;
  padding: 22px 18px; border: 1px solid var(--line); border-radius: 22px;
  background: linear-gradient(115deg, var(--accent-soft), transparent 50%), var(--surface-soft);
}
.studio-head::after {
  content: ""; position: absolute; width: 240px; height: 240px; border-radius: 50%; right: -88px; top: -105px;
  border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
  box-shadow: 0 0 0 38px color-mix(in srgb, var(--accent) 3%, transparent), 0 0 0 76px color-mix(in srgb, var(--accent) 2%, transparent);
  pointer-events: none;
}
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--accent); font-size: 14px; font-weight: 800; letter-spacing: .02em; margin-bottom: 13px; }
.domain-icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); font-weight: 800; }
h1 { margin: 0; max-width: 900px; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.04; letter-spacing: -.04em; text-wrap: balance; font-weight: 800; }
.subtitle { margin: 14px 0 0; max-width: 830px; color: var(--text-soft); font-size: 17px; line-height: 1.55; }
.hero-actions { display: grid; gap: 10px; margin-top: 18px; position: relative; z-index: 1; }
.btn {
  min-height: 48px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
  padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  color: var(--text-soft); font-size: 15px; font-weight: 800; cursor: pointer; transition: border-color .2s;
}
.btn:hover { border-color: var(--line-strong); background: var(--surface-2); color: var(--text); }
.btn-primary {
  border-color: transparent; background: linear-gradient(145deg, var(--accent), var(--accent-strong)); color: var(--accent-ink);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--accent) 17%, transparent);
}
.btn-primary:hover { background: linear-gradient(145deg, var(--accent), var(--accent-strong)); color: var(--accent-ink); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn[disabled]:hover { border-color: var(--line); background: var(--surface); color: var(--text-soft); }
.meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; position: relative; z-index: 1; }
.pill {
  display: inline-flex; min-height: 36px; align-items: center; gap: 8px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 99px;
  color: var(--text-soft); background: var(--surface-soft); font-size: 13px; font-weight: 700;
}
.pill.good { border-color: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--accent); background: var(--accent-soft); }
/* Light theme: --accent over accent-soft on the tinted head measures 4.22:1 at 13px —
   the emphasis hue restores AA. (The same marginal exists in calculator.html's .pill.good;
   flagged for the main session, not silently fixed there.) */
html[data-theme="light"] .pill.good { color: var(--accent-strong); }
.quick-steps { display: grid; gap: 10px; margin-top: 18px; position: relative; z-index: 1; }
.step-card { padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); }
.step-card strong { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; }
.step-num { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 99px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 13px; }
/* text-soft, not text-muted: 13px over the head's accent-soft wash measured 4.35:1 in light */
.step-card p { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-soft); }

/* ============================================================================
   Quick-start cards — the three data entries. The mockup's fourth card
   ("Use a guided template / Browse recipes") became the recipe shelf (R4.3),
   a full region of its own below the studio shell; the hero links to it
   rather than duplicating it as a fourth card.
   ============================================================================ */
.quick-starts { display: grid; gap: 12px; margin-top: 14px; }
.quick-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-soft); padding: 18px; display: grid; gap: 8px; align-content: start; }
.quick-card strong { font-size: 16px; letter-spacing: -.02em; font-weight: 800; }
.quick-card p { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.quick-card .btn { margin-top: 6px; min-height: 44px; justify-self: start; }

/* ============================================================================
   Mode tabs — below the desktop ladder the studio is four one-tap modes.
   Base (phone) adds a fifth one-tap Export; the mockup's fixed bottom studio
   bar is NOT reproduced because the canonical shell's mobile-bottom-nav owns
   the bottom edge — two stacked fixed bars is a named defect, so Export joins
   the sticky mode row instead. ≥1080 the three-panel grid shows everything
   and the tabs disappear.
   ============================================================================ */
.studio-zone { position: relative; }
.mode-tabs {
  position: sticky; top: var(--header-h); z-index: 50;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
  padding: 10px 0; margin-top: 16px; background: var(--bg);
}
.mode-btn {
  min-height: 48px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--text-muted); font-size: 13px; font-weight: 800; cursor: pointer; transition: border-color .2s;
}
.mode-btn:hover { color: var(--text); border-color: var(--line-strong); }
/* Active mode wears the contract's segmented-active treatment (accent fill + accent-ink) —
   accent-on-accent-soft measured 4.49:1 in light theme, a hair under AA for 14px text. */
.mode-btn.is-active { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.mode-btn.is-active:hover { color: var(--accent-ink); border-color: transparent; }

/* ============================================================================
   Studio shell — Setup | Workspace + statistics | Style & inspection.
   Base: single column; panes are the mode surfaces. ≥1080: three-panel grid,
   all panes visible, side panels sticky.
   ============================================================================ */
.studio-shell { margin-top: 8px; scroll-margin-top: calc(var(--header-h) + 74px); }
.m-pane { display: none; }
.m-pane.is-active { display: block; }
.center-col { display: contents; }
.spanel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-soft); overflow: hidden; }
.spanel + .spanel, .m-pane + .m-pane, .center-col > .m-pane { margin-top: 14px; }
.spanel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 13px; border-bottom: 1px solid var(--line); }
.spanel-head h2 { margin: 0; font-size: 18px; line-height: 1.2; letter-spacing: -.025em; font-weight: 800; }
.spanel-head p { margin: 3px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.45; }
.spanel-head .head-meta { color: var(--text-muted); font-size: 12px; font-weight: 700; white-space: nowrap; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.spanel-body { padding: 16px; display: grid; gap: 16px; }
.section-label { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }

/* Setup — dropzone + dataset card with editable rows */
.dropzone { padding: 16px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-soft); text-align: center; }
.dropzone strong { display: block; font-size: 16px; letter-spacing: -.02em; font-weight: 800; overflow-wrap: anywhere; }
.dropzone p { margin: 6px 0 12px; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mini-btn {
  min-height: 42px; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface-2);
  font-size: 13px; font-weight: 700; color: var(--text-soft); cursor: pointer; transition: border-color .2s;
}
.mini-btn:hover { background: var(--surface-3); color: var(--text); border-color: var(--line-strong); }
.dataset-card { padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); }
.dataset-card > strong { display: block; font-size: 16px; letter-spacing: -.02em; font-weight: 800; }
.dataset-card > span { display: block; margin-top: 3px; color: var(--text-muted); font-size: 12px; }
.row-cards { display: grid; gap: 10px; margin-top: 12px; }
.row-card {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: 8px;
  padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
}
.cell { display: grid; gap: 5px; min-width: 0; }
.cell > span { font-size: 11px; line-height: 1.2; color: var(--text-muted); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; overflow-wrap: anywhere; }
.cell input {
  width: 100%; min-width: 0; height: 42px; padding: 0 10px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-xs); background: var(--surface-2); color: var(--text);
  font-size: 14px; font-weight: 650; outline: none; font-variant-numeric: tabular-nums; transition: border-color .2s;
}
.cell input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); background: var(--surface); }
/* Invalid-cell state — a named design state. Production refuses to plot the cell and says so;
   the mockup's silent Number(x)||0 zero-coercion is banned. */
.cell input.cell-invalid {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 9%, var(--surface-2));
}
/* Focus keeps the danger border alone — the constitution declares no danger-tinted ring form,
 * and the invalid state is already carried by the border and the message line. */
.cell input.cell-invalid:focus { border-color: var(--danger); box-shadow: none; }
.cell-msg { grid-column: 1 / -1; margin: 0; color: var(--danger); font-size: 12px; line-height: 1.45; font-weight: 700; }
.row-more { color: var(--text-muted); font-size: 12px; text-align: center; padding: 2px 0; }
.data-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }

/* Workspace — toolbar, family chips, provenance badge, stage, legend */
.toolbar { padding: 16px 18px; border-bottom: 1px solid var(--line); display: grid; gap: 13px; }
.toolbar-top { display: grid; gap: 12px; }
.toolbar-top h2 { margin: 0; font-size: 18px; letter-spacing: -.025em; font-weight: 800; }
.toolbar-top p { margin: 3px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.45; }
.ws-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ws-actions .btn { min-height: 44px; padding: 0 10px; font-size: 14px; box-shadow: none; }
.family-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.family-row::-webkit-scrollbar { display: none; }
.family-btn {
  min-height: 42px; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 99px; background: var(--surface-soft);
  color: var(--text-soft); font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: border-color .2s;
}
.family-btn:hover { color: var(--text); border-color: var(--line-strong); }
.family-btn.active { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 26%, var(--line)); }
.stage-card { padding: 16px 18px 18px; }
.frame-head { display: grid; gap: 10px; margin-bottom: 12px; }
.frame-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.frame-head h3 { margin: 0; font-size: 19px; letter-spacing: -.03em; font-weight: 800; }
.frame-head p { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
/* Provenance badge vocabulary — the three ratified states. R4.1 uses ONLY the neutral
   `your data` state; the other two are the reserved vocabulary for the calculator→studio
   seam (R4.2): certified-engine (teal) and engine-derived-edited (warn). Promotion is only
   ever by bytes (hash match), never by trust; any value edit demotes automatically. */
.prov-badge {
  display: inline-flex; min-height: 28px; align-items: center; gap: 7px; padding: 0 10px;
  border: 1px solid var(--line-strong); border-radius: 99px; background: var(--surface-soft);
  color: var(--text-soft); font-size: 12px; font-weight: 800; white-space: nowrap;
}
.prov-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.prov-badge.prov-engine { border-color: color-mix(in srgb, var(--teal) 32%, transparent); background: color-mix(in srgb, var(--teal) 10%, transparent); color: var(--teal); }
.prov-badge.prov-edited { border-color: color-mix(in srgb, var(--warn) 34%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); color: var(--warn); }
.canvas-stage { position: relative; height: 300px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-soft); overflow: hidden; padding: 14px; }
.canvas-stage svg { width: 100%; height: 100%; overflow: visible; }
.chart-grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-line { fill: none; stroke: var(--accent-fill); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart-line-b { fill: none; stroke: var(--teal); stroke-width: 2; stroke-dasharray: 5 5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart-stop-a { stop-color: var(--accent-fill); stop-opacity: .2; }
.chart-stop-b { stop-color: var(--accent-fill); stop-opacity: 0; }
.chart-x-axis { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; color: var(--text-muted); font-size: 11px; font-weight: 650; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.legend span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-soft); font-weight: 650; }
.swatch { width: 10px; height: 10px; border-radius: 50%; }
.swatch-a { background: var(--accent-fill); }
.swatch-b { background: var(--teal); }
.stage-card .oracle-note { margin-top: 10px; }

/* Descriptive statistics band — ruling R-R4-1: user-data series only, visually DISTINCT
   from any certified/verified styling (no accent border, no verified badge, no status chip),
   values in the mono font, honest caption. No correlation, no trend commentary. */
.stats-band { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-soft); padding: 18px; }
.stats-band h2 { margin: 0; font-size: 18px; letter-spacing: -.025em; font-weight: 800; }
.stats-caption { margin: 6px 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.stat { padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); min-width: 0; }
.stat small { display: block; font-size: 11px; color: var(--text-muted); font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.stat b { display: block; margin-top: 7px; font-size: 26px; line-height: 1; letter-spacing: -.03em; font-weight: 800; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 5px; font-size: 12px; color: var(--text-muted); }
.trust-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-soft); padding: 18px; }
.trust-card h2 { margin: 0 0 8px; font-size: 18px; letter-spacing: -.025em; font-weight: 800; }
.trust-card > p { margin: 0; color: var(--text-soft); font-size: 14px; line-height: 1.55; }
.trust-list { display: grid; gap: 10px; margin-top: 14px; }
.trust-line { display: flex; gap: 10px; align-items: flex-start; }
.tick { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 99px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 800; }
.trust-line strong { display: block; font-size: 14px; font-weight: 800; }
.trust-line span { display: block; color: var(--text-muted); font-size: 12px; line-height: 1.45; margin-top: 2px; }

/* Style & inspection — native-details accordion groups */
.acc { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); overflow: hidden; }
.acc + .acc { margin-top: 10px; }
.acc summary {
  list-style: none; cursor: pointer; min-height: 54px; padding: 10px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 800;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary small { display: block; color: var(--text-muted); font-size: 12px; font-weight: 700; margin-top: 2px; }
.acc summary::after { content: "+"; color: var(--text-muted); font-size: 18px; font-weight: 700; }
.acc[open] summary::after { content: "−"; }
.acc-content { padding: 2px 16px 16px; display: grid; gap: 12px; }
.field { display: grid; gap: 7px; min-width: 0; }
.field label { font-size: 12px; color: var(--text-muted); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 46px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text); padding: 0 14px; font-size: 14px; font-weight: 650; outline: none; transition: border-color .2s;
}
.field textarea { min-height: 84px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); background: var(--surface); }
.field-row { display: grid; gap: 10px; }
.switch-list { display: grid; gap: 10px; }
.switch {
  min-height: 50px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; text-align: left; width: 100%; font-weight: 700; color: var(--text);
}
.switch small { display: block; font-size: 12px; color: var(--text-muted); font-weight: 650; margin-top: 2px; }
.toggle { width: 48px; height: 28px; flex: 0 0 auto; border-radius: 99px; background: var(--surface-3); position: relative; border: 1px solid var(--line-strong); }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--text-muted); transition: transform .2s; }
.switch.active .toggle { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 26%, var(--line)); }
.switch.active .toggle::after { transform: translateX(20px); background: var(--accent); }
.export-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.export-note { margin: 0; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.prov-key { padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); display: grid; gap: 10px; }
.prov-key-row { display: flex; align-items: flex-start; gap: 10px; }
.prov-key-row .prov-badge { flex: 0 0 auto; }
.prov-key-row p { margin: 2px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.45; }

/* ============================================================================
   Recipe shelf — Wave R4.3 (card atlas-visual-v3-and-studio-r4-2026-08-05).
   Frames for common graphs, grouped by domain, as the shelf's OWN scroll
   region between the studio shell and the specimen band, visible at all
   widths (the mode row stays at five — the shelf never becomes a sixth tab).
   Groups are the Style panel's native-details accordion vocabulary (.acc)
   with a truthful "x of y backed" count chip in the summary. Two card states
   share one anatomy: ENGINE-BACKED (teal flag, teal-mixed border, deep links
   to certified calculator pages — the anchors that close the loop back to
   calculators) and FOR YOUR OWN DATA (neutral flag, NO links — a link that
   goes nowhere is a fake link and does not appear). Cards are typographic
   ONLY: the ratified ruling for specimen previews is "not at all" — no
   thumbnails, no sample sparklines, no invented curves. Every count in this
   region is specimen copy (marked at the markup); production derives the
   real numbers from recipe-bindings.ts. "Use this frame" pre-fills the
   studio's title, axes and family — presentation only, wired in production
   by studio-controller.ts.
   ============================================================================ */
.recipe-shelf { margin-top: 16px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-soft); }
.recipe-shelf > h2 { margin: 0; font-size: clamp(22px, 2.2vw, 26px); letter-spacing: -.03em; font-weight: 800; }
.shelf-line { margin: 6px 0 0; max-width: 720px; color: var(--text-soft); font-size: 14px; line-height: 1.5; }
.shelf-groups { display: grid; gap: 10px; margin-top: 14px; }
.shelf-group summary > span:first-child { min-width: 0; }
.shelf-count {
  display: inline-flex; min-height: 28px; align-items: center; padding: 0 10px; margin-left: auto;
  flex: 0 0 auto; border: 1px solid var(--line-strong); border-radius: 99px; background: var(--surface);
  color: var(--text-soft); font-size: 12px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.recipe-card { padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); display: grid; gap: 8px; align-content: start; }
.recipe-card h3 { margin: 0; font-size: 15px; line-height: 1.3; letter-spacing: -.02em; font-weight: 800; }
.recipe-card > p { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.recipe-flag { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); }
.recipe-card.is-backed { border-color: color-mix(in srgb, var(--teal) 26%, var(--line)); }
.recipe-card.is-backed .recipe-flag { color: var(--teal); }
.recipe-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.recipe-link {
  display: inline-flex; min-height: 36px; align-items: center; gap: 8px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 99px; background: var(--surface-soft);
  color: var(--text-soft); font-size: 13px; font-weight: 700; transition: border-color .2s;
}
.recipe-link:hover { color: var(--accent); border-color: var(--line-strong); background: var(--surface-2); }
.recipe-more { color: var(--text-muted); font-size: 12px; font-weight: 650; }
.recipe-card .btn { min-height: 44px; justify-self: start; margin-top: 2px; padding: 0 14px; font-size: 14px; }
.recipe-shelf .oracle-note { margin-top: 14px; }

/* ============================================================================
   Dialog + toast vocabulary — the mockup's paste/export dialogs and toast,
   carried as static specimens (reference chrome; production opens them as
   real <dialog> elements from studio-controller.ts).
   ============================================================================ */
.specimen-band { margin-top: 16px; padding: 18px; border: 1px dashed var(--line-strong); border-radius: var(--radius); display: grid; gap: 14px; }
.specimen-band > h2 { margin: 0; font-size: clamp(22px, 2.2vw, 26px); letter-spacing: -.03em; font-weight: 800; }
.dialog-frame { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elevated); box-shadow: var(--shadow-soft); overflow: hidden; max-width: 720px; }
.dialog-head { padding: 16px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dialog-head h3 { margin: 0; font-size: 19px; letter-spacing: -.03em; font-weight: 800; }
.dialog-close { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface-soft); color: var(--text-soft); display: grid; place-items: center; cursor: pointer; font-size: 16px; font-weight: 700; }
.dialog-body { padding: 16px 18px 18px; display: grid; gap: 12px; }
.dialog-body > p { margin: 0; color: var(--text-soft); font-size: 14px; line-height: 1.5; }
.dialog-body textarea {
  width: 100%; min-height: 150px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text); padding: 12px 14px; outline: none; resize: vertical;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; line-height: 1.6;
}
.dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.toast-pill {
  display: inline-flex; align-items: center; gap: 9px; padding: 12px 16px; border-radius: 99px;
  border: 1px solid var(--line); background: var(--bg-elevated); box-shadow: var(--shadow-soft);
  color: var(--text); font-size: 14px; font-weight: 700; justify-self: start;
}

/* ============================================================================
   ≥720 — tablet
   ============================================================================ */
@media (min-width: 720px) {
  body { font-size: 17px; }
  .studio-head { padding: 28px 30px; border-radius: var(--radius-lg); }
  .hero-actions { display: flex; flex-wrap: wrap; }
  .quick-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quick-starts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mode-tabs { grid-template-columns: repeat(4, 1fr); }
  .mode-btn { font-size: 14px; }
  .mode-export { display: none; }
  .toolbar-top { display: flex; align-items: flex-start; justify-content: space-between; }
  .ws-actions { display: flex; }
  .ws-actions .btn { min-height: 44px; padding: 0 14px; }
  .frame-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .canvas-stage { height: 380px; }
  .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .field-row { grid-template-columns: 1fr 1fr; }
  .export-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .row-cards { gap: 8px; }
  .shelf-group .acc-content { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

/* ============================================================================
   ≥1080 — desktop: the three-panel studio. All panes visible; tabs retire.
   ============================================================================ */
@media (min-width: 1080px) {
  .mode-tabs { display: none; }
  .studio-shell { display: grid; grid-template-columns: 300px minmax(0, 1fr) 320px; gap: 14px; align-items: start; margin-top: 16px; }
  .m-pane { display: block; }
  .m-pane + .m-pane, .center-col > .m-pane { margin-top: 0; }
  .center-col { display: grid; gap: 14px; align-content: start; min-width: 0; }
  .center-col > .m-pane + .m-pane { margin-top: 0; }
  .side-pane { position: sticky; top: calc(var(--header-h) + 16px); max-height: calc(100vh - var(--header-h) - 32px); display: flex; flex-direction: column; }
  .side-pane .spanel-body { overflow-y: auto; overscroll-behavior: contain; }
  .family-row { flex-wrap: wrap; overflow: visible; padding-bottom: 0; }
  .canvas-stage { height: 420px; }
  #pane-insights { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 14px; align-items: start; }
  .export-row { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================================
   ≥1360 — wide polish
   ============================================================================ */
@media (min-width: 1360px) {
  .studio-shell { grid-template-columns: 320px minmax(0, 1fr) 340px; gap: 18px; }
  .canvas-stage { height: 460px; }
  .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============================================================================
   Reduced motion — guard over every transition/animation/smooth-scroll
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ============================================================================
   Print — the workspace and its statistics print; studio chrome does not.
   ============================================================================ */
@media print {
  body { background: var(--bg); padding: 0; font-size: 12pt; }
  .shell-header, .mobile-bottom-nav, .skip-link, .mode-tabs, .hero-actions,
  .quick-starts, .specimen-band, .recipe-shelf, .ws-actions, .data-actions, .commercial-slot,
  .oracle-note, .footer-col, .footer-brand { display: none !important; }
  .m-pane { display: block; }
  .spanel, .stats-band, .trust-card, .studio-head { break-inside: avoid; box-shadow: none; margin: 0 0 12pt; background: var(--surface); }
  .studio-head { border: 0; padding: 0 0 12pt; background: none; }
  .studio-head::after { display: none; }
  a { text-decoration: none; }
}