/* Whirlwright workbench client — the Bench (WB-17, under the OBJECTS-NOT-PAGES
   ruling of 12 July 2026). The child never uses a webpage; the child uses the
   Guild's instruments. The whole shell is ONE piece of instrument furniture:
   one ground, one border, ONE shadow, and courses split by hairlines — the
   furniture language the site's Vitrine landed (SITE-15), joined here as a
   maker's bench. The six stages are fitted stations on it; the spine is the
   bench's own rail; controls live on instrument rails; placards replace
   headers; the living preview sits in its own bench vitrine.
   P7 still owns the real visual system; the palette is the spike's parchment.
   Accessibility floor (UX spec §9 + BDA amendment): AA contrast, visible
   focus, real text, colour never the only channel, ≥44px targets on the
   rails, prefers-reduced-motion honoured. */

:root{
  --wall:#e0d2b2;                 /* the workshop wall the bench stands against */
  --parchment:#f2e9d6; --parchment-deep:#e9ddc3;
  --ink:#2b2620; --ink-soft:#57503f;
  --rule:#b7a888; --edge:#9b8a68; --ember:#a34d2a; --brass:#8a6d3b; --card:#faf4e6;
  --course-pad:26px;              /* one joinery measure: every course's side padding */
  --shadow:0 3px 14px rgba(43,38,32,.16), 0 1px 0 rgba(43,38,32,.10);  /* the ONE shadow */
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
/* The BDA type floor (UX spec §9, SEA-18 amendment — binding minimums this
   order enforces for the first time): BODY text is sans-serif at 12–14 pt
   equivalent (≥16px), line spacing ≥1.5, left-aligned ragged-right,
   emphasis by bold never italic, grounds off-white. Engraved SHORT LABELS
   (placards, mastheads, plates, closings) keep the Guild's serif small-caps
   — the floor reserves caps and set forms for short labels and diegetic
   forms, and the Record book carries its own pinned sheet. */
body{
  background:var(--wall); color:var(--ink);
  font-family:Verdana,'Trebuchet MS','Segoe UI',-apple-system,sans-serif;
  line-height:1.55;
}
/* the engraved label voice — serif small-caps, short labels only */
header.masthead .guild, header.masthead h1, header.masthead .docket,
nav.stages button, section.card h2, section.card h3.slot-label,
.station-ctl .stance-name, .stance-card h3, .sealed .closing{
  font-family:Georgia,'Times New Roman',serif;
}
/* the briefs' *emphasis* renders bold, never italic (BDA floor; the copy
   modules are untouched — this is presentation of the same verbatim text) */
em{ font-style:normal; font-weight:700; }

/* ——— THE BENCH: one cabinet. One ground, one border, one shadow; nothing
   child-facing renders outside it, and nothing inside it floats. ——— */
main{
  max-width:1160px; margin:26px auto 70px;
  background:var(--card);
  border:1px solid var(--edge);
  border-radius:3px;
  box-shadow:var(--shadow);
}

/* The maker's plate: the bench's top fascia, engraved — not a page header. */
header.masthead{
  text-align:center; background:var(--parchment-deep);
  border-bottom:1px solid var(--rule); border-radius:3px 3px 0 0;
  padding:18px var(--course-pad) 12px; margin:0;
}
header.masthead .guild{ font-variant:small-caps; letter-spacing:.28em; font-size:13px; color:var(--ink-soft); }
header.masthead h1{ font-size:24px; font-weight:normal; margin:4px 0 2px; letter-spacing:.04em; }
header.masthead .docket{ font-size:13px; color:var(--ink-soft); font-style:italic; }

/* The dev-build tag (UX spec §7): deliberately NON-diegetic — a workshop
   tag clipped to the bench, absent entirely under the service adapter. */
.dev-banner{
  border:0; border-bottom:1px dashed var(--ember);
  color:var(--ember); background:var(--card);
  font-size:13px; padding:8px var(--course-pad); margin:0; text-align:center;
}
.dev-banner:empty{ display:none; }

/* ——— THE RAIL: the spine as the bench's own rail of fitted stations.
   Plates joined edge to edge by hairlines — drawers that open as they seal:
   a locked station is a closed drawer; the drawn-open one stands proud on
   the card ground; a sealed one carries its brass engraving. ——— */
nav.stages{
  display:flex; gap:0; flex-wrap:wrap; margin:0;
  background:var(--parchment-deep); border-bottom:1px solid var(--rule);
}
nav.stages button{
  flex:1 1 130px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px; min-height:58px; padding:9px 8px 7px;
  font-family:inherit; font-size:13px; color:var(--ink);
  background:transparent; border:0; border-left:1px solid var(--rule);
  border-radius:0; cursor:pointer;
}
nav.stages button:first-child{ border-left:0; }
nav.stages .station-numeral{ font-size:15px; letter-spacing:.1em; color:var(--ink-soft); }
nav.stages .station-name{ font-variant:small-caps; letter-spacing:.14em; font-size:12.5px; }
nav.stages button[aria-current="true"]{
  background:var(--card);
  box-shadow:inset 0 0 0 1px var(--ink);
}
nav.stages button.locked{ opacity:.45; cursor:default; }
nav.stages button.sealed::after{
  content:" · sealed"; color:var(--brass);
  font-variant:small-caps; letter-spacing:.08em;
}
nav.stages button:focus-visible{ outline:2px solid var(--ink); outline-offset:-4px; }

/* ——— COURSES: each spine section is a fitted course of the one cabinet —
   no floating cards, no private borders, no private shadows. ——— */
section.card{
  background:transparent; border:0; border-radius:0; box-shadow:none;
  padding:18px var(--course-pad) 24px; margin:0;
  border-top:1px solid var(--rule);
}
#stage-root > section.card:first-child{ border-top:0; }
main > *:last-child, #stage-root > section.card:last-child{ border-radius:0 0 3px 3px; }

/* Placards replace headers: the engraved strip on the course's fascia. */
section.card h2{
  margin:-18px calc(-1 * var(--course-pad)) 16px;
  padding:8px var(--course-pad) 6px;
  background:var(--parchment-deep); border-bottom:1px solid var(--rule);
  font-size:13.5px; font-variant:small-caps; letter-spacing:.22em;
  font-weight:normal; color:var(--ink-soft);
}
section.card h3.slot-label{
  font-size:13px; font-variant:small-caps; letter-spacing:.18em; font-weight:normal;
  color:var(--ink-soft); margin:14px 0 6px;
}
.hidden{ display:none !important; }
p{ margin:.5em 0; }
.quiet{ color:var(--ink-soft); font-size:16px; }  /* sentence class: body floor, roman */
.question{ font-size:18px; }
blockquote{ margin:0; font-size:17px; line-height:1.65; }

/* The prediction's ledger rows: joined, hairline-ruled, no floating boxes. */
label.option{
  display:block; padding:11px 14px; margin:0;
  border:1px solid var(--rule); border-top:0; border-radius:0;
  cursor:pointer; background:var(--parchment-deep);
}
section.card p + label.option, section.card label.option:first-of-type{ border-top:1px solid var(--rule); }
label.option + label.option{ border-top:0; }
label.option:hover{ background:var(--card); }
label.option:focus-within{ outline:2px solid var(--ink); outline-offset:-3px; }
label.option input{ margin-right:10px; }
label.option.chosen{ background:var(--card); box-shadow:inset 0 0 0 2px var(--brass); }

button.bench-btn{
  font-family:inherit; font-size:15px; background:var(--ink); color:var(--parchment);
  border:none; border-radius:2px; padding:10px 22px; min-height:44px; cursor:pointer; letter-spacing:.04em;
}
button.bench-btn:disabled{ opacity:.35; cursor:default; }
button.bench-btn:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
button.bench-btn.send{ margin-top:12px; font-size:16px; padding:12px 28px; }

.reveal{ margin-top:16px; border-top:1px solid var(--rule); padding-top:14px; }
.bench-says{ font-size:17px; }
.bench-status{ margin-top:12px; }

/* ——— WINDOWS AND RAILS: the glass is hers alone; every control lives on
   an opaque instrument rail below it, never over it. A course's main canvas
   runs the cabinet's full width between hairlines. ——— */
canvas.bench-canvas{
  display:block; width:100%; height:auto; background:var(--parchment-deep);
  border:1px solid var(--rule); border-radius:0; touch-action:none; cursor:grab;
}
section.card > div > canvas.bench-canvas,
section.card > canvas.bench-canvas{
  width:calc(100% + 2 * var(--course-pad));
  margin:14px calc(-1 * var(--course-pad)) 0;
  border-left:0; border-right:0;
}

/* The instrument rail: bays joined by hairline verticals on one fascia. */
.bench-controls{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:14px;
  border:1px solid var(--rule); background:var(--parchment-deep);
}
section.card > div > .bench-controls,
section.card > .bench-controls{
  margin-left:calc(-1 * var(--course-pad)); margin-right:calc(-1 * var(--course-pad));
  border-left:0; border-right:0;
}
.station-ctl{
  border:1px solid var(--rule); background:var(--parchment-deep);
  border-radius:0; padding:12px 16px; text-align:center;
}
.bench-controls > .station-ctl{ border:0; border-left:1px solid var(--rule); }
.bench-controls > .station-ctl:first-child{ border-left:0; }
.station-ctl .stance-name{ font-variant:small-caps; letter-spacing:.12em; font-size:14px; margin-bottom:6px; }
.station-ctl label{ font-size:13px; color:var(--ink-soft); display:block; }
.station-ctl input[type=range]{ width:100%; accent-color:var(--brass); }
.station-ctl .note{ font-size:16px; color:var(--ember); min-height:24px; margin-top:4px; }
.station-ctl button{
  font-family:inherit; font-size:13px; background:transparent; border:1px solid var(--ink-soft);
  color:var(--ink); border-radius:2px; padding:4px 12px; min-height:44px; min-width:44px;
  cursor:pointer; margin-top:4px;
}
.station-ctl button.alert{ border-color:var(--ember); color:var(--ember); }
.station-ctl button:focus-visible{ outline:2px solid var(--ink); outline-offset:1px; }
.station-ctl .control-row, .station-ctl .bench-controls{
  margin-left:0; margin-right:0; border:1px solid var(--rule);
}
.control-row{
  margin-top:14px; border:1px solid var(--rule); background:var(--parchment-deep);
  border-radius:0; padding:10px 18px; display:flex; align-items:center; gap:16px;
}
section.card > div > .control-row,
section.card > .control-row{
  margin-left:calc(-1 * var(--course-pad)); margin-right:calc(-1 * var(--course-pad));
  border-left:0; border-right:0; padding:10px var(--course-pad);
}
.control-row label{ font-size:13px; color:var(--ink-soft); white-space:nowrap; }
.control-row input[type=range]{ flex:1; accent-color:var(--brass); }
.control-row button{ min-height:44px; min-width:44px; }

/* Joinery: where a window and its rails are adjacent on the course, they
   join on one shared hairline — courses split by hairlines, never gaps. */
section.card > div > canvas.bench-canvas + .control-row,
section.card > div > canvas.bench-canvas + .bench-controls,
section.card > div > .bench-controls + canvas.bench-canvas,
section.card > div > .control-row + canvas.bench-canvas,
section.card > div > .control-row + .bench-controls,
section.card > div > .bench-controls + .control-row,
section.card > div > .control-row + .control-row{ margin-top:-1px; }

.gauge{ height:12px; border:1px solid var(--ink-soft); border-radius:2px; background:var(--card); overflow:hidden; margin-top:6px; }
.gauge > div{ height:100%; background:var(--brass); }
/* alert is never colour alone: the fill changes pattern as well as tone */
.gauge.alert > div{
  background:repeating-linear-gradient(135deg, var(--ember) 0 5px, var(--card) 5px 8px);
}

/* The commit's fitted drawer fronts: one run of bays, hairline-divided;
   the chosen one carries the bench's one selection engraving. */
.stance-cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:6px 0 12px;
  border:1px solid var(--rule);
}
.stance-card{
  border:0; border-left:1px solid var(--rule); background:var(--parchment-deep);
  border-radius:0; padding:14px 16px; cursor:pointer;
}
.stance-card:first-child{ border-left:0; }
.stance-card:hover{ background:var(--card); }
.stance-card:focus-visible{ outline:2px solid var(--ink); outline-offset:-4px; }
.stance-card.selected{ background:var(--card); box-shadow:inset 0 0 0 2px var(--brass); }
.stance-card.unchosen{ opacity:.4; cursor:default; }
.stance-card h3{ margin:0 0 6px; font-size:15px; font-variant:small-caps; letter-spacing:.14em; font-weight:normal; }
.stance-card p{ font-size:16px; color:var(--ink-soft); margin:0; }

