/* 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; }
.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); }
.ft-pname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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); }

/* ---------- Fix a result (6) ---------- */
.fx-card { display: flex; flex-direction: column; gap: 6px; 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; }
.fx-line { font-size: 17px; line-height: 1.3; }
.fx-verb { color: var(--subtle); }
.fx-sub { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.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; }