/* ============================================================================
   RESOURCE STUDIO — SCREEN SHELL
   ----------------------------------------------------------------------------
   This file owns everything the TEACHER sees while building a resource.
   `resource-studio.css` now owns only what the PRINTER sees (.print-page and
   the sheet layouts inside it) plus the page's base resets.

   That split is the actual fix. One stylesheet was doing both jobs, so screen
   chrome inherited print-oriented decisions — Georgia serif, hard 90° corners,
   and a cold hard-coded grey ramp (#cbd3dc / #dfe6ed / #aab5c2 / #d1d9e1) that
   belonged to nothing else on the site. Every attempt to patch it needed another
   `!important`, including an inline "contrast rescue" block in index.html.
   Those hard-coded greys are gone; this file uses the site's own tokens, so the
   Studio now inherits the design system instead of fighting it.

   THE RULE FOR FUTURE EDITS: if it appears on paper, it belongs in
   resource-studio.css. If it appears on screen, it belongs here. Never both.

   LANGUAGE: the site's established pattern — a dark cinematic hero island
   sitting in a daylight working band. The Studio now matches the rest of the
   site rather than being the one page with its own navy.

   CONTRAST: every pair below is drawn from the .light-band token block, which is
   AA-verified (ink 16.9:1, ink-2 9.6:1, muted 5.8:1, accent 6.6:1, gold 5.6:1).
   Nothing here hard-codes a colour, so the band's guarantees hold.
   ============================================================================ */

/* ── Shared shell vocabulary ───────────────────────────────────────────────
   Radii and shadows are defined once. The old file's boxiness came from having
   no radius scale at all, so every surface defaulted to a hard corner. */
.light-band {
  --rs-r-sm: 10px;    /* chips, checkbox rows            */
  --rs-r-md: 13px;    /* buttons, inputs                 */
  --rs-r-lg: 17px;    /* cards, control groups           */
  --rs-r-xl: 22px;    /* panels, the deck, the hero      */
  --rs-pill: 999px;

  /* Layered rather than a single hard drop — depth without heaviness. */
  --rs-shadow-sm: 0 1px 2px rgba(20, 27, 54, .04), 0 2px 6px rgba(20, 27, 54, .04);
  --rs-shadow-md: 0 1px 2px rgba(20, 27, 54, .04), 0 6px 16px rgba(20, 27, 54, .07);
  --rs-shadow-lg: 0 2px 4px rgba(20, 27, 54, .04), 0 14px 38px rgba(20, 27, 54, .10);
  --rs-glow: 0 6px 20px rgba(79, 73, 208, .28);

  --rs-ease: cubic-bezier(.22, .61, .36, 1);
  --rs-t: 180ms var(--rs-ease);
}

/* ── Breadcrumb ───────────────────────────────────────────────────────────── */
.studio-breadcrumb {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .9rem;
  font: 600 .76rem/1 var(--font-body);
  letter-spacing: .01em;
}
.studio-breadcrumb a {
  color: var(--accent-bright);
  text-decoration: none;
  padding: .2rem .1rem;
  border-bottom: 1px solid transparent;
  transition: border-color var(--rs-t), color var(--rs-t);
}
.studio-breadcrumb a:hover { border-bottom-color: currentColor; }
.studio-breadcrumb span { color: var(--muted); }
/* Inside the dark hero the breadcrumb needs the bright end of the ramp. */
.studio-hero .studio-breadcrumb a { color: var(--accent-bright); }
.studio-hero .studio-breadcrumb span { color: var(--ink-2); }

/* ── Eyebrow / small-caps labels ──────────────────────────────────────────
   Was #8a642e — a muddy brown that failed on the band and needed an inline
   !important rescue. --gold is the band's AA-verified deep amber (5.6:1). */
