/* Values from design/tokens.json and docs/SPECS.md. No other values. */
:root {
  --ground: #F2F3F5; --surface: #FFFFFF; --ink: #101114; --muted: #5C6068; --hairline: #E3E5E8;
  --sunken: #E6E8EC; --control: #ECEEF1; --outline: #C4C8CF;
  --today: #2446F5; --today-on: #FFFFFF; --today-tint: #DEE5FF; --today-on-tint: #1632C4;
  --fuel: #FF6B2C; --fuel-on: #101114; --fuel-tint: #FFE0D1; --fuel-on-tint: #7A2A06; --fuel-link: #B33A08;
  --run: #B8F03A; --run-on: #101114; --run-tint: #E4F8B0; --run-on-tint: #2F4A00;
  --lift: #7B3FF2; --lift-on: #FFFFFF; --lift-tint: #EDE5FF; --lift-on-tint: #4A1FA8;
  --raised: 0 1px 2px rgba(16,17,20,.05), 0 10px 28px rgba(16,17,20,.07);
  --floating: 0 10px 30px rgba(16,17,20,.28), 0 2px 6px rgba(16,17,20,.18);
  --edge: -8px 0 24px rgba(16,17,20,.12); --under-dim: brightness(.94);
  --display: 'Big Shoulders Display', 'Instrument Sans', system-ui, sans-serif;
  --text: 'Instrument Sans', system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--text); font-size: 15px; line-height: 1.4; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
body { overscroll-behavior-y: none; }
/* Feels like an app, not a web page: no double-tap zoom, no text selection or long-press menus on the app's own
   words and buttons (you can still select and edit in fields), no rubber-band past the edges. */
