/* ============================================================================
   LINE READY — module 01's stylesheet.

   Three files from the Academy build, joined: the shared page chrome (the module
   toolbar, the stage, the Back/Next bar, the narrator cards, the modals, the
   caption bar), the lesson's own components (the procedure-cycle rail, the FMA
   strip, the knowledge check) and the drawn flight deck.

   Three things changed on the way in. Every colour resolves through brand.js, so
   this file holds no hex and check-brand.sh covers it. The CDU tour's rules are
   gone: module 07 is fmc-tour.js here and injects its own, so they could only be
   dead weight. And the photograph-backed deck rules are gone with the artwork
   they tinted -- module 01 draws the 737NG rather than tracing a photo.

   module-flows.html overrides the few full-height layout rules below, because
   this runs INSIDE the site chrome instead of owning the viewport.
   ============================================================================ */

/* ---------- Module player: app frame ----------
   THE ROOT IS NOT THE PLAYER'S TO PIN. In the standalone Academy build the lesson owns
   the viewport and clips the document so #stage is the only thing that scrolls. Here it
   is one card inside a page that has the site's nav above it and its footer below, and
   `html, body { height: 100%; overflow: hidden }` followed it in: module-flows.html
   overrode #app, #hud, #stage and #nav but not the root, so the lesson laid out to its
   full height inside a body clipped at the window and the page simply ended mid-module,
   with no way to scroll to the rest. It read as a load failure and was a stylesheet one.
   #app below is sized by the embedding page, so nothing here needs the root pinned. */
#app { display: grid; grid-template-rows: 56px 1fr 58px; height: var(--app-h); width: 100%; }
/* ---------- HUD ---------- */
#hud { background: var(--cd-navy); color: var(--cd-white); display: flex; align-items: center; gap: 10px; padding: 0 16px; }
#hud .wm { font-weight: 700; font-size: 15px; letter-spacing: -.01em; white-space: nowrap; }
#hud .wm .tri { color: var(--cd-rose); margin: 0 5px; }
#hud .mod { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--cd-ink-on-navy); white-space: nowrap; }
#hud .spacer { flex: 1; }
#hud .count { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px;
  color: var(--cd-ink-on-navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hudBtn { background: rgba(255,255,255,.10); color: var(--cd-white); border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--cd-radius); font-size: 14px; line-height: 1; padding: 8px 11px; cursor: pointer;
  min-height: 36px; display: inline-flex; align-items: center; justify-content: center; }
.hudBtn:hover { background: rgba(255,255,255,.18); }
.hudBtn[aria-pressed="true"] { background: var(--cd-red); border-color: var(--cd-red); }
#jumpTo { background: rgba(255,255,255,.10); color: var(--cd-white); border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--cd-radius); font-size: 12px; padding: 7px 9px; max-width: 190px; min-height: 36px; }
#jumpTo option { color: var(--cd-ink-body); background: var(--cd-white); }
/* ---------- Stage ---------- */
#stage { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 26px 20px 34px; }
.slide { display: none; max-width: 900px; margin: 0 auto; }
.slide.active { display: block; animation: riseIn .22s ease both; }
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
h1 { font-size: clamp(1.7rem, 3.6vw, 2.35rem); font-weight: 600; margin-bottom: 10px; }
.lede { font-size: 1.05rem; color: var(--cd-ink-soft); max-width: 60ch; margin-bottom: 20px; text-wrap: pretty; }
.slide > .kicker { display: block; margin-bottom: 10px; }
.card { background: var(--cd-white); border-radius: 8px; padding: 18px 20px; margin-bottom: 12px;
  box-shadow: rgba(18,22,30,.024) 0 1px 4px 0, rgba(18,22,30,.05) 0 1px 0 0, rgba(18,22,30,.024) 0 0 0 1px; }
.card h3 { font-size: 1rem; margin-bottom: 5px; }
.card p { font-size: .94rem; color: var(--cd-ink-soft); text-wrap: pretty; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.grid2 .card { margin-bottom: 0; }
.note { font-size: .87rem; color: var(--cd-ink-soft); background: var(--cd-surface);
  border: 1px solid var(--cd-line-soft); border-left: 4px solid var(--cd-navy);
  border-radius: var(--cd-radius); padding: 13px 16px; text-wrap: pretty; }
.note.caution { border-left-color: var(--cd-amber); background: var(--cd-amber-bg); }
.ofp { background: var(--cd-white); border: 1px solid var(--cd-line-soft); border-radius: 14px;
  padding: 16px 18px; margin-bottom: 12px; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; line-height: 1.75; overflow-x: auto; }
.ofp .t { font-weight: 700; color: var(--cd-navy); letter-spacing: .08em; margin-bottom: 8px; }
.ofp .s { color: var(--cd-red); font-weight: 700; letter-spacing: .14em; margin-top: 10px; font-size: 9.5px; }
.ofp .r { white-space: nowrap; color: var(--cd-ink-body); }
.bigBtn { background: var(--cd-red); color: var(--cd-white); border: none; border-radius: 12px;
  font-size: 1rem; font-weight: 600; padding: 13px 30px; cursor: pointer; margin-top: 16px; min-height: 46px; }
.bigBtn:hover { background: var(--cd-navy); }
/* ---------- Nav ---------- */
#nav { background: var(--cd-navy); display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 16px; }
.navBtn { background: rgba(255,255,255,.10); color: var(--cd-white); border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px; font-size: .88rem; font-weight: 600; padding: 10px 22px; cursor: pointer; min-height: 40px; }
.navBtn:hover:not(:disabled) { background: rgba(255,255,255,.18); }
.navBtn:disabled { opacity: .3; cursor: default; }
.navBtn.primary { background: var(--cd-red); border-color: var(--cd-red); }
.navBtn.primary:hover:not(:disabled) { background: var(--cd-red-dark); }
#navProgress { flex: 1; height: 3px; background: rgba(255,255,255,.15); border-radius: 2px; overflow: hidden; max-width: 340px; }
#navProgress i { display: block; height: 100%; background: var(--cd-rose); width: 0; transition: width .3s ease; }
/* ---------- Landing ---------- */
#slide0 { text-align: center; padding-top: 22px; }
.seal { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--cd-navy); }
.seal .tri { color: var(--cd-red); }
.subseal { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--cd-ink-soft); margin: 5px 0 20px; }
.names { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 22px 0 14px; }
.nameChip { background: var(--cd-white); border: 1px solid var(--cd-line-soft); border-radius: 12px;
  padding: 11px 18px; font-size: .8rem; color: var(--cd-ink-soft); box-shadow: var(--cd-shadow); }
