/* ── FONTS ─────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

/* ── CSS CUSTOM PROPERTIES ─────────────────────────────────────────────────── */
:root {
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'DM Mono', monospace;
  --font-display: 'Bebas Neue', sans-serif;

  /* Defaults (dark + acid) */
  --bg:       #0a0a0a;
  --surface:  #111111;
  --surface2: #181818;
  --border:   #222222;
  --text:     #f0f0f0;
  --muted:    #555555;
  --accent:   #e8ff47;
  --accent2:  #ff6b35;
  --accent-fg:#000000;

  --safe-top:    env(safe-area-inset-top, 0px);
  /* An installed iOS PWA reports an inflated, stale safe-area-inset-bottom at
     launch — it only settles to the true home-indicator height (34px) once a
     rotation forces a reflow. Until then the bar carries two bottom gaps at
     once: the system-reserved strip outside the visual viewport, plus this
     inset inside the bar. Capping at 34px bounds the bogus launch value to the
     real one, so the bar sits right from first paint instead of after a
     rotate. No iOS device has a home indicator taller than 34px, so the cap
     never clips a legitimate inset.
     https://github.com/alidd11/rider-comms/pull/128 */
  --safe-bottom: min(34px, env(safe-area-inset-bottom, 0px));

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-pill: 100px;
}

/* ── DARK MODE ─────────────────────────────────────────────────────────────── */
[data-mode="dark"] {
  --bg:       #0a0a0a;
  --surface:  #111111;
  --surface2: #181818;
  --border:   #222222;
  --text:     #f0f0f0;
  --muted:    #555555;
}

/* ── LIGHT MODE ────────────────────────────────────────────────────────────── */
[data-mode="light"] {
  --bg:       #f4f4f5;
  --surface:  #ffffff;
  --surface2: #eeeeef;
  --border:   #d4d4d8;
  --text:     #111111;
  --muted:    #888888;
}

/* ── COLOR THEMES ──────────────────────────────────────────────────────────── */
[data-color="acid"] {
  --accent:    #e8ff47;
  --accent2:   #ff6b35;
  --accent-fg: #000000;
}
[data-color="ember"] {
  --accent:    #ff6b35;
  --accent2:   #ff9f0a;
  --accent-fg: #000000;
}
[data-color="ocean"] {
  --accent:    #47c6ff;
  --accent2:   #5b8af0;
  --accent-fg: #000000;
}
/* Taken from the club logo: the coral of the wordmark, the pale pink of the
   dumbbell and heart, and the leaf green for the third accent. */
[data-color="club"] {
  --accent:    #fd6769;
  --accent2:   #fcd0d0;
  --accent-fg: #1a1016;
}

/* ── RESET ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
/* 100% (not dvh) resolves against iOS Safari's large/layout viewport, taller
   than what's actually visible while its chrome is showing — a fixed bottom
   element then sits above the true bottom edge on any page short enough that
   nothing forces a scroll to collapse that chrome. dvh tracks the real,
   currently-visible viewport instead. -webkit-fill-available is a second,
   older fallback some WKWebView point releases honour more reliably than dvh
   for this exact "not quite full-bleed on a standalone PWA" symptom; browsers
   that don't understand it just ignore the whole declaration. */
html, body {
  height: 100dvh;
  min-height: -webkit-fill-available;
  background: var(--bg);
}
/* WebKit resolves a fixed element against two different viewport heights
   depending on paint state, and flips between them mid-scroll — which is the
   bottom bar visibly jumping on a long page like Settings. Making the document
   always a hair taller than the viewport keeps it in the settled state, so
   there is only one height left to resolve against. */
html { min-height: calc(100% + env(safe-area-inset-top, 0px)); }
body {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* ── LAYOUT ────────────────────────────────────────────────────────────────── */
#app-content { max-width: 680px; margin: 0 auto; }

/* ── TOP BAR ───────────────────────────────────────────────────────────────── */
.app-topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
  padding: var(--safe-top) 16px 0;
  display: flex; align-items: center; justify-content: space-between;
  height: calc(52px + var(--safe-top));
  max-width: 680px; margin: 0 auto;
}
.nav-logo {
  font-family: var(--font-display); font-size: 20px;
  letter-spacing: 3px; color: var(--accent); text-decoration: none;
}
.nav-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: color-mix(in srgb, var(--accent) 15%, var(--surface2));
  border: 1.5px solid color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--accent); font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; transition: all 0.15s;
}
.nav-avatar:hover, .nav-avatar.active {
  background: color-mix(in srgb, var(--accent) 25%, var(--surface2));
  border-color: var(--accent);
}

/* ── BOTTOM TAB BAR ────────────────────────────────────────────────────────── */
.app-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--surface); border-top: 1px solid var(--border);
  display: flex; padding: 8px 4px calc(10px + var(--safe-bottom));
  max-width: 680px; margin: 0 auto;
  /* iOS WKWebView (installed PWAs use this engine, not Mobile Safari's own)
     is well known to fail to keep position:fixed elements pinned during an
     active touch-scroll — the bar visibly rides along with the page and only
     snaps back once the gesture ends. Promoting it to its own compositing
     layer is the standard fix: the OS then composites it independently of
     whatever the scrolling content is doing. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* Installed on iOS the bar can end up sitting a little above the true bottom of
   the screen. Carry its colour past the edge so the strip underneath reads as
   part of the bar instead of a gap. */
.app-tabbar::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%;
  height: 140px; background: var(--surface);
}
.app-tabbar .tab {
  flex: 1; text-align: center; text-decoration: none; color: var(--muted);
}
.app-tabbar .tab svg { display: block; margin: 0 auto 3px; stroke: var(--muted); }
.app-tabbar .tab.active { color: var(--accent); }
.app-tabbar .tab.active svg { stroke: var(--accent); }
.app-tabbar .tab div { font-size: 9.5px; font-weight: 600; }

