/* Rigprobe Academy (academy.js). Built on theme.css tokens: same type, hairline plates, one red. */

/* ---------- hub and path pages */
.acad-hub-head h1, .acad-path-head h1 { margin-bottom: 10px; }
.acad-path-progress { margin: 14px 0 0; color: var(--text-3); font-size: .94rem; }
.acad-paths { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 28px 0 32px; }
.acad-pathcard { display: grid; gap: 8px; padding: 18px 18px 16px; text-decoration: none; color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); transition: border-color .12s; min-width: 0; }
.acad-pathcard:hover { border-color: var(--text); }
.acad-pathcard:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.acad-pc-top { display: flex; align-items: center; justify-content: space-between; }
.acad-pc-ico { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--deep); color: var(--deep-text); }
.acad-pc-n { font: 500 .78rem/1 var(--mono); color: var(--text-3); letter-spacing: .02em; }
.acad-pc-name { font: 700 1.32rem/1.15 var(--display); }
.acad-pc-blurb { color: var(--text-2); font-size: .96rem; line-height: 1.45; }
.acad-pc-meta { color: var(--text-3); font-size: .88rem; }
.acad-pc-rail { display: block; height: 4px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.acad-pc-rail i { display: block; height: 100%; background: var(--green); }
.acad-pathcard.is-complete .acad-pc-ico { background: var(--green); color: #fff; }
.acad-path-head { position: relative; }
.acad-path-ico { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--deep); color: var(--deep-text); margin-bottom: 10px; }
.acad-orient { margin: 8px 0 28px; }
.acad-orient:empty { display: none; }
.acad-orient-h { font-size: 1.25rem; margin: 0 0 12px; }
.acad-group { margin: 0 0 26px; }
.acad-group > header { display: flex; gap: 12px; align-items: baseline; margin-bottom: 8px; }
.acad-group h2 { font-size: 1.3rem; margin: 0; }
.acad-group header p { margin: 4px 0 0; color: var(--text-2); font-size: .95rem; }
.acad-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.acad-rows li { border-bottom: 1px solid var(--line); }
.acad-rows a { display: grid; grid-template-columns: 34px minmax(0, 1fr) 22px; align-items: center; gap: 12px; padding: 13px 4px; min-height: 56px; text-decoration: none; color: var(--text); }
.acad-rows a:hover { background: var(--surface-2); }
.acad-row-mark { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-strong); font: 600 .85rem/1 var(--mono); color: var(--text-2); }
.acad-rows li.is-done .acad-row-mark { background: var(--green); border-color: var(--green); color: #fff; }
.acad-rows li.is-placed .acad-row-mark { border-style: dashed; }
.acad-row-name { display: grid; gap: 2px; font-weight: 600; min-width: 0; }
.acad-row-name small { font-weight: 400; color: var(--text-3); font-size: .86rem; }
.acad-row-go { color: var(--text-3); }
.acad-cases { margin: 10px 0 0; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.acad-cases h2 { font-size: 1.2rem; margin: 0 0 6px; }
.acad-cases p { margin: 0 0 12px; color: var(--text-2); }

/* ---------- lesson page */
.acad-layout > .acad-lesson { min-width: 0; margin: 0; width: 100%; }
.acad-lesson h1 { margin: 6px 0 10px; }
.acad-lede { font-size: 1.12rem; color: var(--text-2); margin: 0 0 18px; max-width: 62ch; }
.acad-loading { display: grid; gap: 10px; place-items: center; min-height: 260px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--text-3); }
.acad-shimmer { width: 60%; height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-3), var(--surface-2), var(--surface-3)); background-size: 200% 100%; animation: acad-sh 1.2s linear infinite; }
@keyframes acad-sh { to { background-position: -200% 0; } }
.acad-missing, .acad-resume { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius); background: var(--surface-2); color: var(--text-2); font-size: .95rem; margin: 0 0 12px; }
.acad-resume { background: transparent; padding: 0; margin: 0 0 10px; color: var(--text-3); font-size: .9rem; }

/* ---------- the player */
.acad-player { display: grid; gap: 0; margin: 0 0 22px; scroll-margin-top: 76px; }
.acad-stage { position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.acad-stage-in { display: flex; align-items: center; justify-content: center; min-height: min(56vh, 420px); padding: 18px 14px 44px; }
.acad-v { width: 100%; max-width: 760px; }
.acad-in { animation: acad-in .32s ease-out; }
@keyframes acad-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.acad-expand, .acad-close { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface); color: var(--text-2); font: 600 .84rem/1 var(--font); cursor: pointer; }
.acad-expand { right: 10px; bottom: 10px; }
.acad-close { display: none; right: 14px; top: calc(12px + env(safe-area-inset-top)); min-height: 44px; padding: 8px 18px; font-size: .95rem; }
.acad-expand:hover, .acad-close:hover { color: var(--text); border-color: var(--text); }
.acad-caption { margin: 14px 2px 0; min-height: calc(1.45em * 3); font: 500 1.2rem/1.45 var(--font); color: var(--text); max-width: 60ch; }
.acad-caption-x { display: none; }
.acad-controls { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.acad-go { min-width: 136px; min-height: 48px; font-size: 1.02rem; }
.acad-step { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--text-2); cursor: pointer; }
.acad-step:hover { color: var(--text); border-color: var(--text); }
.acad-step:focus-visible, .acad-expand:focus-visible, .acad-close:focus-visible, .acad-go:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.acad-where { margin-left: auto; color: var(--text-3); font: 500 .84rem/1 var(--mono); }
.acad-parts { list-style: none; display: flex; gap: 4px; margin: 14px 0 0; padding: 0; }
.acad-parts li { flex: 1; height: 18px; display: flex; align-items: center; cursor: pointer; }
.acad-parts li::before { content: ""; display: block; width: 100%; height: 4px; border-radius: 3px; background: var(--surface-3); }
.acad-parts li.is-done::before { background: var(--text-3); }
.acad-parts li.is-here::before { background: var(--primary); height: 6px; }
.acad-voice { margin: 10px 0 0; color: var(--text-3); font-size: .88rem; line-height: 1.45; }
.acad-skipq { justify-self: start; margin-top: 10px; font-size: .92rem; color: var(--text-2); }
.acad-more { margin: 14px 0 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.acad-more > summary { display: flex; gap: 10px; align-items: center; padding: 14px 16px; cursor: pointer; font-weight: 600; min-height: 48px; }
.acad-more > .acad-player { padding: 0 14px 14px; }
.acad-holds { margin: 14px 0 0; }
.acad-held-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-left: 3px solid var(--amber); background: var(--amber-tint); border-radius: var(--radius-sm); color: var(--text); font-size: .95rem; margin: 8px 0; }
.acad-held-note svg { flex: none; margin-top: 2px; }

