/* app.css — MarkIt layout + components. Mobile-first; desktop enhancements in min-width queries.
   Built on the tokens in theme.css. No framework. */

body { background: var(--bg); color: var(--ink); font-family: var(--font); }
.muted { color: var(--ink-soft); }
.icon { display: block; }

/* ---------- Header / shell ---------- */
.app-header {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.brand { display: inline-flex; align-items: center; font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.brand-word b { color: var(--accent); }
.app-nav { display: flex; gap: 2px; }
.app-nav a { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); color: var(--ink-soft); font-weight: 600; font-size: .92rem; transition: background .12s, color .12s; }
.app-nav a:hover { color: var(--ink); background: var(--surface-2); }
.app-nav a.active { color: var(--accent); background: var(--accent-soft); }
.header-tools { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: .5rem .85rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font-weight: 600; font-size: .9rem; line-height: 1; transition: background .12s, border-color .12s, transform .05s; }
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn.primary:hover { background: var(--accent-2); }
.btn.primary.outline { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn.primary.outline:hover { background: var(--accent-soft); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-soft); }
.btn.ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn.danger { background: var(--danger); color: #fff; border-color: transparent; }
.btn.danger-ghost { background: transparent; border-color: transparent; color: var(--danger); }
.btn.danger-ghost:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.btn[disabled], .btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-md); color: var(--ink-soft); border: 1px solid transparent; }
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }

.header-new .header-new-plus { font-size: 1.1rem; line-height: 0; margin-right: 1px; }

/* Install pill — unobtrusive accent pill in the header. Shown ONLY when the browser fires
   'beforeinstallprompt' (see app.js wireInstall); starts hidden and never appears once installed. */
.install-pill { padding: .38rem .68rem; font-size: .82rem; font-weight: 700; border-radius: 99px;
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--accent-soft); }
.install-pill:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.install-pill .icon { width: 15px; height: 15px; }
.install-pill[hidden] { display: none; }

/* ---------- Main / views ---------- */
.app-main { padding: var(--sp-4) var(--sp-3) 5rem; max-width: 70rem; margin: 0 auto; }
.view-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.view-head-titles h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.view-sub { color: var(--ink-soft); font-size: .9rem; margin-top: 2px; }
.view-error { padding: var(--sp-4); color: var(--danger); }
.empty-hint { padding: var(--sp-3); font-size: .88rem; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }

/* ---------- Fields ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: .8rem; font-weight: 700; color: var(--ink-soft); letter-spacing: .01em; }
.field-hint { font-size: .78rem; }
.field-input { width: 100%; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink); }
.field-input:focus { border-color: var(--accent); }
textarea.field-input { resize: vertical; }
.field-input.compact { padding: .38rem .5rem; font-size: .88rem; border-radius: var(--r-sm); }
.field-grid { display: grid; gap: var(--sp-3); }
.field-grid.two { grid-template-columns: 1fr; }
.hero-input { flex: 1; font-size: 1.25rem; font-weight: 700; padding: .3rem .1rem; border: none; border-bottom: 2px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); }
.hero-input:focus { outline: none; border-bottom-color: var(--accent); }

/* Segmented control */
.segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-2); border-radius: var(--r-md); border: 1px solid var(--line); }
.seg-btn { padding: .4rem .7rem; border-radius: var(--r-sm); font-size: .85rem; font-weight: 600; color: var(--ink-soft); }
.seg-btn:hover { color: var(--ink); }
.seg-btn.on { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-1); }

/* ---------- Setup page tab strip (full-width segmented control) ---------- */
.setup-tabs {
  display: flex; gap: 2px; padding: 3px; margin-bottom: var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.setup-tab {
  flex: 1; text-align: center;
  padding: .55rem .7rem;              /* a touch taller than .seg-btn — this is primary nav */
  border-radius: var(--r-sm);
  font-weight: 600; font-size: .92rem;
  color: var(--ink-soft);
  transition: background .12s, color .12s;
}
.setup-tab:hover { color: var(--ink); }
.setup-tab[aria-selected="true"] {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-1);
}
.setup-tab:focus-visible {           /* accessible keyboard ring */
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Checkbox pill + toggle switch */
.check { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; color: var(--ink-soft); }
.check.compact { font-size: .78rem; }
.switch { position: relative; display: inline-flex; align-items: center; }
.switch input { position: absolute; opacity: 0; }
.switch-track { width: 40px; height: 23px; border-radius: 99px; background: var(--surface-3); transition: background .15s; display: inline-block; position: relative; }
.switch-thumb { position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); transition: transform .15s; }
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(17px); }

