/* Module 3 deck (same engine and tokens as Module 2): engine CSS, theme tokens and the shared component vocabulary.
   Palette = YZ's Module 1 deck (cohort 14) so both halves of the live session read as one publication:
   forest #0F3D23 and paper #FBF9F5, brand green #238343 for the one point per frame, mint on forest,
   ochre for "the old way / the wrong answer". Forest is flat (no gradient or noise: brand rule, and
   gradients band under Zoom compression). Display face sits behind one token, --display.
   Per-slide layout lives in each frames/<slug>.html <style> block, scoped by the frame id. */

/* ---------- fonts (all vendored, nothing external at runtime) ---------- */
@font-face { font-family: "Newsreader"; src: url(../fonts/newsreader-latin-opsz-wght-normal.woff2) format("woff2"); font-weight: 200 800; font-style: normal; font-display: block; }
@font-face { font-family: "Newsreader"; src: url(../fonts/newsreader-latin-opsz-wght-italic.woff2) format("woff2"); font-weight: 200 800; font-style: italic; font-display: block; }
@font-face { font-family: "Inter"; src: url(../fonts/inter-latin-opsz-normal.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: block; }
@font-face { font-family: "JetBrains Mono"; src: url(../fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "JetBrains Mono"; src: url(../fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: block; }

/* ---------- tokens ---------- */
:root {
  --forest: #0F3D23;
  --forest-2: #145030;          /* a lighter forest surface: cards on a forest page */
  --green: #238343;             /* the point of the frame; shapes and text >= 24 px */
  --green-ink: #1D6E39;         /* green text under 24 px */
  --mint: #97E2B2;              /* emphasis on forest only */
  --paper: #FBF9F5;
  --card: #F3EFE6;
  --white: #FFFFFF;
  --ivory: #F5F0E6;             /* text on forest */
  --ivory-2: rgba(245, 240, 230, .78);
  --ivory-3: rgba(245, 240, 230, .58);
  --ink: #141A16;
  --ink-2: #37423B;
  --ink-3: #626E66;             /* YZ uses #6F7B73 (4.2:1); darkened to 5.1:1 for small labels */
  --ghost: #B9C0BA;             /* inactive strokes and future items, never text */
  --rule: rgba(20, 26, 22, .16);
  --tint: #E8EFE5;              /* pale green fill: what is inside the window */
  --second: #A35C22;            /* ochre: the old way, the wrong answer, the stale fact */
  --second-tint: #F6EBDF;
  --display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --display-weight: 600;
  --display-track: -.015em;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.65, 0, .35, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- page and engine ---------- */
html, body { margin: 0; height: 100%; background: #0B100D; overflow: hidden; }
body { font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
.reveal { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.reveal .slides { visibility: hidden; }
.reveal .controls, .reveal .progress { display: none !important; }
#stage { position: fixed; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: 50% 50%; z-index: 1; overflow: hidden;
  background: var(--paper); transition: background .32s ease; }
#stage.bg-dark { background: var(--forest); }
#viewport { position: absolute; inset: 0; overflow: hidden; }
#world { position: absolute; left: 0; top: 0; height: 1080px; transform-origin: 0 0; transition: opacity .32s ease; }
#world.cut { opacity: 0; transition: none; }
.frame { position: absolute; top: 0; width: 1920px; height: 1080px; background: var(--paper); color: var(--ink); overflow: hidden; }
.frame.dark { background: var(--forest); color: var(--ivory); }
.frame * { box-sizing: border-box; }

/* ---------- chrome (fixed on the stage, outside the camera) ---------- */
#chrome { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
/* the logo shows on forest pages only (Module 1 shows it on covers only); paper content pages carry the footer */
#chrome .logo { position: absolute; left: 124px; top: 44px; height: 34px; width: auto; display: none; }
body.dark #chrome .logo { display: block; }
#chrome .foot { position: absolute; left: 124px; right: 124px; bottom: 38px; display: flex; justify-content: space-between; align-items: center;
  font: 500 18px/1 var(--sans); letter-spacing: .06em; color: var(--ink-3); }
body.dark #chrome .foot { color: var(--ivory-3); }
#chrome #folio { font-family: var(--mono); font-size: 18px; letter-spacing: .04em; }
#chrome .bar { position: absolute; left: 0; bottom: 0; height: 5px; background: var(--green); transition: width .32s ease; }
body.dark #chrome .bar { background: var(--mint); opacity: .75; }
body.foot-dark #chrome .foot { color: var(--ivory-3); }
body.foot-dark #chrome .bar { background: var(--mint); opacity: .75; }

/* stage rail: the stages, current one underlined; every item jumps to that stage's opener */
#rail { position: absolute; right: 112px; top: 44px; display: flex; gap: 4px; pointer-events: auto; transition: opacity .3s; }
#rail.hidden { opacity: 0; pointer-events: none; }
#rail button { all: unset; cursor: pointer; padding: 6px 11px 9px; font: 700 19px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); border-bottom: 3px solid transparent; }
#rail button .n { font-family: var(--mono); font-weight: 500; margin-right: 8px; }
#rail button.done { color: var(--ink-2); }
#rail button.now { color: var(--ink); border-bottom-color: var(--green); }
#rail button:hover { color: var(--ink); }
body.dark #rail button { color: var(--ivory-3); }
body.dark #rail button.done { color: var(--ivory-2); }
body.dark #rail button.now { color: var(--ivory); border-bottom-color: var(--mint); }


/* ---------- presence: state is a function of (slide, step) ---------- */
[data-in] { opacity: 0; transition: opacity .55s var(--ease), transform .75s var(--ease-out); }
[data-in].on { opacity: 1; }
.rise[data-in] { transform: translateY(18px); }
.rise[data-in].on { transform: none; }
.d1 { transition-delay: .15s !important; } .d2 { transition-delay: .3s !important; } .d3 { transition-delay: .45s !important; }
.d4 { transition-delay: .6s !important; } .d5 { transition-delay: .75s !important; } .d6 { transition-delay: .9s !important; }
.late { transition-delay: 1.1s !important; }
.dim { opacity: .3 !important; transition: opacity .5s; }

/* pen: SVG strokes draw on (pathLength="1"); labels arrive after their strokes */
.pen :is(path, line, polyline, rect, circle, ellipse) { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease); }
.pen.on :is(path, line, polyline, rect, circle, ellipse) { stroke-dashoffset: 0; }
.pen[data-in] { opacity: 1; }
.pen text { opacity: 0; transition: opacity .45s .6s; }
.pen.on text { opacity: 1; }
.pen .fillin { opacity: 0; transition: opacity .45s .6s; }
.pen.on .fillin { opacity: 1; }

/* ---------- type (YZ's scale; display face behind --display) ---------- */
.pad { position: absolute; left: 124px; right: 124px; top: 112px; bottom: 100px; }
.kicker { font: 700 21px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--green-ink); display: flex; align-items: center; gap: 18px; margin: 0; }
.kicker::before { content: ""; width: 46px; height: 3px; background: currentColor; flex: none; }
.dark .kicker { color: var(--mint); }
.kicker.demo { display: inline-flex; background: var(--forest); color: var(--mint); padding: 10px 18px; margin: -10px 0; }
.kicker.demo::before { width: 28px; }
.title { font: var(--display-weight) 72px/1.06 var(--display); letter-spacing: var(--display-track); margin: 20px 0 0; color: var(--ink); }
.dark .title { color: var(--ivory); }
.big { font: var(--display-weight) 112px/1.04 var(--display); letter-spacing: -.02em; margin: 0; color: var(--ivory); }
.big .hl, .hl { color: var(--mint); }
.lede { font: 400 32px/1.45 var(--sans); color: var(--ink-2); margin: 0; }
.dark .lede { color: var(--ivory-2); }
.read { font: 400 28px/1.4 var(--sans); color: var(--ink-2); margin: 0; }
.say { font: var(--display-weight) 40px/1.18 var(--display); letter-spacing: -.01em; color: var(--ink); margin: 0; }
.src { font: 400 21px/1.4 var(--mono); color: var(--ink-3); }
.label { font: 700 21px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.label.g { color: var(--green-ink); } .label.o { color: var(--second); }
.dark .label { color: var(--ivory-3); } .dark .label.g { color: var(--mint); }
.em { color: var(--green); }
.em-o { color: var(--second); }
code, .mono { font-family: var(--mono); font-size: .9em; }

/* takeaways. An ordinary verdict is a line on paper: a forest hairline above, ink serif, the point in green.
   Forest on a paper page is kept for the stage rules, which run edge to edge with a "Stage rule" tag, so a
   stage reads: forest opener -> paper content -> forest stage rule -> next forest opener. Both arrive on the
   click that says them. */
.band { position: absolute; left: 124px; right: 124px; bottom: 116px; padding: 22px 0 0; border-top: 3px solid var(--forest); color: var(--ink);
  display: flex; justify-content: space-between; align-items: baseline; gap: 40px; }
.band b { font: var(--display-weight) 40px/1.22 var(--display); letter-spacing: -.01em; color: var(--ink); }
.band b em { font-style: normal; color: var(--green); }
.band .src { color: var(--ink-3); font-size: 19px; text-align: right; flex: none; max-width: 520px; }
.band.rule { left: 0; right: 0; bottom: 100px; padding: 32px 124px 34px; border-top: none; background: var(--forest); color: var(--ivory);
  justify-content: flex-start; align-items: center; gap: 36px; }
.band.rule b { font-size: 50px; color: var(--ivory); }
.band.rule b em { color: var(--mint); }
.band .rule-tag { flex: none; padding: 11px 16px; background: var(--mint); color: var(--forest);
  font: 700 19px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }

/* a quieter supporting line under a figure */
.note-line { font: 500 26px/1.4 var(--sans); color: var(--ink-2); padding-left: 24px; border-left: 5px solid var(--green); margin: 0; }
.note-line.o { border-left-color: var(--second); }

/* cards: flat, a 6 px top rule carries the meaning */
.card { background: var(--card); border-top: 6px solid #C5CCC6; padding: 28px 34px; }
.card.good { background: var(--tint); border-top-color: var(--green); }
.card.bad { background: var(--second-tint); border-top-color: var(--second); }
.card .label { display: block; margin-bottom: 14px; }

/* file viewer: a file is shown as a file */
.file { background: var(--white); border: 1.5px solid rgba(20, 26, 22, .28); }
.file .fh { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-bottom: 1.5px solid rgba(20, 26, 22, .16); background: #F7F5F0;
  font: 500 21px/1 var(--mono); color: var(--ink-2); }
.file .fh::before { content: ""; width: 14px; height: 18px; border: 2px solid var(--ink-3); border-radius: 2px; flex: none; }
.file pre { margin: 0; padding: 18px 22px; font: 400 22px/1.5 var(--mono); color: var(--ink); white-space: pre-wrap; }
.file pre .c { color: var(--ink-3); } .file pre .g { color: var(--green-ink); font-weight: 500; } .file pre .o { color: var(--second); }
.file.illus { border-style: dashed; }

/* jump chips: real buttons inside a frame; R returns */
.jump { all: unset; pointer-events: auto; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px;
  font: 700 19px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--green-ink); border: 2px solid var(--green); background: var(--paper); }
.jump svg { width: 22px; height: 14px; }
.jump.ext { color: var(--ink-2); border-color: var(--ink-3); }
/* a chip that has not appeared yet must not catch a stray click */
[data-in]:not(.on) .jump, .jump[data-in]:not(.on) { pointer-events: none; }
.dark .jump, .dark .jump.ext { color: var(--mint); border-color: var(--mint); background: transparent; }

/* inline arrow (fonts here have no arrow glyphs; build_index.py expands {{arr}}) */
svg.arr { width: 36px; height: 18px; flex: none; vertical-align: middle; }
svg.arr path { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* "What we tried first -> what worked" strip: YZ's squiggle vs straight line (Module 1, Shift 3) */
.tried { position: absolute; left: 124px; right: 124px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.tried > div { display: grid; grid-template-columns: 300px 1fr; gap: 26px; align-items: center; border-top: 2px solid var(--rule); padding-top: 16px; }
.tried svg { width: 300px; height: 90px; }
.tried .sq path { fill: none; stroke: var(--ghost); stroke-width: 6; stroke-linecap: round; }
.tried .st path { fill: none; stroke: var(--green); stroke-width: 8; stroke-linecap: round; }
.tried circle { fill: var(--ink-2); }
.tried .st circle.end { fill: var(--green); }
.tried .t { font: 500 25px/1.35 var(--sans); color: var(--ink-2); margin-top: 8px; display: block; }
.tried .worked .t { color: var(--ink); font-weight: 600; }

/* a numbered board (Module 2's five-pain board); kept for the shared vocabulary */
.pains .row { display: grid; grid-template-columns: 56px 1fr 52px 470px; align-items: center; column-gap: 22px; padding: 18px 0; border-top: 1.5px solid var(--rule); }
.pains .row:last-child { border-bottom: 1.5px solid var(--rule); }
.pains .n { font: 500 28px/1 var(--mono); color: var(--ink-3); }
.pains .q { font: 500 34px/1.25 var(--display); color: var(--ink); }
.pains .fix { font: var(--display-weight) 34px/1.2 var(--display); color: var(--green-ink); }
.pains .arr { color: var(--ink-3); width: 44px; height: 22px; }

/* stage opener: the stages as an index, the current one lit */
.opener .idx { position: absolute; left: 1180px; top: 250px; width: 616px; }
.opener .idx .r { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; padding: 16px 0; border-top: 1.5px solid rgba(245, 240, 230, .16); color: rgba(245, 240, 230, .34); }
.opener .idx .r:last-child { border-bottom: 1.5px solid rgba(245, 240, 230, .16); }
.opener .idx .r .n { font: 500 22px/1.3 var(--mono); }
.opener .idx .r .p { font: 500 26px/1.3 var(--display); }
.opener .idx .r .f { display: block; font: 500 21px/1.3 var(--mono); margin-top: 6px; }
.opener .idx .r.done { color: var(--ivory-2); }
.opener .idx .r.done .n { color: transparent; position: relative; }
.opener .idx .r.done .n::after { content: ""; position: absolute; left: 2px; top: 4px; width: 9px; height: 17px;
  border: solid var(--mint); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.opener .idx .r.now { color: var(--ivory); background: var(--forest-2); margin-left: -30px; padding: 22px 16px 22px 24px; border-top-color: transparent; border-left: 6px solid var(--mint); }
.opener .idx .r.now .p { font-size: 28px; }
.opener .idx .r.now .n, .opener .idx .r.now .f { color: var(--mint); }
.opener .stagek { position: absolute; left: 124px; top: 236px; width: 980px; font: italic 500 38px/1.25 var(--display); letter-spacing: 0; text-transform: none; color: var(--ivory-2); }
.opener .qline { position: absolute; left: 124px; top: 168px; margin: 0; font: 500 23px/1 var(--mono); letter-spacing: .02em; color: var(--mint); }
.opener .stagek::before { width: 30px; height: 3px; background: var(--mint); align-self: center; }
.opener .big { position: absolute; left: 124px; top: 310px; width: 980px; }
.opener .lede { position: absolute; left: 124px; width: 900px; }

/* the context window, drawn the same way every time it appears */
svg text { font-family: var(--sans); fill: var(--ink); }
.s-ink { stroke: var(--ink); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.s-ghost { stroke: var(--ghost); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.s-green { stroke: var(--green); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.s-ochre { stroke: var(--second); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.s-dash { stroke-dasharray: 7 8; }
.s-box { fill: var(--card); stroke: var(--ink); stroke-width: 2; }
.s-white { fill: var(--white); stroke: var(--ink-2); stroke-width: 1.5; }
.s-win { fill: var(--white); stroke: var(--ink); stroke-width: 4; }
.s-in { fill: var(--tint); stroke: var(--green); stroke-width: 2; }
.s-file { fill: var(--paper); stroke: var(--ink-2); stroke-width: 1.5; }
.s-bad { fill: var(--second-tint); stroke: var(--second); stroke-width: 2; }
.s-badfill { fill: var(--second); stroke: none; }
.s-goodfill { fill: var(--green); stroke: none; }
.s-forest { fill: var(--forest); stroke: none; }
.t-lab { font: 700 20px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; fill: var(--ink-3); }
.t-lab.g { fill: var(--green-ink); } .t-lab.o { fill: var(--second); } .t-lab.w { fill: var(--ivory); }
.t-head { font: var(--display-weight) 30px/1 var(--display); fill: var(--ink); }
.t-body { font: 400 24px/1 var(--sans); fill: var(--ink-2); }
.t-body.o { fill: var(--second); } .t-body.g { fill: var(--green-ink); }
.t-mono { font: 400 21px/1 var(--mono); fill: var(--ink); }
.t-mono.o { fill: var(--second); } .t-mono.g { fill: var(--green-ink); } .t-mono.m { fill: var(--ink-3); }
.t-note { font: italic 400 24px/1 var(--display); fill: var(--ink-2); }
.t-note.o { fill: var(--second); } .t-note.g { fill: var(--green-ink); }

/* demo cue */
.watch { display: inline-flex; align-items: baseline; gap: 16px; padding: 16px 26px; background: var(--tint); border-left: 6px solid var(--green);
  font: 500 27px/1.35 var(--sans); color: var(--ink); }
.watch b { font: 700 20px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--green-ink); }

/* placeholder for a capture that does not exist yet: unmistakable, never shipped as content */
.placeholder { border: 2.5px dashed var(--second); background: var(--second-tint); padding: 30px 36px; color: var(--ink-2); font: 400 26px/1.4 var(--sans); }
.placeholder b { display: block; font: 700 19px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--second); margin-bottom: 14px; }

/* ---------- navigator ---------- */
/* the frame clips its own overflow, so the selection is an outline (never clipped) and the number sits inside */
body.nav-open .frame { cursor: pointer; outline: 0 solid var(--green); outline-offset: 30px; transition: outline-width .15s; }
body.nav-open .frame.nav-sel { outline-width: 34px; }
body.nav-open .frame::after { content: attr(data-no); position: absolute; left: 0; top: 0; z-index: 50; padding: 26px 46px 30px;
  background: var(--ink); color: var(--paper); font: 500 150px/1 var(--mono); pointer-events: none; }
body.nav-open .frame.nav-sel::after { background: var(--green); }
body.nav-open #chrome { opacity: 0; }
#navhud { position: absolute; left: 50%; bottom: 34px; transform: translate(-50%, 16px); z-index: 20; opacity: 0; pointer-events: none;
  display: flex; align-items: baseline; gap: 22px; padding: 16px 30px; background: var(--card); border: 1px solid var(--rule); transition: opacity .3s, transform .3s; }
body.nav-open #navhud { opacity: 1; transform: translate(-50%, 0); }
#navhud b { font: 500 34px/1 var(--mono); color: var(--green-ink); min-width: 2.4ch; }
#navhud b.typing { color: var(--ink); }
#navhud b i { font-style: normal; color: var(--green); animation: navcaret 1s steps(1) infinite; }
@keyframes navcaret { 50% { opacity: 0; } }
#navhud span { font: var(--display-weight) 28px/1.2 var(--display); color: var(--ink); white-space: nowrap; }
#navhud em { font: 500 15px/1 var(--sans); white-space: nowrap; font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- PDF export: every frame prints at its final state; animations off ---------- */
html.pdf-export *, html.pdf-export *::before { transition: none !important; animation: none !important; }
/* the exporter samples the first slide (forest) for its notes pages; notes always print on paper */
#__pdf_notes__ { background: var(--paper) !important; color: var(--ink) !important; }