/* exam.4ab.in — AI Evaluator results report + examiner review (Phase 3).
   Loads AFTER evaluator.css. Owns only `.evr-*` — nothing here redefines the
   `.ev-*` mode-selector/console vocabulary evaluator.css already has. Reuses
   the shared `--green/--red/--amber/--navy/--gold` tokens from app-ab.css and
   the `--purple` token evaluator.css already introduced for "review", under
   an `--evr-*` alias layer so every chart/token reference in the JS has one
   name that cannot silently drift from the page's real palette. */

:root {
  --evr-green:  var(--green);
  --evr-red:    var(--red);
  --evr-amber:  var(--amber);
  --evr-navy:   var(--navy);
  --evr-gold:   var(--gold, #C9A84C);
  --evr-purple: var(--purple, #6B4FBB);
  --evr-grey:   var(--muted, #6B7280);
  --evr-amber-bg: rgba(150, 105, 12, .10);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --evr-amber-bg: rgba(251, 191, 36, .14); }
}
:root[data-theme="dark"] { --evr-amber-bg: rgba(251, 191, 36, .14); }

.evr-root { display: flex; flex-direction: column; gap: 22px; }

/* -------------------------------------------------------------- toolbar -- */
.evr-toolbar { display: flex; justify-content: flex-end; }
.evr-print-btn { min-height: 40px; padding: 8px 16px; font-size: 13px; }

/* ------------------------------------------------------------ disclaimer -- */
.evr-disclaimer {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--evr-amber-bg); border: 1px solid var(--evr-amber);
  border-radius: var(--r-md); padding: 12px 14px;
}
.evr-disclaimer-ic { font-size: 18px; line-height: 1; color: var(--evr-amber); flex: 0 0 auto; }
.evr-disclaimer p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); }

/* ----------------------------------------------------------------- shell -- */
.evr-sec {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 16px 18px;
}
.evr-h { margin: 0 0 12px; font-size: 17px; font-weight: 700; color: var(--ink); }
.evr-h3 { margin: 16px 0 8px; font-size: 13.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }
.evr-note { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); }
.evr-na { margin: 6px 0; font-size: 13px; color: var(--muted); font-style: italic; }

/* --------------------------------------------------------------- badge --- */
.evr-badge {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  background: var(--chip-bg, rgba(27,42,94,.06)); border: 1px solid var(--line);
  font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--navy);
}
.evr-badge--none { color: var(--muted); font-style: italic; font-weight: 500; }

/* ---------------------------------------------------------------- chips -- */
.evr-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  border-radius: 999px; font-size: 12.5px; font-weight: 600; border: 1px solid transparent;
}
.evr-chip-ic { font-size: 13px; line-height: 1; }
.evr-chip--green  { background: color-mix(in srgb, var(--evr-green) 14%, transparent);  color: var(--evr-green);  border-color: color-mix(in srgb, var(--evr-green) 35%, transparent); }
.evr-chip--amber  { background: var(--evr-amber-bg); color: var(--evr-amber); border-color: color-mix(in srgb, var(--evr-amber) 35%, transparent); }
.evr-chip--red    { background: color-mix(in srgb, var(--evr-red) 14%, transparent);    color: var(--evr-red);    border-color: color-mix(in srgb, var(--evr-red) 35%, transparent); }
.evr-chip--grey   { background: var(--chip-bg, rgba(107,114,128,.10)); color: var(--evr-grey); border-color: var(--line); }
.evr-chip--purple { background: color-mix(in srgb, var(--evr-purple) 14%, transparent); color: var(--evr-purple); border-color: color-mix(in srgb, var(--evr-purple) 35%, transparent); }
.evr-count-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.evr-hr-line { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }

