/* Layout: one calm column. "Next up" is the only large card, "Get help now" a tinted block, the rest plain lists. Status is always a word; color only reinforces it. */
:root {
  --bg: #f3f6f5; --surface: #ffffff; --ink: #1b2a29; --muted: #566866; --line: #d5dedc; --accent: #1d6b66; --on-accent: #ffffff;
  --ok-fg: #1d6a3a; --ok-bg: #e2f2e7; --warn-fg: #7a4b00; --warn-bg: #fbeed2;
  --bad-fg: #a4201a; --bad-bg: #fbe6e4; --info-fg: #2c5b82; --info-bg: #e1edf7; --soft-bg: #e8eeed;
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1716; --surface: #172321; --ink: #e6eeed; --muted: #9db0ad; --line: #2a3b39; --accent: #6fcdc4; --on-accent: #0f1716;
    --ok-fg: #86d9a2; --ok-bg: #17321f; --warn-fg: #f0c26b; --warn-bg: #3a2c0d;
    --bad-fg: #ff9f98; --bad-bg: #3d1a18; --info-fg: #94c6f2; --info-bg: #14283a; --soft-bg: #22302e;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1716; --surface: #172321; --ink: #e6eeed; --muted: #9db0ad; --line: #2a3b39; --accent: #6fcdc4; --on-accent: #0f1716;
  --ok-fg: #86d9a2; --ok-bg: #17321f; --warn-fg: #f0c26b; --warn-bg: #3a2c0d;
  --bad-fg: #ff9f98; --bad-bg: #3d1a18; --info-fg: #94c6f2; --info-bg: #14283a; --soft-bg: #22302e;
  color-scheme: dark;
}
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.5 var(--font); font-variant-numeric: tabular-nums;
  padding-inline: 16px; padding-block: 20px 48px; overflow-wrap: anywhere; }
