/* ---------------------------------------------------------------------------
   Tokens
   Shared with the lifting app so the two read as a set. Light and dark are both
   selected, not flipped: dark is the default on a phone at 6am; light follows
   the OS.
--------------------------------------------------------------------------- */
:root {
  color-scheme: light;
  --page: #f9f9f7;
  --surface: #fcfcfb;
  --surface-2: #f1f0ec;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #898781;
  --line: #e1e0d9;
  --rule: #c3c2b7;
  --accent: #2a78d6;
  --accent-ink: #ffffff;
  --good: #0ca30c;
  --warn: #fab219;
  --crit: #d03b3b;
  --good-text: #006300;
  --warn-text: #8a5d00;
  --shadow: 0 1px 2px rgba(11, 11, 11, 0.06), 0 4px 16px rgba(11, 11, 11, 0.04);
  --radius: 14px;
  --tap: 48px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --page: #0d0d0d;
    --surface: #1a1a19;
    --surface-2: #232322;
    --ink: #ffffff;
    --ink-2: #c3c2b7;
    --muted: #898781;
    --line: #2c2c2a;
    --rule: #383835;
    --accent: #3987e5;
    --good-text: #35c035;
    --warn-text: #e0a63c;
    --shadow: none;
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --page: #0d0d0d;
  --surface: #1a1a19;
  --surface-2: #232322;
  --ink: #ffffff;
  --ink-2: #c3c2b7;
  --muted: #898781;
  --line: #2c2c2a;
  --rule: #383835;
  --accent: #3987e5;
  --good-text: #35c035;
  --warn-text: #e0a63c;
  --shadow: none;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--page);
  color: var(--ink);
  font: 16px/1.45 system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

body {
  min-height: 100svh;
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

/* --------------------------------------------------------------------------
   Shell
-------------------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  background: color-mix(in srgb, var(--page) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar h1 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
.topbar .spacer { flex: 1; }

.wrap { max-width: 640px; margin: 0 auto; padding: 16px; }

.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar button {
  background: none;
  border: 0;
  padding: 10px 2px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 550;
  color: var(--muted);
}
.tabbar button[aria-current='page'] { color: var(--accent); }
.tabbar svg { width: 21px; height: 21px; }

/* --------------------------------------------------------------------------
   Cards & type
-------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 14px;
}
.card.flush { padding: 0; overflow: hidden; }
.card.accent { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
}
.h2 { margin: 0 0 2px; font-size: 22px; font-weight: 680; letter-spacing: -0.02em; }
.h3 { margin: 0 0 2px; font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
.sub { margin: 0; color: var(--ink-2); font-size: 14px; }
.hint { color: var(--muted); font-size: 13px; }

.hero {
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hero .unit { font-size: 18px; font-weight: 550; color: var(--muted); letter-spacing: 0; }

/* --------------------------------------------------------------------------
   Buttons
-------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 20px;
  border-radius: 12px;
  border: 1px solid var(--rule);
  background: var(--surface);
  font-weight: 600;
  transition: transform 0.06s ease;
}
.btn:active { transform: scale(0.98); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.ghost { border-color: transparent; background: var(--surface-2); }
.btn.danger { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 40%, transparent); }
.btn.block { display: flex; width: 100%; }
.btn.lg { min-height: 56px; font-size: 17px; }
.btn.sm { min-height: 38px; padding: 0 12px; font-size: 14px; border-radius: 10px; }
.btn:disabled { opacity: 0.4; cursor: default; }

/* --------------------------------------------------------------------------
   Chips
-------------------------------------------------------------------------- */
.daychips { display: flex; gap: 6px; margin: 0 0 16px; flex-wrap: wrap; }
.daychip {
  flex: 1;
  min-width: 68px;
  padding: 8px 6px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  color: var(--muted);
  line-height: 1.25;
}
.daychip[data-on='1'] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
}
.daychip[data-done='1']::after { content: ' ✓'; color: var(--good-text); }

.flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
}
.flag.warn { background: color-mix(in srgb, var(--warn) 18%, var(--surface)); color: var(--warn-text); }
.flag.crit { background: color-mix(in srgb, var(--crit) 15%, var(--surface)); color: var(--crit); }
.flag.good { background: color-mix(in srgb, var(--good) 15%, var(--surface)); color: var(--good-text); }

/* Heart-rate bands carry the spreadsheet's colours, because that's already how
   these are read: green is easy, amber is work, red is hard. */
