/* ========================================================================== */
/* KICKBALL — iteration 02 — ump-first stylesheet                              */
/* Look: GameChanger (dark navy, bright green accent, high contrast, phone-    */
/* native). Skeleton: ClickBall (buttons under the thumb, count as dots).      */
/* `--group_name` tokens, flat blocks, .is-* states, banners in DOM order.     */
/* ========================================================================== */

/* ========================================================================== */
/* TOKENS                                                                     */
/* ========================================================================== */
:root {
	color-scheme: dark;

	--color_bg:#0b1220;             /* navy, not black — reads as "pro", not "off" */
	--color_bg-raised:#121b2e;
	--color_bg-sunken:#070c16;
	--color_line:#24304a;
	--color_line-strong:#34426a;
	--color_text:#f2f5fa;
	--color_text-muted:#9aa7c2;     /* 7.4:1 on bg */
	--color_text-dim:#7e8bad;       /* 5.4:1 on bg — labels only */
	--color_accent:#3dff8f;         /* GameChanger-ish green */
	--color_accent-text:#06220f;
	--color_accent-soft:color-mix(in srgb, var(--color_accent), transparent 85%);
	--color_warn:#ffb347;
	--color_danger:#ff5d5d;
	--color_info:#5aa9ff;
	--color_white:#fff;

	/* dots — one hue per count type, plus outs */
	--dot_ball:var(--color_info);
	--dot_strike:var(--color_warn);
	--dot_foul:#c98bff;
	--dot_out:var(--color_danger);

	--font_name-primary:'Inter', system-ui, sans-serif;
	--font_name-numeric:'Inter', system-ui, sans-serif; /* tabular figures below */
	--font_size-xs:0.75rem;
	--font_size-sm:0.875rem;
	--font_size-md:1rem;
	--font_size-lg:1.25rem;
	--font_size-xl:1.75rem;
	--font_size-score:clamp(3.5rem, 18vw, 6rem);   /* readable at arm's length */

	--space_xs:4px;
	--space_sm:8px;
	--space_md:12px;
	--space_lg:20px;
	--space_xl:32px;
	--gutter:16px;

	--radius_sm:8px;
	--radius_md:14px;
	--radius_pill:999px;
	--key_height:64px;              /* thumb target */
	--motion_fast:120ms;
}