/* enlarged picture: the whole screen, narration still running */
html.acad-noscroll, html.acad-noscroll body { overflow: hidden; }
.acad-stage.is-big { position: fixed; inset: 0; z-index: 1000; border: 0; border-radius: 0; background: var(--bg); display: flex; flex-direction: column; }
.acad-stage.is-big .acad-stage-in { flex: 1; min-height: 0; padding: calc(64px + env(safe-area-inset-top)) 12px 8px; }
.acad-stage.is-big .acad-v { max-width: none; height: 100%; display: flex; align-items: center; justify-content: center; }
.acad-stage.is-big .acad-v svg { max-height: 100%; }
.acad-stage.is-big .acad-expand { display: none; }
.acad-stage.is-big .acad-close { display: inline-flex; }
.acad-bigbar { display: none; }
.acad-stage.is-big .acad-bigbar { display: flex; align-items: center; gap: 14px; padding: 12px 18px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
.acad-stage.is-big .acad-caption-x { display: block; flex: 1; margin: 0; min-height: 0; font-size: 1.1rem; max-width: none; }
.acad-biggo { flex: none; min-width: 108px; min-height: 44px; }

/* ---------- visuals */
.acad-v-title { margin: 0 0 10px; font: 600 .82rem/1.2 var(--mono); letter-spacing: .03em; text-transform: uppercase; color: var(--text-3); }
.acad-art, .acad-path { display: block; width: 100%; height: auto; max-height: min(62vh, 520px); }
.acad-ov .acad-dim { fill: var(--surface); opacity: .66; transition: opacity .3s; }
.acad-ov .acad-ring { fill: none; stroke: var(--primary); stroke-width: 2.6; }
.acad-path .acad-wire { fill: none; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.acad-path .acad-wire.is-lit { stroke-width: 4.6; opacity: 1; }
.acad-path .acad-wire.is-flow { stroke-dasharray: 10 8; animation: acad-flow 1s linear infinite; }
@keyframes acad-flow { to { stroke-dashoffset: -18; } }
.acad-path .acad-lead { fill: none; stroke-width: 2.4; stroke-linecap: round; }
.acad-node > rect { fill: var(--art-fill); stroke: var(--art-stroke); stroke-width: 1.4; }
.acad-node.k-source > rect { fill: var(--art-dark); }
.acad-node.k-source .acad-glyph { color: #e8ecee; }
.acad-node.k-source text { fill: #e8ecee; }
.acad-node.is-lit > rect { stroke: var(--primary); stroke-width: 2.6; }
.acad-node.is-fault > rect { stroke: var(--red); stroke-width: 2.6; fill: var(--red-tint); }
.acad-node.is-fault text { fill: var(--text); }
.acad-node-t { font: 600 13px var(--font); fill: var(--text); }
.acad-node-s { font: 400 12px var(--font); fill: var(--text-2); }
.acad-node-v { font: 600 13px var(--mono); fill: var(--text); }
.acad-node-x { font: 700 15px var(--font); fill: var(--red); }
.acad-pm-bezel { fill: #2a3034; stroke: #0c0f10; }
.acad-pm-lcd { fill: #c6d4bd; }
.acad-pm-v { font: 700 21px var(--display); fill: #172216; }
.acad-tag { font: 600 12px var(--font); fill: var(--text-2); }
.acad-tag.is-lit { fill: var(--text); }
.acad-meter { display: grid; grid-template-columns: minmax(170px, 230px) minmax(0, 1fr); gap: 18px; align-items: center; }
.acad-meter-face { padding: 14px 14px 10px; border-radius: 16px; background: #2a3034; border: 1px solid #0c0f10; display: grid; gap: 8px; }
.acad-lcd { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; padding: 12px 14px; border-radius: 8px; background: #c6d4bd; color: #172216; }
.acad-lcd-v { font: 700 2.3rem/1 var(--display); letter-spacing: .02em; }
.acad-lcd-u { font: 700 1rem/1 var(--display); }
.acad-meter-mode { color: #b8c3c8; font: 500 .8rem/1.2 var(--mono); }
.acad-leads { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; align-items: baseline; }
.acad-leads dt { font: 600 .8rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.acad-leads dt::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--text-3); }
.acad-leads dt.lead-red::before { background: #c5322a; }
.acad-leads dt.lead-black::before { background: #16191b; box-shadow: 0 0 0 1px #888; }
.acad-leads dt.lead-state::before { background: var(--green); }
.acad-leads dd { margin: 0; font-weight: 600; }
.acad-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.acad-bars li { display: grid; grid-template-columns: minmax(90px, 34%) minmax(0, 1fr) auto; gap: 12px; align-items: center; transition: opacity .2s; }
.acad-bar-l { font-weight: 600; font-size: .96rem; }
.acad-bar-t { height: 14px; border-radius: 7px; background: var(--surface-3); overflow: hidden; }
.acad-bar-t i { display: block; height: 100%; background: var(--text-3); border-radius: 7px; transition: width .4s; }
.acad-bar-v { font: 600 .95rem/1 var(--mono); }
.acad-bars li.is-lit .acad-bar-t i { background: var(--primary); }
.acad-bars li.is-fault .acad-bar-t i { background: var(--red); }
.acad-bars:has(li.is-lit) li:not(.is-lit) { opacity: .5; }
.acad-seq, .acad-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.acad-seq li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: center; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: background .2s, opacity .2s; }
.acad-seq-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-strong); font: 600 .82rem/1 var(--mono); color: var(--text-2); }
.acad-seq-t { font-weight: 500; line-height: 1.35; }
.acad-seq li.is-done .acad-seq-n { background: var(--text-3); border-color: var(--text-3); color: var(--surface); }
.acad-seq li.is-lit { border-color: var(--primary); background: var(--primary-tint); }
.acad-seq li.is-lit .acad-seq-n { background: var(--primary); border-color: var(--primary); color: #fff; }
.acad-seq li.is-fault { border-color: var(--red); background: var(--red-tint); }
.acad-seq li.is-fault .acad-seq-n { background: var(--red); border-color: var(--red); color: #fff; }
.acad-seq li.is-off { opacity: .42; }
.acad-checklist li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 10px; border-radius: var(--radius); }
.acad-tick { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--line-strong); font-size: .8rem; font-weight: 700; color: #fff; }
.acad-checklist li.is-done .acad-tick { background: var(--green); border-color: var(--green); }
.acad-checklist li.is-lit { background: var(--primary-tint); }
.acad-checklist li.is-lit .acad-tick { border-color: var(--primary); }
.acad-haz { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.acad-haz li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.acad-haz-l { font-weight: 600; }
.acad-haz-s { font: 600 .78rem/1 var(--mono); text-transform: uppercase; letter-spacing: .03em; padding: 6px 9px; border-radius: var(--pill); background: var(--amber-tint); color: var(--amber); }
.acad-haz li.st-off .acad-haz-s, .acad-haz li.st-isolated .acad-haz-s, .acad-haz li.st-locked .acad-haz-s, .acad-haz li.st-relieved .acad-haz-s, .acad-haz li.st-blocked .acad-haz-s { background: var(--green-tint); color: var(--green); }
.acad-haz li.st-live .acad-haz-s { background: var(--red-tint); color: var(--red); }
.acad-haz li.is-lit { border-color: var(--primary); box-shadow: inset 4px 0 0 var(--primary); }
.acad-table-wrap { overflow-x: auto; }
.acad-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.acad-table th, .acad-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.acad-table thead th { font: 600 .78rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--text-3); }
.acad-table tr { transition: opacity .2s, background .2s; }
.acad-table tr.is-lit { background: var(--primary-tint); }
.acad-table tr.is-dim { opacity: .45; }
.acad-num { margin: 0; display: grid; gap: 8px; padding: 14px; border-radius: var(--radius-lg); background: var(--deep); }
.acad-num > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, max-content); gap: 12px; align-items: baseline; padding: 8px 10px; border-radius: var(--radius-sm); transition: opacity .2s, background .2s; }
.acad-num dt { color: var(--deep-text-2); font-size: .94rem; }
.acad-num dd { margin: 0; font: 600 1rem/1.2 var(--mono); color: var(--readout); text-align: right; }
.acad-num > div.is-lit { background: rgba(185, 242, 200, .1); }
.acad-num > div.is-dim { opacity: .45; }
.acad-v-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.acad-split-side { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); }
.acad-split-side.is-lit { border-color: var(--primary); }
.acad-model-note { margin: 8px 0 0; color: var(--text-3); font-size: .86rem; text-align: center; }
.acad-v-held { display: grid; place-items: center; gap: 10px; text-align: center; color: var(--text-2); max-width: 44ch; }
.acad-v-held p { margin: 0; }

/* ---------- questions */
.acad-check { margin: 8px 0 24px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); scroll-margin-top: 80px; }
.acad-check-head h2 { margin: 0 0 6px; font-size: 1.5rem; }
.acad-check-head p { margin: 0 0 14px; color: var(--text-2); }
.acad-revised { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius); background: var(--amber-tint); font-size: .95rem; margin: 0 0 14px; }
.acad-revised svg { flex: none; margin-top: 2px; }
.acad-qpips { list-style: none; display: flex; gap: 6px; margin: 0 0 14px; padding: 0; }
.acad-qpips li { width: 28px; height: 5px; border-radius: 3px; background: var(--surface-3); }
.acad-qpips li.is-here { background: var(--primary); }
.acad-qpips li.is-done { background: var(--green); }
.acad-q-no { font: 600 .8rem/1 var(--mono); color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; }
.acad-q-t { font: 600 1.18rem/1.4 var(--font); margin: 8px 0 14px; }
.acad-fb { margin-top: 14px; display: grid; gap: 10px; justify-items: start; scroll-margin-bottom: calc(96px + env(safe-area-inset-bottom)); }
.acad-fb:empty { display: none; }
.acad-fb p { margin: 0; line-height: 1.5; }
.acad-fb.right p:first-child b { color: var(--green); }
.acad-fb.wrong p:first-child b { color: var(--red); }
.acad-fb-more { color: var(--text-2); font-size: .95rem; }
.acad-done { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; font-size: 1.1rem; color: var(--green); }
.acad-done-sub { margin: 0; color: var(--text-2); }

/* ---------- read along and the written lesson */
.acad-tx, .acad-ref { margin: 0 0 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.acad-tx > summary, .acad-ref > summary { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 14px 16px; cursor: pointer; min-height: 52px; font-weight: 600; }
.acad-tx > summary small, .acad-ref > summary small { grid-column: 2; font-weight: 400; color: var(--text-3); font-size: .86rem; }
.acad-tx-list { margin: 0; padding: 0 18px 16px 38px; display: grid; gap: 10px; line-height: 1.55; }
.acad-tx-list span { cursor: pointer; border-radius: 3px; }
.acad-tx-list span:hover { background: var(--surface-2); }
.acad-tx-list span.is-now { background: var(--primary-tint); }
.acad-ref-body { padding: 0 18px 18px; }
.acad-ref-body h3 { font-size: 1.15rem; margin: 22px 0 8px; }

/* ---------- phones */
@media (max-width: 760px) {
  .acad-lede { display: none; }
  .acad-lesson h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); margin-bottom: 14px; }
  .acad-stage-in { min-height: min(44vh, 330px); padding: 12px 8px 46px; }
  .acad-art, .acad-path { max-height: min(54vh, 440px); }
  /* the controls ride above the tab bar while the lesson is on screen; the comment button keeps the right side */
  .acad-controls { position: sticky; bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 5; margin: 6px -4px 0; padding: 8px 4px; background: var(--bg); }
  .acad-where { display: none; }
  .acad-caption { font-size: 1.12rem; margin-top: 12px; }
  .acad-meter { grid-template-columns: 1fr; }
  .acad-v-split { grid-template-columns: 1fr; }
  .acad-check { padding: 16px; }
  .acad-paths { grid-template-columns: 1fr; gap: 12px; margin-top: 22px; }
  .acad-bars li { grid-template-columns: minmax(80px, 38%) minmax(0, 1fr) auto; gap: 8px; }
}
/* a phone on its side: picture on the left, the line and controls beside it */
@media (orientation: landscape) and (max-height: 560px) {
  .acad-player { grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr); column-gap: 16px; align-items: start; }
  .acad-player > .acad-stage { grid-row: 1 / span 6; }
  .acad-stage-in { min-height: calc(100vh - 140px); max-height: calc(100vh - 110px); padding: 10px 10px 44px; }
  .acad-art, .acad-path { max-height: calc(100vh - 170px); }
  .acad-caption { margin-top: 0; font-size: 1.05rem; }
  .acad-controls { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .acad-in { animation: none; }
  .acad-path .acad-wire.is-flow { animation: none; stroke-dasharray: none; }
  .acad-shimmer { animation: none; }
}
@media print {
  .acad-player, .acad-check, .acad-tx { display: none; }
  .acad-ref { border: 0; }
}

/* ---------- equipment models (academy-models.js): a real 3D lab in teaching mode */
.acad-v-model { max-width: none; }
.acad-model { position: relative; width: 100%; }
.acad-model-view { position: relative; height: min(60vh, 500px); border-radius: var(--radius); overflow: hidden; background: #15191b; }
.acad-model-view::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .2s; }
.acad-model.is-inspect .acad-model-view::after { box-shadow: inset 0 0 0 2px var(--primary); }
.acad-model .lab3d-gl { width: 100%; height: 100%; cursor: default; }
.acad-model.is-inspect .lab3d-gl { cursor: grab; }
.acad-model-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.acad-model-wait, .acad-model-hint { position: absolute; left: 10px; bottom: 10px; z-index: 2; margin: 0; padding: 6px 11px; border-radius: var(--pill); background: rgba(14, 17, 18, .74); color: #e3e8ea; font: 500 .82rem/1.2 var(--font); pointer-events: none; }
.acad-model-btns { position: absolute; top: 10px; right: 10px; z-index: 3; display: flex; gap: 6px; }
.acad-model-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface); color: var(--text-2); font: 600 .84rem/1 var(--font); cursor: pointer; }
.acad-model-btn:hover { color: var(--text); border-color: var(--text); }
.acad-model-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.acad-model-btn[hidden] { display: none; }
/* no lab page chrome: no tool buttons, legend, flow key or meter leads, and only the part the line names is labelled */
.acad-model .lab3d-tools, .acad-model .lab3d-legend, .acad-model .lab3d-flowkey { display: none !important; }
.acad-model .lab3d-tag { pointer-events: none; touch-action: auto; }
.acad-model .lab3d-tag:not(.on) { display: none !important; }
.acad-model .lab3d-lines g:not(.sel) { display: none; }
.acad-model.is-compact .lab3d-tag.on { margin-top: -18px; overflow: visible; }
.acad-model.is-compact .lab3d-tag.on::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -5px; border: 5px solid transparent; border-bottom: 0; border-top-color: #c92f25; }
@media (max-width: 760px) { .acad-model-view { height: min(56vh, 420px); } }
@media (orientation: landscape) and (max-height: 560px) { .acad-model-view { height: calc(100vh - 170px); } }
.acad-stage.is-big .acad-model, .acad-stage.is-big .acad-model-view { height: 100%; }

/* ---------- with Wade's voice: captions are optional, one tap on CC */
.acad-cc { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text-2); font: 700 .8rem/1 var(--mono); letter-spacing: .04em; cursor: pointer; }
.acad-cc[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.acad-cc:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.acad-player.caps-off > .acad-caption { display: none; }
.acad-player.caps-off .acad-caption-x { visibility: hidden; }
/* the choice being read aloud lights up so the eye can follow the voice */
.choice-btn.is-reading { border-color: var(--primary); background: var(--primary-tint); }

.acad-fb-more { color: var(--text-2); font-size: .95rem; }
.acad-fb-more > summary { cursor: pointer; min-height: 36px; display: inline-flex; align-items: center; color: var(--text-3); font-weight: 600; }
.acad-fb-more > p { margin: 4px 0 0; }

/* ================================================================== phone audit: one hand, gloves, shop light
   The tab bar is 48px + 1.15rem + the home-indicator inset tall (measured at 100, 125 and 150% text), so every
   control that rides above it is offset by that same sum and still clears it when the text is enlarged. */
:root { --acad-nav: 0px; --acad-ctl: 0px; --acad-cap: 0px; }
@media (max-width: 760px) {
  :root { --acad-nav: calc(52px + 1.15rem + env(safe-area-inset-bottom)); --acad-ctl: calc(16px + max(48px, 2.3rem)); --acad-cap: 6.4rem; }
  /* the picture area fills what is left between the top bar and the controls, so Begin/Pause sits in the same
     place from part to part; a taller picture (a table, two meters) grows it and the controls stay pinned */
  .acad-stage-in { min-height: clamp(240px, calc(100vh - 59px - var(--acad-nav) - var(--acad-ctl) - var(--acad-cap)), 560px); min-height: clamp(240px, calc(100svh - 59px - var(--acad-nav) - var(--acad-ctl) - var(--acad-cap)), 560px); padding: 56px 8px 12px; align-items: flex-start; }
  .acad-stage-in > .acad-v-art, .acad-stage-in > .acad-v-path, .acad-stage-in > .acad-v-model, .acad-stage-in > .acad-v-meter, .acad-stage-in > .acad-v-held { margin-top: auto; margin-bottom: auto; }
  /* the narration line and the controls are pinned together above the tab bar: a tall picture scrolls behind
     them and never hides the line being read. The caption keeps a gutter on the right for the Confusing? button. */
  .acad-caption { position: sticky; bottom: calc(var(--acad-nav) + var(--acad-ctl)); z-index: 5; margin: 0 -4px; padding: 14px 6px 6px; background: var(--bg); }
  /* with the voice on and captions off, the line's space goes to the picture, so the controls stay where they were */
  .acad-player.caps-off { --acad-cap: 0px; }
  .acad-player.caps-off .acad-stage-in { min-height: clamp(240px, calc(100vh - 59px - var(--acad-nav) - var(--acad-ctl)), 480px); min-height: clamp(240px, calc(100svh - 59px - var(--acad-nav) - var(--acad-ctl)), 480px); }
  .acad-controls { bottom: var(--acad-nav); min-height: var(--acad-ctl); box-sizing: border-box; margin: 0 -4px; flex-wrap: nowrap; gap: 8px; padding-right: 62px; }
  .acad-go { flex: 1 1 auto; min-width: 88px; padding-inline: 12px; min-height: max(48px, 2.3rem); white-space: nowrap; }
  .acad-step, .acad-cc { flex: none; }
  /* Enlarge rides in a band at the top of the picture, where the pinned line and controls can never cover it */
  .acad-expand { top: 6px; bottom: auto; left: auto; right: 10px; }
  .acad-model-view { height: clamp(220px, calc(100vh - 59px - var(--acad-nav) - var(--acad-ctl) - var(--acad-cap) - 72px), 420px); height: clamp(220px, calc(100svh - 59px - var(--acad-nav) - var(--acad-ctl) - var(--acad-cap) - 72px), 420px); }
  .acad-fb { scroll-margin-bottom: calc(var(--acad-nav) + 16px); }
  /* Begin/Continue (academy.js bringUp) scrolls the picture up under the 59px top bar, with a little air */
  .acad-player .acad-stage { scroll-margin-top: 66px; }
}
/* the Confusing? button: a 44px circle above the tab bar (and above the pinned controls on a lesson), never over them */
@media (max-width: 760px) {
  body:has(#main .acad-hub, #main .acad-pathpage, #main .acad-lesson) .note-fab.nf-chat { width: 44px; height: 44px; padding: 0; gap: 0; justify-content: center; right: 14px; bottom: calc(var(--acad-nav) + 8px); opacity: .92; }
  /* on a lesson it sits in the gutter at the right end of the pinned controls row, centred on it */
  body:has(#main .acad-hub, #main .acad-pathpage, #main .acad-lesson) .note-fab.nf-chat .nf-ico { width: 20px; height: 20px; }
  body:has(#main .acad-hub, #main .acad-pathpage, #main .acad-lesson) .note-fab.nf-chat b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body:has(#main .acad-pathpage, #main .acad-lesson) .note-fab.nf-chat { bottom: calc(var(--acad-nav) + (var(--acad-ctl) - 44px) / 2); right: 12px; }
}
/* 320px wide: three controls, CC and this button do not fit side by side, so the controls keep the whole row */
@media (max-width: 359px) {
  .acad-controls { padding-right: 4px; }
  body:has(#main .acad-pathpage, #main .acad-lesson) .note-fab.nf-chat { display: none; }
}
@media (max-width: 760px) { .acad-more > .acad-player { padding: 0 8px 12px; } }
/* the part strip: a 44px-tall target (the bars stay thin); a long lesson scrolls the strip instead of crushing it */
.acad-parts { position: relative; gap: 0; margin-top: 4px; overflow-x: auto; scrollbar-width: none; }
.acad-parts::-webkit-scrollbar { display: none; }
.acad-parts li { flex: 1 0 24px; height: 44px; }
.acad-parts li::before { width: calc(100% - 4px); margin: 0 2px; }
.acad-parts li:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: 6px; }

/* a phone on its side: the picture takes the height that is left under the top bar (and above the tab bar) */
@media (orientation: landscape) and (max-height: 560px) {
  .acad-stage-in, .acad-player.caps-off .acad-stage-in { min-height: calc(100vh - 66px - var(--acad-nav) - 10px); min-height: calc(100svh - 66px - var(--acad-nav) - 10px); max-height: none; padding: 10px 10px 54px; }
  .acad-model-view { height: calc(100vh - 66px - var(--acad-nav) - 70px); height: calc(100svh - 66px - var(--acad-nav) - 70px); }
  .acad-art, .acad-path { max-height: calc(100vh - 66px - var(--acad-nav) - 80px); }
  .acad-caption { position: static; margin: 0; padding: 0; background: none; }
  .acad-caption::before { content: none; }
  .acad-controls { padding-right: 4px; }
  .acad-expand { top: auto; bottom: 6px; left: auto; right: 10px; }
  /* the Confusing? button goes to the other corner, away from the controls and the part strip in the right column */
  body:has(#main .acad-pathpage, #main .acad-lesson) .note-fab.nf-chat { right: auto; left: 12px; bottom: calc(var(--acad-nav) + 8px); }
}

/* ---- touch targets: 44px minimum, 48px for the ones a gloved thumb hits most */
.acad-expand { min-height: 44px; padding: 8px 16px; }
@media (min-width: 761px) { .acad-stage-in { padding-bottom: 56px; } }
.acad-skipq { display: inline-flex; align-items: center; min-height: 44px; font-size: 1rem; text-decoration: underline; text-underline-offset: 3px; }
.acad-hub .btn, .acad-pathpage .btn, .acad-lesson .btn, .acad-fb .btn, .acad-check .btn { min-height: 48px; font-size: 1rem; }
.acad-hub .crumbs a, .acad-pathpage .crumbs a, .acad-lesson .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.acad-hub .crumbs, .acad-pathpage .crumbs, .acad-lesson .crumbs { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; margin-bottom: 6px; }
.acad-more > summary, .acad-tx > summary, .acad-ref > summary { min-height: 52px; }
.acad-fb-more > summary { min-height: 44px; }
.acad-rows a { min-height: 64px; }
.acad-pathcard { min-height: 44px; }

/* ---- type: body copy 16px and up, labels 12px and up */
.acad-voice, .acad-resume, .acad-path-progress, .acad-pc-blurb, .acad-group header p, .acad-held-note, .acad-revised, .acad-fb-more, .acad-table, .acad-bar-l, .acad-num dt, .acad-model-note, .acad-missing, .acad-cases p { font-size: 1rem; }
.acad-pc-meta, .acad-row-name small, .acad-tx > summary small, .acad-ref > summary small { font-size: .9rem; }
.acad-v-title, .acad-leads dt, .acad-table thead th, .acad-q-no { font-size: .8rem; }
.acad-expand span { font-size: .9rem; }
.acad-path-progress, .acad-voice { line-height: 1.5; }

/* ---- dark theme: light fills (green, red) carry dark glyphs, so the 1, the check and the ! stay readable */
:root[data-theme="dark"] .acad-rows li.is-done .acad-row-mark, :root[data-theme="dark"] .acad-pathcard.is-complete .acad-pc-ico,
:root[data-theme="dark"] .acad-checklist li.is-done .acad-tick, :root[data-theme="dark"] .acad-seq li.is-fault .acad-seq-n { color: #0f1113; }
:root[data-theme="dark"] .acad-seq li.is-lit .acad-seq-n { background: var(--primary-btn, var(--primary)); border-color: var(--primary-btn, var(--primary)); }

/* ---- reduced motion: no slides, fades or bar growth either (the JS already skips the zoom and the smooth scroll) */
@media (prefers-reduced-motion: reduce) {
  .acad-bars li, .acad-bar-t i, .acad-seq li, .acad-table tr, .acad-num > div, .acad-pathcard, .acad-ov .acad-dim, .acad-model-view::after { transition: none !important; }
  .acad-caption-x, .acad-caption { scroll-behavior: auto; }
}

/* ---- the enlarged picture: Pause and Done sit at the bottom under the thumb, the line above them, the picture
   gets everything else (and scrolls if it is tall); the notch and home indicator are kept clear */
.acad-stage.is-big { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; overscroll-behavior: contain; touch-action: manipulation; }
.acad-stage.is-big::after { content: ""; grid-column: 1 / -1; grid-row: 2 / 4; background: var(--surface); border-top: 1px solid var(--line); }
.acad-stage.is-big .acad-stage-in { grid-column: 1 / -1; grid-row: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; position: relative; align-items: flex-start; padding: calc(10px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left)); }
.acad-stage.is-big .acad-bigbar { display: contents; }
.acad-stage.is-big .acad-caption-x::before { content: none; }
.acad-stage.is-big .acad-caption-x { position: static; background: transparent; margin: 0; min-height: 0; grid-column: 1 / -1; grid-row: 2; z-index: 1; padding: 14px max(18px, env(safe-area-inset-right)) 6px max(18px, env(safe-area-inset-left)); font-size: 1.1rem; }
.acad-stage.is-big .acad-biggo, .acad-stage.is-big .acad-close { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; min-width: 0; min-height: 52px; margin-bottom: calc(14px + env(safe-area-inset-bottom)); border-radius: var(--radius); font: 600 1.05rem/1 var(--font); }
.acad-stage.is-big .acad-biggo { grid-column: 1; grid-row: 3; margin-left: max(18px, env(safe-area-inset-left)); margin-right: 6px; }
.acad-stage.is-big .acad-close { grid-column: 2; grid-row: 3; top: auto; right: auto; margin-left: 6px; margin-right: max(18px, env(safe-area-inset-right)); border-color: var(--text-3); color: var(--text); }
.acad-player.caps-off .acad-stage.is-big .acad-caption-x { display: none; }
/* what sits in the picture area: a drawing, a path or a model is centred and sized to fit; a list or a table
   is laid out as normal and scrolls */
.acad-stage.is-big .acad-v { display: block; height: auto; max-width: 900px; margin: auto; }
.acad-stage.is-big .acad-v-split, .acad-stage.is-big .acad-v-held { display: grid; }
.acad-stage.is-big .acad-v-art, .acad-stage.is-big .acad-v-path, .acad-stage.is-big .acad-v-model { display: flex; align-items: center; justify-content: center; height: 100%; max-width: none; }
/* a wide drawing is width-bound in portrait, so turning the phone is what makes it bigger: say so */
@media (orientation: portrait) {
  .acad-stage.is-big .acad-stage-in:has(> .acad-v-art)::after, .acad-stage.is-big .acad-stage-in:has(> .acad-v-path)::after { content: "Turn your phone sideways to see this bigger."; position: absolute; left: 12px; right: 12px; bottom: 8px; text-align: center; color: var(--text-3); font-size: .95rem; line-height: 1.35; }
}
/* a phone on its side: caption, Pause and Done share one row under the picture */
@media (orientation: landscape) and (max-height: 560px) {
  .acad-stage.is-big { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: minmax(0, 1fr) auto; }
  .acad-stage.is-big::after { grid-row: 2; }
  .acad-stage.is-big .acad-stage-in { padding-top: calc(6px + env(safe-area-inset-top)); padding-bottom: 6px; }
  .acad-stage.is-big .acad-caption-x { grid-column: 1; grid-row: 2; align-self: center; padding: 8px 12px 8px max(18px, env(safe-area-inset-left)); font-size: 1rem; }
  .acad-stage.is-big .acad-biggo, .acad-stage.is-big .acad-close { grid-row: 2; align-self: center; min-width: 112px; min-height: 48px; margin-top: 8px; margin-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .acad-stage.is-big .acad-biggo { grid-column: 2; margin-left: 8px; margin-right: 6px; }
  .acad-stage.is-big .acad-close { grid-column: 3; margin-left: 6px; margin-right: max(16px, env(safe-area-inset-right)); }
  .acad-stage.is-big .acad-v-split { grid-template-columns: 1fr 1fr; }
}

/* ---- hub cards: every card's drawing gets the same short frame (whole drawing, centred), so the icon, title and
   progress line up from card to card and eleven cards are not a mile of scrolling on a phone */
.acad-pc-art { display: block; height: 150px; margin: -18px -18px 4px; overflow: hidden; border-bottom: 1px solid var(--line); border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--surface); }
.acad-pc-art > svg { display: block; width: 100%; height: 100%; max-width: none; }
.acad-pathcard.has-art { align-content: start; }
.acad-pc-name { overflow-wrap: anywhere; text-wrap: balance; }
.acad-group h2 { overflow-wrap: anywhere; }
.acad-lesson h1, .acad-path-head h1, .acad-hub-head h1 { overflow-wrap: anywhere; }
.acad-row-name { overflow-wrap: anywhere; }
/* model tool buttons (Inspect, Follow narration) are thumb-sized too */
.acad-model-btn { min-height: 44px; padding: 8px 16px; }
.acad-model-btns { top: 8px; right: 8px; }
/* the written lesson reuses the site's lesson components: same words, 16px, thumb-sized zoom button */
.acad-ref-body .safety-box, .acad-ref-body .safety-box p, .acad-ref-body .lesson-fig-key li, .acad-ref-body figcaption, .acad-ref-body .lesson-fig-note,
.acad-ref-body .shop-tip, .acad-ref-body .lesson-sources p, .acad-ref-body .lesson-sources li, .acad-ref-body th, .acad-ref-body td { font-size: 1rem; }
.acad-ref-body .lesson-fig-zoom { min-height: 44px; padding: 8px 14px; font-size: .9rem; }
.acad-ref-body table { max-width: 100%; }
/* a long source line or URL wraps instead of widening the whole page (a 390px phone zoomed out to 495px without this) */
.acad-ref-body, .acad-ref-body li, .acad-ref-body p, .acad-ref-body dd, .acad-ref-body td, .acad-ref-body th { overflow-wrap: anywhere; }
.acad-ref-body .lesson-sources li { white-space: normal; min-width: 0; }
/* the Learn tabs above every Academy page, and the hub's reel link and facts */
#main:has(.acad-hub, .acad-pathpage, .acad-lesson) .subnav a { min-height: 44px; display: inline-flex; align-items: center; }
.acad-facts li { font-size: 1rem; }
.acad-reel-from { min-height: 44px; }
:root[data-theme="dark"] .acad-reel-from b { color: var(--primary-2, var(--text)); }
/* related links under a lesson: each is a 44px line */
.acad-lesson .rel-col a { display: flex; align-items: center; min-height: 44px; font-size: 1rem; }
/* "Live" on the hazard list: the light theme's red on its tint was 4.4:1, a shade under AA */
:root:not([data-theme="dark"]) .acad-haz li.st-live .acad-haz-s { color: var(--primary-2); }
.acad-lesson .rel-col { gap: 0; }

/* ---------------------------------------------------------------- hub hero: the reel and the facts */
.acad-hero { display: grid; gap: 16px; grid-template-areas: "head" "reel" "body"; }
.acad-hero .acad-hub-head { grid-area: head; margin: 0; padding: 0; border: 0; }
.acad-hero .acad-hub-head h1 { margin: 2px 0 0; font-size: clamp(1.75rem, 5.4vw, 2.9rem); line-height: 1.08; letter-spacing: -.01em; max-width: 18ch; }
.acad-hero .acad-reel { grid-area: reel; }
.acad-hero-body { grid-area: body; }
.acad-hero-body > p:first-child { margin: 0 0 14px; max-width: 54ch; color: var(--text-2); font-size: 1.05rem; line-height: 1.55; }
.acad-hero-body .acad-path-progress { margin-top: 10px; }
.acad-reel { position: relative; display: grid; gap: 0; border-radius: var(--radius-lg); }
.acad-reel .acad-stage { border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: 0 1px 0 var(--line), 0 18px 40px -28px rgba(0,0,0,.45); }
.acad-reel .acad-stage-in { height: clamp(250px, 42vh, 360px); min-height: 0; padding: 12px; overflow: hidden; }
.acad-reel .acad-v { flex: none; transform-origin: center center; transition: transform .2s; }
.acad-reel-pic { display: block; border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; background: #15191c; }
.acad-reel-pic img { display: block; width: 100%; height: auto; aspect-ratio: 720 / 459; object-fit: cover; }
@media (max-width: 959px) { .acad-show .acad-reel.is-still { display: none; } }
.acad-reel-foot { display: grid; gap: 6px; padding: 14px 16px 12px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--surface-2, var(--surface)); }
.acad-reel-line { margin: 0; min-height: 3.1em; font-size: 1.08rem; line-height: 1.45; color: var(--text); font-weight: 500; }
.acad-reel-from { display: block; padding: 10px 0; font-size: .9rem; line-height: 1.4; color: var(--text-2); text-decoration: none; justify-self: start; }
.acad-reel-from svg { vertical-align: -2px; margin-left: 2px; }
.acad-reel-from span { color: var(--text-3); }
.acad-reel-from b { color: var(--accent, var(--text)); font-weight: 600; }
.acad-reel-dots { display: flex; gap: 5px; margin: 0; padding: 0; list-style: none; flex: none; }
.acad-reel-dots li { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background .2s, transform .2s; }
.acad-reel-dots li.is-here { background: var(--accent, #c2362b); transform: scale(1.25); }
.acad-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 26px 0 4px; padding: 0; list-style: none; }
.acad-facts li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--text-2); font-size: .96rem; line-height: 1.45; }
.acad-facts li svg { flex: none; margin-top: 2px; color: var(--accent, var(--text)); }
.acad-facts b { color: var(--text); }
@media (min-width: 960px) {
  .acad-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "head reel" "body reel"; grid-template-rows: auto 1fr; column-gap: 40px; row-gap: 14px; margin-top: 6px; }
  .acad-hero .acad-hub-head { align-self: end; }
  .acad-reel .acad-stage-in { height: 400px; }
}
@media (max-width: 559px) {
  .acad-facts { gap: 8px; margin-top: 18px; }
  .acad-facts li { padding: 12px 14px; }
  .acad-reel .acad-stage-in { height: clamp(230px, 36vh, 300px); }
  .acad-reel-line { font-size: 1rem; min-height: 4.4em; }
}
/* Begin on a phone scrolls the picture up to sit just under the site's top bar */
@media (max-width: 760px) { .acad-player .acad-stage { scroll-margin-top: 66px; } }
/* after the last question: where the lesson leaves the path */
.acad-done-path { display: grid; gap: 8px; margin: 14px 0 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); text-decoration: none; }
.acad-done-path-t { font-weight: 600; }
.acad-done-path .acad-pc-rail { height: 8px; }
.acad-done-path .acad-pc-rail i { transition: width .9s cubic-bezier(.2,.8,.2,1); }
.acad-done-path.is-all { border-color: color-mix(in srgb, var(--green) 45%, var(--line)); background: color-mix(in srgb, var(--green) 8%, var(--surface)); }
.acad-done-path-s { color: var(--green); font-weight: 600; font-size: .95rem; }
@media (prefers-reduced-motion: reduce) { .acad-done-path .acad-pc-rail i { transition: none; } }
/* a drawing zoomed in on the parts being talked about: labels cut by the edge of the view fade away instead of
   reading as chopped words (academy.js fadeOutside) */
.acad-art text { transition: opacity .35s; }
.acad-art text.acad-out { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .acad-art text { transition: none; } }
/* a whole drawing shrunk onto a phone: unreadable labels step aside, the lit part keeps its label */
.acad-art.acad-tiny text { opacity: 0; }
.acad-art.acad-tiny .acad-hit text, .acad-art.acad-tiny text.acad-hit, .acad-art.acad-tiny .acad-ov text, .acad-art.acad-tiny .art-meter text { opacity: 1; }
.acad-art.acad-tiny .art-callout:not(.acad-hit) > :not(text), .acad-art.acad-tiny .art-mark:not(.acad-hit) { opacity: 0; }

/* a long value in a numbers card wraps under its key on a phone instead of crowding it */
.acad-num dd { overflow-wrap: anywhere; }
@media (max-width: 420px) { .acad-num > div { grid-template-columns: 1fr; gap: 2px; } .acad-num dd { text-align: left; } }

/* ---------------------------------------------------------------- the Academy on the home page */
.acad-show { display: grid; gap: 22px; align-items: center; margin: 34px 0; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.acad-show-copy h2 { margin: 6px 0 10px; font-size: clamp(1.5rem, 4.4vw, 2.2rem); line-height: 1.12; }
.acad-show-copy > p { margin: 0 0 14px; color: var(--text-2); font-size: 1.05rem; line-height: 1.55; max-width: 56ch; }
.acad-show-list { display: grid; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.acad-show-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--text); font-size: 1rem; line-height: 1.45; }
.acad-show-list li svg { flex: none; margin-top: 3px; color: var(--accent, var(--text)); }
@media (min-width: 960px) { .acad-show { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 36px; padding: 30px; } }
@media (max-width: 559px) { .acad-show { padding: 16px; margin: 22px 0; } }
/* certificates page: Academy paths, then modules */
.cert-h { margin: 26px 0 10px; font-size: 1.2rem; }
/* Crewline: the Academy path grid keeps its eleven headings readable */
.cl-acad-grid { min-width: 1040px; }
.cl-acad-grid .sh-hh { font-size: .76rem; line-height: 1.2; hyphens: auto; align-self: end; padding-bottom: 4px; }

/* ================================================================ one screen for every picture
   Every lesson picture sits on the same dark shop screen as the 3D models, so drawings, diagrams, meters and
   cards read as one product. The site's own dark tokens are scoped to the stage (the page around it keeps its
   theme), and the lit part glows. */
.acad-stage, .acad-reel .acad-stage {
  --bg: #0f1113; --bg-2: #0b0d0e; --surface: #171a1d; --surface-2: #1d2124; --surface-3: #242930;
  --line: #2a2f34; --line-soft: #22262a; --line-strong: #4a5158; --edge: #2a2f34;
  --text: #e9ebe8; --text-2: #b9bec2; --text-3: #8a9095;
  --primary: #ef6d61; --primary-tint: #3a1f1c; --green: #7cc794; --green-tint: #1b3022; --red: #f08c82; --red-tint: #3a1f1c;
  --amber: #e3b24f; --amber-tint: #362c16; --blue: #84b6d2;
  --deep: #0b0e0d; --deep-2: #12161a; --deep-line: #1f2a24; --deep-text: #e4ebe6; --deep-text-2: #9aa8a0;
  --art-black: #7d868c; --art-white: #e6e9ea; --art-fill: #23292c; --art-dark: #15191b; --art-stroke: #c9d0d4;
  --art-ink: #b8c1c6; --art-steel-top: #76818a; --art-steel-bot: #454e54; --art-iron-top: #4d575d; --art-iron-bot: #22282b;
  --art-iso-top: #87929a; --art-iso-side: #303940; --art-wood: #4a4337; --art-panel: #5a4e3a;
  color-scheme: dark; color: var(--text);
  background: radial-gradient(120% 90% at 50% 0%, #1d2327 0%, #121619 55%, #0c0f11 100%);
  border-color: #000;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -26px rgba(0,0,0,.6);
}
.acad-stage .acad-v-title { color: #8a9095; }
/* lit parts glow instead of a thin ring */
.acad-stage .acad-ring { stroke: #ef6d61; stroke-width: 3; filter: drop-shadow(0 0 6px rgba(239,109,97,.75)); }
.acad-stage .acad-dim { fill: rgba(8,10,12,.62); }
.acad-stage .acad-node.is-lit > rect { stroke: #ef6d61; filter: drop-shadow(0 0 5px rgba(239,109,97,.55)); }
.acad-stage .acad-expand, .acad-stage .acad-close { background: rgba(23,26,29,.85); color: #e9ebe8; border-color: #3a4147; }
.acad-reel-foot { background: #15191c; border-color: #000; color: #e9ebe8; }
.acad-reel-line { color: #e9ebe8; }
.acad-reel-from { color: #b9bec2; } .acad-reel-from span { color: #8a9095; } .acad-reel-from b { color: #ef6d61; }

/* ================================================================ Academy home: one next step, then the paths */
.acad-hub-top h1 { margin: 6px 0 4px; font-size: clamp(2rem, 6vw, 2.8rem); }
.acad-hub-sub { margin: 0 0 6px; color: var(--text-2); font-size: 1.05rem; }
.acad-next { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "k go" "t go" "m go"; gap: 2px 16px; align-items: center; margin: 16px 0 18px; padding: 18px 18px 18px 20px; border-radius: var(--radius-lg); background: radial-gradient(120% 120% at 0% 0%, #2a3136 0%, #15191c 70%); color: #e9ebe8; text-decoration: none; box-shadow: 0 16px 34px -24px rgba(0,0,0,.7); }
.acad-next-k { grid-area: k; font: 600 .78rem/1.3 var(--mono, monospace); letter-spacing: .06em; text-transform: uppercase; color: #ef6d61; }
.acad-next-t { grid-area: t; font-size: 1.35rem; line-height: 1.2; }
.acad-next-m { grid-area: m; color: #b9bec2; font-size: .95rem; }
.acad-next-go { grid-area: go; display: inline-flex; align-items: center; gap: 6px; min-height: 52px; padding-inline: 20px; }
@media (max-width: 559px) { .acad-next { grid-template-columns: 1fr; grid-template-areas: "k" "t" "m" "go"; gap: 4px; } .acad-next-go { margin-top: 12px; justify-content: center; } }
.acad-pl-h { margin: 26px 0 10px; font-size: 1.2rem; }
.acad-pathlist { display: grid; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }
.acad-pathlist a { display: grid; grid-template-columns: 34px 28px minmax(0, 1fr) 20px; gap: 12px; align-items: center; min-height: 64px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); text-decoration: none; }
.acad-pathlist a:hover { border-color: var(--line-strong); }
.acad-pl-n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-3); font: 700 .95rem/1 var(--mono, monospace); color: var(--text-2); }
.acad-pathlist li.is-started .acad-pl-n { background: #15191c; color: #e9ebe8; }
.acad-pathlist li.is-complete .acad-pl-n { background: var(--green); color: #fff; }
.acad-pl-ico { color: var(--text-2); display: grid; place-items: center; }
.acad-pl-body { display: grid; gap: 4px; min-width: 0; }
.acad-pl-body b { font-size: 1.05rem; }
.acad-pl-meta { color: var(--text-3); font-size: .9rem; }
.acad-pl-body .acad-pc-rail { height: 4px; }
.acad-pl-go { color: var(--text-3); }
/* path page: progress under the title, the overview folded at the bottom */
.acad-path-blurb { color: var(--text-2); }
.acad-path-meter { display: grid; gap: 6px; max-width: 420px; margin-top: 10px; }
.acad-path-meter .acad-pc-rail { height: 6px; }
details.acad-orient { margin: 18px 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
details.acad-orient > summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; cursor: pointer; font-weight: 600; list-style: none; }
details.acad-orient[open] > summary { border-bottom: 1px solid var(--line); }
details.acad-orient > .acad-player { margin: 12px; }
/* lesson page: one box for everything after the questions */
details.acad-extra { margin: 22px 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
details.acad-extra > summary { display: grid; grid-template-columns: 20px 1fr; column-gap: 10px; align-items: center; min-height: 56px; padding: 10px 16px; cursor: pointer; list-style: none; }
details.acad-extra > summary span { font-weight: 600; } details.acad-extra > summary small { grid-column: 2; color: var(--text-3); }
.acad-extra-in { display: grid; gap: 12px; padding: 0 12px 12px; }
.acad-path-meter { margin: 18px 0 26px; }

/* ================================================================ Stage v2: the picture fills the box, print you can read */
.acad-stage .acad-node-disc { fill: rgba(255,255,255,.06); stroke: rgba(255,255,255,.14); }
.acad-stage .acad-node.is-lit .acad-node-disc { fill: rgba(239,109,97,.18); stroke: #ef6d61; }
.acad-path.is-narrow .acad-node-t { font-size: 15.5px; }
.acad-path.is-narrow .acad-node-s, .acad-path.is-narrow .acad-node-v { font-size: 14px; }
.acad-path.is-narrow .acad-tag { font-size: 13.5px; }
.acad-stage .acad-wire { stroke-width: 4; }
.acad-art.acad-fill { max-height: none; width: 100%; }
@media (max-width: 760px) {
  /* every picture sits in the middle of the box, not stuck to the top */
  .acad-stage-in > .acad-v { margin-top: auto; margin-bottom: auto; }
  .acad-stage .acad-v-title { font-size: .86rem; color: #ef6d61; letter-spacing: .06em; margin-bottom: 12px; }
  /* step lists, checklists, hazards and readings: phone-size print, one item lit at a time */
  .acad-stage .acad-seq, .acad-stage .acad-checklist, .acad-stage .acad-haz { gap: 10px; }
  .acad-stage .acad-seq li { grid-template-columns: 36px minmax(0, 1fr); padding: 12px 14px; border-radius: 14px; }
  .acad-stage .acad-seq-n { width: 32px; height: 32px; font-size: .95rem; }
  .acad-stage .acad-seq-t, .acad-stage .acad-checklist li > span:last-child, .acad-stage .acad-haz-l, .acad-stage .acad-bar-l { font-size: 1.12rem; line-height: 1.3; }
  .acad-stage .acad-checklist li { grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); align-items: center; }
  .acad-stage .acad-tick { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: .95rem; }
  .acad-stage .acad-haz li { padding: 14px 14px; border-radius: 14px; grid-template-columns: 30px minmax(0, 1fr) auto; }
  .acad-stage .acad-haz-s { font-size: .74rem; padding: 7px 9px; }
  .acad-stage .acad-bars { gap: 18px; }
  .acad-stage .acad-bars li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l v" "t t"; gap: 8px 12px; }
  .acad-stage .acad-bar-l { grid-area: l; } .acad-stage .acad-bar-v { grid-area: v; font-size: 1.25rem; } .acad-stage .acad-bar-t { grid-area: t; height: 12px; }
  .acad-stage .acad-bar-t i { height: 100%; }
  .acad-stage .acad-num dt { font-size: 1rem; } .acad-stage .acad-num dd { font-size: 1.4rem; }
  .acad-stage .acad-table { font-size: 1rem; }
  .acad-stage .acad-v-held p { font-size: 1.08rem; line-height: 1.45; }
}
/* the lit item leads, the rest step back */
.acad-stage .acad-seq:has(li.is-lit) li:not(.is-lit):not(.is-fault), .acad-stage .acad-checklist:has(li.is-lit) li:not(.is-lit), .acad-stage .acad-haz:has(li.is-lit) li:not(.is-lit) { opacity: .55; }
.acad-stage .acad-seq li.is-lit, .acad-stage .acad-checklist li.is-lit, .acad-stage .acad-haz li.is-lit { opacity: 1; background: rgba(239,109,97,.14); border-color: #ef6d61; box-shadow: 0 0 0 1px #ef6d61, 0 10px 30px -12px rgba(239,109,97,.6); }
.acad-stage .acad-seq li, .acad-stage .acad-checklist li, .acad-stage .acad-haz li { transition: opacity .25s, background .25s, box-shadow .25s; }
@media (max-width: 760px) {
  /* long lists tighten up instead of being shrunk to fit */
  .acad-stage .acad-seq:has(> li:nth-child(5)) li, .acad-stage .acad-checklist:has(> li:nth-child(5)) li, .acad-stage .acad-haz:has(> li:nth-child(4)) li { padding-top: 8px; padding-bottom: 8px; }
  .acad-stage .acad-seq:has(> li:nth-child(6)) .acad-seq-t, .acad-stage .acad-checklist:has(> li:nth-child(6)) li > span:last-child { font-size: 1rem; }
  .acad-stage .acad-seq:has(> li:nth-child(5)), .acad-stage .acad-checklist:has(> li:nth-child(5)), .acad-stage .acad-haz:has(> li:nth-child(4)) { gap: 6px; }
  .acad-stage .acad-v-split .acad-checklist li { padding: 7px 10px; } .acad-stage .acad-v-split .acad-checklist li > span:last-child { font-size: 1rem; }
  .acad-stage .acad-split-side { border-color: rgba(255,255,255,.1); }
}
@media (max-width: 760px) {
  .acad-stage .acad-seq:has(> li:nth-child(6)) li { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 7px 12px; }
  .acad-stage .acad-seq:has(> li:nth-child(6)) .acad-seq-n { width: 26px; height: 26px; font-size: .85rem; }
  .acad-stage .acad-seq:has(> li:nth-child(6)) ~ *, .acad-stage .acad-v-seq:has(.acad-seq > li:nth-child(6)) .acad-v-title { margin-bottom: 8px; }
}

/* ================================================================ Scenes: one picture per lesson that comes to life */
.acad-v-scene { display: flex; justify-content: center; }
.acad-scene { display: block; width: 100%; height: auto; max-height: min(64vh, 560px); }
.acad-scene[style*="height"] { max-height: none; }
.rvs [data-part] { transition: opacity .3s; }
.rvs.has-focus [data-part]:not(.is-focus):not([data-part="cabinet"]):not([data-part="duct"]):not([data-part="chamber"]):not(.rvsf-flame):not(.rvsf-air):not([data-s="off"]) { opacity: .62; }
.rvs .is-focus { opacity: 1; }
.rvs-box { fill: #101416; stroke: #ef6d61; stroke-width: 2; filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)); }
.rvs-txt { font: 650 20px var(--font, system-ui); fill: #f3f4f2; }
.rvs-lead { stroke: #ef6d61; stroke-width: 2.5; }
.rvs-dot { fill: #ef6d61; stroke: #101416; stroke-width: 2; }
.rvs-ping { fill: none; stroke: #ef6d61; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: rvs-ping 1.4s ease-out infinite; }
.rvs-box.is-ok, .rvs-lead.is-ok { stroke: #3ccf74; } .rvs-dot.is-ok { fill: #3ccf74; } .rvs-ping.is-ok { stroke: #3ccf74; }
.rvs-box.is-warn, .rvs-lead.is-warn { stroke: #f2b544; } .rvs-dot.is-warn { fill: #f2b544; } .rvs-ping.is-warn { stroke: #f2b544; }
.rvs-box.is-bad { stroke: #ff4d3d; fill: #2a1210; } .rvs-lead.is-bad { stroke: #ff4d3d; } .rvs-dot.is-bad { fill: #ff4d3d; } .rvs-ping.is-bad { stroke: #ff4d3d; }
.rvs-chip { fill: rgba(16,20,22,.92); stroke: rgba(255,255,255,.18); }
.rvs-chip-t { font: 700 17px var(--font, system-ui); fill: #f3f4f2; }
.rvs-meter { fill: #f2c230; stroke: #8a6a0e; stroke-width: 2; filter: drop-shadow(0 8px 16px rgba(0,0,0,.55)); }
.rvs-lcd { fill: #c9d6b3; stroke: #6b7556; }
.rvs-lcd-v { font: 700 21px var(--mono, monospace); fill: #1b2214; }
.rvs-dial { fill: #2a2f33; stroke: #15191b; stroke-width: 2; }
.rvs-mlead { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.rvs-mlabel { font: 700 14px var(--font, system-ui); fill: #e6e9ea; }
@keyframes rvs-ping { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rvs-ping { animation: none; opacity: 0; } }
svg.rvs .rvs-txt { font: 650 20px var(--font, system-ui); fill: #f3f4f2; }
svg.rvs .rvs-chip-t { font: 700 17px var(--font, system-ui); fill: #f3f4f2; }
svg.rvs .rvs-mlabel { font: 700 14px var(--font, system-ui); fill: #e6e9ea; }
svg.rvs .rvs-lcd-v { font: 700 21px var(--mono, monospace); fill: #1b2214; }
svg.rvs .rvsf-lbl { font: 700 16px var(--font, sans-serif); } svg.rvs .rvsf-temp { font: 700 15px var(--mono, monospace); } svg.rvs .rvsf-heat { font: 700 10px var(--mono, monospace); } svg.rvs .rvsf-lpt { font: 800 15px var(--font, sans-serif); fill: #59636a; }

/* ================================================================ Hub: where you are, how it's going, brush up */
.acad-next.is-resume { grid-template-areas: "k go" "t go" "m go" "bar go"; }
.acad-next-bar { grid-area: bar; display: block; height: 6px; margin-top: 8px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; max-width: 360px; }
.acad-next-bar i { display: block; height: 100%; background: #ef6d61; border-radius: 3px; transition: width .6s; }
@media (max-width: 559px) { .acad-next.is-resume { grid-template-areas: "k" "t" "m" "bar" "go"; } }
.acad-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 16px; }
.acad-stats > div { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.acad-stats b { font: 700 1.5rem/1.1 var(--mono, monospace); }
.acad-stats span { color: var(--text-3); font-size: .86rem; line-height: 1.25; }
.acad-brush { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.acad-brush h2 { margin: 0; font-size: 1.1rem; } .acad-brush > p { margin: 2px 0 8px; color: var(--text-3); font-size: .92rem; }
.acad-brush ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.acad-brush a { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; align-items: center; padding: 10px 0; color: var(--text); text-decoration: none; border-top: 1px solid var(--line); }
.acad-brush a b { grid-column: 1; } .acad-brush a span { grid-column: 1; color: var(--amber, #b7791f); font-size: .9rem; } .acad-brush a svg { grid-column: 2; grid-row: 1 / span 2; color: var(--text-3); }
.acad-tour-inv { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; margin: 12px 0 0; padding: 12px 12px 12px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface); }
.acad-tour-ico { color: var(--primary); display: grid; }
.acad-tour-txt { display: grid; gap: 2px; } .acad-tour-txt small { color: var(--text-3); }
.acad-tour-x { width: 36px; height: 36px; border: 0; background: none; color: var(--text-3); font-size: 1.4rem; cursor: pointer; }
@media (max-width: 559px) { .acad-tour-inv { grid-template-columns: auto 1fr auto; } .acad-tour-inv .btn { grid-column: 1 / -1; grid-row: 2; } }

/* ================================================================ The tour */
.tour-shade { position: fixed; inset: 0; z-index: 2000; background: rgba(8,10,12,.62); }
.tour-shade.has-hole { background: transparent; }
.tour-hole { position: fixed; z-index: 2001; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(8,10,12,.62), 0 0 0 3px #ef6d61, 0 0 24px 4px rgba(239,109,97,.5); pointer-events: none; transition: left .3s, top .3s, width .3s, height .3s; }
.tour-tip { position: fixed; z-index: 2002; padding: 16px 18px 14px; border-radius: 16px; background: #15191c; color: #eef0ee; box-shadow: 0 20px 50px -10px rgba(0,0,0,.7); border: 1px solid rgba(255,255,255,.12); transition: top .3s, left .3s; }
.tour-k { margin: 0; font: 700 .74rem/1 var(--mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: #ef6d61; }
.tour-h { margin: 6px 0 4px; font-size: 1.2rem; color: #fff; }
.tour-p { margin: 0; color: #c9cecf; line-height: 1.45; }
.tour-dots { display: flex; gap: 5px; margin: 12px 0 10px; } .tour-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.18); } .tour-dots i.is-done { background: rgba(239,109,97,.5); } .tour-dots i.is-on { background: #ef6d61; width: 18px; border-radius: 4px; }
.tour-act { display: flex; gap: 8px; align-items: center; } .tour-act .btn { min-height: 40px; }
.tour-act .btn-ghost { color: #eef0ee; border-color: rgba(255,255,255,.25); }
.tour-skip { margin-right: auto; border: 0; background: none; color: #9aa1a5; text-decoration: underline; cursor: pointer; padding: 8px 0; }
.acad-rows li.is-here > a { background: var(--primary-tint, rgba(197,50,42,.08)); border-radius: 12px; box-shadow: inset 3px 0 0 var(--primary); }
.acad-rows li.is-here .acad-row-mark { background: var(--primary); border-color: var(--primary); color: #fff; }
.acad-rows li.is-here small { color: var(--primary); font-weight: 600; }
.acad-row-bar { display: block; height: 4px; margin-top: 6px; max-width: 220px; border-radius: 2px; background: var(--line); overflow: hidden; }
.acad-row-bar i { display: block; height: 100%; background: var(--primary); }
@media (max-width: 760px) { .acad-player > .acad-caption.is-long { font-size: .9rem; line-height: 1.4; } }

/* ================================================================ A list is not a picture: it takes the room it needs.
   Shutoff lists, checklists, step lists, readings and tables sit in a compact card instead of floating in a
   screen-high dark box, and there is nothing to enlarge. Drawings, scenes and models keep the full stage. */
.acad-stage[data-vt="hazard"] .acad-expand, .acad-stage[data-vt="checklist"] .acad-expand, .acad-stage[data-vt="sequence"] .acad-expand, .acad-stage[data-vt="compare"] .acad-expand, .acad-stage[data-vt="numbers"] .acad-expand, .acad-stage[data-vt="table"] .acad-expand, .acad-stage[data-vt="held"] .acad-expand, .acad-stage[data-vt="split"] .acad-expand, .acad-stage[data-vt="meter"] .acad-expand { display: none; }
@media (max-width: 760px) {
  .acad-stage[data-vt="hazard"] .acad-stage-in, .acad-stage[data-vt="checklist"] .acad-stage-in, .acad-stage[data-vt="sequence"] .acad-stage-in, .acad-stage[data-vt="compare"] .acad-stage-in, .acad-stage[data-vt="numbers"] .acad-stage-in, .acad-stage[data-vt="table"] .acad-stage-in, .acad-stage[data-vt="held"] .acad-stage-in, .acad-stage[data-vt="split"] .acad-stage-in, .acad-stage[data-vt="meter"] .acad-stage-in,
  .acad-player.caps-off .acad-stage[data-vt="hazard"] .acad-stage-in, .acad-player.caps-off .acad-stage[data-vt="checklist"] .acad-stage-in, .acad-player.caps-off .acad-stage[data-vt="sequence"] .acad-stage-in, .acad-player.caps-off .acad-stage[data-vt="compare"] .acad-stage-in, .acad-player.caps-off .acad-stage[data-vt="numbers"] .acad-stage-in, .acad-player.caps-off .acad-stage[data-vt="table"] .acad-stage-in, .acad-player.caps-off .acad-stage[data-vt="held"] .acad-stage-in, .acad-player.caps-off .acad-stage[data-vt="split"] .acad-stage-in, .acad-player.caps-off .acad-stage[data-vt="meter"] .acad-stage-in { min-height: 0; padding: 16px 12px 14px; }
  .acad-stage[data-vt="hazard"] .acad-v, .acad-stage[data-vt="checklist"] .acad-v, .acad-stage[data-vt="sequence"] .acad-v { margin: 0; }
}
/* a 3D model fills the stage: the Enlarge button rides over it instead of taking a strip above it */
@media (max-width: 760px) {
  .acad-stage[data-vt="model"] .acad-stage-in { padding-top: 8px; }
  /* Enlarge holds the model's top-right corner and Inspect / Follow narration the top-left one (they used to sit on top
     of each other), both 8px in from the model's edge (the stage's 1px border and 8px padding, then 8px) */
  .acad-stage[data-vt="model"] .acad-expand { top: 17px; right: 17px; }
  .acad-stage[data-vt="model"] .acad-model-btns { left: 8px; right: auto; }
  .acad-stage[data-vt="model"] .acad-model-view { height: clamp(240px, calc(100vh - 59px - var(--acad-nav) - var(--acad-ctl) - var(--acad-cap) - 26px), 460px); height: clamp(240px, calc(100svh - 59px - var(--acad-nav) - var(--acad-ctl) - var(--acad-cap) - 26px), 460px); }
}