/* Weeks 11–12 decks (scripts/build-ai-unit). Parchment house style.
 * Panel rule (spec §4.0): left = content, right = questions, two panels in
 * one window on every device, each scrolling on its own. */
:root {
  --cream: #faf6ec; --cream-sub: #f0eadb; --paper: #ffffff;
  --ink: #1a1510; --ink-sub: #4a3c1f; --muted: #5c5346;
  --green: #143d24; --green-light: #1f5533;
  --gold: #f3d87a; --gold-dark: #a68b4e; --rust: #a6543a;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--cream); color: var(--ink); }
body { font: 400 17px/1.5 Georgia, "Times New Roman", serif; overflow: hidden; }
.deck { position: relative; height: 100dvh; width: 100%; }
.slide { position: absolute; inset: 0; padding: 20px 24px 72px; display: none; }
.slide.active { display: flex; flex-direction: column; }
.slide.single { overflow-y: auto; padding-left: max(24px, 5vw); padding-right: max(24px, 5vw); }
.slide.center { justify-content: center; }
.slide.split.active { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; }
.panel { overflow-y: auto; min-height: 0; background: var(--paper); border: 1px solid var(--gold-dark); border-radius: 8px; padding: 16px 20px; }
.panel.right { background: var(--cream-sub); }
.eyebrow { font: 700 12px/1.2 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-dark); margin: 0 0 10px; }
h1 { font-size: clamp(30px, 5vw, 56px); line-height: 1.05; color: var(--green); margin: 0 0 18px; }
h2.text-title { font-size: 24px; color: var(--green); margin: 0 0 10px; line-height: 1.2; }
h3 { font-size: 18px; color: var(--green); margin: 18px 0 6px; }
p { margin: 0 0 12px; }
strong { color: var(--green); }
.sources { font-size: 14px; color: var(--muted); border-top: 1px solid var(--cream-sub); padding-top: 8px; margin-top: 16px; }
ul.donow { list-style: none; padding: 0; margin: 0 0 18px; font-size: clamp(19px, 2.4vw, 30px); line-height: 1.35; max-width: 60ch; }
ul.donow li { margin: 0 0 14px; }
.orient { font-size: clamp(17px, 2vw, 24px); color: var(--ink-sub); }
.announce-body { font-size: clamp(18px, 2.2vw, 28px); white-space: pre-wrap; max-width: 60ch; }
ol.directions { font-size: clamp(18px, 2.2vw, 26px); line-height: 1.4; padding-left: 1.4em; max-width: 60ch; }
ol.directions li { margin: 0 0 12px; }
.ido-qs { list-style: none; padding: 0; margin: 0; counter-reset: q; }
.ido-qs li { counter-increment: q; background: var(--paper); border: 1px solid var(--gold-dark); border-radius: 8px; padding: 12px 14px; margin: 0 0 12px; }
.ido-qs li > p::before { content: counter(q) ". "; font-weight: 700; color: var(--green); }
.cue { display: inline-block; font: 700 11px/1.2 ui-monospace, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--rust); background: rgba(166,84,58,.1); padding: 3px 7px; border-radius: 4px; margin-bottom: 6px; }
details.check { border: 2px dashed var(--gold-dark); border-radius: 6px; padding: 6px 10px; background: rgba(243,216,122,.12); }
details.check summary { cursor: pointer; font-weight: 700; color: var(--green); }
details.check p { margin: 6px 0 0; }
.figure { margin: 0; }
.figure-art svg { width: 100%; height: auto; display: block; }
.figure figcaption { font-size: 15px; color: var(--ink-sub); margin-top: 8px; }
.figure + .figure { margin-top: 48px; }
.board-q { background: var(--green); color: var(--gold); padding: 14px 16px; border-radius: 8px; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0 0 10px; }
.board-q strong { color: var(--gold); }
.decision { font-size: 17px; }
.standing { font-size: 15px; color: var(--ink-sub); border-left: 4px solid var(--gold); padding-left: 10px; }
.tabs { margin-top: 10px; }
.tab-row { display: flex; gap: 6px; margin-bottom: 10px; }
.tab-row button { font: 700 14px/1 Georgia, serif; padding: 9px 14px; border-radius: 6px; border: 1px solid var(--gold-dark); background: var(--cream); color: var(--ink-sub); cursor: pointer; }
.tab-row button[aria-selected="true"] { background: var(--green); color: var(--gold); border-color: var(--green); }
.tab-panel { display: none; }
.tab-panel.on { display: block; }
.form-embed { width: 100%; height: 70dvh; border: 1px solid var(--gold-dark); border-radius: 6px; background: #fff; }
.unlinked { background: #fff8e6; border: 1px solid var(--gold-dark); border-radius: 6px; padding: 12px; }
.sv-desc { font-size: 15px; }
.sv-item { background: var(--paper); border: 1px solid var(--gold-dark); border-radius: 6px; padding: 10px 12px; margin: 0 0 10px; }
.sv-prompt { margin: 0 0 6px; }
.sv-label { font-weight: 700; color: var(--rust); font-family: ui-monospace, Menlo, monospace; font-size: .9em; }
.sv-choices { margin: 0; padding-left: 0; list-style: none; }
.sv-choices li::before { content: "\25CB  "; color: var(--gold-dark); }
.sv-write { font-size: 14px; color: var(--muted); font-style: italic; margin: 0; }
.lock { margin-top: 6px; }
.lock-btn { display: inline-block; background: var(--green); color: var(--gold); border: 2px solid var(--gold); font-weight: 700; font-size: 20px; padding: 14px 22px; border-radius: 8px; text-decoration: none; }
.lock-btn[hidden], .lock-wait[hidden] { display: none; }
.slide.center .lock-btn { font-size: clamp(22px, 3vw, 34px); padding: 20px 30px; }
.lock-wait { font-size: 18px; color: var(--ink-sub); }
.lab-warn { display: block; width: fit-content; margin: 0 0 12px; padding: 10px 14px; background: #fbe3dc; border: 2px solid #9b2c1c; border-radius: 8px; color: #7a1d10; font: 800 clamp(15px, 1.6vw, 20px)/1.3 system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: .02em; }
.nav { position: fixed; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 12px; z-index: 10; pointer-events: none; }
.nav button { pointer-events: auto; background: var(--green); color: var(--gold); border: 2px solid var(--gold); padding: 8px 14px; border-radius: 6px; font: 700 15px Georgia, serif; cursor: pointer; }
.nav button:disabled { opacity: .3; cursor: default; }
.nav .counter { pointer-events: auto; font: 700 13px ui-monospace, Menlo, monospace; color: var(--muted); background: var(--cream); padding: 6px 10px; border: 1px solid var(--gold-dark); border-radius: 4px; }
@media (max-width: 700px) {
  body { font-size: 15px; }
  .slide { padding: 10px 8px 64px; }
  .slide.single { padding-left: 16px; padding-right: 16px; }
  .slide.split.active { gap: 8px; }
  .panel { padding: 10px; }
  .tab-row button { padding: 7px 8px; font-size: 12px; }
}
/* Figure slides: the diagram gets more of the window so its labels read on a Chromebook. */
.slide.split.fig.active { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }

/* Final exam and showcase decks (Dec 15–18). */
.exam-directions { font-size: clamp(22px, 2.6vw, 34px); line-height: 1.45; max-width: 34em; }
.makeup { margin-top: 24px; }
.tools-embed { min-height: 60vh; }

/* One floating discussion form laid over the visible .form-slot (deck.js). */
.form-slot { height: 62dvh; }
.form-float { position: fixed; z-index: 5; height: auto; visibility: hidden; }
.ido-more { margin-top: 12px; }
.ido-more summary { cursor: pointer; font-weight: 700; }

/* Java On-Ramp: fenced data and code. Java and steps blocks carry line
 * numbers (as the bench's code panel does); numbers are not selectable, so
 * copying the code copies only the code. */
pre.data, pre.sv-code { font: 0.92em/1.5 "IBM Plex Mono", ui-monospace, Consolas, monospace; background: #fbfaf6; color: #1b1b1b; border: 1px solid #b9b09c; border-radius: 6px; padding: 0.5em 0.8em; overflow-x: auto; white-space: pre; text-align: left; }
pre.code .ln { display: inline-block; min-width: 2ch; margin-right: 1.2ch; color: #8a8576; text-align: right; user-select: none; }
.stack-head { margin: 56px 0 16px; font-family: Georgia, serif; color: #143d24; }

/* Guide mode (Sean, Oct 21): a faint thumb, bottom-left, on every slide. */
.guide-thumb { position: fixed; left: 10px; bottom: 10px; z-index: 11; width: 30px; height: 30px; padding: 4px; border: 0; border-radius: 50%; background: transparent; color: #1a1510; opacity: 0.18; cursor: pointer; transform: rotate(90deg); }
.guide-thumb:hover, .guide-thumb:focus-visible { opacity: 0.6; }
.v-guide { display: none; }
html.guide .v-std { display: none; }
html.guide div.v-guide { display: block; }
html.guide span.v-guide { display: inline; }
.guide-banner { display: none; }
html.guide .guide-banner { display: block; position: fixed; top: 10px; left: 50%; transform: translateX(-50%) rotate(-2deg); z-index: 11; padding: 4px 18px; border-radius: 999px; background: #a6543a; color: #f3e9cf; font: bold 18px/1.4 Georgia, serif; letter-spacing: 0.08em; pointer-events: none; }
html.guide .guide-thumb { opacity: 0.7; color: #a6543a; }