/* ==================================================================   Stage-agnostic; house tokens only.
   ========================================================================= */

/* ---- stage hero: text left, one figure right (drawing, specimen or photograph); type-only when there's none ---- */
.stg-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s6) var(--s7); align-items: start; margin: 0 0 var(--s8); }
.stg-hero--type { grid-template-columns: minmax(0, 1fr); max-width: 48rem; }
.stg-hero__title { grid-column: 1 / -1; }
.stg-hero__h { margin: 0; }
.stg-hero__lede { margin: 0 0 var(--s4); max-width: 20ch; font: 700 var(--t-lg)/1.12 var(--display); letter-spacing: -.02em; color: var(--ink); }
.stg-hero--type .stg-hero__lede { max-width: 30ch; }
.stg-hero__p { margin: 0 0 var(--s5); max-width: 42ch; font: var(--t-base)/var(--lh-body) var(--ui); color: var(--ink-2); }
.stg-hero__p i { font-style: normal; color: var(--ink); }
.stg-hero__go { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: 0; }
.stg-hero__go a { font: 600 var(--t-sm)/1 var(--ui); color: var(--ink); text-underline-offset: .25em; padding-block: var(--s2); }
.stg-hero__go a[href^="#"]::after { content: " ↓"; color: var(--brand); }
.stg-hero__photo { margin: 0; }
.stg-hero__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.stg-hero__photo figcaption { margin-top: var(--s2); font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3); }
/* three seats under the hero: one ruled line per kind of reader */
.stg-seats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5) var(--s6); margin: var(--s2) 0 0; padding-top: var(--s5); border-top: 1px solid var(--rule-firm); }
.stg-seats dt { margin: 0 0 var(--s2); font: 650 var(--t-sm)/1.3 var(--ui); color: var(--ink); }
.stg-seats dd { margin: 0; max-width: 40ch; font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }
.stg-seats dd a { color: var(--ink); }
/* the reader lines folded into one accordion (stage pages v2 de-dupe): one ruled row until opened */
.stg-seats-acc { grid-column: 1 / -1; margin: var(--s2) 0 0; border-top: 1px solid var(--rule-firm); border-bottom: 1px solid var(--rule); }
.stg-seats-acc > summary { display: flex; align-items: center; gap: var(--s4); min-height: 2.75rem; padding: var(--s3) 0; cursor: pointer; list-style: none; }
.stg-seats-acc > summary::-webkit-details-marker { display: none; }
.stg-seats-acc > summary::after { content: "+"; content: "+" / ""; margin-left: auto; font: var(--t-md)/1 var(--mono); color: var(--ink-3); }
.stg-seats-acc[open] > summary::after { content: "\2212"; content: "\2212" / ""; }
.stg-seats-acc > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.stg-seats-acc__t { margin: 0; font: 600 var(--t-sm)/1.3 var(--ui); letter-spacing: 0; color: var(--ink); }
.stg-seats-acc .stg-seats { margin: 0; padding: var(--s2) 0 var(--s5); border-top: 0; }
.sv2-acc .stg-seats { padding-top: 0; border-top: 0; }
@media (max-width: 64rem) {
  .stg-hero { grid-template-columns: 1fr; gap: 0; }
  .stg-seats { grid-template-columns: 1fr; gap: var(--s4); }
  .stg-seats-acc { order: 4; margin-top: var(--s6); }
  .stg-hero__title { margin-bottom: var(--s5); }
  .stg-hero__lede { max-width: 26ch; }
  /* stacked: text, then the figure, then what explains the figure */
  .stg-hero__text { display: contents; }
  .stg-hero > figure { order: 2; margin: var(--s5) 0 0; }
  .stg-hero__after { order: 3; }
}

/* ---- lesson shelf (render/stage-page.ts lessonShelf; the only lesson gallery on the site) ----
   SIZING IS A RULE OF THE SHELF'S OWN WIDTH, not of the viewport, so the same shelf is right on the Learn library,
   a stage page or a lesson page whatever column it sits in:
     shelf ≥ 56rem   exactly four cards, edge to edge          (100% − 3 gaps) / 4
     shelf ≥ 34rem   two cards and a third showing             (100% − 2 gaps) / 2.3
     narrower        one card and the start of the next        82%
   One row, never wrapped; it scrolls sideways (trackpad, touch, the arrow buttons, the arrow keys), snapping to a
   card's left edge. */