/* ── HOME PAGE ─────────────────────────────────────────────────────────────── */
.home-page { padding: 14px 14px calc(80px + var(--safe-bottom)); max-width: 680px; margin: 0 auto; }
.quick-row { display: flex; gap: 10px; margin-bottom: 16px; }
.quick-btn {
  flex: 1; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 14px 8px; text-align: center; text-decoration: none; color: var(--text);
}
.quick-btn svg { display: block; margin: 0 auto 6px; }
.quick-btn span { font-size: 12px; font-weight: 600; }
.quick-btn.accent { border-color: var(--accent); color: var(--accent); }
.section-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin: 4px 2px 8px; }
.tile {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 14px; margin-bottom: 10px; display: flex; align-items: center; gap: 12px;
}
.tile .icon-wrap {
  width: 36px; height: 36px; border-radius: 9px; background: var(--surface2);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tile .k { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.tile .v { font-family: var(--font-display); font-size: 20px; color: var(--text); letter-spacing: .5px; }
.tile .sub { font-size: 11px; color: var(--muted); margin-top: 3px; }
.tile-bar { height: 4px; border-radius: 2px; background: var(--surface2); overflow: hidden; margin-top: 8px; }
.tile-bar-fill { height: 100%; border-radius: 2px; }
.tile-dots { display: flex; gap: 4px; margin-top: 8px; }
.tile-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--surface2); }
.tile-dot-on { background: var(--met); }
.tile-spark { width: 100%; height: 32px; margin-top: 6px; display: block; }

/* The clickable affordance a plain info card was missing — a small chevron
   that reads "there's more here" without competing with the card's own
   numbers. margin-left:auto matches .tile-side's own trick, so it still
   lands flush right when both are present (the Body tile). */
.tile-chevron { margin-left: auto; flex-shrink: 0; color: var(--muted); }

/* ── WORKOUT PAGE ──────────────────────────────────────────────────────────── */
.workout-page { display: flex; flex-direction: column; height: calc(100dvh - 52px - var(--safe-top) - 62px - var(--safe-bottom)); }
.workout-hdr {
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 12px 16px 0; flex-shrink: 0;
}
.workout-hdr-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }

.phase-badge {
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  padding: 2px 8px; border-radius: var(--radius-pill); margin-left: 8px;
}
.phase-normal { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.phase-deload  { background: rgba(255,107,53,.12); color: var(--accent2); border: 1px solid rgba(255,107,53,.3); }

.week-ctrl {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 5px 10px;
}
.week-btn {
  background: none; border: none; color: var(--muted);
  cursor: pointer; font-size: 18px; line-height: 1; padding: 0 2px;
}
.week-label { font-family: var(--font-mono); font-size: 12px; color: var(--text); min-width: 62px; text-align: center; }

.week-guide {
  border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 10px;
  font-size: 12px; line-height: 1.5;
}
.wg-normal { background: color-mix(in srgb, var(--accent) 6%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent); color: color-mix(in srgb, var(--accent) 70%, var(--text)); }
.wg-deload  { background: rgba(255,107,53,.07); border: 1px solid rgba(255,107,53,.2); color: var(--accent2); }

.day-tabs { display: flex; overflow-x: auto; scrollbar-width: none; gap: 0; }
.day-tabs::-webkit-scrollbar { display: none; }
.day-tab {
  padding: 9px 14px; border: none; background: none;
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.4px; cursor: pointer; white-space: nowrap; text-decoration: none;
  border-bottom: 2px solid transparent; transition: all 0.15s;
  color: var(--muted);
}
.day-tab.active { color: var(--day-color, var(--accent)); border-bottom-color: var(--day-color, var(--accent)); }
.day-tab.tab-hist { margin-left: auto; color: var(--muted); }
.day-tab.tab-hist:hover { color: var(--text); }

.workout-body {
  flex: 1; overflow-y: auto; padding: 14px 16px calc(var(--safe-bottom) + 16px);
  -webkit-overflow-scrolling: touch;
}
.workout-body::-webkit-scrollbar { width: 3px; }
.workout-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }

.day-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.day-hdr-right { display: flex; align-items: center; gap: 8px; }
.day-title { font-family: var(--font-display); font-size: 28px; letter-spacing: 1px; }
.prog-pill {
  font-size: 11px; color: var(--muted); font-family: var(--font-mono);
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 3px 10px;
}

/* ── CHECK-IN ──────────────────────────────────────────────────────────────── */
.checkin-wrap { flex-shrink: 0; }
.checkin-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent); font-size: 11px; font-weight: 700;
  letter-spacing: 0.5px; cursor: pointer; transition: all 0.15s;
  font-family: var(--font-body);
}
.checkin-btn:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.checkin-done {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent); font-size: 11px; font-weight: 600;
}
.hist-checkin {
  font-size: 11px; color: var(--accent); margin-top: 3px;
  display: flex; align-items: center; gap: 4px;
}