/* ========================================================================== */
/* BASE                                                                       */
/* ========================================================================== */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
	margin:0; min-height:100svh;
	background:var(--color_bg); color:var(--color_text);
	font:var(--font_size-md)/1.4 var(--font_name-primary);
	font-variant-numeric:tabular-nums;
	-webkit-font-smoothing:antialiased;
	overscroll-behavior:none;
}
h1, h2, h3 { margin:0; font-weight:700; line-height:1.15; }
p { margin:0; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button:disabled { opacity:.35; cursor:default; }
input, select { font:inherit; }
:focus-visible { outline:3px solid var(--color_accent); outline-offset:2px; }
[hidden] { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ========================================================================== */
/* SHARED                                                                     */
/* ========================================================================== */
.key {
	display:inline-flex; align-items:center; justify-content:center;
	min-height:var(--key_height); padding:var(--space_sm) var(--space_md);
	border-radius:var(--radius_md); background:var(--color_bg-raised); border:1px solid var(--color_line-strong);
	font-weight:700; font-size:var(--font_size-lg); text-align:center; line-height:1.1;
	transition:transform var(--motion_fast), background var(--motion_fast);
	user-select:none;
}
.key:active:not(:disabled) { transform:scale(.97); background:var(--color_line); }
.key.is-primary { background:var(--color_accent); color:var(--color_accent-text); border-color:var(--color_accent); }
.key.is-primary:active:not(:disabled) { background:color-mix(in srgb, var(--color_accent), #000 12%); }
.key.is-commit { background:var(--color_accent); color:var(--color_accent-text); border-color:var(--color_accent); grid-column:1 / -1; }
.key.is-ghost { background:transparent; border-color:var(--color_line); color:var(--color_text-muted); font-size:var(--font_size-sm); min-height:48px; }
.key.is-undo { background:var(--color_bg-sunken); border-color:var(--color_line-strong); color:var(--color_warn); font-size:var(--font_size-sm); min-height:48px; }
.key.is-fix { min-height:48px; min-width:56px; font-size:var(--font_size-xl); }

.toast {
	position:fixed; left:50%; bottom:calc(var(--space_xl) + env(safe-area-inset-bottom)); transform:translate(-50%, 16px);
	padding:var(--space_sm) var(--space_lg); background:var(--color_text); color:var(--color_bg);
	border-radius:var(--radius_pill); font-weight:700; opacity:0; pointer-events:none; z-index:50;
	transition:opacity var(--motion_fast), transform var(--motion_fast);
}
.toast.is-open { opacity:1; transform:translate(-50%, 0); }

.field { display:grid; gap:var(--space_xs); }
.field label { font-size:var(--font_size-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--color_text-muted); }
.field input, .field select { min-height:52px; padding:var(--space_sm) var(--space_md); border-radius:var(--radius_sm); background:var(--color_bg-raised); color:var(--color_text); border:1px solid var(--color_line-strong); }

/* ========================================================================== */
/* VIEWS                                                                      */
/* ========================================================================== */
.view:not(.is-current) { display:none; }

/* ========================================================================== */
/* HOME : what do I want to do?                                                */
/* ========================================================================== */
.home { display:grid; gap:var(--space_lg); padding:var(--space_xl) var(--gutter) calc(var(--space_xl) + env(safe-area-inset-bottom)); max-width:32rem; margin:0 auto; }
.home .brand { display:flex; align-items:center; gap:var(--space_sm); color:var(--color_text-muted); font-size:var(--font_size-sm); text-transform:uppercase; letter-spacing:.12em; }
.home .brand-dot { width:10px; height:10px; border-radius:50%; background:var(--color_accent); }
.home h1 { font-size:var(--font_size-xl); }
.continue-card { display:grid; gap:var(--space_xs); padding:var(--space_lg); border-radius:var(--radius_md); background:var(--color_bg-raised); border:1px solid var(--color_accent); text-align:left; }
.continue-card .card-eyebrow { color:var(--color_accent); font-size:var(--font_size-xs); text-transform:uppercase; letter-spacing:.1em; font-weight:700; }
.continue-card .card-teams { font-size:var(--font_size-lg); font-weight:700; }
.continue-card .card-status { color:var(--color_text-muted); }
.new-game { display:grid; gap:var(--space_md); padding:var(--space_lg); border-radius:var(--radius_md); background:var(--color_bg-raised); border:1px solid var(--color_line); }
.new-game h2 { font-size:var(--font_size-lg); }
.home .home-note { color:var(--color_text-dim); font-size:var(--font_size-sm); }

/* ========================================================================== */
/* UMP : the card, digital                                                    */
/* Layout: strip · state · bases · linescore (collapsed) · pad (sticky bottom) */
/* ========================================================================== */
.ump { display:flex; flex-direction:column; gap:var(--space_md); padding:var(--space_md) var(--gutter) calc(var(--space_md) + env(safe-area-inset-bottom)); max-width:32rem; margin:0 auto; min-height:100svh; }
.ump .pad { margin-top:auto; }   /* the buttons sit at the bottom, under the thumb; content above stays compact */

/* ===== SCORE STRIP ===== */
.score-strip { display:grid; grid-template-columns:1fr 1fr; gap:var(--space_sm); }
.side { display:grid; justify-items:center; gap:2px; padding:var(--space_md) var(--space_sm); border-radius:var(--radius_md); background:var(--color_bg-raised); border:1px solid var(--color_line); text-align:center; }
.side.is-batting { border-color:var(--color_accent); background:var(--color_accent-soft); }
.side-name { font-size:var(--font_size-sm); font-weight:700; color:var(--color_text-muted); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side.is-batting .side-name { color:var(--color_text); }
.side-score { font-size:var(--font_size-score); font-weight:800; line-height:1; letter-spacing:-.02em; }
.side-tag { min-height:1.2em; font-size:var(--font_size-xs); text-transform:uppercase; letter-spacing:.1em; color:var(--color_accent); font-weight:700; }

/* ===== FIX ROW ===== */
.fix-row { display:flex; align-items:center; gap:var(--space_sm); padding:var(--space_sm) var(--space_md); border-radius:var(--radius_md); background:var(--color_bg-sunken); border:1px dashed var(--color_line-strong); }
.fix-label { flex:1; font-size:var(--font_size-sm); color:var(--color_text-muted); }
.fix-value { font-size:var(--font_size-xl); min-width:2ch; text-align:center; }

/* ===== STATE ===== */
.state { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:var(--space_sm); }
.state-item { display:grid; justify-items:center; gap:var(--space_xs); padding:var(--space_sm); border-radius:var(--radius_sm); background:var(--color_bg-raised); border:1px solid var(--color_line); text-align:center; }
.state-label { font-size:var(--font_size-xs); text-transform:uppercase; letter-spacing:.1em; color:var(--color_text-dim); font-weight:700; }
.state-value { font-size:var(--font_size-xl); line-height:1; }
.dots { display:inline-flex; gap:5px; align-items:center; min-height:1.75rem; }
.dots i { width:14px; height:14px; border-radius:50%; background:var(--color_line-strong); }
.dots.is-ball i.is-on { background:var(--dot_ball); }
.dots.is-strike i.is-on { background:var(--dot_strike); }
.dots.is-foul i.is-on { background:var(--dot_foul); }
.dots.is-out i.is-on { background:var(--dot_out); }

/* ===== BASES ===== */
.bases { display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-areas:"third second first"; gap:var(--space_sm); }
.base { display:grid; gap:var(--space_xs); justify-items:center; padding:var(--space_sm); border-radius:var(--radius_sm); border:1px solid var(--color_line); background:var(--color_bg-sunken); min-height:56px; }
.base.is-on { background:var(--color_accent-soft); border-color:var(--color_accent); }
.base-1 { grid-area:first; } .base-2 { grid-area:second; } .base-3 { grid-area:third; }
.base-name { font-size:var(--font_size-xs); color:var(--color_text-dim); font-weight:700; letter-spacing:.1em; }
.base.is-on .base-name { color:var(--color_accent); }
.base-actions { display:flex; gap:4px; }
.base-actions button { min-height:32px; min-width:44px; padding:0 var(--space_sm); border-radius:var(--radius_pill); background:var(--color_bg-raised); border:1px solid var(--color_line-strong); font-size:var(--font_size-xs); font-weight:700; }

.final-banner { width:100%; min-height:44px; padding:var(--space_sm) var(--space_md); border:0; border-radius:var(--radius_sm); background:var(--color_accent); color:var(--color_accent-text); font:inherit; font-weight:800; text-align:center; cursor:pointer; }

/* ===== LINE SCORE ===== */
.linescore { border-radius:var(--radius_sm); border:1px solid var(--color_line); background:var(--color_bg-raised); overflow:hidden; }
.linescore summary { padding:var(--space_sm) var(--space_md); font-size:var(--font_size-sm); color:var(--color_text-muted); cursor:pointer; list-style:none; display:flex; justify-content:space-between; }
.linescore summary::-webkit-details-marker { display:none; }
.linescore summary::after { content:'+'; }
.linescore[open] summary::after { content:'−'; }
.linescore table { width:100%; border-collapse:collapse; font-size:var(--font_size-sm); }
.linescore th, .linescore td { padding:6px 4px; text-align:center; border-top:1px solid var(--color_line); }
.linescore th { color:var(--color_text-dim); font-weight:700; font-size:var(--font_size-xs); }
.linescore tbody th { text-align:left; color:var(--color_text); max-width:7ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-left:var(--space_md); }
.linescore td.is-current { background:var(--color_accent-soft); color:var(--color_accent); font-weight:800; }
.linescore td.total { font-weight:800; color:var(--color_text); border-left:1px solid var(--color_line-strong); }

/* ===== PAD ===== */
.pad { display:grid; grid-template-columns:1fr 1fr; gap:var(--space_sm); }
.pad .key.is-out { color:var(--dot_out); border-color:color-mix(in srgb, var(--dot_out), transparent 50%); }
.pad .key.is-ball { color:var(--dot_ball); }
.pad .key.is-strike { color:var(--dot_strike); }
.pad .key.is-foul { color:var(--dot_foul); }
.pad-bar { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:var(--space_sm); }
.pad-bar .key { padding-inline:var(--space_xs); font-size:var(--font_size-xs); }
.pad-commit { grid-template-columns:1fr; }

/* ===== LOG ===== */
.log { margin:0; padding:0; list-style:none; display:grid; gap:2px; font-size:var(--font_size-sm); }
.log li { display:flex; justify-content:space-between; gap:var(--space_md); padding:var(--space_sm) var(--space_md); background:var(--color_bg-raised); border-radius:var(--radius_sm); }
.log-after { color:var(--color_text-muted); }

/* ===== ROUNDS (cornhole) ===== */
.round { display:grid; gap:var(--space_sm); }
.round-side { display:grid; gap:var(--space_sm); padding:var(--space_md); border-radius:var(--radius_md); background:var(--color_bg-raised); border:1px solid var(--color_line); }
.round-name { display:flex; justify-content:space-between; align-items:baseline; font-size:var(--font_size-md); }
.round-pts { font-size:var(--font_size-sm); color:var(--color_accent); font-weight:700; }
.counter { display:grid; grid-template-columns:1fr auto auto auto; align-items:center; gap:var(--space_sm); }
.counter span { color:var(--color_text-muted); font-size:var(--font_size-sm); }
.counter strong { font-size:var(--font_size-xl); min-width:2ch; text-align:center; }
.counter button { min-height:52px; min-width:56px; border-radius:var(--radius_sm); background:var(--color_bg-sunken); border:1px solid var(--color_line-strong); font-size:var(--font_size-xl); font-weight:700; }
.round-net { text-align:center; color:var(--color_text-muted); font-size:var(--font_size-sm); }

/* wider screens: keep it a phone-sized column, centered */
@media (min-width: 700px) { .ump, .home { max-width:36rem; } }

/* ========================================================================== */
/* HOME additions : team pickers, links, recent games                         */
/* ========================================================================== */
.field-pair { display:grid; gap:var(--space_md); }
.field-pair .field input { min-height:44px; font-size:var(--font_size-sm); }
.home-links { display:grid; }
.recent-panel h2 { font-size:var(--font_size-sm); text-transform:uppercase; letter-spacing:.1em; color:var(--color_text-muted); margin-bottom:var(--space_sm); }
.recent { margin:0; padding:0; list-style:none; display:grid; gap:var(--space_xs); }
.recent li { display:flex; justify-content:space-between; gap:var(--space_md); padding:var(--space_sm) var(--space_md); background:var(--color_bg-raised); border-radius:var(--radius_sm); font-size:var(--font_size-sm); }
.recent li:has(.recent-row) { padding:0; }
.recent-row { display:flex; justify-content:space-between; gap:var(--space_md); width:100%; min-height:44px; padding:var(--space_sm) var(--space_md); border:0; border-radius:inherit; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.recent .recent-date, .recent .is-empty { color:var(--color_text-muted); }
.home-links { gap:var(--space_sm); }

/* ===== SUMMARY : one game, read-only ===== */
.final-card { display:grid; grid-template-columns:1fr 1fr; gap:var(--space_sm); }
.final-side { display:grid; gap:var(--space_xs); padding:var(--space_md); border-radius:var(--radius_md); background:var(--color_bg-raised); border:1px solid var(--color_line); text-align:center; min-width:0; }
.final-side.is-winner { border-color:var(--color_accent); }
.final-name { font-size:var(--font_size-sm); font-weight:700; color:var(--color_text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.final-score { font-size:var(--font_size-score); font-weight:800; line-height:1; }
.final-side.is-winner .final-score { color:var(--color_accent); }
.summary-meta { color:var(--color_text-muted); font-size:var(--font_size-sm); }
.linescore .log { padding:var(--space_sm); }

/* ========================================================================== */
/* PAGE : inner screens (captain, teams, team, stats) share a frame           */
/* ========================================================================== */
.page { display:grid; gap:var(--space_md); align-content:start; padding:var(--space_md) var(--gutter) calc(var(--space_xl) + env(safe-area-inset-bottom)); max-width:32rem; margin:0 auto; min-height:100svh; }
.page-head { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--space_md); }
.page-head h1 { font-size:var(--font_size-xl); }
.page-head .back { min-width:48px; padding:0; font-size:var(--font_size-lg); }
.eyebrow { font-size:var(--font_size-xs); text-transform:uppercase; letter-spacing:.1em; color:var(--color_text-muted); font-weight:700; }
.hint { color:var(--color_text-muted); font-size:var(--font_size-sm); }
.empty { color:var(--color_text-muted); padding:var(--space_lg); text-align:center; }
.warn { padding:var(--space_sm) var(--space_md); border-radius:var(--radius_sm); background:color-mix(in srgb, var(--color_warn), transparent 85%); color:var(--color_warn); font-weight:700; font-size:var(--font_size-sm); }

.tabs { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:var(--space_xs); padding:4px; border-radius:var(--radius_md); background:var(--color_bg-sunken); border:1px solid var(--color_line); }
.tabs button { min-height:44px; border-radius:var(--radius_sm); font-size:var(--font_size-sm); font-weight:700; color:var(--color_text-muted); }
.tabs button.is-on { background:var(--color_bg-raised); color:var(--color_text); border:1px solid var(--color_line-strong); }

.seg { display:inline-flex; padding:3px; border-radius:var(--radius_pill); background:var(--color_bg-sunken); border:1px solid var(--color_line); }
.seg button, .seg label { min-height:36px; min-width:44px; padding:0 var(--space_md); border-radius:var(--radius_pill); font-size:var(--font_size-sm); font-weight:700; color:var(--color_text-muted); display:inline-flex; align-items:center; justify-content:center; gap:4px; cursor:pointer; }
.seg button.is-on, .seg.is-radio label:has(input:checked) { background:var(--color_bg-raised); color:var(--color_text); }
.seg.is-radio input { accent-color:var(--color_accent); }

.pad-bar.is-2 { grid-template-columns:1fr 1fr; margin-top:var(--space_sm); }
.pad-bar.is-2 .key { min-height:var(--key_height); font-size:var(--font_size-md); }
.pad-bar.is-2 .key:only-child { grid-column:1 / -1; }

/* ========================================================================== */
/* AT BAT : who's up (ump screen, when a lineup exists)                       */
/* ========================================================================== */
.atbat { display:grid; grid-template-columns:auto 1fr; gap:2px var(--space_md); align-items:baseline; padding:var(--space_sm) var(--space_md); border-radius:var(--radius_sm); background:var(--color_bg-raised); border:1px solid var(--color_line); }
.atbat-label { font-size:var(--font_size-xs); text-transform:uppercase; letter-spacing:.1em; color:var(--color_accent); font-weight:700; }
.atbat-name { font-size:var(--font_size-lg); }
.atbat-next { grid-column:2; font-size:var(--font_size-sm); color:var(--color_text-muted); }
.atbat-warn { grid-column:1 / -1; font-size:var(--font_size-xs); color:var(--color_warn); font-weight:700; }

/* ========================================================================== */
/* ROSTER / ATTENDANCE : chips                                                */
/* ========================================================================== */
.roster-list { margin:0; padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:var(--space_sm); }
.roster-list.is-edit { grid-template-columns:1fr; }
.chip { display:flex; align-items:center; justify-content:space-between; gap:var(--space_sm); width:100%; min-height:52px; padding:var(--space_sm) var(--space_md); border-radius:var(--radius_md); background:var(--color_bg-raised); border:1px solid var(--color_line); color:var(--color_text-muted); text-align:left; font-weight:700; }
.chip.is-on { background:var(--color_accent-soft); border-color:var(--color_accent); color:var(--color_text); }
.chip-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chip-tag { flex:none; display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; font-size:var(--font_size-xs); font-weight:800; }
.chip-tag.is-female { background:#8b5cf6; color:#fff; }
.chip-tag.is-male { background:#2f80ed; color:#fff; }
.roster-row { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:var(--space_sm); padding:var(--space_xs) var(--space_xs) var(--space_xs) var(--space_md); border-radius:var(--radius_md); background:var(--color_bg-raised); border:1px solid var(--color_line); }
.roster-name { font-weight:700; }
.roster-remove { min-width:44px; min-height:44px; border-radius:var(--radius_sm); color:var(--color_text-muted); font-size:var(--font_size-lg); }
.is-empty { color:var(--color_text-muted); grid-column:1 / -1; }

/* ========================================================================== */
/* LINEUP : ordered rows with move buttons; warnings inline on the rows       */
/* ========================================================================== */
.lineup-list { margin:0; padding:0; list-style:none; display:grid; gap:var(--space_xs); }
.lineup-row { display:grid; grid-template-columns:2ch 1fr auto auto; align-items:center; gap:var(--space_sm); padding:var(--space_xs) var(--space_xs) var(--space_xs) var(--space_md); border-radius:var(--radius_md); background:var(--color_bg-raised); border:1px solid var(--color_line); }
.lineup-row.is-warn { border-color:var(--color_warn); }
.lineup-row.is-up { border-color:var(--color_accent); background:var(--color_accent-soft); }
.lineup-n { color:var(--color_text-dim); font-weight:800; text-align:right; }
.lineup-name { font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lineup-name em { font-style:normal; color:var(--color_accent); font-size:var(--font_size-xs); text-transform:uppercase; letter-spacing:.1em; margin-left:var(--space_xs); }
.lineup-move { display:inline-flex; gap:2px; }
.lineup-move button { min-width:44px; min-height:44px; border-radius:var(--radius_sm); background:var(--color_bg-sunken); border:1px solid var(--color_line-strong); font-weight:700; }

/* ========================================================================== */
/* POSITIONS                                                                  */
/* ========================================================================== */
.positions { margin:0; padding:0; list-style:none; display:grid; gap:var(--space_xs); }
.position-row { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.4fr); align-items:center; gap:var(--space_sm); }
.position-row label { font-size:var(--font_size-sm); font-weight:700; color:var(--color_text-muted); }
.position-row select { min-height:48px; padding:0 var(--space_md); border-radius:var(--radius_sm); background:var(--color_bg-raised); color:var(--color_text); border:1px solid var(--color_line-strong); }

/* ========================================================================== */
/* TEAMS                                                                      */
/* ========================================================================== */
.team-list { margin:0; padding:0; list-style:none; display:grid; gap:var(--space_sm); }
.team-card { display:grid; gap:2px; width:100%; padding:var(--space_md) var(--space_lg); border-radius:var(--radius_md); background:var(--color_bg-raised); border:1px solid var(--color_line); text-align:left; }
.team-card strong { font-size:var(--font_size-lg); }
.team-card span { color:var(--color_text-muted); font-size:var(--font_size-sm); }
.linescore.is-open { padding-top:var(--space_xs); }
.linescore.box tbody th { max-width:12ch; }

/* ========================================================================== */
/* RULES UI : clock, cap, mode line, shared slots, courtesy runner            */
/* ========================================================================== */
.state-item.is-off { opacity:.45; }
.state-item.is-late .state-value { color:var(--color_warn); }
.state-item.is-over .state-value { color:var(--color_danger); }
.mode-line { text-align:center; font-size:var(--font_size-xs); text-transform:uppercase; letter-spacing:.1em; color:var(--color_text-dim); font-weight:700; min-height:1em; }
.hint.is-accent { color:var(--color_accent); }
.lineup-row.is-picking { border-color:var(--color_accent); box-shadow:0 0 0 2px var(--color_accent-soft); }
.lineup-row.is-shared .lineup-name { font-size:var(--font_size-sm); }
.lineup-slash { font-style:normal; color:var(--color_text-dim); padding:0 2px; }
.lineup-tags { display:inline-flex; gap:2px; }
.lineup-move button.is-on { background:var(--color_accent); color:var(--color_accent-text); border-color:var(--color_accent); }
.position-row label small { color:var(--color_text-dim); font-weight:700; margin-left:4px; }
.position-row label em { display:block; font-style:normal; font-weight:400; font-size:var(--font_size-xs); color:var(--color_text-dim); }
.base-actions button[data-what="courtesy"] { color:var(--color_info); }
@media (max-width:380px) { .state { grid-auto-columns:minmax(0,1fr); } .state-item { padding:var(--space_xs); } }

/* ========================================================================== */
/* ME BAR : who this phone is acting as. Static, slim, on every screen.       */
/* ========================================================================== */
.me-bar { display:flex; align-items:center; justify-content:space-between; gap:var(--space_sm); min-height:36px; padding:var(--space_xs) var(--gutter); background:var(--color_bg-sunken); border-bottom:1px solid var(--color_line); font-size:var(--font_size-xs); }
.me-pill { display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:0 var(--space_md) 0 var(--space_sm); border-radius:var(--radius_pill); background:var(--color_bg-raised); border:1px solid var(--color_line-strong); font-weight:700; color:var(--color_text); }
.me-dot { width:8px; height:8px; border-radius:50%; background:var(--color_text-dim); }
.me-dot.is-league { background:var(--color_warn); } .me-dot.is-ump { background:var(--color_accent); } .me-dot.is-captain { background:var(--color_info); } .me-dot.is-lead { background:#c98bff; } .me-dot.is-player { background:var(--color_text-muted); }
.me-league { color:var(--color_text-dim); font-weight:700; text-transform:uppercase; letter-spacing:.08em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.me-league.is-pick select { min-height:28px; max-width:14rem; padding:0 var(--space_sm); border-radius:var(--radius_pill); background:var(--color_bg-raised); color:var(--color_text-muted); border:1px solid var(--color_line-strong); font-size:var(--font_size-xs); font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.tabs.is-filter button small { color:var(--color_text-dim); font-size:10px; margin-left:2px; }
.sched-when b { color:var(--color_info); }

/* ========================================================================== */
/* WHOAMI : the role switcher on Home                                         */
/* ========================================================================== */
.whoami { display:grid; gap:var(--space_md); padding:var(--space_lg); border-radius:var(--radius_md); background:var(--color_bg-raised); border:1px solid var(--color_line); }
.seg.is-roles { display:grid; grid-template-columns:repeat(5, 1fr); padding:3px; border-radius:var(--radius_md); }
.seg.is-roles button { min-width:0; min-height:44px; padding:0 2px; border-radius:var(--radius_sm); font-size:var(--font_size-xs); font-weight:800; color:var(--color_text-muted); }
.seg.is-roles button.is-on { background:var(--color_accent); color:var(--color_accent-text); }
.switch-head { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space_md); }
.switch-head h2 { font-size:var(--font_size-xl); line-height:1.1; }
.switch-head .hint { margin-top:var(--space_xs); }
.whoami-ctx .field { display:grid; gap:var(--space_xs); }
.whoami-ctx .field label { font-size:var(--font_size-xs); text-transform:uppercase; letter-spacing:.1em; color:var(--color_text-dim); font-weight:700; }
.whoami-ctx .field.is-wide { grid-column:1 / -1; }
.whoami-ctx .field select { width:100%; }
.whoami-blurb { padding:var(--space_sm) var(--space_md); border-radius:var(--radius_sm); background:var(--color_bg-sunken); color:var(--color_text-muted); }
.whoami-ctx { grid-template-columns:1fr 1fr; }
.whoami-ctx .field select { min-height:44px; font-size:var(--font_size-sm); }

/* ========================================================================== */
/* ROLE HOME : cards per role — schedule rows, availability, standings       */
/* ========================================================================== */
.role-home { display:grid; gap:var(--space_lg); }
.role-home:empty { display:none; }
.role-card { display:grid; gap:var(--space_sm); padding:var(--space_md); border-radius:var(--radius_md); background:var(--color_bg-raised); border:1px solid var(--color_line); }
.role-card.is-live { border-color:var(--color_accent); }
.role-card h2 { font-size:var(--font_size-lg); }
.role-card .hint strong { color:var(--color_text); }
.role-card .hint .is-in { color:var(--color_accent); } .role-card .hint .is-out { color:var(--color_danger); }
.sched-list { margin:0; padding:0; list-style:none; display:grid; gap:var(--space_xs); }
.sched-row { display:grid; grid-template-columns:1fr auto; grid-template-areas:"when act" "who act"; align-items:center; column-gap:var(--space_sm); padding:var(--space_sm) var(--space_md); border-radius:var(--radius_sm); background:var(--color_bg-sunken); border:1px solid var(--color_line); }
.sched-row.is-live { border-color:var(--color_accent); }
.sched-row.is-final { opacity:.75; }
.sched-when { grid-area:when; font-size:var(--font_size-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--color_text-dim); font-weight:700; }
.sched-who { grid-area:who; font-weight:700; }
.sched-who em { font-style:normal; color:var(--color_text-dim); padding:0 2px; }
.sched-who strong { color:var(--color_accent); margin-left:var(--space_xs); }
.sched-row > .key, .sched-row > .seg, .sched-row > select { grid-area:act; }
.sched-row > .key { min-height:44px; font-size:var(--font_size-sm); padding-inline:var(--space_md); }
.sched-list.is-captain .sched-row { grid-template-columns:1fr auto; grid-template-areas:"when act" "who act" "lead lead"; }
.sched-list.is-captain .sched-lead { grid-area:lead; }
.sched-list.is-captain .sched-lead:empty { display:none; }
.sched-list.is-captain .sched-lead .field { margin:var(--space_sm) 0 0; }
.sched-list.is-captain .sched-lead .hint { margin-top:var(--space_sm); }
.sched-list.is-admin .sched-row { grid-template-columns:1fr auto auto; grid-template-areas:"when ump x" "who ump x"; }
.sched-list.is-admin select { grid-area:ump; min-height:44px; max-width:9rem; padding:0 var(--space_sm); border-radius:var(--radius_sm); background:var(--color_bg-raised); color:var(--color_text); border:1px solid var(--color_line-strong); font-size:var(--font_size-sm); }
.sched-list.is-admin .roster-remove { grid-area:x; }
.seg button.is-in { color:var(--color_accent-text); background:var(--color_accent); }
.seg button.is-out { color:#fff; background:var(--color_danger); }
.avail-list { margin:0; padding:0; list-style:none; display:grid; gap:var(--space_xs); }
.avail-row { display:flex; justify-content:space-between; align-items:center; gap:var(--space_sm); padding:var(--space_xs) var(--space_xs) var(--space_xs) var(--space_md); border-radius:var(--radius_sm); background:var(--color_bg-sunken); border:1px solid var(--color_line); }
.roster-name small, .roster-name small { font-size:var(--font_size-xs); color:var(--color_text-dim); font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-left:4px; }
.roster-row.is-guest { border-style:dashed; }
.lead-field label small { text-transform:none; letter-spacing:0; color:var(--color_text-dim); }
.lead-field.is-needed select { border-color:var(--color_warn); }
.link { background:none; border:0; padding:0; color:var(--color_accent); text-decoration:underline; cursor:pointer; font:inherit; min-height:24px; }
.recruit { border-radius:var(--radius_sm); border:1px dashed var(--color_line-strong); padding:var(--space_sm) var(--space_md); }
.recruit summary { cursor:pointer; font-size:var(--font_size-sm); font-weight:700; color:var(--color_text-muted); }
.recruit .roster-list { margin-top:var(--space_sm); }
.recruit .roster-row .key { min-height:40px; }
.toggle-row { display:flex; justify-content:space-between; align-items:center; gap:var(--space_md); font-weight:700; cursor:pointer; }
.toggle-row small { display:block; font-weight:400; color:var(--color_text-muted); font-size:var(--font_size-sm); }
.switch { flex:none; width:56px; height:32px; border-radius:var(--radius_pill); background:var(--color_line-strong); position:relative; transition:background var(--motion_fast); }
.switch i { position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%; background:var(--color_white); transition:transform var(--motion_fast); }
.switch.is-on { background:var(--color_accent); } .switch.is-on i { transform:translateX(24px); }
.watching { display:flex; align-items:center; gap:var(--space_sm); font-size:var(--font_size-sm); color:var(--color_warn); font-weight:700; }
[data-denied] { opacity:.35; }

/* ========================================================================== */
/* SWITCHER : the whoami card in a dialog                                       */
/* ========================================================================== */
.switcher { border:1px solid var(--color_line-strong); border-radius:var(--radius_md); background:var(--color_bg); color:var(--color_text); padding:0; width:min(92vw, 28rem); }
.switcher::backdrop { background:rgba(7,12,22,.7); }
.switcher .whoami { border:0; }
.switch-head { display:flex; justify-content:space-between; align-items:center; gap:var(--space_sm); }
.switch-head .eyebrow { margin:0; }
.switch-head .drawer-close { min-width:44px; min-height:44px; font-size:var(--font_size-lg); }

/* ========================================================================== */
/* PLAYER : one person's page (Sleeper-style cards)                           */
/* ========================================================================== */
.player-head { display:grid; grid-template-columns:auto 1fr; gap:var(--space_md); align-items:center; }
.avatar-big { display:grid; place-items:center; width:72px; height:72px; border-radius:50%; background:linear-gradient(145deg, var(--color_bg-raised), var(--color_line-strong)); border:2px solid var(--color_line-strong); font-size:2rem; font-weight:800; }
.player-id h1 { font-size:var(--font_size-xl); line-height:1.1; }
.player-real { color:var(--color_text-muted); font-size:var(--font_size-sm); }
.team-chips { display:flex; flex-wrap:wrap; gap:var(--space_xs); margin-top:var(--space_xs); align-items:center; }
.chip-team { display:inline-flex; align-items:center; min-height:24px; padding:0 var(--space_sm); border-radius:var(--radius_pill); background:var(--color_bg-raised); border:1px solid var(--color_line-strong); font-size:var(--font_size-xs); font-weight:800; letter-spacing:.06em; }
.chip-team.is-captain { border-color:var(--color_info); color:var(--color_info); }
.walkup { margin-top:var(--space_xs); color:var(--color_accent); font-size:var(--font_size-sm); font-weight:700; }
.walkup a { color:var(--color_text-muted); font-weight:400; margin-left:var(--space_xs); }
.tabs.is-filter { grid-auto-columns:auto; justify-content:start; }
.tabs.is-filter button { padding:0 var(--space_md); }
.pcard { display:grid; gap:var(--space_sm); padding:var(--space_md); border-radius:var(--radius_md); background:var(--color_bg-raised); border:1px solid var(--color_line); }
.pcard.is-next { border-color:var(--color_line-strong); background:linear-gradient(180deg, var(--color_bg-raised), var(--color_bg-sunken)); }
.pcard.is-live { border-color:var(--color_accent); }
.next-when { font-size:var(--font_size-xs); text-transform:uppercase; letter-spacing:.1em; color:var(--color_text-dim); font-weight:700; }
.next-who { font-size:var(--font_size-xl); }
.next-inout .seg.is-inout { display:grid; grid-template-columns:1fr auto 1fr; width:100%; padding:4px; border-radius:var(--radius_md); }
.next-inout .seg.is-inout button { min-height:var(--key_height); border-radius:var(--radius_sm); font-size:var(--font_size-lg); }
.status-line { font-size:var(--font_size-sm); color:var(--color_text-muted); }
.status-line .is-in { color:var(--color_accent); } .status-line .is-out { color:var(--color_danger); } .status-line .is-short { color:var(--color_warn); }
.lineup-me { padding:var(--space_sm) var(--space_md); border-radius:var(--radius_sm); background:var(--color_bg-sunken); border:1px solid var(--color_line); font-size:var(--font_size-sm); color:var(--color_text-muted); }
.lineup-me strong { color:var(--color_text); }
.live-score { display:grid; grid-template-columns:1fr auto auto auto 1fr; align-items:center; gap:var(--space_sm); text-align:center; }
.live-score span { font-size:var(--font_size-sm); font-weight:700; color:var(--color_text-muted); }
.live-score strong { font-size:var(--font_size-xl); } .live-score em { color:var(--color_text-dim); font-style:normal; }
.tabs.is-fa button { font-size:var(--font_size-xs); padding:0 var(--space_xs); }
.stats-wrap { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:var(--space_md); align-items:center; }
.radar { width:100%; max-width:260px; height:auto; }
.radar-ring { fill:none; stroke:var(--color_line); stroke-width:1; }
.radar-spoke { stroke:var(--color_line); stroke-width:1; }
.radar-league { fill:color-mix(in srgb, var(--color_text-muted), transparent 80%); stroke:var(--color_text-muted); stroke-width:1; stroke-dasharray:3 3; }
.radar-me { fill:var(--color_accent-soft); stroke:var(--color_accent); stroke-width:2; stroke-linejoin:round; }
.radar-dot { fill:var(--color_accent); }
.radar-label { fill:var(--color_text-muted); font-size:9px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.radar-key { display:flex; gap:var(--space_md); align-items:center; font-size:var(--font_size-xs); color:var(--color_text-muted); }
.radar-key i { display:inline-block; width:12px; height:12px; border-radius:2px; margin-right:4px; vertical-align:-2px; }
.radar-key .is-me { background:var(--color_accent); } .radar-key .is-league { background:var(--color_text-muted); opacity:.6; }
.stat-grid { margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(3, minmax(3.2rem, 1fr)); gap:var(--space_xs); }
.stat-grid li { display:grid; justify-items:center; padding:var(--space_sm) var(--space_xs); border-radius:var(--radius_sm); background:var(--color_bg-sunken); border:1px solid var(--color_line); }
.stat-grid strong { font-size:var(--font_size-lg); } .stat-grid span { font-size:var(--font_size-xs); color:var(--color_text-dim); font-weight:700; letter-spacing:.08em; }
.stat-text { font-size:var(--font_size-sm); color:var(--color_text-muted); }
.axis-list { margin:0; padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:var(--space_xs); }
.axis-list li { display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:0 var(--space_sm); padding:var(--space_sm) var(--space_md); border-radius:var(--radius_sm); background:var(--color_bg-sunken); border:1px solid var(--color_line); font-size:var(--font_size-xs); }
.axis-list li span { color:var(--color_text-muted); font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.axis-list li strong { font-size:var(--font_size-sm); }
.axis-list li small { grid-column:1 / -1; color:var(--color_text-dim); font-weight:700; }
.outs-strip { margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:var(--space_xs); }
.outs-strip li { display:inline-flex; align-items:baseline; gap:6px; min-height:36px; padding:0 var(--space_md); border-radius:var(--radius_pill); background:var(--color_bg-sunken); border:1px solid var(--color_line); font-size:var(--font_size-xs); color:var(--color_text-muted); }
.outs-strip li strong { color:var(--dot_out); font-size:var(--font_size-md); }
.outs-strip li.is-run strong { color:var(--color_warn); }
.leaders { margin:0; padding:0; list-style:none; display:grid; gap:2px; }
.leaders li { display:grid; grid-template-columns:2ch 1fr auto; align-items:center; gap:var(--space_sm); padding:var(--space_sm) var(--space_md); border-radius:var(--radius_sm); background:var(--color_bg-sunken); font-size:var(--font_size-sm); }
.leaders li.is-me { border:1px solid var(--color_accent); background:var(--color_accent-soft); }
.leaders li.is-me .leader-n { color:var(--color_text); }
.leader-n { color:var(--color_text-dim); font-weight:800; text-align:right; }
.leader-name { font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .leader-name small { color:var(--color_text-dim); font-weight:700; margin-left:4px; }
.settings summary { cursor:pointer; font-weight:700; color:var(--color_text-muted); min-height:24px; }
.settings[open] summary { color:var(--color_text); margin-bottom:var(--space_sm); }
.profile-form { display:grid; gap:var(--space_md); }
.icon-grid { display:grid; grid-template-columns:repeat(8, 1fr); gap:var(--space_xs); }
.icon-grid button { min-height:44px; border-radius:var(--radius_sm); background:var(--color_bg-sunken); border:1px solid var(--color_line); font-size:1.25rem; }
.icon-grid button.is-on { border-color:var(--color_accent); background:var(--color_accent-soft); }
@media (max-width:420px) { .stats-wrap { grid-template-columns:1fr; justify-items:center; } .icon-grid { grid-template-columns:repeat(6, 1fr); } }

/* ===== CAPTAIN PAGE ===== */
.team-head { display:grid; grid-template-columns:1fr auto; align-items:center; gap:var(--space_md); }
.team-head h1 { font-size:var(--font_size-xl); line-height:1.1; } .team-head h2 { font-size:var(--font_size-xl); }
.team-record { display:grid; justify-items:center; padding:var(--space_sm) var(--space_md); border-radius:var(--radius_md); background:var(--color_bg-raised); border:1px solid var(--color_line); }
.team-record strong { font-size:var(--font_size-xl); line-height:1; } .team-record small { font-size:var(--font_size-xs); color:var(--color_text-dim); text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.opp-link { font:inherit; color:inherit; background:none; border:0; padding:0; text-decoration:underline; text-decoration-color:var(--color_line-strong); text-underline-offset:4px; cursor:pointer; }
.opp-link:hover { text-decoration-color:var(--color_accent); }
.rainout.is-inline { background:transparent; border:0; padding:0 0 0 var(--space_xs); min-height:32px; border-left:3px solid var(--color_line-strong); border-radius:0; }
.rainout.is-inline.is-go { border-left-color:var(--color_accent); } .rainout.is-inline.is-no { border-left-color:var(--color_danger); } .rainout.is-inline.is-warn { border-left-color:var(--color_warn); }
.seg.is-inout.is-sm button { min-height:36px; min-width:44px; padding:0 var(--space_sm); font-size:var(--font_size-xs); }
.seg button.is-maybe { color:var(--color_bg); background:var(--color_warn); }
.seg.is-inout .is-q { min-width:40px; }
.half { display:inline-block; width:14px; height:14px; border-radius:50%; border:2px solid currentColor; background:linear-gradient(90deg, currentColor 50%, transparent 50%); vertical-align:-2px; }
.seg.is-inout .is-q.is-on { color:var(--color_warn); background:color-mix(in srgb, var(--color_warn), transparent 85%); }
.status-line .is-q { color:var(--color_warn); }
.lead-chip { display:inline-flex; align-items:center; gap:var(--space_xs); justify-self:start; align-self:center; min-height:36px; padding:0 var(--space_sm) 0 var(--space_md); border-radius:var(--radius_pill); background:var(--color_bg-sunken); border:1px solid var(--color_line-strong); font-size:var(--font_size-sm); font-weight:700; color:var(--color_text-muted); }
.chip-x { min-width:28px; min-height:28px; border-radius:50%; color:var(--color_text-muted); font-size:var(--font_size-md); }
.roster-name.as-link { background:none; border:0; padding:0; color:inherit; font:inherit; font-weight:700; text-align:left; cursor:pointer; min-height:44px; }
.inline-form.is-add { grid-template-columns:1fr auto auto; }
.role-card.is-bare { padding:0; background:none; border:0; }
.role-card.is-bare > .eyebrow { display:none; }
.linescore tr.is-me th, .linescore tr.is-me td { color:var(--color_accent); font-weight:800; }
.pos-chips .chip-pick.is-elsewhere { border-style:dashed; }
.pos-chips .chip-pick.is-clear { color:var(--color_danger); border-color:color-mix(in srgb, var(--color_danger), transparent 50%); }
.pos-pick { display:grid; gap:var(--space_sm); padding:var(--space_md); border-radius:var(--radius_md); background:var(--color_bg-raised); border:1px solid var(--color_accent); }
.pos-chips .chip-pick .chip-tag { width:18px; height:18px; font-size:10px; margin-left:6px; }

/* ===== FIELD : the diamond ===== */
.field { width:100%; max-width:30rem; margin:0 auto; display:block; }
.field-grass { fill:#15402c; stroke:var(--color_line-strong); stroke-width:.6; }
.field-dirt { fill:#6b4a2b; }
.field-line { stroke:rgba(255,255,255,.55); stroke-width:.5; fill:none; }
.field-base { fill:#f2f5fa; }
.field-spot { cursor:pointer; }
.field-spot circle { fill:var(--color_bg); stroke:var(--color_line-strong); stroke-width:.8; }
.field-spot.is-on circle { fill:var(--color_bg-raised); stroke:var(--color_accent); }
.field-spot.is-pick circle { stroke:var(--color_warn); stroke-width:1.4; }
.field-spot:focus-visible circle { stroke:var(--color_accent); stroke-width:1.6; }
.field-code { fill:var(--color_text); font-size:3.2px; font-weight:800; letter-spacing:.1px; }
.field-spot.is-on .field-code { fill:var(--color_text-muted); font-size:2.6px; }
.field-name { fill:var(--color_text); font-size:2.6px; font-weight:700; }

/* ===== PLAYERS : the table ===== */
.players { max-width:40rem; }
.pl-pos { display:flex; gap:var(--space_xs); overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.pl-pos button { flex:none; min-height:40px; min-width:52px; padding:0 var(--space_md); border-radius:var(--radius_pill); background:var(--color_bg-sunken); border:1px solid var(--color_line); color:var(--color_text-muted); font-size:var(--font_size-xs); font-weight:800; letter-spacing:.06em; }
.pl-pos button.is-on { background:var(--color_accent); color:var(--color_accent-text); border-color:var(--color_accent); }
.pl-tools { display:grid; grid-template-columns:1fr auto; gap:var(--space_sm); align-items:center; }
.pl-search { display:flex; align-items:center; gap:var(--space_sm); min-height:44px; padding:0 var(--space_md); border-radius:var(--radius_pill); background:var(--color_bg-sunken); border:1px solid var(--color_line-strong); color:var(--color_text-dim); }
.pl-search input { flex:1; min-width:0; background:none; border:0; color:var(--color_text); font-size:var(--font_size-sm); min-height:40px; }
.pl-search input::placeholder { color:var(--color_text-dim); }
.pl-check { display:inline-flex; align-items:center; gap:var(--space_sm); min-height:44px; padding:0 var(--space_md) 0 var(--space_sm); border-radius:var(--radius_pill); background:var(--color_bg-sunken); border:1px solid var(--color_line-strong); font-size:var(--font_size-sm); font-weight:700; color:var(--color_text-muted); cursor:pointer; }
.pl-check input { position:absolute; opacity:0; width:1px; height:1px; }
.pl-check .box { display:grid; place-items:center; width:22px; height:22px; border-radius:6px; border:1px solid var(--color_line-strong); color:transparent; }
.pl-check.is-on { color:var(--color_text); border-color:var(--color_accent); } .pl-check.is-on .box { background:var(--color_accent); border-color:var(--color_accent); color:var(--color_accent-text); }
.pl-table-wrap { overflow-x:auto; border-radius:var(--radius_md); border:1px solid var(--color_line); background:var(--color_bg-raised); -webkit-overflow-scrolling:touch; }
.pl-table { border-collapse:separate; border-spacing:0; min-width:100%; font-size:var(--font_size-sm); }
.pl-table th, .pl-table td { padding:var(--space_sm) var(--space_sm); text-align:center; white-space:nowrap; border-bottom:1px solid var(--color_line); }
.pl-table thead th { position:sticky; top:0; z-index:2; background:var(--color_bg-sunken); color:var(--color_text-dim); font-size:var(--font_size-xs); font-weight:800; letter-spacing:.08em; }
.pl-table thead th button { min-height:36px; padding:0 var(--space_xs); font:inherit; color:inherit; letter-spacing:inherit; }
.pl-table thead th.is-sort { color:var(--color_accent); } .pl-table .dir { font-style:normal; margin-left:2px; }
.pl-table .pl-name { position:sticky; left:0; z-index:1; background:var(--color_bg-raised); text-align:left; min-width:13rem; box-shadow:6px 0 12px -8px rgba(0,0,0,.6); }
.pl-table thead .pl-name { z-index:3; background:var(--color_bg-sunken); }
.pl-table tbody tr:nth-child(even) td, .pl-table tbody tr:nth-child(even) .pl-name { background:color-mix(in srgb, var(--color_bg-raised), var(--color_bg-sunken) 40%); }
.pl-person { display:grid; grid-template-columns:auto 1fr; gap:var(--space_sm); align-items:center; text-align:left; min-height:52px; width:100%; }
.avatar-big.is-xs { width:36px; height:36px; font-size:1rem; }
.avatar-big.is-xs .av-light { width:11px; height:11px; border-width:1.5px; }
.pl-text { display:grid; gap:1px; min-width:0; }
.pl-text strong { font-size:var(--font_size-sm); }
.pl-meta { display:flex; align-items:center; gap:4px; font-size:var(--font_size-xs); color:var(--color_text-muted); font-weight:700; }
.pl-meta .chip-tag { width:16px; height:16px; font-size:9px; }
.pl-last { font-size:10px; color:var(--color_text-dim); font-weight:700; }
.pl-table td { font-weight:700; color:var(--color_text-muted); font-variant-numeric:tabular-nums; }
.pl-table td.is-hi { color:var(--color_accent); } .pl-table td.is-lo { color:var(--color_text-dim); font-weight:400; }
.pl-table td.is-sort { color:var(--color_text); }
.pl-table tr.is-av-yes .pl-name strong { color:var(--color_accent); }
.pl-act { position:sticky; right:0; background:var(--color_bg-raised); }
.pl-add { display:inline-grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--color_accent); color:var(--color_accent-text); }
.pl-table .is-empty { color:var(--color_text-muted); padding:var(--space_lg); }
.key svg { vertical-align:-3px; margin-right:4px; }

/* ===== RAINOUT : field status chip (Statusfy) ===== */
.rainout { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:2px var(--space_sm); min-height:44px; padding:var(--space_xs) var(--space_md); border-radius:var(--radius_sm); background:var(--color_bg-sunken); border:1px solid var(--color_line); color:inherit; text-decoration:none; font-size:var(--font_size-sm); }
.rainout .rainout-label { grid-column:1; font-size:var(--font_size-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--color_text-dim); font-weight:700; }
.rainout strong { grid-column:2; font-weight:800; }
.rainout .rainout-detail { grid-column:2; font-size:var(--font_size-xs); color:var(--color_text-muted); }
.rainout .rainout-when { grid-column:3; grid-row:1 / span 2; font-size:var(--font_size-xs); color:var(--color_text-dim); font-weight:700; }
.rainout.is-go { border-color:color-mix(in srgb, var(--color_accent), transparent 50%); } .rainout.is-go strong { color:var(--color_accent); }
.rainout.is-no { border-color:var(--color_danger); } .rainout.is-no strong { color:var(--color_danger); }
.rainout.is-warn strong { color:var(--color_warn); }
.rainout.is-off strong, .rainout.is-link strong, .rainout.is-loading strong { color:var(--color_text-muted); }
.sched-row.is-rainout { opacity:.8; border-style:dashed; }
.sched-who .is-rain { color:var(--color_warn); }
.sched-tools { display:inline-flex; gap:2px; align-items:center; }
.sched-tools .key { min-height:40px; min-width:40px; padding:0; font-size:var(--font_size-md); }
.sched-tools .key.is-on { background:var(--color_warn); color:var(--color_bg); border-color:var(--color_warn); }
.sched-list.is-admin .sched-row { grid-template-areas:"when ump x" "who ump x"; }
.sched-list.is-admin .sched-tools { grid-area:x; }
.inline-form .field label small { text-transform:none; letter-spacing:0; }

/* ===== STATS HEAD : league scope as a dropdown, seasons as tabs ===== */
.pcard-head { display:flex; justify-content:space-between; align-items:center; gap:var(--space_sm); }
.pcard-head .eyebrow { margin:0; }
.scope-pick select { min-height:36px; max-width:12rem; padding:0 var(--space_md); border-radius:var(--radius_pill); background:var(--color_bg-sunken); color:var(--color_text); border:1px solid var(--color_line-strong); font-size:var(--font_size-xs); font-weight:800; }
/* ===== FREE AGENT AVAILABILITY : the light ===== */
.avatar-big { position:relative; }
.av-light { position:absolute; right:-2px; bottom:-2px; width:14px; height:14px; border-radius:50%; border:2px solid var(--color_bg-sunken); background:var(--color_text-dim); }
.av-light.is-yes { background:var(--color_accent); box-shadow:0 0 8px var(--color_accent); } .av-light.is-no { background:var(--color_danger); }
.av-tag { display:inline-block; margin-left:4px; padding:0 6px; border-radius:var(--radius_pill); background:var(--color_accent-soft); color:var(--color_accent); font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; vertical-align:middle; }
.av-tag.is-no { background:color-mix(in srgb, var(--color_danger), transparent 85%); color:var(--color_danger); }
.fa-card.is-av-yes { border-color:color-mix(in srgb, var(--color_accent), transparent 55%); }
.tabs.is-fa-filter { margin-top:var(--space_sm); }

/* ===== SEASONS + COMPARE ===== */
.tabs.is-seasons button { font-size:var(--font_size-xs); }
.compare-row { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space_xs) var(--space_sm); font-size:var(--font_size-xs); }
.chip-cmp { min-height:32px; padding:0 var(--space_md); border-radius:var(--radius_pill); background:var(--color_bg-sunken); border:1px dashed var(--color_line-strong); color:var(--color_text-muted); font-size:var(--font_size-xs); font-weight:700; }
.chip-cmp.is-on { border-style:solid; color:var(--color_text); }
.chip-cmp.is-1 { border-color:var(--color_info); } .chip-cmp.is-2 { border-color:#c98bff; }
.radar-cmp { fill:none; stroke-width:2; stroke-linejoin:round; }
.radar-cmp.is-1 { stroke:var(--color_info); fill:color-mix(in srgb, var(--color_info), transparent 85%); }
.radar-cmp.is-2 { stroke:#c98bff; fill:color-mix(in srgb, #c98bff, transparent 85%); }
.radar-key .is-cmp-1 { background:var(--color_info); } .radar-key .is-cmp-2 { background:#c98bff; }
.chip-pos { display:inline-flex; align-items:center; min-height:24px; padding:0 var(--space_sm); border-radius:var(--radius_pill); background:var(--color_accent-soft); border:1px solid var(--color_accent); color:var(--color_accent); font-size:var(--font_size-xs); font-weight:800; }
.pos-chips { display:flex; flex-wrap:wrap; gap:var(--space_xs); align-items:center; }
.pos-chips.is-head { grid-column:1 / -1; padding-top:var(--space_sm); border-top:1px solid var(--color_line); }
.pos-chips.is-head .chip-pick { min-height:40px; min-width:48px; padding:0 var(--space_sm); }
.chip-pick { min-height:44px; min-width:56px; padding:0 var(--space_md); border-radius:var(--radius_pill); background:var(--color_bg-sunken); border:1px solid var(--color_line-strong); color:var(--color_text-muted); font-weight:800; font-size:var(--font_size-sm); }
.chip-pick.is-on { background:var(--color_accent-soft); border-color:var(--color_accent); color:var(--color_text); }
.season-lines { margin:0; padding:0; list-style:none; display:grid; gap:var(--space_xs); }
.season-lines li { display:grid; grid-template-columns:auto 1fr; gap:2px var(--space_sm); align-items:baseline; padding:var(--space_sm) var(--space_md); border-radius:var(--radius_sm); background:var(--color_bg-sunken); border:1px solid var(--color_line); font-size:var(--font_size-xs); }
.season-lines li span { color:var(--color_text-muted); font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.season-lines li strong { font-size:var(--font_size-sm); } .season-lines li small { grid-column:2; color:var(--color_text-dim); font-weight:700; }

/* ===== PLAYER CARDS (free agents) + SHEET ===== */
.fa-list { margin:var(--space_sm) 0 0; padding:0; list-style:none; display:grid; gap:var(--space_sm); }
.fa-card { display:grid; grid-template-columns:1fr auto; align-items:center; gap:var(--space_sm); padding:var(--space_sm); border-radius:var(--radius_md); background:var(--color_bg-sunken); border:1px solid var(--color_line); }
.fa-open { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--space_sm); text-align:left; min-height:64px; padding:var(--space_xs); border-radius:var(--radius_sm); }
.fa-open:hover { background:var(--color_bg-raised); }
.avatar-big.is-sm { width:44px; height:44px; font-size:1.25rem; }
.fa-text { display:grid; gap:2px; min-width:0; }
.fa-text strong { font-size:var(--font_size-md); }
.fa-meta { font-size:var(--font_size-xs); color:var(--color_text-muted); font-weight:700; display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.fa-meta .chip-tag { width:18px; height:18px; font-size:10px; }
.fa-line { font-size:var(--font_size-xs); color:var(--color_text-dim); font-weight:700; }
.radar.is-mini { width:64px; max-width:64px; } .radar.is-mini .radar-label { display:none; }
.fa-card > .key { min-height:44px; }
.sheet { border:1px solid var(--color_line-strong); border-radius:var(--radius_md) var(--radius_md) 0 0; background:var(--color_bg); color:var(--color_text); padding:var(--space_md) var(--gutter) calc(var(--space_lg) + env(safe-area-inset-bottom)); width:min(100vw, 32rem); max-height:92svh; margin:auto auto 0; display:none; gap:var(--space_md); }
.sheet[open] { display:grid; }
.sheet::backdrop { background:rgba(7,12,22,.7); }
.sheet-head { display:flex; justify-content:flex-end; }
.sheet .player-id h2 { font-size:var(--font_size-xl); line-height:1.1; }

/* ========================================================================== */
/* LEAGUE : admin cards                                                       */
/* ========================================================================== */
.league-card { display:grid; gap:var(--space_sm); padding:var(--space_md); border-radius:var(--radius_md); background:var(--color_bg-raised); border:1px solid var(--color_line); }
.league-card h2 { font-size:var(--font_size-lg); } .league-card h3 { font-size:var(--font_size-md); }
.league-card .new-game { padding:0; background:none; border:0; }
.rules { margin:0; padding:0; list-style:none; display:grid; gap:var(--space_xs); }
.rule-row { display:grid; grid-template-columns:1fr 6rem; align-items:center; gap:var(--space_sm); }
.rule-row label { font-size:var(--font_size-sm); font-weight:700; color:var(--color_text-muted); }
.rule-row label small { display:block; color:var(--color_warn); font-size:var(--font_size-xs); }
.rule-row.is-changed label { color:var(--color_text); }
.rule-row input, .rule-row select { min-height:44px; padding:0 var(--space_sm); border-radius:var(--radius_sm); background:var(--color_bg-sunken); color:var(--color_text); border:1px solid var(--color_line-strong); text-align:center; }
.rule-row.is-changed input, .rule-row.is-changed select { border-color:var(--color_warn); }
.approve-row { display:flex; justify-content:space-between; align-items:center; gap:var(--space_sm); padding:var(--space_sm) var(--space_md); border-radius:var(--radius_sm); background:var(--color_bg-sunken); border:1px solid var(--color_line); }
.approve-row > div { display:grid; gap:2px; min-width:0; }
.approve-row span { font-size:var(--font_size-sm); color:var(--color_text-muted); }
.approve-row b { color:var(--color_text); }
.approve-row.is-pending { border-color:var(--color_warn); } .approve-row.is-pending b { color:var(--color_warn); }
.approve-row.is-declined { opacity:.6; }
.ump-list { margin:0; padding:0; list-style:none; display:grid; gap:var(--space_xs); }
.ump-list li { display:flex; justify-content:space-between; padding:var(--space_sm) var(--space_md); border-radius:var(--radius_sm); background:var(--color_bg-sunken); font-weight:700; }
.inline-form { display:grid; grid-template-columns:1fr auto; gap:var(--space_sm); align-items:end; }
.inline-form .key { min-height:52px; }

/* ========================================================================== */
/* RESOLVE : runners on the play, right after a hit                          */
/* ========================================================================== */
.resolve { display:grid; gap:var(--space_sm); padding:var(--space_md); border-radius:var(--radius_md); background:var(--color_bg-raised); border:1px solid var(--color_accent); }
.resolve-head { font-size:var(--font_size-sm); font-weight:700; display:flex; justify-content:space-between; gap:var(--space_sm); flex-wrap:wrap; }
.resolve-head span { color:var(--color_text-muted); font-weight:400; }
.resolve-row { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:var(--space_sm); }
.resolve-who { font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.resolve-who em { font-style:normal; font-size:var(--font_size-xs); color:var(--color_accent); text-transform:uppercase; letter-spacing:.1em; margin-left:4px; }
.resolve-opts { display:inline-flex; gap:4px; }
.resolve-opts button { min-height:44px; min-width:52px; padding:0 var(--space_sm); border-radius:var(--radius_sm); background:var(--color_bg-sunken); border:1px solid var(--color_line-strong); font-size:var(--font_size-sm); font-weight:700; }
.resolve-opts .is-score { color:var(--color_accent); border-color:color-mix(in srgb, var(--color_accent), transparent 50%); }
.resolve-opts .is-out { color:var(--dot_out); border-color:color-mix(in srgb, var(--dot_out), transparent 50%); }
.resolve-done { justify-self:end; }
.resolve.is-fc { border-color:var(--dot_out); }
.resolve-foot { display:flex; justify-content:space-between; gap:var(--space_sm); }
.resolve-row.is-forced .resolve-who em { color:var(--color_text-muted); text-transform:none; letter-spacing:0; font-size:var(--font_size-xs); }
.next-inout .seg.is-inout .is-q { min-width:72px; }
.next-inout .seg.is-inout .half { width:20px; height:20px; }

/* ========================================================================== */
/* CLOUD BACKUP (beta) — footnote on every screen + the sync screen            */
/* ========================================================================== */
:root { --size_sync-bar:2rem; }
.ump, .page { min-height:calc(100svh - var(--size_sync-bar)); }
.sync-bar { display:flex; justify-content:center; padding:0 var(--gutter) env(safe-area-inset-bottom); }
.sync-status { min-height:var(--size_sync-bar); width:100%; max-width:32rem; padding:var(--space_xs) var(--space_md); font-size:var(--font_size-xs); color:var(--color_text-muted); text-align:center; line-height:1.3; border-top:1px solid var(--color_line); }
.sync-status::before { content:''; display:inline-block; width:.5em; height:.5em; margin-right:.5em; border-radius:50%; background:var(--color_text-dim); vertical-align:middle; }
.sync-status[data-state="ok"]::before { background:var(--color_accent); }
.sync-status[data-state="saving"]::before { background:var(--color_info); }
.sync-status[data-state="offline"]::before { background:var(--color_warn); }
.sync-status[data-state="paused"] { color:var(--color_warn); }
.sync-status[data-state="paused"]::before { background:var(--color_warn); }
.sync-state { padding:var(--space_sm) var(--space_md); border-radius:var(--radius_sm); background:var(--color_bg-raised); font-size:var(--font_size-sm); border-left:4px solid var(--color_text-dim); }
.sync-state.is-ok { border-color:var(--color_accent); }
.sync-state.is-saving { border-color:var(--color_info); }
.sync-state.is-offline, .sync-state.is-paused { border-color:var(--color_warn); }
.sync-form { display:grid; gap:var(--space_md); }
.sync-copies { display:grid; gap:var(--space_sm); }
.sync-copies h2 { font-size:var(--font_size-sm); text-transform:uppercase; letter-spacing:.1em; color:var(--color_text-muted); margin-right:auto; }
.sync-note { font-size:var(--font_size-sm); color:var(--color_text-muted); }
.sync-note code { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--color_text); }
.sync-list li { align-items:center; }
.sync-row { display:grid; gap:2px; min-width:0; }
.sync-row span, .sync-row small { color:var(--color_text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sync .sub { font-size:var(--font_size-sm); color:var(--color_text-muted); margin-top:2px; }
.row-keys { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space_sm); }
.row-keys .key { min-height:44px; }
.sync-form .field { display:grid; grid-template-columns:1fr; }
.sync-copies > .row-keys h2 { flex-basis:100%; }