.nameChip b { display: block; font-size: 1rem; color: var(--cd-navy); margin-bottom: 1px; }
#slide0 .lede { margin-left: auto; margin-right: auto; }
#tapStart { display: inline-block; margin-top: 16px; background: var(--cd-navy); color: var(--cd-white);
  font-size: .85rem; font-weight: 600; border-radius: 10px; padding: 10px 18px; }
#tapStart[hidden] { display: none; }
.replayBtn { margin-top: 12px; background: transparent; border: 1.5px solid var(--cd-navy);
  color: var(--cd-navy); border-radius: 10px; font-size: .82rem; font-weight: 600;
  padding: 8px 15px; cursor: pointer; min-height: 38px; }
.replayBtn:hover { background: var(--cd-surface); }
/* ---------- Quiz ---------- */
.qBlock { background: var(--cd-white); border: 1px solid var(--cd-line-soft); border-radius: 14px;
  padding: 18px 20px; margin-bottom: 14px; box-shadow: var(--cd-shadow); }
.qText { font-size: .98rem; font-weight: 600; color: var(--cd-ink-body); margin-bottom: 12px; text-wrap: pretty; }
.opt { display: block; width: 100%; text-align: left; background: var(--cd-canvas);
  border: 1px solid var(--cd-line-soft); border-radius: 10px; font: inherit; font-size: .92rem;
  color: var(--cd-ink-body); padding: 12px 14px; margin-bottom: 8px; cursor: pointer; min-height: 44px; }
.opt:hover:not(:disabled) { background: var(--cd-surface); border-color: var(--cd-line-strong); }
.opt.correct { background: var(--cd-green-bg); border-color: var(--cd-green); color: var(--cd-green); font-weight: 600; }
.opt.wrong { background: var(--cd-red-bg); border-color: var(--cd-red); color: var(--cd-red-deep); }
.opt:disabled { cursor: default; }
.qFeedback { font-size: .87rem; color: var(--cd-ink-soft); margin-top: 6px; display: none; }
#quizScore { font-size: 1rem; font-weight: 600; color: var(--cd-navy); display: none; margin-top: 6px; }
/* ---------- Modal ---------- */
#modalBack { display: none; position: fixed; inset: 0; background: rgba(0,33,77,.55);
  backdrop-filter: blur(3px); z-index: 50; align-items: center; justify-content: center; padding: 22px; }
#modalBack.open { display: flex; }
#modal { background: var(--cd-white); border-radius: 16px; padding: 24px; max-width: 460px; width: 100%;
  animation: riseIn .2s ease both; }
#modal h3 { margin-bottom: 12px; }
#modal p { font-size: .92rem; color: var(--cd-ink-soft); margin-bottom: 11px; text-wrap: pretty; }
@media (max-width: 760px) {
  #hud .mod, #hud .count { display: none; }
}
/* ---------- Narrator selection ---------- */
#voiceWrap { max-width: 560px; margin: 26px auto 0; text-align: left; }
#voiceWrap .vHead { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px;
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cd-red);
  margin-bottom: 8px; }
#voiceWrap .vLede { font-size: .92rem; color: var(--cd-ink-soft); margin-bottom: 14px; text-wrap: pretty; }
#voicePicker { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { #voicePicker { grid-template-columns: 1fr; } }
.voiceCard { background: var(--cd-white); border: 1.5px solid var(--cd-line-soft);
  border-radius: 8px; padding: 16px; cursor: pointer; display: flex; flex-direction: column;
  gap: 12px; align-items: flex-start; box-shadow: var(--cd-shadow);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; position: relative; }
.voiceCard:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,33,77,.10); }
.voiceCard.sel { border-color: var(--cd-navy); box-shadow: 0 0 0 3px rgba(0,33,77,.10), var(--cd-shadow); }
.voiceCard.sel::after { content: "Selected"; position: absolute; top: 12px; right: 12px;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 8.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cd-green);
  background: var(--cd-green-bg); border: 1px solid var(--cd-green);
  border-radius: 999px; padding: 3px 8px; }
.vGlyph { width: 40px; height: 40px; border-radius: 50%; background: var(--cd-navy); color: var(--cd-white);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 15px; font-weight: 700; }
.voiceCard.sel .vGlyph { background: var(--cd-red); }
.vMain b { display: block; font-size: .98rem; color: var(--cd-navy); }
.vMain i { font-style: normal; font-size: .82rem; color: var(--cd-ink-soft); }
.vSample { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cd-navy-link);
  background: var(--cd-surface); border: 1px solid var(--cd-line-soft); border-radius: 999px;
  padding: 7px 13px; cursor: pointer; min-height: 32px; }
.vSample:hover { border-color: var(--cd-navy-link); }
#beginBtn:disabled { background: var(--cd-line-strong); cursor: not-allowed; }
#voiceWrap.attn { animation: nudge .4s ease 2; }
@keyframes nudge { 50% { transform: translateX(5px); } }
/* ---------- HUD narrator chip + live indicator ---------- */
#voiceBtn { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9.5px;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; gap: 7px; }
#voiceBtn[hidden] { display: none; }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; width: 13px; }
.eq i { width: 3px; background: var(--cd-rose); border-radius: 1px; height: 3px; }
body.lr-playing .eq i { animation: eqb 0.9s ease-in-out infinite; }
body.lr-playing .eq i:nth-child(2) { animation-delay: .25s; }
body.lr-playing .eq i:nth-child(3) { animation-delay: .5s; }
@keyframes eqb { 0%,100% { height: 3px; } 50% { height: 11px; } }
/* ---------- Preview accents ---------- */
.pvBadge { display: inline-block; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--cd-amber); background: var(--cd-amber-bg); border: 1px solid var(--cd-amber);
  border-radius: 999px; padding: 4px 11px; margin-bottom: 14px; }