/* ---------- Master/detail (Games + Teams) ---------- */
.master-detail { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
.master-list { overflow: hidden; }
.master-row { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: var(--sp-3); text-align: left; border-bottom: 1px solid var(--line-soft); }
.master-row:last-child { border-bottom: none; }
.master-row:hover { background: var(--surface-2); }
.master-row.sel { background: var(--accent-soft); }
.master-row-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-md); background: var(--surface-2); color: var(--accent); flex: none; }
.master-row-body { display: flex; flex-direction: column; min-width: 0; }
.master-row-nm { font-weight: 700; }
.master-row-sub { font-size: .8rem; }
.editor-empty { display: grid; place-items: center; gap: var(--sp-3); min-height: 220px; text-align: center; color: var(--ink-faint); border: 1.5px dashed var(--line); border-radius: var(--r-lg); }
.editor-card { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); }
.editor-head { display: flex; align-items: center; gap: var(--sp-3); }
.editor-head-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--surface-2); color: var(--accent); flex: none; }
.editor-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; padding-top: var(--sp-2); border-top: 1px solid var(--line-soft); }

/* Schema editor (Blueprint-style) */
.schema-box { display: flex; flex-direction: column; gap: var(--sp-2); }
.schema-row { display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: var(--r-sm); background: var(--surface-2); }
.schema-row.dragging { opacity: .5; }
.schema-row.drop-into { outline: 2px dashed var(--accent); }
.schema-row .field-input { background: var(--surface); }
.schema-row .field-input:first-of-type { flex: 1 1 40%; }
.drag-grip { display: grid; place-items: center; color: var(--ink-faint); cursor: grab; touch-action: none; }
.row-x { width: 30px; height: 30px; color: var(--ink-faint); }
.row-x:hover { color: var(--danger); }
.add-attr { display: inline-flex; align-items: center; gap: 5px; padding: .45rem .6rem; border-radius: var(--r-sm); color: var(--accent); font-weight: 600; font-size: .88rem; align-self: flex-start; }
.add-attr:hover { background: var(--accent-soft); }