html { touch-action: manipulation; overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
img, svg { -webkit-user-drag: none; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; }
#root { max-width: 480px; margin: 0 auto; min-height: 100dvh; position: relative; background: var(--ground); overflow-x: clip; }

.screen { position: relative; min-height: 100dvh; display: flex; flex-direction: column; background: var(--ground); }
/* iPhone-style moves (280 ms ease-out): a new screen slides in over the old one, which drifts left and dims; Back
   reverses it. Only during the move: afterwards no transform stays on the screen, so the pill menu and panels sit
   on the phone again. */
.screen.in-over { z-index: 2; animation: slide-in 280ms cubic-bezier(.2,.8,.2,1); box-shadow: var(--edge); }
.screen.in-under { animation: under-in 280ms cubic-bezier(.2,.8,.2,1); }
.screen.in-fade { animation: fade 160ms ease-out; }
.screen.leaving { position: fixed; left: 50%; width: min(100%, 480px); margin-left: calc(min(100%, 480px) / -2); pointer-events: none; }
.screen.leaving.out-under { z-index: 0; animation: under-out 280ms cubic-bezier(.2,.8,.2,1) forwards; }
.screen.leaving.out-over { z-index: 3; animation: slide-out 280ms cubic-bezier(.2,.8,.2,1) forwards; box-shadow: var(--edge); }
.screen.underlay { position: fixed; top: 0; left: 50%; width: min(100%, 480px); margin-left: calc(min(100%, 480px) / -2); z-index: 0; pointer-events: none; filter: var(--under-dim); }
.screen.dragging { z-index: 2; box-shadow: var(--edge); }
@keyframes slide-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes under-in { from { transform: translateX(-30%); filter: var(--under-dim); } to { transform: none; filter: none; } }
@keyframes under-out { from { transform: none; } to { transform: translateX(-30%); filter: var(--under-dim); } }
@keyframes slide-out { from { transform: none; } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .screen.in-over, .screen.in-under, .screen.in-fade { animation: fade 120ms; box-shadow: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.main { padding: 20px 12px 24px; display: flex; flex-direction: column; gap: 12px; }
.main.with-menu { padding-bottom: 104px; }

/* Type */
.hero { font-family: var(--display); font-size: 64px; line-height: .9; font-weight: 800; }
.title { font-family: var(--display); font-size: 44px; line-height: 1; font-weight: 800; margin: 0; }
.stat { font-family: var(--display); font-size: 32px; line-height: 1; font-weight: 800; }
.h22 { font-size: 22px; line-height: 1.25; font-weight: 600; margin: 0; }
.t17 { font-size: 17px; }
.b { font-weight: 600; }
.cap { font-size: 13px; }
.micro { font-size: 11px; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }

/* Header */
.header { border-radius: 0 0 32px 32px; padding: 4px 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.header.top { padding-top: calc(8px + env(safe-area-inset-top)); }
.header.today { background: var(--today); color: var(--today-on); }
.header.fuel { background: var(--fuel); color: var(--fuel-on); }
.header.run { background: var(--run); color: var(--run-on); }
.header.lift { background: var(--lift); color: var(--lift-on); }
.header.dark { background: radial-gradient(120% 80% at 50% 40%, #2A2D33 0%, #101114 70%); color: #fff; }
.header .sub { opacity: .86; }
.back { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; background: none; border: 0; padding: 0; margin-left: -4px; cursor: pointer; padding-top: env(safe-area-inset-top); }
.header-card { border-radius: 24px; background: var(--surface); color: var(--ink); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }

/* Cards and rows */
.card { background: var(--surface); border-radius: 24px; padding: 6px 18px; display: flex; flex-direction: column; }
.card.pad { padding: 16px 18px; gap: 10px; }
.row { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 0; }
.row + .row { border-top: 1px solid var(--hairline); }
.row .grow { flex: 1; min-width: 0; }
/* A whole row that opens something (a logged food): looks like a row, taps like a button. */
.row-btn { width: 100%; background: none; border: 0; border-radius: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.row-btn:active { opacity: .6; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(min-content, 1fr)); }
.trio > div { display: flex; flex-direction: column; gap: 2px; }
.trio > div + div { padding-left: 14px; border-left: 1px solid var(--hairline); }
.header .trio > div + div { border-left-color: rgba(255,255,255,.3); }
.header.fuel .trio > div + div, .header.run .trio > div + div { border-left-color: rgba(16,17,20,.2); }
.header-card .trio > div + div { border-left-color: var(--hairline); }
.tint-today { background: var(--today-tint); color: var(--today-on-tint); }
.tint-fuel { background: var(--fuel-tint); color: var(--fuel-on-tint); }
.tint-run { background: var(--run-tint); color: var(--run-on-tint); }
.tint-lift { background: var(--lift-tint); color: var(--lift-on-tint); }
.block { border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }

/* Buttons */
.btn { height: 56px; border-radius: 28px; border: 0; background: var(--ink); color: #fff; font-size: 17px; font-weight: 600; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; transition: transform .1s, opacity .1s; }
.btn:active, .pill:active, .chip:active { transform: scale(.98); opacity: .92; }
.btn.secondary { height: 52px; border-radius: 26px; background: var(--control); color: var(--ink); }
.btn.on-dark-lift { background: var(--lift); color: #fff; }
.lock-btn { background: var(--ink); }
.pill:disabled { background: var(--control); color: var(--muted); cursor: default; }
.pill:disabled:active { transform: none; opacity: 1; }
.btn:disabled { background: var(--control); color: var(--muted); cursor: default; }
.pill { height: 44px; padding: 0 16px; border-radius: 22px; border: 0; font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; white-space: nowrap; cursor: pointer; text-decoration: none; }
.pill.today { background: var(--today-tint); color: var(--today-on-tint); }
.pill.fuel { background: var(--fuel-tint); color: var(--fuel-on-tint); }
.pill.run { background: var(--run-tint); color: var(--run-on-tint); }
.pill.lift { background: var(--lift-tint); color: var(--lift-on-tint); }
.pill.neutral { background: var(--control); color: var(--ink); }
.pill.dark { background: rgba(255,255,255,.16); color: #fff; }
.pill.ink { background: var(--ink); color: #fff; }
.pill.onfill { background: rgba(255,255,255,.18); color: inherit; }
.pill.onfill-dark { background: rgba(16,17,20,.12); color: inherit; }
.icon-btn { width: 44px; height: 44px; border-radius: 22px; border: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; background: none; }

/* Chips and segments */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: 44px; padding: 0 18px; border-radius: 22px; border: 0; background: var(--sunken); color: var(--ink); cursor: pointer; white-space: nowrap; }
.chip.on { background: var(--ink); color: #fff; font-weight: 600; }
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 26px; background: var(--sunken); }
.header .seg { background: rgba(16,17,20,.12); }
.header.today .seg, .header.lift .seg { background: rgba(255,255,255,.16); }
.seg button { flex: 1 1 auto; min-width: 0; height: 44px; border: 0; border-radius: 22px; background: none; cursor: pointer; padding: 0 8px; white-space: nowrap; }
.seg button.on { background: var(--ink); color: #fff; font-weight: 600; }

/* Fields */
.field-wrap { position: relative; display: block; width: 100%; min-width: 0; }
.field-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; padding: 0; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); -webkit-tap-highlight-color: transparent; }
.field-wrap.multi .field-clear { top: 6px; transform: none; }
.field-clear > span { width: 22px; height: 22px; border-radius: 11px; background: var(--ground); display: flex; align-items: center; justify-content: center; }
.field { height: 52px; border-radius: 26px; border: 1px solid var(--outline); background: var(--surface); padding: 0 18px; width: 100%; font-size: 17px; }
.lbl { display: flex; flex-direction: column; gap: 6px; }
.lbl > span { font-size: 13px; color: var(--muted); }
/* iPhone draws date boxes with its own minimum width and centered text, which pushed the box past its card.
   Drop that styling so a date box is sized and aligned like every other field. */
.field[type="date"] { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; display: block; text-align: left; line-height: 50px; }
.field[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.field[type="date"]::-webkit-calendar-picker-indicator { margin: 0; }
.lbl { min-width: 0; }
/* Race suggestions under the race box. */
.suggest { display: flex; flex-direction: column; border-radius: 16px; background: var(--ground); padding: 0 14px; }
.suggest .row { min-height: 56px; }

/* Stepper */
.stepper { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; gap: 12px; padding: 8px; border-radius: 36px; background: var(--ground); }
.stepper button { width: 56px; height: 56px; border-radius: 28px; border: 0; background: var(--surface); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.stepper .val { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* The big number's line box is tight (.9); give the caption under it room so the two never touch. */
.stepper .val .hero { line-height: 1.05; }
/* The value never breaks across lines ("75 / min"); on the narrowest phones it shrinks a little instead. */
.stepper .val .hero, .stepper .val .title { white-space: nowrap; }
.stepper .val .title { font-size: min(44px, 11vw); }
/* A number you can type (set logger weight): a white box like a field, so it reads as tappable. */
/* Same look as a field: white, pill radius, outline border; 64 tall around the 64 number. Five-character weights (117.5) shrink to fit. */
.stepper .val .typeable, .stepper .val .typed { width: auto; min-width: 88px; max-width: 100%; height: auto; min-height: 56px; border-radius: 0; border: 0; background: transparent; color: var(--ink); padding: 0; cursor: text; font-variant-numeric: tabular-nums; }
.stepper .val .typeable.long, .stepper .val .typed.long { font-size: min(64px, 13vw); }
.stepper .val .typed { width: 100%; text-align: center; outline: none; appearance: none; -webkit-appearance: none; caret-color: var(--ink); }

/* Tags and icons */
.tag { min-height: 22px; padding: 2px 10px; border-radius: 11px; font-size: 13px; line-height: 18px; font-weight: 600; display: inline-flex; align-items: center; align-self: flex-start; max-width: 100%; }
.icircle { width: 40px; height: 40px; border-radius: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Pill menu */
.menu { position: fixed; left: 50%; bottom: max(12px, calc(env(safe-area-inset-bottom) - 8px)); transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 30px; background: var(--ink); box-shadow: var(--floating); z-index: 20; }
.menu button { height: 48px; min-width: 48px; border-radius: 24px; border: 0; background: none; color: rgba(255,255,255,.72); display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font-size: 15px; font-weight: 600; padding: 0; transition: background-color 220ms ease-out, padding 220ms ease-out, color 220ms; }
.menu button.on { padding: 0 16px 0 14px; }
.menu button.on.today { background: var(--today); color: #fff; }
.menu button.on.fuel { background: var(--fuel); color: var(--ink); }
.menu button.on.run { background: var(--run); color: var(--ink); }
.menu button.on.lift { background: var(--lift); color: #fff; }
.menu button.on.progress { background: #fff; color: var(--ink); }

/* Toast and sticky panel */
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(max(12px, calc(env(safe-area-inset-bottom) - 8px)) + 72px); width: calc(100% - 24px); max-width: 440px; border-radius: 24px; background: var(--ink); color: #fff; padding: 10px 8px 10px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; z-index: 30; animation: fade 200ms; }
.sticky { position: sticky; bottom: max(12px, calc(env(safe-area-inset-bottom) - 8px)); margin: 0 -4px; padding: 12px; border-radius: 32px; background: var(--surface); box-shadow: var(--floating); display: flex; flex-direction: column; gap: 6px; z-index: 10; }

/* Widget row */
.widgets { display: flex; flex-direction: column; gap: 8px; }
.widget .pill { min-width: 160px; }
.widget { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 20px; background: var(--ground); }
.card .widget { background: var(--ground); }
/* A light box inside a card reaches 10 px into the card's padding, so its button lines up with the card's other
   buttons (one right edge down the card) while its text keeps its place. */
.card .widget, .card .inset { margin-left: -10px; margin-right: -10px; padding-left: 26px; }

/* Coach note */
.note-point { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 10px; }
.note-point > i { width: 8px; height: 8px; margin-top: 7px; border-radius: 4px; display: block; }

/* Logger */
.setrow { display: grid; grid-template-columns: 40px minmax(0,1fr) 64px 56px 44px; align-items: center; min-height: 52px; gap: 6px; }
.setrow + .setrow { border-top: 1px solid var(--hairline); }
.setrow-btn { width: 100%; background: none; border: 0; border-radius: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.setrow-btn:active { opacity: .6; }
.current { background: var(--surface); border-radius: 24px; box-shadow: var(--raised); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; margin: 6px -8px; }
.restbar { position: sticky; bottom: 0; background: var(--ink); color: #fff; border-radius: 32px 32px 0 0; padding: 16px 20px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.lime { color: var(--run); }
.progress-line { height: 4px; border-radius: 2px; background: rgba(255,255,255,.3); }
.progress-line > i { display: block; height: 4px; border-radius: 2px; background: var(--run); }
.bar { height: 8px; border-radius: 4px; background: rgba(16,17,20,.16); }
.bar > i { display: block; height: 8px; border-radius: 4px; background: var(--ink); }

.center { text-align: center; }
.spacer { flex: 1; }
.scroll-x { overflow-x: auto; scrollbar-width: none; }
.scroll-x::-webkit-scrollbar { display: none; }
video.cam { width: 100%; height: 220px; object-fit: cover; border-radius: 20px; background: #000; }
.check { width: 28px; height: 28px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.check.off { border: 2px solid var(--outline); }
.check.on { color: #fff; }
.lock { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 32px 12px; background: var(--today); color: #fff; }

/* Bottom sheet with a month calendar (DayPicker) */
.sheet-scrim { position: fixed; inset: 0; background: rgba(16,17,20,.4); z-index: 40; display: flex; align-items: flex-end; justify-content: center; animation: fade 200ms; }
/* The grabber: a small bar at the top that says the sheet can be swiped down. */
.launch { min-height: 100dvh; display: flex; align-items: center; justify-content: center; background: var(--ground); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.grabber { width: 36px; height: 5px; border-radius: 3px; background: var(--outline); align-self: center; margin: -6px 0 -2px; flex-shrink: 0; }
.sheet { width: 100%; max-width: 480px; background: var(--surface); color: var(--ink); border-radius: 32px 32px 0 0; padding: 16px 20px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; animation: rise 260ms cubic-bezier(.2,.8,.2,1); }
@keyframes rise { from { transform: translateY(40px); opacity: .5; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sheet { animation: fade 120ms; } }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-head { text-align: center; font-size: 13px; color: var(--muted); padding: 4px 0; }
.cal-day { position: relative; height: 44px; border: 0; border-radius: 22px; background: none; font-size: 17px; font-variant-numeric: tabular-nums; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cal-day.today { box-shadow: inset 0 0 0 2px var(--fuel); font-weight: 600; }
.cal-day.on { background: var(--ink); color: #fff; font-weight: 600; box-shadow: none; }
.cal-day:disabled { color: var(--outline); cursor: default; }
.cal-day i { position: absolute; bottom: 5px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 3px; background: var(--fuel); }
.cal-day.on i { background: #fff; }
.icon-btn:disabled { opacity: .35; cursor: default; }