main { max-width: 34rem; margin-inline: auto; display: flex; flex-direction: column; gap: 1.75rem; }
h1, h2, h3, p, ul, figure { margin: 0; }
h1 { font-size: 1.0625rem; line-height: 1.3; font-weight: 700; }
h2 { font-size: 1.1875rem; line-height: 1.3; font-weight: 700; margin-bottom: .5rem; text-wrap: balance; }
h2 .hd { font-size: .875rem; font-weight: 400; color: var(--muted); margin-left: .5rem; }
h3 { font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 1rem 0 .125rem; }
.muted, .small, .sub { color: var(--muted); }
.small, .sub { font-size: .875rem; }
.state { padding: 1rem 0; color: var(--muted); }
.note { background: var(--warn-bg); color: var(--warn-fg); padding: .5rem .75rem; border-radius: 8px; font-size: .9375rem; font-weight: 600; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.lead { display: flex; flex-direction: column; gap: .75rem; }
.top { display: flex; flex-direction: column; align-items: flex-start; gap: .125rem; }
.line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .75rem; }
.day { font-weight: 600; color: var(--accent); }
.meta { display: flex; flex-wrap: wrap; gap: 0 .5rem; font-size: .875rem; color: var(--muted); }
.hero { background: var(--surface); border: 2px solid var(--accent); border-radius: 16px; padding: 1rem 1rem .75rem; }
.hero h2 { font-size: 1.375rem; color: var(--accent); }
.hero.dim { border-color: var(--line); }
.dim h2, .dim .time, .dim .title, .dim .detail { color: var(--muted); }
.next { display: flex; flex-direction: column; gap: .25rem; padding: .875rem 0; border-top: 1px solid var(--line); }
.next:first-child { border-top: 0; padding-top: .25rem; }
.when { display: flex; flex-wrap: wrap; align-items: baseline; gap: .125rem .75rem; }
.time { font: 700 1.25rem/1.3 var(--mono); }
.date { font-size: .9375rem; font-weight: 600; color: var(--muted); }
.when .chip { font-size: .9375rem; }
.next .title { font-size: 1.5rem; line-height: 1.25; font-weight: 700; text-wrap: balance; }
.next .detail { font-size: 1.0625rem; }
.next.rest { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .125rem .625rem; padding: .5rem 0; }
.rest .when { display: contents; }
.rest .time { order: 1; font-size: 1.0625rem; font-weight: 600; } .rest .date { order: 2; font-size: .875rem; }
.rest .title { order: 3; font-size: 1.0625rem; font-weight: 600; } .rest .chip { order: 4; font-size: .875rem; }
.rest .detail { order: 5; flex-basis: 100%; font-size: .875rem; color: var(--muted); }
.help { background: var(--info-bg); border-radius: 12px; padding: 1rem; }
.help summary { color: var(--info-fg); min-height: 44px; box-sizing: border-box; padding-block: .625rem; }
.help h3 { color: var(--info-fg); }
.signs { padding-left: 1.25rem; display: flex; flex-direction: column; gap: .375rem; margin: .25rem 0; }
.contact { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .75rem; margin-top: .5rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.cinfo { flex: 1 1 14rem; min-width: 0; } .clabel { font-weight: 600; } .acts { display: flex; gap: .5rem; }
.phone { font: 700 1.375rem/1.35 var(--mono); user-select: all; -webkit-user-select: all; }
.btn { box-sizing: border-box; min-height: 44px; min-width: 6rem; padding: 0 .875rem; display: inline-flex; align-items: center; justify-content: center;
  font: 600 1rem var(--font); color: var(--accent); background: var(--surface); border: 1.5px solid var(--accent); border-radius: 10px; cursor: pointer; text-decoration: none; }
.btn.call, .btn.primary { background: var(--accent); color: var(--on-accent); } .btn.more { margin-top: .5rem; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
summary:focus-visible, .scroll:focus-visible { border-radius: 4px; }
.rows { list-style: none; padding: 0; }
.row { display: flex; align-items: baseline; gap: .75rem; padding: .625rem 0; border-top: 1px solid var(--line); }
.row:first-child { border-top: 0; }
.row.stack { flex-direction: column; align-items: flex-start; gap: .125rem; } .row.stack details { align-self: stretch; }
.t { flex: none; width: 4.5rem; font-family: var(--mono); font-weight: 600; font-size: .875rem; }
.t small { display: block; font-family: var(--font); font-weight: 400; font-size: .875rem; color: var(--muted); }
.grow { flex: 1 1 0; min-width: 0; } .main, .sub { display: block; }
.chip { flex: 0 1 auto; min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; font-size: .875rem; font-weight: 600; line-height: 1.4; padding: .0625rem .625rem; border-radius: 999px; }
.row .chip { max-width: 55%; }
.ok { color: var(--ok-fg); background: var(--ok-bg); } .warn { color: var(--warn-fg); background: var(--warn-bg); }
.bad { color: var(--bad-fg); background: var(--bad-bg); } .info { color: var(--info-fg); background: var(--info-bg); }
.soft { color: var(--muted); background: var(--soft-bg); }
.meter { height: 8px; border-radius: 4px; background: var(--soft-bg); overflow: hidden; margin-top: .375rem; }
.meter span { display: block; height: 100%; background: var(--accent); }
.plain { padding-left: 1.25rem; display: flex; flex-direction: column; gap: .25rem; }
.flag-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: .125rem .625rem; } .ftitle { font-weight: 600; } .quiet .ftitle { font-weight: 400; }
details summary { cursor: pointer; font-weight: 600; color: var(--accent); padding: .625rem 0; }
details > p, details > ul { margin-bottom: .375rem; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-bottom: .75rem; }
.tile { display: flex; flex-direction: column; gap: .125rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .625rem .75rem; }
.tile:last-child:nth-child(odd) { grid-column: 1 / -1; } .tl { font-size: .875rem; color: var(--muted); } .tv { font-size: 1.25rem; line-height: 1.25; font-weight: 700; }
.chart { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .75rem .75rem .5rem; margin-bottom: .75rem; }
.chart figcaption { font-size: .875rem; font-weight: 600; margin-bottom: .25rem; }
.chart svg { display: block; width: 100%; max-width: 26rem; margin-inline: auto; height: auto; }
.grid { stroke: var(--line); stroke-width: 1; fill: none; } .axis { stroke: var(--muted); stroke-width: 1; fill: none; }
.ax { fill: var(--muted); font: 400 14px var(--font); } .val { fill: var(--ink); font: 600 14px var(--font); }
.trace { stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; fill: none; } .mark { fill: var(--accent); }
.scroll { overflow-x: auto; max-width: 100%; }
table { border-collapse: collapse; width: 100%; font-size: .875rem; }
th, td { padding: .375rem .625rem .375rem 0; text-align: left; white-space: nowrap; border-top: 1px solid var(--line); font-weight: 400; }
thead th { font-weight: 600; border-top: 0; border-bottom: 1px solid var(--line); }
tbody th, thead th:first-child { position: sticky; left: 0; background: var(--bg); padding-right: .75rem; } tbody th { font-weight: 600; }
.mname { font-weight: 700; font-size: 1.0625rem; }
.plan { align-self: stretch; background: var(--warn-bg); color: var(--warn-fg); border-radius: 8px; padding: .375rem .75rem; margin-block: .25rem; font-size: .9375rem; }
.taken { list-style: none; padding: 0; font-size: .9375rem; } .taken li { display: flex; gap: .75rem; } .tt { flex: none; width: 4.5rem; font-family: var(--mono); }
footer { display: flex; flex-direction: column; gap: .5rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.shell { max-width: 34rem; margin: 0 auto 1.25rem; display: grid; gap: .75rem; }
.shell .line { align-items: center; gap: .5rem; }
.shell strong { margin-right: auto; font-size: 1.25rem; }
nav { display: flex; gap: .5rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
nav a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 .5rem; color: var(--accent); font-weight: 600; }
section { min-width: 0; } .hero > * + * { margin-top: .75rem; }
.skip { position: absolute; top: -100px; } .skip:focus { top: 0; background: var(--surface); z-index: 9; padding: 1rem; }
.meal-source { white-space: pre-wrap; font-family: var(--font); line-height: 1.6; }
.meter progress { width: 100%; height: 8px; display: block; accent-color: var(--accent); }
.recovery-code { font-family: var(--mono); overflow-wrap: anywhere; padding: .25rem; }
html { scroll-padding-top: 1rem; } a { color: var(--accent); }
.focus-nav { display: flex; gap: .25rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.focus-nav a { flex: none; min-height: 44px; white-space: nowrap; }
.focus-heading { display: flex; flex-direction: column; gap: .25rem; }
.plan-section { display: flex; flex-direction: column; gap: .5rem; }
.plan-section + .plan-section { margin-top: 1.25rem; }
.markdown { display: flex; flex-direction: column; gap: .75rem; }
.markdown ul, .markdown ol { padding-left: 1.5rem; margin: 0; }
.markdown li + li { margin-top: .25rem; }
.markdown .plan-section h2, .markdown .plan-section h3, .markdown .plan-section h4 { margin: 0; }
.row { flex-wrap: wrap; }
.row > .grow { flex: 1 1 10rem; }
.row .chip { max-width: 100%; }
.tiles { grid-template-columns: repeat(auto-fit,minmax(min(100%,10rem),1fr)); }