/* PLAIT.tech — the shell and the stages (marketing/DESIGN_CONTRACT.md v2, S1.12 "the flagship pass").
   Tokens only (tokens.css): no colour, size, radius or shadow that is not a token; every length is on --unit (the scale law).
   Order: base · type · controls · shell · the stage frame · primitives · compositions · the foot · reflow.
   The viewer, the sheet and the document body live in viewer.css (shared with the app). Legacy islands still load site.css. */

/* ── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh;
  font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--leading-body);
  color: var(--ink); background: var(--surface);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--brand-lifted); outline-offset: 2px; border-radius: var(--radius-xs); }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--brand); color: var(--white); padding: var(--space-3) var(--space-5); border-radius: 0 0 var(--radius-md) 0; }
.skip-link:focus { left: 0; color: var(--white); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── The page grid: 12 canvas columns between two gutter columns (the gutters absorb the window) ── */
:root {
  --colw: calc((var(--canvas-w) - 11 * var(--stage-col-gap)) / 12);
  --gutter-col: minmax(calc(var(--gutter) - 10px), 1fr);   /* −10px: a scrollbar never forces a horizontal scroll */
}

/* ── Type roles ─────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
.eyebrow, .label, .kicker {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-size: var(--text-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; line-height: 1;
  color: var(--brand);
}
.eyebrow::before { content: ''; width: calc(28 * var(--unit)); border-top: 2px solid var(--brand); }
.label.faint, .kicker.faint { color: var(--ink-faint); }
.display { font-size: var(--text-display); font-weight: 600; line-height: var(--leading-display); letter-spacing: var(--tracking-display); color: var(--ink); text-wrap: balance; }   /* SemiBold display everywhere (round sixteen) */
.display .accent { color: var(--brand); }   /* one accent word, the hero headline only */
.stage.home .display { font-size: var(--text-hero); line-height: 0.98; letter-spacing: -0.035em; max-width: none; }
.stage.home .stage-copy { gap: var(--space-6); }   /* the hero scale: display 92 · lede 24 · body 18 · rhythm 24 */
.stage.home .lede { font-size: var(--text-hero-lede); line-height: 1.4; }
.stage.home .body { font-size: var(--text-hero-body); line-height: 1.55; }
.btn .arrow { margin-left: var(--space-2); }
.h2 { font-size: var(--text-h2); font-weight: 600; line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); color: var(--ink); text-wrap: balance; }
.h3 { font-size: var(--text-h3); font-weight: 600; line-height: 1.2; color: var(--ink); }
.h4 { font-size: var(--text-h4); font-weight: 600; line-height: 1.3; color: var(--ink); }
.lede { font-size: var(--text-lede); line-height: 1.45; color: var(--ink-muted); text-wrap: pretty; }
.body { font-size: var(--text-body); line-height: var(--leading-body); color: var(--ink); }
.small { font-size: var(--text-small); line-height: 1.5; }
.muted { color: var(--ink-muted); }
.prose { max-width: var(--maxw-prose); }
.callout { border-left: 3px solid var(--brand); background: var(--surface-soft); padding: var(--space-3) var(--space-4); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: var(--text-small); line-height: 1.5; color: var(--ink); }
.callout strong { font-weight: 600; }
.caption { font-size: var(--text-label); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-faint); }
.placeholder { border: 1px dashed var(--line-strong); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--text-small); line-height: 1.5; color: var(--ink-muted); }
.placeholder b { display: block; font-size: var(--text-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--space-1); }

