/* Page styles: sheets area. Owned by its views; tokens and shared components live in ../app.css.
   Record (4), RecordStates, FormTeam (5), FixResult (6): route sheets over a faded page title. */

/* ---------- Route sheet backdrop (artboard: #0C0203 with the page title at 35%) ---------- */
.sh-screen { background: var(--bg-sheet-behind); }
.sh-behind {
  height: 44px; padding: 10px var(--gutter) 0; opacity: 0.35;
  font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.2; text-transform: uppercase;
}
.sh-backdrop { position: fixed; inset: 0; z-index: 40; }
.sh-close { color: var(--muted); }
.sh-close[hidden] { display: flex; visibility: hidden; } /* outcome unknown: no way out but Try again / Change; keep the header height */
.sheet-body.sh-tight { padding-top: 6px; gap: 18px; }

/* ---------- Save states (RecordStates) ---------- */
.sh-error { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.4; color: var(--error-ink); }
.sh-error svg { flex: none; margin-top: 1px; }
.sh-conflict { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink); }
.sh-locked {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 14px;
  border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--muted);
}
.sh-locked > span { font-size: 15px; }
.sh-locked strong { color: var(--ink); }
.sh-locked svg { flex: none; }
.sh-unknown {
  display: flex; gap: 10px; padding: 12px; border-radius: 12px;
  background: var(--gold-tint-2); border: 1px solid rgba(210, 168, 111, 0.35);
  font-size: 14px; line-height: 1.45;
}
.sh-unknown svg { flex: none; margin-top: 1px; }

