/* The Lab's look. Colours are the course palette (course/theme): Okabe-Ito
 * blue and vermillion on near-white paper, with the bluish green for a
 * right answer. Tokens first; everything below uses only the tokens. */

:root {
  --ink: #2b2f33;
  --ink-2: #5d6670;
  --paper: #fafafa;
  --card: #ffffff;
  --line: #e2e5e9;
  --line-2: #cfd4da;
  --accent: #0072b2;
  --accent-ink: #ffffff;
  --accent-soft: #e5f0f8;
  --link: #12508c;
  --right: #00805c;
  --right-soft: #e0f3ec;
  --wrong: #c25400;
  --wrong-soft: #fbeadf;
  --stop: #e69f00;
  --stop-soft: #fdf3dc;
  --shadow: 0 1px 2px rgba(20, 30, 40, 0.06), 0 2px 8px rgba(20, 30, 40, 0.05);
  --radius: 10px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e6e8eb;
    --ink-2: #a3acb6;
    --paper: #15181b;
    --card: #1d2125;
    --line: #2d3238;
    --line-2: #3c434a;
    --accent: #56b4e9;
    --accent-ink: #0d1114;
    --accent-soft: #1b2b38;
    --link: #8cc8f0;
    --right: #3fc79d;
    --right-soft: #16302a;
    --wrong: #f08a45;
    --wrong-soft: #3a2518;
    --stop: #f0b429;
    --stop-soft: #352b14;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  }
}

html, body { background: var(--paper); }
body {
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.lab-root { padding: 0; }
a { color: var(--link); }
/* Bootstrap's inline code is near-black: unreadable on the dark theme. */
code {
  font-family: var(--mono); font-size: 0.9em; padding: 0 0.25em; border-radius: 4px;
  color: var(--ink); background: var(--paper); border: 1px solid var(--line);
}
h1, h2, h3 { color: var(--ink); font-weight: 650; letter-spacing: -0.01em; }
h1 { font-size: 1.9rem; margin: 0.4rem 0 0.6rem; }
h2 { font-size: 1.35rem; margin: 2rem 0 0.8rem; }
h3 { font-size: 1.1rem; margin: 0.2rem 0 0.4rem; }
.lab-muted { color: var(--ink-2); font-size: 0.92rem; }

/* -- top bar ------------------------------------------------------------- */

.lab-topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.6rem 1.25rem;
  background: var(--card); border-bottom: 1px solid var(--line);
}
.lab-brand { display: flex; flex-direction: column; text-decoration: none; line-height: 1.15; margin-right: auto; }
.lab-menu-toggle {
  display: none; align-items: center; gap: 0.45rem; font: inherit; font-size: 0.9rem; font-weight: 600;
  background: var(--card); color: var(--ink); border: 1px solid var(--line-2); border-radius: 8px; padding: 0.3rem 0.7rem; cursor: pointer;
}
.lab-menu-bars { width: 1rem; height: 0.7rem; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; position: relative; }
.lab-menu-bars::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid currentColor; transform: translateY(-50%); }
.lab-brand-name { font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.lab-brand-sub { color: var(--ink-2); font-size: 0.78rem; }
.lab-status { display: flex; align-items: center; gap: 1rem; font-size: 0.88rem; }
.lab-status a { text-decoration: none; }
.lab-codelink { color: var(--link); }

/* -- layout -------------------------------------------------------------- */

.lab-main { max-width: 1520px; margin: 0 auto; padding: 1.25rem 1.25rem 4rem; }
.lab-hero, .lab-main > section, .lab-main > .lab-fold { max-width: 880px; }
.lab-narrow { max-width: 620px; }
.lab-hero { padding: 0.5rem 0 0.5rem; }
.lab-lede { font-size: 1.08rem; color: var(--ink-2); max-width: 46rem; }
.lab-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.lab-section-head h1, .lab-section-head h2 { margin-bottom: 0.4rem; }

.lab-pkgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.lab-pkg {
  display: flex; flex-direction: column; gap: 0.35rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.1rem; box-shadow: var(--shadow);
}
.lab-pkg h3 a { color: var(--ink); text-decoration: none; }
.lab-pkg p { margin: 0; font-size: 0.95rem; }
.lab-pkg .btn-lab { align-self: flex-start; margin-top: 0.5rem; }
.lab-pkg.is-locked { box-shadow: none; background: transparent; border-style: dashed; }
.lab-eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--accent); font-weight: 700; }
.lab-reading { font-size: 0.92rem; color: var(--ink-2); }
.lab-progress { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 0.4rem; }
.lab-progress-fill { display: block; height: 100%; background: var(--right); }

.lab-practice-list { padding-left: 1.2rem; }
.lab-practice-list li { margin: 0.25rem 0; }

/* -- progress ------------------------------------------------------------- */

