/* ---------- Tutor hand marking: the marking screen ----------
   Marking::WorkspaceController#show and the four controllers on it
   (marking_workspace, page_viewer, marking_ink, save_queue). Layout from the
   2026-10-30 mockup v5: page thumbnails | the student's pages | the part
   panel, and pages over parts on a narrow screen or an iPad held upright.

   Everything is a theme token so dark mode follows, with ONE exception on
   purpose: the red pen. It is ink on the student's (always white) paper, the
   same red the marked PDF burns in, so it does not change with the theme. */

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/caveat/Caveat-Variable-97e63674.ttf") format("truetype");
}

/* The screen fills the window under the app header and the paper's own
   header (the staff layout drops its other chrome on this page). Stacked —
   a narrow window, or an iPad held upright — the pages get 55% and the
   parts a fixed 45%, each scrolling in its own half: the parts used to get
   whatever was left below the pages, about 15% on an iPad (stage QA
   2026-10-31). */
.hm-screen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 55fr) minmax(0, 45fr);
  height: calc(100dvh - 10rem);
  min-height: 34rem;
  border: 1px solid var(--color-border-1);
  border-radius: var(--radius-card, 0.75rem);
  background: var(--color-bg-surface);
  overflow: hidden;
}
@media (min-width: 1024px) and (orientation: landscape), (min-width: 1280px) {
  .hm-screen {
    /* The answers panel is as wide as the tutor drags it (owner
       2026-11-01: 27rem was too narrow for the solutions), between 22rem
       and half the window; marking_rail sets --hm-rail-w and keeps it per
       browser. */
    grid-template-columns: 4.5rem minmax(0, 1fr) clamp(22rem, var(--hm-rail-w, 32rem), 50vw);
    grid-template-rows: minmax(0, 1fr);
    min-height: 32rem;
  }
}
/* Stacked, the key legend gives way to the parts (a stacked screen is
   usually a tablet, marked by touch). */
@media (max-width: 1023px), (max-width: 1279px) and (orientation: portrait) {
  .hm-screen .hm-keys { display: none; }
  /* and the rail's own chrome gets out of the parts' way: one line of
     tally (it scrolls sideways), the overall comment one line. */
  .hm-screen .hm-tally { flex-wrap: nowrap; overflow-x: auto; }
  .hm-screen .hm-foot { padding-block: 0.45rem; }
  .hm-screen .hm-overall { padding-block: 0.3rem; }
}

/* The drag handle on the answers panel's left edge (marking_rail): side by
   side only. A thin line to see, a wider strip to catch a finger. */
.hm-rail__resize { display: none; }
@media (min-width: 1024px) and (orientation: landscape), (min-width: 1280px) {
  .hm-rail__resize {
    display: block; position: absolute; top: 0; bottom: 0; left: -0.4rem; z-index: 5;
    width: 0.8rem; cursor: col-resize; touch-action: none; user-select: none;
    background: transparent; border: 0; padding: 0;
  }
  .hm-rail__resize::after {
    content: ""; position: absolute; top: 50%; left: 50%; width: 0.25rem; height: 2.5rem;
    transform: translate(-50%, -50%); border-radius: 999px;
    background: var(--color-border-2);
  }
  .hm-rail__resize:hover::after, .hm-rail__resize:focus-visible::after, .hm-rail__resize[data-dragging="true"]::after {
    background: var(--color-primary-500);
  }
  .hm-rail__resize:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: -2px; }
  .hm-screen[data-rail-dragging="true"] { cursor: col-resize; user-select: none; }
}
@media (pointer: coarse) and (min-width: 1024px) and (orientation: landscape), (pointer: coarse) and (min-width: 1280px) {
  .hm-rail__resize { left: -0.85rem; width: 1.7rem; }
}