.stg-shelf { --shelf-gap: var(--s4); container-type: inline-size; margin: 0 0 var(--s8); }
.stg-shelf__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s5); margin-bottom: var(--s4); }
.stg-shelf__head .lc-h2 { margin: 0; }
.stg-shelf__head p { flex: 1 1 18rem; margin: 0; font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }
.stg-shelf__more { font: var(--t-xs)/1 var(--mono); color: var(--ink-2); padding-block: var(--s2); }
.stg-shelf__more:hover { color: var(--ink); }
.stg-shelf__ctl { display: none; gap: var(--s2); margin-left: auto; }
.stg-shelf.is-scrollable .stg-shelf__ctl { display: flex; }
.stg-shelf__ctl button { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--rule-firm); background: var(--paper); color: var(--ink); font: var(--t-md)/1 var(--ui); cursor: pointer; }
.stg-shelf__ctl button:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.stg-shelf__ctl button:disabled { color: var(--ink-3); border-color: var(--rule); cursor: default; }
.stg-shelf__ctl button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.stg-shelf__list { gap: var(--shelf-gap); padding: 0 0 var(--s4); scroll-behavior: smooth; scroll-padding-inline: 0; overscroll-behavior-x: contain; }
.stg-shelf__list > li { flex: 0 0 82%; min-width: 0; }
@container (min-width: 34rem) { .stg-shelf__list > li { flex-basis: calc((100% - 2 * var(--shelf-gap)) / 2.3); } }
@container (min-width: 56rem) { .stg-shelf__list > li { flex-basis: calc((100% - 3 * var(--shelf-gap)) / 4); } }
/* a phone-width shelf is swiped; the buttons would only take a line of their own */
@container (max-width: 33.99rem) { .stg-shelf.is-scrollable .stg-shelf__ctl { display: none; } }

/* the card: the picture, then the words on the page's own ground (no box around the card) */
.stg-shelf .stg-card { background: none; border: 0; gap: 0; }
.stg-shelf .lc-card__img { background: var(--plate); border: 1px solid var(--rule); border-bottom-color: var(--rule); transition: border-color .16s ease; }
.stg-shelf .vis-kf.lc-card__img { box-sizing: border-box; }
.stg-shelf .stg-card .lc-card__body { gap: var(--s1); padding: var(--s3) 0 0; }
.stg-shelf .stg-card .lc-card__t { font: 650 var(--t-md)/var(--lh-tight) var(--display); letter-spacing: -.015em; text-wrap: pretty; }
.stg-shelf .stg-card .lc-card__o { font: var(--t-sm)/var(--lh-tight) var(--ui); color: var(--ink-2); }
.stg-card__m { margin-top: var(--s1); font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3); }
.stg-shelf .stg-card:hover .lc-card__img { border-color: var(--brand); }
.stg-shelf .stg-card:hover .lc-card__t { color: var(--brand); }
.stg-shelf .stg-card:focus { outline: none; }
/* focus draws inside the picture, so a scrolling row never clips it at its edges */
.stg-shelf .stg-card:focus-visible .lc-card__img { outline: 3px solid var(--brand); outline-offset: -3px; border-color: var(--brand); }
.stg-shelf .stg-card:focus-visible .lc-card__t { color: var(--brand); text-decoration: underline; text-underline-offset: .2em; }
@media (prefers-reduced-motion: reduce) { .stg-shelf__list { scroll-behavior: auto; } .stg-shelf .lc-card__img { transition: none; } }

/* ---- next stage ---- */
.stg-next { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s7); align-items: end; margin: var(--s8) 0 0; padding: var(--s7) var(--s6); background: var(--brand-wash); border-top: 2px solid var(--brand); }
.stg-next__k { margin: 0 0 var(--s2); font: var(--t-xs)/1 var(--mono); color: var(--ink-2); }
.stg-next__h { margin: 0 0 var(--s4); font: 800 var(--t-display-xl)/.92 var(--display); letter-spacing: -.045em; color: var(--ink); }
.stg-next__job { margin: 0 0 var(--s4); max-width: 34ch; font: var(--t-md)/var(--lh-tight) var(--ui); color: var(--ink); }
.stg-next__needs { margin: 0 0 var(--s6); max-width: 46ch; font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }
.stg-next__needs span { display: block; font: var(--t-xs)/1.6 var(--mono); color: var(--ink-2); } /* on --brand-wash: night ink-3 is 4.41:1 there */
.stg-next a.stg-next__go { display: inline-flex; align-items: center; gap: var(--s2); min-height: 2.75rem; padding: 0 var(--s5); background: var(--brand); color: var(--paper); font: 650 var(--t-base)/1 var(--ui); text-decoration: none; }
.stg-next a.stg-next__go:hover { background: var(--brand-lift); color: var(--paper); }
.stg-next__go:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.stg-next--text { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 56rem) {
  .stg-next { grid-template-columns: 1fr; gap: var(--s6); padding: var(--s6) var(--s5); }
}