.lab-progress-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 1.5rem; }
.lab-progress-grid h3 { margin-top: 0.8rem; }
.lab-progress-table td:first-child { width: 40%; }
.lab-cell-bar { display: flex; align-items: center; gap: 0.5rem; }
.lab-cell-bar .lab-progress { flex: 1; min-width: 3rem; margin-top: 0; }
.lab-cell-bar .lab-muted { white-space: nowrap; font-size: 0.82rem; }
.lab-suggestion { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; background: var(--accent-soft); border-radius: 8px; padding: 0.55rem 0.85rem; }
.btn-lab.btn-lab-small, .btn-lab-small:visited { font-size: 0.85rem; padding: 0.22rem 0.7rem; }

/* -- practice form ---------------------------------------------------------- */

.lab-practice-form .form-group, .lab-practice-form .shiny-input-container { width: 100%; margin-bottom: 1rem; }
.lab-practice-form .control-label { font-weight: 650; }
.lab-practice-form .shiny-options-group { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; }
.lab-fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.6rem 1rem 0.2rem; margin: 0 0 1rem; }
.lab-fieldset legend { font-size: 1rem; font-weight: 650; float: none; width: auto; padding: 0 0.3rem; margin: 0; }
.lab-fieldset .shiny-input-container { margin-bottom: 0.5rem; }
.lab-fieldset .control-label { font-weight: 500; }
.lab-about ul { padding-left: 1.2rem; }
.lab-about li { margin: 0.3rem 0; }

/* -- a package: the contents on the left, one step at a time --------------- */

.lab-crumbs { font-size: 0.88rem; color: var(--ink-2); }
.lab-crumbs a { text-decoration: none; }
.lab-crumbs a.is-current { color: var(--ink); font-weight: 600; }

/* The teacher's answer sheets: every key and suggested solution. */
.lab-sheet-set { margin-top: 1.8rem; }
.lab-sheet-set > h2 { margin-bottom: 0.4rem; }
.lab-sheet-q { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 0.8rem 1rem; margin: 0.8rem 0; }
.lab-sheet-head { font-size: 0.85rem; color: var(--ink-2); margin-bottom: 0.3rem; }
.lab-sheet-options li.is-key { color: var(--right); font-weight: 600; }
.lab-sheet-options li.is-key::after { content: " \2713"; }
.lab-sheet-key { margin: 0.4rem 0; }
.lab-sheet-solution { background: var(--right-soft); border-radius: 8px; padding: 0.5rem 0.8rem; margin: 0.5rem 0; }
.lab-sheet-solution > :last-child { margin-bottom: 0; }
.lab-sheet-figure { font-size: 0.9rem; color: var(--ink-2); }
.lab-sheet-q details { margin: 0.4rem 0; font-size: 0.93rem; }
.lab-sheet-q dt { font-weight: 700; margin-top: 0.3rem; }
.lab-sheet-q dd { margin-left: 1.2rem; }
.lab-pkg-title { margin-bottom: 0.2rem; }
.lab-intro { color: var(--ink); }

.lab-shell { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 2.2rem; align-items: start; }
.lab-content { min-width: 0; max-width: 52rem; }
.lab-side { position: sticky; top: 4.4rem; max-height: calc(100vh - 5.2rem); overflow: auto; padding-bottom: 1rem; }
/* The panel on every page: four entries (RKB, 2026-10-13); exercises are
   chosen on the Exercises page, and a package has its own tabs and steps. */
.lab-side-nav { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.92rem; }

.lab-side-link { display: block; padding: 0.38rem 0.65rem; border-radius: 8px; text-decoration: none; color: var(--ink); }
.lab-side-link:hover { background: var(--card); }
.lab-side-link.is-current { background: var(--accent-soft); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }

.lab-side-top { font-weight: 600; }

.lab-next-help { margin: 0.6rem 0 0 !important; font-size: 0.9rem; }
.lab-aside-link { margin-left: 0.8rem; font-size: 0.92rem; }
.lab-lecture-summary { font-size: 0.9rem; margin: 0.1rem 0 0.2rem; }
.lab-lecture-summary p { margin: 0; }
.lab-data-notice { margin-top: 2rem; padding-top: 0.6rem; border-top: 1px solid var(--line);
  font-size: 0.88rem; color: var(--ink-2); }
.lab-data-notice h2 { font-size: 1rem; margin: 0 0 0.4rem; }
.lab-data-notice ul { padding-left: 1.2rem; margin: 0; }
.lab-data-notice li { margin: 0.25rem 0; }
.lab-tutor-number { font-weight: 600; font-variant-numeric: tabular-nums; margin-left: 0.3rem; }
.lab-model-fold { margin: 0.7rem 0 0; border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 0 0.9rem; }
.lab-model-fold > summary { cursor: pointer; padding: 0.55rem 0; font-weight: 600; }
.lab-model-fold[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 0.5rem; }

.lab-part-head { margin-bottom: 0.2rem; }