.band {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}
.band small { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.band[data-b='easy'] { color: var(--good-text); }
.band[data-b='steady'] { color: var(--warn-text); }
.band[data-b='threshold'] { color: var(--crit); }

/* --------------------------------------------------------------------------
   The HR strip — one row per mile range
-------------------------------------------------------------------------- */
.segs { list-style: none; margin: 0; padding: 0; }
.seg {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
}
.seg:last-child { border-bottom: 0; }
.seg .rng {
  width: 92px;
  flex: none;
  font-size: 13.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.seg .lbl { flex: 1; font-size: 13px; color: var(--muted); }
.seg .hr { font-size: 17px; }

/* A four-pixel rail coloured by band, so the shape of the run is legible before
   you read a single number. */
.segbar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; margin: 12px 0 2px; }
.segbar i { display: block; height: 100%; }
.segbar i[data-b='easy'] { background: var(--good); }
.segbar i[data-b='steady'] { background: var(--warn); }
.segbar i[data-b='threshold'] { background: var(--crit); }

/* --------------------------------------------------------------------------
   Gels
-------------------------------------------------------------------------- */
.gel {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
}
.gel:last-child { border-bottom: 0; }
.gel .n {
  width: 26px; height: 26px;
  flex: none;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}
.gel .mi { flex: 1; font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.gel .at { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Rows & meters
-------------------------------------------------------------------------- */
.exrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  width: 100%;
  text-align: left;
  background: none;
  border-left: 0; border-right: 0; border-top: 0;
}
.exrow:last-child { border-bottom: 0; }
.exrow .nm { font-weight: 600; }
.exrow .meta { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.exrow .wt { font-size: 19px; font-weight: 680; letter-spacing: -0.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.exrow .wt small { font-size: 12.5px; font-weight: 550; color: var(--muted); }

.meter { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; margin: 10px 0 6px; }
.meter i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.meter[data-state='warn'] i { background: var(--warn); }
.meter[data-state='worn'] i { background: var(--crit); }

.stats { display: flex; gap: 18px; flex-wrap: wrap; }
.stat .k { font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.stat .v { font-size: 19px; font-weight: 680; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Charts
-------------------------------------------------------------------------- */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis { stroke: var(--rule); stroke-width: 1; }
.chart .tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .hit { pointer-events: all; fill: transparent; }
.chart .plan { fill: var(--rule); opacity: 0.42; }
.chart .plan.before { fill: var(--muted); opacity: 0.22; }
.chart .plan.now { fill: var(--accent); opacity: 0.3; }
.chart .actual { fill: var(--accent); }
.chart .racemark {
  fill: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* A mile is marked against what it was told to be, not against its neighbours —
   so the colour is a verdict, and "in band" is the quiet one. */
.verdict { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.verdict[data-v='in'] { color: var(--good-text); }
.verdict[data-v='over'] { color: var(--crit); }
.verdict[data-v='under'] { color: var(--muted); }

.legend { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); }
.legend .sw { width: 11px; height: 14px; border-radius: 2.5px; flex: none; }
.legend .sw.ghost { background: var(--rule); opacity: 0.42; }
.legend .sw.solid { background: var(--accent); }

.tip {
  position: absolute;
  z-index: 40;
  pointer-events: none;
  background: var(--ink);
  color: var(--page);
  font-size: 12.5px;
  font-weight: 550;
  padding: 6px 9px;
  border-radius: 8px;
  white-space: nowrap;
  transform: translate(-50%, -140%);
  opacity: 0;
  transition: opacity 0.1s;
}
.tip[data-on='1'] { opacity: 1; }

/* --------------------------------------------------------------------------
   Forms
-------------------------------------------------------------------------- */
.field { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.field:last-child { border-bottom: 0; }
.field label { flex: 1; font-size: 15px; }
.field label small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 400; }
.field input, .field select {
  width: 112px;
  height: 42px;
  padding: 0 10px;
  text-align: right;
  border-radius: 10px;
  border: 1px solid var(--rule);
  background: var(--surface-2);
  font-variant-numeric: tabular-nums;
}
.field select { text-align: left; width: 148px; }
.field input[type='checkbox'] { width: 26px; height: 26px; }

/* Logging wants big targets and a label above, not beside — you're filling this
   in standing in a driveway with cold hands. */
.formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.formrow { display: flex; flex-direction: column; gap: 6px; }
.formrow.full { grid-column: 1 / -1; }
.formrow label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.formrow input, .formrow textarea, .formrow select {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 12px;
  border-radius: 11px;
  border: 1px solid var(--rule);
  background: var(--surface-2);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.formrow textarea { min-height: 76px; font-size: 15px; resize: vertical; }
.formrow .hint { font-size: 12px; margin: 0; }

.pickers { display: flex; gap: 8px; flex-wrap: wrap; }
.picker {
  flex: 1;
  min-width: 96px;
  min-height: var(--tap);
  padding: 8px 12px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: var(--ink-2);
}
.picker[data-on='1'] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
}
.picker small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.picker[data-on='1'] small { color: inherit; opacity: 0.8; }

/* The five effort labels won't fit three-across on a 375px phone — "Comfortable"
   is just a long word, and shrinking the type to make it fit would be solving
   the wrong problem. Two columns gives every label room to breathe, and the
   fifth takes the full width rather than sitting alone in a half-empty row. */
.pickers.effort { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pickers.effort .picker { min-width: 0; }
.pickers.effort .picker:last-child { grid-column: 1 / -1; }

table.grid { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
/* Tight, because the block table is seven columns on a 375px phone. It still
   scrolls sideways when it has to — that's what .scroll-x is for. */
table.grid th, table.grid td { padding: 9px 6px; text-align: left; border-bottom: 1px solid var(--line); font-size: 14px; }
table.grid th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; }
table.grid td.num, table.grid th.num { text-align: right; }
table.grid tr[data-now='1'] td { background: color-mix(in srgb, var(--accent) 9%, transparent); font-weight: 650; }
table.grid tr[data-before='1'] td { color: var(--muted); }
table.grid tr[data-race='1'] td { border-top: 2px solid var(--rule); font-weight: 650; }

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.empty { text-align: center; padding: 40px 20px; color: var(--muted); }

.stack > * + * { margin-top: 10px; }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 50;
  background: var(--ink);
  color: var(--page);
  padding: 11px 16px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 550;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.18s, transform 0.18s;
  pointer-events: none;
  max-width: min(520px, calc(100vw - 32px));
}
.toast[data-on='1'] { opacity: 1; transform: translateX(-50%) translateY(-6px); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}