:root {
  --bg: #f4f5f7; --card: #fff; --ink: #1c2430; --muted: #6b7280; --line: #e3e6ea;
  --brand: #1e3a5f; --primary: #2563eb; --bad: #c62828; --bad-bg: #fdecec; --warn: #a15c00; --warn-bg: #fff4e0;
  --ok: #1b7f3b; --ok-bg: #e8f6ec;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #11151b; --card: #1a2029; --ink: #e8ebef; --muted: #98a1ad; --line: #2a323d;
    --bad-bg: #3a1c1c; --warn-bg: #3a2c12; --ok-bg: #16301f; --bad: #ff7a7a; --warn: #f0b45a; --ok: #6fd18f; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--ink);
  padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
main { max-width: 640px; margin: 0 auto; padding: 12px 16px; }
a { color: var(--primary); text-decoration: none; }
h1 { font-size: 18px; margin: 0; }
h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 20px 0 8px; display: flex; align-items: center; gap: 8px; }
h3 { font-size: 15px; margin: 14px 0 6px; display: flex; align-items: center; gap: 8px; }
.top { position: sticky; top: 0; z-index: 2; background: var(--brand); color: #fff; padding: calc(12px + env(safe-area-inset-top)) 16px 12px; display: flex; align-items: center; gap: 12px; }
.top .back { color: #fff; font-size: 28px; line-height: 1; padding: 0 8px 0 0; }
.tabs { position: fixed; bottom: 0; left: 0; right: 0; display: flex; background: var(--card); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); z-index: 2; }
.tabs a { flex: 1; text-align: center; padding: 14px 0; color: var(--muted); font-weight: 600; }
.tabs a.on { color: var(--primary); box-shadow: inset 0 3px 0 var(--primary); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin: 10px 0; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; gap: 10px; align-items: flex-end; }
.row > label, .row > input { flex: 1; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--muted); }
label.check { flex-direction: row; align-items: center; gap: 10px; color: var(--ink); font-size: 16px; padding: 4px 0; }
input, select, button, .button { font: inherit; font-size: 16px; }
input, select { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); min-height: 44px; }
input[type=checkbox], input[type=radio] { width: 22px; min-height: 22px; height: 22px; flex: 0 0 22px; margin: 0; }
input[type=color] { width: 56px; flex: 0 0 56px; padding: 4px; }
fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 0; }
legend { font-size: 14px; color: var(--muted); }
button, .button { display: block; text-align: center; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-weight: 600; cursor: pointer; min-height: 44px; }
.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.danger { color: var(--bad); }
.small { padding: 6px 12px; min-height: 36px; font-size: 14px; }
form.inline { margin: 0; }
.pager { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 14px; }
.pager a { padding: 8px 4px; }
.pager .today { font-weight: 700; }
.alert { background: var(--bad-bg); color: var(--bad); border-radius: 12px; padding: 10px 14px; }
.alert ul { margin: 4px 0 0; padding-left: 18px; }
.alert a { color: inherit; text-decoration: underline; }
.good { background: var(--ok-bg); color: var(--ok); border-radius: 12px; padding: 10px 14px; font-weight: 600; }
.flash { max-width: 608px; margin: 10px auto 0; background: var(--ok-bg); color: var(--ok); border-radius: 10px; padding: 10px 14px; font-weight: 600; }
.err { color: var(--bad); font-weight: 600; margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.big { font-size: 18px; margin: 4px 0; }
.bad-text { color: var(--bad); font-weight: 700; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.shift { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--ok); border-radius: 10px; padding: 12px; margin: 6px 0; color: var(--ink); min-height: 52px; }
.shift.warn { border-left-color: var(--warn); }
.shift.bad { border-left-color: var(--bad); }
.shift .when { flex: 0 0 auto; font-weight: 600; min-width: 96px; }
.shift .when small { display: block; color: var(--muted); font-weight: 400; }
.shift .who { flex: 1; }
.shift.bad .who { color: var(--bad); font-weight: 700; }
.badge { border-radius: 999px; padding: 2px 9px; font-size: 13px; font-weight: 700; }
.badge.bad { background: var(--bad-bg); color: var(--bad); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.issues { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 4px; }
.issues li { border-radius: 6px; padding: 4px 8px; font-size: 14px; }
.issues .bad { background: var(--bad-bg); color: var(--bad); }
.issues .warn { background: var(--warn-bg); color: var(--warn); }
.cands, .list { list-style: none; padding: 0; margin: 0; }
.cands li, .list li { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin: 6px 0; }
.cand { display: flex; align-items: center; gap: 10px; }
.cand > div { flex: 1; }
.cand .button { flex: 0 0 auto; }
.list li.row { align-items: center; justify-content: space-between; }
.list a { display: flex; flex-direction: column; color: var(--ink); }
.tel { display: inline-block; font-size: 14px; margin-top: 4px; }
details { margin: 12px 0; }
summary { cursor: pointer; padding: 10px 0; color: var(--muted); font-weight: 600; }
.actions { margin-top: 24px; }
.days { display: flex; flex-wrap: wrap; gap: 6px; }
.days label { flex-direction: row; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; color: var(--ink); }
table.week { width: 100%; border-collapse: collapse; background: var(--card); border-radius: 12px; overflow: hidden; font-size: 14px; }
.week th, .week td { padding: 10px 6px; border-bottom: 1px solid var(--line); text-align: center; }
.week thead th { font-size: 12px; color: var(--muted); font-weight: 600; }
.week tbody th { text-align: left; white-space: nowrap; }
.week td.bad, .week td.bad a { color: var(--bad); font-weight: 700; }
.week td.ok { color: var(--ok); }
.week td small { display: block; font-size: 11px; }
.stack form.inline button { width: 100%; }
code.url { display: block; padding: 10px; background: var(--bg); border-radius: 8px; word-break: break-all; font-size: 14px; }
.tabs a { font-size: 15px; }
.tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); vertical-align: middle; }
.rule { display: flex; gap: 10px; align-items: flex-end; }
.rule > label { flex: 1; }
.rule select { width: auto; flex: 0 0 auto; }
.rule .row { align-items: center; }
.unit { color: var(--muted); flex: 0 0 auto; }
.tag.grey { background: var(--line); color: var(--muted); }
.special { background: var(--warn-bg); color: var(--warn); border-radius: 10px; padding: 8px 12px; font-weight: 700; margin: 0 0 8px; }