.pitch { background: var(--cd-navy); border-radius: 18px; padding: 28px 30px; color: var(--cd-white);
  position: relative; overflow: hidden; margin-top: 8px; }
.pitch::before { content: ""; position: absolute; top: -120px; right: -80px; width: 320px;
  height: 320px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,154,166,.20) 0%, transparent 68%); }
.pitch > * { position: relative; }
.pitch .kicker { color: var(--cd-rose); }
.pitch h3 { color: var(--cd-white); font-size: 1.25rem; margin: 8px 0 8px; }
.pitch p { color: var(--cd-ink-on-navy); font-size: .93rem; max-width: 54ch; text-wrap: pretty; }
.pitch .bigBtn { margin-top: 16px; text-decoration: none; display: inline-block; }
.mback { display: none; position: fixed; inset: 0; background: rgba(0,33,77,.55);
  backdrop-filter: blur(3px); z-index: 60; align-items: center; justify-content: center; padding: 22px; }
.mback.open { display: flex; }
.mcard { background: var(--cd-white); border-radius: 16px; padding: 24px; max-width: 440px; width: 100%;
  animation: riseIn .2s ease both; }
.mcard h3 { margin-bottom: 10px; }
.mcard p { font-size: .92rem; color: var(--cd-ink-soft); margin-bottom: 8px; text-wrap: pretty; }
/* ---------- Captions & key pointing ---------- */
#capBar { margin-top: 12px; background: var(--cd-navy); border-radius: 12px;
  padding: 13px 16px; min-height: 74px; display: flex; flex-direction: column;
  gap: 7px; justify-content: center; position: relative; overflow: hidden; }
#capBar::before { content: ""; position: absolute; top: -90px; right: -70px; width: 220px;
  height: 220px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,154,166,.16) 0%, transparent 70%); }
#capPtr { position: relative; align-self: flex-start; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--cd-navy); background: var(--cd-rose); border-radius: 999px; padding: 3px 9px; }
#capPtr[hidden] { display: none; }
#capText { position: relative; color: var(--cd-white); font-size: .95rem; line-height: 1.45;
  text-wrap: pretty; min-height: 1.4em; }
#capBar.off #capText { color: var(--cd-ink-on-navy); font-style: italic; }
#ccBtn[aria-pressed="false"] { opacity: .55; }
/* The pointed-at control. Rose ring reads on the dark bezel and matches
   the caption pointer chip, so the eye connects label to key. */
.lr-focus { position: relative; z-index: 2;
  box-shadow: 0 0 0 2px var(--cd-rose), 0 0 14px rgba(255,154,166,.75) !important;
  border-radius: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .lr-focus { animation: focusPulse 1.5s ease-in-out infinite; }
  @keyframes focusPulse {
    0%, 100% { box-shadow: 0 0 0 2px var(--cd-rose), 0 0 10px rgba(255,154,166,.55) !important; }
    50%      { box-shadow: 0 0 0 3px var(--cd-rose), 0 0 18px rgba(255,154,166,.95) !important; }
  }
}
/* ---------- Contrails chrome (matches site-chrome.js deep-tool pattern) ---------- */
#hud { gap: 10px; }
.hudHome { display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  color: var(--cd-white); flex: none; }
.hudHome:hover .hudWm { color: var(--cd-rose); }
.hudWm { font-family: "Arial Black", Arial, sans-serif; font-size: .92rem;
  letter-spacing: .045em; color: var(--cd-white); white-space: nowrap; }
.hudSep { color: rgba(255,255,255,.34); font-size: .9rem; flex: none; }
.hudCrumb { font-size: .84rem; color: var(--cd-ink-on-navy); text-decoration: none;
  white-space: nowrap; flex: none; }
.hudCrumb:hover { color: var(--cd-white); text-decoration: underline; }
.hudHere { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9.5px;
  font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--cd-ink-on-navy); white-space: nowrap; flex: none; }
/* The exit that was missing: a real way back to the catalogue, always visible. */
#exitBtn { text-decoration: none; }
@media (max-width: 900px) {
  .hudCrumb, .hudSep { display: none; }
  .hudHere { display: none; }
}
/* The unit and its caption bar are one object: the captions describe the
   device, so they sit under it and share its width. */
.unitCol { flex: 0 0 358px; max-width: 100%; display: flex; flex-direction: column; }
#capBar { margin-top: 12px; }
@media (max-width: 820px) { .unitCol { flex: 1 1 100%; align-items: center; }
  .unitCol #capBar { width: 358px; max-width: 100%; } }
#stage { padding-top: 20px; }
@media (max-height: 900px) {
  .unitCol { transform: scale(.9); transform-origin: top center; margin-bottom: -68px; }
}
@media (max-height: 780px) {
  .unitCol { transform: scale(.8); margin-bottom: -136px; }
}
/* Below the two-column breakpoint the unit is already centred and the page
   scrolls naturally; scaling there only makes the keys harder to hit. */
@media (max-width: 820px) {
  .unitCol { transform: none !important; margin-bottom: 0 !important; }
}


/* ============================================================
   LINE READY — concept-lesson player skin
   The CDU tour (module.css + cdu.css) has an instrument to
   look at. A concept lesson does not: its visual interest has
   to come from the diagrams, so this file is where the module
   01 artwork lives — the procedure-cycle rail, the FMA strip,
   the step graphics.

   Every colour here resolves through brand.js. The owner's dev
   concept was set in Arial Black over a flat red; this keeps its
   layout and its interaction and redraws them in Column:
   Instrument Sans, JetBrains Mono eyebrows, 8px radius,
   hairline cards.
   ============================================================ */

/* ---------- shared blocks the content vocabulary draws ---------- */
.banner {
  background: var(--cd-navy); color: var(--cd-white); border-radius: var(--cd-radius);
  padding: 14px 18px; text-align: center; margin-bottom: 12px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  position: relative; overflow: hidden;
}
.banner::before { content: ""; position: absolute; top: -90px; right: -70px; width: 220px;
  height: 220px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,154,166,.18) 0%, transparent 70%); }