/* ------------------------------------------------------------- score sec -- */
.evr-score-top { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.evr-score-ring svg { display: block; }
.evr-score-meta { flex: 1 1 260px; min-width: 220px; }
.evr-score-badgerow { margin-bottom: 8px; }
.evr-score-context { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.evr-donut-top { font-size: 26px; font-weight: 800; fill: var(--ink); }
.evr-donut-bottom { font-size: 11px; fill: var(--muted); }

/* --------------------------------------------------------------- charts -- */
.evr-chart { margin: 10px 0; }
.evr-chart-cap { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.evr-chart-svg { width: 100%; overflow-x: auto; }
.evr-chart-svg svg { max-width: 100%; }
.evr-chart--narrow .evr-chart-svg svg { max-width: 320px; }
.evr-bar-label { font-size: 11px; fill: #fff; font-weight: 700; }
.evr-hbar-label { font-size: 12px; fill: var(--body); dominant-baseline: middle; }
.evr-hbar-value { font-size: 12px; fill: var(--ink); dominant-baseline: middle; }
.evr-hbar-value--sm { font-size: 10.5px; fill: var(--muted); }
.evr-hbar-track { fill: var(--chip-bg, rgba(107,114,128,.10)); }
.evr-hbar-na { fill: repeating-linear-gradient(45deg, var(--line), var(--line) 3px, transparent 3px, transparent 6px); opacity: .5; }
.evr-funnel-label { font-size: 12px; fill: #fff; font-weight: 700; }
.evr-baseline { stroke: var(--line); stroke-width: 1; }

.evr-fallback { margin-top: 6px; }
.evr-fallback summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.evr-datatable { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 12.5px; }
.evr-datatable th, .evr-datatable td { border-bottom: 1px solid var(--line); padding: 4px 8px; text-align: left; }

.evr-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 760px) { .evr-two-col { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- question map -- */
.evr-qgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; margin: 8px 0; }
.evr-qcell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 44px; padding: 6px 4px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--card-2); font: inherit; cursor: pointer; text-align: center;
}
.evr-qcell:hover, .evr-qcell:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.evr-qcell-ic { font-size: 15px; line-height: 1; }
.evr-qcell-label { font-size: 10.5px; color: var(--muted); }
.evr-qcell--green  .evr-qcell-ic { color: var(--evr-green); }
.evr-qcell--amber  .evr-qcell-ic { color: var(--evr-amber); }
.evr-qcell--red    .evr-qcell-ic { color: var(--evr-red); }
.evr-qcell--grey   .evr-qcell-ic { color: var(--evr-grey); }
.evr-qcell--purple .evr-qcell-ic { color: var(--evr-purple); }
.evr-legend { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 0; font-size: 11.5px; color: var(--muted); }
.evr-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.evr-legend-ic--green  { color: var(--evr-green); }
.evr-legend-ic--amber  { color: var(--evr-amber); }
.evr-legend-ic--red    { color: var(--evr-red); }
.evr-legend-ic--grey   { color: var(--evr-grey); }
.evr-legend-ic--purple { color: var(--evr-purple); }
.evr-legend-ic--navy   { color: var(--evr-navy); }
.evr-legend-ic--gold   { color: var(--evr-gold); }

.evr-qbars { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.evr-qbar-row { display: grid; grid-template-columns: 70px minmax(0,1fr) auto; align-items: center; gap: 8px; font-size: 12.5px; }
.evr-qbar-track { height: 12px; border-radius: 6px; background: var(--chip-bg, rgba(107,114,128,.10)); overflow: hidden; }
.evr-qbar-fill { display: block; height: 100%; border-radius: 6px; }
.evr-qbar-fill--na { display: block; height: 100%; width: 100%; background: repeating-linear-gradient(45deg, var(--line) 0 4px, transparent 4px 8px); }
.evr-qbar-value { white-space: nowrap; color: var(--ink); }
.evr-qbar-conf { grid-column: 1 / -1; font-size: 11px; color: var(--muted); margin-top: -2px; }
.evr-suggested { color: var(--muted); font-style: italic; }
.evr-notmarked { color: var(--evr-amber); font-style: italic; }

/* -------------------------------------------------------------- heatmap -- */
.evr-tablewrap { overflow-x: auto; }
.evr-heatmap { width: 100%; border-collapse: collapse; font-size: 13px; }
.evr-heatmap th, .evr-heatmap td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.evr-heat { display: inline-block; padding: 2px 8px; border-radius: 999px; font-weight: 700; font-size: 12px; }
.evr-heat--green { background: color-mix(in srgb, var(--evr-green) 16%, transparent); color: var(--evr-green); }
.evr-heat--amber { background: var(--evr-amber-bg); color: var(--evr-amber); }
.evr-heat--red   { background: color-mix(in srgb, var(--evr-red) 16%, transparent); color: var(--evr-red); }
.evr-heat--grey  { background: var(--chip-bg, rgba(107,114,128,.10)); color: var(--evr-grey); }

/* ------------------------------------------------------------ difficulty -- */
.evr-diffcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 10px; }
.evr-diffcard { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px; background: var(--card-2); text-align: center; }
.evr-diffcard-band { margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: capitalize; }
.evr-diffcard-pct { margin: 0; font-size: 22px; font-weight: 800; color: var(--ink); }
.evr-diffcard-marks { margin: 4px 0 0; font-size: 12px; color: var(--muted); }

/* --------------------------------------------------------------- recheck -- */
.evr-recheck-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 10px; }
@media (max-width: 900px) { .evr-recheck-cols { grid-template-columns: 1fr; } }
.evr-evlist, .evr-dnrlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.evr-evcard { border-radius: var(--r-sm); padding: 10px; border: 1px solid var(--line); background: var(--card-2); }
.evr-evcard--red    { border-left: 4px solid var(--evr-red); }
.evr-evcard--amber  { border-left: 4px solid var(--evr-amber); }
.evr-evcard--grey   { border-left: 4px solid var(--evr-grey); }
.evr-evcard-label { margin: 0 0 4px; font-weight: 700; font-size: 13px; }
.evr-evcard-reason { margin: 0 0 4px; font-size: 12.5px; color: var(--body); }
.evr-evcard-evidence { margin: 0 0 6px; font-size: 12px; color: var(--muted); font-style: italic; }
.evr-linkbtn {
  background: none; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px;
  font-size: 12px; color: var(--navy); cursor: pointer; min-height: 32px;
}
.evr-linkbtn:hover, .evr-linkbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.evr-dnr { margin-top: 14px; }
.evr-dnrlist li { font-size: 12.5px; color: var(--muted); }

/* -------------------------------------------------------------- evidence -- */
.evr-evidence-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.evr-evidence-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card-2); }
.evr-evidence-text { flex: 1 1 200px; font-size: 12.5px; color: var(--body); }