/* ── Controls ───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control); padding: 0 var(--space-6); border-radius: var(--radius-full); border: 1px solid transparent;
  font-size: var(--text-small); font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-hover) ease, color var(--dur-hover) ease, border-color var(--dur-hover) ease;
}
.btn-primary { background: var(--brand); color: var(--white); }
.btn-primary:hover { background: var(--brand-dark); color: var(--white); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--brand); color: var(--brand-dark); }
.btn-ghost { background: transparent; color: var(--brand-dark); padding: 0 var(--space-3); }
.btn-ghost:hover { text-decoration: underline; }
.btn-icon { width: var(--control); padding: 0; }
.btn svg { width: calc(16 * var(--unit)); height: calc(16 * var(--unit)); flex: none; }
.btn .ext { width: calc(14 * var(--unit)); height: calc(14 * var(--unit)); opacity: .8; }
.chip {
  display: inline-flex; align-items: center; min-height: calc(36 * var(--unit)); padding: 0 var(--space-4); border-radius: var(--radius-full);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-muted); font-size: var(--text-small); font-weight: 500; line-height: 1;
}
.chip[aria-pressed="true"], .chip.selected, .chip[aria-current="page"] { background: var(--tint-brand-8); color: var(--brand-dark); border-color: var(--line-strong); font-weight: 600; }
.chip .num { font-style: normal; font-size: var(--text-label); font-weight: 600; letter-spacing: .04em; color: var(--brand); margin-right: var(--space-2); font-variant-numeric: tabular-nums; }
.text-link { display: inline-flex; align-items: center; min-height: var(--control); padding: 0 var(--space-3); font-size: var(--text-body-compact); font-weight: 500; color: var(--ink); }
.text-link:hover { color: var(--brand-dark); }
.aux-link { display: inline-flex; align-items: center; min-height: calc(32 * var(--unit)); align-self: flex-start; font-size: var(--text-small); font-weight: 600; color: var(--brand-dark); }
.aux-link:hover { text-decoration: underline; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.actions .btn svg { color: currentColor; }
.aside-note { font-size: var(--text-label); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-faint); }

/* ── Shell — a marketing header: lockup · four text links · one control, on the canvas width ─────── */
.shell-header {
  position: sticky; top: 0; z-index: var(--z-header); height: var(--header-h);
  background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
}
.shell-bar {
  height: calc(var(--header-h) - 1px); width: var(--canvas-w); margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-6);
}
.plait-lockup { --mark-h: calc(16 * var(--unit)); --gap: .65; --cap: 1; display: inline-flex; align-items: center; gap: calc(var(--mark-h) * var(--gap)); min-height: var(--control); text-decoration: none; }
.plait-lockup img { height: var(--mark-h); width: auto; display: block; }
.plait-lockup .wordmark { font-family: var(--font-sans); font-weight: 600; font-size: calc(var(--mark-h) * var(--cap) / 0.734375); line-height: 1; letter-spacing: 0.14em; margin: 0 -0.14em 0 0; text-transform: uppercase; color: var(--lockup-ink); }
.plait-lockup.stacked { --mark-w: 320px; flex-direction: column; gap: 0; min-height: 0; }
.plait-lockup.stacked img { width: var(--mark-w); height: auto; }
.plait-lockup.stacked .wordmark { font-size: calc(var(--mark-w) * .17); margin-top: calc(var(--mark-w) * .05); }
.plait-lockup.stacked .tagline { font-family: var(--font-sans); font-weight: 400; font-size: calc(var(--mark-w) * .17 * .365); line-height: 1.2; margin: calc(var(--mark-w) * .03) 0 0; color: var(--lockup-muted); }
.primary-nav { display: flex; justify-content: center; align-items: center; min-width: 0; grid-column: 2; }
.primary-nav ul { display: flex; gap: var(--space-8); list-style: none; margin: 0; padding: 0; }
.nav-link {
  position: relative; display: inline-flex; align-items: center; min-height: var(--control); padding: 0 var(--space-1);
  font-size: var(--text-body-compact); font-weight: 500; color: var(--ink-muted); white-space: nowrap;
  transition: color var(--dur-hover) ease;
}
.nav-link:hover { color: var(--ink); }
.nav-link[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav-link[aria-current="page"]::after { content: ''; position: absolute; left: var(--space-1); right: var(--space-1); bottom: calc(6 * var(--unit)); height: 2px; background: var(--brand); border-radius: var(--radius-full); }
.shell-actions { display: flex; align-items: center; justify-content: flex-end; white-space: nowrap; }
.shell-actions .primary-slot { font-size: var(--text-body-compact); padding: 0 var(--space-6); }
.shell-actions .primary-slot[aria-current="page"] { background: var(--brand-dark); }
body.auth-pending .auth-only, body.auth-pending .guest-only { visibility: hidden; }
body.is-guest .auth-only { display: none !important; }
body.is-auth .guest-only { display: none !important; }

/* ── The stage frame — one grid for every page ────────────────────────────────────────────────────
   Rows: bar (Back · Next) · title (eyebrow · Resources) · lead · main · band · trail · foot. The bars anchor the top line;
   the foot sits on the window's bottom edge; the composition (main + band) is composed to fill the space between at the
   reference window, and the two spacers split whatever a differently shaped window leaves — never a box, never a column.
   Nothing inside a stage is stretched to fill: a field is designed to the height of the copy beside it (measured). */
.stage {
  position: relative; min-height: calc(100dvh - var(--header-h));
  display: grid;
  grid-template-columns: [full-start] var(--gutter-col) [c-start] repeat(12, [col-start] minmax(0, var(--colw))) [c-end] var(--gutter-col) [full-end];
  grid-template-rows: [bar-start] auto [bar-end title-start] auto [title-end lead-start] minmax(0, 1fr) [lead-end main-start] auto [main-end band-start] auto [band-end trail-start] minmax(0, 1fr) [trail-end foot-start] auto [foot-end];
  column-gap: var(--stage-col-gap); row-gap: 0;
  padding: calc(8 * var(--unit)) 0 0;
  align-content: start; align-items: stretch;
  overflow: hidden;
  opacity: 1; transition: opacity var(--dur-stage) ease;
}
.stage.is-leaving { opacity: 0; }
.context-bar { grid-column: c-start / c-end; grid-row: bar; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: calc(24 * var(--unit)); }
.title-bar { grid-column: c-start / c-end; grid-row: title; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: calc(20 * var(--unit)); margin: calc(10 * var(--unit)) 0 calc(6 * var(--unit)); }
.stage-back, .stage-next, .res-control {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 24px; padding: 0; border: 0; background: transparent;   /* 24 px real: a target floor never scales */
  font-size: var(--text-small); font-weight: 600; line-height: 1; color: var(--ink-muted); white-space: nowrap;
  transition: color var(--dur-hover) ease;
}
.stage-back::before { content: '←'; font-weight: 600; color: var(--brand); }
.stage-next { margin-left: auto; }
.stage-next::after { content: '→'; font-weight: 600; color: var(--brand); }
.stage-back:hover, .stage-next:hover, .res-control:hover, .res-control:focus-visible, .res-control[aria-expanded="true"] { color: var(--brand-dark); }
.res-control { margin-left: auto; }
.res-control svg { width: calc(16 * var(--unit)); height: calc(16 * var(--unit)); flex: none; color: var(--brand); }
.res-control .res-detail { display: inline-block; max-width: 0; overflow: hidden; opacity: 0; white-space: nowrap; font-weight: 500; color: var(--ink-muted); transition: max-width var(--dur-drawer) var(--ease-out), opacity var(--dur-hover) ease; }
.res-control .res-detail::before { content: '·'; margin: 0 var(--space-2); color: var(--line-strong); }
.res-control:hover .res-detail, .res-control:focus-visible .res-detail, .res-control[aria-expanded="true"] .res-detail { max-width: calc(360 * var(--unit)); opacity: 1; }

/* the two content rows */
.stage-copy, .stage-visual, .band-copy, .band-aside, .island-mount { grid-row: main; margin-top: var(--space-3); min-width: 0; }
.stage-copy { grid-column: c-start / span 6; display: flex; flex-direction: column; gap: var(--space-4); }
.stage-visual { grid-column: col-start 7 / c-end; display: flex; flex-direction: column; }
.stage-visual > * { width: 100%; }
.stage.dense .stage-copy { grid-column: c-start / span 5; }
.stage.dense .stage-visual { grid-column: col-start 6 / c-end; }
.stage-copy .display { max-width: 16ch; }
.stage-copy .lede { max-width: calc(640 * var(--unit)); }
.stage-copy .body { max-width: calc(580 * var(--unit)); }
.stage-copy .callout { max-width: calc(580 * var(--unit)); }
.stage-band { grid-row: band; grid-column: c-start / c-end; margin-top: var(--space-3); min-width: 0; }
.stage.band .band-copy { grid-column: c-start / span 5; display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.stage.band .band-copy .display { max-width: 16ch; }
.stage.band .band-copy > :last-child { margin-top: auto; }   /* the note sits on the aside's bottom line: one bottom line across the head */
.band-note { max-width: 48ch; }
.stage.band .band-aside { grid-column: col-start 6 / c-end; display: flex; flex-direction: column; gap: var(--space-3); }
.stage.band .stage-visual { grid-row: band; grid-column: c-start / c-end; margin-top: var(--space-3); }
.stage-visual > .field { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.island-mount { grid-column: c-start / c-end; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: var(--space-2) 0 var(--space-6); }
.island-mount > div { width: 100%; }
.island-mount noscript p { max-width: var(--maxw-prose); margin: 0 auto; text-align: center; color: var(--ink-muted); }

/* ── Primitives — the boxes every composition is built from (never stretched; content sets the height) ── */
.panel { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); min-width: 0; color: inherit; }
.panel-label { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; line-height: 1; color: var(--brand); }
.panel-label svg { width: calc(16 * var(--unit)); height: calc(16 * var(--unit)); flex: none; }
.panel-title { font-size: var(--text-h4); font-weight: 600; line-height: 1.3; color: var(--ink); text-wrap: balance; }
.panel-body { font-size: var(--text-small); line-height: 1.5; color: var(--ink-muted); }
.panel-rows { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: flex; flex-direction: column; }
.panel-rows li { display: flex; gap: var(--space-2); align-items: flex-start; min-height: calc(28 * var(--unit)); padding: var(--space-1) 0; border-top: 1px solid var(--line); font-size: var(--text-small); line-height: 1.45; color: var(--ink); }
.panel-rows li::before { content: ''; flex: none; width: calc(6 * var(--unit)); height: calc(6 * var(--unit)); margin-top: calc(7 * var(--unit)); border-radius: var(--radius-full); background: var(--brand); }
.panel-rows b { font-weight: 600; }
.panel-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); }
.panel-tags span { font-size: var(--text-label); font-weight: 500; letter-spacing: 0; text-transform: none; border: 1px solid var(--line); border-radius: var(--radius-full); padding: calc(3 * var(--unit)) var(--space-2); color: var(--ink-muted); background: var(--surface-soft); }
.panel-note { margin-top: auto; padding-top: var(--space-2); font-size: var(--text-label); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-faint); }
/* ── The backdrop (round sixteen, the founder's home reference): one tinted curve and two thin arcs echoing the mark's ring, behind a stage, clipped by it ── */
.plate { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-xl); background: var(--surface-soft); min-width: 0; }
.stage { isolation: isolate; }
.stage-backdrop { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.stage-backdrop i { position: absolute; display: block; border-radius: 50%; background: none; }   /* hairline geometry only — no wash, no fill, no gradient (founder, round sixteen) */
.stage-backdrop .arc-1 { width: calc(1180 * var(--unit)); height: calc(1180 * var(--unit)); right: calc(-520 * var(--unit)); top: calc(-860 * var(--unit)); border: 1px solid var(--tint-brand-12); }
.stage-backdrop .arc-2 { width: calc(760 * var(--unit)); height: calc(760 * var(--unit)); right: calc(-430 * var(--unit)); top: calc(280 * var(--unit)); border: 1px solid var(--line); }
/* ── The braid on the home: an open composition on the page ground (no plate) beside a hairline ── */
.figure { display: flex; flex-direction: column; gap: var(--space-4); height: 100%; min-width: 0; margin: 0; }   /* the open figure: head · body · foot line; no plate */
.figure-head { display: flex; flex-direction: column; gap: var(--space-2); }
.figure-mark { flex: 1; display: flex; align-items: center; justify-content: center; min-height: calc(200 * var(--unit)); padding: var(--space-2) 0; }
.figure-mark img { width: min(100%, calc(600 * var(--unit))); height: auto; }
.stage-visual.divided { position: relative; padding-left: var(--space-6); }   /* the open field past a hairline */
.stage-visual.divided::before { content: ''; position: absolute; left: calc(-0.5 * var(--stage-col-gap)); top: 0; bottom: 0; border-left: 1px solid var(--line); }
.plate-head { display: flex; flex-direction: column; gap: var(--space-2); }
.plate-note { font-size: var(--text-small); line-height: 1.5; color: var(--ink-muted); }
.rail { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.rail-item { flex: 1; display: grid; grid-template-columns: calc(56 * var(--unit)) 1fr auto; column-gap: var(--space-3); row-gap: var(--space-1); align-content: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.rail-item .num { grid-row: 1 / 3; align-self: start; font-size: calc(28 * var(--unit)); font-weight: 300; line-height: 1; letter-spacing: -0.02em; color: var(--brand); font-variant-numeric: tabular-nums; }
.rail-item h2, .rail-item h3 { grid-column: 2; font-size: var(--text-h4); font-weight: 600; line-height: 1.3; }
.rail-item p { grid-column: 2; font-size: var(--text-body-compact); color: var(--ink-muted); line-height: 1.5; }
a.rail-item { color: inherit; padding-right: var(--space-2); transition: background-color var(--dur-hover) ease; }   /* a row opens the guide at its section (round nineteen) */
a.rail-item:hover { background: var(--tint-brand-4); color: inherit; }
.rail-item .arrow { grid-column: 3; grid-row: 1; align-self: start; padding-top: calc(2 * var(--unit)); color: var(--brand); font-weight: 600; }
.facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-size: var(--text-small); color: var(--ink-muted); }
.facts b { color: var(--ink); font-weight: 600; }
.facts span + span::before { content: '·'; margin-right: var(--space-3); color: var(--line-strong); }
.facts-block { margin: 0; border-top: 1px solid var(--line); }
.facts-block div { display: grid; grid-template-columns: calc(168 * var(--unit)) 1fr; gap: var(--space-3); padding: calc(6 * var(--unit)) 0; border-bottom: 1px solid var(--line); font-size: var(--text-small); line-height: 1.45; }
.facts-block dt { color: var(--ink-muted); }
.facts-block dd { margin: 0; font-weight: 600; color: var(--ink); }
.developing { border-radius: var(--radius-md); background: var(--surface-soft); padding: var(--space-3) var(--space-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.developing .label { color: var(--ink-faint); }
.developing span { font-size: var(--text-small); color: var(--ink-muted); }
.developing span + span::before { content: '·'; margin-right: var(--space-3); color: var(--line-strong); }
.doors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.door { display: grid; grid-template-columns: auto 1fr auto; column-gap: var(--space-3); align-items: center; min-height: calc(80 * var(--unit)); padding: calc(10 * var(--unit)) var(--space-5); background: var(--surface); color: inherit; }
.door .step { font-size: var(--text-label); font-weight: 600; letter-spacing: var(--tracking-label); color: var(--brand); align-self: start; padding-top: calc(4 * var(--unit)); }
.door b { display: block; font-size: var(--text-body); font-weight: 600; margin-bottom: calc(2 * var(--unit)); }
.door span span { display: block; font-size: var(--text-small); line-height: 1.4; color: var(--ink-muted); }
.door .arrow { color: var(--brand); font-weight: 600; align-self: start; padding-top: calc(2 * var(--unit)); }   /* on the title line */
.door:hover { background: var(--tint-brand-4); color: inherit; }
/* the doors as a full-bleed band on the soft ground (round sixteen): hairlines between doors, the row on the content columns */
.doors.band { grid-template-columns: var(--gutter-col) minmax(0, var(--canvas-w)) var(--gutter-col); column-gap: var(--stage-col-gap); gap: 0 var(--stage-col-gap); min-height: var(--end-band); align-content: center; background: var(--surface-soft); border: 0; border-radius: 0; overflow: visible; }
.doors-row { grid-column: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.doors.band .door { background: transparent; padding: calc(20 * var(--unit)) var(--space-5); }
.doors.band .door + .door { border-left: 1px solid var(--line); }
.doors.band .door:hover { background: var(--tint-brand-8); }

/* ── Home (round sixteen, the founder's reference): the hero scale beside the open braid, over the backdrop; the four-door band full-bleed above the foot ── */
.strand-legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.strand-legend li { padding-top: var(--space-2); border-top: 3px solid var(--line-strong); font-size: var(--text-small); line-height: 1.4; color: var(--ink-muted); }
.strand-legend li.flow { border-color: var(--strand-flow); }
.strand-legend li.tribe { border-color: var(--strand-tribe); }
.strand-legend li.prosper { border-color: var(--strand-prosper); }
.strand-legend b { display: block; font-size: var(--text-body); font-weight: 600; color: var(--ink); }
/* the home: hero content-sized on the top line, the frame's leftover is the break above the doors, the band meets the foot */
.stage.banded { grid-template-rows: [bar-start] auto [bar-end title-start] auto [title-end lead-start] 0 [lead-end main-start] auto [main-end band-start] minmax(0, 1fr) [band-end trail-start] 0 [trail-end foot-start] auto [foot-end]; }
.stage.banded .doors { grid-row: band; grid-column: full-start / full-end; align-self: end; margin-top: var(--space-4); }
.stage.banded .stage-foot { margin-top: 0; }
.framework-field { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: stretch; height: 100%; }
.cycle-panel { justify-content: space-between; padding: var(--space-5) var(--space-6); }
.cycle-panel .plate-head .h3 { font-size: calc(20 * var(--unit)); }   /* "Signal → Insight → Movement" on one line beside the rail */
.cycle { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.cycle .node { display: grid; grid-template-columns: calc(16 * var(--unit)) 1fr; column-gap: var(--space-3); row-gap: var(--space-1); align-items: baseline; }
.cycle .node::before { content: '→'; grid-column: 1; grid-row: 1 / 3; color: var(--brand); font-weight: 600; }
.cycle .node:first-child::before { content: '·'; }
.cycle .node b { grid-column: 2; font-size: var(--text-h4); font-weight: 600; }
.cycle .node span { grid-column: 2; font-size: var(--text-small); color: var(--ink-muted); line-height: 1.5; }
/* ── The end band (rounds forty and forty-one): one height on every main stage (--end-band), the content centred in it; the doors band shares it. */
:root { --end-band: calc(132 * var(--unit)); }
/* ── The end band (round forty): every main stage ends as the home does — a full-bleed band on the soft ground with a hairline above, meeting the foot;
   the frame's leftover is the break above it. The Framework's braid callout, the Practice's guide and the Context System's canon callout live in it. ── */
.stage-end { grid-row: band; grid-column: full-start / full-end; align-self: end; margin-top: var(--space-4); display: grid; grid-template-columns: var(--gutter-col) minmax(0, var(--canvas-w)) var(--gutter-col); column-gap: var(--stage-col-gap); align-items: center; min-height: var(--end-band); padding: var(--space-2) 0; background: var(--surface-soft); border-top: 1px solid var(--line); max-width: none; }
.stage-end-inner { grid-column: 2; min-width: 0; }
.stage-end .callout { background: transparent; padding-top: calc(2 * var(--unit)); padding-bottom: calc(2 * var(--unit)); }
.stage.band.banded { grid-template-rows: [bar-start] auto [bar-end title-start] auto [title-end lead-start] 0 [lead-end main-start] auto [main-end band-start] auto [band-end trail-start] minmax(0, 1fr) [trail-end foot-start] auto [foot-end]; }   /* a band stage: the field stays in the band row; the end band takes the trail row */
.stage.band.banded .stage-end { grid-row: trail; margin-top: var(--space-2); }
.stage-end .guide-reveal { border-top: 0; padding-top: 0; }
.stage-end .guide-copy { gap: calc(6 * var(--unit)); }   /* the guide's stack fits the common band height (round forty-one) */   /* a stage that ends on a callout band: the band meets the foot, the frame's leftover is the break above it (round thirty-nine; the home's law) */

/* ── Framework: copy beside the numbered strand rail and the dynamic panel, over the braid note ── */

/* ── Practice: four panels in a row, then the invitation note ── */
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }

/* ── The Context System canvas: your PLAITs and the Dial on the left; one context through three lenses ── */

/* ── Join: copy (H1 · lede · the facts · actions · the note) beside four membership panels and the being-developed strip ── */
.membership-field { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr auto; gap: var(--space-3); height: 100%; }
.membership-field .developing { grid-column: 1 / -1; }
.membership-field .panel { padding: var(--space-3) var(--space-5); }

/* ── Member Home (S3): three doors in a row · the account panel across · the being-developed strip; the bundle fills the account panel ── */
.member-field { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) auto auto; gap: var(--space-3); height: 100%; }
.member-field .panel { padding: var(--space-3) var(--space-5); }
.member-field .panel.account, .member-field .developing { grid-column: 1 / -1; }
.panel-rows a { color: inherit; }
.panel-rows a:hover { color: var(--brand-dark); }
.panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: auto 0 0; padding-top: var(--space-2); }
.panel-actions .text-link { font-size: var(--text-small); font-weight: 600; min-height: calc(28 * var(--unit)); padding: 0; display: inline-flex; align-items: center; }   /* on the panel's text line, never indented */

/* ── Short stages keep the top line (S3.2): the auth stages put the frame's leftover above the foot; Member Home puts it between the head and the doors ── */
.stage.auth { grid-template-rows: [bar-start] auto [bar-end title-start] auto [title-end lead-start] 0 [lead-end main-start] auto [main-end band-start] auto [band-end trail-start] minmax(0, 1fr) [trail-end foot-start] auto [foot-end]; }
.stage.hub-stage { grid-template-rows: [bar-start] auto [bar-end title-start] auto [title-end lead-start] 0 [lead-end main-start] auto [main-end band-start] minmax(0, 1fr) [band-end trail-start] 0 [trail-end foot-start] auto [foot-end]; }
.stage.hub-stage .stage-visual { align-self: stretch; min-height: 0; }
/* ── Your PLAIT, the hub (system design 2026-10-02 §2): one panel, a head line, tabs, and a body that scrolls inside the frame ── */
.hub-field { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.hub-panel { flex: 1 1 auto; min-height: 0; padding: var(--space-4) var(--space-5); }
.hub { display: flex; flex-direction: column; gap: var(--space-3); min-height: 0; height: 100%; }
.hub-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.hub-head .panel-actions { margin: 0; padding: 0; }
.hub-tabs { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-1); scrollbar-width: thin; }
.hub-tabs .chip { flex: none; cursor: pointer; }
/* the edge fade on the side that hides tabs — the app's strip (src/index.css .tab-strip-scroll); HubIsland sets fade-l/-r */
.hub-tabs { --tab-fade: 28px; }
.hub-tabs.fade-r { -webkit-mask-image: linear-gradient(to right, var(--ink) calc(100% - var(--tab-fade)), transparent); mask-image: linear-gradient(to right, var(--ink) calc(100% - var(--tab-fade)), transparent); }
.hub-tabs.fade-l { -webkit-mask-image: linear-gradient(to left, var(--ink) calc(100% - var(--tab-fade)), transparent); mask-image: linear-gradient(to left, var(--ink) calc(100% - var(--tab-fade)), transparent); }
.hub-tabs.fade-l.fade-r { -webkit-mask-image: linear-gradient(to right, transparent, var(--ink) var(--tab-fade), var(--ink) calc(100% - var(--tab-fade)), transparent); mask-image: linear-gradient(to right, transparent, var(--ink) var(--tab-fade), var(--ink) calc(100% - var(--tab-fade)), transparent); }
.hub-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-3); padding-right: var(--space-1); }
.hub-body section { display: flex; flex-direction: column; gap: var(--space-3); }
.hub-h { font-size: var(--text-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-muted); margin: var(--space-2) 0 0; }
.hub-empty { margin: 0; }
.hub-notice { color: var(--brand-dark); margin: 0; }
.hub-row-actions { display: inline-flex; gap: var(--space-1); flex: none; }
.hub-msg { margin: 0; font-size: var(--text-small); line-height: 1.5; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }   /* a request's words, as written (Requests) */
.hub-files { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-top: var(--space-1); }
.hub .member-only { border-color: var(--line-strong); background: var(--surface-soft); }
.hub-signed-out .panel-actions { margin-top: var(--space-2); }

/* ── The auth stages (S3.2): one island (AuthIsland) in a panel beside the copy; a trust line pins the column's bottom ── */
.auth-field { display: flex; flex-direction: column; gap: var(--space-3); height: 100%; }
.auth-field .auth-trust { margin-top: auto; justify-content: center; }
.auth-panel { flex: none; padding: var(--space-5) var(--space-6) var(--space-5); gap: var(--space-3); }   /* content-sized: never stretched to the column */
.auth-methods { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.auth-methods .chip { cursor: pointer; }
.auth-form { display: flex; flex-direction: column; gap: var(--space-3); }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.field-label { font-size: var(--text-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-muted); }
.field input { min-height: var(--control); padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--text-body-compact); width: 100%; transition: border-color var(--dur-hover) ease, box-shadow var(--dur-hover) ease; }
.field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--tint-brand-12); }
.field input:disabled { color: var(--ink-muted); background: var(--surface-soft); }
.btn-wide { width: 100%; }
.auth-aux { align-self: flex-start; padding: 0; min-height: calc(28 * var(--unit)); font-size: var(--text-small); font-weight: 600; background: none; border: 0; cursor: pointer; }
.auth-msg { color: var(--brand-dark); }
.auth-error { color: var(--error); }
.auth-foot { line-height: 1.5; }
.auth-done { max-width: none; }

