/* ============================================================================
   grader-pane-multipart.css — the multi-part turn-in. Step 5, pane 3 of 7.
   Tokens only; tools/grader-tokens-only.js guards this file.

   THIS IS THE PANE EVERY ASSIGNMENT ACTUALLY USES. All 72 assignments across
   the four courses derive to multipart — there is no pure question set, image
   or text response in this curriculum. Every other pane is reached THROUGH
   this one, as a part.

   IT OWNS ALMOST NO PIXELS. The stage is whichever pane the current part
   resolves to, rendered unchanged; this file styles the PartStrip that sits in
   the strip slot and the one line that states the scoring scope. If it ever
   grows a treatment of its own, a part will start looking different inside a
   worksheet than it does on its own, and the whole premise breaks.
   ========================================================================= */

.gr-mp { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; }
/* The delegated pane fills everything the strip does not. */
.gr-mp-stage { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.gr-mp-stage > * { flex: 1; min-height: 0; }

/* ── PartStrip — COMPONENTS.md §5, the same slot the FramesStrip uses ──────
   It SWAPS content with the frames strip, it never stacks a second row. That
   is what keeps the multi-part screen inside its budget at Coach. */
.gr-mp-strip { flex: none; display: flex; gap: var(--sp-3); padding: var(--sp-5) 0 0; overflow-x: auto; }
/* ⚠ NOT flex:1. A worksheet in this curriculum has NINE parts, not the
   design's five, and nine equal shares of the centre column is 148px each —
   the label, the kind and the points collide. The strip scrolls instead, which
   is what its overflow-x was always for. */
.gr-mp-part {
  flex: 0 0 auto; width: 152px; display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-6); border: 0; border-radius: var(--r-xl);
  background: transparent; box-shadow: inset 0 0 0 1px #232529;
  text-align: left; cursor: pointer; position: relative;
  transition: box-shadow var(--dur-fast) var(--ease-standard);
}
.gr-mp-part:hover { box-shadow: inset 0 0 0 1px #3c3f45; }
.gr-mp-part.is-active { background: var(--k3200-fill); box-shadow: inset 0 0 0 1px var(--k3200-line); }
.gr-mp-part-top { display: flex; align-items: center; gap: var(--sp-3); }
.gr-mp-num  { font-family: var(--f-n); font-size: var(--t-mono-xxs); letter-spacing: var(--t-mono-xxs-ls); color: var(--faint); }
.gr-mp-kind { 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-mp-lab  { font-family: var(--f-u); font-size: var(--t-ui-xs); color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-mp-part.is-active .gr-mp-lab { color: var(--text); font-weight: 600; }
.gr-mp-pts  { font-family: var(--f-n); font-size: var(--t-mono-sm); letter-spacing: var(--t-mono-sm-ls); color: var(--faint); }
.gr-mp-part.is-done .gr-mp-pts { color: var(--pass); }

/* The part's status dot. Round when it is settled, square when it is not —
   the same shape language as the queue rail's StatusDot. */
.gr-mp-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--pass); }
.gr-mp-part.is-todo   .gr-mp-dot { border-radius: 2px; background: transparent; box-shadow: inset 0 0 0 1.5px #3e4148; }
.gr-mp-part.is-active .gr-mp-dot { background: var(--k3200); box-shadow: var(--lum-gold); }

/* ── the scoring scope — STATED, never hidden ─────────────────────────────
   A teacher marking a rubric inside a worksheet must be able to see, without
   asking, whether the mark lands on this part or on the whole thing. */
.gr-mp-scope {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6); border-radius: var(--r-xl);
  background: var(--ctl); box-shadow: var(--ctl-in);
}
.gr-mp-scope-lab { font-family: var(--f-n); font-size: var(--t-mono-xs); letter-spacing: var(--t-mono-xs-ls); color: var(--faint); }
.gr-mp-scope-val { font-family: var(--f-u); font-size: var(--t-ui-xs); color: var(--text3); }
.gr-mp-scope-change {
  margin-left: auto; padding: var(--sp-1) var(--sp-3); border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--k3200);
  font-family: var(--f-n); font-size: var(--t-mono-xxs); letter-spacing: var(--t-mono-xxs-ls);
  cursor: pointer; position: relative;
}

/* ── a part with no pane yet ──────────────────────────────────────────────
   Honest, not broken: the part exists, it is just not gradeable here yet. */
.gr-mp-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--sp-4); text-align: center;
  border-radius: var(--r-2xl); background: var(--n-surround);
}
.gr-mp-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-mp-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); }