/* Crew Call — interface styles
   App shell: a light sidebar menu on computers; a top bar, bottom tabs and a
   pull-up menu on phones. Soft white surfaces on a pale canvas, hairline
   dividers instead of boxes, Crew Call green for actions and the current
   page, penalty-flag yellow only for the brand mark and the next-game time. */
:root {
  --canvas:#f4f6f8; --bg:var(--canvas); --surface:#fff; --card:var(--surface);
  --text:#18212f; --text-2:#344054; --muted:#667085; --line:#eaecf0; --border:#d0d5dd;
  --accent:#1f7a4d; --accent-hover:#19663f; --accent-ink:#fff; --accent-soft:#e8f4ee;
  --ink:#18212f; --flag:#f5c518; --hover:#f2f4f7;
  --warn:#b54708; --warn-soft:#fef4e6; --error:#b42318; --error-soft:#fef1f0; --info-soft:#eef2f7;
  --radius:14px; --radius-sm:10px;
  --shadow:0 1px 3px rgba(16,24,40,.07), 0 1px 2px rgba(16,24,40,.04);
  --shadow-lg:0 12px 32px rgba(16,24,40,.14);
  --font:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-num:"Barlow Condensed","Barlow",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme: dark) { :root {
  --canvas:#0f141d; --surface:#171e2b; --text:#e8ecf2; --text-2:#c9d1dd; --muted:#98a2b3; --line:#232c3b; --border:#344054;
  --accent:#4ac38a; --accent-hover:#5fd39b; --accent-ink:#06210f; --accent-soft:#143327; --ink:#0b1018; --hover:#1e2736;
  --warn:#f5a25d; --warn-soft:#33240f; --error:#f97066; --error-soft:#3a1a1a; --info-soft:#1c2535;
  --shadow:0 1px 2px rgba(0,0,0,.3); --shadow-lg:0 12px 32px rgba(0,0,0,.5); } }

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:16px/1.5 var(--font); background:var(--canvas); color:var(--text); -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover { color:var(--accent-hover); }
:focus-visible { outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset:2px; border-radius:8px; }
textarea, input, select, button { font-family:inherit; }
svg { flex:none; }
.muted { color:var(--muted); } .small { font-size:.875rem; } .error { color:var(--error); }
.right { float:right; } .grow { flex:1; min-width:0; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
@media (prefers-reduced-motion: no-preference) {
  a, button, .button, summary, input, select, textarea { transition:background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease); }
}

/* ---------- Brand ---------- */
.brand { display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:1.2rem; letter-spacing:-.005em; color:var(--text); text-decoration:none; }
.brand::before, .brand-mark { content:""; display:inline-block; width:10px; height:20px; background:var(--flag); border-radius:3px; transform:skewX(-12deg); flex:none; }
.brand:hover { color:var(--text); }

/* ---------- App shell ---------- */
.shell { min-height:100vh; }
.sidebar { display:none; }
.page { min-width:0; display:flex; flex-direction:column; min-height:100vh; }
.container { width:100%; max-width:1080px; margin:0 auto; padding:20px 16px 12px; flex:1; }
.narrow { max-width:440px; margin:32px auto; }
.topbar { display:flex; align-items:center; padding:14px 20px; background:var(--surface); border-bottom:1px solid var(--line); }
.signed-out .container { max-width:520px; }

@media (min-width:900px) {
  .shell { display:grid; grid-template-columns:264px minmax(0,1fr); }
  .sidebar { display:flex; flex-direction:column; gap:18px; position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px 16px; background:var(--surface); border-right:1px solid var(--line); }
  .sidebar .brand { padding:2px 10px 0; }
  .appbar, .tabbar { display:none !important; }
  .container { padding:32px 40px 16px; }
  .footer { text-align:left; padding:16px 40px 28px; }
}

/* Phone top bar */
.appbar { position:sticky; top:0; z-index:25; display:flex; align-items:center; justify-content:space-between; gap:8px; height:56px; padding:0 6px 0 14px; background:color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter:saturate(1.6) blur(12px); border-bottom:1px solid var(--line); }
.appbar-ws { display:flex; align-items:center; gap:10px; min-width:0; min-height:44px; color:var(--text); text-decoration:none; }
.appbar-ws:hover { color:var(--text); }
.appbar-title { font-weight:600; font-size:1.05rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.appbar-actions { display:flex; gap:2px; flex:none; }
.icon-btn { position:relative; display:grid; place-items:center; width:44px; height:44px; border-radius:12px; color:var(--text-2); }
.icon-btn:hover { background:var(--hover); color:var(--text); }
.icon-btn svg { width:24px; height:24px; }
.deskbar { display:none; }
@media (min-width:900px) {
  .deskbar { display:flex; justify-content:flex-end; gap:6px; padding:12px 40px 0; }
  .deskbar a { display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:0 14px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--text-2); font-weight:500; text-decoration:none; }
  .deskbar a:hover { background:var(--hover); color:var(--text); }
  .deskbar a.on { color:var(--accent); border-color:var(--accent); }
  .deskbar svg { width:18px; height:18px; }
  .deskbar + .container { padding-top:12px; }
}
@media print { .deskbar { display:none !important; } }
.dot { position:absolute; top:9px; right:9px; width:9px; height:9px; border-radius:50%; background:var(--error); box-shadow:0 0 0 2px var(--surface); }
.ws-caret { width:7px; height:7px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg) translateY(-2px); flex:none; margin-left:2px; }

/* Phone tab bar */
.tabbar { position:fixed; left:0; right:0; bottom:0; z-index:30; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); background:color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter:saturate(1.6) blur(12px); border-top:1px solid var(--line); padding:6px 4px calc(6px + env(safe-area-inset-bottom)); }
.tabbar a { position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; min-height:52px; padding:2px 0; color:var(--muted); text-decoration:none; font-size:.72rem; font-weight:600; }
.tabbar a span:not(.dot) { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; padding:0 2px; }
.tabbar svg { box-sizing:border-box; width:56px; height:30px; padding:3px 16px; border-radius:999px; }
.tabbar a.on { color:var(--accent); }
.tabbar a.on svg { background:var(--accent-soft); }
.tabbar .dot { top:2px; right:calc(50% - 20px); }
@media (max-width:899px) { body.signed-in { padding-bottom:calc(72px + env(safe-area-inset-bottom)); } }

/* ---------- Menu (sidebar, phone sheet and /menu/ page) ---------- */
.menu { display:flex; flex-direction:column; gap:14px; flex:1; }
.menu-items { display:flex; flex-direction:column; gap:2px; }
.menu-nav { display:flex; flex-direction:column; gap:14px; }
.menu-label, .menu-group > summary { padding:0 12px; margin-bottom:4px; font-size:.8rem; font-weight:600; color:var(--muted); }
.menu-group > summary { min-height:32px; margin:0; color:var(--muted); justify-content:space-between; flex-direction:row-reverse; }
.menu-group > summary::before { transform:rotate(45deg); width:6px; height:6px; margin-right:4px; }
.menu-group[open] > summary::before { transform:rotate(-135deg); }
.menu-group > summary:hover { color:var(--text); }
.menu-items a, .menu-items button { display:flex; align-items:center; gap:12px; width:100%; min-height:42px; padding:8px 12px; border:0; border-radius:10px; background:none; color:var(--text-2); text-decoration:none; font-size:.95rem; font-weight:500; text-align:left; cursor:pointer; }
.menu-items svg { width:20px; height:20px; color:var(--muted); }
.menu-items a:hover, .menu-items button:hover { background:var(--hover); color:var(--text); }
.menu-items a.on { background:var(--accent-soft); color:var(--accent); font-weight:600; }
.menu-items a.on svg { color:var(--accent); }
.menu-items .badge { margin-left:auto; }
.menu-items form { margin:0; }
.menu-global { margin-top:auto; padding-top:12px; border-top:1px solid var(--line); }