/* ── Contact and Support (S4): reasons as four doors + what to expect; the support panel beside the copy, a trust line pins the column ── */
.contact-field { display: flex; flex-direction: column; gap: var(--space-3); height: 100%; }
.contact-field .auth-trust { margin-top: auto; justify-content: center; }
.contact-panel, .contact-sent { flex: none; padding: var(--space-5) var(--space-6); gap: var(--space-3); }
.doors-contact { grid-template-columns: 1fr; }   /* the reasons stack in the copy column and set up the form */
.doors-contact .door { min-height: calc(56 * var(--unit)); padding: calc(6 * var(--unit)) var(--space-4); width: 100%; text-align: left; font: inherit; border: 0; cursor: pointer; transition: background-color var(--dur-hover) ease; }
.doors-contact .door b { font-size: var(--text-small); margin-bottom: 0; }
.doors-contact .door span span { font-size: var(--text-label); line-height: 1.35; }
.doors-contact .door[aria-pressed="true"] { background: var(--tint-brand-8); }
.doors-contact .door[aria-pressed="true"] .step, .doors-contact .door[aria-pressed="true"] b { color: var(--brand-dark); }
.doors-contact .door:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.field textarea { min-height: calc(132 * var(--unit)); padding: var(--space-2) var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--text-body-compact); line-height: 1.5; width: 100%; resize: vertical; transition: border-color var(--dur-hover) ease, box-shadow var(--dur-hover) ease; }
.field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--tint-brand-12); }
.field.hp { display: none; }   /* the honeypot: never rendered, never measured */
/* links inside running text are told apart by more than colour (S5, WCAG 1.4.1) */
.lede a, .body a, .callout a, .panel-body a, .aside-note a, .band-note a, .small a, .facts a, .plate-note a, .doc-body p a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; padding: 5px 0; }   /* the inline target floor: 5px above and below (inline padding leaves the line box alone) so a one-line link measures ≥ 24 px (round nineteen) */
.panel .small a { display: inline-flex; align-items: center; min-height: 24px; }
.check { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-small); color: var(--ink); cursor: pointer; }
.check input { margin: 3px 0 0; accent-color: var(--brand); }
.support-listing { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); }
.support-listing .panel-actions { margin-top: 0; padding-top: 0; }
.supporters { flex: none; padding: var(--space-4) var(--space-6); gap: var(--space-2); }
.supporter-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.supporter-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); min-height: calc(28 * var(--unit)); padding: var(--space-1) 0; border-top: 1px solid var(--line); font-size: var(--text-small); }
.supporter-list li:first-child { border-top: 0; }
.supporter-list li b { color: var(--ink); font-weight: 600; }
.supporter-list .line { color: var(--ink-muted); }
.supporter-list a { margin-left: auto; color: var(--brand-dark); font-weight: 600; white-space: nowrap; }
.support-goes { flex: none; padding: var(--space-4) var(--space-6); gap: var(--space-2); }
.support-field { display: flex; flex-direction: column; gap: var(--space-3); height: 100%; }
.support-field .auth-trust { margin-top: auto; justify-content: center; }
.support-panel { flex: none; padding: var(--space-5) var(--space-6) var(--space-5); gap: var(--space-3); }
.support-amounts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.support-amounts .chip { position: relative; cursor: pointer; user-select: none; }
.support-amounts .chip input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.support-amounts .chip:has(input:checked) { background: var(--tint-brand-8); color: var(--brand-dark); border-color: var(--brand); }
.support-amounts .chip:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.support-amounts .custom-wrap { display: inline-flex; align-items: baseline; gap: 2px; margin-left: var(--space-2); color: var(--ink-muted); }
.support-amounts .custom-wrap input[type="number"] { width: 4.5em; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; background: transparent; padding: 0 2px; font: inherit; font-size: var(--text-small); color: var(--ink); -moz-appearance: textfield; }
.support-amounts .custom-wrap input[type="number"]::-webkit-outer-spin-button, .support-amounts .custom-wrap input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.support-amounts .custom-wrap input[type="number"]:focus { outline: none; border-bottom-color: var(--brand); }
.support-thanks { flex: none; padding: var(--space-5) var(--space-6); gap: var(--space-3); }

