/* measure/party.css — THE ORDER OF BATTLE: THE PARTY screen (docs/measure-phone-controls.md §4.5).
 * Reuses the shared onboarding chrome (.ob-overlay/.ob-frame/.fx-*) the way measure.css and
 * clear-screen.css do. Carries its OWN `--msp-*` copies of the measure palette rather than
 * reaching into measure.css's `--ms-*` tokens — this file is owned separately and must not
 * silently break if that file's tokens are renamed or retuned underneath it.
 *
 * ONE DOM, TWO COMPOSITIONS. The stage is a grid of six zones — head · THE ROLL · THE
 * COMPOSITION · THE PAGE · THE COMMANDS · FIELD. Desktop lays them out as the reference's
 * columns (roll + composition LEFT, page CENTRE, commands + FIELD RIGHT); the phone stacks
 * them (roll strip · composition · page · a 2×4 deck under the thumb · FIELD), THE PAGE the
 * one zone that scrolls. The phone rules live twice on purpose — a raw `@media (max-width:
 * 760px)` and the `:root.eff-w-le-720` zoom twin ([ui-scale-vault-view.md]) — and must be
 * kept in lockstep. Every control clears 44px. */

.msp-overlay {
  --msp-gold: #ffd76a;
  --msp-burn: #ff6b2b;
  --msp-shock: #5bc8f5;
  --msp-rupture: #c45ff0;
  --msp-kinetic: #d8ecff;
  --msp-ink: #f4efe4;
  --msp-ink-dim: rgba(244,239,228,0.62);
  --msp-ink-on-gold: #0b0d12;
  --msp-panel: rgba(12,16,26,0.72);
  --msp-panel-2: rgba(12,16,26,0.55);
  --msp-line: rgba(255,255,255,0.14);
  --msp-good: #7fd67f;
  --msp-bad: #ff6b6b;
  z-index: 33; /* above the board/menu it may be opened from within (clear-screen.css precedent) */
}

/* ── The stage: six zones ─────────────────────────────────────────────────── */
.msp-overlay .msp-stage {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) 200px;
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas:
    "head head head"
    "roll page cmds"
    "comp page field";
  gap: 14px 18px;
  padding: clamp(12px, 2.6vh, 22px) clamp(12px, 2.8vw, 28px);
  padding-bottom: calc(clamp(10px, 2.4vh, 20px) + env(safe-area-inset-bottom, 0px));
  color: var(--msp-ink);
  font: inherit;
  overflow: hidden;
  max-width: 1280px; margin: 0 auto;
}
.msp-head  { grid-area: head; }
.msp-roll  { grid-area: roll; }
.msp-comp  { grid-area: comp; align-self: start; }
.msp-page  { grid-area: page; }
.msp-cmds  { grid-area: cmds; }
.msp-field-bar { grid-area: field; }

