/* measure/clear-screen.css — GAUNTLET CLEAR (docs/the-measure-spec.md §2/§9, playtest
 * finding 6). The mode's own drop screen: reuses the shared onboarding chrome
 * (.ob-overlay / .ob-frame / .fx-*) the way measure.css does, and the shared unified card
 * (ui/shared/card.css, linked separately from index.html) for the drops themselves — this
 * file only styles the screen's own furniture (header, list, RETURN bar, reveal stagger,
 * the equipped ribbon). NOT a copy of results.css. */

.mc-overlay .mc-stage {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(10px, 2.4vh, 22px) clamp(10px, 2.6vw, 28px);
  padding-bottom: calc(clamp(10px, 2.4vh, 22px) + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.mc-head {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.16);
}
.mc-title { font-size: clamp(1rem, 3.2vw, 1.4rem); letter-spacing: 0.16em; color: #ffd76a;
            font-weight: 700; }
.mc-sub { font-size: 0.72rem; letter-spacing: 0.08em; color: rgba(244,239,228,0.7); }
.mc-chip-first { margin-left: auto; font-size: 0.55rem; letter-spacing: 0.1em;
                 padding: 3px 8px; color: #0b0d12; background: #ffd76a; }
/* THE UNTRIED — the bonus line, its own row under the title */
.mc-untried { flex: 1 1 100%; font-size: 0.6rem; letter-spacing: 0.08em; color: #7fe8d0; }
/* THE RECEIPT — why the drop dropped, under its card (the FPS debrief's rs-drop-reason) */
.mc-drop-reason { display: block; padding: 4px 10px 6px; font-size: 0.58rem; letter-spacing: 0.1em; color: rgba(244,239,228,0.6); text-align: left; }

/* ── The drop list — worst→best, one full-width card per row ────────────────── */
.mc-list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px; padding: 4px 2px;
}
.mc-empty { padding: 24px 8px; text-align: center; letter-spacing: 0.12em;
            color: rgba(244,239,228,0.5); font-size: 0.7rem; }

.mc-card {
  position: relative;
  display: block; width: 100%; text-align: left;
  padding: 0; margin: 0; border: 2px solid transparent; background: transparent;
  font: inherit; color: inherit; cursor: pointer;
}
.mc-card:hover, .mc-card.ob-focused { border-color: #ffd76a; outline: none; }
/* The equip ribbon — same information as the FPS debrief's "✓ EQUIPPED" flag, drawn here
 * rather than imported since this card is the SHARED renderer wrapped in our own button,
 * not a results.js DOM node. */
.mc-card-equipped::after {
  content: '✓ EQUIPPED'; position: absolute; top: 6px; right: 6px;
  font-size: 0.55rem; letter-spacing: 0.1em; padding: 3px 7px;
  color: #0b0d12; background: #ffd76a; pointer-events: none;
}

/* THE REVEAL STAGGER — a small stepped fade-up, timed off config.measure.ui.REVEAL_STEP_MS
 * (--mc-reveal-step, set from JS). prefers-reduced-motion skips the class entirely in JS
 * (cards render already-visible); this @keyframes block is only ever attached when motion
 * is allowed, and the reduced-motion rule below is belt-and-suspenders. */
@keyframes mc-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.mc-card-reveal {
  opacity: 0;
  animation: mc-reveal 260ms ease-out forwards;
  animation-delay: calc(var(--mc-i, 0) * var(--mc-reveal-step, 260ms));
}
@media (prefers-reduced-motion: reduce) {
  .mc-card-reveal { opacity: 1; animation: none; }
}

/* ── RETURN — pinned below the scroll list, thumb-zone height ───────────────── */
.mc-return-bar { flex: 0 0 auto; margin-top: 4px; }
.mc-return-btn {
  width: 100%; min-height: 52px; padding: 10px 16px; font: inherit;
  font-size: 0.8rem; letter-spacing: 0.16em; text-align: center;
  color: #0b0d12; background: #ffd76a; border: none; cursor: pointer;
}
.mc-return-btn:hover, .mc-return-btn.ob-focused { filter: brightness(1.08); outline: 2px solid #fff; }

/* ── Phone (§10 phone-first, docs/measure-phone-controls.md) ────────────────── */
@media (max-width: 760px) {
  .mc-overlay .mc-stage { gap: 6px; padding: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .mc-head { gap: 3px 10px; font-size: 0.6rem; padding-bottom: 5px; }
  .mc-title { font-size: 0.9rem; }
  .mc-chip-first { flex: 1 1 100%; margin-left: 0; text-align: center; }
  .mc-list { gap: 6px; }
  .mc-return-btn { min-height: 56px; font-size: 0.72rem; }
}

/* ── THE ZOOM TWIN (docs/ui-scale-vault-view.md, BINDING) ─────────────────────
 * `.mc-overlay` is an `.ob-overlay`, so styles.css applies `zoom: var(--ui-scale)` to it.
 * A raw `@media (max-width: 760px)` reads the RAW viewport, which the zoom does not change,
 * so at LARGE/EXTRA LARGE ui-scale on a phone the block above would never fire. Generated
 * from the block above rather than hand-copied — the two must not drift (measure.css's own
 * ZOOM TWIN comment names the same rule; 720 is the nearest stamped `eff-w-le-*` breakpoint
 * under this file's 760). ─────────────────────────────────────────────────────────────── */

  :root.eff-w-le-720 .mc-overlay .mc-stage { gap: 6px; padding: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  :root.eff-w-le-720 .mc-head { gap: 3px 10px; font-size: 0.6rem; padding-bottom: 5px; }
  :root.eff-w-le-720 .mc-title { font-size: 0.9rem; }
  :root.eff-w-le-720 .mc-chip-first { flex: 1 1 100%; margin-left: 0; text-align: center; }
  :root.eff-w-le-720 .mc-list { gap: 6px; }
  :root.eff-w-le-720 .mc-return-btn { min-height: 56px; font-size: 0.72rem; }

/* ── Stacking — above the board it sits on top of (30), below the equip overlay it may
 * itself open (36), matching how equip-overlay.css already documents its own 36. ───────── */
.mc-overlay { z-index: 33; }