.eyebrow,
.panel-heading p,
.preview-toolbar p,
.preset-deck p,
.capability-intro .eyebrow {
  margin: 0;
  color: var(--gold);
  font: 700 .68rem/1.2 var(--font-heading);
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ── HERO — a dark cinematic island in the daylight band ──────────────────
   `.cinematic-hero` is added in the markup so this inherits the site's shared
   hero treatment (and the dark-island gradient-text rule from v9.55.0). What is
   here is only the Studio's own composition on top of it. */
/* `.cinematic-hero` is the site's shared full-bleed hero: 100vw, 44vh min-height,
   flex + align-items:center, and an h1 capped at max-width:12ch. That is right for a
   landing page and wrong for a builder — it opened a ~250px empty void above the
   copy and wrapped "Resource Studio" onto two lines. Keep the shared dark treatment
   (and the full-bleed edge, which matches every other page); override only the
   proportions. Specificity 0,2,1 so these beat the 0,1,1 base rules regardless of
   stylesheet order. */
.studio-hero.cinematic-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2.4rem;
  min-height: 0;
  padding: clamp(2.4rem, 4vw, 3.4rem) clamp(1.4rem, 5vw, 4rem) clamp(2rem, 3.5vw, 2.8rem);
  isolation: isolate;
}
.studio-hero.cinematic-hero h1 {
  max-width: none;              /* was 12ch — the cause of the two-line title */
  margin: .3rem 0 .7rem;
  font-size: clamp(2.9rem, 6.4vw, 5.4rem);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.02em;
}
/* Soft accent bloom from the upper left, so the hero has depth without an image. */
.studio-hero::before {
  content: '';
  position: absolute;
  inset: -40% 30% 20% -20%;
  z-index: -1;
  background: radial-gradient(60% 60% at 30% 30%, rgba(139, 135, 244, .22), transparent 70%);
  pointer-events: none;
}
/* Fine grain — the cinematic texture used elsewhere on the site. */
.studio-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.30'/%3E%3C/svg%3E");
  pointer-events: none;
}
.studio-hero.cinematic-hero h1 { text-wrap: balance; }
.studio-hero > div > p:last-child {
  max-width: 46rem;
  margin: 0;
  color: var(--ink-2);
  font: 400 1.06rem/1.6 var(--font-body);
  text-wrap: pretty;
}

/* Proof chips — glass pills instead of hard-cornered outlines. */
.hero-proof { display: flex; flex-wrap: wrap; gap: .6rem; }
.hero-proof span {
  display: grid;
  gap: .15rem;
  min-width: 8.4rem;
  padding: .85rem 1.05rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--rs-r-lg);
  color: var(--ink-2);
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(6px);
  font: 500 .66rem/1.3 var(--font-body);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.hero-proof b {
  color: var(--ink);
  font: 400 1.3rem/1 var(--font-display);
  letter-spacing: 0;
  text-transform: none;
}

/* ── Capability catalog ───────────────────────────────────────────────────── */
.capability-catalog {
  display: grid;
  grid-template-columns: minmax(15rem, .7fr) minmax(0, 2fr);
  gap: 2.2rem;
  padding: clamp(1.6rem, 4vw, 2.8rem) clamp(1rem, 3vw, 2rem);
}
.capability-intro h2 {
  margin: .3rem 0 .5rem;
  color: var(--ink);
  font: 400 clamp(1.6rem, 3vw, 2.2rem)/1.12 var(--font-display);
}
.capability-intro p:last-child {
  margin: 0;
  color: var(--ink-2);
  font: 400 .95rem/1.6 var(--font-body);
}
.capability-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .9rem;
}
.capability-grid > * {
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--rs-r-lg);
  background: var(--surface);
  box-shadow: var(--rs-shadow-sm);
  transition: transform var(--rs-t), box-shadow var(--rs-t), border-color var(--rs-t);
}
.capability-grid > *:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: var(--rs-shadow-md);
}
.capability-grid h3 {
  margin: 0 0 .35rem;
  color: var(--ink);
  font: 600 .95rem/1.3 var(--font-heading);
}
.capability-grid p {
  margin: 0;
  color: var(--ink-2);
  font: 400 .82rem/1.5 var(--font-body);
}

/* ── Document shelf ────────────────────────────────────────────────────────
   Ready-made documents (syllabi, reference sheets) sit between "what you can
   create" and the builder, so the ready-made answer is found before a scholar
   starts configuring one. It borrows the catalog's two-column measure and the
   catalog's card chrome (.capability-grid) on purpose — a second card idiom on
   the same page would read as a second product. Cards are built by
   resource-document-library.js; every colour below is a token, and the course
   hue arrives via .course-alg1 / .course-geo / .course-ess on the card. */
.document-shelf {
  display: grid;
  grid-template-columns: minmax(15rem, .7fr) minmax(0, 2fr);
  gap: 2.2rem;
  padding: 0 clamp(1rem, 3vw, 2rem) clamp(1.6rem, 4vw, 2.8rem);
}
.doc-groups { display: grid; gap: 1.5rem; }
/* auto-FILL, not auto-fit: a group holding a single document keeps a card's
   width instead of stretching across the whole shelf, so every group's cards
   line up on the same column grid. */
