:root {
  color-scheme: light;
  --page: #f9f9f7; --surface: #fcfcfb; --ink: #0b0b0b; --ink-2: #52514e; --muted: #6f6d68;
  --grid: #e1e0d9; --axis: #c3c2b7; --ring: rgba(11, 11, 11, 0.10);
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a;
  --good: #0ca30c; --warning: #fab219; --serious: #ec835a; --critical: #d03b3b; --up: #006300;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page: #0d0d0d; --surface: #1a1a19; --ink: #f0efec; --ink-2: #c3c2b7; --muted: #a3a29b;
    --grid: #2c2c2a; --axis: #383835; --ring: rgba(255, 255, 255, 0.10);
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --up: #0ca30c;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d; --surface: #1a1a19; --ink: #f0efec; --ink-2: #c3c2b7; --muted: #a3a29b;
  --grid: #2c2c2a; --axis: #383835; --ring: rgba(255, 255, 255, 0.10);
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --up: #0ca30c;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
h1, h2, h3, p { margin: 0; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--s1); outline-offset: 2px; }

/* Sign in */
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card { width: min(100%, 360px); background: var(--surface); border: 1px solid var(--ring); border-radius: 12px; padding: 28px; }
.login-card h1 { font-size: 22px; margin-bottom: 20px; }
.login-card label { display: block; color: var(--ink-2); font-size: 14px; margin: 14px 0 6px; }
.login-card input { width: 100%; padding: 10px 12px; background: var(--page); border: 1px solid var(--axis); border-radius: 8px; font-size: 16px; }
.login-card button { width: 100%; margin-top: 20px; padding: 11px; border: 0; border-radius: 8px; background: var(--ink); color: var(--surface); font-weight: 600; }
.login-error { margin-top: 14px; color: var(--critical); font-size: 14px; }

/* Layout */
.wrap { max-width: 1180px; margin: 0 auto; padding: 20px 16px 56px; }
.topbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.topbar h1 { font-size: 20px; }
.freshness { color: var(--muted); font-size: 13px; }
.spacer { flex: 1; }
.ghost { background: none; border: 1px solid var(--axis); border-radius: 8px; padding: 6px 10px; font-size: 13px; }
.topbar form { margin: 0; }
.filters { display: flex; gap: 6px; margin: 18px 0; flex-wrap: wrap; }
.filters button { background: none; border: 1px solid var(--axis); border-radius: 8px; padding: 6px 12px; font-size: 14px; }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); font-weight: 600; }
.card { background: var(--surface); border: 1px solid var(--ring); border-radius: 12px; padding: 16px; min-width: 0; }
.section-title { font-size: 16px; font-weight: 600; margin: 30px 0 12px; }
.note { color: var(--muted); font-size: 13px; }
.today { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 14px; }
.hero-value { font-size: 52px; font-weight: 600; line-height: 1.1; margin: 4px 0; }
.status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; margin-top: 6px; }
.status-mark { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.status-good { background: var(--good); } .status-warning { background: var(--warning); }
.status-serious { background: var(--serious); } .status-critical { background: var(--critical); }
.status-none { background: var(--axis); }
.rationale { color: var(--ink-2); font-size: 14px; margin-top: 10px; }
.workout-title { font-size: 19px; font-weight: 600; }
.workout-meta { color: var(--muted); font-size: 13px; margin: 2px 0 10px; }
.workout-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; color: var(--ink-2); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; margin-top: 14px; }
.tile-label { color: var(--ink-2); font-size: 13px; }
.tile-value { font-size: 26px; font-weight: 600; margin-top: 2px; }
.tile-unit { font-size: 14px; font-weight: 400; color: var(--muted); margin-left: 3px; }
.tile-delta { color: var(--muted); font-size: 13px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 14px; }
.chart-title { font-size: 15px; font-weight: 600; }
.chart-sub { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.chart-body { position: relative; width: 100%; }
.chart-body svg { display: block; width: 100%; overflow: visible; touch-action: pan-y; }
.chart-body svg:focus-visible { outline-offset: 4px; }
.empty { display: grid; place-items: center; min-height: 120px; color: var(--muted); font-size: 14px; text-align: center; padding: 12px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.key { width: 14px; height: 2px; border-radius: 1px; display: inline-block; }
.key.band { height: 10px; border-radius: 2px; }
.bg-s1 { background: var(--s1); } .bg-s2 { background: var(--s2); } .bg-s3 { background: var(--s3); } .bg-band { background: var(--s1); opacity: .16; }

/* Chart marks: classes keep colors in one place and within the content security policy. */
.grid-line { stroke: var(--grid); stroke-width: 1; }
.base-line { stroke: var(--axis); stroke-width: 1; }
.tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.line-s1 { stroke: var(--s1); } .line-s2 { stroke: var(--s2); } .line-s3 { stroke: var(--s3); }
.dot { stroke: var(--surface); stroke-width: 2; }
.fill-s1 { fill: var(--s1); } .fill-s2 { fill: var(--s2); } .fill-s3 { fill: var(--s3); }
.band-fill { fill: var(--s1); opacity: .10; }
.ref-line { stroke: var(--muted); stroke-width: 1; }
.ref-label { fill: var(--ink-2); font-size: 11px; }
.end-label { fill: var(--ink); font-size: 12px; font-weight: 600; }
.bar { fill: var(--s1); }
.bar.active { opacity: .72; }
.crosshair { stroke: var(--axis); stroke-width: 1; }
.spark { fill: none; stroke: var(--s1); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tooltip { position: fixed; z-index: 5; pointer-events: none; background: var(--surface); border: 1px solid var(--ring); border-radius: 8px; padding: 8px 10px; font-size: 13px; box-shadow: 0 4px 16px rgba(0, 0, 0, .14); max-width: 240px; }
.tooltip-date { color: var(--muted); font-size: 12px; margin-bottom: 3px; }
.tooltip-row { display: flex; align-items: center; gap: 7px; }
.tooltip-row strong { font-weight: 600; }
.tooltip-row span { color: var(--ink-2); }

/* Tables and disclosure */
details > summary { cursor: pointer; color: var(--ink-2); font-size: 13px; margin-top: 8px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--muted); font-weight: 500; font-size: 13px; }
th, td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--grid); vertical-align: top; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.mini { font-size: 12px; margin-top: 8px; }
.mini th, .mini td { padding: 3px 8px 3px 0; }
.plan-day { border-bottom: 1px solid var(--grid); padding: 10px 0; }
.plan-day:last-child { border: 0; }
.plan-day summary { margin: 0; color: var(--ink); font-size: 14px; list-style-position: outside; }
.plan-date { color: var(--muted); display: inline-block; min-width: 92px; font-variant-numeric: tabular-nums; }
.plan-day .workout-body { margin-top: 8px; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 14px; }
.decision { padding: 10px 0; border-bottom: 1px solid var(--grid); font-size: 14px; }
.decision:last-child { border: 0; }
.decision p { color: var(--ink-2); margin-top: 3px; overflow-wrap: anywhere; }
.loading { padding: 40px 16px; color: var(--muted); text-align: center; }
@media (max-width: 720px) { .today { grid-template-columns: 1fr; } .hero-value { font-size: 48px; } }
@media (forced-colors: active) { .line, .bar, .dot { forced-color-adjust: none; } }