/* ----------------------------------------------------------- improvement -- */
.evr-improve-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.evr-improve-row { display: flex; gap: 10px; align-items: flex-start; }
.evr-improve-n {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: var(--on-navy, #fff);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}
.evr-improve-body { font-size: 13.5px; line-height: 1.5; }
.evr-improve-topic { color: var(--muted); font-size: 12px; }

/* ------------------------------------------------------------- simulator -- */
.evr-sim { margin-top: 8px; }
.evr-sim-label { display: block; font-size: 13px; margin-bottom: 6px; }
.evr-sim-range { width: 100%; max-width: 360px; }
.evr-sim-out { margin: 8px 0 0; font-size: 13.5px; font-weight: 700; color: var(--navy); }
.evr-gaplist { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--body); }

/* --------------------------------------------------------- examiner review -- */
.evr-review-list { display: flex; flex-direction: column; gap: 14px; }
.evr-review-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px;
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; background: var(--card-2);
}
@media (max-width: 900px) { .evr-review-row { grid-template-columns: 1fr; } }
.evr-review-img { width: 100%; border-radius: var(--r-sm); border: 1px solid var(--line); display: block; }
.evr-review-img--missing { min-height: 120px; background: var(--chip-bg, rgba(107,114,128,.10)); border-radius: var(--r-sm); }
.evr-review-label { margin: 0 0 4px; font-weight: 700; }
.evr-review-conf, .evr-review-evidence, .evr-review-feedback { font-size: 12.5px; color: var(--muted); }
.evr-review-hint { font-size: 11.5px; color: var(--muted); margin: 0 0 8px; }
.evr-review-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.evr-review-btns .btn { min-height: 40px; padding: 6px 12px; font-size: 12.5px; }
.evr-review-editbox, .evr-review-commentbox { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.evr-review-editval { max-width: 100px; }
.evr-review-commenttxt { flex: 1 1 100%; }

/* ----------------------------------------------------- annotation viewer -- */
.evr-anno-root { display: flex; flex-direction: column; gap: 18px; }
.evr-anno-page { margin: 0; }
.evr-anno-stack { position: relative; width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--card-2); }
.evr-anno-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.evr-anno-img--missing { position: absolute; inset: 0; }
.evr-anno-stack--missing { display: flex; align-items: center; justify-content: center; padding: 16px; }
.evr-anno-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.evr-anno-rect { fill: none; stroke-width: 3; }
.evr-anno-rect--green  { stroke: var(--evr-green); }
.evr-anno-rect--amber  { stroke: var(--evr-amber); }
.evr-anno-rect--red    { stroke: var(--evr-red); }
.evr-anno-rect--grey   { stroke: var(--evr-grey); }
.evr-anno-rect--purple { stroke: var(--evr-purple); }
.evr-anno-mark { cursor: pointer; }
.evr-anno-text { font-size: 22px; font-weight: 700; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.evr-anno-text--green  { fill: var(--evr-green); }
.evr-anno-text--amber  { fill: var(--evr-amber); }
.evr-anno-text--red    { fill: var(--evr-red); }
.evr-anno-text--grey   { fill: var(--evr-grey); }
.evr-anno-text--purple { fill: var(--evr-purple); }
.evr-anno-page figcaption { margin-top: 6px; font-size: 12px; color: var(--muted); text-align: center; }
.evr-anno-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--muted); }

