/* ============================================================
   Practical pages: a lesson on the screen (S3 Engineering, Booklet 6). Uses the Engineering
   tokens from engineering-science.css. Calm: one loud colour, the yellow SAFETY mark. Accents
   and main buttons take the S3 banner's teal (as on the S3 hub); orange stays only for air in
   the drawings. Drawings are dark ink on a
   transparent ground, so every figure sits on a white card in both appearances.
   One-screen rule (site CLAUDE.md): each step fits 1180 x 760 (iPad landscape).
   ============================================================ */

/* S3 teal in place of Engineering orange. White on #006e74 6.03:1; #15110b on #5fd8de 10.3:1. */
body.pr-page { --eng-ink-accent: #006e74; --pr-main: #006e74; --pr-main-ink: #fff; --pr-main-hover: #0a5f57;
  --eng-border: rgba(0, 110, 116, .24); --border-accent: rgba(0, 110, 116, .30); --border-strong: rgba(0, 110, 116, .50);
  --pr-term: #e3f3f4; --pr-term-ink: #00585d; --pr-term-strong: #c9eaec; }
@media (prefers-color-scheme: dark) {
  body.pr-page { --eng-ink-accent: #5fd8de; --pr-main: #5fd8de; --pr-main-ink: #15110b; --pr-main-hover: #8fe6ea;
    --eng-border: rgba(95, 216, 222, .26); --border-accent: rgba(95, 216, 222, .32); --border-strong: rgba(95, 216, 222, .52);
    --pr-term: #10312f; --pr-term-ink: #8fe6ea; --pr-term-strong: #1a4a4d; }
}
.pr-page .cta { background: var(--pr-main); color: var(--pr-main-ink); }
.pr-page .cta:hover { background: var(--pr-main-hover); color: var(--pr-main-ink); }
.pr-page .cta:focus-visible { outline-color: var(--pr-main); }

.pr-page main.container { margin-top: .6rem; }

/* the one-screen rule: on a short landscape screen the banner becomes a strip */
@media (min-width: 821px) and (max-height: 900px) {
  .pr-page .band-banner { height: 76px; padding: 8px 90px; gap: 14px; }
  .pr-page .band-banner .bb-chip { width: 52px; height: 52px; border-radius: 13px; }
  .pr-page .band-banner .bb-chip svg { width: 42px; height: 42px; }
  .pr-page .band-banner h1 { font-size: 1.7rem; }
  .pr-page .band-banner p { display: none; }
}

.pr-page button, .pr-page textarea { font: inherit; font-size: max(1.125rem, 18px); }

/* ---- the bar: steps + SAFETY ---- */
.pr-bar { display: flex; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; margin: 0 0 .5rem; }
.pr-dots { display: flex; gap: .3rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.pr-dots button {
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--eng-border);
  background: var(--eng-surface); color: var(--eng-text); font-weight: 800; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; padding: 0;
}
.pr-dots .is-done button { background: var(--eng-surface-2); }
.pr-dots .is-now button { border-color: var(--eng-ink-accent); background: var(--eng-ink-accent); color: #fff; }
@media (prefers-color-scheme: dark) { .pr-dots .is-now button { color: #15110b; } }

.pr-safety {
  display: flex; align-items: center; gap: .5rem; margin: 0; flex: 1 1 300px;
  padding: .3rem .7rem; border-radius: 12px; min-height: 44px;
  background: #fff6cc; color: #2b2410; border: 2px solid #e8c200; font-weight: 600;
}
.pr-safety img { width: 30px; height: 30px; flex: none; }

/* ---- buttons ---- */
.pr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 48px; padding: .45rem 1rem; border-radius: 12px; font-weight: 700;
  border: 2px solid var(--eng-border); background: var(--eng-surface); color: var(--eng-text);
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; text-decoration: none;
}
.pr-btn-main { background: var(--pr-main); border-color: var(--pr-main); color: var(--pr-main-ink); }
.pr-btn-main:disabled { opacity: .55; cursor: default; }
.pr-btn-quiet { min-height: 48px; padding: .35rem .8rem; font-weight: 600; }
.pr-btn-check { border-color: var(--eng-ink-accent); color: var(--eng-ink-accent); }
.pr-btn-check:disabled { opacity: .5; cursor: default; }
.pr-btn-link { border-color: var(--eng-ink-accent); color: var(--eng-ink-accent); }
.pr-btn.is-armed { border-color: #b91c1c; color: #b91c1c; }
@media (prefers-color-scheme: dark) { .pr-btn.is-armed { border-color: #ff9d8a; color: #ff9d8a; } }
.pr-btn:disabled { cursor: default; }

/* ---- a screen ---- */
.pr-head { display: flex; align-items: baseline; gap: .3rem 1rem; flex-wrap: wrap; }
.pr-head h2 { margin: 0; font-size: 1.4rem; line-height: 1.3; }
.pr-meta { display: flex; gap: .5rem; margin: 0; flex-wrap: wrap; }
.pr-meta span { font-weight: 700; color: var(--eng-muted); }
.pr-meta span + span::before { content: "\00b7\00a0"; }
.pr-team { margin: .15rem 0 .45rem; }
.pr-p, .pr-q, .pr-team { margin: 0; }
.pr-q { font-weight: 700; }
.pr-marks { font-weight: 700; white-space: nowrap; }
.pr-main > * + *, .pr-items > * + *, .pr-panel > * + * { margin-top: .5rem; }

.pr-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: .9rem; align-items: start; }
.pr-body.is-single { grid-template-columns: minmax(0, 1fr); }
.pr-sidecol { min-width: 0; display: grid; gap: .5rem; }
.pr-main { min-width: 0; }

.pr-list { margin: 0; padding-left: 1.3rem; }
.pr-list li + li { margin-top: .2rem; }
.pr-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.pr-parts li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: .7rem; align-items: center; }
.pr-parts-pic { width: 64px; height: 52px; object-fit: contain; background: #fff; border-radius: 8px; padding: 3px; }

/* glossary words (teacher, 6 Oct): bold teal on a very pale highlight, no box round them, so they read as
   highlighted words and never as answer buttons (D5: no underline). An invisible ::after makes the tap target. */
.pr-term {
  position: relative; display: inline; padding: 0 .12em; margin: 0; min-height: 0; border: 0; border-radius: 3px;
  background: var(--pr-term); color: var(--pr-term-ink); font-weight: 700; text-decoration: none; line-height: inherit;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  cursor: help; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.pr-term::after { content: ""; position: absolute; inset: -.4em -.15em; }
.pr-pop {
  position: fixed; z-index: 60; width: min(340px, calc(100vw - 16px)); padding: .6rem .7rem;
  border-radius: 14px; border: 2px solid var(--eng-ink-accent); background: var(--eng-surface); color: var(--eng-text);
  box-shadow: var(--eng-shadow); display: grid; gap: .4rem;
}
.pr-pop p { margin: 0; font-size: max(1.125rem, 18px); }
.pr-pop-pic { background: #fff; border-radius: 10px; padding: .3rem; display: flex; justify-content: center; }
.pr-pop-pic img { max-height: 110px; width: auto; max-width: 100%; }
.pr-pop .pr-btn { justify-self: end; }

/* ---- the side panel ---- */
.pr-side { border: 1px solid var(--eng-border); border-radius: 16px; background: var(--eng-surface); padding: .5rem; min-width: 0; }
.pr-tabs { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .45rem; }
.pr-tab {
  flex: 1 1 auto; min-height: 44px; padding: .3rem .6rem; border-radius: 10px; font-weight: 700;
  border: 2px solid var(--eng-border); background: var(--eng-surface-2); color: var(--eng-text); cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.pr-tab[aria-selected="true"] { background: var(--eng-surface); border-color: var(--eng-ink-accent); box-shadow: inset 0 -3px 0 var(--eng-ink-accent); }
.pr-tab.is-waiting { border-style: dashed; border-color: var(--eng-ink-accent); }
.pr-panel { max-height: min(470px, calc(100vh - 385px)); overflow-y: auto; padding: .1rem; }
.pr-ch-top { margin: 0; }

.pr-fig { margin: 0; background: #fff; border-radius: 12px; padding: .5rem; display: flex; flex-direction: column;
  align-items: center; gap: .4rem; color: #211a0e; }
.pr-fig img { width: 100%; height: auto; max-height: 300px; object-fit: contain; }
.pr-fig.is-photo { padding: 0 0 .4rem; overflow: hidden; }
.pr-fig.is-photo img { border-radius: 12px 12px 0 0; max-height: 220px; object-fit: cover; }
/* captions sit on cream below the white drawing card (D6: no text on white) */
.pr-fig figcaption { font-size: max(1.125rem, 18px); align-self: stretch; margin: .4rem -.5rem -.5rem;
  padding: .4rem .7rem; background: #fffaf2; color: #2b2410; border-radius: 0 0 12px 12px; }
.pr-credit { display: block; font-size: max(.9rem, 14.4px); margin-top: .2rem; }
.pr-credit a { color: inherit; }
.pr-toggle { min-height: 48px; padding: .35rem .9rem; border-radius: 10px; font-weight: 700;
  border: 2px solid #006e74; background: #fffaf2; color: #004a4e; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

.pr-card { border: 1px solid var(--eng-border); border-radius: 16px; background: var(--eng-surface); padding: .55rem .7rem; min-width: 0; }
.pr-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .5rem; margin-bottom: .4rem; }
.pr-card-head img { width: 40px; height: 40px; background: #fff; border-radius: 8px; padding: 2px; }
.pr-card-head strong { font-size: 1.15rem; }
.pr-card-head .pr-linkline { margin: 0 0 0 auto; }
.pr-card-head .pr-btn-link { white-space: nowrap; padding-inline: .7rem; }

.pr-step { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: .55rem; align-items: center;
  padding: .35rem .55rem; border-radius: 10px; background: var(--eng-surface-2); cursor: pointer; min-height: 48px; }
.pr-step input { width: 28px; height: 28px; margin: 0; accent-color: var(--eng-ink-accent); }
.pr-step-pic { width: 52px; height: 40px; object-fit: contain; background: #fff; border-radius: 6px; }
.pr-step.is-safety { background: #fff6cc; color: #2b2410; border: 2px solid #e8c200; }
.pr-step.is-safety .pr-term { background: #ffe9a8; color: #2b2410; }
.pr-fig figcaption .pr-term { background: var(--pr-term-strong); }
.pr-step.is-booklet { background: transparent; border: 2px dashed var(--eng-border); }

.pr-linkline { display: flex; align-items: center; gap: .3rem .8rem; flex-wrap: wrap; margin: 0; }
.pr-link-note { color: var(--eng-muted); }

/* ---- questions ---- */
.pr-options { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }
.pr-option { min-height: 48px; min-width: 48px; padding: .35rem .85rem; border-radius: 10px; text-align: left;
  border: 2px solid var(--eng-border); background: var(--eng-surface); color: var(--eng-text); cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pr-option[aria-pressed="true"] { border-color: var(--eng-ink-accent); background: var(--eng-surface-2); font-weight: 700; }
.pr-option[aria-pressed="true"]::before { content: "\2713\00a0"; }
.pr-option:disabled { cursor: default; opacity: 1; }
.pr-option:disabled:not(.is-right):not(.is-wrong) { opacity: .6; }
.pr-option.is-right { border-color: #15803d; background: rgba(21, 128, 61, .10); font-weight: 700; }
.pr-option.is-right::before { content: "\2713\00a0"; }
.pr-option.is-wrong { border-color: #b91c1c; background: rgba(185, 28, 28, .08); }
.pr-option.is-wrong::before { content: "\2717\00a0"; }
@media (prefers-color-scheme: dark) {
  .pr-option.is-right { border-color: #6fd08c; background: rgba(111, 208, 140, .14); }
  .pr-option.is-wrong { border-color: #ff9d8a; background: rgba(255, 157, 138, .12); }
}
.pr-feedback { margin: .4rem 0 0; }
.pr-feedback:empty { display: none; }
.pr-feedback.is-right, .pr-feedback.is-wrong { padding: .4rem .6rem; border-radius: 10px; background: var(--eng-surface-2); }
.pr-feedback.is-right { border-left: 5px solid #15803d; }
.pr-feedback.is-wrong { border-left: 5px solid #b91c1c; }
@media (prefers-color-scheme: dark) {
  .pr-feedback.is-right { border-left-color: #6fd08c; }
  .pr-feedback.is-wrong { border-left-color: #ff9d8a; }
}

.pr-tap-row { display: flex; gap: .9rem; align-items: flex-start; }
.pr-tap-pic { width: 150px; max-height: 130px; object-fit: contain; background: #fff; border-radius: 10px; padding: 4px; flex: none; }
.pr-tap-right { min-width: 0; flex: 1; }

.pr-predict { border: 2px solid var(--eng-border); border-radius: 12px; padding: .45rem .7rem .55rem; margin: 0; }
.pr-predict legend { padding: 0 .3rem; font-size: max(1.125rem, 18px); }
.pr-saved { margin: .3rem 0 0; color: var(--eng-muted); font-weight: 600; }
.pr-saved:empty { display: none; }
div.pr-recall, p.pr-recall { border-left: 5px solid var(--eng-ink-accent); padding: .3rem .7rem; background: var(--eng-surface-2); border-radius: 0 10px 10px 0; }
.pr-recall { margin: 0; }
.pr-recall-label { font-weight: 700; color: var(--eng-ink-accent); }

.pr-write textarea, .pr-table textarea {
  width: 100%; margin-top: .3rem; padding: .4rem .55rem; border-radius: 10px; line-height: 1.5;
  border: 2px solid var(--eng-border); background: var(--eng-surface); color: var(--eng-text); resize: vertical;
}
.pr-write-tools { display: flex; flex-wrap: wrap; gap: .4rem; align-items: flex-start; margin-top: .35rem; }
.pr-ladder { display: contents; }
.pr-ladder-shown { flex-basis: 100%; order: 9; }
.pr-hint { margin: .3rem 0 0; padding: .35rem .6rem; border-radius: 10px; background: var(--eng-surface-2); }
.pr-tap .pr-ladder { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }
.pr-bank { margin-top: .4rem; padding: .45rem .55rem; border-radius: 12px; border: 2px dashed var(--eng-border); display: grid; gap: .35rem; }
.pr-chips { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.pr-chips-label { font-weight: 700; color: var(--eng-muted); margin-right: .2rem; }
.pr-chip { min-height: 44px; padding: .25rem .7rem; border-radius: 999px; border: 2px solid var(--eng-border);
  background: var(--eng-surface-2); color: var(--eng-text); cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pr-chip[aria-pressed="true"] { border-color: var(--eng-ink-accent); box-shadow: inset 0 0 0 2px var(--eng-ink-accent); font-weight: 700; }
.pr-chip:disabled { opacity: .4; cursor: default; text-decoration: line-through; }
.pr-model { margin-top: .45rem; }
.pr-model:empty { display: none; }
.pr-model { padding: .45rem .65rem; border-radius: 12px; border-left: 5px solid var(--eng-ink-accent); background: var(--eng-surface-2); }
.pr-model-head { margin: 0 0 .2rem; }
.pr-selfmark { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .4rem; }
.pr-selfmark .pr-option { margin: 0; }

.pr-table { width: 100%; border-collapse: separate; border-spacing: .4rem; margin: -.4rem; width: calc(100% + .8rem); }
.pr-table th { text-align: left; font-weight: 700; font-size: max(1.125rem, 18px); vertical-align: middle; }
.pr-table thead th { padding: 0 .2rem; }
.pr-table tbody th { width: 9.5em; }
.pr-table textarea { margin: 0; }

.pr-cloze-lines { margin: .3rem 0 0; padding-left: 1.4rem; display: grid; gap: .35rem; }
.pr-cloze-lines li { font-size: max(1.125rem, 18px); line-height: 2.2; }
.pr-gap { min-height: 44px; min-width: 7.5em; padding: .1rem .7rem; margin: 0 .2rem; border-radius: 10px;
  border: 2px dashed var(--eng-ink-accent); background: var(--eng-surface); color: var(--eng-muted); cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pr-gap.is-placed { border-style: solid; border-color: #15803d; color: var(--eng-text); font-weight: 700; cursor: default; }
.pr-gap.is-placed::before { content: "\2713\00a0"; }
@media (prefers-color-scheme: dark) { .pr-gap.is-placed { border-color: #6fd08c; } }

.pr-set-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .35rem; }
.pr-set-count { margin: 0; font-weight: 700; color: var(--eng-muted); }
.pr-set-nav { display: flex; gap: .4rem; }

.pr-rate { display: grid; gap: .5rem; }
.pr-rate-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem 1rem; align-items: center;
  padding: .25rem .6rem; border-radius: 12px; background: var(--eng-surface-2); }
.pr-rate-text { margin: 0; }
.pr-rate-row .pr-options { margin: 0; }
.pr-comeback .pr-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.pr-comeback .pr-list li + li { margin: 0; }

/* ---- Eyes on the board ---- */
.pr-pause { display: flex; align-items: center; gap: 1.2rem; padding: 1.2rem 1.4rem; margin-top: .4rem;
  border-radius: 18px; border: 3px solid var(--eng-ink-accent); background: var(--eng-surface); max-width: 760px; }
.pr-pause-pic { width: 130px; height: 130px; flex: none; background: #fff; border-radius: 16px; padding: 8px; }
.pr-pause-title { margin: 0 0 .3rem; font-size: 1.5rem; font-weight: 900; }
.pr-pause .pr-btn-main { margin-top: .7rem; min-width: 10rem; }

/* ---- bottom bar ---- */
.pr-nav { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.pr-tools, .pr-move { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; }
.pr-saved-note { color: var(--eng-muted); font-size: max(1.125rem, 18px); }
.pr-move .pr-btn { min-width: 7rem; }

.pr-page :is(button, a, textarea, input):focus-visible { outline: 3px solid var(--eng-ink-accent); outline-offset: 3px; }
.pr-screen h2:focus, .pr-q:focus, .pr-write label:focus { outline: none; }

@media (max-width: 820px) {
  .pr-body { grid-template-columns: minmax(0, 1fr); }
  
    .pr-panel { max-height: none; }
  .pr-tap-row { flex-direction: column; }
  .pr-rate-row { grid-template-columns: minmax(0, 1fr); }
  .pr-pause { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-page * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

.pr-page [hidden] { display: none !important; }

/* D6: cream, not white, behind text in light mode */
@media (prefers-color-scheme: light) { .pr-page { --eng-surface: #fffaf2; } }

/* ---- the instruction box: how you work (tag), up to 3 steps, Done when ----
   Each way of working has its own colour; text on cream is 5.3:1 or more, numbers white on it. */
.pr-do { --mode-c: var(--eng-ink-accent); display: grid; grid-template-columns: max-content minmax(0, 1fr);
  align-items: center; gap: .2rem 1rem; margin: .3rem 0 .55rem; padding: .4rem .8rem;
  border: 2px solid var(--mode-c); border-left-width: 8px; border-radius: 14px; background: var(--eng-surface); }
.pr-do.mode-own { --mode-c: #1d4f91; }
.pr-do.mode-partner { --mode-c: #6b3fa0; }
.pr-do.mode-team { --mode-c: #1f7a3d; }
.pr-do.mode-board { --mode-c: #9a3412; }
@media (prefers-color-scheme: dark) {
  .pr-do.mode-own { --mode-c: #9cc3ff; }
  .pr-do.mode-partner { --mode-c: #d0b3f5; }
  .pr-do.mode-team { --mode-c: #7fd69a; }
  .pr-do.mode-board { --mode-c: #ffb08a; }
}
.pr-mode { grid-row: span 2; display: flex; align-items: center; gap: .45rem; margin: 0; font-weight: 800;
  font-size: 1.2rem; color: var(--mode-c); }
.pr-mode-ic svg, .pr-done-ic svg { display: block; fill: none; stroke: var(--eng-text); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round; }
.pr-mode-ic svg { width: 44px; height: 44px; }
.pr-mode-ic .a { stroke: var(--mode-c); }
.pr-do-steps { list-style: none; margin: 0; padding: 0; counter-reset: st; display: flex; flex-wrap: wrap; gap: .2rem 1.3rem; }
/* the number sits outside the text, so a glossary word stays inline in its sentence */
.pr-do-steps li { counter-increment: st; position: relative; padding-left: 1.95em; font-weight: 700; }
.pr-do-steps li::before { content: counter(st); position: absolute; left: 0; top: 0; display: grid; place-items: center;
  width: 1.55em; height: 1.55em; border-radius: 50%; background: var(--mode-c); color: #fff; font-weight: 800; }
@media (prefers-color-scheme: dark) { .pr-do-steps li::before { color: #15110b; } }
.pr-do .pr-done, .pr-do .pr-team { display: flex; align-items: center; gap: .4rem; margin: 0; }
.pr-done-ic svg { width: 26px; height: 26px; stroke-width: 5; }
.pr-done-ic .a { stroke: #15803d; }
@media (prefers-color-scheme: dark) { .pr-done-ic .a { stroke: #6fd08c; } }
@media (max-width: 820px) {
  .pr-do { grid-template-columns: minmax(0, 1fr); }
  .pr-mode { grid-row: auto; }
  .pr-do-steps { flex-direction: column; }
}

/* ---- teacher view (projector): the same step, bigger, with a timer ---- */
.pr-gate { max-width: 26rem; margin: 1.5rem auto; padding: 1rem 1.2rem; border: 2px solid var(--eng-border);
  border-radius: 16px; background: var(--eng-surface); }
.pr-gate h2 { margin: 0 0 .6rem; }
.pr-gate label { font-weight: 700; }
.pr-gate-row { display: flex; gap: .5rem; margin-top: .3rem; }
.pr-gate input { flex: 1; min-width: 0; min-height: 48px; padding: .3rem .7rem; font: inherit; font-size: 1.4rem; letter-spacing: .3em;
  border: 2px solid var(--eng-border); border-radius: 12px; background: var(--eng-bg); color: var(--eng-text); }
.pr-gate-msg { min-height: 1.5em; margin: .5rem 0 0; font-weight: 700; }
/* Classroom screen: a 70-inch HD panel (1920 x 1080, or 1280 x 720) read from the back of the room.
   The teacher page sizes its root font from the screen width (1.3vw: 25px at 1920), so every rem
   here grows with it; the banner stays a thin strip and each step fits without scrolling. */
body.pr-teacher-page main.container { width: 96vw; }
.pr-teacher-page .band-banner { height: 3.6rem; min-height: 0; padding: .3rem 5rem; gap: .8rem; }
.pr-teacher-page .band-banner .bb-chip { width: 2.6rem; height: 2.6rem; border-radius: .6rem; }
.pr-teacher-page .band-banner .bb-chip svg { width: 2.1rem; height: 2.1rem; }
.pr-teacher-page .band-banner h1 { font-size: 1.6rem; }
.pr-teacher-page .band-banner p { display: none; }
.pr-teacher-page .pr-teach h2 { font-size: 1.8rem; }
.pr-teacher-page .pr-body:not(.is-single) { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.pr-teacher-page .pr-fig img { max-height: 40vh; }
.pr-teacher-page .pr-teach :is(p, li) { max-width: none; }
.pr-teacher-page .pr-fig img { max-height: 52vh; }
.pr-timer { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.pr-clock { margin: 0; min-width: 5ch; font-size: 3rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.pr-clock.is-over { color: #b91c1c; }
@media (prefers-color-scheme: dark) { .pr-clock.is-over { color: #ff9d8a; } }
.pr-teacher-page .pr-nav { margin-top: .3rem; row-gap: .3rem; }
.pr-teacher-page .pr-where { order: 2; flex: 0 0 100%; margin: 0; padding: .15rem .7rem; border-radius: 10px; background: var(--eng-surface-2); max-width: none; }

/* ============================================================
   One thing at a time (teacher, 6 Oct 2026; plan section 10, phase B)
   ============================================================ */
/* the site's corner counter and section meter compete with the lesson; the badge shows on Look back */
.pr-page .prog-counter, .pr-page #progMeter { display: none !important; }
body.pr-pupil { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }

/* ---- top row: the step's name, then Step 3 of 13 and a thin bar (tap to see every step) ---- */
.pr-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .4rem 1rem; }
.pr-top .pr-head { flex: 1 1 auto; min-width: 0; }
.pr-part { color: var(--eng-ink-accent) !important; }
.pr-steps { position: relative; flex: none; }
.pr-steps summary { list-style: none; display: grid; gap: .25rem; min-height: 44px; min-width: 11rem; padding: .3rem .7rem;
  border-radius: 12px; border: 1px solid var(--eng-border); cursor: pointer; font-weight: 700; color: var(--eng-muted);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pr-steps summary::-webkit-details-marker { display: none; }
.pr-steps-n::after { content: " \25BE"; }
.pr-steps-bar { display: block; height: 6px; border-radius: 999px; background: var(--eng-surface-2); overflow: hidden; }
.pr-steps-bar span { display: block; height: 100%; background: var(--eng-ink-accent); border-radius: inherit; }
.pr-steps-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; width: min(22rem, 90vw);
  max-height: min(70vh, 560px); overflow-y: auto; list-style: none; margin: 0; padding: .4rem; display: grid; gap: .2rem;
  border: 2px solid var(--eng-border); border-radius: 14px; background: var(--eng-surface); box-shadow: var(--eng-shadow); }
.pr-steps-list button { width: 100%; min-height: 44px; padding: .25rem .6rem; border: 0; border-radius: 10px; text-align: left;
  background: transparent; color: var(--eng-text); cursor: pointer; }
.pr-steps-list .is-now button { background: var(--eng-surface-2); font-weight: 800; box-shadow: inset 4px 0 0 var(--eng-ink-accent); }

/* ---- the instruction box's last row: Done when, and the step's SAFETY line on its yellow strip ---- */
.pr-do-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; }
.pr-do-foot .pr-done { flex: 1 1 18rem; }
.pr-do-foot .pr-safety { flex: 0 1 auto; min-height: 40px; padding: .15rem .6rem; border-radius: 10px; }
.pr-do-foot .pr-safety img { width: 26px; height: 26px; }

/* ---- Read card: a book mark, plain ground, nothing to tap but the key words ---- */
.pr-card-label { display: flex; align-items: center; gap: .4rem; margin: 0 0 .35rem; font-weight: 800; color: var(--eng-muted); }
.pr-label-ic svg { display: block; width: 30px; height: 30px; fill: none; stroke: var(--eng-text); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round; }
.pr-label-ic .a { stroke: var(--eng-ink-accent); }
.pr-read { padding: .6rem .8rem .7rem; border-radius: 16px; background: var(--eng-surface-2); border: 0; }
.pr-read > * + * { margin-top: .5rem; }
.pr-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: .7rem; align-items: start; }
.pr-row > * { margin: 0 !important; }

/* ---- Question card: a coloured top edge and a ? mark, so it never looks like the notes ---- */
.pr-qcard, .pr-main > .pr-write, .pr-main > .pr-predict { padding: .55rem .8rem .65rem; border-radius: 16px;
  border: 2px solid var(--eng-border); border-top: 6px solid var(--eng-ink-accent); background: var(--eng-surface); }
.pr-main > .pr-predict { padding-top: .3rem; }
.pr-qcard-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.pr-qcard-head .pr-card-label { margin: 0; color: var(--eng-ink-accent); }
.pr-qdots { display: flex; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.pr-qdots li { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--eng-border); }
.pr-qdots li.is-done { background: var(--eng-ink-accent); border-color: var(--eng-ink-accent); }
.pr-qdots li.is-now { box-shadow: 0 0 0 3px var(--eng-surface), 0 0 0 5px var(--eng-ink-accent); }
.pr-qcard .pr-q, .pr-main > .pr-write > .pr-q { font-size: 1.25rem; line-height: 1.4; }
.pr-qcard > .pr-tap, .pr-qcard > .pr-write { margin-top: .45rem; }
.pr-qcard-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .55rem; }
.pr-qcard-foot > :last-child { margin-left: auto; }
.pr-qcard-end { margin: 0; font-weight: 800; color: var(--eng-ink-accent); }
.pr-qcard-end:empty { display: none; }
.pr-qline { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .4rem .8rem; }
.pr-qline .pr-q { flex: 1 1 60%; }
.pr-qline .pr-help-btn { min-height: 44px; margin-left: auto; }
.pr-options.is-stacked { flex-direction: column; align-items: stretch; gap: .4rem; margin-top: .5rem; }
.pr-options.is-stacked .pr-option { width: 100%; }
.pr-options.is-stacked .pr-feedback { margin: 0; }
.pr-tap-pic { width: 130px; max-height: 120px; }

/* the in-card "go on" button: outlined until it is time, then filled */
.pr-btn-go { border-color: var(--eng-ink-accent); color: var(--eng-ink-accent); border-radius: 999px; padding-inline: 1.1rem; }
.pr-btn-go.is-ready { background: var(--pr-main); border-color: var(--pr-main); color: var(--pr-main-ink); }
.pr-part-back { align-self: flex-start; }

/* ---- one instruction at a time: the next line is bright, done lines grey, later lines dimmed ---- */
.pr-step { transition: opacity .2s; }
.pr-step.is-next { box-shadow: inset 0 0 0 3px var(--eng-ink-accent); }
.pr-step.is-ticked { opacity: .62; }
.pr-step.is-ticked .pr-step-text { text-decoration: line-through; text-decoration-thickness: 1px; }
.pr-step.is-later { opacity: .72; }

/* ---- your job big, your partner's as one line ---- */

/* ---- the side column: one panel in the picture's place ---- */
.pr-panel-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; }
.pr-panel-title { margin: 0; font-weight: 800; font-size: 1.2rem; color: var(--eng-ink-accent); }
.pr-panel-close { min-height: 44px; }
.pr-badge-line { padding: .45rem .7rem; border-radius: 12px; background: var(--eng-surface-2); }

/* ---- the toolbar, fixed to the foot of the screen ---- */
.pr-toolbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  padding: .45rem max(12px, env(safe-area-inset-right)) calc(.45rem + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: var(--eng-surface); border-top: 2px solid var(--eng-border); box-shadow: 0 -6px 18px rgba(0, 0, 0, .08); }
.pr-tb-inner { width: min(1100px, 100%); margin: 0 auto; display: flex; align-items: center; gap: .5rem; }
.pr-tb-left, .pr-tb-mid, .pr-tb-right { display: flex; align-items: center; gap: .4rem; }
.pr-tb-mid { flex: 1; justify-content: center; flex-wrap: wrap; }
.pr-tb-right { margin-left: auto; }
.pr-tb-toggle[aria-pressed="true"] { border-color: var(--eng-ink-accent); background: var(--eng-surface-2); box-shadow: inset 0 -3px 0 var(--eng-ink-accent); }
.pr-tb-toggle.is-waiting { border-style: dashed; border-color: var(--eng-ink-accent); }
.pr-tb-how { width: 48px; padding: 0; border-radius: 50%; font-weight: 900; }
.pr-more { position: relative; }
.pr-more summary { list-style: none; }
.pr-more summary::-webkit-details-marker { display: none; }
.pr-more summary::after { content: "\00a0\25B4"; }
.pr-more-menu { position: absolute; left: 0; bottom: calc(100% + 8px); width: max-content; max-width: 80vw; display: grid; gap: .35rem;
  padding: .5rem; border: 2px solid var(--eng-border); border-radius: 14px; background: var(--eng-surface); box-shadow: var(--eng-shadow); }
.pr-more-menu .pr-btn { justify-content: flex-start; }
.pr-more-menu .pr-saved-note { margin: .1rem .3rem 0; font-size: max(1rem, 16px); }
.pr-next { min-width: 9rem; border-color: var(--pr-main); color: var(--eng-ink-accent); font-weight: 800; }
.pr-next.is-ready { background: var(--pr-main); color: var(--pr-main-ink); }
.pr-next:disabled { opacity: .6; }
.pr-next.is-pulse { animation: pr-pulse 1.1s ease-out 1; }
@keyframes pr-pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 110, 116, .55); } 100% { box-shadow: 0 0 0 16px rgba(0, 110, 116, 0); } }
@media (max-width: 760px) {
  .pr-next-name { display: none; }
  .pr-next { min-width: 0; }
  .pr-tb-inner { flex-wrap: wrap; }
  .pr-tb-mid { order: 3; flex-basis: 100%; justify-content: flex-start; }
  .pr-top { flex-wrap: wrap; }
}
@media (hover: none) and (pointer: coarse) { body.pr-typing .pr-toolbar { display: none; } }

/* ---- sources and credits: full width, at the very bottom ---- */
.pr-sources { width: min(1100px, 92vw); margin: 1.4rem auto .6rem; }
.pr-sources p { margin: 0; max-width: none; font-size: max(.875rem, 14px); color: var(--eng-muted); line-height: 1.5; }
.pr-sources a { color: inherit; }

/* ---- How this page works: the spotlight tour ---- */
.pr-tour-dim { position: fixed; inset: 0; z-index: 1300; background: transparent; }
.pr-spot { position: relative; z-index: 1301; pointer-events: none; border-radius: 14px;
  box-shadow: 0 0 0 4px var(--eng-ink-accent), 0 0 0 100vmax rgba(8, 18, 18, .62) !important; }
body.pr-touring-tb .pr-toolbar { z-index: 1301; }
.pr-tour-tip { position: fixed; z-index: 1302; width: min(26rem, calc(100vw - 16px)); padding: .7rem .9rem;
  border-radius: 16px; border: 3px solid var(--eng-ink-accent); background: var(--eng-surface); color: var(--eng-text);
  box-shadow: var(--eng-shadow); display: grid; gap: .45rem; }
.pr-tour-n { margin: 0; font-weight: 800; color: var(--eng-muted); }
.pr-tour-text { margin: 0; font-size: 1.15rem; }
.pr-tour-btns { display: flex; justify-content: space-between; gap: .5rem; }

/* ---- teacher: walk-in screen ---- */
.pr-walkin > h2 { font-size: 2.3rem; margin: .2rem 0 .6rem; }
.pr-walk-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1.4rem; align-items: start; }
.pr-walk-get, .pr-walk-plan { padding: .8rem 1.1rem; border-radius: 18px; border: 2px solid var(--eng-border); background: var(--eng-surface); }
.pr-walk-get { text-align: center; }
.pr-walk-h { margin: 0 0 .35rem; font-weight: 900; font-size: 1.3rem; color: var(--eng-ink-accent); }
.pr-walk-plan .pr-walk-h:not(:first-child) { margin-top: .8rem; }
.pr-qr { width: min(15rem, 32vh); margin: .3rem auto; padding: .6rem; background: #fff; border-radius: 14px; }
.pr-qr svg { display: block; width: 100%; height: auto; }
.pr-walk-url { margin: .4rem 0 .3rem; font-size: 2rem; font-weight: 900; overflow-wrap: anywhere; }
.pr-walk-path { margin: 0; color: var(--eng-muted); }
.pr-walk-first { margin: 0; padding-left: 1.4rem; font-weight: 700; }
.pr-walk-steps { margin: 0; padding-left: 1.6rem; columns: 2; column-gap: 1.6rem; }
.pr-walk-steps li { break-inside: avoid; }
.pr-walk-min { color: var(--eng-muted); margin-left: .4rem; white-space: nowrap; }
.pr-walk-min::before { content: "\00b7\00a0"; }

/* ---- teacher: full-screen picture with its instructions ---- */
.pr-fs-open { width: 100%; }
body.pr-fs-on { overflow: hidden; }
.pr-fs { position: fixed; inset: 0; z-index: 1500; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 1rem; padding: 1rem; background: var(--eng-bg, #f7f1e6); }
.pr-fs-pic { min-height: 0; display: flex; }
.pr-fs-pic .pr-fig { flex: 1; justify-content: center; }
.pr-fs-pic .pr-fig img { max-height: calc(100vh - 6rem) !important; height: 100%; }
.pr-fs-side { overflow-y: auto; display: grid; align-content: start; gap: .7rem; }
.pr-fs-side h2 { margin: 0; font-size: 1.8rem; }
.pr-fs-side .pr-do { grid-template-columns: minmax(0, 1fr); }
.pr-fs-side .pr-do-steps { flex-direction: column; }
.pr-fs-close { justify-self: start; }
@media (prefers-color-scheme: dark) { .pr-fs { background: var(--eng-bg, #15110b); } }
/* engineering-science.css boxes every <details>; these two are controls, not cards */
.pr-page details.pr-steps, .pr-page details.pr-more { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; }
.pr-page .pr-term { font-weight: 700; font-size: inherit; }
.pr-sidecol > .pr-write { padding: .55rem .8rem .65rem; border-radius: 16px; border: 2px solid var(--eng-border);
  border-top: 6px solid var(--eng-ink-accent); background: var(--eng-surface); }
.pr-next-arrow { margin-left: .1rem; }
/* the sources sit below the fold on a lesson step, never peeking out above the toolbar */
@media (min-width: 821px) { body.pr-pupil main.container { min-height: calc(100vh - 76px - 5rem); } }
.pr-pupil .pr-main > * + *, .pr-pupil .pr-items > * + * { margin-top: .4rem; }
.pr-pupil .pr-card { padding: .45rem .65rem; }
.pr-pupil .pr-card-head { margin-bottom: .3rem; }
/* pupil steps: the banner is a thin title bar (the fixed logo and menu buttons are 48px at 14px from the top) */
@media (min-width: 821px) and (max-height: 900px) {
  body.pr-pupil .band-banner { height: 66px; }
  body.pr-pupil main.container { margin-top: .4rem; min-height: calc(100vh - 66px - 5rem); }
}

/* teacher walk-in: three columns, so the whole lesson fits the board at once */
.pr-walk-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, .85fr); }
.pr-walk-plan.is-steps .pr-walk-steps { columns: 1; }
body.reading .pr-walkin .pr-walk-url { font-size: 1.9rem; line-height: 1.25; }
body.reading .pr-walkin .pr-walk-h { font-size: 1.3rem; }
body.reading .pr-walkin .pr-walk-steps li { line-height: 1.35; }
.pr-walk-steps li + li { margin-top: .15rem; }

/* teacher: the full-screen button sits on the picture's corner, not under it */
.pr-teacher-page .pr-sidecol { position: relative; }
.pr-teacher-page .pr-fs-open { position: absolute; top: .4rem; right: .4rem; width: auto; min-height: 44px;
  padding: .2rem .7rem; background: #fffaf2; color: #004a4e; border-color: #006e74; z-index: 2; }
.pr-fs-side { align-content: start; }
.pr-fs-close { order: -1; }

body.reading .pr-walkin .pr-walk-url { overflow-wrap: normal; word-break: normal; }
.pr-walkin > h2 { margin: 0 0 .4rem; }
.pr-walk-get, .pr-walk-plan { padding-block: .6rem; }
.pr-spot { box-shadow: 0 0 0 8px var(--eng-surface), 0 0 0 12px var(--eng-ink-accent), 0 0 0 100vmax rgba(8, 18, 18, .62) !important; }
.pr-top .pr-head .pr-part-back { min-height: 44px; padding: .1rem .7rem; }
.pr-options.is-stacked { gap: .3rem; }
.pr-qcard-foot { margin-top: .4rem; }
.pr-options.is-stacked .pr-feedback { padding: .3rem .6rem; }
.pr-pupil .pr-panel { max-height: min(470px, calc(100vh - 440px)); }
/* D3 / D2 (audit 6 Oct) */
.pr-qcard .pr-q, .pr-main > .pr-write > .pr-q { line-height: 1.5; }
body.reading .pr-walkin .pr-walk-steps li { line-height: 1.5; }
.pr-walk-steps li + li { margin-top: 0; }
/* sources: full width, but as short side-by-side paragraphs so no line runs past 70 characters (D4) */
.pr-sources { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); gap: .3rem 1.6rem; }
.pr-pupil .pr-do { padding-block: .3rem; }
/* the address scales with its card, so it never runs into the card's edge (teacher, 6 Oct) */
.pr-walk-get { container-type: inline-size; }
body.reading .pr-walkin .pr-walk-url { font-size: min(1.9rem, 6.4cqi); margin-inline: .2rem; }
/* a checked answer: the marks sit on the model answer's heading row, so they stay on screen */
.pr-write.is-checked .pr-model { margin-top: .35rem; }
.pr-selfmark { margin-top: .3rem; }
.pr-model-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem .8rem; }
.pr-model-top .pr-model-head { margin: 0; }
.pr-model-top .pr-selfmark { margin: 0; }
.pr-nowrap { white-space: nowrap; }
.pr-fs { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }

/* ============================================================
   Log in with a number (teacher, 6 Oct 2026; plan section 10, phase C)
   ============================================================ */
.pr-login { max-width: 34rem; margin: 1.2rem auto; padding: 1.1rem 1.3rem 1.2rem; border-radius: 18px;
  border: 2px solid var(--eng-border); border-top: 6px solid var(--eng-ink-accent); background: var(--eng-surface); display: grid; gap: .7rem; }
.pr-login h2 { margin: 0; font-size: 1.5rem; }
.pr-login-form { display: grid; gap: .4rem; }
.pr-login-form label { font-weight: 700; }
.pr-login-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.pr-login input { width: 5.5ch; min-height: 64px; padding: .2rem .5rem; font: inherit; font-size: 2.2rem; font-weight: 800;
  text-align: center; letter-spacing: .08em; border: 3px solid var(--eng-border); border-radius: 14px;
  background: var(--eng-bg); color: var(--eng-text); font-variant-numeric: tabular-nums; }
.pr-login input:focus-visible { outline: 3px solid var(--eng-ink-accent); outline-offset: 3px; }
.pr-login-big { margin: 0; font-size: 1.6rem; }
.pr-login-big strong { font-size: 2.4rem; font-variant-numeric: tabular-nums; }
.pr-login-msg { margin: 0; font-weight: 700; min-height: 1.5em; }
.pr-login-msg:empty { display: none; }
.pr-login > .pr-btn-quiet { justify-self: start; }
.pr-who { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .7rem; border-radius: 999px; font-weight: 800;
  border: 2px solid var(--eng-ink-accent); color: var(--eng-ink-accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-who.is-error { border-style: dashed; }

/* ---- the tracking page (teacher's laptop) ---- */
body.pr-track-page main.container { width: min(1500px, 96vw); }
.tr-warn { margin: .2rem 0 .6rem; padding: .45rem .8rem; border-radius: 12px; border: 2px solid #b91c1c; background: #fff1ee; color: #5a1010; }
@media (prefers-color-scheme: dark) { .tr-warn { background: #3a1512; color: #ffd9d2; border-color: #ff9d8a; } }
.tr-card { max-width: 46rem; padding: .8rem 1rem; margin: .6rem 0; border-radius: 16px; border: 2px solid var(--eng-border); background: var(--eng-surface); }
.tr-card h2 { margin: 0 0 .3rem; font-size: 1.3rem; }
.tr-card p { margin: 0 0 .5rem; }
.tr-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .6rem; margin: .4rem 0; }
.tr-seg { display: flex; gap: .3rem; margin-left: auto; }
.tr-seg .pr-btn[aria-pressed="true"] { border-color: var(--eng-ink-accent); background: var(--eng-surface-2); box-shadow: inset 0 -3px 0 var(--eng-ink-accent); }
.tr-status { margin: 0 auto 0 0; color: var(--eng-muted); font-weight: 600; }
.tr-status.is-error { color: #b91c1c; }
@media (prefers-color-scheme: dark) { .tr-status.is-error { color: #ff9d8a; } }
.tr-del.is-armed { border-color: #b91c1c; color: #b91c1c; }
.tr-gridbox { overflow-x: auto; border: 1px solid var(--eng-border); border-radius: 14px; background: var(--eng-surface); }
.tr-grid { width: 100%; border-collapse: collapse; font-size: max(1rem, 16px); }
.tr-grid th, .tr-grid td { padding: .35rem .55rem; text-align: left; border-bottom: 1px solid var(--eng-border); white-space: nowrap; vertical-align: middle; }
.tr-grid thead th { position: sticky; top: 0; background: var(--eng-surface-2); font-weight: 800; }
.tr-grid tr.is-none td, .tr-grid tr.is-none th { color: var(--eng-muted); }
.tr-grid tr.is-slow > :first-child { box-shadow: inset 6px 0 0 #d97706; }
.tr-grid tr.is-picked { background: var(--eng-surface-2); }
.tr-slow { color: #9a4a00; font-weight: 800; }
@media (prefers-color-scheme: dark) { .tr-slow { color: #ffc56e; } }
.tr-num { font-variant-numeric: tabular-nums; font-weight: 800; }
.tr-muted { color: var(--eng-muted); }
.tr-name { border: 0; background: none; padding: .2rem 0; min-height: 40px; font: inherit; font-weight: 700; color: var(--eng-ink-accent);
  cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.tr-name:disabled { color: inherit; text-decoration: none; cursor: default; font-weight: 600; }
.tr-empty { margin: .6rem .8rem; color: var(--eng-muted); }
.tr-detail:empty { display: none; }
.tr-detail { margin-top: .8rem; padding: .7rem 1rem; border-radius: 16px; border: 2px solid var(--eng-ink-accent); background: var(--eng-surface); }
.tr-detail-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.tr-detail-head h2 { margin: 0; font-size: 1.3rem; }
.tr-detail-step h3 { margin: .7rem 0 .2rem; font-size: 1.1rem; color: var(--eng-ink-accent); }
.tr-detail dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: .25rem 1rem; }
.tr-detail dt { font-weight: 700; }
.tr-detail dd { margin: 0; white-space: pre-wrap; }
.tr-mark { display: block; color: var(--eng-ink-accent); }
.tr-numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem 2rem; }
.tr-numbers h2 { font-size: 1.2rem; }
@media print {
  body.pr-track-page .band-banner, body.pr-track-page .site-footer, body.pr-track-page footer, .tr-noprint,
  body.pr-track-page .site-menu-button, body.pr-track-page .site-home-badge { display: none !important; }
}
/* headings wrap so the whole grid fits a laptop screen; the cells stay on one line */
.tr-grid thead th { white-space: normal; vertical-align: bottom; line-height: 1.25; }
.tr-grid th, .tr-grid td { padding: .3rem .45rem; }
.tr-lessons { display: flex; flex-wrap: wrap; gap: .35rem; margin: .2rem 0 .4rem; }
.tr-lessons .pr-btn[aria-pressed="true"] { border-color: var(--eng-ink-accent); background: var(--eng-surface-2); box-shadow: inset 0 -3px 0 var(--eng-ink-accent); font-weight: 800; }
.tr-grid thead th .tr-name { font-weight: 800; }

/* ---- log-in cards (teacher, 6 Oct): 8 per A4, cut along the dashes; shown at real size on screen ---- */
.tr-cards { display: grid; gap: 1.2rem; }
.tr-card-group { display: grid; grid-template-columns: repeat(2, 96mm); gap: 2mm; justify-content: start; }
.tr-group-name { grid-column: 1 / -1; margin: 0 0 .3rem; font-size: 1.2rem; }
.tr-logincard { box-sizing: border-box; width: 96mm; height: 68mm; padding: 4mm 5mm; border: 1px dashed #8a8a8a; background: #fff; color: #15110b;
  display: grid; grid-template-columns: minmax(0, 1fr) 25mm; grid-template-rows: auto auto 1fr; column-gap: 4mm; break-inside: avoid; }
.tr-lc-top { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 3mm; }
.tr-lc-name { font-size: 18pt; font-weight: 800; line-height: 1.2; }
.tr-lc-topic { font-size: 12pt; font-weight: 700; color: #00585d; }
.tr-lc-mid { display: flex; flex-direction: column; justify-content: center; }
.tr-lc-label { font-size: 12pt; font-weight: 700; }
.tr-lc-num { font-size: 50pt; font-weight: 900; line-height: 1; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: #00585d; }
.tr-lc-qr { grid-column: 2; grid-row: 2; align-self: center; }
.tr-lc-qr svg { display: block; width: 25mm; height: 25mm; }
.tr-lc-steps { grid-column: 1 / -1; align-self: end; margin: 0; padding-left: 5mm; font-size: 12pt; line-height: 1.35; }
body.reading .tr-lc-steps li { font-size: 12pt; line-height: 1.35; max-width: none; }
@media print {
  @page { size: A4; margin: 8mm; }
  body.tr-cards-on { background: #fff !important; }
  body.tr-cards-on main.container { width: auto; margin: 0; padding: 0; }
  body.tr-cards-on main > :not(#track), body.tr-cards-on #track > :not(.tr-cards),
  body.tr-cards-on .band-banner, body.tr-cards-on footer, body.tr-cards-on .site-footer { display: none !important; }
  body.tr-cards-on .tr-cards { gap: 0; }
  body.tr-cards-on .tr-card-group + .tr-card-group { break-before: page; }
  body.tr-cards-on .tr-logincard { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---- no roles (teacher, 7 Oct): 3 views, kit paths, the STOP check, sim callouts ---- */
.pr-views { display: flex; flex-direction: column; gap: .45rem; }
.pr-views-title { margin: 0; font-weight: 800; font-size: 1.2rem; }
.pr-views-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.pr-view { margin: 0; display: flex; flex-direction: column; border: 2px solid var(--eng-border); border-radius: 14px;
  overflow: hidden; background: var(--eng-surface); }
.pr-view-pic { background: #fff; height: 128px; padding: .4rem; }
.pr-view-pic img { display: block; width: 100%; height: 100%; max-height: none; object-fit: contain; }
.pr-view.is-photo .pr-view-pic { padding: .25rem; }
.pr-view.is-photo .pr-view-pic img { width: 100%; height: 100%; object-fit: contain; }
.pr-view figcaption { padding: .3rem .5rem .4rem; font-weight: 700; }

.pr-branch { border: 2px solid var(--eng-border); border-top: 6px solid var(--eng-ink-accent); border-radius: 16px;
  padding: .45rem .8rem .65rem; margin: 0; background: var(--eng-surface); }
.pr-branch legend { padding: 0 .3rem; font-weight: 800; font-size: 1.2rem; }
.pr-branch .pr-option { width: 100%; }
.pr-branch-then { margin-top: .55rem; padding-top: .55rem; border-top: 2px dashed var(--eng-border); }
.pr-branch-then > * + * { margin-top: .45rem; }
.pr-options.is-stacked { flex-direction: column; }

.pr-stop { border: 3px solid #b91c1c; border-radius: 16px; background: #fff1f0; color: #2b0d0b; padding: .55rem .85rem .7rem;
  display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: .75rem; }
.pr-stop > :not(.pr-stop-head) { grid-column: 2; }
.pr-stop-head { display: contents; }
.pr-stop-pic { grid-row: 1 / span 3; align-self: start; }
.pr-stop-pic { width: 56px; height: 56px; flex: none; background: #fff; border-radius: 12px; padding: 4px; }
.pr-stop-title { margin: 0; font-size: 1.35rem; }
.pr-stop-title strong { color: #b91c1c; }
.pr-stop .pr-list { margin: .45rem 0 .5rem; }
.pr-stop .pr-stop-tick { background: #fffaf2; color: #2b0d0b; border-color: #b91c1c; }
@media (prefers-color-scheme: dark) {
  .pr-stop { background: #3a1210; color: #ffe9e6; border-color: #ff8a7a; }
  .pr-stop-title strong { color: #ffb3a8; }
  .pr-stop .pr-stop-tick { background: #2a0d0b; color: #ffe9e6; border-color: #ff8a7a; }
}

.pr-kitfree { border: 2px solid var(--eng-border); border-top: 6px solid var(--eng-ink-accent); border-radius: 16px;
  padding: .55rem .85rem .7rem; background: var(--eng-surface); }
.pr-kitfree .pr-options { gap: .55rem; }
.pr-kitback { border-color: var(--eng-ink-accent); color: var(--eng-ink-accent); font-weight: 800; }

/* the list numbers are the same discs as the numbers on the screenshot beside it */
.pr-list.is-callouts { list-style: none; padding: 0; counter-reset: co; }
.pr-list.is-callouts li { counter-increment: co; position: relative; padding-left: 2.3rem; min-height: 1.9rem; }
.pr-list.is-callouts li + li { margin-top: .35rem; }
.pr-list.is-callouts li::before { content: counter(co); position: absolute; left: 0; top: -.05rem; width: 1.75rem; height: 1.75rem;
  border-radius: 50%; display: grid; place-items: center; background: #c2410c; color: #fff; font-weight: 800;
  box-shadow: 0 0 0 2px #fff; }
.pr-fig.is-shot img { max-height: 400px; }
.pr-fig.is-wide img { max-height: 360px; }
.pr-body.has-shot { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
@media (max-width: 820px) { .pr-body.has-shot { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 820px) { .pr-views-row { grid-template-columns: minmax(0, 1fr); } .pr-view-pic { height: 150px; } }

/* ---- L2 (teacher, 7 Oct): a picture that steps on one frame at a time, its captions listed beside it ---- */
.pr-frames { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: .8rem; align-items: start; }
.pr-frames-pic { background: #fff; border-radius: 12px; padding: .4rem; }
.pr-frames-pic img { display: block; width: 100%; height: auto; max-height: min(430px, calc(100vh - 392px)); object-fit: contain; }
.pr-frames-side { border: 2px solid var(--eng-border); border-radius: 16px; background: var(--eng-surface); padding: .5rem .8rem .65rem; }
.pr-frames-side > * + * { margin-top: .45rem; }
.pr-frames-start { margin: 0; }
.pr-frames-steps { margin: 0; padding-left: 1.6rem; }
.pr-frames-steps li + li { margin-top: .25rem; }
.pr-frames-steps li { color: var(--eng-muted, inherit); }
.pr-frames-steps li.is-now { color: inherit; font-weight: 700; }
.pr-frames-steps li.is-now::marker { color: var(--eng-ink-accent); font-weight: 800; }
.pr-frames-ask { border-top: 2px dashed var(--eng-border); padding-top: .45rem; }
.pr-frames-ask .pr-q { margin: 0 0 .3rem; }
.pr-frames-nav { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; margin: 0; }
.pr-frames-end { margin: 0; font-weight: 800; }
.pr-fig-frames .pr-frames-nav { align-self: stretch; margin-top: .5rem; }
@media (max-width: 820px) { .pr-frames { grid-template-columns: minmax(0, 1fr); } }
/* teacher: a lesson of more than 15 steps lists them in 2 columns; frames keep their buttons on the board */
.pr-walk-grid.has-long { grid-template-columns: minmax(0, .7fr) minmax(0, .8fr) minmax(0, 1.5fr); }
.pr-walk-plan.is-steps .pr-walk-steps.is-long { columns: 2; column-gap: 1.4rem; }
.pr-walk-steps.is-long li { break-inside: avoid; }
.pr-teacher-page .pr-sidecol .pr-fig-frames img { max-height: min(52vh, calc(100vh - 25rem)); }