/* ── The Context System as a split (S3.2): copy 4 · canvas 8; the canvas runs the Dial across the top instead of down the side ── */
/* ── The Context System shell (MD-29): the demo box beside the copy — the lenses on top · the cards panel · the Dial cluster · the detail panel, proportioned to the box (200 · 1fr · 200 units). Filled discs: the Dial in charcoal, the chosen context's colour while one is chosen; the PLAITs in the app's own colours, confined to this demo. The lenses shift the content; a disc shifts the context, never the lens; closing the Dial releases the context. ── */
.shell-demo { --ctx: var(--brand); flex: none; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-soft); padding: var(--space-2); display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--space-3); min-width: 0; }
.shell-lenses { display: flex; justify-content: center; gap: var(--space-1); padding: calc(5 * var(--unit)); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.shell-lens { font: inherit; font-size: var(--text-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-muted); background: transparent; border: 0; border-radius: var(--radius-full); padding: 0 var(--space-4); min-height: calc(28 * var(--unit)); cursor: pointer; transition: background-color var(--dur-hover) ease, color var(--dur-hover) ease; }
.shell-lens:hover { color: var(--ink); }
.shell-lens[aria-pressed="true"] { background: var(--tint-brand-8); color: var(--brand-dark); }
.shell-lens:focus-visible, .shell-card:focus-visible, .dial-core:focus-visible, .satellite:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.shell-body { display: grid; grid-template-columns: minmax(0, calc(206 * var(--unit))) minmax(0, 1fr) minmax(0, calc(226 * var(--unit))); gap: var(--space-2); align-items: stretch; }   /* content-sized: the box takes the height of its tallest panel; the end band is the constant (round forty-one) */   /* one height for every state: the tallest definition fits inside it, so choosing a card or a disc never moves the page */
.shell-cards { display: flex; flex-direction: column; gap: 0; padding: var(--space-3) calc(6 * var(--unit)); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); min-width: 0; }
.shell-cards .label { margin: 0 0 var(--space-2) calc(9 * var(--unit)); }
.shell-cards .cards-foot { margin: 0; padding: var(--space-2) calc(9 * var(--unit)) 0; border-top: 1px solid var(--line); font-size: var(--text-small); line-height: 1.45; color: var(--ink-faint); }   /* the panel's foot, like the detail panel's context line (round thirty-five) */
.kind-chip i { display: grid; place-items: center; width: calc(14 * var(--unit)); height: calc(14 * var(--unit)); }
.kind-chip i svg { width: calc(14 * var(--unit)); height: calc(14 * var(--unit)); }
.shell-card { display: grid; grid-template-columns: calc(18 * var(--unit)) minmax(0, 1fr); column-gap: calc(6 * var(--unit)); align-items: center; flex: 1 1 auto; min-height: 0; width: 100%; text-align: left; font: inherit; padding: calc(8 * var(--unit)) calc(6 * var(--unit)) calc(8 * var(--unit)) calc(6 * var(--unit)); border: 0; border-left: 3px solid transparent; border-radius: 0; background: transparent; cursor: pointer; transition: background-color var(--dur-hover) ease; }   /* a row: the kind's icon, its name, one line (round thirty-seven, the founder's mockup) */
.kind-icon { display: grid; place-items: center; width: calc(18 * var(--unit)); height: calc(18 * var(--unit)); color: var(--ctx); }
.kind-icon svg { width: calc(18 * var(--unit)); height: calc(18 * var(--unit)); }
.kind-text { display: flex; flex-direction: column; gap: calc(2 * var(--unit)); min-width: 0; }
.kind-text b { font-size: var(--text-small); font-weight: 600; line-height: 1.3; color: var(--ink); }
.kind-text small { font-size: var(--text-label); line-height: 1.35; color: var(--ink-muted); }
.shell-card + .shell-card { border-top: 1px solid var(--line); }
.shell-card:hover { background: var(--tint-brand-4); }
.shell-card[aria-pressed="true"] { border-left-color: var(--ctx); background: color-mix(in srgb, var(--ctx) 6%, white); }
.shell-dial { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); min-width: 0; padding: 0 var(--space-1); }
.dial-stage { position: relative; width: calc(236 * var(--unit)); height: calc(236 * var(--unit)); max-width: 100%; display: grid; place-items: center; }
.dial-core { width: calc(120 * var(--unit)); height: calc(120 * var(--unit)); border-radius: 50%; border: 0; background: var(--brand); color: var(--white); display: grid; place-items: center; cursor: pointer; padding: 0; transition: background-color var(--dur-hover) ease, transform var(--dur-hover) ease; }
.dial-core:hover { transform: scale(1.03); }
.shell-demo[data-satellite] .dial-core { background: var(--ctx); }
.dial-name { font-size: var(--text-small); font-weight: 600; letter-spacing: 0; text-transform: none; }
.shell-satellites { position: absolute; inset: 0; pointer-events: none; }
.shell-satellites::before { content: ''; position: absolute; left: 50%; top: 50%; width: calc(184 * var(--unit)); height: calc(184 * var(--unit)); margin: calc(-92 * var(--unit)) 0 0 calc(-92 * var(--unit)); border-radius: 50%; border: 1px solid var(--line); }   /* the orbit, faint */
.satellite { pointer-events: auto; position: absolute; left: 50%; top: 50%; --disc: max(calc(46 * var(--unit)), 44px); width: var(--disc); height: var(--disc); margin: calc(var(--disc) / -2) 0 0 calc(var(--disc) / -2); border-radius: 50%; border: calc(3 * var(--unit)) solid var(--surface); background: var(--ctx-s); padding: 0; cursor: pointer; transform: rotate(var(--angle)) translate(calc(92 * var(--unit))) rotate(calc(-1 * var(--angle))); transition: transform var(--dur-hover) ease; }
.satellite:hover { transform: rotate(var(--angle)) translate(calc(92 * var(--unit))) rotate(calc(-1 * var(--angle))) scale(1.08); }
.satellite { background: color-mix(in srgb, var(--ctx-s) 40%, white); border-color: color-mix(in srgb, var(--ctx-s) 40%, white); }   /* pale until chosen (round thirty-seven) */
.satellite:hover, .satellite[aria-pressed="true"] { background: var(--ctx-s); border-color: var(--ctx-s); }
.satellite[aria-pressed="true"] { outline: calc(3 * var(--unit)) solid var(--ctx-s); outline-offset: calc(3 * var(--unit)); }
.dial-note { margin: 0; max-width: 36ch; text-align: center; font-size: var(--text-label); text-transform: none; letter-spacing: 0; font-weight: 500; line-height: 1.5; color: var(--ink-muted); }
.shell-panel { border: 1px solid var(--line); border-top: 3px solid var(--ctx); border-radius: var(--radius-md); background: var(--surface); padding: var(--space-3); display: flex; flex-direction: column; gap: calc(5 * var(--unit)); min-width: 0; }
.shell-panel .label { margin: 0; }
.shell-panel .h4 { margin: 0; font-size: var(--text-body); line-height: 1.3; }
.shell-def { margin: 0; font-size: var(--text-small); line-height: 1.45; color: var(--ink-muted); }
.shell-holds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.shell-holds li { display: flex; gap: var(--space-2); align-items: flex-start; min-height: calc(26 * var(--unit)); padding: calc(3 * var(--unit)) 0; border-top: 1px solid var(--line); font-size: var(--text-small); line-height: 1.4; color: var(--ink); }
.shell-holds li::before { content: ''; flex: none; width: calc(6 * var(--unit)); height: calc(6 * var(--unit)); margin-top: calc(6 * var(--unit)); border-radius: var(--radius-full); background: var(--ctx); }
.shell-holds li:last-child { border-bottom: 1px solid var(--line); }
.shell-ctx { margin: auto 0 0; padding-top: var(--space-2); font-size: var(--text-small); color: var(--ink-faint); line-height: 1.45; }
.shell-demo[data-satellite] .shell-ctx { color: var(--ctx); }
/* The approved shape — the Dial down the side — at the split's width: the toolbar spans the top, the rail and the lenses share one row
   (so the rail's box is the lenses' height), every row is two lines (the kind · its one-line example), and the rail's content is sized to match. */