.ceremony{ border-top:1px solid var(--rule); padding-top:16px; margin-top:10px; }
.ceremony-copy{ font-size:16px; }
.card.peak .ceremony-copy{ font-size:17px; line-height:1.7; }
.sealed .feedback{
  font-size:17px; line-height:1.65; border-left:3px solid var(--brass);
  padding-left:16px; margin:10px 0 14px;
}
.sealed .closing{ font-variant:small-caps; letter-spacing:.16em; color:var(--ink-soft); font-size:14px; }
.fixed-notice{ font-size:16px; border:1px solid var(--rule); background:var(--parchment-deep); padding:12px 16px; border-radius:0; }
.decline{ color:var(--ember); font-size:16px; min-height:24px; }
input.name-field{
  font-family:inherit; font-size:18px; padding:10px 14px; width:min(360px,100%);
  border:1px solid var(--ink-soft); border-radius:2px; background:var(--card); color:var(--ink);
}
input.name-field:focus-visible{ outline:2px solid var(--ink); outline-offset:1px; }
.working-name{ border-top:1px solid var(--rule); margin-top:14px; padding-top:14px; }

/* ——— THE BENCH VITRINE (WB-17): the living preview in its own cabinet on
   the bench — the site's landed Vitrine language (one border, one shadow,
   one background; courses split by hairlines, never gaps: window · placard ·
   instrument rail · rail foot), joined in the bench's own materials. ——— */
