/* ControlLab adaptation of TypeUI's Kinetic direction; see KINETIC.md. */
/* The hidden attribute must win over component display rules (flex, grid, inline-flex). */
[hidden] { display: none !important; }
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('./fonts/JetBrainsMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700;
  font-display: swap; src: url('./fonts/JetBrainsMono-Bold.woff2') format('woff2');
}
:root {
  --navy: #101c35; --navy-raised: #1b2c49; --navy-line: #3c4d69;
  --yellow: #f5e642; --yellow-hover: #fff06a;
  --page: #f1f2f4; --surface: #fff; --soft: #e8ecf1;
  --ink: #13213a; --muted: #566278; --line: #cbd2dc;
  --on-dark: #f5f7fb; --muted-dark: #b6c3d8;
  --focus: #2c5bb0; --danger: #a02d32;
  --radius: 4px; --mono: 'JetBrains Mono',Consolas,monospace;
  --body: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-family: var(--body); color: var(--ink); background: var(--page);
  font-synthesis: none;
}
* { box-sizing: border-box; }
/* The page's texture (chosen by the user 2026-10-13 from six candidates): a
   printed-circuit layout in the page's own ink, tiled at 480 px, at 60 % of
   the strength it was judged at. Traces with 45-degree bends, pads with
   annular rings, vias, a DIP and an SOIC footprint, so it reads as a circuit
   from a distance and vanishes under reading. The cards, the workshop and the
   drawings sit on it unchanged; print keeps its white below. */
body { margin: 0; background: var(--page) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='480' viewBox='0 0 480 480' fill='none' stroke='%2313213a' stroke-opacity='0.054' stroke-width='1.4'><path d='M0 90h110l30 30h100'/><path d='M240 120v80l-30 30H120v60'/><path d='M400 40v120l-30 30h-60'/><path d='M310 190v150l30 30h140'/><path d='M60 300h60l30-30'/><path d='M60 300v120l30 30h90'/><path d='M180 450h120l30-30v-50'/><path d='M400 160h80'/><path d='M0 380h40'/><g stroke-opacity='0.072'><circle cx='110' cy='90' r='5.5'/><circle cx='240' cy='120' r='5.5'/><circle cx='400' cy='40' r='5.5'/><circle cx='120' cy='280' r='5.5'/><circle cx='120' cy='360' r='5.5'/><circle cx='60' cy='300' r='5.5'/><circle cx='180' cy='450' r='5.5'/><circle cx='330' cy='370' r='5.5'/><circle cx='310' cy='190' r='3.2'/><circle cx='400' cy='160' r='3.2'/><circle cx='60' cy='420' r='3.2'/><circle cx='40' cy='380' r='3.2'/></g><g stroke-opacity='0.051'><rect x='290' y='60' width='70' height='100' rx='2'/><path d='M290 70h-8M290 86h-8M290 102h-8M290 118h-8M290 134h-8M290 150h-8M360 70h8M360 86h8M360 102h8M360 118h8M360 134h8M360 150h8'/><circle cx='300' cy='70' r='2'/><rect x='150' y='360' width='60' height='40' rx='2'/><path d='M158 360v-8M172 360v-8M186 360v-8M200 360v-8M158 400v8M172 400v8M186 400v8M200 400v8'/></g></svg>") repeat 0 0 / 480px 480px; }
button,input,select,textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
button,a,input,select,textarea { touch-action: manipulation; }
button { cursor: pointer; border: 0; }
button:disabled { cursor: not-allowed; color: #626d80; background: var(--soft); }
button:focus-visible,a:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 3px;
}
.topbar :focus-visible,.scene-panel :focus-visible,.continue-card :focus-visible {
  outline-color: var(--yellow);
}
h1,h2,h3,p { margin-top: 0; }
h1,h2,h3 { font-family: var(--mono); }
h1 { font-size: clamp(1.8rem,3.2vw,3rem); line-height: 1.2; letter-spacing: -.06em; font-weight: 700; }
h2 { font-size: 1.35rem; line-height: 1.4; letter-spacing: -.045em; }
h3 { font-size: 1rem; line-height: 1.5; letter-spacing: -.03em; }
p { line-height: 1.7; }
hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
/* Shown from the moment the document parses until the app's first render.
   Nothing here depends on JavaScript, because the wait it covers is mostly the
   JavaScript arriving and a saved record being replayed. */
.booting { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; background: var(--navy); color: var(--on-dark); text-align: center; }
.booting-mark { opacity: .9; }
.booting-title { margin: 0; font: 700 21px/1 var(--mono); letter-spacing: -1px; }
.booting-note { margin: 0; font: 11px var(--mono); color: var(--muted-dark); text-transform: uppercase; letter-spacing: .8px; }
.booting-bar { width: min(260px,60vw); height: 3px; background: var(--navy-raised); border-radius: var(--radius); overflow: hidden; }
.booting-bar span { display: block; width: 40%; height: 100%; background: var(--yellow); animation: booting-slide 1.1s ease-in-out infinite; }
.booting-slow { margin: 0; max-width: 34em; font: 12px/1.5 var(--mono); color: var(--muted-dark); opacity: 0; animation: booting-reveal 0s linear 4s forwards; }
/* A spinner that never stops reads as progress when there is none, so after a
   while the page says so and offers the one useful action. */
.booting-stuck { margin: 0; max-width: 34em; font: 12px/1.5 var(--mono); color: var(--yellow); opacity: 0; animation: booting-reveal 0s linear 25s forwards; }
@keyframes booting-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
@keyframes booting-reveal { to { opacity: 1; } }
/* A moving bar is decoration; the words are the message. */
@media (prefers-reduced-motion: reduce) {
  .booting-bar span { width: 100%; animation: none; }
  .booting-slow { animation-duration: 0s; }
}
/* A check that has started but is not finished says so under its own line. */
.lesson-checklist .check-note { display: block; margin-top: 4px; color: var(--muted-dark); font-size: 12px; }
/* The unread mark on the ask button. It is a count, not a dot, because a
   learner who asked twice should see that both came back. */
.ask-fab { position: relative; }
.ask-unread { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--yellow); color: var(--navy); font: 700 11px/20px var(--mono); text-align: center; display: none; }
.ask-fab[data-unread] .ask-unread { display: block; }
.ask-fab[data-unread] { box-shadow: 0 0 0 3px rgba(245,230,66,.35); }
/* The verdict, said once and plainly, because a result that has to be inferred
   from a table is not a result. */
