/* The mock test marker's APP VIEW (/tools/mock-test-marker/app; round 3
   layout 2026-10-22): one screen, nothing scrolls but the aspects. A light
   header (the clock over the learner's name, Restart, Undo from 760px,
   Finish), the status line, the open heading's rows, "Last: … Undo", and the
   headings as a 4-across grid at the bottom of a phone / a list on the left
   from 760px / the outcome column on the right from 1100px. The debrief is a
   full-screen sheet. Rides mock-marker.css; tokens come from the page. */
html { height: 100%; }
body.mk-app { margin: 0; height: 100vh; height: 100dvh; overflow: hidden; background: var(--paper); color: var(--ink); font-family: "Instrument Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
body.mk-app main { height: 100%; }
body.mk-app .mk { height: 100%; max-width: 1280px; margin: 0 auto; padding: 0; border: 0; border-radius: 0; background: transparent; display: flex; flex-direction: column; box-sizing: border-box; }
body.mk-app .mk-foot { display: none; }
/* header */
.mk-top { flex: none; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.mk-top .l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mk-top .ttl { font-size: 12px; font-weight: 600; color: var(--muted); }
.mk-top input { font: inherit; font-size: 18px; font-weight: 700; width: 100%; min-width: 0; height: 30px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ink); }
.mk-top input::placeholder { color: var(--muted); font-weight: 600; }
.mk-top input:focus { outline: 2px solid var(--yellow); outline-offset: 2px; border-radius: 4px; }
.mk-top .r { flex: none; display: flex; align-items: center; gap: 6px; }
.mk-top .r button { font: inherit; font-size: 14px; font-weight: 600; height: 44px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.mk-top .r button:disabled { opacity: .45; cursor: default; }
.mk-top .r [hidden] { display: none; }
.mk-top .r .fin { border: 0; background: var(--ink); color: var(--paper); font-weight: 700; padding: 0 16px; }
.mk-top .r .rst { font-size: 19px; min-width: 44px; padding: 0; justify-content: center; }
.mk-top .r .rst.arm { font-size: 14px; padding: 0 12px; background: var(--verm); border-color: var(--verm); color: #fff; }
/* the timer reads as part of the eyebrow line: "Mock test · 18:42" (▶ Start until it runs) */
.mk-top .ttl { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.mk-top .timer { font: inherit; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; height: 24px; padding: 0 8px; border-radius: 999px; border: 0; background: var(--verm); color: #fff; cursor: pointer; }
.mk-top .timer.on, .mk-top .timer.done { background: transparent; color: var(--muted); padding: 0; height: auto; }
@media (min-width: 760px) { .mk-top .ttl { font-size: 13px; } .mk-top .timer.on, .mk-top .timer.done { font-size: 16px; color: var(--ink); } }
/* the marking area fills what is left */
body.mk-app .mk-main { flex: 1; min-height: 0; padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); grid-template-rows: auto minmax(0, 1fr) auto; }
body.mk-app .mk-panel { min-height: 0; }
body.mk-app .mk .cards { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
body.mk-app .mk-panel .ph { margin-top: 4px; }
@media (min-width: 760px) {
  .mk-top { padding-left: 20px; padding-right: 20px; min-height: 72px; }
  body.mk-app .mk-main { padding: 14px 20px 16px; grid-template-rows: auto minmax(0, 1fr); align-items: stretch; }
  body.mk-app .mk-side { align-self: start; }
  body.mk-app .mk-nav { min-height: 0; max-height: 100%; overflow: auto; }
}
@media (min-width: 1100px) {
  body.mk-app .mk-main { grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  body.mk-app .mk-side { min-height: 0; }
  body.mk-app .mk-marks { flex: 1; }
  body.mk-app .mk-marks ol { max-height: none; flex: 1; }
}
/* the debrief as a sheet */
body.mk-app .mk .debrief.sheet { position: fixed; z-index: 55; left: 0; right: 0; top: calc(65px + env(safe-area-inset-top, 0px)); bottom: 0; overflow: auto; -webkit-overflow-scrolling: touch; margin: 0; padding: 16px 12px calc(28px + env(safe-area-inset-bottom, 0px)); background: var(--paper); border-top: 0; }
@media (min-width: 760px) { body.mk-app .mk .debrief.sheet { top: calc(73px + env(safe-area-inset-top, 0px)); } }
body.mk-app .mk .debrief.sheet > * { max-width: 760px; margin-left: auto; margin-right: auto; }
@media (max-width: 759px) { .mk-top .r .hundo { display: none; } }  /* the phone's Undo sits under the list (round 3) */
@media (max-width: 479px) {
  .mk-top { padding-left: 12px; padding-right: 12px; gap: 8px; }
  .mk-top .r { gap: 5px; }
  .mk-top .r button { padding: 0 10px; }
}