/* Saved toast with the red check (RecordStates · Saved) */
.toast:has(> .sh-toast) { padding: 14px 16px; border-radius: 16px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); }
.sh-toast { display: flex; align-items: center; gap: 12px; text-align: left; }
.sh-toast-mark { width: 32px; height: 32px; flex: none; border-radius: 16px; background: var(--red); color: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.sh-toast-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sh-toast-line { font-size: 15px; font-weight: 700; }
.sh-toast-sub { font-size: 13px; font-weight: 600; color: #5A3A3A; font-variant-numeric: tabular-nums; }

/* ---------- Record match (4) ---------- */
.sheet-body.rec-body { gap: 20px; }
.rec-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rec-modes .seg > button, .rec-modes .seg > a { padding: 0 6px; position: relative; }
/* Artboard draws 40px segments in a 46px track; stretch the hit area to 44px without changing the look. */
.rec-modes .seg > button::before, .rec-modes .seg > a::before { content: ''; position: absolute; inset: -2px 0; }
.rec-origin { justify-content: flex-start; }
.rec-modes .seg > a:hover { color: var(--ink); }
.rec-picked-name { font-size: 16px; font-weight: 600; }
.rec-change { padding: 0 12px; }
.rec-sub { margin-top: 4px; }
.rec-form { align-self: flex-start; }
.rec-more { align-self: flex-start; }
.rec-hint { margin: 0; font-size: 14px; line-height: 1.4; color: var(--subtle); }
.tile-grid .tile .why { font-size: 12px; font-weight: 500; }
/* Usernames are up to 20 characters with no spaces: tiles and picked rows wrap them anywhere. */
.rec-body .tile, .rec-body .winner-tile { min-width: 0; }
.rec-body .tile > span, .rec-body .winner-tile .name { max-width: 100%; overflow-wrap: anywhere; }
.rec-body .winner-tile .name { line-height: 1.05; }
.rec-body .picked > .stack { min-width: 0; }
.rec-picked-name { overflow-wrap: anywhere; }
.rec-picked-name.tight { font-family: var(--font-display); font-size: 17px; } /* fitNames: condensed, so a 20-character username stays whole */
.rec-hint { overflow-wrap: anywhere; }
.sh-locked > span { min-width: 0; overflow-wrap: anywhere; }
.rack-field input:disabled { opacity: 0.6; }

/* ---------- Form team (5) ---------- */
.ft-lead { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.ft-roster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ft-player {
  min-height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 12px;
  background: var(--surface); color: var(--ink); border: 1.5px solid var(--border);
  font-weight: 600; font-size: 15px; text-align: left; min-width: 0;
}
.ft-player[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.ft-av {
  width: 32px; height: 32px; flex: none; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; background: var(--surface-2); color: #FFFFFF;
}
.ft-player[aria-pressed="true"] .ft-av { background: var(--red); }
/* Names wrap instead of cutting off: two long usernames can differ only at the end. */
.ft-pname { min-width: 0; overflow-wrap: anywhere; line-height: 1.2; padding: 6px 0; }
/* A username too wide for a half-width tile (fitNames): one tile per line, full width. */
.ft-roster:has(.ft-pname.tight) { grid-template-columns: minmax(0, 1fr); }
.ft-preview {
  min-height: 76px; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 14px 16px;
  border-radius: 14px; background: var(--surface); border: 1px dashed var(--border-strong);
}
.ft-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.ft-name { font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1; text-transform: uppercase; overflow-wrap: anywhere; }
.ft-note { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.ft-player > .ft-pname { flex: 1 1 0; }
.ft-preview { min-width: 0; }

/* ---------- Fix a result (6) ---------- */
.fx-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.fx-meta { font-size: 12px; color: var(--subtle); font-variant-numeric: tabular-nums; }
/* The match line holds two team names (usernames of up to 20 letters with no spaces): fitNames
   (.fit-name) steps a name too wide for the card down, then scales it, so it never runs out of
   the card at 320px; breaking inside a name is the last fallback (an older cached script). */
.fx-line { min-width: 0; font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.fx-line.tight { font-size: 15px; }
.fx-line.tighter { font-size: 13px; }
.fx-verb { color: var(--subtle); }
.fx-sub { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } /* a pasted link as the correction reason */
.fx-options { display: flex; flex-direction: column; gap: 8px; }
.fx-opt {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 14px;
  border-radius: 14px; background: transparent; border: 1.5px solid var(--border); color: var(--ink); text-align: left;
}
.fx-opt[aria-checked="true"] { background: var(--live-surface); border-color: var(--ink); }
.fx-dot {
  width: 20px; height: 20px; margin-top: 1px; border-radius: 10px; border: 2px solid var(--disabled-ink-2);
  display: flex; align-items: center; justify-content: center;
}
.fx-dot > span { width: 10px; height: 10px; border-radius: 5px; background: transparent; }
.fx-opt[aria-checked="true"] .fx-dot { border-color: var(--ink); }
.fx-opt[aria-checked="true"] .fx-dot > span { background: var(--ink); }
.fx-opt-title { font-size: 16px; font-weight: 700; }
.fx-opt-text { font-size: 13px; line-height: 1.4; color: var(--muted); }
.fx-opt-text strong { color: var(--ink); }
.fx-reason { display: flex; flex-direction: column; gap: 6px; }
.fx-reason-head {
  display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}
.fx-count { font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--subtle); text-transform: none; }
.fx-text {
  resize: none; padding: 12px; border-radius: 12px; background: var(--surface); border: 1.5px solid #6A3A3F;
  color: var(--ink); font: 400 16px/1.4 var(--font-body);
}
.fx-text:focus { border-color: var(--ink); outline: none; }
.fx-hint { font-size: 13px; color: var(--subtle); }
.fx-warn {
  display: flex; gap: 10px; padding: 12px; border-radius: 12px;
  background: rgba(208, 33, 49, 0.14); border: 1px solid rgba(255, 120, 108, 0.35);
  font-size: 13px; line-height: 1.45; color: var(--ink);
}
.fx-warn svg { flex: none; margin-top: 1px; }
.fx-by { font-size: 12px; color: var(--subtle); text-align: center; }
.sheet-foot:has(> .fx-by) { gap: 6px; }
/* Invite a partner: why Send invite is disabled, or that the pair doesn't include you. */
.ft-foot-note { margin: 0 0 8px; font-size: 13px; line-height: 1.4; color: var(--muted); }

/* His own earlier save that went through after all (Record, Fix): said plainly, not as an error. */
.sh-stored { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink); }

/* ---------- FP-DUOS: player picker (pairs.js playerTiles, any page) and Record's notes ---------- */
.pk-tiles { min-width: 0; }
.pk-grid .tile { min-width: 0; }
.pk-grid .tile > span { max-width: 100%; overflow-wrap: anywhere; }
.pk-grid .tile[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pk-more { align-self: flex-start; }
.picked > .stack { min-width: 0; }
/* The same game already recorded (duplicate guard): said plainly, with its own buttons below. */
.sh-already { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.4; color: var(--ink); }
.sh-already svg { flex: none; margin-top: 1px; color: var(--gold); }
.sheet-foot:has(> .sh-already) { gap: 10px; }

/* FP-STALE-CLIENT: this sheet's one current marker (sheetcheck.js lists it). A tab that parsed an
   older copy fetches it again (pairs.js, record.js: ensureStylesheet with this marker): the
   FP-DUOS picker and note above, and before them the .fx-sub/.fx-card overflow fix, .sh-stored
   and the .fx-line long-name sizes (lows-2). */
:root { --sh-duos1: 1; }