/* ---------- Teams: badge, colors, roster ---------- */
.team-badge { display: inline-grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 800; flex: none; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.color-picker { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.color-chip { position: relative; width: 30px; height: 30px; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.color-chip-x { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 50%; color: var(--ink-soft); }
.color-add { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border: 1.5px dashed var(--line); border-radius: var(--r-sm); color: var(--ink-soft); cursor: pointer; }
.color-native { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.swatch-row { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.swatch { width: 24px; height: 24px; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.swatch:hover { transform: scale(1.1); }
.roster { display: flex; flex-direction: column; gap: 6px; }
.roster-row { display: flex; align-items: center; gap: var(--sp-2); }
.roster-badge { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: .72rem; font-weight: 800; flex: none; }
.roster-nm { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster-num { width: 52px; }
.roster-age { width: 62px; }
.roster-add { margin-top: 4px; }

/* ---------- Combobox (find-or-create) ---------- */
.combo { position: relative; }
.combo-input { width: 100%; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink); }
.combo-input:focus { border-color: var(--accent); }
.combo-menu { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0; max-height: 260px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-2); padding: 4px; }
.combo-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: .5rem .6rem; text-align: left; border-radius: var(--r-sm); color: var(--ink); }
.combo-row.active, .combo-row:hover { background: var(--surface-2); }
.combo-row-nm { font-weight: 600; }
.combo-row-sub { font-size: .78rem; margin-left: auto; }
.combo-create { color: var(--accent); }
.combo-create b { font-weight: 700; }
.combo-empty { padding: .6rem; font-size: .85rem; text-align: center; }

/* ---------- Dashboard ---------- */
.filter-bar { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.filter-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; color: var(--ink-faint); }
.filter-row .field-input { width: auto; min-width: 120px; flex: 1 1 auto; }
.tile-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.stat-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-3); box-shadow: var(--shadow-1); }
.stat-tile-top { display: flex; align-items: center; justify-content: space-between; }
.stat-tile-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.stat-tile-icon { color: var(--accent); }
.stat-tile-value { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-tile-sub { font-size: .78rem; }

.dash-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
.dash-panel { padding: var(--sp-3) var(--sp-4) var(--sp-4); overflow: hidden; }
.panel-h { font-size: .95rem; font-weight: 700; margin-bottom: var(--sp-3); color: var(--ink); }
.panel-body { overflow-x: auto; }

/* Standings table */
.stand-table { display: flex; flex-direction: column; }
.stand-row { display: grid; grid-template-columns: 26px 1.6fr 26px 26px 26px 1.2fr 44px; align-items: center; gap: 4px; padding: 8px 2px; border-bottom: 1px solid var(--line-soft); font-size: .9rem; }
.stand-row:last-child { border-bottom: none; }
.stand-head { font-size: .72rem; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; }
.stand-rank { color: var(--ink-faint); font-weight: 700; text-align: center; }
.stand-name { display: flex; align-items: center; gap: 6px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stand-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.stand-streak { font-size: .78rem; }
.stand-num { text-align: center; font-variant-numeric: tabular-nums; }
.stand-num.wide { display: flex; align-items: center; gap: 6px; justify-content: flex-start; }
.winbar { flex: 1; height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; min-width: 30px; }
.winbar-fill { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.winpct { font-size: .8rem; color: var(--ink-soft); min-width: 34px; text-align: right; }

/* Charts */
.chart { width: 100%; height: auto; overflow: visible; }
.chart-cat { fill: var(--ink-soft); font-size: 11px; font-family: var(--font); }
.chart-val { fill: var(--ink); font-size: 11px; font-weight: 600; font-family: var(--font); }
.chart-bar { transition: opacity .1s; }
.chart-bar:hover { opacity: .82; }
.chart-area { opacity: .12; }
.chart-dot { stroke: var(--surface); stroke-width: 1.5; }
.chart-xlab { fill: var(--ink-faint); font-size: 9px; font-family: var(--font); }
.chart-empty-text { fill: var(--ink-faint); font-size: 12px; font-family: var(--font); }

/* Empty state */
.empty-state { display: grid; place-items: center; gap: var(--sp-3); text-align: center; padding: 3rem var(--sp-4); }
.empty-state-icon { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.empty-state h2 { font-size: 1.2rem; font-weight: 800; }

/* ---------- FAB (mobile New Match) ---------- */
.fab { position: fixed; right: var(--sp-4); bottom: var(--sp-4); width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 1.7rem; line-height: 1; box-shadow: var(--shadow-2); z-index: 25; display: grid; place-items: center; }
.fab:active { transform: translateY(1px); }

/* ---------- Toasts ---------- */
.toast-host { position: fixed; left: 50%; bottom: 5.2rem; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { pointer-events: auto; padding: .6rem 1rem; border-radius: 99px; background: var(--ink); color: var(--bg); font-size: .88rem; font-weight: 600; box-shadow: var(--shadow-2); opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s; max-width: 90vw; }
.toast.in { opacity: 1; transform: translateY(0); }
.toast-success { background: var(--ok); color: #fff; }
.toast-error { background: var(--danger); color: #fff; }

/* ---------- Confirm modal ---------- */
/* STANDING RULE (cross-app): modals are horizontally centered but NOT vertically centered.
   They anchor to a fixed top offset so the box never jumps/re-centers as its content height changes
   while editing; if a modal is taller than the viewport its own body scrolls internally. This is the
   canonical LinkIt fix (#171 top-anchor + #160 internal scroll). Applied to the shared base so every
   modal + sheet inherits it. */
.modal-overlay, .sheet-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(10,14,12,.5); backdrop-filter: blur(2px); display: flex; align-items: flex-start; justify-content: center; }
.modal-overlay { padding: 8vh var(--sp-4) var(--sp-4); }
.modal { width: 100%; max-width: 24rem; max-height: 84dvh; overflow-y: auto; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: var(--sp-4); }
.modal-title { font-size: 1.1rem; font-weight: 800; margin-bottom: 6px; }
.modal-msg { color: var(--ink-soft); font-size: .92rem; margin-bottom: var(--sp-4); }
.modal-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; }
body.modal-open { overflow: hidden; }

/* ---------- New Match sheet ---------- */
.sheet-overlay { align-items: stretch; justify-content: center; }  /* mobile: full-bleed (already top-anchored, full height) */
.sheet { width: 100%; background: var(--surface); display: flex; flex-direction: column; max-height: 100dvh; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); }
.sheet-title { font-size: 1.15rem; font-weight: 800; }
.sheet-body { flex: 1; overflow-y: auto; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); }
.sheet-footer { display: flex; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); background: var(--surface); position: sticky; bottom: 0; }
.sheet-footer .btn { flex: 1; justify-content: center; }
.sheet-footer .btn.ghost { flex: 0 0 auto; }

.nm-top { display: flex; flex-direction: column; gap: var(--sp-3); }
.loc-chosen { display: flex; align-items: center; gap: 6px; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: var(--r-md); color: var(--accent); }
.loc-chosen span { flex: 1; color: var(--ink); font-weight: 600; }
.nm-sides { display: flex; flex-direction: column; gap: var(--sp-3); }
.side-card { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-3); background: var(--surface-2); transition: border-color .12s, box-shadow .12s; }
.side-card.winner { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; background: var(--accent-soft); }
.side-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
.side-label { font-weight: 700; }
.side-head-actions { display: flex; align-items: center; gap: 4px; }
.win-btn { display: inline-flex; align-items: center; gap: 5px; padding: .35rem .6rem; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); font-size: .82rem; font-weight: 700; }
.win-btn.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.side-players { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-2); }
.player-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 99px; font-size: .85rem; font-weight: 600; }
.player-chip-badge { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: .64rem; font-weight: 800; }
.player-chip-x { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: var(--ink-faint); }
.player-chip-x:hover { color: var(--danger); background: var(--surface-2); }
.side-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.side-add { flex: 1; min-width: 140px; }
.team-pick { width: auto; }
.side-points { display: inline-flex; align-items: center; gap: 4px; }
.side-points .field-input { width: 64px; }
.add-side { align-self: flex-start; }
.nm-draw-hint { font-size: .82rem; }
.nm-section-h { font-size: .95rem; font-weight: 700; margin-bottom: var(--sp-2); }
.nm-attrs { display: flex; flex-direction: column; gap: var(--sp-3); }

