/* ============================================================================
   grader-pane-image.css — the image pane.
   Tokens only; tools/grader-tokens-only.js guards this file.

   ⚠ THE STAGE IS THE UNTOUCHED REGION. True neutral, no grain, no gradient, no
   vignette, no cool cast, ONE hairline frame, and NO TOP EDGE HIGHLIGHT — the
   edge-light rule that applies to every raised surface in the product stops at
   the stage, because a highlight on the frame reads as light falling on the
   photograph. The restraint test is: put a genuinely underexposed student
   photograph on this and you must never wonder whether the photo is dark or
   the interface is.
   ========================================================================= */

.gr-img-stage { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; }

/* the frame — one hairline, no highlight, no shadow inside the stage */
.gr-img-frame {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  border-radius: var(--r-2xl); background: var(--n-stage); border: 1px solid var(--n-edge);
}
.gr-img-canvas { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.gr-img-canvas img { display: block; transform-origin: center center; }
.gr-img-canvas.is-pinning { cursor: crosshair; }

/* thirds overlay — hairlines only, neutral, never coloured */
.gr-img-thirds { position: absolute; inset: 0; pointer-events: none; }
.gr-img-thirds i { position: absolute; background: var(--n-mark); opacity: .38; }
.gr-img-thirds i:nth-child(1) { left: 33.333%; top: 0; bottom: 0; width: 1px; }
.gr-img-thirds i:nth-child(2) { left: 66.666%; top: 0; bottom: 0; width: 1px; }
.gr-img-thirds i:nth-child(3) { top: 33.333%; left: 0; right: 0; height: 1px; }
.gr-img-thirds i:nth-child(4) { top: 66.666%; left: 0; right: 0; height: 1px; }

/* ── stage controls — neutral, because they sit in the stage region ───────── */
.gr-img-tools {
  position: absolute; left: 50%; bottom: var(--sp-5); transform: translateX(-50%);
  display: flex; gap: var(--sp-1); padding: var(--sp-1); border-radius: var(--r-xl);
  background: rgba(0,0,0,.55); z-index: 2;
}
.gr-img-tool {
  position: relative; padding: var(--sp-3) var(--sp-5); border: 0; border-radius: var(--r-lg);
  background: transparent; color: var(--n-dim);
  font-family: var(--f-n); font-size: var(--t-mono-md); letter-spacing: var(--t-mono-md-ls);
  cursor: pointer; transition: color var(--dur-fast) var(--ease-standard);
}
.gr-img-tool.is-on { color: var(--n-text); background: rgba(255,255,255,.06); }

/* ── pins ─────────────────────────────────────────────────────────────────
   The mark is neutral on the stage. Tool choices appear AT the pin — never in
   a toolbar — so the teacher's eye never leaves the photograph. */
.gr-img-pin {
  position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border-radius: 50%; border: 1.5px solid var(--n-mark); background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-n); font-size: var(--t-mono-sm); color: var(--n-text);
  cursor: pointer; z-index: 3;
  animation: gr-pin-drop var(--dur-drop) var(--ease-drop);
}
@keyframes gr-pin-drop { 0% { transform: scale(0); } 62% { transform: scale(1.28); } 100% { transform: scale(1); } }
.gr-img-pin.is-active { border-color: var(--k3200); color: var(--k3200); }

.gr-img-pintools {
  position: absolute; z-index: 4; display: flex; gap: var(--sp-1);
  padding: var(--sp-1); border-radius: var(--r-xl);
  background: var(--panel-hi); box-shadow: var(--edge), var(--edge-un), var(--float);
  animation: gr-pin-rise var(--dur-fast) var(--ease-standard);
}
@keyframes gr-pin-rise { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
.gr-img-pintool {
  padding: var(--sp-2) var(--sp-4); border: 0; border-radius: var(--r-md);
  background: var(--ctl); box-shadow: var(--ctl-in); color: var(--text3);
  font-family: var(--f-u); font-size: var(--t-ui-xxs); cursor: pointer; position: relative;
}

/* ── FramesStrip ──────────────────────────────────────────────────────────── */
.gr-frames {
  flex: none; display: flex; gap: var(--sp-3); padding: var(--sp-5) 0 0;
  overflow-x: auto;
}
.gr-frame {
  position: relative; flex: none; width: 54px; height: 38px; padding: 0; border: 0;
  border-radius: var(--r-sm); overflow: hidden; cursor: pointer;
  background: var(--n-stage); box-shadow: inset 0 0 0 1px var(--n-edge);
}
.gr-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gr-frame.is-active { box-shadow: inset 0 0 0 1px var(--n-mark); }

/* ── edge states ──────────────────────────────────────────────────────────
   Neutral inside the stage. A missing submission is NOT an error — it is a
   fact about the work, and painting it red would make forty ungraded students
   look like forty failures. */
.gr-img-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--sp-4); text-align: center;
}
.gr-img-empty .gr-l { font-family: var(--f-d); font-weight: 600; font-size: var(--t-display-sm); letter-spacing: var(--t-display-sm-ls); color: var(--n-text); }
.gr-img-empty .gr-d { font-family: var(--f-n); font-size: var(--t-mono-sm); letter-spacing: var(--t-mono-sm-ls); color: var(--n-faint); }

/* processing — a determinate hairline, never a spinner */
.gr-img-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--n-edge); }
.gr-img-progress i { display: block; height: 100%; width: 42%; background: var(--n-mark); }

/* ── the rubric as a SEQUENCE ─────────────────────────────────────────────
   One criterion open at a time; marked ones collapse to a summary line. The
   frame mark MOVES to the open card — it never duplicates. */
.gr-rubric-seq { display: flex; flex-direction: column; gap: var(--sp-4); }