.banner em { font-style: normal; color: var(--cd-rose); }

/* A card with a coloured spine. The concept used border-left as its
   only accent; kept, because it is what makes a wall of prose scannable. */
.spine { background: var(--cd-white); border: 1px solid var(--cd-line-soft);
  border-left: 4px solid var(--cd-navy); border-radius: var(--cd-radius);
  padding: 15px 18px; margin-bottom: 12px; box-shadow: var(--cd-shadow); }
.spine.red { border-left-color: var(--cd-red); }
.spine.caution { border-left-color: var(--cd-amber); background: var(--cd-amber-bg); }
.spine h3 { font-size: 1rem; margin-bottom: 5px; }
.spine p { font-size: .93rem; color: var(--cd-ink-soft); text-wrap: pretty; }
.spine p + p { margin-top: 9px; }

/* ---------- FMA strip: armed white -> active green ---------- */
.fmaStrip { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  background: var(--cd-lr-fma); border-radius: var(--cd-radius); padding: 12px 14px; margin: 12px 0; }
.fmaChip { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px;
  font-weight: 700; letter-spacing: .1em; padding: 5px 12px; border-radius: 4px; }
.fmaChip.armed  { color: var(--cd-white); border: 1px solid rgba(255,255,255,.55); }
.fmaChip.active { color: var(--cd-lr-fma); background: var(--cd-lr-green);
  box-shadow: 0 0 12px var(--cd-lr-glow); }
.fmaLabel { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 8.5px;
  font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--cd-ink-on-navy-dim); }
.fmaArrow { color: var(--cd-rose); font-size: 12px; }

/* ---------- the five-beat cycle ---------- */
#cycleRail { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap;
  margin: 16px 0 8px; }
.stepChip {
  flex: 1 1 108px; min-width: 96px; background: var(--cd-white);
  border: 1.5px solid var(--cd-line-soft); border-radius: var(--cd-radius);
  padding: 11px 8px; cursor: pointer; font: inherit; text-align: center;
  font-size: .84rem; font-weight: 600; color: var(--cd-line-strong);
  display: flex; flex-direction: column; gap: 4px; min-height: 62px;
  justify-content: center; letter-spacing: .04em;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.stepChip .sn { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 8.5px;
  font-weight: 700; letter-spacing: .14em; color: var(--cd-line-strong); }
/* Locked steps stay visible but plainly inert — the rail should read as a
   sequence with one live door, not as five dead buttons. */
.stepChip:disabled { cursor: not-allowed; }
.stepChip.unlocked { color: var(--cd-navy); border-color: var(--cd-red); cursor: pointer;
  box-shadow: 0 0 0 3px rgba(178,34,52,.10); }
.stepChip.unlocked .sn { color: var(--cd-red); }
.stepChip.unlocked:hover { transform: translateY(-2px); }
.stepChip.visited { color: var(--cd-green); border-color: var(--cd-green);
  background: var(--cd-green-bg); box-shadow: none; }
.stepChip.visited .sn { color: var(--cd-green); }
.stepChip.current { border-color: var(--cd-navy); color: var(--cd-navy);
  background: var(--cd-white); box-shadow: 0 0 0 3px rgba(0,33,77,.12); }
.stepChip.current .sn { color: var(--cd-navy); }
@media (prefers-reduced-motion: no-preference) {
  .stepChip.unlocked { animation: chipReady 1.8s ease-in-out infinite; }
  @keyframes chipReady {
    0%,100% { box-shadow: 0 0 0 3px rgba(178,34,52,.10); }
    50%     { box-shadow: 0 0 0 5px rgba(178,34,52,.18); }
  }
}
.railArrow { align-self: center; color: var(--cd-line-strong); font-size: 11px; flex: none; }
.loopNote { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9.5px;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cd-ink-soft); text-align: center; margin-bottom: 14px; }

#stepDetail { background: var(--cd-white); border: 1px solid var(--cd-line-soft);
  border-radius: 14px; padding: 20px 22px; box-shadow: var(--cd-shadow); min-height: 190px; }
#stepDetail h3 { font-size: 1.18rem; margin-bottom: 10px; }
#stepDetail p { font-size: .95rem; color: var(--cd-ink-soft); text-wrap: pretty; }
#stepDetail .hint { color: var(--cd-ink-soft); font-size: 1rem; }
.detailPane { animation: riseIn .2s ease both; }

/* step artwork — small, diagrammatic, no photography */
.art { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  background: var(--cd-canvas); border: 1px solid var(--cd-line-soft);
  border-radius: var(--cd-radius); padding: 18px 14px; margin-bottom: 13px; min-height: 78px; }
.annoChip { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px;
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cd-white);
  background: var(--cd-red); border-radius: 999px; padding: 7px 16px; }
.miniPanel { display: flex; gap: 7px; }
.miniSw { width: 30px; height: 38px; border-radius: 5px; background: var(--cd-lr-key);
  border: 1px solid var(--cd-lr-key-edge); color: var(--cd-lr-legend);
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; font-weight: 700;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5px; }
/* the flow sweeping left to right across the panel */
@media (prefers-reduced-motion: no-preference) {
  .miniSw { animation: sweep 2.4s ease-in-out infinite; }
  .miniSw:nth-child(2) { animation-delay: .18s; }
  .miniSw:nth-child(3) { animation-delay: .36s; }
  .miniSw:nth-child(4) { animation-delay: .54s; }
  .miniSw:nth-child(5) { animation-delay: .72s; }
  @keyframes sweep {
    0%, 55%, 100% { background: var(--cd-lr-key); box-shadow: none; }
    18%           { background: var(--cd-lr-dim); box-shadow: 0 0 10px var(--cd-lr-glow); }
  }
}
.ckCard { background: var(--cd-white); border: 1px solid var(--cd-line-strong);
  border-radius: 6px; padding: 11px 14px; width: 100%; max-width: 330px;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; }
