:root {
  --ink: #0a0b0d; --ink-2: #111318; --line: #262b34;
  --paper: #eef1f4; --paper-2: #c6ccd6; --ok: #5ddb9a; --green: #145c4f; --focus: #f2c230;
  --head: "Space Grotesk", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #dfe3e8; font: 18px/1.5 var(--body); color: var(--ink); }
canvas#world { display: block; width: 100vw; height: 100vh; touch-action: none; }
/* The opening screen (its full styles are in the "opening" section below). A failed load puts a
   plain message here instead of its content. */
#loading { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; text-align: center;
  color: var(--paper); font: 700 24px/1.4 var(--head); letter-spacing: .01em; }
#loading.done, #loading[hidden] { display: none; }
#hud { position: fixed; inset: 0; pointer-events: none; }
#corner { position: absolute; top: 16px; right: 16px; display: flex; gap: 10px; pointer-events: auto; }
#corner button, #stageBar button {
  font: 600 18px var(--body); color: var(--paper); background: var(--ink); border: 2px solid var(--ink);
  border-radius: 8px; padding: 10px 16px; min-height: 48px; cursor: pointer;
}
#corner button:focus-visible, #stageBar button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
#hint { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); background: var(--ink); color: var(--paper);
  padding: 12px 20px; border-radius: 10px; font: 600 20px var(--body); box-shadow: 0 6px 24px rgba(0,0,0,.25); }
#hint kbd { font: 500 16px var(--mono); background: var(--paper); color: var(--ink); padding: 2px 8px; border-radius: 4px; margin-left: 10px; }

/* ---------- lesson stage: the bar, the framed lesson, the fade ---------- */
body.staged #corner { display: none; }
#stage { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
#stage[hidden] { display: none; }
#stageBar {
  position: absolute; left: 0; right: 0; top: 0; height: 64px; display: flex; align-items: center; gap: 12px;
  padding: 0 16px 0 24px; background: var(--ink); color: var(--paper); pointer-events: auto;
  border-bottom: 1px solid #2f3642; box-shadow: 0 2px 14px rgba(0,0,0,.28);
}
#stageTitle { flex: 1; min-width: 0; margin: 0; font: 700 24px var(--head); color: var(--paper);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#stageBar button { flex: none; background: var(--ink-2); border-color: #4a5260; }
#stageBar button:hover { background: #1b2029; border-color: #6a7482; }
#stageBar button[hidden] { display: none; }
#stageFrameHost { position: absolute; inset: 0; pointer-events: none; }
/* The lesson pages are dark, so the frame waits in their ink color rather than flashing white. */
#stageFrameHost iframe { position: absolute; border: 0; background: var(--ink); border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0,0,0,.35); pointer-events: auto; }
#stage.full #stageFrameHost iframe { border-radius: 0; box-shadow: none; }
#stageFade { position: fixed; inset: 0; z-index: 40; background: var(--ink); opacity: 0; pointer-events: none; }

/* ---------- shared bits: the lit lamp and visually hidden text ---------- */
.lamp { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #4a5260; }
.lamp.on { background: var(--ok); border-color: var(--ok); box-shadow: 0 0 10px rgba(93,219,154,.55); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- card: a short note from an object (the locked CAET Advanced door, the study clock) ---------- */
#hangarCard { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px;
  background: rgba(10,11,13,.5); }
#hangarCard[hidden] { display: none; }
.card-panel { width: min(600px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--ink); color: var(--paper);
  border-radius: 14px; border-top: 6px solid var(--card-accent, var(--green)); padding: 24px 32px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.card-over { margin: 0; font: 600 18px var(--body); color: var(--paper-2); letter-spacing: .01em; }
#hangarCardTitle { margin: 2px 0 12px; font: 700 32px/1.2 var(--head); color: var(--paper); }
#hangarCardText { margin: 0; font: 400 20px/1.5 var(--body); color: var(--paper); }
.card-foot { margin-top: 24px; display: flex; justify-content: flex-end; }
.card-close { min-height: 48px; min-width: 48px; padding: 10px 22px; font: 600 18px var(--body); color: var(--paper);
  background: transparent; border: 2px solid #4a5260; border-radius: 8px; cursor: pointer; }
.card-close:hover { background: #161a21; }
.card-close:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ======================================================================================
   Finish pass: the opening, the corner buttons, touch controls, banners, the controls
   card, the floor map, and lesson frame fades.
   ====================================================================================== */
html, body { overscroll-behavior: none; }
#hud { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#corner button, #stageBar button { touch-action: manipulation; }
#corner { top: calc(16px + env(safe-area-inset-top)); right: calc(16px + env(safe-area-inset-right)); }
#helpBtn { min-width: 48px; padding-left: 0; padding-right: 0; font-family: var(--head); font-size: 22px; }
#corner button:hover { background: #1b2029; }

/* ---------- the opening ---------- */
body.intro-on #hud { visibility: hidden; }
#loading::before, #loading::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
/* The loading background: AERO ink with a low green glow. */
#loading::before { background: radial-gradient(110% 85% at 12% 100%, rgba(20,92,79,.62) 0%, rgba(20,92,79,0) 58%),
  radial-gradient(60% 60% at 90% 0%, rgba(20,92,79,.18) 0%, rgba(20,92,79,0) 70%), var(--ink);
  transition: opacity .9s ease; }
/* Once the world is drawn it is the picture: a soft shade at the bottom lifts the way in. */
#loading::after { opacity: 0; transition: opacity .9s ease;
  background: linear-gradient(0deg, rgba(10,11,13,.62) 0%, rgba(10,11,13,.26) 20%, rgba(10,11,13,0) 38%); }
#loading.ready::before { opacity: 0; }
#loading.ready::after { opacity: 1; }
#loading.leaving { opacity: 0; transition: opacity .5s ease; pointer-events: none; }
#loading > * { position: relative; z-index: 1; }
#introPlan { position: absolute; top: 7vh; left: 36vw; width: 60vw; height: 86vh;
  opacity: 0; transition: opacity .8s ease; }
#loading.has-plan #introPlan { opacity: 1; }
#loading.ready #introPlan { opacity: 0; transition-duration: .6s; }
#introPlan .plan-room { fill: rgba(93,219,154,.035); }
#introPlan .plan-wall { stroke: var(--ok); stroke-opacity: .5; stroke-linecap: square; animation: intro-draw 1.3s cubic-bezier(.3,.6,.2,1) forwards; }
#introPlan .plan-airplane { fill: none; stroke: var(--ok); stroke-opacity: .42; opacity: 0; animation: intro-fade .8s ease .9s forwards; }
#introPlan .intro-you { fill: var(--focus); opacity: 0; animation: intro-fade .5s ease 1.2s forwards, intro-pulse 2.2s ease-in-out 1.7s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes intro-draw { to { stroke-dashoffset: 0; } }
@keyframes intro-fade { to { opacity: 1; } }
@keyframes intro-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
.intro-card { justify-self: start; align-self: center; width: min(460px, 100%); margin-left: max(24px, 7vw); text-align: left; }
#introTitle { margin: 0; color: var(--paper); line-height: 1; }
.intro-aero { display: block; font: 700 clamp(64px, 9vw, 104px)/.95 var(--head); letter-spacing: .06em; }
.intro-name { display: block; margin-top: 10px; font: 500 clamp(30px, 3.4vw, 42px)/1.1 var(--head); letter-spacing: .01em; color: var(--paper); }
.intro-bar { position: relative; width: min(320px, 100%); height: 3px; margin: 34px 0 14px; background: rgba(238,241,244,.16); border-radius: 2px; overflow: hidden; }
.intro-fill { position: absolute; inset: 0; background: var(--ok); transform: scaleX(0); transform-origin: left center; transition: transform .45s cubic-bezier(.3,.6,.2,1); }
#introStatus { margin: 0; min-height: 1.5em; font: 400 18px/1.5 var(--body); color: var(--paper-2); letter-spacing: 0; }
#introEnter { min-height: 60px; min-width: 260px; padding: 0 36px; font: 600 21px var(--body); color: var(--ink); background: var(--ok);
  border: 0; border-radius: 12px; cursor: pointer; box-shadow: 0 10px 34px rgba(10,11,13,.35), 0 0 0 1px rgba(10,11,13,.25); touch-action: manipulation;
  animation: intro-rise .45s cubic-bezier(.3,.6,.2,1) both; }
#introEnter[hidden] { display: none; }
#introEnter:hover { background: #7fe6b1; }
#introEnter:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.intro-card > * { transition: opacity .45s ease; }
#loading.ready .intro-card > * { opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
#loading .intro-go { position: absolute; left: 0; right: 0; bottom: calc(9vh + env(safe-area-inset-bottom)); display: flex; justify-content: center; padding: 0 24px; pointer-events: none; }
.intro-go button { pointer-events: auto; }
@keyframes intro-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  #introPlan { top: calc(12px + env(safe-area-inset-top)); left: 5vw; width: 90vw; height: 44vh; }
  .intro-card { align-self: end; margin: 0 0 calc(28px + env(safe-area-inset-bottom)); width: 100%; padding: 0 8px; }
  .intro-aero { font-size: 64px; }
  .intro-name { font-size: 32px; }
  #introEnter { width: 100%; }
  #loading .intro-go { bottom: calc(28px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  #introPlan .plan-wall, #introPlan .plan-airplane, #introPlan .intro-you, #introEnter { animation: none; stroke-dashoffset: 0 !important; opacity: 1; }
  #loading::before, #loading::after, #introPlan, .intro-fill { transition: none; }
}

/* ---------- the name at the bottom: "Tap to open" on touch screens ---------- */
#hint { width: max-content; max-width: calc(100vw - 32px); text-align: center; }
#hint kbd.tap { font: 600 18px var(--body); letter-spacing: 0; background: var(--ok); color: var(--ink); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
body.touch #hint { bottom: calc(168px + env(safe-area-inset-bottom)); pointer-events: auto; cursor: pointer; padding: 12px 16px 12px 20px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; min-height: 56px; }
body.touch #hint[hidden] { display: none; }
body.touch #hint kbd { margin-left: 0; }
/* A phone on its side has room beside the stick: the name sits at the bottom. */
@media (orientation: landscape) and (min-width: 640px) { body.touch #hint { bottom: calc(24px + env(safe-area-inset-bottom)); } }

/* ---------- the touch stick ---------- */
#stick { position: fixed; left: calc(18px + env(safe-area-inset-left)); bottom: calc(22px + env(safe-area-inset-bottom)); width: 136px; height: 136px;
  pointer-events: auto; touch-action: none; z-index: 5; }
#stick[hidden] { display: none; }
.stick-base { position: absolute; inset: 0; border-radius: 50%; background: rgba(10,11,13,.34); border: 2px solid rgba(238,241,244,.7);
  box-shadow: 0 4px 18px rgba(0,0,0,.18), inset 0 0 0 10px rgba(10,11,13,.08); }
.stick-knob { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--ink); box-shadow: 0 4px 12px rgba(0,0,0,.3); transition: transform .14s ease-out; }
#stick.held .stick-knob { transition: none; background: #fff; }
#stick.held .stick-base { background: rgba(10,11,13,.44); }

/* ---------- banners at the top ---------- */
#toasts { position: absolute; top: calc(16px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column;
  align-items: center; gap: 8px; pointer-events: none; width: max-content; max-width: min(640px, calc(100vw - 32px)); }
body.staged #toasts { display: none; }
#roomBanner { opacity: 0; transform: translateY(-6px); background: rgba(10,11,13,.9); color: var(--paper); border-left: 4px solid var(--ok);
  border-radius: 10px; padding: 10px 18px; font: 700 22px/1.25 var(--head); box-shadow: 0 6px 24px rgba(0,0,0,.22);
  transition: opacity .35s ease, transform .35s ease; text-align: center; }
#roomBanner.in { opacity: 1; transform: none; }
#roomBanner.out { opacity: 0; transform: translateY(-6px); transition-duration: .5s; }
#walkStatus { display: flex; align-items: center; gap: 12px; background: rgba(10,11,13,.9); color: var(--paper); border-radius: 999px;
  padding: 6px 6px 6px 18px; font: 600 18px var(--body); pointer-events: auto; box-shadow: 0 6px 24px rgba(0,0,0,.22); }
#walkStatus[hidden] { display: none; }
#walkStatus button { min-height: 44px; padding: 0 18px; font: 600 18px var(--body); color: var(--ink); background: var(--paper); border: 0;
  border-radius: 999px; cursor: pointer; touch-action: manipulation; }
#walkStatus button[hidden] { display: none; }
#walkStatus button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
body.touch #walkStatus button { min-height: 48px; }
/* A quiet note (a milestone earned in the library, say): plainer and lower than the room banner. */
#hudNote { opacity: 0; transform: translateY(-4px); background: rgba(10,11,13,.92); color: var(--paper); border-left: 4px solid var(--focus);
  border-radius: 8px; padding: 8px 16px; font: 600 17px/1.3 var(--body); box-shadow: 0 6px 20px rgba(0,0,0,.2);
  transition: opacity .35s ease, transform .35s ease; text-align: center; }