/* Inside a package: where it is, its parts as tabs, a part's sets as steps. */
.lab-pkg-nav { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.9rem; }
.lab-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 1px solid var(--line); }
.lab-tab { padding: 0.35rem 0.8rem; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; text-decoration: none; color: var(--ink-2); font-size: 0.92rem; margin-bottom: -1px; }
.lab-tab:hover { color: var(--ink); background: var(--card); }
.lab-tab.is-current { color: var(--ink); background: var(--paper); border-color: var(--line); font-weight: 600; }
.lab-tab-done { color: var(--right); font-weight: 700; }
.lab-stepper { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0.8rem 0 0.2rem; padding: 0; }
.lab-step-link { display: inline-flex; align-items: center; gap: 0.45rem; text-decoration: none; color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 0.15rem 0.2rem; background: var(--card); }
.lab-step-link:hover { border-color: var(--accent); color: var(--ink); }
.lab-step-n { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; border-radius: 50%; font-size: 0.82rem; font-weight: 700; font-variant-numeric: tabular-nums; border: 1.5px solid var(--line-2); }
.lab-step-title { display: none; font-size: 0.88rem; padding-right: 0.55rem; }
.lab-step-link.is-current { border-color: var(--accent); color: var(--ink); background: var(--accent-soft); }
.lab-step-link.is-current .lab-step-title { display: inline; font-weight: 600; }
.lab-step-link.is-partial .lab-step-n { background: linear-gradient(90deg, var(--accent-soft) 50%, transparent 50%); border-color: var(--accent); }
.lab-step-link.is-filled .lab-step-n { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.lab-step-link.is-answered .lab-step-n { background: var(--right); border-color: var(--right); color: var(--paper); }
.lab-step-submit .lab-step-title { display: inline; padding-right: 0.55rem; }
.lab-lecture-parts { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; font-size: 0.9rem; margin: 0.15rem 0 0.25rem; }
.lab-part-title { margin: 0.1rem 0 0.45rem; }
.lab-part-reading { margin: -0.2rem 0 0.5rem; }
.lab-chip { display: inline-block; font-size: 0.78rem; border: 1px solid var(--line-2); border-radius: 999px; padding: 0.05rem 0.6rem; color: var(--ink-2); }
.lab-chip.is-done { border-color: var(--right); color: var(--right); font-weight: 600; }
.lab-step[hidden] { display: none; }
.lab-step > .lab-set:first-child { margin-top: 1rem; }
.lab-step-nav {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  margin: 2rem 0 0.5rem; padding-top: 1rem; border-top: 1px solid var(--line);
}
.lab-step-prev { text-decoration: none; font-size: 0.92rem; }
.lab-submit-step {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.3rem 1.4rem 1.2rem; margin-top: 1.2rem; box-shadow: var(--shadow);
}
.lab-submit-step h2 { margin-top: 0.9rem; }
.lab-submit-step.is-submitted { border-left: 4px solid var(--right); }
.lab-submit-summary { color: var(--ink-2); margin: 0.5rem 0; }

.lab-hint-toggle { margin-top: 0.7rem; font-size: 0.93rem; }
.lab-hint-toggle summary { cursor: pointer; color: var(--link); width: max-content; }
.lab-hint-toggle[open] { background: var(--stop-soft); border-radius: 8px; padding: 0.4rem 0.8rem; }
.lab-hint-toggle > :last-child { margin-bottom: 0; }

.lab-fold { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 0 1rem; margin: 1.6rem 0 0; }
.lab-fold > summary { cursor: pointer; padding: 0.7rem 0; display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; align-items: baseline; }
.lab-fold-title { font-weight: 650; font-size: 1.08rem; color: var(--ink); }
.lab-howto ul, .lab-part-list { padding-left: 1.2rem; }
.lab-howto li, .lab-part-list li { margin: 0.4rem 0; }
.lab-model { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.4rem 1.3rem; }
.lab-done-note { color: var(--right); font-size: 0.9rem; }

/* Asking for a question to be discussed in class. */
.lab-card-head .lab-flag { margin-left: auto; }
.lab-flag {
  display: inline-flex; align-items: center; gap: 0.3rem; font: inherit; font-size: 0.8rem;
  border: 1px solid transparent; background: transparent; color: var(--ink-2);
  border-radius: 999px; padding: 0.05rem 0.55rem; cursor: pointer;
}
.lab-flag:hover { border-color: var(--line-2); color: var(--ink); }
.lab-flag.is-on { border-color: var(--stop); background: var(--stop-soft); color: var(--ink); font-weight: 600; }
.lab-flag-mark { font-size: 0.95rem; line-height: 1; }

/* The part's tools: the model and the Explorer, at hand. */
.lab-part-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.lab-tool {
  font: inherit; font-size: 0.85rem; border: 1px solid var(--line-2); background: var(--card);
  color: var(--ink); border-radius: 999px; padding: 0.12rem 0.7rem; cursor: pointer; text-decoration: none;
}
.lab-tool:hover { border-color: var(--accent); color: var(--ink); }
.lab-dialog {
  width: min(46rem, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink);
  box-shadow: var(--shadow);
}
.lab-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.lab-dialog > header {
  position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.7rem 1.2rem; background: var(--card); border-bottom: 1px solid var(--line);
}
.lab-dialog > header h2 { margin: 0; font-size: 1.15rem; }
.lab-model-text { padding: 0.4rem 1.2rem 1.2rem; }

/* The model's description and its inputs: tables that fit the column. */
.lab-model table { border-collapse: collapse; width: 100%; font-size: 0.9rem; margin: 0.5rem 0 1rem; display: block; overflow-x: auto; }
.lab-model th, .lab-model td { border-bottom: 1px solid var(--line); padding: 0.32rem 0.55rem; text-align: left; vertical-align: top; }
.lab-model th { font-weight: 650; color: var(--ink-2); font-size: 0.82rem; }
.lab-model-inputs td:not(:first-child), .lab-model-inputs th:not(:first-child) { font-variant-numeric: tabular-nums; }
.lab-model-given { margin-top: 1.4rem; }
.lab-model-given > h3 { font-size: 1.05rem; margin: 0 0 0.4rem; }

.lab-next {
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: var(--radius); padding: 0.75rem 1.2rem 1rem; margin: 0.4rem 0 1.2rem; box-shadow: var(--shadow);
}
.lab-next h2 { margin: 0.15rem 0 0.3rem; font-size: 1.3rem; }
.lab-next p { margin: 0 0 0.7rem; }
.lab-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 0 1rem; }
.lab-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.3rem 1.1rem 1rem; margin-bottom: 1rem; }
.lab-panel h2 { font-size: 1.08rem; margin: 0.7rem 0 0.6rem; }
.lab-panel h3 { font-size: 0.95rem; margin: 0.4rem 0 0; }
.lab-lecture-rows { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.lab-lecture-row { display: grid; gap: 0.15rem; }
.lab-lecture-row .lab-progress { margin-top: 0.2rem; }
.lab-lecture-row.is-locked { opacity: 0.7; }
.lab-lecture-title { font-weight: 600; text-decoration: none; color: var(--ink); }
a.lab-lecture-title:hover { color: var(--link); }
.lab-plain { list-style: none; padding: 0; margin: 0 0 0.7rem; }
.lab-plain li { margin: 0.45rem 0; }
.lab-tutor-note { padding: 0.45rem 0; border-top: 1px solid var(--line); }
.lab-tutor-note:first-child { border-top: 0; }
.lab-tutor-note a { font-weight: 600; }
.lab-tutor-note p { margin: 0.2rem 0 0; color: var(--ink-2); }
.lab-tutor-note p strong { color: var(--ink); }

/* -- cards ---------------------------------------------------------------- */

.lab-block { margin: 1.2rem 0; }
/* Tables written in a question's text (markdown): data, not decoration. */
.lab-block table, .lab-set-context table, .lab-prompt table, .lab-model table, .lab-intro table {
  border-collapse: collapse; margin: 0.7rem 0 0.9rem; font-size: 0.93rem;
}
.lab-block th, .lab-block td, .lab-set-context th, .lab-set-context td, .lab-prompt th, .lab-prompt td,
.lab-model th, .lab-model td, .lab-intro th, .lab-intro td {
  padding: 0.3rem 0.9rem 0.3rem 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top;
}
.lab-block th, .lab-set-context th, .lab-prompt th, .lab-model th, .lab-intro th { color: var(--ink-2); font-weight: 600; }
.lab-set { margin: 2rem 0 0; }
.lab-set + .lab-set { border-top: 1px solid var(--line); padding-top: 1.2rem; }
.lab-set-head h3 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.lab-set-context > :last-child { margin-bottom: 0.4rem; }
.lab-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.15rem 1.1rem; margin: 1.1rem 0; box-shadow: var(--shadow);
}
.lab-card.is-checkpoint { border-left: 4px solid var(--stop); }
.lab-card-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; font-size: 0.78rem; }
.lab-type { text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; color: var(--accent); }
.lab-pill { background: var(--stop-soft); color: var(--ink); border: 1px solid var(--stop); border-radius: 999px; padding: 0 0.55rem; font-weight: 600; }
.lab-prompt > :last-child { margin-bottom: 0.6rem; }