.ckLine { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0;
  color: var(--cd-ink-soft); }
.ckLine b { color: var(--cd-green); font-weight: 700; }
.bubble { font-size: .82rem; border-radius: 12px; padding: 9px 14px; max-width: 46%; }
.bubble.pm { background: var(--cd-navy); color: var(--cd-white); border-bottom-left-radius: 3px; }
.bubble.pf { background: var(--cd-white); color: var(--cd-navy);
  border: 1px solid var(--cd-line-strong); border-bottom-right-radius: 3px; }
.loopIcon { font-size: 34px; color: var(--cd-navy-link); line-height: 1; }
@media (prefers-reduced-motion: no-preference) {
  .loopIcon { animation: spin 6s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
}

#cycleDone { display: none; margin-top: 13px; background: var(--cd-green-bg);
  border: 1px solid var(--cd-green); border-radius: var(--cd-radius);
  color: var(--cd-green); font-weight: 600; font-size: .9rem; padding: 12px 16px; }
#cycleDone.show { display: block; animation: riseIn .25s ease both; }

/* ---------- knowledge check: one question at a time ---------- */
#kcProgress { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px;
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cd-red); margin-bottom: 10px; }
#kcQuestion { font-size: 1.06rem; font-weight: 600; color: var(--cd-navy);
  margin-bottom: 14px; text-wrap: pretty; }
#kcFeedback { display: none; font-size: .9rem; margin-top: 10px; padding: 12px 15px;
  border-radius: var(--cd-radius); text-wrap: pretty; }
#kcFeedback.good { display: block; background: var(--cd-green-bg);
  border: 1px solid var(--cd-green); color: var(--cd-green); }
#kcFeedback.bad  { display: block; background: var(--cd-amber-bg);
  border: 1px solid var(--cd-amber); color: var(--cd-amber-text); }
#kcNext { display: none; margin-top: 14px; }
#kcNext.show { display: inline-block; }
#kcResult { display: none; text-align: center; padding: 10px 0; }
#kcResult.show { display: block; animation: riseIn .25s ease both; }
#kcScore { font-size: 2.6rem; font-weight: 600; color: var(--cd-navy);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
#kcResultText { font-size: .98rem; color: var(--cd-ink-soft); max-width: 46ch;
  margin: 6px auto 18px; text-wrap: pretty; }
.ghostBtn { background: transparent; color: var(--cd-navy);
  border: 1.5px solid var(--cd-navy); border-radius: 12px; font: inherit;
  font-size: .92rem; font-weight: 600; padding: 12px 26px; cursor: pointer;
  min-height: 44px; margin-top: 10px; }
.ghostBtn:hover { background: var(--cd-surface); }

/* ---------- landing seal + free badge ---------- */
#slideHost .freeBadge { display: inline-block; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--cd-red); background: var(--cd-white); border: 1px solid var(--cd-red);
  border-radius: 999px; padding: 4px 11px; margin-bottom: 14px; }

/* Narrow screens: a GRID, not wrapped flex. Five flex items across two rows
   leave the last one alone on row three, and flex-grow stretches it to double
   width - a lopsided rail that reads as a layout bug. A 2-column grid puts the
   fifth chip in a normal cell and keeps every beat the same size. */
@media (max-width: 620px) {
  #cycleRail { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .stepChip { min-width: 0; }
  .railArrow { display: none; }
  .bubble { max-width: 100%; }
}

/* The landing centres its seal, title and lede (module.css #slide0). A bordered
   card of prose inside it must not inherit that — a centred paragraph against a
   left-hand spine reads as a mistake. */
#slide0 .spine, #slide0 .card, #slide0 .banner { text-align: left; }
#slide0 .banner { text-align: center; }

/* a deck inside a cycle step: full width, no centring games */
.art.artDeck { display: block; padding: 8px; }
.art.artDeck .deckBlock { margin: 0; }

/* the aircraft switch sits with the jump menu, same chrome */
#acSel { background: rgba(255,255,255,.10); color: var(--cd-white); border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--cd-radius); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 7px 9px; min-height: 36px; }
#acSel option { color: var(--cd-ink-body); background: var(--cd-white); }
#acSel[hidden] { display: none; }


/* ============================================================
   LINE READY — the drawn 737NG deck (deck.js)
   Column-system rendering: canvas ground, hairline panels, mono
   labels. Two seat colours only, taken from brand.css:
     Captain / pilot flying   -> --cd-red
     First officer / monitoring -> --cd-navy-link
   Shared panels are ink-soft. Nothing else carries colour, so the
   flow path is the only saturated thing on the diagram.
   ============================================================ */
/* The unfolded deck is tall (640 x 1136). It is NOT height-capped: capping
   it to the viewport shrank it to ~200px wide and made every label
   illegible. It takes the width it is given and the page scrolls; the step
   list beside it is sticky, so the current step stays in view. */
.lrDeck { display: block; width: 100%; height: auto;
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; }
.lrDeck .zone { fill: var(--cd-white); stroke: var(--cd-line-soft); stroke-width: 1; }
.lrDeck .zoneLbl { font-size: 8px; font-weight: 700; letter-spacing: .16em; fill: var(--cd-ink-soft); }
.lrDeck .panel rect { fill: var(--cd-canvas); stroke: var(--cd-line-strong); stroke-width: .8;
  transition: fill .25s ease, stroke .25s ease; }
.lrDeck .panel .pLbl { font-size: 7.5px; font-weight: 500; fill: var(--cd-ink-body); text-anchor: middle;
  pointer-events: none; }