/* ── EXERCISE CARD ─────────────────────────────────────────────────────────── */
.ex-card {
  border-radius: var(--radius); margin-bottom: 10px; overflow: hidden;
  border: 1px solid var(--border); background: var(--surface); transition: border-color 0.2s;
}
.ex-card.done { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 18%, transparent); }
.ex-hdr { display: flex; align-items: flex-start; justify-content: space-between; padding: 12px 13px 7px; }
.ex-info { flex: 1; min-width: 0; }
.ex-name { font-weight: 600; font-size: 14px; color: var(--text); margin-bottom: 2px; }
.ex-muscles { font-size: 11px; color: var(--muted); }
.ex-hdr-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: 8px; }
.target-badge {
  font-family: var(--font-mono); font-size: 10px; color: var(--muted);
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 3px 8px; white-space: nowrap;
}
.video-btn {
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  color: var(--accent); font-size: 11px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.video-btn:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* ── SETS ──────────────────────────────────────────────────────────────────── */
.sets-area { padding: 0 13px 12px; }
.last-ref { font-size: 10px; color: var(--muted); font-family: var(--font-mono); margin-bottom: 6px; opacity: 0.6; }

.set-row {
  display: flex; align-items: center; gap: 7px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 6px 8px; margin-bottom: 6px; transition: all 0.15s;
}
.set-row.done {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
}
.set-num { font-family: var(--font-mono); font-size: 10px; color: var(--muted); min-width: 22px; text-align: center; }
.inp-wrap { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.inp-label { font-size: 9px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
.inp {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); font-size: 13px; font-family: var(--font-mono);
  padding: 5px 0; width: 65px; text-align: center;
  -webkit-appearance: none; outline: none;
}
.inp:focus { border-color: var(--muted); }
.trash-btn { background: none; border: none; color: var(--border); cursor: pointer; padding: 4px; display: flex; align-items: center; margin-left: auto; transition: color 0.15s; }
.trash-btn:hover { color: var(--accent2); }
.check-btn {
  width: 30px; height: 30px; border-radius: var(--radius-sm); flex-shrink: 0;
  border: 1.5px solid var(--border); background: transparent; color: var(--muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.check-btn.done { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }

.add-set-btn {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  width: 100%; background: none; border: 1px dashed var(--border); border-radius: var(--radius-sm);
  color: var(--muted); font-size: 11px; padding: 7px; cursor: pointer;
  font-family: var(--font-body); margin-top: 2px; transition: all 0.15s;
}
.add-set-btn:active { border-color: var(--muted); color: var(--text); }

/* ── VIDEO MODAL ───────────────────────────────────────────────────────────── */
.video-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 200;
  display: flex; align-items: flex-end;
}
.video-sheet {
  background: var(--surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  width: 100%; max-width: 680px; margin: 0 auto;
  padding-bottom: calc(var(--safe-bottom) + 8px);
}
.video-sheet-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 12px;
}
.video-title { font-weight: 600; font-size: 14px; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-close-btn { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--muted); cursor: pointer; padding: 4px 8px; font-size: 12px; flex-shrink: 0; margin-left: 8px; }
.video-thumb-wrap {
  position: relative; width: 100%; aspect-ratio: 16/9;
  background: var(--surface2); overflow: hidden;
}
.video-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-thumb-fallback {
  width: 100%; height: 100%; display: flex;
  align-items: center; justify-content: center;
  background: var(--surface2);
}
.video-actions { padding: 12px 16px; }
.btn-yt-open {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 14px; border-radius: var(--radius);
  background: #ff0000; color: #fff;
  font-size: 14px; font-weight: 700; letter-spacing: 0.3px;
  text-decoration: none; transition: opacity 0.15s;
}
.btn-yt-open:hover { opacity: 0.9; }

/* ── TOAST ─────────────────────────────────────────────────────────────────── */
#toast {
  position: fixed; bottom: calc(var(--safe-bottom) + 20px); left: 50%;
  transform: translateX(-50%);
  background: var(--accent); color: var(--accent-fg);
  font-weight: 700; font-size: 13px; letter-spacing: 0.5px;
  padding: 9px 22px; border-radius: var(--radius-pill); z-index: 999;
  max-width: calc(100vw - 32px); text-align: center; line-height: 1.35;
  pointer-events: none;
}

/* ── HISTORY ───────────────────────────────────────────────────────────────── */
.hist-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 15px; margin-bottom: 10px; }
.hist-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.hist-day { font-size: 13px; font-weight: 700; letter-spacing: 0.5px; }
.hist-meta { font-size: 11px; color: var(--muted); font-family: var(--font-mono); margin-top: 2px; }
.hist-stats { display: flex; gap: 16px; }
.hist-stat { text-align: center; }
.hist-val { font-family: var(--font-display); font-size: 26px; color: var(--text); line-height: 1; }
.hist-lab { font-size: 9px; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; }
.hist-ex { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); border-top: 1px solid var(--surface2); padding-top: 5px; margin-top: 5px; }

/* ── PAGES / LAYOUT ────────────────────────────────────────────────────────── */
.page-wrap { max-width: 680px; margin: 0 auto; padding: 20px 16px calc(var(--safe-bottom) + 96px); }
.page-narrow { max-width: 420px; }
.page-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.page-title { font-family: var(--font-display); font-size: 30px; letter-spacing: 1px; }
.hist-title { margin-bottom: 16px; }
.section-heading { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }

/* ── FORMS ─────────────────────────────────────────────────────────────────── */
.form-stack { display: flex; flex-direction: column; gap: 16px; }
.form-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.form-mt { margin-top: 12px; }
.field-wrap { display: flex; flex-direction: column; gap: 5px; }
.field-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.field-input {
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); font-size: 14px; font-family: var(--font-body);
  padding: 10px 12px; outline: none; width: 100%; transition: border-color 0.15s;
}
.field-input:focus { border-color: var(--muted); }
.field-sm { width: 80px; }
.field-hint { font-size: 11px; color: var(--muted); }
.color-picker { width: 44px; height: 38px; padding: 2px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface2); cursor: pointer; }