.lab-visual { margin: 0.6rem 0 0.9rem; }

/* A set with a figure: on a wide screen the figure stands beside the
   questions and stays in view while they are answered; the content column
   widens to the right only while such a set is on screen. */
@media (min-width: 1340px) {
  .lab-content:has(.lab-step:not([hidden]) .lab-set.has-figure) { max-width: none; }
  .lab-step:not([hidden]):has(.lab-set.has-figure) > :not(.lab-set) { max-width: 52rem; }
  .lab-set.has-figure { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); column-gap: 1.6rem; }
  .lab-set.has-figure > * { grid-column: 1; }
  .lab-set.has-figure > .lab-set-figures {
    grid-column: 2; grid-row: 1 / span 60; align-self: start; position: sticky; top: 4.6rem;
    max-height: calc(100vh - 5.4rem); overflow-y: auto;
  }
  .lab-set-figures .lab-block { margin-top: 0; }
}
.lab-image { max-width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line); background: #fff; }
.lab-embed { width: 100%; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.lab-visual figcaption { font-size: 0.85rem; color: var(--ink-2); margin-top: 0.3rem; }
/* Where the figure is in the Explorer, as the worksheet's box says it. */
.lab-explorer-where { font-size: 0.85rem; background: var(--accent-soft); border-radius: 6px;
  padding: 0.3rem 0.65rem; margin: 0.4rem 0 0; }

.lab-options { display: flex; flex-direction: column; gap: 0.45rem; }
.lab-option {
  display: flex; gap: 0.7rem; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px; padding: 0.55rem 0.75rem; margin: 0;
}
.lab-option:hover { border-color: var(--line-2); }
.lab-option input { margin-top: 0.35rem; accent-color: var(--accent); flex: none; }
.lab-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
/* Once revealed, right and wrong outrank "selected": a correct pick is green. */
.lab-option.is-key, .lab-option.is-key:has(input:checked) { border-color: var(--right); background: var(--right-soft); }
.lab-option.is-wrong, .lab-option.is-wrong:has(input:checked) { border-color: var(--wrong); background: var(--wrong-soft); }
.lab-option-text .katex { font-size: 1.05em; }
.is-done .lab-option, .lab-option:has(input:disabled) { cursor: default; }

.lab-numeric { display: flex; align-items: center; gap: 0.5rem; }
.lab-number {
  width: 11rem; font: inherit; font-variant-numeric: tabular-nums; padding: 0.4rem 0.6rem;
  border: 1px solid var(--line-2); border-radius: 8px; background: var(--card); color: var(--ink);
}
.lab-number:focus, .lab-textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.lab-unit { color: var(--ink-2); }

.lab-predict { display: flex; flex-direction: column; gap: 0.5rem; }
.lab-predict-row { display: grid; grid-template-columns: 1fr auto; gap: 0.75rem; align-items: center; padding: 0.35rem 0; border-bottom: 1px solid var(--line); }
.lab-predict-row:last-child { border-bottom: 0; }
.lab-segs { display: inline-flex; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; }
.lab-seg { margin: 0; cursor: pointer; }
.lab-seg input { position: absolute; opacity: 0; pointer-events: none; }
.lab-seg span { display: block; padding: 0.3rem 0.7rem; font-size: 0.88rem; border-left: 1px solid var(--line-2); }
.lab-seg:first-child span { border-left: 0; }
.lab-seg input:checked + span { background: var(--accent); color: var(--accent-ink); }
.lab-seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }
.lab-seg.is-key span { background: var(--right-soft); color: var(--ink); box-shadow: inset 0 0 0 2px var(--right); }
.lab-seg.is-key input:checked + span { background: var(--right); color: var(--accent-ink); box-shadow: none; }
.lab-seg.is-wrong input:checked + span { background: var(--wrong-soft); color: var(--ink); box-shadow: inset 0 0 0 2px var(--wrong); }