.member-field .panel.account { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); }
.member-field .panel.account .panel-label { flex: none; }
.member-account { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-6); min-width: 0; }
.member-account .facts { flex: 1 1 auto; min-width: 0; }
.member-account .panel-actions { margin: 0; padding: 0; }
.panel-body.error { flex-basis: 100%; color: var(--error); }
.copy-foot { display: flex; flex-direction: column; gap: var(--space-3); }
.access-line { margin: 0; max-width: calc(560 * var(--unit)); color: var(--ink-muted); }   /* the Context System: who it is for, in one line of body (round forty-one) */
.copy-rule { width: calc(52 * var(--unit)); height: 0; margin: 0; border: 0; border-top: 2px solid var(--ink); }
.principle-line { margin: 0; font-size: var(--text-h4); font-weight: 600; line-height: 1.3; color: var(--ink); }
.stage.split:not(.home) .stage-copy > .copy-foot { margin-top: auto; }
.stage.split.wide .stage-copy > .copy-foot { margin-top: 0; }   /* the Context System: the principle follows the actions; the column ends where its copy ends (round thirty-eight) */
.stage.split.wide .stage-copy { grid-column: c-start / span 5; }
.stage.split.wide .stage-copy .display { max-width: none; margin-right: calc(-1 * var(--stage-col-gap)); }   /* the H1 wraps on the column, not on 16ch (round thirty-seven) */   /* the Context System: five columns of copy beside the demo box; the signed-in primary and the secondary sit on one line */
.stage.split.wide .stage-visual { grid-column: col-start 6 / c-end; }   /* round thirty-six: four and eight was tried; the ruled copy overflows the frame at four, so the box gains its width inside seven (tighter padding, wider side panels, a 250-unit Dial stage) */
.demo-field { display: flex; flex-direction: column; gap: var(--space-3); }
.demo-field .caption { margin-top: 0; }   /* a split's copy foot meets a taller field's bottom line (text wraps less at wide windows; boxes scale) */

