/* ============================================================================
   grader-crew.css — crews. Step 7. Tokens only; guarded.

   A CREW ROW DIFFERS FROM A STUDENT ROW IN EXACTLY ONE WAY: the avatar is a
   2×2 tile grid instead of initials. COMPONENTS.md §3 states that outright,
   and it is what lets a mixed queue read as one list rather than two stacked
   ones. Nothing else about the row changes — same height, same shapes, same
   words for state.

   THE ROSTER STRIP IS PAINTED NEUTRAL because it sits in the centre column,
   where the Kelvin system deliberately stops. Attendance is COOL — it is
   information, not an accusation.
   ========================================================================= */

/* ⚠ This file's first published URL was edge-poisoned — the key was requested
   before the deploy landed, so the CDN cached the app shell against it. A
   poisoned key cannot be purged from the client; the fix is to mint a new
   hash, which is what this note does as much as anything. */

/* ── AvatarTile, crew variant — the one difference ────────────────────────── */
.gr-avatar-tile.is-crew { display: grid; grid-template-columns: 1fr 1fr; padding: var(--sp-2); gap: 2px; }
.gr-avatar-tile.is-crew i { border-radius: 1.5px; background: var(--k9000); display: block; }

/* ── RoleSlot — COMPONENTS.md §3: 11px square, radius 3, mono at .62 ─────── */
.gr-role-slot {
  width: 11px; height: 11px; flex: none; border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #141618; box-shadow: inset 0 1px 1px rgba(0,0,0,.55);
  font-family: var(--f-n); font-size: 7px; color: var(--n-dim);
}
.gr-crew-card.is-active .gr-role-slot { background: var(--ctl-up); box-shadow: var(--edge); color: var(--n-text); }

/* ── RosterStrip, in the frames-strip slot ────────────────────────────────── */
.gr-crew-strip { flex: none; display: flex; gap: var(--sp-3); padding: var(--sp-5) 0 0; overflow-x: auto; }
.gr-crew-card {
  flex: 0 0 auto; width: 168px; display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5); border-radius: var(--r-xl);
  background: var(--n-surround); box-shadow: inset 0 0 0 1px var(--n-edge);
  cursor: pointer; position: relative;
}
.gr-crew-card.is-active { box-shadow: inset 0 0 0 1px var(--n-mark); }
.gr-crew-card.is-override { box-shadow: inset 0 0 0 1px rgba(240,198,107,.22); }
.gr-crew-card.is-excluded { opacity: .46; }
.gr-crew-card.is-excluded .gr-crew-name { text-decoration: line-through; }
.gr-crew-card-top { display: flex; align-items: center; gap: var(--sp-3); }
.gr-crew-name { flex: 1; min-width: 0; font-family: var(--f-u); font-size: var(--t-ui-xs); color: var(--n-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* AttendanceRead — 3 pips, then the count. NEVER a score input. */
.gr-crew-att { display: flex; align-items: center; gap: var(--sp-3); font-family: var(--f-n); font-size: var(--t-mono-xxs); letter-spacing: var(--t-mono-xxs-ls); color: var(--n-faint); }
.gr-crew-pips { display: flex; gap: 2px; }
.gr-crew-pips i { width: 8px; height: 3px; border-radius: 1px; box-shadow: inset 0 0 0 1px #3d3d3d; display: block; }
.gr-crew-pips i.is-on { background: #7a7a7a; box-shadow: none; }
/* Short attendance is COOL — information, not accusation. */
.gr-crew-att.is-short { color: var(--k5600); }

.gr-crew-ov { font-family: var(--f-n); font-size: var(--t-mono-xxs); letter-spacing: var(--t-mono-xxs-ls); color: var(--k3200); }
.gr-crew-ov-why { font-family: var(--f-u); font-size: var(--t-ui-xxs); line-height: 1.4; color: var(--n-faint); box-shadow: inset 0 1px 0 #3a3a3a; padding-top: var(--sp-3); }
.gr-crew-flagged { font-family: var(--f-n); font-size: var(--t-mono-xxs); letter-spacing: var(--t-mono-xxs-ls); color: var(--k4300); }

/* MemberActions — the ONLY three controls crews add anywhere in the product,
   Coach tier only, active card only. */
.gr-crew-actions { display: flex; gap: var(--sp-2); }
.gr-crew-act {
  flex: 1; min-width: 0; padding: var(--sp-2) 0; border: 0; border-radius: var(--r-sm);
  background: #242424; box-shadow: inset 0 1px 1px rgba(0,0,0,.55);
  color: var(--n-dim); font-family: var(--f-u); font-size: var(--t-ui-xxs);
  cursor: pointer; position: relative;
}

/* ── RecipientStatement — PINNED, never a hover, never a tooltip ──────────── */
.gr-crew-recip {
  flex: none; display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-8);
  background: var(--panel-hi); box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.gr-crew-recip-h { font-family: var(--f-n); font-size: var(--t-mono-xs); letter-spacing: var(--t-mono-xs-ls); color: var(--k3200); }
.gr-crew-recip-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.gr-crew-chip {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-sm);
  background: var(--ctl); box-shadow: var(--ctl-in);
  font-family: var(--f-u); font-size: var(--t-ui-xxs); color: var(--text3);
}
.gr-crew-chip.is-over { background: var(--k3200-fill); box-shadow: inset 0 0 0 1px var(--k3200-line); color: var(--k3200); }
.gr-crew-chip.is-excluded { background: transparent; box-shadow: inset 0 0 0 1px #23262b; opacity: .5; }
.gr-crew-chip-v { font-family: var(--f-n); font-size: var(--t-mono-xxs); }
/* The basis, stated. A grade going to today's crew on work submitted by a
   different set is a fact the teacher needs BEFORE they save. */
.gr-crew-recip-basis { font-family: var(--f-u); font-size: var(--t-ui-xxs); color: var(--dim); }