/* ── BUTTONS ───────────────────────────────────────────────────────────────── */
.btn-primary, .btn-accent, .btn-ghost, .btn-danger {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 18px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; cursor: pointer;
  border: none; text-decoration: none; transition: opacity 0.15s; white-space: nowrap;
}
.btn-primary { background: var(--accent); color: var(--accent-fg); }
.btn-accent  { background: var(--accent); color: var(--accent-fg); }
.btn-ghost   { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
.btn-danger  { background: rgba(239,68,68,.15); color: #ef4444; border: 1px solid rgba(239,68,68,.25); }
.btn-sm      { padding: 5px 10px; font-size: 11px; }
.btn-full    { width: 100%; }
.btn-primary:hover, .btn-accent:hover { opacity: 0.88; }

/* ── PROGRAM CARDS ─────────────────────────────────────────────────────────── */
.prog-section { margin-bottom: 28px; }
.prog-card {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 15px; margin-bottom: 8px;
}
.prog-name { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.prog-meta { font-size: 11px; color: var(--muted); font-family: var(--font-mono); }
.prog-desc { font-size: 12px; color: var(--muted); margin-top: 4px; }
.prog-desc-full { color: var(--muted); font-size: 13px; line-height: 1.6; margin-bottom: 20px; }
.prog-card-actions { display: flex; gap: 6px; flex-shrink: 0; margin-left: 12px; }

.day-preview-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 15px; margin-bottom: 10px; }
.day-preview-hdr { font-family: var(--font-display); font-size: 18px; letter-spacing: 1px; margin-bottom: 10px; }
.day-preview-ex { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); padding: 4px 0; border-top: 1px solid var(--surface2); }

/* ── PROGRAM EDIT ──────────────────────────────────────────────────────────── */
.edit-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 15px; margin-bottom: 12px; }
.section-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pe-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--surface2); }
.pe-info { display: flex; flex-direction: column; gap: 2px; }
.pe-name { font-weight: 500; font-size: 13px; }
.pe-actions { display: flex; align-items: center; gap: 6px; }
.phase-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--surface2); font-size: 13px; }
.phase-tag { font-family: var(--font-mono); font-size: 10px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: var(--radius-pill); padding: 2px 8px; white-space: nowrap; }
.phase-name { font-weight: 600; }
.phase-guide { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.add-form-panel { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; margin-top: 10px; }
.add-ex-details summary { cursor: pointer; font-size: 12px; color: var(--muted); padding: 6px 0; list-style: none; }
.add-ex-details summary::-webkit-details-marker { display: none; }
.add-ex-details[open] summary { color: var(--text); }

/* ── PROGRAM EDIT: day/slot summary rows + mobile-friendly reorder ──────────── */
.day-section-hdr { flex-wrap: wrap; gap: 8px; }
.day-title-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.day-heading { margin-bottom: 0; }
.day-pin-badge, .day-rest-badge {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  border-radius: var(--radius-pill); padding: 2px 8px; white-space: nowrap;
}
.day-pin-badge { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.day-rest-badge { color: var(--muted); background: var(--surface2); border: 1px solid var(--border); }
.day-subtitle { font-size: 11px; }
.day-hdr-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.pe-label {
  font-family: var(--font-mono); font-size: 10px; color: var(--muted);
  letter-spacing: .5px;
}

/* Up/down reorder buttons — the no-JavaScript path. static/js/sortable.js
   marks its container .is-sortable once it has taken over, which hides these
   in favour of the drag handle; with JS off they stay and still work. */
.reorder-ctrl { display: flex; flex-direction: column; }
.reorder-ctrl .icon-btn { padding: 2px 6px; font-size: 10px; line-height: 1.2; }
.reorder-ctrl .icon-btn:disabled { opacity: 0.25; cursor: default; }
.reorder-ctrl .icon-btn:disabled:hover { color: var(--muted); }
.is-sortable .reorder-ctrl { display: none; }

/* Drag handle. Hidden until the script wires its list up, so it never offers
   a gesture that would do nothing. `touch-action: none` is what stops a drag
   from scrolling the page out from under the row on a phone. */
.drag-handle { display: none; }
.is-sortable > [data-sort-id] > .drag-handle,
.is-sortable > [data-sort-id] .day-hdr-actions > .drag-handle {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 4px; font-size: 15px; line-height: 1;
  cursor: grab; touch-action: none; color: var(--muted);
}
.drag-handle:active { cursor: grabbing; }
.pe-row > .drag-handle { margin-right: 6px; flex-shrink: 0; }
[data-sort-id].is-dragging {
  position: relative; z-index: 30; cursor: grabbing;
  background: var(--surface2); border-radius: var(--radius-sm);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
  opacity: .96;
}
body.is-reordering { user-select: none; -webkit-user-select: none; }
.day-list > .day-edit-section { transition: transform .12s ease; }
.pe-list > .pe-row { transition: transform .12s ease; }
[data-sort-id].is-dragging { transition: none; }

.run-rx-editor { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--surface2); }
.run-rx-heading { margin-bottom: 10px; }


/* ── EXERCISE LIBRARY ──────────────────────────────────────────────────────── */
.ex-list { display: flex; flex-direction: column; gap: 2px; }
.ex-lib-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px;
}
.ex-lib-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ex-lib-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: 10px; }
.global-badge { font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 2px 7px; }

/* ── SETTINGS ──────────────────────────────────────────────────────────────── */
.settings-section { margin-bottom: 28px; }
.profile-row { display: flex; gap: 12px; flex-wrap: wrap; }
.profile-row .field-wrap { min-width: 140px; }
.settings-errors { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.25); color: #ef4444; border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 4px; }
.settings-heading { font-family: var(--font-display); font-size: 16px; letter-spacing: 1px; margin-bottom: 12px; }
.settings-hint { font-size: 12px; color: var(--muted); line-height: 1.5; margin-bottom: 8px; }
.theme-grid { display: flex; gap: 8px; }
.theme-btn {
  flex: 1; padding: 12px; border-radius: var(--radius);
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.15s;
}
.theme-btn.active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface2)); }
.color-grid { display: flex; gap: 8px; }
.color-swatch {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 8px; border-radius: var(--radius);
  background: var(--surface2); border: 1px solid var(--border);
  cursor: pointer; transition: all 0.15s;
}
.color-swatch.active { border-color: var(--swatch); background: color-mix(in srgb, var(--swatch) 8%, var(--surface2)); }
.swatch-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--swatch); }
.swatch-label { font-size: 11px; font-weight: 600; color: var(--text); }

/* ── LOGIN ─────────────────────────────────────────────────────────────────── */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100dvh; padding: 24px 16px; }
.login-wrap { width: 100%; max-width: 360px; }
.login-logo { font-family: var(--font-display); font-size: 42px; letter-spacing: 6px; color: var(--accent); text-align: center; margin-bottom: 4px; }
.login-sub { text-align: center; color: var(--muted); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 36px; }
.login-error { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.25); color: #ef4444; border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; margin-bottom: 16px; }
.login-form { display: flex; flex-direction: column; gap: 16px; }

/* ── MISC ──────────────────────────────────────────────────────────────────── */
.muted-txt { color: var(--muted); font-size: 12px; }
.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty-icon { font-size: 44px; margin-bottom: 14px; }
.empty-state p { font-size: 13px; line-height: 1.8; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; }

/* ── RUNNING TRACK ─────────────────────────────────────────────────────────── */
:root { --run-accent: #4fc3c7; }
[data-mode="light"] { --run-accent: #14757a; }

.ex-card.ex-run { border-left: 2px solid var(--run-accent); }
.ex-card.ex-run .target-badge { color: var(--run-accent); border-color: var(--run-accent); }

/* prescription strip above the inputs */
.run-rx {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--run-accent); margin-bottom: 10px;
}
.run-rx-main { font-size: 12px; font-weight: 500; }
.run-rx-bit {
  color: var(--muted); border-left: 1px solid var(--border); padding-left: 8px;
}
.run-rx-note {
  flex-basis: 100%; font-family: var(--font-body); font-size: 11px; color: var(--muted);
}

/* one effort / one interval */
.run-row {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface2); padding: 8px 9px; margin-bottom: 6px;
}
.run-row.done { border-color: var(--run-accent); }
.run-row-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.run-row .set-num { color: var(--run-accent); min-width: 26px; }
.run-row .inp-wrap { flex: 1 1 62px; min-width: 62px; }
.inp-time { text-align: center; }