/* ── The Resources index: four sections by layer (a panel each: number · layer · shelf · documents), then the membership strip ── */
.res-sections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; gap: var(--space-3); min-height: 0; }
.res-section { gap: var(--space-1); padding: calc(8 * var(--unit)) var(--space-4); overflow: hidden; }
.res-section-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.res-job { margin: 0; font-size: var(--text-small); line-height: 1.4; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* one sentence of job: the index orients (round twenty-nine) */
.res-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: auto; padding-top: 0; font-size: var(--text-label); line-height: 1; color: var(--ink-muted); }
.res-section-head .num { font-size: calc(22 * var(--unit)); font-weight: 300; line-height: 1; color: var(--brand); font-variant-numeric: tabular-nums; }
.res-section-head .h4 { margin-top: var(--space-1); }
.res-open { display: inline-flex; align-items: center; min-height: calc(32 * var(--unit)); font-size: var(--text-small); font-weight: 600; color: var(--brand-dark); white-space: nowrap; }
.res-open:hover { text-decoration: underline; }
.res-list { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: flex; flex-direction: column; }
.res-list a { display: grid; grid-template-columns: calc(84 * var(--unit)) minmax(0, 1fr); gap: var(--space-3); align-items: baseline; min-height: calc(30 * var(--unit)); padding: calc(5 * var(--unit)) 0; border-top: 1px solid var(--line); color: var(--ink); font-size: var(--text-small); }
.res-list li:last-child a, .res-list li:last-child.planned { border-bottom: 1px solid var(--line); }
.res-list .planned { display: grid; grid-template-columns: calc(84 * var(--unit)) minmax(0, 1fr); gap: var(--space-3); align-items: baseline; min-height: calc(30 * var(--unit)); padding: calc(5 * var(--unit)) 0; border-top: 1px solid var(--line); font-size: var(--text-small); color: var(--ink-faint); }
.res-list .planned .type { color: var(--ink-faint); }
.res-list .planned b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-list .planned em { font-style: normal; font-size: var(--text-label); font-weight: 500; color: var(--ink-faint); }
.res-list { min-height: calc(94 * var(--unit)); }   /* three rows: a shorter last page keeps the panel's shape */
/* the shelf strip: a stage's few documents from its own shelf — label and Open shelf on one line, three rows (the index's row primitive) beneath (round twenty-one) */
.shelf-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; column-gap: var(--space-4); align-items: center; }
.strip-list { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-5); margin: 0; min-height: 0; }
.strip-list a { border-bottom: 1px solid var(--line); }
.shelf-strip .strip-all { grid-column: 2; grid-row: 1; justify-self: end; min-height: 24px; padding: 0; font-size: var(--text-small); font-weight: 600; color: var(--brand); white-space: nowrap; }
.shelf-strip .strip-all:hover { color: var(--brand-dark); }
.res-list a:hover { color: var(--brand-dark); }
.res-list .type { font-size: var(--text-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--brand); white-space: nowrap; }
.res-list b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-strip { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); padding: calc(6 * var(--unit)) var(--space-4); border-radius: var(--radius-md); background: var(--surface-soft); font-size: var(--text-small); }
.res-strip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.res-strip a { color: var(--ink); font-weight: 500; min-height: calc(28 * var(--unit)); display: inline-flex; align-items: center; gap: var(--space-2); }
.res-strip a:hover { color: var(--brand-dark); }
.res-strip .type { font-size: var(--text-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--brand); }
.res-strip .res-open { margin-left: auto; }