.doc-grid { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.doc-group-title {
  margin: 0 0 .25rem;
  color: var(--ink);
  font: 600 1.02rem/1.3 var(--font-heading);
}
.doc-group-blurb {
  margin: 0 0 .8rem;
  max-width: 56ch;
  color: var(--ink-2);
  font: 400 .85rem/1.55 var(--font-body);
}
.doc-card { display: flex; flex-direction: column; gap: .4rem; }
/* Qualified by .doc-card on purpose: these are <p> inside .capability-grid, and
   `.capability-grid p` (0,1,1) outranks a bare `.doc-course` (0,1,0). Without
   the extra class the eyebrow silently renders as grey body text instead of the
   course-accent mono label. */
.doc-card .doc-course {
  margin: 0;
  color: var(--accent);
  font: 600 .66rem/1.2 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.doc-card h4 {
  margin: 0;
  color: var(--ink);
  font: 600 .98rem/1.3 var(--font-heading);
}
.doc-card .doc-summary {
  margin: 0 0 .25rem;
  color: var(--ink-2);
  font: 400 .82rem/1.5 var(--font-body);
}
.doc-links {
  display: grid;
  gap: .4rem;
  margin: auto 0 0;      /* pin the links to the card floor so rows align */
  padding: 0;
  list-style: none;
}
.doc-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .55rem;
  min-height: 44px;      /* touch target */
  padding: .5rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--rs-r-md);
  background: var(--surface-2);
  color: var(--ink);
  font: 500 .84rem/1.35 var(--font-body);
  text-decoration: none;
  transition: border-color var(--rs-t), background var(--rs-t), color var(--rs-t);
}
.doc-link:hover {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--accent);
}
.light-band .doc-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.doc-kind {
  flex: none;
  padding: .15rem .4rem;
  border-radius: var(--rs-r-sm);
  background: var(--accent-tint);
  color: var(--accent);
  font: 600 .6rem/1.4 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.doc-link-label { flex: 1 1 auto; min-width: 0; }
.doc-note {
  flex: none;
  color: var(--muted);
  font: 400 .7rem/1.3 var(--font-mono);
}
.doc-fallback {
  margin: 0;
  color: var(--ink-2);
  font: 400 .85rem/1.55 var(--font-body);
}

/* ── Layout ───────────────────────────────────────────────────────────────── */
.studio-layout {
  display: grid;
  grid-template-columns: minmax(20rem, 26.5rem) minmax(0, 1fr);
  align-items: start;
  gap: 1.4rem;
  padding: 0 clamp(.7rem, 2.5vw, 1.6rem) clamp(1.6rem, 4vw, 2.6rem);
}

/* ── Control deck ─────────────────────────────────────────────────────────── */
.control-deck {
  position: sticky;
  top: calc(var(--header-height) + 1rem);
  max-height: calc(100vh - var(--header-height) - 2rem);
  overflow: hidden auto;
  border: 1px solid var(--line);
  border-radius: var(--rs-r-xl);
  background: var(--surface);
  box-shadow: var(--rs-shadow-lg);
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.control-deck::-webkit-scrollbar { width: 10px; }
.control-deck::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: var(--rs-pill);
  background-clip: content-box;
  background-color: var(--line-strong);
}

/* ── Studio switcher — a proper segmented control ─────────────────────────
   The single biggest source of the old "boxy" read: five square buttons with
   `border:0` on a flat grey slab. Now a pill track with a raised white thumb. */
.studio-switcher {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.6rem, 1fr));
  gap: .25rem;
  padding: .4rem;
  border-bottom: 1px solid var(--line);
  border-radius: var(--rs-r-xl) var(--rs-r-xl) 0 0;
  background: var(--recessed);
}
.studio-switcher button {
  min-height: 2.5rem;
  padding: .4rem .5rem;
  border: 0;
  border-radius: var(--rs-pill);
  color: var(--muted);
  background: transparent;
  font: 600 .78rem/1.2 var(--font-heading);
  cursor: pointer;
  transition: color var(--rs-t), background var(--rs-t), box-shadow var(--rs-t);
}
.studio-switcher button:hover { color: var(--ink); background: rgba(255, 255, 255, .6); }
.studio-switcher button[aria-selected='true'] {
  color: var(--accent);
  background: var(--surface);
  box-shadow: var(--rs-shadow-sm);
}

