/* Mocks under exam conditions: marks, question grid, one case per screen, hand-in check, /simulacros, review mode.
   The mock bar is night-coloured (style.css), so its grid uses the on-night tokens. */
.marked-count { font-size: .95rem; font-family: var(--mono); }
.timer.warn { color: var(--band-amber); }
.timer-alert { margin: 0; padding: .45rem 1.25rem; background: var(--band-amber); color: var(--night); font-weight: 700; text-align: center; }
.grid-box { padding-bottom: .5rem; }
.grid-box > summary { cursor: pointer; font-weight: 700; color: var(--on-night); min-height: 44px; display: flex; align-items: center; }
.q-grid { max-height: 50vh; overflow-y: auto; padding: .25rem 0 .5rem; }
.q-grid-cells { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr)); gap: .35rem; }
.cell { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; border-radius: var(--r-sm); border: 2px solid var(--on-night-muted); color: var(--on-night); font-weight: 700; text-decoration: none; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.cell-answered { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }
.cell-marked { background: var(--band-amber); border-color: var(--band-amber); color: var(--night); }
.cell-blank { background: transparent; border-style: dashed; }
.q-grid-legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: .5rem 0 0; font-size: .85rem; color: var(--on-night-muted); }
.q-grid-legend .cell { min-width: 1rem; min-height: 1rem; width: 1rem; height: 1rem; vertical-align: middle; border-radius: 4px; }
.mark-toggle { display: flex; gap: .55rem; align-items: center; margin-top: .75rem; min-height: 44px; font-weight: 600; color: var(--muted); cursor: pointer; }
.mark-toggle input { width: 1.25rem; height: 1.25rem; accent-color: var(--band-amber); }
.question:has(.mark-toggle input:checked) fieldset { border-color: var(--band-amber); box-shadow: inset 4px 0 0 var(--band-amber); }
.view-switch { margin: 0 0 .5rem; }
.page-mock .question, [data-screen] { scroll-margin-top: 7rem; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem; }
.pager .btn[disabled] { opacity: .45; cursor: default; }
.pager-position { font-weight: 700; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hand-in-dialog { max-width: 30rem; width: calc(100% - 2rem); border: 1px solid var(--line); border-radius: var(--r); padding: 1.5rem; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-2); }
.hand-in-dialog::backdrop { background: rgba(8, 20, 22, .6); }
.hand-in-head { margin: .75rem 0 .25rem; font-weight: 600; }
.jump-list { display: flex; flex-wrap: wrap; gap: .35rem; }
.jump-list a, .jump-list span { display: inline-flex; min-width: 2.5rem; min-height: 2.5rem; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--r-sm); font-weight: 700; font-family: var(--mono); }

/* /simulacros: start cards, past mocks, trends */
.mock-offers { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.area-trends { list-style: none; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
.area-trend { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem; align-items: center; padding: .75rem 1rem; background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--line); border-radius: var(--r-sm); }
.area-trend.band-green { border-left-color: var(--band-green); }
.area-trend.band-amber { border-left-color: var(--band-amber); }
.area-trend.band-red { border-left-color: var(--band-red); }
.area-trend:not([class*="band-"]) { border-left-width: 1px; }
.area-name, .area-last, .area-links { margin: 0; }
.area-name { font-weight: 700; }
.area-last, .area-links { grid-column: 1 / -1; }
.area-links { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .95rem; }
.area-links a { min-height: 44px; display: inline-flex; align-items: center; }
.change { color: var(--muted); font-size: .9rem; margin-left: .5rem; }
.spark { display: block; overflow: visible; }
.spark-line { fill: none; stroke: var(--teal); stroke-width: 2; stroke-linejoin: round; }
.spark-ref { stroke: var(--coral); stroke-width: 1; stroke-dasharray: 3 3; }
.spark-dot { fill: var(--teal); }
.spark.band-red .spark-dot { fill: var(--band-red); }
.spark.band-amber .spark-dot { fill: var(--band-amber); }
.spark.band-green .spark-dot { fill: var(--band-green); }
.score-trend { display: flex; align-items: center; gap: 1rem; margin: 0 0 1rem; }
.score-trend .note { margin: 0; }
.past-mocks tr.is-pass td:nth-child(4) { color: var(--band-green); font-weight: 700; }
.past-mocks tr.is-fail td:nth-child(4) { color: var(--band-red); }

/* Review mode on the results */
.review-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.5rem; scroll-margin-top: 1rem; }
.review-filter a { padding: .45rem .9rem; min-height: 44px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface); text-decoration: none; font-weight: 600; }
.review-filter a[aria-current] { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }
.marked-badge { display: inline-block; margin: 0 0 .5rem; padding: .15rem .6rem; border-radius: var(--pill); background: var(--sand); color: var(--sand-ink); font-size: .85rem; font-weight: 700; }
.pager[hidden], .view-switch[hidden], .timer-alert[hidden], [data-screen][hidden], .link-button[hidden] { display: none; }

@media (max-width: 30rem) {
  .mock-bar-row { flex-wrap: wrap; }
  .answered, .marked-count { white-space: nowrap; font-size: .9rem; }
  .save-status { flex-basis: 100%; }
  .view-switch { padding: 0 1rem; }
  .area-trends { grid-template-columns: 1fr; }
}