/* ============================================================================
   grader-pane-file.css — the file pane. Step 5, pane 6 of 7.
   Tokens only; tools/grader-tokens-only.js guards this file.

   ONE PANE, TWO STATES. Previewable and not-previewable are the same pane —
   the design shows it twice on purpose, because the second one is "the state
   that usually reads as broken". It is not broken. A 184 MB layered Photoshop
   document is a legitimate submission that a browser cannot draw, and the pane
   says exactly that, gives the facts, and grades identically either way.

   MULTI-PAGE DOCUMENTS SCROLL. No page buttons — the design states the reason
   outright: "Page navigation would put the previewable file pane two controls
   over the Confirm budget. Scrolling is also how every teacher already reads a
   PDF." Adding them takes this pane to seventeen at rest.

   ANNOTATION IS COMMENT ONLY. No pins, no anchors, no markers — there is no
   coordinate space in a zip file to anchor to.
   ========================================================================= */

.gr-file { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; }
.gr-file-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);
}
/* The document itself scrolls INSIDE the frame. */
.gr-file-doc { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: var(--n-stage); }

/* ── the not-previewable state — facts, and one way out ─────────────────── */
.gr-file-facts {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--sp-7); padding: var(--sp-10);
}
.gr-file-name { font-family: var(--f-d); font-weight: 700; font-size: var(--t-display-lg); letter-spacing: var(--t-display-lg-ls); color: var(--n-text); text-align: center; }
.gr-file-why  { font-family: var(--f-n); font-size: var(--t-mono-sm); letter-spacing: var(--t-mono-sm-ls); color: var(--n-faint); }
.gr-file-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.gr-file-row  { display: flex; align-items: baseline; gap: var(--sp-5); }
.gr-file-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-file-v    { font-family: var(--f-u); font-size: var(--t-ui-xs); color: var(--n-dim); }

/* The ONE control the no-preview state adds. The previewable state has none —
   you can already read it. */
.gr-file-get {
  padding: var(--sp-4) var(--sp-6); 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;
  text-decoration: none; display: inline-flex; align-items: center; position: relative;
}

.gr-file-meta { flex: none; padding: var(--sp-5) 0 0; font-family: var(--f-n); font-size: var(--t-mono-sm); letter-spacing: var(--t-mono-sm-ls); color: var(--n-faint); }

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