/* ── Focus — one visible accent ring everywhere ───────────────────────────
   Replaces a hard 3px outline with a softer ring that still clears AA. */
.light-band button:focus-visible,
.light-band input:focus-visible,
.light-band select:focus-visible,
.light-band textarea:focus-visible,
.light-band [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--rs-r-md);
}

/* ── Panels & fields ──────────────────────────────────────────────────────── */
.control-panel {
  display: grid;
  gap: .85rem;
  padding: 1.15rem 1.2rem;
  border-bottom: 1px solid var(--line);
}
.control-panel:last-of-type { border-bottom: 0; }
.panel-heading h2 {
  margin: .2rem 0 0;
  color: var(--ink);
  font: 400 1.5rem/1.1 var(--font-display);
}
.panel-heading.compact h2 { font-size: 1.18rem; }

.control-panel label {
  display: grid;
  gap: .35rem;
  color: var(--ink);
  font: 600 .74rem/1.3 var(--font-heading);
  letter-spacing: .01em;
}
.control-panel input,
.control-panel select,
.control-panel textarea {
  width: 100%;
  min-height: 2.6rem;
  padding: .6rem .75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--rs-r-md);
  color: var(--ink);
  background: var(--surface);
  box-shadow: inset 0 1px 2px rgba(20, 27, 54, .04);
  font: 500 .88rem/1.35 var(--font-body);
  transition: border-color var(--rs-t), box-shadow var(--rs-t);
}
.control-panel input:hover,
.control-panel select:hover,
.control-panel textarea:hover { border-color: var(--accent); }
.control-panel textarea { resize: vertical; min-height: 4.5rem; }

.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.field-grid.four-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.control-group {
  display: grid;
  gap: .75rem;
  padding: .95rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--rs-r-lg);
  background: var(--surface-2);
}

.control-panel fieldset {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .3rem;
  margin: 0;
  padding: .8rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--rs-r-lg);
  background: var(--surface-2);
}
.control-panel legend {
  padding: 0 .35rem;
  color: var(--muted);
  font: 700 .66rem/1 var(--font-heading);
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* Checkbox rows become tactile targets rather than bare text. */
.control-panel label.check {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin: -.1rem;
  padding: .4rem .5rem;
  border-radius: var(--rs-r-sm);
  color: var(--ink-2);
  font: 500 .78rem/1.4 var(--font-body);
  cursor: pointer;
  transition: background var(--rs-t), color var(--rs-t);
}
.control-panel label.check:hover { color: var(--ink); background: var(--surface); }
.control-panel label.check input {
  width: 1.05rem;
  min-height: 1.05rem;
  margin: .15rem 0 0;
  border-radius: 5px;
  accent-color: var(--accent);
  cursor: pointer;
}

.field-help,
.label-note {
  margin: 0;
  color: var(--muted);
  font: 400 .73rem/1.5 var(--font-body);
}

/* Guidance / evidence notes — rounded accent bar, not a hard 3px edge. */
.method-guidance,
.curriculum-evidence {
  position: relative;
  padding: .85rem 1rem .85rem 1.15rem;
  overflow: hidden;
  border-radius: var(--rs-r-md);
  color: var(--ink-2);
  background: rgba(79, 73, 208, .06);
  font: 400 .8rem/1.55 var(--font-body);
}
.method-guidance::before,
.curriculum-evidence::before {
  content: '';
  position: absolute;
  inset: .5rem auto .5rem 0;
  width: 3px;
  border-radius: var(--rs-pill);
  background: var(--accent);
}

/* ── Action dock ──────────────────────────────────────────────────────────── */
.action-dock {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  padding: 1rem 1.2rem 1.2rem;
  border-top: 1px solid var(--line);
  background: linear-gradient(to bottom, rgba(255, 255, 255, .85), var(--surface) 45%);
  backdrop-filter: blur(8px);
}
.action-dock button {
  min-height: 2.7rem;
  padding: .5rem .9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--rs-r-md);
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--rs-shadow-sm);
  font: 600 .8rem/1.2 var(--font-heading);
  cursor: pointer;
  transition: transform var(--rs-t), box-shadow var(--rs-t),
              border-color var(--rs-t), color var(--rs-t);
}
.action-dock button:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: var(--rs-shadow-md);
}
.action-dock button:active { transform: translateY(0); box-shadow: var(--rs-shadow-sm); }