/* --------------------------------------------------------------- phone --- */
@media (max-width: 390px) {
  .evr-sec { padding: 12px; }
  .evr-qgrid { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
  .evr-donut-top { font-size: 20px; }
  .evr-score-top { flex-direction: column; align-items: flex-start; }
}

/* -------------------------------------------------------------- print --- */
@media print {
  .evr-sec, .evr-anno-page, .evr-review-row, .evr-diffcard, .evr-evcard, .evr-chart {
    break-inside: avoid;
  }
  .evr-sec { border: 1px solid #000; }
  .evr-review, .evr-fallback[open] summary { break-inside: avoid; }
  .evr-qcell:hover, .evr-linkbtn:hover { outline: none; }
  .evr-anno-stack { border-color: #000; }
  /* app-ab.css's own print block already flattens --green/--red/--amber/etc.
     to #000, so charts stay legible in black and white with no rule needed
     here beyond avoiding awkward page breaks. */

  /* Chrome that means nothing on paper — hidden. The disclaimer, the status
     badge and every chart's own <details> data-table fallback are NOT in
     this list and must never be added to it: a printout that drops the
     "Checked by AI… your teacher's decision" disclaimer, or a chart that
     prints as an unreadable grey smudge with no table underneath, is exactly
     the artefact that can get shown to a parent as if it were final. */
  .evr-print-btn,
  .evr-toolbar,
  .evr-sim-range,
  .evr-linkbtn,
  .evr-review-btns,
  .evr-review-editbox,
  .evr-review-commentbox {
    display: none !important;
  }

  /* A <details> fallback table is normally collapsed until clicked — for
     print it must be visible regardless of that toggle state, because a
     chart is a picture and the table is the only form of the same numbers
     that survives a black-and-white printout with no image rendering at
     all. This overrides the UA default that hides a closed <details>'s
     non-summary content. */
  .evr-fallback > *:not(summary) { display: block !important; }
  .evr-fallback summary { display: none; }
}