.run-derived {
  display: flex; gap: 12px; margin-top: 7px; padding-top: 6px;
  border-top: 1px dashed var(--border);
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
}
.run-derived b { color: var(--text); font-weight: 500; }

/* ── ASSISTED / BODYWEIGHT LOAD ────────────────────────────────────────────── */
.inp-assist { color: var(--accent2); }
.eff-load {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--muted);
  white-space: nowrap; padding: 0 2px;
}
.hist-run span:first-child { color: var(--run-accent); }
.hist-run .hist-ex-vol { font-family: var(--font-mono); font-size: 10.5px; }

/* ── WEEK RAIL ─────────────────────────────────────────────────────────────── */
.week-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 5px; padding: 2px 0 4px;
}
.rail-day {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 7px 2px 8px; border-radius: 9px; text-decoration: none;
  border: 1px solid transparent; color: var(--muted);
  font-family: var(--font-mono);
}
.rail-lbl { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; }
.rail-tracks { display: flex; flex-direction: column; gap: 3px; width: 100%; align-items: center; }
.rail-bar { height: 3.5px; width: 78%; border-radius: 2px; background: var(--border); }
.rail-bar.bar-lift { background: var(--accent); opacity: .35; }
.rail-bar.bar-run  { background: var(--run-accent); opacity: .35; }
.rail-day.on {
  background: var(--surface2); border-color: var(--border); color: var(--text);
}
.rail-day.on .rail-bar.bar-lift,
.rail-day.on .rail-bar.bar-run { opacity: 1; }
.rail-day.is-today .rail-lbl { color: var(--text); }
.rail-day.is-today .rail-lbl::after {
  content: ""; display: block; width: 3px; height: 3px; border-radius: 50%;
  background: var(--accent); margin: 3px auto 0;
}
.rail-day:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── TRACK BLOCKS ──────────────────────────────────────────────────────────── */
.track-block { margin-top: 16px; }
.track-hd {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
  padding-bottom: 7px; border-bottom: 1px solid var(--border); margin-bottom: 10px;
}
.track-hd-lift span:first-child { color: var(--accent); }
.track-hd-run  span:first-child { color: var(--run-accent); }

/* ── DAY META ──────────────────────────────────────────────────────────────── */
.day-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.day-footnote {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 15px; margin-top: 16px;
  font-size: 13px; line-height: 1.55; color: var(--muted);
}
.day-footnote strong { color: var(--text); font-weight: 600; }

/* ── REST DAY ──────────────────────────────────────────────────────────────── */
.rest-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px; margin-top: 14px;
}
.rest-tag {
  display: inline-block; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  background: var(--surface2); padding: 3px 8px; border-radius: 4px; margin-bottom: 10px;
}
.rest-body {
  margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--muted);
}
.rest-body strong { color: var(--text); font-weight: 600; }

/* ── EXERCISE META: ORDER, RIR, REST, SUPERSET ─────────────────────────────── */
.ex-ord {
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  min-width: 20px; padding-top: 2px; flex-shrink: 0;
}
.ex-note { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.45; }
.ex-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; margin-top: 4px; }
.rir-badge, .rest-badge {
  font-family: var(--font-mono); font-size: 10px; white-space: nowrap; color: var(--muted);
}
.rir-badge b { color: var(--accent); font-weight: 600; }

/* The athlete's own note on a movement. Deliberately quieter than the plan's
   own instruction above it (.ex-note) — it is a reminder to self, not a
   prescription, and it sits next to the sets where it gets read mid-lift. */
.ex-usernote {
  display: flex; align-items: flex-start; gap: 8px;
  background: color-mix(in srgb, var(--accent2) 8%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--accent2) 45%, transparent);
  border-radius: var(--radius-sm); padding: 7px 9px; margin: 8px 0 4px;
}
.ex-usernote-txt {
  flex: 1; min-width: 0; font-size: 12px; line-height: 1.45; color: var(--text);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.ex-usernote-btn {
  background: none; border: none; cursor: pointer; flex-shrink: 0;
  color: var(--muted); font-size: 12px; line-height: 1; padding: 2px 4px;
}
.ex-usernote-btn:hover { color: var(--accent); }
.ex-usernote-add {
  background: none; border: none; cursor: pointer; padding: 4px 0; margin-top: 4px;
  font-size: 11px; color: var(--muted); font-family: var(--font-body);
}
.ex-usernote-add:hover { color: var(--accent); }

/* superset pair reads as one bracketed unit */
.ex-card.ex-ss { border-left: 2px solid var(--accent2); }
.ex-card.ex-ss + .ex-card.ex-ss { margin-top: -4px; }

/* ── CROSS-PROGRAM HISTORY STRIP ───────────────────────────────────────────── */
.hist-strip {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px;
  scrollbar-width: none;
}
.hist-strip::-webkit-scrollbar { display: none; }
.hist-chip {
  display: flex; flex-direction: column; gap: 1px; flex-shrink: 0;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 4px 8px;
}
.hist-chip-when {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.hist-chip-val { font-family: var(--font-mono); font-size: 11px; color: var(--text); }
.hist-strip .hist-chip:first-child .hist-chip-val { color: var(--accent); }

/* ── PROGRESSIVE OVERLOAD SUGGESTION ───────────────────────────────────────── */
.sug-chip {
  display: flex; align-items: baseline; gap: 7px; width: 100%;
  background: var(--surface2); border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-sm); padding: 7px 9px; margin-bottom: 8px;
  font-family: inherit; text-align: left; cursor: pointer; color: var(--text);
}
.sug-chip:hover { border-color: var(--accent); }
.sug-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sug-arrow { color: var(--accent); font-size: 12px; line-height: 1; flex-shrink: 0; }
.sug-msg { font-size: 12.5px; font-weight: 500; }
.sug-detail {
  font-family: var(--font-mono); font-size: 9.5px; color: var(--muted);
  margin-left: auto; text-align: right; flex-shrink: 0;
}
.sug-chip.sug-assist { border-left-color: var(--accent2); }
.sug-chip.sug-assist .sug-arrow { color: var(--accent2); }
@media (max-width: 480px) {
  .sug-chip { flex-wrap: wrap; }
  .sug-detail { margin-left: 0; flex-basis: 100%; text-align: left; }
}

/* ── NUTRITION ─────────────────────────────────────────────────────────────── */
.nut-sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.nut-page-title { margin-bottom: 16px; }
.nut-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--accent); border-radius: var(--radius-pill);
  padding: 6px 13px; font-size: 11px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; white-space: nowrap;
}
.nut-badge-sm { padding: 2px 8px; font-size: 9px; letter-spacing: .8px; margin-left: 6px; vertical-align: 2px; }