/* ── The foot: one hairline, then the principle and the legal line, centred (founder, eleventh round) ── */
.stage-foot {
  grid-column: full-start / full-end; grid-row: foot; margin-top: var(--space-3);
  /* the foot repeats the stage's column template so its rows sit on the content columns at every window (S4.1) */
  display: grid; grid-template-columns: var(--gutter-col) minmax(0, var(--canvas-w)) var(--gutter-col); column-gap: var(--stage-col-gap); row-gap: calc(2 * var(--unit));
  justify-items: center; align-content: center; text-align: center;
  padding: calc(10 * var(--unit)) 0 calc(12 * var(--unit)); border-top: 1px solid var(--line); background: var(--surface);   /* on the ground: a stage backdrop ends at the band */
  color: var(--ink-muted); font-size: var(--text-small); line-height: 1.5;
}
.stage-foot .principle { grid-column: 2; }
.stage-foot .principle { font-weight: 500; color: var(--ink); }
/* the legal row (S4.1): the company on the left edge of the canvas, the links on the right in two groups — the site's doors, then the legal pages */
.stage-foot .legal { grid-column: 2; width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-1) var(--space-3); color: var(--ink-muted); text-align: center; }   /* one centred line (round sixteen, the founder's reference) */
.stage-foot .legal .legal-co { white-space: nowrap; padding-right: var(--space-2); }
.stage-foot .legal .legal-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-1); }
.stage-foot .legal .group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.stage-foot .legal a { color: var(--ink-muted); display: inline-flex; align-items: center; justify-content: center; min-height: 24px; min-width: var(--control); padding: 0 var(--space-2); white-space: nowrap; }   /* the target floor: 44 wide, 24 tall */
.stage-foot .legal a:hover { color: var(--brand-dark); }