.bench-vitrine{
  margin:16px 0 0;
  background:var(--card); border:1px solid var(--edge); border-radius:3px;
  box-shadow:var(--shadow); overflow:hidden;
}
.bench-vitrine .vitrine-window{ background:var(--parchment-deep); border-bottom:1px solid var(--rule); }
.bench-vitrine .vitrine-window canvas.bench-canvas{
  width:100%; margin:0; border:0; border-radius:0;
}
.bench-vitrine .vitrine-placard{
  margin:0; padding:8px 16px; border-bottom:1px solid var(--rule);
}
.bench-vitrine .vitrine-rail{
  display:flex; gap:14px; align-items:center; margin:0; padding:10px 16px;
  border-bottom:1px solid rgba(183,168,136,.55);
}
.bench-vitrine .vitrine-foot{ margin:0; padding:7px 16px 9px; font-size:13px; }
.preview-ctl{ display:flex; gap:14px; align-items:center; margin-top:14px; }
.preview-status{ margin-top:10px; }
.card.preview canvas.bench-canvas{ cursor:default; }

/* The Winding Grammar (WB-16 amendment) — one engraving for every pressed,
   held or engaged control on the bench: selection, toggle, hold and wind
   alike (the shared rule the audit ordered; it is the whole of the visible
   held state, so no control carries a private one). */