/* ---------- Buttons: compact variant (used on Players edit rows) ---------- */
.btn.compact { padding: .35rem .6rem; font-size: .82rem; border-radius: var(--r-sm); }

/* ---------- Settings ---------- */
.settings-list { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 40rem; }
.settings-card { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.settings-card-head h2, .settings-link-text h2 { font-size: 1.05rem; font-weight: 700; }
.settings-link-text { min-width: 0; }
.about-rows { display: flex; flex-direction: column; gap: 6px; }
.about-row { display: flex; justify-content: space-between; font-size: .9rem; padding: 4px 0; border-bottom: 1px solid var(--line-soft); }
.about-row:last-child { border-bottom: none; }

/* ---------- Matches list ---------- */
.match-list { display: flex; flex-direction: column; overflow: hidden; }
/* Group-by-game collapsible sections (#201) */
.match-groups { display: flex; flex-direction: column; gap: var(--sp-3); }
.match-group-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 6px; text-align: left; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line); border-radius: 0; }
.match-group-head:hover { color: var(--accent); }
.match-group-caret { color: var(--ink-faint); transition: transform .12s; transform: rotate(90deg); display: inline-flex; }
.match-group-head.collapsed .match-group-caret { transform: rotate(0deg); }
.match-group-title { flex: 1; min-width: 0; }
.match-group-count { color: var(--ink-soft); font-size: .82rem; font-weight: 700; background: var(--surface-2); border-radius: 99px; padding: 1px 9px; }
.match-group .match-list { margin-top: var(--sp-2); }
.match-list[hidden] { display: none; }  /* beat .match-list{display:flex} so collapse actually hides */
.match-row { display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left; padding: var(--sp-3); border-bottom: 1px solid var(--line-soft); }
.match-row:last-child { border-bottom: none; }
.match-row:hover { background: var(--surface-2); }
.match-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.match-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.match-game { font-weight: 700; }
.match-when { font-size: .8rem; flex: none; }
.match-sides { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .92rem; }
.match-side { display: inline-flex; align-items: center; gap: 4px; }
.match-side.won { color: var(--accent); font-weight: 700; }
.match-vs { font-size: .78rem; }
.match-row-meta { display: flex; align-items: center; gap: var(--sp-3); font-size: .8rem; }
.match-score { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-soft); }
.match-loc { display: inline-flex; align-items: center; gap: 3px; }
.match-draw { padding: 1px 7px; border-radius: 99px; background: var(--surface-3); font-size: .72rem; font-weight: 700; }
.match-row-chevron { color: var(--ink-faint); flex: none; }

/* ---------- Match detail ---------- */
.back-btn { align-self: flex-start; margin-bottom: 6px; padding-left: 6px; }
.detail-card { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.detail-result { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.detail-result:empty { display: none; }
.detail-sides { display: flex; flex-direction: column; gap: var(--sp-2); }
.detail-side { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3); background: var(--surface-2); }
.detail-side.won { border-color: var(--accent); background: var(--accent-soft); }
.detail-side-head { display: flex; align-items: center; gap: var(--sp-2); }
.detail-side-name { font-weight: 700; flex: 1; }
.detail-win-badge { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-size: .8rem; font-weight: 700; }
.detail-side-pts { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.1rem; }
.detail-side-players { font-size: .82rem; margin-top: 4px; }
.detail-stat-row { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 6px 0; border-bottom: 1px solid var(--line-soft); font-size: .9rem; }
.detail-stat-row:last-child { border-bottom: none; }
.detail-actions { display: flex; gap: var(--sp-2); }

/* ---------- Players ---------- */
.player-list { display: flex; flex-direction: column; overflow: hidden; }
.player-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-bottom: 1px solid var(--line-soft); }
.player-row:last-child { border-bottom: none; }
.player-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.player-row-nm { font-weight: 700; }
.player-row-sub { font-size: .8rem; }
.player-row.editing { flex-wrap: wrap; }
.player-edit-fields { display: flex; gap: 6px; flex: 1; min-width: 0; flex-wrap: wrap; }
.player-edit-fields .field-input:first-child { flex: 1; min-width: 120px; }
.player-edit-actions { display: flex; gap: 6px; }
.merge-arrow { display: grid; place-items: center; }

