@font-face { font-family: "Big Shoulders"; src: url("fonts/big-shoulders.woff2") format("woff2"); font-weight: 600 900; font-display: swap; }

:root {
  --bg: #f3f6f6;          /* pool deck */
  --surface: #ffffff;
  --ink: #0f2730;         /* deep water */
  --muted: #4a5d64;
  --line: #cbd8db;
  --line-strong: #7f949a; /* input borders, 3:1 on white */
  --red: #c4281c;         /* rescue tube */
  --red-ink: #ffffff;
  --red-text: #b0231a;
  --water: #dff0f2;       /* table head, off-stand tint */
  --water-ink: #0b4a57;
  --warn-bg: #fff1d6;
  --warn-ink: #6b4300;
  --focus: #0b6f86;
  --off: #eef2f3;
  --t0: #ffe3dd; --t1: #dcebff; --t2: #e2f5d8; --t3: #fff1c2; --t4: #efe0fb;
  --t5: #d6f3f1; --t6: #ffe0ef; --t7: #e9e4d8; --t8: #e0e7ff; --t9: #f6f0a8;
  --heading: "Big Shoulders", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b171c;
    --surface: #11232a;
    --ink: #e6f0f2;
    --muted: #a6b8bd;
    --line: #27424b;
    --line-strong: #6f8a92;
    --red: #d8372a;
    --red-ink: #ffffff;
    --red-text: #ff8a7e;
    --water: #173740;
    --water-ink: #bfe6ec;
    --warn-bg: #3a2c0d;
    --warn-ink: #ffd88a;
    --focus: #6fd0e4;
    --off: #16292f;
    --t0: #4a2621; --t1: #1f3352; --t2: #24402a; --t3: #463a14; --t4: #3a2850;
    --t5: #17423f; --t6: #4a2238; --t7: #3b362a; --t8: #26305a; --t9: #44400f;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 var(--body); }
a { color: var(--water-ink); text-underline-offset: 2px; }
@media (prefers-color-scheme: light) { a { color: #0b5a69; } }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--surface); color: var(--ink); padding: 10px 14px; z-index: 10; }
.skip:focus { left: 8px; top: 8px; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* Top bar: the rescue-red band */
.topbar { background: var(--red); color: var(--red-ink); }
.topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font: 800 26px/1 var(--heading); letter-spacing: .3px; }
.topbar nav { display: flex; gap: 18px; }
.topbar nav a { color: inherit; font-weight: 600; font-size: 15px; text-decoration: none; padding: 12px 0; }
.topbar nav a:hover { text-decoration: underline; }
.topbar :focus-visible { outline-color: #fff; }

h1, h2, h3 { font-family: var(--heading); font-weight: 800; line-height: 1.05; letter-spacing: .2px; }
.hero { padding: 26px 0 8px; max-width: 760px; }
h1 { font-size: clamp(38px, 7vw, 60px); margin: 0 0 8px; }
.lede { margin: 0; font-size: 18px; color: var(--muted); max-width: 62ch; }

/* Maker layout: form left, chart right */
.maker { display: grid; gap: 24px; padding: 18px 0 8px; }
@media (min-width: 940px) { .maker { grid-template-columns: 340px minmax(0, 1fr); align-items: start; } }

.setup { display: grid; gap: 18px; min-width: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend, .field > label, .more > summary { font-weight: 700; font-size: 16px; padding: 0; margin-bottom: 6px; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 14px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field > label { margin: 0; }
input[type="text"], input[type="number"], input[type="time"] {
  width: 100%; min-width: 0; font: inherit; font-size: 17px; color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--line-strong); border-radius: 6px; padding: 9px 10px; min-height: 46px;
}
input[type="time"] { padding-right: 6px; }
.stepper { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; }
.stepper input { text-align: center; border-radius: 0; border-left: 0; border-right: 0; -moz-appearance: textfield; font-weight: 700; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.step-btn { font: 700 22px/1 var(--body); color: var(--ink); background: var(--water); border: 1.5px solid var(--line-strong); min-height: 46px; cursor: pointer; }
.step-btn:first-child { border-radius: 6px 0 0 6px; }
.step-btn:last-child { border-radius: 0 6px 6px 0; }
.suffix { position: relative; }
.suffix input { padding-right: 46px; }
.suffix span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.hint { margin: 0 0 8px; color: var(--muted); font-size: 15px; }

.name-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; counter-reset: n; }
.name-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr) 44px; align-items: center; gap: 6px; counter-increment: n; }
.name-list li::before { content: counter(n); font: 800 20px/1 var(--heading); color: var(--muted); text-align: right; }
.guards-list li { grid-template-columns: 26px minmax(0, 1fr) auto; }
.starts { color: var(--muted); font-size: 14px; min-width: 0; max-width: 9.5em; overflow-wrap: anywhere; line-height: 1.25; }
.rm { width: 44px; height: 44px; border: 1.5px solid var(--line); background: transparent; color: var(--muted); border-radius: 6px; font-size: 24px; line-height: 1; cursor: pointer; }
.rm:hover:not(:disabled) { color: var(--red-text); border-color: var(--red-text); }
.rm:disabled { opacity: .35; cursor: default; }
.add, .linkish { font: inherit; font-size: 16px; font-weight: 600; background: none; border: 0; color: var(--water-ink); padding: 10px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; }
@media (prefers-color-scheme: light) { .add, .linkish { color: #0b5a69; } }
.add::before { content: "+ "; text-decoration: none; }
.more { border-top: 1px solid var(--line); padding-top: 12px; }
.more > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 36px; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::before { content: ""; width: 8px; height: 8px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; margin-right: 4px; }
.more[open] > summary::before { transform: rotate(45deg); }
.more .field { margin: 6px 0 12px; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--red); }

/* Per-guard hours (inside Guard names and hours) */
.guards-list .hrs { grid-column: 2 / -1; margin: -2px 0 6px; }
.hrs summary { cursor: pointer; color: var(--muted); font-size: 15px; min-height: 44px; display: flex; align-items: center; gap: 6px; list-style: none; }
.hrs summary::-webkit-details-marker { display: none; }
.hrs summary::before { content: "+"; font: 800 18px/1 var(--heading); color: var(--red-text); width: 12px; }
.hrs[open] summary::before { content: "\2212"; }
.hrs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 4px 0 2px; }
.hrs-grid label { display: grid; gap: 4px; font-size: 15px; font-weight: 600; min-width: 0; }
.hrs-grid .mw { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.hrs-grid .mw[hidden] { display: none; }
.hrs-grid .linkish { justify-self: start; grid-column: 1 / -1; padding: 4px 0; font-size: 15px; }
select { width: 100%; font: inherit; font-size: 17px; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 6px; padding: 9px 10px; min-height: 46px; }
.name-list input[aria-invalid="true"] { border-color: var(--warn-ink); background: var(--warn-bg); }
.dup-msg { margin: 0 0 8px; padding: 8px 10px; background: var(--warn-bg); color: var(--warn-ink); border-left: 4px solid currentColor; font-size: 15px; }
.dup-msg[hidden] { display: none; }

/* Result */
.result { min-width: 0; }
.summary { background: var(--surface); border-top: 6px solid var(--red); border-radius: 0 0 8px 8px; padding: 18px 20px 20px; box-shadow: 0 1px 3px rgba(15, 39, 48, .12); }
.summary h2 { font-size: 34px; margin: 0 0 6px; }
.sum-line { margin: 0 0 12px; font-size: 18px; }
.summary.is-error { border-top-color: var(--warn-ink); }
.order { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; margin: 0 0 14px; font-size: 15px; }
.order span { padding: 3px 9px; border-radius: 4px; background: var(--water); color: var(--water-ink); font-weight: 600; }
.order span.offspot { background: var(--off); color: var(--muted); border: 1px dashed var(--line-strong); }
.order span.again { opacity: .7; }
.order i { font-style: normal; color: var(--muted); }
.warnings { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.warnings:empty { display: none; }
.warnings li { background: var(--warn-bg); color: var(--warn-ink); padding: 10px 12px; border-left: 4px solid currentColor; font-size: 16px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { font: inherit; font-size: 16px; font-weight: 700; min-height: 46px; padding: 0 18px; border-radius: 6px; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; }
.btn.primary { background: var(--red); border-color: var(--red); color: var(--red-ink); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.share-note { margin: 10px 0 0; font-size: 15px; }
.share-note input { margin-top: 6px; font-size: 15px; }

.views { display: flex; gap: 0; margin: 22px 0 10px; border-bottom: 2px solid var(--line); }
.views button { font: 700 17px var(--body); background: none; border: 0; border-bottom: 4px solid transparent; margin-bottom: -2px; padding: 10px 16px; min-height: 46px; color: var(--muted); cursor: pointer; }
.views button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--red); }

.table-fit { overflow-x: auto; margin: 0 0 14px; }
.grid { border-collapse: collapse; width: 100%; font-size: 15px; background: var(--surface); }
.grid caption { text-align: left; font: 800 20px var(--heading); padding: 0 0 6px; display: none; }
.grid th, .grid td { border: 1px solid var(--line); padding: 7px 8px; text-align: left; vertical-align: middle; }
.grid thead th { background: var(--water); color: var(--water-ink); font-weight: 700; white-space: nowrap; }
.grid thead th.offcol { background: var(--off); color: var(--muted); }
.grid .tm { font: 700 17px var(--heading); letter-spacing: .3px; white-space: nowrap; width: 1%; color: var(--ink); background: var(--surface); }
.grid thead .tm { background: var(--water); color: var(--water-ink); font-family: var(--body); font-size: 15px; }
.grid td { white-space: nowrap; }
.grid td.offcol { font-style: italic; color: var(--muted); }
.grid.by-guard td { background: var(--surface); }
.grid.by-guard td.offcol { background: var(--off); }
.g0 { background: var(--t0); } .g1 { background: var(--t1); } .g2 { background: var(--t2); } .g3 { background: var(--t3); } .g4 { background: var(--t4); }
.g5 { background: var(--t5); } .g6 { background: var(--t6); } .g7 { background: var(--t7); } .g8 { background: var(--t8); } .g9 { background: var(--t9); }
.grid td.g { font-weight: 600; }
.grid td.g.offcol { font-weight: 500; }
.grid.by-guard thead th[class^="g"] { color: var(--ink); }
.grid thead th.g0 { background: var(--t0); } .grid thead th.g1 { background: var(--t1); } .grid thead th.g2 { background: var(--t2); }
.grid thead th.g3 { background: var(--t3); } .grid thead th.g4 { background: var(--t4); } .grid thead th.g5 { background: var(--t5); }
.grid thead th.g6 { background: var(--t6); } .grid thead th.g7 { background: var(--t7); } .grid thead th.g8 { background: var(--t8); }
.grid thead th.g9 { background: var(--t9); }
.cap-when { font-family: var(--body); font-weight: 400; font-size: 13px; }
.ends, .totals { color: var(--muted); font-size: 15px; margin: 0 0 8px; }
.hours-line { margin: -4px 0 12px; font-size: 16px; }
.hours-line[hidden] { display: none; }
.grid td.nog { background: var(--warn-bg); color: var(--warn-ink); font-weight: 700; }
.grid td.away, .grid td.awaycol.has { color: var(--muted); font-size: 14px;
  background: repeating-linear-gradient(135deg, var(--off) 0 6px, var(--surface) 6px 12px); }
.grid td.awaycol { white-space: normal; min-width: 7em; color: var(--muted); font-size: 14px; }
.grid td.awaycol span { white-space: nowrap; }
.grid thead th.awaycol { background: var(--off); color: var(--muted); }
.print-head { display: none; }

/* Live timer */
.live { padding: 18px 0 40px; }
.is-live .hero, .is-live .maker, .is-live .content, .is-live footer, .is-live .topbar nav { display: none; }
.live-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.live-when { font-size: 30px; margin: 0; }
.countdown { font: 900 clamp(110px, 32vw, 260px)/0.95 var(--heading); margin: 8px 0 4px; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.live.soon .countdown { color: var(--red-text); }
.live-sub { margin: 0 0 14px; font-size: 18px; color: var(--muted); min-height: 1.5em; }
.live-cols { display: grid; gap: 20px; }
@media (min-width: 760px) { .live-cols { grid-template-columns: 1.2fr 1fr; } }
.live h3 { font-size: 24px; margin: 0 0 8px; }
.moves, .now { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.moves li, .now li { display: flex; justify-content: space-between; gap: 12px; background: var(--surface); border-left: 5px solid var(--red); padding: 10px 12px; font-size: 19px; flex-wrap: wrap; }
.now li { border-left-color: var(--water-ink); }
.now li.offspot { border-left-color: var(--line-strong); color: var(--muted); }
.now li.nog { background: var(--warn-bg); color: var(--warn-ink); border-left-color: currentColor; }
.now li.away { border-left: 5px dotted var(--line-strong); color: var(--muted); }
.live-opts { margin-top: 20px; }

/* Content */
.content { max-width: 760px; padding: 30px 0 40px; }
.content h2 { font-size: 34px; margin: 34px 0 10px; }
.content p { margin: 0 0 14px; }
.setups { padding-left: 20px; margin: 0 0 10px; }
.setups li { margin: 0 0 6px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 700; padding: 12px 0; list-style: none; display: flex; gap: 10px; align-items: baseline; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; font: 800 22px/1 var(--heading); color: var(--red-text); width: 14px; flex: none; }
.faq details[open] summary::before { content: "\2212"; }
.faq details p { margin: 0 0 14px 24px; }
.sources { font-size: 15px; color: var(--muted); margin-top: 24px; }

/* Sub-pages */
.crumbs { font-size: 15px; padding: 16px 0 0; color: var(--muted); }
.crumbs a { color: inherit; }
.setup-page .content { padding-top: 10px; }
.open-maker { margin: 6px 0 22px; }
a.btn { display: inline-flex; align-items: center; text-decoration: none; padding-top: 8px; padding-bottom: 8px; }
.setup-page .grid caption { display: table-caption; }

footer { border-top: 1px solid var(--line); padding: 24px 0 36px; color: var(--muted); font-size: 15px; }
footer p { margin: 0 0 8px; }
footer a { color: inherit; }

@media (max-width: 420px) {
  .wrap { padding: 0 14px; }
  .brand { font-size: 23px; }
  .topbar nav { gap: 14px; }
  .summary { padding: 16px 14px; }
  .summary h2 { font-size: 30px; }
  .grid th, .grid td { padding: 6px 5px; font-size: 14px; }
  .grid .tm { font-size: 15px; }
}
.to-chart { margin: -6px 0 -6px; font-size: 16px; font-weight: 600; }
.to-chart a { display: inline-block; padding: 10px 0; min-height: 44px; }
.to-chart a::after { content: " \2193"; }
#result { scroll-margin-top: 12px; }
@media (min-width: 940px) { .to-chart { display: none; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Print: chart by stand, then chart by guard on a new page */
@page { size: auto; margin: 12mm; }
@media print {
  :root { --bg: #fff; --surface: #fff; --ink: #000; --muted: #333; --line: #888; --water: #e6f2f4; --water-ink: #000; --off: #f2f2f2;
    --t0: #ffe3dd; --t1: #dcebff; --t2: #e2f5d8; --t3: #fff1c2; --t4: #efe0fb; --t5: #d6f3f1; --t6: #ffe0ef; --t7: #e9e4d8; --t8: #e0e7ff; --t9: #f6f0a8; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .topbar, .hero, .setup, .summary, .views, .live, .content, footer, .skip { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  .maker { display: block; padding: 0; }
  .print-head { display: block; margin: 0 0 3mm; }
  .print-head h2 { font: 800 22pt/1 var(--heading); margin: 0 0 1mm; }
  .print-head p { margin: 0 0 1mm; font-size: 10.5pt; }
  .print-head { display: grid !important; grid-template-columns: 1fr auto; column-gap: 8mm; }
  .print-head h2 { grid-column: 1; }
  .print-head .ph-date { grid-column: 2; grid-row: 1; align-self: end; }
  .print-head p:not(.ph-date) { grid-column: 1 / -1; }
  .grid td.away, .grid td.awaycol, .grid td.awaycol.has { font-size: inherit; }
  .grid td.away, .grid td.awaycol.has { background: repeating-linear-gradient(135deg, #eee 0 1.2mm, #fff 1.2mm 2.4mm); color: #333; }
  .grid td.nog { background: #fff; color: #000; border: 1.2pt solid #000; }
  .chart, .chart[hidden] { display: block !important; }
  .setup-page .hero { display: block !important; padding: 0 0 3mm; }
  .setup-page h1 { font-size: 22pt; margin: 0 0 1mm; }
  .setup-page .lede { font-size: 10.5pt; color: #333; }
  .open-maker, .crumbs { display: none !important; }
  #chart-guard { break-before: page; }
  .table-fit { overflow: visible; margin: 0 0 4mm; break-inside: auto; }
  .grid { font-size: 10pt; width: 100%; }
  .grid td, .grid thead th { white-space: normal; overflow-wrap: break-word; }
  .grid.wide { font-size: 8.5pt; }
  .grid.wide th, .grid.wide td { padding: 0.9mm 1.1mm; }
  .grid .tm { white-space: nowrap; }
  .grid caption { display: table-caption; font-size: 14pt; padding-bottom: 1.5mm; }
  .grid thead { display: table-header-group; }
  .grid tr { break-inside: avoid; }
  .grid th, .grid td { border: 0.6pt solid #888; padding: 1.9mm 1.8mm; }
  .grid .tm { font-size: 11pt; }
  .ends, .totals { font-size: 9.5pt; color: #333; }
}