/* areas of responsibility: shade by seat */
.lrDeck.areas .panel.sCa rect { fill: rgba(178,34,52,.10);  stroke: rgba(178,34,52,.55); }
.lrDeck.areas .panel.sFo rect { fill: rgba(0,51,102,.10);   stroke: rgba(0,51,102,.55); }
.lrDeck.areas .panel.sSh rect { fill: rgba(95,107,122,.08); stroke: var(--cd-line-strong); }

/* a running flow: everything dims except the panels on the route */
.lrDeck.flowing .panel rect { fill: var(--cd-canvas); }
.lrDeck.flowing .panel .pLbl { fill: var(--cd-ink-soft); }
.lrDeck .panel.on rect  { fill: var(--cd-white); stroke: var(--cd-ink-soft); }
.lrDeck .panel.on .pLbl { fill: var(--cd-ink-body); }
.lrDeck .panel.cur rect { fill: var(--cd-white); stroke-width: 1.6; }
.lrDeck .panel.cur.sCa rect, .lrDeck .flow .sCa ~ .panel.cur rect { stroke: var(--cd-red); }
.lrDeck .panel.cur rect { stroke: var(--cd-navy); }
.lrDeck .panel.cur .pLbl { fill: var(--cd-navy); font-weight: 700; }

/* the route */
.lrDeck .route { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 1000; stroke-dashoffset: 1000; opacity: .9; }
.lrDeck .routeCase { fill: none; stroke: var(--cd-white); stroke-width: 5.5; stroke-linejoin: round; stroke-linecap: round;
  opacity: 0; stroke-dasharray: 1000; stroke-dashoffset: 1000; }
@media (prefers-reduced-motion: no-preference) { .lrDeck .routeCase { animation: lrRoute 2.6s cubic-bezier(.4,0,.2,1) forwards; } }
@media (prefers-reduced-motion: reduce) { .lrDeck .routeCase { stroke-dashoffset: 0; } }
.lrDeck .route.sCa { stroke: var(--cd-red); }
.lrDeck .route.sFo { stroke: var(--cd-navy-link); }
.lrDeck .route.sCr { stroke: var(--cd-green); }
@media (prefers-reduced-motion: no-preference) {
  .lrDeck .route { animation: lrRoute 2.6s cubic-bezier(.4,0,.2,1) forwards; }
  @keyframes lrRoute { to { stroke-dashoffset: 0; } }
}
@media (prefers-reduced-motion: reduce) { .lrDeck .route { stroke-dashoffset: 0; } }

/* pins */
.lrDeck .pin circle { fill: var(--cd-white); stroke-width: 1.6; }
.lrDeck .pin.sCa circle { stroke: var(--cd-red); }
.lrDeck .pin.sFo circle { stroke: var(--cd-navy-link); }
.lrDeck .pin.sCr circle { stroke: var(--cd-green); }
.lrDeck .pin .pinN { font-size: 8.5px; font-weight: 700; text-anchor: middle; fill: var(--cd-navy); }
.lrDeck .pin.on circle { fill: var(--cd-navy-link); }
.lrDeck .pin.on.sCa circle { fill: var(--cd-red); }
.lrDeck .pin.on.sCr circle { fill: var(--cd-green); }
.lrDeck .pin.on .pinN { fill: var(--cd-white); }
.lrDeck .pin.cur circle { stroke-width: 3; }
@media (prefers-reduced-motion: no-preference) {
  .lrDeck .pin.cur circle { animation: lrPinPulse 1.2s ease-in-out infinite; }
  @keyframes lrPinPulse { 50% { r: 10.5; } }
}
.lrDeck .tag rect { fill: var(--cd-navy); }
.lrDeck .tag.sCa rect { fill: var(--cd-red); }
.lrDeck .tag.sCr rect { fill: var(--cd-green); }
.lrDeck .tag text { font-size: 6.5px; font-weight: 700; letter-spacing: .12em; fill: var(--cd-white); text-anchor: middle; }

/* narration pointing (engine.js adds .lr-focus while a sentence names a panel) */
.lrDeck .panel.lr-focus { box-shadow: none !important; animation: none !important; }
.lrDeck .panel.lr-focus rect { stroke: var(--cd-rose); stroke-width: 2.4; fill: var(--cd-white);
  filter: drop-shadow(0 0 5px rgba(255,154,166,.9)); }
.lrDeck .panel.lr-focus .pLbl { fill: var(--cd-navy); font-weight: 700; }

/* ---- the block the lesson player draws around a deck ---- */
.deckBlock { display: grid; grid-template-columns: minmax(0, 1fr) 262px; gap: 18px;
  align-items: start; margin: 14px 0 6px; }
.deckBlock.solo { grid-template-columns: 1fr; }
.deckBlock > :last-child:not(.deckFig) { position: sticky; top: 8px; max-height: calc(var(--app-h, 100vh) - 150px);
  overflow-y: auto; padding-right: 2px; }
.deckFig { background: var(--cd-white); border: 1px solid var(--cd-line-soft); border-radius: 14px;
  padding: 14px; box-shadow: var(--cd-shadow); }
/* width:100% matters: a grid item with margin:auto shrink-wraps, and an SVG
   at width:100% inside a shrink-wrapped box collapses to its 300px default. */
.deckFig.overhead { width: 100%; max-width: 600px; justify-self: center; }
.deckCap { display: flex; gap: 8px 14px; flex-wrap: wrap; align-items: center; margin-top: 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cd-ink-soft); }
.deckCap i { display: inline-block; width: 22px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.deckCap .ca i { background: var(--cd-red); }
.deckCap .fo i { background: var(--cd-navy-link); }
.deckCap .cr i { background: var(--cd-green); }
.deckCap .sh i { background: var(--cd-line-strong); }
.deckCap .spacer { flex: 1; }
.playBtn { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cd-navy-link);
  background: var(--cd-surface); border: 1px solid var(--cd-line-soft); border-radius: 999px;
  padding: 7px 13px; cursor: pointer; min-height: 32px; }
