/* ============================================================================
   grader-finish.css — release, revisions, end-of-section, drawing and voice.
   Step 6 items 3–7. Tokens only; tools/grader-tokens-only.js guards this file.

   ⚠ THE DESIGN SPECIFIES NONE OF THESE SURFACES. README §374–380 names the
   behaviours and COMPONENTS.md stops at §6; there is no end-of-section screen,
   no release preview, no revision comparison and no drawing treatment anywhere
   in the bundle. Built from the product's own material so they read as the
   same tool, and the gap is raised at the checkpoint rather than papered over.
   ========================================================================= */

/* ── drawing, over the work ────────────────────────────────────────────────
   The overlay rides the MEDIA, not the container, so a shape stays on the part
   of the photograph it was drawn on when the window resizes. */
.gr-draw { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.gr-draw-level {
  stroke: var(--k3200); stroke-width: .35; vector-effect: non-scaling-stroke;
  stroke-dasharray: 2 1.5;
}
/* Snapped reads as SOLID — the dashes mean "this is the angle you drew". */
.gr-draw-level.is-snapped { stroke-dasharray: none; stroke: var(--pass); }
.gr-draw-deg {
  fill: var(--k3200); font-family: var(--f-n); font-size: 3.4px;
  text-anchor: middle; paint-order: stroke; stroke: var(--sub); stroke-width: 1.1px;
}
.gr-draw-crop { fill: none; stroke: var(--k3200); stroke-width: .3; vector-effect: non-scaling-stroke; stroke-dasharray: 2 1.5; }
.gr-draw-arrow { stroke: var(--k4300); stroke-width: .45; vector-effect: non-scaling-stroke; }
.gr-draw-head { fill: var(--k4300); }

/* ── voice ─────────────────────────────────────────────────────────────────
   Unavailable is a STATE, not an error: the button says what is true and the
   keyboard path is untouched. */
.gr-voice-state { display: flex; align-items: center; gap: var(--sp-3); }
.gr-voice-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fail); flex: none; }
.gr-voice-state.is-live .gr-voice-dot { background: var(--k3200); box-shadow: var(--lum-gold); }
.gr-voice-why { font-family: var(--f-u); font-size: var(--t-ui-xxs); color: var(--dim); }

/* ── what the student receives ─────────────────────────────────────────────
   Shown BEFORE anything is sent. A teacher who cannot predict what a student
   will see is right not to press the button. */
.gr-fin-preview { display: flex; flex-direction: column; gap: var(--sp-4); }
.gr-fin-preview-head { font-family: var(--f-n); font-size: var(--t-mono-xs); letter-spacing: var(--t-mono-xs-ls); color: var(--faint); }
.gr-fin-preview-card {
  padding: var(--sp-6); border-radius: var(--r-2xl);
  background: var(--panel-hi); box-shadow: var(--edge), var(--edge-un), var(--contact);
}
.gr-fin-preview-top { display: flex; align-items: baseline; gap: var(--sp-5); }
.gr-fin-preview-title { font-family: var(--f-d); font-weight: 700; font-size: var(--t-display-sm); letter-spacing: var(--t-display-sm-ls); color: var(--text); }
.gr-fin-preview-grade { margin-left: auto; font-family: var(--f-d); font-weight: 700; font-size: var(--t-display-lg); letter-spacing: var(--t-display-lg-ls); color: var(--k3200); font-variant-numeric: tabular-nums; }
.gr-fin-preview-fb { margin-top: var(--sp-4); font-family: var(--f-u); font-size: var(--t-ui-sm); line-height: 1.5; color: var(--text2); }
.gr-fin-preview-fb.is-empty { color: var(--faint); font-style: italic; }
.gr-fin-preview-marks { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.gr-fin-mark { padding: var(--sp-1) var(--sp-3); border-radius: var(--r-xs); background: var(--k3200-fill); color: var(--k3200); font-family: var(--f-n); font-size: var(--t-mono-xxs); letter-spacing: var(--t-mono-xxs-ls); }

/* ── a revision, beside what it is answering ───────────────────────────── */
.gr-rev { display: flex; flex-direction: column; gap: var(--sp-4); }
.gr-rev-head { display: flex; align-items: center; gap: var(--sp-4); }
.gr-rev-badge { padding: var(--sp-1) var(--sp-4); border-radius: var(--r-xs); background: var(--k5600-fill); color: var(--k5600); font-family: var(--f-n); font-size: var(--t-mono-xxs); letter-spacing: var(--t-mono-xxs-ls); }
.gr-rev-was { font-family: var(--f-u); font-size: var(--t-ui-xs); color: var(--dim); }
.gr-rev-flagged { display: flex; flex-direction: column; gap: var(--sp-3); }
.gr-rev-crit {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg);
  background: var(--ctl); box-shadow: var(--ctl-in);
  font-family: var(--f-u); font-size: var(--t-ui-xs); color: var(--text3);
}
.gr-rev-crit .gr-rev-lv { margin-left: auto; font-family: var(--f-n); font-size: var(--t-mono-xxs); letter-spacing: var(--t-mono-xxs-ls); color: var(--k4300); }

/* ── the end of the section ───────────────────────────────────────────────── */
.gr-fin { display: flex; flex-direction: column; gap: var(--sp-9); padding: var(--sp-10); height: 100%; overflow-y: auto; }
.gr-fin-head { display: flex; flex-direction: column; gap: var(--sp-2); }
.gr-fin-title { font-family: var(--f-d); font-weight: 700; font-size: var(--t-display-xl); letter-spacing: var(--t-display-xl-ls); color: var(--text); }
.gr-fin-sub { font-family: var(--f-n); font-size: var(--t-mono-sm); letter-spacing: var(--t-mono-sm-ls); color: var(--muted); }
.gr-fin-block { display: flex; flex-direction: column; gap: var(--sp-4); }
.gr-fin-block-h { display: flex; align-items: center; gap: var(--sp-4); font-family: var(--f-d); font-weight: 700; font-size: var(--t-display-sm); letter-spacing: var(--t-display-sm-ls); color: var(--text2); }
.gr-fin-none { font-family: var(--f-u); font-size: var(--t-ui-xs); color: var(--dim); }

/* One row per criterion the section struggled with — the count first, because
   the count is the finding. */
.gr-fin-pattern {
  display: flex; align-items: center; gap: var(--sp-5); width: 100%; text-align: left;
  padding: var(--sp-5) var(--sp-6); border: 0; border-radius: var(--r-xl);
  background: var(--ctl); box-shadow: var(--ctl-in); cursor: pointer; position: relative;
}
.gr-fin-pattern-n { font-family: var(--f-d); font-weight: 700; font-size: var(--t-display-lg); letter-spacing: var(--t-display-lg-ls); color: var(--k4300); font-variant-numeric: tabular-nums; }
.gr-fin-pattern-c { font-family: var(--f-u); font-size: var(--t-ui-md); color: var(--text); }
.gr-fin-pattern-w { margin-left: auto; font-family: var(--f-n); font-size: var(--t-mono-xxs); letter-spacing: var(--t-mono-xxs-ls); color: var(--faint); }
.gr-fin-reteach { min-height: calc(var(--sp-10) * 3); }
.gr-fin-foot { margin-top: auto; display: flex; align-items: center; gap: var(--sp-5); }