/* Mock exam: start card, sticky progress bar, the paper (radio labels styled like the module quiz buttons), results. */
.exam-bar[hidden], .hand-in[hidden], .paper[hidden], .results[hidden], .exam-start[hidden] { display: none; }
.exam-start { margin-top: 2.4rem; padding: 1.4rem 1.4rem 1.6rem; border: 1px solid var(--rule-strong); border-radius: var(--r); background: var(--paper); }
.exam-chart { display: block; width: 100%; height: auto; margin-bottom: 1rem; }
.exam-start h2 { margin-top: 0; }
.timer-pick { border: 0; padding: 0; margin: 1.4rem 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.timer-pick legend { font: 600 .72rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .6rem; width: 100%; }
.timer-pick label { display: inline-flex; gap: .45rem; align-items: center; padding: .55rem .8rem; border: 1px solid var(--rule-strong); border-radius: 999px; cursor: pointer; font-size: .92rem; }
.timer-pick label:has(input:checked) { border-color: var(--magenta); background: rgba(176, 48, 122, .07); }
.timer-pick input { accent-color: var(--magenta); }
.btn[disabled] { opacity: .55; cursor: wait; }

.exam-bar { position: sticky; top: 4.4rem; z-index: 5; display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; margin-top: 2rem; padding: .7rem 1rem; background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--r); box-shadow: 0 6px 18px -14px rgba(20, 33, 61, .6); }
.exam-bar .fig { font-size: .9rem; color: var(--ink-2); white-space: nowrap; }
.exam-bar .track { height: 6px; background: var(--paper-3); border-radius: 3px; overflow: hidden; }
.exam-bar .track i { display: block; height: 100%; width: 0; background: var(--magenta); transition: width .25s; }
#clock.low { color: var(--port); }

.paper .q { border: 0; margin: 1.4rem 0 0; min-width: 0; }
.paper .q.done { box-shadow: inset 3px 0 0 var(--sea); }
.paper .q legend { float: left; width: 100%; }
.paper .q legend + * { clear: both; }
.paper label.opt { box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 1.8rem 1fr; gap: .4rem; padding: .65rem .8rem; border: 1px solid var(--rule-strong); border-radius: var(--r); background: var(--sail); }
.paper label.opt:hover { border-color: var(--ink); }
.paper label.opt input { position: absolute; opacity: 0; pointer-events: none; }
.paper label.opt .k { font: 600 .85rem/1.4 var(--mono); color: var(--ink-3); }
.paper label.opt:has(input:checked) { border-color: var(--sea); background: var(--shallows); }
.paper label.opt:has(input:checked) .k { color: var(--sea-deep); }
.paper label.opt:has(input:focus-visible) { outline: 2px solid var(--magenta); outline-offset: 1px; }
.paper .from, .rev .revise { margin-top: .6rem; font: 600 .72rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.q .qfig, .q svg[data-buoy] { display: block; width: 7rem; height: auto; margin: .6rem 0 0; }
.hand-in { margin-top: 2rem; padding-top: 1.4rem; border-top: 3px double var(--ink); display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.hand-in p { color: var(--ink-2); }

.results { margin-top: 2.4rem; outline: none; }
.res-head { padding: 1.4rem; background: var(--ink); color: var(--paper); border-radius: var(--r); }
.res-head h2 { margin: 0; color: var(--paper); font-size: 1rem; font-family: var(--body); letter-spacing: .16em; text-transform: uppercase; }
.res-score { display: flex; align-items: baseline; gap: 1rem; margin: .4rem 0; }
.res-score .fig { font-size: clamp(2.6rem, 8vw, 3.6rem); font-weight: 600; }
.res-score #pct { font: 600 1.6rem/1 var(--display); color: #F0B8D6; }
.res-head #res-note { color: var(--paper-2); }
.results h3 { margin-top: 2rem; }
.by-module td a { color: var(--ink); text-decoration: none; }
.by-module td a .mono { color: var(--magenta); margin-right: .3rem; }
.by-module td.bar { width: 38%; }
.by-module td.bar span { display: block; height: 10px; width: var(--w); min-width: 2px; background: var(--stbd); border-radius: 2px; }
.by-module tr.weak td.bar span { background: var(--port); }
.by-module tr.weak td.fig { color: var(--port); font-weight: 600; }
.rev .ans { display: grid; gap: .3rem; margin-top: .6rem; font-size: .95rem; }
.rev .ans .your { color: var(--port); }
.rev .ans .right { color: var(--stbd); font-weight: 600; }
.rev .revise { display: inline-block; color: var(--magenta); text-decoration: none; }
.rev .revise:hover { text-decoration: underline; }
.again { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
@media (max-width: 860px) {
  .exam-bar { top: 3.6rem; gap: .6rem; padding: .6rem .7rem; }
  .by-module td.bar { width: 28%; }
}