#hudNote.in { opacity: 1; transform: none; }
#hudNote.out { opacity: 0; transform: translateY(-4px); transition-duration: .5s; }
/* Below the corner buttons wherever a centered banner could reach them. */
@media (max-width: 1100px) { #toasts { top: calc(80px + env(safe-area-inset-top)); } }
@media (max-width: 700px) { #roomBanner { font-size: 20px; } }
@media (prefers-reduced-motion: reduce) { #roomBanner, #roomBanner.out, #hudNote, #hudNote.out { transition: none; transform: none; } }

/* ---------- a classmate talking (ui/people.js): above the name at the bottom ---------- */
#talkCard { position: absolute; left: 50%; bottom: 112px; width: max-content; max-width: min(620px, calc(100vw - 32px));
  transform: translate(-50%, 8px); opacity: 0; transition: opacity .3s ease, transform .3s ease;
  background: rgba(10,11,13,.92); color: var(--paper); border-left: 4px solid var(--accent, var(--ok)); border-radius: 10px;
  padding: 12px 20px 14px; box-shadow: 0 6px 24px rgba(0,0,0,.25); pointer-events: none; }
#talkCard[hidden] { display: none; }
#talkCard.in { opacity: 1; transform: translate(-50%, 0); }
#talkCard p { margin: 0; }
#talkCard .talk-who { font: 600 13px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent, var(--ok)); margin-bottom: 4px; }
#talkCard .talk-line { font: 500 20px/1.45 var(--body); }
body.staged #talkCard { display: none; }
body.touch #talkCard { bottom: calc(240px + env(safe-area-inset-bottom)); }
@media (orientation: landscape) and (min-width: 640px) { body.touch #talkCard { bottom: calc(96px + env(safe-area-inset-bottom)); } }
@media (max-width: 700px) { #talkCard .talk-line { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { #talkCard { transition: none; } }

/* ---------- asking the front desk (ui/askmenu.js): a short list of questions, then the answer ---------- */
#askMenu { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 28;
  width: min(600px, calc(100vw - 32px)); max-height: calc(100vh - 200px); overflow: auto;
  background: rgba(10,11,13,.95); color: var(--paper); border-top: 4px solid var(--accent, var(--ok)); border-radius: 12px;
  padding: 14px 18px 18px; box-shadow: 0 12px 40px rgba(0,0,0,.4); }
#askMenu[hidden] { display: none; }
#askMenu p { margin: 0; }
#askMenu .ask-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
#askMenu .ask-who { font: 600 13px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent, var(--ok)); }
#askMenu .ask-greet { font: 500 19px/1.45 var(--body); margin-bottom: 12px; }
#askMenu .ask-list { display: flex; flex-direction: column; gap: 8px; }
#askMenu button { font: 600 17px/1.35 var(--body); color: var(--paper); background: var(--ink-2); border: 1px solid #3a414d;
  border-radius: 8px; min-height: 48px; padding: 10px 14px; cursor: pointer; text-align: left; touch-action: manipulation; }
#askMenu button:hover { background: #1b2029; border-color: #6a7482; }
#askMenu button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
#askMenu .ask-close { flex: none; text-align: center; min-width: 88px; }
#askMenu .ask-q { font: 700 18px/1.4 var(--body); color: var(--accent, var(--ok)); margin-bottom: 8px; }
#askMenu .ask-a { font: 500 19px/1.5 var(--body); margin-bottom: 14px; }
#askMenu .ask-answer[hidden], #askMenu .ask-list[hidden], #askMenu .ask-greet[hidden] { display: none; }
body.staged #askMenu { display: none; }
/* On a wide screen the list sits to the right, so the person asked stays in view. */
@media (min-width: 1000px) { #askMenu { left: auto; right: 24px; transform: none; width: min(520px, 40vw); } }
body.touch #askMenu { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%); width: min(600px, calc(100vw - 32px)); max-height: calc(100vh - 48px); }
@media (max-width: 700px) { #askMenu .ask-greet, #askMenu .ask-a { font-size: 18px; } #askMenu button { font-size: 16px; } }

/* ---------- dialogs shared: the controls card and the floor map ---------- */
#helpCard, #mapDialog { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(10,11,13,.55); }
#helpCard[hidden], #mapDialog[hidden] { display: none; }
.help-panel, .map-panel { background: var(--ink); color: var(--paper); border-radius: 14px; border-top: 6px solid var(--ok);
  box-shadow: 0 20px 60px rgba(0,0,0,.45); }

/* ---------- the controls card ---------- */
.help-panel { width: min(660px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 24px 32px 24px; touch-action: pan-y; }
#helpTitle { margin: 0 0 14px; font: 700 32px/1.2 var(--head); color: var(--paper); }
.help-list { margin: 0; }
.help-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); align-items: baseline; }
.help-row dt { font: 600 18px/1.5 var(--body); color: var(--paper-2); }
.help-row dd { margin: 0; font: 400 20px/1.6 var(--body); color: var(--paper); }
.help-row kbd, #mapDialog kbd { display: inline-block; min-width: 1.9em; padding: 1px 8px; margin: 0 2px; font: 500 18px/1.5 var(--mono); text-align: center;
  color: var(--ink); background: var(--paper); border-radius: 6px; box-shadow: inset 0 -2px 0 #9aa3ad; }
.help-foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.help-again { margin: 0; font: 400 18px/1.5 var(--body); color: var(--paper-2); }
.help-ok { min-height: 48px; padding: 10px 28px; font: 600 18px var(--body); color: var(--ink); background: var(--ok); border: 0; border-radius: 8px; cursor: pointer; }
.help-ok:hover { background: #7fe6b1; }
.help-ok:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (max-height: 560px) {
  #helpCard { padding: 12px; }
  .help-panel { width: min(800px, 100%); max-height: calc(100vh - 24px); padding: 14px 24px; }
  #helpTitle { font-size: 26px; margin-bottom: 6px; }
  .help-row { grid-template-columns: 150px minmax(0, 1fr); padding: 6px 0; }
  .help-row dt, .help-row dd { font-size: 18px; line-height: 1.35; }
  .help-foot { margin-top: 6px; padding-top: 8px; }
}
@media (max-width: 600px) {
  .help-panel { padding: 20px 20px; }
  .help-row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 0; }
  #helpTitle { font-size: 28px; }
  .help-ok { width: 100%; }
}

/* ---------- the floor map ---------- */
.map-panel { width: min(1340px, 100%); height: min(860px, calc(100vh - 32px)); height: min(860px, calc(100dvh - 32px)); display: flex; flex-direction: column; overflow: hidden; }
.map-head { display: flex; align-items: center; gap: 12px 20px; padding: 14px 16px 10px 28px; flex-wrap: wrap; }
#mapTitle { margin: 0; font: 700 30px/1.2 var(--head); color: var(--paper); }
#mapTitle:focus { outline: none; }
#mapTitle:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
#mapWhere { margin: 0; flex: 1; min-width: 200px; font: 400 18px/1.5 var(--body); color: var(--paper-2); }
.map-close { min-height: 48px; min-width: 48px; padding: 10px 22px; font: 600 18px var(--body); color: var(--paper); background: transparent;
  border: 2px solid #4a5260; border-radius: 8px; cursor: pointer; touch-action: manipulation; }
.map-close:hover { background: #161a21; }
.map-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 390px; border-top: 1px solid var(--line); }
.map-figure { margin: 0; min-height: 0; min-width: 0; display: flex; flex-direction: column; padding: 12px 14px 14px 20px; }
.map-plan { flex: 1; min-height: 0; width: 100%; height: 100%; display: block; touch-action: manipulation; }
.map-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 26px; padding: 8px 4px 0; font: 400 18px/1.4 var(--body); color: var(--paper-2); }
.map-legend .leg { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.map-legend .key { display: inline-block; flex: none; border-radius: 50%; }
.map-legend .key-you { width: 18px; height: 18px; background: var(--focus); border: 2px solid var(--ink); box-shadow: 0 0 0 5px rgba(242,194,48,.22); margin-left: 5px; }
.map-legend .key-dot { width: 13px; height: 13px; background: var(--ok); border: 2px solid var(--ink); }
.map-side { min-height: 0; display: flex; flex-direction: column; border-left: 1px solid var(--line); padding: 12px 20px 20px; }
.map-find[hidden] { display: none; }
.map-find label { display: block; margin: 0 0 6px; font: 600 18px/1.4 var(--body); color: var(--paper-2); }
#mapSearch { width: 100%; min-height: 50px; padding: 8px 14px; font: 400 20px var(--body); color: var(--paper); background: var(--ink-2);
  border: 2px solid #4a5260; border-radius: 8px; }
#mapSearch:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--paper-2); }
.map-results { flex: 1; min-height: 0; overflow: auto; margin-top: 8px; padding: 0 4px 8px 2px; overscroll-behavior: contain; touch-action: pan-y; }
.map-results[hidden] { display: none; }
.map-results h3 { margin: 16px 0 8px; font: 600 18px/1.4 var(--body); color: var(--paper-2); }
.map-results ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.map-place { width: 100%; min-height: 52px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 8px 14px;
  text-align: left; color: var(--paper); background: var(--ink-2); border: 2px solid var(--line); border-radius: 10px; cursor: pointer; font: inherit; touch-action: manipulation; }
.map-place:hover { background: #161a21; border-color: #4a5260; }
.map-place:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.map-place .name { font: 600 19px/1.3 var(--body); }
.map-place .sub { font: 400 18px/1.35 var(--body); color: var(--paper-2); }
.map-none { margin: 16px 2px; font: 400 18px/1.5 var(--body); color: var(--paper-2); }
.map-none[hidden], .map-choice[hidden], .map-choice [hidden] { display: none; }
.map-choice { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.map-choice-over { margin: 0; font: 600 18px/1.4 var(--body); color: var(--paper-2); }
.map-choice-title { margin: 0; font: 700 28px/1.2 var(--head); color: var(--paper); }
.map-choice-title:focus { outline: none; }
.map-choice-sub { margin: 0; font: 400 20px/1.4 var(--body); color: var(--paper-2); }
.map-choice-note { margin: 6px 0 0; font: 400 18px/1.5 var(--body); color: #ffd58a; }
.map-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.map-walk, .map-go { min-height: 52px; padding: 10px 22px; font: 600 19px var(--body); border-radius: 8px; cursor: pointer; touch-action: manipulation; }
.map-walk { color: var(--ink); background: var(--ok); border: 2px solid var(--ok); }
.map-walk:hover { background: #7fe6b1; }
.map-go { color: var(--paper); background: transparent; border: 2px solid #4a5260; }
.map-go:hover { background: #161a21; }
.map-back { align-self: flex-start; margin-top: 10px; min-height: 48px; padding: 8px 2px; font: 600 18px var(--body); color: var(--paper-2);
  background: none; border: 0; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.map-back:hover { color: var(--paper); }
.map-close:focus-visible, .map-walk:focus-visible, .map-go:focus-visible, .map-back:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* The plan: dark rooms, light walls, the airplane in outline, a green dot per object, the student in yellow.
   Line widths are set in meters by map.js, so they stay the same on screen at any size. */
.map-plan .plan-room { fill: #141920; }
.map-plan .plan-room.floor-epoxy, .map-plan .plan-room.floor-shop, .map-plan .plan-room.floor-lab { fill: #171d25; }
.map-plan .plan-room.floor-wood { fill: #1d1a16; }
.map-plan .plan-room.floor-carpet { fill: #161b26; }
.map-plan .plan-room.floor-dark { fill: #0f1216; }
.map-plan .plan-room.lit { fill: #1d3a33; }
.map-plan .plan-wall { stroke: #aab3be; stroke-linecap: square; }
.map-plan .plan-door { stroke: none; }
.map-plan .plan-entrance { stroke: #aab3be; }
.map-plan .plan-airplane { fill: #232a33; stroke: #c6ccd6; }
.map-plan .plan-dot { fill: var(--ok); stroke: var(--ink); cursor: pointer; }
.map-plan .plan-dot.lit { fill: var(--focus); }
.map-plan .plan-name { fill: var(--paper); font-family: var(--head); font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: var(--ink); stroke-linejoin: round; }
.map-plan .plan-sub { fill: var(--paper-2); font-family: var(--body); font-weight: 400; text-anchor: middle; paint-order: stroke; stroke: var(--ink); stroke-linejoin: round; }
.map-plan .plan-route { fill: none; stroke: var(--focus); stroke-linecap: round; stroke-linejoin: round; }
.map-plan .plan-target { fill: none; stroke: var(--focus); }
.map-plan .plan-you-halo { fill: rgba(242,194,48,.24); }
.map-plan .plan-you-disc { fill: var(--focus); stroke: var(--ink); }
.map-plan .plan-you-arrow { fill: var(--ink); }
/* Both floors: a switch between them in the map's header, the stair on each plan, the classrooms. */
.map-floors { display: inline-flex; gap: 0; border: 2px solid #4a5260; border-radius: 10px; overflow: hidden; }
.map-floors[hidden] { display: none; }
.map-floor { min-height: 44px; padding: 8px 18px; font: 600 18px var(--body); color: var(--paper-2); background: transparent; border: 0; cursor: pointer; touch-action: manipulation; }
.map-floor + .map-floor { border-left: 2px solid #4a5260; }
.map-floor[aria-pressed="true"] { color: var(--ink); background: var(--paper); }
.map-floor:hover:not([aria-pressed="true"]) { background: #161a21; color: var(--paper); }
.map-floor:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.map-plan .plan-stair { fill: #2a2217; stroke: none; }
.map-plan .plan-tread { stroke: #8a7456; }
.map-plan .plan-stair-arrow { fill: none; stroke: var(--paper); stroke-linecap: round; stroke-linejoin: round; }
.map-plan .plan-void { fill: #07090c; }
.map-plan .plan-classroom { cursor: pointer; }
.map-plan .plan-lamp { stroke: var(--ink); }
.map-plan .plan-lamp-amber { fill: #f2a93b; }
.map-plan .plan-lamp-green { fill: #4fd48a; }
@media (max-width: 760px) {
  #mapDialog { padding: 0; }
  .map-panel { width: 100%; height: 100%; max-height: none; border-radius: 0; border-top-width: 4px; }
  .map-head { padding: calc(8px + env(safe-area-inset-top)) 12px 8px 16px; }
  #mapTitle { font-size: 24px; }
  #mapWhere { order: 3; flex-basis: 100%; }
  .map-close { margin-left: auto; }
  .map-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(190px, 42%) minmax(0, 1fr); }
  .map-figure { padding: 6px 8px 4px; }
  .map-side { border-left: 0; border-top: 1px solid var(--line); padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); }
}
@media (max-height: 540px) and (min-width: 761px) {
  #mapDialog { padding: 0; }
  .map-panel { width: 100%; height: 100%; border-radius: 0; border-top-width: 4px; }
  .map-head { padding: 6px 12px 6px 18px; }
  #mapTitle { font-size: 22px; }
  .map-body { grid-template-columns: minmax(0, 1fr) 340px; }
  .map-legend { display: none; }
}

/* ---------- lesson frames: a short fade in ---------- */
#stage { transition: opacity .2s ease; }
#stage.entering { opacity: 0; }
@media (prefers-reduced-motion: reduce) { #stage { transition: none; } }
@media (max-width: 600px) {
  #stageBar { height: 56px; padding: env(safe-area-inset-top) 8px 0 16px; }
  #stageTitle { font-size: 20px; }
  #stageBar button { padding: 8px 14px; }
}

/* ======================================================================================
   Class mode: the lecture's captions and bar while standing in a classroom, Watch, the desk's
   panel (the desk, the room check, its result), the standing note, the mastered banner.
   ====================================================================================== */
:root { --voice-low: #8fb8ff; --voice-high: #5ddb9a; --miss: #ff8a7a; }
body.in-class #corner, body.in-class #hint, body.in-class #toasts, body.in-class #stick { display: none !important; }
.class-root { position: fixed; inset: 0; z-index: 15; pointer-events: none; }
.class-root[hidden] { display: none; }

/* ---------- the desk: its panel over the dimmed room (the whole screen on a phone) ---------- */
.class-root[data-scene="desk"] { background: rgba(8,10,14,.58); transition: background .4s ease; }
.class-board { position: absolute; pointer-events: auto; overflow: hidden; background: var(--ink); border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06); transition: box-shadow .9s ease; }
.class-root.phone[data-scene="desk"] { background: var(--ink); }
.class-root.phone .class-board { border-radius: 0; box-shadow: none; }
.class-board[hidden] { display: none; }
/* ---------- under the board: a note, the student's turn, the captions ---------- */
.class-under { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.class-under.above-bar { justify-content: flex-end; }
.class-note { display: flex; align-items: baseline; justify-content: center; gap: 12px; max-width: 100%; padding: 10px 22px;
  border-radius: 10px; background: #0a0b0d; color: var(--paper); box-shadow: 0 6px 24px rgba(0,0,0,.3); font: 400 20px/1.4 var(--body); text-align: center; }
.class-note[hidden] { display: none; }
.class-note { box-shadow: inset 0 0 0 2px var(--ok), 0 6px 24px rgba(0,0,0,.3); font-weight: 600; }

/* ---------- captions: under the board; a thin mark on the speaker's side (Marcus left, Dana right) ---------- */
.class-caption { display: flex; flex-direction: column; align-items: center; max-width: 100%; pointer-events: none; }
.class-caption[hidden], .class-root.captions-off .class-caption { display: none; }
.cap-text { position: relative; margin: 0; max-width: 100%; padding: 10px 24px; font: 500 22px/1.42 var(--body); color: #fff; text-align: center;
  background: rgba(10,11,13,.86); border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.25); text-wrap: balance; }
.class-caption[data-voice="low"] .cap-text { box-shadow: inset 5px 0 0 var(--voice-low), 0 6px 24px rgba(0,0,0,.25); }
.class-caption[data-voice="high"] .cap-text { box-shadow: inset -5px 0 0 var(--voice-high), 0 6px 24px rgba(0,0,0,.25); }
.cap-who { display: inline-block; margin-bottom: 6px; padding: 2px 12px; border-radius: 999px; font: 600 15px/1.5 var(--body);
  background: rgba(10,11,13,.9); color: var(--voice-low); }
.class-caption[data-voice="high"] .cap-who { color: var(--voice-high); }
.cap-who[hidden] { display: none; }

/* ---------- the lecture while walking: a slim caption line and a small pill, nothing else ----------
   The pill sits at the bottom right, clear of the walking stick (bottom left) and the corner buttons
   (top right); the line sits over the walking hint, and taps pass through it to the world. */
.cbtn:disabled { opacity: .45; cursor: default; }
.class-pill { position: absolute; right: calc(16px + env(safe-area-inset-right)); bottom: calc(22px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 2px; padding: 4px; pointer-events: auto; background: rgba(10,11,13,.86);
  border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.class-pill[hidden], .class-bar[hidden], .class-under[hidden] { display: none !important; }
.class-pill .cbtn { flex-direction: row; gap: 8px; min-width: 0; min-height: 44px; padding: 6px 14px; border-radius: 999px; font-size: 15px; }
.class-pill .cbtn svg { width: 20px; height: 20px; }
.class-pill .pill-main .cbtn-label, .class-pill .pill-cc .cbtn-label, .class-pill .pill-lec .cbtn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.class-pill .pill-main, .class-pill .pill-cc, .class-pill .pill-lec { width: 48px; padding: 6px 0; }
.class-pill .cbtn.is-ready { background: var(--ok); color: var(--ink); }
/* A phone: with Lectures in the pill, Watch is an icon too, so the pill stays clear of the walking stick. */
@media (max-width: 480px) { .class-pill .pill-watch .cbtn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .class-pill .pill-watch { width: 48px; padding: 6px 0; } }
.class-line { position: absolute; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); margin: 0;
  width: max-content; max-width: min(760px, calc(100vw - 32px)); padding: 6px 14px; border-radius: 8px; pointer-events: none;
  background: rgba(10,11,13,.7); color: #fff; font: 500 17px/1.4 var(--body); text-align: center; text-wrap: balance;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.class-line[hidden] { display: none; }
.line-who { margin-right: 8px; font-weight: 700; color: var(--voice-low); }
.class-line[data-voice="high"] .line-who { color: var(--voice-high); }
body.touch .class-line { bottom: calc(268px + env(safe-area-inset-bottom)); font-size: 16px; }
@media (orientation: landscape) and (min-width: 640px) {
  body.touch .class-line { bottom: calc(84px + env(safe-area-inset-bottom)); max-width: calc(100vw - 2 * 180px); }
}
body.touch .class-pill .cbtn { min-height: 48px; }

/* ---------- Watch: the slide given the screen, at its own shape, as large as it can be between the
   lesson's name (one small line, on an upright phone only) and the caption above the bar ---------- */
.class-root.is-watch { background: #000; }
.class-watch { --accent: var(--ok); position: absolute; left: 0; right: 0; top: 0; bottom: 96px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 12px;
  padding: calc(12px + env(safe-area-inset-top)) 12px 0; pointer-events: auto; background: #000; }
.watch-area { flex: 1 1 0; min-height: 0; align-self: stretch; display: flex; align-items: center; justify-content: center; }
.class-watch[hidden], .class-watch [hidden] { display: none !important; }
.watch-where { flex: none; align-self: stretch; margin: 0; padding: 0 4px; font: 500 15px/1.35 var(--body); color: var(--paper-2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.watch-lesson { font-weight: 700; color: var(--paper); }
.watch-stage { flex: none; position: relative; max-width: 100%; }
.watch-stage canvas { display: block; border-radius: 6px; }
.watch-card { display: none; box-sizing: border-box; width: 100%; padding: clamp(20px, 4vw, 44px) clamp(20px, 4.4vw, 52px);
  background: #f5f6f8; color: #0a0b0d; border-radius: 8px; box-shadow: inset 8px 0 0 var(--accent); }
.watch-card.on { display: block; }
.wc-kicker { margin: 0 0 8px; font: 600 clamp(16px, 1.7vw, 22px)/1.3 var(--body); color: #4a5563; }
.wc-title { margin: 0; font: 700 clamp(36px, 4.8vw, 64px)/1.1 var(--head); color: #0a0b0d; overflow-wrap: break-word; }
.wc-rule { display: block; width: 72px; height: 6px; margin: 16px 0 14px; background: var(--accent); }
.wc-line { margin: 0; max-width: 40ch; font: 500 clamp(22px, 2.3vw, 32px)/1.42 var(--body); color: #26303b; }
.watch-hand { flex: none; box-sizing: border-box; max-width: min(100%, 960px); margin: 0; padding: 12px 20px; border-radius: 10px;
  background: #14181e; color: #fff; font: 600 19px/1.4 var(--body); box-shadow: inset 5px 0 0 var(--accent); }
.class-under.in-watch { position: static; flex: none; width: 100%; max-width: 960px; justify-content: flex-start; }

/* ---------- the class bar ---------- */
.class-bar { position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); pointer-events: auto;
  display: flex; align-items: center; gap: 8px; width: max-content; max-width: calc(100vw - 24px); padding: 8px 10px 8px 18px;
  background: rgba(10,11,13,.95); color: var(--paper); border: 1px solid #2f3642; border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.35);
  -webkit-user-select: none; user-select: none; }
.bar-where { display: flex; flex-direction: column; min-width: 0; width: 250px; margin-right: 4px; }
.bar-room { font: 600 14px/1.3 var(--body); color: var(--paper-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-lesson { font: 700 18px/1.25 var(--head); color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-section { font: 400 14px/1.3 var(--body); color: var(--paper-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-section[hidden] { display: none; }
.bar-saved { margin: 2px 0 0; font: 600 14px/1.3 var(--body); color: #ffd58a; }
.bar-saved[hidden] { display: none; }
.bar-mid, .bar-side, .bar-ends { display: flex; align-items: center; gap: 4px; }
.bar-side, .bar-ends { padding-left: 8px; border-left: 1px solid var(--line); }
.cbtn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 70px; min-height: 60px;
  padding: 6px 10px; font: 600 14px/1.15 var(--body); color: var(--paper); background: transparent; border: 2px solid transparent;
  border-radius: 12px; cursor: pointer; touch-action: manipulation; white-space: nowrap; }
.cbtn svg { width: 24px; height: 24px; flex: none; }
.cbtn-label { white-space: nowrap; }
.cbtn:hover { background: #1b2029; }
.cbtn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cbtn[hidden] { display: none; }
.cbtn.toggle[aria-pressed="true"] { color: var(--ok); }
.cbtn.main { flex-direction: row; gap: 10px; min-width: 150px; padding: 8px 22px; font: 600 18px/1.2 var(--body); background: #1b2029; border-color: #4a5260; }
.cbtn.main:hover { background: #222834; }
.cbtn.main.is-ready { background: var(--ok); color: var(--ink); border-color: var(--ok); box-shadow: 0 0 0 4px rgba(93,219,154,.22); }
.cbtn.main.is-ready:hover { background: #7fe6b1; }
.class-bar[data-mode="loading"] .bar-mid { visibility: hidden; }

/* ---------- the room check, its result, and more training, on the board ---------- */
.class-panel { position: absolute; inset: 0; z-index: 2; overflow: auto; overscroll-behavior: contain; padding: clamp(16px, 2.4vw, 36px) clamp(20px, 4vw, 60px) clamp(18px, 2.4vw, 32px);
  background: radial-gradient(120% 90% at 100% 0%, rgba(20,92,79,.28) 0%, rgba(20,92,79,0) 55%), #0c0f13; color: var(--paper); }
.class-panel[hidden] { display: none; }
.cp-head { margin-bottom: 14px; }
.cp-over { margin: 0; font: 600 16px/1.3 var(--body); color: var(--paper-2); letter-spacing: .01em; }
.cp-title { margin: 4px 0 0; font: 700 clamp(24px, 2.4vw, 34px)/1.2 var(--head); color: var(--paper); }
.cp-title:focus { outline: none; }
/* The room check itself (its bezel, question, feedback and debrief) is below, after the desk: "the room check: an exam panel". */
.cp-foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cp-next, .cp-quiet, .cp-link { min-height: 50px; padding: 10px 24px; border-radius: 10px; font: 600 18px/1.2 var(--body); cursor: pointer; touch-action: manipulation; }
.cp-next { color: var(--ink); background: var(--ok); border: 2px solid var(--ok); }
.cp-next:hover { background: #7fe6b1; }
.cp-quiet { color: var(--paper); background: transparent; border: 2px solid #4a5260; }
.cp-quiet:hover { background: #161a21; }
.cp-link { display: block; width: 100%; min-height: 44px; padding: 8px 18px; text-align: left; font-size: 17px; color: var(--paper); background: #14181e; border: 2px solid var(--line); }
.cp-top { margin: 0 0 18px; }
.cp-link:hover { border-color: #5a6474; background: #181d24; }
.cp-next:focus-visible, .cp-quiet:focus-visible, .cp-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cp-sum { margin: 0 0 16px; font: 500 20px/1.45 var(--body); color: var(--paper-2); }
.class-panel.cp-passed .cp-title { color: var(--ok); }
.cp-warn { margin: -6px 0 14px; font: 600 17px/1.4 var(--body); color: #ffd58a; }
.cp-objs { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; max-width: 980px; }
.cp-objs li { display: grid; grid-template-columns: 76px 44px minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: 9px 14px;
  background: #12161b; border-radius: 10px; border-left: 4px solid var(--ok); font: 400 17px/1.4 var(--body); }
.cp-objs li.miss { border-left-color: var(--miss); }
.cp-mark { font: 700 15px var(--head); color: var(--ok); text-transform: uppercase; letter-spacing: .04em; }
.cp-objs li.miss .cp-mark { color: var(--miss); }
.cp-code { font: 600 16px var(--mono); color: var(--paper); }
.cp-obj { color: var(--paper-2); }
.cp-n { font: 600 16px var(--mono); color: var(--paper); white-space: nowrap; }
.cp-resit { display: grid; gap: 8px; max-width: 640px; margin-bottom: 8px; }
.cp-label { margin: 6px 0 2px; font: 600 16px/1.3 var(--body); color: var(--paper-2); letter-spacing: .02em; }
.cp-menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px 28px; max-width: 1000px; }
.cp-group { display: grid; gap: 8px; align-content: start; }
/* the desk: each lesson and lab with how far the student has come in it */
.cp-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 52px; padding: 8px 12px 8px 18px;
  text-align: left; font: 600 18px/1.3 var(--body); color: var(--paper); background: #14181e; border: 2px solid var(--line); border-radius: 10px;
  cursor: pointer; touch-action: manipulation; }
.cp-row:hover { border-color: #5a6474; background: #181d24; }
.cp-row:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cp-row-title { min-width: 0; }
.cp-chip { flex: none; padding: 3px 12px; border-radius: 999px; font: 600 14px/1.4 var(--body); color: var(--paper-2); background: #1d232b; white-space: nowrap; }
.cp-chip.is-watched { color: #ffd58a; background: rgba(242,194,48,.12); }
.cp-chip.is-completed { color: var(--ink); background: var(--ok); }
.cp-note { margin: 0; max-width: 46ch; font: 500 17px/1.45 var(--body); color: var(--paper-2); }
.cp-checkgroup .cp-next { justify-self: start; }

/* ---------- standing: a short note at the top; the mastered banner ---------- */
.class-toast { position: fixed; top: calc(80px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 12; width: max-content;
  max-width: min(680px, calc(100vw - 32px)); padding: 12px 20px; border-radius: 12px; background: rgba(10,11,13,.93); color: var(--paper);
  border-left: 4px solid var(--ok); font: 600 18px/1.4 var(--body); box-shadow: 0 6px 24px rgba(0,0,0,.22); pointer-events: none; text-align: center; }
.class-toast[hidden] { display: none; }
body.staged .class-toast { display: none; }
#classBanner { position: fixed; top: 9vh; left: 50%; z-index: 45; width: max-content; max-width: calc(100vw - 32px); padding: 18px 38px 20px;
  transform: translate(-50%, -14px); opacity: 0; pointer-events: none; text-align: center; background: rgba(10,11,13,.95); color: var(--paper);
  border-radius: 16px; border-bottom: 6px solid var(--banner-accent, #5ddb9a); box-shadow: 0 20px 60px rgba(0,0,0,.4);
  font: 700 clamp(28px, 3.6vw, 48px)/1.15 var(--head); transition: opacity .45s ease, transform .45s ease; }
#classBanner[hidden] { display: none; }
#classBanner.in { opacity: 1; transform: translate(-50%, 0); }
#classBanner.out { opacity: 0; transform: translate(-50%, -8px); }
@media (prefers-reduced-motion: reduce) {
  #classBanner, #classBanner.in, #classBanner.out { transition: opacity .3s ease; transform: translate(-50%, 0); }
}

/* ---------- smaller windows ---------- */
@media (max-width: 1320px) {
  .bar-where { width: 190px; }
  .cbtn { min-width: 60px; padding: 6px 7px; font-size: 13px; }
  .cbtn.main { min-width: 130px; padding: 8px 16px; }
}
@media (max-width: 1100px) { .bar-where { display: none; } .class-bar { padding-left: 10px; } }

/* ---------- phones: a thumb-height bar; standing, it sits right of the walking stick ---------- */
.class-root.phone .class-bar { left: 8px; right: 8px; width: auto; max-width: none; transform: none; bottom: calc(8px + env(safe-area-inset-bottom));
  padding: 6px; gap: 2px; justify-content: space-between; border-radius: 16px; }
.class-root.phone .bar-where { display: none; }
.class-root.phone .bar-mid, .class-root.phone .bar-side, .class-root.phone .bar-ends { display: contents; }
.class-root.phone .class-bar .cbtn { flex: 1 1 0; min-width: 0; min-height: 62px; padding: 6px 2px; font-size: 13px; }
.class-root.phone .class-bar .cbtn[data-act="prev"] { order: 1; }
.class-root.phone .class-bar .cbtn.main { order: 2; flex: 1.3 1 0; flex-direction: column; gap: 3px; min-width: 0; padding: 6px 4px; font-size: 15px; }
.class-root.phone .class-bar .cbtn[data-act="next"] { order: 3; }
.class-root.phone .class-bar .cbtn[data-act="speed"] { order: 4; }
.class-root.phone .class-bar .cbtn[data-act="captions"] { order: 5; }
.class-root.phone .class-bar .cbtn[data-act="watch"], .class-root.phone .class-bar .cbtn[data-act="room"] { order: 6; }
.class-root.phone .class-bar .cbtn[data-act="stand"] { order: 8; }
.class-root.phone.is-watch .class-bar .cbtn { flex: 1 1 auto; min-width: 48px; padding: 6px 3px; }
.class-root.phone.is-watch .class-bar .cbtn.main { flex: 1.2 1 auto; }
.class-root.phone .class-bar .cbtn[data-act="desk"] { order: 7; }
.class-root.phone .cap-text { padding: 8px 14px; font-size: 18px; line-height: 1.4; }
.class-root.phone .cap-who { margin-bottom: 4px; font-size: 14px; align-self: flex-start; }
.class-root.phone .class-caption[data-voice="high"] .cap-who { align-self: flex-end; }
.class-root.phone .class-note { padding: 8px 14px; font-size: 17px; flex-wrap: wrap; gap: 2px 10px; }
.class-root.phone .class-panel { padding: 16px 16px 24px; }
.class-root.phone .cp-objs li { grid-template-columns: 64px 40px minmax(0, 1fr); }
.class-root.phone .cp-objs li .cp-n { grid-column: 2 / 4; }
/* ---------- the desk: two large choices on sitting down ---------- */
.class-panel.cp-choose { display: flex; flex-direction: column; justify-content: center; }
.class-panel.cp-choose .cp-head, .class-panel.cp-choose .cp-choices, .class-panel.cp-choose .cp-foot { width: 100%; max-width: 1040px; margin-left: auto; margin-right: auto; }
.cp-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; max-width: 1040px; margin-top: 18px; }
.cp-choice { display: flex; align-items: center; gap: 26px; min-height: 260px; padding: 32px 34px; text-align: left; color: var(--paper);
  background: #12161c; border: 2px solid #2a313b; border-radius: 18px; cursor: pointer; touch-action: manipulation; }
.cp-choice svg { flex: none; width: 84px; height: 84px; color: var(--ok); }
.cp-choice.is-study svg { color: #8fb8ff; }
.cp-choice:hover { border-color: #5a6474; background: #161b22; }
.cp-choice.is-watch:hover { border-color: var(--ok); }
.cp-choice.is-study:hover { border-color: #8fb8ff; }
.cp-choice:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.cp-choice-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cp-choice-title { font: 700 clamp(26px, 2.4vw, 32px)/1.15 var(--head); color: var(--paper); }
.cp-choice-line { font: 500 18px/1.4 var(--body); color: var(--paper-2); }
.cp-choice-meta { font: 600 16px/1.3 var(--body); color: var(--paper-2); }
.cp-choice-meter { display: block; width: 100%; max-width: 280px; height: 6px; border-radius: 3px; background: #262b34; overflow: hidden; }
.cp-choice-fill { display: block; height: 100%; background: var(--ok); }
.class-root.phone .cp-choices { grid-template-columns: 1fr; gap: 14px; }
.class-root.phone .class-panel.cp-choose { justify-content: flex-start; }
.class-root.phone .cp-choice { min-height: 150px; padding: 20px 18px; gap: 18px; }
.class-root.phone .cp-choice svg { width: 52px; height: 52px; }
.class-root.phone .cp-choice-title { font-size: 24px; }
/* ---------- the room check: an exam panel at the desk, in the room's color (ui/roomcheck.js) ----------
   Held to the bar of the lessons' knowledge checks (Nick, 2026-09-30: the old one "looks cheap"). The
   bezel names the room and the check, then Question n of N beside a rail with a mark per question; the
   question beside its options on a wide desk, one over the other on a phone; the feedback over the
   question; and the debrief: a gauge with the pass mark, the objectives, and every question again. The
   room's color edges the panel (--rc-accent) and marks the rail (--rc-accent-hi, a lighter mix of it). */
.class-panel.cp-exam, .class-root.phone .class-panel.cp-exam { display: flex; flex-direction: column; padding: 0; container-type: inline-size;
  background: #0d1015; border-left: 6px solid var(--rc-accent, var(--ok)); }
.class-root.phone .class-panel.cp-exam { border-left-width: 4px; }
.rc-bezel { flex: none; margin: 0; padding: 16px clamp(18px, 3.2cqi, 36px) 16px; background: #090b0f; border-bottom: 1px solid var(--line); }
.rc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px 18px; flex-wrap: wrap; }
.class-panel.cp-exam .rc-room { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0;
  font: 700 19px/1.3 var(--head); letter-spacing: 0; color: var(--paper); }
.rc-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--rc-accent-hi, var(--ok)); }
.rc-name { min-width: 0; }
.rc-kind { flex: none; font: 500 14px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--rc-accent-hi, var(--ok)); }
.rc-track { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.class-panel.cp-exam .rc-count, .rc-chip { flex: none; margin: 0; padding: 4px 10px; border: 1px solid #353c48; border-radius: 4px; background: #141820;
  font: 500 14px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--paper); }
.rc-rail { flex: 1 1 auto; display: flex; gap: 4px; min-width: 60px; }
.rc-seg { flex: 1 1 0; height: 6px; border-radius: 1px; background: #2a303a; transition: background-color .35s ease; }
.rc-seg.is-ok { background: var(--ok); }
.rc-seg.is-miss { background: var(--miss); }
.rc-seg.is-now { background: var(--rc-accent-hi, var(--paper-2)); }
/* the question: the stage takes the room under the bezel; the question sits in the middle of it, its foot at the bottom */
.rc-stage { flex: 1 0 auto; display: flex; flex-direction: column; padding: clamp(20px, 3.4cqi, 40px) clamp(18px, 3.6cqi, 44px) clamp(16px, 2.4cqi, 26px); }
.rc-q { margin: auto 0; display: grid; gap: 22px; }
.class-panel.cp-exam .cp-stem { margin: 0; max-width: 44ch; font: 700 clamp(22px, 2.5cqi, 30px)/1.3 var(--head); letter-spacing: -.005em; color: var(--paper); }
.class-panel.cp-exam .cp-opts { display: grid; gap: 10px; max-width: none; }
.class-panel.cp-exam .cp-opt { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; width: 100%; min-height: 62px;
  padding: 12px 18px 12px 14px; text-align: left; font: 400 clamp(18px, 1.8cqi, 20px)/1.4 var(--body); color: var(--paper); background: #12161c;
  border: 1.5px solid #2e3541; border-radius: 6px; cursor: pointer; touch-action: manipulation;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, opacity .25s ease; }
.class-panel.cp-exam .cp-opt:hover:not(:disabled) { border-color: var(--rc-accent-hi, #5a6474); background: #161b23; box-shadow: inset 4px 0 0 var(--rc-accent-hi, #5a6474); }
.class-panel.cp-exam .cp-opt:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.class-panel.cp-exam .cp-opt:disabled { cursor: default; }
.class-panel.cp-exam .cp-key { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 4px; border: 1.5px solid #3b434f;
  background: #1a1f28; font: 500 15px/1 var(--mono); color: var(--paper-2); }
.class-panel.cp-exam .cp-opt.is-key { border-color: var(--ok); background: rgba(93,219,154,.1); box-shadow: inset 4px 0 0 var(--ok); }
.class-panel.cp-exam .cp-opt.is-key .cp-key { background: var(--ok); border-color: var(--ok); color: var(--ink); }
.class-panel.cp-exam .cp-opt.is-miss { border-color: var(--miss); background: rgba(255,138,122,.1); box-shadow: inset 4px 0 0 var(--miss); }
.class-panel.cp-exam .cp-opt.is-miss .cp-key { background: var(--miss); border-color: var(--miss); color: var(--ink); }
.class-panel.cp-exam .cp-opt.is-dim { opacity: .42; }
.rc-foot { justify-content: space-between; align-items: center; min-height: 67px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.rc-hint { margin: 0; font: 500 14px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #9aa3b0; }
.rc-go { min-height: 50px; padding: 10px 26px; border-radius: 10px; font: 600 18px/1.2 var(--body); color: var(--ink); background: var(--ok);
  border: 2px solid var(--ok); cursor: pointer; touch-action: manipulation; }
.rc-go:hover { background: #7fe6b1; }
.rc-go:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* a wide desk: the question beside its options */
@container (min-width: 880px) {
  .rc-q { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
}
/* the answer's feedback over the question (a sheet at the foot of a phone, below) */
.cp-fbwrap { position: absolute; left: 0; right: 0; z-index: 3; display: grid; place-items: center; padding: 16px; background: rgba(7,9,12,.76); }
.cp-fb { box-sizing: border-box; width: min(640px, 100%); max-height: calc(100% - 32px); overflow: auto; padding: 20px 24px 22px; border-radius: 10px;
  background: #131a22; color: var(--paper); border: 1px solid #3b4b59; border-top: 4px solid var(--ok); box-shadow: 0 16px 48px rgba(0,0,0,.5); }
.cp-fb.miss { border-top-color: #e7ab63; }
.rc-fbhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.rc-fbq { margin: 0; font: 500 14px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #b8cddb; }
.cp-verdict { margin: 4px 0 0; font: 700 26px/1.2 var(--head); color: var(--ok); outline: none; }
.cp-fb.miss .cp-verdict { color: #efbd83; }
.rc-fbclose { flex: none; min-height: 44px; padding: 6px 16px; border: 1px solid #5a7383; border-radius: 8px; background: transparent; color: var(--paper);
  font: 600 16px/1 var(--body); cursor: pointer; touch-action: manipulation; }
.rc-fbclose:hover { background: #1b2530; }
.rc-fbclose:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cp-fb .cp-line { margin: 0; font: 400 19px/1.55 var(--body); color: var(--paper); }
.rc-ans { display: grid; gap: 4px; margin: 14px 0 0; padding: 10px 14px; border-left: 3px solid var(--ok); background: rgba(93,219,154,.08); border-radius: 0 6px 6px 0; }
.rc-anskey { font: 500 14px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ok); }
.rc-anstext { font: 600 18px/1.4 var(--body); color: var(--paper); }
.cp-fbacts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.cp-fbacts .cp-next { min-height: 50px; padding: 10px 28px; }
.class-root.phone .cp-fbwrap { place-items: end stretch; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); }
.class-root.phone .cp-fb { width: 100%; padding: 18px; }
.class-root.phone .cp-fbacts .cp-next { flex: 1 1 auto; min-height: 54px; }
/* the debrief: the score and what next, the objectives and lessons; every question beside them on a wide desk */
.rc-debrief { display: grid; gap: 28px; align-content: start; }
.rc-col { display: grid; gap: 22px; align-content: start; min-width: 0; }
@container (min-width: 880px) {
  .rc-debrief { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; }
}
.rc-score { display: flex; align-items: center; gap: 24px; }
.rc-gauge { position: relative; flex: none; width: 136px; height: 136px; }
.rc-gauge svg { display: block; width: 100%; height: 100%; }
.rc-gtrack { fill: none; stroke: #252b35; stroke-width: 10; }
.rc-garc { fill: none; stroke: #efbd83; stroke-width: 10; transition: stroke-dasharray 1s cubic-bezier(.2,.7,.2,1); }
.class-panel.cp-passed .rc-garc { stroke: var(--ok); }
.rc-gpass { stroke: var(--paper); stroke-width: 3; stroke-linecap: round; }
.rc-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.rc-face b { font: 700 46px/1 var(--head); color: var(--paper); }
.rc-face span { margin-top: 6px; font: 500 15px/1 var(--mono); color: var(--paper-2); }
.rc-meta { display: grid; gap: 6px; min-width: 0; }
.rc-band { margin: 0; font: 500 14px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #efbd83; }
.class-panel.cp-passed .rc-band { color: var(--ok); }
.class-panel.cp-exam.cp-result .cp-title { margin: 0; font: 700 clamp(28px, 3.2cqi, 38px)/1.1 var(--head); }
.class-panel.cp-exam .cp-sum { margin: 0; font: 400 19px/1.45 var(--body); color: var(--paper-2); }
.class-panel.cp-exam .cp-warn { margin: 0; }
.rc-acts { margin-top: 0; }
.rc-block { display: grid; gap: 10px; align-content: start; }
.class-panel.cp-exam .rc-label { margin: 0; font: 500 14px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #9aa3b0; }
.class-panel.cp-exam .cp-objs { margin: 0; max-width: none; }
.class-panel.cp-exam .cp-objs li { grid-template-columns: 70px 44px minmax(0, 1fr) auto; background: #12161c; border-radius: 6px; }
.class-panel.cp-exam .cp-resit { max-width: none; margin: 0; }
.class-panel.cp-exam .cp-link { border-radius: 6px; }
.rc-review { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.rc-rev-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 54px;
  padding: 10px 6px; text-align: left; font: 400 17px/1.4 var(--body); color: var(--paper); background: transparent; border: 0;
  border-bottom: 1px solid var(--line); cursor: pointer; touch-action: manipulation; }
.rc-rev-row:hover { background: #12161c; }
.rc-rev-row:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.rc-rev-row.is-open { border-bottom-color: transparent; }
.rc-mk { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 4px; color: var(--ink); }
.rc-mk svg { width: 18px; height: 18px; }
.rc-mk.ok { background: var(--ok); }
.rc-mk.no { background: var(--miss); }
.rc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.rc-n { font: 500 14px/1 var(--mono); color: #9aa3b0; }
.rc-rev-q { min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.rc-rev-row.is-open .rc-rev-q { display: block; overflow: visible; }
.rc-chev { width: 20px; height: 20px; color: var(--paper-2); transition: transform .2s ease; }
.rc-rev-row.is-open .rc-chev { transform: rotate(180deg); }
.rc-rev-fb { display: grid; gap: 8px; padding: 2px 6px 16px 82px; border-bottom: 1px solid var(--line); }
.rc-rev-fb[hidden] { display: none; }
.rc-rev-fb p { margin: 0; }
.rc-rpick, .rc-rkey { display: grid; gap: 2px; padding: 8px 12px; border-left: 3px solid var(--miss); background: rgba(255,138,122,.07); border-radius: 0 6px 6px 0; }
.rc-rpick.ok, .rc-rkey { border-left-color: var(--ok); background: rgba(93,219,154,.07); }
.rc-rlab { font: 500 14px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #9aa3b0; }
.rc-rtext { font: 600 17px/1.4 var(--body); color: var(--paper); }
.rc-why { font: 400 17px/1.5 var(--body); color: var(--paper-2); }
/* a phone: everything one over the other, the question at the top */
.class-root.phone .rc-bezel { padding: 14px 16px 14px 14px; }
.class-root.phone .rc-stage { padding: 20px 16px 18px 14px; }
.class-root.phone .rc-q { margin: 0 0 auto; gap: 18px; }
.class-root.phone .class-panel.cp-exam .cp-stem { font-size: 22px; }
.class-root.phone .class-panel.cp-exam .cp-opt { min-height: 58px; padding: 11px 14px 11px 12px; gap: 14px; font-size: 18px; }
.class-root.phone .rc-foot { min-height: 0; }
.class-root.phone .rc-foot .rc-go { flex: 1 1 auto; }
.class-root.phone .rc-score { gap: 18px; }
.class-root.phone .rc-gauge { width: 112px; height: 112px; }
.class-root.phone .rc-face b { font-size: 38px; }
.class-root.phone .rc-acts > * { flex: 1 1 auto; }
.class-root.phone .class-panel.cp-exam .cp-objs li { grid-template-columns: 64px 40px minmax(0, 1fr); }
.class-root.phone .rc-rev-fb { padding-left: 6px; }
/* The check holds the desk: under it only a small Stand up, out of the way (classmode.js examView). */
.class-root.in-exam .bar-where, .class-root.in-exam .bar-mid, .class-root.in-exam .bar-side { display: none; }
.class-root.in-exam .bar-ends { padding-left: 0; border-left: 0; }
.class-root.in-exam .class-bar { padding: 6px; }
.class-root.phone.in-exam .class-bar { left: 50%; right: auto; width: max-content; transform: translateX(-50%); padding: 4px; border-radius: 14px; }
.class-root.phone.in-exam .class-bar .cbtn[data-act="stand"] { flex: none; flex-direction: row; gap: 8px; min-width: 0; min-height: 44px; padding: 6px 18px; font-size: 15px; }
.class-root.phone.in-exam .class-bar .cbtn[data-act="stand"] svg { width: 20px; height: 20px; }
/* A short screen (a phone on its side): a slimmer bezel, and the feedback fits without scrolling. */
@media (max-height: 520px) {
  .rc-bezel, .class-root.phone .rc-bezel { padding-top: 10px; padding-bottom: 10px; }
  .rc-track { margin-top: 8px; }
  .rc-stage, .class-root.phone .rc-stage { padding-top: 14px; }
  .cp-fbwrap, .class-root.phone .cp-fbwrap { padding: 6px 8px; }
  .cp-fb, .class-root.phone .cp-fb { max-height: calc(100% - 4px); padding: 12px 16px 14px; }
  .rc-fbhead { margin-bottom: 6px; }
  .rc-fbclose { min-height: 40px; }
  .cp-verdict { font-size: 22px; }
  .cp-fb .cp-line { font-size: 17px; line-height: 1.45; }
  .rc-ans { margin-top: 8px; padding: 6px 12px; }
  .cp-fbacts { margin-top: 10px; }
  .cp-fbacts .cp-next, .class-root.phone .cp-fbacts .cp-next { min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .rc-seg, .rc-garc, .rc-chev, .class-panel.cp-exam .cp-opt { transition: none; }
}

/* ---------- the lesson view: the page beside the room's sidebar (ui/lessonbar.js), a drawer on a phone ---------- */
#stage.lv-side #stageBar { display: none; }
#stage.lessonview #stageFrameHost iframe { border-radius: 0; box-shadow: none; }
#stageMenu { display: inline-flex; align-items: center; gap: 8px; }
#stageMenu[hidden] { display: none; }
#stageMenu svg { width: 22px; height: 22px; flex: none; }
#stageNote { position: absolute; z-index: 4; transform: translateX(-50%); margin: 0; width: max-content; max-width: min(620px, calc(100vw - 32px));
  padding: 12px 20px; border-radius: 12px; background: var(--ink); color: var(--paper); font: 600 17px/1.4 var(--body);
  box-shadow: inset 0 0 0 2px var(--focus), 0 10px 30px rgba(0,0,0,.4); pointer-events: none; }
#stageNote[hidden] { display: none; }
.lessonbar { --lb-accent: var(--ok); position: fixed; left: 0; top: 0; bottom: 0; z-index: 21; display: flex; flex-direction: column;
  background: #0c0f13; color: var(--paper); border-right: 1px solid #262b34; pointer-events: auto; box-sizing: border-box; }
.lessonbar[hidden] { display: none; }
.lessonbar.is-drawer { width: min(86vw, 360px); transform: translateX(-104%); transition: transform .24s ease; z-index: 24; box-shadow: 14px 0 44px rgba(0,0,0,.5); }
.lessonbar.is-drawer.is-open { transform: none; }
@media (prefers-reduced-motion: reduce) { .lessonbar.is-drawer { transition: none; } }
.lessonbar-scrim { position: fixed; inset: 0; z-index: 23; background: rgba(0,0,0,.52); }
.lessonbar-scrim[hidden] { display: none; }
.lb-head { padding: calc(20px + env(safe-area-inset-top)) 20px 14px 22px; border-bottom: 1px solid #1d232b; box-shadow: inset 5px 0 0 var(--lb-accent); }
.lb-room { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.lb-num { font: 600 15px/1.3 var(--body); color: var(--paper-2); letter-spacing: .02em; }
.lb-room-title { font: 700 22px/1.2 var(--head); color: var(--paper); }
.lb-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 6px 12px 18px; }
.lb-label { margin: 16px 10px 6px; font: 600 14px/1.3 var(--body); color: var(--paper-2); letter-spacing: .06em; text-transform: uppercase; }
.lb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lb-item { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 8px 12px;
  text-align: left; font: 600 17px/1.3 var(--body); color: var(--paper); background: transparent; border: 2px solid transparent; border-radius: 12px;
  cursor: pointer; touch-action: manipulation; }
.lb-item:hover { background: #151a21; }
.lb-item.is-current { background: #161c24; border-color: var(--lb-accent); cursor: default; }
.lb-item:focus-visible, .lb-sec:focus-visible, .lb-back:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.lb-title { min-width: 0; overflow-wrap: anywhere; }
.lb-dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 2px #5b6b7e; }
.lb-dot.is-completed { background: var(--ok); box-shadow: none; }
.lb-dot.is-watched { background: #f2c230; box-shadow: none; }
.lb-chip { font: 600 14px/1.3 var(--body); color: var(--paper-2); white-space: nowrap; }
.lb-chip.is-completed { color: var(--ok); }
.lb-chip.is-watched { color: #ffd58a; }
.lb-sections { list-style: none; margin: 6px 0 10px 17px; padding: 0 0 0 12px; border-left: 2px solid #262b34; display: grid; gap: 2px; }
.lb-sections[hidden] { display: none; }
.lb-sec { width: 100%; min-height: 42px; padding: 7px 12px; text-align: left; font: 500 16px/1.3 var(--body); color: var(--paper-2);
  background: transparent; border: 0; border-radius: 8px; cursor: pointer; touch-action: manipulation; }
.lb-sec:hover:not(:disabled) { background: #151a21; color: var(--paper); }
.lb-sec.is-here { color: var(--paper); background: #151a21; box-shadow: inset 3px 0 0 var(--lb-accent); }
.lb-sec.is-shut { color: #66717e; cursor: default; }
/* a section read through: a green check before its name */
.lb-sec.is-seen::before { content: "\2713"; display: inline-block; width: 1.3em; margin-left: -.2em; color: var(--ok); font-weight: 700; }
.lb-dot.is-started { background: linear-gradient(90deg, var(--ok) 50%, transparent 50%); box-shadow: inset 0 0 0 2px var(--ok); }
.lb-dot.is-completed::after { content: "\2713"; display: grid; place-items: center; width: 100%; height: 100%; font: 800 9px/1 var(--body); color: var(--ink); }
.lb-note { margin: 0 16px 10px; padding: 10px 14px; border-radius: 10px; background: #1a1f27; color: #ffd58a; font: 600 15px/1.4 var(--body); }
.lb-note[hidden] { display: none; }
.lb-foot { padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid #1d232b; }
.lb-back { width: 100%; min-height: 54px; padding: 10px 18px; font: 600 18px/1.2 var(--body); color: var(--ink); background: var(--ok);
  border: 2px solid var(--ok); border-radius: 12px; cursor: pointer; touch-action: manipulation; }
.lb-back:hover { background: #7fe6b1; }
/* A lesson's explorer, over the page, with the way back to it. */
#stageFrameHost .stage-inner { position: absolute; z-index: 2; border: 0; background: #fff; pointer-events: auto; }
.stage-inner-back { position: absolute; z-index: 3; min-height: 48px; padding: 10px 18px; font: 600 17px var(--body); color: var(--paper);
  background: var(--ink); border: 2px solid #4a5260; border-radius: 10px; cursor: pointer; pointer-events: auto; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.stage-inner-back:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* The mastered moment: the page on the board steps aside so the board's own screen and the paper show. */
.class-board > * { transition: opacity .4s ease; }
.class-board.celebrate { background: transparent; box-shadow: none; pointer-events: none; }
.class-board.celebrate > * { opacity: 0; }
.class-root.celebrating[data-scene] { background: transparent !important; }

/* ---------- the library: a handbook's card, and the desk at a carrel (ui/library.js) ---------- */
#libraryCard, #arcadeCard { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(10,11,13,.5); }
#libraryDesk, #testingMenu { position: fixed; z-index: 30; top: 88px; right: 24px; bottom: 24px; width: min(460px, 40vw); display: flex; align-items: flex-start; }
#libraryCard[hidden], #libraryDesk[hidden], #testingMenu[hidden], #arcadeCard[hidden] { display: none; }
.lib-panel { width: 100%; max-height: 100%; overflow: auto; background: var(--ink); color: var(--paper); border-radius: 14px;
  border-top: 6px solid #c9975a; padding: 22px 26px 18px; box-shadow: 0 12px 40px rgba(0,0,0,.35); box-sizing: border-box; }
.lib-card { width: min(620px, 100%); max-height: calc(100vh - 32px); }
.lib-over { margin: 0; font: 600 16px var(--body); color: var(--paper-2); letter-spacing: .01em; }
.lib-title { margin: 2px 0 8px; font: 700 28px/1.2 var(--head); color: var(--paper); }
.lib-meta { margin: 0 0 14px; font: 400 16px/1.45 var(--body); color: var(--paper-2); }
.lib-status { margin: 4px 0 8px; padding: 10px 14px; border-radius: 10px; background: #1a1d23; border-left: 4px solid #e0b25e;
  font: 600 16px/1.4 var(--body); color: var(--paper); }
/* The reward for studying here: today's basket of tomatoes, the streak, the week (js/logic/focusplan.js). */
.lib-rewards { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: #1a1d23; }
.lib-basket { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.lib-tomato { width: 22px; height: 22px; flex: none; }
.lib-tomato-body { fill: #2a2f38; }
.lib-tomato-leaf { fill: none; stroke: #2a2f38; stroke-width: 2.2; stroke-linecap: round; }
.lib-tomato-shine { fill: #fff; opacity: 0; }
.lib-tomato.is-on .lib-tomato-body { fill: #e0503a; }
.lib-tomato.is-on .lib-tomato-leaf { stroke: #6fae52; }
.lib-tomato.is-on .lib-tomato-shine { opacity: .45; }
.lib-basket-more { font: 600 14px var(--body); color: var(--paper-2); margin-left: 2px; }
.lib-reward-line { margin: 6px 0 0; font: 400 14px/1.4 var(--body); color: var(--paper-2); }
.lib-chapters, .lib-books { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.lib-chapter, .lib-book { width: 100%; display: flex; align-items: center; gap: 14px; min-height: 50px; padding: 7px 12px; text-align: left;
  font: 600 17px/1.3 var(--body); color: var(--paper); background: var(--ink-2); border: 2px solid var(--line); border-radius: 10px; cursor: pointer; }
.lib-chapter:hover, .lib-book:hover { border-color: #c9975a; background: #161a21; }
.lib-num { flex: none; width: 34px; height: 42px; display: grid; place-items: center; font: 500 16px var(--head); color: #fff;
  background: #193c56; border-left: 5px solid #3d6989; border-radius: 2px 4px 4px 2px; }
.lib-chapter .lib-num { height: 34px; background: #1b2530; border-left-color: #c9975a; }
.lib-words { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.lib-name { overflow: hidden; text-overflow: ellipsis; }
.lib-line { font: 400 14px/1.35 var(--body); color: var(--paper-2); }
.lib-foot { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
/* Stand up stays in reach however long the list runs. */
.lib-desk .lib-foot, .tc-menu .lib-foot { position: sticky; bottom: -18px; margin: 0 -26px -18px; padding: 12px 26px 18px; background: linear-gradient(rgba(10,11,13,0), var(--ink) 30%); }
.lib-primary, .lib-quiet { min-height: 48px; padding: 10px 22px; font: 600 18px var(--body); border-radius: 10px; cursor: pointer; }
.lib-primary { color: var(--ink); background: #e0b25e; border: 2px solid #e0b25e; }
.lib-primary:hover { background: #ecc47a; }
.lib-quiet { color: var(--paper); background: transparent; border: 2px solid #4a5260; }
.lib-quiet:hover { background: #161a21; }
.lib-panel button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.lib-panel:focus { outline: none; }
@media (max-width: 719px), (pointer: coarse) and (max-width: 999px) {
  #libraryDesk, #testingMenu { inset: 0; width: auto; }
  #libraryDesk .lib-panel, #testingMenu .lib-panel { max-height: none; height: 100%; border-radius: 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
  .lib-desk .lib-foot, .tc-menu .lib-foot { margin: 0 -16px calc(-18px - env(safe-area-inset-bottom)); padding: 12px 16px calc(18px + env(safe-area-inset-bottom)); bottom: calc(-18px - env(safe-area-inset-bottom)); }
  .lib-title { font-size: 24px; }
  .lib-card { padding: 18px 18px 16px; }
}

/* ======================================================================================
   The profile (ui/profile.js): the learning record, graphics first. Rooms as tiles with their
   lamp and rings, the CAET domains as bars, time, focus sessions and practice scores.
   ====================================================================================== */
#profile { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(10,11,13,.6); }
#profile[hidden] { display: none; }
.pf-panel { width: min(1180px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; overflow: hidden;
  background: var(--ink); color: var(--paper); border-radius: 14px; border-top: 6px solid var(--ok); box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.pf-head { display: flex; align-items: center; gap: 12px 20px; padding: 14px 16px 12px 28px; border-bottom: 1px solid var(--line); }
.pf-title { flex: 1; margin: 0; font: 700 28px/1.2 var(--head); color: var(--paper); }
.pf-title:focus { outline: none; }
.pf-close, .pf-hpjump { min-height: 48px; padding: 10px 20px; font: 600 17px var(--body); color: var(--paper); background: transparent;
  border: 2px solid #4a5260; border-radius: 8px; cursor: pointer; touch-action: manipulation; }
.pf-close:hover, .pf-hpjump:hover { background: #161a21; }
.pf-hpjump:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (max-width: 560px) { .pf-head { flex-wrap: wrap; } .pf-title { flex-basis: 100%; } .pf-head .pf-close, .pf-head .pf-hpjump { flex: 1; padding: 10px 12px; font-size: 16px; white-space: nowrap; } }
.pf-close:focus-visible, .pf-domain:focus-visible, .pf-go:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pf-body { overflow: auto; overscroll-behavior: contain; padding: 18px 28px 26px; display: grid; gap: 26px; touch-action: pan-y; }
.pf-signin { justify-self: start; min-height: 44px; display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 8px; font: 600 16px var(--body); color: var(--ink); background: var(--ok); text-decoration: none; }
.pf-loading { margin: 24px 0; font: 500 18px/1.5 var(--body); color: var(--paper-2); }
.pf-h { margin: 0 0 12px; font: 700 20px/1.3 var(--head); color: var(--paper); }
.pf-small { font: 500 15px/1.35 var(--body); color: var(--paper-2); }
.pf-label { margin: 0 0 8px; font: 600 15px/1.3 var(--body); color: var(--paper-2); }

/* every section is a calm, even card: one radius, one border, one background, so the page reads as
   one system rather than a stack of differently-dressed panels */
.pf-next, .pf-progress, .pf-rooms, .pf-mastery, .pf-time, .pf-shop, .pf-focus, .pf-headphones {
  padding: 18px 20px 20px; border-radius: 14px; background: #11151b; border: 1px solid var(--line);
}

/* ---------- readiness hero: the headline gauge, its explainer, and the eight areas at a glance ---------- */
.rd-hero { padding: 24px 26px 22px; border-radius: 16px; background: linear-gradient(165deg, #141a22 0%, #0f1319 65%); border: 1px solid var(--line); }
.rd-top { display: grid; grid-template-columns: 156px minmax(0, 1fr); align-items: center; gap: 24px; }
.rd-gauge-wrap { display: grid; place-items: center; }
.rd-gauge { width: 148px; height: 148px; }
.rd-gauge-num { font: 700 32px var(--head); fill: var(--paper); }
.rd-gauge-cap { font: 700 12px var(--body); letter-spacing: .1em; text-transform: uppercase; fill: var(--paper-2); }
.rd-title { font-size: 24px; margin: 0 0 6px; }
.rd-label { margin: 0 0 8px; font: 700 19px/1.3 var(--head); color: var(--ok); }
.rd-label.rd-empty { font: 600 17px/1.4 var(--body); color: var(--paper-2); }
.rd-explainer { max-width: 68ch; margin: 0 0 6px; }
.rd-facts { margin: 0; color: #8a93a1; }
.rd-chips-label { margin: 18px 0 8px; }
.rd-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rd-chip { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-height: 74px; padding: 10px 12px; border-radius: 10px;
  background: #0e1116; border: 1px solid var(--line); color: var(--paper); text-align: left; cursor: pointer; touch-action: manipulation; }
.rd-chip:hover { border-color: #3a4250; background: #151a21; }
.rd-chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.rd-chip-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rd-chip-n { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #1d232b; font: 700 11px var(--head); color: var(--paper-2); }
.rd-chip-pct { font: 700 15px var(--head); }
.rd-chip-name { font: 600 14px/1.25 var(--body); color: var(--paper-2); }
.rd-chip-bar { position: relative; display: block; height: 6px; border-radius: 999px; background: #1d232b; overflow: hidden; margin-top: auto; }
.rd-chip-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--ok); }
.rd-chip-bar.is-empty .rd-chip-fill { display: none; }

/* rooms */
.pf-legend { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: -4px 0 12px; font: 500 15px/1.4 var(--body); color: var(--paper-2); }
.pf-key { display: inline-flex; align-items: center; gap: 8px; }
.pf-dot { width: 12px; height: 12px; border-radius: 50%; }
.pf-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.pf-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 10px; border-radius: 12px; background: #11151b; border: 1px solid var(--line); }
.pf-rings { width: 78px; height: 78px; }
.pf-num { font: 700 20px var(--head); fill: var(--paper); }
.pf-lamp { position: absolute; top: 9px; right: 9px; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 2px #11151b; }
.pf-tile[data-lamp="green"] .pf-lamp { box-shadow: 0 0 10px #4fd48a; }
.pf-tile[data-lamp="amber"] .pf-lamp { box-shadow: 0 0 10px #f2a93b; }
.pf-passed { position: absolute; top: 6px; left: 8px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  font: 700 14px/1 var(--body); color: var(--ink); background: var(--ok); }
.pf-passed-key { position: static; }
.pf-tile-title { font: 600 13px/1.25 var(--body); color: var(--paper-2); text-align: center; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* mastery */
.pf-domains { display: grid; gap: 6px; }
.pf-domain { display: grid; grid-template-columns: 28px minmax(150px, 280px) minmax(0, 1fr) 70px; align-items: center; gap: 12px; width: 100%; min-height: 46px;
  padding: 6px 12px; text-align: left; font: 600 16px/1.3 var(--body); color: var(--paper); background: #11151b; border: 1px solid var(--line);
  border-radius: 10px; cursor: pointer; touch-action: manipulation; }
.pf-domain:hover { background: #151a21; border-color: #3a4250; }
.pf-domain[aria-expanded="true"] { border-color: var(--ok); }
.pf-dnum { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 700 14px var(--head); background: #1d232b; color: var(--paper-2); }
.pf-bar { position: relative; display: block; height: 12px; border-radius: 999px; background: #1d232b; overflow: hidden; }
.pf-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--ok); }
.pf-bar.is-empty .pf-fill { display: none; }
.pf-pct { font: 700 16px var(--head); text-align: right; color: var(--paper); }
.pf-objectives { display: grid; gap: 4px; margin: 2px 0 8px 40px; }
.pf-objective { display: grid; grid-template-columns: 38px minmax(0, 1fr) minmax(80px, 180px) 60px; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 8px; background: #0e1116; }
.pf-code { font: 600 14px var(--mono); color: var(--paper-2); }
.pf-otext { font: 400 15px/1.35 var(--body); color: var(--paper-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* study next: two or three weakest CAET objectives, as their own cards with one clear button each */
.pf-next-empty { margin: 0; }
.pf-weak { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.pf-weak-card { display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 14px; border-radius: 12px; background: #0e1116; border: 1px solid var(--line); }
.pf-weak-card .pf-code { font: 700 12px var(--mono); letter-spacing: .06em; color: var(--ok); }
.pf-weak-card .pf-otext { -webkit-line-clamp: 3; font-size: 16px; color: var(--paper); }
.pf-weak-card .pf-bar { margin-top: 2px; }
.pf-weak-card .pf-fill { background: #f2a93b; }
.pf-weak-card .pf-pct { align-self: flex-start; color: var(--paper-2); font-size: 14px; }
.pf-go { min-height: 44px; margin-top: 2px; padding: 8px 14px; font: 600 15px var(--body); color: var(--ink); background: var(--ok); border: 0; border-radius: 8px;
  cursor: pointer; white-space: nowrap; touch-action: manipulation; align-self: flex-start; }
.pf-go:hover { background: #7fe6b1; }

/* progress over time: two stat tiles, then minutes a day and scores, each a full-width chart */
.pf-progress { display: grid; gap: 10px; }
.pf-stat-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 10px; }
.pf-stat-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px; border-radius: 12px;
  background: #0e1116; border: 1px solid var(--line); }
.pf-stat-value { font: 700 26px var(--head); color: var(--paper); }
.pf-stat-label { font: 600 14px/1.3 var(--body); color: var(--paper-2); }
.rd-streak-dots { width: auto; height: 22px; margin-top: 2px; }
.rd-streak-lit { fill: var(--ok); }
.rd-streak-dim { fill: #262c36; }
/* the two charts fill the card's width; a fixed CSS height, filled once real pixels are known
   (ui/profile.js's chartSvg), so nothing has to stretch or center in empty space */
.pf-fortbars { display: block; width: 100%; height: 130px; }
.pf-fort-split { opacity: .3; }
.pf-fort-grid { stroke: #262c36; stroke-width: 1; }
.pf-fort-axis { font: 600 11px var(--body); fill: #6b7482; }
.pf-fort-val { font: 700 11px var(--head); fill: var(--paper-2); }
.pf-spark { display: block; width: 100%; height: 160px; }
.pf-spark-line { fill: none; stroke: var(--voice-low); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.pf-spark-dot { fill: var(--ink); stroke: var(--voice-low); stroke-width: 2.5; cursor: pointer; }
.pf-spark-dot:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pf-score-grid { stroke: #1f242c; stroke-width: 1; }
.pf-score-axis { font: 600 11px var(--body); fill: #6b7482; }
.pf-spark-pass { stroke: #3a4250; stroke-width: 1.5; stroke-dasharray: 4 5; }
.pf-spark-pass-label { font: 600 12px var(--body); fill: #6b7482; }
.pf-spark-last { font: 700 14px var(--head); fill: var(--paper); }
.pf-spark-tip { transition: opacity .12s ease; pointer-events: none; }
.pf-spark-tip rect { fill: var(--ink); stroke: #3a4250; stroke-width: 1; }
.pf-spark-tip-text { font: 600 12px var(--body); fill: var(--paper); }

/* rooms grid; the focus sessions section below the shop */
.pf-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pf-row-one { grid-template-columns: minmax(0, 1fr); }
.pf-big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pf-value { font: 700 30px/1.1 var(--head); color: var(--paper); }
/* the time studied (ui/profile.js): the totals beside this week by day, then where and what */
.pf-time { display: grid; gap: 16px; }
.pf-time-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 280px); align-items: start; gap: 12px 28px; }
.pf-time-nums { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.pf-weekbars { width: 100%; height: auto; max-height: 120px; }
.pf-wk-base { fill: #262c36; }
.pf-wk-bar { fill: #5f7187; }
.pf-wk-today { fill: var(--ok); }
.pf-wk-day { font: 600 13px var(--body); fill: var(--paper-2); }
.pf-wk-now { fill: var(--paper); font-weight: 700; }
.pf-time-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px 28px; align-items: start; }
.pf-time-where .pf-label, .pf-time-what .pf-label { margin-bottom: 6px; }
.pf-places { width: 100%; height: auto; max-height: 150px; display: block; }
.pf-pl-num { font: 600 13px var(--body); fill: var(--paper-2); }
.pf-most { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.pf-most-row { display: flex; justify-content: space-between; gap: 12px; font: 500 15px/1.35 var(--body); color: var(--paper-2); }
.pf-most-time { font-weight: 600; color: var(--paper); white-space: nowrap; }
.pf-stack { display: flex; height: 18px; border-radius: 999px; overflow: hidden; background: #1d232b; }
.pf-seg { display: block; height: 100%; }
.pf-what-keys { display: grid; gap: 6px; margin-top: 12px; }
.pf-what-key { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 10px; font: 500 15px/1.35 var(--body); color: var(--paper-2); }
.pf-what-time { font-weight: 600; color: var(--paper); white-space: nowrap; }
.pf-time-none, .pf-elsewhere { margin: 0; }
/* the shop (ui/profile.js): work orders signed off, shop hours, hours by shop */
.pf-shop { display: grid; gap: 16px; }
.pf-shop-top { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.pf-shop-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 28px; align-items: start; }
.pf-wo { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pf-wo-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; font: 500 15px/1.35 var(--body); color: var(--paper); }
.pf-wo-mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 700 13px var(--body); color: var(--ink); background: #d7a25e; }
.pf-wo-date { font-weight: 600; color: var(--paper-2); white-space: nowrap; }
.pf-wo-none { margin: 0; }
.pf-shop-hours { display: grid; gap: 8px; }
.pf-shop-row { display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr) auto; align-items: center; gap: 12px; font: 500 15px/1.35 var(--body); color: var(--paper-2); }
.pf-shop-time { font-weight: 600; color: var(--paper); white-space: nowrap; }

/* focus sessions (js/logic/focusplan.js): today's tomato basket, the week and streak, the milestones */
.pf-focus { display: grid; gap: 12px; }
.fs-basket { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.fs-basket-more { font: 600 14px var(--body); color: var(--paper-2); margin-left: 2px; }
.fs-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 0; }
.fs-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.fs-badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: #0e1116;
  border: 1px solid var(--line); color: var(--paper-2); font: 600 14px var(--body); }
.fs-badge-mark { width: 16px; height: 16px; display: none; align-items: center; justify-content: center; }
.fs-badge.is-reached { background: rgba(93, 219, 154, .14); border-color: #2b5a44; color: var(--paper); }
.fs-badge.is-reached .fs-badge-mark { display: inline-flex; color: var(--ok); font-weight: 700; }

@media (max-width: 900px) {
  .pf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pf-row { grid-template-columns: minmax(0, 1fr); }
  .pf-time-top, .pf-time-grid, .pf-shop-grid { grid-template-columns: minmax(0, 1fr); }
  .rd-top { grid-template-columns: 120px minmax(0, 1fr); gap: 18px; }
  .rd-gauge { width: 112px; height: 112px; }
  .rd-gauge-num { font-size: 26px; }
}
@media (max-width: 600px) {
  #profile { padding: 0; }
  .pf-panel { width: 100%; height: 100%; max-height: none; border-radius: 0; border-top-width: 4px; }
  .pf-head { padding: calc(8px + env(safe-area-inset-top)) 12px 8px 16px; }
  .pf-title { font-size: 22px; }
  .pf-close { padding: 10px 14px; font-size: 16px; }
  .pf-body { padding: 14px 14px calc(20px + env(safe-area-inset-bottom)); gap: 22px; }
  .pf-next, .pf-progress, .pf-rooms, .pf-mastery, .pf-time, .pf-shop, .pf-focus, .pf-headphones, .rd-hero { padding: 14px 12px 16px; }
  .pf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .pf-rings { width: 64px; height: 64px; }
  .pf-domain { grid-template-columns: 26px minmax(0, 1fr) 60px; grid-template-areas: "num name pct" "bar bar bar"; row-gap: 6px; }
  .pf-domain .pf-dnum { grid-area: num; }
  .pf-domain .pf-dname { grid-area: name; }
  .pf-domain .pf-pct { grid-area: pct; }
  .pf-domain .pf-bar { grid-area: bar; }
  .pf-objectives { margin-left: 8px; }
  .pf-objective { grid-template-columns: 34px minmax(0, 1fr) 50px; }
  .pf-objective .pf-bar { grid-column: 1 / -1; }
  .pf-weak { grid-template-columns: minmax(0, 1fr); }
  .pf-shop-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .pf-shop-row .pf-bar { grid-column: 1 / -1; grid-row: 2; }
  .pf-pl-num { font-size: 17px; }
  /* the readiness hero stacks: gauge above the text, chips two a row (they carry a name now) */
  .rd-hero { padding: 18px 16px 18px; }
  .rd-top { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 12px; }
  .rd-gauge { width: 128px; height: 128px; }
  .rd-explainer, .rd-facts { max-width: none; }
  .rd-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rd-chip { text-align: left; }
  .fs-stats { grid-template-columns: minmax(0, 1fr); }
  .pf-fortbars { height: 110px; }
  .pf-spark { height: 150px; }
}
/* The student's training record: completed work first, then practice and the details.
   Sections stay direct children for the library player's profile docking. */
#profile { padding: 20px; background: rgba(5, 10, 17, .76); }
#profile .pf-panel { width: min(1240px, 100%); height: min(1040px, calc(100dvh - 40px)); max-height: calc(100dvh - 40px);
  background: #0d141d; border: 1px solid #39495b; border-top: 3px solid #8fb8ff; border-radius: 16px; }
#profile .pf-head { flex: none; padding: 18px 28px; gap: 16px; background: #121e2b; border-bottom: 1px solid #334254; }
#profile .pf-title { font-size: 25px; letter-spacing: -.025em; }
#profile .pf-close, #profile .pf-hpjump { border: 1px solid #526478; border-radius: 7px; font-size: 16px; }
#profile .pf-close { background: #e8edf3; border-color: #e8edf3; color: #14202e; }
#profile .pf-close:hover { background: #fff; }
#profile .pf-hpjump { color: #d8e2ef; }
#profile .pf-nav { display: flex; flex: none; gap: 8px; padding: 5px 28px; background: #121e2b; border-bottom: 1px solid #334254; }
#profile .pf-jump { min-height: 44px; padding: 10px 16px; color: #c7d5e4; background: transparent; border: 0; border-radius: 5px;
  font: 600 16px/1.4 var(--body); cursor: pointer; touch-action: manipulation; }
#profile .pf-jump:hover { color: #fff; background: #26394c; }
#profile .pf-jump:focus-visible, #profile .pf-secondary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
#profile .pf-body { flex: 1; min-height: 0; padding: 30px 32px 36px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-content: start; gap: 30px 26px; scroll-padding-top: 18px; }
#profile .pf-body > * { min-width: 0; grid-column: 1 / -1; }
#profile .pf-section { scroll-margin-top: 0; }
#profile .pf-section:focus { outline: none; }
#profile .pf-section:focus-visible { outline: 2px solid #8fb8ff; outline-offset: 5px; }
#profile .pf-small { font-size: 16px; line-height: 1.5; color: #b7c5d5; }
#profile .pf-label { font-size: 16px; color: #c4d0df; }
#profile .pf-h { font-size: 24px; letter-spacing: -.02em; margin-bottom: 16px; }
#profile .pf-overview { padding: 0 0 22px; border-bottom: 1px solid #46566a; }
#profile .pf-record-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin: 0 0 28px; }
#profile .pf-record-title { margin: 0; font: 700 38px/1.12 var(--head); letter-spacing: -.045em; color: #f0f4f9; }
#profile .pf-record-lead { max-width: 54ch; margin: 12px 0 0; font: 400 17px/1.5 var(--body); color: #b7c5d5; }
#profile .pf-record-stamp { display: flex; flex: none; flex-direction: column; align-items: flex-end; padding: 2px 0 2px 20px;
  border-left: 2px solid #7088a4; font: 500 14px/1.5 var(--body); color: #b7c5d5; }
#profile .pf-record-stamp-mark { font: 700 25px/1.15 var(--head); letter-spacing: .1em; color: #dce8f6; }
#profile .pf-record-metrics { margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
#profile .pf-record-metric { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#profile .pf-record-metrics .pf-record-metric { padding: 3px 14px 6px; border-left: 1px solid #344255; }
#profile .pf-record-metrics .pf-record-metric:first-child { padding-left: 0; border-left: 0; }
#profile .pf-record-label { order: 2; font: 600 16px/1.35 var(--body); color: #e0e8f2; }
#profile .pf-record-value { order: 1; margin: 0; font: 600 34px/1.2 var(--head); letter-spacing: -.045em; color: #f3f6fb; font-variant-numeric: tabular-nums; }
#profile .pf-record-detail { order: 3; margin: 0; font: 400 14px/1.4 var(--body); color: #a6b6c8; }
#profile .pf-course-completion { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding-top: 24px; font: 500 16px/1.4 var(--body); color: #c4d0df; }
#profile .pf-course-completion .pf-bar { height: 8px; background: #263549; }
#profile .pf-course-completion .pf-fill { background: #79d6ad; }
#profile .pf-course-completion strong { color: #99e5c1; font-variant-numeric: tabular-nums; }
#profile .pf-recent { grid-column: 1; }
#profile .pf-next { grid-column: 2; padding: 0; border: 0; border-radius: 0; background: transparent; }
#profile .pf-activity-list { list-style: none; margin: 0; padding: 0; }
#profile .pf-activity { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: start; gap: 12px;
  padding: 16px 0; border-bottom: 1px solid #29384a; }
#profile .pf-activity:first-child { padding-top: 0; }
#profile .pf-activity:last-child { border-bottom: 0; }
#profile .pf-activity-mark { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #385f58; border-radius: 50%;
  color: #99e5c1; background: #172d2a; font: 600 18px var(--body); }
#profile .pf-activity[data-kind="arcade"] .pf-activity-mark { color: #b8d3ff; background: #20334d; border-color: #4a668b; }
#profile .pf-activity[data-kind="focus"] .pf-activity-mark { color: #dbc5f8; background: #2b253d; border-color: #68507d; }
#profile .pf-activity[data-kind="shop"] .pf-activity-mark { color: #efc68b; background: #302b21; border-color: #6d5736; }
#profile .pf-activity-text { display: grid; gap: 3px; }
#profile .pf-activity-place { font: 500 14px/1.4 var(--body); color: #a6b6c8; }
#profile .pf-activity-title { font: 600 17px/1.35 var(--body); color: #edf2f8; }
#profile .pf-activity-detail { font: 400 16px/1.45 var(--body); color: #bac8d8; }
#profile .pf-activity-date { padding-top: 1px; white-space: nowrap; font: 400 14px/1.4 var(--body); color: #a6b6c8; }
#profile .pf-activity-empty { padding: 20px; border: 1px dashed #4b6077; border-radius: 8px; }
#profile .pf-activity-empty strong, #profile .pf-arcade-empty strong { color: #e4edf7; font: 600 18px/1.4 var(--body); }
#profile .pf-activity-empty p, #profile .pf-arcade-empty p { margin: 8px 0 0; }
#profile .pf-weak { grid-template-columns: minmax(0, 1fr); gap: 10px; }
#profile .pf-weak-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px;
  padding: 16px 18px; background: #182435; border: 0; border-left: 3px solid #bb995e; border-radius: 0 8px 8px 0; }
#profile .pf-weak-card .pf-code { font-size: 14px; color: #c6d7ed; letter-spacing: 0; }
#profile .pf-weak-card .pf-otext { grid-column: 1 / -1; font-size: 16px; -webkit-line-clamp: 2; }
#profile .pf-weak-card .pf-pct { grid-column: 2; grid-row: 1; font-size: 16px; }
#profile .pf-weak-card .pf-bar { display: none; }
#profile .pf-weak-card .pf-go { grid-column: 1 / -1; justify-self: start; margin-top: 4px; background: #203f3b; color: #b5f0d4; border: 1px solid #4d8274; }
#profile .pf-go { font-size: 16px; }
#profile .pf-next-empty { padding: 20px; background: #182435; border-radius: 8px; }
#profile .pf-arcade { padding: 24px; background: #17263a; border: 1px solid #405c7c; border-radius: 12px; }
#profile .pf-section-heading { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; }
#profile .pf-section-heading .pf-h { margin-bottom: 8px; }
#profile .pf-section-heading .pf-small { margin: 0; max-width: 58ch; }
#profile .pf-secondary { min-height: 46px; flex: none; padding: 10px 16px; border: 1px solid #7695bb; border-radius: 7px;
  background: #233f61; color: #e4efff; font: 600 16px/1.4 var(--body); cursor: pointer; touch-action: manipulation; }
#profile .pf-secondary:hover { background: #31547d; }
#profile .pf-arcade-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 24px 0; padding: 22px 0; border-block: 1px solid #3d5570; }
#profile .pf-arcade-metrics .pf-record-value { color: #bfdaff; }
#profile .pf-arcade-games { display: grid; }
#profile .pf-arcade-game { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, .8fr); align-items: center; gap: 20px;
  padding: 15px 0; border-bottom: 1px solid #354c67; font: 400 16px/1.4 var(--body); }
#profile .pf-arcade-game:last-child { border: 0; padding-bottom: 0; }
#profile .pf-arcade-game:first-child { padding-top: 0; }
#profile .pf-arcade-game > div { display: grid; gap: 3px; }
#profile .pf-arcade-game strong { font-weight: 600; color: #edf4ff; }
#profile .pf-arcade-game span { color: #b2c5dd; }
#profile .pf-arcade-game-accuracy strong { color: #b0ebd0; }
#profile .pf-arcade-empty { padding-bottom: 2px; }
#profile .pf-rooms, #profile .pf-mastery, #profile .pf-time, #profile .pf-shop, #profile .pf-focus, #profile .pf-headphones {
  padding: 24px 0 0; border: 0; border-top: 1px solid #344255; border-radius: 0; background: transparent; }
#profile .pf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
#profile .pf-tile { display: grid; grid-template-columns: 70px minmax(0, 1fr); grid-template-rows: minmax(40px, auto) auto auto;
  gap: 4px 12px; padding: 18px 14px; align-items: center; background: #162232; border-color: #34475d; border-radius: 8px; }
#profile .pf-rings { grid-row: 1 / 4; width: 70px; height: 70px; }
#profile .pf-tile-title { display: block; overflow: visible; text-align: left; font-size: 16px; line-height: 1.25; color: #e0e8f2; }
#profile .pf-tile-count { font: 500 14px/1.35 var(--body); color: #c3d1e3; }
#profile .pf-tile-status { font: 400 14px/1.35 var(--body); color: #a0b2c8; }
#profile .pf-tile[data-lamp="green"] { border-color: #497b68; }
#profile .pf-tile[data-lamp="green"] .pf-tile-status { color: #99e5c1; }
#profile .pf-tile .pf-lamp { width: 8px; height: 8px; top: 8px; right: 8px; box-shadow: none; }
#profile .pf-tile .pf-passed { top: 5px; left: 5px; width: 18px; height: 18px; font-size: 11px; }
#profile .pf-legend { font-size: 16px; gap: 8px 20px; margin: 0 0 18px; }
#profile .rd-hero { padding: 22px 24px; background: #14232c; border: 1px solid #40565d; border-radius: 10px; }
#profile .rd-top { grid-template-columns: 112px minmax(0, 1fr); gap: 24px; }
#profile .rd-gauge { width: 112px; height: 112px; }
#profile .rd-title { font-size: 23px; }
#profile .rd-facts { color: #acbdca; }
#profile .rd-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#profile .rd-chip { background: #101c25; border-color: #354a56; }
#profile .rd-chip-name { font-size: 16px; }
#profile .rd-chip-pct { font-size: 16px; }
#profile .pf-progress { padding: 24px; background: #131e2b; border-color: #34475d; border-radius: 10px; }
#profile .pf-stat-tile { background: #19283a; border-color: #34475d; border-radius: 7px; }
#profile .pf-stat-label { font-size: 16px; }
#profile .pf-domain { font-size: 16px; background: #162232; border-color: #34475d; }
#profile .pf-otext, #profile .pf-shop-row, #profile .pf-most-row, #profile .pf-what-key { font-size: 16px; }
#profile .pf-spark-tip rect { fill: #0d141d; }
#profile .pf-score-axis, #profile .pf-fort-axis, #profile .pf-spark-pass-label { fill: #a8b8cd; }
#profile .fs-badge { font-size: 16px; }
@media (max-width: 1080px) {
  #profile .pf-record-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 0; }
  #profile .pf-record-metrics .pf-record-metric:nth-child(4) { padding-left: 0; border-left: 0; }
  #profile .pf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  #profile .pf-body { grid-template-columns: minmax(0, 1fr); padding-inline: 24px; }
  #profile .pf-body > .pf-recent, #profile .pf-body > .pf-next { grid-column: 1; }
  #profile .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #profile .pf-record-stamp { display: none; }
  #profile .pf-section-heading { flex-wrap: wrap; gap: 16px; }
}
@media (max-width: 600px) {
  #profile { padding: 0; }
  #profile .pf-panel { width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; }
  #profile .pf-head { padding: calc(10px + env(safe-area-inset-top)) 16px 12px; flex-wrap: wrap; gap: 10px; }
  #profile .pf-title { flex-basis: 100%; font-size: 23px; }
  #profile .pf-head .pf-close, #profile .pf-head .pf-hpjump { flex: 1; min-height: 44px; padding: 9px 10px; }
  #profile .pf-nav { gap: 0; padding: 2px 6px; justify-content: space-between; }
  #profile .pf-jump { padding-inline: 9px; font-size: 16px; }
  #profile .pf-body { padding: 24px 18px calc(30px + env(safe-area-inset-bottom)); gap: 28px; }
  #profile .pf-h { font-size: 23px; }
  #profile .pf-record-intro { margin-bottom: 24px; }
  #profile .pf-record-title { font-size: 32px; }
  #profile .pf-record-lead { font-size: 16px; line-height: 1.5; margin-top: 9px; }
  #profile .pf-record-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; }
  #profile .pf-record-metrics .pf-record-metric { padding: 0 0 0 16px; border-left: 1px solid #344255; }
  #profile .pf-record-metrics .pf-record-metric:nth-child(even) { padding-left: 16px; border-left: 1px solid #344255; }
  #profile .pf-record-metrics .pf-record-metric:nth-child(odd) { padding-left: 0; border-left: 0; }
  #profile .pf-record-value { font-size: 31px; }
  #profile .pf-record-detail { font-size: 14px; }
  #profile .pf-course-completion { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  #profile .pf-course-completion .pf-bar { grid-column: 1 / -1; grid-row: 2; }
  #profile .pf-activity { grid-template-columns: 28px minmax(0, 1fr); gap: 7px 10px; }
  #profile .pf-activity-mark { width: 26px; height: 26px; }
  #profile .pf-activity-date { grid-column: 2; }
  #profile .pf-arcade, #profile .pf-progress { padding: 20px 16px; margin-inline: -2px; }
  #profile .pf-arcade-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
  #profile .pf-arcade-metrics .pf-record-metric:last-child { grid-column: 1 / -1; }
  #profile .pf-arcade-game { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  #profile .pf-arcade-game-name { grid-column: 1 / -1; }
  #profile .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #profile .pf-tile { display: flex; flex-direction: column; align-items: flex-start; padding: 16px 12px; gap: 8px; }
  #profile .pf-rings { width: 68px; height: 68px; }
  #profile .pf-tile-title { min-height: 40px; }
  #profile .pf-tile-count, #profile .pf-tile-status { font-size: 14px; }
  #profile .rd-hero { padding: 20px 16px; }
  #profile .rd-top { grid-template-columns: minmax(0, 1fr); justify-items: start; text-align: left; gap: 12px; }
  #profile .rd-gauge { width: 100px; height: 100px; }
  #profile .rd-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #profile .rd-title { font-size: 23px; }
  #profile .pf-stat-row { gap: 10px; }
  #profile .pf-stat-tile { padding: 12px; }
}
/* ---------- the testing center: a station's menu (ui/testing.js), on the library desk's panel ---------- */
.tc-menu .tc-choice { margin-bottom: 8px; }
.tc-sub { margin: 16px 0 8px; font: 600 16px var(--body); color: var(--paper-2); letter-spacing: .02em; }
.tc-domains { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tc-domain { min-height: 48px; font-size: 15px; gap: 10px; }
.tc-domain .lib-num { width: 28px; height: 28px; font-size: 15px; }
.tc-domain .lib-name { flex: 1; min-width: 0; line-height: 1.25; }
.tc-pct { flex: none; font: 600 16px var(--mono); color: #5ddb9a; }
.tc-pct.tc-going { font: 600 16px var(--body); color: #e0b25e; }
.tc-results { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 4px; }
.tc-results li { padding: 8px 12px; border-radius: 8px; background: var(--ink-2); font: 400 16px/1.35 var(--body); color: var(--paper); }
.tc-results .tc-none { color: var(--paper-2); }
@media (max-width: 719px) { .tc-domains { grid-template-columns: 1fr; } }

/* ---------- the arcade: a cabinet's card (ui/arcade.js), on the library card's panel ---------- */
.arc-card { width: min(520px, 100%); border-top-color: #4fd1ff; }
.arc-line { font-size: 18px; color: var(--paper); }
.arc-collection { width: min(1000px,100%); background:#142e31; border-top-color:#b99b65; padding:28px; }
.arc-collection .lib-title { font-size:clamp(28px,3.1vw,40px); font-weight:500; margin:8px 0 12px; }
.arc-collection .lib-over { color:#ddc99e; }
.arc-questions { border:1px solid #d8c49938; border-radius:12px; padding:18px; margin:20px 0; background:#0b2025; }
.arc-questions-head { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.arc-questions-head h3,.arc-game-heading { margin:0; font:600 18px var(--body,system-ui); color:#f5ead6; }
.arc-question-count { margin:0; color:#b8ded8; font-size:14px; }
.arc-topic-controls { display:flex; gap:12px; margin:8px 0 12px; }
.arc-questions .course-topics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.arc-questions .course-topic { display:grid; grid-template-columns:20px minmax(0,1fr); column-gap:10px; align-items:center; padding:12px; background:#15353a; border:1px solid #7a99994a; border-radius:8px; cursor:pointer; font:500 14px/1.4 var(--body,system-ui); }
.arc-questions .course-topic:has(input:checked) { border-color:#c6b17a; background:#254541; }
.arc-questions .course-topic input { grid-row:span 2; width:17px; height:17px; accent-color:#d6bd83; }
.arc-questions .course-topic small { grid-column:2; color:#b6ceca; font-size:12px; }
.arc-questions .course-topic:focus-within { outline:2px solid #f5d897; outline-offset:2px; }
.arc-game:disabled { opacity:.45; cursor:default; }
@media(max-width:600px){.arc-questions{padding:12px}.arc-questions .course-topics{grid-template-columns:1fr}.arc-questions-head h3{font-size:17px}}
.arc-game-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:22px 0; }
.arc-game { display:flex; text-align:left; padding:0; color:#f3eddf; background:#203c3e; border:1px solid #54706b; border-radius:9px; overflow:hidden; cursor:pointer; font-family:var(--body); }
.arc-game:hover { border-color:#d6ba82; background:#2b4949; }
.arc-game:focus-visible { outline:3px solid #f1d497; outline-offset:3px; }
.arc-game-art { width:112px; min-height:142px; flex:none; background:#385550; display:grid; place-items:center; overflow:hidden; }
.arc-game-art img { width:100%; height:100%; object-fit:cover; }
.arc-game-symbol { font-size:48px; color:#e1c997; }
.arc-game-copy { display:flex; flex-direction:column; padding:17px; gap:8px; }
.arc-game-title { font:600 20px/1.2 var(--head); }
.arc-game-line { font-size:14px; line-height:1.4; color:#cbd7d0; }
.arc-game-play { margin-top:auto; font-weight:600; font-size:14px; color:#efd39d; }
.arc-collection .lib-foot { position:sticky; bottom:-28px; padding:14px 0 0; background:#142e31; }
@media(max-width:719px) {
  .arc-collection { padding:20px; }
  .arc-game-grid { grid-template-columns:1fr; gap:12px; }
  .arc-game-art { width:86px; min-height:120px; }
  .arc-game-copy { padding:13px; }
  .arc-game-line { font-size:15px; }
  .arc-collection .lib-foot { bottom:-20px; }
}

/* ---------- the next class (ui/guide.js): a note in the top left corner ---------- */
/* The corner's column of notes (ui/notes.js): the next class, then the work order in hand. */
#hudNotes { position: absolute; top: calc(16px + env(safe-area-inset-top)); left: calc(16px + env(safe-area-inset-left));
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: min(480px, calc(100vw - 32px)); pointer-events: none; }
#hudNotes > * { pointer-events: auto; }
body.staged #hudNotes, body.in-class #hudNotes { display: none; }
#guideChip { display: flex; align-items: center; gap: 14px; max-width: 100%;
  background: rgba(10,11,13,.9); color: var(--paper); border-left: 4px solid var(--ok); border-radius: 10px;
  padding: 8px 8px 8px 16px; box-shadow: 0 6px 24px rgba(0,0,0,.22); pointer-events: auto; }
#guideChip[hidden] { display: none; }
#guideChip .guide-text { margin: 0; display: flex; flex-direction: column; min-width: 0; }
#guideChip .guide-over { font: 600 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ok); }
#guideChip .guide-what { font: 700 18px/1.3 var(--head); }
#guideChip button { flex: none; min-height: 44px; padding: 0 18px; font: 600 16px var(--body); color: var(--ink); background: var(--paper);
  border: 0; border-radius: 999px; cursor: pointer; touch-action: manipulation; }
#guideChip button:hover { background: #fff; }
#guideChip button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
#guideChip button[hidden], #guideChip .guide-here[hidden] { display: none; }
#guideChip .guide-here { flex: none; font: 600 15px var(--body); color: var(--paper-2); padding-right: 10px; }
body.touch #guideChip button { min-height: 48px; }
body.staged #guideChip, body.in-class #guideChip { display: none; }
/* The room banners and walk status drop below the notes while they show. */
body.notes-on #toasts { top: calc(var(--notes-bottom, 80px) + 10px); }
/* On a phone the corner buttons fill the top row: the notes sit under them. */
@media (max-width: 760px) {
  #hudNotes { top: calc(88px + env(safe-area-inset-top)); }
  #guideChip { gap: 10px; padding-left: 12px; }
  #guideChip .guide-what { font-size: 16px; }
}

/* ---------- the class schedule (ui/schedule.js): the fourteen rooms and their status ---------- */
#scheduleCard { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(10,11,13,.5); }
#scheduleCard[hidden] { display: none; }
.sched-panel { width: min(860px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--ink); color: var(--paper);
  border-radius: 14px; border-top: 6px solid var(--ok); padding: 22px 28px 24px; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.sched-over { margin: 0; font: 600 13px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ok); }
#scheduleTitle { margin: 2px 0 8px; font: 700 32px/1.2 var(--head); color: var(--paper); outline: none; }
.sched-greet { margin: 0 0 8px; font: 500 20px/1.45 var(--body); }
.sched-how { margin: 0 0 14px; font: 400 18px/1.45 var(--body); color: var(--paper-2); }
.sched-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px 14px; }
/* Two columns, rooms 1 to 7 and 8 to 14, where there is room for them. */
@media (min-width: 761px) { .sched-list { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(7, auto); grid-auto-flow: column; } }
.sched-row { display: grid; grid-template-columns: 2.2em 1fr auto; align-items: center; gap: 12px; min-height: 44px;
  padding: 6px 12px; border-radius: 8px; background: var(--ink-2); }
.sched-n { font: 700 20px var(--head); text-align: right; color: var(--paper-2); }
.sched-title { font: 600 17px/1.3 var(--body); }
.sched-status { font: 600 15px var(--body); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.sched-status::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; box-sizing: border-box; }
.st-mastered .sched-status { color: var(--ok); }
.st-mastered .sched-status::before { background: currentColor; }
.st-progress .sched-status { color: #f2c230; }
.st-progress .sched-status::before { background: linear-gradient(90deg, transparent 50%, currentColor 50%); }
.st-open .sched-status { color: var(--ok); }
.st-locked { opacity: .62; }
.st-locked .sched-status { color: var(--paper-2); }
.st-locked .sched-status::before { border-radius: 3px; }
.sched-row.next { background: #123b33; box-shadow: inset 4px 0 0 var(--ok); opacity: 1; }
.sched-row.next .sched-n, .sched-row.next .sched-status { color: var(--ok); }
.sched-foot { margin-top: 18px; display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.sched-foot button { min-height: 48px; padding: 10px 22px; font: 600 18px var(--body); border-radius: 8px; cursor: pointer; touch-action: manipulation; }
.sched-walk { color: var(--ink); background: var(--ok); border: 2px solid var(--ok); }
.sched-walk:hover { background: #7ce6b0; }
.sched-close { color: var(--paper); background: transparent; border: 2px solid #4a5260; }
.sched-close:hover { background: #161a21; }
.sched-foot button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (max-width: 600px) {
  .sched-panel { padding: 18px 16px 18px; }
  #scheduleTitle { font-size: 26px; }
  .sched-greet { font-size: 18px; }
  .sched-how { font-size: 16px; }
  .sched-row { grid-template-columns: 1.8em 1fr auto; gap: 8px; padding: 6px 8px; }
  .sched-title { font-size: 15px; }
  .sched-status { font-size: 13px; gap: 6px; }
}

/* ---------- the next class on the floor map (ui/map.js, [guide]) ---------- */
.map-next { margin: 0; font: 600 18px/1.4 var(--body); color: var(--ok); }
.map-next[hidden] { display: none; }
.map-plan .plan-classroom.plan-next { fill: #1d3a33; stroke: var(--ok); stroke-width: .18; }
@media (max-width: 760px) { .map-next { order: 4; flex-basis: 100%; font-size: 16px; } }

/* ---------- a locked room in the schedule: a small padlock ---------- */
.st-locked .sched-status::before { border: 0; border-radius: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 6V4.5a3 3 0 0 1 6 0V6h1v7H3V6zm1.5 0h3V4.5a1.5 1.5 0 0 0-3 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 6V4.5a3 3 0 0 1 6 0V6h1v7H3V6zm1.5 0h3V4.5a1.5 1.5 0 0 0-3 0z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- the Shop Office's work orders (ui/workorders.js) ---------- */
/* The job in hand: a note under the next class, in the office's purple. */
#jobChip { display: flex; align-items: center; gap: 14px; max-width: 100%; background: rgba(10,11,13,.9); color: var(--paper);
  border-left: 4px solid #b9a4e3; border-radius: 10px; padding: 8px 8px 8px 16px; box-shadow: 0 6px 24px rgba(0,0,0,.22); }
#jobChip[hidden] { display: none; }
#jobChip .guide-text { margin: 0; display: flex; flex-direction: column; min-width: 0; }
#jobChip .guide-over { font: 600 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #b9a4e3; }
#jobChip .guide-what { font: 700 18px/1.3 var(--head); }
#jobChip button { flex: none; min-height: 44px; padding: 0 18px; font: 600 16px var(--body); color: var(--ink); background: var(--paper);
  border: 0; border-radius: 999px; cursor: pointer; touch-action: manipulation; }
#jobChip button:hover { background: #fff; }
#jobChip button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
#jobChip button[hidden], #jobChip .guide-here[hidden] { display: none; }
#jobChip .guide-here { flex: none; font: 600 15px var(--body); color: var(--paper-2); padding-right: 10px; }
body.touch #jobChip button { min-height: 48px; }
@media (max-width: 760px) { #jobChip { gap: 10px; padding-left: 12px; } #jobChip .guide-what { font-size: 16px; } }

/* The desk, the logbook and the rules: dialogs on the hangar's dark panel, the office's purple on top. */
.wo-dialog { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(10,11,13,.5); }
.wo-dialog[hidden] { display: none; }
.wo-panel { width: min(760px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; background: var(--ink); color: var(--paper);
  border-radius: 14px; border-top: 6px solid #b9a4e3; padding: 22px 28px 24px; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.wo-over { margin: 0; font: 600 13px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #b9a4e3; }
.wo-title { margin: 2px 0 10px; font: 700 30px/1.25 var(--head); color: var(--paper); outline: none; }
.wo-title.wo-q { font-size: 24px; line-height: 1.35; margin-bottom: 14px; }
.wo-lead { margin: 0 0 14px; font: 400 18px/1.5 var(--body); color: var(--paper-2); }
.wo-note { margin: 14px 0 0; font: 600 17px/1.45 var(--body); color: #d9ccf3; }
.wo-group { margin: 16px 0 8px; font: 600 14px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--paper-2); }
.wo-list { display: grid; gap: 6px; }
.wo-job { display: grid; grid-template-columns: 5.2em 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left;
  min-height: 56px; padding: 8px 14px; background: var(--ink-2); color: var(--paper); border: 1px solid #2f3540; border-left: 4px solid #b9a4e3;
  border-radius: 8px; cursor: pointer; font: inherit; touch-action: manipulation; }
.wo-job:hover { background: #1b2029; }
.wo-job:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.wo-job .wo-num { grid-row: 1 / 3; font: 600 15px var(--mono); color: #d9ccf3; }
.wo-job .wo-name { font: 700 17px/1.3 var(--body); }
.wo-job .wo-meta { grid-column: 2; font: 400 14px/1.3 var(--body); color: var(--paper-2); }
.wo-job .wo-tag { grid-column: 3; grid-row: 1 / 3; font: 600 14px var(--body); color: var(--ok); white-space: nowrap; }
.wo-job.st-locked { opacity: .6; border-left-color: #5b6470; }
.wo-job.st-locked .wo-tag { color: var(--paper-2); }
.wo-job.st-active { border-left-color: #f2c230; }
.wo-job.st-active .wo-tag { color: #f2c230; }
.wo-job.st-signed .wo-tag { color: #b9a4e3; }
.wo-facts { display: grid; grid-template-columns: 7.5em 1fr; gap: 6px 14px; margin: 4px 0 0; font: 400 17px/1.45 var(--body); }
.wo-facts dt { color: var(--paper-2); font-weight: 600; }
.wo-facts dd { margin: 0; }
.wo-tasks { margin: 0; padding-left: 1.4em; font: 400 17px/1.5 var(--body); }
.wo-tasks li + li { margin-top: 4px; }
.wo-practicals { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.wo-practicals li { display: grid; grid-template-columns: max-content 1fr; gap: 10px; align-items: baseline; font: 400 16px/1.45 var(--body); }
.wo-pcode { font: 600 13px/1.4 var(--mono); color: var(--paper-2); min-width: 3.2em; }
@media (max-width: 520px) { .wo-practicals li { grid-template-columns: 1fr; gap: 0; } }
.wo-codes { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0 0; font: 500 14px/1.4 var(--mono); color: var(--paper-2); }
.wo-rules { margin: 6px 0 0; padding-left: 1.3em; font: 400 18px/1.5 var(--body); }
.wo-rules li + li { margin-top: 8px; }
.wo-choices { margin: 12px 0 0; padding: 0; border: 0; display: grid; gap: 6px; }
.wo-choices legend { margin-bottom: 6px; font: 600 14px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--paper-2); }
.wo-choice { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; background: var(--ink-2); border: 1px solid #2f3540; border-radius: 8px;
  font: 400 17px/1.45 var(--body); cursor: pointer; }
.wo-choice:hover { border-color: #6a7482; }
.wo-choice input { margin-top: 4px; width: 18px; height: 18px; accent-color: #b9a4e3; flex: none; }
.wo-choice:has(input:checked) { border-color: #b9a4e3; background: #1d1a26; }
.wo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.wo-field { display: grid; gap: 6px; font: 600 14px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--paper-2); }
.wo-field input { min-height: 46px; padding: 8px 12px; font: 400 18px var(--body); color: var(--paper); background: var(--ink-2); border: 1px solid #3a414d; border-radius: 8px;
  text-transform: none; letter-spacing: 0; color-scheme: dark; }
.wo-field input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.wo-error { margin: 4px 0 0; font: 600 15px/1.4 var(--body); color: #ff9b8a; text-transform: none; letter-spacing: 0; }
.wo-error[hidden] { display: none; }
.wo-entry { margin: 4px 0 0; padding: 14px 16px; white-space: pre-wrap; font: 500 15px/1.6 var(--mono); color: #1c2027; background: #f3efe2;
  border-radius: 6px; border-left: 4px solid #1f3b2e; }
/* [work] the record by name at sign off, and the incident report (a serious mistake stopped the work) */
.wo-record-h { margin: 14px 0 4px; font: 600 13px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--paper-2); }
.wo-record { margin: 0; padding-left: 1.3em; font: 400 16px/1.45 var(--body); color: #f0c9c2; }
.wo-record li + li { margin-top: 3px; }
#incidentCard .wo-panel { border-top-color: #e0503f; }
#incidentCard .wo-over { color: #ff9b8a; }
.wo-incident { grid-template-columns: 9.5em 1fr; margin-bottom: 14px; }
.wo-incident dd { font-weight: 500; }
.wo-incident dt:first-child, .wo-incident dt:first-child + dd { color: #ffb4a6; }
.wo-options { display: grid; gap: 8px; margin-top: 8px; }
.wo-option { text-align: left; min-height: 52px; padding: 12px 16px; font: 500 17px/1.4 var(--body); color: var(--paper); background: var(--ink-2);
  border: 1px solid #3a414d; border-radius: 8px; cursor: pointer; touch-action: manipulation; }
.wo-option:hover { background: #1b2029; border-color: #6a7482; }
.wo-option:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.wo-foot { margin-top: 20px; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.wo-foot button { min-height: 48px; padding: 10px 20px; font: 600 17px var(--body); border-radius: 8px; cursor: pointer; touch-action: manipulation; }
.wo-primary { color: var(--ink); background: #b9a4e3; border: 2px solid #b9a4e3; }
.wo-primary:hover { background: #cbbbee; }
.wo-secondary { color: var(--paper); background: transparent; border: 2px solid #6b5a92; }
.wo-close { color: var(--paper); background: transparent; border: 2px solid #4a5260; }
.wo-secondary:hover, .wo-close:hover { background: #161a21; }
.wo-foot button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (max-width: 600px) {
  .wo-panel { padding: 18px 16px; }
  .wo-title { font-size: 24px; }
  .wo-facts { grid-template-columns: 1fr; gap: 2px; }
  .wo-facts dd { margin-bottom: 8px; }
  .wo-row { grid-template-columns: 1fr; }
  .wo-job { grid-template-columns: 4.6em 1fr; }
  .wo-job .wo-tag { grid-column: 2; grid-row: auto; }
  .wo-foot button { flex: 1 1 auto; }
}
/* [manager] a card job's answers, and why */
.wo-option.wo-wrong { opacity: .55; border-color: #7a3b36; text-decoration: line-through; text-decoration-color: rgba(255,155,138,.6); }
.wo-option.wo-right { border-color: var(--ok); background: #12261e; opacity: 1; }
.wo-why { margin-top: 12px; }
.wo-ask { border-color: #b08a2e; }

/* ---------- the shop manager: Ray's bar (ui/manager.js) ---------- */
/* Over the world it sits where the speech card does; over a bench, under the stage bar; over a dialog, above it. */
#rayBar { position: fixed; left: 50%; bottom: 112px; z-index: 40; width: max-content; max-width: min(680px, calc(100vw - 32px));
  padding: 12px 16px 12px 18px; border-radius: 12px; background: rgba(10,11,13,.94); color: var(--paper); border-left: 5px solid #e0b44c;
  box-shadow: 0 8px 28px rgba(0,0,0,.35); opacity: 0; transform: translate(-50%, 8px); transition: opacity .2s ease, transform .2s ease; }
#rayBar[hidden] { display: none; }
#rayBar.in { opacity: 1; transform: translate(-50%, 0); }
#rayBar p { margin: 0; }
#rayBar .ray-who { font: 600 13px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #e0b44c; margin-bottom: 4px; }
#rayBar .ray-line { font: 500 20px/1.45 var(--body); }
#rayBar .ray-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#rayBar .ray-acts:not(:has(button:not([hidden]))) { display: none; }
#rayBar button { min-height: 40px; padding: 6px 14px; font: 600 15px var(--body); color: var(--paper); background: transparent; border: 2px solid #5a4a26;
  border-radius: 8px; cursor: pointer; touch-action: manipulation; }
#rayBar button:hover { background: #1b1a14; }
#rayBar button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
#rayBar button[hidden] { display: none; }
#rayBar .ray-follow { color: var(--ink); background: #e0b44c; border-color: #e0b44c; }
#rayBar .ray-follow:hover { background: #ecc767; }
/* Clicks pass through him to whatever is under the words; only his buttons take them. */
#rayBar { pointer-events: none; }
#rayBar button { pointer-events: auto; }
body.touch #rayBar { bottom: calc(240px + env(safe-area-inset-bottom)); }
body.touch #rayBar button, body.touch #stageAskRay { min-height: 44px; }
@media (orientation: landscape) and (min-width: 640px) { body.touch #rayBar { bottom: calc(96px + env(safe-area-inset-bottom)); } }
/* A dialog open (a work order, the logbook, a menu): up top, clear of its buttons. */
body:has(.wo-dialog:not([hidden])) #rayBar, body:has(#askMenu:not([hidden])) #rayBar { top: 16px; bottom: auto; }
/* over a dialog only while he talks: the line he left up while leading the way does not sit on its head */
body:has(.wo-dialog:not([hidden])) #rayBar:not(.talking) { display: none; }
/* Over a bench: a voice in your ear, docked in the stage bar between its title and its buttons. */
body.staged #rayBar { top: 6px; bottom: auto; left: max(420px, 32vw); right: 270px; width: auto; max-width: none; transform: none;
  display: flex; align-items: center; gap: 12px; padding: 6px 12px 6px 14px; border-radius: 10px; background: #16181d; box-shadow: none; transition: opacity .2s ease; }
body.staged #rayBar.in { transform: none; }
body.staged #rayBar .ray-who { display: none; }
body.staged #rayBar .ray-line { flex: 1; font: 500 15px/1.3 var(--body); }
body.staged #rayBar .ray-line::before { content: "Ray: "; font-weight: 700; color: #e0b44c; }
body.staged #rayBar .ray-acts { flex: none; margin: 0; }
body.staged #rayBar button { min-height: 34px; padding: 4px 10px; font-size: 14px; }
@media (max-width: 1000px) { body.staged #rayBar { top: 66px; left: 8px; right: 8px; } }
@media (max-width: 700px) { #rayBar .ray-line { font-size: 17px; } #rayBar { padding: 10px 12px 10px 14px; } }
@media (prefers-reduced-motion: reduce) { #rayBar { transition: none; } }
#stageAskRay { border-color: #b08a2e !important; color: #f3d98f; }
#stageAskRay[hidden] { display: none; }

/* ---------- the repair station: a tagged station's sentence (ui/stations.js) ---------- */
#stationNote { position: fixed; left: 50%; bottom: 104px; transform: translateX(-50%); z-index: 6; max-width: min(560px, calc(100vw - 32px));
  margin: 0; padding: 12px 18px 12px 48px; border-radius: 10px; background: var(--ink); color: var(--paper); font: 600 18px/1.35 var(--body);
  box-shadow: 0 6px 24px rgba(0,0,0,.25); pointer-events: none; }
#stationNote::before { content: ""; position: absolute; left: 17px; top: 50%; width: 16px; height: 28px; margin-top: -14px; border-radius: 3px;
  background: #c41f2b; box-shadow: inset 0 0 0 2px rgba(255,255,255,.85); }
#stationNote[hidden], body.staged #stationNote { display: none; }
body.station-note #hint { display: none !important; }
@media (max-width: 719px) { #stationNote { bottom: 200px; } }

/* ---------- the Library's study conversations (ui/libraryaudio.js) ---------- */
.listen-dialog { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(10,11,13,.5); }
.listen-dialog[hidden] { display: none; }
.listen-panel { width: min(680px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; background: var(--ink); color: var(--paper);
  border-radius: 14px; border-top: 6px solid #c9a15a; padding: 22px 26px 24px; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.listen-over { margin: 0; font: 600 13px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #d8b877; }
.listen-title { margin: 2px 0 8px; font: 700 30px/1.25 var(--head); outline: none; }
.listen-lead { margin: 0 0 8px; font: 400 17px/1.5 var(--body); color: var(--paper-2); }
.listen-group { margin: 16px 0 6px; font: 600 14px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--paper-2); }
.listen-items { display: grid; gap: 6px; }
.listen-item { display: grid; gap: 2px; text-align: left; min-height: 52px; padding: 8px 14px; background: var(--ink-2); color: var(--paper); border: 1px solid #2f3540;
  border-left: 4px solid #c9a15a; border-radius: 8px; cursor: pointer; font: inherit; touch-action: manipulation; }
.listen-item:hover { background: #1b2029; }
.listen-item:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.listen-item.now { border-color: #c9a15a; background: #221c12; }
.listen-name { font: 600 17px/1.35 var(--body); }
.listen-meta { font: 400 14px/1.3 var(--body); color: var(--paper-2); }
.listen-error, .lp-error { margin: 8px 0 0; font: 600 15px/1.4 var(--body); color: #ff9b8a; }
.lp-error[hidden] { display: none; }
.listen-foot { margin-top: 18px; display: flex; justify-content: flex-end; }
.listen-close { min-height: 48px; padding: 10px 22px; font: 600 17px var(--body); color: var(--paper); background: transparent; border: 2px solid #4a5260; border-radius: 8px; cursor: pointer; }
/* The Reference desk's list (js/ui/library.js): each row is a real link, styled as one (an
   accent-colored title with a small "opens in a new tab" arrow, underlined only on hover or
   focus), never a whole underlined block; its description stays plain text. */
#referenceList .listen-item { text-decoration: none; }
#referenceList .listen-name { color: #e0b25e; text-decoration: none; text-decoration-color: #e0b25e; text-underline-offset: 3px; }
#referenceList .listen-item:hover .listen-name, #referenceList .listen-item:focus-visible .listen-name { text-decoration: underline; }
#referenceList .listen-meta { text-decoration: none; }
#referenceList .ref-arrow { display: inline-block; width: 13px; height: 13px; margin-left: 6px; vertical-align: -1px; color: #e0b25e; }
/* The headphones' mini player (ui/libraryaudio.js). Walking, in class and in Watch: top left, under the
   notes, clear of the thumb stick, the pill, the caption and Watch's bar. Over a page: folded to a
   compact bar at the lower right, clear of the stage bar and the lesson sidebar's Back to class. In the
   profile: inside its Headphones section. Out of sight while the map is open (it plays on). */
.listen-player { position: fixed; left: calc(16px + env(safe-area-inset-left)); top: calc(84px + env(safe-area-inset-top)); z-index: 26;
  width: min(360px, calc(100vw - 32px)); background: rgba(10,11,13,.95); color: var(--paper); border-radius: 12px; border-left: 4px solid #c9a15a;
  padding: 8px 10px 8px 12px; box-shadow: 0 10px 34px rgba(0,0,0,.45); pointer-events: auto; }
body.notes-on .listen-player { top: calc(var(--notes-bottom, 76px) + 8px); }
.listen-player[hidden] { display: none; }
.lp-top { display: flex; align-items: center; gap: 8px; }
.lp-icon { flex: none; width: 20px; height: 20px; color: #d8b877; }
.lp-name { flex: 1; min-width: 0; margin: 0; font: 600 15px/1.3 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-top button { flex: none; min-height: 36px; padding: 4px 10px; font: 600 14px var(--body); color: var(--paper); background: transparent; border: 1px solid #4a5260; border-radius: 6px; cursor: pointer; touch-action: manipulation; }
.lp-why { margin: 6px 0 0; font: 600 14px/1.35 var(--body); color: #e3c27f; }
.lp-why[hidden] { display: none; }
.lp-controls { display: flex; gap: 6px; margin-top: 8px; }
.lp-controls button { flex: 1; min-height: 40px; font: 600 15px var(--body); color: var(--paper); background: var(--ink-2); border: 1px solid #3a414d; border-radius: 8px; cursor: pointer; touch-action: manipulation; }
.lp-controls .lp-play { flex: 1.5; color: var(--ink); background: #c9a15a; border-color: #c9a15a; }
.listen-player.is-waiting .lp-play { background: #e3c27f; border-color: #e3c27f; }
.lp-seek { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; font: 500 12px var(--mono); color: var(--paper-2); }
.lp-range { flex: 1; min-width: 0; accent-color: #c9a15a; min-height: 24px; }
.listen-player button:focus-visible, .lp-range:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
#stageBar .lp-reader { flex: none; background: var(--ink-2); border-color: #c9a15a; }
#stageBar .lp-reader[hidden] { display: none; }
body.touch .lp-controls button { min-height: 44px; }
/* over a page: folded, lower right (lifted over the finished-lesson card when it shows) */
body.staged .listen-player { top: auto; left: auto; right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); width: min(330px, calc(100vw - 32px)); }
body.staged .listen-player .lp-seek, body.staged .listen-player .lp-list { display: none; }
body.staged:has(.lb-done:not([hidden])) .listen-player { bottom: calc(24px + var(--lb-done-h, 190px)); }
body:has(#mapDialog:not([hidden])) .listen-player { display: none; }
/* in the profile: part of its Headphones section, over the list */
.listen-player.in-profile, body.notes-on .listen-player.in-profile, body.staged .listen-player.in-profile { position: static; width: auto; max-width: 520px; margin: 0 0 14px; box-shadow: none; background: var(--ink-2); border: 1px solid #2f3540; border-left: 4px solid #c9a15a; }
.hp-now:empty { display: none; }
@media (max-width: 760px) {
  .listen-player { left: calc(16px + env(safe-area-inset-left)); right: calc(16px + env(safe-area-inset-right)); width: auto; top: calc(74px + env(safe-area-inset-top)); }
  body.notes-on .listen-player { top: calc(var(--notes-bottom, 76px) + 8px); }
  body.staged .listen-player, body.staged.notes-on .listen-player { top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); left: auto; right: calc(12px + env(safe-area-inset-right)); width: min(330px, calc(100vw - 24px)); }
  body.listen-list-open .listen-player { display: none; }
  /* the room banners and the class's notes go below it */
  body.listening #toasts, body.listening .class-toast { top: calc(var(--listen-bottom, 200px) + 10px); }
}
/* Headphones in the profile: the classrooms folded, the one playing (or the room the student is in) open. */
.pf-headphones .hp-lead { margin: -4px 0 12px; }
.hp-groups { columns: 3 280px; column-gap: 10px; }
.hp-group { break-inside: avoid; margin: 0 0 10px; background: var(--ink-2); border: 1px solid #2f3540; border-radius: 10px; }
.hp-group[open] { border-color: #6b5a36; }
.hp-summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 14px; cursor: pointer; list-style: none; font: 600 16px/1.3 var(--body); color: var(--paper); touch-action: manipulation; }
.hp-summary::-webkit-details-marker { display: none; }
.hp-summary::before { content: ''; flex: none; width: 8px; height: 8px; border-right: 2px solid #c9a15a; border-bottom: 2px solid #c9a15a; transform: rotate(-45deg); transition: transform .15s; }
.hp-group[open] > .hp-summary::before { transform: rotate(45deg); }
.hp-summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 10px; }
.hp-room { flex: 1; min-width: 0; }
.hp-count { flex: none; min-width: 26px; padding: 2px 8px; border-radius: 999px; background: #221c12; color: #e3c27f; font: 600 13px/1.4 var(--mono); text-align: center; }
.hp-items { display: grid; gap: 6px; padding: 0 10px 10px; }
.hp-item { min-height: 48px; }
/* The finished-lesson card (ui/lessonbar.js done()): over the page's lower right, beside the sidebar. */
.lb-done { position: fixed; right: 24px; bottom: 24px; z-index: 22; max-width: min(460px, calc(100vw - 48px)); padding: 18px 20px;
  background: var(--ink); color: var(--paper); border: 1px solid #3a414d; border-left: 5px solid var(--ok); border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,.45); display: grid; gap: 12px; }
.lb-done[hidden] { display: none; }
.lb-done-title { margin: 0; font: 700 22px/1.25 var(--head); color: var(--paper); }
.lb-done-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.lb-done button { min-height: 50px; padding: 10px 18px; border-radius: 8px; font: 600 17px/1.2 var(--body); cursor: pointer; touch-action: manipulation; }
.lb-done-next { color: var(--ink); background: var(--ok); border: 2px solid var(--ok); }
.lb-done-back { color: var(--paper); background: transparent; border: 2px solid #5b6470; }
.lb-done button[hidden] { display: none; }
.lb-done button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.lb-done.is-drawer { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: none; }
.lb-done.is-drawer button { flex: 1 1 auto; }

/* ---------- [work] working on AERO 1: the work bar, the tool belt, the tray, the meter (js/work/) ---------- */
/* While working, the corner keeps only help and sound; the bar names the site; Ray's bar sits over the belt. */
body.working #corner > :not(#helpBtn):not(#muteBtn) { display: none; }
body.working #hint { display: none; }
/* Ray's captions while working: in the bottom left corner, clear of the work in the middle of the view, the belt and the meter */
body.working #rayBar { left: calc(16px + env(safe-area-inset-left)); right: auto; bottom: calc(16px + env(safe-area-inset-bottom)); top: auto;
  max-width: min(310px, calc(50vw - 330px)); transform: translate(0, 8px); }
body.working #rayBar.in { transform: none; }
body.working #rayBar .ray-line { font-size: 17px; line-height: 1.42; }
body.working #rayBar .ray-ask { display: none; }   /* the belt's Hint key asks him while working */
@media (max-width: 1100px) { body.working #rayBar { top: calc(var(--notes-bottom, 16px) + 10px); bottom: auto; max-width: min(460px, calc(100vw - 32px)); } }
body.working canvas#world { cursor: crosshair; }
.wk { position: absolute; inset: 0; pointer-events: none; }
.wk[hidden] { display: none; }
.wk button { font-family: var(--body); cursor: pointer; }
.wk button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.wk kbd { font: 500 13px var(--mono); background: var(--paper); color: var(--ink); padding: 1px 6px; border-radius: 4px; }
.wk-bar { position: absolute; top: calc(16px + env(safe-area-inset-top)); right: calc(212px + env(safe-area-inset-right)); display: flex; align-items: center; gap: 10px;
  max-width: min(640px, calc(100vw - 732px)); padding: 7px 8px 7px 14px; border-radius: 12px; background: rgba(10,11,13,.92); color: var(--paper);
  border-left: 4px solid #e0b44c; box-shadow: 0 6px 24px rgba(0,0,0,.28); pointer-events: auto; }
.wk-where { margin: 0; display: flex; flex-direction: column; flex: none; margin-right: 6px; }
.wk-over { font: 600 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #e0b44c; }
.wk-site { font: 700 19px/1.25 var(--head); white-space: nowrap; }
.wk-others { display: flex; gap: 8px; }
.wk-others:empty { display: none; }
.wk-bar button { min-height: 42px; padding: 0 12px; font: 600 15px var(--body); color: var(--paper); background: var(--ink-2); border: 2px solid #3a414c; border-radius: 8px; white-space: nowrap; }
.wk-bar button:hover { background: #1b2029; border-color: #5a6472; }
.wk-bar .wk-leave { display: flex; align-items: center; gap: 8px; color: var(--ink); background: var(--paper); border-color: var(--paper); }
.wk-bar .wk-leave:hover { background: #fff; }
.wk-sitelist { position: absolute; z-index: 2; top: calc(78px + env(safe-area-inset-top)); right: calc(212px + env(safe-area-inset-right)); width: min(380px, calc(100vw - 32px));
  max-height: calc(100vh - 180px); overflow: auto; padding: 10px; border-radius: 12px; background: rgba(10,11,13,.95); color: var(--paper);
  box-shadow: 0 12px 36px rgba(0,0,0,.4); pointer-events: auto; }
.wk-sitelist[hidden] { display: none; }
.wk-sitelist-h { margin: 2px 6px 8px; font: 600 13px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--paper-2); }
.wk-site-row { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 40px; padding: 6px 12px; margin-bottom: 2px;
  font: 600 17px var(--body); color: var(--paper); background: transparent; border: 1px solid transparent; border-radius: 8px; text-align: left; }
.wk-site-row:hover:not([disabled]) { background: #161a21; border-color: #3a414c; }
.wk-site-row[disabled] { opacity: .65; cursor: default; }
.wk-site-d { font: 500 14px var(--mono); color: var(--paper-2); }
.wk-site-n { display: flex; flex-direction: column; }
.wk-site-tray { font: 500 12.5px var(--mono); color: #e0b44c; }
/* the belt */
.wk-belt { position: absolute; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 6px; padding: 6px;
  border-radius: 14px; background: rgba(10,11,13,.9); box-shadow: 0 8px 28px rgba(0,0,0,.32); pointer-events: auto; }
.wk-tool, .wk-hint { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 82px; height: 66px;
  padding: 6px 4px 4px; color: var(--paper); background: var(--ink-2); border: 2px solid #2c323c; border-radius: 10px; }
.wk-tool:hover, .wk-hint:hover { background: #1a1f27; border-color: #4a5260; }
.wk-tool.on { background: #2a2414; border-color: #e0b44c; box-shadow: inset 0 0 0 1px #e0b44c; }
.wk-tool kbd, .wk-hint kbd { position: absolute; top: 4px; left: 5px; font-size: 11px; padding: 0 4px; }
.wk-ic { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wk-tool-n { font: 600 13px/1.1 var(--body); text-align: center; }
.wk-hint { width: 64px; color: #e0b44c; border-style: dashed; }
.wk-hint span { font: 600 13px var(--body); margin-top: 14px; }
.wk-hint[hidden] { display: none; }
/* over the belt: the tray, the tool's setting */
.wk-dock { position: absolute; left: 50%; bottom: calc(94px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: min(860px, calc(100vw - 32px)); pointer-events: none; }
.wk-above { display: flex; align-items: flex-end; gap: 10px; width: 100%; justify-content: center; pointer-events: none; }
.wk-tray, .wk-toolpanel { pointer-events: auto; padding: 8px 12px; border-radius: 10px; background: rgba(10,11,13,.9); color: var(--paper); box-shadow: 0 6px 20px rgba(0,0,0,.28); }
.wk-tray { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; max-width: 460px; border-left: 4px solid #8d949c; }
.wk-tray[hidden], .wk-toolpanel[hidden] { display: none; }
.wk-tray-h, .wk-tp-h { font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--paper-2); }
.wk-chip { font: 500 14px var(--body); white-space: nowrap; }
.wk-cover { color: var(--paper); background: #1a1f27; border: 2px solid #4a5260; border-radius: 8px; padding: 4px 10px; }
.wk-cover:hover { border-color: #e0b44c; background: #2a2414; }
@media (max-width: 1180px) { .wk-bar { right: auto; left: 50%; transform: translateX(-50%); top: calc(76px + env(safe-area-inset-top)); max-width: calc(100vw - 32px); } .wk-sitelist { right: auto; left: 50%; transform: translateX(-50%); top: calc(138px + env(safe-area-inset-top)); } }
.wk-chip b { color: #e0b44c; font-weight: 700; }
.wk-pn { font: 500 12px var(--mono); color: var(--paper-2); margin-left: 4px; }
.wk-toolpanel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-left: 4px solid #e0b44c; }
.wk-step { width: 38px; height: 38px; font: 700 20px var(--body); color: var(--paper); background: var(--ink-2); border: 2px solid #3a414c; border-radius: 8px; }
.wk-torque { min-width: 92px; text-align: center; font: 600 19px var(--mono); }
.wk-tp-k { font: 500 12px var(--mono); color: var(--paper-2); }
.wk-held { font: 600 15px var(--body); }
.wk-binpanel { position: absolute; left: calc(16px + env(safe-area-inset-left)); top: calc(var(--notes-bottom, 16px) + 12px); bottom: calc(100px + env(safe-area-inset-bottom)); width: min(390px, calc(100vw - 32px)); overflow: auto;
  display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(10,11,13,.94); color: var(--paper); border-left: 4px solid #e0b44c;
  box-shadow: 0 8px 26px rgba(0,0,0,.32); pointer-events: auto; }
.wk-binpanel[hidden] { display: none; }
.wk-binpanel .wk-tp-h { margin: 0; }
.wk-bin { display: flex; flex-direction: column; gap: 6px; overflow: auto; min-height: 0; }
.wk-bin-held { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; background: #2a2414; border: 2px solid #e0b44c; }
.wk-bin-back { align-self: flex-start; min-height: 38px; padding: 0 12px; font: 600 14px var(--body); color: var(--paper); background: var(--ink-2); border: 2px solid #3a414c; border-radius: 8px; }
.wk-bin-it { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 48px; padding: 6px 10px; text-align: left; color: var(--paper);
  background: var(--ink-2); border: 2px solid #2c323c; border-radius: 8px; }
.wk-bin-it:hover { border-color: #4a5260; }
.wk-bin-it.held { border-color: #e0b44c; background: #2a2414; }
.wk-bin-n { font: 600 14px/1.25 var(--body); }
.wk-bin-it .wk-pn { margin-left: 0; }
.wk-toast { margin: 0; padding: 8px 16px; max-width: min(620px, calc(100vw - 32px)); border-radius: 10px; background: rgba(10,11,13,.92); color: var(--paper);
  font: 600 16px/1.35 var(--body); text-align: center; opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
.wk-toast:empty { display: none; }
.wk-toast.in { opacity: 1; transform: none; }

.wk-menu-it.done { opacity: .7; }
.wk-menu-it.done kbd { background: #2f7d4f; color: #fff; }
.pw-alloff { min-height: 40px; padding: 0 12px; margin-left: auto; margin-right: 8px; font: 700 14px var(--body); color: #1b1d20; background: #e0b44c; border: 0; border-radius: 8px; }
/* the maintenance manual's page */
.mn-head { display: flex; flex-direction: column; gap: 6px; }
.mn-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.mn-tab { min-height: 36px; padding: 0 10px; font: 600 13px var(--body); color: var(--paper); background: var(--ink-2); border: 2px solid #2c323c; border-radius: 8px; }
.mn-tab.on { border-color: #e0b44c; background: #2a2414; }
.mn-body { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.mn-title { margin: 0; font: 700 18px/1.2 var(--body); }
.mn-chapter { margin: 0; font: 500 12px var(--mono); color: var(--paper-2); }
.mn-sum { margin: 0; font: 400 13px/1.35 var(--body); color: var(--paper-2); }
.mn-figwrap { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; border-radius: 8px; background: #f3efe3; color: #1b1d20; }
.mn-fig { width: 100%; height: 138px; display: block; }
.mn-fig .mn-sh { fill: #fffdf6; stroke: #1b1d20; stroke-width: 1.4; }
.mn-fig .mn-lens { fill: #cfeed8; }
.mn-fig .mn-fi, .mn-fig .mn-wire { fill: none; stroke: #1b1d20; stroke-width: 1.4; }
.mn-fig .mn-ax { fill: none; stroke: #7b8088; stroke-width: 1; stroke-dasharray: 5 4; }
.mn-fig .mn-co line { stroke: #1b1d20; stroke-width: 1; }
.mn-fig .mn-co circle { fill: #fff; stroke: #1b1d20; stroke-width: 1.2; }
.mn-fig .mn-co text { font: 700 10px var(--body); fill: #1b1d20; }
.mn-key { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 1px 12px; font: 500 11px/1.3 var(--body); }
.mn-key b { display: inline-block; min-width: 14px; }
.mn-h { margin: 4px 0 0; font: 700 14px var(--body); }
.mn-parts { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.mn-part { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--ink-2); border: 2px solid #2c323c; }
.mn-part.held { border-color: #e0b44c; background: #2a2414; }
.mn-part-i { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mn-part-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.mn-part-n { font: 700 11px var(--mono); color: #1b1d20; background: #e0b44c; border-radius: 9px; min-width: 18px; text-align: center; }
.mn-part-name { font: 600 14px/1.25 var(--body); }
.mn-part-w { font: 400 12px/1.3 var(--body); color: var(--paper-2); }
.mn-get { flex: none; min-height: 40px; min-width: 64px; padding: 0 12px; font: 700 14px var(--body); color: #1b1d20; background: #e0b44c; border: 0; border-radius: 8px; }
.mn-part.held .mn-get { background: transparent; color: var(--paper); border: 2px solid #e0b44c; }
.mn-inhand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; border-radius: 8px; background: #2a2414; border: 2px solid #e0b44c; }
.mn-hint { margin: 0; font: 600 13px var(--body); color: #e0b44c; }
.mn-steps { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font: 400 13px/1.4 var(--body); }
.mn-steps b { font-weight: 700; }
/* the manual's column stops above Ray's caption while he speaks */
@media (min-width: 1101px) { body.working:has(#rayBar:not([hidden])) .wk-binpanel { bottom: calc(270px + env(safe-area-inset-bottom)); } }
/* at the cursor */
.wk-ring { position: absolute; left: 0; top: 0; border-radius: 50%; border: 2px solid rgba(238,241,244,.85); box-shadow: 0 0 0 1px rgba(10,11,13,.6), inset 0 0 0 1px rgba(10,11,13,.4); pointer-events: none; }
.wk-ring.can { border-color: var(--focus); }
.wk-ring[hidden], .wk-tag[hidden] { display: none; }
.wk-tag { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; max-width: 300px; padding: 6px 10px; border-radius: 8px;
  background: rgba(10,11,13,.9); color: var(--paper); pointer-events: none; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.wk-tag-n { font: 600 15px/1.3 var(--body); }
.wk-tag .wk-pn { margin-left: 0; }

/* the meter */
.dmm { position: absolute; right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); width: 250px; padding: 0 0 8px;
  pointer-events: auto; color: var(--paper); filter: drop-shadow(0 10px 24px rgba(0,0,0,.4)); }
.dmm[hidden] { display: none; }
.dmm-face { display: block; width: 250px; height: auto; user-select: none; touch-action: none; }
.dmm-brand { font: 600 8px var(--mono); letter-spacing: .14em; fill: #8b9199; }
.dmm .seg { fill: rgba(30,36,28,.07); }
.dmm .seg.on { fill: #1b2219; }
.dmm-ann { font: 700 11px var(--mono); fill: #1b2219; }
.dmm-unit { font: 700 20px var(--body); fill: #1b2219; }
.dmm-bolt { fill: #1b2219; }
.dmm-pos { cursor: pointer; outline: none; }
.dmm-hit { fill: transparent; }
.dmm-pos:hover .dmm-hit, .dmm-pos:focus-visible .dmm-hit { fill: rgba(242,194,48,.18); }
.dmm-pos-t { font: 700 13px var(--body); fill: #e9ecef; }
.dmm-pos-t.off { font-size: 11px; fill: #c9cdd2; }
.dmm-pos.sel .dmm-pos-t { fill: var(--focus); }
.dmm-knob { cursor: grab; outline: none; }
.dmm-knob:focus-visible circle:first-child { stroke: var(--focus); stroke-width: 3; }
.dmm-jack { cursor: pointer; outline: none; }
.dmm-jack-t { font: 700 12px var(--body); fill: #e9ecef; }
.dmm-fused { font: 600 7.5px var(--mono); fill: #9aa0a7; letter-spacing: -.02em; }
.dmm-jack.want circle:nth-of-type(1) { stroke: var(--focus); }
.dmm-jack:focus-visible circle:nth-of-type(1) { stroke: var(--focus); }
.dmm-plug .dmm-plug-body { fill: #555; }
.dmm-plug.red .dmm-plug-body { fill: #c8261d; }
.dmm-plug.black .dmm-plug-body { fill: #121315; stroke: #4a4f56; stroke-width: 1.5; }
.dmm-leads, .dmm-probes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.dmm-lead, .dmm-probe { min-height: 40px; padding: 5px 8px; font: 600 12.5px/1.25 var(--body); text-align: left; color: var(--paper); background: rgba(10,11,13,.92);
  border: 2px solid #2c323c; border-left-width: 6px; border-radius: 8px; }
.dmm-lead.red, .dmm-probe.red { border-left-color: #c8261d; }
.dmm-lead.black, .dmm-probe.black { border-left-color: #5a5f66; }
.dmm-lead.held, .dmm-probe.next { border-color: var(--focus); }
.dmm-lead.red.held, .dmm-probe.red.next { border-left-color: #c8261d; }
.dmm-lead.black.held, .dmm-probe.black.next { border-left-color: #5a5f66; }
.dmm-probe { display: flex; flex-direction: column; }
.dmm-probe-k { font: 600 11px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--paper-2); }
.dmm-probe-at { font: 600 12.5px/1.25 var(--body); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dmm-warn { margin: 6px 0 0; min-height: 0; font: 600 13px/1.35 var(--body); color: #ffd36b; text-shadow: 0 1px 2px #000; }
.dmm-warn:empty { display: none; }
.dmm-foot { display: flex; justify-content: flex-end; margin-top: 6px; }
.dmm-logbtn { min-height: 36px; padding: 0 12px; font: 600 14px var(--body); color: var(--ink); background: var(--paper); border: 0; border-radius: 8px; }
.dmm-log { position: absolute; right: calc(282px + env(safe-area-inset-right)); top: calc(84px + env(safe-area-inset-top)); width: min(560px, calc(100vw - 316px));
  max-height: min(calc(100vh - 300px), 480px); display: flex; flex-direction: column; padding: 12px 14px; border-radius: 12px; background: rgba(10,11,13,.95); color: var(--paper);
  box-shadow: 0 12px 36px rgba(0,0,0,.4); pointer-events: auto; }
.dmm-log[hidden] { display: none; }
.dmm-log-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dmm-log-head h2 { margin: 0; font: 700 20px var(--head); }
.dmm-log-close { min-height: 36px; padding: 0 12px; font: 600 14px var(--body); color: var(--paper); background: var(--ink-2); border: 2px solid #3a414c; border-radius: 8px; }
.dmm-log-empty { margin: 0; font: 400 15px/1.5 var(--body); color: var(--paper-2); }
.dmm-log-wrap { overflow: auto; }
.dmm-log-t { width: 100%; border-collapse: collapse; font: 500 13.5px/1.35 var(--body); }
.dmm-log-t th { text-align: left; font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--paper-2); padding: 4px 6px; border-bottom: 1px solid #2c323c; position: sticky; top: 0; background: rgba(10,11,13,.98); }
.dmm-log-t td { padding: 6px; border-bottom: 1px solid #1d222a; vertical-align: top; }
.dmm-log-v { font: 600 14px var(--mono); white-space: nowrap; }
@media (max-width: 900px) {
  .dmm { transform: scale(.82); transform-origin: right bottom; }
  .wk-tool { width: 66px; } .wk-tool-n { font-size: 12px; }
}

/* [troubleshooting] a troubleshooting job's typed logbook entry, and its scorecard at the sign-off */
.wo-typed textarea { min-height: 150px; padding: 10px 12px; font: 400 17px/1.5 var(--body); color: var(--paper); background: var(--ink-2); border: 1px solid #3a414d; border-radius: 8px; resize: vertical; text-transform: none; letter-spacing: 0; }
.wo-typed textarea:focus-visible, .wo-typed-ref input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.wo-typed, .wo-typed-ref { margin-top: 12px; }
.wo-card { margin: 14px 0 0; padding: 12px 16px; border-radius: 10px; background: #15181e; border-left: 4px solid #e0b44c; }
.wo-card-h { margin: 0 0 8px; font: 700 19px/1.3 var(--head); color: var(--paper); }
.wo-card-lines { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 14px; }
.wo-card-lines div { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px solid #2b313b; }
.wo-card-lines dt { font: 600 14px/1.4 var(--mono); letter-spacing: .04em; color: var(--paper-2); }
.wo-card-lines dd { margin: 0; font: 600 15px/1.4 var(--body); color: var(--paper); }
.wo-card-notes { margin: 10px 0 0; padding-left: 20px; font: 500 15px/1.5 var(--body); color: #e6dcc5; }
.wo-card-bill { width: 100%; margin-top: 10px; border-collapse: collapse; font: 500 14px/1.4 var(--body); color: var(--paper); }
.wo-card-bill td { padding: 4px 6px; border-top: 1px solid #2b313b; }
.wo-card-bill td:first-child { font: 500 13px var(--mono); color: var(--paper-2); white-space: nowrap; }
.wo-card-bill td:last-child { text-align: right; white-space: nowrap; }
.wo-card-bill tr.waste td { color: #ffb3a3; }
.wo-card-bill tr.sum td { font-weight: 700; }
@media (max-width: 700px) { .wo-card-lines { grid-template-columns: 1fr 1fr; } }
/* [troubleshooting] the tool belt is wider with the clamp meter and the prints key: where it would reach
   Ray's caption in the bottom left corner, his caption sits above the belt, and the parts bin stops above him */
@media (min-width: 1101px) and (max-width: 1420px) {
  body.working #rayBar { bottom: calc(100px + env(safe-area-inset-bottom)); }
  body.working:has(#rayBar:not([hidden])) .wk-binpanel { bottom: calc(340px + env(safe-area-inset-bottom)); }
}

.wo-assist { margin-top: 12px; }
.wo-assist-lead { margin: 0 0 6px; color: var(--muted, #aab3c0); font-size: 15px; }
.wo-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wo-chip { padding: 8px 12px; font: 600 15px/1.2 var(--body); color: var(--paper); background: var(--ink-2); border: 1px solid #5a6a86; border-radius: 999px; cursor: pointer; text-align: left; }
.wo-chip:hover { border-color: #a98bff; }
.wo-chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.wo-chip-all { background: #3b2f6b; border-color: #a98bff; }

.wo-entryguide { margin-top: 12px; }
.wo-entryneeds { margin: 0 0 10px; padding-left: 22px; font-size: 15px; line-height: 1.5; }
.wo-entryguide .wo-entry { font-size: 14px; white-space: pre-wrap; }