/* ── Header ───────────────────────────────────────────────────────────────── */
.msp-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 10px; border-bottom: 1px solid var(--msp-line);
}
.msp-back {
  flex: 0 0 auto; min-height: 44px; padding: 6px 12px;
  font: inherit; font-size: 0.68rem; letter-spacing: 0.08em;
  color: var(--msp-ink); background: transparent; border: 1px solid var(--msp-line); cursor: pointer;
}
.msp-back:hover, .msp-back.ob-focused { border-color: var(--msp-gold); color: var(--msp-gold); outline: none; }
.msp-head-mid { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.msp-party-name {
  display: block; font-size: 0.86rem; font-weight: 700; letter-spacing: 0.1em;
  color: var(--msp-gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msp-preset-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; min-height: 22px;
  font-size: 0.56rem; letter-spacing: 0.08em; font-weight: 700;
  border: 1px solid var(--msp-line); color: var(--msp-ink-dim);
}
.msp-preset-chip .msp-icon, .msp-preset-chip svg { width: 12px; height: 12px; }
.msp-chip-default { color: var(--msp-gold); border-color: color-mix(in srgb, var(--msp-gold) 60%, transparent); }
.msp-chip-fielded { color: var(--msp-good); border-color: color-mix(in srgb, var(--msp-good) 60%, transparent); }
.msp-chip-edited  { color: var(--msp-burn); border-color: color-mix(in srgb, var(--msp-burn) 60%, transparent); }
.msp-chip-own     { color: var(--msp-shock); border-color: color-mix(in srgb, var(--msp-shock) 60%, transparent); }
.msp-kicker { flex: 0 0 auto; font-size: 0.58rem; letter-spacing: 0.16em; color: var(--msp-ink-dim); }

/* ── THE ROLL ─────────────────────────────────────────────────────────────── */
.msp-roll { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.msp-seat {
  position: relative; display: block; width: 100%; text-align: left; font: inherit; color: inherit;
  background: var(--msp-panel); border: 1px solid var(--msp-line);
  border-left: 3px solid var(--msp-class-accent, var(--msp-gold));
  cursor: pointer; padding: 10px 12px 10px 14px; min-height: 44px;
}
.msp-seat:hover { border-color: color-mix(in srgb, var(--msp-gold) 50%, var(--msp-line)); }
.msp-seat.msp-seat-cur { background: color-mix(in srgb, var(--msp-class-accent, var(--msp-gold)) 12%, var(--msp-panel)); border-color: var(--msp-class-accent, var(--msp-gold)); }
.msp-seat.ob-focused { outline: none; box-shadow: 0 0 0 2px var(--msp-gold) inset; }
/* Under a party-wide command (PRESET · ORDER · SAVE) the roll is the party, not a choice. */
.msp-roll-party .msp-seat[aria-disabled="true"] { cursor: default; opacity: 0.8; }
.msp-roll-party .msp-seat[aria-disabled="true"]:hover { border-color: var(--msp-line); }
.msp-seat-rank {
  position: absolute; top: 6px; right: 8px; font-size: 0.56rem; letter-spacing: 0.1em;
  color: var(--msp-ink-dim); border: 1px solid var(--msp-line); padding: 1px 5px;
}
.msp-seat-cur .msp-seat-rank { color: var(--msp-gold); border-color: var(--msp-gold); }
.msp-seat-top { display: flex; align-items: center; gap: 10px; padding-right: 26px; min-width: 0; }
.msp-seat-title { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; color: var(--msp-class-accent, var(--msp-ink)); min-width: 0; }
.msp-seat-role { color: var(--msp-ink-dim); font-weight: 400; }
.msp-seat-build { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 6px; }
.msp-build-name { font-size: 0.66rem; letter-spacing: 0.06em; color: var(--msp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msp-repick {
  font-size: 0.56rem; letter-spacing: 0.08em; font-weight: 700; color: var(--msp-ink-on-gold);
  background: var(--msp-bad); padding: 2px 5px; flex: 0 0 auto;
}
.msp-seat-vitals { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.msp-stat { display: inline-flex; align-items: center; gap: 4px; font-size: 0.6rem; letter-spacing: 0.06em; color: var(--msp-ink-dim); }
.msp-stat b { color: var(--msp-ink); font-weight: 700; }
.msp-stat .msp-icon { width: 14px; height: 14px; color: var(--msp-ink-dim); }
.msp-seat-sus { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 0.6rem; letter-spacing: 0.06em; color: var(--msp-good); }
.msp-seat-sus .msp-icon { width: 14px; height: 14px; }
.msp-seat-loop { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 0.6rem; letter-spacing: 0.06em; color: var(--msp-ink-dim); flex-wrap: wrap; }
.msp-seat-loop .msp-icon, .msp-seat-loop .elem-icon-svg, .msp-seat-loop .reaction-icon-svg, .msp-seat-loop .loop-icon-svg { width: 16px; height: 16px; }
.msp-seat-loop.msp-loop-warn { color: var(--msp-burn); }
.msp-loop-words { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── THE COMPOSITION strip ────────────────────────────────────────────────── */
.msp-comp {
  background: var(--msp-panel-2); border: 1px solid var(--msp-line); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.msp-comp-title { display: flex; align-items: center; gap: 6px; font-size: 0.6rem; letter-spacing: 0.14em; color: var(--msp-gold); }
.msp-comp-row, .msp-comp-outcomes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.msp-comp-row-label { display: inline-flex; align-items: center; gap: 4px; font-size: 0.56rem; letter-spacing: 0.1em; color: var(--msp-ink-dim); min-width: 56px; }
.msp-comp-row-label .loop-icon-svg, .msp-comp-row-label .msp-icon { width: 13px; height: 13px; }
.msp-count-chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 0.58rem; letter-spacing: 0.06em;
  padding: 2px 7px; border: 1px solid var(--msp-line); border-left-width: 3px; color: var(--msp-ink);
}
.msp-count-chip .elem-icon-svg { width: 12px; height: 12px; }
.msp-count-n { font-weight: 700; }
.msp-count-chip.msp-el-burn { color: var(--msp-burn); border-color: color-mix(in srgb, var(--msp-burn) 55%, transparent); }
.msp-count-chip.msp-el-shock { color: var(--msp-shock); border-color: color-mix(in srgb, var(--msp-shock) 55%, transparent); }
.msp-count-chip.msp-el-rupture { color: var(--msp-rupture); border-color: color-mix(in srgb, var(--msp-rupture) 55%, transparent); }
.msp-comp-extra { font-size: 0.54rem; letter-spacing: 0.06em; color: var(--msp-ink-dim); }
.msp-outcome-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 0.56rem; letter-spacing: 0.06em; padding: 2px 6px; border: 1px solid transparent; }
.msp-outcome-chip svg { width: 12px; height: 12px; }
.msp-outcome-yes { color: var(--msp-good); }
.msp-outcome-no  { color: var(--msp-ink-dim); opacity: 0.7; }
.msp-comp-alert { font-size: 0.6rem; letter-spacing: 0.04em; color: var(--msp-bad); }
.msp-comp-warn  { font-size: 0.6rem; letter-spacing: 0.04em; color: var(--msp-burn); }

/* ── THE PAGE ─────────────────────────────────────────────────────────────── */
.msp-page {
  min-width: 0; min-height: 0; display: flex; flex-direction: column;
  background: var(--msp-panel-2); border: 1px solid var(--msp-line);
  border-top: 2px solid var(--msp-class-accent, var(--msp-gold));
}
.msp-page[data-cmd="preset"], .msp-page[data-cmd="order"], .msp-page[data-cmd="save"] { border-top-color: var(--msp-gold); }
.msp-page-head { flex: 0 0 auto; padding: 10px 14px 8px; border-bottom: 1px solid var(--msp-line); display: flex; align-items: flex-start; gap: 10px; }
.msp-page-head-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
/* THE SPLASH AND THE PAGE's door back to the commands — a phone-only control; desktop's
 * columns keep every command on screen, so it never shows there. */
.msp-page-back { display: none; }
.msp-page-title { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; color: var(--msp-gold); }
.msp-page-sub { font-size: 0.6rem; letter-spacing: 0.04em; color: var(--msp-ink-dim); line-height: 1.4; }
.msp-page-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 8px; }
/* A flex column SHRINKS its children to fit before it scrolls — a page of rows squashed into
 * one another (seen on the first plates). Every zone's children keep their own height. */
.msp-page-body > *, .msp-roll > *, .msp-cmds > *, .msp-comp > * { flex-shrink: 0; }
.msp-section { display: flex; align-items: center; gap: 6px; font-size: 0.56rem; letter-spacing: 0.14em; color: var(--msp-ink-dim); margin-top: 6px; }
.msp-section .msp-icon { width: 12px; height: 12px; }
.msp-note { font-size: 0.6rem; letter-spacing: 0.04em; color: var(--msp-ink-dim); line-height: 1.45; }
.msp-note.msp-warn { color: var(--msp-burn); }
.msp-note.msp-silent { color: var(--msp-ink-dim); font-style: italic; }
.msp-note.msp-empty { padding: 8px 0; }

/* Rows — one shape for presets, builds, gear, abilities, sustains. */
.msp-row {
  display: block; width: 100%; text-align: left; font: inherit; color: inherit;
  background: var(--msp-panel); border: 1px solid var(--msp-line); cursor: pointer;
  padding: 10px 12px; min-height: 44px;
}
.msp-row:hover { border-color: color-mix(in srgb, var(--msp-gold) 60%, var(--msp-line)); }
.msp-row.ob-focused { outline: none; border-color: var(--msp-gold); box-shadow: 0 0 0 1px var(--msp-gold) inset; }
.msp-row.msp-row-selected { border-left: 3px solid var(--msp-good); }
.msp-row-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.msp-row-lead { display: inline-flex; width: 26px; height: 26px; flex: 0 0 auto; align-items: center; justify-content: center; }
.msp-row-lead svg { width: 24px; height: 24px; }
.msp-row-name { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; color: var(--msp-ink); min-width: 0; }
.msp-row-sub { display: block; margin-top: 5px; font-size: 0.6rem; letter-spacing: 0.03em; color: var(--msp-ink-dim); line-height: 1.45; }
.msp-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; min-height: 18px;
  font-size: 0.56rem; letter-spacing: 0.08em; font-weight: 700;
  border: 1px solid var(--msp-line); color: var(--msp-ink-dim);
}
.msp-chip .msp-icon { width: 11px; height: 11px; }
.msp-chip-live { color: var(--msp-gold); border-color: var(--msp-gold); }
.msp-chip-lean { color: var(--msp-ink-dim); }
.msp-chip-swap { color: var(--msp-shock); border-color: color-mix(in srgb, var(--msp-shock) 60%, transparent); }
.msp-chip-el.msp-el-burn { color: var(--msp-burn); border-color: color-mix(in srgb, var(--msp-burn) 60%, transparent); }
.msp-chip-el.msp-el-shock { color: var(--msp-shock); border-color: color-mix(in srgb, var(--msp-shock) 60%, transparent); }
.msp-chip-el.msp-el-rupture { color: var(--msp-rupture); border-color: color-mix(in srgb, var(--msp-rupture) 60%, transparent); }
.msp-chip-el.msp-el-kinetic { color: var(--msp-kinetic); }
.msp-rarity-exotic { color: var(--msp-gold); border-color: var(--msp-gold); }
.msp-rarity-legendary { color: var(--msp-rupture); border-color: color-mix(in srgb, var(--msp-rupture) 60%, transparent); }
.msp-rarity-rare { color: var(--msp-shock); border-color: color-mix(in srgb, var(--msp-shock) 60%, transparent); }
.msp-type-prime { color: var(--msp-gold); }
.msp-type-detonate { color: var(--msp-ink); }
.msp-type-hybrid { color: var(--msp-good); }

/* THE PRESET CARD (playtest-r20, 2026-10-11 — "scrolling and selecting is hard"). A preset is a
 * short card: lean · name · chip, one tagline, the three seats on one line. Tapping it opens the
 * card (HOW TO PLAY IT · WHY IT WORKS · EACH SEAT) and only USE THIS PARTY fields it. Type is a
 * step up from the rest of the page (the old card set 600 characters at 9.6 px). */
.msp-pcard { display: flex; flex-direction: column; border: 1px solid transparent; }
.msp-pcard-open { border-color: color-mix(in srgb, var(--msp-gold) 55%, var(--msp-line)); background: var(--msp-panel-2); }
.msp-pcard-head.msp-row { padding: 8px 12px; }
.msp-pcard-head .msp-row-lead { width: 22px; height: 22px; }
.msp-pcard-head .msp-row-lead svg { width: 20px; height: 20px; }
.msp-pcard-open .msp-pcard-head.msp-row { border-color: transparent; background: transparent; }
.msp-pcard .msp-row-name { font-size: 0.8rem; }
.msp-pcard-caret { margin-left: auto; font-size: 0.8rem; color: var(--msp-gold); }
.msp-pcard-tag { text-transform: none; display: block; margin-top: 3px; font-size: 0.68rem; letter-spacing: 0.02em; line-height: 1.35; color: var(--msp-ink); }
.msp-pcard-seats { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.msp-pcard-seat { display: inline-flex; align-items: center; gap: 5px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; color: var(--msp-ink-dim); }
.msp-pcard-seat .msp-medallion { width: 18px; height: 18px; font-size: 0.75rem; }
.msp-pcard-body { display: flex; flex-direction: column; gap: 6px; padding: 2px 12px 10px; text-transform: none; }
.msp-pcard-k { margin-top: 4px; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.14em; color: var(--msp-gold); }
.msp-pcard-steps { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 4px; }
.msp-pcard-steps li { font-size: 0.72rem; line-height: 1.4; letter-spacing: 0.02em; color: var(--msp-ink); }
.msp-pcard-pitch { font-size: 0.68rem; line-height: 1.45; letter-spacing: 0.02em; color: var(--msp-ink-dim); }
.msp-pcard-body .msp-seats { margin-top: 0; }
.msp-pcard-body .msp-seat-line { font-size: 0.68rem; }
.msp-chip-perk { color: var(--msp-gold); border-color: color-mix(in srgb, var(--msp-gold) 55%, transparent); }
.msp-chip-needs { color: var(--msp-burn); border-color: color-mix(in srgb, var(--msp-burn) 60%, transparent); }
/* THE UNTRIED (progression/untried.js) — clearing the prepped mission with this party pays +1 */
.msp-chip-untried { color: #7fe8d0; border-color: color-mix(in srgb, #7fe8d0 60%, transparent); }
.msp-pcard-k-untried { color: #7fe8d0; }
.msp-untried-note { color: #7fe8d0; }
.msp-pcard-k-needs { color: var(--msp-burn); }
.msp-pcard-needs { display: flex; flex-direction: column; gap: 4px; }
.msp-pcard-need { display: flex; align-items: center; gap: 6px; font-size: 0.66rem; line-height: 1.35; }
.msp-pcard-need .msp-medallion { width: 16px; height: 16px; font-size: 0.7rem; flex: 0 0 auto; }
.msp-pcard-need-what { font-weight: 700; color: var(--msp-ink); }
.msp-pcard-need-where { color: var(--msp-ink-dim); }
.msp-pcard-use {
  margin: 2px 12px 10px; min-height: 48px; font: inherit; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em;
  background: var(--msp-gold); color: var(--msp-ink-on-gold); border: 1px solid var(--msp-gold); cursor: pointer;
}
.msp-pcard-use.ob-focused { outline: 2px solid var(--msp-ink); outline-offset: 2px; }
.msp-pcard-use-done { background: transparent; color: var(--msp-good); border-color: var(--msp-good); cursor: default; }

/* A preset's three seats. */
.msp-seats { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.msp-seat-line { display: flex; align-items: flex-start; gap: 8px; font-size: 0.6rem; letter-spacing: 0.03em; line-height: 1.4; }
.msp-seat-line .msp-medallion { width: 20px; height: 20px; font-size: 0.85rem; flex: 0 0 auto; }
.msp-seat-line-build { font-weight: 700; color: var(--msp-ink); }
.msp-seat-line-missing { color: var(--msp-bad); }
.msp-seat-line-role { color: var(--msp-ink-dim); }

/* THE BUILD BRIEF (BUILD rows, STATUS). */
.msp-brief { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--msp-line); }
.msp-brief-status { margin-top: 0; padding-top: 0; border-top: none; gap: 6px; }
.msp-brief-row { display: grid; grid-template-columns: 92px 1fr; gap: 8px; font-size: 0.58rem; letter-spacing: 0.03em; line-height: 1.4; }
.msp-brief-status .msp-brief-row { font-size: 0.62rem; }
.msp-brief-k { display: inline-flex; align-items: center; gap: 5px; color: var(--msp-ink-dim); letter-spacing: 0.08em; font-weight: 700; }
.msp-brief-k svg, .msp-brief-k .msp-icon { width: 14px; height: 14px; flex: 0 0 auto; }
.msp-brief-v { color: var(--msp-ink); min-width: 0; overflow-wrap: anywhere; }
.msp-brief-warn .msp-brief-v { color: var(--msp-burn); }
.msp-brief-good .msp-brief-v { color: var(--msp-good); }

/* Slot tabs + the filter. */
.msp-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.msp-tab {
  flex: 1 1 auto; min-height: 40px; padding: 6px 10px; font: inherit; font-size: 0.6rem; letter-spacing: 0.1em; font-weight: 700;
  color: var(--msp-ink-dim); background: transparent; border: 1px solid var(--msp-line); cursor: pointer;
}
.msp-tab:hover, .msp-tab.ob-focused { border-color: var(--msp-gold); color: var(--msp-gold); outline: none; }
.msp-tab.msp-tab-cur { color: var(--msp-ink-on-gold); background: var(--msp-gold); border-color: var(--msp-gold); }
.msp-search {
  width: 100%; min-height: 40px; padding: 6px 10px; font: inherit; font-size: 0.64rem; letter-spacing: 0.06em;
  color: var(--msp-ink); background: rgba(0,0,0,0.35); border: 1px solid var(--msp-line);
}
.msp-search:focus, .msp-search.ob-focused { outline: none; border-color: var(--msp-gold); }

/* THE FORECAST. */
.msp-fc {
  margin: -4px 0 4px; padding: 10px 12px 12px;
  background: rgba(0,0,0,0.35); border: 1px solid var(--msp-gold); border-top: none;
  display: flex; flex-direction: column; gap: 5px;
}
.msp-fc-title { display: flex; align-items: center; gap: 6px; font-size: 0.56rem; letter-spacing: 0.14em; color: var(--msp-gold); margin-bottom: 2px; }
.msp-fc-title .msp-icon { width: 12px; height: 12px; }
.msp-fc-row { display: grid; grid-template-columns: 76px 1fr auto 1fr auto; align-items: baseline; gap: 6px; font-size: 0.6rem; letter-spacing: 0.03em; line-height: 1.35; }
.msp-fc-k { color: var(--msp-ink-dim); letter-spacing: 0.08em; font-weight: 700; }
.msp-fc-before { color: var(--msp-ink-dim); text-decoration: line-through; text-decoration-color: rgba(244,239,228,0.35); min-width: 0; overflow-wrap: anywhere; }
.msp-fc-arrow { color: var(--msp-ink-dim); }
.msp-fc-after { color: var(--msp-ink); font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.msp-fc-delta { font-size: 0.56rem; font-weight: 700; padding: 1px 5px; border: 1px solid var(--msp-line); }
.msp-fc-good .msp-fc-after, .msp-fc-good .msp-fc-delta { color: var(--msp-good); border-color: color-mix(in srgb, var(--msp-good) 60%, transparent); }
.msp-fc-bad .msp-fc-after, .msp-fc-bad .msp-fc-delta { color: var(--msp-bad); border-color: color-mix(in srgb, var(--msp-bad) 60%, transparent); }
.msp-fc-party { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.6rem; margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--msp-line); }
.msp-fc-gain { color: var(--msp-good); font-weight: 700; }
.msp-fc-loss { color: var(--msp-bad); font-weight: 700; }
.msp-fc-same { color: var(--msp-ink-dim); }
.msp-fc-warn { font-size: 0.6rem; color: var(--msp-burn); }
.msp-fc-none { font-size: 0.6rem; color: var(--msp-ink-dim); }
.msp-equip {
  align-self: flex-start; margin-top: 4px; min-height: 44px; padding: 8px 18px; font: inherit; font-size: 0.68rem; letter-spacing: 0.14em; font-weight: 700;
  color: var(--msp-ink-on-gold); background: var(--msp-gold); border: 1px solid var(--msp-gold); cursor: pointer;
}
.msp-equip:hover, .msp-equip.ob-focused { outline: none; box-shadow: 0 0 0 2px var(--msp-ink) inset; }

/* THE FULL VAULT door. */
.msp-vault-btn {
  display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; margin-top: 8px;
  min-height: 44px; padding: 10px 12px; font: inherit; color: var(--msp-ink);
  background: transparent; border: 1px dashed var(--msp-line); cursor: pointer;
}
.msp-vault-btn:hover, .msp-vault-btn.ob-focused { border-color: var(--msp-gold); color: var(--msp-gold); outline: none; }
.msp-vault-btn:disabled { opacity: 0.5; cursor: default; }
.msp-vault-label { font-size: 0.66rem; letter-spacing: 0.12em; font-weight: 700; }
.msp-vault-sub { font-size: 0.56rem; letter-spacing: 0.03em; color: var(--msp-ink-dim); line-height: 1.4; }

/* ORDER. */
.msp-order-row {
  display: grid; grid-template-columns: 28px 26px 1fr auto; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--msp-panel); border: 1px solid var(--msp-line);
  border-left: 3px solid var(--msp-class-accent, var(--msp-gold));
}
.msp-order-rank { font-size: 0.9rem; font-weight: 700; color: var(--msp-gold); text-align: center; }
.msp-order-row .msp-medallion { width: 26px; height: 26px; font-size: 1rem; }
.msp-order-name { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; color: var(--msp-class-accent, var(--msp-ink)); }
.msp-order-build { display: block; font-size: 0.56rem; letter-spacing: 0.04em; color: var(--msp-ink-dim); grid-column: 3; }
.msp-order-up {
  grid-column: 4; grid-row: 1 / span 2; min-height: 44px; padding: 6px 12px; font: inherit; font-size: 0.6rem; letter-spacing: 0.1em; font-weight: 700;
  color: var(--msp-ink); background: transparent; border: 1px solid var(--msp-line); cursor: pointer;
}
.msp-order-up:hover, .msp-order-up.ob-focused { border-color: var(--msp-gold); color: var(--msp-gold); outline: none; }
.msp-order-up:disabled { opacity: 0.35; cursor: default; }

/* SAVE — name rows + the link. */
.msp-name-row { display: flex; gap: 6px; align-items: stretch; }
.msp-name-input, .msp-link-input {
  flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 6px 10px; font: inherit; font-size: 0.7rem; letter-spacing: 0.08em;
  color: var(--msp-ink); background: rgba(0,0,0,0.35); border: 1px solid var(--msp-line);
}
.msp-link-input { font-size: 0.56rem; letter-spacing: 0.02em; color: var(--msp-ink-dim); }
.msp-name-input:focus, .msp-name-input.ob-focused, .msp-link-input:focus { outline: none; border-color: var(--msp-gold); }
.msp-name-ok, .msp-copy-link {
  flex: 0 0 auto; min-height: 44px; padding: 6px 14px; font: inherit; font-size: 0.62rem; letter-spacing: 0.1em; font-weight: 700;
  color: var(--msp-ink-on-gold); background: var(--msp-gold); border: 1px solid var(--msp-gold); cursor: pointer;
}
.msp-name-ok:hover, .msp-name-ok.ob-focused, .msp-copy-link:hover, .msp-copy-link.ob-focused { outline: none; box-shadow: 0 0 0 2px var(--msp-ink) inset; }
.msp-link-row { display: flex; gap: 6px; align-items: stretch; }

/* ── THE COMMANDS ─────────────────────────────────────────────────────────── */
.msp-cmds { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.msp-cmd {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left;
  min-height: 44px; padding: 8px 12px; font: inherit; color: var(--msp-ink);
  background: var(--msp-panel); border: 1px solid var(--msp-line); cursor: pointer;
}
.msp-cmd:hover { border-color: color-mix(in srgb, var(--msp-gold) 60%, var(--msp-line)); }
.msp-cmd.ob-focused { outline: none; border-color: var(--msp-gold); box-shadow: 0 0 0 1px var(--msp-gold) inset; }
.msp-cmd.msp-cmd-cur { color: var(--msp-ink-on-gold); background: var(--msp-gold); border-color: var(--msp-gold); }
.msp-cmd-label { font-size: 0.66rem; letter-spacing: 0.12em; font-weight: 700; }
.msp-cmd-hint { font-size: 0.56rem; letter-spacing: 0.04em; color: var(--msp-ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.msp-cmd-cur .msp-cmd-hint { color: var(--msp-ink-on-gold); opacity: 0.8; }

/* ── FIELD ────────────────────────────────────────────────────────────────── */
.msp-field-bar { display: flex; align-items: flex-end; }
.msp-field-btn {
  width: 100%; min-height: 52px; padding: 10px 14px; font: inherit; font-size: 0.72rem; letter-spacing: 0.16em; font-weight: 700;
  color: var(--msp-ink-on-gold); background: var(--msp-gold); border: 1px solid var(--msp-gold); cursor: pointer;
}
.msp-field-btn:hover, .msp-field-btn.ob-focused { outline: none; box-shadow: 0 0 0 2px var(--msp-ink) inset; }

/* ── Shared sigils (party-icons.js) ───────────────────────────────────────── */
.msp-medallion {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  font-size: 1.1rem; font-weight: 700; line-height: 1; color: var(--msp-medallion, var(--msp-class-accent, var(--msp-ink)));
  border: 1px solid color-mix(in srgb, var(--msp-medallion, var(--msp-class-accent, var(--msp-ink))) 60%, transparent);
  background: color-mix(in srgb, var(--msp-medallion, var(--msp-class-accent, var(--msp-ink))) 12%, transparent);
}
.msp-icon { width: 16px; height: 16px; display: inline-block; vertical-align: middle; flex: 0 0 auto; }

/* ── The front door's PARTY button (measure-menu.js) — the knob head's row + the button;
 * chrome belongs to measure.css. Mirrors `.ms-tier`'s look without reaching into its rules. */
.ms-knob-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ms-party-btn {
  min-height: 32px; padding: 5px 10px; font: inherit; font-size: 0.58rem; letter-spacing: 0.1em;
  color: var(--msp-gold, #ffd76a); background: transparent; border: 1px solid var(--msp-gold, #ffd76a); cursor: pointer;
}
.ms-party-btn:hover, .ms-party-btn.ob-focused {
  color: var(--msp-ink-on-gold, #0b0d12); background: var(--msp-gold, #ffd76a); outline: none;
}

@media (prefers-reduced-motion: no-preference) {
  .msp-row, .msp-cmd, .msp-seat, .msp-tab { transition: border-color 120ms ease, background-color 120ms ease; }
}

/* ── THE PHONE COMPOSITION — the cockpit: roll strip · composition · page · deck · FIELD ── */
@media (max-width: 760px) {
  .msp-overlay .msp-stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "head" "roll" "comp" "page" "cmds" "field";
    gap: 8px; padding: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); max-width: none;
  }
  .msp-kicker { display: none; }
  .msp-party-name { font-size: 0.72rem; }
  .msp-roll { flex-direction: row; gap: 6px; }
  .msp-seat { flex: 1 1 0; min-width: 0; padding: 8px 8px 8px 10px; }
  .msp-seat-top { padding-right: 18px; gap: 6px; }
  .msp-seat-title { font-size: 0.58rem; }
  .msp-seat-role { display: none; }
  .msp-seat-build { margin-top: 4px; }
  .msp-build-name { font-size: 0.58rem; }
  .msp-seat-vitals { gap: 6px; margin-top: 6px; }
  .msp-stat { font-size: 0.56rem; }
  .msp-stat .msp-icon { display: none; }
  .msp-seat-sus, .msp-seat-loop { font-size: 0.56rem; margin-top: 4px; }
  .msp-seat-loop .msp-loop-words { display: none; }
  .msp-seat .msp-medallion { width: 24px; height: 24px; font-size: 0.9rem; }
  .msp-comp { padding: 6px 10px; gap: 4px; }
  .msp-comp-title { display: none; }
  .msp-comp-row-label { min-width: 44px; }
  .msp-comp-row, .msp-comp-outcomes { gap: 4px; }
  .msp-count-chip { padding: 1px 5px; font-size: 0.56rem; }
  .msp-outcome-chip { font-size: 0.56rem; padding: 1px 4px; }
  .msp-page-head { padding: 8px 10px 6px; }
  .msp-page-body { padding: 8px 8px 12px; }
  .msp-cmds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .msp-cmd { align-items: center; text-align: center; padding: 6px 4px; min-height: 48px; }
  .msp-cmd-label { font-size: 0.58rem; letter-spacing: 0.08em; }
  .msp-cmd-hint { display: none; }
  .msp-field-btn { min-height: 52px; }
  .msp-fc-row { grid-template-columns: 58px minmax(0, 1fr) auto minmax(0, 1fr) auto; font-size: 0.56rem; gap: 4px; }
  .msp-brief-row { grid-template-columns: 76px 1fr; }

  /* ── THE SPLASH AND THE PAGE (2026-09-28, on device) ──────────────────────
   * SPLASH: the roll, THE COMPOSITION and a big two-column deck; no page.
   * PAGE: the roll collapsed to one row of names, no composition, the deck a chip strip,
   * THE PAGE takes the height. `data-view` is set by party.js. */
  .msp-overlay .msp-stage[data-view="splash"] {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    grid-template-areas: "head" "roll" "comp" "cmds" "field";
  }
  .msp-stage[data-view="splash"] .msp-page { display: none; }
  .msp-stage[data-view="splash"] .msp-cmds { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: stretch; overflow-y: auto; }
  .msp-stage[data-view="splash"] .msp-cmd { align-items: flex-start; text-align: left; padding: 10px 12px; min-height: 60px; }
  .msp-stage[data-view="splash"] .msp-cmd-label { font-size: 0.7rem; }
  .msp-stage[data-view="splash"] .msp-cmd-hint { display: block; white-space: normal; }
  .msp-overlay .msp-stage[data-view="page"] {
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "head" "roll" "page" "cmds" "field";
  }
  .msp-stage[data-view="page"] .msp-comp { display: none; }
  .msp-stage[data-view="page"] .msp-seat { padding: 6px 8px; min-height: 44px; }
  .msp-stage[data-view="page"] .msp-seat-build,
  .msp-stage[data-view="page"] .msp-seat-vitals,
  .msp-stage[data-view="page"] .msp-seat-sus,
  .msp-stage[data-view="page"] .msp-seat-loop { display: none; }
  .msp-stage[data-view="page"] .msp-seat-top { padding-right: 16px; }
  .msp-stage[data-view="page"] .msp-seat .msp-medallion { width: 22px; height: 22px; font-size: 0.8rem; }
  .msp-stage[data-view="page"] .msp-seat-rank { top: 4px; right: 4px; font-size: 0.5rem; padding: 0 3px; }
  .msp-stage[data-view="page"] .msp-cmds { display: flex; flex-direction: row; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  .msp-stage[data-view="page"] .msp-cmds::-webkit-scrollbar { display: none; }
  .msp-stage[data-view="page"] .msp-cmd { flex: 0 0 auto; width: auto; min-width: 84px; min-height: 44px; padding: 6px 10px; align-items: center; }
  .msp-stage[data-view="page"] .msp-cmd-label { font-size: 0.56rem; }
  .msp-stage[data-view="page"] .msp-page-back {
    display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 40px; padding: 4px 8px; margin-top: -2px;
    font: inherit; font-size: 0.56rem; letter-spacing: 0.08em; color: var(--msp-ink-dim);
    background: transparent; border: 1px solid var(--msp-line); cursor: pointer;
  }
  .msp-stage[data-view="page"] .msp-page-back:hover, .msp-stage[data-view="page"] .msp-page-back.ob-focused { border-color: var(--msp-gold); color: var(--msp-gold); outline: none; }
  .msp-stage[data-view="page"] .msp-field-btn { min-height: 44px; }
}
/* THE ZOOM TWIN (ui-scale-vault-view.md): a raw media query reads the RAW viewport, which the
 * --ui-scale zoom never changes; these must mirror the block above, rule for rule. */
:root.eff-w-le-720 .msp-overlay .msp-stage {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  grid-template-areas: "head" "roll" "comp" "page" "cmds" "field";
  gap: 8px; padding: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); max-width: none;
}
:root.eff-w-le-720 .msp-kicker { display: none; }
:root.eff-w-le-720 .msp-party-name { font-size: 0.72rem; }
:root.eff-w-le-720 .msp-roll { flex-direction: row; gap: 6px; }
:root.eff-w-le-720 .msp-seat { flex: 1 1 0; min-width: 0; padding: 8px 8px 8px 10px; }
:root.eff-w-le-720 .msp-seat-top { padding-right: 18px; gap: 6px; }
:root.eff-w-le-720 .msp-seat-title { font-size: 0.58rem; }
:root.eff-w-le-720 .msp-seat-role { display: none; }
:root.eff-w-le-720 .msp-seat-build { margin-top: 4px; }
:root.eff-w-le-720 .msp-build-name { font-size: 0.58rem; }
:root.eff-w-le-720 .msp-seat-vitals { gap: 6px; margin-top: 6px; }
:root.eff-w-le-720 .msp-stat { font-size: 0.56rem; }
:root.eff-w-le-720 .msp-stat .msp-icon { display: none; }
:root.eff-w-le-720 .msp-seat-sus, :root.eff-w-le-720 .msp-seat-loop { font-size: 0.56rem; margin-top: 4px; }
:root.eff-w-le-720 .msp-seat-loop .msp-loop-words { display: none; }
:root.eff-w-le-720 .msp-seat .msp-medallion { width: 24px; height: 24px; font-size: 0.9rem; }
:root.eff-w-le-720 .msp-comp { padding: 6px 10px; gap: 4px; }
:root.eff-w-le-720 .msp-comp-title { display: none; }
:root.eff-w-le-720 .msp-comp-row-label { min-width: 44px; }
:root.eff-w-le-720 .msp-comp-row, :root.eff-w-le-720 .msp-comp-outcomes { gap: 4px; }
:root.eff-w-le-720 .msp-count-chip { padding: 1px 5px; font-size: 0.56rem; }
:root.eff-w-le-720 .msp-outcome-chip { font-size: 0.56rem; padding: 1px 4px; }
:root.eff-w-le-720 .msp-page-head { padding: 8px 10px 6px; }
:root.eff-w-le-720 .msp-page-body { padding: 8px 8px 12px; }
:root.eff-w-le-720 .msp-cmds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
:root.eff-w-le-720 .msp-cmd { align-items: center; text-align: center; padding: 6px 4px; min-height: 48px; }
:root.eff-w-le-720 .msp-cmd-label { font-size: 0.58rem; letter-spacing: 0.08em; }
:root.eff-w-le-720 .msp-cmd-hint { display: none; }
:root.eff-w-le-720 .msp-field-btn { min-height: 52px; }
:root.eff-w-le-720 .msp-fc-row { grid-template-columns: 58px minmax(0, 1fr) auto minmax(0, 1fr) auto; font-size: 0.56rem; gap: 4px; }
:root.eff-w-le-720 .msp-brief-row { grid-template-columns: 76px 1fr; }
/* THE SPLASH AND THE PAGE — the zoom twin */
:root.eff-w-le-720 .msp-overlay .msp-stage[data-view="splash"] {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    grid-template-areas: "head" "roll" "comp" "cmds" "field";
  }
:root.eff-w-le-720 .msp-stage[data-view="splash"] .msp-page { display: none; }
:root.eff-w-le-720 .msp-stage[data-view="splash"] .msp-cmds { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: stretch; overflow-y: auto; }
:root.eff-w-le-720 .msp-stage[data-view="splash"] .msp-cmd { align-items: flex-start; text-align: left; padding: 10px 12px; min-height: 60px; }
:root.eff-w-le-720 .msp-stage[data-view="splash"] .msp-cmd-label { font-size: 0.7rem; }
:root.eff-w-le-720 .msp-stage[data-view="splash"] .msp-cmd-hint { display: block; white-space: normal; }
:root.eff-w-le-720 .msp-overlay .msp-stage[data-view="page"] {
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "head" "roll" "page" "cmds" "field";
  }
:root.eff-w-le-720 .msp-stage[data-view="page"] .msp-comp { display: none; }
:root.eff-w-le-720 .msp-stage[data-view="page"] .msp-seat { padding: 6px 8px; min-height: 44px; }
:root.eff-w-le-720 .msp-stage[data-view="page"] .msp-seat-build,
:root.eff-w-le-720 .msp-stage[data-view="page"] .msp-seat-vitals,
:root.eff-w-le-720 .msp-stage[data-view="page"] .msp-seat-sus,
:root.eff-w-le-720 .msp-stage[data-view="page"] .msp-seat-loop { display: none; }
:root.eff-w-le-720 .msp-stage[data-view="page"] .msp-seat-top { padding-right: 16px; }
:root.eff-w-le-720 .msp-stage[data-view="page"] .msp-seat .msp-medallion { width: 22px; height: 22px; font-size: 0.8rem; }
:root.eff-w-le-720 .msp-stage[data-view="page"] .msp-seat-rank { top: 4px; right: 4px; font-size: 0.5rem; padding: 0 3px; }
:root.eff-w-le-720 .msp-stage[data-view="page"] .msp-cmds { display: flex; flex-direction: row; overflow-x: auto; gap: 6px; scrollbar-width: none; }
:root.eff-w-le-720 .msp-stage[data-view="page"] .msp-cmds::-webkit-scrollbar { display: none; }
:root.eff-w-le-720 .msp-stage[data-view="page"] .msp-cmd { flex: 0 0 auto; width: auto; min-width: 84px; min-height: 44px; padding: 6px 10px; align-items: center; }
:root.eff-w-le-720 .msp-stage[data-view="page"] .msp-cmd-label { font-size: 0.56rem; }
:root.eff-w-le-720 .msp-stage[data-view="page"] .msp-page-back {
    display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 40px; padding: 4px 8px; margin-top: -2px;
    font: inherit; font-size: 0.56rem; letter-spacing: 0.08em; color: var(--msp-ink-dim);
    background: transparent; border: 1px solid var(--msp-line); cursor: pointer;
  }
:root.eff-w-le-720 .msp-stage[data-view="page"] .msp-page-back:hover, :root.eff-w-le-720 .msp-stage[data-view="page"] .msp-page-back.ob-focused { border-color: var(--msp-gold); color: var(--msp-gold); outline: none; }
:root.eff-w-le-720 .msp-stage[data-view="page"] .msp-field-btn { min-height: 44px; }