/* Past-paper bank. Uses the pd.css tokens: red pen for the examiner, green for
   marks earned, blue for the student's own marks, highlighter for what scores. */

.seg{display:inline-flex;border:1px solid var(--edge);border-radius:var(--r);overflow:hidden}
.seg button{font-family:var(--head);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  border:0;background:var(--panel);color:var(--dim);padding:10px 16px;cursor:pointer}
.seg button[aria-selected="true"]{background:var(--accent);color:var(--onaccent)}

/* topic strip: one cell per topic, the bar shows marks earned of marks tried */
.tstrip{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.tcell{border:1px solid var(--edge);border-radius:var(--r);padding:10px 12px;cursor:pointer;
  background:var(--panel);text-align:left;font:inherit;color:inherit}
.tcell:hover{border-color:var(--edge2)}
.tcell.on{border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}
.tcell b{font-family:var(--head);font-weight:normal;font-size:20px;line-height:1;display:block}
.tcell .tt{font-size:12.5px;line-height:1.25;color:var(--muted);display:block;margin-top:4px;min-height:2.5em}
.tcell .bar{margin-top:8px}
.tcell .k{margin-top:6px}
.tcell.weak .k{color:var(--pen)}

.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.filters label{display:flex;flex-direction:column;gap:4px}
.filters select,.filters input[type=search]{font:inherit;font-size:15px;border:1px solid var(--edge2);
  border-radius:var(--r-sm);padding:7px 10px;background:var(--panel);color:var(--text);min-width:150px}
.filters input[type=search]{min-width:220px}
.filters .chk{flex-direction:row;align-items:center;gap:8px;font-size:15px;padding-bottom:8px}
.count{margin:18px 0 8px}

/* one question part */
.q{border:1px solid var(--edge);border-radius:var(--r-lg);margin:0 0 16px;overflow:hidden;background:var(--panel)}
.q>header{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.q .qn{font-family:var(--head);font-size:24px;line-height:1}
.q .meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.q .meta a{text-decoration:none}
.q .circ{margin-left:auto;padding:5px 9px}
.q.done .circ{color:var(--tick);border-color:var(--tick)}
.qimg{padding:14px 18px;display:grid;gap:10px}
.qimg img{display:block;width:100%;max-width:900px;height:auto;margin:0 auto}
.acts{display:flex;gap:8px;flex-wrap:wrap;padding:0 18px 14px}
.acts .btn[aria-expanded="true"]{background:var(--accent);color:var(--onaccent);border-color:var(--accent)}
.drawer{border-top:1px solid var(--line);padding:14px 18px}
.drawer>.k{margin-bottom:8px}
.ms img{border:1px solid var(--line);max-width:720px}

/* self-mark: the student's own mark is biro blue */
.selfmark{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px}
.selfmark .k{margin-right:6px}
.selfmark button{font-family:var(--head);font-size:14px;min-width:36px;height:36px;border:1px solid var(--edge2);
  border-radius:var(--r-sm);background:var(--panel);color:var(--text);cursor:pointer}
.selfmark button[aria-pressed="true"]{background:var(--biro);border-color:var(--biro);color:#fff}
.selfmark .clear{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  border:0;background:none;color:var(--dim);cursor:pointer;min-width:0}

/* examiner report: red pen, verbatim */
.er blockquote{margin:0 0 12px;padding:2px 0 2px 14px;border-left:2px solid var(--pen);font-style:italic}
.er .src{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--pen);text-decoration:none}
.model{background:var(--panel2);border-radius:var(--r);padding:12px 16px}
.model .warn{color:var(--pen)}

/* timed paper */
.pbar{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--line);
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 0;margin-bottom:16px}
.clock{font-family:var(--head);font-size:30px;line-height:1;min-width:4.2em}
.clock.low{color:var(--pen)}
.pick{display:grid;gap:8px;margin-top:20px}
.result{border:1px solid var(--text);border-radius:var(--r-lg);padding:18px 20px;margin-bottom:16px}

@media(max-width:760px){
  .filters label,.filters select,.filters input[type=search]{width:100%;min-width:0}
  .q>header,.qimg,.acts,.drawer{padding-left:12px;padding-right:12px}
}
@media print{.top,.modes,#topics,.filters,.acts,#more,.pbar .btn{display:none!important}
  .q{break-inside:avoid;border:0}}