/* ---------- Settings: Guide link card ---------- */
.settings-link { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4); text-decoration: none; transition: background .12s, border-color .12s; }
.settings-link:hover { background: var(--surface-2); border-color: var(--accent); }
.settings-link-body { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.settings-link-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent); flex: none; }
.settings-link-chevron { color: var(--ink-faint); flex: none; }
.about-block { display: flex; flex-direction: column; gap: var(--sp-3); }
.about-blurb { font-size: .92rem; color: var(--ink-soft); line-height: 1.6; }
.backup-body { display: flex; flex-direction: column; gap: var(--sp-3); }
.setting-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ---------- In-app Guide (Settings → Guide) ---------- */
.guide { line-height: 1.65; color: var(--ink); min-width: 0; }
.guide h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 10px; }
.guide h2 { font-size: 1.28rem; font-weight: 800; letter-spacing: -.01em; margin: 30px 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--accent); }
.guide h3 { font-size: 1.06rem; font-weight: 700; margin: 22px 0 8px; color: var(--accent); }
.guide h1, .guide h2, .guide h3, .guide h4 { scroll-margin-top: 76px; }
.guide p { margin: 10px 0; }
.guide ul, .guide ol { margin: 10px 0 10px 22px; }
.guide ul { list-style: disc; }
.guide ol { list-style: decimal; }
.guide li { margin: 5px 0; }
.guide li > ul, .guide li > ol { margin: 5px 0 5px 20px; }
.guide strong { font-weight: 700; }
.guide em { font-style: italic; }
.guide code { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 1px 5px; font-size: .9em; font-family: var(--font-num); }
.guide hr { border: none; border-top: 1px solid var(--line); margin: 26px 0; }
.guide a { color: var(--accent); text-decoration: underline; }
.guide a.guide-link { cursor: pointer; }
.guide a.guide-link:hover { filter: brightness(1.1); }
.guide blockquote { margin: 14px 0; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--r-md) var(--r-md) 0; color: var(--ink); }
.guide blockquote p { margin: 0; }
.guide-table-wrap { overflow-x: auto; margin: 14px 0; border: 1px solid var(--line); border-radius: var(--r-lg); }
.guide table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: .92rem; }
.guide th, .guide td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.guide thead th { background: var(--surface-2); font-weight: 700; }
.guide-layout { display: flex; align-items: flex-start; gap: 28px; }
.guide-layout .guide { flex: 1 1 auto; min-width: 0; }
.guide-toc { position: sticky; top: 76px; flex: 0 0 210px; max-height: calc(100dvh - 96px); overflow-y: auto; padding: 4px 0; }
.guide-toc-title { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); margin-bottom: 8px; }
.guide-toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.guide-toc-link { display: block; padding: 6px 8px; border-radius: var(--r-sm); font-size: .85rem; color: var(--ink-soft); cursor: pointer; border-left: 3px solid transparent; }
.guide-toc-link:hover { background: var(--surface-2); color: var(--ink); }
.guide-toc-link.active { color: var(--accent); border-left-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.guide-fab { display: none; position: fixed; right: var(--sp-4); bottom: 5rem; z-index: 24; align-items: center; gap: 5px; padding: .5rem .85rem; border-radius: 99px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: .85rem; box-shadow: var(--shadow-2); }
.guide-fab:hover { filter: brightness(1.08); }
@media (max-width: 900px) {
  .guide-layout { display: block; }
  .guide-toc { display: none; }
  .guide-fab.show { display: inline-flex; }
}

/* ---------- Responsive (desktop) ---------- */
@media (min-width: 640px) {
  .fab { display: none; }
  .field-grid.two { grid-template-columns: 1fr 1fr; }
  .tile-row { grid-template-columns: repeat(4, 1fr); }
  .modal-overlay { }
  /* Desktop: top-anchored card (standing rule) — not vertically centered, so it never re-centers as
     sides/attributes are added; the body scrolls internally. */
  .sheet-overlay { align-items: flex-start; padding: 6vh var(--sp-4) var(--sp-4); }
  .sheet { max-width: 32rem; border-radius: var(--r-lg); max-height: 88dvh; box-shadow: var(--shadow-lg); overflow: hidden; }
}
@media (max-width: 639px) {
  .header-new { display: none; }         /* FAB covers New Match on phones */
  /* Leave room at the bottom for the tab bar + the FAB that sits above it. */
  .app-main { padding: var(--sp-3) var(--sp-2) calc(6.5rem + env(safe-area-inset-bottom)); }
  .view-head { flex-wrap: wrap; }
  /* On phones the header nav is replaced by the bottom tab bar (#197); the header keeps brand + gear + New Match(FAB). */
  .app-header { gap: var(--sp-2); padding: var(--sp-2); }
  .app-nav { display: none; }
  .header-tools { margin-left: auto; }
  /* Lift the New Match FAB above the tab bar so they don't overlap. */
  .fab { bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
}

/* ---------- Mobile bottom tab bar (#197) ---------- */
.mobile-tabbar { display: none; }
@media (max-width: 639px) {
  .mobile-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar-link {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 8px 2px 6px; color: var(--ink-faint); font-weight: 600; min-width: 0;
  }
  .tabbar-link .icon { width: 22px; height: 22px; }
  .tabbar-label { font-size: .66rem; letter-spacing: .01em; }
  .tabbar-link.active { color: var(--accent); }
  .tabbar-link:active { background: var(--surface-2); }
}
@media (min-width: 860px) {
  .master-detail { grid-template-columns: 300px 1fr; align-items: start; }
  .dash-grid { grid-template-columns: 1fr 1fr; }
  .app-nav a { font-size: 1rem; }
}

/* ======================================================================
   Brackets / Tournament mode (Stage 2 — single elimination)
   ====================================================================== */

/* ---- Bracket list (#/brackets) ---- */
.bkt-list { display: flex; flex-direction: column; overflow: hidden; }
.bkt-row { display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left; padding: var(--sp-3); border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.bkt-row:last-child { border-bottom: none; }
.bkt-row:hover { background: var(--surface-2); }
.bkt-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.bkt-row-top { display: flex; align-items: center; gap: var(--sp-2); }
.bkt-row-nm { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bkt-row-sub { font-size: .82rem; }
.bkt-row-progress { display: flex; align-items: center; gap: 8px; font-size: .82rem; flex-wrap: wrap; }
.bkt-row-progress .icon { color: var(--accent); }
.bkt-winbar { flex: 0 1 140px; max-width: 140px; }
.bkt-champ { font-weight: 700; color: var(--accent); }
.bkt-ready-chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: .74rem; }
.bkt-row-del { color: var(--ink-faint); flex: none; }
.bkt-row-del:hover { color: var(--danger); }

/* Status pill */
.bkt-pill { display: inline-flex; align-items: center; gap: 3px; padding: 1px 9px; border-radius: 99px; font-size: .72rem; font-weight: 700; flex: none; }
.bkt-pill.setup { background: var(--surface-3); color: var(--ink-soft); }
.bkt-pill.active { background: var(--accent-soft); color: var(--accent); }
.bkt-pill.complete { background: color-mix(in srgb, var(--ok) 16%, var(--surface)); color: var(--ok); }

/* ---- Tree screen header + champion banner ---- */
.bkt-head-tools { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.bkt-champion { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4); margin-bottom: var(--sp-4); background: var(--accent-soft); border-color: var(--accent); }
.bkt-champion-trophy { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--surface); color: var(--accent); flex: none; }
.bkt-champion-body { display: flex; flex-direction: column; min-width: 0; }
.bkt-champion-label { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.bkt-champion-name { font-size: 1.5rem; font-weight: 800; color: var(--accent); letter-spacing: -.02em; }
.bkt-champion-sub { font-size: .82rem; }

/* ---- The node card (the one new component) ---- */
.bkt-node { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-1); padding: 8px; display: flex; flex-direction: column; gap: 6px; width: 100%; min-width: 190px; }
.bkt-node-head { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }
.bkt-node.bkt-ready { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, var(--shadow-1); }
.bkt-node.bkt-pending { opacity: .9; }
.bkt-node.is-tappable { cursor: pointer; }
.bkt-slot { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: var(--r-sm); background: var(--surface-2); }
.bkt-slot-name { flex: 1; font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bkt-slot.won { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.bkt-slot.won .bkt-slot-name { color: var(--accent); font-weight: 700; }
.bkt-slot.empty .bkt-slot-name { color: var(--ink-faint); font-weight: 500; font-style: italic; }
.bkt-slot-trophy { color: var(--accent); display: inline-flex; flex: none; }
.bkt-slot-score { font-variant-numeric: tabular-nums; font-weight: 800; flex: none; }
.bkt-bye-pill { font-size: .66rem; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: var(--surface-3); color: var(--ink-soft); flex: none; }
.bkt-record { justify-content: center; width: 100%; margin-top: 2px; }
.bkt-edit { align-self: flex-start; padding: .28rem .5rem; font-size: .8rem; }
.bkt-node-wait { font-size: .74rem; }

/* ---- Desktop full tree ---- */
.bkt-tree-wrap { overflow-x: auto; padding-bottom: 10px; }
.bkt-tree { display: flex; align-items: stretch; min-width: min-content; }
.bkt-round { display: flex; flex-direction: column; min-width: 210px; }
.bkt-round:not(:last-child) { padding-right: 22px; }
.bkt-round-head { position: sticky; top: 0; z-index: 2; flex: none; background: var(--bg); text-align: center; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); padding: 2px 0 12px; }
.bkt-round-body { display: flex; flex-direction: column; justify-content: space-around; flex: 1; }
.bkt-cell { display: flex; align-items: center; flex: 1 0 auto; position: relative; padding: 8px 0; }
/* Connectors: pure-CSS elbows drawn into each round's right padding (half = 11px). */
.bkt-round:not(:last-child) .bkt-cell::after { content: ''; position: absolute; left: 100%; width: 11px; box-sizing: border-box; }
.bkt-round:not(:last-child) .bkt-cell:nth-child(odd)::after { top: 50%; bottom: 0; border-right: 2px solid var(--line); border-top: 2px solid var(--line); }
.bkt-round:not(:last-child) .bkt-cell:nth-child(even)::after { top: 0; bottom: 50%; border-right: 2px solid var(--line); border-bottom: 2px solid var(--line); }
.bkt-round:not(:first-child) .bkt-cell::before { content: ''; position: absolute; right: 100%; width: 11px; top: 50%; border-top: 2px solid var(--line); }

/* ---- Double-elim tree: labelled section bands (Winners / Losers / Grand Final) ---- */
.bkt-de { display: flex; flex-direction: column; gap: var(--sp-2); }
.bkt-section { display: flex; flex-direction: column; }
.bkt-section + .bkt-section { border-top: 1px solid var(--line-soft); padding-top: var(--sp-3); margin-top: var(--sp-2); }
.bkt-section-label { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); padding: 0 0 8px; }
/* Flat tree (Losers + Grand Final): spaced columns, no elbow connectors — their topology isn't the
   odd/even halving the CSS elbows assume, so drawing lines there would mislead. */
.bkt-tree-flat .bkt-round-body { justify-content: flex-start; gap: var(--sp-3); }
.bkt-tree-flat .bkt-cell { flex: 0 0 auto; }
.bkt-tree-flat .bkt-cell::before, .bkt-tree-flat .bkt-cell::after { display: none; }
/* Void grand-final reset (GF2 not needed): dormant, dashed, dimmed. */
.bkt-node.bkt-void { opacity: .55; border-style: dashed; box-shadow: none; }

/* ---- Mobile round stepper ---- */
.bkt-rounds { display: flex; flex-direction: column; gap: var(--sp-3); }
.bkt-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 5px 6px; position: sticky; top: 56px; z-index: 5; box-shadow: var(--shadow-1); }
.bkt-pager-label { font-weight: 700; font-size: .92rem; text-align: center; flex: 1; }
.bkt-pager .icon-btn[disabled] { opacity: .35; }
.bkt-ready-banner { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: .88rem; }
.bkt-round-list { display: flex; flex-direction: column; gap: var(--sp-3); }

/* ---- Create sheet: format "coming soon" + seeding preview ---- */
.bkt-parts { margin: 6px 0; }
.bkt-parts:empty { display: none; }
.seg-btn.bkt-soon { opacity: .5; cursor: not-allowed; }
.bkt-soon-tag { font-size: .58rem; font-weight: 800; text-transform: uppercase; margin-left: 5px; padding: 1px 5px; border-radius: 99px; background: var(--surface-3); color: var(--ink-faint); }
.bkt-seed-head { font-size: .85rem; }
.bkt-seed-card { padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: 6px; }
.bkt-seed-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.bkt-seed-row:last-child { border-bottom: none; }
.bkt-seed-name { flex: 1; font-weight: 600; min-width: 0; }
.bkt-seed-name:last-of-type { text-align: right; }
.bkt-seed-vs { font-size: .75rem; flex: none; }
.bkt-reshuffle { align-self: flex-start; }

/* ---- Record sheet: locked game + winner-required hint ---- */
.bkt-locked { display: flex; align-items: center; gap: 6px; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); font-weight: 600; }
.bkt-locked-tag { margin-left: auto; font-size: .72rem; }
.bkt-need-winner { display: flex; align-items: center; gap: 5px; color: var(--warn); font-weight: 600; }