/* Thumbnails: hidden when the panel stacks; the pages scroll instead. */
.hm-thumbs { display: none; }
@media (min-width: 1024px) and (orientation: landscape), (min-width: 1280px) {
  .hm-thumbs {
    display: grid;
    align-content: start;
    gap: 0.5rem;
    padding: 0.5rem 0.4rem;
    overflow-y: auto;
    border-right: 1px solid var(--color-border-1);
    background: var(--color-bg-subtle);
  }
}
.hm-thumb {
  aspect-ratio: 1 / 1.35;
  border: 2px solid transparent;
  border-radius: 0.25rem;
  background: var(--color-bg-surface);
  color: var(--color-fg-3);
  font: 600 0.7rem var(--font-mono, monospace);
  display: grid;
  place-items: end center;
  padding-bottom: 0.15rem;
  position: relative;
  cursor: pointer;
}
.hm-thumb[aria-current="true"] { border-color: var(--color-primary-500); }
/* The page itself, drawn small once its thumbnail is in view (always white
   paper, like the page); the number sits on it. */
.hm-thumb { overflow: hidden; }
.hm-thumb__page {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top;
  background: var(--color-neutral-0);
}
.hm-thumb__no {
  position: relative; padding: 0 0.25rem; border-radius: 0.25rem;
  background: color-mix(in srgb, var(--color-bg-surface) 85%, transparent);
}
.hm-thumb--hidden { opacity: 0.5; }
.hm-thumb__ink {
  position: absolute; top: 0.2rem; right: 0.2rem; z-index: 1;
  width: 0.45rem; height: 0.45rem; border-radius: 999px;
  background: var(--color-redpen);
}

