/* app.css · Colorado Referees Hub
   Tokens once, two themes, every component. Nothing page-specific. */

:root {
  --bg: #F6F3EC; --surface: #FFFFFF; --ink: #1B1F2A; --muted: #4A5060; --line: #DDD8CC;
  --navy: #1E3A73; --red: #C8102E; --gold: #F2B800; --count: #1E3A73;
  --green: #1E7B3A; --ongreen: #FFFFFF; --note: #FFFFFF; --focus: #1E3A73;
  --c1: #2F5AA8; --c2: #B88A00; --c3: #C8102E;
  --disp: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Atkinson Hyperlegible', system-ui, sans-serif;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #142850; --surface: #1E3A73; --ink: #FFFFFF; --muted: #BFC9E0; --line: #2E4A85;
    --navy: #FFFFFF; --count: #F2B800; --green: #3DBA63; --ongreen: #0B2A14; --note: #0E1E3F; --focus: #F2B800;
  --c1: #5C8AE6; --c2: #B08A1A; --c3: #E0607A;
  }
}
:root[data-theme="dark"] {
  --bg: #142850; --surface: #1E3A73; --ink: #FFFFFF; --muted: #BFC9E0; --line: #2E4A85;
  --navy: #FFFFFF; --count: #F2B800; --green: #3DBA63; --ongreen: #0B2A14; --note: #0E1E3F; --focus: #F2B800;
  --c1: #5C8AE6; --c2: #B08A1A; --c3: #E0607A;
}