/* ---- who does what, in order (lanes) ---- */
.stg-lanes { display: grid; grid-template-columns: 5rem repeat(var(--moves, 4), minmax(0, 1fr)); grid-auto-rows: minmax(4.5rem, auto); column-gap: var(--s4); }
.stg-lanes__name { grid-column: 1; align-self: stretch; padding-top: var(--s3); border-top: 1px solid var(--rule-firm); font: var(--t-xs)/1 var(--mono); color: var(--ink-3); }
.stg-lanes__gap { border-top: 1px solid var(--rule); }
.stg-lanes__move { padding: var(--s3) 0 var(--s4); border-top: 2px solid var(--brand); }
.stg-lanes__move b, .stg-moves b { display: block; font: 650 var(--t-base)/1.25 var(--ui); color: var(--ink); }
.stg-lanes__move i, .stg-moves i { display: block; margin-top: var(--s2); font: normal var(--t-xs)/1.5 var(--mono); color: var(--ink-2); }
.stg-moves { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: 0; padding: 0; }
.stg-moves__who { font: var(--t-xs)/1 var(--mono); color: var(--brand); }

@media (max-width: 48rem) {
  .stg-lanes { display: none; }
  .stg-moves { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; list-style: none; border-left: 2px solid var(--brand); padding-left: var(--s4); }
  .stg-moves li { padding-bottom: var(--s4); }
}

/* ---- "the technical version": folded detail (technicalVersion() in stage-page.ts) ---- */
.stg-tech { margin-top: var(--s6); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.stg-tech > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); padding: var(--s4) 0; cursor: pointer; list-style: none; font: 600 var(--t-base)/1.3 var(--ui); color: var(--ink); }
.stg-tech > summary::-webkit-details-marker { display: none; }
.stg-tech > summary::after { content: "+"; content: "+" / ""; margin-left: auto; font: var(--t-md)/1 var(--mono); color: var(--ink-3); }
.stg-tech[open] > summary::after { content: "\2212"; content: "\2212" / ""; }
.stg-tech > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.stg-tech__k { font: 400 var(--t-xs)/1 var(--mono); color: var(--brand); }
.stg-tech__body { padding: 0 0 var(--s5); font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }
.stg-tech__body > p { max-width: 60ch; margin: 0 0 var(--s3); }
.stg-tech__body code { font: .92em var(--mono); color: var(--ink); }
.stg-tech__body dfn { font-style: normal; font-weight: 600; color: var(--ink); }
.stg-tech__body .vis-tree { margin-top: var(--s4); }
/* file paths sit on the file's tinted head: ink-2 keeps them at AA in both themes */
.stg-tech__body .vis-file__path { color: var(--ink-2); }
.stg-tech__list { margin: 0 0 var(--s4); padding-left: var(--s5); max-width: 64ch; }
.stg-tech__list li { margin-bottom: var(--s2); }
.stg-tech__list a { color: var(--ink); }
.stg-tech__files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
@media (max-width: 56rem) { .stg-tech__files { grid-template-columns: 1fr; gap: var(--s6); } }

/* ---- your part and the AI's part (canCannot): two ruled columns, type carries it ---- */
.stg-cc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7); }
.stg-cc__k { margin: 0 0 var(--s3); font: var(--t-xs)/1 var(--mono); color: var(--brand); }
.stg-cc__k--no { color: var(--ink-2); }
.stg-cc ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-firm); }
.stg-cc li { padding: var(--s3) 0; border-bottom: 1px solid var(--rule); font: 650 clamp(1.125rem, 1.9vw, 1.5rem)/1.2 var(--display); letter-spacing: -.015em; color: var(--ink); }
.stg-cc > div + div li { color: var(--ink-2); font-weight: 500; }
@media (max-width: 56rem) { .stg-cc { grid-template-columns: 1fr; gap: var(--s6); } }

/* ---- a plain-word gloss on a technical word's first use (gloss(), content/glossary/glossary.json) ---- */
.stg-gloss { font-style: normal; font-weight: 600; color: var(--ink); }
/* a word linked to its glossary entry at its first use (termLink(), G4): the page's ordinary link, nothing added */
.stg-term { color: inherit; }

/* ---- the inline definition card (FEATURES.inlineGlossary, termAnchor() in render/stage-page.ts): opens in place
   instead of sending the reader to learn/glossary.html. .gl-term is the trigger — same current text colour as
   .stg-term, a dotted underline instead of a solid one, so it reads as "has more" rather than as an ordinary link.
   The card is positioned by the wrapper, which is the one thing here that isn't inline, so it can anchor the card
   under the word without disturbing the line's height. Without assets/glossary-term.js the card stays [hidden] and
   the trigger is the plain link it always was. ---- */