/* The desk the pages sit on. */
.hm-viewer {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0; min-height: 0;
  background: var(--color-bg-muted);
}
.hm-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem;
  padding: 0.375rem 0.5rem;
  border-bottom: 1px solid var(--color-border-1);
  background: var(--color-bg-surface);
}
.hm-tool {
  display: inline-flex; align-items: center; gap: 0.25rem;
  min-height: 2rem; padding: 0 0.55rem;
  border: 1px solid var(--color-border-1); border-radius: 0.5rem;
  background: var(--color-bg-surface); color: var(--color-fg-2);
  font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.hm-tool:hover { background: var(--color-bg-subtle); }
.hm-tool[aria-pressed="true"] { background: var(--color-fg-1); border-color: var(--color-fg-1); color: var(--color-bg-page); }
.hm-tool--pen[aria-pressed="true"] { background: var(--color-redpen); border-color: var(--color-redpen); color: var(--color-neutral-0); }
.hm-tool:disabled { opacity: 0.45; cursor: not-allowed; }
.hm-tools__sep { width: 1px; height: 1.25rem; margin: 0 0.2rem; background: var(--color-border-1); }
.hm-tools__grow { flex: 1; }

.hm-pages {
  overflow: auto;
  padding: 1rem;
  display: grid; gap: 1.25rem; justify-items: center; align-content: start;
}
.hm-page { position: relative; }
.hm-page--hidden { display: none; }
.hm-show-hidden .hm-page--hidden { display: block; opacity: 0.7; }
.hm-page__bar {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.25rem;
  font-size: 0.75rem; color: var(--color-fg-3);
}
.hm-page__box { position: relative; overflow: hidden; }
.hm-sheet {
  position: absolute; left: 50%; top: 50%;
  transform-origin: center;
  background: var(--color-neutral-0);
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.22);
}
.hm-sheet canvas.hm-render, .hm-sheet img.hm-render {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
/* The untouched photo over the page, the ink hidden while it shows
   (page_viewer#flip). */
.hm-sheet img.hm-original {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  object-fit: contain; background: var(--color-neutral-900, #111);
}
.hm-sheet.hm-sheet--original .hm-ink { visibility: hidden; pointer-events: none; }
.hm-page__loading {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--color-neutral-500); font-size: 0.8rem;
}

/* The ink layer: pass-through while reading, the pen surface while a tool is
   on (touch-action none, so a finger or Apple Pencil draws instead of
   scrolling). */
.hm-ink { position: absolute; inset: 0; pointer-events: none; }
.hm-drawing .hm-ink { pointer-events: auto; touch-action: none; cursor: crosshair; }
.hm-ink svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hm-ink svg * { fill: none; stroke: var(--color-redpen); stroke-width: 2.4px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.hm-ink svg [data-selected="true"] { stroke-dasharray: 4 3; }
.hm-mark {
  position: absolute; transform: translate(-50%, -55%);
  font-family: "Caveat", cursive; font-weight: 700; line-height: 1;
  font-size: calc(var(--sheet-w, 600px) * 0.05);
  color: var(--color-redpen);
  pointer-events: auto; user-select: none;
}
.hm-mark[data-selected="true"], .hm-comment[data-selected="true"] { outline: 2px dashed var(--color-redpen); outline-offset: 2px; }
/* A box is as wide as its words up to 48% of the page, then they wrap
   inside it (real papers 2026-10-31: near the right edge the box was squeezed
   by the page's edge, or its words ran off it). max-content lets it grow
   past the edge, and marking_ink#keepBoxOnPage moves it back in as it grows. */
.hm-comment {
  position: absolute; display: flex; align-items: flex-start; gap: 0.15rem;
  width: max-content; max-width: 48%; transform: translate(-0.25rem, -55%);
  pointer-events: auto;
}
.hm-comment__body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; min-width: 0; }
/* The part the box is bound to ("→ 10(b)", Overall comment or Page note),
   screen only. Compact, so the box's frame hugs the words and this one
   line under them (owner 2026-11-01: the frame stood far taller than the
   words, empty under them). */
.hm-comment__chip {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font: 500 0.65rem/1.1 var(--font-sans, system-ui); color: var(--color-fg-3);
}
.hm-comment__part {
  max-width: 9rem; height: 1.25rem; min-height: 0; padding: 0 1.1rem 0 0.2rem;
  border: 1px solid var(--color-border-1); border-radius: 0.25rem;
  background-color: var(--color-bg-surface); background-position: right 0.1rem center;
  color: var(--color-fg-2); font: inherit; line-height: 1;
}
.hm-comment__use { color: var(--color-fg-link); text-decoration: underline; }
.hm-comment__grip {
  cursor: grab; touch-action: none; user-select: none;
  color: var(--color-redpen); opacity: 0.55; font-size: 0.9rem; line-height: 1.1;
}
.hm-comment__grip:hover { opacity: 1; }
/* The words: COMMENT_SIZE of the page wide (Marking::Hand::InkOverlay),
   the same number on screen and in the marked PDF. */
.hm-comment__text {
  display: block; min-width: 5em; padding: 0 0.2rem;
  font-family: "Caveat", cursive; font-weight: 700; line-height: 1.05;
  font-size: calc(var(--sheet-w, 600px) * 0.026);
  color: var(--color-redpen);
  border: 1px dashed transparent; border-radius: 0.25rem; outline: none;
  white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%;
}
.hm-comment__text:empty::before { content: attr(data-placeholder); opacity: 0.45; }
.hm-comment__text:focus, .hm-comment:hover .hm-comment__text {
  border-color: color-mix(in srgb, var(--color-redpen) 45%, transparent);
  background: color-mix(in srgb, var(--color-neutral-0) 60%, transparent);
}

/* The part panel. */
.hm-rail {
  position: relative;
  display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  min-width: 0; min-height: 0;
  border-top: 2px solid var(--color-border-1);
  background: var(--color-bg-surface);
}
@media (min-width: 1024px) and (orientation: landscape), (min-width: 1280px) {
  .hm-rail { border-top: 0; border-left: 1px solid var(--color-border-1); }
}
.hm-tally {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem;
  padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--color-border-1);
}
/* THE OVERALL COMMENT, right under the tally so it is seen without
   scrolling (owner 2026-11-01: at the panel's foot it was missed). One line
   until the tutor is in it (focus, a click on a read-only one too). */