/* ---- Exclude-bracket-info filter toggle (Dashboard + Matches) ---- */
.filter-exclude { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: .82rem; color: var(--ink-soft); font-weight: 600; cursor: pointer; }

/* ---- Custom date range row (Dashboard time filter) ---- */
.custom-date { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--ink-soft); font-weight: 600; }
.custom-range-row .field-input { min-width: 150px; flex: 0 1 auto; }

/* ---- Bracket badge on read-only Matches rows/detail ---- */
.match-bkt-badge { padding: 1px 7px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-size: .72rem; font-weight: 700; }
.detail-bkt-note { display: flex; flex-direction: column; gap: var(--sp-2); }
.detail-bkt-note .muted { font-size: .85rem; }

/* ======================================================================
   Versus (head-to-head) scope — Dashboard
   ====================================================================== */

/* Two-side selector (row 2 when scope = Versus). */
.vs-selector-row { align-items: stretch; }
.versus-selector { flex: 1; display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.vs-selector-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.vs-compare-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
.vs-game-pick { width: auto; min-width: 140px; flex: 0 1 auto; }

.vs-sides { display: flex; flex-direction: column; gap: var(--sp-2); }
.vs-slot { display: flex; flex-direction: column; gap: 6px; padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); min-width: 0; }
.vs-slot-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.vs-pick { min-width: 0; }
.vs-team-pick { width: 100%; }
.vs-chip { align-self: flex-start; }
.vs-divider { align-self: center; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; padding: 2px 0; }