.nut-suggest-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 13px 15px; margin-bottom: 22px; text-decoration: none; color: var(--text);
  transition: border-color 0.15s;
}
.nut-suggest-link:hover { border-color: var(--accent); }
.nut-suggest-title { font-size: 13px; font-weight: 600; }
.nut-suggest-arrow { color: var(--accent); font-size: 18px; flex-shrink: 0; }

.nut-section-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.nut-section-hdr .section-heading { margin-bottom: 0; }
.nut-section-gap { margin-top: 28px; }
.nut-switch {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 11px; font-weight: 600; letter-spacing: .5px; color: var(--muted);
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 5px 12px 5px 10px;
}
.nut-switch input { accent-color: var(--accent); width: 14px; height: 14px; cursor: pointer; }
.nut-switch:has(input:checked) { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }

.nut-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 13px 14px 14px; margin-bottom: 10px;
}
.nut-card-dashed { background: transparent; border-style: dashed; }
.nut-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.nut-day-name { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text); }

.nut-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.nut-field { position: relative; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.nut-field-wide { grid-column: span 4; }
.nut-field-narrow { max-width: 88px; }
.nut-field-label { font-size: 9.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.nut-field .field-input { padding-right: 34px; }
.nut-field input[type="number"], .nut-field input[type="time"] { font-family: var(--font-mono); }
.nut-field select.field-input { padding-right: 30px; text-overflow: ellipsis; }
.nut-unit {
  position: absolute; right: 11px; bottom: 11px;
  font-size: 10.5px; color: var(--muted); pointer-events: none;
}

.nut-card-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.nut-slot { padding-top: 0; padding-bottom: 0; }
.nut-slot[open] { padding-bottom: 14px; }
.nut-slot-summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 13px 0; list-style: none;
}
.nut-slot-summary::-webkit-details-marker { display: none; }
.nut-slot-summary::after {
  content: "›"; margin-left: auto; color: var(--muted); font-size: 17px; line-height: 1;
  transform: rotate(90deg); transition: transform 0.15s;
}
.nut-slot[open] .nut-slot-summary::after { transform: rotate(-90deg); }
.nut-slot-summary .nut-slot-time { margin-left: auto; }
.nut-slot-time { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.nut-toggle-row { margin: 16px 0; }
.nut-day-meals { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.nut-slot-nested { background: var(--surface2); margin-bottom: 8px; }
.is-hidden { display: none !important; }

.nut-plan-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 13px 15px; margin-bottom: 10px;
}
.nut-plan-info { min-width: 0; }
.nut-plan-name { font-size: 14px; font-weight: 600; }
.nut-plan-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.nut-danger-zone { margin-top: 32px; display: flex; justify-content: flex-end; }

@media (max-width: 420px) {
  .nut-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nut-field-wide { grid-column: span 2; }
  .nut-slot-form { flex-wrap: wrap; }
}
.nut-result { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.nut-result-row {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px; margin-bottom: 14px;
}
.nut-result-stat { text-align: center; min-width: 0; }
.nut-result-val { font-family: var(--font-display); font-size: 22px; line-height: 1; color: var(--accent); }
.nut-result-lab { font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.nut-reasoning { list-style: none; padding: 0; margin: 0 0 10px; }
.nut-reasoning li {
  font-size: 12px; color: var(--muted); line-height: 1.55;
  padding: 4px 0 4px 14px; position: relative;
}
.nut-reasoning li::before { content: "·"; position: absolute; left: 3px; color: var(--accent); }
.nut-sum { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); }
.nut-sum-off { color: var(--accent2); }
.nut-pct {
  position: absolute; right: 16px; top: 19px; width: 42px;
  background: transparent; border: none; outline: none;
  color: var(--muted); font-family: var(--font-mono); font-size: 10.5px;
  text-align: right; padding: 0 2px;
}
.nut-pct::-webkit-outer-spin-button, .nut-pct::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.nut-pct { -moz-appearance: textfield; }
.nut-pct:focus { color: var(--accent); }
.nut-pct-sign {
  position: absolute; right: 10px; top: 19px;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--muted);
  pointer-events: none;
}
.nut-confirm {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
  font-size: 11.5px; color: var(--accent2); cursor: pointer;
}
.nut-confirm input { accent-color: var(--accent2); width: 15px; height: 15px; }
.nut-version-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; margin-bottom: 8px; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 13px;
}
.nut-version-row:hover { border-color: var(--accent); }
.nut-version-zone { margin-top: 24px; }
.nut-version-zone .nut-sub { margin-top: 8px; max-width: 46ch; }
[x-cloak] { display: none !important; }
.nut-grid-gap { margin-top: 10px; }

/* ── FOOD LOG ──────────────────────────────────────────────────────────────── */
.day-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.day-nav-btn {
  width: 38px; height: 38px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); text-decoration: none; font-size: 19px; line-height: 1;
}
.day-nav-label { text-align: center; }
.day-nav-date { font-family: var(--font-display); font-size: 22px; letter-spacing: 1px; }
.day-nav-today { font-size: 11px; color: var(--accent); text-decoration: none; }

.day-summary { padding: 15px 15px 16px; }
.day-headline { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.day-kcal { font-family: var(--font-display); font-size: 34px; line-height: 1; color: var(--accent); }
.day-kcal-of { font-size: 12.5px; color: var(--muted); }
.day-left { margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }

.macro-bars { display: flex; flex-direction: column; gap: 9px; }
.macro-bar-top { display: flex; justify-content: space-between; margin-bottom: 4px; }
.macro-bar-label { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.macro-bar-val { font-family: var(--font-mono); font-size: 10.5px; color: var(--text); }
.macro-bar-track { height: 4px; border-radius: 2px; background: var(--surface2); overflow: hidden; }
.macro-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; max-width: 100%; }

.meal-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 13px 14px; margin-bottom: 10px;
}
.meal-hdr { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.meal-hdr .nut-slot-time { margin-left: 7px; }
.meal-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

.entry-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-top: 1px solid var(--surface2);
}
.entry-main { min-width: 0; }
.entry-name { font-size: 13px; font-weight: 600; }
.entry-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.entry-actions { display: flex; gap: 2px; flex-shrink: 0; }
.icon-btn {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 14px; padding: 6px 8px; line-height: 1;
}
.icon-btn:hover { color: var(--accent); }