button[aria-pressed="true"]{
  border-color:var(--ink) !important;
  box-shadow:inset 0 0 0 2px var(--brass);
  background:var(--card);
}
button.bench-btn[aria-pressed="true"]{
  background:var(--ink); color:var(--parchment);
}

/* The wind control: touch-action rides the CONTROL, never the page. */
.wind-ctl{ display:inline-flex; gap:10px; align-items:center; }
button.wind-btn{ touch-action:none; user-select:none; -webkit-user-select:none; }
canvas.wind-key-gauge{
  width:50px; height:50px; flex:0 0 auto;
  background:var(--card); border:1px solid var(--rule); border-radius:50%;
}

/* Engraved key instructions: real text, shown while the instrument has the
   keys' attention (M5 — schemes are announced, never secret). */
.key-note{ color:var(--ink-soft); font-size:16px; min-height:22px; margin:4px 0 0; }

@media (max-width:760px){
  main{ margin:0 0 40px; border-left:0; border-right:0; border-radius:0; }
  header.masthead{ border-radius:0; }
  .bench-controls,.stance-cards{ grid-template-columns:1fr; }
  .bench-controls > .station-ctl, .stance-cards > .stance-card{ border-left:0; border-top:1px solid var(--rule); }
  .bench-controls > .station-ctl:first-child, .stance-cards > .stance-card:first-child{ border-top:0; }
}
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
}