.hm-overall {
  display: grid; gap: 0.2rem; padding: 0.4rem 0.75rem;
  border-bottom: 1px solid var(--color-border-1);
}
/* Out of focus a written comment shows its first line only: wrapped text
   left half a second line peeking out of the box (stage 2026-11-01). */
.hm-overall textarea {
  height: 2.25rem; min-height: 2.25rem; resize: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: height 120ms ease;
}
.hm-overall textarea:focus { height: 6.5rem; white-space: pre-wrap; overflow: auto; }
.hm-pill {
  padding: 0.15rem 0.55rem; border-radius: 999px;
  background: var(--color-bg-subtle); color: var(--color-fg-2);
  font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hm-pill--brand { background: var(--color-bg-brand-soft); color: var(--color-fg-brand); }
.hm-pill--bad { background: var(--color-danger-50); color: var(--color-danger-700); }
.hm-pill--warn { background: var(--color-warning-50); color: var(--color-warning-700); }
.hm-pill--ai { background: var(--color-tut-50); color: var(--color-tut-700); }
.hm-save { margin-left: auto; font-size: 0.75rem; font-weight: 600; white-space: nowrap; color: var(--color-fg-3); }
.hm-save[data-state="saved"] { color: var(--color-success-700); }
.hm-save[data-state="offline"], .hm-save[data-state="error"] { color: var(--color-warning-700); }
.hm-bulk {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem;
  padding: 0.375rem 0.75rem; border-bottom: 1px solid var(--color-border-1);
  font-size: 0.75rem; color: var(--color-fg-3);
}
.hm-rows { overflow-y: auto; padding: 0.25rem 0; }
.hm-group {
  padding: 0.5rem 0.9rem 0.2rem;
  font: 700 0.7rem var(--font-mono, monospace); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-fg-4);
}
.hm-row {
  display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto auto;
  align-items: center; gap: 0.5rem;
  width: 100%; padding: 0.375rem 0.75rem 0.375rem 0.9rem;
  border: 0; border-left: 3px solid transparent;
  background: transparent; text-align: left; cursor: pointer; color: inherit;
}
.hm-row:hover { background: var(--color-bg-subtle); }
.hm-row[aria-current="true"] { background: var(--color-bg-brand-soft); border-left-color: var(--color-primary-500); }
.hm-row--missing { box-shadow: inset 0 0 0 2px var(--color-danger-500); }
.hm-row__label { font: 700 0.8rem var(--font-mono, monospace); color: var(--color-fg-1); }
.hm-row__text { font-size: 0.78rem; color: var(--color-fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-row__marks { font: 600 0.75rem var(--font-mono, monospace); color: var(--color-fg-3); min-width: 2.25rem; text-align: right; }
.hm-chip-ch {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--color-accent-600); border: 1px solid currentColor; border-radius: 0.25rem; padding: 0 0.2rem;
}
.hm-ai-dot { display: inline-block; width: 0.45rem; height: 0.45rem; margin-left: 0.25rem; border-radius: 999px; background: var(--color-tut-500); vertical-align: middle; }
.hm-status {
  position: relative; width: 1.5rem; height: 1.5rem; border-radius: 999px;
  display: grid; place-items: center; font-size: 0.75rem; font-weight: 700;
  border: 1.5px dashed var(--color-border-2); color: var(--color-fg-4);
}
.hm-status[data-choice="right"], .hm-status[data-choice="circled"] { border: 0; background: var(--color-success-50); color: var(--color-success-700); }
.hm-status[data-choice="partial"] { border: 0; background: var(--color-warning-50); color: var(--color-warning-700); }
.hm-status[data-choice="wrong"] { border: 0; background: var(--color-danger-50); color: var(--color-danger-700); }
.hm-status[data-choice="none"] { border: 0; background: var(--color-bg-muted); color: var(--color-fg-3); }
.hm-status[data-choice="circled"]::after {
  content: ""; position: absolute; inset: -4px; border: 2px solid var(--color-redpen); border-radius: 999px;
}

.hm-detail {
  display: grid; gap: 0.6rem;
  padding: 0.25rem 0.75rem 0.75rem 0.9rem;
  border-left: 3px solid var(--color-primary-500);
  background: var(--color-bg-brand-soft);
}
.hm-solution {
  display: grid; gap: 0.3rem; padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border-1); border-radius: 0.6rem;
  background: var(--color-bg-surface); color: var(--color-fg-1); font-size: 0.85rem;
}
.hm-solution__head {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-extra-700);
}
.hm-solution__work { white-space: pre-wrap; line-height: 1.5; }
.hm-solution__answer { font-weight: 600; }
.hm-solution__criteria { display: grid; gap: 0.1rem; padding-top: 0.3rem; border-top: 1px dashed var(--color-border-1); font-size: 0.78rem; color: var(--color-fg-2); }
.hm-choices { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.hm-choice {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
  height: 2.25rem; padding: 0 0.6rem;
  border: 1px solid var(--color-border-1); border-radius: 0.5rem;
  background: var(--color-bg-surface); color: var(--color-fg-1);
  font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.hm-choice kbd { font: 0.65rem var(--font-mono, monospace); border: 1px solid currentColor; border-radius: 0.25rem; padding: 0 0.2rem; opacity: 0.7; }
.hm-choice--digit { min-width: 2.25rem; font-family: var(--font-mono, monospace); font-size: 0.9rem; }
.hm-choice[aria-pressed="true"] { background: var(--color-fg-1); border-color: var(--color-fg-1); color: var(--color-bg-page); }
.hm-choice--right[aria-pressed="true"] { background: var(--color-success-500); border-color: var(--color-success-500); color: var(--color-bg-page); }
.hm-choice--wrong[aria-pressed="true"] { background: var(--color-danger-500); border-color: var(--color-danger-500); color: var(--color-bg-page); }
.hm-choice--circle[aria-pressed="true"] { background: var(--color-bg-surface); border: 2px solid var(--color-redpen); color: var(--color-redpen); }
.hm-choice--ai { box-shadow: inset 0 -3px 0 var(--color-tut-500); }
.hm-choice:disabled { opacity: 0.45; cursor: not-allowed; }
.hm-picks { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.hm-pick {
  padding: 0.1rem 0.55rem; border: 1px solid var(--color-border-1); border-radius: 999px;
  background: var(--color-bg-surface); color: var(--color-fg-2); font-size: 0.72rem; cursor: pointer;
}
.hm-pick[aria-pressed="true"] { background: var(--color-fg-1); border-color: var(--color-fg-1); color: var(--color-bg-page); }
.hm-ai {
  display: flex; align-items: flex-start; gap: 0.5rem;
  padding-top: 0.45rem; border-top: 1px dashed var(--color-border-2);
  font-size: 0.78rem; color: var(--color-fg-2);
}
.hm-ai__tag {
  flex: none; margin-top: 0.1rem; padding: 0 0.3rem; border-radius: 0.25rem;
  background: var(--color-tut-50); color: var(--color-tut-700);
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.hm-ai__warn { color: var(--color-warning-700); font-weight: 600; }
.hm-foot {
  display: grid; gap: 0.45rem; padding: 0.6rem 0.75rem;
  border-top: 1px solid var(--color-border-1); background: var(--color-bg-surface);
}
/* The corrections pass: the student's corrections upload in the same viewer,
   read-only, in a box of its own. */
.hm-corrections-viewer {
  height: min(75dvh, 60rem); min-height: 24rem;
  border: 1px solid var(--color-border-1); border-radius: var(--radius-card, 0.75rem); overflow: hidden;
}
.hm-corrections-viewer .hm-viewer { height: 100%; }
/* ON A PHONE WITH THE CORRECTIONS BAR (portal marks pages): the bar is
   fixed to the bottom and the Intu Bot bubble stands on it (application.css
   2b), so the paper viewer is sized to fit between them and the top bar. At
   75dvh it could never be seen whole: its foot, and the pages scrolling in
   it, were always under the bar or the bubble (390px walk-through
   2026-10-31). Room left, per platform, mirroring the body's own padding:
     web      the app header (6.8rem) + the bubble's top (8.25rem) + gaps
     iOS      the body's top and bottom padding (the shell's bars overlay
              the page) + the bubble's own 7.25rem above them + gaps
     Android  the WebView is inset: the bubble's top (8rem) + gaps */
@media (width < 40rem) {
  body:has(.native-bottom-action) .hm-corrections-viewer {
    height: calc(100dvh - 17rem); min-height: 16rem;
  }
  body.native-has-navbar:has(.native-bottom-action) .hm-corrections-viewer {
    height: calc(100dvh - var(--ruby-native-safe-area-top) - var(--rn-top-extra)
                 - var(--ruby-native-safe-area-bottom) - var(--rn-tabbar-h) - 8.75rem);
  }
  body.native-android.native-has-navbar:has(.native-bottom-action) .hm-corrections-viewer {
    height: calc(100dvh - 9.5rem);
  }
}

/* "Finish this paper? Enter / Esc" -- what F asks before finishing. */
.hm-confirm {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.75rem; border-radius: 0.6rem;
  border: 1px solid var(--color-primary-500); background: var(--color-bg-brand-soft); font-size: 0.85rem;
}
.hm-confirm[hidden] { display: none; }
.hm-confirm kbd { font: 0.65rem var(--font-mono, monospace); }
.hm-keys { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.7rem; color: var(--color-fg-4); }
.hm-keys kbd { font: 0.65rem var(--font-mono, monospace); border: 1px solid var(--color-border-1); border-bottom-width: 2px; border-radius: 0.25rem; padding: 0 0.25rem; color: var(--color-fg-1); background: var(--color-bg-surface); }
.hm-toast {
  position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); z-index: 60;
  transform: translateX(-50%); max-width: calc(100vw - 2rem);
  padding: 0.6rem 1rem; border-radius: 0.6rem;
  background: var(--color-bg-inverse); color: var(--color-fg-inverse);
  font-size: 0.85rem; font-weight: 500; box-shadow: 0 6px 24px rgb(0 0 0 / 0.2);
}
.hm-toast__action {
  margin-left: 0.5rem; padding: 0.15rem 0.5rem; border-radius: 0.35rem;
  font-weight: 700; text-decoration: underline; color: inherit;
}
.hm-toast__action:hover { background: rgb(255 255 255 / 0.15); }

/* ---------- The focus page (fix-wave 2026-10-31) ----------
   On an iPad at 1024x768 the app header, the stage banner and a three-line
   title took about 40% of the height, the part list showed one part and
   Finish & next sat below the fold of a page that scrolled as well as its
   panels. Now the marking screen is the window: the layout leaves out the
   app header (layouts/staff), the stage banner shrinks to one short line,
   the paper's own slim bar (.hm-bar) carries the way back and the save
   state, and the screen takes every pixel left, so the part list scrolls on
   its own and the foot with Finish & next stays pinned under it. */
main:has(.hm-focus) { display: flex; flex-direction: column; }
main:has(.hm-focus) > [data-focus-page] {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
}
main:has(.hm-focus) > [data-focus-page] > .admin-canvas {
  flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column;
}
body:has(.hm-focus) [data-staging-banner] { min-height: 0; padding-block: 0.1rem; }
body:has(.hm-focus) [data-staging-banner] > span:not(:first-child) { display: none; }
.hm-focus { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0.5rem; }
/* Never so short that the foot is cut off: below that, the page scrolls. */
.hm-focus > .hm-screen { flex: 1 1 auto; height: auto; min-height: 34rem; }
@media (min-width: 1024px) and (orientation: landscape), (min-width: 1280px) {
  .hm-focus > .hm-screen { min-height: 26rem; }
}

.hm-bar {
  display: flex; align-items: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0.2rem 0.5rem;
  border: 1px solid var(--color-border-1); border-radius: var(--radius-card, 0.75rem);
  background: var(--color-bg-surface);
}
.hm-bar__back {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
  min-height: 2.75rem; min-width: 2.75rem; padding: 0 0.5rem; border-radius: 0.5rem;
  color: var(--color-fg-link); font-size: 0.85rem; font-weight: 600;
}
.hm-bar__back:hover { background: var(--color-bg-subtle); }
.hm-bar__title { flex: 1 1 auto; min-width: 0; }
.hm-bar__meta {
  font-size: 0.72rem; color: var(--color-fg-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hm-bar__save { flex: none; margin-left: 0; }
.hm-bar__actions { flex: none; display: flex; align-items: center; gap: 0.375rem; }
@media (max-width: 640px) {
  .hm-bar__meta, .hm-bar__back-word { display: none; }
}
.hm-notice {
  padding: 0.4rem 0.75rem; border: 1px solid var(--color-border-1); border-radius: var(--radius-card, 0.75rem);
  background: var(--color-bg-subtle); color: var(--color-fg-2); font-size: 0.85rem;
}
.hm-notice--warn { border-color: var(--color-warning-500); background: var(--color-warning-50); color: var(--color-warning-700); }
.hm-notice--warn p + p { margin-top: 0.15rem; }
/* One line high; "Which files" opens a short list under it. */
.hm-notice--slim { padding-block: 0.25rem; line-height: 1.35; }
.hm-notice__more { display: inline; margin-left: 0.35rem; }
.hm-notice__more summary { display: inline; cursor: pointer; text-decoration: underline; }
.hm-notice__more ul { margin-top: 0.2rem; max-height: 7.5rem; overflow-y: auto; font-size: 0.8rem; }
.hm-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem;
  padding: 0.5rem 0.75rem; border: 1px solid var(--color-warning-500); border-radius: var(--radius-card, 0.75rem);
  background: var(--color-warning-50); color: var(--color-warning-700); font-size: 0.85rem; font-weight: 500;
}
.hm-banner[hidden] { display: none; }

/* Partly right (a mark between 0 and full) is its own state, not a pressed
   Right; after Wrong or a circle the part stays, and says how to go on. */
.hm-partly {
  padding: 0.15rem 0.55rem; border-radius: 999px;
  background: var(--color-warning-50); color: var(--color-warning-700); font-size: 0.75rem; font-weight: 600;
}
/* "Press C again to change it", for the 1.5s the second press counts. */
.hm-armed {
  flex-basis: 100%; padding: 0.2rem 0.55rem; border-radius: 0.5rem;
  background: var(--color-warning-50); color: var(--color-warning-700); font-size: 0.8rem; font-weight: 500;
}
/* The caption token, not fg-4 under a 75% fade (final stage retest
   2026-10-31: the "Enter" on Finish & next was unreadable). On a filled
   button the hint takes the button's own text colour, full strength;
   both tokens are redefined for dark mode on :root. */
.hm-kbd-hint { font-size: 0.7rem; color: var(--color-fg-3); }
:is(.btn-primary, .btn-danger) .hm-kbd-hint { color: inherit; opacity: 1; }
.hm-choices .hm-kbd-hint kbd { font: 0.65rem var(--font-mono, monospace); border: 1px solid var(--color-border-1); border-radius: 0.25rem; padding: 0 0.2rem; }
.hm-mark-input { width: 5.5rem; height: 2.25rem; font-family: var(--font-mono, monospace); }

/* Pencil-only (an Apple Pencil has been used): fingers scroll the pages
   while a tool is on, and only the Pencil draws (marking_ink holds its
   touches so the Pencil itself never scrolls). */
.hm-drawing.hm-pen-seen .hm-ink { touch-action: pan-x pan-y pinch-zoom; }

/* A finger: 44px targets for the tools, the choices and a comment box's
   grip (its visible dots stay small; the hit area grows round them), and no
   keyboard hints. Stage retest on an iPad (2026-10-31): Finish & next was
   36px, Get more and Quick 35px, "Take it" 19px and still showed its "A" --
   so EVERY control on the screen, button, summary or link-as-button, is at
   least 44px, and no key hint shows anywhere on it. */
@media (pointer: coarse) {
  .hm-keys, .hm-kbd-hint, .hm-focus kbd { display: none; }
  /* min-height only: a display here would beat the `hidden` attribute. */
  .hm-focus :is(button, summary, input[type="submit"], .hm-touch) { min-height: 2.75rem; }
  /* And 44 wide, and every box typed into 44 tall (final stage retest
     2026-10-31: the CFE quick pick was 42 wide, "Take it" 38, a part's
     comment box 40 tall). */
  .hm-focus :is(button, summary, input[type="submit"], .hm-touch) { min-width: 2.75rem; }
  .hm-focus :is(input[type="text"], input[type="number"], input:not([type]), select) { min-height: 2.75rem; }
  .hm-toast__action { min-height: 2.75rem; min-width: 2.75rem; }
  .hm-focus summary, .hm-focus a.hm-touch { display: inline-flex; align-items: center; }
  .hm-tool { min-height: 2.75rem; min-width: 2.75rem; justify-content: center; }
  .hm-choice, .hm-choice--digit { height: 2.75rem; min-width: 2.75rem; }
  .hm-mark-input { height: 2.75rem; }
  .hm-row { min-height: 2.75rem; }
  .hm-pick { min-height: 2.75rem; }
  .hm-comment__grip { position: relative; opacity: 0.8; }
  .hm-comment__grip::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 2.75rem; height: 2.75rem; transform: translate(-50%, -50%);
  }
  /* The one exception to 44px: a comment box's binding menu sits ON the
     paper, under the tutor's words, and at 44px it made the box's frame
     twice as tall as the words (owner 2026-11-01). 32px, still a
     comfortable tap. */
  .hm-focus .hm-comment__chip :is(select, button) { min-height: 2rem; min-width: 0; }
  .hm-screen .hm-foot { padding-block: 0.45rem; }
  .hm-overall textarea { height: 2.75rem; min-height: 2.75rem; }
}

/* ---------- Answers and worked solutions (Marking::SolutionMarkdown) ----------
   A native list's answer, solution and criteria as Markdown + LaTeX
   (owner 2026-11-01: "easy for a tutor to read"): bold step headings, one
   equation to a centred line, the Answer line stronger. Compact enough for
   the marking rail. white-space is reset because .hm-solution__work keeps
   plain text's line breaks with pre-wrap; here the markup carries them. */
.marking-md { white-space: normal; line-height: 1.6; }
.marking-md > * + * { margin-top: 0.45em; }
.marking-md strong, .marking-md b { font-weight: 650; color: var(--color-fg-1); }
.marking-md ul { list-style: disc; padding-left: 1.2em; }
.marking-md ol { list-style: decimal; padding-left: 1.4em; }
.marking-md li + li { margin-top: 0.15em; }
.marking-md :is(h1, h2, h3, h4, h5, h6) { font-size: 1em; font-weight: 650; }
.marking-md code { font-size: 0.9em; }
.marking-md__display {
  display: block; margin: 0.2em 0; text-align: center;
  overflow-x: auto; overflow-y: hidden;
}
.marking-md__equations { display: grid; gap: 0.1em; }
[data-controller~="maths"] .marking-md .katex-display { margin: 0; padding: 0.05em 0; }
.marking-md__answer {
  padding: 0.25em 0.5em; border-radius: 0.4rem;
  background: var(--color-bg-brand-soft); font-weight: 600;
}
.marking-md--inline { white-space: normal; }