.sheet-overlay {
  position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.55);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  width: 100%; max-width: 680px; max-height: 88dvh; overflow-y: auto;
  background: var(--surface); border-top: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 16px 16px calc(var(--safe-bottom) + 20px);
}
.sheet-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sheet-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* The analyzer's two model buttons. Their labels carry the tradeoff ("Fast
   Model (~6s Simple Food)"), which is too long to sit beside each other on a
   phone — stacked and full-width, each reads in one line and is a big tap
   target for a one-handed log. */
.scan-model-actions { flex-direction: column; align-items: stretch; }
.scan-model-actions .btn-ghost,
.scan-model-actions .btn-primary { width: 100%; }
.scan-model-hint { margin-top: 10px; }

.scope-row { display: flex; gap: 6px; margin: 10px 0; }
.scope-btn {
  flex: 1; padding: 6px 8px; border-radius: var(--radius-pill);
  background: var(--surface2); border: 1px solid var(--border); color: var(--muted);
  font-size: 11px; font-weight: 600; text-transform: capitalize; cursor: pointer;
}
.scope-btn.active { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }

.picker-list { max-height: 44dvh; overflow-y: auto; }
.picker-row {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 2px; background: none; border: none; border-top: 1px solid var(--surface2);
  color: var(--text); text-align: left; cursor: pointer;
}
.picker-star { color: var(--accent); font-size: 13px; }
.day-links { display: flex; justify-content: flex-end; gap: 14px; margin-bottom: 10px; }
.day-links a { font-size: 11.5px; color: var(--muted); text-decoration: none; }
.day-links a:hover { color: var(--accent); }
.scan-item { padding: 12px; margin-bottom: 8px; }
.scan-name { font-weight: 600; }
.scan-total {
  display: flex; justify-content: space-between; gap: 10px; margin-top: 4px;
  font-family: var(--font-mono); font-size: 12px; color: var(--accent);
}

/* ── MOBILE INPUT BEHAVIOUR ────────────────────────────────────────────────── */
/* iOS Safari zooms the page whenever a focused field's text is under 16px, and
   never zooms back out. Keep every editable control at 16px on phone widths. */
@media (max-width: 820px) {
  .field-input,
  .nut-pct,
  input[type="text"], input[type="search"], input[type="number"],
  input[type="time"], input[type="date"], input[type="password"], input[type="email"],
  select, textarea {
    font-size: 16px;
  }
  .nut-pct { width: 54px; top: 15px; }
  .nut-pct-sign { top: 17px; }
}

/* Date and time controls carry an intrinsic width on iOS and refuse to shrink
   inside a grid cell, which is what pushed Order on top of Time. */
.nut-field input[type="time"],
.nut-field input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

/* A time control still asks for more room than half a phone screen once iOS
   adds its AM/PM, so give it the whole row there rather than let it push its
   neighbour over. */
@media (max-width: 460px) {
  .nut-field-time { grid-column: 1 / -1; }
}
.nut-grid > * { min-width: 0; }

/* ── BODY METRICS ──────────────────────────────────────────────────────────── */
.metric-row .nut-sub { margin-top: 10px; line-height: 1.5; }

.range-row { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.range-row .scope-btn { text-decoration: none; text-align: center; padding: 7px 12px; }

.chart-card { padding: 14px 12px 12px; }
.metric-chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart-trend {
  fill: none; stroke: var(--accent); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
}
.chart-dot { fill: var(--muted); }
.chart-scale {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-family: var(--font-mono); font-size: 10px; color: var(--muted);
}
.chart-legend {
  display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 8px;
  font-size: 10.5px; color: var(--muted);
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.legend-line { width: 14px; height: 2px; border-radius: 1px; background: var(--accent); }

/* Overlay series: emphasis order, assigned in a fixed sequence and never cycled. */
.chart-series-1 { stroke: var(--accent); }
.chart-series-2 { stroke: var(--run-accent); }
.chart-series-3 { stroke: var(--accent2); }
.chart-series-4 { stroke: var(--muted); }
.legend-2 { background: var(--run-accent); }
.legend-3 { background: var(--accent2); }
.legend-4 { background: var(--muted); }

.metric-link { text-decoration: none; color: var(--text); }
.metric-latest { text-align: right; flex-shrink: 0; }
.metric-latest-val { font-family: var(--font-display); font-size: 24px; color: var(--accent); }
.metric-latest-unit { font-size: 10px; color: var(--muted); margin-left: 3px; }

.scale-row { display: flex; gap: 6px; }
.scale-btn { flex: 1; }
.scale-btn input { position: absolute; opacity: 0; pointer-events: none; }
.scale-btn span {
  display: block; text-align: center; padding: 10px 0;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 15px; cursor: pointer;
}
.scale-btn input:checked + span {
  border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface2));
}

.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.check-item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.check-item input { accent-color: var(--accent); width: 15px; height: 15px; }
.tile-link { text-decoration: none; color: var(--text); }
.tile-side { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }

/* ── ANALYSIS ──────────────────────────────────────────────────────────────── */
.stat-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; }
.stat { min-width: 62px; }
.stat-val { font-family: var(--font-display); font-size: 24px; line-height: 1; color: var(--accent); }
.stat-lab { font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.chart-reference { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: .6; }
.legend-reference { background: var(--muted); }
.flag-card {
  margin-top: 12px; padding: 12px;
  background: color-mix(in srgb, var(--accent2) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent2) 30%, transparent);
  border-radius: var(--radius-sm);
}
.flag-title { font-size: 12px; font-weight: 700; color: var(--accent2); margin-bottom: 4px; }
.macro-split { margin-top: 12px; }
.split-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; }
.split-bar span { display: block; }
.split-protein, .legend-protein { background: var(--accent); }
.split-carbs, .legend-carbs { background: var(--run-accent); }
.split-fat, .legend-fat { background: var(--accent2); }
.suggestion-card { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.suggestion-action { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.disclaimer { margin-top: 22px; text-align: center; opacity: .75; }
.meal-plan {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: -2px 0 8px; font-family: var(--font-mono); font-size: 10.5px;
}
.meal-plan-lab { color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-size: 9px; }
a.meal-plan-lab { text-decoration: none; }
a.meal-plan-lab:hover { color: var(--accent); }
.meal-plan-macros { color: var(--accent); }
.meal-plan-logged { color: var(--muted); }
.undo-bar {
  position: fixed; left: 12px; right: 12px; bottom: calc(var(--safe-bottom) + 74px);
  z-index: 120; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 12px; max-width: 656px; margin: 0 auto;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius); font-size: 12.5px;
}

/* ── BRAND MARK ────────────────────────────────────────────────────────────── */
/* The logo is drawn for its own cream backdrop, so it keeps one on dark screens
   rather than being recoloured into something it is not. */
/* The dark variant of the mark needs no plate behind it — it was drawn for
   this backdrop, so it sits straight on the page. */
.login-mark { margin: 0 auto 14px; max-width: 300px; }
.login-mark img { display: block; width: 100%; height: auto; }

/* Per-meal planned versus logged: four small gauges rather than two number runs. */
.meal-macros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 2px 0 10px; }
.meal-macros:has(.mm:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mm-top { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; margin-bottom: 3px; }
.mm-lab { font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.mm-val { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); }
.mm-done { color: var(--text); }
.mm-track { height: 3px; border-radius: 2px; background: var(--surface2); overflow: hidden; }
.mm-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width .15s; }
.mm-fill.mm-over { background: var(--accent2); }

/* Photo scan: a single black-box HTTP call with no real progress signal, so
   an indeterminate sweep is the honest choice — never a fake percentage. */
.scan-progress { height: 4px; border-radius: 2px; background: var(--surface2); overflow: hidden; margin: 10px 0 4px; }
.scan-progress-fill {
  height: 100%; width: 40%; border-radius: 2px; background: var(--accent);
  animation: scan-sweep 1.1s ease-in-out infinite;
}
@keyframes scan-sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
.hist-ex-name { font-weight: 500; color: var(--text); }
.hist-ex-detail { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); text-align: right; }

/* ── CHART AXIS ────────────────────────────────────────────────────────────── */
/* The value gutter. .chart-canvas holds only the <svg>, so its box is exactly
   the plot area — which is what lets the ticks position by percentage and land
   on their own gridlines. Put anything else in there and they drift. */
.chart-canvas { position: relative; padding-left: 38px; }
.chart-y-axis { position: absolute; left: 0; top: 0; bottom: 0; width: 34px; pointer-events: none; }
.chart-y-tick {
  position: absolute; right: 0; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 9px; color: var(--muted);
  white-space: nowrap;
}
/* Ticks are emitted low value first, so :first-child sits at the bottom of the
   plot and :last-child at the top. Centring those two on their gridlines would
   hang half a label outside the chart — into the date row below, and into the
   paragraph above. Tuck them inside instead, as the date ticks already do at
   the left and right edges. */
.chart-y-tick:first-child { transform: translateY(-100%); }
.chart-y-tick:last-child { transform: translateY(0); }
/* Sits under the value gutter, not the plot, so it reads as the unit of the
   axis above it rather than as another date. */
.chart-y-unit {
  display: block; width: 34px; text-align: right; margin-top: 1px;
  font-family: var(--font-mono); font-size: 9px; color: var(--muted);
}
/* Gridlines sit under the series: they are for reading a value off, not for
   looking at. Fainter than the reference line, which carries actual meaning. */
.chart-grid { stroke: var(--border); stroke-width: 1; opacity: .55; }
/* The date ticks start where the plot does. margin, not padding: the ticks are
   absolutely positioned against their parent's padding box, so padding would
   widen the box they measure percentages against without moving them. */
.chart-canvas + .chart-ticks { margin-left: 38px; }
/* Weight-blind hides the axis, so there is no gutter to line up with. */
.chart-canvas-bare { padding-left: 0; }
.chart-canvas-bare + .chart-ticks { margin-left: 0; }
.chart-ticks { position: relative; height: 14px; margin-top: 2px; }
.chart-tick {
  position: absolute; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--font-mono); font-size: 9px; color: var(--muted);
}
.chart-tick:first-child { transform: none; }
.chart-tick:last-child { transform: translateX(-100%); }

/* ── DUAL-AXIS CHART ───────────────────────────────────────────────────────── */
/* Intake bars on the left scale, trend weight on the right. The only chart in
   the app carrying two y-scales — see lib/charting.bar_line_chart for why. */
.chart-canvas-dual { padding-right: 38px; }
.chart-canvas-dual + .chart-ticks { margin-right: 38px; }
.chart-y-axis-right { left: auto; right: 0; }
/* Mirror of the left gutter: its labels hug the plot, so these do too. */
.chart-y-axis-right .chart-y-tick { right: auto; left: 0; }
.chart-units { display: flex; justify-content: space-between; }
.chart-unit-right { text-align: left; }
/* Translucent so the trend line stays readable where it crosses a tall bar. */
.chart-bar { fill: var(--accent); opacity: .5; }
/* Solid because the target was chosen; the mean beside it stays dashed because
   it was measured. Same stroke weight, so neither reads as the more important. */
.chart-reference-solid { stroke: var(--muted); stroke-width: 1; opacity: .7; }
.legend-bar { width: 9px; height: 9px; border-radius: 2px; background: var(--accent); opacity: .5; }
.legend-dash {
  background: repeating-linear-gradient(90deg, var(--muted) 0 3px, transparent 3px 6px);
}

/* ── MACRO STATUS ──────────────────────────────────────────────────────────── */
/* Green when a macro is met, warming through amber to terracotta as it drifts.
   Terracotta rather than alarm red: being over a target is information, not a
   telling-off. */
:root {
  --met:   #35c98a;
  --near:  #f0b429;
  --drift: #d9714f;
}
.bar-met   { background: var(--met) !important; }
.bar-near  { background: var(--near) !important; }
.bar-drift { background: var(--drift) !important; }
/* Still filling: a dim version of the met colour, so the bar reads as progress
   toward green rather than as a dead grey stub. */
.bar-early { background: color-mix(in srgb, var(--met) 42%, var(--surface2)) !important; }