.playBtn:hover { border-color: var(--cd-navy-link); }
.playBtn[aria-pressed="true"] { background: var(--cd-navy); color: var(--cd-white); border-color: var(--cd-navy); }

.stepList { list-style: none; counter-reset: st; margin: 0; padding: 0; }
.stepList li { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; gap: 10px; align-items: baseline;
  padding: 8px 10px; border-radius: var(--cd-radius); border: 1px solid transparent; cursor: pointer;
  font-size: .9rem; color: var(--cd-ink-body); }
.stepList li:hover { background: var(--cd-surface); }
.stepList li .n { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; font-weight: 700;
  color: var(--cd-white); background: var(--cd-navy-link); border-radius: 50%; width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center; }
.stepList.ca li .n { background: var(--cd-red); }
.stepList.cr li .n { background: var(--cd-green); }
.stepList li .v { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cd-ink-soft); white-space: nowrap; }
.stepList li .sub { display: block; font-size: .8rem; color: var(--cd-ink-soft); margin-top: 2px; }
.stepList li.cur { background: var(--cd-white); border-color: var(--cd-line-strong); box-shadow: var(--cd-shadow); }
.stepList li.cur .v { color: var(--cd-navy); }
.stepHead { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--cd-red); margin: 2px 0 8px 10px; }
.stepHead b { color: var(--cd-navy); }
.aorKey { display: grid; gap: 10px; }
.aorKey .k { background: var(--cd-white); border: 1px solid var(--cd-line-soft); border-left-width: 4px;
  border-radius: var(--cd-radius); padding: 12px 14px; font-size: .9rem; color: var(--cd-ink-soft); }
.aorKey .k b { display: block; color: var(--cd-navy); margin-bottom: 3px; font-size: .95rem; }
.aorKey .k.ca { border-left-color: var(--cd-red); }
.aorKey .k.fo { border-left-color: var(--cd-navy-link); }
.aorKey .k.sh { border-left-color: var(--cd-line-strong); }

@media (max-width: 760px) {
  .deckBlock { grid-template-columns: 1fr; }
  .deckBlock > :last-child:not(.deckFig) { position: static; max-height: none; }
}

/* The photograph-backed deck is not built here. Module 01 draws the 737NG
   schematic, so the hotspot overlay needs no artwork underneath it and the
   rules that tinted one have been removed rather than left as dead weight. */

/* ============================================================
   scan — a flow walked on a real flight-deck photograph
   Replaces the drawn schematic for module 01. The photo carries
   the recognition; we only add where to look and in what order.
   ============================================================ */
.scanBlock { margin: 0 0 18px; }
.scanLead { font-size: .95rem; color: var(--cd-ink-soft); margin-bottom: 12px; text-wrap: pretty; }
/* align-items:start, or the photo column stretches to match the taller list and
   paints a slab of dead black under the panel. */
.scanBody { display: grid; grid-template-columns: minmax(0,1fr) 286px; align-items: start;
  border: 1px solid var(--cd-line-soft); border-radius: var(--cd-radius);
  overflow: hidden; background: var(--cd-white); box-shadow: var(--cd-shadow); }
@media (max-width: 880px) { .scanBody { grid-template-columns: minmax(0,1fr); } }

.scanLeft { min-width: 0; display: flex; flex-direction: column; }
.scanStage { background: var(--cd-lr-deck-mount); min-width: 0; }
.scanSvg { width: 100%; height: auto; display: block; }

/* the path: travelled solid, ahead faint, so "where am I" reads off the picture */
.scanPath { fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* the road ahead has to survive a busy photograph: a dark casing under a light
   dash, so it reads over both the lit annunciators and the grey panel. */
.scanPath.ahead  { stroke: rgba(255,255,255,.62); stroke-width: 2.2; stroke-dasharray: 7 8;
  paint-order: stroke; filter: drop-shadow(0 0 2px rgba(0,0,0,.85)); }
.scanPath.behind { stroke: var(--cd-rose); stroke-width: 3.2;
  filter: drop-shadow(0 0 3px rgba(0,0,0,.7)); }

.scanPin circle { fill: rgba(0,33,77,.55); stroke: rgba(255,255,255,.75); stroke-width: 2; }
.scanPin text { fill: var(--cd-white); font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px; font-weight: 700; text-anchor: middle; }
.scanPin { cursor: pointer; }
.scanPin.seen circle { fill: var(--cd-navy); stroke: var(--cd-white); }
.scanPin.on circle { fill: var(--cd-red); stroke: var(--cd-white); stroke-width: 2.5; }
.scanPin.on { filter: drop-shadow(0 0 8px rgba(255,154,166,.95)); }
.scanPin:focus-visible { outline: none; }
.scanPin:focus-visible circle { stroke: var(--cd-rose); stroke-width: 4; }

.scanList { border-left: 1px solid var(--cd-line-soft); overflow-y: auto; max-height: 520px; padding: 4px 0 8px; }
@media (max-width: 880px) { .scanList { border-left: 0; border-top: 1px solid var(--cd-line-soft); max-height: 320px; } }
.scanPhase { display: flex; align-items: center; gap: 7px; padding: 11px 14px 5px;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--cd-ink-soft); }
.scanPhase .ar { color: var(--cd-line-strong); font-size: 12px; }
.scanPhase.on { color: var(--cd-red); }
.scanPhase.on .ar { color: var(--cd-red); }
.scanRow { display: grid; grid-template-columns: 22px 1fr; gap: 9px; align-items: center;
  width: 100%; text-align: left; background: none; border: 0; border-left: 3px solid transparent;
  font: inherit; padding: 5px 14px; cursor: pointer; }
.scanRow:hover { background: var(--cd-canvas); }
.scanRow.on { background: var(--cd-lr-scan-on); border-left-color: var(--cd-red); }
.scanRow .b { width: 20px; height: 20px; border-radius: 50%; background: var(--cd-line-strong);
  color: var(--cd-white); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px;
  font-weight: 700; display: flex; align-items: center; justify-content: center; }