.lab-rank { padding-left: 1.6rem; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.lab-rank-item { border: 1px solid var(--line); border-radius: 8px; padding: 0.4rem 0.4rem 0.4rem 0.7rem; display: flex; align-items: center; gap: 0.5rem; }
.lab-rank-item::marker { color: var(--ink-2); font-weight: 600; }
.lab-rank-text { flex: 1; }
.lab-rank-buttons button {
  font: inherit; width: 2rem; height: 2rem; border-radius: 6px; border: 1px solid var(--line-2);
  background: var(--card); color: var(--ink); cursor: pointer;
}
.lab-rank-buttons button:disabled { opacity: 0.35; cursor: default; }

.lab-textarea {
  width: 100%; font: inherit; padding: 0.6rem 0.75rem; border: 1px solid var(--line-2);
  border-radius: 8px; background: var(--card); color: var(--ink); resize: vertical;
}
.lab-answer-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 1rem; margin-top: 0.3rem; }
.lab-math-hint { font-size: 0.8rem; color: var(--ink-2); margin: 0; }
.lab-wordcount { margin-left: auto; font-size: 0.8rem; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lab-wordcount.is-over { color: var(--wrong); font-weight: 600; }
/* A student's text, typeset by lab.js: line breaks as typed. */
.lab-preview, .lab-mathtext { white-space: pre-wrap; overflow-wrap: anywhere; }
.lab-preview {
  margin-top: 0.5rem; padding: 0.5rem 0.75rem; border: 1px dashed var(--line-2);
  border-radius: 8px; overflow-x: auto;
}
.lab-preview::before { content: "Preview"; display: block; font-size: 0.75rem; color: var(--ink-2); margin-bottom: 0.15rem; }
.lab-preview .katex-display, .lab-mathtext .katex-display { margin: 0.3em 0; }

.lab-actions { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.8rem; }
.lab-error { color: var(--wrong); font-size: 0.9rem; }
.btn-lab, .btn-lab:visited {
  display: inline-block; font: inherit; font-size: 0.95rem; font-weight: 600;
  padding: 0.42rem 1rem; border-radius: 8px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--accent-ink); text-decoration: none; cursor: pointer;
}
.btn-lab:hover { filter: brightness(1.07); color: var(--accent-ink); }
.btn-lab:disabled { opacity: 0.55; cursor: progress; }
/* Checking a draft with the tutor: a step on the way, not the submission. */
.btn-lab.btn-lab--quiet, .btn-lab--quiet:visited { background: transparent; color: var(--accent); }
.btn-lab--quiet:hover { color: var(--accent); background: var(--accent-soft); filter: none; }
.btn-lab--quiet:disabled:not([data-busy]) { cursor: not-allowed; }
.lab-actions { flex-wrap: wrap; }
.lab-check-left { font-size: 0.85rem; }