/* The one confident element on the page: print. */
.action-dock .primary-action {
  grid-column: 1 / -1;
  min-height: 3rem;
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), #6B3FCB);
  box-shadow: var(--rs-glow);
  font-size: .88rem;
  letter-spacing: .01em;
}
.action-dock .primary-action:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(79, 73, 208, .38);
}
.action-dock p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font: 400 .72rem/1.5 var(--font-body);
  text-align: center;
}

/* ── Preview stage — a recessed desk so the paper reads as paper ──────────── */
.preview-stage {
  min-width: 0;
  padding: clamp(1rem, 2.5vw, 1.6rem);
  border: 1px solid var(--line);
  border-radius: var(--rs-r-xl);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, .7), transparent 60%),
    var(--void);
  box-shadow: inset 0 1px 3px rgba(20, 27, 54, .05);
}
.preview-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0 .2rem;
}
.preview-toolbar h2 {
  margin: .15rem 0 0;
  color: var(--ink);
  font: 400 1.45rem/1.1 var(--font-display);
}
.preview-toolbar span {
  padding: .3rem .6rem;
  border: 1px solid var(--line);
  border-radius: var(--rs-pill);
  color: var(--muted);
  background: var(--surface);
  font: 500 .68rem/1 var(--font-mono);
}
.page-stack { display: grid; justify-content: center; gap: 1.4rem; overflow: auto; }

/* ── Preset deck ──────────────────────────────────────────────────────────── */
.preset-deck {
  display: grid;
  gap: .7rem;
  padding: 1.15rem 1.2rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(79, 73, 208, .05), rgba(122, 90, 15, .04));
}
.preset-deck h2 {
  margin: .15rem 0 0;
  color: var(--ink);
  font: 400 1.24rem/1.15 var(--font-display);
}
.preset-deck label {
  display: grid;
  gap: .3rem;
  color: var(--ink);
  font: 600 .72rem/1.3 var(--font-heading);
}
.preset-deck select {
  min-height: 2.5rem;
  padding: .55rem .7rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--rs-r-md);
  color: var(--ink);
  background: var(--surface);
  font: 500 .84rem/1.3 var(--font-body);
}
.preset-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.preset-actions button {
  min-height: 2.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--rs-r-md);
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--rs-shadow-sm);
  font: 600 .76rem/1.2 var(--font-heading);
  cursor: pointer;
  transition: transform var(--rs-t), border-color var(--rs-t),
              color var(--rs-t), box-shadow var(--rs-t);
}
.preset-actions button:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: var(--rs-shadow-md);
}

/* ── The paper itself gets a truer shadow on screen only ──────────────────
   .print-page geometry stays in resource-studio.css (it is the printed page);
   this only softens how it sits on the desk in the preview. */
@media screen {
  .preview-stage .print-page {
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(20, 27, 54, .10), 0 18px 40px rgba(20, 27, 54, .14);
  }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .studio-hero { grid-template-columns: 1fr; gap: 1.6rem; }
  .hero-proof { display: flex; }
  .studio-layout { grid-template-columns: 1fr; }
  .control-deck { position: static; max-height: none; }
  .action-dock { position: static; }
}
@media (max-width: 900px) {
  .capability-catalog,
  .document-shelf { grid-template-columns: 1fr; }
  .document-shelf { gap: 1.2rem; }
}
@media (max-width: 560px) {
  .field-grid, .field-grid.four-up { grid-template-columns: 1fr; }
  .control-panel fieldset { grid-template-columns: 1fr; }
  .studio-hero { margin: 0; border-radius: var(--rs-r-lg); }
  .hero-proof span { min-width: 0; flex: 1 1 8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .light-band *,
  .light-band *::before,
  .light-band *::after { transition: none !important; }
  .capability-grid > *:hover,
  .action-dock button:hover,
  .preset-actions button:hover { transform: none; }
}

/* Screen chrome never prints. */
@media print {
  .studio-hero, .capability-catalog, .document-shelf, .control-deck,
  .preview-toolbar, .studio-breadcrumb { display: none !important; }
  .studio-layout { display: block; padding: 0; }
  .preview-stage {
    padding: 0; border: 0; border-radius: 0;
    background: #fff; box-shadow: none;
  }
}