/* ============================================================================
   attempt-review.css — the classroom "Review attempt" view (js/attempt-review.js)
   Sits above the student drawer (z 90). Light body like the drawer, the same
   dark gradient header, IBM Plex Mono eyebrows, paper-theme strips.
   ============================================================================ */

.arv-root { position: fixed; inset: 0; z-index: 120; }
.arv-scrim { position: absolute; inset: 0; background: rgba(13,2,33,0.55); backdrop-filter: blur(2px); }
.arv-modal {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(980px, calc(100vw - 28px)); height: min(92vh, 1100px);
    display: flex; flex-direction: column; overflow: hidden;
    background: #f7fafe; border-radius: 18px;
    box-shadow: 0 30px 80px -20px rgba(13,2,33,0.55);
    animation: arv-in 0.22s cubic-bezier(0.22,1,0.36,1);
}
@keyframes arv-in { from { transform: translate(-50%, -48%); opacity: 0; } }

/* ── Header ─────────────────────────────────────────────────────── */
.arv-head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 22px; background: linear-gradient(150deg, #161d3a, #0d0a28); color: #fff;
}
.arv-head-eyebrow {
    font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: 0.12em;
    text-transform: uppercase; color: rgba(190,198,218,0.6);
}
.arv-head-title { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; margin-top: 2px; }
.arv-head-sub { font-size: 12.5px; color: rgba(190,198,218,0.75); margin-top: 2px; }
.arv-head-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.arv-pick { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(190,198,218,0.8); }
.arv-pick-sel {
    height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.08); color: #fff; font: 500 12.5px Inter, system-ui, sans-serif;
}
.arv-pick-sel option { color: #181c1f; }
.arv-print {
    display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px;
    border-radius: 8px; border: none; cursor: pointer;
    background: #26408b; color: #fff; font: 600 12.5px Inter, system-ui, sans-serif;
    transition: background .14s, opacity .14s;
}
.arv-print:hover:not(:disabled) { background: #1d3272; }
.arv-print:disabled { opacity: 0.55; cursor: progress; }
.arv-print .material-symbols-outlined { font-size: 18px; }
.arv-close {
    width: 36px; height: 36px; border-radius: 9px; border: none; cursor: pointer;
    background: rgba(255,255,255,0.1); color: #fff; display: flex; align-items: center; justify-content: center;
    transition: background .14s;
}
.arv-close:hover { background: rgba(255,255,255,0.2); }

/* ── Summary strip ──────────────────────────────────────────────── */
.arv-summary {
    display: flex; align-items: stretch; gap: 1px; background: #e8ecf3; border-bottom: 1px solid #e8ecf3;
}
.arv-stat { flex: 1; background: #fff; padding: 12px 18px; text-align: center; }
.arv-stat b { display: block; font-size: 20px; font-weight: 800; color: #181c1f; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.arv-stat b.is-high { color: #0f9d58; }
.arv-stat b.is-low  { color: #ba1a1a; }
.arv-stat span {
    display: block; margin-top: 3px; font-family: 'IBM Plex Mono', monospace; font-size: 9.5px;
    letter-spacing: 0.1em; text-transform: uppercase; color: #9aa2b1;
}
.arv-legend {
    flex: 1.2; background: #fff; padding: 12px 18px; display: flex; align-items: center; justify-content: center; gap: 12px;
    font-size: 11.5px; color: #6b7384;
}
.arv-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: -6px; }
.arv-legend i.is-wrong   { background: #ba1a1a; }
.arv-legend i.is-partial { background: #c77800; }
.arv-legend i.is-correct { background: #0f9d58; }

/* ── Body + cards ───────────────────────────────────────────────── */
.arv-body { flex: 1; overflow-y: auto; padding: 18px 22px 40px; }
.arv-empty { padding: 40px; text-align: center; color: #9aa2b1; }
.arv-card {
    background: #fff; border: 1px solid #e8ecf3; border-left: 4px solid #9aa2b1; border-radius: 12px;
    margin-bottom: 12px; overflow: hidden;
}
.arv-card.is-wrong   { border-left-color: #ba1a1a; }
.arv-card.is-partial { border-left-color: #c77800; }
.arv-card.is-correct { border-left-color: #0f9d58; }
.arv-card-hd {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer;
}
.arv-qn {
    font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 600; color: #9aa2b1; flex-shrink: 0;
}
.arv-card-prompt { flex: 1; font-size: 13.5px; font-weight: 700; color: #181c1f; line-height: 1.35; }
.arv-verdict {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; flex-shrink: 0;
    padding: 3px 8px; border-radius: 999px;
}
.arv-card.is-wrong   .arv-verdict { color: #ba1a1a; background: rgba(186,26,26,0.09); }
.arv-card.is-partial .arv-verdict { color: #c77800; background: rgba(199,120,0,0.11); }
.arv-card.is-correct .arv-verdict { color: #0f9d58; background: rgba(15,157,88,0.11); }
.arv-toggle {
    width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent; cursor: pointer;
    color: #6b7384; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.arv-toggle:hover { background: #f0f3f8; }
.arv-toggle .material-symbols-outlined { font-size: 20px; transition: transform .16s; }
.arv-card.is-collapsed .arv-toggle .material-symbols-outlined { transform: rotate(-90deg); }
.arv-card-body { padding: 0 14px 14px; }
/* Collapsed cards keep their canvases laid out (renderStrip needs a real
   width), only the box is clipped, so the print builder can still read them. */
.arv-card.is-collapsed .arv-card-body { height: 0; padding: 0 14px; overflow: hidden; visibility: hidden; }

.arv-strip { min-height: 40px; }
.arv-strip-canvas { display: block; width: 100%; border: 1px solid #e8ecf3; border-radius: 6px; }
.arv-strip-cap {
    font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: #9aa2b1; margin-top: 5px; letter-spacing: 0.02em;
}
.arv-strip-loading, .arv-strip-none {
    padding: 14px 12px; border-radius: 8px; background: #f4f6fa; color: #6b7384; font-size: 12px;
}
.arv-strip-loading { color: #9aa2b1; font-style: italic; }
.arv-ans { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: #181c1f; }
.arv-ans .picked  { color: #ba1a1a; font-weight: 600; }
.arv-ans .correct { color: #0f9d58; font-weight: 600; }
.arv-muted { color: #9aa2b1; font-style: italic; }
.arv-beat { margin-top: 4px; font-size: 11.5px; color: #404750; }
.arv-mk { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin: 0 3px 0 8px; vertical-align: -1px; }
.arv-teach { margin-top: 8px; font-size: 12px; color: #6b7384; font-style: italic; line-height: 1.5; }

/* ── 12-lead grid ───────────────────────────────────────────────── */
.arv-grid12 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.arv-cell {
    border: 2px solid #e8ecf3; border-radius: 8px; overflow: hidden; background: #fff;
}
.arv-cell[data-verdict="hit"]   { border-color: #0f9d58; }
.arv-cell[data-verdict="miss"]  { border-color: #c77800; border-style: dashed; }
.arv-cell[data-verdict="false"] { border-color: #ba1a1a; }
.arv-cell[data-verdict="focus"] { border-color: #26408b; }
.arv-cell-hd { display: flex; align-items: center; justify-content: space-between; padding: 3px 7px 2px; }
.arv-cell-lead { font-size: 11px; font-weight: 800; color: #181c1f; }
.arv-cell-tag { font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.arv-cell[data-verdict="hit"]   .arv-cell-tag { color: #0f9d58; }
.arv-cell[data-verdict="miss"]  .arv-cell-tag { color: #c77800; }
.arv-cell[data-verdict="false"] .arv-cell-tag { color: #ba1a1a; }
.arv-cell[data-verdict="focus"] .arv-cell-tag { color: #26408b; }
.arv-cell canvas { display: block; width: 100%; }

/* ── Drawer entry point ─────────────────────────────────────────── */
.cls-quiz-review {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 10px;
    height: 30px; padding: 0 11px; border-radius: 8px; border: 1px solid rgba(38,64,139,0.28);
    background: rgba(38,64,139,0.07); color: #26408b; cursor: pointer;
    font: 600 12px Inter, system-ui, sans-serif; transition: background .14s;
}
.cls-quiz-review:hover { background: rgba(38,64,139,0.13); }
.cls-quiz-review .material-symbols-outlined { font-size: 17px; }

@media (max-width: 720px) {
    .arv-modal { width: 100vw; height: 100vh; border-radius: 0; }
    .arv-head { flex-wrap: wrap; }
    .arv-grid12 { grid-template-columns: repeat(2, 1fr); }
    .arv-legend { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .arv-modal { animation: none; }
}