.lab-feedback:empty { display: none; }
.lab-feedback { margin-top: 0.8rem; }
.lab-verdict { margin: 0.2rem 0; }
.lab-verdict.is-right strong { color: var(--right); }
.lab-verdict.is-wrong strong { color: var(--wrong); }
.lab-hint, .lab-explain, .lab-reveal, .lab-key, .lab-rubric {
  border-radius: 8px; padding: 0.6rem 0.85rem; margin-top: 0.6rem;
}
.lab-hint { background: var(--stop-soft); }
.lab-explain { background: var(--accent-soft); }
.lab-key { background: var(--right-soft); }
.lab-reveal { border: 1px solid var(--line); }
.lab-rubric { border: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.4rem; }
.lab-rubric .btn-lab { align-self: flex-start; margin-top: 0.3rem; }
.lab-explain > :last-child, .lab-hint > :last-child, .lab-reveal > :last-child { margin-bottom: 0; }
.lab-class { color: var(--ink-2); font-size: 0.9rem; margin: 0.7rem 0 0.2rem; }

.lab-tutor { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 8px; padding: 0.6rem 0.85rem; margin-top: 0.6rem; }
.lab-tutor > :last-child { margin-bottom: 0; }
.lab-tutor p { margin: 0.25rem 0; }
.lab-tutor.is-pending { display: flex; align-items: center; gap: 0.7rem; color: var(--ink-2); }
.lab-tutor-note { font-size: 0.8rem; margin-top: 0.5rem; }
.lab-spinner { flex: none; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent); animation: lab-spin 0.9s linear infinite; }
@keyframes lab-spin { to { transform: rotate(360deg); } }

.lab-bars { margin-top: 0.4rem; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; }
.lab-bars-title { color: var(--ink-2); margin: 0.2rem 0; }
.lab-bar { display: grid; grid-template-columns: minmax(0, 1.6fr) 2fr 3rem; gap: 0.6rem; align-items: center; }
.lab-bar-label { overflow: hidden; text-overflow: ellipsis; }
.lab-bar-track { height: 10px; background: var(--line); border-radius: 5px; overflow: hidden; }
.lab-bar-fill { display: block; height: 100%; background: var(--ink-2); border-radius: 5px; }
.lab-bar-fill.is-key { background: var(--right); }
.lab-bar-value { text-align: right; font-variant-numeric: tabular-nums; }
.lab-bars.is-large { font-size: 1.15rem; gap: 0.7rem; }
.lab-bars.is-large .lab-bar-track { height: 22px; border-radius: 6px; }

/* -- code page, teacher ------------------------------------------------------ */

.lab-code { font-family: var(--mono); font-size: 1.6rem; letter-spacing: 0.08em; padding: 0.3rem 0.7rem; background: var(--card); border: 1px solid var(--line); border-radius: 8px; margin-right: 0.8rem; color: var(--ink); }
.lab-code-form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.lab-code-input { font-family: var(--mono); font-size: 1.1rem; padding: 0.4rem 0.6rem; border: 1px solid var(--line-2); border-radius: 8px; background: var(--card); color: var(--ink); width: 14rem; }

.lab-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin: 0.8rem 0 1.2rem; }
.lab-table th, .lab-table td { text-align: left; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--line); }
.lab-table th { color: var(--ink-2); font-weight: 600; }
.lab-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.lab-live { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.4rem; margin-top: 1rem; font-size: 1.1rem; }
.lab-open-answers blockquote { border-left: 3px solid var(--line-2); padding: 0.3rem 0.8rem; margin: 0.6rem 0; }
.lab-assessment { border-bottom: 1px solid var(--line); padding-bottom: 0.4rem; }
.lab-assessment p { margin: 0.2rem 0 0.4rem; font-size: 0.95rem; }