/* MacBook / wide screens: use the room for tables and lists */
@media (min-width: 900px) {
  main { max-width: 960px; }
  .flash { max-width: 928px; }
  .tabs { position: sticky; top: 0; justify-content: center; border-top: 0; border-bottom: 1px solid var(--line); }
  .tabs a { flex: 0 0 140px; }
  body { padding-bottom: 0; display: flex; flex-direction: column; min-height: 100vh; }
  .top { position: static; order: 0; }
  .tabs { order: 1; z-index: 3; }
  .flash { order: 2; width: 100%; }
  main { order: 3; width: 100%; }
}

.row.wrap { flex-wrap: wrap; gap: 8px; }
.row.wrap .button, .row.wrap form button { width: auto; }
.warn-text { color: var(--warn); font-weight: 700; }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.roster { border-collapse: collapse; width: 100%; background: var(--card); font-size: 13px; }
.roster th, .roster td { border: 1px solid var(--line); padding: 6px; text-align: center; white-space: nowrap; }
.roster tbody th { text-align: left; }
.roster tr.open th, .roster tr.open td { color: var(--bad); font-weight: 700; }
details.alert summary { color: var(--bad); }
/* printout: light, landscape, no app chrome */
body.print { background: #fff; color: #000; padding: 12px; }
body.print .roster { background: #fff; font-size: 12px; }
body.print .roster th, body.print .roster td { border-color: #999; color: #000; }
.print-head h1 { font-size: 18px; margin: 0 0 4px; }
@media print {
  @page { size: landscape; margin: 10mm; }
  .noprint { display: none; }
  body.print { padding: 0; }
  h3 { break-after: avoid; }
  table.roster { break-inside: auto; }
  .roster tr { break-inside: avoid; }
}

/* demo banner, getting-started guide, one-tap presets, misc */
.demo { margin: 0; padding: 8px 16px; background: var(--warn-bg); color: var(--warn); font-weight: 700; font-size: 14px; text-align: center; }
.getting { border-color: var(--primary); }
.getting h2 { margin-top: 0; color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 16px; }
.getting ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.getting li.done { color: var(--muted); }
.getting form.inline { display: inline-block; margin-left: 4px; }
.presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.presets form.inline button { width: auto; }
.toc { margin: 4px 0 8px; line-height: 2; }
.quick { margin-top: 18px; }
.week-card h2 { margin-top: 0; color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 16px; }
.week-card .row.wrap { margin-top: 8px; }
.compare-form { margin: 8px 0; align-items: flex-end; }
.compare-form button { width: auto; }
.roster tr.total th, .roster tr.total td { font-weight: 700; color: var(--muted); }
.sign { margin-top: 18px; font-size: 13px; }
details > summary { list-style-position: inside; }
details.card > summary { padding: 0; }
details.card[open] > summary { margin-bottom: 10px; }
.list li form.row { gap: 8px; align-items: center; }
.list li form.row input[name=name] { flex: 1; }