/* ── Toast ──────────────────────────────────────────────────────────────────── */
.toast { position: fixed; left: 50%; bottom: var(--space-5); transform: translate(-50%, var(--space-4)); opacity: 0; pointer-events: none; background: var(--black); color: var(--white); border-radius: var(--radius-full); padding: var(--space-3) var(--space-4); font-size: var(--text-small); font-weight: 500; transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease; z-index: var(--z-toast); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── Reflow (contract §3) ─────────────────────────────────────────────────────── */
@media (max-width: 1179px) {
  .stage { overflow: visible; }
  .stage-copy, .stage.dense .stage-copy { grid-column: c-start / span 5; }
  .stage-visual, .stage.dense .stage-visual { grid-column: col-start 6 / c-end; }
  .framework-field { grid-template-columns: 1fr; height: auto; }
  .cards { grid-template-columns: 1fr 1fr; }
  .doors { grid-template-columns: 1fr 1fr; }
  .res-list a { grid-template-columns: 1fr; gap: 2px; }
  .res-sections { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
}
@media (max-width: 899px) {
  .shell-header { overflow: hidden; }
  .shell-bar { height: calc(var(--header-h) - 1px); grid-template-columns: auto 1fr; grid-template-rows: 63px var(--nav-row-h); gap: 0 var(--space-3); align-items: center; }
  .shell-bar .primary-nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; align-items: center; height: var(--nav-row-h); border-top: 1px solid var(--line); margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; }
  .shell-bar .primary-nav::-webkit-scrollbar { display: none; }
  .primary-nav ul { gap: var(--space-5); }
  .nav-link { min-height: 40px; font-size: var(--text-small); }
  .nav-link[aria-current="page"]::after { bottom: 2px; }
  .shell-bar .shell-actions { grid-column: 2; grid-row: 1; justify-self: end; }
  .shell-bar .plait-lockup { grid-column: 1; grid-row: 1; }
  .stage { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-4) var(--gutter) 0; overflow: visible; }
  .context-bar, .title-bar, .stage-copy, .stage-visual, .band-copy, .band-aside, .doors, .braid-band, .stage-callout, .stage-end, .stage-band { width: 100%; margin: 0; }
  .stage-end { grid-template-columns: 1fr; padding: var(--space-4) var(--gutter, 20px); }
  .context-bar, .title-bar { flex-wrap: wrap; }
  .stage-copy .display, .stage.band .band-copy .display { max-width: none; }
  .res-control .res-detail { display: none; }
  .framework-field, .membership-field, .member-field, .system-field, .auth-field { height: auto; }
  .member-field { grid-template-columns: 1fr; grid-template-rows: none; }
  .member-field .panel.account { flex-direction: column; align-items: stretch; }
  .strand-legend { grid-template-columns: 1fr; }
  .stage.split.wide .stage-copy, .stage.split.wide .stage-visual { grid-column: c-start / c-end; } .stage.split.wide .stage-copy .display { margin-right: 0; }
  .stage.banded { display: flex; }
  .shell-body { grid-template-columns: 1fr; }
  .shell-dial .dial-stage { width: calc(280 * var(--unit)); height: calc(280 * var(--unit)); }
  .shell-dial .dial-core { width: calc(120 * var(--unit)); height: calc(120 * var(--unit)); }
  .shell-dial .satellite, .shell-dial .satellite:hover { --disc: max(calc(46 * var(--unit)), 44px); width: var(--disc); height: var(--disc); margin: calc(var(--disc) / -2) 0 0 calc(var(--disc) / -2); transform: rotate(var(--angle)) translate(calc(92 * var(--unit))) rotate(calc(-1 * var(--angle))); }
  .strip-list { grid-template-columns: 1fr; }
  .stage-visual.divided { padding-left: 0; }
  .stage-visual.divided::before { display: none; }
  .doors.band { display: block; width: auto; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
  .doors-row { grid-template-columns: 1fr; }
  .doors.band .door + .door { border-left: 0; border-top: 1px solid var(--line); }
  .stage-backdrop { display: none; }   /* composed for the split; one column carries no backdrop */
  .doors { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr 1fr; }
  .membership-field { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .res-sections { grid-template-columns: 1fr; grid-template-rows: none; }
  .res-strip .res-open { margin-left: 0; }
  .stage-foot { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); width: auto; margin: var(--space-4) calc(-1 * var(--gutter)) 0; padding: var(--space-4) var(--gutter) var(--space-5); }
  .stage-foot .legal { justify-content: center; text-align: center; }
  .stage-foot .legal .legal-links { margin-left: 0; justify-content: center; }
  .stage-foot .legal .group { justify-content: center; }
  .stage-foot .legal .group + .group { border-left: 0; padding-left: 0; }   /* no stranded divider when the groups wrap */
}
@media (max-width: 619px) {
  .shell-actions .btn-primary { padding: 0 var(--space-4); }
  .display, .stage-copy .display { font-size: 2.75rem; }
  .stage.home .display { font-size: 3.5rem; }   /* the hero scale on a phone: 56 · 20 · 17 */
  .stage.home .lede { font-size: 1.25rem; }
  .stage.home .body { font-size: 1.0625rem; }
  .h2 { font-size: 2.25rem; }
  .lede { font-size: 1.125rem; }
  .cards, .membership-field { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ── Practice (rounds thirty-three and thirty-four: the founder's concept, then his polish direction). Structure is flat; content objects have depth.
   The hero across the canvas with the lede and the actions on one row; the ways head under a rule; three ways, each a column whose preview is an
   object (a fanned stack of paper · the layered outputs of one context · a workflow), never a bordered card; the guide as an editorial reveal under
   a rule, the publication object beside the copy, no chips. ── */
.stage.band.practice .band-copy { grid-column: c-start / c-end; gap: var(--space-3); }
.stage.band.practice .band-copy .display { max-width: none; }
.hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--stage-col-gap); width: 100%; }   /* the lede and the actions end on one line */
.hero-row .lede { margin: 0; max-width: calc(760 * var(--unit)); }
.hero-row .actions { flex: none; flex-wrap: nowrap; justify-content: flex-end; }
.practice-field { gap: calc(6 * var(--unit)); }
.ways-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: var(--stage-col-gap); align-items: end; padding-top: var(--space-1); border-top: 1px solid var(--line); }
.ways-head .h3 { max-width: 44ch; }
.ways-note { margin: 0; max-width: 64ch; justify-self: end; }
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.way { display: flex; flex-direction: column; gap: calc(8 * var(--unit)); padding: 0 var(--space-5); min-width: 0; }
.way:first-child { padding-left: 0; } .way:last-child { padding-right: 0; }
.way + .way { border-left: 1px solid var(--line); }
.way-head { display: flex; align-items: center; gap: var(--space-3); }
.way-head svg { width: calc(28 * var(--unit)); height: calc(28 * var(--unit)); color: var(--brand); flex: none; }
.way-head .h4 { font-size: calc(22 * var(--unit)); line-height: 1.1; }
.way-head .label { margin: 0; line-height: 1; }
.way-body { margin: 0; font-size: var(--text-small); line-height: 1.5; color: var(--ink-muted); }
.way-more { margin-top: auto; align-self: flex-start; padding: 0; min-height: 24px; line-height: 1; font-weight: 600; }
.object-labels { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: calc(2 * var(--unit)) var(--space-2); font-size: var(--text-label); font-weight: 600; line-height: 1; }
.object-labels a { display: inline-flex; align-items: center; min-height: 24px; min-width: 44px; color: var(--ink); text-decoration: none; }   /* 24 px targets that never overlap when the row wraps */
.object-labels a:hover { color: var(--brand-dark); }
.object-labels span { color: var(--line-strong); }
/* the objects: white paper with depth, drawn by the tokens; any text on them at the label size */
.paper, .layer, .publication .page { display: grid; align-content: start; background: var(--surface); border-radius: calc(3 * var(--unit)); box-shadow: var(--shadow-object); }
.paper i, .layer i, .publication .page i { display: block; height: calc(4 * var(--unit)); border-radius: 2px; background: var(--line); }
.paper-fan { position: relative; height: calc(58 * var(--unit)); }
.paper { position: absolute; bottom: 0; width: 30%; height: calc(54 * var(--unit)); padding: calc(9 * var(--unit)) calc(8 * var(--unit)); gap: calc(5 * var(--unit)); }
.paper i.t { width: 55%; height: calc(5 * var(--unit)); background: var(--brand); opacity: .7; }
.paper i:nth-child(3) { width: 82%; } .paper i:nth-child(5) { width: 64%; }
.paper.p1 { left: 0; z-index: 4; transform: rotate(-2deg); }
.paper.p2 { left: 24%; bottom: calc(5 * var(--unit)); z-index: 3; transform: rotate(1deg); }
.paper.p3 { left: 48%; bottom: calc(2 * var(--unit)); z-index: 2; transform: rotate(-1deg); }
.paper.p4 { left: 70%; bottom: calc(7 * var(--unit)); z-index: 1; transform: rotate(2deg); }
.output-layers { position: relative; height: calc(58 * var(--unit)); }
.layer { position: absolute; padding: calc(8 * var(--unit)); gap: calc(4 * var(--unit)); }
.layer b { font-size: var(--text-label); font-weight: 600; line-height: 1.2; color: var(--ink); }
.layer.data { right: 0; top: 0; width: 24%; height: calc(36 * var(--unit)); z-index: 1; background: var(--surface-soft); }
.layer.data i { height: calc(3 * var(--unit)); width: 70%; } .layer.data i:nth-child(even) { width: 50%; }
.layer.conversation { left: 0; top: calc(3 * var(--unit)); width: 46%; height: calc(48 * var(--unit)); z-index: 2; }
.layer.conversation i { width: 78%; } .layer.conversation i.me { width: 60%; justify-self: end; background: var(--tint-brand-12); }
.layer.briefing { left: 30%; top: calc(6 * var(--unit)); width: 42%; height: calc(56 * var(--unit)); z-index: 3; }
.layer.briefing i.t { width: 45%; height: calc(6 * var(--unit)); background: var(--brand); opacity: .7; }
.layer.recap { left: 64%; top: calc(12 * var(--unit)); width: 36%; height: calc(50 * var(--unit)); z-index: 4; }
.layer.recap i.dot { width: 80%; margin-left: calc(10 * var(--unit)); position: relative; }
.layer.recap i.dot::before { content: ''; position: absolute; left: calc(-10 * var(--unit)); top: 0; width: calc(4 * var(--unit)); height: calc(4 * var(--unit)); border-radius: 50%; background: var(--brand); }
.workflow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: calc(2 * var(--unit)); min-height: calc(58 * var(--unit)); }
.workflow .arrow { color: var(--brand); font-weight: 600; font-size: var(--text-small); padding-bottom: calc(20 * var(--unit)); }
.workflow .step { display: flex; flex-direction: column; align-items: center; gap: calc(3 * var(--unit)); min-height: 24px; padding: calc(8 * var(--unit)) calc(2 * var(--unit)); border-radius: calc(6 * var(--unit)); text-align: center; text-decoration: none; color: inherit; transition: background-color var(--dur-hover) ease; }
.workflow .step svg { width: calc(22 * var(--unit)); height: calc(22 * var(--unit)); color: var(--brand); }
.workflow .step b { font-size: var(--text-label); font-weight: 600; line-height: 1.2; }
.workflow .step span { font-size: var(--text-label); line-height: 1.25; color: var(--ink-faint); }
.workflow .step:hover { background: var(--tint-brand-4); }
.guide-reveal { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--stage-col-gap); align-items: center; padding-top: var(--space-2); border-top: 1px solid var(--line); }
.guide-copy { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; align-items: flex-start; }
.guide-copy .label { display: inline-flex; align-items: center; gap: var(--space-2); }
.guide-copy .label svg { width: calc(18 * var(--unit)); height: calc(18 * var(--unit)); color: var(--brand); }
.guide-copy p.small { margin: 0; max-width: 72ch; }
.guide-open { padding: 0; min-height: 24px; line-height: 1; font-weight: 600; }
.publication { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(8 * var(--unit)); align-items: end; }
.publication .page { height: calc(80 * var(--unit)); padding: calc(9 * var(--unit)); gap: calc(4 * var(--unit)); overflow: hidden; }
.publication .page b { font-size: var(--text-label); font-weight: 600; line-height: 1.2; color: var(--ink); }
.publication .page small { font-size: var(--text-label); line-height: 1.25; color: var(--ink-faint); margin-bottom: calc(2 * var(--unit)); }
.publication .page i { height: calc(3 * var(--unit)); } .publication .page i:nth-child(odd) { width: 80%; }
.publication .page.cover { position: relative; }
.publication .page.cover::after { content: ''; position: absolute; width: calc(140 * var(--unit)); height: calc(140 * var(--unit)); right: calc(-70 * var(--unit)); bottom: calc(-70 * var(--unit)); border-radius: 50%; border: 1px solid var(--tint-brand-12); }
.publication .page.cover img { width: calc(30 * var(--unit)); height: auto; justify-self: start; margin-bottom: calc(6 * var(--unit)); }
@media (max-width: 900px) { .hero-row { flex-direction: column; align-items: flex-start; } .hero-row .actions { flex-wrap: wrap; } .ways { grid-template-columns: 1fr; } .way { padding: var(--space-4) 0; } .way + .way { border-left: 0; border-top: 1px solid var(--line); } .ways-head { grid-template-columns: 1fr; } .ways-note { justify-self: start; } .guide-reveal { grid-template-columns: 1fr; row-gap: var(--space-4); } .publication { grid-template-columns: repeat(2, minmax(0, 1fr)); } .workflow { grid-template-columns: 1fr 1fr; } .workflow .arrow { display: none; } }