@media (max-width: 900px) {
  .lab-shell { grid-template-columns: 1fr; gap: 1rem; }
  .lab-side { position: static; max-height: none; display: none; }
  body.lab-menu-open .lab-side { display: block; }
  .lab-menu-toggle { display: inline-flex; order: -1; margin-right: 0.6rem; }
  body:not(:has(#lab-side)) .lab-menu-toggle { display: none; }   /* the sign-in page: no panel to open */
  .lab-topbar { justify-content: flex-start; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .lab-topbar { padding: 0.5rem 0.75rem; }
  .lab-brand-sub { display: none; }
  .lab-predict-row { grid-template-columns: 1fr; }
  .lab-bar { grid-template-columns: 1fr 1.2fr 2.6rem; }
}
@media (prefers-reduced-motion: reduce) { .lab-spinner { animation-duration: 3s; } }

/* -- the review session (review_app.py) --------------------------------------- */

.rv-main { max-width: 980px; }
.rv-prompt { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.8rem 1rem; margin: 0.8rem 0 0.4rem; }
.rv-prompt details { font-size: 0.92rem; color: var(--ink-2); }
.rv-help { margin: 0.6rem 0 1rem; font-size: 0.95rem; }
.rv-help summary { cursor: pointer; font-weight: 600; }
.rv-index td { vertical-align: top; }

.rv-material { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.4rem 1rem 1rem; }
.rv-material fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 0.4rem 0.8rem 0.6rem; margin: 0.8rem 0; }
.rv-material legend { font-size: 0.95rem; font-weight: 650; float: none; width: auto; padding: 0 0.3rem; margin: 0; }
.rv-material label { display: block; margin: 0.3rem 0; }
.rv-label { display: block; font-weight: 650; font-size: 0.95rem; margin: 0.6rem 0 0.2rem; }
.rv-input {
  width: 100%; font: inherit; font-size: 0.93rem; padding: 0.35rem 0.55rem; border: 1px solid var(--line-2);
  border-radius: 6px; background: var(--paper); color: var(--ink); resize: vertical;
}
.rv-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.rv-scoring label { font-size: 0.93rem; }
.rv-row { display: grid; gap: 0.4rem; align-items: start; margin: 0.35rem 0; }
.rv-row--rubric { grid-template-columns: minmax(0, 1fr) auto auto auto; }
.rv-row--misconception { grid-template-columns: minmax(0, 1fr) auto; }
.rv-stack { display: flex; flex-direction: column; gap: 0.3rem; }
.rv-row--hint { grid-template-columns: minmax(0, 1fr) auto; }
.rv-row label { display: flex; align-items: center; gap: 0.3rem; margin: 0; font-size: 0.85rem; color: var(--ink-2); white-space: nowrap; }
.rv-weight { width: 4rem; font: inherit; font-size: 0.9rem; padding: 0.2rem 0.3rem; border: 1px solid var(--line-2); border-radius: 6px; background: var(--paper); color: var(--ink); }
.rv-remove-row, .rv-delete { font: inherit; font-size: 0.85rem; border: 1px solid var(--line-2); background: transparent; color: var(--ink-2); border-radius: 6px; padding: 0.15rem 0.5rem; cursor: pointer; }
.rv-remove-row:hover, .rv-delete:hover { border-color: var(--wrong); color: var(--wrong); }
.rv-delete[data-armed] { border-color: var(--wrong); color: var(--wrong); font-weight: 600; }
.rv-level { display: grid !important; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0.4rem; align-items: start; }
.rv-level-n { font-weight: 700; color: var(--accent); padding-top: 0.35rem; font-variant-numeric: tabular-nums; }
.rv-level .rv-input::placeholder { color: var(--ink-2); opacity: 0.7; }
.rv-notes label { display: inline-flex; gap: 0.3rem; margin-right: 1rem; }
.rv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.6rem; }
.rv-status { font-size: 0.88rem; color: var(--ink-2); }
.rv-status.is-ok { color: var(--right); }
.rv-status.is-error { color: var(--wrong); }

.rv-agreement { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.2rem 1rem 0.6rem; }
.rv-agreement p { margin: 0.3rem 0; }
.rv-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.7rem 0.9rem 0.8rem; margin: 0.8rem 0; box-shadow: var(--shadow); }
.rv-card[data-dirty] { border-color: var(--stop); }
.rv-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.rv-chip { font-size: 0.75rem; border: 1px solid var(--line-2); border-radius: 999px; padding: 0 0.55rem; color: var(--ink-2); }
.rv-chip.is-anchor { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.rv-chip.is-graded { border-color: var(--right); color: var(--ink); background: var(--right-soft); }
.rv-answer { margin: 0.2rem 0 0.4rem; padding: 0.45rem 0.8rem; border-left: 3px solid var(--line-2); background: var(--paper); border-radius: 6px; }
.rv-tutor-box { margin-top: 0.4rem; border-top: 1px solid var(--line); padding-top: 0.45rem; }
.rv-tutor-box > summary { cursor: pointer; font-size: 0.92rem; font-weight: 600; color: var(--ink-2); }
.rv-tutor-box[open] > summary { color: var(--ink); }
.rv-comment { margin-top: 0.5rem; }
.rv-comment .rv-actions { margin-top: 0.3rem; }
.rv-earlier { font-size: 0.88rem; color: var(--ink-2); margin-top: 0.3rem; }
.rv-earlier summary { cursor: pointer; }
.rv-card-tools { justify-content: flex-end; border-top: 1px dashed var(--line); padding-top: 0.45rem; }
.rv-small { font: inherit; font-size: 0.85rem; border: 1px solid var(--line-2); background: transparent; color: var(--ink); border-radius: 6px; padding: 0.15rem 0.55rem; cursor: pointer; }
.rv-small:hover { border-color: var(--accent); }
.rv-small:disabled { opacity: 0.5; cursor: default; }
.rv-fold { margin: 1rem 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.55rem 0.9rem; }
.rv-fold > summary { cursor: pointer; font-weight: 650; }
.rv-fold > .rv-card, .rv-fold > .rv-material { border: 0; box-shadow: none; padding: 0; margin: 0.5rem 0 0; background: transparent; }
.rv-agreement .btn-lab { margin: 0.2rem 0 0.4rem; }
.rv-dirty { display: none; font-size: 0.75rem; color: var(--ink); background: var(--stop-soft); border: 1px solid var(--stop); border-radius: 999px; padding: 0 0.55rem; }
[data-dirty] > .rv-card-head .rv-dirty { display: inline; }
.rv-grade { display: flex; flex-wrap: wrap; align-items: end; gap: 0.6rem; margin: 0.5rem 0; }
.rv-grade label { margin: 0; font-size: 0.9rem; }
.rv-grade .rv-label { margin: 0 0 0.15rem; font-size: 0.85rem; }
.rv-score { width: 5.5rem; font: inherit; padding: 0.25rem 0.4rem; border: 1px solid var(--line-2); border-radius: 6px; background: var(--paper); color: var(--ink); font-variant-numeric: tabular-nums; }
.rv-quicks { display: inline-flex; border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; }
.rv-quick { font: inherit; font-size: 0.85rem; border: 0; border-left: 1px solid var(--line-2); background: transparent; color: var(--ink); padding: 0.25rem 0.55rem; cursor: pointer; font-variant-numeric: tabular-nums; }
.rv-quick:first-child { border-left: 0; }
.rv-quick:hover { background: var(--accent-soft); }

.rv-tutor { border-left: 4px solid var(--accent); background: var(--paper); border-radius: 6px; padding: 0.5rem 0.75rem; margin-top: 0.6rem; font-size: 0.93rem; }
.rv-tutor p { margin: 0.25rem 0; }
.rv-tutor.is-stale { border-left-color: var(--line-2); opacity: 0.8; }
.rv-tutor.is-pending { display: flex; align-items: center; gap: 0.6rem; color: var(--ink-2); }
.rv-unsure { color: var(--wrong); }
.rv-diff { font-size: 0.82rem; border-radius: 999px; padding: 0 0.5rem; margin-left: 0.3rem; font-variant-numeric: tabular-nums; }
.rv-diff.is-ok { background: var(--right-soft); color: var(--ink); }
.rv-diff.is-off { background: var(--wrong-soft); color: var(--ink); }
.rv-points { list-style: none; padding: 0; margin: 0.3rem 0; }
.rv-points li { display: flex; gap: 0.45rem; align-items: baseline; margin: 0.15rem 0; }
.rv-mark { flex: none; width: 1.3rem; text-align: center; font-weight: 700; }
.rv-mark--yes { color: var(--right); }
.rv-mark--partly { color: var(--stop); }
.rv-mark--no, .rv-mark--none { color: var(--wrong); }
.rv-k { font-weight: 650; }
.rv-feedback > p { display: inline; }
.rv-meta { font-size: 0.78rem; }
.rv-add { border-style: dashed; box-shadow: none; }

@media (max-width: 980px) {
  .rv-grid { grid-template-columns: 1fr; }
}

/* -- exams (2026-10-26) --------------------------------------------------------- */

.lab-points { background: var(--accent-soft); border-color: var(--line-2); font-weight: 500; }
.lab-source { margin-right: 0.4rem; font-weight: 600; width: fit-content; justify-self: start; align-self: flex-start; }
.lab-source--ai { border-color: var(--stop); color: var(--ink); background: var(--stop-soft); }
.lab-source--past { border-color: var(--accent); color: var(--accent); }
.lab-source--reviewed { border-color: var(--right); color: var(--right); }
.lab-exam-about { background: var(--accent-soft); border-radius: var(--radius); padding: 0.7rem 1rem;
  margin: 0.8rem 0 1rem; }
.lab-exam-about p { margin: 0.3rem 0; }
.lab-exam-parts { margin-top: 0.8rem; max-width: 36rem; }
.lab-uncalibrated { font-size: 0.85rem; border-left: 3px solid var(--stop); padding: 0.2rem 0.6rem;
  background: var(--stop-soft); margin: 0.4rem 0 0; }
.lab-image-upload { margin: 0.6rem 0 0; padding: 0.6rem 0.8rem; border: 1px dashed var(--line-2);
  border-radius: var(--radius); }
.lab-image-upload p { margin: 0 0 0.4rem; }
.lab-image-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.lab-image-pick { cursor: pointer; }
.lab-image-preview { display: block; max-width: 100%; max-height: 360px; margin-top: 0.6rem;
  border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.lab-image-preview[hidden] { display: none; }
.rv-diagram { margin: 0.2rem 0 0.6rem; }
.rv-image { max-width: 100%; max-height: 320px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.rv-diagram figcaption { font-size: 0.85rem; color: var(--ink-2); }