/* Self-hosted variable fonts — CSP forbids external font origins (§8) and there is no build
   step, so the .woff2 files are vendored in /fonts. Race Clock direction (OUTSTANDING §6):
   Space Grotesk = display, Hanken Grotesk = body/UI, JetBrains Mono = timing data. */
@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonts/hanken-grotesk.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonts/space-grotesk.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonts/jetbrains-mono.woff2') format('woff2');
}

:root {
  /* Race Clock palette (2026-07-03). Chrome = midnight ink → deep purple; #7c3aed purple is the
     brand accent AND the locked race-day color (§5d). Orange kept as the energy/tempo signal. */
  --navy:       #0b1230;   /* midnight ink — headers, chrome gradient start, strong text */
  --navy-mid:   #4c1d95;   /* deep purple — chrome gradient end (midnight → purple) */
  --brand:      #7c3aed;   /* purple — primary accent (== race color, §5d) */
  --brand-dk:   #6d28d9;
  --surface-2:  #e7e9f2;
  --accent:     #f97316;   /* energy / tempo signal */
  --accent-dk:  #ea580c;
  /* teal = vert (§5g). Was hardcoded per-site since US-4.2; named here with US-4.7 so Vert, Downhill,
     the trail gauge, and the Summit hub all resolve to one source. --vert-dk is Downhill: same mountain
     family, direction carried by the glyph, so nothing new competes with orange (effort/heat). */
  --vert:       #1d9e75;
  --vert-dk:    #0f6e56;
  --vert-50:    #e1f5ee;
  --bg:         #f5f6fb;
  --card:       #ffffff;
  --text:       #14183a;   /* near-ink body text */
  --muted:      #6b7280;
  --border:     #e4e4ef;
  /* Referenced but never DEFINED (found 2026-07-24, #47) — rules silently rode their fallback.
     Each is defined here at EXACTLY that fallback, so rendering is byte-identical and the token
     becomes real. --line = the pale hairline/track; --hold-soft = the same value as a fill.
     ⚠ --brand-50's four call sites did NOT agree: three wanted #f3ecff and .ask-bubble-a wanted
     #fbf9ff. Defining the majority value would silently have restyled that one bubble, so it now
     carries its own literal — the token is the pale purple chip/pill fill, nothing else. */
  --line:       #eef0f6;
  --hold-soft:  #eef0f6;
  --brand-50:   #f3ecff;
  /* These five had call sites with NO fallback, so those declarations were being DROPPED in
     production — proved in the live DOM: .sess-mismatch computed border-left-width 0px, and both
     .sm-dot and .tr-rdot were fully transparent. .tr-rdot is the marker for WHICH treadmill split
     was the hard effort, so that card could not point at it. Each value is the one this token's own
     other call sites already fell back to, except where the name maps onto an existing token.
     Owner-approved 2026-07-24 (before/after previewed at both widths, §13e). */
  --faint:      #9aa1b8;
  --red:        #dc2626;
  --surface:    #f8f9fc;
  --orange:     var(--accent);  /* §5g: the app's orange IS --accent; both sites are caution */
  --text-muted: #94a3b8;        /* owner's call: lighter than --muted for the weather control */
  --shadow-sm:  0 1px 3px rgba(11,18,48,.06);
  --shadow:     0 4px 14px rgba(11,18,48,.08), 0 1px 3px rgba(11,18,48,.05);
  --shadow-lg:  0 10px 30px rgba(11,18,48,.12);
  --r:          16px;
  --r-sm:       10px;
  --font-body:    'Hanken Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Space Grotesk', 'Hanken Grotesk', -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* prevent horizontal scroll from any overflow */
  width: 100%;
}

/* Space Grotesk on headings/titles; everything else inherits Hanken Grotesk (Race Clock). */
h1, h2, h3, h4, .auth-title, #header-title, .sidebar-brand-name {
  font-family: var(--font-display); letter-spacing: -.015em;
}