html { scroll-padding-top: env(safe-area-inset-top, 0px); }
html, body { height: 100%; }
body::before { content: ""; position: fixed; inset: 0; background: url("assets/co-referee-program.png") center 40% / 70vmin no-repeat; opacity: 0.05; pointer-events: none; z-index: 0; }
:root[data-theme="dark"] body::before { opacity: 0.07; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::before { opacity: 0.07; } }
.app { position: relative; z-index: 1; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.45 var(--body); -webkit-text-size-adjust: 100%; }
* { box-sizing: border-box; }
a { color: inherit; }
img { max-width: 100%; }
button { font-family: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.disp { font-family: var(--disp); font-style: italic; font-weight: 800; line-height: 1; }

.app { max-width: 480px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; }
.screen { display: none; flex-direction: column; flex-grow: 1; }
.screen.on { display: flex; }

.top { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px 0; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 34px; height: 37px; object-fit: contain; }
.brand .disp { font-size: 20px; }
.top .tools { display: flex; align-items: center; gap: 4px; }
.iconbtn { width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 8px; }
.linkbtn { font-size: 15px; font-weight: 700; text-decoration: none; padding: 10px 6px; min-height: 44px; display: flex; align-items: center; color: var(--ink); background: none; border: 0; cursor: pointer; }
.backlink { display: flex; align-items: center; gap: 6px; min-height: 44px; font-size: 16px; font-weight: 700; text-decoration: none; }

.pad { padding: 0 20px; }
.lead { color: var(--muted); font-size: 16px; }
.count { display: flex; align-items: baseline; gap: 12px; margin-top: 6px; }
.count .n { font-size: 96px; line-height: 0.9; color: var(--count); }
.count .w { font-size: 32px; }

.card { margin: 16px 20px 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.card .row { display: flex; justify-content: space-between; align-items: baseline; }
.card .big { font-size: 40px; }
.actions { display: flex; gap: 10px; padding-top: 4px; }
.btn { min-height: 54px; border-radius: 8px; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 16px; font-weight: 700; color: var(--ink); padding: 0 14px; }
.btn.primary { flex-grow: 1; background: var(--red); color: #FFFFFF; font-family: var(--disp); font-style: italic; font-weight: 800; font-size: 26px; letter-spacing: 0.02em; }
.btn.primary[disabled] { opacity: 0.7; cursor: default; }
.btn.outline { border: 2px solid var(--navy); background: transparent; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.btn:active { transform: translateY(1px); }
.rowbtn, .venue, .list .item[href] { box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.rowbtn:active, .venue:active { transform: translateY(1px); }
.btn.done { background: var(--green); color: var(--ongreen); flex-direction: column; gap: 2px; line-height: 1.1; }
.btn.done .disp { font-size: 24px; letter-spacing: 0.02em; }
.btn.done small { font-size: 13px; font-weight: 400; }
.btn.help { flex-grow: 2; background: var(--red); color: #FFFFFF; font-family: var(--disp); font-style: italic; font-weight: 800; font-size: 24px; letter-spacing: 0.02em; }
.hint { font-size: 14px; color: var(--muted); }
.msg { margin-top: 10px; padding: 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); font-size: 15px; }
.msg.bad { border-color: var(--red); }
.msg.good { border-color: var(--green); }

.list { padding: 14px 20px 0; display: flex; flex-direction: column; }
.list .item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.list .item:last-child { border-bottom: 1px solid var(--line); }
/* A tappable item is a card, like every other tappable thing. */
.list .item[href] { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-bottom: 8px; }
.list .item[href]:last-child { border-bottom: 1px solid var(--line); }
.list .item[href]:active { transform: translateY(1px); }
.list .when { display: flex; gap: 14px; align-items: baseline; }
.list .when .disp { font-size: 26px; }
.list .sub { font-size: 16px; color: var(--muted); }
.state { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.state.in { color: var(--green); }
.state.out { color: var(--muted); }

.note { margin: 12px 20px 0; padding: 12px 16px; border-radius: 12px; background: var(--note); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.note .who { font-size: 14px; font-weight: 700; color: var(--muted); }
.note .text { font-size: 16px; line-height: 1.4; }
.note a { font-size: 15px; font-weight: 700; text-decoration: none; min-height: 44px; display: flex; align-items: center; }

.bulletin { margin: 10px 20px 0; display: flex; gap: 10px; align-items: flex-start; }
.bulletin svg { flex-shrink: 0; margin-top: 1px; color: var(--count); }
.bulletin .text { font-size: 15px; line-height: 1.4; }
.bulletin .text span { color: var(--muted); }

.foot { margin-top: auto; padding: 12px 20px 12px; display: flex; gap: 10px; }
.credit { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 20px 14px; font-size: 12px; color: var(--muted); }
.credit .chip { width: 22px; height: 22px; border-radius: 6px; background: #1E3A73; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.credit img { width: 16px; height: 16px; object-fit: contain; }
.credit a { color: inherit; }
.credit .ver { font-family: ui-monospace, monospace; font-size: 11px; margin-left: 4px; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kv .k { font-size: 14px; color: var(--muted); }
.kv .v { font-size: 18px; font-weight: 700; }
.sep { border-top: 1px solid var(--line); padding-top: 10px; font-size: 15px; line-height: 1.4; }
.h2 { font-size: 24px; margin: 18px 20px 0; }
.rowbtn { display: flex; justify-content: space-between; align-items: center; min-height: 54px; padding: 0 14px; margin: 8px 20px 0; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); cursor: pointer; font: inherit; width: calc(100% - 40px); text-align: left; }
.rowbtn .t { font-size: 17px; font-weight: 700; }
.rowbtn .s { font-size: 14px; color: var(--muted); }

.reasons { margin: 16px 20px 0; display: flex; flex-direction: column; gap: 8px; }
.reason { min-height: 54px; text-align: left; padding: 0 16px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 17px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: space-between; text-decoration: none; }
.reason.urgent { border: 2px solid var(--red); }
.reason.selected { background: var(--navy); color: var(--surface); border-color: var(--navy); }
.reason.selected svg { color: var(--surface); }
.grouplbl { font-size: 13px; font-weight: 700; color: var(--muted); padding: 8px 4px 0; }
.grouplbl.urgent { color: var(--red); }
.reason small { font-size: 14px; font-weight: 400; }
.confirm { margin: 16px 20px 0; background: var(--surface); border: 2px solid var(--red); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.confirm .k { font-size: 14px; font-weight: 700; }
.confirm .v { font-size: 18px; font-weight: 700; }
.confirm .send { min-height: 56px; border: 0; border-radius: 8px; background: var(--red); color: #FFFFFF; font-family: var(--disp); font-style: italic; font-weight: 800; font-size: 26px; letter-spacing: 0.02em; cursor: pointer; }
.confirm .cancel { min-height: 44px; border: 0; background: transparent; color: var(--ink); font-size: 15px; font-weight: 700; cursor: pointer; }

.signin { padding: 24px 20px; display: flex; flex-direction: column; gap: 14px; }
.signin label { font-weight: 700; }
.signin input { font: inherit; width: 100%; padding: 12px; border: 1px solid var(--muted); border-radius: 8px; background: var(--surface); color: var(--ink); }
.signin input[inputmode="numeric"] { letter-spacing: 0.3em; font-size: 24px; text-align: center; }
.signin .btn { background: var(--navy); color: var(--bg); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--navy); background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.chip-btn:active { transform: translateY(1px); box-shadow: none; }
.chip-btn.on { border-color: var(--navy); background: var(--navy); color: var(--surface); }
.crewbtn { display: flex; justify-content: space-between; align-items: center; min-height: 54px; padding: 0 14px; margin: 8px 20px 0; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); cursor: pointer; font: inherit; width: calc(100% - 40px); text-align: left; }
.crewbtn.on { border: 2px solid var(--navy); }
.crewbtn .t { font-size: 17px; font-weight: 700; }
.crewbtn .s { font-size: 14px; color: var(--muted); }
textarea { font: inherit; width: 100%; min-height: 140px; padding: 12px; border: 1px solid var(--muted); border-radius: 8px; background: var(--surface); color: var(--ink); resize: vertical; }
.side { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.side .col { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px; font-size: 14px; line-height: 1.4; }
.side .col b { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.side.three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 420px) { .side.three { grid-template-columns: 1fr; } }
.pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--line); color: var(--ink); border: 0; }
.pill.ok { background: var(--green); color: var(--ongreen); }
.filters { display: flex; gap: 8px; padding: 12px 20px 0; flex-wrap: wrap; }
.btn.small { min-height: 44px; font-size: 15px; padding: 0 12px; }
.btn.go { background: var(--green); color: var(--ongreen); }
.flagged { border-color: var(--red); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 20px 0; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; text-align: center; }
.stat b { display: block; font-family: var(--disp); font-style: italic; font-weight: 800; font-size: 34px; line-height: 1; }
.stat.red b { color: var(--red); } .stat.green b { color: var(--green); }
.stat i { font-style: normal; font-size: 12px; color: var(--muted); }
.tabs { display: flex; gap: 8px; padding: 14px 20px 0; flex-wrap: wrap; }
.rowline { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; }
.rowline:last-child { border-bottom: 1px solid var(--line); }
.rowline .n { font-family: var(--disp); font-style: italic; font-weight: 800; font-size: 22px; min-width: 36px; text-align: right; }
.bar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--green); }
.draft { white-space: pre-wrap; font-size: 15px; line-height: 1.45; }
.datebar { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px 0; }
.datebar .d { font-family: var(--disp); font-style: italic; font-weight: 800; font-size: 24px; }
.venue { margin: 10px 20px 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); }
.venue .t { font-size: 17px; font-weight: 700; }
.venue .m { display: flex; gap: 12px; font-size: 14px; color: var(--muted); flex-wrap: wrap; }
.venue .m .in { color: var(--green); font-weight: 700; }
.venue .m .help { color: var(--red); font-weight: 700; }
.crewline { font-size: 14px; }
.crewline .in { color: var(--green); font-weight: 700; }
.crewline .out { color: var(--muted); }
.chip-btn.avail { border-color: var(--green); }
.mine { border-color: var(--gold) !important; box-shadow: 0 0 0 1px var(--gold) !important; }
#busy { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.08); z-index: 50; pointer-events: none; }
#busy .ball { font-size: 56px; line-height: 1; animation: spin 1.1s linear infinite; filter: drop-shadow(0 2px 6px rgba(0,0,0,.3)); }
@keyframes spin { to { transform: rotate(360deg); } }
.go { display: flex; gap: 8px; }
.go input { flex-grow: 1; }
.go .btn { min-height: 48px; }
.slot { display: flex; align-items: baseline; gap: 10px; margin: 18px 20px 6px; padding-bottom: 6px; border-bottom: 2px solid var(--count); }
.slot .disp { font-size: 26px; color: var(--count); }
.slot .hint { font-size: 13px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 20px; }
@media (min-width: 700px) { .fields { grid-template-columns: 1fr 1fr 1fr; } }
.fcard { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; text-align: left; font: inherit; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.fcard.live { border-color: var(--green); }
.fcard.open { grid-column: 1 / -1; }
.fcard .fname { font-family: var(--disp); font-style: italic; font-weight: 800; font-size: 20px; line-height: 1; }
.dots { display: flex; gap: 5px; }
.dot { width: 11px; height: 11px; border-radius: 50%; background: var(--red); }
.dot.in { background: var(--green); }
.dot.none { background: var(--line); }
.fstate { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.fstate.live { color: var(--green); }
.hqcard { margin: 14px 20px 0; background: var(--surface); border: 2px solid var(--count); border-radius: 12px; padding: 12px 14px; }
.hqcard .hint { font-weight: 700; }
b[style*="--red"] a.refname { color: var(--red); }
a.refname, button.refname { color: inherit; font: inherit; font-weight: inherit; background: none; border: 0; padding: 0; text-decoration: underline; text-decoration-color: var(--count); text-underline-offset: 3px; cursor: pointer; }
.eod-day .eod-rows { display: none; }
.eod-day.open .eod-rows { display: block; }
/* Venue maps: real pitches on paper, live state as a ring */
.fm-scroll { overflow: auto; -webkit-overflow-scrolling: touch; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.fm { display: block; width: 100%; height: auto; font-family: var(--body); touch-action: pan-x pan-y; }
.fm-ground { fill: #EEEAE0; }
.fm-zone { fill: rgba(30,58,115,.04); stroke: rgba(30,58,115,.12); stroke-width: 1; }
.fm-road { fill: #D9D4C7; }
.fm-water { fill: #BFD8EA; stroke: #8FB8D6; stroke-width: 1; }
.fm-hatch { stroke: rgba(0,0,0,.08); stroke-width: 2; }
.fm-label { fill: #6B7080; font-size: 11px; font-weight: 700; }
.fm-label.zone { fill: var(--navy); font-size: 12px; }
.fm-grass { fill: #3E8E4F; }
.fm-line { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 1; }
.fm-num { fill: #fff; font-family: var(--disp); font-style: italic; font-weight: 800; paint-order: stroke; stroke: rgba(0,0,0,.35); stroke-width: 3px; stroke-linejoin: round; }
.fm-sub { fill: rgba(255,255,255,.9); font-weight: 700; paint-order: stroke; stroke: rgba(0,0,0,.3); stroke-width: 2px; }
.fm-ring { fill: none; stroke: transparent; stroke-width: 3; }
.fm-field { cursor: pointer; outline: none; }
.fm-field:focus-visible .fm-ring { stroke: var(--focus); }
.fm-field[data-state="live"] .fm-grass { fill: #2E7A40; }
.fm-field[data-state="live"] .fm-ring { stroke: #fff; stroke-width: 2; }
.fm-field[data-state="warn"] .fm-ring { stroke: var(--gold); stroke-width: 5; }
.fm-field[data-state="alert"] .fm-ring { stroke: var(--red); stroke-width: 5; }
.fm-field[data-state="late"] .fm-ring { stroke: var(--gold); stroke-width: 5; stroke-dasharray: 8 5; }
.fm-field[data-state="open"] .fm-ring { stroke: var(--red); stroke-width: 5; stroke-dasharray: 8 5; }
.fm-field[data-state="done"] .fm-grass { fill: #9DB89F; }
.fm-field[data-state="done"] .fm-num { opacity: .75; }
.fm-field.sel .fm-ring { stroke: var(--navy); stroke-width: 6; }
.fm-field.hl .fm-ring { stroke: var(--gold); stroke-width: 6; }
.fm-field.dim { opacity: .35; }
.fm-chipbg { fill: rgba(27,31,42,.85); }
.fm-chiptext { fill: #fff; font-weight: 700; }
.fm-field[data-state="alert"] .fm-chipbg, .fm-field[data-state="open"] .fm-chipbg { fill: var(--red); }
.fm-field[data-state="warn"] .fm-chipbg, .fm-field[data-state="late"] .fm-chipbg { fill: var(--gold); }
.fm-field[data-state="warn"] .fm-chiptext, .fm-field[data-state="late"] .fm-chiptext { fill: #1B1F2A; }
.fm-hq { cursor: pointer; }
.fm-hqbox { fill: #1E3A73; }
.fm-tent { fill: #F2B800; }
.fm-hqlabel { fill: #fff; font-family: var(--disp); font-style: italic; font-weight: 800; font-size: 13px; }
.fm-compassbg { fill: #fff; stroke: #C9C4B6; }
.fm-needle { fill: var(--red); }
.fm-compasstext { fill: #1B1F2A; font-weight: 700; }
.fm-youhalo { fill: rgba(200,16,46,.18); }
.fm-youdot { fill: var(--red); stroke: #fff; stroke-width: 2; }
.fm-youtext { fill: var(--red); font-weight: 700; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.fm-tools { display: flex; gap: 8px; align-items: center; padding: 8px 0; flex-wrap: wrap; }
.fm-tools .legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-left: auto; }
.fm-tools .legend i { display: inline-block; width: 14px; height: 10px; border-radius: 3px; border: 3px solid; margin-right: 4px; vertical-align: -1px; }
:root[data-theme="dark"] .fm-ground { fill: #0E1E3F; }
:root[data-theme="dark"] .fm-road { fill: #1C2F5A; }
:root[data-theme="dark"] .fm-zone { fill: rgba(255,255,255,.03); stroke: rgba(255,255,255,.1); }
:root[data-theme="dark"] .fm-label { fill: #BFC9E0; }
:root[data-theme="dark"] .fm-grass { fill: #2E6B3C; }
:root[data-theme="dark"] .fm-field[data-state="done"] .fm-grass { fill: #3C4F44; }
:root[data-theme="dark"] .fm-compassbg { fill: #1E3A73; stroke: #2E4A85; }
:root[data-theme="dark"] .fm-compasstext { fill: #fff; }
:root[data-theme="dark"] .fm-field.sel .fm-ring { stroke: #fff; }
:root[data-theme="dark"] .fm-hqbox { fill: #F2B800; } :root[data-theme="dark"] .fm-tent { fill: #1E3A73; } :root[data-theme="dark"] .fm-hqlabel { fill: #1B1F2A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fm-ground { fill: #0E1E3F; } :root:not([data-theme="light"]) .fm-road { fill: #1C2F5A; } :root:not([data-theme="light"]) .fm-label { fill: #BFC9E0; } :root:not([data-theme="light"]) .fm-grass { fill: #2E6B3C; } :root:not([data-theme="light"]) .fm-compassbg { fill: #1E3A73; stroke: #2E4A85; } :root:not([data-theme="light"]) .fm-compasstext { fill: #fff; } :root:not([data-theme="light"]) .fm-hqbox { fill: #F2B800; } :root:not([data-theme="light"]) .fm-tent { fill: #1E3A73; } :root:not([data-theme="light"]) .fm-hqlabel { fill: #1B1F2A; } :root:not([data-theme="light"]) .fm-field.sel .fm-ring { stroke: #fff; } }
/* Fitness results sheet */
table.fit { min-width: 760px; }
table.fit td { padding: 4px 4px; vertical-align: middle; }
table.fit input.fit-t { width: 62px; padding: 8px 4px; font: inherit; text-align: right; border: 1px solid var(--muted); border-radius: 8px; background: var(--surface); color: var(--ink); min-height: 40px; }
table.fit input.fit-t.bad { border-color: var(--red); color: var(--red); font-weight: 700; }
table.fit tr.passed td:last-child { color: var(--green); }
.chip-btn.warn { border-color: var(--gold); }
table.fit input.fit-t.warnd { border-color: var(--gold); font-weight: 700; }
table.fit td.good { color: var(--green); } table.fit td.bad { color: var(--red); }
table.fit tr.premium td:last-child { color: #8a6500; }
.pacer .big { font-family: var(--disp); font-style: italic; font-weight: 800; font-size: 56px; line-height: 1; }
.pacer .phase { font-family: var(--disp); font-style: italic; font-weight: 800; font-size: 24px; }
.pacer .phase.run { color: var(--green); } .pacer .phase.walk { color: #8a6500; } .pacer .phase.rest { color: var(--muted); }
.pill.fitbadge { align-self: flex-start; }
table.fit tr.failed td:last-child { color: var(--red); }
.print-only { display: none; }
@media print {
  .print-only { display: inline; }
  table.fit { min-width: 0; }
  body.wide .app, .app { max-width: none; }
  table.fit input.fit-t { border: none; padding: 0; min-height: 0; width: auto; }

  body { background: #fff; color: #000; }
  body::before, .no-print, .top, .credit, #busy, #previewBar, .disp.h2:not(.print-keep) { display: none !important; }
  .eod-day .eod-rows { display: block !important; }
  .eod-day { break-inside: avoid; }
  .eod-pay table th, .eod-pay table td { border-color: #999 !important; color: #000; }
  .eod-pay .hint { color: #333; }
  .rowline { border-color: #999; color: #000; }
  .rowbtn { border: 0; box-shadow: none; background: none; color: #000; padding-left: 0; }
  .app { max-width: none; }
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* State view charts */
.stats.two { grid-template-columns: repeat(2, 1fr); }
.stat .sub { font-size: 12px; margin-top: 4px; }
.delta { font-weight: 700; color: var(--muted); }
.delta.up { color: var(--green); } .delta.down { color: var(--red); }
.chartcard { gap: 6px; }
.chart { width: 100%; height: auto; display: block; font-family: var(--body); }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .tick { font-size: 10px; fill: var(--muted); }
.chart .val { font-size: 11px; font-weight: 700; fill: var(--ink); }
.chart .sw1 { fill: var(--c1); } .chart .sw2 { fill: var(--c2); } .chart .sw3 { fill: var(--c3); }
.chart .inval { font-size: 10px; font-weight: 700; fill: #FFFFFF; }
.chart .bb.c1 { fill: var(--c1); } .chart .bb.c2 { fill: var(--c2); } .chart .bb.c3 { fill: var(--c3); }
.chart .bb.dim { opacity: 0.45; }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.chart .line.c1 { stroke: var(--c1); } .chart .line.c2 { stroke: var(--c2); } .chart .line.c3 { stroke: var(--c3); }
.chart .dot { stroke: var(--surface); stroke-width: 2; }
.chart .dot.c1 { fill: var(--c1); } .chart .dot.c2 { fill: var(--c2); } .chart .dot.c3 { fill: var(--c3); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); }
.legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.sw.c1 { background: var(--c1); } .sw.c2 { background: var(--c2); } .sw.c3 { background: var(--c3); }
.hbars { display: grid; gap: 6px; }
.hb { display: grid; grid-template-columns: 120px 1fr 72px; align-items: center; gap: 8px; font-size: 13px; }
.hb .ht { height: 10px; background: var(--line); border-radius: 5px; overflow: hidden; }
.hb .ht i { display: block; height: 100%; background: var(--c1); border-radius: 5px; }
.hb .hv { text-align: right; font-weight: 700; }
.hb .delta { font-size: 11px; }
table.dt { width: 100%; border-collapse: collapse; font-size: 14px; }
table.dt th, table.dt td { padding: 6px 4px; border-bottom: 1px solid var(--line); text-align: right; }
table.dt th:first-child, table.dt td:first-child { text-align: left; }

/* Your day: the staff tools as a two-up grid instead of a column of rows */
.tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 20px 0; }
.tools > div:empty { display: none; }
.tools .rowbtn { margin: 0 !important; width: 100%; min-height: 86px; padding: 12px; align-items: flex-start; flex-direction: column; justify-content: flex-start; gap: 4px; }
.tools .rowbtn > span { display: block; }
.tools .rowbtn .t { font-size: 16px; line-height: 1.15; }
.tools .rowbtn .s { font-size: 12.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tools .rowbtn > svg { display: none; }
.tools .rowbtn br { display: none; }

/* State view map */
.chart.map .state { fill: var(--bg); stroke: var(--muted); stroke-width: 1; }
.chart.map .city { font-size: 8px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 2.5px; stroke-linejoin: round; }
.chart.map .citydot { fill: var(--muted); }
.chart.map .ref { fill: var(--c1); fill-opacity: 0.55; stroke: var(--surface); stroke-width: 0.6; }
.chart.map .ref.near { fill: var(--c2); }
.chart.map .ring { fill: var(--c3); fill-opacity: 0.08; stroke: var(--c3); stroke-width: 0.8; stroke-dasharray: 2 2; }
.chart.map .pin { fill: var(--c3); stroke: var(--surface); stroke-width: 0.8; }
.chart.map .focusring { fill: var(--gold); fill-opacity: 0.18; stroke: var(--gold); stroke-width: 1.2; }
.chart.map .focusdot { fill: var(--gold); stroke: var(--ink); stroke-width: 0.8; }
.chip-btn.small { min-height: 36px; padding: 6px 12px; font-size: 14px; }

/* Folded sections: one row, tap to open */
details.fold { margin: 8px 20px 0; }
details.fold > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0,0,0,.08); cursor: pointer; font-weight: 700; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary .n { font-family: var(--disp); font-style: italic; font-weight: 800; font-size: 22px; color: var(--muted); }
details.fold > summary .n::after { content: ' +'; font-size: 18px; }
details.fold[open] > summary .n::after { content: ' \2212'; }
details.fold > .fold-body { margin: 0 -20px; }
details.fold > .fold-body > .list { padding-top: 8px; }
/* State view on a desktop: wide, two columns of cards, charts side by side */
@media (min-width: 900px) {
  body.wide .app { max-width: 1100px; }
  #stateBody { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: start; }
  #stateBody > .stats, #stateBody > .disp.h2, #stateBody > .pad, #stateBody > table, #stateBody > .card.chartcard.wide { grid-column: 1 / -1; }
  #stateBody > .stats.two { grid-template-columns: repeat(4, 1fr); }
}

/* Needs attention cards on the board */
.card.attn { width: calc(100% - 40px); text-align: left; font: inherit; color: var(--ink); cursor: pointer; border-color: var(--gold); border-width: 2px; gap: 4px; }
.card.attn.severe { border-color: var(--red); }
.card.attn .why { font-size: 14px; font-weight: 700; }
.card.attn .why.missing { color: var(--red); }
.card.attn .why.open { color: var(--muted); }
.card.attn .why.help { color: var(--red); }
.card.attn .why.alert { color: #8a6500; }

.late { margin-top: 8px; font-size: 14px; font-weight: 700; color: #8a6500; }
.late.ok { color: var(--green); }
.card.attn .why.warn { color: #8a6500; }
.card.attn .why.late { color: #8a6500; }
.card.attn .why.late-ok { color: var(--green); }
.card.attn .why .refname { color: inherit; }
.btn.small { white-space: nowrap; }

/* Coach availability calendar (2026.10.20-i) */
.avcal { display: flex; flex-direction: column; gap: 4px; }
.avweek { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.avweek.head .avdow { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); padding-bottom: 2px; }
.avday { display: flex; flex-direction: column; gap: 3px; padding: 4px 3px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); min-width: 0; }
.avday .n { font-size: 11px; font-weight: 700; text-align: center; color: var(--muted); white-space: nowrap; overflow: hidden; }
.avday.games { border-color: var(--navy); }
.avday.games .n { color: var(--ink); }
.avday.today { box-shadow: inset 0 0 0 2px var(--gold); }
.avday.past { opacity: .35; min-height: 62px; }
.avh { min-height: 30px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 700 11px/1 inherit; font-family: inherit; cursor: pointer; padding: 0; }
.avh.on { background: var(--green); border-color: var(--green); color: #fff; }
.avh:active { transform: translateY(1px); }

.avday.none { border-color: transparent; background: transparent; min-height: 62px; }
.avday.none .n { color: var(--muted); opacity: .6; }
.avh.off { visibility: hidden; min-height: 30px; }

/* Back-from-checkout toast (2026.10.21-g) */
.paytoast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 300; background: var(--surface); color: var(--ink); border: 1.5px solid var(--gold); border-radius: 12px; padding: 12px 18px; font-weight: 700; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: opacity .5s; max-width: min(90vw, 480px); text-align: center; }
.paytoast.gone { opacity: 0; pointer-events: none; }