.gl-term-wrap { position: relative; }
.gl-term { color: inherit; text-decoration-style: dotted; text-decoration-thickness: 1px; text-underline-offset: .2em; cursor: pointer; }
.gl-term[aria-expanded="true"] { text-decoration-style: solid; }
.gl-term-card {
  position: absolute; top: 100%; left: 0; z-index: 20; margin-top: var(--s2); width: max(16rem, min(22rem, 90vw));
  padding: var(--s4); background: var(--paper); border: 1px solid var(--rule-firm); font: var(--t-sm)/var(--lh-body) var(--ui);
  color: var(--ink-2);
}
.gl-term-card[hidden] { display: none; }
.gl-term-card__t { display: block; margin: 0 0 var(--s2); font: 700 var(--t-base)/1.25 var(--display); color: var(--ink); }
.gl-term-card__p { margin: 0 0 var(--s3); }
.gl-term-card__more { font: var(--t-xs)/1 var(--ui); color: var(--ink-3); }
.gl-term-card__more:hover { color: var(--ink); }

/* ---- the Glossary page (render/glossary.ts): find bar, A–Z, then a ruled list, the word beside its definition ---- */
.stg-gl__head { margin-bottom: var(--s7); }
.stg-gl__find, .stg-gl__count, .stg-gl__az, .stg-gl, .stg-gl__empty { max-width: 56rem; }
/* the find bar does nothing without the script, so it stays hidden until glossary.js shows it (rl-find sets display) */
.stg-gl__find[hidden], .stg-gl__count[hidden], .stg-gl__empty[hidden], .stg-gl__sec[hidden], .stg-gl__row[hidden], .stg-gl__hit[hidden] { display: none; }
.stg-gl__az ol { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 var(--s6); padding: 0; list-style: none; border-bottom: 1px solid var(--rule); }
.stg-gl__az a, .stg-gl__az span { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; min-height: 2.75rem; font: var(--t-sm)/1 var(--mono); }
.stg-gl__az a { color: var(--ink); text-decoration: none; }
.stg-gl__az a:hover { text-decoration: underline; text-decoration-color: var(--brand); }
.stg-gl__az a:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.stg-gl__az span { color: var(--ink-3); }
.stg-gl__sec { scroll-margin-top: var(--s5); }
.stg-gl__l { margin: var(--s7) 0 0; padding-bottom: var(--s2); border-bottom: 1px solid var(--rule-firm); font: 750 var(--t-lg)/1.1 var(--display); letter-spacing: -.025em; color: var(--ink); }
.stg-gl__sec:first-child .stg-gl__l { margin-top: 0; }
.stg-gl__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s2) var(--s6); padding: var(--s5) 0; border-bottom: 1px solid var(--rule); scroll-margin-top: var(--s5); }
.stg-gl__row:focus { outline: none; }
.stg-gl__row:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.stg-gl__t { margin: 0; font: 700 var(--t-md)/1.25 var(--display); letter-spacing: -.01em; color: var(--ink); overflow-wrap: anywhere; }
.stg-gl__t dfn { font-style: normal; }
.stg-gl__row.is-target .stg-gl__t dfn, .stg-gl__row:target .stg-gl__t dfn { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.stg-gl__w { margin: var(--s1) 0 0; font: var(--t-xs)/1.5 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }
.stg-gl__c { margin: var(--s1) 0 0; font: var(--t-xs)/1.5 var(--ui); color: var(--ink-3); }
.stg-gl__dd > p { margin: 0; max-width: 52ch; font: var(--t-base)/var(--lh-body) var(--ui); color: var(--ink-2); }
.stg-gl__dd code, .stg-gl__more code { font: .92em var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.stg-gl__more { margin-top: var(--s3); border-bottom: 0; }
.stg-gl__more > summary { min-height: 2.75rem; padding: var(--s2) 0; font: 600 var(--t-sm)/1.3 var(--ui); }
.stg-gl__more .stg-tech__body > p { max-width: 52ch; }
.stg-gl__more .stg-tech__body b { color: var(--ink); }
.stg-gl__k { font-size: var(--t-xs); }
.stg-gl__k a, .stg-gl__more a { color: var(--ink); }
.stg-gl__alt { display: block; height: 0; }
@media (max-width: 48rem) { .stg-gl__row { grid-template-columns: 1fr; } }
/* below 60rem the rail is a sticky 3.5rem top bar (rail.css): a linked word or letter lands below it, not under it */
@media (max-width: 60rem) { .stg-gl__sec, .stg-gl__row { scroll-margin-top: calc(3.5rem + var(--s4)); } }

/* where a stage's files live: one line instead of the project folder drawn again (stage pages v2 de-dupe) */
.stg-files { margin: var(--s5) 0 0; max-width: 70ch; font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }
.stg-files a { color: var(--ink); }