.paper-verdict { margin: 4px 0 6px; font: 700 28px/1.1 var(--mono); letter-spacing: -0.5px; }
.paper-verdict[data-verdict="passed"] { color: #176b3a; }
.paper-verdict[data-verdict="not-passed"] { color: #a0342c; }
.paper-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 9px; background: var(--navy-raised); color: var(--on-dark); font: 700 9px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.paper-masthead { display: none; }

/* Printing a result.

   A printed page is not a screenshot of a screen. It has a masthead saying what
   the document is, a verdict, the figures, the table, and a footer saying what
   the record means and when it was printed - set in one serif face at a size
   made for paper, with the application's furniture gone entirely rather than
   merely recoloured. */
@page { margin: 18mm 16mm; }
@media print {
  html, body { background: #fff !important; color: #000; }
  /* The page box supplies the margin; the application's own padding would be
     added to it and was what pushed a five-fault result onto a second sheet. */
  body { font: 10.5pt/1.5 Georgia, 'Times New Roman', serif; margin: 0; padding: 0; }
  /* Everything that only means something on a screen. */
  /* One sheet. The other papers are a screen affordance for comparing retakes;
     a printed record is of one paper, and its own masthead says which. */
  .topbar, .ask-fab, .ask-chat, .sync-status, .skip, .back-link, .lesson-footer,
  .paper-actions-print, .tutor-review, .checks-card, .paper-history,
  nav, footer, button { display: none !important; }
  /* The page box is the margin. The application's own page padding - 24px at
     the sides and 104px at the foot to clear the ask button - is what pushed
     a five-fault result onto a second sheet, and it out-specifies a bare
     element selector. */
  main, .lesson-page, .workspace { display: block; max-width: none; margin: 0 !important; padding: 0 !important; }
  .surface { border: 0; box-shadow: none; padding: 0; margin: 0 0 14pt; background: none; }

  .paper-masthead { display: block; border-bottom: 1.5pt solid #000; padding-bottom: 6pt; margin-bottom: 9pt; }
  .paper-masthead-title { margin: 0 0 6pt; font: 700 15pt/1.2 Georgia, serif; letter-spacing: -0.2pt; }
  .paper-masthead-facts { display: flex; flex-wrap: wrap; gap: 4pt 24pt; margin: 0; }
  .paper-masthead-facts div { min-width: 120pt; }
  .paper-masthead-facts dt { font: 700 7.5pt/1.4 Arial, sans-serif; text-transform: uppercase; letter-spacing: .08em; color: #444; }
  .paper-masthead-facts dd { margin: 0; font-size: 10.5pt; }

  .eyebrow { font: 700 7.5pt/1.4 Arial, sans-serif; letter-spacing: .08em; color: #444; margin: 0 0 2pt; }
  .paper-verdict { margin: 0 0 4pt; font: 700 18pt/1.1 Georgia, serif; color: #000 !important; letter-spacing: 0; }
  .paper-verdict[data-verdict="not-passed"]::before { content: '\2717\00a0'; }
  .paper-verdict[data-verdict="passed"]::before { content: '\2713\00a0'; }
  h1 { font: 700 13pt/1.3 Georgia, serif; color: #000; margin: 0 0 6pt; }
  h2 { font: 400 12pt/1.35 Georgia, serif; color: #000; margin: 0 0 6pt; }
  p { margin: 0 0 5pt; }
  .muted { color: #333; font-size: 9pt; }

  .paper-result { display: table; width: 100%; border-collapse: collapse; margin: 8pt 0 10pt;
    font: 9.5pt/1.4 Arial, sans-serif; page-break-inside: avoid; }
  .paper-result th { border-top: 1pt solid #000; border-bottom: 1pt solid #000; padding: 4pt 6pt;
    font: 700 7.5pt/1.4 Arial, sans-serif; text-transform: uppercase; letter-spacing: .06em; color: #000; }
  .paper-result td { border-bottom: 0.5pt solid #bbb; padding: 4pt 6pt; color: #000; }
  .paper-result tr { page-break-inside: avoid; }
  .paper-lesson-link { display: none; }
  .paper-tag { background: none; color: #000; border: 0.5pt solid #000; font-family: Arial, sans-serif; }

  /* A single sheet, said in the stylesheet rather than hoped for. */
  main, .lesson-page { page-break-after: avoid; }
  .surface { page-break-inside: avoid; }
  /* The masthead already gives the date and says which paper this is. */
  .paper-sat { display: none; }
  a[href]::after { content: ''; }
}
.skip { position: fixed; left: 16px; top: -80px; z-index: 10; background: var(--yellow); padding: 12px; }
.skip:focus { top: 12px; }
.topbar { min-height: 80px; display: flex; align-items: center; gap: 32px; padding: 0 4vw; background: var(--navy); color: var(--on-dark); border-bottom: 3px solid var(--yellow); }
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 21px; font-weight: 700; letter-spacing: -1px; }
.brand-logo { display: block; width: 190px; height: 44px; object-fit: contain; }
.brand-caption { font-size: 9px; line-height: 1.6; font-weight: 400; letter-spacing: 1.5px; max-width: 85px; color: var(--muted-dark); margin-left: 8px; }
.topbar nav { display: flex; gap: 28px; margin: auto; font: 11px var(--mono); }
.topbar nav a { padding: 30px 0 27px; border-bottom: 3px solid transparent; }
.topbar nav [aria-current] { color: var(--yellow); border-color: var(--yellow); }
.topbar nav a:hover { color: var(--yellow); }
.preview-label { font: 9px var(--mono); border: 1px solid var(--navy-line); border-radius: var(--radius); padding: 8px 10px; color: var(--muted-dark); text-transform: uppercase; letter-spacing: .8px; }
.course-page,.review-page { max-width: 1320px; margin: auto; padding: 52px 4vw 64px; }
.page-heading { display: flex; justify-content: space-between; gap: 44px; margin-bottom: 24px; }
.eyebrow,.small-caps { font: 700 10px/1.6 var(--mono); letter-spacing: 1.4px; }
.eyebrow { margin-bottom: 20px; color: var(--muted); }
.intro { font-size: 16px; color: var(--muted); }
.path-note { border-left: 3px solid var(--navy); padding-left: 28px; align-self: center; min-width: 240px; }
.path-note p { font: 400 19px/1.6 var(--mono); letter-spacing: -.5px; margin: 16px 0 0; }
.continue-card { display: grid; grid-template-columns: 1.6fr 1fr; background: var(--navy); color: var(--on-dark); border-radius: var(--radius); border-top: 4px solid var(--yellow); padding: 32px 36px; gap: 50px; }
.continue-card .eyebrow { color: var(--yellow); }
.continue-card h2 { font-size: 26px; }
.continue-card p { max-width: 540px; color: var(--muted-dark); font-size: 15px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 44px; padding: 11px 16px; border-radius: var(--radius); font: 700 11px/1.6 var(--mono); border: 1px solid transparent; }
.primary { background: var(--yellow); color: var(--navy); border-color: var(--yellow); }
.primary:hover { background: var(--yellow-hover); border-color: var(--yellow-hover); }
.secondary { background: var(--surface); border-color: var(--line); color: var(--ink); }
.secondary:not(:disabled):hover { background: var(--soft); border-color: var(--ink); }
.continue-card .button { margin-top: 8px; }
.lesson-outline { border-left: 1px solid var(--navy-line); padding-left: 30px; }
.lesson-outline .small-caps { color: var(--muted-dark); display: block; margin-bottom: 12px; }
.lesson-outline div { display: flex; align-items: center; gap: 18px; font: 11px/2.3 var(--mono); }
.lesson-outline div span { font-size: 10px; color: var(--yellow); }
.section-heading { display: flex; justify-content: space-between; align-items: center; margin: 32px 0 18px; gap: 20px; }
.section-heading h2 { margin: 0; font-size: 18px; }
.section-heading>span { font: 10px/1.6 var(--mono); color: var(--muted); }
.course-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.course-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; min-height: 205px; }
.course-card.available { border-color: var(--navy); border-top: 4px solid var(--yellow); padding-top: 19px; }
.course-number { display: inline-block; font: 700 15px var(--mono); color: var(--muted); }
.course-card.available .course-number { color: var(--ink); }
.status { display: inline-block; background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 7px; font: 9px/1.5 var(--mono); color: var(--muted); }
.course-card .status { float: right; }
.course-card.available .status { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.course-card h4 { margin-top: 24px; margin-bottom: 9px; font: 700 1rem/1.5 var(--mono); letter-spacing: -.03em; }
/* The course map in courses: the core course, then the elevator's (course.js, courseGroups). */
.course-group + .course-group { margin-top: 28px; }
.course-group-heading { display: flex; align-items: baseline; gap: 14px; margin: 0 0 12px; }
.course-group-heading h3 { margin: 0; font-size: 14px; }
.course-group-heading>span { font: 10px/1.6 var(--mono); color: var(--muted); }
.course-card p { font-size: 13px; color: var(--muted); min-height: 44px; }
.course-card a { display: inline-flex; align-items: center; gap: 12px; min-height: 36px; font: 700 11px var(--mono); }
.course-card a:hover { text-decoration: underline; text-underline-offset: 4px; }
.lesson-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lesson-list a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; color: inherit; text-decoration: none; }
.lesson-list a:hover { border-color: var(--navy); }
.lesson-list-text { display: grid; gap: 3px; min-width: 0; }
.lesson-list-text small { color: var(--muted); font-size: 13px; }
.lesson-list .status[data-progress="complete"] { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.lesson-list .status[data-progress="in-progress"] { border-color: var(--navy); color: var(--ink); }
.muted { color: var(--muted); font-size: 12px; line-height: 1.7; }
.lesson-page { padding: 24px; max-width: 1800px; margin: auto; }
.lesson-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.breadcrumb { font: 10px/1.8 var(--mono); color: var(--muted); display: inline-block; margin-bottom: 14px; }
p.breadcrumb { margin: 0 0 14px; }
.breadcrumb a { color: inherit; }
.lesson-heading h1 { font-size: 24px; margin-bottom: 20px; }
.text-link { font: 700 11px/1.6 var(--mono); color: var(--ink); }
.text-link:hover { text-decoration: underline; }
.stages { display: flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.stages button { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 58px; font: 10px/1.5 var(--mono); background: transparent; padding: 12px 16px; color: var(--muted); text-align: left; }
.stages button+button { border-left: 1px solid var(--line); }
.stages button span { font-size: 10px; border: 1px solid var(--line); border-radius: 2px; padding: 5px; }
.stages button:hover { background: var(--soft); }
.stages [aria-current] { background: var(--yellow); color: var(--ink); }
.stages [aria-current] span { background: var(--navy); color: var(--yellow); border-color: var(--navy); }
.preview-note { font-size: 11px; color: var(--muted); margin: 10px 0 16px; }
.workspace { display: grid; grid-template-columns: 290px minmax(300px,1fr) 245px; gap: 12px; align-items: stretch; }
.guide,.tools-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; min-width: 0; }
.panel-title { display: flex; align-items: center; gap: 8px; padding-bottom: 17px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.panel-title h2 { font: 700 12px var(--mono); letter-spacing: -.5px; margin: 0; }
.panel-title .muted { margin-left: auto; font: 9px var(--mono); }
.accent-dot { width: 9px; height: 9px; background: var(--yellow); border: 1px solid #766c16; border-radius: 1px; }
.guide .eyebrow { margin-bottom: 12px; }
.guide h3 { font-size: 18px; line-height: 1.45; }
.guide>p { font-size: 14px; }
.prompt { font-size: 13px; line-height: 1.75; border-left: 3px solid var(--navy); padding: 12px; background: var(--soft); }
.draft-label { display: block; font-size: 10px; color: var(--muted); margin: 12px 0 20px; }
textarea { resize: vertical; }
/* Floating instructor chat: a raised-hand button opens a non-modal panel so the
   learner can keep working in the cabinet while the conversation stays open. */
main.lesson-page { padding-bottom: 104px; }
/* Fit the workshop to the window: the guide scrolls on its own and the 3D view
   grows into the remaining height, instead of the page growing past the screen. */
/* Desktop widths: the lesson fills the window and the guide scrolls inside its own
   column. In a short window the workspace keeps a minimum height and the page
   scrolls instead, so the guide stays a fixed, scrollable column at any height. */
@media (min-width: 701px) {
  body:has(.fit-viewport) { height: 100vh; overflow: auto; }
  body:has(.fit-viewport) #app { height: 100%; display: flex; flex-direction: column; min-height: 0; }
  /* width: auto side margins would otherwise stop the page stretching in the flex column. */
  /* min-content: never shorter than the chrome plus the workspace minimum, so a short
     window scrolls rather than overlapping the footer and status bar. */
  main.fit-viewport { flex: 1; width: 100%; min-height: min-content; display: flex; flex-direction: column; padding-bottom: 16px; }
  /* The heading, stage ribbon, note and footer keep their size; only the workspace gives. */
  main.fit-viewport > :not(.workspace) { flex: none; }
  /* The guide never sets the row height: its content is contained, so it takes the
     height of the 3D panel and rail and scrolls inside that. */
  main.fit-viewport .guide { contain: size; }
  /* The floating chat button sits in the bottom-right corner: keep the footer clear of it. */
  main.fit-viewport .lesson-footer { padding-right: 96px; }
  main.fit-viewport .lesson-heading h1 { margin-bottom: 10px; }
  main.fit-viewport .breadcrumb { margin-bottom: 8px; }
}
.workspace { flex: 1; min-height: 440px; grid-template-rows: minmax(0,1fr); }
.guide,.scene-panel,.tool-rail { min-height: 0; }
.guide { overflow-y: auto; scrollbar-gutter: stable; }
#workspace-content { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#cabinet-host { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#cabinet-host .three-stage { flex: 1; height: auto; min-height: 320px; }
.ask-fab { position: fixed; right: 24px; bottom: 24px; z-index: 20; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: var(--on-dark); border: 2px solid var(--yellow); box-shadow: 0 8px 24px #101c3540; }
.ask-fab:hover { background: var(--navy-raised); }
.ask-fab[aria-expanded=true] { box-shadow: 0 0 0 4px var(--yellow), 0 8px 24px #101c3540; }
.ask-fab svg { width: 40px; height: 40px; }
.ask-hand { fill: var(--yellow); } .ask-thumb { stroke: var(--yellow); }
/* The button sits in the tool-rail column; the panel opens to its left so the rail stays usable. */
.ask-chat { position: fixed; right: 100px; bottom: 24px; z-index: 20; width: min(380px, calc(100vw - 132px)); max-height: min(600px, calc(100dvh - 48px)); display: flex; flex-direction: column; overflow: hidden; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-top: 4px solid var(--yellow); border-radius: var(--radius); box-shadow: 0 16px 48px #101c3540; }
.ask-chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 10px 12px 14px; background: var(--navy); color: var(--on-dark); }
.ask-chat-head h2 { font: 700 13px/1.4 var(--mono); margin: 0; }
.ask-chat-head p { font-size: 11px; color: var(--muted-dark); margin: 2px 0 0; }
.ask-avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--yellow); display: grid; place-items: center; }
.ask-avatar svg { width: 26px; height: 26px; }
.ask-support { margin-left: auto; flex: none; padding: 6px 10px; border: 1px solid var(--navy-line); border-radius: var(--radius); background: transparent; color: var(--on-dark); font: 11px var(--mono); letter-spacing: .04em; white-space: nowrap; }
.ask-support:hover { background: var(--navy-raised); }
.chat-support .tutor-support { margin: 4px 0 8px; }
.chat-support .tutor-support select { width: 100%; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: 13px var(--sans, inherit); }
.ask-close { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius); background: transparent; color: var(--on-dark); }
.ask-close:hover { background: var(--navy-raised); }
.ask-chat-log { flex: 1; min-height: 140px; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 14px; background: var(--page); }
.ask-empty { margin: auto 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.chat-turn { display: flex; flex-direction: column; gap: 8px; }
.chat-bubble { max-width: 85%; padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.chat-bubble p { margin: 2px 0 0; }
.chat-bubble .small-caps { display: block; font-size: 9px; }
.chat-bubble.learner { align-self: flex-end; background: var(--navy); color: var(--on-dark); border-bottom-right-radius: 3px; }
.chat-bubble.learner .small-caps { color: var(--muted-dark); }
.chat-bubble.instructor { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 3px; }
.chat-bubble.instructor .small-caps { color: var(--muted); }
.ask-chat-form { padding: 10px 14px 12px; border-top: 1px solid var(--line); }
.ask-chat-form label[for=context] { font: 10px var(--mono); color: var(--muted); margin-right: 6px; }
.ask-chat-form select { max-width: calc(100% - 56px); padding: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: 11px var(--mono); }
.ask-compose { display: flex; align-items: flex-end; gap: 8px; margin-top: 8px; }
.ask-compose textarea { flex: 1; min-width: 0; max-height: 140px; padding: 9px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); font-size: 13px; }
.ask-send { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius); background: var(--yellow); color: var(--navy); }
.ask-send:hover { background: var(--yellow-hover); }
.ask-hint { margin: 6px 0 0; font-size: 10px; color: var(--muted); }
@media (max-width: 700px) {
  .ask-fab { right: 16px; bottom: 16px; width: 56px; height: 56px; }
  .ask-fab svg { width: 34px; height: 34px; }
  .ask-chat { left: 16px; right: 16px; width: auto; bottom: 84px; max-height: calc(100dvh - 108px); }
}
.scene-panel { display: flex; flex-direction: column; background: var(--navy); color: var(--on-dark); border-radius: var(--radius); overflow: hidden; min-width: 0; }
.unconnected { padding: 64px 32px; max-width: 510px; margin: auto; text-align: center; }
.installation-mark { margin: 12px auto 32px; border: 1px solid var(--navy-line); border-top: 3px solid var(--yellow); border-radius: var(--radius); width: 96px; height: 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--yellow); font: 700 32px var(--mono); }
.installation-mark span { font-size: 7px; letter-spacing: 2px; margin-top: 8px; }
.unconnected .small-caps { color: var(--yellow); }
.unconnected h2 { font-size: 24px; margin-top: 18px; }
.unconnected p { font-size: 14px; color: var(--muted-dark); }
.connection-status { display: inline-flex; gap: 9px; align-items: center; font: 10px/1.5 var(--mono); border: 1px solid var(--navy-line); border-radius: var(--radius); padding: 9px 12px; margin-top: 18px; color: var(--muted-dark); }
.connection-status i { width: 6px; height: 6px; border-radius: 1px; background: var(--muted-dark); }
/* The renderer's inspector below the canvas (terminal list, lift, trace) repeats
   direct 3D clicks, so it is hidden. It stays in the keyboard order and appears
   while one of its controls has focus. */
#cabinet-host .three-inspector:not(:focus-within) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tools-panel section { border-bottom: 1px solid var(--line); padding: 5px 0 22px; margin-bottom: 20px; }
.tools-panel section:last-child { border: 0; margin: 0; }
.meter-display { background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 12px; text-align: center; font: 24px var(--mono); letter-spacing: 3px; margin: 10px 0; }
.meter-display span { display: block; font: 10px var(--mono); letter-spacing: 0; margin-top: 14px; color: var(--muted); }
.tools-panel .button { width: 100%; }
.probe-row { font: 10px var(--mono); display: flex; gap: 7px; align-items: center; margin: 15px 0; }
.probe-row>span { margin-left: auto; color: var(--muted); font-size: 9px; }
.probe-row i { width: 8px; height: 8px; background: var(--navy); border-radius: 50%; }
.probe-row i.red { background: var(--danger); }
.lesson-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 20px; }
.lesson-footer>span { font-size: 11px; color: var(--muted); }
.lesson-footer>div { display: flex; gap: 10px; }
.review-page>.eyebrow { margin-top: 25px; }
.review-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; margin: 28px 0; }
.remediation-card-body{padding:0 12px 14px}.remediation-card-body p{font-size:13px;line-height:1.55}.remediation-guide #practice-checks{margin-bottom:0}.remediation-pane-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.remediation-pane-actions .button{flex:1}
.surface { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--navy); padding: 30px; border-radius: var(--radius); }
.surface p { font-size: 14px; color: var(--muted); }
.empty-evidence { border-left: 3px solid var(--line); margin-top: 30px; padding: 24px; }
.empty-evidence>span { font: 14px var(--mono); color: var(--muted); display: block; margin-bottom: 20px; }
@media(min-width:1600px) {
  .workspace { grid-template-columns: 320px minmax(400px,1fr) 280px; }
  .guide,.tools-panel { padding: 24px; }
  .unconnected { padding-top: 100px; }
}
@media(max-width:1100px) {
  .workspace { grid-template-columns: 275px minmax(280px,1fr); }
  .tools-panel { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
  .tools-panel>.panel-title { grid-column: 1/-1; margin: 0; }
  .tools-panel section { border: 0; margin: 0; }
  .path-note { display: none; }
  .topbar { gap: 20px; }
  .brand-caption { display: none; }
}
@media(max-width:700px) {
  .topbar { padding: 16px 20px 0; flex-wrap: wrap; gap: 16px; }
  .brand-logo { width: 172px; height: 40px; }
  .topbar nav { order: 3; width: 100%; justify-content: center; gap: 30px; }
  .topbar nav a { padding: 12px 0; }
  .preview-label { margin-left: auto; font-size: 8px; }
  .course-page,.review-page { padding: 30px 20px; }
  .continue-card { grid-template-columns: 1fr; padding: 24px; gap: 24px; }
  .continue-card h2 { font-size: 22px; }
  .lesson-outline { border-left: 0; border-top: 1px solid var(--navy-line); padding: 22px 0 0; }
  .course-grid { grid-template-columns: 1fr; }
  .lesson-list a { grid-template-columns: auto 1fr; gap: 6px 14px; }
  .lesson-list .status { grid-column: 2; justify-self: start; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .course-group-heading { flex-direction: column; gap: 4px; }
  .course-card { min-height: 190px; }
  .lesson-page { padding: 20px 12px; }
  .lesson-heading { align-items: flex-start; flex-direction: column; gap: 0; }
  .lesson-heading .text-link { margin-bottom: 20px; }
  .lesson-heading h1 { font-size: 22px; }
  .stages { overflow-x: auto; }
  .stages button { flex: 0 0 154px; padding: 12px; }
  .workspace { grid-template-columns: 1fr; }
  .scene-panel { grid-row: 1; }
  .guide { grid-row: 2; }
  .tools-panel { display: block; }
  .tools-panel section { margin: 20px 0; }
  .unconnected { padding: 40px 24px; }
  .lesson-footer { align-items: flex-start; flex-direction: column; }
  .review-grid { grid-template-columns: 1fr; }
  .surface { padding: 24px; }
}
@media(forced-colors:active) {
  .stages [aria-current],.topbar nav [aria-current] { outline: 2px solid Highlight; outline-offset: -3px; }
  .accent-dot,.probe-row i { border: 1px solid CanvasText; }
}
.operation-bar,.three-tools{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:8px 10px;border-bottom:1px solid var(--navy-line);background:var(--navy);color:var(--on-dark);font:11px var(--mono)}
.operation-bar button,.three-tools button,.three-inspector button{min-height:44px;padding:8px 11px;border:1px solid var(--navy-line);border-radius:var(--radius);background:var(--navy-raised);color:var(--on-dark);font:11px var(--mono);cursor:pointer}
.operation-bar button:hover,.three-tools button:hover,.three-inspector button:hover{border-color:var(--yellow);background:#263a5d}
.operation-bar [aria-pressed=true],.three-tools [aria-pressed=true],.three-inspector [aria-pressed=true]{border-color:var(--yellow);background:var(--yellow);color:var(--navy)}
.operation-bar [data-hold]{touch-action:none}
.operation-bar label,.three-tools label{display:flex;align-items:center;gap:7px;min-width:0;min-height:44px;color:var(--muted-dark);font:10px var(--mono);text-transform:uppercase;letter-spacing:.04em}
.operation-bar select,.three-tools select,.three-tools input[type=search],.three-inspector select{min-width:0;max-width:100%;min-height:44px;padding:8px 10px;border:1px solid var(--navy-line);border-radius:var(--radius);background:var(--navy-raised);color:var(--on-dark);font:11px var(--mono)}
.three-tools input[type=search]{width:100%}.three-tools input[type=checkbox]{width:18px;height:18px;accent-color:var(--yellow)}
.scene-view{flex:0 1 auto}.scene-view select{width:clamp(126px,18vw,210px)}
.motor-connection{flex:0 1 auto}.motor-connection select{width:clamp(112px,16vw,170px)}
/* A wait's label never breaks inside its button: four waits that do not fit
   a narrow scene wrap whole, onto a second line (2026-10-20: the DOL and
   reversing panels took star-delta's four, and "Wait 1 min" broke in two at
   390 px and pushed the scene down). */
.scene-time{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:44px}.scene-time-row{flex-basis:100%}.scene-time button{white-space:nowrap}.scene-time span{color:var(--muted-dark);font:10px var(--mono);text-transform:uppercase;letter-spacing:.04em}.scene-time button:disabled{opacity:.45;cursor:not-allowed}
.elevator-find label:first-child{flex:1 1 220px}.elevator-find label:first-child input{flex:1 1 140px}.elevator-find label:last-of-type{flex:1 1 190px}.elevator-find label:last-of-type select{flex:1 1 120px}
/* Once the 3D scene is ready, Q1 is operated at the junction box beside the
   cabinet, and QF1, Start, Stop and the F2 reset in the cabinet itself, so this
   bar is hidden. It stays in the keyboard order and,
   while focused, overlays the top of the workspace without moving the 3D view.
   If the 3D view fails to load, the bar stays visible. */
#workspace-content{position:relative}
#workspace-content:has(#cabinet-host[data-ready="true"]) .operation-bar{position:absolute;top:0;left:0;right:0;z-index:6;background:var(--navy);box-shadow:0 6px 16px #0006}
#workspace-content:has(#cabinet-host[data-ready="true"]) .operation-bar:not(:focus-within){width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;box-shadow:none}
#operation-status,#paper-status{padding:8px 12px;min-height:48px;font-size:12px;margin:0;background:#eff2f5;border-top:1px solid var(--line)}
/* Check notification over the cabinet: translucent, and never in the way of clicks. */
.check-toast{position:absolute;top:12px;left:12px;right:12px;z-index:4;display:flex;justify-content:center;pointer-events:none}
/* With the instructor chat open over the right of the cabinet, the toast keeps to the left, and above the chat where the cabinet is too narrow to clear it (from 1,100 px down): an awaited reading often completes a check, and the chat would cover it. It takes no clicks, so the chat stays usable under it. */
body:has(#ask-chat:not([hidden])) .check-toast{justify-content:flex-start;z-index:21}
.check-toast-card{display:flex;flex-direction:column;gap:3px;max-width:min(430px,100%);padding:10px 16px;border:1px solid #ffffff2e;border-radius:8px;background:#101c35cc;backdrop-filter:blur(7px);color:var(--on-dark);box-shadow:0 10px 28px #0006;opacity:0;transform:translateY(-8px);transition:opacity .3s ease,transform .3s ease}
.check-toast[data-state=in] .check-toast-card{opacity:1;transform:none}
.check-toast[data-state=out] .check-toast-card{opacity:0;transform:translateY(-6px)}
.check-toast span{font:700 9px/1.6 var(--mono);letter-spacing:1.2px;color:var(--yellow)}
.check-toast strong{font-size:13px;line-height:1.45;font-weight:600}
@media (prefers-reduced-motion: reduce){.check-toast-card{transition:none}}
#cabinet-host{min-width:0}.three-stage{position:relative;height:530px;overflow:hidden;background:#202b32}.three-stage canvas{display:block;width:100%;height:100%;touch-action:none}
.three-hint,.three-hover{position:absolute;bottom:8px;left:8px;right:8px;color:#fff;background:#101c35cf;padding:6px;font-size:10px;pointer-events:none}.three-hover{bottom:38px}.three-hover:empty{display:none}
.three-inspector{padding:10px;display:flex;gap:7px;flex-wrap:wrap;align-items:center;background:var(--navy);color:var(--on-dark);font:11px var(--mono)}.three-inspector label{display:flex;gap:6px;align-items:center;max-width:100%}.three-inspector select{max-width:240px;width:auto}.three-lands{width:100%;display:flex;gap:4px;flex-wrap:wrap}.three-route{width:100%}
/* Detached schematic window (index.html#schematic), opened from the tool rail. */
.schematic-window{height:100vh;display:flex;flex-direction:column;background:var(--page)}
.schematic-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:10px 16px;background:var(--navy);color:var(--on-dark);border-bottom:3px solid var(--yellow)}
.schematic-logo{height:30px;width:auto}
.schematic-head h1{margin:0;font:700 13px/1.4 var(--mono);letter-spacing:.5px}
.schematic-tabs{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.schematic-head h1{margin-right:auto!important}
.schematic-tabs button:disabled{opacity:.45;background:var(--navy-raised);color:var(--on-dark)}
/* A drawing set of 287 sheets is chosen from a list, not a row of tabs. */
.schematic-pick{color:var(--on-dark);font:11px var(--mono);text-transform:uppercase;letter-spacing:.06em}
.schematic-tabs select{min-height:40px;max-width:min(46vw,420px);padding:8px 10px;border:1px solid var(--navy-line);border-radius:var(--radius);background:var(--navy-raised);color:var(--on-dark);font:12px var(--mono)}
.schematic-zoom-level{min-width:4ch;font:11px var(--mono);color:var(--muted-dark)}
.schematic-tabs button{min-height:40px;padding:8px 12px;border:1px solid var(--navy-line);border-radius:var(--radius);background:var(--navy-raised);color:var(--on-dark);font:11px var(--mono)}
.schematic-tabs [aria-pressed=true]{background:var(--yellow);border-color:var(--yellow);color:var(--navy)}
.schematic-sheet{flex:1;min-height:0;overflow:auto;padding:12px;background:#fff}
.schematic-sheet svg{display:block;width:100%;height:100%}
.schematic-sheet.zoomed svg{height:auto;max-width:none}
.tools-panel select{width:100%;min-width:0;margin:4px 0 12px}.tools-panel label{font-size:12px}.tools-panel button[data-export]{margin-top:14px}.meter-display{overflow-wrap:anywhere}.evidence-list{padding-left:24px;max-height:620px;overflow:auto}.evidence-list li{padding:8px;border-bottom:1px solid #ddd}.evidence-list p{margin:3px 0;overflow-wrap:anywhere}
@media(max-width:700px){main.lesson-page{display:block;height:auto}.workspace{grid-template-rows:none;min-height:0}.guide,.scene-panel{min-height:auto}.guide{overflow-y:visible}#cabinet-host .three-stage{flex:none;height:410px}.three-stage{height:410px}.three-inspector select{max-width:210px}.three-hint{font-size:9px}}

#operation-status,#paper-status{color:var(--ink)}


/* Compact workshop navigation with an on-demand floating instrument. */
.workspace{grid-template-columns:360px minmax(300px,1fr) 64px}
.tool-rail{position:sticky;top:12px;min-width:0;background:var(--navy);border:1px solid var(--navy-line);border-radius:4px;align-self:start}
.tool-rail nav{display:flex;flex-direction:column;padding:5px;gap:5px}
.tool-rail nav button,.tool-rail nav a{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;min-height:64px;width:100%;padding:8px 2px;background:transparent;color:var(--on-dark);border-radius:3px;font:9px var(--mono);cursor:pointer}
.tool-rail nav button:hover,.tool-rail nav a:hover{background:var(--navy-raised)}
.tool-rail nav [aria-expanded=true],.tool-rail nav [aria-pressed=true]{background:var(--yellow);color:var(--navy)}
.tool-rail small{font-size:8px;position:absolute;right:1px;top:3px;background:var(--navy-raised);color:white;border-radius:7px;padding:1px 4px}
#action-message:empty{display:none}#action-message{position:absolute;right:70px;top:0;background:white;color:var(--ink);border:1px solid var(--line);padding:12px;width:230px;z-index:13;font-size:12px;box-shadow:0 4px 16px #0002}
#instrument{--lcd-bg:#b9c5a7;--lcd:#263528;--amber:#f5d34e;color:var(--ink);text-align:left}
#instrument[hidden]{display:none!important}
#instrument.floating{position:fixed;width:228px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;z-index:12;margin:0;padding:10px;background:#fffffff5;border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 40px #0004}
#instrument #dmm{max-width:250px;max-height:none;filter:drop-shadow(0 5px 7px #0003);cursor:grab;touch-action:none;user-select:none}
#instrument #knob{transform-origin:125px 256px}
#instrument [aria-disabled=true]{opacity:.28;cursor:default}
#instrument .ann-hv{fill:none;stroke:#933828}
#instrument .instrument-handle{display:flex;justify-content:space-between;align-items:center;font:11px var(--mono);margin-bottom:8px;cursor:grab;touch-action:none}
.instrument-handle button{background:var(--soft);color:var(--ink);border-radius:4px;font:10px var(--mono);padding:5px 8px}
#instrument #meter-note{font:10px/1.5 var(--mono);margin:8px 0 0;min-height:30px;color:var(--muted)}
#instrument .probe-help{font-size:10px;line-height:1.5;margin:6px 0 0;color:var(--muted)}
#instrument .holder-channel{fill:#252b2b;stroke:#111716;stroke-width:1.5}
#instrument .holder-clip{fill:none;stroke:#778078;stroke-width:5;stroke-linecap:round}
#instrument [data-probe-home].receiving .holder-channel{fill:#596244;stroke:#f5d34e;stroke-width:2.5}
#instrument #meter-note{margin-top:28px}
#instrument-leads{position:fixed;inset:0;z-index:13;pointer-events:none;overflow:hidden}
#instrument-leads [data-lead]{pointer-events:auto;cursor:grab;touch-action:none}
#instrument-leads [data-lead]:focus-visible .probe-hit{stroke:#e3ae14;stroke-width:2}
#instrument #dmm [role=button]{cursor:pointer}#instrument #dmm [aria-disabled=true]{cursor:default}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1600px){.workspace{grid-template-columns:400px minmax(400px,1fr) 64px}}
@media(max-width:1100px){.workspace{grid-template-columns:280px minmax(0,1fr) 58px}}
@media(max-width:700px){.workspace{grid-template-columns:minmax(0,1fr) 52px;gap:6px}.scene-panel{grid-row:1;grid-column:1}.tool-rail{grid-row:1;grid-column:2}.guide{grid-row:2;grid-column:1/-1}.tool-rail nav{padding:2px;gap:2px}.tool-rail nav button,.tool-rail nav a{font-size:8px;min-height:59px}.three-tools{padding:6px}.three-tools label{max-width:100%}.scene-time{gap:4px}.scene-time button{padding:7px 6px}.scene-view,.motor-connection{flex:1 1 150px}.scene-view select,.motor-connection select{flex:1;width:auto}.elevator-tools label{flex:1 1 190px}.elevator-tools select{flex:1}.elevator-find label{flex-basis:100%!important}.three-inspector label{flex-wrap:wrap}.three-inspector select{max-width:100%}.three-inspector{min-width:0}.operation-bar button{padding:7px 5px}}

/* Keep the selected tool visible when the renderer sets an inline hover cursor.
   The hotspot is the screwdriver tip, so screw selection stays precise. */
#cabinet-host[data-active-tool="driver"] .three-stage,
#cabinet-host[data-active-tool="driver"] canvas{cursor:url('./cursors/screwdriver.svg') 3 29,crosshair!important}
/* The wrench hotspot sits in its open jaw. */
#cabinet-host[data-active-tool="wrench"] .three-stage,
#cabinet-host[data-active-tool="wrench"] canvas{cursor:url('./cursors/wrench.svg') 6 6,crosshair!important}
/* The tester exists on the rail. Its cursor supplies the hand-held tool while
   the cabinet remains clear; the twin tips are the click hotspot. */
#cabinet-host[data-active-tool="tester"] .three-stage,
#cabinet-host[data-active-tool="tester"] canvas{cursor:url('./cursors/tester.svg') 6 3,crosshair!important}
.wrench-dialog{width:min(460px,calc(100vw - 32px));border:1px solid var(--line);border-top:4px solid var(--yellow);border-radius:var(--radius);padding:24px;color:var(--ink);background:var(--surface)}
.wrench-dialog::backdrop{background:#101c3599}
.wrench-dialog h2{font:700 17px/1.4 var(--mono);margin:6px 0 12px}
.wrench-dialog p{font-size:13px;line-height:1.55}
.wrench-dialog fieldset{border:0;padding:0;margin:12px 0;display:grid;gap:8px}
.wrench-option{display:flex;gap:10px;align-items:flex-start;padding:10px;border:1px solid var(--line);border-radius:var(--radius);font-size:13px;line-height:1.45;cursor:pointer}
.wrench-option:has(input:checked){border-color:var(--navy);background:var(--soft)}
.wrench-option input{margin-top:3px}
.wrench-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:16px}
.wrench-feedback{font-size:12px;border-left:3px solid var(--yellow);padding-left:10px}.wrench-feedback:empty{display:none}
.checks-card,.wrench-note{margin:14px 0;border:1px solid var(--line);border-radius:var(--radius);padding:9px 12px;background:var(--surface)}
.checks-card>summary,.wrench-note>summary{cursor:pointer;font:700 11px/1.7 var(--mono);color:var(--ink)}
.checks-card[open]>summary,.wrench-note[open]>summary{border-bottom:1px solid var(--line);padding-bottom:7px}
.checks-card .lesson-checklist{margin:10px 0 2px}
.wrench-note p{font-size:13px;line-height:1.55;margin:10px 0 2px}
#lesson-diagnosis-state{font-weight:600;font-size:12px}
/* A part's signature table: pairs down the side, states across the top. */
.signature{margin:10px 0}
.signature-table{border-collapse:collapse;width:100%;font:12px/1.4 var(--mono)}
.signature-table caption{text-align:left;font-weight:700;font-size:11px;padding-bottom:4px}
.signature-table th,.signature-table td{border:1px solid var(--line);padding:3px 6px;text-align:left}
.signature-table thead th{background:var(--soft)}
.signature-table td[data-cell="empty"],.signature-table td[data-cell="live"]{color:var(--muted)}
.signature-note{font-size:12px;color:var(--muted);margin:6px 0 0}

.lesson-checklist{list-style:none;padding:0;margin:16px 0;font-size:12px;line-height:1.5}
.lesson-checklist li{padding:5px 0;display:flex;gap:8px}
.lesson-checklist li[data-complete=true]{color:#276043}
.lesson-checklist li span{flex:none;font-weight:700}
.lesson-result{font-weight:600;font-size:12px}
.guide form select{width:100%;min-width:0;margin-bottom:12px}
.guide form label{display:block;font-size:12px;margin:10px 0 6px}
.job-complaint{border-left:3px solid var(--yellow,#e6c643);padding:10px;background:var(--soft)}
#lesson-feedback{font-size:12px;line-height:1.5}
#lesson-feedback:empty{display:none}
.stages button:disabled{opacity:.45;cursor:not-allowed}

.instruction-card{margin:14px 0 20px;border:1px solid #bdcbd7;border-radius:6px;overflow:hidden;background:#f0f5f8}
.instruction-card>summary{list-style:none;cursor:pointer;padding:12px;color:#152c46}
.instruction-card>summary::-webkit-details-marker{display:none}
.instruction-card>summary::after{content:"";float:right;width:8px;height:8px;margin:5px 2px 0 8px;border-right:2px solid #5b7189;border-bottom:2px solid #5b7189;transform:rotate(45deg)}
.instruction-card[open]>summary::after{transform:rotate(-135deg);margin-top:8px}
.instruction-card>summary span{display:block;font:9px var(--mono);letter-spacing:.08em;margin-bottom:7px}
.instruction-card>summary strong{display:block;font-size:15px;line-height:1.35}
.instruction-figure{margin:0;background:transparent}
.instruction-figure svg{display:block;width:100%;height:auto;max-height:200px}
.instruction-figure svg text{font:11px var(--mono);fill:#172a42}
.instruction-figure svg text.small{font-size:9px}
.instruction-arrow{fill:none;stroke:#254767;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.instruction-figure figcaption{background:white;padding:12px;font-size:12px;line-height:1.55;color:#20354a}
.instruction-figure>small{display:block;background:white;padding:0 12px 12px;color:#617185;font-size:10px}

/* Keep the mobile rail inside the workshop row, clear of the guide below. */
@media(max-width:700px){.tool-rail{position:relative;top:auto;align-self:stretch}.tool-rail nav{position:sticky;top:12px}}

#cabinet-meter-note,#cell-meter-note{margin:0;padding:10px 12px;background:#22324a;color:#f5e8b1;font-size:12px;line-height:1.5;border-top:1px solid #40516a}

.practice-generator{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin:24px 0 10px}
.practice-generator label{font-weight:600;font-size:13px;max-width:260px}.practice-generator label span{display:block;font-weight:400;font-size:11px}
.practice-generator input{min-width:0;max-width:100%;padding:12px;border:1px solid var(--line);border-radius:4px;font:13px var(--mono)}
#practice-status{min-height:24px;font-size:13px;margin-bottom:20px}.practice-history{margin-top:24px}.practice-history section{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
#practice-checks{margin:20px 0;font-size:13px}#practice-checks li{margin:8px 0}.guide details{font-size:13px;line-height:1.55}
/* A panel's note above the practice checks (star-delta's QF1 and F2), marked as the complaint is. */
.practice-notice{border-left:3px solid var(--yellow,#e6c643);padding:8px 10px;background:var(--soft);margin:0 0 12px}

/* Account and organization pages (redesigned 2026-10-16): one column of
   cards on the page texture, the workshop's tokens, at most one yellow action
   per card, secondary outlines for the rest and text links for rare actions.
   Fields, rows, chips, notices and tables are shared by every account view
   (src/services/account.js); every card has the same edge, padding and
   heading. Below 760 px the forms stack and the tables become labelled rows. */
.account-page{max-width:980px;margin:0 auto;padding:48px 24px 72px}
.account-intro{margin-bottom:28px}
.account-intro h1{margin-bottom:12px}
.account-page .intro{margin:0;max-width:72ch}
.account-card{margin:0 0 20px}
.account-page .surface .eyebrow{font-size:10px;color:var(--muted)}
.account-page .account-card h1{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.account-page .account-card h2{margin:0 0 18px;font-size:18px}
.account-page .account-card h2[data-detail-heading]{font-size:22px}
.account-page .account-card h3{margin:0 0 12px;font-size:14px}
.account-page .account-card h4{margin:0;font:700 12px/1.5 var(--mono);letter-spacing:-.01em;color:var(--ink)}
.account-page .card-intro{margin:-6px 0 18px;max-width:68ch}
.account-page .card-note{margin:16px 0 0;max-width:80ch;font-size:14px;line-height:1.6;color:var(--muted)}
.account-page .card-empty{margin:0;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:14px;color:var(--muted)}
.account-page .account-card .list-title{margin-top:28px}
.account-page .card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-bottom:8px}
.account-page .card-head .eyebrow,.account-page .case-head .eyebrow{margin-bottom:10px}
/* Fields: a label over its control, help text under it. */
.account-form{display:grid;gap:16px}
.account-page .field{display:grid;gap:6px;min-width:0}
.account-page .field label{font-size:13px;font-weight:600;line-height:1.4;color:var(--ink)}
.account-page input:not([type=radio]),.account-page select,.account-page textarea{width:100%;min-width:0;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);font:400 15px/1.4 var(--body)}
.account-page textarea{min-height:120px;resize:vertical;line-height:1.5}
.account-page input::placeholder,.account-page textarea::placeholder{color:#737d8f}
.account-page input:not([type=radio]):hover,.account-page select:hover,.account-page textarea:hover{border-color:#9aa4b3}
.account-page input:focus-visible,.account-page select:focus-visible,.account-page textarea:focus-visible{outline:3px solid var(--focus);outline-offset:1px;border-color:var(--navy)}
.account-page .field-help{margin:0;font-size:12px;line-height:1.5;color:var(--muted)}
.account-form>.button{justify-self:start;min-width:160px}
/* A field and its button on one line; the help under both. */
.account-page .inline-form{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px 12px;max-width:680px}
.account-page .inline-form>.field-help{grid-column:1/-1}
/* The organization's short forms: a title, two fields and a button in a row. */
.account-page .row-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:end;gap:12px;margin-top:18px;padding:18px;background:var(--page);border:1px solid var(--line);border-radius:var(--radius)}
.account-page .row-form>.form-title,.account-page .row-form>.field-help,.account-page .row-form>output{grid-column:1/-1}
/* The notice each card has (data-account-message): nothing when empty, a
   bordered line when it says something, and an error marked with a sign as
   well as its colour. It stays in the page while empty, so it is announced. */
.account-page .account-notice{margin:16px 0 0;padding:12px 14px;border:1px solid var(--line);border-left:3px solid var(--navy);border-radius:var(--radius);background:var(--soft);color:var(--ink);font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.account-page .account-notice:empty{margin:0;padding:0;border:0}
.account-page .account-notice[data-tone="error"]:not(:empty){display:flex;gap:10px;align-items:flex-start;border-color:#e3b7b9;border-left-color:var(--danger);background:#fbf0f0}
.account-page .account-notice[data-tone="error"]:not(:empty)::before{content:'!' / '';flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--danger);color:#fff;font:700 12px/1 var(--mono)}
.account-page output.account-output:not(:empty){display:block;padding:12px 14px;border:1px solid var(--line);border-left:3px solid var(--yellow);border-radius:var(--radius);background:var(--surface);font-size:14px;line-height:1.5;overflow-wrap:anywhere}
/* Chips: who gives access, a role, a case's status. */
.account-page .chip{display:inline-flex;align-items:center;min-height:22px;padding:2px 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--soft);color:var(--ink);font:700 10px/1.5 var(--mono);letter-spacing:.8px;text-transform:uppercase;white-space:nowrap}
.account-page .chip[data-tone="granted"],.account-page .chip[data-status="in_progress"]{background:var(--yellow);border-color:var(--yellow);color:var(--navy)}
.account-page .chip[data-tone="free"],.account-page .chip[data-status="open"]{background:var(--surface);border-color:var(--navy)}
.account-page .chip[data-tone="role"]{background:var(--surface)}
.account-page .chip[data-status="resolved"]{background:var(--navy);border-color:var(--navy);color:var(--on-dark)}
.account-page .chip[data-status="closed"]{color:var(--muted)}
.account-page .chip-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0}
/* Text links for rare actions, as buttons and as the reveal's summary. */
.account-page button.text-link,.account-page summary.text-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;background:none;border:0;cursor:pointer;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.account-page .text-link:hover{text-decoration-color:currentColor}
.account-page button.text-link:disabled{background:none;color:#626d80}
.account-page .text-link.danger,.account-page .button.danger{color:var(--danger)}
.account-page .account-reveal{margin-top:8px}
.account-page .account-reveal>summary{list-style:none;width:max-content;max-width:100%}
.account-page .account-reveal>summary::-webkit-details-marker{display:none}
.account-page .account-reveal>summary.text-link::before{content:'+' / '';width:10px;font-size:15px;text-align:center}
.account-page .account-reveal[open]>summary.text-link::before{content:'\2212' / ''}
.account-page .reveal-open,.account-page .account-reveal[open] .reveal-closed{display:none}
.account-page .account-reveal[open] .reveal-open{display:inline}
.account-page .account-reveal[open]>summary.primary{background:var(--surface);border-color:var(--line);color:var(--ink)}
.account-page .account-reveal>form{margin-top:16px}
/* Sign in and create: two cards side by side, their footnotes on one line. */
.auth-switch{display:none}
.auth-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.account-page .auth-card{display:flex;flex-direction:column;margin:0}
.account-page .auth-card .account-form{margin-bottom:24px}
.account-page .auth-card .account-form>.button{justify-self:stretch;margin-top:4px}
.account-page .auth-footnote{margin:auto 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:13px;line-height:1.6}
.account-page .auth-single{max-width:480px}
/* The account home: who is signed in, then one card per subject. */
.account-identity{margin-bottom:28px}
.identity-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:20px 32px}
.account-identity .eyebrow{margin-bottom:14px}
.account-identity h1{margin:0 0 8px;font-size:clamp(1.8rem,3vw,2.6rem);overflow-wrap:anywhere}
.account-page .account-email{margin:0;font-size:15px;color:var(--muted);overflow-wrap:anywhere}
.identity-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px 18px}
.account-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.account-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 24px;padding:16px 0;border-bottom:1px solid var(--line)}
.row-text{display:grid;gap:6px;min-width:0}
.row-title{font:700 15px/1.4 var(--mono);letter-spacing:-.02em;color:var(--ink);overflow-wrap:anywhere}
.row-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.row-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.account-detail:empty{display:none}
/* Support cases: a reference and status, the subject, when it last moved. */
.support-case-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.case-row{display:grid;grid-template-columns:150px minmax(0,1fr) auto;align-items:center;gap:8px 20px;padding:14px 0;border-bottom:1px solid var(--line)}
.case-key{display:grid;justify-items:start;gap:6px}
.case-ref{font:700 12px/1.4 var(--mono);letter-spacing:.02em;color:var(--ink)}
.case-text{display:grid;gap:4px;min-width:0}
.case-subject{font-size:15px;font-weight:600;line-height:1.4;color:var(--ink);overflow-wrap:anywhere}
.case-meta{font-size:13px;line-height:1.5;color:var(--muted)}
.case-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px 24px;flex-wrap:wrap;padding-bottom:20px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.case-head-text{min-width:0;flex:1 1 320px}
.account-page .case-head h2{margin:0 0 12px;font-size:20px;overflow-wrap:anywhere}
.account-page .case-facts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0;font-size:13px;color:var(--muted)}
.account-page .case-facts+.case-facts{margin-top:8px}
.case-diagnostics{margin-top:16px}
.support-thread{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.thread-item{max-width:min(88%,640px);padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.thread-item.is-own{justify-self:end;background:#f6f8fa;border-color:#c4ccd8}
.thread-item.thread-opening{border-top:3px solid var(--navy)}
.account-page .thread-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 16px;margin:0 0 6px;font-size:12px;color:var(--muted)}
.thread-meta strong{font:700 12px/1.5 var(--mono);color:var(--ink)}
.account-page .thread-body{margin:0;font-size:15px;line-height:1.6;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.account-page .reply-form{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.account-page .status-form{margin-top:20px}
/* Organization management: tables with their short forms. */
.org-section{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.account-page .org-section .sub-title{margin:24px 0 10px}
.account-table{width:100%;border-collapse:collapse;font-size:14px}
.account-table th{padding:0 16px 8px 0;border-bottom:1px solid var(--line);text-align:left;font:700 10px/1.6 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.account-table td{padding:10px 16px 10px 0;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--ink);overflow-wrap:anywhere}
.account-table th:last-child,.account-table td:last-child{padding-right:0}
.account-table .cell-action{text-align:right;white-space:nowrap}
.capacity-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.capacity-list li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:6px 24px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--muted)}
.capacity-list strong{font:700 14px/1.4 var(--mono);color:var(--ink)}
.org-report{display:grid;justify-items:start;gap:14px;margin-top:18px}
.org-report-result{width:100%}
.sync-status{padding:12px 24px;font-size:13px;margin:0;background:#edf0f4;color:#101c35;}
.topbar > .text-link{color:#fff;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media(max-width:760px){
  .account-page{padding:28px 16px 48px}
  .account-page .surface{padding:22px 18px}
  .topbar .text-link{font-size:12px;}
  /* On a phone one card at a time, chosen by the segmented switch. */
  .auth-grid{grid-template-columns:1fr}
  .auth-switch{display:grid;grid-template-columns:1fr 1fr;margin:0 0 16px;padding:0;border:1px solid var(--navy);border-radius:var(--radius);background:var(--surface);overflow:hidden}
  .auth-switch input{position:absolute;width:1px;height:1px;margin:0;opacity:0}
  .auth-switch label{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px;border-bottom:3px solid transparent;font:700 11px/1.4 var(--mono);color:var(--ink);text-align:center;cursor:pointer}
  .auth-switch input:checked+label{background:var(--navy);color:var(--on-dark);border-bottom-color:var(--yellow)}
  .auth-switch input:focus-visible+label{outline:3px solid var(--focus);outline-offset:-3px}
  .account-auth:has(#auth-view-create:checked) [data-auth="signin"],.account-auth:has(#auth-view-signin:checked) [data-auth="create"]{display:none}
  .identity-grid{grid-template-columns:1fr}
  .identity-actions{justify-content:flex-start}
  /* One button stays beside its row; two go under it. */
  .account-row:has(.row-actions>:nth-child(2)){grid-template-columns:minmax(0,1fr)}
  .account-row:has(.row-actions>:nth-child(2)) .row-actions{justify-content:flex-start}
  .account-page .inline-form,.account-page .row-form{grid-template-columns:1fr}
  .account-page .inline-form .button,.account-page .row-form .button{width:100%}
  .account-page .row-form{padding:16px}
  .case-row{grid-template-columns:minmax(0,1fr) auto}
  .case-key{grid-column:1/-1;display:flex;align-items:center;gap:10px}
  .thread-item{max-width:94%}
  .capacity-list li{grid-template-columns:1fr}
  /* A table becomes one block per row, each cell under its own label. */
  .account-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .account-table,.account-table tbody,.account-table tr,.account-table td{display:block;width:100%}
  .account-table tbody{border-top:1px solid var(--line)}
  .account-table tr{padding:10px 0;border-bottom:1px solid var(--line)}
  .account-table td{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:3px 0;border:0}
  .account-table td::before{content:attr(data-label);font:700 10px/2 var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
  .account-table .cell-action{display:block;text-align:left}
  .account-table .cell-action::before{content:none}
  .account-table .cell-action:empty{display:none}
}
/* The assessment: a clock, the question it belongs to, and a result table. */
.paper-bar{display:flex;flex-wrap:wrap;align-items:center;gap:14px;justify-content:space-between;border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;margin-bottom:18px}
.paper-bar .eyebrow{margin:0}
.paper-clock{font:700 20px/1 var(--mono);letter-spacing:1px}
.paper-clock[data-over="true"]{color:#a8371f}
.paper-actions{display:flex;gap:10px;flex-wrap:wrap}
.paper-result{border-collapse:collapse;width:100%;margin:14px 0;font-size:13px}
.paper-result th,.paper-result td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left}
.paper-result th{font:700 10px/1.6 var(--mono);letter-spacing:1.2px;color:var(--muted)}
.paper-result td:not(:first-child){text-align:center}
/* Where a row sends the learner back to: the lesson that teaches its technique. */
.paper-lesson-link{font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:2px}
/* A fault the marking could not finish: why is said under the table, which
   scrolls sideways on a phone, so the reason wraps to the screen instead. */
.paper-unmarked-reasons{margin:0 0 14px;padding-left:18px;font-size:13px;max-width:100%;overflow-wrap:anywhere}
.paper-unmarked-reasons li{margin:4px 0}
/* Seven columns of marks do not fit a phone; the table scrolls rather than
   squeezing the technique names into one letter per line. */
.paper-result{display:block;overflow-x:auto}
@media (min-width:720px){.paper-result{display:table}}
.assessment-card{margin-top:22px}
.assessment-facts{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-family:var(--mono);font-size:13px}
.quiz-question{max-width:900px;margin-inline:auto}.quiz-question-heading{display:flex;gap:20px;align-items:flex-start;justify-content:space-between}.quiz-question h2{font-size:clamp(22px,3vw,34px);max-width:28ch}
.quiz-illustration{margin:18px 0;padding:16px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.quiz-illustration svg{display:block;max-width:100%;height:auto;margin:auto}
.quiz-options{display:grid;gap:10px;margin:20px 0}.quiz-option{display:block;cursor:pointer}.quiz-option input{position:absolute;opacity:0;pointer-events:none}.quiz-option span{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:center;min-height:52px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}.quiz-option b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;font-family:var(--mono)}
.quiz-option input:checked+span{border-color:var(--navy);box-shadow:inset 5px 0 0 var(--yellow);background:#f6f8fa}.quiz-option input:focus-visible+span{outline:3px solid var(--yellow);outline-offset:2px}
.quiz-save{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.quiz-save output{color:var(--muted)}
.quiz-navigation{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0}.quiz-navigation ol{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;list-style:none;padding:0;margin:0}.quiz-navigation li button{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:#fff;font:700 12px var(--mono)}.quiz-navigation li button[data-answered="true"]{background:var(--navy);color:#fff}.quiz-navigation li button[aria-current="step"]{box-shadow:0 0 0 3px var(--yellow)}
.quiz-submit{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.quiz-submit p{margin:0}.quiz-review article{border-top:1px solid var(--line);padding:18px 0}.quiz-review h4{font-size:20px;margin:4px 0 12px}.quiz-gaps{border-left:5px solid var(--yellow);padding:10px 16px;background:#f6f8fa}
@media(max-width:520px){.quiz-question-heading{display:block}.quiz-navigation{align-items:flex-end}.quiz-navigation ol{max-height:94px;overflow:auto}.quiz-navigation>.button{min-width:44px;padding-inline:10px}.quiz-option span{grid-template-columns:34px minmax(0,1fr);padding-inline:10px}.quiz-submit .button{width:100%;min-height:44px}.quiz-bar{align-items:flex-start}}
[data-assessment-result="passed"]{border-left:3px solid #2f7d55}
[data-assessment-result="not-passed"]{border-left:3px solid #a8371f}
/* Tutor suggestions are presentation overlays, never workshop controls. */
#cabinet-host { position: relative; }
.tutor-highlights { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:5; }
.tutor-highlights span { position:absolute; transform:translate(-50%,-50%); border:2px solid #ffcf24; border-radius:8px; padding:8px; color:#fff; background:#182024dd; box-shadow:0 0 0 5px #ffcf2444; font-size:11px; }
.tutor-schematic-highlight .pad { fill:#ffcf24 !important; stroke:#a85b00 !important; stroke-width:3px !important; }
.tutor-check,.tutor-targets,.tutor-demo { border-left:3px solid #ffcf24; padding:10px; margin-top:10px; }
/* A check the learner answers by choosing (2026-10-18): each option a 44 px
   target; once answered, the chosen one marked as the quiz marks its answer. */
.tutor-choices{display:grid;gap:6px;margin-top:8px}
.tutor-choice{display:block;width:100%;min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);font:inherit;text-align:left;cursor:pointer;overflow-wrap:anywhere}
.tutor-choice[data-check-choice="unsure"]{border-style:dashed}
.tutor-choice:hover:not(:disabled){border-color:var(--navy)}
.tutor-choice:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.tutor-choice:disabled{cursor:default;color:var(--muted)}
.tutor-choice.chosen{border-color:var(--navy);box-shadow:inset 5px 0 0 var(--yellow);background:#f6f8fa;color:var(--ink)}
.tutor-check-feedback{margin-top:8px}
.tutor-check-feedback:focus{outline:none}
.tutor-check[data-verdict="understood"] .tutor-check-feedback strong{color:#2f7d55}
.tutor-check[data-verdict="not-yet"] .tutor-check-feedback strong{color:#a8371f}
.tutor-check-status{display:block;margin-top:6px;font-size:12px}.tutor-check-status:empty{display:none}
.tutor-support{border-left:3px solid #ffcf24;padding:10px;margin-top:10px}.tutor-support form{display:grid;gap:8px;margin-top:8px}.tutor-support label{display:grid;gap:4px;font-size:11px}.tutor-support input,.tutor-support textarea{width:100%;box-sizing:border-box;padding:7px;border:1px solid var(--line);border-radius:4px;font:inherit}.tutor-support output{display:block;overflow-wrap:anywhere}
.support-case pre{max-height:420px;overflow:auto;padding:12px;background:var(--navy);color:var(--on-dark);font-size:11px}
.ask-chat .instruction-card { max-width:100%; }
.ask-chat .instruction-figure svg { max-height:190px; }
.chat-bubble p { white-space:pre-wrap; overflow-wrap:anywhere; }
/* A question being prepared: the fault is generated and validated before its
   panel exists, which takes a few seconds. */
.paper-preparing h2{display:flex;align-items:baseline;gap:10px}
.paper-dots{display:inline-flex;gap:5px}
.paper-dots i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:paper-dot 1.1s infinite ease-in-out}
.paper-dots i:nth-child(2){animation-delay:.15s}
.paper-dots i:nth-child(3){animation-delay:.3s}
@keyframes paper-dot{0%,80%,100%{opacity:.25}40%{opacity:1}}
@media (prefers-reduced-motion:reduce){.paper-dots i{animation:none;opacity:.5}}
/* An optional module says what it covers and where to go instead. */
.course-skip{font-size:13px;color:var(--muted)}
.module-covers ul{margin:8px 0 12px;padding-left:20px;line-height:1.6}
/* The workshop-only preview: a bound, granted, lesson-less module opens its
   cabinet in free play on the module page. Two columns - the scene and the
   tool rail - because free play has no instructor. */
.explore-note{font-size:13px;color:var(--muted)}
.explore-workspace{grid-template-columns:minmax(300px,1fr) 64px;min-height:560px;margin-top:8px}
.explore-workspace .scene-panel{min-height:560px}
.tool-rail nav button:disabled{opacity:.4;cursor:not-allowed;background:transparent;color:var(--on-dark)}
@media(max-width:700px){.explore-workspace{min-height:0}.explore-workspace .scene-panel{min-height:auto}}