.scanRow.seen .b { background: var(--cd-navy); }
.scanRow.on .b { background: var(--cd-red); }
.scanRow .p { font-size: .84rem; color: var(--cd-ink-body); line-height: 1.3; }
.scanRow .a { display: block; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 8.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--cd-ink-soft); margin-top: 1px; }

.scanBar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 11px 14px; border-top: 1px solid var(--cd-line-soft); flex: 1 0 auto; }
.scanNow b { display: block; font-size: .9rem; color: var(--cd-navy); font-weight: 600; }
.scanNow i { font-style: normal; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--cd-red); }
.scanCtl { display: flex; gap: 6px; }
.sBtn { font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
  background: var(--cd-white); color: var(--cd-navy); border: 1px solid var(--cd-line-strong);
  border-radius: 8px; padding: 8px 12px; min-width: 40px; min-height: 38px; }
.sBtn:hover { border-color: var(--cd-navy); }
.sBtn.play { background: var(--cd-navy); color: var(--cd-white); border-color: var(--cd-navy); padding: 8px 16px; }
.sBtn.play:hover { background: var(--cd-red); border-color: var(--cd-red); }
.scanCredit { font-size: 10px; color: var(--cd-ink-soft); margin-top: 8px; }
.scanCredit a { color: var(--cd-ink-soft); }

/* seats — areas of responsibility on the real flight deck */
.seatsBlock { margin: 0 0 18px; }
.seatsFig { border: 1px solid var(--cd-line-soft); border-radius: var(--cd-radius);
  overflow: hidden; background: var(--cd-lr-deck-mount); box-shadow: var(--cd-shadow); }
.seatsSvg { width: 100%; height: auto; display: block; }
.seatZone rect { fill: currentColor; opacity: .22; }
.seatZone text { fill: var(--cd-white); font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 30px; font-weight: 700; letter-spacing: .14em; text-anchor: middle;
  text-transform: uppercase; paint-order: stroke; stroke: rgba(0,0,0,.65); stroke-width: 5; }
.seatZone.z-ca { color: var(--cd-red); }
.seatZone.z-fo { color: var(--cd-lr-seat-fo); }
.seatZone.z-sh { color: var(--cd-lr-seat-shared); }
.seatsCap { display: flex; gap: 16px; flex-wrap: wrap; padding: 9px 14px;
  background: var(--cd-white); border-top: 1px solid var(--cd-line-soft);
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--cd-ink-soft); }
.seatsCap span { display: inline-flex; align-items: center; gap: 6px; }
.seatsCap i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.seatsCap .ca i { background: var(--cd-red); }
.seatsCap .fo i { background: var(--cd-lr-seat-fo); }
.seatsCap .sh i { background: var(--cd-lr-seat-shared); }

/* ============================================================
   THE SKY BEHIND THE LESSON — one rule set, every module
   The owner's brief: liquid glass, with contrails visible behind
   the lesson, and every module matching as they are built.

   So this lives HERE and nowhere else. A module page opts in with
   one attribute on its page wrapper (`class="lrSky"`); it carries
   no colours, no image path and no glass recipe of its own, which
   is what stops module 09 from inventing its own sky in 2027.
   AUTHORING.md states the contract.

   The photograph is images/site-hero-trails.jpg — the site's own
   graded set, real crossing contrails, already deployed elsewhere
   on Contrails. It is not generated: CLAUDE.md invariant 4 is
   "real photographs only, no AI images", and a site named for
   contrails showing invented ones is the exact credibility trade
   that rule exists to refuse.

   WHY LIGHT GLASS AND NOT NAVY. A translucent navy card over a
   photograph has nothing to smear — dark on dark reads as flat
   paint, not glass. The light frosted recipe is the one that
   actually looks like glass over a bright sky, and it is also the
   one that keeps navy body text at full contrast. Legibility wins
   ties here: this is training material, not a hero banner.
   ============================================================ */
.lrSky { position: relative; background: var(--cd-canvas); }

/* Fixed, so the lesson travels over a still sky rather than dragging
   a texture down the page with it. Behind everything in the wrapper. */
.lrSky::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background: url("images/site-hero-trails.jpg") 38% center / cover no-repeat;
  /* the photo is bright and busy; hold it back so the glass reads as the
     surface and the sky as the depth behind it */
  opacity: 1;
}
/* A wash with two jobs. At the top it keeps the site nav legible over the
   photograph. At the BOTTOM it calms the sky right down, because not everything
   on a lesson page sits inside the glass card: the conceptual-training
   disclaimer, the back links and the footer are bare prose on the sky, and
   small grey type over a bright photograph is the one place this effect can
   actually cost someone legibility. The card can float; the small print cannot. */
.lrSky::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg,
    rgba(246,246,248,.58) 0,
    rgba(246,246,248,.16) 20%,
    rgba(246,246,248,.18) 52%,
    rgba(246,246,248,.72) 86%,
    rgba(246,246,248,.86) 100%);
}
.lrSky > * { position: relative; z-index: 1; }

/* ---- the glass itself ---- */
#app {
  background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(30px) saturate(1.18);
  backdrop-filter: blur(30px) saturate(1.18);
  border: 1px solid rgba(255,255,255,.70);
  box-shadow:
    0 24px 60px rgba(0,33,77,.16),
    0 2px 10px rgba(0,33,77,.08),
    inset 0 1px 0 rgba(255,255,255,.85);
}
/* The stage used to paint itself solid white, which put an opaque sheet on top
   of the glass and cancelled it. It is a layout box, not a surface. */
#stage { background: transparent; }

/* Blur is the whole effect; without it a 62% white sheet is just haze. Where the
   browser cannot do it, trade the transparency for legibility, not the other way. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #app { background: rgba(255,255,255,.93); }
}
/* Some readers ask their OS for less of this. Honour it: solid card, no sky. */
@media (prefers-reduced-transparency: reduce) {
  .lrSky::before, .lrSky::after { display: none; }
  #app { background: var(--cd-white); backdrop-filter: none; -webkit-backdrop-filter: none; }
}