/* ============================================================================
   grader-shell.css — the frame that NEVER CHANGES between item types.
   Names from COMPONENTS.md §1. Tokens only; tools/grader-tokens-only.js guards.

   THE INVARIANT THIS FILE EXISTS TO HOLD: the nav, the rail, the score panel
   and the footer are identical for a photograph, a video and a question set.
   Only the centre column changes. If a pane ever needs to move something out
   here, the pane is wrong.
   ========================================================================= */

/* ── GraderShell ──────────────────────────────────────────────────────────── */
.gr-shell {
  position: relative; display: flex; flex-direction: column;
  height: 100%; min-height: 0; border-radius: var(--r-5xl); overflow: hidden;
  background: var(--sub);
  box-shadow: var(--edge), inset 0 0 0 1px #1c1e21, var(--contact), 0 34px 76px -30px rgba(0,0,0,.85);
}

/* ── GraderNav — FAR depth tier ───────────────────────────────────────────── */
.gr-nav {
  display: flex; align-items: center; gap: var(--sp-7);
  height: 58px; padding: 0 var(--sp-8); flex: none;
  background: linear-gradient(var(--lit), #111315, #0b0d0e);
  box-shadow: var(--edge), inset 0 -1px 0 rgba(0,0,0,.6);
  filter: var(--far);
}
.gr-nav-title { font-family: var(--f-d); font-weight: 700; font-size: var(--t-display-md); letter-spacing: var(--t-display-md-ls); color: var(--text); }
.gr-nav-meta  { font-family: var(--f-n); font-size: var(--t-mono-sm); letter-spacing: var(--t-mono-sm-ls); color: var(--k9000); }
.gr-nav-spacer { flex: 1; }
.gr-queue-back, .gr-type-glyph {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  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-u); font-size: var(--t-ui-xs); cursor: pointer; position: relative;
}
.gr-type-glyph { font-family: var(--f-n); font-size: var(--t-mono-md); letter-spacing: var(--t-mono-md-ls); color: var(--k7500); cursor: default; }

/* ── GraderGrid ───────────────────────────────────────────────────────────── */
.gr-grid { display: grid; grid-template-columns: 204px 1fr 320px; flex: 1; min-height: 0; }

