/* ============================================================================
   grader-pane-video.css — video and audio. Step 5, panes 4 and 5.
   Tokens only; tools/grader-tokens-only.js guards this file.

   THE STAGE IS STILL THE STAGE. A video sits on the same true-neutral surround
   as a photograph, with one hairline and no top edge highlight, for the same
   reason: exposure has to be judged honestly. Everything this file adds lives
   BELOW the frame, in the strip slot.

   AUDIO IS THIS PANE WITH THE PICTURE REMOVED. The waveform becomes the stage
   rather than a layer under it — one file, one class toggle, no second pane.
   ========================================================================= */

.gr-vid { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; }
.gr-vid-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);
  display: flex; align-items: center; justify-content: center;
}
.gr-vid-frame video { max-width: 100%; max-height: 100%; display: block; background: var(--n-stage); }

/* ── AUDIO: the waveform IS the stage ────────────────────────────────────── */
.gr-vid.is-audio .gr-vid-frame { align-items: center; }
.gr-vid.is-audio .gr-vid-audio-stage { width: 100%; padding: 0 var(--sp-10); }
.gr-vid-audio-name { margin-bottom: var(--sp-6); text-align: center; font-family: var(--f-n); font-size: var(--t-mono-sm); letter-spacing: var(--t-mono-sm-ls); color: var(--n-faint); }

/* ── TRIAGE — what the teacher sees before they ever press play ───────────
   The point is to answer "do I need to watch this?" without watching it. */
.gr-vid-triage {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--sp-7); padding: var(--sp-10);
}
.gr-vid-triage-row { display: flex; align-items: baseline; gap: var(--sp-5); }
.gr-vid-dur   { font-family: var(--f-d); font-weight: 700; font-size: var(--t-display-xl); letter-spacing: var(--t-display-xl-ls); color: var(--n-text); font-variant-numeric: tabular-nums; }
.gr-vid-against { font-family: var(--f-n); font-size: var(--t-mono-sm); letter-spacing: var(--t-mono-sm-ls); color: var(--n-faint); }
.gr-vid-facts { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.gr-vid-fact  { display: flex; align-items: baseline; gap: var(--sp-5); }
.gr-vid-fact-k { flex: none; width: 88px; font-family: var(--f-n); font-size: var(--t-mono-xs); letter-spacing: var(--t-mono-xs-ls); color: var(--n-faint); }
.gr-vid-fact-v { font-family: var(--f-u); font-size: var(--t-ui-xs); color: var(--n-dim); }

/* ── the FILMSTRIP — poster frames pulled from the file itself ───────────── */
.gr-vid-strip { flex: none; display: flex; gap: var(--sp-2); padding: var(--sp-5) 0 0; }
.gr-vid-cell {
  flex: 1; min-width: 0; aspect-ratio: 16 / 9; border-radius: var(--r-sm);
  background: var(--n-surround); box-shadow: inset 0 0 0 1px var(--n-edge);
  overflow: hidden;
}
.gr-vid-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── THE TIMELINE — the primary surface in playback ───────────────────────
   Waveform, cuts and markers STACK in one rail. They are never three separate
   controls; the rail is one target and the layers are information. */
.gr-vid-timeline {
  position: relative; flex: none; height: 46px; margin-top: var(--sp-5);
  border-radius: var(--r-md); background: var(--n-surround);
  box-shadow: inset 0 0 0 1px var(--n-edge); cursor: pointer; overflow: hidden;
}
.gr-vid-wave { position: absolute; inset: 0; display: flex; align-items: center; gap: 1px; padding: 0 var(--sp-1); }
.gr-vid-wave i { flex: 1; min-width: 0; background: var(--n-mark); opacity: .38; border-radius: 1px; }
/* No peaks could be read — say so with a flat rail rather than draw a plausible
   waveform that is not the student's audio. */
.gr-vid-wave.is-flat i { height: 2px; opacity: .18; }
.gr-vid-cut { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--n-mark); opacity: .5; }
.gr-vid-played { position: absolute; top: 0; bottom: 0; left: 0; background: var(--k3200); opacity: .10; pointer-events: none; }
.gr-vid-head { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--k3200); box-shadow: var(--lum-gold); pointer-events: none; }

/* A time-anchored marker. The same numbered badge as an image pin and a text
   anchor — one marker language across the product. */
.gr-vid-marker {
  position: absolute; bottom: var(--sp-1); width: 16px; height: 16px; margin-left: -8px;
  border-radius: var(--r-xs); border: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-n); font-size: var(--t-mono-xxs); color: var(--sub);
  background: var(--k3200); cursor: pointer;
  animation: gr-pin-drop var(--dur-drop) var(--ease-drop);
}
.gr-vid-marker[data-tone="fail"] { background: var(--fail); }
.gr-vid-marker[data-tone="pass"] { background: var(--pass); }

/* ── TRANSPORT ───────────────────────────────────────────────────────────── */
.gr-vid-transport { flex: none; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-5) 0 0; }
.gr-vid-btn {
  padding: var(--sp-3) var(--sp-5); border: 0; border-radius: var(--r-lg);
  background: var(--ctl); box-shadow: var(--ctl-in); color: var(--text3);
  font-family: var(--f-n); font-size: var(--t-mono-sm); letter-spacing: var(--t-mono-sm-ls);
  cursor: pointer; position: relative;
}
.gr-vid-btn.is-on { background: var(--ctl-up); box-shadow: var(--edge-hi), var(--edge-un), var(--contact); color: var(--k3200); }
.gr-vid-time { margin-left: auto; font-family: var(--f-n); font-size: var(--t-mono-sm); letter-spacing: var(--t-mono-sm-ls); color: var(--n-faint); font-variant-numeric: tabular-nums; }

/* ── marker cards, in the score panel ────────────────────────────────────── */
.gr-vid-marks { display: flex; flex-direction: column; gap: var(--sp-4); }
.gr-vid-mark-card { padding: var(--sp-6); border-radius: var(--r-2xl); background: var(--panel-hi); box-shadow: var(--edge), var(--edge-un), var(--contact); }
.gr-vid-mark-top { display: flex; align-items: center; gap: var(--sp-4); }
.gr-vid-mark-n {
  width: 18px; height: 18px; flex: none; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-n); font-size: var(--t-mono-lg); color: var(--sub); background: var(--k3200);
}
.gr-vid-mark-t { font-family: var(--f-n); font-size: var(--t-mono-sm); letter-spacing: var(--t-mono-sm-ls); color: var(--k3200); font-variant-numeric: tabular-nums; }
.gr-vid-mark-remove {
  margin-left: auto; padding: var(--sp-2) var(--sp-4); border: 0; border-radius: var(--r-sm);
  background: transparent; box-shadow: inset 0 0 0 1px transparent;
  font-family: var(--f-u); font-size: var(--t-ui-xxs); color: var(--dim); cursor: pointer; position: relative;
  transition: color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.gr-vid-mark-remove:hover { color: var(--fail); box-shadow: inset 0 0 0 1px var(--fail-line); }
.gr-vid-mark-field { min-height: calc(var(--sp-10) * 2); margin-top: var(--sp-4); }

/* ── edge states ─────────────────────────────────────────────────────────── */
.gr-vid-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--sp-4); text-align: center;
}
.gr-vid-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-vid-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); }