/* Styles for the instructor views (links, results, result detail).
   Class prefixes: ix- shared, lk- links, rs- results, rd- result detail.
   Same rules as app.css: logical properties only, touch targets >= 44px, no inline styles. */

/* ---- shared -------------------------------------------------------- */

.ix-icon {
  inline-size: 1.15em;
  block-size: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ix-verdict { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; white-space: nowrap; }
.ix-verdict.ok { color: var(--ok); }
.ix-verdict.bad { color: var(--bad); }

.ix-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px 20px; margin: 0; }
.ix-fact dt { font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.ix-fact dd { margin: 0; overflow-wrap: anywhere; }

.ix-val { min-inline-size: 0; }

/* Wide tables become stacked cards on narrow screens: every cell shows its column name. */
@media screen and (max-width: 720px) {
  .ix-stack, .ix-stack tbody { display: block; }
  .ix-stack thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .ix-stack tr { display: block; padding: 10px 12px; border-block-end: 1px solid var(--line); }
  .ix-stack tbody tr:last-child { border-block-end: 0; }
  .ix-stack td { display: flex; align-items: baseline; gap: 12px; padding: 4px 0; border: 0; white-space: normal; }
  .ix-stack td::before {
    content: attr(data-label);
    flex: 0 0 8.5em;
    max-inline-size: 40%;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--muted);
  }
  .ix-stack td[data-label=""]::before { display: none; }
  .ix-stack td > .ix-val { flex: 1 1 auto; }
  .ix-stack td.actions > .ix-val { flex-basis: 100%; }
}

/* ---- links --------------------------------------------------------- */

.lk-validity { margin: 0; }
.lk-list-title { margin: 0; }

.lk-details-body { display: grid; gap: 20px; }
@media (min-width: 700px) {
  .lk-details-body { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}

.lk-url { font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 0.9rem; }

.lk-qr { margin: 0; text-align: center; }
.lk-qr .qr { display: block; inline-size: min(260px, 100%); margin-inline: auto; border: 1px solid var(--line); border-radius: 8px; }
.lk-qr figcaption { max-inline-size: 260px; margin-block-start: 8px; margin-inline: auto; }

.lk-table .lk-note { max-inline-size: 24ch; overflow-wrap: anywhere; }
.lk-table .lk-by .ltr { white-space: nowrap; }
.lk-table td.actions { white-space: normal; }
.lk-table td.actions .row { min-inline-size: 190px; }
@media screen and (max-width: 720px) {
  .lk-table .lk-note { max-inline-size: none; }
  .lk-table .lk-by .ltr { white-space: normal; overflow-wrap: anywhere; }
}

/* ---- results list -------------------------------------------------- */

.rs-filters { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) {
  .rs-filters { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr); }
}
.rs-count { margin: 0; font-weight: 700; }

.rs-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.rs-name { font-weight: 600; overflow-wrap: anywhere; }
.rs-exam-number { display: block; font-weight: 700; }
.rs-exam-title { color: var(--muted); font-size: 0.9rem; overflow-wrap: anywhere; }
.rs-score { font-weight: 700; }
.rs-legend { margin: 12px 0 0; }
@media screen and (max-width: 720px) {
  .rs-exam-number { display: inline; margin-inline-end: 6px; }
}

/* ---- result detail ------------------------------------------------- */

.rd-name { margin: 0; overflow-wrap: anywhere; }
.rd-exam-line { margin: 0; }
.rd-score { font-size: 1.25rem; font-weight: 800; }

.seg.rd-seg { display: flex; flex-wrap: nowrap; }
.rd-seg > button { flex: 1 1 auto; min-inline-size: 0; white-space: normal; }
@media (min-width: 720px) {
  .seg.rd-seg { display: inline-flex; }
}

.rd-text { white-space: pre-wrap; overflow-wrap: anywhere; font-weight: 600; text-align: start; }
.rd-ans { display: flex; align-items: baseline; gap: 8px; text-align: start; }
.rd-letter {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-inline-size: 28px;
  block-size: 28px;
  padding-inline: 4px;
  border: 2px solid var(--line);
  border-radius: 14px;
  font-weight: 700;
}
.rd-ans-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.rd-numcol { inline-size: 3.5em; }
.rd-verdict { white-space: nowrap; }

.rd-fig { margin-block-start: 8px; }
.rd-img { max-block-size: 220px; margin-block-end: 0; }

/* Wrong answers: tinted row, a bar at the start edge, and the word "Wrong" in the verdict cell. */
.rd-table tbody .rd-row[data-ok="false"] { background: var(--bad-bg); }
.rd-table tbody .rd-row[data-ok="false"] > td:first-child { border-inline-start: 4px solid var(--bad); }
@media screen and (max-width: 720px) {
  .rd-table tbody .rd-row[data-ok="false"] { border-inline-start: 4px solid var(--bad); }
  .rd-table tbody .rd-row[data-ok="false"] > td:first-child { border-inline-start: 0; }
  .rd-table td.rd-numcol { inline-size: auto; }
  .rd-ans-text, .rd-text { min-inline-size: 0; }
}

/* ---- print (A4) ---------------------------------------------------- */

@media print {
  /* The router focuses <main> after navigation; its focus ring must not be printed around the page. */
  main:focus, main:focus-visible { outline: none; }

  /* Paper is always light, whatever colour scheme the screen uses. */
  .rd {
    --surface: #fff;
    --surface-2: #eee;
    --text: #000;
    --muted: #444;
    --line: #888;
    --ok: #14693f;
    --ok-bg: #e3f3ea;
    --bad: #a8211a;
    --bad-bg: #fbe8e6;
    --warn: #7d5200;
    --warn-bg: #fff1cf;
    --accent: #1f5fbf;
    --accent-soft: #e3edfb;
  }

  .rd.stack-lg > * + * { margin-block-start: 10px; }

  .rd-print-title { margin: 0 0 8px; font-size: 18pt; }
  .rd-head-table { table-layout: fixed; inline-size: 100%; margin-block-end: 8px; }
  .rd-head-table td { vertical-align: top; }
  .rd-k { display: block; font-size: 8.5pt; color: #444; }
  .rd-v { display: block; font-size: 11pt; font-weight: 700; overflow-wrap: anywhere; }
  .rd-print-filter { margin: 0 0 6px; font-style: italic; }

  .rd-answers { background: transparent; border: 0; border-radius: 0; overflow: visible; }
  .rd-answers .table-wrap { overflow: visible; }
  .rd-table { font-size: 10pt; }
  .rd-table caption { display: none; }
  .rd-table th { color: #000; background: #eee; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rd-table td { color: #000; }
  .rd-table tbody .rd-row[data-ok="false"] { background: #fbe8e6; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rd-table tbody .rd-row[data-ok="false"] > td:first-child { border-inline-start: 4px solid #a8211a; }
  .rd-table tr { break-inside: avoid; }
  .rd-letter { border-color: #555; }
  .ix-verdict.ok { color: #14693f; }
  .ix-verdict.bad { color: #a8211a; }
  .rd-img { max-block-size: 40mm; }

  /* The checkbox "Include question text in the printout" toggles this class on the view. */
  .rd-hide-q .rd-qcol { display: none; }

  .rd-print-foot { margin: 12px 0 0; font-size: 9pt; color: #444; }
}