/* Desktop: the two slots sit side by side with the vs pill between them. */
@media (min-width: 640px) {
  .vs-sides { flex-direction: row; align-items: stretch; gap: var(--sp-3); }
  .vs-slot { flex: 1; }
}

/* Multi-fill split bar — a .winbar variant holding up to three explicit-width colored segments. The
   container keeps overflow:hidden + rounded ends; segments are square so they butt cleanly together. */
.vs-splitbar { display: flex; }
.vs-splitbar .winbar-fill { border-radius: 0; flex: none; }
.vs-splitbar-lg { height: 12px; }

/* Head-to-head header card. */
.vs-h2h { display: flex; flex-direction: column; gap: var(--sp-2); }
.vs-h2h-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 1.1rem; font-weight: 800; }
.vs-h2h-title .vs-vs { flex: none; font-size: .85rem; font-weight: 600; }
.vs-name-a, .vs-name-b { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-name-a { text-align: left; }
.vs-name-b { text-align: right; }
.vs-record { font-size: .85rem; }
/* Ignored counter — subtle secondary caption under the record (matches / no winner between the two). */
.vs-ignored { font-size: .75rem; margin-top: -2px; }
.vs-pct-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; }
.vs-pct { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.vs-split-legend { display: flex; justify-content: space-between; font-size: .75rem; }

/* By-game-type breakdown rows (reuse .stand-table / .stand-row, override the column grid). */
.vs-type-row { grid-template-columns: 1.4fr 54px 84px minmax(60px, 1fr); }
.vs-type-head { font-size: .72rem; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; }
.vs-type-nm { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-type-ct { text-align: center; font-variant-numeric: tabular-nums; }
.vs-type-rec { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-variant-numeric: tabular-nums; font-size: .85rem; }
/* Per-row ignored count — tiny muted sub-line beneath the record, only shown when > 0. */
.vs-type-ign { font-size: .68rem; line-height: 1.1; }
.vs-type-split { text-align: right; }

@media (max-width: 639px) {
  .vs-type-row { grid-template-columns: 1.4fr 32px 64px 44px; gap: 6px; }
  .vs-h2h-title { font-size: 1rem; }
  .vs-pct { font-size: 1.3rem; }
}

/* ======================================================================
   Player + Game deep-dive scopes — Dashboard
   Reuses .filter-row / .player-chip / .stand-table / .winbar / .vs-splitbar /
   .empty-state / .tile-row. Only the pieces below are genuinely new (Maya §2c).
   ====================================================================== */

/* 5-button scope control: on very narrow phones let it scroll rather than shrink text (Maya §9). */
.dash-scope-seg { max-width: 100%; overflow-x: auto; }

/* Single-entity selector row (swaps in for Player/Game scope). */
.pd-selector-row { align-items: center; }
.pd-sel-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pd-pick { min-width: 180px; flex: 1 1 auto; }
.pd-chip { align-self: center; }
.pd-game-pick { width: auto; min-width: 160px; flex: 1 1 auto; }

/* Profile header (the "this is ONE entity" signal). */
.pd-profile-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.pd-avatar { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 1rem; font-weight: 800; flex: none; }
.pd-avatar.pd-avatar-icon { background: var(--accent-soft); color: var(--accent); }
.pd-profile-titles { min-width: 0; }
.pd-profile-name { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-profile-num { font-weight: 600; }
.pd-profile-sub { margin-top: 2px; }

/* Table column overrides (all reuse .stand-row grid, like .vs-type-row). */
.pd-game-row { grid-template-columns: 1.6fr 60px 92px minmax(70px, 1.2fr); }
.pd-lb-row { grid-template-columns: 26px 1.5fr 26px 26px 26px minmax(70px, 1.1fr); }
.pd-rival-row { grid-template-columns: 1.5fr 52px 84px minmax(60px, 1fr); }
.pd-recent-row { grid-template-columns: 54px 1.5fr minmax(60px, 1fr); }
.pd-stat-row { grid-template-columns: 1.3fr 1fr; }

/* Form card. */
.pd-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.pd-form-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .9rem; }
.pd-streak-pill { display: inline-grid; place-items: center; min-width: 34px; padding: 2px 9px; border-radius: 99px; font-size: .8rem; font-weight: 800; }
.pd-streak-pill.pd-w { background: var(--accent-soft); color: var(--accent); }
.pd-streak-pill.pd-l { background: var(--surface-3); color: var(--ink-soft); }
.pd-streak-pill.pd-tie { background: var(--surface-2); color: var(--ink-soft); }
.pd-bw-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font-size: .88rem; }
.pd-bw-best { color: var(--accent); font-weight: 700; }

/* Template-stat value cell (right-aligned headline + muted sub). */
.pd-stat-val { display: flex; flex-direction: column; align-items: flex-end; text-align: right; min-width: 0; }
.pd-stat-val b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pd-stat-sub { font-size: .72rem; }

/* Recent-match row cells. */
.pd-recent-date { color: var(--ink-faint); font-size: .8rem; }
.pd-recent-match { display: flex; flex-direction: column; min-width: 0; }
.pd-recent-match > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-recent-res { text-align: right; font-size: .85rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Quiet inline empty (rivals / template stats) — NOT the big centered empty-state. */
.pd-inline-empty { display: flex; align-items: center; gap: 8px; padding: 10px 2px; font-size: .85rem; color: var(--ink-faint); }

@media (max-width: 639px) {
  .pd-game-row { grid-template-columns: 1.4fr 44px 78px 64px; gap: 6px; }
  .pd-lb-row { grid-template-columns: 22px 1.4fr 22px 22px 22px 60px; gap: 4px; }
  .pd-rival-row { grid-template-columns: 1.4fr 42px 70px 52px; gap: 6px; }
  .pd-recent-row { grid-template-columns: 48px 1.4fr 1fr; gap: 6px; }
  .pd-profile-name { font-size: 1.15rem; }
}