.ws-switch { position:relative; }
.ws-switch > summary, .ws-head { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line); border-radius:12px; color:var(--text); font-weight:400; min-height:56px; }
.ws-switch > summary::before { display:none; }
.ws-switch > summary:hover { background:var(--hover); }
.ws-switch[open] > summary .ws-caret { transform:rotate(-135deg) translateY(-2px); }
.ws-switch > summary .ws-caret { margin-left:auto; }
.ws-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:var(--accent-soft); color:var(--accent); flex:none; }
.ws-icon svg { width:20px; height:20px; }
.ws-text { display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.ws-text strong { font-weight:600; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ws-text small { color:var(--muted); font-size:.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ws-list { display:flex; flex-direction:column; gap:2px; margin-top:6px; padding:6px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.ws-list a { display:flex; align-items:center; gap:10px; padding:8px; border-radius:10px; color:var(--text); text-decoration:none; }
.ws-list a:hover { background:var(--hover); color:var(--text); }
.ws-list .ws-add .ws-icon { background:var(--hover); color:var(--text-2); }
.sidebar .ws-list { position:absolute; left:0; right:0; z-index:5; box-shadow:var(--shadow-lg); }

.sheet { position:fixed; inset:auto 0 0 0; width:100%; max-width:560px; max-height:88vh; margin:0 auto; padding:10px 16px calc(16px + env(safe-area-inset-bottom)); border:0; border-radius:22px 22px 0 0; background:var(--surface); color:var(--text); box-shadow:var(--shadow-lg); overflow-y:auto; }
.sheet::backdrop { background:rgba(16,24,40,.45); }
.sheet[open] { animation:sheet-up .26s var(--ease); }
@keyframes sheet-up { from { transform:translateY(40px); opacity:.4; } to { transform:none; opacity:1; } }
@media (prefers-reduced-motion: reduce) { .sheet[open] { animation:none; } }
.sheet-grip { width:40px; height:4px; border-radius:4px; background:var(--border); margin:0 auto 10px; }
.sheet-close { position:absolute; top:8px; right:10px; width:40px; height:40px; border:0; border-radius:50%; background:var(--hover); color:var(--text-2); font-size:1.4rem; line-height:1; cursor:pointer; }
.sheet .menu { padding-top:6px; }
.sheet .ws-switch { margin-right:48px; }
.sheet .menu-items a, .sheet .menu-items button { min-height:48px; font-size:1rem; }
.menu-page .menu-items a, .menu-page .menu-items button { min-height:48px; }

/* ---------- Type and page headers ---------- */
h1 { font-size:1.6rem; line-height:1.2; font-weight:600; letter-spacing:-.01em; margin:4px 0 16px; }
h2 { font-size:1.02rem; font-weight:600; margin:28px 0 10px; color:var(--text); }
h3 { font-size:.95rem; font-weight:600; margin:16px 0 6px; }
p { margin:6px 0 10px; }
@media (min-width:900px) { h1 { font-size:1.85rem; margin-bottom:20px; } }
.page-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.page-head h1 { margin-bottom:4px; }
.row > h1 { margin:4px 0; }
.footer { text-align:center; color:var(--muted); font-size:.82rem; padding:18px 16px 24px; }
.footer a { color:var(--muted); }
.eyebrow { font-size:.85rem; color:var(--accent); font-weight:600; margin-bottom:6px; }
/* Old "back" links above a title read as breadcrumbs */
.container > p:first-child > a:only-child, .container > p.small:first-child { font-size:.9rem; }

/* ---------- Surfaces ---------- */
.card, .panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px 18px; margin-bottom:12px; box-shadow:var(--shadow); }
.card + .card { margin-top:0; }
.card.action { display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--text); text-decoration:none; flex-wrap:wrap; padding:13px 18px; min-height:58px; }
.card.action > strong, .card.action > div > strong { font-weight:600; }
.card.action > span { color:var(--muted); font-size:.9rem; }
a.card.action { display:grid; grid-template-columns:1fr auto; column-gap:14px; row-gap:2px; }
a.card.action > * { grid-column:1; }
a.card.action > span { justify-self:start; }
a.card.action::after { content:""; grid-column:2; grid-row:1 / span 2; align-self:center; width:8px; height:8px; border-right:2px solid var(--border); border-top:2px solid var(--border); transform:rotate(45deg); margin-right:4px; }
a.card.action:hover { background:var(--hover); color:var(--text); }
/* Consecutive rows join into one list with hairline dividers */
.card.action + .card.action, .card.small + .card.small, .card.row + .card.row, .card.compact + .card.compact { margin-top:-13px; border-top-left-radius:0; border-top-right-radius:0; box-shadow:none; }
.card.action:has(+ .card.action), .card.small:has(+ .card.small), .card.row:has(+ .card.row), .card.compact:has(+ .card.compact) { border-bottom-left-radius:0; border-bottom-right-radius:0; }
.card.highlight { background:color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); border-color:color-mix(in srgb, var(--accent) 25%, var(--line)); }
.card.compact { padding:10px 16px; margin-bottom:8px; }
.warn-card { background:color-mix(in srgb, var(--warn-soft) 70%, var(--surface)); }

/* Panel: one surface holding rows */
.panel { padding:4px 0; }
.panel-row { display:flex; align-items:center; gap:12px; padding:12px 18px; border-top:1px solid var(--line); color:var(--text); text-decoration:none; }
.panel-row:first-child { border-top:0; }
.panel-row.link::after { content:""; width:8px; height:8px; border-right:2px solid var(--border); border-top:2px solid var(--border); transform:rotate(45deg); margin-right:4px; flex:none; }
a.panel-row:hover { background:var(--hover); color:var(--text); }
.panel-row:first-child { border-radius:var(--radius) var(--radius) 0 0; } .panel-row:last-child { border-radius:0 0 var(--radius) var(--radius); }
.btn-row { display:flex; gap:8px; flex-wrap:wrap; margin:0; }

/* Next game */
.scoreboard { background:var(--ink); color:#fff; border:0; border-radius:18px; padding:18px 20px; box-shadow:var(--shadow-lg); }
.scoreboard .eyebrow { color:var(--flag); }
.scoreboard .muted, .scoreboard .game-line .when { color:#b9c2d0; }
.scoreboard .game-line .when { width:112px; }
.scoreboard .game-line .when strong { color:#fff; font-size:2.1rem; }
.scoreboard .game-line .when strong small { color:var(--flag); }
.scoreboard .button { background:rgba(255,255,255,.12); border-color:transparent; color:#fff; }
.scoreboard .button:hover { background:rgba(255,255,255,.2); }
.scoreboard a { color:#fff; }

/* ---------- Rows, game lines, tags ---------- */
.row { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px; }
.game-line { display:flex; gap:14px; align-items:flex-start; min-width:0; }
.game-line .when { width:84px; flex:none; font-weight:600; font-size:.88rem; line-height:1.2; color:var(--muted); }
.game-line .when .date { display:block; white-space:nowrap; }
.game-line .when strong { display:block; white-space:nowrap; font:600 1.4rem/1.15 var(--font-num); color:var(--text); }
.game-line .when strong small { font-size:.6em; margin-left:2px; color:var(--muted); }
.game-line strong { font-weight:600; }
.game-line > div:last-child { min-width:0; flex:1; }
.game-line .teams { display:block; }
.card.action:has(> .game-line) { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:14px; row-gap:6px; }
.card.action:has(> .game-line) > * { grid-column:1; }
.card.action:has(> .game-line) > .tag, .card.action:has(> .game-line) > span { justify-self:start; }
@media (min-width:900px) { .game-line .teams { display:inline; } .game-line .teams::before { content:" · "; } }
.game-line .muted.small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:899px) {
  .card.action:has(> .game-line) { padding:12px 14px 12px 16px; }
  .card.action:has(> .game-line) > .tag, .card.action:has(> .game-line) > span { margin-left:98px; }
  .scoreboard .game-line .when { width:96px; }
  .scoreboard .game-line .when strong { font-size:1.9rem; }
}
/* Computers: game lists read like a schedule table */
@media (min-width:900px) {
  .card.action:has(> .game-line) { grid-template-columns:minmax(0,1fr) auto 10px; padding:12px 18px; }
  .card.action:has(> .game-line) > .tag, .card.action:has(> .game-line) > span { grid-column:2; grid-row:1; align-self:center; justify-self:end; }
  .card.action:has(> .game-line)::after { grid-column:3; grid-row:1; }
  .card.action > .game-line { display:grid; grid-template-columns:104px 84px minmax(0,1fr); align-items:center; gap:0 12px; }
  .card.action > .game-line .when { display:contents; }
  .card.action > .game-line .when .date { font-size:.92rem; color:var(--text-2); }
  .card.action > .game-line .when strong { font:600 1.02rem/1.3 var(--font); }
  .card.action > .game-line .when strong small { font-size:.8em; }
}
.tag { display:inline-block; padding:3px 10px; border-radius:999px; font-size:.78rem; font-weight:600; background:var(--info-soft); color:var(--text-2); border:0; white-space:nowrap; }
.tag.ok { background:var(--accent-soft); color:var(--accent); }
.tag.warn { background:var(--warn-soft); color:var(--warn); }
.tag.urgent { background:var(--error-soft); color:var(--error); }
.tag.special { background:#f1ecfe; color:#6941c6; }
.badge { display:inline-block; min-width:20px; padding:0 6px; border-radius:999px; background:var(--error); color:#fff; font-size:.72rem; line-height:20px; text-align:center; font-weight:700; }
.list { list-style:none; padding:0; margin:0; }
.list li { padding:11px 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.list li:last-child { border-bottom:0; }
.list li .right { float:none; flex:none; font-weight:600; }
.list li.unread { font-weight:600; }
.facts { display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:12px 0 0; } .facts dt { color:var(--muted); } .facts dd { margin:0; }

/* ---------- Notices ---------- */
.notice { padding:12px 16px; border-radius:12px; margin-bottom:14px; background:var(--info-soft); font-size:.95rem; }
.notice.success { background:var(--accent-soft); }
.notice.error { background:var(--error-soft); color:var(--error); }
.notice.warning { background:var(--warn-soft); }

/* ---------- Forms and buttons ---------- */
label { display:block; margin:14px 0 6px; font-weight:600; font-size:.92rem; color:var(--text-2); }
input, select, textarea { width:100%; padding:10px 12px; font-size:1rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--text); min-height:46px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
input:hover, select:hover, textarea:hover { border-color:color-mix(in srgb, var(--border) 60%, var(--muted)); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
textarea { min-height:96px; }
.stacked .field { margin-bottom:4px; }
.field.check, label.check { display:flex; align-items:center; gap:4px; min-height:44px; font-weight:500; }
.field.check { flex-wrap:wrap; margin-top:10px; }
.field.check > input { order:-1; }
.field.check > div { flex-basis:100%; padding-left:28px; }
.field.check > label { margin:0; font-weight:500; color:var(--text); }
.field.check input, label.check input { width:auto; min-height:0; box-shadow:none; }
input[type=checkbox], input[type=radio] { width:20px; height:20px; min-width:20px; min-height:0; accent-color:var(--accent); margin:0 8px 0 0; vertical-align:middle; box-shadow:none; }
.radio-list label, .radio-list li label { font-weight:500; display:flex; gap:8px; align-items:center; margin:6px 0; }
.radio-list input, .radio-list li input { width:auto; } .radio-list ul { list-style:none; padding:0; margin:0; }
.helptext, .field .help { color:var(--muted); font-size:.85rem; }

button.primary, button.secondary, button.danger { display:flex; align-items:center; justify-content:center; width:100%; margin-top:18px; padding:11px 20px; font-size:1rem; font-weight:600; border-radius:12px; min-height:48px; cursor:pointer; }
button.primary { border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink); box-shadow:0 1px 2px rgba(16,24,40,.08); }
button.primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
button.secondary { margin-top:10px; border:1px solid var(--border); background:var(--surface); color:var(--text-2); }
button.secondary:hover { background:var(--hover); }
button.danger { border:1px solid var(--error); background:var(--error); color:#fff; }
@media (min-width:900px) {
  button.primary, button.secondary, button.danger { display:inline-flex; width:auto; min-width:160px; margin-right:8px; }
}
button.link { background:none; border:0; color:var(--accent); font-size:inherit; cursor:pointer; min-height:40px; padding:0 4px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 16px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--text-2); font-size:.95rem; font-weight:600; text-decoration:none; min-height:42px; cursor:pointer; box-shadow:0 1px 2px rgba(16,24,40,.05); }
.button:hover { background:var(--hover); color:var(--text); }
.button.primary-sm, .primary-sm { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.button.primary-sm:hover { background:var(--accent-hover); border-color:var(--accent-hover); color:var(--accent-ink); }
.danger-sm { border-color:color-mix(in srgb, var(--error) 40%, var(--border)); color:var(--error); }
.inline-form { display:flex; gap:8px; margin-top:10px; } .inline-form select, .inline-form input { flex:1; min-width:0; }
.inline-form button.primary { width:auto; margin-top:0; min-width:0; }
.copy-row { display:flex; gap:8px; margin-top:10px; } .copy-row input { flex:1; min-width:0; font-size:.85rem; }
.wide { display:block; text-align:center; margin:12px 0; }
.rate-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:6px 0; }
.rate-row label { margin:0; font-weight:500; } .rate-row.optional label { color:var(--muted); padding-left:14px; font-size:.95rem; }
.money { display:flex; align-items:center; gap:4px; max-width:140px; } .money input { text-align:right; }
code { background:var(--hover); padding:2px 6px; border-radius:6px; word-break:break-word; font-size:.9em; }
ol.small { padding-left:20px; }
/* Forms sit on a surface on computers so they don't float on the canvas */
@media (min-width:900px) {
  .container > form:not(.inline-form):not(.row):not(#bulk):not(#suggest) { max-width:720px; }
  .container > form.card.stacked { padding:8px 28px 24px; }
  .container > .card:has(input:not([type=hidden]), select, textarea):not(:has(.game-line)) { max-width:720px; }
}

/* ---------- Expanders ---------- */
details > summary { min-height:44px; display:flex; align-items:center; gap:8px; cursor:pointer; padding:2px 0; color:var(--accent); font-weight:600; list-style:none; }
details > summary::-webkit-details-marker { display:none; }
details > summary::before { content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); transition:transform .15s; flex:none; margin-right:2px; }
details[open] > summary::before { transform:rotate(45deg); }
details > summary.small { min-height:38px; }
@media (prefers-reduced-motion: reduce) { details > summary::before { transition:none; } }

/* ---------- Tabs: underlined, like a schedule header ---------- */
.tabs { display:flex; gap:4px; margin:0 0 18px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tabs a { flex:none; padding:10px 12px; text-decoration:none; color:var(--muted); font-weight:600; font-size:.95rem; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; }
.tabs a:hover { color:var(--text); }
.tabs a.active { color:var(--accent); border-bottom-color:var(--accent); }
.scroll-tabs { white-space:nowrap; }

/* ---------- Quick links, stats, bars ---------- */
.tool-grid { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 8px; }
.tool-grid a { display:inline-flex; align-items:center; min-height:38px; padding:6px 14px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--text-2); text-decoration:none; font-size:.9rem; font-weight:600; }
.tool-grid a:hover { background:var(--hover); color:var(--text); }
.subnav { margin:0 0 16px; line-height:2; color:var(--muted); }
.stats { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-bottom:14px; }
.stat { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow); }
.stat .n { font:600 1.9rem/1.1 var(--font-num); } .stat .l { color:var(--muted); font-size:.85rem; }
.bar { height:6px; border-radius:999px; background:var(--line); overflow:hidden; margin:8px 0 4px; }
.bar span { display:block; height:100%; background:var(--accent); border-radius:999px; }

/* ---------- Tables ---------- */
table.simple { width:100%; border-collapse:separate; border-spacing:0; font-size:.92rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
table.simple td, table.simple th { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
table.simple tr:last-child td { border-bottom:0; }
table.simple th { font-weight:600; color:var(--muted); font-size:.82rem; background:color-mix(in srgb, var(--hover) 60%, var(--surface)); }
table.simple tbody tr:hover td { background:color-mix(in srgb, var(--hover) 50%, transparent); }
.card table.simple { border:0; box-shadow:none; border-radius:0; }
@media (max-width:480px) { table.simple { font-size:.85rem; } table.simple td, table.simple th { padding:8px 6px; } }

/* ---------- Chat ---------- */
.chat { display:flex; flex-direction:column; gap:8px; margin:12px 0; }
.bubble { max-width:80%; padding:9px 14px; border-radius:18px 18px 18px 6px; background:var(--surface); border:1px solid var(--line); align-self:flex-start; }
.bubble.mine { align-self:flex-end; background:var(--accent-soft); border-color:transparent; border-radius:18px 18px 6px 18px; }
.bubble .who { color:var(--muted); margin-bottom:2px; }
.compose { position:sticky; bottom:84px; }
@media (min-width:900px) { .compose { bottom:12px; } }

/* ---------- Tasks and schedules ---------- */
.task-row { flex-wrap:nowrap; align-items:center; padding:10px 16px; }
.check-btn { width:30px; height:30px; min-width:30px; border-radius:9px; border:2px solid var(--border); background:var(--surface); color:#fff; font-weight:700; cursor:pointer; }
.check-btn.done { background:var(--accent); border-color:var(--accent); }
.sched-row { display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:.95rem; } .sched-row .when { min-width:44px; font-weight:600; } .sched-row.warn { background:var(--warn-soft); }

/* ---------- Banners ---------- */
.viewas { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 16px; background:var(--warn); color:#fff; font-size:.9rem; }
.viewas .button { min-height:34px; padding:4px 12px; }
.offline-banner { position:fixed; left:12px; right:12px; bottom:calc(84px + env(safe-area-inset-bottom)); background:var(--ink); color:#fff; padding:12px 16px; border-radius:12px; font-size:.9rem; text-align:center; z-index:40; box-shadow:var(--shadow-lg); }
@media (min-width:900px) { .offline-banner { left:auto; right:24px; bottom:24px; max-width:420px; } }
.demobar { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:6px 14px; background:var(--flag); color:#18212f; font-size:.85rem; }
.demobar .row { gap:6px; align-items:center; flex-wrap:nowrap; margin:0; }
.demobar select { width:auto; min-height:34px; padding:4px 8px; font-size:.85rem; border-color:rgba(0,0,0,.18); box-shadow:none; }
.demobar button.link { color:#18212f; min-height:34px; font-weight:600; }

/* ---------- Season calendar grid ---------- */
.cal { display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; margin:8px 0 16px; }
.cal .dow { font-size:.7rem; text-align:center; color:var(--muted); }
.cal .day { min-height:42px; border:1px solid var(--line); background:var(--surface); border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:.8rem; position:relative; }
.cal .day.empty { border:none; background:none; }
.cal label.day { cursor:pointer; user-select:none; margin:0; }
.cal label.day input { position:absolute; opacity:0; pointer-events:none; }
.cal label.day:has(input:checked) { background:var(--error); border-color:var(--error); color:#fff; }
.cal .day .m { font-size:.6rem; color:var(--muted); }
.cal label.day:has(input:checked) .m { color:#fff; }
.cal .day.thin { border-color:#b54708; background:rgba(181,71,8,.10); }
.cal .day.none { border-color:var(--error); background:rgba(200,30,30,.12); }
.cal .day .n { font-weight:600; }

.guide-steps { padding-left:2.2rem; } .guide-steps li { margin:0 0 12px; line-height:1.55; }
form.card.row { flex-wrap:nowrap; } form.card.row > div:first-of-type { flex:1; min-width:0; } form.card.row > .button { flex:none; }

/* ---------- Printing / save as PDF ---------- */
@media print {
  :root { --canvas:#fff; --surface:#fff; --text:#000; --muted:#444; --border:#bbb; --line:#ccc; --shadow:none; }
  .sidebar, .appbar, .tabbar, .sheet, .footer, .demobar, .viewas, .offline-banner, .notice, .topbar { display:none !important; }
  .shell { display:block; }
  body.signed-in { padding-bottom:0; }
  .container { max-width:none; padding:0; }
  .scoreboard { background:#fff; color:#000; border:1px solid #bbb; box-shadow:none; }
  body { background:#fff; font-size:12pt; }
  .card { break-inside:avoid; border-color:#bbb; box-shadow:none; }
  a { color:#000; text-decoration:none; }
}

/* ---------- Payment roster: one panel per game, a row per official ---------- */
.pay-game { padding:0; overflow:hidden; }
.pay-head { padding:12px 18px; background:color-mix(in srgb, var(--hover) 55%, var(--surface)); border-bottom:1px solid var(--line); }
.pay-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 14px; align-items:center; padding:12px 18px; border-top:1px solid var(--line); }
.pay-head + .pay-row { border-top:0; }
.pay-who { min-width:0; }
.pay-amt { text-align:right; font-variant-numeric:tabular-nums; }
.pay-status { grid-column:1 / -1; display:flex; gap:8px; margin:0; }
.pay-status select { flex:1; min-width:0; min-height:40px; padding:6px 10px; }
.pay-status .button { min-height:40px; }
.pay-total { display:flex; justify-content:space-between; padding:14px 18px; font-size:1.05rem; }
@media (min-width:900px) {
  .pay-row { grid-template-columns:minmax(0,1fr) 110px 260px; }
  .pay-status { grid-column:auto; }
}
@media (scripting: enabled) { .pay-status .button { display:none; } }
@media (min-width:900px) { .backlink { display:none; } }

/* ---------- Game page ---------- */
.game-head { display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; margin:4px 0 8px; }
.game-head h1 { margin:0; }
.game-when { flex:none; min-width:84px; padding:10px 12px; border-radius:14px; background:var(--ink); color:#fff; text-align:center; }
.game-when .date { display:block; font-size:.82rem; color:#b9c2d0; font-weight:600; white-space:nowrap; }
.game-when strong { display:block; font:600 1.7rem/1.1 var(--font-num); white-space:nowrap; }
.game-when strong small { font-size:.55em; margin-left:2px; color:var(--flag); }
.game-teams { margin:2px 0 0; font-size:1.05rem; }
.tag-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.game-actions { width:100%; }
@media (min-width:900px) { .game-actions { width:auto; margin-left:auto; } }
.two-col { display:block; }
@media (min-width:1100px) { .two-col { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:28px; align-items:start; } .col-side { position:sticky; top:20px; } }
.crew { padding:0; }
.crew-row { padding:14px 18px; border-top:1px solid var(--line); }
.crew-row:first-child { border-top:0; }
.crew-top { display:grid; grid-template-columns:minmax(0,160px) minmax(0,1fr); gap:12px; align-items:start; }
.crew-who .tag-row { margin-top:4px; }
.crew-request { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:10px; padding:8px 12px; border-radius:10px; background:var(--accent-soft); }
.crew-assign { margin-top:10px; }
.crew-assign .inline-form, .crew-emergency { margin-top:0; }
.crew-emergency { margin-top:8px !important; }
.crew-emergency select { max-width:200px; }
.crew-more { margin-top:4px; }
.crew-more > summary { min-height:36px; font-size:.85rem; }
.side-panel { padding:4px 0; }
.side-item { padding:6px 18px 10px; border-top:1px solid var(--line); }
.side-item:first-child { border-top:0; }
.side-item > summary { font-size:.92rem; }
.side-item label { margin-top:10px; }

/* ---------- People lists ---------- */
.avatar { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--accent-soft); color:var(--accent); font-weight:600; font-size:.85rem; flex:none; }
.member { align-items:flex-start; }
.member .avatar { margin-top:2px; }
.member-name { color:var(--text); text-decoration:none; }
.member-name:hover { color:var(--accent); text-decoration:underline; }
.member > form { flex:none; }
@media (max-width:600px) { .member { flex-wrap:wrap; } .member > form { width:100%; padding-left:50px; } }
.list-head { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.list-head h2 { margin-bottom:10px; }
.filter-box { max-width:320px; min-height:40px; margin-bottom:10px; }
[hidden] { display:none !important; }
details.card > summary { color:var(--text); }

/* ---------- Toolbars and wide tables ---------- */
.toolbar { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 12px; margin:4px 0 8px; }
.toolbar label { margin:0; display:flex; flex-direction:column; gap:4px; font-size:.85rem; }
.toolbar input, .toolbar select { min-height:42px; width:auto; min-width:150px; }
.toolbar .button { min-height:42px; }
.table-wrap { overflow-x:auto; border-radius:var(--radius); }
.table-wrap table.simple { min-width:520px; }
.ready-meter { display:flex; align-items:center; gap:12px; margin:4px 0 16px; } .ready-meter .bar { flex:1; max-width:420px; margin:0; height:8px; }
.card.compact + .card.compact { margin-top:-9px; }
.profile-head { display:flex; align-items:center; gap:14px; margin-bottom:12px; } .profile-head h1 { margin:0; }
.avatar-lg { width:56px; height:56px; font-size:1.2rem; }
#push-card:not([hidden]) { max-width:720px; }
.crew-who .tag { white-space:normal; }
@media (max-width:600px) { .crew-top { grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); } }
.quiet-danger { color:var(--muted) !important; } .quiet-danger:hover { color:var(--error) !important; text-decoration:underline; }

/* ---------- Assigning board: list with tick boxes, bulk bar, filters, month ---------- */
.board-bar .tabs { margin-bottom:10px; }
.filters { margin:0 0 12px; }
.filters > summary { min-height:36px; font-size:.92rem; }
.filters .toolbar { padding:12px 14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.select-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:0 2px 8px; }
.pick-all { display:flex; align-items:center; gap:2px; margin:0; font-weight:500; font-size:.9rem; color:var(--text-2); }
.board-list { padding:0; overflow:hidden; }
.board-row { display:flex; align-items:stretch; border-top:1px solid var(--line); }
.board-row:first-child { border-top:0; }
.board-row:has(input:checked) { background:color-mix(in srgb, var(--accent-soft) 60%, var(--surface)); }
.pick { display:flex; align-items:center; justify-content:center; width:46px; margin:0; padding-left:6px; cursor:pointer; flex:none; }
.pick input { margin:0; }
.board-link { flex:1; min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; row-gap:6px; padding:12px 16px 12px 4px; color:var(--text); text-decoration:none; }
.board-link:hover { background:var(--hover); color:var(--text); }
.board-link > .tag { justify-self:start; margin-left:98px; }
.board-link::after { content:""; grid-column:2; grid-row:1; align-self:center; width:8px; height:8px; border-right:2px solid var(--border); border-top:2px solid var(--border); transform:rotate(45deg); margin-right:4px; }
@media (min-width:900px) {
  .board-link { grid-template-columns:minmax(0,1fr) auto 10px; align-items:center; }
  .board-link > .tag { grid-column:2; grid-row:1; margin:0; justify-self:end; }
  .board-link::after { grid-column:3; }
  .board-link > .game-line { display:grid; grid-template-columns:104px 84px minmax(0,1fr); align-items:center; gap:0 12px; }
  .board-link > .game-line .when { display:contents; }
  .board-link > .game-line .when .date { font-size:.92rem; color:var(--text-2); }
  .board-link > .game-line .when strong { font:600 1.02rem/1.3 var(--font); }
  .board-link > .game-line .when strong small { font-size:.8em; }
}
.bulk-bar { margin-top:12px; padding:12px 14px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); }
.bulk-bar.js { position:sticky; bottom:calc(80px + env(safe-area-inset-bottom)); z-index:20; display:none; background:var(--ink); color:#fff; border:0; box-shadow:var(--shadow-lg); }
.bulk-bar.js.show { display:block; animation:sheet-up .2s var(--ease); }
@media (min-width:900px) { .bulk-bar.js { bottom:16px; } }
.bulk-count { display:block; font-weight:600; margin-bottom:8px; }
.bulk-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start; }
.bulk-bar.js .button { background:rgba(255,255,255,.12); border-color:transparent; color:#fff; box-shadow:none; }
.bulk-bar.js .button:hover { background:rgba(255,255,255,.2); }
.bulk-bar.js .button.primary-sm { background:var(--accent); }
.bulk-offer > summary { list-style:none; }
.bulk-offer > summary::before { display:none; }
.bulk-offer[open] { flex-basis:100%; }
.bulk-offer-body { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-top:10px; }
.bulk-offer-body label { margin:0; display:flex; flex-direction:column; gap:4px; font-size:.85rem; color:inherit; flex:1 1 180px; }
.bulk-offer-body p { flex-basis:100%; margin:0; }
.bulk-bar.js .muted { color:#b9c2d0; }
.cal-head { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:4px 0 10px; }
.cal-head h2 { margin:0 4px; min-width:150px; text-align:center; }
.cal-head .icon-btn { font-size:1.6rem; text-decoration:none; color:var(--text-2); border:1px solid var(--line); background:var(--surface); width:40px; height:40px; }
.cal-head > .muted { margin-left:auto; }
.needs-text { color:var(--warn); font-weight:600; }
.month { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
.month .dow { text-align:center; font-size:.75rem; font-weight:600; color:var(--muted); padding:4px 0; }
.mday { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-height:64px; padding:6px; border-radius:10px; background:var(--surface); border:1px solid var(--line); color:var(--text); text-decoration:none; font-size:.8rem; overflow:hidden; }
a.mday:hover { border-color:var(--accent); color:var(--text); }
.mday.empty { background:transparent; }
.mday.out { opacity:.45; }
.mday.today .mnum { background:var(--accent); color:var(--accent-ink); }
.mnum { font-weight:600; font-size:.8rem; min-width:22px; height:22px; display:grid; place-items:center; border-radius:999px; }
.mcount { font-weight:600; font-size:.95rem; }
.mcount small, .mneeds small { font-weight:500; font-size:.72rem; }
.mneeds { color:var(--warn); font-weight:700; font-size:.85rem; }
.mday.has-needs { border-color:color-mix(in srgb, var(--warn) 45%, var(--line)); }
.mgames { display:none; }
@media (max-width:599px) { .mcount small, .mneeds small { display:none; } .mday { min-height:58px; padding:4px; } }
@media (min-width:900px) {
  .month { gap:6px; }
  .mday { min-height:112px; padding:8px; }
  .mcount, .mneeds { display:none; }
  .mgames { display:flex; flex-direction:column; gap:3px; width:100%; }
  .mgame { display:block; padding:2px 6px; border-radius:6px; background:var(--accent-soft); color:var(--accent); font-size:.74rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mgame.open { background:var(--warn-soft); color:var(--warn); }
}
.bulk-bar .button { min-height:38px; padding:6px 12px; font-size:.88rem; }
.bulk-count { font-size:.92rem; }
.mneeds { display:inline-block; padding:0 6px; border-radius:999px; background:var(--warn-soft); font-size:.75rem; }
.mcount { color:var(--text-2); }

/* ---------- Getting-started checklist ---------- */
.checklist { padding:16px 18px; }
.checklist-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.checklist-head form { margin:0; }
.checklist .bar { margin:10px 0 6px; }
.checklist-steps { list-style:none; padding:0; margin:0; display:grid; gap:2px; }
.checklist-steps li { display:flex; align-items:flex-start; gap:10px; padding:8px 0; }
.checklist-steps .tick { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; border:2px solid var(--border); flex:none; font-size:.75rem; font-weight:700; margin-top:1px; }
.checklist-steps li.done .tick { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.checklist-steps li.done strong { color:var(--muted); font-weight:500; text-decoration:line-through; }
.checklist-steps a { display:flex; flex-direction:column; color:var(--text); text-decoration:none; }
.checklist-steps a strong { color:var(--accent); }
.checklist-steps a:hover strong { text-decoration:underline; }
@media (min-width:900px) { .checklist-steps { grid-template-columns:1fr 1fr; column-gap:24px; } }

/* ---------- Suggested crews and who's free ---------- */
.suggest-list { padding:0; overflow:hidden; }
.suggest-game { padding:12px 18px; background:color-mix(in srgb, var(--hover) 55%, var(--surface)); border-top:1px solid var(--line); }
.suggest-game:first-child { border-top:0; }
.suggest-row { display:grid; grid-template-columns:minmax(0,150px) minmax(0,1fr); gap:6px 14px; align-items:start; padding:10px 18px; border-top:1px solid var(--line); }
.suggest-pos { margin:0; display:flex; flex-direction:column; color:var(--text); }
.suggest-pick select { min-height:42px; }
.suggest-pick .small { margin-top:4px; }
.suggest-row.none { background:color-mix(in srgb, var(--warn-soft) 45%, var(--surface)); }
@media (max-width:600px) { .suggest-row { grid-template-columns:1fr; } }
.send-bar { position:sticky; bottom:calc(80px + env(safe-area-inset-bottom)); z-index:20; background:var(--ink); color:#fff; border:0; box-shadow:var(--shadow-lg); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.send-bar .bulk-count { margin:0; }
.send-bar .button:not(.primary-sm) { background:rgba(255,255,255,.12); border-color:transparent; color:#fff; }
@media (min-width:900px) { .send-bar { bottom:16px; } }
.page-head .toolbar { margin:0; }
.day-step { font-size:1.5rem; text-decoration:none; border:1px solid var(--line); background:var(--surface); width:42px; height:42px; }
.free-row { align-items:flex-start; }
.free-row > .tag { flex:none; margin-top:2px; }

/* ---------- Answering offers ---------- */
.answer-list { padding:0; overflow:hidden; }
.answer-row { display:flex; align-items:center; gap:4px 10px; flex-wrap:wrap; border-top:1px solid var(--line); padding:0 16px 12px 0; }
.answer-row:first-child { border-top:0; }
.answer-row:has(input:checked) { background:color-mix(in srgb, var(--accent-soft) 60%, var(--surface)); }
.answer-game { flex:1 1 300px; min-width:0; display:flex; flex-direction:column; gap:4px; padding:12px 0 0 16px; color:var(--text); text-decoration:none; }
.answer-row .pick + .answer-game { padding-left:0; }
.answer-game:hover .game-line strong { color:var(--accent); }
.answer-meta { padding-left:98px; }
.answer-btns { display:flex; gap:8px; margin:0 0 0 auto; padding-top:12px; }
@media (max-width:600px) { .answer-btns { width:100%; padding-left:16px; } .answer-btns .button { flex:1; } .answer-row .pick ~ .answer-btns { padding-left:52px; } }
.answer-many-btns { margin:10px 0 4px; }
.year-pick form, .year-pick select { margin:0; } .year-pick select { min-height:42px; width:auto; }
.week-bars { display:grid; grid-template-columns:repeat(8,1fr); gap:8px; align-items:end; height:180px; padding:14px 16px 10px; }
.wb { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:4px; }
.wb-bar { width:100%; max-width:40px; min-height:2px; background:var(--accent); border-radius:6px 6px 2px 2px; }
.wb-n { font-weight:600; font-size:.85rem; } .wb-l { font-size:.72rem; color:var(--muted); white-space:nowrap; }
.history { padding:8px 0; }
.history-row { display:flex; gap:10px; padding:8px 18px; font-size:.88rem; line-height:1.35; }
.hdot { width:8px; height:8px; border-radius:50%; background:var(--border); margin-top:6px; flex:none; }
.history-row:first-child .hdot { background:var(--accent); }
.history-more > summary { padding:0 18px; }
.code-input { font:600 1.5rem/1 var(--font-num); letter-spacing:.3em; text-align:center; max-width:220px; }
.two-step-setup { display:grid; gap:14px; max-width:900px; }
@media (min-width:900px) { .two-step-setup { grid-template-columns:1fr 1fr; align-items:start; } }
.qr { display:flex; justify-content:center; padding:8px; }
.qr svg { width:200px; height:200px; border-radius:8px; }
.setup-key { font-size:.95rem; letter-spacing:.06em; }
.backup-codes { list-style:none; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; max-width:360px; }
.backup-codes code { display:block; padding:8px 12px; font-size:1rem; text-align:center; }
.security-card { display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .security-card form { margin:0; }

/* ---------- Public page ---------- */
.signed-out .container:has(.landing) { max-width:1120px; padding-top:8px; }
.landing h1 { font:600 clamp(2.2rem, 5.4vw, 3.6rem)/1.02 var(--font-num); letter-spacing:-.01em; margin:0 0 14px; max-width:14ch; }
.landing h2 { font:600 clamp(1.5rem, 3vw, 2rem)/1.1 var(--font-num); margin:0 0 16px; }
.landing h3 { font-size:1.05rem; margin:0 0 8px; }
.l-hero { display:grid; gap:32px; align-items:center; padding:28px 0 36px; }
@media (min-width:900px) { .l-hero { grid-template-columns:1.15fr .85fr; padding:56px 0 64px; } }
.l-lede { font-size:1.15rem; line-height:1.55; color:var(--text-2); max-width:52ch; }
.l-cta { display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 10px; }
.l-big { min-height:50px; padding:10px 22px; font-size:1.02rem; border-radius:12px; }
.l-phone { justify-self:center; width:min(340px, 100%); border-radius:34px; background:var(--canvas); border:8px solid var(--ink); box-shadow:var(--shadow-lg); overflow:hidden; }
@media (prefers-reduced-motion: no-preference) { .l-phone { animation:l-rise .6s var(--ease) both; } @keyframes l-rise { from { transform:translateY(16px); opacity:0; } } }
.l-phone-bar { display:flex; align-items:center; gap:10px; padding:16px 18px 12px; background:var(--surface); border-bottom:1px solid var(--line); }
.l-phone-body { padding:16px; display:grid; gap:12px; }
.l-score { background:var(--ink); color:#fff; border-radius:16px; padding:14px 16px; }
.l-score-eyebrow { color:var(--flag); font-weight:600; font-size:.85rem; margin-bottom:4px; }
.l-score-row, .l-offer-top { display:grid; grid-template-columns:88px 1fr; gap:10px; align-items:start; }
.l-score-row span, .l-offer-top span { display:block; }
.l-d { font-size:.8rem; color:#b9c2d0; font-weight:600; }
.l-t { font:600 1.9rem/1 var(--font-num); } .l-t small { font-size:.5em; margin-left:2px; color:var(--flag); }
.l-t.dark { color:var(--text); font-size:1.5rem; } .l-t.dark small { color:var(--muted); }
.l-offer .l-d { color:var(--muted); }
.l-dim { color:#b9c2d0; font-size:.82rem; } .l-offer .l-dim { color:var(--muted); }
.l-label { font-weight:600; font-size:.9rem; }
.l-offer { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px 14px; }
.l-offer-btns { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.l-accept, .l-decline { text-align:center; padding:9px; border-radius:10px; font-weight:600; font-size:.9rem; }
.l-accept { background:var(--accent); color:#fff; } .l-decline { border:1px solid var(--border); }
.l-section { padding:36px 0; border-top:1px solid var(--line); }
.l-grid { display:grid; gap:14px; }
@media (min-width:700px) { .l-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px) { .l-grid:not(.two) { grid-template-columns:repeat(4,1fr); } }
.l-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); }
.l-card h3 { display:flex; align-items:center; gap:8px; }
.l-card h3::before { content:""; width:8px; height:16px; background:var(--flag); border-radius:2px; transform:skewX(-12deg); }
.l-card ul { margin:0; padding-left:18px; color:var(--text-2); font-size:.95rem; line-height:1.5; } .l-card li { margin:4px 0; }
.l-promises .l-grid > div { padding:4px 0 4px 16px; border-left:3px solid var(--accent); color:var(--text-2); line-height:1.5; }
.l-promises strong { color:var(--text); display:block; }
.l-modules { display:grid; gap:2px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
@media (min-width:700px) { .l-modules { grid-template-columns:repeat(2,1fr); } }
.l-modules > div { background:var(--surface); padding:16px 18px; display:flex; flex-direction:column; gap:4px; }
.l-modules span { color:var(--text-2); font-size:.95rem; }
.l-pilot { display:grid; gap:20px; }
@media (min-width:900px) { .l-pilot { grid-template-columns:.8fr 1.2fr; align-items:start; } }
.l-pilot-text p { color:var(--text-2); font-size:1.05rem; line-height:1.55; }
.l-form-grid { display:grid; gap:0 14px; }
@media (min-width:600px) { .l-form-grid { grid-template-columns:1fr 1fr; } .l-form-grid .wide-field { grid-column:1 / -1; } }
.l-form button.primary { width:100%; }
.hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.l-signin { text-align:center; padding:12px 0 8px; }
.topbar { justify-content:space-between; } .topbar-signin { min-height:38px; padding:6px 14px; }

/* ---------- Accessibility fixes (audit: WCAG 2.1 AA, target size 2.5.8) ---------- */
.card.action > span.tag { color:var(--text-2); }
.card.action > span.tag.ok { color:var(--accent); }
.card.action > span.tag.warn { color:var(--warn); }
.card.action > span.tag.urgent { color:var(--error); }
.card.action > span.tag.special { color:#6941c6; }
input[type=checkbox], input[type=radio] { width:24px; height:24px; min-width:24px; }
button.link { min-width:32px; }
.member-name { display:inline-block; padding:2px 0; min-height:24px; }
.sched-row a, .list li a { display:inline-block; min-height:24px; padding:2px 0; }
@media (prefers-color-scheme: dark) {
  .badge, button.danger, .dot { color:#1a0b0b; }
  button.danger { border-color:var(--error); }
}
.sr-only-desk { font-size:1.4rem; margin:4px 0 12px; } a.target { display:inline-block; min-height:24px; padding:2px 0; }
.skip-link { position:absolute; left:12px; top:-60px; z-index:100; padding:10px 14px; border-radius:10px; background:var(--ink); color:#fff; font-weight:600; } .skip-link:focus { top:12px; color:#fff; } main:focus { outline:none; }
.match-form { max-width:820px; }
.match-row { display:grid; grid-template-columns:minmax(0,220px) minmax(0,260px) minmax(0,1fr); gap:6px 14px; align-items:center; padding:8px 0; border-top:1px solid var(--line); }
.match-row:first-of-type { border-top:0; }
.match-row label { margin:0; }
.match-fixed { border-top:0; padding-top:0; } .match-fixed label { font-weight:500; color:var(--muted); }
@media (max-width:700px) { .match-row { grid-template-columns:1fr; } }

/* Game night */
.night-day h2 { min-width:0; }
.night-sum { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:8px; margin:0 0 16px; }
@media (max-width:600px) { .night-sum { grid-template-columns:repeat(3, minmax(0, 1fr)); } .night-sum > div { padding:8px 10px; } .night-sum dd { font-size:1.25rem; } }
.night-sum > div { padding:10px 14px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); }
.night-sum dt { font-size:.8rem; color:var(--muted); font-weight:600; }
.night-sum dd { margin:2px 0 0; font-size:1.5rem; font-weight:700; line-height:1.2; }
.night-sum dd small { font-size:.85rem; font-weight:600; color:var(--muted); }
.night-sum .ok dd { color:var(--accent); }
.night-sum .warn { border-color:color-mix(in srgb, var(--warn) 35%, var(--line)); } .night-sum .warn dd { color:var(--warn); }
.night-sum .urgent { border-color:color-mix(in srgb, var(--error) 40%, var(--line)); background:var(--error-soft); } .night-sum .urgent dd { color:var(--error); }
.night-site { margin-top:18px; }
.night-site h3 { margin:0 2px 8px; font-size:1rem; }
.night-game { border-top:1px solid var(--line); }
.night-game:first-child { border-top:0; }
.night-game .board-row { border-top:0; }
.night-game.off .board-link { opacity:.75; }
.night-crew { list-style:none; margin:0; padding:0 16px 12px 50px; display:grid; gap:6px; }
.night-person { display:grid; grid-template-columns:minmax(70px, 110px) minmax(0,1fr) auto auto; align-items:center; gap:8px; font-size:.92rem; }
.night-pos { color:var(--muted); font-size:.85rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.night-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.night-person.missing .night-name { font-weight:600; }
.night-btn { min-height:34px; padding:4px 12px; font-size:.85rem; }
.night-person button.link { min-height:34px; font-size:.85rem; }
.night-actions { align-items:center; }
.night-actions .night-note { flex:1 1 100%; min-width:0; margin:0; }
.night-actions select { width:auto; flex:0 0 auto; margin:0; min-height:42px; }
@media (min-width:900px) { .night-actions .night-note { flex-basis:260px; } }
.night-alerts { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:24px; padding:14px 16px; }
.night-alerts p { margin:4px 0 0; }
.night-alerts .button { flex:none; white-space:nowrap; }
@media (max-width:600px) {
  .night-crew { padding-left:16px; }
  .night-person { grid-template-columns:minmax(0,1fr) auto auto; }
  .night-pos { grid-column:1 / -1; margin-bottom:-4px; }
  .night-alerts { flex-direction:column; align-items:stretch; }
}

/* Evaluations */
.eval-game { padding:12px 16px; border-top:1px solid var(--line); }
.eval-game:first-child { border-top:0; }
.eval-crew { list-style:none; margin:8px 0 0; padding:0 0 0 94px; display:grid; gap:6px; }
.eval-crew li { display:grid; grid-template-columns:minmax(70px,110px) minmax(0,1fr) auto; align-items:center; gap:8px; }
@media (max-width:600px) { .eval-crew { padding-left:0; } .eval-crew li { grid-template-columns:minmax(0,1fr) auto; } .eval-crew .night-pos { grid-column:1 / -1; margin-bottom:-4px; } }
.eval-crew .button { justify-self:end; }
.eval-parts { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:6px 14px; margin:8px 0; }
.eval-parts dt { font-size:.8rem; color:var(--muted); } .eval-parts dd { margin:0; font-weight:700; }
.eval-line { margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.stars { border:0; margin:10px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(44px, 1fr)); gap:6px; max-width:420px; }
.stars legend { font-weight:600; margin-bottom:6px; padding:0; }
.stars label { position:relative; display:flex; align-items:center; justify-content:center; margin:0; min-height:42px; border:1px solid var(--border); border-radius:10px; background:var(--surface); font-weight:600; cursor:pointer; }
.stars label:has(input:checked) { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.stars label:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:2px; }
.stars input { position:absolute; opacity:0; inset:0; margin:0; width:100%; height:100%; cursor:pointer; }
.stars label.skip { font-weight:500; color:var(--muted); }
.stars label.skip:has(input:checked) { background:var(--hover); border-color:var(--border); color:var(--text-2); }

/* Staff setup status */
.status-sum { grid-template-columns:repeat(4, minmax(0, 1fr)); }
@media (max-width:600px) { .status-sum { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.status-row { align-items:flex-start; gap:12px; }
.status-row .tag { min-width:96px; text-align:center; margin-top:2px; }

/* Quick guides */
.guide { max-width:720px; }
.guide-kicker { margin:0; font-size:.85rem; font-weight:600; color:var(--accent); }
.guide-head h1 { margin:2px 0 4px; }
.guide-head .lede { margin:0 0 8px; color:var(--text-2); }
.guide h2 { font-size:1.05rem; margin:18px 0 8px; }
.guide-steps { margin:0; padding-left:22px; display:grid; gap:6px; }
.guide-list { margin:0; display:grid; gap:8px; }
.guide-list div { display:grid; grid-template-columns:150px minmax(0,1fr); gap:12px; }
.guide-list dt { font-weight:600; }
.guide-list dd { margin:0; }
@media (max-width:600px) { .guide-list div { grid-template-columns:1fr; gap:2px; } }
.guide-tip { margin:16px 0 0; padding:10px 14px; border-radius:10px; background:var(--accent-soft); }
.guide-foot { margin-top:16px; padding-top:10px; border-top:1px solid var(--line); font-size:.85rem; color:var(--muted); }
@media print {
  .guide { max-width:none; font-size:10.5pt; }
  .guide h2 { margin:12px 0 6px; }
  .no-print, .appbar, .tabbar, .sidebar, .topbar, .footer, .demobar, .skip-link { display:none !important; }
  .guide-tip { background:none; border:1px solid #999; }
}
.l-modules > a.l-guide { background:var(--surface); padding:16px 18px; display:flex; flex-direction:column; gap:4px; color:var(--text); text-decoration:none; }
.l-modules > a.l-guide:hover { background:var(--hover); }
.l-modules > a.l-guide strong { color:var(--accent); }
.l-modules > a.l-guide span { color:var(--muted); font-size:.92rem; }
.guide-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.pay-off { margin:8px 0 0; font-size:.9rem; color:var(--text-2); }