/* ── Desktop: centered content column ───────────────────────────────────── */
@media (min-width: 600px) {
  body { background: #d4d9ec; }
  .auth-screen {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
  }
  .app-shell {
    max-width: 680px;
    margin: 0 auto;
  }
  .view-root {
    padding-left: 24px;
    padding-right: 24px;
  }
  .tab-bar {
    border-radius: 0;
  }
}

/* ── Auth screen ─────────────────────────────────────────────────────────── */
.auth-screen {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 32px 20px;
  background: linear-gradient(150deg, #0f1d5e 0%, #1e3a8a 55%, #1e40af 100%);
}
.auth-card {
  background: #fff; border-radius: 24px; padding: 40px 28px 32px;
  max-width: 360px; width: 100%; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
/* The branding tagline is a desktop-only element (mobile keeps the compact single card). */
.auth-tagline { display: none; }
/* Desktop (≥900px): split into a branding panel (navy→purple chrome gradient) + a form panel.
   Lift the 480px mobile-column cap so the gradient is full-bleed and the split card has room. */
@media (min-width: 900px) {
  .auth-screen { max-width: none; margin: 0; }
  .auth-card {
    max-width: 760px; padding: 0; overflow: hidden; text-align: left;
    display: grid; grid-template-columns: 1fr 1fr;
  }
  .auth-brand {
    padding: 48px 42px; color: #fff; display: flex; flex-direction: column; justify-content: center;
    background: linear-gradient(150deg, #0b1230 0%, #2a1a5e 55%, #4c1d95 100%);
  }
  .auth-brand .auth-logo-img { margin-bottom: 20px; }
  /* Desktop auth title sits on the NAVY brand panel → the wordmark REVERSE rule applies:
     solid white including the two-color split's ink tail (dark surfaces never show the accent). */
  .auth-brand .auth-title, .auth-brand .auth-title > span { color: #fff; }
  .auth-brand .auth-title { font-size: 34px; line-height: 1.1; margin: 0 0 14px; }
  .auth-tagline { display: block; color: #c9c3ee; font-size: 14px; line-height: 1.6; margin: 0; max-width: 300px; }
  .auth-form-side { padding: 48px 42px; display: flex; flex-direction: column; justify-content: center; }
  .auth-form-side .auth-sub { margin: 0 0 24px; }
}
.auth-logo-img { width: 84px; height: 84px; margin-bottom: 14px; }
/* Arc-fin bars rise in on the auth screen, staggered; respects reduced-motion.
   TRANSLATE (not scaleY) on purpose: each bar slides up under its stationary fin clip, so the
   fin edge "cuts" the bar top progressively — the INTEGRATION §2.2 port of the bundle's SMIL
   0 56 → 0 0 rise. 56px = SVG user units (bar bottom y=58 → fully below the 64 viewBox). */
.auth-logo-img .ab { animation: bar-rise .5s cubic-bezier(.2,.7,.3,1) both; animation-delay: calc(var(--i) * .08s); }
@keyframes bar-rise { from { transform: translateY(56px); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .auth-logo-img .ab { animation: none; } }
.auth-title { margin: 0 0 8px; font-size: 26px; font-weight: 800; color: var(--navy); letter-spacing: -.5px; }
.auth-sub   { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0 0 28px; }
.auth-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 15px 18px; border-radius: 14px;
  font-size: 15px; font-weight: 700; font-family: inherit;
  border: none; cursor: pointer; margin-bottom: 12px; min-height: 52px;
  transition: transform .12s, opacity .12s;
}
.auth-btn:active { transform: scale(.97); opacity: .9; }
.auth-error  { color: #dc2626; font-size: 13px; margin: 8px 0 0; }
.auth-fine   { color: #b0b8c9; font-size: 11.5px; margin: 18px 0 0; line-height: 1.5; }
.auth-email-input {
  display: block; width: 100%; padding: 15px 14px; border-radius: 14px;
  border: 2px solid var(--border); font-size: 16px; font-family: inherit;
  color: var(--text); background: #f8fafc; margin-bottom: 10px; outline: none;
  transition: border-color .15s;
}
.auth-email-input:focus { border-color: var(--navy); background: #fff; }
.auth-email-btn { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%); color: #fff; margin-bottom: 0; }
.magic-link-sent {
  background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0;
  border-radius: 12px; padding: 14px 16px; font-size: 14px; margin: 4px 0 0; line-height: 1.5;
  text-align: center;
}
.magic-link-sent p { margin: 0 0 6px; }
.magic-link-sent p:last-of-type { margin-bottom: 12px; }
.magic-link-waiting { font-size: 13px; color: #64748b !important; }
.waiting-dots::after {
  content: '';
  animation: dots 1.4s steps(4, end) infinite;
}
@keyframes dots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: ''; }
}
.auth-back-btn {
  display: block; width: 100%; margin-top: 4px;
  padding: 9px; border-radius: 10px; border: 1px solid #bbf7d0;
  background: transparent; color: #15803d; font-size: 13px;
  font-family: inherit; font-weight: 600; cursor: pointer;
}
.auth-back-btn:active { background: #dcfce7; }

/* ── App shell ───────────────────────────────────────────────────────────── */
.app-shell { display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; width: 100%; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.app-header {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  color: #fff;
  padding: calc(env(safe-area-inset-top) + 12px) 16px 13px;
  box-shadow: 0 2px 12px rgba(15,29,94,.3);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.app-header h1 { margin: 0; font-size: 19px; font-weight: 800; flex: 1; letter-spacing: -.3px; }
.header-logo {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 30px; height: 30px; border-radius: 7px;
  pointer-events: none;
}
.user-info { display: flex; align-items: center; flex-shrink: 0; }
.user-avatar-btn {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand); color: #fff;
  font-size: 12px; font-weight: 700; font-family: var(--font-display, inherit);
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: opacity .15s;
}
.user-avatar-btn:active { opacity: .75; }

/* ── Scrollable content area ─────────────────────────────────────────────── */
/* ── Pull-to-refresh ────────────────────────────────────────────────────── */
.ptr-indicator {
  width: 100%; height: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: height 0.15s, opacity 0.15s;
  pointer-events: none;
}
.ptr-indicator.ptr-loading {
  height: 48px; opacity: 1;
}
.ptr-spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
}
.ptr-loading .ptr-spinner {
  animation: ptr-spin 0.7s linear infinite;
}
@keyframes ptr-spin { to { transform: rotate(360deg); } }
@media (min-width: 900px) { .ptr-indicator { display: none; } }

.view-root {
  padding: 16px 14px 100px;
  max-width: 640px;
  width: 100%;          /* flex child: constrain to container width */
  min-width: 0;         /* allow shrinking below content size */
  margin: 0 auto;
  min-height: calc(100vh - 130px);
  box-sizing: border-box;
}

/* ── Tab bar ─────────────────────────────────────────────────────────────── */
.tab-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: flex;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(0,0,0,.08);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab-btn {
  flex: 1; border: none; background: none;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 2px 7px; min-height: 56px;
  color: #94a3b8; font-size: 10px; font-weight: 600;
  cursor: pointer; transition: color .15s;
}
.tab-btn .ic { font-size: 21px; line-height: 1; transition: transform .15s; display: flex; }
.tab-btn .ic svg { width: 22px; height: 22px; display: block; }
.tab-btn.active { color: var(--brand); }
.tab-btn.active .ic { transform: scale(1.1); }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
  background: var(--card); border-radius: var(--r); padding: 16px;
  box-shadow: var(--shadow); margin-bottom: 14px;
  border: 1px solid rgba(0,0,0,.04);
  width: 100%; min-width: 0;
  transition: box-shadow .15s ease, transform .15s ease;
}
/* grid children must be allowed to shrink below intrinsic size */
.input-grid > * { min-width: 0; }
.card h3 { margin: 0 0 12px; font-size: 16px; font-weight: 700; letter-spacing: -.2px; font-family: var(--font-display); }
.empty { color: var(--muted); text-align: center; padding: 40px 16px; font-size: 14px; }
/* Friendly empty state (icon + title + subtitle + CTA) */
.empty-state { text-align: center; padding: 46px 24px; }
.es-icon { color: #c4b5fd; margin-bottom: 12px; line-height: 0; }
.es-icon svg { width: 44px; height: 44px; display: inline-block; }
.es-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--text); letter-spacing: -.01em; }
.es-sub { font-size: 13px; color: var(--muted); margin: 5px auto 0; max-width: 264px; line-height: 1.5; }
.es-cta { margin-top: 16px; background: var(--brand); color: #fff; border: none; border-radius: 10px; padding: 10px 18px; font-family: var(--font-display); font-weight: 700; font-size: 14px; cursor: pointer; transition: background .15s; }
.es-cta:hover { background: var(--brand-dk); }
.es-cta:active { transform: scale(.98); }
@media (prefers-reduced-motion: no-preference) { .empty-state { animation: es-in .35s ease both; } }
@keyframes es-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.primary-btn, .ghost-btn, .danger-btn, .nav-btn, .edit-btn, .tab-btn {
  font-family: inherit;
}
.primary-btn {
  background: var(--brand);
  color: #fff; border: none; border-radius: var(--r-sm);
  padding: 13px 18px; font-size: 15px; font-weight: 700; width: 100%;
  min-height: 48px; margin-bottom: 12px; cursor: pointer;
  box-shadow: 0 4px 12px rgba(124,58,237,.30);
  transition: transform .12s, box-shadow .12s;
}
.primary-btn:hover { background: var(--brand-dk); }
.primary-btn:active { transform: scale(.97); box-shadow: none; }
.ghost-btn {
  background: #f1f5f9; color: var(--text); border: none;
  border-radius: var(--r-sm); padding: 13px 18px; min-height: 48px;
  cursor: pointer; font-weight: 600; font-size: 14px;
  transition: background .15s;
}
.ghost-btn:active { background: #e2e8f0; }
.danger-btn {
  background: #fff1f1; color: #dc2626; border: 1px solid #fecaca;
  border-radius: var(--r-sm); padding: 13px 18px; min-height: 48px;
  cursor: pointer; font-weight: 700; font-size: 14px;
}
.danger-btn:active { background: #fee2e2; }

/* ── Week nav ────────────────────────────────────────────────────────────── */
/* Merged "Plan" tab (2026-07-16): the Training/Races segmented control atop both segments. */
.plan-seg {
  display: flex; background: #e9e7f4; border-radius: 12px; padding: 3px; margin: 0 0 12px;
}
.plan-seg-btn {
  flex: 1; border: none; background: none; cursor: pointer; padding: 8px 0;
  border-radius: 9px; font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
  color: #5a6079; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.plan-seg-on { background: var(--card, #fff); color: var(--text); box-shadow: 0 1px 2px rgba(19,26,51,.08); }
.plan-seg-n {
  font-size: 10.5px; font-weight: 700; background: #ede9fe; color: #6d28d9;
  padding: 1px 7px; border-radius: 99px; font-family: var(--font-mono);
}

.week-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.nav-btn {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 10px 14px; min-height: 44px; font-weight: 700; cursor: pointer;
  color: var(--navy); font-size: 13px; box-shadow: var(--shadow-sm);
  transition: background .15s;
}
.nav-btn:active { background: #f1f5f9; }
.week-label { flex: 1; text-align: center; font-weight: 800; font-size: 13px; letter-spacing: -.2px; }
.week-range { font-weight: 500; color: var(--muted); font-size: 12px; }

/* ── Workout type colors (P2B palette) ───────────────────────────────────── */
.type-easy        { background: #38bdf8; }
.type-long-run    { background: #a855f7; }
/* US-4.9: dots now agree with WORKOUT_META, which they had drifted from. Hills was #7c3aed — the exact
   hex .type-race uses — and it went unnoticed only because the plan never assigned Hills. The result is
   a deliberate effort ramp (§5g: colour on a workout encodes intensity): amber → orange → red. */
.type-interval    { background: #ef4444; }
.type-tempo       { background: #f59e0b; }
.type-hills       { background: #f97316; }
/* US-4.7: teal = vert. Downhill is the deeper teal — same family, direction in the glyph (§5g). */
.type-vert        { background: var(--vert); }
.type-downhill    { background: var(--vert-dk); }
.type-rest        { background: #9ca3af; }
.type-race        { background: #7c3aed; }
.type-recovery    { background: #2563eb; }

.day-color { width: 5px; flex-shrink: 0; border-radius: 0 0 0 12px; }
.wtype {
  font-weight: 700; font-size: 11px; letter-spacing: .3px;
  padding: 2px 9px; border-radius: 20px;
}
/* Pill-specific colors (light bg, dark text) */
.wtype.type-easy      { background: #e0f7ff; color: #0c4a6e; }
.wtype.type-long-run  { background: #faf5ff; color: #6b21a8; }
.wtype.type-interval  { background: #fee2e2; color: #991b1b; }
.wtype.type-rest      { background: #f3f4f6; color: #4b5563; }
.wtype.type-tempo     { background: #fef9c3; color: #92400e; }
.wtype.type-hills     { background: #fff7ed; color: #9a3412; }
.wtype.type-race      { background: #ede9fe; color: #6d28d9; }
.wtype.type-recovery  { background: #eff6ff; color: #1e40af; }
/* US-4.7 shipped .type-vert/.type-downhill dots but no PILL rules, so both pills inherited the
   saturated dot background: Downhill measured 2.77:1, under the 4.5:1 WCAG AA floor. Pale teal fixes it
   (5.46:1 and 7.49:1) and puts them back inside the pale-pill system every other type uses. */
.wtype.type-vert      { background: #e1f5ee; color: #0f6e56; }
.wtype.type-downhill  { background: #d3ebe1; color: #085041; }

/* ── Day cards ───────────────────────────────────────────────────────────── */
.day-list { display: flex; flex-direction: column; gap: 10px; }
.day-card {
  background: var(--card); border-radius: 14px;
  box-shadow: var(--shadow); overflow: hidden;
  border: 1px solid rgba(0,0,0,.04);
  transition: box-shadow .15s;
}
.day-card.today {
  outline: 2.5px solid var(--accent);
  box-shadow: 0 4px 16px rgba(249,115,22,.18);
}
.day-row { display: flex; align-items: stretch; cursor: pointer; min-height: 60px; }
.day-main { flex: 1; padding: 11px 13px; }
.day-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.day-name { font-weight: 800; font-size: 15px; }
.day-date { color: var(--muted); font-size: 13px; font-weight: 500; }
.today-badge {
  background: var(--accent); color: #fff;
  font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 6px;
  letter-spacing: .5px; text-transform: uppercase;
}
.day-sub { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; align-items: center; }
.pill {
  background: #f1f5f9; border-radius: 7px; padding: 2px 8px;
  font-size: 12px; color: var(--text); font-weight: 500;
}
.pill.alt { background: #eff6ff; color: #1d4ed8; font-weight: 600; }
/* Numeric log badges in mono for the race-clock read (distance, HR, actuals). */
.pill, .hr-pill, .day-actual, .day-missed-plan { font-family: var(--font-mono); }
.day-chevron {
  display: flex; align-items: center; padding: 0 10px 0 4px;
  color: #cbd5e1; font-size: 12px;
}
.day-check {
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; align-self: center; margin-right: 2px;
}
.day-check i { font-size: 11px; color: #fff; }
.day-check-dark i { color: #555 !important; }

/* ── Progress bar ────────────────────────────────────────────────────────── */
.day-pbar { height: 3px; position: relative; background: var(--border); border-radius: 0 0 14px 14px; overflow: visible; }
.day-pbar-seg { height: 3px; position: absolute; top: 0; }
.day-pbar-green  { background: #22c55e; }
.day-pbar-yellow { background: #ffee00; }
.day-pbar-orange { background: #f97316; }
.day-pbar-red    { background: #ff1744; }

/* ── Day card data chips ─────────────────────────────────────────────────── */
.day-actual { font-size: 12px; color: var(--muted); font-weight: 500; }
.hr-pill {
  background: #f1f5f9; border-radius: 7px; padding: 2px 8px;
  font-size: 12px; color: var(--text); font-weight: 600;
}
.day-missed-plan  { font-size: 12px; color: #be123c; text-decoration: line-through; font-weight: 500; }
.day-missed-label { font-size: 11px; color: #be123c; font-weight: 700; }

/* Answered days (2026-07-26). Red above is now reserved for a day NOBODY has accounted for; once the
   athlete tells us what happened the card stops accusing them. Approved option C2: a skipped day keeps
   its workout colour and dims, so a week with several skips still reads as a training week. */
.day-card.day-skipped { opacity: .62; }
.day-skipped-plan { font-family: var(--font-mono); font-size: 12px; color: var(--muted); text-decoration: line-through; }
.day-ans-chip {
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
  padding: 2px 7px; border-radius: 20px; background: #f1f5f9; color: #475569;
}
/* Green, not the app's orange: "you ran it" is a good outcome. Orange is caution (§5g) and the day
   needs no caution — the plan already treats it as neutral. */
.day-ans-chip.day-ans-ran { background: #ecfdf5; color: #047857; }
.day-notfound {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted); line-height: 1.45;
  padding: 7px 13px 9px;
}
.day-notfound-add {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--brand); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}

/* ── The unlogged-runs ask (2026-07-26) ──────────────────────────────────── */
.ask-unlogged { border-left: 4px solid var(--brand); }
.ask-unlogged h3 { margin: 0 0 7px; }
.ask-body { font-size: 13px; color: var(--text); line-height: 1.55; }
.ask-btns { display: flex; gap: 8px; margin-top: 11px; }
.ask-btn {
  flex: 1; font: inherit; font-size: 12px; font-weight: 700; padding: 9px 14px;
  border-radius: 8px; border: 1.5px solid #cbd5e1;   /* #47: no undefined tokens, even with a fallback */
  background: #fff; color: var(--navy); cursor: pointer;
}
.ask-btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.ask-btn-wide { width: 100%; margin-top: 11px; }
.ask-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--border);
}
.ask-row-label { font-size: 12px; color: var(--navy); font-weight: 600; }
.ask-sub { font-size: 12px; color: var(--muted); }
.ask-found { background: #faf8ff; border: 1px solid #e9defc; border-radius: 9px; padding: 10px; margin-top: 9px; }
.ask-found-name { font-weight: 700; font-size: 13px; color: var(--navy); }
.ask-found-stats { font-family: var(--font-mono); font-size: 12px; color: var(--text); margin-top: 4px; }
.ask-seg { display: inline-flex; border: 1.5px solid #cbd5e1; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.ask-sg { font: inherit; font-size: 11px; font-weight: 700; padding: 6px 13px; border: 0; background: #fff; color: var(--muted); cursor: pointer; }
/* Purple for ran, grey for skipped, so the two selected states never read the same at a glance. */
.ask-sg-on.ask-sg-ran { background: var(--brand); color: #fff; }
.ask-sg-on.ask-sg-skipped { background: #e2e8f0; color: #334155; }
@media (min-width: 900px) {
  .ask-unlogged .ask-btns { margin-top: 0; flex: 0 0 auto; }
  .ask-unlogged .ask-btn { min-width: 84px; flex: none; }
  .ask-unlogged.ask-lvl1 { display: flex; align-items: center; gap: 20px; }
  .ask-unlogged.ask-lvl1 > div:first-of-type { flex: 1; }
}

/* Declare a break (Athlete+), inside the week-adjust row. */
.away-form { display: flex; align-items: flex-end; gap: 9px; flex-wrap: wrap; width: 100%; }
.away-lab { font-size: 11px; color: var(--muted); font-weight: 600; margin-bottom: 3px; }
.away-date { border: 1.5px solid #cbd5e1; border-radius: 8px; padding: 6px 9px; font-family: var(--font-mono); font-size: 12px; }
.away-arrow { color: var(--muted); padding-bottom: 7px; }
.away-preview { background: #faf8ff; border: 1px solid #e9defc; border-radius: 10px; padding: 11px; width: 100%; margin: 10px 0; }
.away-pt { font-size: 11px; font-weight: 700; color: var(--brand-dk); letter-spacing: .04em; margin-bottom: 7px; }
.away-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid #efe8fb; font-size: 12px; color: var(--text); }
.away-row:last-child { border-bottom: 0; }
.away-num { font-family: var(--font-mono); }
/* The one primary action on this row, so it carries the fill (§5g: one accent per view). Cancel
   stays the existing quiet link, which is what .week-cap-cancel already is. */
.away-go {
  background: var(--brand); color: #fff; border: 0; font: inherit; font-size: 12px; font-weight: 700;
  padding: 9px 14px; border-radius: 8px; cursor: pointer; margin-right: 10px;
}

/* ── Day detail ──────────────────────────────────────────────────────────── */
.day-detail { padding: 0 13px 16px; border-top: 1px solid var(--border); }
.meta-line { font-size: 12.5px; color: var(--muted); margin: 12px 0 8px; font-weight: 500; }
.notes-line {
  background: #f8fafc; border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 10px;
  line-height: 1.5; color: var(--text);
}
.seg-list { margin-bottom: 10px; }
.seg { font-size: 12.5px; color: var(--text); padding: 3px 0; }
.derived-line { font-size: 13px; margin: 7px 0; color: var(--text); }
.input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.ifield { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); gap: 4px; font-weight: 600; letter-spacing: .2px; }
/* US-4.2 treadmill helper — teal sub-row that converts incline % → vertical gain (feet climbed). */
.tread-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #e1f5ee;
  border-radius: 10px; padding: 8px 11px; margin: -2px 0 10px; }
.tread-lbl { font-size: 12px; font-weight: 600; color: #0f6e56; }
.tread-in { width: 56px; min-height: 34px; font-size: 14px; padding: 5px 8px; border: 1px solid #9fe1cb;
  border-radius: 8px; background: #fff; color: #0f6e56; font-family: var(--font-mono); text-align: center; }
.tread-pct { font-size: 12px; color: #0f6e56; margin-left: -4px; }
.tread-out { font-size: 12px; font-weight: 600; color: #0f6e56; font-family: var(--font-mono); }
.tread-out.muted { font-weight: 400; color: #5b9c88; font-family: inherit; }
.ifield.wide { grid-column: 1 / -1; }
.ifield input, .ifield textarea, .ifield select {
  font-size: 16px; padding: 11px 12px; border: 1.5px solid var(--border); border-radius: 10px;
  font-family: inherit; min-height: 46px; background: #f8fafc; color: var(--text);
  transition: border-color .15s, background .15s;
}
.ifield input:focus, .ifield textarea:focus, .ifield select:focus {
  border-color: var(--navy); background: #fff; outline: none;
}
.ifield textarea { min-height: 60px; }

/* ── Race & result cards ─────────────────────────────────────────────────── */
.race-list, .result-list { display: flex; flex-direction: column; gap: 12px; }
.race-card, .result-card {
  position: relative; overflow: hidden;
  background: var(--card); border-radius: 14px; padding: 14px 16px 14px 19px;
  box-shadow: var(--shadow); border: 1px solid rgba(0,0,0,.04);
}
.race-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--race-accent, #cbd5e1); }
.race-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.race-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.race-star { color: #f59e0b; font-size: 15px; margin-left: 5px; }
.race-meta { color: var(--muted); font-size: 13px; margin-top: 3px; font-weight: 500; }
.race-meta .m, .race-computed .m { font-family: var(--font-mono); font-weight: 600; color: var(--text); }
.race-taper-warn { margin-top: 10px; background: #fbf6ee; border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; padding: 10px 12px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.race-taper-warn b { color: #8a4b0b; }
.race-computed { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.race-computed span {
  background: #f4f5fa; border: 0.5px solid #eceef4; border-radius: 8px; padding: 4px 10px;
  font-size: 12px; color: var(--muted); font-weight: 600;
}
.edit-btn {
  background: #f1f5f9; border: none; border-radius: 9px;
  padding: 8px 14px; font-weight: 700; min-height: 36px;
  cursor: pointer; color: var(--navy); font-size: 13px;
  transition: background .15s;
}
.edit-btn:active { background: #e2e8f0; }
.intent-chip {
  display: inline-block; font-size: 11px; font-weight: 700;
  border-radius: 20px; padding: 2px 9px;
  letter-spacing: .2px; margin-left: 6px;
}
.intent-time-goal { background: #ede9fe; color: #6d28d9; }
.intent-finish    { background: #e2e8f0; color: #475569; }
.intent-fun-run   { background: #fef3e2; color: #c2410c; }

/* P2 event-group chips (race calendar) — primary uses the locked race purple (§5d).
   Scoped under .race-computed to outrank its generic `span` pill rule (higher specificity). */
.race-computed .group-chip {
  display: inline-block; font-size: 10.5px; font-weight: 700;
  border-radius: 20px; padding: 3px 10px; letter-spacing: .2px; border: none;
}
.race-computed .group-primary { background: var(--brand); color: #fff; }
.race-computed .group-warmup  { background: #eef0f6; color: #6b7280; }
.race-computed .group-plain   { background: #eef0f6; color: #6b7280; }

/* P2 editor: Role-in-event caption */
.role-hint { font-size: 11px; color: var(--muted); margin: 4px 0 10px; line-height: 1.45; }

/* P2 summary: one-line sub-label under a group race week's status */
.sum-race-sub { display: block; font-size: 10px; font-weight: 400; color: var(--muted); margin-top: 1px; }

/* P3: collapsed-row pill when a slot was satisfied on another day (never a false "missed") */
.day-done-elsewhere {
  font-size: 11px; font-weight: 700; color: #15803d;
  background: #f0fdf4; border-radius: 6px; padding: 2px 7px;
}

/* P3 adaptive-plan fact strips (approved): green ✓ satisfied · purple adjusted · orange caution */
.adapt-fact {
  border-left: 3px solid var(--brand); background: #f6f1ff; color: var(--text);
  border-radius: 6px; padding: 5px 9px; margin: 6px 0 4px;
  font-size: 11.5px; font-weight: 600; line-height: 1.4;
}
.adapt-fact.af-done { background: #f0fdf4; border-left-color: #16a34a; }
.adapt-fact.af-warn { background: #fff7ed; border-left-color: var(--accent); }

/* M7-B2 Athlete+ plan edits — purple PINNED chip + the "Adjust this day" affordance + edit form */
.day-pin-chip {
  background: #ede9fe; color: #6d28d9;
  font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 6px;
  letter-spacing: .5px; text-transform: uppercase;
}
.adjust-row {
  display: flex; align-items: center; gap: 7px;
  border-top: 1px dashed #e2e8f0; margin-top: 10px; padding: 9px 0 2px;
  color: var(--brand); font-weight: 700; font-size: 13px; cursor: pointer;
}
.adjust-ic { font-size: 14px; }
.edit-form {
  border: 1px solid #e9e2fb; background: #faf8ff; border-radius: 10px;
  padding: 10px; margin-top: 10px;
}
.edit-form-h { font-family: var(--font-display); font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.edit-fields { display: flex; gap: 8px; }
.edit-field { display: flex; flex-direction: column; gap: 3px; }
.edit-field > span {
  font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted);
}
.edit-field select, .edit-field input, .edit-note {
  border: 1px solid #e2e8f0; border-radius: 8px; padding: 7px 9px; font-size: 13px;
  background: #fff; color: var(--text); font-family: var(--font-body); width: 100%; box-sizing: border-box;
}
.edit-field input { font-family: var(--font-mono); }
.edit-move {
  display: flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: 12px; color: #6d28d9; font-weight: 600;
}
.edit-note { margin-top: 8px; }
.edit-btns { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.edit-pin-btn {
  background: var(--brand); color: #fff; border: none; border-radius: 9px;
  padding: 9px 14px; font-size: 13px; font-weight: 700; font-family: var(--font-body); cursor: pointer;
}
.edit-cancel-btn {
  background: #fff; color: #475569; border: 1px solid #e2e8f0; border-radius: 9px;
  padding: 9px 14px; font-size: 13px; font-weight: 600; font-family: var(--font-body); cursor: pointer;
}
.edit-remove-btn {
  margin-left: auto; background: none; border: none; color: var(--red, #dc2626);
  font-size: 12px; font-weight: 600; font-family: var(--font-body); cursor: pointer;
}
@media (min-width: 900px) { .adjust-row { font-size: 13.5px; } }

/* M7-B2 week-volume cap control (training-log week header) */
.week-cap-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 7px 11px;
  background: #faf8ff; border: 1px solid #e9e2fb; border-radius: 10px;
  font-size: 12.5px; color: #475569;
}
.week-cap-total { color: var(--muted); font-family: var(--font-mono); }
.week-cap-set { color: #6d28d9; font-weight: 600; }
.week-cap-btn, .week-cap-apply, .week-cap-cancel, .week-cap-remove {
  border: none; background: none; cursor: pointer; font-family: var(--font-body);
  font-size: 12.5px; font-weight: 700; padding: 2px 4px;
}
.week-cap-btn, .week-cap-apply { color: var(--brand); }
.week-cap-cancel { color: #64748b; font-weight: 600; }
.week-cap-remove { color: var(--red, #dc2626); margin-left: auto; }
.week-cap-input {
  width: 64px; border: 1px solid #e2e8f0; border-radius: 8px; padding: 5px 8px;
  font-size: 13px; font-family: var(--font-mono); background: #fff; color: var(--text);
}
/* 2026-07-16 rebrand: the badged "Adjust week" entry + its menu (owner-approved option B).
   Badge pushes itself + the button to the row's right edge; menu drops below the row. */
.week-adjust { margin: 0 0 10px; }
.week-adjust .week-cap-row { margin: 0; }
.wk-badge { margin-left: auto; font-size: 10px; letter-spacing: .06em; background: #f3e8ff;
  color: #6d28d9; padding: 2.5px 8px; border-radius: 99px; font-weight: 600; }
.week-adjust-btn { white-space: nowrap; }
.week-menu {
  margin-top: 4px; background: #fff; border: 1px solid #e9e2fb; border-radius: 10px;
  overflow: hidden; display: flex; flex-direction: column;
}
.week-menu-item {
  border: none; background: none; cursor: pointer; text-align: left;
  padding: 9px 14px; font-size: 13px; color: var(--text); font-family: var(--font-body);
  border-bottom: 1px solid #f4f0fe;
}
.week-menu-item:last-child { border-bottom: none; }
.week-menu-item:hover { background: #faf8ff; color: var(--brand); }
.week-move-sel {
  border: 1px solid #e2e8f0; border-radius: 8px; padding: 5px 8px;
  font-size: 13px; background: #fff; color: var(--text); font-family: var(--font-body);
}

/* ── M7 log-form redesign (approved 2026-07-07) ─────────────────────────────── */
/* Weather chip in the day sub-row (§ Option 3): orange for Moderate/Warm, red for Hot+ (escalation
   approved). A LABELLED chip — not a status dot — so it never reads as the completion badge. */
.weather-chip { border-radius: 7px; padding: 2px 8px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.weather-chip.wc-warm { background: #ffedd5; color: #c2410c; }
.weather-chip.wc-hot  { background: #fee2e2; color: #b91c1c; }
.weather-chip .wc-pace { font-family: var(--font-mono); }

/* "＋ Add detail" fold — override + shoes + notes behind one toggle (matches .adjust-row treatment) */
.detail-add {
  display: flex; align-items: center; gap: 7px;
  border-top: 1px dashed #e2e8f0; margin-top: 10px; padding: 9px 0 2px;
  color: var(--brand); font-weight: 700; font-size: 13px; cursor: pointer;
}
.detail-add .da-plus { font-size: 16px; line-height: 1; }
.detail-indicator {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 10px; padding: 10px 12px; background: #f4f0ff; border: 1px solid #e9e2fb;
  border-radius: 10px; cursor: pointer;
}
.detail-indicator .di-left { display: flex; align-items: center; gap: 9px; min-width: 0; }
.detail-indicator .di-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; }
.detail-indicator .di-txt { min-width: 0; }
.detail-indicator .di-h { font-size: 12.5px; font-weight: 700; color: var(--brand); }
.detail-indicator .di-s {
  font-size: 11.5px; color: #6b5ba0; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.detail-indicator .di-chev { color: var(--brand); font-size: 15px; flex: none; }
.detail-open { margin-top: 10px; padding: 12px 12px 6px; background: #fbfaff; border: 1px solid #eee7fb; border-radius: 10px; }
.detail-open-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.detail-open-head .doh-title { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; color: var(--brand); }
.detail-open-head .doh-hide { font-size: 12.5px; color: var(--muted); cursor: pointer; font-weight: 600; }
.detail-open .pick-row { margin-top: 0; margin-bottom: 10px; }
.note-head { display: flex; align-items: center; justify-content: space-between; }
.note-head .note-clear { font-size: 11px; color: var(--muted); font-weight: 600; cursor: pointer; letter-spacing: normal; }

/* P3 Benchmark trial day — dashed purple: a test, not a race (solid purple stays race-only §5d) */
.day-card.day-benchmark { border: 1.5px dashed var(--brand); }
/* US-4.7: a vertical benchmark keeps the dashed border — dashed still means "a test" — and only swaps
   the hue, so the two tests read as siblings rather than as different kinds of thing. */
.day-card.day-vert-benchmark { border-color: var(--vert); }
.day-card.day-lthr-test { border: 1.5px dashed var(--brand); }  /* OUTSTANDING #28: a test, like Benchmark */
/* US-4.7: the trail projection is built from ROAD data until real trail runs are logged. The chip rides
   the COLLAPSED gauge header (the card collapses every visit) because this caution guards a number an
   athlete may plan a cutoff around; the strip inside carries the reason and the payoff. Orange here is
   §5g's caution role, the same family as .goal-check — and it never shares a screen with the load-ramp
   card (Today) or the af-warn fact strips (training log). Contrast 6.88:1. */
.wys-road-chip {
  background: #fff7ed; color: #9a3412;
  font-size: 9px; font-weight: 800; letter-spacing: .4px;
  padding: 2px 7px; border-radius: 20px; white-space: nowrap;
}
.trail-caution {
  border-left: 3px solid var(--accent); background: #fff7ed;
  border-radius: 0 6px 6px 0; padding: 8px 10px; margin-top: 10px;
}
.trail-caution .tc-head { font-size: 11.5px; font-weight: 700; color: #9a3412; line-height: 1.45; }
.trail-caution .tc-body { font-size: 11px; color: #9a3412; line-height: 1.5; margin-top: 3px; }
/* Trail nudges are NOT adaptation. Purple (.adapt-fact) means the engine changed your plan; teal means
   standing trail homework — which is why it survives a pin and never reaches the ICS feed (US-4.7). */
.trail-fact {
  border-left: 3px solid var(--vert); background: var(--vert-50); color: var(--vert-dk);
  border-radius: 6px; padding: 5px 9px; margin: 6px 0 4px;
  font-size: 11.5px; font-weight: 600; line-height: 1.4;
}
/* A Downhill day leads with its ask (minutes of descent); mileage rides behind, quieter, because it
   exists for the weekly volume math rather than as an instruction. */
.day-min-sub { font-size: 10.5px; color: var(--muted); margin-left: 6px; }
.type-benchmark { background: var(--brand); }
.wtype.type-benchmark { background: #ede9fe; color: #6d28d9; }
.bench-why {
  background: #f6f1ff; border-radius: 8px; padding: 7px 10px; margin: 6px 0 2px;
  font-size: 11px; color: #6d28d9; line-height: 1.5;
}

/* P3 Q2-A3 goal-check advisory (Where you stand) */
.goal-check {
  background: #fff7ed; border: 1px solid #fdba74; border-radius: 10px;
  padding: 10px 12px; margin: 0 0 12px;
}
.gc-head { font-size: 12px; font-weight: 700; color: #9a3412; }
.gc-body { font-size: 11.5px; color: var(--text); line-height: 1.5; margin: 4px 0 8px; }
.gc-nums { display: flex; gap: 8px; margin-bottom: 8px; }
.gc-num { flex: 1; background: #fff; border: 1px solid #f1d5b8; border-radius: 8px; padding: 6px; text-align: center; }
.gc-nl { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: #9a3412; }
.gc-nv { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--text); }
.gc-btns { display: flex; gap: 8px; }
.gc-b { flex: 1; font-size: 11.5px; font-weight: 700; padding: 8px 0; border-radius: 8px; cursor: pointer; }
.gc-adjust { background: var(--brand); border: none; color: #fff; }
.gc-keep { background: #fff; border: 1.5px solid var(--brand); color: var(--brand); }
.gc-fine { font-size: 9.5px; color: var(--muted); margin-top: 7px; line-height: 1.45; }
@media (min-width: 900px) {
  /* desktop (approved): explainer + numbers + stacked actions share the row */
  .goal-check { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; }
  .gc-nums { margin: 0; }
  .gc-btns { flex-direction: column; }
  .gc-b { padding: 7px 14px; }
  .gc-fine { grid-column: 1 / -1; margin-top: 2px; }
}

.intent-picker {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  margin: 4px 0 14px;
}
.intent-opt {
  padding: 9px 4px; border-radius: 8px; border: 1.5px solid var(--border);
  background: #f8fafc; font-size: 13px; font-family: inherit;
  cursor: pointer; text-align: center; color: var(--text); transition: border-color .15s;
}
.intent-opt:hover { border-color: #94a3b8; }
.intent-opt.intent-sel { border-color: var(--accent); background: #fff7f0; color: var(--accent); font-weight: 700; }
/* US-4.2/US-4.6c race-editor "Trail / vert details" fold (teal = vert/hike, §5g). */
.trail-fold { margin: 6px 0 4px; }
.trail-fold-toggle { width: 100%; text-align: left; background: none; border: none; padding: 8px 0;
  font-size: 13px; font-weight: 600; color: #0f6e56; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.trail-fold-toggle::before { content: '▸'; font-size: 11px; transition: transform .15s; }
.trail-fold-toggle.open::before { transform: rotate(90deg); }
.trail-fold-body { padding: 4px 0 6px; border-top: 1px solid var(--border); }
.tf-field { display: block; font-size: 12px; color: var(--muted); font-weight: 600; margin: 10px 0 0; }
.terrain-pills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 5px 0 2px; }
.terrain-opt { padding: 7px 3px; border-radius: 20px; border: 1.5px solid var(--border); background: #f8fafc;
  font-size: 12px; font-family: inherit; cursor: pointer; text-align: center; color: var(--text); }
.terrain-opt.terrain-sel { border-color: #1d9e75; background: #e1f5ee; color: #0f6e56; font-weight: 700; }
.trail-est { margin-top: 11px; background: #f3efff; border-radius: 9px; padding: 9px 12px;
  font-size: 12.5px; font-weight: 600; color: #4c1d95; font-family: var(--font-mono); }

/* ── Modal ───────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  z-index: 100; display: flex; align-items: flex-end; justify-content: center;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.modal {
  background: #fff; width: 100%; max-width: 560px;
  border-radius: 22px 22px 0 0;
  padding: 22px 18px calc(env(safe-area-inset-bottom) + 22px);
  max-height: 92vh; overflow-y: auto;
}
.modal h3 { margin: 0 0 16px; font-size: 18px; font-weight: 800; letter-spacing: -.3px; }
.modal label {
  display: flex; flex-direction: column; font-size: 12px;
  color: var(--muted); gap: 5px; margin-bottom: 12px;
  font-weight: 600; letter-spacing: .2px;
}
.modal input, .modal select, .modal textarea {
  font-size: 16px; padding: 12px; border: 1.5px solid var(--border);
  border-radius: 10px; font-family: inherit; min-height: 46px; background: #f8fafc;
  transition: border-color .15s;
}
.modal input:focus, .modal select:focus, .modal textarea:focus {
  border-color: var(--navy); outline: none; background: #fff;
}
.modal-actions { display: flex; gap: 10px; margin-top: 10px; }
.modal-actions button { flex: 1; margin-bottom: 0; }

/* ── F distance picker (2026-07-08) — a searchable chooser replacing the flat <select>. The panel
   is a body-level overlay (not nested in .modal, whose overflow:auto would clip it): bottom sheet on
   mobile, popover positioned under the field on desktop (JS sets left/top/width). ────────────────── */
.dist-field {
  font-size: 16px; padding: 12px; border: 1.5px solid var(--border); border-radius: 10px;
  min-height: 46px; background: #f8fafc; cursor: pointer; width: 100%; text-align: left;
  font-family: inherit; color: var(--text);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.dist-field:hover { border-color: var(--navy); }
.dist-field-v { font-family: var(--font-mono); font-weight: 600; }
.dist-field-caret { color: var(--muted); font-size: 13px; }
.dist-overlay { position: fixed; inset: 0; z-index: 1200; }
@media (max-width: 640px) { .dist-overlay { background: rgba(6,8,20,.42); } }
.dist-picker {
  position: fixed; background: #fff; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 16px 42px rgba(11,18,48,.24); display: flex; flex-direction: column;
  max-height: 340px; overflow: hidden;
}
.dist-picker.as-sheet {
  left: 0 !important; right: 0 !important; bottom: 0; top: auto !important; width: auto !important;
  border-radius: 20px 20px 0 0; max-height: 82vh; padding-bottom: env(safe-area-inset-bottom);
}
.dist-ph { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; }
.dist-ph b { font-size: 15px; font-weight: 800; color: var(--navy); letter-spacing: -.2px; }
.dist-x { background: none; border: none; font-size: 15px; color: var(--muted); cursor: pointer; padding: 4px; line-height: 1; }
.dist-sb {
  display: flex; align-items: center; gap: 8px; margin: 0 14px 8px; padding: 0 11px; height: 40px;
  border: 1.5px solid var(--border); border-radius: 10px; background: #f8fafc;
}
.dist-sb-i { color: var(--muted); font-size: 16px; }
.dist-sb input { flex: 1; border: none; background: transparent; outline: none; font-size: 16px; font-family: inherit; min-height: 0; padding: 0; }
.dist-list { overflow-y: auto; padding-bottom: 10px; }
.dist-sec { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; padding: 8px 14px 4px; }
.dist-row {
  display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 11px 14px;
  background: none; border: none; cursor: pointer; text-align: left; font-family: inherit;
}
.dist-row:hover { background: rgba(124,58,237,.08); }
.dist-row-v { font-family: var(--font-mono); font-size: 15px; color: var(--text); }
.dist-row-mi { font-size: 12px; color: var(--muted); }
.dist-row.sel { background: var(--brand); }
.dist-row.sel .dist-row-v, .dist-row.sel .dist-row-mi { color: #fff; }
.dist-minis { display: flex; flex-wrap: wrap; gap: 7px; padding: 3px 14px 8px; }
.dist-mini {
  font-family: var(--font-mono); font-size: 13px; padding: 7px 11px; border: 1px solid var(--border);
  border-radius: 999px; background: #fff; color: var(--text); cursor: pointer;
}
.dist-mini:hover { border-color: var(--brand); color: var(--brand); }
.dist-mini.sel { background: var(--brand); border-color: var(--brand); color: #fff; }
.dist-empty { padding: 16px 14px; font-size: 13px; color: var(--muted); }
.dist-row-fmt .dist-row-v { color: #0f6e56; font-family: inherit; font-weight: 700; }
.dist-row-fmt .dist-row-mi { color: #0f9d8a; }

/* ── US-4.5 Summit (vert-goal) editor — teal = vert/climb (§5g); pills in 29029's warm→cool. The
   YOUR PLAN card mirrors the 29029 hub's navy→teal gradient (Gate A2 ADDENDUM). ──────────────── */
.intent-summit { background: #e1f5ee; color: #0f6e56; }
/* US-4.6c: teal Trail chip on a trail race day (vert / non-road terrain), alongside its intent chip. */
.intent-trail { background: #e1f5ee; color: #0f6e56; }
.summit-wrap { margin-top: 2px; }
.summit-geo { margin: 2px 0 10px; font-family: var(--font-mono); color: #0f6e56; font-size: 11.5px; }
.summit-custom { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: 0 0 6px; }
.summit-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 5px 0 10px; }
.summit-pill {
  position: relative; text-align: left; padding: 9px 12px 9px 13px; border-radius: 10px;
  background: #fff; cursor: pointer; border: 1.5px solid var(--border); border-left: 4px solid var(--pill);
  font-family: inherit; display: flex; flex-direction: column; gap: 3px;
}
.summit-pill:hover { border-color: var(--pill); }
.summit-pill.sel { border-color: var(--pill); background: #f5faf8; box-shadow: inset 0 0 0 1px var(--pill); }
.summit-pill .sp-name { font-weight: 700; font-size: 13.5px; color: var(--text); }
.summit-pill .sp-meta { display: flex; gap: 5px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.summit-pill .sp-laps { color: #0f6e56; }
.summit-pill .sp-cap { position: absolute; top: 8px; right: 10px; font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--pill); font-weight: 700; }
.summit-cgoal { margin: 0 0 10px; }
.summit-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 6px; }
.vert-plan { margin-top: 6px; border-radius: 12px; padding: 12px 13px; color: #fff;
  background: linear-gradient(135deg, #0b1230 0%, #0f6e56 135%); }
.vert-plan-empty { background: #f3f7f5; color: var(--muted); font-size: 12.5px; text-align: center;
  padding: 18px 12px; }
.vp-h { font-family: var(--font-display); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .82; margin-bottom: 9px; }
.vp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 8px; }
.vp-cell { display: flex; flex-direction: column; gap: 2px; }
.vp-v { font-family: var(--font-mono); font-size: 16px; font-weight: 700; line-height: 1.05; }
.vp-l { font-size: 10px; opacity: .78; }
.vp-line { margin-top: 11px; font-size: 12px; font-weight: 600; }
.vp-line.vp-ok { color: #7ee6bf; }
.vp-line.vp-warn { color: #ffcf8f; }
.vp-sub { margin-top: 5px; font-size: 11px; opacity: .72; font-family: var(--font-mono); }
@media (min-width: 560px) { .vp-grid { grid-template-columns: repeat(4, 1fr); } }

/* ── Summary table ───────────────────────────────────────────────────────── */
.summary-table {
  width: 100%; border-collapse: collapse;
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow); font-size: 12.5px;
}
.summary-table th {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  color: #fff; padding: 10px 6px; font-weight: 700; letter-spacing: .2px;
  text-align: center;
}
.summary-table th:nth-child(2) { text-align: left; padding-left: 10px; }
.summary-table th:last-child   { text-align: left; }
/* Week number + mileage columns in mono for the race-clock read (skip section-divider rows). */
.summary-table tr:not(.summary-section) td:nth-child(1),
.summary-table tr:not(.summary-section) td:nth-child(3),
.summary-table tr:not(.summary-section) td:nth-child(4),
.summary-table tr:not(.summary-section) td:nth-child(5) { font-family: var(--font-mono); }
/* Season header above the weekly table */
.season-header { background: var(--navy); color: #fff; border-radius: 14px; padding: 14px 15px; margin-bottom: 14px; }
.season-header .sh-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.season-header .sh-name { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.season-header .sh-cd { font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: #c4b5fd; white-space: nowrap; }
.season-header .sh-pt { display: flex; gap: 3px; margin-top: 11px; }
.season-header .sh-pt div { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.15); }
.season-header .sh-pt div.on { background: var(--brand); }
.season-header .sh-pt div.cur { background: var(--accent); }
.season-header .sh-pt-l { display: flex; font-size: 10px; opacity: .7; margin-top: 5px; text-transform: uppercase; letter-spacing: .04em; }
.season-header .sh-pt-l span { flex: 1; text-align: center; }
.season-header .sh-pt-l span:first-child { text-align: left; }
.season-header .sh-pt-l span:last-child { text-align: right; }
.season-header .sh-wk { font-size: 12px; opacity: .9; margin-top: 9px; }
.season-header .sh-wk .m { font-family: var(--font-mono); font-weight: 700; }
/* US-4.2 weekly vertical (teal = vert/hike, §5g) inside the navy season header. */
.season-header .sh-vert { margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.12); }
.season-header .sh-vert-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; opacity: .9; }
.season-header .sh-vert-num { font-family: var(--font-mono); font-size: 12px; opacity: 1; }
.season-header .sh-vert-num b { color: #5dcaa5; font-weight: 700; }
.season-header .sh-vert-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.15); overflow: hidden; margin-top: 6px; }
.season-header .sh-vert-bar span { display: block; height: 100%; background: #1d9e75; }
.season-header .sh-vert-sub { font-size: 10.5px; opacity: .65; margin-top: 5px; }
/* Collapsible Summary sections (Where you stand, Training weeks). Start collapsed; the header
   toggles `.expanded` in place (no full re-render). `.col-only` shows only when collapsed,
   `.exp-only` only when expanded; `.exp-row` are table rows hidden until expanded. */
/* SY-1 sync pill lives on the dark header — light-amber text for contrast (approved mockup). */
.field-warn { display:block; font-size:11.5px; color:#b45309; font-weight:600; margin-top:4px; }

/* GT-1 Option-A belt-distance confirmation (indoor quality runs only) */
.seg-corr { background:#faf9ff; border:1.5px solid #ded9fb; border-radius:10px; padding:10px 11px; margin-top:10px; }
.seg-corr-head { font-size:11px; font-weight:700; color:var(--brand-dk); text-transform:uppercase; letter-spacing:.03em; margin-bottom:5px; }
.seg-corr-line { font-size:12px; color:#4b5563; display:flex; gap:6px; align-items:baseline; }
.seg-corr-row { display:flex; align-items:center; gap:8px; margin-top:7px; }
.seg-corr-row > span { font-size:12px; color:#4b5563; }
.seg-corr-input { width:74px !important; text-align:center; font-family:var(--font-mono); font-weight:700;
  background:#fff !important; border:1.5px solid #ded9fb !important; border-radius:8px; padding:8px 6px; font-size:14px; }
.seg-corr-btn { padding:8px 14px; border-radius:8px; border:none; background:var(--brand); color:#fff;
  font-size:12px; font-weight:700; font-family:inherit; cursor:pointer; }
.seg-corr-note { font-size:10.5px; color:var(--muted); margin-top:6px; }

/* #29 treadmill split reconstruction block (supersedes .seg-corr) */
.tread-recon { background:#fbfaff; border:1px solid #e7e2fb; border-radius:10px; padding:11px 12px; margin-top:10px; }
.tread-recon.is-est { background:#fff9f4; border-color:#f6e0cd; }
.tr-head { display:flex; align-items:center; gap:8px; margin-bottom:2px; }
.tr-title { font-weight:700; font-size:13px; color:var(--brand-dk); }
.tread-recon.is-est .tr-title { color:#9a4a12; }
.tr-conf { margin-left:auto; font-size:11px; font-weight:600; padding:2px 8px; border-radius:99px; }
.tr-ok { background:#e4f3ee; color:var(--vert-dk); }
.tr-est { background:#eef0f6; color:var(--muted); }
/* "Looks right" described the TOTAL but sat directly above splits the app had just rebuilt, so on
   the owner's Jul 18 run it declared a half-mile-short tempo lap fine (owner ruling 2026-07-20).
   Amber is the caution role (§5g): these are the app's best guess, not measurement. */
.tr-rebuilt { background:#fdf1dd; color:#8a5a10; }
.tr-user { background:#f1ebff; color:var(--brand-dk); }
.tr-src { font-size:11.5px; color:var(--muted); margin:2px 0 8px; }
.tr-note { font-size:12px; color:var(--muted); margin:6px 0 10px; line-height:1.5; }
.tr-readiness { margin-top:-4px; font-style:italic; }
/* Session-mismatch strip (#43 Step 3): a hard session run on a non-matching day. Amber left-accent
   (a "did you mean" prompt, not an error); the workout-type accent for a tempo is amber (§5t). */
.sess-mismatch { margin-top:10px; border:1px solid #f0e2c4; background:#fffdf7; border-left:3px solid var(--orange); border-radius:0 8px 8px 0; padding:10px 12px; }
.sm-head { display:flex; align-items:center; gap:7px; margin-bottom:5px; }
.sm-dot { width:7px; height:7px; border-radius:50%; background:var(--orange); display:inline-block; }
.sm-title { font-weight:600; color:#131a33; font-size:13px; }
.sm-note { font-size:12px; color:var(--muted); line-height:1.5; margin-bottom:9px; }
.sm-acts { display:flex; gap:8px; flex-wrap:wrap; }
.sm-acts .tr-btn { width:auto; flex:none; font-size:12px; padding:6px 13px; }
.tr-splits { display:flex; flex-direction:column; }
.tr-sp { display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center; padding:4px 0; font-size:12.5px; border-top:1px solid #f0eefb; }
.tr-sp:first-child { border-top:0; }
.tr-l { color:var(--muted); display:flex; align-items:center; gap:6px; }
.tr-sp.work .tr-l { color:#131a33; font-weight:600; }
.tr-rdot { width:6px; height:6px; border-radius:50%; background:var(--red); display:inline-block; }
.tr-d { font-weight:600; color:#131a33; }
.tr-p { color:var(--faint); font-size:11px; min-width:52px; text-align:right; }
.tr-correctwrap { margin-top:10px; }
.tr-btn { width:100%; border:1px solid #ddd6f5; background:#fff; color:var(--brand); font-weight:600; font-size:12.5px; border-radius:8px; padding:8px; cursor:pointer; font-family:inherit; }
.tr-btn.solid { background:var(--brand); color:#fff; border-color:var(--brand); }
.tr-setrow, .tr-corr-in { display:flex; gap:8px; align-items:center; margin-top:4px; }
.tr-setrow .tr-btn, .tr-corr-in .tr-btn { width:auto; flex:none; }
.tr-input { flex:1; text-align:center; font-family:var(--font-mono); font-weight:600; background:#fff; border:1px solid #ddd6f5; border-radius:8px; padding:8px 6px; font-size:14px; min-width:0; }
.tr-corr-cap { font-size:10.5px; color:var(--muted); margin-top:6px; }
/* Per-split correction (#43 Step 3b): every distance is editable at once, because on a treadmill the
   watch usually gets them all wrong. A user-set figure carries the brand colour + dot so "your
   number" is distinguishable at a glance from one the app worked out. */
.tr-sp.tr-edit { padding:6px 0; grid-template-columns:1fr 96px auto; }
.tr-spin { flex:none; width:100%; padding:6px; font-size:13px; text-align:center; }
.tr-d-user { color:var(--brand); display:inline-flex; align-items:center; gap:5px; }
.tr-udot { width:5px; height:5px; border-radius:50%; background:var(--brand); display:inline-block; }
.tr-p-user { color:var(--brand); font-weight:600; }
/* Confirm-the-distance card (#43 Step 3b). Whole-run row sits above the splits because they are two
   separate questions: on the owner's Jul 18 the total was right and the splits were mis-distributed,
   so confirming one says nothing about the other. */
.tread-recon.is-done { border-color:#e6dcfb; background:#fdfcff; }
.tread-recon.is-edit { border-color:#ddd6f5; background:#fdfcff; }
.tr-sp.tr-total { border-top:0; border-bottom:1px solid #f0eefb; padding-bottom:7px; margin-bottom:3px; }
.tr-sp.tr-total .tr-l, .tr-sp.tr-total .tr-d { font-weight:700; color:#131a33; }
.tr-mismatch { margin-top:9px; background:#fdf1dd; border-radius:8px; padding:8px 10px; font-size:11.5px; color:#8a5a10; line-height:1.5; }
.tr-note-done { margin-top:8px; font-size:11.5px; color:var(--muted); line-height:1.5; }
.tr-link { background:none; border:0; color:var(--brand); font-weight:600; font-size:12px; padding:0; cursor:pointer; font-family:inherit; }
.tr-edit-grid { display:grid; grid-template-columns:auto 1fr auto; gap:9px 10px; align-items:center; margin-top:9px; }
.tr-edit-grid .tr-l { font-size:12.5px; }
.tr-l-work { color:#131a33; font-weight:600; }
.tr-rule { grid-column:1/-1; height:1px; background:#eee8fb; margin:1px 0; }
.tr-spin { flex:none; width:100%; padding:6px 8px; font-size:13px; text-align:left; }
.tr-in-total { font-weight:700; }
.tr-d-user { color:var(--brand); }
.tr-fixwrap:empty { display:none; }
.tr-fix { margin-top:10px; background:#fdf1dd; border-radius:8px; padding:9px 10px; }
.tr-fix-msg { font-size:11.5px; color:#8a5a10; line-height:1.5; }
.tr-fix-acts { display:flex; gap:7px; flex-wrap:wrap; margin-top:8px; }
.tr-fix-acts .tr-btn { width:auto; flex:none; font-size:11.5px; padding:6px 11px; }
.tread-recon.is-edit .tr-corr-in { margin-top:13px; }
.tr-hint { margin-top:10px; background:#f3ecff; border:1px solid #e0d6fb; border-left:3px solid var(--brand); border-radius:0 8px 8px 0; padding:10px 12px; }
.tr-hint-h { font-weight:700; font-size:12.5px; color:var(--brand-dk); }
.tr-hint p { margin:5px 0 9px; font-size:12px; color:#4a437a; line-height:1.5; }
.tr-hint-a { display:flex; gap:8px; }
.tr-hint-a .tr-btn { width:auto; }

/* P1 LTHR-default nudge */
.lthr-nudge { background:#fef7ed; border:1px solid #f6d9b0; border-radius:9px; padding:9px 11px;
  margin-top:8px; font-size:11.5px; color:#7c2d12; line-height:1.5; display:flex; flex-wrap:wrap;
  align-items:center; gap:8px; }
.lthr-nudge span { flex:1; min-width:180px; }
.lthr-test-btn { border:1px solid var(--brand); background:#fff; color:var(--brand); font-size:12px;
  font-weight:600; border-radius:8px; padding:6px 12px; cursor:pointer; white-space:nowrap; }
.lthr-test-btn:hover { background:#f3e8ff; }
.lthr-test-btn:disabled { border-color:#cbd5e1; color:#64748b; background:#f8fafc; cursor:default; }
/* OUTSTANDING #28 Phase 2: the LTHR accept/decline card reuses .sug-card; add its body + wrap 3 buttons. */
.sug-body { font-size:12.5px; line-height:1.5; color:#3a4256; margin:0 0 9px; }
.lthr-sug .sug-btns { flex-wrap:wrap; }
/* OUTSTANDING #28 follow-up: the un-set fitness benchmark prompt + the "based on a default" prediction flag. */
.bench-nudge { background:#fef7ed; border:1px solid #f6d9b0; border-radius:9px; padding:9px 11px;
  margin-top:9px; font-size:11.5px; color:#7c2d12; line-height:1.5; }
.bench-default-flag { font-size:11.5px; color:#9a3412; background:#fef7ed; border:1px solid #f6d9b0;
  border-radius:8px; padding:7px 10px; margin:0 0 10px; line-height:1.45; }

/* P1 backfill progress (Strava card) */
.bf-progress { margin:4px 0 14px; }
.bf-bar-row { display:flex; align-items:center; gap:9px; }
.bf-track { flex:1; height:6px; border-radius:3px; background:#eef0f4; }
.bf-fill { height:6px; border-radius:3px; background:var(--brand); }
.bf-count { font-size:11px; color:var(--brand-dk); }
.bf-note { font-size:11.5px; color:var(--muted); margin-top:6px; line-height:1.5; }

.sync-pill { display:inline-flex; align-items:center; gap:5px; background:rgba(245,158,11,.18);
  border:1px solid rgba(245,158,11,.5); color:#fcd34d; font-size:11px; font-weight:700;
  padding:3px 10px; border-radius:20px; cursor:pointer; font-family:inherit;
  /* Mobile: overlay the dark header row. The pill lives OUTSIDE the header element so the
     desktop header-hide can't hide it; absolute also stops app-shell's column-flex stretching. */
  position:absolute; top:calc(env(safe-area-inset-top, 0px) + 13px); right:52px; z-index:60; }
.app-shell { position: relative; }
.sync-pill::before { content:''; width:6px; height:6px; border-radius:50%; background:#f59e0b; }
.sync-pill-offline { background:rgba(148,163,184,.18); border-color:rgba(148,163,184,.5); color:#cbd5e1; }
.sync-pill-offline::before { background:#94a3b8; }
/* Desktop: the mobile header is hidden, so the pill floats fixed top-right (approved mockup). */
@media (min-width: 900px) { .sync-pill { position: fixed; top: 14px; right: 18px; z-index: 60; margin: 0;
  background:#fef3e2; border-color:#f6d9b0; color:#b45309; }
  .sync-pill-offline { background:#eceff3; border-color:#cbd5e1; color:#4b5563; } }

.sum-head { display: flex; align-items: center; justify-content: space-between; cursor: pointer; -webkit-user-select: none; user-select: none; }
.sum-collapse .exp-only { display: none; }
.sum-collapse.expanded .exp-only { display: block; }
.sum-collapse.expanded .col-only { display: none; }
.sum-collapse:not(.expanded) .summary-table tbody tr.exp-row { display: none; }
/* US-4.6c: the trail "Where you stand" gauge — a teal left-accent marks it as the vert/trail card
   (teal = vert/trail across the app, §5g), sitting alongside the road gauge. */
.wys-trail { border-left: 3px solid #1d9e75; }
/* Expanded gauge: stack on mobile; ≥900 splits axes+confidence (left) / projection box (right). */
.wys-trail-exp { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 900px) { .wys-trail-exp { grid-template-columns: 1.05fr 1fr; gap: 22px; align-items: start; } }
.summary-table td { padding: 9px 6px; text-align: center; border-bottom: 1px solid #f1f5f9; }
.summary-table td:nth-child(2) { text-align: left; padding-left: 10px; }
.summary-table td:last-child   { text-align: left; }
.summary-table tr:last-child td { border-bottom: none; }

/* Status colours */
.st-over      { color: #7c3aed; font-weight: 700; }
.st-ontrack   { color: #16a34a; font-weight: 700; }
.st-close     { color: #b45309; font-weight: 700; }
.st-behind    { color: #dc2626; font-weight: 700; }
.st-missed    { color: #9ca3af; font-weight: 600; }
.st-inprogress{ color: #0369a1; font-weight: 700; }
.st-upcoming  { color: var(--muted); }
.st-race      { color: #a855f7; font-weight: 700; font-size: 11.5px; }
.st-recovery  { color: #0f6e56; font-weight: 700; }
.st-maint     { color: #6b7280; font-weight: 600; }
/* Between-races / off-season prompt (Today) */
.between-races .br-btns { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.br-btn { border-radius: 9px; padding: 11px; font-size: 13.5px; font-weight: 600; border: 1px solid #d9d9e6; background: #fff; color: var(--text); cursor: pointer; text-align: center; }
.br-primary { background: var(--brand); color: #fff; border-color: var(--brand); }
@media (min-width: 900px) { .between-races .br-btns { flex-direction: row; } .br-primary, .between-races .br-secondary { padding: 11px 20px; } }
/* Hot-run sweat-rate nudge (Today) — orange = heat (§5g) */
.hotrun-card { border-left: 4px solid var(--accent); }
.hr-h { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--navy); }
.hr-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; }
.hr-b { font-size: 12.5px; color: var(--muted); margin-top: 7px; line-height: 1.5; }
.hr-b b { color: #8a4b0b; }
.hr-cta { margin-top: 11px; background: var(--brand); color: #fff; border: none; border-radius: 8px; padding: 9px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }

/* Race week row */
.summary-race-row td { background: #faf5ff; }
.summary-flag-cell { display: flex; align-items: center; gap: 3px; justify-content: center; }
.summary-flag-cell .ti { color: #a855f7; font-size: 13px; }

/* Section divider rows */
.summary-section td {
  background: #f8fafc; color: var(--muted);
  font-size: 10px; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; padding: 4px 10px; text-align: left;
}

/* ── Settings ────────────────────────────────────────────────────────────── */
.kv {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid #f1f5f9; font-size: 14px;
}
.kv:last-child { border-bottom: none; }
.kv-label { display: inline-flex; align-items: center; gap: 8px; }
.kv-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.kv-val-mono { font-family: var(--font-mono); font-weight: 700; letter-spacing: -.01em; }
/* Uppercase eyebrow label for the sub-sections of the "Your paces" settings card. */
.paces-subhead {
  font-size: 11px; font-weight: 500; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
  padding-bottom: 6px; border-bottom: 1px solid var(--border); margin: 0 0 4px;
}
.paces-subhead.spaced { margin-top: 12px; }
/* Fitness benchmark: purple-tinted box marking it as the primary input everything derives from. */
.bench-box { background: #faf9ff; border: 1.5px solid #ded9fb; border-radius: 11px; padding: 13px; margin-bottom: 14px; }
.bench-label { font-size: 12px; font-weight: 700; color: #6d28d9; margin-bottom: 8px; }
.bench-caption { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.bench-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex: none; }
/* US-4.6c: teal variant of the benchmark box for the Trail & altitude card (teal = vert/trail). */
.trail-box { background: #e6f6f0; border-color: #bfe6d7; }
.trail-box .bench-caption { color: #0f6e56; }
/* US-4.6c: first-trail-event onboarding sheet (dark teal, matches the approved mock). */
.trail-intro-modal { background: #083f34; color: #dff4ec; }
.trail-intro-modal .ti-eye { font-family: var(--font-mono); font-size: 10px; letter-spacing: .6px; text-transform: uppercase; color: #5dcaa5; font-weight: 600; }
.trail-intro-modal .ti-title { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: #fff; margin: 8px 0; }
.trail-intro-modal .ti-body { font-size: 14px; line-height: 1.55; color: #bfe6d7; margin: 0; }
.trail-intro-modal .ti-btns { display: flex; gap: 10px; margin-top: 18px; }
.trail-intro-modal .ti-primary { background: #1d9e75; color: #04241d; font-family: var(--font-display); font-weight: 600; border: none; border-radius: 9px; padding: 11px 18px; cursor: pointer; }
.trail-intro-modal .ti-ghost { background: transparent; color: #9fe1cb; font-family: var(--font-display); font-weight: 600; border: none; padding: 11px 10px; cursor: pointer; }
/* US-4.6c: the "29029 Trail · Park City" curated group builder. */
.pc-days { margin: 10px 0 6px; }
.pc-day { display: flex; align-items: center; gap: 11px; padding: 9px 2px; border-top: 1px solid #f0f1f5; }
.pc-daynum { width: 26px; height: 26px; border-radius: 7px; background: var(--navy); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 12px; display: flex; align-items: center; justify-content: center; flex: none; }
.pc-dinfo { flex: 1; }
.pc-dname { font-weight: 600; font-size: 13.5px; color: var(--navy); }
.pc-dmeta { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.pc-ddate { font-family: var(--font-mono); font-size: 11px; color: #0f6e56; white-space: nowrap; }
.pc-note { font-size: 11.5px; color: var(--muted); background: #f5f6fb; border-left: 2px solid #1d9e75; padding: 8px 10px; margin-top: 4px; }
.pc-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
/* Compact HR-zone ramp (derived output, shown in Your paces). */
.hrz-ramp { display: flex; gap: 5px; margin-top: 9px; }
.hrz-ramp-col { flex: 1; text-align: center; }
.hrz-ramp-bar { height: 6px; border-radius: 3px; margin-bottom: 4px; }
.hrz-ramp-z { font-size: 10.5px; color: var(--muted); }
.hrz-ramp-rng { font-size: 10px; font-family: var(--font-mono); }
/* Your paces: predictions | training side-by-side on desktop, stacked on mobile. */
.paces-cols { display: grid; grid-template-columns: 1fr; column-gap: 24px; row-gap: 6px; }
@media (min-width: 900px) { .paces-cols { grid-template-columns: 1fr 1fr; } }
.sched-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px; font-size: 14px;
}
.sched-row span { font-weight: 700; width: 50px; color: var(--text); }
.sched-row select {
  flex: 1; font-size: 16px; padding: 10px 12px; border: 1.5px solid var(--border);
  border-radius: 10px; min-height: 44px; background: #f8fafc; font-family: inherit;
}
.sched-warn { margin-top: 10px; font-size: 13px; font-weight: 700; color: #16a34a; }
.sched-warn.bad { color: #dc2626; }
.sched-warn.good { color: #0f6e56; font-weight: 600; }
/* Contextual schedule advisories — amber caution (§5g), warn-not-block */
.sched-adv { margin-top: 10px; background: #fbf6ee; border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; padding: 10px 12px; }
.sched-adv-t { font-size: 13px; font-weight: 600; color: #8a4b0b; }
.sched-adv-b { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.45; }
.sched-adv-opt { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 12px; color: var(--text); background: #fff; border: 1px solid #f0e2cd; border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.sched-adv-opt input { accent-color: var(--brand); width: 16px; height: 16px; }

/* ── Race day ────────────────────────────────────────────────────────────── */
/* ── Today view ─────────────────────────────────────────────────────────── */
.today-context {
  font-size: 12px; color: var(--muted); font-weight: 500;
  padding: 6px 0 10px; text-align: center; letter-spacing: .2px;
}
.today-banner {
  background: var(--navy); color: #fff; border-radius: 16px;
  padding: 16px 18px; margin-bottom: 16px;
}
.today-banner-race { background: #7c3aed; }
.today-banner-rest { background: #4b5563; }
.tb-top { display: flex; align-items: center; gap: 9px; }
.tb-icon { width: 22px; height: 22px; flex: none; }
.tb-icon svg { width: 22px; height: 22px; display: block; }
.today-banner-type { font-size: 13px; font-weight: 700; opacity: .92; text-transform: uppercase; letter-spacing: .5px; display: flex; align-items: center; gap: 7px; }
.tb-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.today-banner-dist { font-family: var(--font-display); font-size: 34px; font-weight: 700; line-height: 1.05; margin: 7px 0 2px; letter-spacing: -.5px; }
.today-banner-dist .tb-onfeet { font-family: var(--font-body); font-size: 15px; font-weight: 500; opacity: .8; letter-spacing: 0; }
.today-banner-tof-sub { font-family: var(--font-mono); font-size: 13px; opacity: .8; margin: 0 0 2px; }
.today-banner-pace { font-size: 13px; opacity: .9; font-weight: 500; }
.tb-mono { font-family: var(--font-mono); font-weight: 600; }
.tb-heat { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; background: rgba(249,115,22,.2); color: #fdba74; padding: 4px 9px; border-radius: 7px; margin-top: 10px; font-weight: 600; }
.tb-effort { display: flex; align-items: center; gap: 8px; margin-top: 11px; }
.tb-effort-l { font-size: 11px; opacity: .6; letter-spacing: .03em; }
.tb-bars { display: flex; gap: 3px; }
.tb-bars i { width: 15px; height: 5px; border-radius: 2px; background: rgba(255,255,255,.16); display: block; }
/* US-4.12 base-day eyebrow (training banner, base-only): small uppercase context above the type. */
.tb-base-eyebrow { font-size: 11px; letter-spacing: .11em; text-transform: uppercase; font-weight: 700; opacity: .72; margin: 0 0 6px; }

/* ── OUTSTANDING #29: run-walk targets + treadmill belt block ────────────────────────────────────
   Shared by the Today banner (belt-banner, on navy → light text) and the training-log day detail
   (belt-detail, on a light card → dark text). Run figure neutral, walk figure orange (the walk-beat
   color, §5g). Split/belt line, then incline, then the toggle at the bottom. */
.belt-block { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.belt-banner { margin-top: 11px; }
.belt-detail { margin: 9px 0 4px; }
.belt-line { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.belt-pre { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; font-weight: 600; opacity: .72; }
.belt-seg { display: flex; align-items: baseline; gap: 4px; }
.belt-k { font-size: 11px; opacity: .85; }
.belt-v { font-family: var(--font-mono); font-size: 15px; font-weight: 700; }
.belt-u { font-size: 11px; opacity: .8; }
/* Per-segment rows (approved layout A, 2026-07-19). A quality day has no single belt speed, so each
   prescribed segment carries its own — the label column is fixed-width so the numbers align down the
   card and can be read at a glance mid-warmup. */
.belt-rows { display: flex; flex-direction: column; gap: 3px; width: 100%; }
.belt-head { justify-content: space-between; width: 100%; gap: 8px; }
.belt-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: baseline; width: 100%; }
.belt-rl { font-size: 11.5px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.belt-rv { display: flex; align-items: baseline; gap: 5px; justify-self: end; }
.belt-sep { font-size: 12px; opacity: .45; }
.belt-multi .belt-v { font-size: 13.5px; }
.belt-overall { font-size: 11px; opacity: .72; }
/* Heat origin — the plan number an adjusted figure came from, stated quietly so the adjustment never
   reads as the plan being rewritten behind your back. */
.belt-origin { font-size: 11px; opacity: .72; font-style: italic; }
.tb-heat-origin { font-size: 11.5px; color: #fdba74; margin-top: 3px; }
.belt-incline { font-size: 11.5px; }
.belt-inc-main { font-weight: 600; }
.belt-inc-note { opacity: .72; }
.belt-toggle { display: inline-flex; align-items: center; gap: 7px; border: none; cursor: pointer;
  padding: 4px 11px 4px 4px; border-radius: 999px; font-family: var(--font-body); font-size: 11.5px; font-weight: 600; }
.belt-sw { width: 30px; height: 17px; border-radius: 999px; position: relative; flex: none; transition: background .15s; }
.belt-sw::after { content: ""; position: absolute; top: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; transition: left .15s, right .15s; }
.belt-block.is-off .belt-sw::after { left: 2px; }
.belt-block.is-on  .belt-sw::after { right: 2px; }
/* Banner variant (on navy) */
.belt-banner .belt-run { color: #fff; }
.belt-banner .belt-walk { color: #fb923c; }
.belt-banner .belt-pre, .belt-banner .belt-k, .belt-banner .belt-u, .belt-banner .belt-incline,
.belt-banner .belt-rl, .belt-banner .belt-sep, .belt-banner .belt-overall, .belt-banner .belt-origin { color: #c7cbe4; }
.belt-banner.is-on  .belt-toggle { background: rgba(124,58,237,.30); color: #e9e3ff; }
.belt-banner.is-off .belt-toggle { background: rgba(255,255,255,.12); color: #cfd3ee; }
.belt-banner.is-on  .belt-sw { background: #7c3aed; }
.belt-banner.is-off .belt-sw { background: #48507a; }
/* Detail variant (on a light card) */
.belt-detail .belt-run { color: var(--navy); }
.belt-detail .belt-walk { color: #c2560f; }
.belt-detail .belt-pre, .belt-detail .belt-k, .belt-detail .belt-u, .belt-detail .belt-incline,
.belt-detail .belt-rl, .belt-detail .belt-sep, .belt-detail .belt-overall, .belt-detail .belt-origin { color: var(--muted); }
.belt-detail.is-on  .belt-toggle { background: #efe9fb; color: #4c1d95; }
.belt-detail.is-off .belt-toggle { background: #eef0f5; color: #4b5162; }
.belt-detail.is-on  .belt-sw { background: #7c3aed; }
.belt-detail.is-off .belt-sw { background: #b9bdcf; }

/* #29 decision 4: empty grid cell — keeps Avg HR alone on its row when Vertical gain is hidden. */
.ifield-spacer { min-height: 0; }

/* #29 P3: Units toggle (Settings) — a two-option segmented preference. */
.units-toggle { display: flex; gap: 8px; }
.units-opt { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff; cursor: pointer; text-align: left; font-family: var(--font-body); }
.units-opt.units-on { border-color: var(--brand); background: #f6f2ff; box-shadow: 0 0 0 1px var(--brand); }
.units-name { font-size: 14px; font-weight: 700; color: var(--navy); }
.units-opt.units-on .units-name { color: #6d28d9; }
.units-sub { font-size: 11px; color: var(--muted); font-family: var(--font-mono); }
.units-hint { font-size: 11.5px; color: var(--muted); margin-top: 8px; }

/* Richer race-day hero */
.tb-eye { display: flex; align-items: center; justify-content: space-between; }
.tb-eyebrow { font-size: 11px; letter-spacing: .11em; text-transform: uppercase; font-weight: 700; opacity: .9; }
.tb-cd { font-size: 11px; background: rgba(255,255,255,.16); padding: 3px 10px; border-radius: 20px; font-weight: 600; font-family: var(--font-mono); }
.tb-rname { font-family: var(--font-display); font-weight: 700; font-size: 25px; margin: 8px 0 0; letter-spacing: -.01em; }
.tb-clock { background: #5b21b6; border-radius: 12px; padding: 11px 13px; margin: 11px 0 0; display: flex; align-items: flex-end; justify-content: space-between; }
.tb-ck-l { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; opacity: .75; }
.tb-ck-v { font-family: var(--font-mono); font-weight: 700; font-size: 29px; line-height: 1; margin-top: 3px; }
.tb-ck-r { text-align: right; }
.tb-ck-rl { font-size: 11px; opacity: .8; }
.tb-ck-p { font-family: var(--font-mono); font-weight: 700; font-size: 15px; }
.tb-startline { display: flex; align-items: center; gap: 9px; margin: 12px 0 0; }
.tb-stag { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: #fdba74; }
.tb-srule { height: 3px; background: var(--accent); border-radius: 2px; flex: 1; }
.tb-chips { display: flex; gap: 7px; margin-top: 11px; flex-wrap: wrap; }
.tb-chip { font-size: 11px; background: rgba(255,255,255,.14); padding: 4px 10px; border-radius: 8px; font-weight: 500; }
.tb-race-cta { display: block; width: 100%; border: none; cursor: pointer; border-radius: 11px; padding: 11px; text-align: center; background: #fff; color: var(--brand-dk); font-family: var(--font-display); font-weight: 700; font-size: 13px; margin-top: 12px; }
.tb-race-cta:active { transform: scale(.98); }
.heat-result-line {
  margin-top: 8px; padding: 8px 11px; background: #fff8f0;
  border-radius: 8px; border-left: 3px solid var(--accent);
  font-size: 13px; font-weight: 600; color: #7c2d12;
}
.cond-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.cond-header h3 { margin: 0; }
.weather-fetch-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 500; font-family: var(--font-body);
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: transparent; color: var(--text-muted);
  cursor: pointer; white-space: nowrap; transition: color .15s, border-color .15s;
}
.weather-fetch-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.weather-fetch-btn:disabled { opacity: .45; cursor: default; }
.weather-fetch-btn[data-state="done"] { color: var(--navy); border-color: var(--navy); }
.weather-fetch-btn[data-state="error"] { color: #b91c1c; border-color: #b91c1c; }
@keyframes wbtn-spin { to { transform: rotate(360deg); } }
.wbtn-spin { animation: wbtn-spin .9s linear infinite; transform-origin: center; }
.weather-err { font-size: 12px; color: var(--text-muted); margin: 4px 0 0; padding: 0; }
.three-day-strip {
  display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 8px; margin-bottom: 12px;
}
.strip-cell {
  text-align: center; padding: 8px 6px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.strip-cell::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--strip-accent, transparent); }
.cadence-divider { display: flex; align-items: center; gap: 9px; margin: 2px 0 10px; }
.cadence-divider .cad-bars { display: flex; gap: 3px; align-items: flex-end; height: 13px; }
.cadence-divider .cad-bars i { width: 4px; height: 13px; border-radius: 2px; background: var(--brand); display: block; }
.cadence-divider .cad-bars i.w { height: 6px; background: var(--accent); }
.cadence-divider .cad-label { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.cadence-divider .cad-line { flex: 1; height: 1px; background: var(--border); }
.strip-today { background: var(--brand); border-color: var(--brand); }
.strip-done  { opacity: .55; }
.strip-missed { opacity: .4; }
.strip-day  { font-size: 11px; font-weight: 700; color: var(--muted); }
.strip-today .strip-day { color: rgba(255,255,255,.8); }
.strip-type { font-size: 12px; font-weight: 600; color: var(--text); margin: 3px 0 1px; }
.strip-today .strip-type { color: #fff; }
.strip-dist { font-size: 11px; color: var(--muted); }
.strip-today .strip-dist { color: rgba(255,255,255,.75); }
.strip-progress { margin-top: 4px; }
.strip-prog-label { font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; margin-bottom: 5px; }
.strip-prog-bar { background: var(--border); border-radius: 4px; height: 6px; }
.strip-prog-fill { background: var(--brand); border-radius: 4px; height: 6px; transition: width .3s; }
.today-notes {
  font-size: 13px; color: var(--muted); background: var(--surface);
  border-radius: 10px; padding: 10px 13px; margin-bottom: 14px; line-height: 1.5;
}
.today-log-btn { width: 100%; margin-top: 4px; }

.glance {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  color: #fff;
}
.glance h3 { color: #fff; font-size: 13px; font-weight: 600; opacity: .8; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.glance-name { font-size: 22px; font-weight: 800; letter-spacing: -.4px; }
.glance-date { opacity: .8; font-size: 13px; margin-bottom: 14px; font-weight: 500; }
.glance-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.12);
}
.glance-row:last-child { border-bottom: none; }
.split-head, .split-row {
  display: grid; grid-template-columns: 36px 1fr 64px 64px; gap: 8px; align-items: center;
}
.split-head {
  font-size: 11px; color: var(--muted); font-weight: 700;
  padding-bottom: 8px; border-bottom: 1px solid var(--border); margin-bottom: 6px;
  letter-spacing: .3px; text-transform: uppercase;
}
.split-row { padding: 4px 0; font-size: 13px; }
.split-row input {
  font-size: 15px; padding: 8px; border: 1.5px solid var(--border);
  border-radius: 9px; min-height: 40px; width: 100%; font-family: inherit;
}
.split-row .slow { color: #dc2626; font-weight: 700; }
.split-row .fast { color: #16a34a; font-weight: 700; }

/* ── Input validation ────────────────────────────────────────────────────── */
.field-error { display: block; color: #dc2626; font-size: 11.5px; margin-top: 3px; font-weight: 600; }
.input-error { border-color: #dc2626 !important; }

/* ── Legal modal (Terms / Privacy) ──────────────────────────────────────── */
/* Sheet-style on mobile (same overlay mechanics as other modals); centered dialog
   on desktop via the existing @media(900px) .modal-overlay{align-items:center} rule. */
.modal.legal-modal {
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 88vh;
}
.legal-modal-handle {
  width: 36px; height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 10px auto 0;
  flex-shrink: 0;
}
.legal-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.legal-modal-title {
  font-size: 16px; font-weight: 700;
  color: var(--navy); letter-spacing: -.2px;
}
.legal-modal-close {
  width: 28px; height: 28px; border-radius: 50%;
  background: #f1f5f9; border: 1px solid var(--border);
  font-size: 16px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
}
.legal-modal-close:active { background: #e2e8f0; }
.legal-modal-body {
  overflow-y: auto; flex: 1; min-height: 0;
  padding: 20px 20px 36px;
}
/* Hide the h1 + date stamp from the standalone page — modal header already shows the title */
.legal-modal-body h1,
.legal-modal-body .updated { display: none; }
.legal-modal-body h2 { font-size: 15px; font-weight: 700; color: var(--accent); margin: 20px 0 8px; }
.legal-modal-body p { color: var(--muted); font-size: 14px; line-height: 1.6; margin-bottom: 10px; }
.legal-modal-body ul { margin: 0 0 10px 20px; }
.legal-modal-body li { color: var(--muted); font-size: 14px; line-height: 1.6; margin-bottom: 4px; }
.legal-modal-body a { color: var(--accent); }
.legal-modal-body .callout {
  background: #f0f4ff; border: 1px solid #dde2ef;
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px; margin: 4px 0 16px;
  font-size: 13.5px; line-height: 1.55; color: var(--text);
}
.legal-modal-loading { text-align: center; padding: 32px 0; color: var(--muted); font-size: 14px; }
@media (min-width: 900px) {
  /* No drag handle needed on desktop centered dialog */
  .legal-modal-handle { display: none; }
}

/* ── Auth screen legal pills ─────────────────────────────────────────────── */
.legal-pills {
  display: flex; justify-content: center; gap: 8px;
  margin: 12px 0 0;
}
.legal-pill {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; font-family: inherit; font-weight: 500;
  color: #6b7db3; background: #f0f3ff;
  border: 1px solid #dde2ef; border-radius: 20px;
  padding: 4px 12px; cursor: pointer;
  transition: background .12s;
}
.legal-pill:active { background: #e0e7ff; }
/* L3 marketing links (owner-approved 2026-07-18): the About pill is purple-tinted so the row
   distinguishes marketing from legal; it is an <a>, so kill the underline. The navy-panel
   link is desktop-only — mobile has the pill instead. */
.legal-pill-about { color: var(--brand); background: #f3ecff; border-color: #e2d6fb; text-decoration: none; }
.legal-pill-about:active { background: #e9dcfd; }
.auth-about-link { display: none; }
@media (min-width: 900px) {
  .auth-about-link { display: inline-block; color: #a78bfa; font-size: 13px; text-decoration: none; margin-top: 10px; }
  .auth-about-link:hover { text-decoration: underline; }
  .legal-pill-about { display: none; }
}

/* ── Settings legal rows ─────────────────────────────────────────────────── */
.legal-settings-row {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 11px 0;
  border-bottom: 1px solid var(--border);
  background: none; border-left: none; border-right: none; border-top: none;
  font-family: inherit; cursor: pointer; text-align: left;
}
.legal-settings-row:last-child { border-bottom: none; padding-bottom: 0; }
.legal-settings-row:first-of-type { padding-top: 0; }
.legal-settings-row-label { font-size: 14px; color: var(--text); }
.legal-settings-row-chevron { font-size: 18px; color: var(--muted); line-height: 1; }

/* ── Confirmation modal ──────────────────────────────────────────────────── */
.modal.modal-sm {
  border-radius: 18px; max-width: 340px; margin: auto;
  padding: 24px 20px; max-height: none;
}
.modal.modal-sm p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.modal.modal-sm h3 { margin-bottom: 8px; }

/* ── Danger zone ─────────────────────────────────────────────────────────── */
.card.card-danger { border: 1.5px solid #fecaca; }

/* Settings sections (2026-07-16, owner-approved option B): four collapsible groups. The header is
   the whole tap target; the purple chevron is the "this expands" affordance; inner .card styles
   are untouched — the group is only a shell around them. */
.set-group {
  background: var(--card); border-radius: var(--r); box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,.04); margin-bottom: 14px; overflow: hidden;
}
.set-group-head {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 15px 16px;
  background: none; border: none; cursor: pointer; text-align: left; font-family: var(--font-body);
}
.set-group-t { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.set-group-title { font-size: 15px; font-weight: 700; letter-spacing: -.2px; color: var(--text); font-family: var(--font-display); }
.set-group-sub { font-size: 11.5px; color: var(--muted); }
.set-group-chev { color: var(--brand); font-size: 13px; transition: transform .15s ease; }
.set-group.expanded .set-group-chev { transform: rotate(180deg); }
.set-group-body { display: none; padding: 2px 12px 12px; }
.set-group.expanded .set-group-body { display: block; }
.set-group-body .card { box-shadow: none; border: 1px solid #eef0f6; }
.card.card-danger h3 { color: #dc2626; }
.card.card-danger p { font-size: 13px; color: var(--muted); margin: 0 0 12px; line-height: 1.5; }
.card.card-danger .danger-btn { width: 100%; }

/* ── Heat output ─────────────────────────────────────────────────────────── */
.heat-out { margin-top: 12px; }
.heat-out .derived-line { font-size: 14px; margin: 8px 0; }
.heat-out .notes-line { margin-top: 10px; }

/* ── Calendar sync toggle ────────────────────────────────────────────────── */
.cal-toggle {
  font-family: inherit; font-size: 13px; font-weight: 700;
  padding: 5px 16px; border-radius: 20px; border: none; cursor: pointer;
  min-height: 32px; min-width: 56px;
  background: #e2e8f0; color: var(--muted);
  transition: background .2s, color .2s;
}
.cal-toggle-on { background: #dcfce7; color: #15803d; }

/* ── HR zone table (Settings) ────────────────────────────────────────────── */
.hr-zone-table { margin-top: 14px; }
.hr-zone-caption {
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  color: var(--muted); margin: 0 0 6px; text-transform: uppercase;
}
.hr-zone-row {
  display: grid; grid-template-columns: 24px 74px 1fr;
  align-items: center; column-gap: 10px; row-gap: 5px;
  padding: 8px 0; border-bottom: 0.5px solid #f0f1f6; font-size: 13px;
}
.hr-zone-row:last-child { border-bottom: none; }
.hrz-name  { grid-column: 1; grid-row: 1 / 3; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--text); }
.hrz-range { grid-column: 2; grid-row: 1 / 3; font-family: var(--font-mono); font-weight: 600; font-size: 12px; color: var(--muted); }
.hrz-track { grid-column: 3; grid-row: 1; height: 8px; background: #eef1f8; border-radius: 4px; overflow: hidden; }
.hrz-fill  { height: 100%; border-radius: 4px; }
.hr-zone-tags { grid-column: 3; grid-row: 2; display: flex; gap: 5px; flex-wrap: wrap; }
.hr-zone-tag {
  font-size: 10px; font-weight: 600; padding: 1px 6px;
  border-radius: 10px; letter-spacing: .2px;
}
.hr-zone-tag.wt-easy     { background: #e0f2fe; color: #0369a1; }
.hr-zone-tag.wt-long     { background: #f3e8ff; color: #7c3aed; }
.hr-zone-tag.wt-interval { background: #fff7ed; color: #c2410c; }
.hr-zone-tag.wt-rest     { background: #fce7f3; color: #be185d; }

/* Walk pace expander */
.walk-pace-wrap { margin-bottom: 8px; }
.walk-pace-expand {
  background: none; border: none; padding: 4px 0; margin-top: 2px;
  font-size: 12px; color: var(--accent); cursor: pointer;
  display: flex; align-items: center; gap: 4px;
}
.walk-pace-expand i { transition: transform 0.15s; font-size: 13px; }
.walk-pace-expand.open i { transform: rotate(180deg); }
.walk-pace-training {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.2s ease, opacity 0.15s;
}
.walk-pace-training.open { max-height: 100px; opacity: 1; }
.walk-pace-note { font-size: 11px; color: var(--muted); margin: 2px 0 6px; line-height: 1.5; }

/* ── OTP auth form ───────────────────────────────────────────────────────── */
.otp-form { width: 100%; }
.otp-sent-msg {
  font-size: 13px; color: var(--muted); margin: 0 0 12px; line-height: 1.5;
}
.auth-code-input {
  display: block; width: 100%; padding: 15px 14px; border-radius: 14px;
  border: 2px solid var(--border); font-size: 28px; font-family: var(--font-mono);
  letter-spacing: 8px; text-align: center; color: var(--text); background: #f8fafc;
  margin-bottom: 10px; outline: none; transition: border-color .15s;
}
.auth-code-input:focus { border-color: var(--navy); background: #fff; }
.auth-back-btn {
  background: none; border: none; color: var(--muted); font-size: 13px;
  cursor: pointer; padding: 8px 0; width: 100%; text-align: center;
  font-family: inherit;
}
.auth-back-btn:hover { color: var(--navy); }

/* ── Flex badge (training log) ───────────────────────────────────────────── */
.flex-badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  background: #fef3c7; color: #92400e; border-radius: 6px;
  padding: 1px 6px; margin-left: 6px; vertical-align: middle;
  letter-spacing: .3px; text-transform: uppercase;
}

/* ── Admin dashboard ─────────────────────────────────────────────────────── */
/* Pill toggle */
.admin-pill-row {
  display: flex; background: var(--bg); border-radius: 8px;
  padding: 3px; gap: 2px; margin: 8px 0 12px;
}
.admin-pill {
  flex: 1; text-align: center; padding: 5px 0; border-radius: 6px;
  font-size: 12px; font-weight: 600; color: var(--muted);
  cursor: pointer; border: none; background: none; font-family: inherit;
  transition: all .15s;
}
.admin-pill.active { background: var(--card); color: var(--navy); box-shadow: var(--shadow-sm); }

/* CSS bar chart */
.admin-bar-chart-wrap { width: 100%; }
.admin-bars { display: flex; align-items: flex-end; height: 80px; gap: 3px; }
.admin-bar {
  flex: 1; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; min-width: 0;
}
.admin-bar-fill {
  width: 100%; background: var(--navy); border-radius: 2px 2px 0 0;
  transition: height .2s;
}
.admin-bar-hl .admin-bar-fill { background: var(--accent); }
.admin-bar-val { font-size: 9px; color: var(--navy); margin-bottom: 1px; line-height: 1; }
.admin-bar-hl .admin-bar-val { color: var(--accent); }
.admin-bar-labels { display: flex; gap: 3px; margin-top: 5px; }
.admin-bar-lbl {
  flex: 1; text-align: center; font-size: 9px;
  color: var(--muted); overflow: hidden; white-space: nowrap; min-width: 0;
}

/* Horizontal bar chart */
.admin-hbar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.admin-hbar-label { width: 68px; font-size: 11px; color: var(--text); text-align: right; flex-shrink: 0; }
.admin-hbar-track { flex: 1; height: 14px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.admin-hbar-fill { height: 100%; background: var(--navy); border-radius: 3px; transition: width .25s; }
.admin-hbar-val { width: 32px; font-size: 11px; color: var(--muted); text-align: right; flex-shrink: 0; }

.admin-updated { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-bottom: 10px; }

/* ── Shared admin utilities — retained after the Backfill & P1.b card was removed (2026-07-09);
   the admin "Updated …" stamp and the subscription / duplicate-account cards reuse these ── */
.bf-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #1d9e75; display: inline-block; }
.bf-mono { font-family: var(--font-mono); color: var(--navy); }

/* Charts grid: 1-col mobile, 2-col desktop */
.admin-charts-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.admin-charts-grid .card { margin-bottom: 14px; }

/* Device grid */
.admin-dev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.admin-dev-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .3px; color: var(--muted); margin-bottom: 8px;
}

/* User rows */
.admin-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.admin-card-head h3 { margin: 0; }
.admin-user-row { padding: 9px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.admin-user-row:last-child { border-bottom: none; }
.admin-user-top { display: flex; justify-content: space-between; align-items: center; }
.admin-user-name { font-weight: 700; font-size: 14px; color: var(--text); }
.admin-user-date { font-size: 10px; color: var(--muted); flex-shrink: 0; margin-left: 8px; }
.admin-chip-line { display: flex; gap: 4px; margin-top: 5px; overflow: hidden; }
.admin-chip {
  font-size: 10px; border-radius: 10px; padding: 2px 8px;
  white-space: nowrap; flex-shrink: 0; background: var(--surface-2); color: var(--muted);
}
.admin-chip-a { background: #dcfce7; color: #166534; }

/* Drill-down */
.admin-drill { padding: 10px 0 4px; border-top: 1px solid var(--border); margin-top: 8px; }
.admin-drill-section {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .3px; color: var(--muted); margin-bottom: 5px;
}
.admin-drill-row {
  font-size: 12px; color: var(--muted); padding: 2px 0 2px 8px;
  border-left: 2px solid var(--border); margin-bottom: 3px;
}

/* Bug rows */
.admin-bug-row { padding: 10px 0; border-bottom: 1px solid var(--border); }
.admin-bug-row:last-child { border-bottom: none; }
.admin-bug-meta { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.admin-bug-attach { font-size: 12px; color: var(--accent); display: block; margin-top: 4px; }

/* Bug report modal — attachment */
.bug-attach-wrap { margin-top: 12px; }
.bug-attach-label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.bug-attach-btn { font-size: 13px; padding: 6px 14px; }
.bug-attach-preview {
  display: block; margin-top: 10px; max-width: 100%; max-height: 180px;
  border-radius: 8px; border: 1px solid var(--border); object-fit: contain;
}
.bug-attach-err { font-size: 12px; color: #dc2626; margin: 4px 0 0; }

/* ── Sidebar brand block (hidden on mobile, shown via desktop media query) ── */
.sidebar-brand { display: none; }
.sidebar-footer { display: none; }

/* ── Desktop page title (injected by render(), hidden on mobile) ─────────── */
.desktop-view-title { display: none; }

/* ── Desktop layout (≥ 900px) — Option B sidebar ───────────────────────── */
@media (min-width: 900px) {
  body { background: #eef1f8; }

  .app-shell {
    max-width: none; margin: 0; min-height: 0;
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "sidebar main";
    height: 100vh; overflow: hidden;
  }

  /* Header becomes a thin title bar inside .view-root on desktop — hide the shell header */
  .app-header { display: none; }

  .tab-bar {
    grid-area: sidebar;
    position: static;
    flex-direction: column;
    align-items: stretch;
    border-right: 1px solid var(--border);
    border-top: none;
    padding: 0;
    background: var(--card);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    overflow-y: auto; overflow-x: hidden;
    min-height: 0;
  }

  .sidebar-brand {
    display: flex; align-items: center; gap: 10px;
    background: #0b1230; /* locked navy chrome (was legacy #0f1d5e) — the wordmark reverse surface */
    padding: 16px 16px;
    flex-shrink: 0;
  }
  .sidebar-logo { width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; }
  .sidebar-brand-name {
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.4px;
  }
  .sidebar-brand-sub {
    color: rgba(255,255,255,.55);
    font-size: 11px;
    margin-top: 3px;
    line-height: 1.4;
  }

  .tab-btn {
    flex: none; /* override mobile flex:1 so buttons don't stretch to fill sidebar height */
    flex-direction: row; justify-content: flex-start;
    padding: 11px 18px; min-height: unset; height: auto;
    font-size: 13px; gap: 10px; border-radius: 0; width: 100%;
    color: var(--muted);
  }
  .tab-btn .ic { font-size: 18px; flex-shrink: 0; }
  .tab-btn .ic svg { width: 19px; height: 19px; }
  .tab-btn.active { background: #ede9fe; color: var(--brand); border-right: 3px solid var(--brand); font-weight: 600; }
  .tab-btn.active .ic { transform: none; }

  .sidebar-footer {
    display: block;
    margin-top: auto;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: var(--muted);
    line-height: 1.5;
  }

  .view-root {
    grid-area: main; overflow-y: auto; min-height: 0;
    padding: 28px 40px 48px; max-width: 1000px; margin: 0 auto;
  }

  .desktop-view-title {
    display: block;
    font-size: 22px; font-weight: 800; color: var(--navy);
    letter-spacing: -.4px; margin: 0 0 20px;
  }

  /* Admin 2-col chart grid on desktop */
  .admin-charts-grid { grid-template-columns: 1fr 1fr; }
  .admin-charts-grid .card { margin-bottom: 0; }

  /* Wider cards */
  .card { border-radius: var(--r); }

  /* Day cards in training log: 2-col grid */
  .day-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; align-items: start; }
  .day-list .day-card { margin-bottom: 0; }

  /* Modal: centered dialog on desktop instead of bottom sheet */
  .modal-overlay { align-items: center; }
  .modal {
    border-radius: 16px;
    max-width: 520px;
    max-height: 85vh;
    width: calc(100% - 48px);
  }
}

/* ── M4 Shoes card (mockup-approved 2026-07-06) ──────────────────────────────
   Mobile: name|miles, wear bar, source|status stacked. Desktop (≥900px): one
   row-grid per pair — name | bar | miles | status (approved desktop mockup).
   .shoe-id is display:contents so name/src place directly into the row grid. */
.shoe-card-head { display: flex; justify-content: space-between; align-items: baseline; }
.shoe-src-note { font-size: 12px; color: var(--muted); }
.shoe-row {
  display: grid; grid-template-columns: 1fr auto;
  grid-template-areas: "name mi" "bar bar" "src status";
  gap: 4px 10px; padding: 12px 0; border-bottom: 1px solid #edeef4;
  cursor: pointer; align-items: center;
}
.shoe-id { display: contents; }
.shoe-name { grid-area: name; font-size: 14.5px; font-weight: 600; }
.shoe-src { grid-area: src; font-size: 11.5px; color: var(--muted); }
.shoe-bar { grid-area: bar; height: 5px; background: #edeef4; border-radius: 3px; overflow: hidden; margin-top: 3px; }
.shoe-bar-fill { height: 100%; background: var(--brand); border-radius: 3px; }
.shoe-bar-fill.shoe-bar-warn { background: var(--accent); } /* orange = alert, never decorative (§5g) */
.shoe-mi { grid-area: mi; font-size: 14px; text-align: right; }
.shoe-mi-alert { color: var(--accent-dk); }
.shoe-status { grid-area: status; text-align: right; }
.shoe-badge { font-size: 11.5px; font-weight: 600; color: var(--accent-dk); background: #fff3e9; border-radius: 5px; padding: 2px 8px; white-space: nowrap; }
.shoe-replace-at { font-size: 11.5px; color: var(--muted); }
.shoe-controls { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid #edeef4; }
.shoe-alert-label { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.shoe-alert-input { width: 64px; height: 30px; border: 1px solid #d8dae6; border-radius: 7px; text-align: center; font-family: var(--font-mono); font-size: 13px; }
.shoe-retire-btn { margin-left: auto; font-size: 12.5px; padding: 6px 12px; }
.shoe-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; }
.shoe-add-btn { height: 34px; padding: 0 14px; font-size: 13px; font-weight: 600; border: 1px solid var(--brand); border-radius: 8px; background: #fff; color: var(--brand); cursor: pointer; }
.shoe-retired-link { border: none; background: none; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.shoe-empty { font-size: 13px; color: var(--muted); margin: 8px 0 4px; line-height: 1.5; }
.shoe-add-form { display: grid; gap: 8px; padding-top: 10px; }
.shoe-add-form input { height: 36px; border: 1px solid #d8dae6; border-radius: 7px; padding: 0 10px; font-size: 13.5px; }
.shoe-save-btn { justify-self: start; }
.shoe-retired-list { opacity: 0.75; }

@media (min-width: 900px) {
  .shoe-row {
    grid-template-columns: 200px minmax(0, 1fr) 90px 150px;
    grid-template-areas: "name bar mi status" "src bar mi status";
    gap: 2px 16px;
  }
  .shoe-bar { margin-top: 0; }
}

/* M4: override + shoes pickers — stacked on mobile, one row on desktop (approved mockup) */
.pick-row { display: grid; gap: 10px; margin-top: 10px; }
.pick-row .ifield.wide { grid-column: auto; }
@media (min-width: 900px) {
  .pick-row { grid-template-columns: 1fr 1fr; }
  .pick-row .ifield.wide:only-child { grid-column: 1 / -1; }
}
.pick-row .ifield { min-width: 0; }
.pick-row .ifield select { min-width: 0; width: 100%; }

/* ── M2 Fueling (mockup-approved 2026-07-06; hydration in oz since 2026-07-06) ─
   Personal fluids read in ounces; carbs are purple (plan guidance), fluids go ORANGE only when
   heat is in play (§5g — orange means heat or effort, never decoration). */
.fuel-card { padding: 16px; }
.fuel-head { display: flex; justify-content: space-between; align-items: baseline; }
.fuel-head h3 { margin: 0; font-size: 15px; }
.fuel-dur { font-size: 12px; color: var(--muted); }
.fuel-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.fuel-box { border-radius: 10px; padding: 9px 11px; background: #fafafe; }
.fuel-box-l { font-size: 11px; font-weight: 600; color: var(--muted); }
.fuel-box-v { font-family: var(--font-mono); font-weight: 700; font-size: 17px; color: var(--text); margin-top: 2px; }
.fuel-box-s { font-size: 11px; color: var(--muted); margin-top: 1px; }
.fuel-box-carbs { background: #f4f0fe; }
.fuel-box-carbs .fuel-box-l, .fuel-box-carbs .fuel-box-s { color: #6d5aa8; }
.fuel-box-carbs .fuel-box-v { color: var(--navy-mid); }
.fuel-box-heat { background: #fff3ea; }
.fuel-box-heat .fuel-box-l, .fuel-box-heat .fuel-box-s { color: #b45309; }
.fuel-box-heat .fuel-box-v { color: var(--accent-dk); }
.fuel-box-gels { grid-column: 1 / -1; }
.fuel-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.fuel-chip { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: var(--navy-mid);
  background: #f4f0fe; border-radius: 6px; padding: 3px 8px; }
.fuel-gut { margin-top: 11px; border-top: 1px solid #edeff6; padding-top: 9px; font-size: 12px; color: var(--muted); }
.fuel-gut-target { font-family: var(--font-mono); font-weight: 700; color: var(--navy-mid); }

/* Log-day strip: same visual family as the P3 fact strips; single-side border ⇒ radius 0. */
.fuel-strip { background: #f4f0fe; border-left: 3px solid var(--brand); border-radius: 0;
  padding: 7px 10px; margin: 10px 0 2px; font-size: 12.5px; color: var(--navy-mid); line-height: 1.55; }
.fuel-strip-label { font-weight: 700; }

/* Settings Fueling card */
.fuel-set-grid { display: grid; gap: 16px; }
.fuel-set-grid .ifield { min-width: 0; }
.fuel-set-grid .ifield input, .fuel-set-grid .ifield select { width: 100%; min-width: 0; }
.fuel-set-cap { font-size: 11.5px; color: var(--muted); margin: 4px 0 0; line-height: 1.5; }
.fuel-sweat-title { font-size: 13px; margin-top: 2px; }
.fuel-sweat-strong { font-weight: 700; color: var(--text); }
.fuel-sweat-opt { color: var(--muted); }
/* 2×2 on mobile — four 46px-tall inputs can't share 375px; desktop restores the 4-across row. */
.sweat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px; }
.sweat-grid .ifield input { font-family: var(--font-mono); }
.sweat-out { margin-top: 9px; background: #f4f0fe; border-radius: 8px; padding: 7px 10px;
  font-size: 12px; color: var(--navy-mid); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sweat-out-v { font-family: var(--font-mono); font-weight: 700; }
.sweat-clear { margin-left: auto; background: none; border: none; color: var(--muted);
  font-size: 11px; text-decoration: underline; cursor: pointer; padding: 0; }

@media (min-width: 900px) {
  .fuel-boxes { grid-template-columns: 150px 170px 1fr; }
  .fuel-box-gels { grid-column: auto; }
  /* Product left, sweat worksheet right — the approved desktop split. */
  .fuel-set-grid { grid-template-columns: 250px 1fr; gap: 24px; }
  .fuel-set-sweat { border-left: 1px solid #edeff6; padding-left: 24px; }
  .sweat-grid { grid-template-columns: repeat(4, minmax(0, 110px)); }
}

/* ── M5 Race-week hub (mockup-approved 2026-07-06) ───────────────────────────
   The hub header is the one place the chrome gradient (navy → deep purple) appears in
   content — race week is the app's biggest moment. */
.hub { border-radius: 14px; margin-bottom: 14px; box-shadow: var(--shadow-sm); }
.hub-head { background: linear-gradient(135deg, var(--navy), var(--navy-mid)); border-radius: 14px 14px 0 0;
  padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.hub:not(.hub-open) .hub-head { border-radius: 14px 14px 0 0; }
.hub-eyebrow { font-size: 10px; font-weight: 700; color: #c4b5fd; text-transform: uppercase; letter-spacing: .6px; }
.hub-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: #fff; margin-top: 2px; }
.hub-sub { font-size: 12px; color: #c7cde6; margin-top: 2px; }
.hub-sub .tb-mono { font-family: var(--font-mono); font-weight: 700; color: #fff; }
.hub-count { text-align: center; flex-shrink: 0; margin-left: 12px; }
.hub-count-v { font-family: var(--font-mono); font-weight: 700; font-size: 28px; color: #fff; line-height: 1; }
.hub-count-l { font-size: 10px; color: #c4b5fd; font-weight: 600; margin-top: 2px; }
.hub-days { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px;
  background: linear-gradient(135deg, var(--navy), var(--navy-mid)); padding: 0 16px 12px; }
.hub-daycell { background: rgba(255,255,255,.10); border-radius: 8px; padding: 6px; text-align: center; }
.hub-day-primary { background: rgba(255,255,255,.28); border: 1px solid rgba(255,255,255,.4); }
.hub-day-today { outline: 2px solid var(--accent); }
.hub-day-d { font-size: 10px; color: #c4b5fd; }
.hub-day-primary .hub-day-d { color: #e9d5ff; }
.hub-day-n { font-size: 12px; color: #fff; font-weight: 600; }
.hub-foot { background: linear-gradient(135deg, var(--navy), var(--navy-mid)); border-radius: 0 0 14px 14px;
  padding: 9px 16px 11px; display: flex; justify-content: space-between; align-items: center; cursor: pointer;
  border-top: 1px solid rgba(255,255,255,.14); }
.hub-foot span:first-child { font-size: 11px; color: #c7cde6; }
.hub-open-btn, .hub-collapse { font-size: 12px; color: var(--brand); font-weight: 700; cursor: pointer; }
.hub-open-btn { color: #c4b5fd; }
.hub-body { background: var(--card); border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 14px 14px; padding: 14px 16px; }
.hub-grid { display: grid; gap: 14px; }
.hub-sec-t { font-size: 12px; font-weight: 700; color: var(--navy); }
.hub-sec-sub { color: var(--muted); font-weight: 400; }
.hub-sec + .hub-sec { border-top: 1px solid #edeff6; padding-top: 12px; }
.hub-cap { font-size: 10.5px; color: var(--muted); margin-top: 5px; line-height: 1.5; }
.hub-fc-row { display: flex; gap: 8px; margin-top: 7px; }
.hub-fc-main { flex: 1.3; background: #eef4ff; border-radius: 9px; padding: 8px 10px; }
.hub-fc-side { flex: 1; background: #fafafe; border-radius: 9px; padding: 8px 10px; }
.hub-fc-l { font-size: 10.5px; font-weight: 600; color: #2563eb; }
.hub-fc-side .hub-fc-l { color: var(--muted); }
.hub-fc-v { font-family: var(--font-mono); font-weight: 700; font-size: 17px; color: var(--navy); margin-top: 1px; }
.hub-fc-s { font-size: 10.5px; color: #5b6b8c; }
.hub-fc-imp { font-size: 11.5px; color: var(--navy); margin-top: 3px; line-height: 1.45; }
.pb-row { display: flex; gap: 6px; margin-top: 7px; }
.pb-box { flex: 1; background: #fafafe; border-radius: 8px; padding: 6px 8px; text-align: center; }
.pb-cruise { background: #f4f0fe; }
.pb-l { font-size: 10px; color: var(--muted); }
.pb-cruise .pb-l, .pb-cruise .pb-s { color: #6d5aa8; }
.pb-v { font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--navy); }
.pb-cruise .pb-v { color: var(--navy-mid); }
.pb-s { font-size: 9.5px; color: var(--muted); }
.hub-tl { display: grid; grid-template-columns: 72px 1fr; gap: 4px 10px; font-size: 12px; margin-top: 7px; }
.hub-tl-w { font-family: var(--font-mono); color: var(--navy-mid); font-size: 11px; }
.hub-tl-t { color: var(--text); }
.pack-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; margin-top: 7px; }
.pack-row { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text); cursor: pointer; }
.pack-row input { accent-color: var(--brand); width: 16px; height: 16px; flex-shrink: 0; }
.pack-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pack-x { background: none; border: none; color: #c2c7d8; font-size: 14px; cursor: pointer; padding: 0 2px;
  line-height: 1; }
.pack-x:hover { color: var(--red, #dc2626); }
.pack-add { display: flex; gap: 8px; margin-top: 9px; }
.pack-add input { flex: 1; min-width: 0; font-size: 13px; padding: 7px 10px; border: 1.5px solid var(--border);
  border-radius: 8px; background: #f8fafc; }
.pack-add-btn { font-size: 12px; font-weight: 700; color: var(--brand); background: none;
  border: 1.5px solid var(--brand); border-radius: 8px; padding: 0 14px; cursor: pointer; }
.hub-lg { display: grid; gap: 8px; margin-top: 7px; }
.hub-lf input { min-height: 38px; font-size: 14px; padding: 7px 10px; }
.hub-notes { width: 100%; font-size: 13px; font-family: var(--font-body); padding: 8px 10px; margin-top: 7px;
  border: 1.5px solid var(--border); border-radius: 8px; background: #f8fafc; resize: vertical; }
.cn-rows { display: grid; grid-template-columns: 48px 1fr; gap: 3px 10px; font-size: 12px; margin-top: 7px; }
.cn-mi { font-family: var(--font-mono); color: var(--navy-mid); font-size: 11px; }
.cn-t { color: var(--text); }
.hub-collapse { margin-top: 12px; }

/* Race editor geocode results */
.loc-results { border: 1.5px solid var(--border); border-radius: 10px; margin-top: 4px; overflow: hidden; }
.loc-row { display: block; width: 100%; text-align: left; background: var(--card); border: none;
  padding: 9px 12px; font-size: 13px; color: var(--text); cursor: pointer; font-family: var(--font-body); }
.loc-row + .loc-row { border-top: 1px solid #edeff6; }
.loc-row:hover { background: #f4f0fe; }

/* Race-day splits: course-note flag rows */
.split-note { grid-column: 1 / -1; font-size: 11.5px; color: var(--navy-mid); background: #f4f0fe;
  border-radius: 6px; padding: 4px 9px; margin: 2px 0; }

@media (min-width: 900px) {
  /* Approved desktop: sections flow in a 2-col grid inside the expanded hub. */
  .hub-grid { grid-template-columns: 1fr 1fr; gap: 14px 22px; }
  .hub-sec + .hub-sec { border-top: none; padding-top: 0; }
  .hub-lg { grid-template-columns: 1fr 1fr; }
}

/* ── US-4.5 29029 Summit hub — navy→TEAL chrome (marks a vert event at a glance) + the ascent
   tracker / race-day plan / hourly fueling. Teal = vert/climb (§5g). ───────────────────────────── */
.hub-vert .hub-head, .hub-vert .hub-foot { background: linear-gradient(135deg, var(--navy) 0%, #0f6e56 150%); }
.hub-vert .hub-eyebrow, .hub-vert .hub-count-l { color: #7ee6bf; }
.hub-vert .hub-sec-t { color: #0f6e56; }
.ascent-meterhd { font-size: 12px; color: var(--muted); margin-top: 7px; }
.ascent-meterhd .m { font-family: var(--font-mono); }
.ascent-meterhd b { color: var(--navy); }
.ascent-bar { height: 8px; border-radius: 5px; background: #e6e8f0; margin: 6px 0 10px; overflow: hidden; }
.ascent-bar-fill { height: 100%; background: #0f6e56; border-radius: 5px; transition: width .2s; }
.lap-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.lap-cell { aspect-ratio: 1; border-radius: 7px; border: 1.5px solid var(--border); background: #f8fafc;
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  font-family: var(--font-mono); font-size: 12px; color: #9aa1b2; }
.lap-cell:hover { border-color: #0f6e56; }
.lap-cell.lap-done { background: #0f6e56; border-color: #0f6e56; color: #fff; }
.lap-cell.lap-done .lap-check { font-weight: 700; }
.lap-cell.lap-now { border-color: var(--accent); color: var(--accent); }
.lap-cell.lap-editing { outline: 2px solid #0f6e56; outline-offset: 1px; }
.lap-edit { display: flex; align-items: center; gap: 8px; margin-top: 9px; background: #f5faf8;
  border-radius: 9px; padding: 8px 10px; }
.lap-edit-l { font-size: 12px; font-weight: 700; color: #0f6e56; }
.lap-edit-inp { flex: 0 0 76px; min-height: 34px; padding: 6px 9px; border: 1.5px solid var(--border);
  border-radius: 8px; font-size: 15px; font-family: var(--font-mono); background: #fff; }
.lap-edit-save, .lap-edit-clr { min-height: 34px; padding: 6px 12px; border-radius: 8px; font-size: 12.5px;
  font-weight: 700; cursor: pointer; font-family: inherit; }
.lap-edit-save { background: #0f6e56; color: #fff; border: none; }
.lap-edit-clr { background: none; border: 1.5px solid var(--border); color: var(--muted); }
.ascent-live { font-size: 12px; color: var(--navy); margin-top: 10px; line-height: 1.55; }
.ascent-live .m { font-family: var(--font-mono); }
.ascent-live-ok, .ascent-live-warn { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: 1px; }
.ascent-live-ok { background: #0f6e56; }
.ascent-live-warn { background: var(--accent); }
.ascent-thirds { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 7px; text-align: center; }
.ath { background: #f5faf8; border-radius: 9px; padding: 9px 4px; }
.ath-v { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--navy); }
.ath-l { font-size: 9.5px; color: var(--muted); margin-top: 1px; }
.ascent-planline { font-size: 12px; color: var(--navy); margin-top: 9px; line-height: 1.55; }
.hub-cap-i { font-style: italic; }
.vfuel { display: flex; flex-direction: column; gap: 6px; margin-top: 7px; }
.vfuel-row { display: grid; grid-template-columns: 62px 1fr; gap: 10px; align-items: baseline; }
.vfuel-w { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: #0f6e56; }
.vfuel-t { font-size: 11.5px; color: var(--text); }
.vfuel-t .m { font-family: var(--font-mono); font-weight: 700; }
.vfuel-chip { background: #e1f5ee; color: #0f6e56; border-radius: 5px; padding: 1px 6px; font-size: 10.5px; font-weight: 600; }

/* ── M1 Strength (mockup-approved 2026-07-06) ────────────────────────────────
   Checklist shared by the Today card and expanded log days. Purple accents only —
   strength is plan guidance; orange stays reserved for heat/effort (§5g). */
.str-card { padding: 16px; }
.str-head { display: flex; justify-content: space-between; align-items: baseline; }
.str-head h3 { margin: 0; font-size: 15px; }
.str-meta { font-size: 11px; color: var(--muted); flex-shrink: 0; margin-left: 10px; }
.str-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.str-items { display: grid; gap: 6px; margin-top: 10px; }
.str-line { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text); cursor: pointer; }
.str-line input { accent-color: var(--brand); width: 18px; height: 18px; flex-shrink: 0; }
.str-done .str-name { text-decoration: line-through; color: #9aa0b5; }
.str-cue { color: var(--muted); font-size: 11.5px; }
.str-swap { font-size: 11.5px; color: var(--navy-mid); background: #f4f0fe; border-radius: 6px;
  padding: 4px 9px; margin: 4px 0 0 27px; }
.str-fine { margin-top: 10px; border-top: 1px solid #edeff6; padding-top: 8px;
  font-size: 10.5px; color: #b8bdd0; }
.str-strip { background: #f4f0fe; border-left: 3px solid var(--brand); border-radius: 0;
  padding: 7px 10px; margin: 10px 0 2px; font-size: 12.5px; color: var(--navy-mid); }
.str-strip-b { font-weight: 700; }

@media (min-width: 900px) {
  /* Approved desktop: checklist flows into two columns. */
  .str-items { grid-template-columns: 1fr 1fr; gap: 6px 24px; }
}

/* ── F-E2 Load check (mockup-approved 2026-07-06) ────────────────────────────
   Orange dot/number ONLY at caution — orange means effort/heat/risk, never decoration (§5g);
   the watch tier stays grey. */
.load-card { padding: 13px 16px; }
.load-head { display: flex; align-items: center; gap: 8px; }
.load-head h3 { margin: 0; font-size: 14px; }
.load-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.load-watch .load-dot { background: #9aa0b5; }
.load-caution .load-dot { background: var(--accent); }
.load-body { font-size: 12.5px; color: var(--text); margin-top: 6px; line-height: 1.55; }
.load-num { font-family: var(--font-mono); font-weight: 700; }
.load-watch .load-num { color: #4b5563; }
.load-caution .load-num { color: var(--accent-dk); }
.load-sub { font-size: 11.5px; color: var(--muted); margin-top: 6px; }

/* ── M3 Morning check-in (mockup-approved 2026-07-06) ────────────────────────
   The daily two-tap: purple selection states; the answered card is a single quiet line. */
.ck-card { padding: 14px 16px; }
.ck-card h3 { margin: 0 0 4px; font-size: 14px; }
.ck-row { display: flex; align-items: center; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.ck-lab { font-size: 11.5px; color: var(--muted); width: 52px; flex-shrink: 0; }
.ck-box { width: 34px; height: 34px; border-radius: 8px; border: none; background: #f4f0fe;
  color: var(--navy-mid); font-size: 14px; font-weight: 700; cursor: pointer; font-family: var(--font-body); }
.ck-pill { padding: 8px 14px; border-radius: 8px; border: none; background: #f4f0fe;
  color: var(--navy-mid); font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--font-body); }
.ck-chip { padding: 5px 10px; border-radius: 7px; border: none; background: #f4f0fe;
  color: var(--navy-mid); font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--font-body); }
.ck-sel { background: var(--brand); color: #fff; }
.ck-done { padding: 10px 16px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
/* Smart-cadence quiet strip (approved 2026-07-16): one line on quiet mornings; tap = full card. */
.ck-strip { padding: 10px 16px; font-size: 12.5px; color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ck-strip-go { color: var(--brand); font-weight: 700; }
.ck-strip-sub { font-size: 11px; color: #94a3b8; }
.ck-mono { font-family: var(--font-mono); font-weight: 700; color: var(--navy-mid); }
.ck-warn { margin-top: 6px; font-size: 12px; color: var(--accent-dk); line-height: 1.5; }
/* #33 Stage 4d: sleep prefill — a purple-outlined box the watch suggests; only a visual hint until tapped. */
.ck-box.ck-pre { box-shadow: inset 0 0 0 2px var(--brand); background: #fff; }
.ck-prefill { margin-top: 7px; font-size: 11.5px; color: var(--navy-mid); line-height: 1.5; }

/* #33 Stage 4d: the advisory Body-signals card (Direction B, only-when-notable). Display-only. */
.wcard { padding: 14px 16px; }
.wcard-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.wcard-h h3 { margin: 0; font-size: 14px; }
.wcard-sub { font-size: 11.5px; color: #94a3b8; font-weight: 500; }
.wrow { display: grid; grid-template-columns: 54px 62px 1fr 92px; align-items: center; gap: 10px; margin: 9px 0; }
.wrow-l { font-size: 12px; color: var(--muted); }
.wrow-v { font-family: var(--font-mono); font-size: 13.5px; font-weight: 500; color: var(--navy); font-variant-numeric: tabular-nums; }
.wbar { position: relative; height: 6px; background: #eef0f6; border-radius: 4px; }
/* --vert-50, not a one-off tint: #d7f0e4 appeared exactly once in this stylesheet while the token
   for this exact role already existed (design-system correction 2026-07-24). */
.wbar-in { position: absolute; top: 0; bottom: 0; background: var(--vert-50); border-radius: 4px; }
.wbar-dot { position: absolute; top: -3px; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid #fff; transform: translateX(-50%); }
.wbar-dot.ok { background: var(--vert); }
.wbar-dot.bad { background: var(--accent); }
/* #33 Stage 5: the neutral marker the band family was missing — a value that is neither in a good
   band nor concerning (a mid-build TSB). #9aa0b5 is the shipped .load-dot grey, not a new tint. */
.wbar-dot.mut { background: #9aa0b5; }
.wrow-t { font-size: 11px; font-weight: 500; text-align: right; }
.wrow-t.ok { color: var(--vert-dk); }
.wrow-t.warn { color: var(--accent-dk); }
.wcard-note { margin-top: 9px; font-size: 11px; color: #94a3b8; line-height: 1.5; }

/* #33-easeoff — the prompt folded into the Body-signals card (owner-chosen Option B, §4s2). The
   actions use the brand purple because this is the engine PROPOSING a change the athlete confirms
   (the .sug-card family), not a warning: orange stays for the reduced days it produces. */
.ease-ask { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line); }
.ease-q { font-size: 12.5px; color: #4b5563; line-height: 1.55; }
.ease-q b { color: var(--navy); font-weight: 700; }
.ease-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }
.ease-b1, .ease-b2 { font-family: inherit; font-size: 12.5px; font-weight: 600; border-radius: 8px;
  padding: 8px 13px; cursor: pointer; }
.ease-b1 { background: var(--brand); color: #fff; border: 1px solid var(--brand); }
.ease-b1:hover { background: var(--brand-dk); }
.ease-b2 { background: #fff; color: var(--brand); border: 1px solid #ddd6f5; }
.ease-fine { margin-top: 9px; font-size: 11px; color: #94a3b8; line-height: 1.5; }
/* The accepted state is its own card: an accepted ease outlives the notability that produced it. */
.ease-active { border-left: 4px solid var(--accent); padding: 11px 14px; font-size: 12px; color: #4b5563; }
.ease-active-sub { color: var(--muted); }

/* ── #33 Stage 5: PMC "Fitness & freshness" card (Direction A, approved 2026-07-24) ──────────────
   Compact-card heading treatment, matching .load-card (14px h3) rather than the 16px .card h3 —
   these two sit adjacently and must read as siblings. Every colour here is a shipped token; the
   band + dot come from the .wbar family above, so a palette fix there moves this card too. */
.fcard { padding: 13px 16px; }
.fcard-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px; }
.fcard-h h3 { margin: 0; font-size: 14px; }
.fcard-sub { font-size: 11.5px; color: #94a3b8; font-weight: 500; }
.fcard-lead { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.fcard-form { font-family: var(--font-mono); font-size: 26px; font-weight: 500; color: var(--navy);
  font-variant-numeric: tabular-nums; line-height: 1.1; }
.fcard-form.ok { color: var(--vert-dk); }
.fcard-form.warn { color: var(--accent-dk); }
.fcard-state { font-size: 12.5px; color: var(--muted); }
.fcard-state.ok { color: var(--vert-dk); }
.fcard-state.warn { color: var(--accent-dk); }
.fcard-nums { display: flex; gap: 20px; font-size: 12px; color: var(--muted); margin-top: 9px; }
.fcard-num { font-family: var(--font-mono); font-size: 13.5px; color: var(--navy); font-variant-numeric: tabular-nums; }
.fcard-bar { margin: 11px 0 3px; }
.fcard-band { position: relative; height: 13px; font-size: 10.5px; color: #94a3b8; }
/* Centred on the band (taperLo..taperHi = 58.3%..91.7% of the rail) rather than free-floating. */
.fcard-band span { position: absolute; left: 75%; transform: translateX(-50%); }
.fcard-note { margin-top: 9px; font-size: 11px; color: #94a3b8; line-height: 1.5; }

@media (min-width: 900px) {
  /* Desktop (approved mock): the CTL/ATL pair sits on the headline row, right-aligned, so the form
     number leads alone. It stays ONE node in the DOM — the grid lifts it out of mobile's
     below-the-rail position rather than the card rendering it twice. */
  .fcard {
    display: grid; grid-template-columns: 1fr auto; column-gap: 20px; align-items: baseline;
    grid-template-areas: "head head" "lead nums" "bar bar" "band band" "note note";
  }
  .fcard-h { grid-area: head; }
  .fcard-lead { grid-area: lead; }
  .fcard-nums { grid-area: nums; margin-top: 0; }
  .fcard-bar { grid-area: bar; }
  .fcard-band { grid-area: band; }
  .fcard-note { grid-area: note; }
}

/* #33 Stage 5: the GAP transparency line (Option 2, approved) — a second muted line INSIDE
   .derived-line, deliberately without strip chrome. A bordered strip in this app means "the engine
   is telling you a fact about your plan" (§5d3) and all four of that family's hues are assigned;
   teal would be actively wrong, since GAP is gated to road runs. This is a measurement footnote. */
.gap-line { display: block; margin-top: 3px; font-size: 11.5px; color: #94a3b8; line-height: 1.5; }

@media (min-width: 900px) {
  /* Approved desktop: sleep + legs share one row. */
  .ck-card { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
  .ck-card h3 { margin: 0; }
  .ck-row { margin-top: 0; }
  .ck-row.ck-areas { flex-basis: 100%; margin-top: 8px; }
}

/* ── M6 Share cards (designs approved 2026-07-06) ────────────────────────────
   Preview-before-share modal + the three trigger buttons. */
.share-btn { margin-top: 10px; padding: 7px 14px; border-radius: 9px; border: 1.5px solid var(--brand);
  background: none; color: var(--brand); font-size: 12.5px; font-weight: 700; cursor: pointer;
  font-family: var(--font-body); }
.share-result-btn { width: 100%; margin-top: 12px; }
.share-week { background: none; border: none; color: var(--brand); font-size: 14px; font-weight: 700;
  cursor: pointer; padding: 0 0 0 8px; vertical-align: middle; }
.share-modal { padding: 16px; }
.share-fmt { display: flex; gap: 8px; margin-bottom: 12px; }
.share-fmt-btn { flex: 1; padding: 8px; border-radius: 9px; border: none; background: #f4f0fe;
  color: var(--navy-mid); font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--font-body); }
.share-fmt-sel { background: var(--brand); color: #fff; }
.share-time { margin-bottom: 12px; }
.share-img-wrap { display: flex; justify-content: center; }
.share-img { width: 100%; max-width: 420px; border-radius: 12px; display: block; }
.share-img-story { max-width: 260px; }
.share-rendering { padding: 60px 0; font-size: 13px; color: var(--muted); text-align: center; width: 100%; }
.share-actions { display: flex; gap: 10px; margin-top: 14px; }
.share-actions button { flex: 1; }
.share-cancel { display: block; margin: 10px auto 0; background: none; border: none;
  color: var(--muted); font-size: 12px; cursor: pointer; text-decoration: underline; font-family: var(--font-body); }

/* ── Subscription card (monetization) ── */
.sub-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.sub-hl { display: flex; align-items: center; gap: 9px; }
.sub-ic { color: var(--brand); width: 20px; height: 20px; display: inline-flex; }
.sub-ic svg { width: 20px; height: 20px; }
.sub-title { margin: 0; font-family: var(--font-display); font-size: 15px; color: var(--navy); }
.sub-badge { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.sub-badge-trial { background: #efeafe; color: #5b21b6; }
.sub-badge-pro   { background: var(--brand); color: #fff; }
.sub-badge-free  { background: #eef0f4; color: #4b5563; }
.sub-badge-due   { background: #fef2f2; color: #b91c1c; }
.sub-line { font-size: 14px; color: var(--text); margin-bottom: 3px; }
.sub-line-due { color: #b91c1c; font-weight: 600; }
.sub-days { color: var(--brand-dk); font-weight: 500; }
.sub-mono { font-family: var(--font-mono); }
.sub-cap { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0 0 2px; }
.sub-unlock { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text); padding: 3px 0; line-height: 1.4; }
.sub-check { color: var(--brand); font-weight: 700; }
.sub-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 13px 0 0; }
.sub-tile { text-align: left; background: #fff; border: 1.5px solid var(--border); border-radius: 11px;
  padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; font-family: var(--font-body); }
.sub-tile-sel { border: 2px solid var(--brand); background: #faf8ff; }
.sub-tile-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sub-tile-lab { font-size: 12.5px; color: var(--muted); }
.sub-tile-tag { font-size: 10px; font-weight: 700; color: #0f6e56; background: #e1f5ee; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.sub-tile-promo { color: #a3282a; background: #fce8e8; } /* launch-promo badge (deal signal, pricing context) */
.sub-was { font-family: var(--font-mono); font-size: 12px; color: var(--muted); text-decoration: line-through; margin-right: 5px; }
.sub-tile-price .sub-mono { font-size: 20px; font-weight: 500; color: var(--navy); }
.sub-per { font-size: 12.5px; color: var(--muted); }
/* Upgrade button spans both tile columns on mobile (full-width below the tiles) */
.sub-picker .sub-btn { grid-column: 1 / -1; margin: 0; }
/* Manage/Update buttons (no picker) stay full-width */
.sub-card > .ghost-btn.sub-btn, .sub-card > .primary-btn.sub-btn { width: 100%; margin: 12px 0 0; }
@media (min-width: 900px) {
  /* desktop: the two tiles + Upgrade share one row (approved) */
  .sub-picker { display: flex; align-items: stretch; }
  .sub-picker .sub-tile { flex: 0 1 170px; }
  .sub-picker .sub-btn { width: auto; align-self: center; padding: 13px 22px; grid-column: auto; }
}

/* ── Free-tier gating (monetization) ── */
.pro-lock-ic { width: 34px; height: 34px; border-radius: 50%; background: #efeafe; color: var(--brand);
  display: flex; align-items: center; justify-content: center; margin-bottom: 9px; }
.pro-lock-ic svg { width: 18px; height: 18px; }
.pro-lock-h { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--navy); margin: 0 0 5px; }
.pro-lock-p { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0 0 12px; }
.pro-lock-feat { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); padding: 3px 0; }
.pro-lock-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex: none; }
.pro-lock .primary-btn { margin-top: 12px; }
.pro-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  color: var(--brand-dk); background: #efeafe; border: none; padding: 6px 11px; border-radius: 999px;
  cursor: pointer; margin: 0 0 12px; font-family: var(--font-body); }
.pro-inline-ic { display: inline-flex; } .pro-inline-ic svg { width: 12px; height: 12px; }
/* teaser: real-ish content blurred behind an unlock overlay */
.pro-tease { position: relative; overflow: hidden; padding: 0; }
.pro-tease-blur { filter: blur(3px); opacity: .5; padding: 16px; pointer-events: none; }
.pro-tease-ov { position: absolute; inset: 0; background: rgba(245,246,251,.66);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16px; }
.pro-tease-ov .pro-lock-h { margin-bottom: 10px; }
.pro-tease-btn { width: auto; padding: 11px 22px; margin: 0; }
.pt-hub-hd { background: linear-gradient(90deg, var(--navy), var(--navy-mid)); border-radius: 10px 10px 0 0;
  color: #fff; padding: 10px 12px; margin: -16px -16px 10px; }
.pt-eyebrow { font-size: 9px; letter-spacing: .08em; opacity: .8; }
.pt-title { font-family: var(--font-display); font-weight: 600; }
.pt-row { display: flex; justify-content: space-between; font-size: 12px; padding: 5px 0; border-bottom: 1px solid #eef0f4; }
.pt-cap { font-size: 12px; color: var(--muted); }
.pt-big { font-size: 22px; color: var(--navy); font-weight: 500; }
.pt-mono { font-family: var(--font-mono); }
.pt-ph { height: 8px; background: #e9ebf3; border-radius: 4px; margin: 7px 0; }
/* trial-ended banner */
.trial-ended { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid #ddd6f3; background: #faf8ff; }
.te-ic { color: var(--brand); flex: none; margin-top: 1px; } .te-ic svg { width: 20px; height: 20px; }
.te-mid { flex: 1; } .te-mid .pro-lock-h { margin-bottom: 3px; } .te-mid .pro-lock-p { margin-bottom: 10px; }
.te-btns { display: flex; gap: 8px; align-items: center; }
.te-up { width: auto; padding: 9px 18px; margin: 0; }
.te-dismiss { background: none; border: none; color: var(--muted); font-size: 12px; cursor: pointer; text-decoration: underline; }
/* upgrade modal (share / 1-race / sync) */
.pro-modal { text-align: center; }
.pro-modal .pro-lock-ic { margin: 0 auto 10px; }
.pro-modal-cancel { display: block; margin: 8px auto 0; background: none; border: none; color: var(--muted);
  font-size: 12px; cursor: pointer; text-decoration: underline; font-family: var(--font-body); }
/* access-ended notice (admin downgrade) */
.access-ended { display: flex; gap: 10px; align-items: flex-start; }
.ae-ic { color: var(--muted); flex: none; margin-top: 1px; } .ae-ic svg { width: 20px; height: 20px; }
.ae-contact { color: var(--brand); font-size: 12px; text-decoration: underline; align-self: center; }

/* ── Admin: subscription metrics + duplicate report ── */
.asub-mrr { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.asub-mrr-v { font-size: 28px; font-weight: 600; color: var(--navy); }
.asub-mrr-l { font-size: 12px; color: var(--muted); }
.asub-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.asub-tile { background: #f7f8fc; border-radius: 10px; padding: 9px 11px; }
.asub-tile-v { font-size: 19px; font-weight: 600; color: var(--navy); }
.asub-tile-l { font-size: 11.5px; color: var(--muted); }
.asub-row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text);
  margin-top: 11px; padding-top: 11px; border-top: 1px solid #eef0f4; }
.asub-row:not(:first-of-type) { margin-top: 8px; padding-top: 8px; }
.asub-row b { color: #0f6e56; }
.adup { border: 1px solid #eef0f4; border-radius: 11px; padding: 11px; margin-bottom: 9px; }
.adup-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 7px; }
.adup-score { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.adup-score.score-hi { background: #fef2f2; color: #b91c1c; }
.adup-score.score-mid { background: #fef6e7; color: #92590b; }
.adup-who { font-size: 12.5px; color: var(--text); }
.achips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.achip { font-size: 10.5px; font-weight: 600; background: #efeafe; color: #5b21b6; padding: 2px 8px; border-radius: 999px; }
.achip.achip-hard { background: #fce8e8; color: #a3282a; }
.adup-acts { display: flex; flex-wrap: wrap; gap: 7px; }
.dbtn-dn { background: #fff1f1; color: #dc2626; border: 1px solid #fecaca; border-radius: 9px;
  padding: 8px 12px; font-weight: 600; font-size: 12.5px; cursor: pointer; font-family: var(--font-body); }
.dbtn-dn:disabled { opacity: .7; cursor: default; }
.admin-dup-note, .admin-empty-note { font-size: 11px; color: var(--muted); margin: 6px 0 0; line-height: 1.4; }

/* ── US-5.2: Athlete+ suggestion cards + teaser + Coach Coming-Soon shell (Gate C) ──
   4px purple left-accent = the established card-level state device (day cards :797,
   .hotrun-card :942) in the "engine adjusts" color. Fact strips inside reuse .adapt-fact. */
.sug-card { border-left: 4px solid var(--brand); border-radius: 0 12px 12px 0; }
.sug-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.sug-mark { height: 16px; width: auto; }
.sug-title { font-family: var(--font-display); font-weight: 500; font-size: 14.5px; color: var(--text); }
.sug-badge { margin-left: auto; font-size: 10px; letter-spacing: .06em; background: #f3e8ff; color: #6d28d9; padding: 2.5px 8px; border-radius: 99px; font-weight: 600; }
.sug-card .adapt-fact { margin: 0 0 6px; }
.sug-preview { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); margin: 8px 0 10px; }
.sug-btns { display: flex; gap: 8px; }
.sug-apply { flex: 1; background: var(--brand); color: #fff; border: none; border-radius: 8px; padding: 9px 0; font-size: 13px; font-weight: 500; cursor: pointer; }
.sug-apply:hover { background: var(--brand-dk); }
.sug-dismiss { flex: 0 0 88px; background: #fff; color: var(--muted); border: 1.5px solid var(--border); border-radius: 8px; padding: 9px 0; font-size: 13px; cursor: pointer; }
/* Teaser: dashed = a preview of something you don't have yet (distinct from the solid state
   accent; monetization-gated so it never renders while dormant). */
.sug-teaser { border: 1.5px dashed #c4b5fd; border-left: 1.5px dashed #c4b5fd; border-radius: 12px; }
.sug-tease-p { font-size: 12.5px; color: var(--muted); margin: 0 0 9px; line-height: 1.45; }
.sug-blur { filter: blur(4px); user-select: none; pointer-events: none; margin-bottom: 11px; }
.sug-tease-btn { width: 100%; flex: none; }
@media (min-width: 900px) {
  .sug-facts-wide { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
}
.coach-shell .cs-row { display: flex; align-items: flex-start; gap: 10px; }
.cs-ic { width: 38px; height: 38px; border-radius: 50%; background: #f3e8ff; color: var(--brand); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 38px; }
.cs-txt { display: block; }
.cs-h { display: block; font-family: var(--font-display); font-weight: 500; font-size: 14.5px; color: var(--text); }
.cs-badge { font-size: 10px; letter-spacing: .05em; background: #fef3c7; color: #92400e; padding: 2px 7px; border-radius: 99px; vertical-align: 2px; font-weight: 600; }
.cs-p { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.cs-btn { width: 100%; margin-top: 11px; background: #fff; color: #6d28d9; border: 1px solid #c4b5fd; border-radius: 8px; padding: 8px 0; font-size: 13px; font-weight: 500; cursor: pointer; }
.cs-joined { width: 100%; margin-top: 11px; text-align: center; color: #166534; background: #f0fdf4; border-radius: 8px; padding: 8px 0; font-size: 13px; }

/* ── US-9.5b Methodology pack picker (mpack-* — .pack-* is the M5 packing list) (Settings; dormant behind PACK_PICKER_AVAILABLE) ──
   Mobile: name+badge on the first line, description/fine-print below (grid areas).
   ≥900px: one row — name column | description | badge (the approved desktop mock). */
.mpack-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id badge" "desc desc" "fine fine"; gap: 5px 10px; border: 1px solid #e3e5f0; border-radius: 10px; padding: 11px 12px; margin-bottom: 8px; background: #fff; cursor: pointer; }
.mpack-row-sel { border: 1.5px solid var(--brand); background: #f6f1ff; cursor: default; }
.mpack-id { grid-area: id; display: flex; align-items: center; gap: 9px; min-width: 0; }
.mpack-dot { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid #9aa1b8; background: #fff; flex: none; box-sizing: border-box; }
.mpack-row-sel .mpack-dot { border: 4.5px solid var(--brand); }
.mpack-name { font-size: 13.5px; font-weight: 600; color: var(--text); }
.mpack-badge { grid-area: badge; align-self: center; font-size: 9.5px; font-weight: 600; letter-spacing: .07em; background: #eef0f6; color: #5a6079; border-radius: 99px; padding: 2px 8px; }
.mpack-badge-cur { background: var(--brand); color: #fff; }
.mpack-desc { grid-area: desc; font-size: 12px; color: var(--muted); line-height: 1.45; margin-left: 24px; }
.mpack-fine { grid-area: fine; font-size: 10.5px; color: #9aa1b8; margin-left: 24px; }
.mpack-note { font-size: 10.5px; color: #9aa1b8; margin-top: 10px; line-height: 1.5; }
@media (min-width: 900px) {
  .mpack-row { grid-template-columns: 200px minmax(0, 1fr) auto; grid-template-areas: "id desc badge" "fine fine fine"; gap: 4px 14px; padding: 12px 14px; }
  .mpack-desc { margin-left: 0; }
  .mpack-fine { margin-left: 0; }
}

/* ── US-6.2 Gate D v2: 4-tier subscription picker (.sub4-*; .sub-* is the shipped card chrome) ── */
.sub4 { margin-top: 12px; }
.sub4-toggle { display: flex; background: #eef0f6; border-radius: 8px; padding: 3px; margin-bottom: 10px; }
.sub4-seg { flex: 1; text-align: center; font-size: 12px; padding: 5px 0; color: var(--muted); background: none; border: none; border-radius: 6px; cursor: pointer; font-family: inherit; }
.sub4-seg-sel { background: #fff; color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(19,26,51,.08); }
.sub4-promo-tag { font-size: 9px; color: var(--brand); font-weight: 700; margin-left: 4px; letter-spacing: .04em; }
.sub4-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sub4-tile { text-align: left; border: 1px solid #e3e5f0; border-radius: 10px; padding: 10px; background: #fff; cursor: pointer; font-family: inherit; color: var(--text); }
.sub4-tile-sel { border: 1.5px solid var(--brand); background: #f6f1ff; }
.sub4-tile-dim { cursor: default; }
.sub4-tile-soon { border: 1px dashed #c2c7d8; background: #fafbfe; cursor: default; }
.sub4-name { font-size: 12.5px; font-weight: 600; }
.sub4-name-soon { color: var(--muted); }
.sub4-cur { font-size: 9px; color: var(--muted); background: #eef0f6; border-radius: 99px; padding: 1.5px 6px; margin-left: 5px; vertical-align: 1px; font-weight: 700; letter-spacing: .04em; }
.sub4-soon-tag { font-size: 8.5px; color: #92400e; background: #fef3c7; border-radius: 99px; padding: 1.5px 6px; margin-left: 5px; vertical-align: 1px; font-weight: 700; letter-spacing: .04em; }
.sub4-price { margin: 4px 0 2px; font-size: 15px; }
.sub4-price .sub-was { margin-right: 4px; }
.sub4-price .sub-per { font-size: 10px; color: var(--muted); }
.sub4-blurb { font-size: 10.5px; color: var(--muted); line-height: 1.4; }
.sub4-waitlist { display: block; background: none; border: none; padding: 0; margin-top: 4px; font-size: 10px; color: var(--brand); cursor: pointer; font-family: inherit; }
.sub4-waitlist:disabled { color: #166534; cursor: default; }
.sub4-ai { display: flex; align-items: center; gap: 9px; border: 1px solid #e3e5f0; border-radius: 10px; padding: 9px 11px; margin-top: 8px; background: #fff; cursor: pointer; }
.sub4-ai-on { border: 1.5px solid var(--brand); background: #fbf9ff; }
.sub4-ai-inc { background: #f4faf7; cursor: default; }
.sub4-check { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #c2c7d8; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; box-sizing: border-box; }
.sub4-check-on { background: var(--brand); border-color: var(--brand); }
.sub4-check-inc { background: #0f6e56; border-color: #0f6e56; }
.sub4-ai-mid { flex: 1; min-width: 0; }
.sub4-ai-name { font-size: 12px; font-weight: 600; }
.sub4-ai-cap { font-size: 10px; color: var(--muted); }
.sub4-ai-inc .sub4-ai-cap { color: #0f6e56; }
.sub4-ai-price { text-align: right; font-size: 13px; }
.sub4-ai-price .sub-per { font-size: 9.5px; color: var(--muted); }
.sub4-ai-alt { font-size: 9px; color: #9aa1b8; }
.sub4-ai-zero { color: #0f6e56; }
.sub4-cta { margin-top: 10px; }
.sub4-fine { font-size: 10px; color: #9aa1b8; margin: 8px 0 0; line-height: 1.5; }
.sub-badge-partner { background: #e4f3ee; color: #0f6e56; }
@media (min-width: 900px) {
  .sub4-tiles { grid-template-columns: repeat(4, 1fr); }
  .sub4-toggle { width: 220px; margin-left: auto; }
}
.sub4-foot .sub4-ai { margin-top: 8px; }
@media (min-width: 900px) {
  .sub4-foot { display: flex; gap: 12px; align-items: center; margin-top: 8px; }
  .sub4-foot .sub4-ai { flex: 1; margin-top: 0; }
  .sub4-foot .sub4-cta { margin-top: 0; width: auto; padding-left: 22px; padding-right: 22px; white-space: nowrap; }
}

/* ── M8-C "Ask your plan" surfaces (TODO 7.4, Gate M8). aiEnabled-gated at the callers ── */
/* The effort-meter mark, small: three ascending bars (the app's logo motif). */
.ask-mark { display:inline-flex; align-items:flex-end; gap:2px; height:14px; flex:none; }
.ask-mark i { width:3px; border-radius:1.5px; }
.ask-mark i:nth-child(1){ height:6px; background:#38bdf8; }
.ask-mark i:nth-child(2){ height:9px; background:#a855f7; }
.ask-mark i:nth-child(3){ height:12px; background:var(--accent, #f97316); }

.ask-bar { display:flex; align-items:center; gap:9px; width:100%; text-align:left; cursor:pointer; padding:11px 13px; border:1px solid var(--border); background:var(--card); }
.ask-bar-ph { flex:1; font-size:13px; color:var(--muted); }
.ask-pill { font-size:9.5px; font-weight:700; letter-spacing:.06em; background:var(--brand-50, #f3ecff); color:var(--brand-dk, #6d28d9); border-radius:99px; padding:2px 7px; }

.ask-locked-head { display:flex; align-items:center; gap:9px; }
.ask-locked-t { font-size:13px; font-weight:600; color:var(--text); }
.ask-locked-blur { filter:blur(3px); font-size:11px; color:var(--muted); margin:6px 0 0; user-select:none; }
.ask-locked-cta { width:100%; margin-top:9px; }
.ask-locked-fine { font-size:10.5px; color:var(--faint, #9aa1b8); margin-top:7px; line-height:1.5; }

/* Overlay + panel: mobile slide-up sheet; desktop ≥900 right-dock. */
.ask-overlay { position:fixed; inset:0; z-index:1300; background:rgba(11,18,48,.42); display:flex; align-items:flex-end; justify-content:center; }
.ask-panel { width:100%; max-width:520px; max-height:86vh; background:var(--card); border-radius:16px 16px 0 0; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 -4px 24px rgba(11,18,48,.28); }
.ask-head { background:linear-gradient(115deg, var(--navy) 45%, var(--navy-mid)); padding:12px 14px; display:flex; align-items:center; gap:10px; }
.ask-head-t { font-size:14px; font-weight:500; color:#fff; flex:1; }
.ask-head-left { font-size:10.5px; color:#c7cbe8; font-family:var(--font-mono, ui-monospace,Menlo,monospace); }
.ask-head-x { background:none; border:none; color:#c7cbe8; font-size:15px; cursor:pointer; padding:0 2px; }
.ask-thread { flex:1; overflow-y:auto; padding:12px 12px 4px; display:flex; flex-direction:column; gap:8px; }
.ask-bubble { font-size:12.5px; line-height:1.55; padding:8px 11px; max-width:82%; }
.ask-bubble-u { align-self:flex-end; background:var(--hold-soft, #eef0f6); color:var(--text); border-radius:12px 12px 3px 12px; }
/* Own literal, NOT --brand-50 (#47, 2026-07-24): this bubble always wanted a paler purple (#fbf9ff)
   than the chip/pill fill (#f3ecff), and both rode the same undefined token via disagreeing
   fallbacks. Defining the token would have silently restyled this one surface. */
.ask-bubble-a { align-self:flex-start; background:#fbf9ff; border:1px solid #e9defc; color:var(--text); border-radius:12px 12px 12px 3px; }
.ask-typing { color:var(--muted); font-style:italic; }
.ask-chips { display:flex; flex-wrap:wrap; gap:6px; }
.ask-chips-empty { margin-top:4px; }
.ask-chip { font-size:11px; color:var(--brand-dk, #6d28d9); background:var(--brand-50, #f3ecff); border:none; border-radius:99px; padding:5px 11px; cursor:pointer; text-align:left; }
.ask-foot { display:flex; gap:12px; align-items:center; padding:2px 2px 4px; font-size:11px; color:var(--faint, #9aa1b8); }
.ask-foot-btn { background:none; border:none; color:var(--muted); font-size:11px; cursor:pointer; padding:0; }
.ask-foot-fb { margin-left:auto; display:flex; gap:6px; }
.ask-foot-fb button { background:none; border:none; cursor:pointer; opacity:.5; font-size:13px; }
.ask-foot-fb .ask-fb-on { opacity:1; }
.ask-inrow { border-top:1px solid var(--line, #eef0f6); padding:9px 12px; display:flex; gap:8px; align-items:center; }
.ask-input { flex:1; border:1px solid var(--border); border-radius:99px; padding:8px 13px; font-size:12.5px; font-family:inherit; }
.ask-send { width:32px; height:32px; flex:none; border-radius:50%; background:var(--brand); color:#fff; border:none; font-size:14px; cursor:pointer; }

/* Proposal card in-thread (purple left-accent — "the engine changed your plan" colour). */
.ask-prop { align-self:stretch; background:var(--card); border:1px solid var(--border); border-left:4px solid var(--brand); border-radius:0 10px 10px 0; padding:11px 13px; }
.ask-prop-eyebrow { font-size:10px; font-weight:700; letter-spacing:.07em; color:var(--brand-dk, #6d28d9); }
.ask-prop-title { font-size:13px; font-weight:500; color:var(--text); margin-top:4px; }
.ask-prop-diff { font-family:var(--font-mono, ui-monospace,Menlo,monospace); font-size:11px; color:var(--muted); background:var(--surface, #f8f9fc); border-radius:6px; padding:6px 9px; margin-top:6px; }
.ask-prop-row + .ask-prop-row { margin-top:2px; }
.ask-prop-trade { font-size:10.5px; color:#92400e; background:#fef3c7; border-radius:6px; padding:5px 9px; margin-top:6px; }
.ask-prop-btns { display:flex; gap:8px; margin-top:9px; }
.ask-prop-yes { flex:1; }
.ask-prop-no { flex:1; border:1px solid var(--border); background:var(--card); color:var(--muted); border-radius:8px; font-size:12px; cursor:pointer; }

.ask-capped { align-self:stretch; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:11px 13px; }
.ask-capped-t { font-size:12.5px; font-weight:500; color:var(--text); }
.ask-capped-p { font-size:11px; color:var(--muted); margin-top:3px; }
.ask-capped-cta { width:100%; margin-top:8px; }
.ask-capped-fine { font-size:9.5px; color:var(--faint, #9aa1b8); margin-top:5px; }

/* "Plan changes" rollback card (Settings). AI purple / Coach teal badges. */
.pc-row { border:1px solid var(--border); border-radius:10px; padding:9px 11px; margin-bottom:8px; }
.pc-top { display:flex; align-items:center; gap:7px; }
.pc-badge { font-size:9px; font-weight:700; letter-spacing:.06em; border-radius:99px; padding:2px 7px; }
.pc-badge-ai { background:var(--brand-50, #f3ecff); color:var(--brand-dk, #6d28d9); }
.pc-badge-coach { background:var(--vert-50, #e4f3ee); color:var(--vert-dk, #0f6e56); }
.pc-title { font-size:12px; font-weight:500; color:var(--text); flex:1; }
.pc-when { font-size:10px; color:var(--faint, #9aa1b8); }
.pc-verdicts { font-family:var(--font-mono, ui-monospace,Menlo,monospace); font-size:10.5px; color:var(--muted); background:var(--surface, #f8f9fc); border-radius:6px; padding:5px 8px; margin-top:6px; }
.pc-verdict + .pc-verdict { margin-top:2px; }
.pc-note { font-size:11px; color:var(--muted); margin-top:5px; }
.pc-aged { color:var(--faint, #9aa1b8); }
.pc-revert { display:block; width:100%; text-align:center; border:1px solid #fca5a5; color:#b91c1c; background:var(--card); border-radius:8px; padding:6px 0; font-size:11.5px; margin-top:7px; cursor:pointer; }
.ask-day-row .ask-mark { margin-right:2px; }

@media (min-width:900px) {
  .ask-overlay { align-items:stretch; justify-content:flex-end; background:transparent; pointer-events:none; }
  .ask-panel { width:420px; max-width:420px; max-height:100vh; height:100vh; border-radius:0; box-shadow:-4px 0 24px rgba(11,18,48,.22); pointer-events:auto; }
}

/* ── M8-D: Admin consolidated "Runtime config" card (operator tooling; always shown) ── */
.rc-note { font-size: 11.5px; color: var(--muted); margin: -2px 0 10px; line-height: 1.5; }
.rc-sec { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-dk, #6d28d9); margin: 12px 0 7px; border-top: 1px solid var(--line, #eef0f6); padding-top: 10px; }
.rc-sec:first-of-type { border-top: none; padding-top: 0; }
.rc-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--faint, #9aa1b8); }
.rc-check { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; font-size: 12.5px; color: var(--text); cursor: pointer; }
.rc-check input { width: 16px; height: 16px; flex: none; accent-color: var(--brand); }
.rc-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.rc-row span { flex: 0 0 160px; font-size: 12px; color: var(--muted); }
.rc-row input, .rc-row select { flex: 1; min-width: 0; font-size: 12.5px; font-family: var(--font-mono, ui-monospace,Menlo,monospace); padding: 6px 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--card); }
/* THE standard refresh/re-sync affordance (owner ruling 2026-07-18, #27 Phase 2): a thin link in the
   section header, never a button — maintenance actions sit beside their data and must not compete
   with the card's one primary action. Reuse .rc-sechead/.rc-link/.rc-synced for future re-syncs. */
.rc-sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 12px 0 7px; border-top: 1px solid var(--line, #eef0f6); padding-top: 10px; }
.rc-sechead:first-of-type { border-top: none; padding-top: 0; }
.rc-sechead .rc-sec { border-top: none; padding-top: 0; margin: 0; }
.rc-link { font-size: 11.5px; color: var(--brand); cursor: pointer; white-space: nowrap; flex: none; }
/* Narrow: drop the explanatory hint so the heading and its action share ONE line (the approved
   mobile mock). Scoped to .rc-sechead — plain .rc-sec sections keep their hints at every width. */
@media (max-width: 599px) { .rc-sechead .rc-hint { display: none; } }
.rc-link:hover { color: var(--brand-dk, #6d28d9); text-decoration: underline; }
.rc-link[data-busy] { color: var(--faint, #9aa1b8); cursor: default; text-decoration: none; }
.rc-synced { font-size: 11.5px; color: var(--faint, #9aa1b8); margin: -3px 0 9px; }
.rc-synced-bad { color: var(--accent); }
.rc-foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.rc-save { width: auto; padding: 8px 18px; }
.rc-status { font-size: 12px; color: var(--muted); }

/* ── FinishArc brand — identity tokens & wordmark helpers (INTEGRATION §5) ─────
   Folded from the handoff's finisharc-brand.css. The three @font-face are OMITTED
   on purpose — the same self-hosted fonts already load at the top of this file.
   Placement at EOF is load-bearing: .fa-wordmark* must out-cascade the earlier
   .auth-title/.sidebar-brand-name rules at equal specificity (weight 700 and
   -0.02em tracking are the locked wordmark spec and must win). */
:root {
  --fa-navy:    #0b1230;   /* ink / chrome / dark tile / secondary wordmark */
  --fa-brand:   #7c3aed;   /* violet accent — the "Finish" in the two-color wordmark */
  --fa-reverse: #ffffff;   /* wordmark reverse on dark surfaces */
  /* Mark effort ramp (solid fills only — never a gradient) */
  --fa-mark-1: #38bdf8; --fa-mark-2: #a855f7; --fa-mark-3: #f59e0b;
  --fa-mark-4: #f97316; --fa-mark-5: #ef4444;
  --fa-wordmark-font: 'Space Grotesk', sans-serif;
  --fa-wordmark-weight: 700;
  --fa-wordmark-tracking: -0.02em;
}
.fa-wordmark { font-family: var(--fa-wordmark-font); font-weight: var(--fa-wordmark-weight); letter-spacing: var(--fa-wordmark-tracking); color: var(--fa-navy); }
/* PRIMARY — two-color: accent head + ink tail. Markup: <el class="fa-wordmark fa-wordmark--primary">Finish<span>Arc</span></el> */
.fa-wordmark--primary { color: var(--fa-brand); }
.fa-wordmark--primary > span { color: var(--fa-navy); }
/* REVERSE — solid white on dark surfaces (sidebar header etc.). Wins over accent. */
.fa-wordmark--reverse, .fa-wordmark--reverse > span { color: var(--fa-reverse); }
/* Lockup — seat icons in a fixed 34px box so wordmark left-edges align. */
.fa-lockup { display: flex; align-items: center; gap: 10px; }
.fa-lockup__icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; }
.fa-lockup__icon--favicon { background: var(--fa-navy); border-radius: 9px; }
.fa-lockup__icon > svg { width: 20px; height: 20px; }