/* ── QueueRail — MID depth tier ───────────────────────────────────────────── */
.gr-rail {
  position: relative; display: flex; flex-direction: column; min-height: 0;
  background: var(--panel-lo); box-shadow: inset -1px 0 0 rgba(0,0,0,.55);
  filter: var(--mid);
}
.gr-rail-head { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-6) var(--sp-6) var(--sp-4); }
.gr-rail-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--sp-4) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-1); }
.gr-queue-filter {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg);
  font-family: var(--f-d); font-weight: 600; font-size: var(--t-display-sm); color: var(--text2);
}
.gr-queue-progress { padding: var(--sp-5) var(--sp-6) var(--sp-4); }
.gr-progress-count { font-family: var(--f-d); font-weight: 700; font-size: var(--t-display-xl); letter-spacing: var(--t-display-xl-ls); color: var(--text); font-variant-numeric: tabular-nums; }
.gr-progress-unit  { font-family: var(--f-n); font-size: var(--t-mono-sm); letter-spacing: var(--t-mono-sm-ls); color: var(--k9000); }
.gr-pips { display: flex; gap: var(--sp-1); padding: var(--sp-1); border-radius: var(--r-xs); background: #0d0e10; box-shadow: inset 0 1px 2px rgba(0,0,0,.6); margin-top: var(--sp-4); }
.gr-pip { flex: 1; height: 3px; border-radius: 1px; background: #2b2e33; }
.gr-pip.is-done    { background: var(--pass);  box-shadow: var(--lum-pass); }
.gr-pip.is-current { background: var(--k3200); box-shadow: var(--lum-gold); }
.gr-rail.is-crew .gr-pip { height: 4px; }
.gr-pace { font-family: var(--f-n); font-size: var(--t-mono-sm); letter-spacing: var(--t-mono-sm-ls); color: var(--k9000); padding: 0 var(--sp-6) var(--sp-5); }

/* ── StageColumn — NO grain, NO filter, NO gradient, NO cool cast ─────────── */
.gr-stagecol {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--n-surround); padding: var(--sp-4) var(--sp-10) var(--sp-7);
}
.gr-stagecol-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
/* ⚠ The Stage primitive carries NO intrinsic size — it is padding plus an
   absolutely-positioned frame, so on its own it collapses to 22×22 (the
   padding). /dev/components hid this by giving it a sized box; the shell did
   not, and the centre column rendered empty. The stage IS the centre column,
   so it fills it. */
.gr-stagecol-body > .gr-stage { width: 100%; height: 100%; }

/* ── ScorePanel — NEAR tier ───────────────────────────────────────────────── */
.gr-panel {
  position: relative; display: flex; flex-direction: column; min-height: 0;
  background: var(--panel); box-shadow: inset 1px 0 0 rgba(255,255,255,.03);
}
.gr-panel-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-7) var(--sp-8) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-7); }
.gr-panel-footer {
  flex: none; display: flex; align-items: center; gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-8) var(--sp-7);
  background: linear-gradient(var(--lit), #121416, #0d0f10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.gr-panel-footer .gr-primary-action { flex: 1; }

/* ── tier disclosure — the mechanism that holds the control budget ────────── */
/* Anything above the current tier is REMOVED from the DOM, not hidden. A
   hidden control still counts against the budget the moment someone tabs to
   it, and countControls() would be lying. */
.gr-tier-only { display: contents; }

/* ── save state — unmistakable, and never a spinner ───────────────────────── */
.gr-savestate {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-family: var(--f-n); font-size: var(--t-mono-sm); letter-spacing: var(--t-mono-sm-ls);
}
.gr-savestate[data-state="saved"]    { color: var(--pass-dim); }
.gr-savestate[data-state="saving"]   { color: var(--k9000); }
.gr-savestate[data-state="unsaved"]  { color: var(--k4300); }
.gr-savestate[data-state="failed"]   { color: var(--fail); }
.gr-savestate .gr-status-dot { width: 7px; height: 7px; }

/* ── shortcut overlay ─────────────────────────────────────────────────────── */
.gr-shortcuts {
  position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.62);
}
.gr-shortcuts-card {
  min-width: 420px; padding: var(--sp-9); border-radius: var(--r-4xl);
  background: var(--panel-hi); box-shadow: var(--edge), var(--edge-un), var(--float);
}
.gr-shortcuts-card h3 { font-family: var(--f-d); font-weight: 700; font-size: var(--t-display-lg); letter-spacing: var(--t-display-lg-ls); color: var(--text); margin: 0 0 var(--sp-6); }
.gr-sc-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-9); padding: var(--sp-3) 0; }
.gr-sc-row span { font-size: var(--t-ui-xs); color: var(--text3); }
.gr-sc-keys { display: flex; gap: var(--sp-2); }
.gr-sc-key {
  min-width: 20px; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-xs); text-align: center;
  background: var(--ctl); box-shadow: var(--ctl-in);
  font-family: var(--f-n); font-size: var(--t-mono-md); letter-spacing: var(--t-mono-md-ls); color: var(--k5600);
}

/* ── laptop 1280 ──────────────────────────────────────────────────────────── */
@media (max-width: 1400px) {
  .gr-grid { grid-template-columns: 176px 1fr 292px; }
  .gr-nav  { height: 54px; padding: 0 var(--sp-7); gap: var(--sp-6); }
  .gr-stagecol { padding: var(--sp-3) var(--sp-9) var(--sp-6); }
  .gr-tier-segment { min-width: 58px; }
  .gr-tier-segment .gr-seg-sub { display: none; }
}

/* ── TraversalFlip ──────────────────────────────────────────────────────────
   Sits in the rail head beside the filter. Present only on panes that have
   items to traverse — see the note at its render site. */
.gr-traversal-flip {
  margin-left: auto; padding: var(--sp-1) var(--sp-4); border: 0; border-radius: var(--r-sm);
  background: var(--ctl); box-shadow: var(--ctl-in);
  color: var(--k3200); font-family: var(--f-n); font-size: var(--t-mono-sm);
  letter-spacing: var(--t-mono-sm-ls); cursor: pointer; position: relative;
}