/* ── Atlas Sections - Dark Theme - PepPedia Glassmorphism ─────────────────── */
/* Design: Dark glassmorphism, subtle hover lift, vignette background, premium feel */

/* ═══════════════════════════════════════════════════════════════════════════
 * Atlas Design System v1 - Token layer (Brief: Atlas DS v1 rollout, Pass 1).
 * Colors only per §1 of ATLAS-DESIGN-SYSTEM.md. Additive - existing literals
 * stay for now; Pass 2 refactors components to reference these tokens.
 * ═══════════════════════════════════════════════════════════════════════════ */
:root {
  color-scheme: dark;
  /* - Surfaces - */
  /* 9 Jul 2026 - DS v2 (near-black re-skin). Base shifted from brand teal
     #2E3E3E to a teal-cast near-black #101514; elev surfaces lift in the
     same family (#1D2524, #263332). Glass alphas bumped slightly - on a
     near-black base the white-alpha surfaces are what make cards read as
     glass. Brand teal survives as --atlas-coach + accents only. */
  --atlas-bg:               #101514;
  --atlas-bg-elev-1:        #1D2524;
  --atlas-bg-elev-2:        #263332;
  --atlas-surface-card:     rgba(30,40,39,0.52);
  --atlas-surface-nested:   rgba(255,255,255,0.045);
  --atlas-surface-hover:    rgba(255,255,255,0.075);
  --atlas-border:           rgba(255,255,255,0.085);
  --atlas-border-strong:    rgba(255,255,255,0.15);
  --atlas-divider:          rgba(255,255,255,0.06);

  /* - Text - */
  --atlas-text-primary:     #EEF3F1;
  --atlas-text-body:        #BCC6C4;
  --atlas-text-muted:       #8F9A98;
  --atlas-text-faint:       #8F9A98;

  /* - Brand + accent - */
  --atlas-gold:             #D4B26A;
  --atlas-gold-soft:        rgba(212,178,106,0.15);
  --atlas-coach:            #2E3E3E; /* brand teal - kept for coach accents (excluded from DS v2 base sweep) */

  /* - DS v2 accent + motion tokens (9 Jul 2026) - */
  --atlas-teal:             #4FA3A5;
  --atlas-teal-bright:      #7FD1C8;
  --atlas-teal-tint:        rgba(79,163,165,0.12);
  --atlas-gold-grad:        linear-gradient(135deg, #E9CB84, #C9A557);
  --atlas-ease:             cubic-bezier(0.22, 1, 0.36, 1);
  --atlas-dur-fast:         180ms;
  --atlas-dur:              320ms;

  /* - Cool-blue palette (sleep-stage-derived) - */
  --atlas-blue-pale:        #8EC4D4;
  --atlas-blue-mid:         #5B9BB5;
  --atlas-blue-deep:        #2E6B8A;
  --atlas-blue-tint:        rgba(91,155,181,0.12);

  /* - Semantic (trend, readiness) - */
  --atlas-up:               #6CD693;
  --atlas-up-tint:          rgba(108,214,147,0.15);
  --atlas-stable:           rgba(255,255,255,0.65);
  --atlas-stable-tint:      rgba(255,255,255,0.08);
  --atlas-watch:            #E8A857;
  --atlas-watch-tint:       rgba(232,168,87,0.15);
  --atlas-concern:          #E88A8A;
  --atlas-concern-tint:     rgba(232,138,138,0.15);

  /* - Source attribution (replaces "WATCH" amber pill) - */
  --atlas-src-whoop:        #5B9BB5;
  --atlas-src-oura:         #8EC4D4;
  --atlas-src-cronometer:   #6CD693;
  --atlas-src-atlas:        #D4B26A;

  /* - Typography scale (§2) - per-axis for composability.
   * Spec §2 defines exactly 8 roles. Any text must fit one.
   * Usage: font-size: var(--atlas-font-title-size); line-height: var(--atlas-font-title-lh); ... */
  --atlas-font-display-xl-size:     32px;
  --atlas-font-display-xl-lh:       1.1;
  --atlas-font-display-xl-weight:   700;
  --atlas-font-display-xl-tracking: -0.02em;

  --atlas-font-display-lg-size:     24px;
  --atlas-font-display-lg-lh:       1.15;
  --atlas-font-display-lg-weight:   700;
  --atlas-font-display-lg-tracking: -0.015em;

  --atlas-font-display-md-size:     18px;
  --atlas-font-display-md-lh:       1.2;
  --atlas-font-display-md-weight:   700;
  --atlas-font-display-md-tracking: -0.01em;

  --atlas-font-title-size:          15px;
  --atlas-font-title-lh:            1.3;
  --atlas-font-title-weight:        600;
  --atlas-font-title-tracking:      -0.005em;

  --atlas-font-body-size:           14px;
  --atlas-font-body-lh:             1.45;
  --atlas-font-body-weight:         500;
  --atlas-font-body-tracking:       0;

  --atlas-font-body-sm-size:        13px;
  --atlas-font-body-sm-lh:          1.4;
  --atlas-font-body-sm-weight:      500;
  --atlas-font-body-sm-tracking:    0;

  --atlas-font-label-size:          11px;
  --atlas-font-label-lh:            1.2;
  --atlas-font-label-weight:        600;
  --atlas-font-label-tracking:      0.06em;

  --atlas-font-caption-size:        11px;
  --atlas-font-caption-lh:          1.3;
  --atlas-font-caption-weight:      500;
  --atlas-font-caption-tracking:    0;

  /* - Spacing scale (§7) - numeric-gap scale, not all integers. Mobile margin uses 5, desktop 8. */
  --atlas-space-1:   4px;
  --atlas-space-2:   8px;
  --atlas-space-3:   12px;
  --atlas-space-4:   16px;
  --atlas-space-5:   20px;
  --atlas-space-6:   24px;
  --atlas-space-8:   32px;
  --atlas-space-10:  40px;
  --atlas-space-12:  48px;

  /* - Breakpoints (§10) - reference only; @media rules can't consume custom properties,
   * but keeping these here makes the canonical values discoverable + JS-queryable. */
  --atlas-bp-mobile:  480px;
  --atlas-bp-tablet:  768px;
  --atlas-bp-desktop: 1024px;
}

/* Visually-hidden but screen-reader-accessible. Used for the per-view <h1>
   so each section has a page-level heading in the a11y outline without
   disrupting the gauge-first visual design. (Issue 8, 24 May 2026.) */
.atlas-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Global overrides (targets main dashboard elements) ────── */
body {
  background: #101514 !important;
  color: #EEF3F1 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
/* 9 Jul 2026 - DS v2 atmospheric stack. Three layers on body::before so
   every page inherits the same lighting without per-page overrides:
   1. top-centre teal spotlight (cool lift, replaces the old teal pool)
   2. faint gold aura just below it (brand warmth behind the hero zone)
   3. bottom falloff (horizon; anchors the eye toward content)         */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(900px 480px at 12% -60px, rgba(79,163,165,0.13) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(780px 520px at 92% 105%, rgba(212,178,106,0.08) 0%, rgba(0,0,0,0) 55%);
  z-index: -1;
  pointer-events: none;
}

/* Heading typography - system stack */
h1, h2, h3 {
  font-family: inherit;
}

#app-header {
  background: #101514 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
  color: #EEF3F1 !important;
}

/* Range/date controls */
#app-controls,
.range-controls {
  position: sticky;
  z-index: 9998;
  background: #101514 !important;
  padding-bottom: 8px;
}

/* Hide WHOOP range/date bar when viewing non-WHOOP sections */
body.atlas-non-whoop #app-controls,
body.atlas-non-whoop .range-controls {
  display: none !important;
}

/* ── WHOOP Content - transparent.
 * Horizontal padding steps per Atlas DS v1 §10: 16 (mobile) → 20 (tablet) → 32 (desktop). */
#content {
  background: transparent !important;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 768px) {
  #content { padding-left: 20px; padding-right: 20px; }
}
@media (min-width: 1024px) {
  #content { padding-left: 32px; padding-right: 32px; }
}

/* Deep-link flash: a meal opened from the overview schedule pulses a gold ring
   so the client sees which meal they landed on. Ring only (box-shadow), so no
   layout shift. */
.amb-slot-flash { animation: ambSlotFlash 1.6s ease; }
@keyframes ambSlotFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 178, 106, 0); }
  18%      { box-shadow: 0 0 0 2px var(--atlas-gold, #D4B26A); }
}

/* ── WHOOP Performance Data - light theme overrides (Today tab) ──
 * C1 (25 Apr) - radius 16→14, tokenized bg/border, hover glow killed so
 * Recovery / Strain / RHR / Sleep tiles read pixel-equivalent to other tabs.
 * !important kept since WHOOP injects its own darker .card spec. */
.card {
  background: var(--atlas-surface-card) !important;
  border: 1px solid var(--atlas-border) !important;
  color: var(--atlas-text-primary, #EEF3F1) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  transition: border-color 150ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.card:hover {
  border-color: var(--atlas-border-strong) !important;
}
.card-head {
  color: #8F9A98 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.card-stack,
.card-training {
  background: var(--atlas-surface-card) !important;
  border: 1px solid var(--atlas-border) !important;
  color: var(--atlas-text-primary, #EEF3F1) !important;
}
.cards {
  background: transparent !important;
}

/* Large numbers / percentages */
.big-num {
  color: #EEF3F1 !important;
}
.big-pct {
  color: #EEF3F1 !important;
}

/* Stat rows (4-col) */
.stat-row-4 {
  background: transparent !important;
}
.s4 {
  color: #EEF3F1 !important;
}
.s4-lbl {
  color: #8F9A98 !important;
}
.s4-val {
  color: #EEF3F1 !important;
}

/* Stat grid (2×2) */
.stat-grid-2x2 {
  background: transparent !important;
}
.sg-item {
  color: #EEF3F1 !important;
}
.sg-lbl {
  color: #8F9A98 !important;
}
.sg-val {
  color: #EEF3F1 !important;
}

/* Gauge / training ring - SVG text */
.gauge-ring text,
.tr-ring text {
  fill: #EEF3F1 !important;
}
.tr-num {
  color: #EEF3F1 !important;
}

/* Top row layout */
.top-row-2col {
  color: #EEF3F1 !important;
}

/* Section dividers */
.section-div {
  border-color: rgba(255,255,255,0.08) !important;
  color: #8F9A98 !important;
}

/* Trend indicators */
.ti {
  color: #8F9A98 !important;
}
.ti-up { color: #6CD693 !important; }
.ti-down { color: #c4534a !important; }
.ti-flat { color: #8F9A98 !important; }

/* Badges & pills */
.badge {
  color: #FFFFFF !important;
}
.pill {
  background: rgba(255,255,255,0.06) !important;
  color: #c0c8d4 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

/* Recovery context / insights */
.insight {
  background: var(--atlas-surface-card) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #c0c8d4 !important;
}
.rec-context {
  color: #8F9A98 !important;
}
.rec-title-left {
  color: #EEF3F1 !important;
}
.rec-desc-left {
  color: #8F9A98 !important;
}

/* Balance bar */
.balance-bar {
  background: rgba(255,255,255,0.08) !important;
}
.balance-fill {
  background: rgba(255,255,255,0.2) !important;
}

/* Bio row */
.bio-row {
  color: #EEF3F1 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

/* Header inner */
.header-inner {
  background: #101514 !important;
  color: #EEF3F1 !important;
}

/* Logout button */
.logout-btn {
  color: #8F9A98 !important;
  border-color: rgba(255,255,255,0.08) !important;
  background: transparent !important;
}
.logout-btn:hover {
  color: #EEF3F1 !important;
  border-color: #EEF3F1 !important;
}

/* Date controls */
.dash-date {
  color: #EEF3F1 !important;
  color-scheme: dark;
}
.date-control {
  color: #c0c8d4 !important;
  background: transparent !important;
}
.date-label {
  color: #8F9A98 !important;
}

/* Range pills (date range selector) */
.range-pills {
  background: transparent !important;
}
.range-pills button,
.range-pills .pill {
  background: rgba(255,255,255,0.06) !important;
  color: #8F9A98 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
.range-pills button.active,
.range-pills .pill.active,
.range-pills button[aria-pressed="true"] {
  background: #263332 !important;
  color: #FFFFFF !important;
  border-color: #EEF3F1 !important;
}

/* Total sleep duration above lanes */
.sleep-total-dur {
  font-size: 1.6rem;
  font-weight: 700;
  color: #EEF3F1;
  text-align: center;
  margin: 0 0 8px 0;
  letter-spacing: -0.02em;
}

/* Sleep chart SVG text */
.sleep-lanes-svg text {
  fill: #8F9A98 !important;
}

/* C4 (25 Apr) → C7-WHOOP-POLISH-2 (26 Apr) - chart label sizing.
 * SVG text font-size renders in user-space units. With viewBox 400 at ~700px
 * CSS wide (~1.75× scale), each user unit ≈ 1.75 CSS pixels. Target Whoop-
 * tight density: ~10-12 CSS px on screen → declare 6-7 user units.
 * Was 9 (rendered ~16); now 7 (renders ~12). Consistent across every chart
 * axis (X + Y), sleep-lane row labels, value labels, AVG annotations. */
.chart-label,
.chart-svg .chart-label,
.sleep-lanes-svg .chart-label {
  font-size: 7px;
  line-height: var(--atlas-font-caption-lh);
  font-weight: var(--atlas-font-caption-weight);
  fill: var(--atlas-text-faint, #8F9A98);
}
/* Lane value labels on the right (msToH durations) get the muted text colour
 * to read as data, not as labels. */
.sleep-lanes-svg text.chart-label[text-anchor="end"] {
  fill: var(--atlas-text-muted, #c0c8d4) !important;
}

/* Colour-coded status badges - keep functional colours */
.bg-green {
  background: rgba(74,157,107,0.12) !important;
  color: #6CD693 !important;
}
.bg-yellow {
  background: rgba(196,154,60,0.12) !important;
  color: #a68532 !important;
}
.bg-text-yellow {
  color: #a68532 !important;
}

/* Global hide utility. app.js / atlas-sections.js toggle a `.hidden` CLASS to
   show/hide the login screen, app layout, sidebar and overlays - but the class
   was never actually defined as display:none (only the [hidden] ATTRIBUTE was).
   It worked by luck while Today's content covered the login screen; the Home
   merge (24 May 2026) exposed the gap - a short Today let the login logo +
   ACCESS DASHBOARD button bleed through. Define it authoritatively. */
.hidden { display: none !important; }

/* Coach view-as banner (24 May 2026) - fixed bottom bar, unmistakable coach
 * accent, so a coach acting as a client always knows they're in view-as mode. */
.coach-view-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 16px;
  background: #101514;
  color: #F0EDE6;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 -2px 14px rgba(0,0,0,0.45);
}
.coach-view-bar strong { color: #fff; }
.coach-view-bar button {
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.32);
  color: #fff;
  padding: 4px 14px;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}
.coach-view-bar button:hover { background: rgba(255,255,255,0.26); }
/* Keep the last of the page clear of the fixed bar. */
body.coach-view #app-main { padding-bottom: 56px; }

/* Event-anchored protocols (25 May 2026) - the dropdown a client opens by tapping
 * an event card to see the protocol(s) their coach built for that trip/event. */
.evm-protocols { margin-top: 10px; border-top: 1px solid var(--atlas-border, rgba(255,255,255,0.08)); padding-top: 8px; }
.evm-protocols-summary {
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--atlas-accent, #5b9bb5);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.evm-protocols-summary::-webkit-details-marker { display: none; }
.evm-protocols-summary::before { content: '▸'; font-size: 9px; transition: transform 0.15s ease; }
.evm-protocols[open] .evm-protocols-summary::before { transform: rotate(90deg); }
.evm-protocols-body { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.evm-protocol {
  background: var(--atlas-surface-sunken, rgba(0,0,0,0.2));
  border: 1px solid var(--atlas-border, rgba(255,255,255,0.08));
  border-radius: 12px;
  padding: 8px 12px;
}
.evm-protocol-name { font-size: 13px; font-weight: 600; color: var(--atlas-text-primary, #F1EEE8); }
.evm-protocol-status { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--atlas-text-muted); border: 1px solid var(--atlas-border); border-radius: 8px; padding: 1px 6px; margin-left: 4px; }
.evm-protocol-dates { font-size: 11px; color: var(--atlas-text-muted); margin-top: 1px; }
.evm-protocol-goal { font-size: 12px; color: var(--atlas-text-secondary, rgba(255,255,255,0.7)); margin-top: 4px; line-height: 1.45; }
.evm-protocol-desc { font-size: 12px; color: var(--atlas-text-muted); margin-top: 3px; line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { .evm-protocols-summary::before { transition: none; } }

/* Login screen - hide when logged in (handled by .hidden class) */
/* DS v2 (9 Jul 2026): first client touchpoint. Centered column, glass
   inputs, gold-gradient primary. display only when :not(.hidden) so the
   .hidden show/hide contract is untouched. */
#login-screen {
  /* DS v3 (23 Jul 2026, Harry) - login now carries the Option C atmosphere
     (teal top-left + gold bottom-right radials) so the first touchpoint feels
     like the rest of the app instead of a flat panel. Matches gallery .screen. */
  background:
    radial-gradient(560px 340px at 14% -40px, rgba(79,163,165,0.14), rgba(0,0,0,0) 62%),
    radial-gradient(520px 380px at 96% 108%, rgba(212,178,106,0.09), rgba(0,0,0,0) 55%),
    #101514 !important;
  color: #EEF3F1 !important;
}
#login-screen:not(.hidden) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  gap: 14px;
  padding: 24px;
}
#login-screen .login-logo { margin-bottom: 18px; }
/* DS v3: wordmark presence bumped per gallery screen 01 */
#login-screen .logo-img-lg { width: min(320px, 72vw); height: auto; display: block; }
#login-screen input {
  /* Glass fields: blurred translucent surface + saturate, matching the app's
     card recipe (blur 18px / saturate 140%). */
  background: rgba(30,40,39,0.52) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--atlas-border) !important;
  color: var(--atlas-text-primary) !important;
  width: 100%;
  max-width: 340px;
  padding: 15px 16px;
  border-radius: 14px;
  font-size: 16px; /* >=16px: no iOS focus zoom */
  transition: border-color var(--atlas-dur-fast) var(--atlas-ease),
              background var(--atlas-dur-fast) var(--atlas-ease);
}
#login-screen input:focus {
  border-color: rgba(212,178,106,0.5) !important;
  background: var(--atlas-surface-hover) !important;
  outline: none;
}
#login-screen input::placeholder { color: var(--atlas-text-faint); }
#login-screen button {
  background: var(--atlas-gold-grad) !important;
  color: #171207 !important;
  border: none !important;
  width: 100%;
  max-width: 340px;
  margin-top: 6px;
  padding: 16px 16px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: 0 8px 26px rgba(212,178,106,0.28), inset 0 1px 0 rgba(255,255,255,0.35);
  transition: filter var(--atlas-dur-fast) var(--atlas-ease);
}
#login-screen button:hover { filter: brightness(1.05); }
#login-screen button:active { filter: brightness(0.97); }
#login-screen button:disabled { filter: saturate(0.6) brightness(0.9); cursor: default; }
/* Status/error line. Errors read as concern; the neutral 'Verifying session…'
   status stays muted so a normal sign-in doesn't flash red. */
#login-error { color: var(--atlas-concern); font-size: 13px; min-height: 18px; text-align: center; }
#login-error.is-status { color: var(--atlas-text-muted); }

/* Logo header */
.logo-header {
  color: #EEF3F1 !important;
}

/* ── Section Nav - hamburger in header ─────────── */
.section-nav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-hamburger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: #EEF3F1 !important;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.2px;
  transition: all 0.2s;
  white-space: nowrap;
}
.section-hamburger:hover { background: rgba(255,255,255,0.1); }
.section-nav.open .section-hamburger { border-color: #EEF3F1; }
.hamburger-icon {
  font-size: 16px;
  line-height: 1;
  color: #8F9A98 !important;
}
.hamburger-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #EEF3F1 !important;
}

/* Dropdown panel */
.section-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background: #1D2524;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 6px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
  backdrop-filter: blur(16px);
  z-index: 10001;
}
.section-nav.open .section-dropdown { display: block; }

.section-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: transparent;
  border: none;
  color: #8F9A98;
  cursor: pointer;
  border-radius: 12px;
  transition: all 0.15s;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
}
.section-opt:hover { background: rgba(255,255,255,0.06); color: #EEF3F1; }
.section-opt.active { background: rgba(255,255,255,0.06); color: #EEF3F1; }
.section-opt .section-icon { font-size: 16px; width: 24px; text-align: center; }
.section-opt .section-label { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

/* ── Atlas section container ─────────────────────
 * C3 (25 Apr) - page shell lock. .atlas-section is a sibling of #content
 * (created in renderAtlasSection at js:1647), so it needs the SAME horizontal
 * shell - max-width 1400 + responsive 16/20/32 gutters per DS §10. Vertical
 * padding handles section rhythm. */
.atlas-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--atlas-space-4) 16px var(--atlas-space-6);
}
@media (min-width: 768px) {
  .atlas-section { padding-left: 20px; padding-right: 20px; }
}
@media (min-width: 1024px) {
  .atlas-section { padding-left: 32px; padding-right: 32px; }
}

/* Home hub (24 May 2026) - the This Week band (#atlas-section) is relocated
 * INSIDE #content, beneath the trio. #content already supplies the 1400 max-
 * width + 16/20/32 gutters, so the band must drop its own shell padding/width or
 * it double-insets and reads narrower than the trio / AI / Data cards. Two-ID
 * selector outranks the .atlas-section media rules, so one rule covers all
 * breakpoints. Vertical padding is kept for rhythm. */
#content > #atlas-section {
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}
/* The This Week shell is capped at 1100px (centred) for the standalone Weekly
 * Targets reading view. Embedded in Home it must span the full content width to
 * match the trio / breakdown / Data cards, and shed its tall 80px bottom pad. */
#content > #atlas-section .tw-shell {
  max-width: none;
  margin: 0;
  padding: 8px 0 var(--atlas-space-6);
}
/* In Home the section heading already shows "This Week · <range>", so the
 * strip's own "Week of <range>" is a duplicate - hide it and right-align the
 * legend that remains. */
#content > #atlas-section .tw-strip-week { display: none; }
#content > #atlas-section .tw-strip-head { justify-content: flex-end; }

/* Dead override killed (C2): .atlas-section-title { display:none } from an
 * earlier hide. The styled rule lower in the file (DS v1 §2 display-md) was
 * already the cascade winner; removing the hide so any new use can't be
 * silently invisible. */

.atlas-sub-title {
  font-size: 16px;
  font-weight: 600;
  color: #8F9A98;
  margin: 20px 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.atlas-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Card base (Atlas DS v1 §3) - one spec, applied everywhere.
 * No shadows (§3). No hover lift (§9). Transition per §9 default. */
.atlas-card {
  background: var(--atlas-surface-card);
  border: 1px solid var(--atlas-border);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  transition: border-color 150ms cubic-bezier(0.22, 1, 0.36, 1),
              background-color 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.atlas-card:hover {
  border-color: var(--atlas-border-strong);
}

/* Hero card variant (§3) - reserved for one big number + trend pill + sparkline. */
.atlas-card--hero {
  border: 1px solid var(--atlas-border-strong);
  border-radius: 16px;
  padding: var(--atlas-space-6);
}

/* Nested card variant (§3) - 1 level of nesting only. */
.atlas-card--nested {
  background: var(--atlas-surface-nested);
  border: 1px solid var(--atlas-border);
  border-radius: 12px;
  padding: var(--atlas-space-4) calc(var(--atlas-space-4) - 2px);
}

.atlas-card-header {
  padding: var(--atlas-space-4) var(--atlas-space-4) var(--atlas-space-2);
  display: flex;
  flex-direction: column;
  gap: var(--atlas-space-1);
}
.atlas-card-header h3 {
  font-size: var(--atlas-font-title-size);
  line-height: var(--atlas-font-title-lh);
  font-weight: var(--atlas-font-title-weight);
  letter-spacing: var(--atlas-font-title-tracking);
  color: var(--atlas-text-primary);
  margin: 0;
}
.atlas-card-sub {
  font-size: var(--atlas-font-caption-size);
  color: var(--atlas-text-faint);
}

.atlas-card-body {
  padding: 0 var(--atlas-space-4) var(--atlas-space-3);
  font-size: var(--atlas-font-body-sm-size);
  line-height: var(--atlas-font-body-sm-lh);
  color: var(--atlas-text-muted);
}

/* ── Tags & badges ─────────────────────────────── */
.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255,255,255,0.06);
  color: #8F9A98;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tag-outline {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
}
.tag-sm { font-size: 10px; padding: 1px 6px; }
.tag-intensifier { background: rgba(201,168,76,0.15); color: #b8943e; border-color: rgba(201,168,76,0.3); cursor: pointer; position: relative; }
.tag-intensifier:hover { background: rgba(201,168,76,0.25); }
.intensifier-tooltip { position: fixed; z-index: 9999; max-width: 280px; padding: 12px 16px; background: #1D2524; color: #EEF3F1; border: 1px solid rgba(201,168,76,0.4); border-radius: 12px; font-size: 13px; line-height: 1.5; box-shadow: 0 8px 24px rgba(0,0,0,0.5); pointer-events: auto; }
.intensifier-tooltip .it-title { font-weight: 700; color: #c0c8d4; margin-bottom: 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.intensifier-tooltip .it-close { position: absolute; top: 6px; right: 10px; cursor: pointer; color: rgba(255,255,255,0.4); font-size: 16px; }

.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.priority-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}

/* ── Goals ──────────────────────────────────────── */
.goal-title-row { display: flex; align-items: flex-start; gap: 8px; }
.goal-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.goal-target, .goal-baseline { margin-bottom: 6px; }
.goal-dates { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: #8F9A98; }
.goal-notes { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.06); font-style: italic; }

/* ── Progress bar ──────────────────────────────── */
.progress-bar {
  position: relative;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  margin: 10px 0 4px;
  overflow: visible;
}
.progress-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #EEF3F1, #8F9A98);
  transition: width 0.6s ease;
}
.progress-label {
  position: absolute;
  right: 0;
  top: -16px;
  font-size: 11px;
  font-weight: 700;
  color: #EEF3F1;
}

/* ── Supplements ───────────────────────────────── */
.supp-category {
  margin-bottom: 28px;
}
.supp-cat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.supp-cat-icon { font-size: 18px; }
.supp-cat-name {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8F9A98;
}
.supp-cat-count {
  font-size: 11px;
  color: rgba(255,255,255,0.15);
  margin-left: auto;
}

.supp-card {
  background: var(--atlas-surface-card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 12px;
  backdrop-filter: blur(12px);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.supp-card:last-child { margin-bottom: 0; }
.supp-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
/* 30 May 2026 PM - selected-state visual contract on protocol cards
   (which reuse .supp-card). When the WHAT'S IN IT body is open, pull
   the card to the canonical 2px gold rail + 90deg gradient + bright
   name color. Same visual family as My Stack, Coming Up, Atlas
   Recommends, Daily Timing, Habits. See
   project_selected_state_visual_contract.md. */
.supp-card.supp-card-open {
  background: linear-gradient(90deg, rgba(212,178,106,0.10), rgba(255,255,255,0.05) 60%);
  border-left: 2px solid #D4B26A;
  transition: background 120ms ease;
}
.supp-card.supp-card-open .supp-name { color: #F4DDA8; }

/* Flash when arrived at via the calendar "View full protocol" drill-in. */
.supp-card-flash { animation: suppCardFlash 1.8s ease-out; }
@keyframes suppCardFlash {
  0% { border-color: rgba(155,139,212,0.9); box-shadow: 0 0 0 2px rgba(155,139,212,0.5), 0 8px 32px rgba(0,0,0,0.3); }
  100% { border-color: rgba(255,255,255,0.08); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .supp-card-flash { animation: none; } }

.supp-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
/* Extras footer row: buy link left, + NOTE right. Single line, space-between. */
.supp-extras {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.supp-extras .supp-edit-btn {
  background: none;
  border: none;
  color: #8F9A98;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 0;
}
.supp-extras .supp-edit-btn:hover { color: #a68532; }
.supp-top-clickable[data-expandable="1"] {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.supp-top-clickable[data-expandable="1"]:hover .supp-name { color: #f0eadb; }
.supp-top-clickable[data-expandable="1"]:hover .supp-chev { color: #a68532; }

/* Canonical detail pane - Best Form / Mechanism / Primary Benefits / Coach Notes */
.supp-detail-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}
.supp-detail-row:last-child { margin-bottom: 0; }
.supp-detail-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #a68532;
}
.supp-detail-body {
  font-size: 12px;
  line-height: 1.5;
  color: #c4cbd4;
}
/* Task E v2 - hero name treatment per Harry directive (25 Apr 2026). */
.supp-name {
  font-weight: 600;
  color: #EEF3F1;
  font-size: 18px;
  flex: 1;
  letter-spacing: -0.1px;
}
/* Restore chevron expand affordance (26 Apr 2026). Subtle, top-right of card
   header; rotates 180° when card is expanded (handled inline by click handler
   in atlas-sections.js - sets transform on this element). */
.supp-chev {
  color: var(--atlas-text-faint, #8F9A98);
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.2s ease, color 0.15s ease;
  user-select: none;
}
.supp-evidence {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
  letter-spacing: 0.5px;
}
/* Task C - twice-daily micro-badge. Neutral on purpose (no semantic colour);
   marks multi-serving rows where the dose/timing columns are combined. */
.supp-multi-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
  letter-spacing: 0.4px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.08);
}
.supp-evidence-very-strong     { background: rgba(74,157,107,0.14); color: #6CD693; }
.supp-evidence-strong          { background: rgba(125,175,120,0.12); color: #6fa874; }
.supp-evidence-moderate-strong { background: rgba(196,154,60,0.12); color: #a68532; }
.supp-evidence-moderate        { background: rgba(196,134,74,0.12); color: #b07a44; }
.supp-evidence-limited         { background: rgba(160,160,160,0.10); color: #8a8a8a; }
.supp-priority-high { border-left: 3px solid #6CD693; }
.supp-priority-medium { border-left: 3px solid #a68532; }

.supp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px 16px;
  margin-bottom: 10px;
}
/* Task E v2 - explicit 6-col body grid for the supplement card. ~16% per col on
   desktop; collapses to 3-col at <720px and 2-col at <480px so the card stays
   readable on phones. Used on suppCard only. */
.supp-grid-6col {
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 6px 10px;
}
@media (max-width: 720px) {
  .supp-grid-6col { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 480px) {
  .supp-grid-6col { grid-template-columns: repeat(2, 1fr) !important; }
}
.supp-field {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.supp-field-status {
  gap: 4px;
  align-items: flex-start;
}
.supp-field-status .status-badge,
.supp-field-status .supp-evidence,
.supp-field-status .supp-multi-badge {
  align-self: flex-start;
}
.supp-field-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8F9A98;
}
.supp-field-val {
  font-size: 13px;
  color: #c0c8d4;
  font-weight: 500;
}

.supp-purpose {
  font-size: 12px;
  color: #8F9A98;
  line-height: 1.5;
  font-style: italic;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
/* Body Composition manual entry surface (28 Apr 2026). Lives in the Today tab's
   Body Composition section. Toggle button in the section header reveals a small
   inline form; Save POSTs to /api/body-comp. Cronometer biometrics endpoint is
   unconfirmed; manual entry is the unblocking data path. */
.bodycomp-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.bodycomp-log-btn {
  background: rgba(212,178,106,0.12);
  border: 1px solid rgba(212,178,106,0.4);
  color: #D4B26A;
  padding: 4px 12px; border-radius: 16px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
  cursor: pointer; font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease;
}
.bodycomp-log-btn:hover { background: rgba(212,178,106,0.2); color: #e8c178; }
.bodycomp-log-btn[aria-expanded="true"] {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7);
}
.bodycomp-form {
  margin-top: 10px; margin-bottom: 12px;
  padding: 14px; border-radius: 12px;
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(255,255,255,0.08);
}
.bodycomp-form-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
@media (max-width: 720px) { .bodycomp-form-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .bodycomp-form-row { grid-template-columns: 1fr; } }
.bodycomp-field { display: flex; flex-direction: column; gap: 4px; }
.bodycomp-field span {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--atlas-text-faint, #8F9A98);
}
.bodycomp-field input {
  background: var(--atlas-surface-card);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: #EEF3F1;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  color-scheme: dark;
}
.bodycomp-field input:focus { border-color: rgba(212,178,106,0.4); }
.bodycomp-form-actions {
  display: flex; align-items: center; gap: 10px; justify-content: flex-end;
  margin-top: 12px;
}
.bodycomp-status { flex: 1; font-size: 12px; }
.bodycomp-cancel, .bodycomp-save {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
  cursor: pointer; font-family: inherit;
}
.bodycomp-cancel {
  background: transparent; color: rgba(255,255,255,0.55);
}
.bodycomp-cancel:hover { background: var(--atlas-surface-card); color: #EEF3F1; }
.bodycomp-save {
  background: #263332; color: #EEF3F1; border-color: #263332;
}
.bodycomp-save:hover:not(:disabled) { background: #243245; }
.bodycomp-save:disabled { opacity: 0.5; cursor: not-allowed; }
.bodycomp-hint {
  margin-top: 8px;
  font-size: 11px; color: var(--atlas-text-faint, #8F9A98);
  font-style: italic;
}
.bodycomp-empty {
  margin: 8px 0 0;
  padding: 14px;
  border-radius: 12px;
  background: var(--atlas-surface-nested);
  border: 1px dashed rgba(255,255,255,0.08);
  color: var(--atlas-text-muted, #8F9A98);
  font-size: 13px; line-height: 1.5;
  text-align: center;
}
.bodycomp-empty strong { color: #D4B26A; font-weight: 600; }
/* Take Notes - client-facing "how to take" instructions. Same italic surface
   as purpose; slightly warmer tint to differentiate from the "why" line.
   Empty value renders nothing. */
.supp-take-notes {
  font-size: 12px;
  color: #8F9A98;
  line-height: 1.5;
  font-style: italic;
  padding-top: 6px;
}
.supp-purpose + .supp-take-notes { padding-top: 4px; border-top: none; }

.supp-summary {
  background: var(--atlas-surface-card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 12px;
}
.supp-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.supp-stat-val {
  font-size: 20px;
  font-weight: 700;
  color: #EEF3F1;
}
.supp-stat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8F9A98;
}

.supp-product-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #EEF3F1;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.supp-product-link:hover { opacity: 1; text-decoration: underline; }

/* View toggle */
.supp-view-toggle {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 24px;
}
.supp-view-btn {
  flex: 1;
  padding: 8px 14px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: #8F9A98;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.supp-view-btn.active {
  background: var(--atlas-surface-card);
  color: #EEF3F1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.supp-view-btn:hover:not(.active) {
  color: #8F9A98;
}

/* Daily timing view */
.supp-time-window { margin-bottom: 24px; }
.supp-time-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.supp-time-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: var(--atlas-surface-card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  margin-bottom: 6px;
}
.supp-time-row:last-child { margin-bottom: 0; }
.supp-time-name {
  font-size: 14px;
  font-weight: 600;
  color: #EEF3F1;
}
.supp-time-dose {
  font-size: 12px;
  color: #8F9A98;
  font-weight: 500;
}

/* Brief 23 Ship 2.6 (30 Apr 2026) - accordion row + drawer for the single
   Daily Schedule view. Rows collapsed by default; tap to expand inline. */
.supp-row {
  background: var(--atlas-surface-card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  margin-bottom: 6px;
  transition: border-color 0.15s, background 0.15s;
}
.supp-row:last-child { margin-bottom: 0; }
.supp-row:hover { border-color: rgba(255,255,255,0.16); }
.supp-row.supp-row-expanded {
  background: rgba(255,255,255,0.06);
  border-color: rgba(212,178,106,0.30);
}
.supp-row-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  cursor: pointer;
  flex-wrap: wrap;
  min-height: 44px;
}
.supp-row-name {
  font-size: 14px; font-weight: 600; color: #EEF3F1;
  flex: 1; min-width: 140px;
}
.supp-row-pill {
  font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.supp-row-pill-anchor {
  background: rgba(212,178,106,0.12);
  border-color: rgba(212,178,106,0.32);
  color: #D4B26A;
  font-variant-numeric: tabular-nums;
}
.supp-row-pill-dose {
  background: rgba(100,181,246,0.10);
  border-color: rgba(100,181,246,0.28);
  color: #8eb8e6;
  font-variant-numeric: tabular-nums;
}
.supp-row-chev {
  font-size: 11px; color: rgba(255,255,255,0.40);
  margin-left: auto;
  transition: transform 0.15s;
}
.supp-row-expanded .supp-row-chev { color: #D4B26A; }

.supp-row-drawer {
  padding: 0 14px 14px;
  border-top: 1px solid rgba(212,178,106,0.18);
  margin-top: -2px;
}
.supp-drawer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  padding: 12px 0 4px;
}
.supp-drawer-cell {
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: 8px 10px;
}
.supp-drawer-cell-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.40); margin-bottom: 3px;
}
.supp-drawer-cell-val {
  font-size: 13px; font-weight: 600; color: #F1EEE8;
}
.supp-drawer-section { margin-top: 12px; }
.supp-drawer-section-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.40); margin-bottom: 6px;
}
.supp-drawer-section-body {
  font-size: 13px; color: rgba(255,255,255,0.78); line-height: 1.55;
  white-space: pre-wrap;
}
/* 18 May 2026 - Avoid Combining With section: muted-red label so a client
   scanning the drawer notices the interaction list at a glance. Body stays
   regular weight (not alarmist). Safety section was removed from the client
   surface per Harry's call - the terse canonical strings ("Kidney disease.")
   read as scary/uninformative for clients. Coach retains full safety
   visibility on coach-v2. */
.supp-drawer-avoid .supp-drawer-section-label {
  color: rgba(214,86,86,0.78);
}
.supp-drawer-action { margin-top: 14px; }
.supp-drawer-action .supp-product-link {
  display: inline-block;
  padding: 8px 14px;
  background: rgba(212,178,106,0.14);
  border: 1px solid rgba(212,178,106,0.40);
  color: #D4B26A;
  font-size: 12px; font-weight: 700; letter-spacing: 0.4px;
  border-radius: 8px; text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.supp-drawer-action .supp-product-link:hover {
  background: rgba(212,178,106,0.22);
  border-color: rgba(212,178,106,0.65);
}
/* Brief 24 (30 Apr 2026) - Pairs/Avoids pills inside the drawer. Gold for
   companions, muted red for avoid. Wrap on narrow viewports. */
.supp-pairs-row {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.supp-pair-pill {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: 12px;
  letter-spacing: 0.2px; white-space: nowrap;
  border: 1px solid transparent;
}
.supp-pair-pill-good {
  background: rgba(212,178,106,0.12);
  border-color: rgba(212,178,106,0.32);
  color: #D4B26A;
}
.supp-pair-pill-avoid {
  background: rgba(239,83,80,0.10);
  border-color: rgba(239,83,80,0.32);
  color: #ef8580;
}

.supp-drawer-link-ref {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px dashed rgba(255,255,255,0.06);
  font-size: 11px; color: rgba(255,255,255,0.40);
  font-style: italic;
}
.supp-drawer-link-ref span {
  color: rgba(212,178,106,0.75); font-style: normal; font-weight: 600;
}

.supp-drawer-notes { margin-top: 14px; }
.supp-drawer-notes .supp-edit-btn {
  background: var(--atlas-surface-card);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.75);
  font: inherit;
  font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
  padding: 7px 13px; border-radius: 8px;
  cursor: pointer;
}
.supp-drawer-notes .supp-edit-btn:hover {
  background: rgba(255,255,255,0.10);
  color: #F1EEE8;
}
.supp-drawer-notes .supp-notes-wrap { margin-top: 10px; }
.supp-drawer-notes .supp-notes-input {
  width: 100%;
  background: var(--atlas-surface-card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: #EEF3F1;
  padding: 8px 10px;
  font-size: 12px; font-family: inherit;
  resize: vertical; min-height: 60px;
}
.supp-drawer-notes .supp-save-btn {
  margin-top: 8px;
  padding: 7px 14px; border-radius: 8px;
  border: none;
  background: #101514; color: #F1EEE8;
  font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
  cursor: pointer;
}
.supp-drawer-notes .supp-save-btn:hover { background: #3a5050; }
.supp-drawer-notes .supp-save-btn:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 540px) {
  .supp-row-head { gap: 6px; }
  .supp-row-name { flex: 1 1 100%; }
  .supp-row-chev { margin-left: 0; }
}

/* ── Training ──────────────────────────────────── */
.training-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.training-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.training-stats .stat { font-size: 12px; }
.training-exercises pre,
.training-cardio pre {
  font-family: inherit;
  white-space: pre-wrap;
  font-size: 12px;
  margin: 4px 0;
  padding: 8px 12px;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  color: #c0c8d4;
}
.training-notes { margin-top: 8px; font-style: italic; }

/* ── Training Log Calendar ────────────────────── */
.tl-view-toggle {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  background: rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 3px;
  width: fit-content;
}
.tl-toggle-btn {
  min-height: 44px;
  padding: 10px 18px;
  border: none;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--atlas-text-muted);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 150ms cubic-bezier(0.22, 1, 0.36, 1), color 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tl-toggle-btn:hover {
  color: var(--atlas-text-body);
  background: var(--atlas-surface-hover);
}
.tl-toggle-btn.active {
  background: var(--atlas-surface-card);
  color: var(--atlas-text-primary);
}
.tl-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.tl-nav-btn {
  /* Atlas DS v1 §10 - 44×44 touch target (was 32×32). */
  width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: var(--atlas-surface-card);
  color: #EEF3F1;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s;
}
.tl-nav-btn:hover { background: rgba(255,255,255,0.06); }
.tl-nav-label {
  font-size: 14px;
  font-weight: 700;
  color: #EEF3F1;
}

/* Week view */
.tl-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 16px;
}
.tl-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  border-radius: 12px;
  background: var(--atlas-surface-card);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: all 0.2s;
  min-height: 80px;
}
.tl-day:hover { border-color: rgba(255,255,255,0.1); }
.tl-day.tl-selected {
  border-color: #6CD693;
  background: rgba(22,163,106,0.04);
}
.tl-day.tl-today { border-color: #EEF3F1; }
.tl-day-name {
  font-size: 10px;
  font-weight: 700;
  color: #8F9A98;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tl-day-num {
  font-size: 16px;
  font-weight: 700;
  color: #c0c8d4;
}
.tl-today-num {
  background: #263332;
  color: #FFF;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.tl-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
}
.tl-dot-empty { width: 8px; height: 8px; }
.dot-green { background: #6CD693; }
.dot-amber { background: #c49a3c; }
.dot-red { background: #c4534a; }
.tl-day-type {
  font-size: 10px;
  font-weight: 600;
  color: #8F9A98;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Month view */
.tl-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-bottom: 16px;
}
.tl-month-hdr {
  font-size: 10px;
  font-weight: 700;
  color: #8F9A98;
  text-align: center;
  padding: 4px 0;
}
.tl-month-cell {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}
.tl-month-cell:not(.tl-empty):hover { background: rgba(255,255,255,0.06); }
.tl-month-cell.tl-selected {
  border-color: #6CD693;
  background: rgba(22,163,106,0.06);
}
.tl-month-cell.tl-today { background: rgba(255,255,255,0.06); }
.tl-month-num {
  font-size: 13px;
  font-weight: 600;
  color: #c0c8d4;
}
.tl-today .tl-month-num {
  background: #263332;
  color: #FFF;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

/* Drill-down detail */
.tl-detail { margin-top: 4px; }
.tl-detail-empty {
  text-align: center;
  color: #8F9A98;
  font-size: 13px;
  padding: 20px 0;
  font-style: italic;
}
.tl-session-card {
  /* glow replaces border-left */
  transition: border-color 0.2s;
}
.tl-session-card:hover { border-color: rgba(255,255,255,0.1); }

/* Logged sets in drill-down */
.tl-sets-log { margin: 8px 0; }
.tl-ex-group { margin-bottom: 10px; }
.tl-ex-name {
  font-size: 12px;
  font-weight: 700;
  color: #EEF3F1;
  margin-bottom: 4px;
}
.tl-sets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.tl-set-pill {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #c0c8d4;
  font-variant-numeric: tabular-nums;
}

/* ── Training tab P0 (28 Apr 2026): hero + tab-level banner + ACWR caption ── */

/* P0.2 hero card - three states share the base, modifiers differ */
.tl-hero {
  margin-bottom: var(--atlas-space-4);
  padding: var(--atlas-space-5) var(--atlas-space-5);
  display: flex; flex-direction: column; gap: var(--atlas-space-2);
}
.tl-hero-eyebrow {
  font-size: var(--atlas-font-label-size);
  font-weight: var(--atlas-font-label-weight);
  letter-spacing: var(--atlas-font-label-tracking);
  text-transform: uppercase;
  color: var(--atlas-text-muted);
}
.tl-hero-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--atlas-text-primary);
}
.tl-hero-sub {
  margin: 0;
  font-size: var(--atlas-font-body-size);
  color: var(--atlas-text-body);
}
.tl-hero-cta {
  margin-top: var(--atlas-space-3);
  align-self: flex-start;
  min-height: 48px;
  padding: 12px 20px;
  font-size: var(--atlas-font-body-size);
}
.tl-hero--today {
  border-color: var(--atlas-blue-mid);
  background: linear-gradient(180deg, rgba(91,155,181,0.06) 0%, transparent 100%);
}
.tl-hero--rest {
  background: var(--atlas-surface-nested);
}
.tl-hero--empty {
  background: var(--atlas-surface-nested);
}
.tl-hero--done {
  border-color: rgba(74,157,107,0.4);
  background: linear-gradient(180deg, rgba(74,157,107,0.06) 0%, transparent 100%);
}
/* BRIEF-85 Step 2 - between-phases "Phase complete" state. Muted, with the
   2px gold left rail + 90deg soft-gold gradient used by the next-phase
   preview family. No red: the dead week between phase end + next start is a
   planned gap, not a missed session. */
.tl-hero--phase-complete {
  border-left: 2px solid var(--atlas-gold);
  background: linear-gradient(90deg, var(--atlas-gold-soft) 0%, transparent 60%);
}
.tl-hero-cta--secondary {
  min-height: 36px;
  padding: 8px 14px;
  font-size: var(--atlas-font-body-sm-size);
}

/* P0.3 tab-level readiness banner */
.readiness-banner--tab {
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: var(--atlas-space-3);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.readiness-banner--tab .readiness-banner-text {
  font-size: var(--atlas-font-body-sm-size);
  color: var(--atlas-text-body);
  flex: 1; min-width: 200px;
}
.readiness-banner-actions {
  display: flex; gap: 6px; margin-left: auto;
}
.readiness-banner-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--atlas-text-muted);
  font-size: 11px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 150ms;
}
.readiness-banner-btn:hover {
  background: rgba(255,255,255,0.06);
  color: var(--atlas-text-body);
}

/* ACWR card with caption (P1.2) */
.tl-acwr-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 16px;
  margin-bottom: var(--atlas-space-3);
}
.tl-acwr-row { display: flex; align-items: center; gap: 16px; }
.tl-acwr-num { display: flex; align-items: baseline; gap: 4px; }
.tl-acwr-num > span:first-child { font-size: 22px; font-weight: 700; }
.tl-acwr-lbl { font-size: 11px; color: var(--atlas-text-muted); }
.tl-acwr-meta { font-size: 11px; color: var(--atlas-text-body); }
.tl-acwr-caption {
  font-size: 12px;
  color: var(--atlas-text-muted);
  line-height: 1.45;
}

/* P1.5 detail-panel context label */
.tl-detail-context { margin: var(--atlas-space-3) 0 var(--atlas-space-2); }

/* Calendar collapse toggle */
.tl-cal-toggle { font-size: 12px; padding: 6px 12px; min-height: 32px; }
.tl-cal-block { animation: tlCalFade 200ms ease-out; }
@keyframes tlCalFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* P1.7 Goals-parity hover amplification */
.tl-day:hover {
  border-color: var(--atlas-blue-mid);
  background: rgba(91,155,181,0.04);
}
.tl-month-cell:not(.tl-empty):hover {
  background: rgba(91,155,181,0.06);
  border-color: var(--atlas-blue-mid);
}

/* P1.3 Month-view session-type letter */
.tl-month-letter {
  font-size: 9px;
  font-weight: 700;
  color: var(--atlas-text-muted);
  letter-spacing: 0.4px;
}

/* P1.1 Mobile breakpoint - collapse calendar to vertical week-list under 480px */
@media (max-width: 480px) {
  .tl-week {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .tl-day {
    flex-direction: row;
    justify-content: space-between;
    min-height: auto;
    padding: 12px 14px;
    gap: 10px;
  }
  .tl-day-name { width: 40px; }
  .tl-day-num { font-size: 14px; }
  .tl-today-num { width: 22px; height: 22px; font-size: 11px; }
  .tl-day-type { max-width: none; flex: 1; text-align: left; }
  .tl-dot { margin-left: auto; }
  /* Hero */
  .tl-hero { padding: 14px 14px; }
  .tl-hero-title { font-size: 17px; }
  .tl-hero-cta { width: 100%; }
}

/* ── Cardio review polish (28 Apr 2026): notes label + ghost Edit button ── */
.sess-notes-eyebrow {
  font-size: var(--atlas-font-label-size);
  font-weight: var(--atlas-font-label-weight);
  letter-spacing: var(--atlas-font-label-tracking);
  text-transform: uppercase;
  color: var(--atlas-text-muted);
  margin-bottom: 6px;
}
.sess-notes-quote {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--atlas-text-body);
  font-style: italic;
  white-space: pre-wrap;
}
.sess-notes-quote::before { content: "\201C"; color: var(--atlas-text-muted); margin-right: 2px; }
.sess-notes-quote::after  { content: "\201D"; color: var(--atlas-text-muted); margin-left: 2px; }
.sess-edit-btn {
  display: inline-block;
  margin-top: 16px;
  font-size: var(--atlas-font-body-sm-size);
  padding: 8px 16px;
  min-height: 40px;
}

/* ── Cardio session "Protocol" explanation card (28 Apr 2026) ── */
/* Surfaces coach-authored "how it works" copy from Training Sessions.Protocol Description.
   Hidden when empty. Cardio-only this pass (gym sessions render exercise lists). */
.sess-protocol-card {
  padding: 14px 16px;
  margin-top: 12px;
  margin-bottom: 16px;
  background: rgba(91,155,181,0.04);
  border-color: rgba(91,155,181,0.18);
}
.sess-protocol-eyebrow {
  font-size: var(--atlas-font-label-size);
  font-weight: var(--atlas-font-label-weight);
  letter-spacing: var(--atlas-font-label-tracking);
  text-transform: uppercase;
  color: var(--atlas-text-muted);
  margin-bottom: 6px;
}
.sess-protocol-body {
  margin: 0;
  font-size: var(--atlas-font-body-size);
  line-height: 1.55;
  color: var(--atlas-text-body);
  white-space: pre-wrap;
}

/* ── Live Training surface (renderSessionExercises) - P1.7 hover amplification ── */
/* Goals-parity: blue-mid border + tinted background on hover/focus.
   .sess-week-session:hover patched in place at the original definition below. */
.sess-week-card:hover {
  border-color: var(--atlas-blue-mid);
  background: rgba(91,155,181,0.04);
}
.sess-week-card.sess-week-current:hover {
  border-color: var(--atlas-blue-mid);
}

/* ── Routines ──────────────────────────────────── */
.routine-duration { margin-bottom: 8px; }
.routine-steps pre {
  font-family: inherit;
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.7;
  margin: 4px 0;
  padding: 10px 14px;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  color: #c0c8d4;
}
.routine-notes { margin-top: 8px; font-style: italic; font-size: 12px; }

/* ── Check-ins ─────────────────────────────────── */
.checkin-scores {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.checkin-score {
  display: flex;
  align-items: center;
  gap: 8px;
}
.score-label {
  width: 72px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8F9A98;
  flex-shrink: 0;
}
.score-bar {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  overflow: hidden;
}
.score-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}
.score-val {
  font-size: 11px;
  font-weight: 700;
  color: #8F9A98;
  width: 36px;
  text-align: right;
  flex-shrink: 0;
}
.checkin-text { margin-top: 8px; font-size: 13px; }
.coach-response {
  background: var(--atlas-surface-card);
  /* glow replaces border-left */
  padding: 8px 12px;
  border-radius: 0 8px 8px 0;
  margin-top: 10px;
  color: #c0c8d4;
}

/* ── Journal ───────────────────────────────────── */
.journal-meta { display: flex; align-items: center; gap: 8px; }
.journal-body { line-height: 1.6; }
.journal-tags { margin-top: 10px; display: flex; gap: 4px; flex-wrap: wrap; }

/* ── Biomarkers ────────────────────────────────── */
.bio-summary { font-size: 13px; color: #8F9A98; }

/* ── Loading & empty states ────────────────────── */
.atlas-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 72px 0;
}
/* Branded content loader - gold ring on the Atlas teal. Replaces the old grey
   spinner + "Loading..." text (8 Jul 2026). */
.atlas-loader-ring {
  width: 34px;
  height: 34px;
  border: 2.5px solid rgba(212, 178, 106, 0.16);
  border-top-color: #D4B26A;
  border-radius: 50%;
  animation: spin 0.72s cubic-bezier(0.5, 0.15, 0.5, 0.85) infinite;
}
/* Legacy grey spinner kept for any surface that still references it. */
.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255,255,255,0.08);
  border-top-color: #EEF3F1;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.atlas-empty {
  text-align: center;
  color: #8F9A98;
  padding: 60px 20px;
  font-size: 14px;
}

/* ── Skeleton loading (Nutrition, Performance History) ──────────────
   Grey-on-dark placeholder blocks that reserve layout space while a
   section's first fetch runs. The wrapper keeps .atlas-loading so the
   loading watchdog in atlas-sections.js still detects an in-flight
   load; .atlas-skel overrides its flex-centring. Quiet by design: a
   gentle opacity pulse only, disabled under prefers-reduced-motion. */
.atlas-loading.atlas-skel {
  display: block;
  padding: 0;
}
.atlas-skel-block {
  background: var(--atlas-surface-card);
  border: 1px solid var(--atlas-divider);
  border-radius: 12px;
  animation: atlas-skel-pulse 1.8s ease-in-out infinite;
}
.atlas-skel-block + .atlas-skel-block,
.atlas-skel-grid { margin-top: 10px; }
.atlas-skel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.atlas-skel-grid .atlas-skel-block { margin-top: 0; }
@keyframes atlas-skel-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .atlas-skel-block { animation: none; }
}

/* ── Session Exercises ─────────────────────────── */
.ex-card { cursor: default; transition: background 120ms ease; border-left: 2px solid transparent; }
/* 31 May 2026 - Architecture split:
   .expanded  = "user clicked to view detail" (toggle on/off, no colour)
   .ex-card-current = "this is the exercise you're actively doing right
                       now" (programmatic, persists across hover/clicks,
                       walks forward on Next Exercise, applies to ALL
                       cards in the same Order Group letter so supersets
                       light up together). Gold rail+gradient+bright
                       order badge lives here per the selected-state
                       contract. Hover never strips it (see
                       :hover:not(.ex-card-current) rule below). */
.ex-card.ex-card-current {
  background: linear-gradient(90deg, rgba(212,178,106,0.10), rgba(255,255,255,0.05) 60%);
  border-left: 2px solid #D4B26A;
}
.ex-card.ex-card-current .ex-order {
  background: #D4B26A;
  color: #101514;
}
.ex-card.ex-card-current .ex-info h3 {
  color: #F4DDA8;
}
.ex-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
}
.ex-order {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  color: #EEF3F1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.ex-info { flex: 1; min-width: 0; }
.ex-info h3 { margin: 0; font-size: 15px; font-weight: 600; color: #EEF3F1; }
.ex-prescription {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 13px;
  color: #8F9A98;
  flex-wrap: wrap;
}
.ex-sep { color: rgba(255,255,255,0.15); }
.ex-chevron {
  color: #8F9A98;
  font-size: 16px;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.ex-card.expanded .ex-chevron { transform: rotate(180deg); }

.ex-card-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.2s;
  padding: 0 16px;
}
.ex-card.expanded .ex-card-detail {
  /* 25 May 2026 - was 800px, which clipped tall exercises (long instructions
     + sets + notes + the Next Exercise button sit past 800px and got cut off
     under overflow:hidden, so clients couldn't reach the next exercise).
     Generous cap clears any single exercise's detail; collapse still animates. */
  max-height: 4000px;
  padding: 0 16px 16px;
}

.ex-video-link {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(255,255,255,0.06);
  color: #EEF3F1;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 12px;
  transition: background 0.2s;
}
.ex-video-link:hover { background: rgba(255,255,255,0.08); }

.ex-details { margin-top: 8px; }
/* 4 Jun 2026 - Brief 1: the direct-child Coach row falls on the same 14px
   left axis as the panel labels and SET column. Scoped to direct children
   so rows inside .ex-form-cues-body (already padded 14px) don't double up. */
.ex-details > .ex-detail-row { padding-left: 14px; }
.ex-detail-row {
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  gap: 10px;
}
.ex-detail-row:last-child { border-bottom: none; }
.ex-detail-label {
  width: 110px;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8F9A98;
  padding-top: 1px;
}
.ex-detail-val {
  flex: 1;
  font-size: 13px;
  color: #c0c8d4;
  line-height: 1.5;
}

/* 29 May 2026 - Form & cues collapsible (Instructions + Common Mistakes).
   Renders open on first session, collapsed every session after that. */
.ex-form-cues {
  margin-top: 8px;
  border-radius: 12px;
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}
.ex-form-cues-summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8F9A98;
  user-select: none;
  transition: color 0.12s ease, background 0.12s ease;
}
.ex-form-cues-summary::-webkit-details-marker { display: none; }
.ex-form-cues-summary:hover { color: #d0d8e2; background: var(--atlas-surface-nested); }
.ex-form-cues-chev {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  transition: transform 0.18s ease;
  transform: rotate(-90deg);
}
.ex-form-cues[open] .ex-form-cues-chev { transform: rotate(0deg); }
.ex-form-cues-body {
  padding: 4px 14px 12px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.ex-form-cues-body .ex-detail-row:last-child { border-bottom: none; }

/* Staggered instructions - each numbered step + cue header on its own line.
   Was rendered as a single paragraph; readability tanked once exercises had
   4+ steps. Now one row per directive, tighter vertical rhythm. */
.ex-instr-block { display: flex; flex-direction: column; gap: 4px; }
.ex-instr-line {
  font-size: 13px;
  color: #c0c8d4;
  line-height: 1.5;
}
.ex-instr-line + .ex-instr-line { margin-top: 2px; }

.ex-coach-note {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--atlas-surface-card);
  /* glow replaces border-left */
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  color: #c0c8d4;
}

/* ── Rest Timer ───────────────────────────────────────────────────────────
   12 Jun 2026 (Lane G) - the old ring-timer rest CSS (.ex-rest-timer,
   .rest-btn pill, .rest-icon, .rest-countdown, .rest-ring*, .rest-time,
   .rest-reset-btn) was removed from here. It was pre-Lane-A dead code: the
   live rest button markup is emitted by _renderRestButton and styled by the
   Lane A block in atlas-tabbar.css (loaded later, .rest-btn-face /
   .rest-btn-icon svg sizing). Keeping a second .rest-btn here only muddied
   the cascade and left the SVG unsized when the Lane A rules were missing. */

/* ── Set Logging (Session Execution) ──────────── */
.set-log-section {
  margin-bottom: 14px;
}
/* 4 Jun 2026 - Brief 1 alignment polish. The set table shares a left text
   axis with the Atlas today's-call panel above it (panel text sits at
   13px padding + 1px border = 14px, same as .ex-form-cues-body). Gutter
   14px + a 40px first column (matching .ex-execute-label's column) puts
   SET on the LAST/TODAY axis and the WEIGHT column on the call-text axis. */
.set-header {
  display: grid;
  grid-template-columns: 40px 1fr 1fr 1fr 40px;
  gap: 6px;
  padding: 0 4px 6px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 4px;
}
.set-header span {
  font-size: 10px;
  font-weight: 700;
  color: #8F9A98;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.set-row {
  display: grid;
  grid-template-columns: 40px 1fr 1fr 1fr 40px;
  gap: 6px;
  padding: 5px 4px 5px 14px;
  align-items: center;
  border-radius: 8px;
  transition: background 0.2s;
}
.set-row:hover { background: var(--atlas-surface-card); }
.set-row.set-done {
  background: rgba(74,157,107,0.05);
}
.set-num {
  font-size: 13px;
  font-weight: 700;
  color: #8F9A98;
  text-align: center;
}
.set-done .set-num { color: #6CD693; }
.set-input {
  width: 100%;
  padding: 7px 8px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #EEF3F1;
  background: var(--atlas-surface-card);
  text-align: center;
  font-family: inherit;
  -moz-appearance: textfield;
  transition: border-color 0.2s;
}
.set-input::-webkit-inner-spin-button,
.set-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.set-input:focus {
  outline: none;
  border-color: #6CD693;
  box-shadow: 0 0 0 2px rgba(22,163,106,0.1);
}
.set-input::placeholder {
  /* 25 May 2026 - the placeholder now carries the desired target (reps / RPE /
     load) as the at-a-glance guide, so it needs to be legible gray, not the
     old near-invisible 0.15 wash. Still clearly secondary to typed values
     (#EEF3F1), so a placeholder never reads as a logged number. */
  color: #8F9A98;
  font-weight: 500;
}
.set-done .set-input {
  background: rgba(74,157,107,0.05);
  border-color: rgba(74,157,107,0.2);
  color: #6CD693;
}

/* ── Lane E (12 Jun 2026) - cardio-shape SE card ──────────────────────────
   A cardio Session Exercise (Threshold Interval, Zone 2, Norwegian 4×4)
   replaces the weight×reps grid with an equipment picker + duration / HR /
   distance fields + an RPE chip row. Shares the card chrome, tokens, and the
   green focus accent with the resistance card so the two read as one system. */
.ex-card.is-cardio .ex-prescription .tag-cardio {
  background: var(--atlas-blue-tint);
  color: var(--atlas-blue-pale);
  border: 1px solid rgba(91,155,181,0.25);
}
.cardio-log-section { margin-bottom: 14px; }
.cardio-field { margin-bottom: 12px; }
.cardio-field-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #8F9A98;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 5px;
  padding-left: 2px;
}
.cardio-form-select,
.cardio-field input.cardio-input {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #EEF3F1;
  background: var(--atlas-surface-card);
  font-family: inherit;
  -moz-appearance: textfield;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.cardio-field input.cardio-input { text-align: center; }
.cardio-field input.cardio-input::-webkit-inner-spin-button,
.cardio-field input.cardio-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cardio-form-select:focus,
.cardio-field input.cardio-input:focus {
  outline: none;
  border-color: #6CD693;
  box-shadow: 0 0 0 2px rgba(22,163,106,0.1);
}
.cardio-field input.cardio-input::placeholder { color: #8F9A98; font-weight: 500; }
/* 3-up metrics row: duration / HR / distance. Collapses to a single column
   on very narrow screens so nothing is cramped below 44px touch comfort. */
.cardio-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
@media (max-width: 360px) {
  .cardio-metrics-grid { grid-template-columns: 1fr; }
}
.cardio-metrics-grid .cardio-field { margin-bottom: 0; }
/* Primary signal (HR when prescribed as %max HR; RPE otherwise) gets a subtle
   gold rim so the eye lands on the input that matters most for this lift. */
.cardio-field.is-primary input.cardio-input {
  border-color: rgba(212,178,106,0.45);
  background: rgba(212,178,106,0.06);
}
.cardio-field.is-primary .cardio-field-label,
.cardio-rpe-field.is-primary .cardio-field-label { color: var(--atlas-gold); }
.cardio-rpe-field { margin-bottom: 4px; }
.cardio-rpe-chips {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 5px;
}
.cardio-rpe-chip {
  min-height: 40px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: var(--atlas-surface-card);
  color: #BCC6C4;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.cardio-rpe-chip:hover { background: rgba(255,255,255,0.08); }
.cardio-rpe-chip.is-selected {
  background: var(--atlas-gold-soft);
  border-color: rgba(212,178,106,0.55);
  color: var(--atlas-gold);
}
.cardio-rpe-field.is-primary .cardio-rpe-chip.is-selected {
  box-shadow: 0 0 0 2px rgba(212,178,106,0.18);
}
@media (max-width: 380px) {
  .cardio-rpe-chips { grid-template-columns: repeat(5, 1fr); }
  .cardio-rpe-chip { font-size: 13px; }
}
/* ── Per-set notes (Brief 2, Stage 3.5 - 4 Jun 2026) ──────────
   The + button fills the 40px fifth grid column the row template never
   used. The edit div is the row's NEXT SIBLING (not a child) because the
   reveal rides the adjacent-sibling combinator below. Thin gold left rim
   telegraphs an attached note without adding chrome. */
.set-row[data-has-note="1"] { border-left: 2px solid rgba(212, 178, 106, 0.55); }
.set-note-btn {
  width: 100%;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #8F9A98;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  transition: color 0.15s ease, background 0.15s ease;
}
.set-note-btn:hover,
.set-note-btn:focus-visible {
  color: #d4b26a;
  background: rgba(255,255,255,0.06);
  outline: none;
}
.set-row.is-note-open .set-note-btn,
.set-row[data-has-note="1"] .set-note-btn { color: #d4b26a; }
.set-note-edit {
  display: none;
  /* 42px = row 4px pad + 32px set-num col + 6px gap → input aligns with weight */
  padding: 2px 4px 8px 42px;
}
.set-row.is-note-open + .set-note-edit { display: block; }
.set-note-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 8px 10px;
  /* 16px minimum - anything smaller triggers iOS viewport zoom on focus */
  font-size: 16px;
  font-family: inherit;
  color: #EEF3F1;
  background: var(--atlas-surface-card);
  transition: border-color 0.2s;
}
.set-note-input::placeholder { color: #8F9A98; font-weight: 500; }
.set-note-input:focus {
  outline: none;
  border-color: rgba(212, 178, 106, 0.5);
  box-shadow: 0 0 0 2px rgba(212, 178, 106, 0.08);
}
.set-log-btn {
  /* Atlas DS v1 §10 - 44×44 touch target (was 36×36). */
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  color: #8F9A98;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  font-family: inherit;
  padding: 0;
}
.set-log-btn:hover {
  background: #263332;
  color: #FFF;
  border-color: #EEF3F1;
}
.set-log-btn.logged {
  background: #6CD693;
  color: #FFF;
  border-color: #6CD693;
}
.set-log-btn.saving {
  opacity: 0.5;
  pointer-events: none;
}

/* ── Session Overview (Phase + Session Cards) ──── */
.sess-phase-card {
  background: var(--atlas-surface-card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 24px;
}
.sess-phase-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.sess-phase-name {
  font-size: 17px;
  font-weight: 700;
  color: #EEF3F1;
}
.sess-phase-pills {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.sess-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 24px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sess-pill-focus {
  background: rgba(255,255,255,0.06);
  color: #c0c8d4;
  border: 1px solid rgba(255,255,255,0.08);
}
.sess-pill-status {
  color: #FFF;
}
.sess-pill-active { background: #6CD693; }
.sess-pill-planning { background: #5a6577; }
.sess-pill-completed { background: #5a6577; }
.sess-pill-archived { background: rgba(255,255,255,0.1); }
.sess-phase-meta {
  display: flex;
  gap: 6px;
  font-size: 12px;
  color: #8F9A98;
  flex-wrap: wrap;
}
.sess-phase-meta span:not(:last-child)::after {
  content: '·';
  margin-left: 6px;
  color: rgba(255,255,255,0.15);
}
.sess-phase-notes {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--atlas-surface-card);
  /* glow replaces border-left */
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  color: #c0c8d4;
  line-height: 1.5;
}

/* ── Phase Summary (compact bar + expandable) ── */
.sess-phase-summary {
  margin-bottom: 20px;
  padding: 0;
  overflow: hidden;
}
.sess-phase-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  cursor: pointer;
  user-select: none;
  gap: 12px;
}
.sess-phase-bar-left { flex: 1; min-width: 0; }
.sess-phase-bar-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 12px;
  color: #8F9A98;
  flex-wrap: wrap;
}
.sess-phase-bar-meta span:not(:first-child):not(.sess-pill)::before {
  content: '·';
  margin-right: 8px;
  color: rgba(255,255,255,0.15);
}
.sess-phase-bar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.sess-phase-progress-ring {
  position: relative;
  width: 44px;
  height: 44px;
}
.sess-phase-pct {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  font-weight: 800;
  color: #EEF3F1;
}
.sess-phase-expand-icon {
  font-size: 14px;
  color: #8F9A98;
}
.sess-phase-detail {
  padding: 0 18px 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.sess-phase-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 16px 0 12px;
}
.sess-phase-stat {
  text-align: center;
}
.sess-phase-stat-val {
  font-size: 22px;
  font-weight: 800;
  color: #EEF3F1;
}
.sess-phase-stat-lbl {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8F9A98;
  margin-top: 2px;
}
.sess-phase-meta-detail {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: #8F9A98;
  flex-wrap: wrap;
  padding-bottom: 4px;
}
.sess-phase-meta-detail span:not(:last-child):not(.sess-pill)::after {
  content: '·';
  margin-left: 8px;
  color: rgba(255,255,255,0.15);
}

/* ── Week Cards ── */
.sess-weeks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sess-week-card {
  background: var(--atlas-surface-card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.sess-week-card.sess-week-current {
  border-color: #c0c8d4;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.1);
}
.sess-week-card.sess-week-done {
  opacity: 1;
}
.sess-week-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  gap: 12px;
}
.sess-week-hdr-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.sess-week-wc {
  font-size: 14px;
  font-weight: 700;
  color: #EEF3F1;
}
.sess-week-current-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(212,178,106,0.18);
  color: #D4B26A;
}
/* NEXT WEEK is informational, not active - muted so THIS WEEK stays
   the visual anchor when both render. */
.sess-week-next-badge {
  background: rgba(255,255,255,0.06);
  color: rgba(241,238,232,0.55);
}

/* 17 May 2026 - "Coming next" phase teaser. Sits under the last week of
   the active phase. Read-only preview; detail unlocks 7d before start
   (task #91 - future-phase visibility). Muted treatment so it reads as
   "on the horizon" rather than competing with the active phase. */
.sess-next-phase {
  margin-top: 14px;
  margin-bottom: 18px;
  padding: 16px 18px;
  background: var(--atlas-surface-nested);
  /* 25 Jun 2026 PM - neutral dashed border so the panel chrome doesn't shout
     gold before any content lands. Selected-state still drops to a gold left
     rail; that's the only gold signal worth keeping. */
  border: 1px dashed rgba(255,255,255,0.10);
  border-radius: 12px;
  position: relative;
}
/* 25 Jun 2026 PM - de-gold pass. Original design used gold on the eyebrow,
   date, and every meta line; Jeremy's screenshot was a wall of gold with
   no hierarchy. Gold is now reserved for INTERACTIVE elements only -
   play button, Ask Atlas CTA, selected-state left rail. Data labels demote
   to muted cream text so the eye lands on the affordances. */
.sess-next-phase-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* 25 Jun 2026 PM2 - was rgba(241,238,232,0.5). Already neutral; second pass
     left untouched. */
  color: rgba(241,238,232,0.5);
  margin-bottom: 4px;
}
.sess-next-phase-name {
  font-size: 15px;
  font-weight: 700;
  color: rgba(241,238,232,0.92);
  margin-bottom: 4px;
}
.sess-next-phase-meta {
  font-size: 12px;
  color: rgba(241,238,232,0.55);
  margin-bottom: 6px;
}
.sess-next-phase-when {
  font-size: 12px;
  font-weight: 600;
  color: rgba(241,238,232,0.78);
  margin-bottom: 6px;
}
.sess-next-phase-locked {
  font-size: 10px;
  color: rgba(241,238,232,0.4);
  font-style: italic;
}
/* Unlocked state - within 7 days of start. Solid gold border + brighter
   copy so the client knows the preview is now available. Progression
   notes render below the countdown. */
.sess-next-phase--unlocked {
  border-style: solid;
  /* 25 Jun 2026 PM - was gold 0.55. Now a subtle neutral border so the
     unlocked state reads as "available, not loud". Gold only fires when
     the user selects this card (data-expanded=true, the left rail). */
  border-color: rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.015);
  cursor: pointer;
  transition: background 120ms ease;
}
.sess-next-phase--unlocked:hover {
  background: var(--atlas-surface-nested);
  border-color: rgba(255,255,255,0.18);
}

/* 25 Jun 2026 PM3 - selected-state contract moved DOWN to the child session
   level. Parent panel stays neutral chrome whether expanded or not; the gold
   left rail + faint wash now fires on the OPEN session row inside, matching
   how every other Atlas card cluster behaves (supp stack, peptide stack -
   the cluster itself is neutral, the currently-selected row gets gold).
   Harry's 25 Jun feedback: the whole panel highlighted gold was reading as
   "everything is selected", losing the at-a-glance "this one is open" cue. */
.sess-next-phase--unlocked[data-expanded="true"] {
  background: var(--atlas-surface-nested);
  border-color: rgba(255,255,255,0.12);
}
.sess-next-phase--unlocked[data-expanded="true"]:hover {
  background: var(--atlas-surface-card);
  border-color: rgba(255,255,255,0.16);
}
.sess-next-phase--unlocked[data-expanded="true"] .sess-next-phase-name {
  color: #F1EEE8;
}
/* 30 May 2026 PM - expandable inline preview for the Coming-next card.
   When unlocked, the card becomes a button; tapping reveals a sessions
   list, and each session row expands again to show its exercises. Visual
   language stays in the gold "preview" theme so it reads as the same
   surface as the parent card. */
.sess-next-phase-expand {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  color: rgba(241,238,232,0.55);
}
.sess-next-phase-preview {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.sess-next-phase-preview-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(241,238,232,0.45);
  margin-bottom: 8px;
}
.sess-next-phase-session {
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.sess-next-phase-session:hover {
  background: rgba(255,255,255,0.05);
  /* 25 Jun 2026 PM - neutral hover edge (was gold). */
  border-color: rgba(255,255,255,0.14);
}
/* 25 Jun 2026 PM3 - canonical Atlas selected-state on the OPEN session row.
   Matches the supp / peptide / objective row treatment elsewhere: 2px gold
   left rail + a faint gradient wash fading to neutral by 60%. Fires off the
   data-open attribute the click handler sets when the user expands a session
   to see its exercises. Parent panel stays neutral chrome. */
.sess-next-phase-session[data-open="true"] {
  background: linear-gradient(90deg, rgba(212,178,106,0.09), rgba(255,255,255,0.025) 60%);
  border-color: transparent;
  border-left: 2px solid #D4B26A;
}
.sess-next-phase-session[data-open="true"]:hover {
  background: linear-gradient(90deg, rgba(212,178,106,0.12), rgba(255,255,255,0.04) 60%);
}
.sess-next-phase-session[data-open="true"] .sess-next-phase-session-name {
  color: #F4DDA8;
}
.sess-next-phase-session-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 13px;
}
.sess-next-phase-session-day {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(241,238,232,0.55);
  flex-shrink: 0;
  /* 30 May 2026 PM - bumped from 56px → 84px to fit WEDNESDAY without
     bleeding into the session-name column. Letter-spacing 0.8 + 11px font
     gives ~78px for "WEDNESDAY" - 84px keeps a tiny gap before the name. */
  width: 84px;
}
.sess-next-phase-session-name {
  flex: 1;
  color: #F1EEE8;
  font-weight: 600;
}
/* 25 Jul 2026 - cardio prescription summary on the collapsed session row
   ("Z2 · 30 min", "Z5 · 30 min · 4 × 4 min"). A conditioning row used to
   read as just a name with nothing to distinguish it from an unpublished
   session; the summary answers zone / duration / structure at a glance and
   the expanded body carries the full label-value list. */
.sess-next-phase-session-cardio {
  font-size: 11px;
  color: rgba(212,178,106,0.85);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 500;
}
.perf-sess-row-name .sess-next-phase-session-cardio {
  margin-left: 8px;
  font-weight: 400;
}
.sess-next-phase-session-chevron {
  font-size: 12px;
  color: rgba(241,238,232,0.5);
}
.sess-next-phase-session-body {
  padding: 0 12px 12px 12px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.sess-next-phase-exercise {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sess-next-phase-exercise:last-child { border-bottom: none; }
.sess-next-phase-exercise-name {
  color: #F1EEE8;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sess-next-phase-exercise-meta {
  font-size: 12px;
  /* 25 Jun 2026 PM - was rgba(212,178,106,0.85). Demoted to muted cream so
     the meta no longer competes visually with the play button + Ask Atlas CTA
     (which keep their gold). */
  color: rgba(241,238,232,0.6);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
  flex-shrink: 0;
}
/* 25 Jun 2026 - exercise notes line, surfaced on cardio + strength rows when
   the coach supplied Notes. Sits under the name/meta row, dimmer and
   smaller so it reads as detail rather than competing with the prescription. */
.sess-next-phase-exercise-notes {
  padding: 0 0 8px 0;
  font-size: 12px;
  color: rgba(241,238,232,0.62);
  line-height: 1.45;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sess-next-phase-exercise-empty,
.sess-next-phase-cardio-detail,
.sess-next-phase-empty {
  padding: 10px 0;
  font-size: 12px;
  color: rgba(241,238,232,0.6);
  font-style: italic;
}
/* 25 Jun 2026 - per-exercise demo video link (gold play glyph). Padding
   extends the tap area beyond the small glyph for touch.
   2 Jul 2026 PM - fixed trailing column: the button now renders AFTER the
   prescription meta at the row's right edge, so every ▶ in a session sits
   at the same x. Rows without a video get the --slot spacer (same width,
   invisible, non-interactive) so columns stay aligned. */
.sess-next-phase-exercise-video {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin: -4px 0;
  padding: 4px;
  border-radius: 8px;
  font-size: 10px;
  line-height: 1;
  color: #D4B26A;
  text-decoration: none;
  border: 1px solid rgba(212,178,106,0.35);
  background: rgba(212,178,106,0.06);
  transition: background 0.15s, border-color 0.15s;
  touch-action: manipulation;
}
.sess-next-phase-exercise-video:hover {
  background: rgba(212,178,106,0.14);
  border-color: rgba(212,178,106,0.6);
}
/* Empty spacer variant - reserves the play-button column on rows whose
   exercise has no demo video so every ▶ lands at the same x. */
.sess-next-phase-exercise-video--slot {
  border-color: transparent;
  background: transparent;
  pointer-events: none;
  /* Empty element has no text baseline - centre it so the row's baseline
     alignment isn't distorted by the spacer. */
  align-self: center;
}
/* 25 Jun 2026 - "Ask Atlas about this session" CTA at the foot of each
   expanded session body. Gold ghost button matching the protocol/biomarker
   Ask-Atlas buttons elsewhere. */
/* 25 Jun 2026 PM2 - Ask Atlas CTA dialled down from full-gold to a quiet
   neutral ghost button. The gold was firing on every expanded session and
   stacking into a wall of bright affordances. The ✦ star stays as the
   visual identifier but in a softer accent. */
.sess-next-phase-sess-ask {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: rgba(241,238,232,0.78);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sess-next-phase-sess-ask:hover {
  background: var(--atlas-surface-nested);
  border-color: rgba(255,255,255,0.22);
  color: #F1EEE8;
}
.sess-next-phase-sess-ask-star {
  font-size: 13px;
  line-height: 1;
  color: rgba(212,178,106,0.9);
}
.sess-next-phase--unlocked .sess-next-phase-eyebrow {
  /* 25 Jun 2026 PM2 - was gold rgba(212,178,106,0.85). Removed: keeping
     COMING NEXT neutral. The chevron + "Starts in N days" already signal
     availability without needing a gold accent. */
  color: rgba(241,238,232,0.7);
}
.sess-next-phase--unlocked .sess-next-phase-locked {
  color: rgba(241,238,232,0.78);
  font-style: normal;
  font-weight: 600;
}
.sess-next-phase-notes {
  margin: 8px 0 6px;
  padding: 8px 10px;
  background: var(--atlas-surface-nested);
  /* 25 Jun 2026 PM - quieter rail (was gold 0.4). Same family as the
     selected-state rail but at lower alpha so notes blocks don't shout. */
  border-left: 2px solid rgba(255,255,255,0.18);
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(241,238,232,0.75);
  white-space: pre-wrap;
}
.sess-week-count {
  font-size: 12px;
  color: #8F9A98;
  font-weight: 600;
}
.sess-week-hdr-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.sess-week-dots {
  display: flex;
  gap: 4px;
}
.sess-week-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.sess-week-chevron {
  font-size: 14px;
  color: #8F9A98;
}

/* Week body - session rows */
.sess-week-body {
  padding: 0 12px 12px;
}
.sess-week-session {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  margin-bottom: 6px;
  background: var(--atlas-surface-card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s, opacity 0.2s;
  gap: 10px;
}
.sess-week-session:last-child { margin-bottom: 0; }
/* P1.7 - Goals-parity hover state (was rgba(255,255,255,0.04); see live-training section above) */
.sess-week-session:hover {
  background: rgba(91,155,181,0.08);
  border-color: var(--atlas-blue-mid);
}
.sess-week-session-done {
  opacity: 1;
  background: rgba(74,157,107,0.08);
  border-color: rgba(74,157,107,0.3);
}
.sess-week-session-done:hover {
  background: rgba(74,157,107,0.16);
  border-color: rgba(74,157,107,0.45);
}
.sess-week-session-missed {
  background: rgba(196,83,74,0.08);
  border-color: rgba(196,83,74,0.3);
}
/* 30 May 2026 PM - selected-state contract (see
   project_selected_state_visual_contract.md). Today's session - the one
   thing the client needs to act on - gets the canonical 2px gold rail +
   90deg gradient + bright label. Wins over -done / -missed modifiers in
   source order so a Today + Missed row still reads as the active one.
   Width snaps; background animates 120ms ease. */
.sess-week-session-today {
  background: linear-gradient(90deg, rgba(212,178,106,0.10), rgba(255,255,255,0.05) 60%);
  border-color: transparent transparent transparent #D4B26A;
  border-left-width: 2px;
  border-left-style: solid;
  transition: background 120ms ease;
}
.sess-week-session-today:hover {
  background: linear-gradient(90deg, rgba(212,178,106,0.14), rgba(255,255,255,0.06) 60%);
  border-color: transparent transparent transparent #D4B26A;
}
.sess-week-session-today .sess-week-session-name { color: #F4DDA8; }
.sess-week-session-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.sess-week-session-info { flex: 1; min-width: 0; }
.sess-week-session-name {
  font-size: 14px;
  font-weight: 600;
  color: #EEF3F1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sess-week-session-meta {
  font-size: 12px;
  color: #8F9A98;
  margin-top: 2px;
}
.sess-week-session-right {
  flex-shrink: 0;
}

/* Status badges */
.sess-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 24px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sess-status-completed {
  background: rgba(74,157,107,0.12);
  color: #6CD693;
}
.sess-status-missed {
  background: rgba(196,83,74,0.12);
  color: #c4534a;
}
/* "Cut short" - started but not finished. Quieter than Missed: partial work
   is a fact, not a failure. 3 Jul 2026. */
.sess-status-cutshort {
  background: rgba(166,133,50,0.12);
  color: #a68532;
}
.sess-status-upcoming {
  background: rgba(255,255,255,0.06);
  color: #8F9A98;
}
/* BRIEF-85 Step 3 - on-demand: a slot with no session row yet. Muted dashed
   placeholder (the "not-yet-real" affordance), never red. Distinct from the
   solid-fill Upcoming pill. */
.sess-status-notstarted {
  background: transparent;
  color: #6a7280;
  border: 1px dashed rgba(255,255,255,0.16);
  padding: 2px 9px;
}

/* Legacy session cards (keep for backward compat) */
.sess-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sess-card {
  cursor: default;
  overflow: hidden;
  transition: background 120ms ease;
}
/* 31 May 2026 - selected-state visual contract on the expanded session
   card (legacy session list, pre-tracker view). Same gold rail+gradient
   family as everywhere else. */
.sess-card.expanded {
  background: linear-gradient(90deg, rgba(212,178,106,0.10), rgba(255,255,255,0.05) 60%);
  border-left: 2px solid #D4B26A;
}
.sess-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  gap: 12px;
}
.sess-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
/* ═══════════════════════════════════════════════════════════════════════
   SESSION-TYPE VISUAL TOKENS - single source of truth (Brief 75, May 2026)
   ───────────────────────────────────────────────────────────────────────
   Colors mirror js/session-types.js (SESSION_TYPES[*].color). If you edit
   one, edit both. coach-v2.html does NOT load this file, so the same block
   is duplicated in its inline <style> (search "BRIEF 75 DUPLICATE").
   ═══════════════════════════════════════════════════════════════════════ */

/* Pill - Training tab session list, coach builder list */
.sess-type-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 24px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #FFF;
  flex-shrink: 0;
}
.sess-type-strength     { background: #1e5cb8; }
.sess-type-hypertrophy  { background: #4285f4; }
.sess-type-conditioning { background: #14b8a6; }
.sess-type-cardio       { background: #6CD693; }
.sess-type-mobility     { background: #8b5cf6; }
.sess-type-sport        { background: #f59e0b; }
.sess-type-rest         { background: #5a6577; }
/* Legacy GYM fallback for unknown / unmapped types (sessionTypePill default) */
.sess-type-gym          { background: #4285f4; }
/* Coach builder explicit empty-state - distinct from default fallback */
.sess-type-untagged     { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.65); text-transform: none; }

/* Schedule swim-block - Daily / Coach Schedule training anchors */
.sch-swim-block.training-strength     { background: linear-gradient(135deg, rgba(30,92,184,0.18),  rgba(10,14,14,0.40)); border-color: rgba(30,92,184,0.55); }
.sch-swim-block.training-strength     .sch-swim-block-accent { background: #1e5cb8; }
.sch-swim-block.training-hypertrophy  { background: linear-gradient(135deg, rgba(66,133,244,0.18), rgba(10,14,14,0.40)); border-color: rgba(66,133,244,0.55); }
.sch-swim-block.training-hypertrophy  .sch-swim-block-accent { background: #4285f4; }
.sch-swim-block.training-conditioning { background: linear-gradient(135deg, rgba(20,184,166,0.18), rgba(10,14,14,0.40)); border-color: rgba(20,184,166,0.55); }
.sch-swim-block.training-conditioning .sch-swim-block-accent { background: #14b8a6; }
.sch-swim-block.training-cardio       { background: linear-gradient(135deg, rgba(74,157,107,0.18), rgba(10,14,14,0.40)); border-color: rgba(74,157,107,0.55); }
.sch-swim-block.training-cardio       .sch-swim-block-accent { background: #6CD693; }
.sch-swim-block.training-mobility     { background: linear-gradient(135deg, rgba(139,92,246,0.18), rgba(10,14,14,0.40)); border-color: rgba(139,92,246,0.55); }
.sch-swim-block.training-mobility     .sch-swim-block-accent { background: #8b5cf6; }
.sch-swim-block.training-sport        { background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(10,14,14,0.40)); border-color: rgba(245,158,11,0.55); }
.sch-swim-block.training-sport        .sch-swim-block-accent { background: #f59e0b; }
.sch-swim-block.training-rest         { background: linear-gradient(135deg, rgba(90,101,119,0.18), rgba(10,14,14,0.40)); border-color: rgba(90,101,119,0.55); opacity: 0.7; }
.sch-swim-block.training-rest         .sch-swim-block-accent { background: #5a6577; }
/* Neutral fallback when no session type set on a training anchor */
.sch-swim-block.training-neutral      { background: rgba(255,107,107,0.10); border-color: rgba(255,107,107,0.35); }
.sch-swim-block.training-neutral      .sch-swim-block-accent { background: #ff6b6b; }
.sess-card-info { flex: 1; min-width: 0; }
.sess-card-name {
  font-size: 15px;
  font-weight: 600;
  color: #EEF3F1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sess-card-meta {
  display: flex;
  gap: 4px;
  margin-top: 3px;
  font-size: 12px;
  color: #8F9A98;
  flex-wrap: wrap;
}
.sess-card-meta span:not(:last-child)::after {
  content: '·';
  margin-left: 4px;
  color: rgba(255,255,255,0.15);
}
.sess-card-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.sess-chevron {
  color: #8F9A98;
  font-size: 16px;
  transition: transform 0.2s;
}
.sess-card.expanded .sess-chevron { transform: rotate(180deg); }

.sess-card-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.2s;
  padding: 0 16px;
}
.sess-card.expanded .sess-card-detail {
  max-height: 2000px;
  padding: 0 16px 16px;
}

/* Exercise list inside session card */
.sess-exercise-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 16px;
}
.sess-exercise-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sess-exercise-row:last-child { border-bottom: none; }
.sess-ex-group {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  color: #EEF3F1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
}
.sess-ex-group-num {
  background: transparent;
  color: #8F9A98;
  font-size: 12px;
}
.sess-ex-info { flex: 1; min-width: 0; }
.sess-ex-name {
  font-size: 14px;
  font-weight: 600;
  color: #EEF3F1;
}
.sess-ex-rx {
  font-size: 12px;
  color: #8F9A98;
  margin-top: 2px;
}

/* Cardio details inside session card */
.sess-cardio-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.sess-cardio-protocol {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.sess-detail-item {
  padding: 6px 0;
}
.sess-detail-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8F9A98;
  display: block;
  margin-bottom: 2px;
}
.sess-detail-value {
  font-size: 14px;
  font-weight: 600;
  color: #EEF3F1;
}

/* Start Session button */
.sess-start-btn {
  width: 100%;
  padding: 14px;
  background: #263332;
  color: #FFF;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s;
}
.sess-start-btn:hover { background: #2a3a4d; }
.sess-start-btn:active { background: #243333; }

/* Timer button states */
.timer-btn { padding: 10px 0; border: none; border-radius: 12px; font-size: 13px; font-weight: 700; color: #FFF; cursor: pointer; font-family: inherit; transition: background 0.15s, opacity 0.15s, border-color 0.15s; letter-spacing: 0.3px; }
/* P0.2 (28 Apr): timer Start buttons demoted to secondary visual weight so the
 * Complete Session primary CTA at the bottom stays the dominant action. */
.timer-btn-start {
  background: transparent;
  color: var(--atlas-text-muted, #8F9A98);
  border: 1px solid rgba(255,255,255,0.18);
}
.timer-btn-start:hover {
  background: rgba(255,255,255,0.06);
  color: #EEF3F1;
  border-color: rgba(255,255,255,0.32);
}
.timer-btn-pause { background: #c49a3c; }
.timer-btn-pause:hover { background: #b45309; }
.timer-btn-resume { background: #6CD693; }
.timer-btn-resume:hover { background: #3d8a5c; }
.timer-btn-reset { background: #5a6577; }
.timer-btn-reset:hover { background: #8F9A98; }
.timer-btn-danger { background: transparent; color: #c4534a; border: 1px solid rgba(196,83,74,0.3); font-size: 12px; }
.timer-btn-danger:hover { background: rgba(196,83,74,0.15); }
.timer-btn-confirm { background: #c4534a; color: #FFF; font-size: 12px; animation: pulse-red 0.6s ease; }
@keyframes pulse-red { 0%,100%{opacity:1} 50%{opacity:0.7} }

/* Timer grid layout */
.timer-grid { display: grid; gap: 12px; margin-top: 12px; }
.timer-grid-2 { grid-template-columns: 1fr 1fr; }
.timer-grid-1 { grid-template-columns: 1fr; }
/* P0.3 (28 Apr): stack timer + HR grids vertically below 480px so labels and
 * digits stay legible on phone screens. Above 480px, 2-col stays. */
@media (max-width: 479px) {
  .timer-grid-2 { grid-template-columns: 1fr; }
  .cardio-hr-grid { grid-template-columns: 1fr !important; }
}
.cardio-hr-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin-bottom: 16px;
}
.cardio-hr-cell { text-align: center; }
.cardio-hr-cell .drum-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: #8F9A98; font-weight: 600; margin-bottom: 6px;
}
/* P0.4: focus ring on the spinbutton for keyboard users. */
.drum-picker:focus-visible {
  outline: 2px solid rgba(91,155,181,0.6);
  outline-offset: 2px;
  border-radius: 8px;
}
/* P1.7 - bigger touch target on mobile. Drum-item height + drum-pad height
 * adjust together to keep the centre-snap math working in _initDrumPicker
 * (which now reads computed heights at init). */
@media (max-width: 479px) {
  .drum-item { height: 44px; }
  .drum-highlight { height: 44px; }
}

/* P1.2 - Quick-Reference strip: one line of targets, no card surround. */
.cardio-qref {
  margin: 12px 0 0;
  padding: 4px 4px;
  font-size: 13px;
  color: var(--atlas-text-body, #c0c8d4);
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 8px 6px;
}
.cardio-qref-item { font-weight: 600; color: #EEF3F1; }
.cardio-qref-sep { color: var(--atlas-text-faint, #8F9A98); font-weight: 400; }
@media (max-width: 479px) {
  .cardio-qref { font-size: 13px; gap: 4px 6px; }
}

/* P1.6 - missing-cardioType inline warning. */
.cardio-warn {
  margin-top: 12px; padding: 10px 14px;
  background: rgba(196,83,74,0.08);
  border-left: 3px solid rgba(196,83,74,0.6);
  border-radius: 4px;
  font-size: 13px; color: #c4534a; font-weight: 500;
  line-height: 1.5;
}

/* P1.5 - master Start Session button at top of timers card. Primary visual
 * weight; the demoted .timer-btn-start (ghost) below is for fallback / no-intervals. */
.timer-btn-master {
  display: block; width: 100%;
  padding: 14px 0; border: none; border-radius: 12px;
  background: #6CD693; color: #fff;
  font-family: inherit; font-size: 15px; font-weight: 700;
  letter-spacing: 0.4px; cursor: pointer;
  transition: background 0.15s, transform 0.05s;
  -webkit-tap-highlight-color: transparent;
}
.timer-btn-master:hover { background: #3d8a5c; }
.timer-btn-master:active { transform: scale(0.98); }
.timer-btn-master.timer-btn-pause { background: #c49a3c; }
.timer-btn-master.timer-btn-pause:hover { background: #b45309; }
.timer-btn-master.timer-btn-resume { background: #6CD693; }
.cardio-timers-card { padding: 16px; margin-top: 12px; }

/* Protocol details expander - sits at TOP of cardio session detail (above
 * Start Session / timers). Default expanded; user can collapse, stickied per
 * session via sessionStorage. */
.cardio-protocol-expander {
  margin-top: 16px; padding: 0;
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
}
.cardio-protocol-expander > summary {
  list-style: none; cursor: pointer;
  padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--atlas-text-muted, #8F9A98); font-weight: 700;
  -webkit-tap-highlight-color: transparent;
}
.cardio-protocol-expander > summary::-webkit-details-marker { display: none; }
.cardio-protocol-expander[open] > summary { color: #EEF3F1; }
.cardio-protocol-chev { transition: transform 0.15s; font-size: 14px; }
.cardio-protocol-expander[open] .cardio-protocol-chev { transform: rotate(90deg); }
.cardio-protocol-body {
  margin: 0; padding: 0 16px 14px;
  font-size: 13px; line-height: 1.6;
  color: var(--atlas-text-body, #c0c8d4);
  white-space: pre-wrap;
}
/* ── Workout Preview expander on pre-session check-in ────────────────
 * Collapsible card between Today's Data and How Are You Feeling. Lets
 * the client scan the prescribed work without committing to Begin
 * Session. Reuses the .cardio-protocol-expander summary chrome so the
 * pattern stays consistent across surfaces. */
.workout-preview-expander {
  padding: 0;
  border: 1px solid rgba(255,255,255,0.06);
  /* Match the .checkin-card left-side accent so Preview Workout reads as
   * part of the same stack as Today's Data + How Are You Feeling. */
  border-left: 3px solid var(--atlas-blue-mid) !important;
  /* Bumped vertical margins 12 May 2026 - on mobile this card was butting
   * up against the How Are You Feeling card below it. Match the
   * checkin-card spacing rhythm. */
  margin: var(--atlas-space-5) 0 var(--atlas-space-5) 0;
}
@media (max-width: 480px) {
  .workout-preview-expander { margin: var(--atlas-space-4) 0; }
  .subj-chip { height: 48px; font-size: 17px; min-width: 44px; }
  .subj-chips { gap: 4px; }
  .subj-chip-anchor { font-size: 9px; }
}
.workout-preview-summary {
  list-style: none; cursor: pointer;
  padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between;
  -webkit-tap-highlight-color: transparent;
}
.workout-preview-summary::-webkit-details-marker { display: none; }
.workout-preview-label {
  font-size: 14px; font-weight: 700; color: #EEF3F1;
}
.workout-preview-chev {
  font-size: 14px; color: var(--atlas-text-muted, #8F9A98);
  transition: transform 0.15s;
}
.workout-preview-expander[open] .workout-preview-chev { transform: rotate(90deg); }
.workout-preview-body {
  padding: 0 16px 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.workout-preview-list {
  list-style: none; margin: 0; padding: 4px 16px 16px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.workout-preview-ex {
  display: grid; grid-template-columns: 32px 1fr; gap: 12px;
  align-items: start;
  padding: 10px 12px;
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 8px;
}
.workout-preview-ex-order {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--atlas-text-muted, #8F9A98);
  font-variant-numeric: tabular-nums;
}
.workout-preview-ex-main { min-width: 0; }
.workout-preview-ex-name {
  font-size: 14px; font-weight: 700; color: #EEF3F1;
  margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.workout-preview-ex-prescription {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  font-size: 12px; color: var(--atlas-text-body, #c0c8d4);
}
.workout-preview-ex-sep { color: var(--atlas-text-muted, #8F9A98); }
.workout-preview-ex-tags { display: inline-flex; gap: 4px; margin-left: 4px; flex-wrap: wrap; }
.workout-preview-tag {
  display: inline-block;
  padding: 3px 9px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  font-size: 10px; font-weight: 700;
  color: var(--atlas-text-muted, #8F9A98);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.workout-preview-tag--intensifier {
  background: rgba(91,155,181,0.18);
  color: var(--atlas-blue-pale, #a8c5d6);
}
.workout-preview-qref {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  font-size: 13px; color: var(--atlas-text-body, #c0c8d4);
}
.workout-preview-qref-item { font-weight: 600; }
.workout-preview-qref-sep { color: var(--atlas-text-muted, #8F9A98); }
.workout-preview-protocol {
  margin: 0; font-size: 13px; line-height: 1.55;
  color: var(--atlas-text-body, #c0c8d4); white-space: pre-wrap;
}
.workout-preview-coach {
  font-size: 12px; line-height: 1.5;
  color: var(--atlas-text-muted, #8F9A98);
  border-left: 2px solid rgba(91,155,181,0.4);
  padding-left: 10px;
}
@media (max-width: 480px) {
  .workout-preview-ex { grid-template-columns: 28px 1fr; gap: 10px; padding: 8px 10px; }
  .workout-preview-ex-order { width: 24px; height: 24px; font-size: 11px; }
  .workout-preview-ex-name { font-size: 13px; }
  .workout-preview-ex-prescription { font-size: 11px; }
}

.timer-card { background: var(--atlas-surface-card); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 20px 16px; text-align: center; }
.timer-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #8F9A98; margin-bottom: 6px; }
.timer-display { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; color: #EEF3F1; line-height: 1.2; }
.timer-sub { font-size: 12px; color: #8F9A98; margin-top: 4px; }
.timer-actions { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.timer-actions .timer-btn { flex: 1; max-width: 120px; }
.timer-actions-full { margin-top: 8px; text-align: center; }

/* Atlas Score Horizontal Bar */
.atlas-score-bar-track {
  width: 100%;
  height: 10px;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  overflow: hidden;
}
.atlas-score-bar-fill {
  height: 100%;
  border-radius: 8px;
  transition: width 0.6s ease;
}

/* Session Review (completed session details) */
.review-set-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 13px;
}
.review-set-row:last-child { border-bottom: none; }
.review-set-num {
  font-weight: 700;
  color: #8F9A98;
  font-size: 11px;
  min-width: 40px;
}
.review-set-val {
  font-weight: 600;
  color: #EEF3F1;
  min-width: 60px;
}

/* Brief 82 Job 3C - kill iOS Safari pull-to-refresh inside the live session
   view. Pull-to-refresh fires at the document level; overscroll-behavior must
   be applied to html/body. body.session-active is toggled by startSession +
   completeSession in atlas-sections.js. Scoped so it only suppresses the
   refresh gesture during an active workout - every other view keeps native
   browser behaviour. */
body.session-active,
body.session-active html {
  overscroll-behavior-y: contain;
}

/* Brief 82 Job 6B - first-session RPE helper. Rendered above the exercise
   cards when localStorage flag is absent. Quiet, dismissible-by-completion. */
.session-first-time-hint {
  background: var(--atlas-surface-card);
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 2px solid #BA7517;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0 0 14px;
  font-size: 13px;
  color: #a8b2c0;
  line-height: 1.5;
}
.session-first-time-hint b {
  color: #d8dde5;
  font-weight: 600;
}

/* Session Tracker Header */
.sess-tracker-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding: 0 4px;
}
.sess-back-btn {
  padding: 8px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  color: #c0c8d4;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s;
  flex-shrink: 0;
}
.sess-back-btn:hover { background: rgba(255,255,255,0.08); }
.sess-tracker-title {
  font-size: 18px;
  font-weight: 700;
  color: #EEF3F1;
  margin: 0;
}
.sess-tracker-meta {
  font-size: 12px;
  color: #8F9A98;
  margin-top: 2px;
}

/* ── Meal Plan ─────────────────────────────────── */
.meal-slot { margin-bottom: 32px; }
.meal-slot-header {
  font-size: 13px;
  font-weight: 700;
  color: #EEF3F1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
  padding: 10px 16px;
  background: var(--atlas-surface-card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.meal-slot-icon { font-size: 16px; }
.meal-slot-cards { display: flex; flex-direction: column; gap: 18px; }
/* Single-meal-per-slot: centre at max 720px */
.meal-slot-cards > .meal-card-library:only-child,
.meal-slot-cards > .meal-card-v2:only-child {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Nutrition Summary Header ──────────────────── */
.nutrition-summary {
  background: var(--atlas-surface-card);
  border: 1px solid rgba(255,255,255,0.08);
  /* glow replaces border-left */
  border-radius: 16px;
  padding: 22px 20px;
  margin-bottom: 28px;
  transition: border-color 0.2s;
}
.nutrition-summary:hover {
  border-color: rgba(255,255,255,0.1);
  border-left-color: rgba(255,255,255,0.15);
}
.ns-section { margin-bottom: 14px; }
.ns-subheading {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8F9A98;
  margin-bottom: 10px;
}
.nutrition-totals {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.nutrition-totals .nt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.nutrition-totals .nt-val {
  font-size: 14px;
  font-weight: 600;
  color: #8F9A98;
}
.nutrition-totals .nt-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8F9A98;
}
.nutrition-totals .nt-p .nt-val { color: #8F9A98; }
.nutrition-totals .nt-c .nt-val { color: #8F9A98; }
.nutrition-totals .nt-f .nt-val { color: #8F9A98; }
.nutrition-totals .nt-fb .nt-val { color: #8F9A98; }

/* Target macros row */
.nutrition-targets {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.nutrition-targets .nt-target {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.nutrition-targets .nt-target-val {
  font-size: 20px;
  font-weight: 700;
  color: #EEF3F1;
}
.nutrition-targets .nt-target-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8F9A98;
}

/* Macro progress bars */
.macro-progress-row {
  display: flex;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 14px;
}
.macro-prog {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.macro-prog-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8F9A98;
}
.macro-prog-pct {
  font-size: 11px;
  font-weight: 700;
}
.macro-prog-track {
  height: 5px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  overflow: hidden;
}
.macro-prog-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}
/* Muted macro colours */
.macro-prog.mp-kcal .macro-prog-fill { background: rgba(255,255,255,0.1); }
.macro-prog.mp-p .macro-prog-fill { background: rgba(255,255,255,0.15); }
.macro-prog.mp-c .macro-prog-fill { background: rgba(255,255,255,0.08); }
.macro-prog.mp-f .macro-prog-fill { background: rgba(255,255,255,0.06); }

.macro-prog.mp-kcal .macro-prog-pct { color: #8F9A98; }
.macro-prog.mp-p .macro-prog-pct { color: #c0c8d4; }
.macro-prog.mp-c .macro-prog-pct { color: #8F9A98; }
.macro-prog.mp-f .macro-prog-pct { color: #8F9A98; }

/* ±7.5% tolerance - on target = muted green */
.macro-prog-hit .macro-prog-pct { color: #6CD693 !important; }
.macro-prog-hit .macro-prog-fill { background: #6CD693 !important; }
/* Over target outside tolerance = muted warm */
.macro-prog-over .macro-prog-pct { color: #c4534a !important; }
.macro-prog-over .macro-prog-fill { background: #c4534a !important; }

.nutrition-focus {
  font-size: 13px;
  color: #8F9A98;
  line-height: 1.6;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ── Library Meal Cards ────────────────────────── */
.meal-card-library {
  background: var(--atlas-surface-card);
  border: 1px solid rgba(255,255,255,0.08);
  /* glow replaces border-left */
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s;
  min-height: 0;
}
.meal-card-library:hover {
  border-color: rgba(255,255,255,0.1);
}
/* Today meal purple glow - now handled by --glow-rgb in card-glow system */
.lib-meal-img-col {
  width: 100%;
  position: relative;
  overflow: hidden;
  max-height: 400px;
  align-self: flex-start;
}
.lib-meal-hero {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}
.lib-meal-detail-col {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.lib-meal-detail-col .meal-name {
  font-size: 17px;
  font-weight: 700;
  color: #EEF3F1;
  margin: 0;
  line-height: 1.3;
}
.lib-meal-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.lib-meal-tags .tag {
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: #8F9A98;
  letter-spacing: 0.2px;
}

/* ── Stacked macro bars ────────────────────────── */
.macro-bars {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 6px 0;
}
.macro-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.macro-bar-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  width: 52px;
  flex-shrink: 0;
}
.macro-bar-label-p { color: #c0c8d4; }
.macro-bar-label-c { color: #8F9A98; }
.macro-bar-label-f { color: #8F9A98; }
.macro-bar-track {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  overflow: hidden;
}
.macro-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}
.macro-bar-fill-p { background: linear-gradient(90deg, #4a5568, #8F9A98); }
.macro-bar-fill-c { background: linear-gradient(90deg, #5a6577, #8F9A98); }
.macro-bar-fill-f { background: linear-gradient(90deg, rgba(255,255,255,0.15), #5a6577); }
.macro-bar-val {
  font-size: 12px;
  font-weight: 700;
  color: #c0c8d4;
  width: 42px;
  text-align: right;
  flex-shrink: 0;
}
.macro-bar-kcal {
  font-size: 13px;
  font-weight: 700;
  color: #EEF3F1;
  margin-top: 2px;
}
.macro-bar-fibre {
  font-size: 11px;
  color: #8F9A98;
  font-weight: 600;
}

/* ── Ingredient list ───────────────────────────── */
.lib-meal-ingredients {
  margin: 4px 0;
}
.ing-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8F9A98;
  margin-bottom: 4px;
}
.ing-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ing-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  line-height: 1.5;
  padding: 1px 0;
}
.ing-name {
  color: #c0c8d4;
  flex: 1;
  min-width: 0;
}
.ing-amount {
  color: #8F9A98;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
  margin-left: 10px;
  text-align: right;
}

/* ── Recipe & notes ────────────────────────────── */
.lib-meal-recipe {
  margin: 6px 0;
}
.recipe-toggle {
  font-size: 12px;
  font-weight: 600;
  color: #EEF3F1;
  cursor: pointer;
  padding: 6px 0;
  user-select: none;
}
.recipe-toggle:hover {
  color: #c0c8d4;
}
.recipe-content {
  font-size: 12px;
  color: #8F9A98;
  line-height: 1.6;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  white-space: pre-wrap;
  padding-top: 0;
}
.lib-meal-recipe.open .recipe-content {
  max-height: 800px;
  padding-top: 6px;
}

/* Micronutrient breakdown */
.lib-meal-micro { margin-top: 8px; }
.micro-toggle {
  font-size: 12px;
  font-weight: 600;
  color: #EEF3F1;
  cursor: pointer;
  padding: 6px 0;
  user-select: none;
}
.micro-toggle:hover { color: #c0c8d4; }
.micro-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  padding-top: 0;
}
.lib-meal-micro.open .micro-content {
  max-height: 600px;
  padding-top: 6px;
}
.micro-group-label {
  font-size: 11px;
  font-weight: 600;
  color: #8F9A98;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 8px;
  margin-bottom: 4px;
}
.micro-group-label:first-child { margin-top: 0; }
.micro-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 2px 0;
  color: #8F9A98;
}
.micro-name { color: #c0c8d4; }
.micro-val { color: #8F9A98; font-variant-numeric: tabular-nums; }

/* Daily Micronutrient Summary (collapsible) */
.daily-micro-section {
  background: var(--atlas-surface-card);
  border: 1px solid rgba(255,255,255,0.08);
  /* glow replaces border-left */
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 16px;
  transition: border-color 0.2s;
}
.daily-micro-section:hover {
  border-color: rgba(255,255,255,0.1);
  border-left-color: rgba(255,255,255,0.15);
}
.daily-micro-toggle {
  font-size: 13px;
  font-weight: 700;
  color: #EEF3F1;
  cursor: pointer;
  user-select: none;
  padding: 2px 0;
}
.daily-micro-toggle:hover { color: #c0c8d4; }
.daily-micro-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.daily-micro-section.open .daily-micro-content {
  max-height: 1200px;
  padding-top: 10px;
}
.daily-micro-row {
  display: grid;
  grid-template-columns: 120px 65px 1fr 40px;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
}
.daily-micro-name {
  color: #c0c8d4;
  font-weight: 500;
}
.daily-micro-val {
  color: #8F9A98;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.daily-micro-track {
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  overflow: hidden;
}
.daily-micro-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}
.micro-prog-hit { background: #6CD693; }
.micro-prog-partial { background: #c49a3c; }
.micro-prog-low { background: #c4534a; }
.daily-micro-pct {
  font-size: 11px;
  font-weight: 600;
  color: #8F9A98;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.daily-micro-note {
  font-size: 10px;
  color: #8F9A98;
  margin-top: 10px;
  line-height: 1.4;
}
@media (max-width: 480px) {
  .daily-micro-row {
    grid-template-columns: 100px 55px 1fr 36px;
    gap: 6px;
    font-size: 11px;
  }
}

.meal-card-library .meal-notes {
  font-size: 12px;
  color: #8F9A98;
  font-style: italic;
  line-height: 1.5;
}

/* ── Legacy/V2 kept for backward compat ────────── */
.meal-card {
  background: var(--atlas-surface-card);
  border: 1px solid rgba(255,255,255,0.08);
  /* glow replaces border-left */
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.meal-card:hover {
  border-color: rgba(255,255,255,0.1);
  border-left-color: rgba(255,255,255,0.15);
}
.meal-card-body { padding: 14px 16px; }
.meal-name {
  font-size: 16px;
  font-weight: 600;
  color: #EEF3F1;
  margin: 0 0 6px;
}
.meal-macros {
  display: flex;
  gap: 2px;
  margin: 10px 0;
  background: rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 8px 4px;
  justify-content: space-around;
}
.macro { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 48px; }
.macro-val { font-size: 15px; font-weight: 700; color: #EEF3F1; }
.macro-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #8F9A98; }
.macro-p .macro-val { color: #EEF3F1; }
.macro-c .macro-val { color: #c0c8d4; }
.macro-f .macro-val { color: #8F9A98; }
.macro-fb .macro-val { color: #8F9A98; }
.meal-notes { margin-top: 6px; font-size: 12px; color: #8F9A98; font-style: italic; }
.meal-img { width: 100%; height: 140px; background-size: cover; background-position: center; }

/* ── Mobile: stack cards vertically ────────────── */
@media (max-width: 480px) {
  .meal-card-library { flex-direction: column; }
  .lib-meal-img-col { width: 100%; min-height: 160px; border-radius: 16px 16px 0 0; }
  .lib-meal-hero { min-height: 160px; }
  .lib-meal-detail-col { padding: 16px; }
}

/* ── Inline Card Detail Strip (click-to-populate) ── */
.cdi-strip {
  padding: 10px 0 4px;
  margin-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
  animation: cdiIn 0.2s ease;
}
@keyframes cdiIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.cdi-date-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.cdi-date {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #EEF3F1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cdi-fullday {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: #8F9A98;
  background: none;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.15s;
}
.cdi-fullday:hover {
  color: #EEF3F1;
  border-color: #EEF3F1;
  background: rgba(255,255,255,0.06);
}
.cdi-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cdi-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cdi-big {
  font-size: 18px;
  font-weight: 800;
  color: #EEF3F1;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-right: 4px;
}
.cdi-big small {
  font-size: 11px;
  font-weight: 500;
  color: #8F9A98;
}
.cdi-pair {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  min-width: 36px;
}
.cdi-val {
  font-size: 13px;
  font-weight: 700;
  color: #c0c8d4;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.cdi-lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8F9A98;
}

/* ── Outlier dots on charts ──────────────────── */
.chart-svg .outlier-ring {
  fill: none;
  stroke-width: 2;
  stroke-opacity: 0.5;
  pointer-events: none;
}

/* ── Responsive ────────────────────────────────── */
@media (max-width: 480px) {
  .section-hamburger { padding: 6px 10px; font-size: 12px; }
  .hamburger-label { font-size: 11px; }
  .atlas-section { padding: 12px; }
  .atlas-card-header { padding: 12px 14px 6px; }
  .atlas-card-body { padding: 0 14px 12px; }
  .training-stats { flex-direction: column; gap: 4px; }
  .ex-detail-row { flex-direction: column; gap: 2px; }
  .ex-detail-label { width: auto; }
  .meal-macros { gap: 0; padding: 6px 2px; }
  .macro { min-width: 40px; }
  .macro-val { font-size: 13px; }
  .meal-img { height: 110px; }
  .cdi-row { gap: 8px; }
  .cdi-big { font-size: 16px; }
  .cdi-pair { min-width: 30px; }
  .cdi-val { font-size: 12px; }
}

/* ── Settings - Data Sources ────────────────────────── */
.settings-page {
  padding: 24px 20px 48px;
  max-width: 640px;
  margin: 0 auto;
}
.settings-header {
  margin-bottom: 32px;
}
.settings-title {
  font-family: inherit;
  font-weight: 700;
  font-size: 26px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #EEF3F1;
  margin: 0 0 8px;
}
.settings-subtitle {
  font-size: 14px;
  color: #8F9A98;
  margin: 0;
  line-height: 1.5;
}
.ds-category {
  margin-bottom: 28px;
}
.ds-category-title {
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8F9A98;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(255,255,255,0.08);
}
/* Fix 5 (28 Apr): on mobile (≤479px) restack ds-card so logo + name+desc occupy
 * the top row and the Connected pill + Disconnect button sit on a dedicated
 * bottom row. Eliminates the right-side overlap on narrow viewports. */
@media (max-width: 479px) {
  .ds-card {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px 14px;
  }
  .ds-card-action {
    flex-basis: 100%;
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.05);
  }
  .ds-card-action > div {
    width: 100%;
    justify-content: space-between !important;
  }
}
.ds-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 8px;
  border-radius: 12px;
  background: var(--atlas-surface-card);
  border: 1px solid rgba(255,255,255,0.08);
  transition: all 0.2s;
}
.ds-card:last-child {
  margin-bottom: 0;
}
.ds-card-connected {
  background: rgba(74,157,107,0.08);
  border-color: rgba(74,157,107,0.2);
}
.ds-card:not(.ds-card-disabled):hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.ds-card-connected:hover {
  background: rgba(74,157,107,0.12) !important;
  border-color: rgba(74,157,107,0.3) !important;
}
.ds-card-disabled {
  opacity: 0.45;
}
.ds-card-logo {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
}
.ds-card-logo svg {
  width: 48px;
  height: 48px;
  display: block;
}
.ds-device-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
  border-radius: 12px;
}
.ds-svg-fallback {
  display: none;
  width: 48px;
  height: 48px;
}
.ds-svg-fallback svg {
  width: 48px;
  height: 48px;
  display: block;
}
.ds-card-info {
  flex: 1;
  min-width: 0;
}
.ds-card-name {
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  color: #EEF3F1;
  letter-spacing: 0.01em;
}
.ds-card-desc {
  font-size: 13px;
  color: #8F9A98;
  margin-top: 3px;
  line-height: 1.3;
}
.ds-card-action {
  flex-shrink: 0;
  margin-left: auto;
}
.ds-connect-btn {
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 20px;
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background: var(--atlas-surface-card);
  color: #EEF3F1;
  cursor: pointer;
  transition: all 0.2s;
}
.ds-connect-btn:hover {
  border-color: #EEF3F1;
  background: #263332;
  color: #fff;
}
.ds-connected {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  color: #059669;
  background: rgba(74,157,107,0.15);
  padding: 6px 14px;
  border-radius: 24px;
}
.ds-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  display: inline-block;
}
.ds-coming-soon {
  font-family: inherit;
  font-weight: 500;
  font-size: 12px;
  color: #8F9A98;
  background: rgba(255,255,255,0.06);
  padding: 5px 12px;
  border-radius: 24px;
}

/* ── Source Preferences ── */
.ds-pref-subtitle {
  font-family: inherit;
  font-size: 13px;
  color: #8F9A98;
  margin-bottom: 16px;
  line-height: 1.5;
}
.ds-pref-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ds-pref-card {
  display: flex;
  flex-direction: column;
  background: var(--atlas-surface-card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 18px 20px;
  transition: all 0.2s;
}
.ds-pref-card:hover {
  border-color: rgba(255,255,255,0.1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.ds-pref-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ds-pref-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ds-pref-icon {
  font-size: 22px;
  line-height: 1;
}
.ds-pref-label {
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  color: #EEF3F1;
}
.ds-var-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.ds-var-label {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #8F9A98;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ds-var-label strong {
  color: #EEF3F1;
  font-weight: 700;
}
.ds-var-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ds-var-tag {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #c0c8d4;
  background: rgba(255,255,255,0.08);
  padding: 4px 10px;
  border-radius: 8px;
  white-space: nowrap;
}
.ds-save-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.ds-pref-select {
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  background: var(--atlas-surface-card);
  color: #EEF3F1;
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  min-width: 120px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 2.2rem;
  transition: all 0.2s;
}
.ds-pref-select:hover {
  border-color: #8F9A98;
}
.ds-pref-select:focus {
  outline: none;
  border-color: #6366F1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.ds-save-btn {
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  background: #263332;
  color: white;
  border: none;
  border-radius: 12px;
  padding: 12px 28px;
  margin-top: 16px;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.02em;
}
.ds-save-btn:hover { background: #2a3a4d; }
.ds-save-btn:disabled { opacity: 0.4; cursor: default; }
.ds-save-status {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  margin-left: 12px;
}

/* ── Tab Navigation (Recovery / Sleep) ────────────── */
.atlas-tabs {
  display: flex;
  gap: 4px;
  padding: 0 0 16px;
  background: transparent;
}

.atlas-tab {
  padding: 10px 20px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: transparent;
  color: #8F9A98;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  text-align: center;
}

.atlas-tab:hover {
  color: #EEF3F1;
  background: var(--atlas-surface-card);
}

.atlas-tab.active {
  background: rgba(255,255,255,0.08);
  color: #EEF3F1;
  /* glow replaces border-left */
  border-color: rgba(255,255,255,0.08);
  border-left-color: #6CD693;
}

/* ── Tab Panels ──────────────────────────────────── */
.tab-panel {
  display: block;
}

/* ── Expandable Metric Rows ──────────────────────── */
.metric-row {
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 12px 0;
}

.metric-row:last-child {
  border-bottom: none;
}

.metric-row.non-expandable .metric-row-head {
  cursor: default;
}

.metric-row-head {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  padding: 6px 0;
}

.mr-label {
  font-size: 13px;
  font-weight: 500;
  color: #8F9A98;
  min-width: 90px;
  flex-shrink: 0;
}

.mr-val {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #EEF3F1;
  flex: 1;
  text-align: right;
}

.mr-chevron {
  font-size: 18px;
  color: rgba(255,255,255,0.15);
  transition: transform 0.2s;
  flex-shrink: 0;
  min-width: 20px;
  text-align: center;
}

/* C7-RESET-v2 (25 Apr) - metric-row-body is an UN-styled container.
 * Was a chart-wrapping card (12px padding + border + background) which made
 * line-chart parents 24px narrower than bar-chart parents → width drift.
 * Stripped of styling: zero padding, border, background. Visibility toggles
 * via the per-row click handler (display:none by default → display:block on
 * click). DO NOT re-add padding/border/background - that breaks the structural
 * width-parity guarantee. */
.metric-row-body {
  display: none;
  margin-top: 8px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Legacy Metric Nav Pills (kept for backward compat) ────── */
.metric-nav {
  display: flex;
  gap: 6px;
  padding: 0 0 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.metric-nav::-webkit-scrollbar { display: none; }

.metric-pill {
  flex-shrink: 0;
  padding: 7px 16px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--atlas-surface-card);
  color: #8F9A98;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.metric-pill:hover { border-color: #EEF3F1; color: #EEF3F1; }
.metric-pill.active {
  background: #263332;
  color: #fff;
  border-color: #EEF3F1;
}

/* ── Horizontal Progress Bar ─────────────────────── */
.metric-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 10px 0 6px;
}
.metric-bar-track {
  flex: 1;
  height: 24px;
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  overflow: hidden;
}
.metric-bar-fill {
  height: 100%;
  border-radius: 12px;
  transition: width 0.4s ease;
  min-width: 4px;
  background: #263332 !important;
  background-color: #EEF3F1 !important;
  opacity: 1 !important;
  -webkit-appearance: none;
}
.metric-bar-label {
  flex-shrink: 0;
}
.metric-bar-label .big-num {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  color: #EEF3F1;
}

/* ── Unified Card Layout ──────────────────────────── */
.unified-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ucard {
  /* 28 Apr 2026 parity pass: match .atlas-card token signature so Today and
     Nutrition cards render identically - same surface, same border, same radius. */
  background: var(--atlas-surface-card);
  border: 1px solid var(--atlas-border);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  transition: border-color 150ms cubic-bezier(0.22, 1, 0.36, 1),
              background-color 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ucard:hover {
  border-color: var(--atlas-border-strong);
}

.ucard-detail {
  padding: 20px 20px 16px;
}

.ucard-chart {
  /* C4-FIX-C (25 Apr) - was `padding: 0 20px 16px`; outer .atlas-card.is-nested
   * already provides horizontal padding, so this was double-padding the chart
   * and eating ~40px of width. Now horizontal flush; only bottom margin to
   * separate from following content. */
  padding: 0 0 var(--atlas-space-3);
}

.ucard-chart .section-div {
  margin: 0 0 12px;
}

.ucard-chart .chart-wrap {
  border-left: none !important;
  margin: 0;
  padding: 0;
}

.ucard-chart .chart-title {
  display: none; /* title already shown in ucard-detail */
}

.ucard-chart .stats-row {
  padding-top: 8px;
}

.ucard-compact {
  background: var(--atlas-surface-card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 12px 16px;
}

.ucard-compact .chart-wrap {
  border-left: none !important;
  margin: 0;
  padding: 0;
}

/* C7-RESET-v2 (25 Apr) - extended to .atlas-card.today-card so Recovery /
 * Sleep / Activity top-level cards keep the uppercase header treatment. */
.ucard .card-head,
.atlas-card.is-nested .card-head,
.atlas-card.today-card .card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: #8F9A98;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding-bottom: 10px;
}

.ucard .card-head h2,
.atlas-card.is-nested .card-head h2,
.atlas-card.today-card .card-head h2 {
  margin: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8F9A98;
}

/* Stat rows inside unified cards */
.ucard .stat-row-4,
.ucard .stat-grid-2x2 {
  color: #EEF3F1;
}

.ucard .section-div {
  border-top: 1px solid rgba(255,255,255,0.06);
  margin: 10px 0;
}

.ucard .insight {
  color: #8F9A98;
  font-size: 13px;
  line-height: 1.5;
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 14px 16px;
}

/* ── Recovery Zone Summary ────────────────────────── */
.rec-zone-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0 2px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.rzs-item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #8F9A98;
}

.rzs-item::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.rzs-green::before { background: #6CD693; }
.rzs-yellow::before { background: #c49a3c; }
.rzs-red::before { background: #c4534a; }

/* ── Chart tooltip (Atlas DS v1 §5) - elev-2 surface, 8px radius, 10px pad.
 * C7-WHOOP-POLISH-3 item 2 (26 Apr) - was position:fixed (viewport-anchored)
 * which caused the tooltip to drift relative to the chart while user scrolled.
 * Now position:absolute (document-anchored); showTipAt computes top/left in
 * page coordinates (clientY + window.scrollY). Tooltip tracks the dot through
 * scroll. */
.chart-tooltip {
  position: absolute;
  z-index: 9999;
  pointer-events: none;
  background: var(--atlas-bg-elev-2);
  color: var(--atlas-text-body);
  border: 1px solid var(--atlas-border-strong);
  border-radius: 8px;
  padding: var(--atlas-space-3);
  font-family: inherit;
  font-size: var(--atlas-font-caption-size);
  line-height: var(--atlas-font-caption-lh);
  font-weight: var(--atlas-font-caption-weight);
  backdrop-filter: blur(8px);
  max-width: 200px;
  text-align: center;
  transition: opacity 150ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Selected Day Label ───────────────────────────── */
.ucard-date-label {
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8F9A98;
  background: rgba(255,255,255,0.06);
  display: inline-block;
  padding: 3px 10px;
  border-radius: 8px;
  margin-bottom: 8px;
  animation: cdiIn 0.2s ease-out;
}

/* ═══════════════════════════════════════════════════
   PRE-SESSION CHECK-IN
   ═══════════════════════════════════════════════════ */
.checkin-card {
  background: var(--atlas-surface-card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 12px;
}
.checkin-heading {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 14px;
  color: #EEF3F1;
}
.checkin-data-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  text-align: center;
}
.checkin-stat-val {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.2;
}
.checkin-stat-lbl {
  font-size: 11px;
  color: #8F9A98;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

/* Subjective ratings */
.subj-grid { display: flex; flex-direction: column; gap: 12px; }
.subj-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.subj-label {
  font-size: 13px;
  font-weight: 600;
  color: #c0c8d4;
  min-width: 80px;
  flex-shrink: 0;
}
.subj-dots {
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
}
.subj-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.1);
  background: var(--atlas-surface-card);
  color: #8F9A98;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  padding: 0;
  font-family: inherit;
}
.subj-dot:hover {
  border-color: #EEF3F1;
  color: #EEF3F1;
}
.subj-dot.selected {
  background: #263332;
  color: #FFFFFF;
  border-color: #EEF3F1;
}

/* Begin session button */
.begin-session-btn {
  display: block;
  width: 100%;
  padding: 16px;
  background: #263332;
  color: #FFFFFF;
  border: none;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  margin-top: 8px;
}
.begin-session-btn:active {
  transform: scale(0.98);
}
.begin-session-btn:disabled,
.begin-session-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

/* A-1 - Pre-Session AI ─────────────────────────────────────
 * CONFIRM CHECK-IN gate, loader slot, and Today's Focus card.
 * Sits between subjective sliders and BEGIN SESSION. */
.presession-confirm-row { margin: 8px 0 12px; }
.presession-confirm-btn {
  display: block;
  width: 100%;
  padding: 14px 16px;
  background: linear-gradient(180deg, #2b6e4f 0%, #235e44 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
}
.presession-confirm-btn:active { transform: scale(0.98); }
.presession-confirm-btn:disabled {
  cursor: default;
  background: rgba(74,157,107,0.18);
  border-color: rgba(74,157,107,0.3);
  color: #6CD693;
  letter-spacing: 0.4px;
}
.presession-confirm-btn--done {
  background: rgba(74,157,107,0.18);
  border-color: rgba(74,157,107,0.3);
  color: #6CD693;
}

.pre-session-ai-slot { margin: 0 0 14px; }
.pre-focus-card {
  padding: 16px 18px;
  border: 1px solid rgba(74,157,107,0.18);
  background: linear-gradient(180deg, rgba(74,157,107,0.05), rgba(74,157,107,0.01));
  border-radius: 16px;
}
.pre-focus-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.pre-focus-eyebrow {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 800;
  color: #6CD693;
}
.pre-focus-source {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: #8F9A98;
}
.pre-focus-body p {
  margin: 0 0 10px;
  font-size: 14px;
  color: #EEF3F1;
  line-height: 1.55;
}
.pre-focus-body p:last-child { margin-bottom: 0; }
.pre-focus-card--loading { text-align: center; padding: 22px 16px; }
.pre-focus-loader { display: flex; justify-content: center; margin-bottom: 10px; }
.pre-focus-loader-msg {
  font-size: 12px;
  color: #8F9A98;
  letter-spacing: 0.3px;
}
.pre-focus-card--error { border-color: rgba(196,83,74,0.25); background: rgba(196,83,74,0.06); }
.pre-focus-error-msg { font-size: 13px; color: #c4534a; }

/* A-1 - Post-Session AI ─────────────────────────────────────
 * "Session Review" card on the completion screen. Shares chrome
 * with .pre-focus-card but tinted toward the Atlas accent for
 * differentiation. */
.post-review-card {
  padding: 18px 18px;
  border: 1px solid rgba(166,133,50,0.22);
  background: linear-gradient(180deg, rgba(166,133,50,0.06), rgba(166,133,50,0.01));
  border-radius: 16px;
  margin-bottom: 14px;
}
.post-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.post-review-eyebrow {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 800;
  color: #c89c3f;
}
.post-review-source {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: #8F9A98;
}
.post-review-body p {
  margin: 0 0 10px;
  font-size: 14px;
  color: #EEF3F1;
  line-height: 1.55;
}
.post-review-body p:last-child { margin-bottom: 0; }
.post-review-card--loading { text-align: center; padding: 22px 16px; }
.post-review-loader { display: flex; justify-content: center; margin-bottom: 10px; }
.post-review-loader-msg { font-size: 12px; color: #8F9A98; }
.post-review-card--error { border-color: rgba(196,83,74,0.25); background: rgba(196,83,74,0.06); }
.post-review-cta {
  display: inline-block;
  margin-top: 10px;
  padding: 9px 16px;
  background: rgba(74,157,107,0.18);
  color: #6CD693;
  border: 1px solid rgba(74,157,107,0.3);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
}
.post-review-cta:active { transform: scale(0.98); }

/* ═══════════════════════════════════════════════════
   STRUCTURED SESSION SNAPSHOT (22 May 2026)
   Verdict pill · drive levers · per-exercise targets ·
   repeats/fixes · system touchpoint · coach-detail expander.
   Rendered by _renderPreFocusCard / _renderPostReviewInner.
   ═══════════════════════════════════════════════════ */
/* Verdict pill (pre-session) */
.snap-verdict {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 11px 14px;
  border-radius: 12px;
  margin-bottom: 14px;
  border: 1px solid transparent;
}
.snap-verdict-call {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.snap-verdict-why { font-size: 13px; line-height: 1.45; color: #c3ccd8; }
.snap-verdict--push   { background: rgba(74,157,107,0.12);  border-color: rgba(74,157,107,0.32); }
.snap-verdict--push   .snap-verdict-call { color: #5bbE85; }
.snap-verdict--hold   { background: rgba(166,133,50,0.12);  border-color: rgba(166,133,50,0.32); }
.snap-verdict--hold   .snap-verdict-call { color: #d2a73f; }
.snap-verdict--backoff{ background: rgba(196,83,74,0.12);   border-color: rgba(196,83,74,0.34); }
.snap-verdict--backoff .snap-verdict-call { color: #d8675c; }

/* Day metrics strip (readiness ratings) */
.snap-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.snap-metric {
  flex: 1 1 auto;
  min-width: 64px;
  text-align: center;
  padding: 7px 4px;
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
}
.snap-metric-val { display: block; font-size: 16px; font-weight: 700; color: #e8edf2; font-variant-numeric: tabular-nums; }
.snap-metric-lbl { display: block; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7686; margin-top: 2px; }

/* Drive levers */
.snap-drive { list-style: none; margin: 0 0 16px; padding: 0; }
.snap-drive li {
  position: relative;
  padding: 0 0 0 16px;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: #dbe2ea;
}
.snap-drive li:last-child { margin-bottom: 0; }
.snap-drive li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #6CD693;
}

/* Per-exercise targets */
.snap-exercises {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.snap-ex {
  padding: 11px 13px;
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(255,255,255,0.07);
  border-left: 3px solid rgba(74,157,107,0.5);
  border-radius: 12px;
}
.snap-ex-name { font-size: 14px; font-weight: 700; color: #f0f3f7; margin-bottom: 3px; }
.snap-ex-target { font-size: 13px; line-height: 1.45; color: #c9d2dc; }
.snap-ex-cue { font-size: 12px; line-height: 1.4; color: #8F9A98; margin-top: 3px; font-style: italic; }

/* Watch row */
.snap-watch {
  display: flex;
  gap: 9px;
  align-items: baseline;
  padding: 10px 12px;
  background: rgba(166,133,50,0.08);
  border-radius: 12px;
  margin-bottom: 12px;
}
.snap-watch-label {
  flex: 0 0 auto;
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 800;
  color: #d2a73f; padding-top: 1px;
}
.snap-watch-text { font-size: 13px; line-height: 1.45; color: #d7c79a; }

/* Cross-system touchpoint */
.snap-touchpoint {
  display: flex;
  gap: 9px;
  align-items: baseline;
  padding: 11px 13px;
  background: rgba(91,138,222,0.09);
  border: 1px solid rgba(91,138,222,0.18);
  border-radius: 12px;
  margin-bottom: 12px;
}
.snap-touchpoint-label {
  flex: 0 0 auto;
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 800;
  color: #7fa3e6; padding-top: 1px;
}
.snap-touchpoint-text { font-size: 13px; line-height: 1.5; color: #c5d2ea; }

/* 27 Jun 2026 - "The arc" momentum block on the post-session review. The
   bigger-picture trajectory line (where this session sits in the block).
   Gold rail + tint to read as the forward-driving beat, distinct from the
   blue cross-system touchpoint. */
.snap-momentum {
  display: flex;
  gap: 9px;
  align-items: baseline;
  padding: 11px 13px;
  background: rgba(212,178,106,0.08);
  border: 1px solid rgba(212,178,106,0.22);
  border-left: 3px solid #D4B26A;
  border-radius: 12px;
  margin-bottom: 12px;
}
.snap-momentum-label {
  flex: 0 0 auto;
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 800;
  color: #D4B26A; padding-top: 1px;
}
.snap-momentum-text { font-size: 13px; line-height: 1.5; color: #e7d9b8; }

/* 5 Jun 2026 PM - Prescription tile. Sits between verdict and drive
   bullets. Matches the visual rhythm of snap-watch / snap-touchpoint
   (tinted bg + 1px tinted border) so the new block reads as part of the
   same brief, not a foreign module. Gold accent because that's Atlas's
   "this is the prescribed action" colour (Today CTA, week-grid today
   pill, gold-rim selected state). */
.snap-prescription {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: rgba(212,178,106,0.08);
  border: 1px solid rgba(212,178,106,0.25);
  border-radius: 12px;
  margin-bottom: 12px;
}
.snap-prescription-label {
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 800;
  color: #d4b26a;
}
.snap-prescription-head {
  font-size: 15px; font-weight: 600; color: #f1eee8;
  font-variant-numeric: tabular-nums; letter-spacing: 0.2px;
}
.snap-prescription-sub {
  font-size: 13px; color: #b8c3c3; font-variant-numeric: tabular-nums;
}

/* 5 Jun 2026 PM - Schedule drift pill in the pre-focus eyebrow row.
   Only renders when severity ≥ minor and |daysOff| ≥ 2 (life-noise band
   stays silent). Minor = amber, moderate = stronger amber, major = coral
   - matches the rest of the app's state colour conventions. */
.pre-focus-head-right { display: flex; align-items: center; gap: 10px; }
.snap-drift-pill {
  font-size: 10px; letter-spacing: 0.06em; font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  border: 0.5px solid transparent;
}
.snap-drift-pill--minor    { background: rgba(212,178,106,0.16); color: #d4b26a; border-color: rgba(212,178,106,0.40); }
.snap-drift-pill--moderate { background: rgba(239,159,39,0.16);  color: #E8A857; border-color: rgba(239,159,39,0.40); }
.snap-drift-pill--major    { background: rgba(216,90,48,0.16);   color: #f0997b; border-color: rgba(216,90,48,0.45); }

/* Post-session headline + repeat/fix lists */
.snap-headline {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: #f0f3f7;
  margin-bottom: 14px;
}
.snap-list { margin-bottom: 14px; }
.snap-list-label {
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 800;
  margin-bottom: 7px;
}
.snap-list--repeat .snap-list-label { color: #5bbe85; }
.snap-list--fix .snap-list-label { color: #d8675c; }
.snap-list ul { list-style: none; margin: 0; padding: 0; }
.snap-list li {
  position: relative;
  padding: 0 0 0 16px;
  margin-bottom: 7px;
  font-size: 14px;
  line-height: 1.5;
  color: #dbe2ea;
}
.snap-list li:last-child { margin-bottom: 0; }
.snap-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 6px; height: 6px;
  border-radius: 4px;
}
.snap-list--repeat li::before { background: #6CD693; }
.snap-list--fix li::before { background: #c4534a; }

/* Coach-detail expander */
.snap-detail {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 10px;
  margin-top: 4px;
}
.snap-detail-summary {
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: #8F9A98;
  list-style: none;
  user-select: none;
  padding: 2px 0;
}
.snap-detail-summary::-webkit-details-marker { display: none; }
.snap-detail-summary::after { content: "  ↓"; color: #8F9A98; }
.snap-detail[open] .snap-detail-summary::after { content: "  ↑"; }
.snap-detail-body { margin-top: 10px; }
.snap-detail-body p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.6;
  color: #c3ccd8;
}
.snap-detail-body p:last-child { margin-bottom: 0; }

/* Session pills - Full / Reduced / Rest (autoregulation) */
.snap-pills {
  display: flex;
  gap: 8px;
  margin: 0 0 4px;
}
.snap-pill {
  flex: 1 1 0;
  padding: 11px 8px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,0.1);
  background: var(--atlas-surface-nested);
  color: #c3ccd8;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.snap-pill:active { transform: scale(0.98); }
.snap-pill .snap-pill-title { display: block; }
.snap-pill .snap-pill-sub {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: #6b7686;
  margin-top: 2px;
  letter-spacing: 0.2px;
}
.snap-pill--active { border-color: rgba(74,157,107,0.55); background: rgba(74,157,107,0.14); color: #e8edf2; }
.snap-pill--active .snap-pill-sub { color: #9fc7b0; }
.snap-pill-rec {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(74,157,107,0.22);
  color: #5bbe85;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}
.snap-pills-eyebrow {
  font-size: 11px; letter-spacing: 0.4px; font-weight: 600;
  color: #8F9A98; margin: 18px 0 9px;
}
.snap-pills-eyebrow strong { color: #cdd5df; font-weight: 800; }
#session-mode-slot { display: block; }

/* Per-exercise Atlas target on the tracker card.
   4 Jun 2026 - Brief 1: 13px side padding (+1px border) lands the label
   text on the card's shared 14px left axis, same as the .ex-execute
   variant and the set table gutter below. */
.ex-atlas-target {
  padding: 10px 13px;
  margin-bottom: 12px;
  background: rgba(74,157,107,0.08);
  border: 1px solid rgba(74,157,107,0.22);
  border-radius: 12px;
}
.ex-atlas-target-label {
  display: block;
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 800;
  color: #5bbe85; margin-bottom: 4px;
}
.ex-atlas-target-text { display: block; font-size: 13px; line-height: 1.45; color: #dbe7e0; }
.ex-atlas-target-cue { display: block; font-size: 12px; line-height: 1.4; color: #8fa89a; margin-top: 3px; font-style: italic; }

/* ════════════════════════════════════════════════════════════════════
   2 Jun 2026 - Stage 3 of the new session-flow build.
   Per-exercise execution coaching. Replaces the generic single-line
   Atlas target with a Last / Today / Bail stack populated from Sonnet
   on session open. Lives inside .ex-atlas-target so the existing card
   chrome stays consistent.
   ════════════════════════════════════════════════════════════════════ */
.ex-atlas-target.ex-execute { padding: 11px 13px 12px; }
.ex-execute-stack { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.ex-execute-line {
  display: grid;
  /* 4 Jun 2026 - Brief 1: label column + gap mirror the set table's
     .set-num column (40px + 6px) so LAST/TODAY text aligns with the
     WEIGHT inputs below. */
  grid-template-columns: 40px 1fr;
  gap: 6px;
  align-items: baseline;
}
.ex-execute-label {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8fa89a;
  font-weight: 700;
  padding-top: 1px;
}
.ex-execute-text {
  font-size: 13px;
  line-height: 1.45;
  color: #c6d2cc;
}
/* Today is the eye-catcher - slightly brighter + heavier weight. */
.ex-execute-line-primary .ex-execute-text {
  color: #ffffff;
  font-weight: 500;
}
.ex-execute-line-primary .ex-execute-label { color: #5bbe85; }

/* Session-level recovery headline banner - sits above the exercise
   cards. Single line, recovery-led ("Cleared to push. HRV up 11%."). */
.perf-sess-headline {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  margin: 0 0 14px;
  background: rgba(74,157,107,0.10);
  border: 1px solid rgba(74,157,107,0.28);
  border-left: 3px solid rgba(91,190,133,0.7);
  border-radius: 12px;
}
.perf-sess-headline-tag {
  flex: 0 0 auto;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: #5bbe85;
  padding-top: 2px;
}
.perf-sess-headline-text {
  flex: 1;
  font-size: 13px;
  line-height: 1.45;
  color: #e8eae6;
  font-weight: 500;
}

/* Card spacing - give the stacked session cards consistent breathing room
   (Harry 22 May: "the cards need spacing too"). */
.pre-session-ai-slot,
#pre-session-ai-slot { display: block; margin-top: 16px; }
.pre-focus-card { margin-bottom: 16px; }
.session-complete-summary { margin-top: 16px; }

/* ═══════════════════════════════════════════════════
   NEXT EXERCISE BUTTON + COMPLETED STATE
   Brief 83 (5 Jun 2026) - `next-exercise-btn` replaced by `ex-done-toggle`.
   Old class kept defined for any in-flight DOM during the rollout.
   ═══════════════════════════════════════════════════ */
.next-exercise-btn,
.ex-done-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px;
  background: #263332;
  color: #FFFFFF;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  font-family: inherit;
  margin-top: 14px;
  transition: background 0.18s, opacity 0.18s, transform 0.06s;
}
.next-exercise-btn:active,
.ex-done-toggle:active { transform: scale(0.98); }
.next-exercise-btn.saving,
.ex-done-toggle.saving { opacity: 0.6; pointer-events: none; }
.next-exercise-btn.saved,
.ex-done-toggle.saved {
  background: #2f5a44;
  color: #6CD693;
}
.ex-done-toggle .ex-done-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.32);
  color: transparent;
  font-size: 12px;
  line-height: 1;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.ex-done-toggle.saved .ex-done-icon {
  background: #6CD693;
  border-color: #6CD693;
  color: #1c2a26;
}
/* Brief 83 - when a card is marked done, the toggle still lives in the
   collapsed detail; on re-expand it reads "Reopen to edit" and switches
   to a muted hairline treatment so it doesn't compete with the summary. */
.ex-card.ex-completed .ex-done-toggle {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: #c8d4d2;
}
.ex-card.ex-completed .ex-done-toggle .ex-done-icon {
  background: #6CD693;
  border-color: #6CD693;
  color: #1c2a26;
}

/* Brief 83 - four card states are visually distinct:
   1) untouched: default
   2) in-progress (amber rail): at least one set logged, not marked done
   3) active (gold rail): driven by existing .ex-card-current
   4) done: opacity drop + collapsed + green check on the header */
.ex-card { position: relative; }
.ex-card.ex-in-progress::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: #BA7517;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}
.ex-card.ex-completed.ex-in-progress::before { display: none; }

.ex-card.ex-completed {
  opacity: 0.6;
}
.ex-card.ex-completed .ex-card-top { pointer-events: auto; }
.ex-card.ex-completed:not(.expanded) .ex-card-top::after {
  content: '✓';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #6CD693;
  font-size: 16px;
  font-weight: 600;
}
.ex-card.ex-completed.expanded { opacity: 1; }

/* ═══════════════════════════════════════════════════
   EXERCISE NOTES
   ═══════════════════════════════════════════════════ */
.ex-notes-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.ex-notes-input {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  color: #EEF3F1;
  background: var(--atlas-surface-card);
  resize: vertical;
  min-height: 44px;
  box-sizing: border-box;
}
.ex-notes-input::placeholder { color: #8F9A98; }
.ex-notes-input:focus {
  outline: none;
  border-color: #EEF3F1;
  background: var(--atlas-surface-card);
}

/* ═══════════════════════════════════════════════════
   SESSION NOTES + COMPLETE BUTTON
   ═══════════════════════════════════════════════════ */
.session-notes-card {
  background: var(--atlas-surface-card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 20px;
  margin-top: 16px;
}
.session-notes-input {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  font-family: inherit;
  color: #EEF3F1;
  background: var(--atlas-surface-card);
  resize: vertical;
  min-height: 80px;
  box-sizing: border-box;
}
.session-notes-input::placeholder { color: #8F9A98; }
.session-notes-input:focus {
  outline: none;
  border-color: #EEF3F1;
  background: var(--atlas-surface-card);
}
.complete-session-btn {
  display: block;
  width: 100%;
  padding: 18px;
  background: #263332;
  color: #FFFFFF;
  border: none;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  margin-top: 16px;
  margin-bottom: 32px;
  transition: opacity 0.2s;
}
.complete-session-btn:active {
  transform: scale(0.98);
}
.complete-session-btn.saving {
  opacity: 0.6;
  pointer-events: none;
}
.complete-session-btn.completed {
  background: #6CD693;
  pointer-events: none;
}
.session-complete-summary {
  background: var(--atlas-surface-card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  margin-top: 16px;
  margin-bottom: 32px;
}

/* ═══════════════════════════════════════════════════
   PREVIOUS PERFORMANCE DROPDOWN
   ═══════════════════════════════════════════════════ */
.prev-perf-toggle {
  margin-top: 12px;
  padding: 10px 0 4px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 13px;
  font-weight: 600;
  color: #8F9A98;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.prev-perf-toggle:hover { color: #EEF3F1; }
.prev-perf-chevron { font-size: 11px; transition: transform 0.15s; }
.prev-perf-body { padding: 8px 0 4px; }
.prev-perf-loading, .prev-perf-empty {
  font-size: 12px;
  color: #8F9A98;
  padding: 6px 0;
}
.prev-session-block {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.prev-session-block:last-child { border-bottom: none; margin-bottom: 0; }
.prev-session-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.prev-session-date {
  font-size: 12px;
  font-weight: 700;
  color: #EEF3F1;
}
.prev-session-vol {
  font-size: 11px;
  color: #8F9A98;
  font-weight: 600;
}
.prev-set-row {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #c0c8d4;
  padding: 2px 0;
}
.prev-set-num {
  width: 18px;
  color: #8F9A98;
  font-weight: 600;
  flex-shrink: 0;
}
.prev-set-val {
  min-width: 55px;
}

/* Previous Performance - multi-session history (28 Apr 2026).
   Most recent session full opacity; older sessions muted to give the
   eye a clear "now → then" gradient. Body becomes scrollable past 5 if
   the limit ever bumps server-side. Date headers get an accent stripe
   so the user can scan progression at a glance. */
.prev-perf-body {
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.prev-session-hdr {
  border-left: 2px solid var(--atlas-blue-mid);
  padding-left: 8px;
}
.prev-session-block--older { opacity: 0.62; }
.prev-session-block--older .prev-session-hdr {
  border-left-color: rgba(255,255,255,0.14);
}
.prev-session-block--older .prev-session-date { font-weight: 600; }

/* ═══════════════════════════════════════════════════
   Brief 83 Job 5A - Previous Values inline (above input rows)
   Sits between Atlas target and the set-log-section so reading order
   is Atlas target → Last time → This time. Auto-hydrates on first card
   expand; older sessions stay behind "Show full history" so the lede is
   the most recent session.
   ═══════════════════════════════════════════════════ */
.prev-perf-inline {
  margin: 10px 0 14px;
  padding: 10px 12px;
  background: var(--atlas-surface-nested);
  border-radius: 8px;
  border-left: 2px solid rgba(255,255,255,0.08);
}
.prev-perf-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8F9A98;
  margin-bottom: 6px;
  font-weight: 700;
}
.prev-perf-inline .prev-perf-body {
  max-height: none;
  overflow: visible;
  padding: 0;
}
.prev-perf-inline .prev-perf-session {
  font-size: 13px;
  color: #c0c8d4;
  line-height: 1.5;
}
.prev-perf-inline .prev-perf-session + .prev-perf-session {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.prev-perf-inline .prev-perf-session-older { opacity: 0.6; }
/* 3 Jul 2026 - LAST TIME entries from a DIFFERENT session (the same lift
   lives in two weekly sessions). Visually secondary so the eye lands on the
   same-session comparison first; the date line carries the muted
   "Lower A · 24 Jun" label from the renderer. */
.prev-perf-inline .prev-perf-session-xsession { opacity: 0.55; }
.prev-perf-inline .prev-perf-session-xsession .prev-perf-session-date { font-weight: 500; }
.prev-perf-session-date {
  font-size: 11px;
  color: #8F9A98;
  margin-bottom: 3px;
  font-weight: 600;
}
.prev-perf-sets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-variant-numeric: tabular-nums;
}
.prev-perf-set { white-space: nowrap; }
.prev-perf-history-btn {
  margin-top: 10px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  font-size: 12px;
  color: #c0c8d4;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.prev-perf-history-btn:hover {
  background: var(--atlas-surface-card);
  border-color: rgba(255,255,255,0.22);
}
.prev-perf-inline .prev-perf-empty {
  padding: 0;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════
   ATLAS SESSION SCORE
   ═══════════════════════════════════════════════════ */
.atlas-score-ring {
  position: relative;
  width: 120px;
  height: 120px;
}
.atlas-score-num {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
}
.atlas-score-stats {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.atlas-score-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.atlas-score-stat-val {
  font-size: 15px;
  font-weight: 700;
  color: #EEF3F1;
}
.atlas-score-stat-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8F9A98;
}

/* ═══════════════════════════════════════════════════
   ATLAS SCORE TREND CHART
   ═══════════════════════════════════════════════════ */
.as-trend-chart {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  min-height: 160px;
  padding-top: 8px;
}
.as-trend-bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.as-trend-val {
  font-size: 10px;
  font-weight: 700;
  color: #c0c8d4;
}
.as-trend-bar {
  width: 100%;
  max-width: 28px;
  border-radius: 4px 4px 0 0;
  min-height: 4px;
  transition: height 0.3s ease;
}
.as-trend-lbl {
  font-size: 9px;
  color: #8F9A98;
  white-space: nowrap;
}

/* ── Cardio Tracker ────────────────────────────────── */
.cardio-field { display:flex; flex-direction:column; gap:4px; }
.cardio-field label { font-size:11px; text-transform:uppercase; letter-spacing: 0.06em; color:#8F9A98; font-weight:600; }
.cardio-field input { padding:10px 12px; border:1.5px solid rgba(255,255,255,0.08); border-radius:12px; font-size:15px; font-weight:600; color:#EEF3F1; background:var(--atlas-surface-card); transition:border-color 0.15s; -webkit-appearance:none; -moz-appearance:textfield; }
.cardio-field input::-webkit-inner-spin-button, .cardio-field input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.cardio-field input:focus { border-color:#263332; outline:none; background:var(--atlas-surface-card); }
.cardio-field input::placeholder { color:rgba(255,255,255,0.15); font-weight:400; }

/* Today / Yesterday retroactive log toggle - used on both cardio + gym
 * complete cards. Yesterday reveals a time input below so the back-logged
 * session lands on the right day at a plausible time. 16 May 2026. */
.cardio-when-toggle { display: flex; gap: 8px; }
.cardio-when-btn {
  flex: 1; padding: 10px 14px; border-radius: 12px; font-family: inherit;
  font-size: 13px; font-weight: 600; cursor: pointer;
  background: var(--atlas-surface-card); border: 1.5px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6); transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.cardio-when-btn:hover { border-color: rgba(212,178,106,0.3); color: #F1EEE8; }
.cardio-when-btn.is-selected {
  background: rgba(212,178,106,0.12);
  border-color: rgba(212,178,106,0.5);
  color: #D4B26A;
}
.cardio-when-time-wrap input[type="time"] {
  padding: 8px 12px; border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,0.08);
  background: var(--atlas-surface-card); color: #EEF3F1;
  font-family: inherit; font-size: 14px; color-scheme: dark;
  margin-top: 4px;
}
/* Cardio session protocol descriptor (16 May 2026, v2). Plain-English
 * labelled sections - the work, effort target, how, why - so the client
 * can read it like a coach's note. RPE values >10 are treated as %MaxHR
 * with a zone descriptor ("threshold zone - hard but sustainable"). */
.cardio-protocol-card { border: 1px solid rgba(212,178,106,0.25); background: rgba(212,178,106,0.04); }
.cardio-protocol-ex { padding: 10px 0; border-top: 1px solid rgba(255,255,255,0.06); display: flex; flex-direction: column; gap: 4px; }
.cardio-protocol-ex:first-child { border-top: 0; padding-top: 0; }
.cardio-protocol-ex-name { font-size: 14px; font-weight: 700; color: #F1EEE8; margin-bottom: 2px; }
.cardio-protocol-ex-summary { font-size: 13px; color: rgba(255,255,255,0.72); font-style: italic; margin-bottom: 4px; }
.cardio-protocol-ex-row { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: baseline; padding: 2px 0; }
.cardio-protocol-ex-label { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #D4B26A; }
.cardio-protocol-ex-val { font-size: 13px; color: rgba(255,255,255,0.85); line-height: 1.5; }
/* Preview session card variant - same renderer, slightly tighter padding */
.workout-preview-prescription { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.05); }

.cardio-when-datetime-wrap { display: flex; gap: 10px; }
.cardio-when-datetime-wrap input[type="date"],
.cardio-when-datetime-wrap input[type="time"] {
  width: 100%; padding: 8px 12px; border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,0.08);
  background: var(--atlas-surface-card); color: #EEF3F1;
  font-family: inherit; font-size: 14px; color-scheme: dark;
}

/* Drum scroll picker */
.drum-picker-wrap { display:flex; flex-direction:column; align-items:center; gap:2px; }
.drum-picker-wrap .drum-label { font-size:11px; text-transform:uppercase; letter-spacing: 0.06em; color:#8F9A98; font-weight:600; }
.drum-picker { position:relative; height:150px; overflow:hidden; border-radius:12px; background:var(--atlas-surface-card); border:1.5px solid rgba(255,255,255,0.08); width:100%; }
.drum-scroll { height:100%; overflow-y:scroll; scroll-snap-type:y mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.drum-scroll::-webkit-scrollbar { display:none; }
.drum-pad { height:56px; flex-shrink:0; }
.drum-item { height:38px; display:flex; align-items:center; justify-content:center; scroll-snap-align:center; font-variant-numeric:tabular-nums; transition:color 0.08s,font-size 0.08s; color:rgba(255,255,255,0.15); font-size:16px; font-weight:500; }
.drum-highlight { position:absolute; top:50%; left:8%; right:8%; height:38px; transform:translateY(-50%); border-top:1.5px solid rgba(255,255,255,0.08); border-bottom:1.5px solid rgba(255,255,255,0.08); pointer-events:none; z-index:1; }
.drum-fade-top { position:absolute; top:0; left:0; right:0; height:50px; background:linear-gradient(to bottom,rgba(255,255,255,0.04),transparent); pointer-events:none; z-index:2; }
.drum-fade-bot { position:absolute; bottom:0; left:0; right:0; height:50px; background:linear-gradient(to top,rgba(255,255,255,0.04),transparent); pointer-events:none; z-index:2; }
.drum-suffix { font-size:11px; text-transform:uppercase; letter-spacing: 0.06em; color:#8F9A98; text-align:center; margin-top:2px; font-weight:600; }

/* RPE slider - P1.3 (28 Apr) - replaces the round-button row. Native range input
 * with gradient track (green→amber→red), live value display above the thumb. */
.rpe-selector { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.rpe-pill { width:36px; height:36px; border-radius:50%; border:1.5px solid rgba(255,255,255,0.08); background:var(--atlas-surface-card); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#8F9A98; cursor:pointer; transition:all 0.15s; -webkit-tap-highlight-color:transparent; }
.rpe-pill.rpe-active { background:#263332; color:#fff; border-color:#263332; }
.rpe-pill:active { transform:scale(0.92); }
.rpe-slider-wrap {
  margin-bottom: 16px;
  padding: 0 4px;
}
.rpe-slider-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
}
.rpe-slider-eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: #8F9A98; font-weight: 600;
}
.rpe-slider-value {
  font-size: 28px; font-weight: 800; color: #EEF3F1;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.rpe-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 14px; border-radius: 8px;
  background: linear-gradient(to right,
    #6CD693 0%, #6CD693 25%,
    #d4a94e 26%, #d4a94e 65%,
    #c4534a 66%, #c4534a 100%);
  outline: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  margin: 4px 0 8px;
}
.rpe-slider:focus-visible {
  outline: 2px solid rgba(91,155,181,0.6); outline-offset: 4px;
}
.rpe-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: #fff;
  border: 3px solid rgba(0,0,0,0.4);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  cursor: grab;
}
.rpe-slider::-webkit-slider-thumb:active { cursor: grabbing; }
.rpe-slider::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: 50%;
  background: #fff;
  border: 3px solid rgba(0,0,0,0.4);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  cursor: grab;
}
.rpe-slider::-moz-range-track {
  height: 14px; border-radius: 8px;
  background: linear-gradient(to right,
    #6CD693 0%, #6CD693 25%,
    #d4a94e 26%, #d4a94e 65%,
    #c4534a 66%, #c4534a 100%);
}
.rpe-slider-anchors {
  display: flex; justify-content: space-between;
  margin-top: 8px; padding: 0 4px;
}
.rpe-slider-anchors > span {
  display: flex; flex-direction: column; align-items: center;
  font-size: 11px; color: #8F9A98; line-height: 1.2;
}
.rpe-slider-anchors strong {
  font-size: 12px; font-weight: 700; color: #8F9A98;
}
.rpe-slider-anchors small {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: #8F9A98; font-weight: 600; margin-top: 2px;
}

/* Subjective sliders for Pre-Session Check-In (Mood / Soreness / etc.) - same
 * shape as RPE but neutral grey track (these aren't intensity-coded). */
.subj-row {
  margin-bottom: 18px; padding: 0 4px;
}
.subj-row:last-child { margin-bottom: 0; }
.subj-row-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 6px;
}
.subj-label {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--atlas-text-muted, #8F9A98); font-weight: 600;
}
.subj-value {
  font-size: 22px; font-weight: 800; color: #EEF3F1;
  font-variant-numeric: tabular-nums; line-height: 1;
  transition: color 0.15s, opacity 0.15s;
}
.subj-value--default {
  color: var(--atlas-text-faint, #8F9A98);
  opacity: 0.6;
}
.subj-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 14px; border-radius: 8px;
  background: linear-gradient(to right, rgba(91,155,181,0.4) 0%, rgba(91,155,181,0.6) 100%);
  outline: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  margin: 4px 0 6px;
  touch-action: pan-x; /* let horizontal drag through; ignore vertical scroll attempts on the thumb */
}
.subj-slider:focus-visible { outline: 2px solid rgba(91,155,181,0.6); outline-offset: 4px; }
.subj-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: #fff; border: 3px solid rgba(0,0,0,0.4);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  cursor: grab;
}
.subj-slider::-webkit-slider-thumb:active { cursor: grabbing; }
.subj-slider::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: 50%;
  background: #fff; border: 3px solid rgba(0,0,0,0.4);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4); cursor: grab;
}
.subj-slider::-moz-range-track {
  height: 14px; border-radius: 8px;
  background: linear-gradient(to right, rgba(91,155,181,0.4) 0%, rgba(91,155,181,0.6) 100%);
}
/* Mobile: ensure each step is comfortably wider than a fingertip. With 10
 * steps on a 320px-ish track, each step is ~32px - safe. The +2 thumb size
 * + touch-action above eliminate the perceived 2-step jumps. */
@media (max-width: 479px) {
  .subj-slider { height: 16px; }
  .subj-slider::-webkit-slider-thumb { width: 32px; height: 32px; }
  .subj-slider::-moz-range-thumb { width: 32px; height: 32px; }
  .subj-slider::-moz-range-track { height: 16px; }
}
/* Re-investigation Fix 2 (28 Apr): the previous flex + space-between layout
 * collapsed labels to the left because flex math + padding mismatch. Switched
 * to a 3-column grid with per-column text-align - "1" sits at the slider's
 * left edge, "3" centered, "5" at the right edge, regardless of label length. */
.subj-anchors {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 4px;
  padding: 0;
}
.subj-anchors > span {
  font-size: 10px; color: #8F9A98; line-height: 1.2;
}
.subj-anchors > span:nth-child(1) { text-align: left; }
.subj-anchors > span:nth-child(2) { text-align: center; }
.subj-anchors > span:nth-child(3) { text-align: right; }
.subj-anchors strong {
  display: block;
  font-size: 11px; font-weight: 700; color: #8F9A98;
}
.subj-anchors small {
  display: block;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: #8F9A98; font-weight: 600; margin-top: 1px;
}

/* ── Cardio RPE chip selector (replaces native range slider, 10 May 2026) ──
 * Chips sit in a 10-column grid so anchor labels (Easy / Moderate / Hard / Max)
 * align perfectly under chips 1, 5, 7, 10 - fixes the slider-thumb-vs-anchor
 * misalignment the old <input type="range"> had. Default state = no chip
 * selected; head shows "Tap to rate" placeholder. */
.rpe-chip-wrap { padding: 0 4px; }
.rpe-chip-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
}
.rpe-chip-eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: #8F9A98; font-weight: 600;
}
.rpe-chip-value {
  font-size: 22px; font-weight: 800; color: #EEF3F1;
  font-variant-numeric: tabular-nums; line-height: 1;
  transition: color 0.15s, font-size 0.15s;
}
.rpe-chip-value.is-empty {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: #8F9A98; /* WCAG AA - was #8F9A98 (~3.6:1, fail) */
}
.rpe-chips {
  display: grid; grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  -webkit-tap-highlight-color: transparent;
}
.rpe-chip {
  height: 44px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--atlas-surface-card);
  color: #c4cad3;
  font-family: inherit; font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform 120ms ease, background 120ms ease,
              border-color 120ms ease, color 120ms ease;
}
.rpe-chip:hover { border-color: rgba(91,155,181,0.5); }
.rpe-chip:focus-visible {
  outline: 2px solid rgba(91,155,181,0.6); outline-offset: 2px;
}
.rpe-chip:active { transform: scale(0.94); }
/* Zone tints - subtle text colour cue on unselected chips so the gradient is
 * still readable. Selected chip overrides with full-fill backgrounds below. */
.rpe-chip--easy { color: #74c69d; }
.rpe-chip--mod  { color: #d4a94e; }
.rpe-chip--hard { color: #ff7a59; }
.rpe-chip--max  { color: #ff5b4a; }
.rpe-chip.is-selected {
  color: #fff;
  transform: scale(1.06);
  border-color: transparent;
}
.rpe-chip--easy.is-selected { background: #2d8a59; }
.rpe-chip--mod.is-selected  { background: #b88a25; }
.rpe-chip--hard.is-selected { background: #c5563a; }
.rpe-chip--max.is-selected  { background: #b3422f; }
.rpe-chip-anchors {
  display: grid; grid-template-columns: repeat(10, 1fr);
  margin-top: 8px;
}
.rpe-chip-anchor {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: #8F9A98; text-align: center;
}
.rpe-anchor-1  { grid-column: 1; }
.rpe-anchor-5  { grid-column: 5; }
.rpe-anchor-7  { grid-column: 7; }
.rpe-anchor-10 { grid-column: 10; }
@media (max-width: 480px) {
  .rpe-chip { height: 40px; font-size: 14px; border-radius: 8px; }
  .rpe-chips { gap: 3px; }
  .rpe-chip-anchor { font-size: 9px; }
}
@media (max-width: 360px) {
  .rpe-chip { height: 38px; font-size: 13px; }
  .rpe-chips { gap: 2px; }
}

/* ── Subjective chip selector (Pre-Session Check-In, 10 May 2026) ──
 * 5 chips per metric (Mood / Soreness / Fatigue / Energy / Readiness /
 * Hydration). Default = no chip selected, value-pill shows em-dash so
 * unrated metrics are obvious.
 *
 * Override the legacy `.subj-row { display: flex }` from line 4208 so the
 * chip grid can span full width instead of being squashed into ~120px. */
.subj-row { display: block !important; padding: 0 4px; }
.subj-row + .subj-row { margin-top: 18px; }
.subj-row-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
}
.subj-chips, .flag-chips {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}
/* Flag check - illness + stress rows in the pre-session check-in */
.flag-grid { display: flex; flex-direction: column; gap: 12px; }
.flag-row { display: flex; flex-direction: column; }
.flag-why {
  width: 100%; box-sizing: border-box; margin-top: 8px;
  background: rgba(0,0,0,0.28); border: 1px solid rgba(196,83,74,0.35);
  border-radius: 8px; padding: 8px 10px; color: #f1eee8;
  font-family: inherit; font-size: 13px; resize: vertical;
}
.flag-why:focus { outline: none; border-color: rgba(196,83,74,0.6); }
.flag-why::placeholder { color: rgba(255,255,255,0.3); }
.subj-chip {
  height: 48px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--atlas-surface-card);
  color: #c4cad3;
  font-family: inherit; font-size: 17px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform 120ms ease, background 120ms ease,
              border-color 120ms ease, color 120ms ease;
}
.subj-chip:hover { border-color: rgba(91,155,181,0.5); }
.subj-chip:focus-visible {
  outline: 2px solid rgba(91,155,181,0.6); outline-offset: 2px;
}
.subj-chip:active { transform: scale(0.94); }
.subj-chip.is-selected {
  background: var(--atlas-blue-mid, #5b9bb5);
  border-color: var(--atlas-blue-mid, #5b9bb5);
  color: #fff;
  transform: scale(1.04);
}
.subj-chip-anchors {
  display: grid; grid-template-columns: repeat(5, 1fr);
  margin-top: 6px;
}
.subj-chip-anchor {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: #8F9A98; text-align: center;
}
.subj-anchor-1 { grid-column: 1; text-align: center; }
.subj-anchor-3 { grid-column: 3; }
.subj-anchor-5 { grid-column: 5; }
.subj-value.is-empty {
  font-size: 14px; font-weight: 600; color: #8F9A98; /* WCAG AA - was #8F9A98 (~3.6:1, fail) */
  letter-spacing: 0.5px;
}
@media (max-width: 480px) {
  .subj-chip { height: 44px; font-size: 16px; }
  .subj-chips { gap: 6px; }
}

/* Ex-card completed summary - Item 4 (28 Apr). Shown when card is .ex-completed
 * AND not currently expanded; replaces the prescription tag-row visually. */
.ex-card-summary {
  display: none;
  font-size: 13px; font-weight: 600; color: #6CD693;
  line-height: 1.4; margin-top: 2px;
}
.ex-card.ex-completed:not(.expanded) .ex-prescription { display: none; }
.ex-card.ex-completed:not(.expanded) .ex-card-summary { display: block; }

/* Distance unit toggle */
.dist-toggle { display:flex; border-radius:8px; overflow:hidden; border:1.5px solid rgba(255,255,255,0.08); }
.dist-toggle-btn { flex:1; padding:8px 12px; font-size:12px; font-weight:700; text-align:center; background:var(--atlas-surface-card); color:#8F9A98; border:none; cursor:pointer; transition:all 0.15s; text-transform:uppercase; letter-spacing: 0.06em; }
.dist-toggle-btn.dist-active { background:#263332; color:#fff; }

/* ── Responsive: unified cards ────────────────────── */
@media (max-width: 480px) {
  .ucard-detail { padding: 14px 14px 12px; }
  .ucard-chart { padding: 0 14px 12px; }
  .ucard-compact { padding: 10px 12px; }
  .rec-zone-summary { gap: 8px; font-size: 11px; }
  /* Atlas DS v1 §10 - 5-point rating at ≤480px (Harry-approved: values 2/4/6/8/10).
   * Hide odd-valued dots via data-val attribute; surviving 5 dots sized 44×44 to meet touch target.
   * Label stacks above dots for horizontal headroom. Markup + storage range unchanged (1-10 axis). */
  .subj-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .subj-label { min-width: 0; font-size: 12px; }
  .subj-dots { gap: 6px; width: 100%; }
  .subj-dot[data-val="1"],
  .subj-dot[data-val="3"],
  .subj-dot[data-val="5"],
  .subj-dot[data-val="7"],
  .subj-dot[data-val="9"] { display: none; }
  .subj-dot { width: 44px; height: 44px; font-size: 14px; }
  .checkin-data-grid { gap: 4px; }
  .checkin-stat-val { font-size: 1.3rem; }
}

/* ══════════════════════════════════════════════════════
   ROUND 2 - Desktop Layout Improvements
   ══════════════════════════════════════════════════════ */

/* ── Chart height cap - prevent charts dominating the fold ── */
.ucard-chart .chart-svg,
.chart-wrap .chart-svg {
  max-height: 280px;
  width: 100%;
}

/* ── Performance tab: 2-col grid on desktop (1D view) ── */
@media (min-width: 1024px) {
  .cards {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  .cards > .card-stack {
    grid-column: 1 / -1;
  }
  /* Multi-day chart views stay single column */
  .charts {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
}

/* ── Nutrition tab: meal slots in grid on desktop ── */
@media (min-width: 1024px) {
  .atlas-section > .meal-slot:first-of-type {
    margin-top: 0;
  }
  /* Wrap all meal-slots into a 2-col grid via their parent */
  .atlas-section {
    display: block;
  }
  /* Meal card grid: 2-up on desktop */
  .meal-slot-cards {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  /* Nutrition summary: full width above meals */
  .nutrition-summary {
    max-width: 100%;
  }
  /* Macro progress row: keep horizontal, tighter */
  .macro-progress-row {
    max-width: 700px;
  }
}

/* ── Consistent card padding audit ── */
.card,
.card-training,
.ucard,
.atlas-card,
.meal-card-library {
  /* Ensure consistent 18-20px internal padding */
}
.atlas-section {
  padding-left: clamp(16px, 2vw, 24px);
  padding-right: clamp(16px, 2vw, 24px);
}

/* ── Consistent vertical rhythm between sections ── */
.atlas-section + .atlas-section {
  margin-top: 24px;
}
.atlas-cards {
  gap: 16px;
}

/* ══════════════════════════════════════════════════════
   ROUND 4 - Performance side-by-side grid
   ══════════════════════════════════════════════════════ */

/* ── Performance grid: Recovery | Sleep side-by-side ── */
.perf-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 1280px) {
  .perf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
  }
}

.perf-grid > .ucard {
  min-width: 0; /* prevent grid blowout */
}

/* ══════════════════════════════════════════════════════
   ROUND 4 - Nutrition Sub-tabs
   ══════════════════════════════════════════════════════ */

/* ── Nutrition tab strip ── */
.nutr-tabs {
  display: flex;
  gap: 4px;
  padding: 0 0 16px;
}
.nutr-tab {
  padding: 10px 20px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: transparent;
  color: #8F9A98;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s;
}
.nutr-tab:hover { color: #EEF3F1; background: var(--atlas-surface-card); }
.nutr-tab.active {
  background: rgba(255,255,255,0.08);
  color: #EEF3F1;
  /* glow replaces border-left */
}

/* ── Journal ── */
.nutr-journal-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.nutr-add-btn {
  padding: 8px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08);
  background: #263332; color: #EEF3F1; font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: inherit; letter-spacing: 0.3px;
}
.nutr-add-btn:hover { background: #2a3a4d; }
.nutr-journal-totals {
  display: flex; gap: 16px; padding: 12px 16px; margin-bottom: 16px;
  background: var(--atlas-surface-card); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; font-size: 13px; color: #8F9A98;
}
.nutr-journal-totals strong { color: #EEF3F1; }
.nutr-journal-group { margin-bottom: 20px; }
.nutr-jg-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: #8F9A98; margin-bottom: 8px; padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nutr-journal-entry {
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.nutr-je-name { font-size: 14px; font-weight: 600; color: #EEF3F1; }
.nutr-je-macros { font-size: 12px; color: #8F9A98; margin-top: 2px; }
.nutr-je-source { font-size: 10px; color: #8F9A98; margin-top: 2px; }
.nutr-je-notes { font-size: 12px; color: #8F9A98; margin-top: 4px; }

/* ── Modal ── */
.nutr-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 20000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  /* 4 May 2026 - overlay itself scrolls if the modal is taller than the
     viewport. align-items flips to flex-start so a tall modal pins to the
     top of the overlay rather than overflowing both edges. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
@media (max-height: 700px) {
  .nutr-modal-overlay { align-items: flex-start; }
}
.nutr-modal {
  background: #1D2524; border: 1px solid rgba(255,255,255,0.1); border-radius: 16px;
  width: 100%; max-width: 420px; color: #EEF3F1;
  /* Cap modal height + make it scroll internally so the action button at the
     bottom is always reachable. dvh handles iOS Safari address bar collapse;
     env(safe-area-inset-bottom) accounts for iOS home indicator + Safari
     bottom toolbar so the Save button has clear breathing space and isn't
     hidden behind browser chrome. */
  max-height: calc(100dvh - 40px - env(safe-area-inset-bottom, 0px));
  max-height: calc(100vh - 40px - env(safe-area-inset-bottom, 0px)); /* fallback for browsers without dvh */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 24px 24px calc(24px + env(safe-area-inset-bottom, 0px));
}
.nutr-modal-head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;
}
.nutr-modal-head h3 { margin: 0; font-size: 16px; font-weight: 700; }
.nutr-modal-close {
  background: none; border: none; color: #8F9A98; font-size: 24px; cursor: pointer;
}
.nutr-modal-form { display: flex; flex-direction: column; gap: 10px; }
.nutr-modal-form input, .nutr-modal-form select, .nutr-modal-form textarea {
  background: var(--atlas-surface-card); border: 1px solid rgba(255,255,255,0.08);
  color: #EEF3F1; padding: 10px 14px; border-radius: 12px; font-family: inherit;
  font-size: 13px; color-scheme: dark;
}
.nutr-modal-form select { appearance: auto; }
.nutr-modal-macros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 480px) { .nutr-modal-macros { grid-template-columns: repeat(2, 1fr); } }

/* ── Nutrition macro minigrid (Atlas DS v1 §10 - steps 4 → 2 → 1). ── */
.nutr-macro-minigrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--atlas-space-3);
  margin-bottom: var(--atlas-space-4);
  padding: var(--atlas-space-3);
  background: var(--atlas-surface-nested);
  border-radius: 12px;
}
@media (max-width: 768px) {
  .nutr-macro-minigrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .nutr-macro-minigrid { grid-template-columns: 1fr; }
}
.nutr-modal-submit {
  background: #263332; color: #EEF3F1; border: none; padding: 12px;
  border-radius: 12px; font-weight: 700; font-size: 13px; cursor: pointer;
  font-family: inherit;
}
.nutr-modal-submit:hover { background: #2a3a4d; }
.nutr-modal-error { color: #c4534a; font-size: 12px; margin: 0; min-height: 1em; }

/* ── Builder ── */
.nutr-builder-header { margin-bottom: 16px; }
.nutr-search {
  width: 100%; padding: 10px 14px; border-radius: 12px;
  background: var(--atlas-surface-card); border: 1px solid rgba(255,255,255,0.08);
  color: #EEF3F1; font-size: 14px; font-family: inherit; margin-bottom: 10px;
  color-scheme: dark;
}
.nutr-filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.nutr-chip {
  padding: 6px 12px; border-radius: 8px; font-size: 11px; font-weight: 600;
  border: 1px solid rgba(255,255,255,0.08); background: transparent; color: #8F9A98;
  cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.nutr-chip:hover { color: #EEF3F1; }
.nutr-chip.active { background: rgba(255,255,255,0.08); color: #EEF3F1; }

/* Tech section (Brief 18 - client read-only mirror, polished v2 29 Apr 2026).
   Compact chrome: title + 1-line mechanism preview + status pill + evidence pill + chev.
   Default-collapsed; click head to expand. Citations are a secondary tap inside detail.
   Owns its own namespace (.tech-*) - no .supp-* reuse to avoid auto-expand collisions. */
.tech-section-intro {
  font-size: 13px; color: #8F9A98; line-height: 1.55;
  margin: 0 0 16px;
}
.tech-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.tech-chip {
  padding: 6px 12px; border-radius: 8px; font-size: 11px; font-weight: 600;
  border: 1px solid rgba(255,255,255,0.08); background: transparent; color: #8F9A98;
  cursor: pointer; font-family: inherit; transition: all 0.15s;
  display: inline-flex; align-items: center; gap: 6px;
}
.tech-chip:hover { color: #EEF3F1; }
.tech-chip.is-active { background: rgba(255,255,255,0.08); color: #EEF3F1; }
.tech-chip-count {
  font-size: 10px; padding: 1px 6px; border-radius: 4px;
  background: rgba(255,255,255,0.06); color: rgba(241,238,232,0.55);
  font-weight: 600;
}
.tech-chip.is-active .tech-chip-count { background: rgba(255,255,255,0.12); color: #EEF3F1; }

.tech-cards { display: flex; flex-direction: column; gap: 8px; }
.tech-card {
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.15s, background 120ms ease;
}
.tech-card:hover { border-color: rgba(255,255,255,0.12); }
/* 30 May 2026 PM - selected-state visual contract (see
   project_selected_state_visual_contract.md). When a tech card is open
   it pulls to the canonical 2px gold rail + 90deg gradient + bright
   title. Same family as every other open card surface. */
.tech-card.is-open {
  background: linear-gradient(90deg, rgba(212,178,106,0.10), rgba(255,255,255,0.05) 60%);
  border-left: 2px solid #D4B26A;
}
.tech-card.is-open .tech-title { color: #F4DDA8; }
.tech-head {
  width: 100%;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  background: transparent; border: none;
  color: inherit; font-family: inherit; text-align: left;
  cursor: pointer; transition: background 0.15s;
}
.tech-head:hover { background: var(--atlas-surface-nested); }
.tech-card.is-open .tech-head { background: var(--atlas-surface-card); border-bottom: 1px solid rgba(255,255,255,0.06); }
.tech-head-main { flex: 1; min-width: 0; }
.tech-title {
  font-size: 14px; font-weight: 600; color: #EEF3F1;
  letter-spacing: 0.1px; line-height: 1.35;
  margin-bottom: 3px;
}
.tech-mech-preview {
  font-size: 12px; color: #8F9A98; font-style: italic;
  line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tech-head-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.tech-pill {
  font-size: 10px; padding: 3px 8px; border-radius: 4px;
  font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap;
}
.tech-pill-status.tech-status-active      { background: rgba(74,157,107,0.18); color: rgba(74,157,107,0.95); }
.tech-pill-status.tech-status-considering { background: rgba(212,169,78,0.18); color: rgba(212,169,78,0.95); }
.tech-pill-evidence { background: rgba(255,255,255,0.05); color: rgba(241,238,232,0.55); }
.tech-chev {
  display: inline-block; color: rgba(212,178,106,0.65);
  font-size: 12px; transition: transform 0.15s; line-height: 1;
  margin-left: 2px;
}
.tech-card.is-open .tech-chev { transform: rotate(180deg); }

/* Detail body - hidden by default (no [hidden] attr; just .is-open class on card). */
.tech-detail { display: none; padding: 14px 16px 16px; background: rgba(0,0,0,0.18); }
.tech-card.is-open .tech-detail { display: block; }
.tech-section { margin-bottom: 14px; }
.tech-section:last-child { margin-bottom: 0; }
.tech-section-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: rgba(241,238,232,0.5);
  margin-bottom: 6px;
}
.tech-section-body {
  font-size: 13px; color: #c0c8d4; line-height: 1.6;
  margin: 0;
}
.tech-bullets {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.tech-bullets li {
  font-size: 13px; color: #c0c8d4; line-height: 1.55;
  padding-left: 14px; position: relative;
}
.tech-bullets li::before {
  content: '·'; position: absolute; left: 4px; top: 0;
  color: rgba(212,178,106,0.7); font-size: 18px; line-height: 1;
}

/* Contraindications - red-tinted, only renders when source field is non-empty. */
.tech-contra {
  margin-bottom: 14px; padding: 10px 12px;
  background: rgba(196,83,74,0.06);
  border-left: 2px solid rgba(196,83,74,0.6);
  border-radius: 4px;
}
.tech-contra .tech-section-title { color: rgba(196,83,74,0.9); }
.tech-contra .tech-section-body  { color: rgba(196,83,74,0.85); }

/* Show research → Citations secondary toggle inside the expanded body. */
.tech-research-wrap { margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(255,255,255,0.08); }
.tech-research-btn {
  background: transparent; border: none;
  color: rgba(212,178,106,0.75);
  font-family: inherit; font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer; padding: 4px 0;
}
.tech-research-btn:hover { color: #D4B26A; }
.tech-citations { display: none; margin-top: 10px; }
.tech-citations.is-open { display: block; }

/* Recommended Brands overflow suffix - shown on a new line when the filtered
   brand list exceeds 2. Muted italic so it reads as guidance, not as a brand. */
.tech-brands-overflow {
  font-size: 12px;
  color: rgba(241,238,232,0.42);
  font-style: italic;
  margin-top: 6px;
  letter-spacing: 0.1px;
}

/* Shared brand-list overflow suffix - used by Supplements detail panel and
   future surfaces (Protocols rebuild). Identical visual treatment to
   .tech-brands-overflow which stays for Tech tab backwards compat. */
.brand-overflow-suffix {
  font-size: 12px;
  color: rgba(241,238,232,0.42);
  font-style: italic;
  margin-top: 6px;
  letter-spacing: 0.1px;
  display: block;
}

.nutr-builder-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px;
}
.nutr-builder-card {
  background: var(--atlas-surface-card); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; overflow: hidden; cursor: pointer;
  transition: transform 0.2s, border-color 0.2s;
}
.nutr-builder-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.12); }
.nutr-builder-img { width: 100%; height: 160px; object-fit: cover; display: block; }
.nutr-builder-img-placeholder { width: 100%; height: 80px; background: var(--atlas-surface-nested); }
.nutr-builder-info { padding: 14px 16px; }
.nutr-builder-name { font-size: 14px; font-weight: 700; color: #EEF3F1; margin-bottom: 4px; }
.nutr-builder-macros { font-size: 12px; color: #8F9A98; }
.nutr-builder-tags { margin-top: 8px; display: flex; gap: 4px; flex-wrap: wrap; }

/* ── Inspire ── */
.nutr-inspire { display: flex; flex-direction: column; gap: 20px; }
.nutr-inspire-remaining {
  background: var(--atlas-surface-card); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 16px 20px;
}
.nutr-inspire-macros {
  display: flex; gap: 20px; flex-wrap: wrap; margin-top: 8px;
}
.nutr-im { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.nutr-im-val { font-size: 20px; font-weight: 700; color: #EEF3F1; }
.nutr-im-lbl { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #8F9A98; }

.nutr-inspire-inputs { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.nutr-inspire-form { display: flex; flex-direction: column; gap: 4px; }
.inspire-macro-inputs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 480px) { .inspire-macro-inputs { grid-template-columns: repeat(2, 1fr); } }
.inspire-type-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.nutr-inspire-select, .nutr-inspire-input {
  padding: 10px 14px; border-radius: 12px;
  background: var(--atlas-surface-card); border: 1px solid rgba(255,255,255,0.08);
  color: #EEF3F1; font-size: 13px; font-family: inherit; color-scheme: dark;
}
.nutr-inspire-input { flex: 1; min-width: 200px; }
.nutr-inspire-btn {
  padding: 10px 20px; border-radius: 12px; border: none;
  background: #263332; color: #EEF3F1; font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.nutr-inspire-btn:hover { background: #2a3a4d; }

.nutr-inspire-card {
  background: var(--atlas-surface-card); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 20px;
}
.nutr-inspire-meal-name { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: #EEF3F1; }
.nutr-inspire-meal-macros { display: flex; gap: 12px; font-size: 13px; color: #8F9A98; margin-bottom: 16px; }
.nutr-inspire-section { margin-bottom: 12px; font-size: 13px; color: #c0c8d4; line-height: 1.6; }
.nutr-inspire-section strong { color: #EEF3F1; display: block; margin-bottom: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.nutr-inspire-section ul { margin: 4px 0 0 16px; padding: 0; }
.nutr-inspire-section li { margin-bottom: 2px; }
.nutr-inspire-notes { color: #8F9A98; font-size: 12px; }
.nutr-inspire-actions { display: flex; gap: 10px; margin-top: 16px; }
.nutr-inspire-accept {
  padding: 10px 20px; border-radius: 12px; border: none;
  background: #6CD693; color: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
}
.nutr-inspire-accept:hover { background: #3d8a5c; }
.nutr-inspire-accept:disabled { opacity: 0.5; cursor: default; }
.nutr-inspire-regen {
  padding: 10px 20px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08);
  background: transparent; color: #8F9A98; font-size: 13px; font-weight: 600; cursor: pointer;
}
.nutr-inspire-regen:hover { color: #EEF3F1; border-color: rgba(255,255,255,0.15); }

/* ══════════════════════════════════════════════════════
   ROUND 5 - Trend Pills
   ══════════════════════════════════════════════════════ */
/* ── Trend pill (Atlas DS v1 §4) - one system, 4 variants ── */
.trend-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: var(--atlas-font-label-size);
  font-weight: var(--atlas-font-label-weight);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.trend-pill-up      { background: var(--atlas-up-tint);      color: var(--atlas-up); }
.trend-pill-stable  { background: var(--atlas-stable-tint);  color: var(--atlas-stable); }
.trend-pill-watch   { background: var(--atlas-watch-tint);   color: var(--atlas-watch); }
.trend-pill-concern { background: var(--atlas-concern-tint); color: var(--atlas-concern); }

/* ── Source pill (Atlas DS v1 §4 + §8) - replaces ambiguous "WATCH" amber pill.
 * Shell chrome is neutral; provider accent comes from the SVG icon tinted via currentColor.
 * Use atlasSourcePill(provider, label) JS helper to render. ── */
.source-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 2px 8px 2px 6px;
  border-radius: 8px;
  font-size: var(--atlas-font-label-size);
  font-weight: var(--atlas-font-label-weight);
  white-space: nowrap;
  flex-shrink: 0;
  background: var(--atlas-surface-hover);
  border: 1px solid var(--atlas-border);
  color: var(--atlas-text-muted);  /* default - overridden per-variant for icon tint */
}
.source-pill .source-pill-icon { width: 12px; height: 12px; flex-shrink: 0; display: inline-block; }
.source-pill .source-pill-label { color: var(--atlas-text-body); }

/* Per-provider accent - `color:` tints the inline SVG via currentColor; label re-overrides. */
.source-pill-whoop      { color: var(--atlas-src-whoop); }
.source-pill-oura       { color: var(--atlas-src-oura); }
.source-pill-cronometer { color: var(--atlas-src-cronometer); }
.source-pill-atlas      { color: var(--atlas-src-atlas); }

/* ── More metrics dropdown (Atlas DS v1 §11) - collapsed-by-default container for low-signal metrics.
 * Subtle affordance per spec tone: uppercase label, muted color, chevron hint. 150/200ms motion per §9. */
.more-metrics {
  margin-top: var(--atlas-space-3);
  border-top: 1px solid var(--atlas-divider);
  padding-top: var(--atlas-space-2);
}
.more-metrics > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  font-size: var(--atlas-font-label-size);
  font-weight: var(--atlas-font-label-weight);
  letter-spacing: var(--atlas-font-label-tracking);
  text-transform: uppercase;
  color: var(--atlas-text-muted);
  user-select: none;
  transition: color 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.more-metrics > summary:hover { color: var(--atlas-text-body); }
.more-metrics > summary::-webkit-details-marker { display: none; }
.more-metrics > summary::before {
  content: "\25B8"; /* right-pointing triangle */
  color: var(--atlas-text-faint);
  font-size: 10px;
  display: inline-block;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.more-metrics[open] > summary::before { transform: rotate(90deg); }

/* Metric row layout with pill */
.mr-val {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #EEF3F1;
  flex: 1;
  justify-content: flex-end;
}

@media (max-width: 390px) {
  .mr-val .ti { display: none; }
}

/* ══════════════════════════════════════════════════════
   ROUND 5 - Journal System
   ══════════════════════════════════════════════════════ */
.journal-filters { margin-bottom: 16px; }
.journal-filter-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
/* Re-investigation Fix 3 (28 Apr): the previous rule targeted .journal-filter-row
 * which doesn't exist in this codebase - the filter pills live in
 * .journal-source-tabs (rendered by renderJournal). Below 480px the 5 pills +
 * Add Entry button overflow viewport. Make .journal-source-tabs horizontally
 * scrollable, lock pills to flex-shrink: 0, and stop .journal-header-row from
 * wrapping the + button to a new line by giving it column-on-mobile layout. */
@media (max-width: 479px) {
  .journal-header-row {
    flex-direction: column; align-items: stretch; gap: 12px;
  }
  .journal-source-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    max-width: 100%;
  }
  .journal-source-tabs::-webkit-scrollbar { display: none; }
  .journal-source-tabs > * { flex-shrink: 0; }
}
.journal-range-pills { display: flex; gap: 4px; }
.journal-loop-toggle {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: #8F9A98; cursor: pointer; white-space: nowrap;
}
.journal-loop-toggle input { accent-color: #a68532; }

/* Question banner (open-loop check-in) */
.journal-question-banner {
  background: rgba(166,133,50,0.08); border: 1px solid rgba(166,133,50,0.2);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 16px;
}
.journal-q-text { font-size: 13px; color: #EEF3F1; margin-bottom: 10px; line-height: 1.5; }
.journal-q-actions { display: flex; gap: 8px; }
.journal-q-btn {
  padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 700;
  border: 1px solid rgba(255,255,255,0.08); cursor: pointer; font-family: inherit;
}
.journal-q-yes { background: transparent; color: #a68532; border-color: rgba(166,133,50,0.3); }
.journal-q-no { background: #6CD693; color: #fff; border: none; }

/* Date groups */
.journal-date-group { margin-bottom: 20px; }
.journal-date-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: #8F9A98; padding-bottom: 8px; margin-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Entry cards */
.journal-entry {
  padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.journal-entry-dim { opacity: 0.6; }
.journal-entry-head {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px;
}
.journal-loop-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #a68532; flex-shrink: 0;
}
.journal-entry-time { font-size: 11px; color: #8F9A98; font-weight: 600; min-width: 40px; }
.journal-entry-title { font-size: 14px; font-weight: 600; color: #EEF3F1; }
.journal-entry-body {
  font-size: 13px; color: #BCC6C4; line-height: 1.5; margin-top: 4px;
  max-height: 80px; overflow: hidden;
}
.journal-ai-review {
  font-size: 12px; color: #8F9A98; margin-top: 6px; padding: 8px 10px;
  background: var(--atlas-surface-nested); border-radius: 8px; line-height: 1.5;
}
.journal-ai-review strong { color: #8F9A98; }
.journal-entry-tags { margin-top: 6px; display: flex; gap: 4px; flex-wrap: wrap; }

/* Journal Detail Modal (§6.1) */
.jdm-title { width:100%;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,0.08);color:#EEF3F1;font-size:18px;font-weight:700;padding:4px 0;font-family:inherit; }
.jdm-title:focus { border-bottom-color:#6CD693;outline:none; }
.jdm-meta { display:flex;align-items:center;gap:6px;margin:8px 0;flex-wrap:wrap; }
.jdm-body { width:100%;background:var(--atlas-surface-card);border:1px solid rgba(255,255,255,0.08);border-radius:8px;color:#c0c8d4;font-size:13px;padding:10px;font-family:inherit;resize:vertical;line-height:1.6;margin-top:10px; }
.jdm-tags { display:flex;gap:4px;flex-wrap:wrap;margin-top:8px; }
.jdm-updates-section { margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.06); }
.jdm-updates-list { max-height:200px;overflow-y:auto;margin-bottom:10px; }
.jdm-update { font-size:12px;color:#8F9A98;padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.04);line-height:1.5; }
.jdm-add-update { display:flex;flex-direction:column;gap:6px; }
.jdm-add-update textarea { background:var(--atlas-surface-card);border:1px solid rgba(255,255,255,0.08);border-radius:8px;color:#EEF3F1;font-size:12px;padding:8px;font-family:inherit;resize:none; }

/* Morning quick-journal prompt (§6.4) */
.morning-prompt { background:var(--atlas-surface-card);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:12px 20px;margin:0 auto 16px;max-width:640px;display:flex;align-items:center;gap:12px; }
.morning-prompt-text { flex:1;font-size:13px;color:#c0c8d4;min-width:200px; }
.morning-prompt-btn { padding:8px 16px;border-radius:12px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;border:none; }
.morning-prompt-journal { background:#263332;color:#EEF3F1; }
.morning-prompt-skip { background:transparent;border:1px solid rgba(255,255,255,0.08);color:#8F9A98; }
.morning-prompt-close { background:none;border:none;color:#8F9A98;font-size:18px;cursor:pointer;padding:0 4px; }

/* Ongoing issues banner (§5) */
.ongoing-banner {
  background: var(--atlas-surface-card); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 12px 20px; margin: 0 auto 16px; max-width: 1400px;
}
.ongoing-banner-head { cursor: pointer; font-size: 13px; color: #EEF3F1; display: flex; align-items: center; gap: 8px; }
.ongoing-banner-toggle { color: #8F9A98; font-size: 14px; margin-left: auto; }
.ongoing-banner-list { margin-top: 10px; }
.ongoing-banner-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 13px; color: #c0c8d4;
}
.ongoing-banner-item:last-child { border-bottom: none; }

/* ── Canonical card spec (Brief 12 §7, tokenized Atlas DS v1) ── */
.journal-card, .atlas-card, .meal-card-library, .nutr-builder-card, .supp-card, .ucard, .chart-wrap, .nutrition-summary {
  background: var(--atlas-surface-card);
  border: 1px solid var(--atlas-border);
  border-radius: 12px;
  padding: var(--atlas-space-4);
}

/* ── Journal card - Sessions-style layout (§10) ── */
.journal-card {
  margin-bottom: 20px;
  cursor: pointer;
  padding: 16px;
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
}
.journal-entry-head {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.journal-entry-title {
  font-size: 18px; font-weight: 700; color: #EEF3F1;
  margin-bottom: 8px;
}
.journal-entry-body {
  font-size: 14px; color: #BCC6C4; line-height: 1.6; margin-bottom: 8px;
  word-wrap: break-word; overflow-wrap: break-word;
}
.journal-entry-tags { margin-top: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.journal-entry-right {
  margin-left: auto; display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
/* journal severity border-left removed - glow handled by card-glow tokens */
.journal-sev-neutral {
  border-left: none;
}

.journal-header-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 16px;
}
.journal-source-tabs { display: flex; gap: 4px; }

.journal-group-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: #8F9A98; margin-bottom: 10px; padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Resolved pill - inline at timestamp */
.journal-resolved-pill {
  display: inline-block; padding: 2px 8px; border-radius: 8px; font-size: 10px;
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: rgba(108,214,147,0.12); color: #6CD693; flex-shrink: 0;
}

/* Ongoing badge (replaces loop dot) */
.journal-ongoing-badge {
  display: inline-block; padding: 2px 8px; border-radius: 8px; font-size: 10px;
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: rgba(166,133,50,0.15); color: #a68532; flex-shrink: 0;
}
/* Resolved tag */
.journal-resolved-tag {
  text-align: right; font-size: 10px; font-weight: 600; color: #8F9A98;
  margin-top: 6px; letter-spacing: 0.3px;
}
/* Question banner detail */
.journal-q-detail {
  font-size: 12px; color: #8F9A98; margin-bottom: 8px; line-height: 1.5;
}
/* P1c - Journal entry-type visual layer. Left-edge color strip per type. Pulls
   the same palette as entryTypePill so card edge + pill agree at a glance. */
.journal-card[data-entry-type] { position: relative; padding-left: 18px; }
.journal-card[data-entry-type]::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 4px; background: rgba(139,149,165,0.35);
}
.journal-card[data-entry-type="AUTO_CHECK_IN"]::before,
.journal-card[data-entry-type="AUTO_CHECKIN"]::before { background: #6392d5; }
.journal-card[data-entry-type="AUTO_TARGET_CHANGE"]::before { background: #D4B26A; }
.journal-card[data-entry-type="AUTO_SUPPLEMENT"]::before,
.journal-card[data-entry-type^="AUTO_SUPP"]::before { background: #7fb5a8; }
.journal-card[data-entry-type="PROTOCOL"]::before,
.journal-card[data-entry-type="AUTO_PROTOCOL"]::before { background: #8F9A98; }
.journal-card[data-entry-type="BIOMARKER"]::before,
.journal-card[data-entry-type="AUTO_BIOMARKER"]::before { background: #f5a623; }
.journal-card[data-entry-type="MANUAL"]::before,
.journal-card[data-entry-type="MANUAL_SUBJECTIVE"]::before,
.journal-card[data-entry-type="MANUAL_OBJECTIVE"]::before,
.journal-card[data-entry-type="MANUAL_QUESTION"]::before,
.journal-card[data-entry-type="NOTE"]::before { background: rgba(139,149,165,0.35); }

/* Terminal-state cards (Resolved entries, Discontinued supplements) retreat
   visually: card opacity drops, strip mutes further. Strip stays just visible
   so the entry type is still legible at a glance. Set via data-terminal in
   atlas-sections.js renderCard. */
.journal-card[data-terminal="true"] { opacity: 0.7; }
.journal-card[data-terminal="true"]::before { background: rgba(139,149,165,0.25); }
.journal-card[data-entry-type="AUTO_SUPPLEMENT"][data-terminal="true"]::before,
.journal-card[data-entry-type^="AUTO_SUPP"][data-terminal="true"]::before {
  background: rgba(127,181,168,0.45);
}

/* Check-in card already has padding:0 - strip nests inside. Keep head padding
   intact; the strip lives in the gutter the parent provides. */
.journal-card.journal-checkin-card[data-entry-type] { padding-left: 0; }
.journal-card.journal-checkin-card[data-entry-type]::before {
  top: 12px; bottom: 12px; left: 6px;
}
.journal-card.journal-checkin-card .journal-checkin-head { padding-left: 18px; }
.journal-card.journal-checkin-card .journal-checkin-body-inner { padding-left: 18px; }

/* P1b - Collapsible AUTO_CHECK_IN cards. aria-expanded on the card drives the
   max-height animation + chevron rotation. Big tap target = whole head. */
.journal-checkin-card {
  padding: 0;
  overflow: hidden;
  cursor: default; /* .journal-card default was pointer; head handles click */
}
.journal-checkin-head {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 14px 16px;
  background: transparent; border: 0; color: inherit;
  text-align: left; font: inherit; cursor: pointer;
}
.journal-checkin-head:hover { background: var(--atlas-surface-nested); }
.journal-checkin-head-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.journal-checkin-head-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.journal-checkin-title { font-size: 14px; font-weight: 600; color: #EEF3F1; }
.journal-checkin-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.journal-checkin-chevron {
  flex-shrink: 0; color: #8F9A98; font-size: 14px; line-height: 1;
  transition: transform 240ms ease;
}
.journal-checkin-card[aria-expanded="true"] .journal-checkin-chevron {
  transform: rotate(180deg);
}
.journal-checkin-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.journal-checkin-card[aria-expanded="true"] .journal-checkin-body {
  max-height: 1600px;
}
/* Concierge conversations can be long - the 1600px cap clips them. Expand fully
   and skip the height transition (which would stutter over that range). The
   collapsed state still inherits max-height:0 above, so it still folds shut. */
.journal-checkin-card[data-entry-type="CONCIERGE"] .journal-checkin-body { transition: none; }
.journal-checkin-card[data-entry-type="CONCIERGE"][aria-expanded="true"] .journal-checkin-body { max-height: none; }
.journal-checkin-body-inner {
  padding: 4px 16px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column; gap: 12px;
}
.journal-checkin-section { display: flex; flex-direction: column; gap: 4px; }
.journal-checkin-section-title {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #8F9A98;
}
.journal-checkin-section-body {
  font-size: 13px; color: #EEF3F1; line-height: 1.55;
  word-wrap: break-word; overflow-wrap: break-word;
  white-space: pre-wrap;
}

/* A-1 - Journal training-completion structured renderer.
 * AUTO_TRAINING_COMPLETE / AUTO_CARDIO_COMPLETE entries render via
 * parseTrainingBody → ordered {title, body} sections. Each section gets
 * a label + body block with bullet-list support for exercise summaries. */
.journal-training-card { padding: 14px 16px; }
.journal-training-sections { display: flex; flex-direction: column; gap: 14px; }
.journal-training-section { display: flex; flex-direction: column; gap: 6px; }
.journal-training-section-title {
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: #6CD693;
}
.journal-training-section-body {
  font-size: 13px; color: #EEF3F1; line-height: 1.55;
  word-wrap: break-word; overflow-wrap: break-word;
}
.journal-training-section-body p {
  margin: 0 0 8px;
}
.journal-training-section-body p:last-child { margin-bottom: 0; }
.journal-training-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.journal-training-list li {
  font-size: 13px;
  color: #EEF3F1;
  padding-left: 14px;
  position: relative;
  line-height: 1.5;
}
.journal-training-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(74,157,107,0.55);
}

/* Modal section labels */
.journal-modal-section { margin-top: 4px; }
.journal-modal-section-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  color: #8F9A98; margin-bottom: 6px; text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════
   ROUND 6 - Interactive Meal Cards
   ══════════════════════════════════════════════════════ */

/* Two-column layout on desktop */
@media (min-width: 1024px) {
  .meal-card-library {
    display: grid !important;
    grid-template-columns: 340px 1fr;
    flex-direction: unset;
  }
  .lib-meal-img-col {
    max-height: none;
  }
  .lib-meal-hero {
    height: 100%;
    min-height: 240px;
  }
}

/* Macro summary overlay on photo */
.meal-macro-summary {
  padding: 10px 14px;
  background: rgba(10,14,14,0.85);
  font-size: 12px;
  color: #c0c8d4;
  line-height: 1.5;
}
.mms-kcal { font-size: 16px; font-weight: 700; color: #EEF3F1; }
.mms-line { color: #8F9A98; font-size: 12px; margin-top: 2px; }
.mms-fibre { color: #8F9A98; font-size: 11px; margin-top: 1px; }

/* Serving adjuster */
.meal-serving-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.meal-serving-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  color: #8F9A98; text-transform: uppercase; margin-right: auto;
}
.meal-serving-btn {
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1); background: var(--atlas-surface-card);
  color: #EEF3F1; font-size: 16px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.meal-serving-btn:hover { background: rgba(255,255,255,0.08); }
.meal-serving-val {
  font-size: 14px; font-weight: 700; color: #EEF3F1;
  min-width: 40px; text-align: center;
}

/* Action buttons */
.meal-actions {
  display: flex; gap: 10px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.06);
}
.meal-action-btn {
  flex: 1; padding: 10px 16px; border-radius: 12px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  font-family: inherit; text-align: center; transition: all 0.15s;
}
.meal-swap-btn {
  background: transparent; border: 1px solid rgba(255,255,255,0.08);
  color: #8F9A98;
}
.meal-swap-btn:hover { color: #EEF3F1; border-color: rgba(255,255,255,0.15); }
.meal-log-btn {
  background: #263332; border: none; color: #EEF3F1;
}
.meal-log-btn:hover { background: #2a3a4d; }
.meal-log-done {
  background: rgba(74,157,107,0.12) !important; color: #6CD693 !important;
  cursor: default;
}

/* Log Meal modal field labels */
.meal-log-field { display: flex; flex-direction: column; gap: 4px; }
.meal-log-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  color: #8F9A98; text-transform: uppercase;
}
.meal-log-delta {
  font-size: 12px; color: #8F9A98; padding: 8px 0;
  min-height: 24px;
}
.meal-log-delta strong { color: #EEF3F1; }

/* ══════════════════════════════════════════════════════
   ROUND 7 - AI Performance Analysis Panel
   ══════════════════════════════════════════════════════ */
/* ── Unified AI Performance Panel (top of Performance page) ── */
.ai-unified-panel {
  background: var(--atlas-surface-nested); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 14px 18px; margin-bottom: 20px;
}
/* When the body region is hidden (empty / collapsed state), the pills row
   below the header has nothing under it - kill the bottom margin so the
   card hugs its content. 28 May 2026. */
.ai-unified-panel:has(.ai-unified-body[style*="display: none"]) .pa-range-pills,
.ai-unified-panel:has(.ai-unified-body[style*="display:none"]) .pa-range-pills { margin-bottom: 0; }
.ai-unified-header {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.ai-unified-icon { font-size: 20px; }
.ai-unified-title {
  font-size: 14px; font-weight: 700; color: #EEF3F1; margin-right: auto;
}
.ai-unified-range { display: flex; gap: 4px; }
.ai-unified-gen {
  padding: 8px 16px; border-radius: 12px; border: none;
  background: #263332; color: #EEF3F1; font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.ai-unified-gen:hover { background: #2a3a4d; }
/* Performance Analysis range pills (7/30/90/1Y) - their own row under the
   header so the title row stays clean on mobile. (Moved to Check-in 24 May.) */
.pa-range-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 12px; }
.pa-range-pills .pill { padding: 4px 12px; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; }
.pa-range-pills .pill.active { background: rgba(212,178,106,0.18) !important; color: #D4B26A !important; border-color: rgba(212,178,106,0.35) !important; }
.ai-unified-body {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.06);
}

.ai-insight-panel { margin-top: 4px; }
.ai-insight-trigger {
  width: 100%; padding: 10px 14px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06); background: var(--atlas-surface-nested);
  color: #8F9A98; font-size: 12px; font-weight: 700; cursor: pointer;
  font-family: inherit; letter-spacing: 0.3px; text-align: left;
  transition: all 0.15s;
}
.ai-insight-trigger:hover { color: #8F9A98; border-color: rgba(255,255,255,0.1); }
.ai-insight-body {
  margin-top: 10px; padding: 14px; background: var(--atlas-surface-nested);
  border: 1px solid rgba(255,255,255,0.06); border-radius: 12px;
}
.ai-insight-loading {
  font-size: 13px; color: #8F9A98; line-height: 1.6;
  display: flex; align-items: center; gap: 10px; padding: 4px 0;
}
.ai-insight-spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.12); border-top-color: rgba(255,255,255,0.5);
  border-radius: 50%; animation: ai-spin 0.8s linear infinite; flex-shrink: 0;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-insight-error { padding: 4px 0; }
.ai-insight-error p { font-size: 13px; color: #c4534a; margin: 0 0 10px; line-height: 1.5; }
/* Stage 2 narrative - paragraphs + Improving/Watch bullets */
.ai-narr { margin-bottom: 16px; }
.ai-narr-para {
  font-size: 14px; color: #c0c8d4; line-height: 1.6;
  margin: 0 0 12px;
}
.ai-narr-para:last-child { margin-bottom: 0; }
.ai-narr-para.ai-narr-empty { color: #8F9A98; font-style: italic; }
.ai-bullets {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
@media (max-width: 600px) {
  .ai-bullets { grid-template-columns: 1fr; gap: 10px; }
}
.ai-bullet-group {
  padding-left: 12px; border-left: 2px solid rgba(255,255,255,0.08);
}
.ai-bullet-improving { border-left-color: rgba(74,157,107,0.55); }
.ai-bullet-watch     { border-left-color: rgba(212,169,78,0.55); }
.ai-bullet-head {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--atlas-text-faint, #8F9A98);
  margin-bottom: 6px;
}
.ai-bullet-improving .ai-bullet-head { color: rgba(74,157,107,0.9); }
.ai-bullet-watch     .ai-bullet-head { color: rgba(212,169,78,0.9); }
.ai-bullet-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ai-bullet-list li { font-size: 13px; line-height: 1.45; }
.ai-bullet-label  { font-weight: 700; color: #EEF3F1; }
.ai-bullet-label::after { content: " - "; color: var(--atlas-text-faint, #8F9A98); font-weight: 500; }
.ai-bullet-detail { color: #8F9A98; }
/* Patterns this period - coach-curated cross-correlation insights (Brief 17 v1.4 - 29 Apr 2026).
   Only Status=Approved insights surface client-side. Working/hurting framing colour-codes
   the left bar: green when factor moves favourably for HRV, red when unfavourably. */
.ai-patterns {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column; gap: 10px;
}
.ai-patterns-head {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--atlas-text-faint, #8F9A98);
  margin-bottom: 4px;
}
.ai-pattern {
  padding: 12px 14px; border-radius: 8px;
  background: var(--atlas-surface-nested);
  border-left: 3px solid rgba(255,255,255,0.15);
}
.ai-pattern-good    { border-left-color: rgba(74,157,107,0.7); }
.ai-pattern-hurting { border-left-color: rgba(196,83,74,0.7); }
.ai-pattern-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-bottom: 6px; flex-wrap: wrap;
}
.ai-pattern-framing {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--atlas-text-faint, #8F9A98);
}
.ai-pattern-good .ai-pattern-framing    { color: rgba(74,157,107,0.95); }
.ai-pattern-hurting .ai-pattern-framing { color: rgba(196,83,74,0.95); }
.ai-pattern-factor { font-size: 13px; font-weight: 600; color: #EEF3F1; letter-spacing: 0.1px; }
.ai-pattern-arrow {
  display: inline-block; margin-left: 4px; font-size: 14px; font-weight: 700; vertical-align: -1px;
}
.ai-pattern-good .ai-pattern-arrow    { color: rgba(74,157,107,0.95); }
.ai-pattern-hurting .ai-pattern-arrow { color: rgba(196,83,74,0.95); }
.ai-pattern-narr { font-size: 13px; color: #c0c8d4; line-height: 1.6; margin: 0 0 8px; }
.ai-pattern-narr:last-child { margin-bottom: 0; }
.ai-pattern-coach { font-size: 12px; color: #8F9A98; line-height: 1.55; margin: 0; padding-top: 8px; border-top: 1px dashed rgba(255,255,255,0.06); }
.ai-pattern-coach-label {
  display: inline-block; margin-right: 4px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--atlas-text-faint, #8F9A98);
}
/* Empty state + updated timestamp (28 Apr - cached-only default) */
.ai-unified-updated {
  font-size: 11px; color: var(--atlas-text-faint, #8F9A98);
  margin-right: 10px; font-weight: 500;
  display: none;
}
.ai-narr-empty-state { padding: 4px 0; }
.ai-narr-empty-prompt {
  font-size: 13px; color: var(--atlas-text-muted, #8F9A98);
  margin: 0; line-height: 1.5;
}
.ai-insight-summary { font-size: 13px; color: #c0c8d4; line-height: 1.6; margin-bottom: 12px; }
.ai-headline { font-size: 14px; font-weight: 600; color: #EEF3F1; line-height: 1.5; margin-bottom: 10px; }
.ai-happening { font-size: 13px; color: #8F9A98; line-height: 1.6; margin-bottom: 14px; }
.ai-actions-list { margin: 0; padding: 0 0 0 16px; font-size: 13px; color: #c0c8d4; line-height: 1.8; }
.ai-actions-list li { margin-bottom: 8px; }
.ai-watchfor { font-size: 12px; color: #8F9A98; line-height: 1.6; }
.ai-obs-pills { display: flex; flex-direction: column; gap: 6px; }
.ai-obs-pill { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #8F9A98; flex-wrap: wrap; }
.ai-obs-pill strong { color: #EEF3F1; }

/* §5 Compliance rings */
.compliance-row { display: flex; gap: 20px; justify-content: center; margin-bottom: 16px; }
.compliance-ring { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.compliance-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #8F9A98; }

/* §7 Hydration buttons */
.hydration-btn {
  padding: 8px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08);
  background: var(--atlas-surface-card); color: #8F9A98; font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.hydration-btn:hover { color: #EEF3F1; border-color: rgba(255,255,255,0.15); }

/* ══════════════════════════════════════════════════════
   §12 - Left sidebar navigation
   ══════════════════════════════════════════════════════ */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: 220px; z-index: 10000;
  background: var(--surface-glass, rgba(20,22,28,0.55));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-right: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column; padding: 16px 12px;
  /* 4 May 2026 - make the sidebar scrollable when content (nav + bottom +
     log out + tz pill) exceeds viewport height. Without overflow-y the user
     can't reach Log Out on small mobile heights. -webkit-overflow-scrolling
     keeps momentum scroll on iOS. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.sidebar-logo { padding: 8px 8px 20px; }
.sidebar-logo img { height: 36px; width: auto; }
/* Sidebar identity (28 Apr 2026) - replaces .sidebar-logo as the top-of-sidebar anchor.
   Tappable button (no-op for now; future routes to client profile / networking card). */
.sidebar-identity {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 14px 20px;
  margin-bottom: 4px;
  background: transparent;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: background 150ms;
}
.sidebar-identity:hover { background: var(--atlas-surface-card); }
.sidebar-identity:focus-visible { outline: 2px solid var(--atlas-blue-mid); outline-offset: 2px; }
.sidebar-client-name {
  display: block;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--atlas-text-primary, #EEF3F1);
  line-height: 1.2;
  word-break: break-word;
}
/* Atlas Elite tier eyebrow under client name. Hardcoded for May 1 launch
   (all 4 clients are this tier); future: drive from Client Details.Membership Tier. */
.sidebar-client-tier {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.sidebar-tier-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--atlas-success, #6CD693);
  box-shadow: 0 0 4px rgba(74,157,107,0.6);
  flex-shrink: 0;
}
/* Concierge sidebar item - gold dot + soft glow signals the live AI surface.
   Pulses gently to invite a tap, then settles. 25 May 2026. */
.sidebar-concierge { display: flex; align-items: center; gap: 9px; }
.sidebar-concierge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--atlas-gold, #D4B26A);
  box-shadow: 0 0 6px rgba(212,178,106,0.7), 0 0 12px rgba(212,178,106,0.3);
  flex-shrink: 0;
  animation: sidebar-concierge-pulse 2.4s ease-in-out infinite;
}
@keyframes sidebar-concierge-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(212,178,106,0.7), 0 0 12px rgba(212,178,106,0.3); }
  50%      { box-shadow: 0 0 9px rgba(212,178,106,0.9), 0 0 18px rgba(212,178,106,0.5); }
}
.sidebar-concierge:hover { color: var(--atlas-gold, #D4B26A); }
/* The floating Concierge pill is now superseded by the sidebar entry. We hide
   it rather than removing it from the DOM so the sidebar click can still
   trigger the panel via the existing pill.click() handler. 25 May 2026. */
#concierge-pill { display: none !important; }
/* Concierge as a full section (26 May 2026 - hero + chips presentation lifted
   from PepPedia/Cellular references). renderConcierge mounts a .concierge-page
   wrapper inside #atlas-section that contains the hero, a host for the dock
   #concierge-panel, and a chips row. The page lays out vertically: when the
   chat is empty, hero + chips show and the (empty) thread collapses so the
   input sits right under the chips. As soon as a message lands, :has() hides
   the hero + chips and the thread grows to fill the page. */
body.concierge-section #atlas-section {
  padding: 0;
  /* 29 May 2026 - was `height: calc(100vh - 16px)` (hard cap) which combined
     with body's lack of bottom padding made the input read flush against the
     viewport on long threads. Switched to min-height so empty-state still
     fills the screen but a tall thread expands naturally and respects the
     page's bottom padding. */
  min-height: calc(100vh - 16px);
  display: flex;
  flex-direction: column;
}
/* Belt-and-braces - body keeps a floor too, so the rendered input never
   touches the viewport edge regardless of which container ends up scrolling. */
body.concierge-section { padding-bottom: env(safe-area-inset-bottom, 0px); }
.concierge-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* 26 May 2026 (Harry: "use the width of the screen"): widened from 760px to
     match Cellular's edge-to-edge chat feel. Hero stays centred inside it; the
     thread and input use the full width, which gives embedded data widgets
     room to breathe. */
  max-width: 1180px;
  margin: 0 auto;
  /* 29 May 2026 PM - regressed 80% with the input bump (Harry: "bring it
     down"). Was 96, now 40. Combined with input margin of 32px, total
     bottom gap is ~72px - meaningful breathing room but the bar sits
     close to the natural bottom of the chat surface. */
  padding: 5vh 36px 40px;
  flex: 1;
  min-height: 0;
}
.cnp-hero {
  /* 26 May 2026 - Cellular-style left alignment (Harry). Big serif greeting +
     sub-line live in a left column instead of centered. */
  text-align: left;
  margin-bottom: 28px;
}
.cnp-hero-greeting {
  font-family: Georgia, 'Cormorant Garamond', 'Source Serif Pro', serif;
  font-weight: 400;
  font-size: clamp(38px, 5vw, 56px);
  line-height: 1.1;
  letter-spacing: -1px;
  color: #F1EEE8;
  margin: 0 0 14px;
}
.cnp-hero-sub {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(241,238,232,0.55);
  max-width: 560px;
  margin: 0;
}
/* View-as preview banner (Issue #1, 29 May 2026) - coach previewing a client. */
.cnp-viewas {
  margin: 0 0 14px;
  border: 1px solid var(--atlas-watch, #d9a441);
  background: var(--atlas-watch-tint, rgba(217,164,65,0.10));
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--atlas-watch, #d9a441);
}
/* Proactive nudge (CONCIERGE-PROACTIVE-SPEC §F) - one quiet, dismissible line
   above the chat. Mirrors the dock's #cx-nudge. Attention tone reuses the warn
   tint; info stays muted. Tappable when a suggestion is present. */
.cnp-nudge {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 18px;
  padding: 11px 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: var(--atlas-surface-card);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(241,238,232,0.78);
  transition: border-color 0.15s;
}
.cnp-nudge[hidden] { display: none; }
.cnp-nudge.cnp-nudge-attention {
  border-color: var(--atlas-watch, #d9a441);
  background: var(--atlas-watch-tint, rgba(217,164,65,0.10));
}
.cnp-nudge-line {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.cnp-nudge-text { flex: 1; min-width: 0; }
.cnp-nudge-arrow { flex: none; color: rgba(241,238,232,0.5); transition: color 0.15s; }
.cnp-nudge-tappable:hover { border-color: rgba(212,178,106,0.5); }
.cnp-nudge-tappable:hover .cnp-nudge-arrow { color: #D4B26A; }
.cnp-nudge-x {
  flex: none;
  background: none;
  border: none;
  color: rgba(241,238,232,0.45);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  border-radius: 8px;
}
.cnp-nudge-x:hover { color: #F1EEE8; }
.cnp-host {
  flex: 1;
  display: flex;
  /* 26 May 2026 - Bradley's profile rendered the page with no visible input
     because the panel mounted but the .cnp-host had `min-height: 0` and the
     panel sized to content. With recents short, the layout collapsed in a
     way the input got lost. Reserving a sensible min-height keeps the input
     area present regardless of how short the rest of the page is. */
  min-height: 96px;
  width: 100%;
}
.cnp-chips {
  display: flex;
  flex-wrap: wrap;
  /* 26 May 2026 - left-aligned to match Cellular (Harry). */
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 18px;
  order: -1; /* sits ABOVE the host (which contains the input) in empty state */
}
.cnp-chip {
  background: var(--atlas-surface-card);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(241,238,232,0.75);
  font-size: 13px;
  font-family: inherit;
  padding: 8px 14px;
  border-radius: 24px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.cnp-chip:hover {
  background: rgba(212,178,106,0.1);
  border-color: rgba(212,178,106,0.4);
  color: #F1EEE8;
}
.cnp-chip:focus-visible {
  outline: 2px solid rgba(212,178,106,0.55);
  outline-offset: 2px;
}
/* Once the conversation is going, the hero + chips dissolve and the chat
   takes the full page. :has() lets the CSS react to the dock's internal
   state without JS coupling. */
body.concierge-section .concierge-page:has(#cnp-msgs:not(:empty)) .cnp-hero,
body.concierge-section .concierge-page:has(#cnp-msgs:not(:empty)) .cnp-chips,
body.concierge-section .concierge-page:has(#cnp-msgs:not(:empty)) .cnp-nudge,
body.concierge-section .concierge-page:has(#cnp-msgs:not(:empty)) .cnp-recents {
  display: none;
}

/* ── Self-contained Concierge chat (26 May 2026, Slice 6h) ──
   Page now owns input + msgs directly rather than mounting the dock panel.
   These styles replace the body.concierge-section dock overrides for the
   in-page chat experience. */
.cnp-msgs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 18px;
  width: 100%;
}
.cnp-msgs:empty { display: none; }
.cnp-msg {
  max-width: 85%;
  font-size: 15px;
  line-height: 1.6;
  padding: 11px 16px;
  border-radius: 18px;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.cnp-msg.cnp-user {
  align-self: flex-end;
  max-width: 80%;
  background: rgba(255,255,255,0.08);
  color: #F1EEE8;
  border-bottom-right-radius: 5px;
}
.cnp-msg.cnp-bot {
  align-self: flex-start;
  max-width: 92%;
  background: var(--atlas-gold-soft, rgba(212,178,106,0.08));
  border-left: 3px solid var(--atlas-gold, #d4b26a);
  color: #F1EEE8;
  border-radius: 4px 18px 18px 4px;
}
.cnp-msg p { margin: 0 0 9px; }
.cnp-msg p:last-child { margin: 0; }
.cnp-msg.cnp-bot strong { font-weight: 600; }
/* 16 Jun 2026 - inline links (e.g. booking-link handover) on-brand + tappable. */
.cnp-msg.cnp-bot a { color: var(--atlas-gold, #d4b26a); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.cnp-msg.cnp-bot a:hover { opacity: 0.85; }
.cnp-msg.cnp-bot p.cnp-attribution {
  margin-top: 12px;
  font-size: 13px;
  font-style: italic;
  color: rgba(241,238,232,0.42);
  line-height: 1.5;
}
/* ── Structured answer (24 Jun 2026 - WHOOP-tidy). Mirrors the dock's .cx-a-*
   classes so both Concierge surfaces render identically. ── */
.cnp-msg.cnp-bot .cnp-a-steps {
  list-style: none;
  counter-reset: cnpstep;
  margin: 6px 0 2px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.cnp-msg.cnp-bot .cnp-a-step {
  position: relative;
  padding-left: 30px;
  counter-increment: cnpstep;
}
.cnp-msg.cnp-bot .cnp-a-step::before {
  content: counter(cnpstep);
  position: absolute;
  left: 0;
  top: 1px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--atlas-gold-soft, rgba(212,178,106,0.08));
  color: var(--atlas-gold, #d4b26a);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.cnp-msg.cnp-bot .cnp-a-step-h {
  display: block;
  font-weight: 600;
  color: #F1EEE8;
  line-height: 1.4;
  margin: 1px 0 6px;
}
.cnp-msg.cnp-bot .cnp-a-step-t {
  display: block;
  color: #F1EEE8;
  line-height: 1.45;
  padding-top: 2px;
}
.cnp-msg.cnp-bot .cnp-a-sub {
  list-style: none;
  margin: 0;
  padding: 0 0 0 13px;
  border-left: 2px solid var(--atlas-divider, rgba(255,255,255,0.10));
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cnp-msg.cnp-bot .cnp-a-sub li {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(241,238,232,0.86);
}
.cnp-msg.cnp-bot .cnp-a-bullets {
  list-style: none;
  margin: 7px 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cnp-msg.cnp-bot .cnp-a-bullets li {
  position: relative;
  padding-left: 16px;
  line-height: 1.5;
  color: rgba(241,238,232,0.86);
}
.cnp-msg.cnp-bot .cnp-a-bullets li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--atlas-gold, #d4b26a);
}
.cnp-typing {
  align-self: flex-start;
  max-width: 92%;
  padding: 11px 14px;
  background: var(--atlas-gold-soft, rgba(212,178,106,0.08));
  border-left: 3px solid var(--atlas-gold, #d4b26a);
  color: #F1EEE8;
  border-radius: 4px 18px 18px 4px;
  font-size: 14px;
  opacity: 0.88;
}
.cnp-typing-label { font-style: italic; color: rgba(241,238,232,0.85); }
.cnp-typing-dots {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  width: 0;
  animation: cnpdots 1.4s steps(4, end) infinite;
  white-space: nowrap;
}
@keyframes cnpdots { to { width: 1.2em; } }
.cnp-route {
  margin-top: 10px;
  border: 1px solid rgba(212,178,106,0.5);
  background: rgba(212,178,106,0.10);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
}
.cnp-route b { color: var(--atlas-gold, #d4b26a); font-weight: 600; }
.cnp-practice-log { margin-top: 10px; }
.cnp-practice-log-btn {
  font-family: inherit;
  font-size: 13px;
  color: #F1EEE8;
  background: rgba(74,157,107,0.10);
  border: 1px solid rgba(74,157,107,0.45);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
}
.cnp-practice-log-btn:hover { background: rgba(74,157,107,0.22); }
.cnp-practice-log-btn:disabled { opacity: 0.6; cursor: default; }
.cnp-practice-logged {
  font-size: 12px;
  color: rgba(241,238,232,0.7);
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(74,157,107,0.18);
  border: 1px solid rgba(74,157,107,0.45);
}
/* Actions contract (CONCIERGE-UPGRADE-SPEC §B) - full-page Concierge.
   Resolved-action chips (applied/staged/routed) + inline needs_confirm Yes/No.
   Green for applied, gold for staged, watch for routed. Small ✓/→ UI glyph. */
.cnp-actions { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.cnp-action-chip {
  align-self: flex-start;
  max-width: 100%;
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.45;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(74,157,107,0.34);
  background: rgba(74,157,107,0.10);
  color: var(--atlas-text-primary);
}
.cnp-action-chip .cnp-tick { color: #6CD693; font-weight: 700; flex: none; }
.cnp-action-chip.cnp-staged { border-color: rgba(207,170,82,0.4); background: rgba(207,170,82,0.10); }
.cnp-action-chip.cnp-staged .cnp-tick { color: var(--atlas-gold, #d4b26a); }
.cnp-action-chip.cnp-routed { border-color: rgba(212,178,106,0.5); background: rgba(212,178,106,0.10); }
.cnp-action-chip.cnp-routed .cnp-tick { color: var(--atlas-gold, #d4b26a); }
.cnp-confirm {
  align-self: flex-start;
  max-width: 100%;
  background: rgba(207,170,82,0.08);
  border: 1px solid rgba(207,170,82,0.4);
  border-radius: 12px;
  padding: 11px 13px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--atlas-text-primary);
}
.cnp-confirm-row { display: flex; gap: 8px; margin-top: 9px; }
.cnp-cbtn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid rgba(207,170,82,0.5);
  background: transparent;
  color: var(--atlas-text-primary);
  touch-action: manipulation;
}
.cnp-cbtn.cnp-go { background: var(--atlas-gold, #d4b26a); border-color: var(--atlas-gold, #d4b26a); color: #101514; }
.cnp-cbtn:disabled { opacity: 0.5; cursor: default; }

/* 29 May 2026 - Atlas pill answers on the full-page Concierge route. Gold
   tint mirrors Atlas's accent; pills wrap below each bot message and tap
   submits as the next user turn. */
.cnp-pills {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cnp-pill {
  font-family: inherit;
  font-size: 13px;
  color: var(--atlas-text-primary);
  background: rgba(207,170,82,0.10);
  border: 1px solid rgba(207,170,82,0.45);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  line-height: 1.2;
  touch-action: manipulation;
  text-align: left;
  max-width: 100%;
}
.cnp-pill:hover { background: rgba(207,170,82,0.22); border-color: rgba(207,170,82,0.70); }
.cnp-pill:disabled { opacity: 0.55; cursor: default; }
/* Retry affordance on a timed-out / errored Concierge turn (Issue #1, 29 May 2026). */
.cnp-retry { margin-top: 10px; }
.cnp-retry-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--atlas-text-primary);
  background: rgba(207,170,82,0.12);
  border: 1px solid rgba(207,170,82,0.50);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  line-height: 1.2;
  touch-action: manipulation;
}
.cnp-retry-btn:hover { background: rgba(207,170,82,0.24); border-color: rgba(207,170,82,0.72); }
.cnp-pageinput {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 5px 6px 5px 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  /* 29 May 2026 PM - regressed 80% of the previous bump (Harry: "bring it
     down a bit"). Was 72px, now 32px + safe-area inset. Combined with the
     page padding-bottom below (also reduced), the search bar sits much
     closer to the natural bottom while keeping a small visible gap. */
  margin: 16px 0 calc(env(safe-area-inset-bottom, 0px) + 32px);
  min-height: 56px;
  box-sizing: border-box;
  width: 100%;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.cnp-pageinput:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.24);
}
.cnp-pageinput:focus-within {
  border-color: rgba(212,178,106,0.55);
  background: rgba(255,255,255,0.08);
}
.cnp-pagetext {
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  padding: 11px 16px;
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 15px;
  color: #F1EEE8;
  resize: none;
  line-height: 1.4;
}
.cnp-pagetext::placeholder { color: rgba(241,238,232,0.42); }
.cnp-pagesend {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--atlas-gold, #d4b26a);
  color: #101514;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 0;
  transition: background-color 0.15s ease, transform 0.1s ease, color 0.15s ease;
}
.cnp-pagesend:hover:not(:disabled) {
  background: #e0c282;
  transform: scale(1.04);
}
.cnp-pagesend:active:not(:disabled) {
  transform: scale(0.96);
}
.cnp-pagesend:disabled {
  background: rgba(255,255,255,0.08);
  color: rgba(241,238,232,0.35);
  cursor: not-allowed;
}
.cnp-pagesend svg { display: block; }
/* Symmetric: in EMPTY state, collapse the messages container so the input
   pins right under the chips (PepPedia centred-search feel) rather than
   floating at the bottom with a tall blank area above it. */
body.concierge-section .concierge-page:not(:has(#cx-msgs:not(:empty))) #cx-msgs {
  display: none;
}
/* Strip the dock's floating chrome inside the section. */
body.concierge-section #concierge-panel {
  position: relative !important;
  inset: auto !important;
  top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
  width: 100% !important;
  max-width: none !important;
  /* 26 May 2026 - `height: 100%` + base `overflow: hidden` was clipping the
     pill to the .cnp-host's flex-shrunk height (Harry: "half a view"). Letting
     the panel size to its content (just the visible input in empty state)
     plus `overflow: visible` so nothing inside the panel gets clipped. */
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0!important;
  box-shadow: none !important;
}
body.concierge-section #concierge-panel .cx-head { display: none !important; } /* sidebar tells you where you are */
body.concierge-section #concierge-panel .cx-suggest { display: none !important; } /* we have our own chips */
body.concierge-section #concierge-panel .cx-close { display: none !important; }
/* 26 May 2026 - input pill styling (Harry: "remove the card the search pill
   lives in" → done; then "renders poorly / search bar isn't even present" →
   bumped opacities so the pill actually reads against the dark page; previous
   4%/10% values were invisible). Single rounded pill, visible at rest,
   gold-accented on focus. */
body.concierge-section #concierge-panel .cx-input {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 5px 6px 5px 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  /* 26 May 2026 - bumped bottom margin (Harry: "needs space underneath"). The
     pill now has clear breathing room before the Recent list below. */
  margin: 20px 0 40px;
  min-height: 56px;
  box-sizing: border-box;
  width: 100%;
}
body.concierge-section #concierge-panel .cx-input:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.24);
}
body.concierge-section #concierge-panel .cx-input:focus-within {
  border-color: rgba(212,178,106,0.55);
  background: rgba(255,255,255,0.08);
}
body.concierge-section #concierge-panel #cx-text {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 11px 16px !important;
  flex: 1;
  min-width: 0;
  font-size: 15px;
  color: #F1EEE8;
  resize: none;
}
body.concierge-section #concierge-panel #cx-text::placeholder {
  color: rgba(241,238,232,0.42);
}
body.concierge-section #concierge-panel .cx-send {
  flex: none;
}

/* (Previously added min-height: 100% on the panel to force-fill .cnp-host;
   removed 26 May 2026 because it pushed the input visually downward against
   the Recent list. Letting the panel size to natural input height + explicit
   margins gives a more predictable layout.) */
/* Recent chats - Cellular-style inline list (26 May 2026). Lives in the empty
   state below the chips. Each row tappable to load a past conversation. Hides
   when the chat goes active (extended :has() rule above). */
.cnp-recents {
  /* 26 May 2026 - left-aligned, full content width (Cellular pattern). */
  margin: 24px 0 0;
  width: 100%;
}
.cnp-recents-head {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(241,238,232,0.45);
  margin-bottom: 10px;
  padding-left: 4px;
}
.cnp-recents-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cnp-recent {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: #F1EEE8;
  transition: background 0.15s, border-color 0.15s;
}
.cnp-recent:hover {
  background: rgba(212,178,106,0.08);
  border-color: rgba(212,178,106,0.32);
}
.cnp-recent:focus-visible {
  outline: 2px solid rgba(212,178,106,0.55);
  outline-offset: 2px;
}
.cnp-recent-when {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(241,238,232,0.5);
}
.cnp-recent-snip {
  font-size: 14px;
  line-height: 1.4;
  color: rgba(241,238,232,0.85);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Mobile - let the hero shrink + chips wrap, chat fills viewport. */
@media (max-width: 640px) {
  .concierge-page { padding: 4vh 14px 32px; }
  .cnp-hero { margin-bottom: 18px; }
  .cnp-hero-sub { font-size: 14px; }
  .cnp-recents { margin-top: 18px; }
  .cnp-recent { padding: 10px 14px; }
}
.sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sidebar-item {
  display: block; width: 100%; text-align: left; padding: 10px 14px;
  border-radius: 12px; border: 1px solid transparent;
  background: transparent; color: #8F9A98; font-size: 13px; font-weight: 500;
  cursor: pointer; font-family: inherit; transition: all 150ms;
  text-decoration: none;
}
.sidebar-item:hover { color: #EEF3F1; background: var(--atlas-surface-card); }
.sidebar-item.active {
  color: #EEF3F1; background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  box-shadow: inset 12px 0 24px -16px rgba(255,255,255,0.14), inset -12px 0 24px -16px rgba(255,255,255,0.14);
}
.sidebar-bottom { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.sidebar-logout { color: #8F9A98 !important; }
.sidebar-tz-pill {
  display: block; padding: 4px 12px; margin: 0 12px 6px; border-radius: 8px;
  background: var(--atlas-surface-card); color: #8F9A98; font-size: 11px;
  font-weight: 600; text-align: center; letter-spacing: 0.3px; cursor: pointer;
}
.sidebar-tz-pill:hover { background: rgba(255,255,255,0.08); }
.sidebar-link { display: block; }

/* Layout with sidebar */
.app-layout { margin-left: 220px; min-height: 100vh; }

/* Mobile hamburger - fixed top-left now that the header is gone (28 Apr 2026
 * sidebar identity refactor). On desktop the sidebar is always visible so the
 * hamburger stays display:none; appears on mobile via the @media block below.
 * When the drawer is open (.sidebar.open) the hamburger hides so it doesn't
 * overlay the client-name identity at the top of the sidebar. The drawer
 * dismisses via overlay-tap or sidebar-item-tap, so the user has a way out. */
.sidebar-hamburger {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10000;
  width: 40px; height: 40px; border-radius: 12px; border: none;
  background: rgba(255,255,255,0.06); color: #EEF3F1; font-size: 20px;
  cursor: pointer; display: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.sidebar.open ~ .sidebar-hamburger { display: none !important; }

/* Today-page period controls. Range pills sit left, date picker pinned right -
 * keeps the date pill clear of the floating hamburger at top-left on mobile. */
.today-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px 0;
  margin-bottom: 8px;
}
.today-controls .date-control { margin-left: auto; }
/* Brief 48 added a quick-add CTA to Today + Schedule. Brief 51 (3 May 2026)
   moved it onto the Training tab. Brief 60 (3 May 2026) hoisted the styles
   here from atlas-sections.js _qacEnsureModal() - that function only runs
   on first modal open, so on a fresh Training tab visit the button used to
   render unstyled (default browser button on a dark background, easy to miss
   = "button missing" repro). Living in the global stylesheet means the row +
   button always paint correctly on first render. */
.training-quickadd-row { display:flex; justify-content:flex-end; margin-bottom:12px; }
.training-quickadd-btn {
  background: rgba(76,175,80,0.12); color:#4caf50;
  border:1px solid rgba(76,175,80,0.55); border-radius:24px;
  padding:8px 16px; font-size:12px; font-weight:600; letter-spacing:0.5px;
  cursor:pointer; transition: background 0.15s ease, color 0.15s ease;
}
.training-quickadd-btn:hover { background: rgba(76,175,80,0.22); color:#66bb6a; }
.sidebar-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9999;
  display: none;
  /* 4 May 2026 - cursor:pointer + touch-action ensure iOS Safari fires the
     click handler reliably when the user taps the dimmed page area outside
     the sidebar. Without these, mobile taps sometimes silent-no-op'd. */
  cursor: pointer;
  touch-action: manipulation;
}

/* Tablet: icon rail (Atlas DS v1 §10 - sidebar persists 768-1023 as 60px with hover-expand). */
@media (max-width: 1023px) and (min-width: 768px) {
  .sidebar { width: 60px; padding: 12px 8px; overflow: hidden; transition: width 200ms; }
  .sidebar:hover { width: 220px; }
  .sidebar-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 10px; font-size: 12px; }
  .sidebar-logo img { height: 28px; }
  .app-layout { margin-left: 60px; }
}

/* Mobile: hamburger + overlay drawer (Atlas DS v1 §10 - hamburger at ≤768). */
@media (max-width: 767px) {
  .sidebar { transform: translateX(-100%); transition: transform 200ms; width: 260px; }
  .sidebar.open { transform: translateX(0); }
  .sidebar-hamburger {
    display: flex; align-items: center; justify-content: center;
    /* Drop hamburger ~10px from the previous 12px so it sits in a clear row
     * above the period selector, not overlapping the date pill. */
    top: 22px;
  }
  .sidebar-overlay.open { display: block; }
  .app-layout { margin-left: 0; }
  /* 9 Jul 2026 - hamburger is display:none in the v3 shell (atlas-tabbar.css),
   * so the old 74px clearance was pure dead space at the top of every page. */
  #app-main { padding-top: 16px; }
}

/* Hide old section-nav pill bar */
.section-nav { display: none !important; }

/* §13 Quick-log toggles */
.qlog-row {
  display: flex; align-items: center; gap: 10px; padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04); flex-wrap: wrap;
}
.qlog-label { font-size: 13px; color: #c0c8d4; min-width: 130px; }
.qlog-toggle { display: flex; gap: 2px; }
.qlog-btn {
  padding: 4px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08);
  background: transparent; color: #8F9A98; font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.qlog-btn:hover { color: #EEF3F1; }
.qlog-btn-active { background: rgba(255,255,255,0.08); color: #EEF3F1; border-color: rgba(255,255,255,0.15); }
/* §4 Biomarkers grid */
.bio-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px;
}
@media (max-width: 480px) { .bio-grid { grid-template-columns: 1fr; } }

.qlog-notes {
  flex: 1; min-width: 120px; background: var(--atlas-surface-card);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 8px;
  color: #EEF3F1; padding: 4px 8px; font-size: 11px; font-family: inherit;
}

/* ── Meal Detail Modal (§4) ── */
.mdm-modal {
  max-width: 600px; padding: 0; overflow: hidden; overflow-y: auto;
  /* 4 May 2026 - same scroll fix as .nutr-modal: dvh + safe-area-inset-bottom
     so the bottom of long meal descriptions / ingredients / actions clears
     iOS Safari toolbar + home indicator. */
  max-height: calc(100dvh - 40px - env(safe-area-inset-bottom, 0px));
  max-height: calc(100vh - 40px - env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.mdm-hero { width: 100%; height: 225px; object-fit: cover; display: block; }
.mdm-hero-placeholder { width: 100%; height: 120px; background: var(--atlas-surface-nested); display: flex; align-items: center; justify-content: center; color: #8F9A98; font-size: 13px; }
.mdm-macros-bar { padding: 10px 24px; font-size: 14px; font-weight: 600; color: #EEF3F1; background: var(--atlas-surface-nested); border-bottom: 1px solid rgba(255,255,255,0.06); }
.mdm-body { padding: 20px 24px; }
.mdm-header { display: flex; align-items: flex-start; gap: 8px; }
.mdm-name { margin: 0; font-size: 18px; font-weight: 700; color: #EEF3F1; flex: 1; }
.mdm-fav-btn { background: none; border: none; font-size: 20px; color: #8F9A98; cursor: pointer; padding: 0; }
.mdm-fav-btn.active { color: rgb(252,211,77); }
.mdm-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.mdm-section { margin-top: 16px; }
.mdm-benefits { font-size: 13px; color: #8F9A98; line-height: 1.6; margin: 4px 0 0; }
.mdm-ing-list { margin: 4px 0 0; padding: 0; list-style: none; }
.mdm-ing-list li { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 12px; color: #c0c8d4; }
.mdm-ing-g { color: #8F9A98; }

/* ── Inspire input styling fix (§5.2) ── */
.inspire-macro-inputs input {
  background: rgba(255,255,255,0.06) !important;
  border: none !important;
  border-bottom: 2px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px 8px 0 0!important;
  color: #EEF3F1;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 12px;
  transition: border-color 0.15s;
}
.inspire-macro-inputs input:focus {
  border-bottom-color: #6CD693 !important;
  outline: none;
}

/* ══════════════════════════════════════════════════════
   §7 - Universal card glow system
   ══════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════
   Brief 14 §3 - Single glass card spec
   C1 (25 Apr) - normalized: surface tokens, blur 12px (was 16),
   inset glow shadows removed, hover translate removed. Canonical
   card signature now matches .atlas-card.
   ══════════════════════════════════════════════════════ */
:root {
  --surface-glass: var(--atlas-surface-card);
}
.card-glow, .journal-card, .atlas-card, .meal-card-library, .nutr-builder-card,
.supp-card, .ucard, .chart-wrap, .nutrition-summary, .ongoing-banner, .morning-prompt,
.ai-unified-panel, .nutr-inspire-card, .nutr-inspire-remaining {
  background: var(--atlas-surface-card);
  border: 1px solid var(--atlas-border);
  border-radius: 20px;
  padding: var(--atlas-space-4);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  transition: border-color 150ms cubic-bezier(0.22, 1, 0.36, 1),
              background-color 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.card-glow:hover, .journal-card:hover, .atlas-card:hover, .meal-card-library:hover,
.nutr-builder-card:hover, .supp-card:hover, .chart-wrap:hover, .ucard:hover {
  border-color: var(--atlas-border-strong);
}
/* No per-card colour variants. Severity/category/source live inside cards as pills only. */
.journal-sev-red, .journal-sev-amber, .journal-sev-green, .journal-sev-neutral,
.card-glow--green, .card-glow--amber, .card-glow--red, .card-glow--blue, .card-glow--purple {
  /* Inherit the single glass spec - no colour override */
}
.meal-slot .meal-card-library {
  /* No purple override - inherits glass spec */
}

/* §3.4 Typography consistency */
.journal-entry-title, .atlas-card-header h3, .meal-name, .supp-name {
  font-size: 14px; font-weight: 600; color: #EEF3F1;
}
.journal-entry-body, .atlas-card-body, .meal-notes {
  font-size: 12px; color: #BCC6C4;
}
.journal-entry-time, .atlas-card-sub {
  font-size: 11px; color: #8F9A98;
}
.ai-insight-section { margin-bottom: 12px; }
.ai-insight-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: #8F9A98;
  text-transform: uppercase; margin-bottom: 6px;
}
.ai-obs-list { margin: 0; padding: 0 0 0 16px; font-size: 12px; color: #8F9A98; line-height: 1.8; }
.ai-obs-list li { margin-bottom: 4px; }
.ai-obs-list strong { color: #EEF3F1; }
.ai-correlation {
  padding: 8px 10px; background: var(--atlas-surface-nested); border-radius: 8px;
  margin-bottom: 6px; font-size: 12px;
}
.ai-corr-metric { color: #EEF3F1; font-weight: 600; }
.ai-corr-link { color: #a68532; font-size: 11px; margin: 2px 0; }
.ai-corr-interp { color: #8F9A98; line-height: 1.5; }
.ai-pred-flag {
  padding: 10px 12px; background: rgba(232,168,87,0.06);
  border: 1px solid rgba(232,168,87,0.15); border-radius: 12px; margin-bottom: 8px;
}
.ai-pred-header { font-size: 11px; font-weight: 700; color: rgb(252,211,77); margin-bottom: 4px; }
.ai-pred-pattern { font-size: 12px; color: #EEF3F1; line-height: 1.5; margin-bottom: 4px; }
.ai-pred-match { font-size: 11px; color: #8F9A98; margin-bottom: 4px; }
.ai-pred-rec { font-size: 12px; color: #c0c8d4; line-height: 1.5; }

/* ── Menu tab: favourites + star + 3-col grid ── */
.nutr-favs-section { margin-bottom: 20px; }
.nutr-favs-scroll {
  display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.nutr-favs-scroll::-webkit-scrollbar { display: none; }
.nutr-fav-card {
  flex-shrink: 0; cursor: pointer; text-align: center; width: 120px;
}
.nutr-fav-name { font-size: 11px; font-weight: 600; color: #EEF3F1; margin-top: 6px; line-height: 1.3; }
.nutr-fav-macros { font-size: 10px; color: #8F9A98; margin-top: 2px; }

.meal-fav-star {
  position: absolute; top: 8px; right: 8px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,0,0,0.5); border: none;
  color: #8F9A98; font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s; z-index: 2;
}
.meal-fav-star:hover { color: #EEF3F1; }
.meal-fav-star.active { color: rgb(252,211,77); }

@media (min-width: 1280px) {
  .nutr-builder-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (min-width: 900px) and (max-width: 1279px) {
  .nutr-builder-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .nutr-builder-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Global hover lift for all interactive cards */
.nutr-builder-card,
.meal-card-library,
.journal-card,
.atlas-card,
.supp-card {
  transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.nutr-builder-card:hover,
.meal-card-library:hover,
.journal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

/* ── Ingredient-level adjusters (Brief 8) ── */
.ing-adj-list { margin: 8px 0; }
.ing-adj-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 12px;
  position: relative;
}
.ing-adj-name { flex: 1; color: #c0c8d4; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ing-adj-search {
  flex: 1; background: var(--atlas-surface-card); border: 1px solid rgba(255,255,255,0.08);
  color: #EEF3F1; padding: 4px 8px; border-radius: 8px; font-size: 11px; font-family: inherit;
}
.ing-adj-ctrl { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.ing-adj-step {
  width: 24px; height: 24px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08);
  background: var(--atlas-surface-card); color: #8F9A98; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ing-adj-step:hover { color: #EEF3F1; }
.ing-adj-grams {
  width: 48px; text-align: center; background: var(--atlas-surface-card);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; color: #EEF3F1;
  font-size: 12px; padding: 3px 4px; font-family: inherit;
}
.ing-adj-unit { font-size: 10px; color: #8F9A98; }
.ing-adj-remove {
  background: none; border: none; color: #8F9A98; font-size: 16px; cursor: pointer;
  padding: 0 4px; flex-shrink: 0;
}
.ing-adj-remove:hover { color: #c4534a; }
.meal-add-ing-btn {
  width: 100%; padding: 8px; border-radius: 8px; border: 1px dashed rgba(255,255,255,0.08);
  background: transparent; color: #8F9A98; font-size: 11px; font-weight: 600; cursor: pointer;
  font-family: inherit; margin: 6px 0 10px; transition: all 0.15s;
}
.meal-add-ing-btn:hover { color: #8F9A98; border-color: rgba(255,255,255,0.15); }
.meal-card-totals { font-size: 13px; font-weight: 600; color: #8F9A98; margin: 6px 0 10px; }
.mct-kcal { color: #EEF3F1; }
.meal-detail-btn { background: transparent !important; border: 1px solid rgba(255,255,255,0.08) !important; color: #8F9A98 !important; }
.meal-detail-btn:hover { color: #EEF3F1 !important; border-color: rgba(255,255,255,0.15) !important; }

/* Ingredient search results dropdown */
.ing-search-results {
  position: absolute; top: 100%; left: 0; right: 60px; z-index: 100;
  background: #1D2524; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
  max-height: 180px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.ing-search-item {
  padding: 8px 12px; font-size: 12px; color: #c0c8d4; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ing-search-item:hover { background: rgba(255,255,255,0.06); }
.ing-search-item:last-child { border-bottom: none; }

/* ATLAS badge on food search results */
.atlas-badge {
  display: inline-block; padding: 1px 5px; border-radius: 4px; font-size: 9px;
  font-weight: 800; letter-spacing: 0.5px; background: rgba(59,130,246,0.15);
  color: rgb(147,197,253); margin-right: 4px; vertical-align: middle;
}

/* Inspired placeholder tile (§5.4) */
.inspired-placeholder {
  width: 100%; height: 160px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(168,85,247,0.08));
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.inspired-glyph { font-size: 32px; }
.inspired-label {
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em; color: rgb(168,85,247);
  text-transform: uppercase;
}

/* ── Global Journal FAB ── */
.journal-fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 100;
  width: 56px; height: 56px; border-radius: 50%;
  background: #263332; border: 1px solid rgba(255,255,255,0.1);
  color: #EEF3F1; font-size: 22px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}
.journal-fab:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(0,0,0,0.5); }

/* Quick Note button on Nutrition tab bar */
.nutr-quick-note {
  margin-left: auto;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: transparent;
  color: #8F9A98;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all 0.15s;
}
.nutr-quick-note:hover { color: #EEF3F1; border-color: rgba(255,255,255,0.15); }

/* ═══════════════════════════════════════════════════════════════════════════
 * GOALS + HABITS (Brief 16 parallel track) - Atlas DS v1 tokens only.
 * Trend-pill for status (§4). Empty-state rule (§6). Touch targets ≥44px (§10).
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Shared section chrome */
.atlas-section-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--atlas-space-3); margin-bottom: var(--atlas-space-4);
}
.atlas-section-title {
  font-size: var(--atlas-font-display-md-size); line-height: var(--atlas-font-display-md-lh);
  font-weight: var(--atlas-font-display-md-weight); letter-spacing: var(--atlas-font-display-md-tracking);
  color: var(--atlas-text-primary); margin: 0;
}
.atlas-section-sub {
  font-size: var(--atlas-font-label-size); font-weight: var(--atlas-font-label-weight);
  letter-spacing: var(--atlas-font-label-tracking); text-transform: uppercase;
  color: var(--atlas-text-muted);
  margin: var(--atlas-space-5) 0 var(--atlas-space-3);
}
/* 10 Jul 2026 - unified to the brand gold (Harry: "blue button is off from
   all other buttons - keep it uniformed"). Matches the Home ask bar + coach
   cockpit primaries; the blue tint is retired for primary CTAs. */
.atlas-btn-primary {
  padding: 10px 16px; min-height: 44px;
  background: var(--atlas-gold-grad, #d4b26a); color: #141008;
  border: none;
  border-radius: 8px; cursor: pointer; font-family: inherit;
  font-size: var(--atlas-font-body-sm-size); font-weight: 600;
  box-shadow: 0 4px 18px rgba(212,178,106,0.2), inset 0 1px 0 rgba(255,255,255,0.3);
  transition: background 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.atlas-btn-primary:hover { background: #e0c481; }
.atlas-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.atlas-btn-ghost {
  padding: 8px 14px; min-height: 36px;
  background: transparent; color: var(--atlas-text-muted);
  border: 1px solid var(--atlas-border-strong); border-radius: 8px;
  cursor: pointer; font-family: inherit;
  font-size: var(--atlas-font-body-sm-size); font-weight: 500;
}

/* ── VO2 testing panel (10 Jul 2026) - formalised type scale. One place for
   every text size on the testing surface; no inline px in the renderers.
   Inputs stay 16px (iOS zoom threshold). ─────────────────────────────── */
.vo2p-title-val { font-size: 22px; font-weight: 600; color: var(--atlas-text-primary, #f1eee8); }
.vo2p-title-meta { font-size: var(--atlas-font-body-sm-size, 13px); color: var(--atlas-text-muted, #8F9A98); }
.vo2p-step { display: flex; gap: 10px; margin-top: 6px; font-size: var(--atlas-font-body-size, 14px); line-height: 1.5; color: var(--atlas-text-body, #e8e6df); }
.vo2p-step .n { color: var(--atlas-text-muted, #8F9A98); flex: none; }
.vo2p-bullet { display: flex; gap: 10px; margin-top: 6px; font-size: var(--atlas-font-body-size, 14px); line-height: 1.5; color: var(--atlas-text-muted, #aeb7c4); }
.vo2p-label { display: block; font-size: var(--atlas-font-label-size, 12px); color: var(--atlas-text-muted, #8F9A98); margin-bottom: 4px; }
.vo2p-input, .vo2p-select, .vo2p-textarea {
  width: 100%; font-size: 16px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid #3a4650; background: #1c2423; color: #EEF3F1; font-family: inherit;
}
.vo2p-input { max-width: 280px; }
.vo2p-textarea { resize: vertical; }
.vo2p-note { font-size: var(--atlas-font-body-sm-size, 13px); color: var(--atlas-text-muted, #8F9A98); margin: 6px 0 0; }
.vo2p-msg { margin-top: 8px; font-size: var(--atlas-font-body-sm-size, 13px); color: #E8A857; min-height: 16px; }
.vo2p-hist { display: flex; justify-content: space-between; gap: 10px; font-size: var(--atlas-font-body-sm-size, 13px); padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.vo2p-hist .d, .vo2p-hist .m { color: var(--atlas-text-muted, #8F9A98); }
.vo2p-hist .m { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vo2p-hist .v { font-weight: 600; }
.vo2p-next { font-size: var(--atlas-font-body-size, 14px); line-height: 1.5; color: var(--atlas-text-muted, #aeb7c4); margin: 10px 0 0; }
.atlas-btn-ghost:hover { background: var(--atlas-surface-hover); color: var(--atlas-text-body); }
.atlas-empty-cta {
  padding: var(--atlas-space-8) var(--atlas-space-5);
  text-align: center;
  color: var(--atlas-text-muted);
  font-size: var(--atlas-font-body-size);
}
.atlas-empty-cta p { margin: 0 0 var(--atlas-space-4); }

/* Check-in empty state - actionable next-steps card. 28 May 2026.
   Replaces the floating centered "window opens Friday" hint. */
.checkin-nextup { padding: 18px 20px; margin-bottom: 20px; }
.checkin-nextup-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.checkin-nextup-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(212,178,106,0.85); }
.checkin-nextup-when { font-size: 14px; font-weight: 600; color: #F1EEE8; }
.checkin-nextup-hint { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(241,238,232,0.45); margin-bottom: 8px; }
.checkin-nextup-list { display: flex; flex-direction: column; gap: 6px; }
.checkin-nextup-row {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px; background: var(--atlas-surface-nested);
  border: 1px solid rgba(255,255,255,0.06); border-radius: 8px;
  cursor: pointer; text-align: left; font-family: inherit;
  transition: background 140ms ease, border-color 140ms ease, transform 100ms ease;
}
.checkin-nextup-row:hover { background: rgba(212,178,106,0.06); border-color: rgba(212,178,106,0.28); }
.checkin-nextup-row:active { transform: scale(0.998); }
.checkin-nextup-row-title { font-size: 14px; font-weight: 600; color: #F1EEE8; }
.checkin-nextup-row-sub { font-size: 12px; color: rgba(241,238,232,0.55); line-height: 1.45; }
/* Pulse the Generate button when "Review your last 30 days" is clicked from the empty state. */
.checkin-nextup-pulse { animation: checkin-nextup-pulse 0.9s ease-out 0s 2 alternate; }
@keyframes checkin-nextup-pulse {
  from { box-shadow: 0 0 0 0 rgba(212,178,106,0); }
  to   { box-shadow: 0 0 0 6px rgba(212,178,106,0.35); }
}
/* Subline under the page header - "Window opens Fri 30 May · 3-week streak". */
.atlas-section-subline { font-size: 12px; color: rgba(241,238,232,0.55); margin-top: 2px; letter-spacing: 0.2px; }

/* Proposed-awaiting-review banner (shared Goals + Habits) */
.proposed-banner {
  background: var(--atlas-watch-tint);
  border: 1px solid var(--atlas-watch);
  border-radius: 12px;
  padding: var(--atlas-space-3) var(--atlas-space-4);
  margin-bottom: var(--atlas-space-4);
}
.proposed-banner-title {
  font-size: var(--atlas-font-label-size); font-weight: var(--atlas-font-label-weight);
  letter-spacing: var(--atlas-font-label-tracking); text-transform: uppercase;
  color: var(--atlas-watch); margin-bottom: var(--atlas-space-2);
}
.proposed-row {
  font-size: var(--atlas-font-body-sm-size); color: var(--atlas-text-body);
  padding: 4px 0;
}

/* ── Goal card (v2: static hero + Action-plan accordion) ── */
.goal-card {
  /* v2 reset: restore the standard card padding (was 0 in v1 static-nested layout). */
  padding: var(--atlas-space-5) !important;
  display: flex; flex-direction: column; gap: var(--atlas-space-4);
}
.goal-header { display: flex; flex-direction: column; gap: var(--atlas-space-2); }
.goal-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--atlas-space-2); }
.goal-title {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--atlas-font-title-size); line-height: var(--atlas-font-title-lh);
  font-weight: var(--atlas-font-title-weight); letter-spacing: var(--atlas-font-title-tracking);
  color: var(--atlas-text-primary); margin: 0;
}

/* ── Goal hero: current → target + progress bar + context ── */
.goal-hero { display: flex; flex-direction: column; gap: var(--atlas-space-2); }
.goal-values {
  display: flex; align-items: baseline; gap: var(--atlas-space-3);
  font-variant-numeric: tabular-nums;
}
.goal-current, .goal-target {
  font-size: var(--atlas-font-display-lg-size);
  line-height: var(--atlas-font-display-lg-lh);
  font-weight: var(--atlas-font-display-lg-weight);
  letter-spacing: var(--atlas-font-display-lg-tracking);
}
.goal-current { color: var(--atlas-text-primary); }
.goal-target { color: var(--atlas-blue-mid); }
.goal-unit {
  font-size: var(--atlas-font-body-size); font-weight: 500;
  color: var(--atlas-text-faint); margin-left: 2px;
}
.goal-arrow { font-size: 20px; color: var(--atlas-text-faint); font-weight: 400; }

.goal-progress-bar {
  height: 6px; border-radius: 999px;
  background: var(--atlas-surface-hover);
  overflow: hidden;
}
.goal-progress-fill {
  height: 100%; border-radius: 999px;
  background: var(--atlas-blue-mid);
  transition: width 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.goal-context {
  font-size: var(--atlas-font-body-sm-size); line-height: var(--atlas-font-body-sm-lh);
  color: var(--atlas-text-body);
}
.goal-dates {
  font-size: var(--atlas-font-caption-size); color: var(--atlas-text-faint);
}

/* ── Action plan accordion ── */
.goal-plan {
  border-top: 1px solid var(--atlas-divider);
  padding-top: var(--atlas-space-3);
}
.goal-plan > summary {
  cursor: pointer; list-style: none;
  padding: 8px 0;
  font-size: var(--atlas-font-label-size); font-weight: var(--atlas-font-label-weight);
  letter-spacing: var(--atlas-font-label-tracking); text-transform: uppercase;
  color: var(--atlas-text-muted); user-select: none;
  display: flex; align-items: center; gap: 6px;
  transition: color 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.goal-plan > summary:hover { color: var(--atlas-text-body); }
.goal-plan > summary::-webkit-details-marker { display: none; }
.goal-plan > summary::before {
  content: "\25B8"; color: var(--atlas-text-faint); font-size: 10px;
  display: inline-block; transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.goal-plan[open] > summary::before { transform: rotate(90deg); }
.goal-plan-body { padding-top: var(--atlas-space-2); }

/* ── Custom goal-step checkbox (Atlas DS v1 §4 - square 18px, blue-mid checked) ── */
.goal-step-checkbox {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px;
  border: 1.5px solid var(--atlas-border-strong);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 150ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 150ms cubic-bezier(0.22, 1, 0.36, 1);
  flex-shrink: 0;
  margin: 0;
}
.goal-step-checkbox:hover { border-color: var(--atlas-blue-mid); }
.goal-step-checkbox:checked {
  background: var(--atlas-blue-mid);
  border-color: var(--atlas-blue-mid);
}
.goal-step-checkbox:checked::after {
  content: "\2713"; /* ✓ */
  color: var(--atlas-bg);
  font-size: 12px; font-weight: 800; line-height: 1;
}
.goal-step-checkbox:focus-visible {
  outline: 2px solid var(--atlas-blue-pale);
  outline-offset: 2px;
}

/* Legacy v1 card-details rules - unused in v2 but retained to avoid clobber on other surfaces. */
.goal-card-details { display: block; }
.goal-card-summary {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--atlas-space-3); padding: var(--atlas-space-4);
  cursor: pointer; list-style: none;
}
.goal-card-summary::-webkit-details-marker { display: none; }
.goal-summary-main { flex: 1 1 auto; min-width: 0; }
.goal-summary-aside {
  display: flex; align-items: center; gap: var(--atlas-space-2);
  flex-shrink: 0;
}
.goal-chev {
  color: var(--atlas-text-faint); font-size: 14px;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.goal-card-details[open] .goal-chev { transform: rotate(90deg); }
.goal-title-row { display: flex; align-items: center; gap: var(--atlas-space-2); margin-bottom: var(--atlas-space-2); }
.goal-title {
  font-size: var(--atlas-font-title-size); line-height: var(--atlas-font-title-lh);
  font-weight: var(--atlas-font-title-weight); letter-spacing: var(--atlas-font-title-tracking);
  color: var(--atlas-text-primary); margin: 0;
}
.goal-description {
  font-size: var(--atlas-font-body-size); line-height: var(--atlas-font-body-lh);
  color: var(--atlas-text-body); margin-bottom: var(--atlas-space-2);
}
.goal-pills { display: flex; flex-wrap: wrap; gap: var(--atlas-space-2); margin-bottom: var(--atlas-space-2); }
.goal-pill {
  display: inline-flex; align-items: center; height: 20px;
  padding: 2px 8px; border-radius: 8px;
  background: var(--atlas-surface-hover); color: var(--atlas-text-body);
  font-size: var(--atlas-font-label-size); font-weight: var(--atlas-font-label-weight);
}
.goal-pill-outline { background: transparent; border: 1px solid var(--atlas-border-strong); color: var(--atlas-text-muted); }

/* ── Today tab - habit quick-add pill row (28 Apr) ── */
.today-habits {
  margin: 0 0 var(--atlas-space-4);
  padding: 14px 16px;
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
}
.today-habits-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 10px; gap: 12px;
}
.today-habits-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--atlas-text-muted, #8F9A98);
}
.today-habits-progress {
  font-size: 11px; font-weight: 600; color: var(--atlas-text-faint, #8F9A98);
  font-variant-numeric: tabular-nums;
}
.today-habits-row {
  display: flex; gap: 8px; flex-wrap: nowrap;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.today-habits-row::-webkit-scrollbar { height: 4px; }
.today-habits-row::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
.today-habit-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 18px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--atlas-text-body, #EEF3F1);
  font-size: 13px; font-weight: 600; font-family: inherit;
  cursor: pointer;
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.15s, border-color 0.15s;
  white-space: nowrap; flex-shrink: 0;
  transform-origin: center;
}
.today-habit-pill:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.22);
}
.today-habit-pill:focus-visible {
  outline: 2px solid rgba(74,157,107,0.55);
  outline-offset: 2px;
}
.today-habit-pill.fading-out {
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
}
.today-habit-pill.shake {
  animation: today-habit-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
  border-color: rgba(196,83,74,0.55);
}
@keyframes today-habit-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}
.today-habit-pill-glyph {
  font-size: 14px; line-height: 1;
  color: var(--atlas-text-faint, #8F9A98);
}
.today-habit-pill-label { line-height: 1.1; }
@media (max-width: 600px) {
  .today-habits { padding: 12px 14px; }
}

/* ── Today tab - at-a-glance plan card (28 Apr) ── */
.today-checklist {
  margin: 0 0 var(--atlas-space-4);
  padding: 14px 16px;
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
}
.today-checklist-head {
  margin-bottom: 8px;
}
.today-checklist-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--atlas-text-muted, #8F9A98);
}
.today-checklist-rows {
  display: flex; flex-direction: column; gap: 6px;
}
.today-checklist-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  font-size: 13px;
  line-height: 1.4;
}
.today-checklist-row--link {
  cursor: pointer;
  margin: 0 -8px;
  padding: 6px 8px;
  border-radius: 8px;
  transition: background 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.today-checklist-row--link:hover,
.today-checklist-row--link:focus-visible {
  background: rgba(91,155,181,0.08);
  outline: none;
}
.today-checklist-row + .today-checklist-row {
  border-top: 1px solid rgba(255,255,255,0.05);
}
.today-checklist-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--atlas-text-faint, #8F9A98);
}
.today-checklist-value {
  color: var(--atlas-text-body, #EEF3F1);
  font-weight: 500;
  word-break: break-word;
}
@media (max-width: 600px) {
  .today-checklist { padding: 12px 14px; }
  .today-checklist-row {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 2px;
  }
}
/* Coming up - upcoming travel/events card on Today (22 May 2026) */
.today-coming { margin: 0 0 var(--atlas-space-4); }
.today-coming-card {
  padding: 0; background: var(--atlas-surface-nested);
  border: 1px solid rgba(255,255,255,0.06); border-radius: 12px;
}
.today-coming-summary {
  list-style: none; cursor: pointer; padding: 14px 16px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--atlas-text-muted, #8F9A98);
  display: flex; align-items: center; gap: 8px;
}
.today-coming-summary::-webkit-details-marker { display: none; }
.today-coming-summary::after { content: '▾'; margin-left: auto; transition: transform 150ms; opacity: 0.6; }
.today-coming-card[open] .today-coming-summary::after { transform: rotate(180deg); }
.today-coming-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--atlas-blue-tint, rgba(108,140,255,0.18)); color: var(--atlas-blue-mid, #6c8cff);
  font-size: 11px; font-weight: 700; letter-spacing: 0;
}
.today-coming-list { display: flex; flex-direction: column; gap: 6px; padding: 0 16px 14px; }
.today-coming-row {
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: baseline;
  padding: 8px 10px; background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.05); border-radius: 8px;
}
.today-coming-name { font-size: 13px; font-weight: 600; color: var(--atlas-text-body, #F1EEE8); }
.today-coming-meta { font-size: 11px; color: var(--atlas-text-muted); white-space: nowrap; }
@media (max-width: 480px) {
  .today-coming-row { grid-template-columns: 1fr; gap: 2px; }
  .today-coming-meta { white-space: normal; }
}

.goal-meta-line {
  margin-top: var(--atlas-space-2);
  font-size: var(--atlas-font-caption-size);
  color: var(--atlas-text-muted);
}
.goal-meta-item { margin-right: 4px; }
.goal-detail {
  padding: var(--atlas-space-4);
  border-top: 1px solid var(--atlas-divider);
}
.goal-steps-slot { margin-bottom: var(--atlas-space-4); }
.goal-steps-loading, .goal-steps-empty, .goal-steps-error {
  font-size: var(--atlas-font-body-sm-size); color: var(--atlas-text-faint);
  padding: var(--atlas-space-2) 0;
}
.goal-steps-error { color: var(--atlas-concern); }
.goal-steps-head { margin-bottom: var(--atlas-space-2); }
.goal-steps-count {
  font-size: var(--atlas-font-label-size); font-weight: var(--atlas-font-label-weight);
  letter-spacing: var(--atlas-font-label-tracking); text-transform: uppercase;
  color: var(--atlas-text-muted);
}
.goal-steps-list { display: flex; flex-direction: column; gap: 2px; }
.goal-step-row {
  display: grid; grid-template-columns: 22px 1fr; column-gap: var(--atlas-space-2); row-gap: 2px;
  align-items: start; padding: 8px 0;
  min-height: 44px;
  cursor: pointer; border-radius: 8px;
  transition: background 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.goal-step-row:hover { background: var(--atlas-surface-hover); }
.goal-step-row input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: 2px;
  accent-color: var(--atlas-blue-mid); cursor: pointer;
}
.goal-step-title {
  font-size: var(--atlas-font-body-sm-size); color: var(--atlas-text-body);
}
.goal-step-impl {
  grid-column: 2;
  font-size: var(--atlas-font-caption-size); color: var(--atlas-text-faint);
}
.goal-step-complete .goal-step-title { color: var(--atlas-text-faint); text-decoration: line-through; }
.goal-woop {
  margin: var(--atlas-space-4) 0;
  border-top: 1px solid var(--atlas-divider);
  padding-top: var(--atlas-space-3);
}
.goal-woop > summary {
  cursor: pointer; list-style: none;
  font-size: var(--atlas-font-label-size); font-weight: var(--atlas-font-label-weight);
  letter-spacing: var(--atlas-font-label-tracking); text-transform: uppercase;
  color: var(--atlas-text-muted); padding: 8px 0;
}
.goal-woop > summary::-webkit-details-marker { display: none; }
.goal-woop > summary::before {
  content: "\25B8"; color: var(--atlas-text-faint); font-size: 10px; margin-right: 6px;
  display: inline-block; transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.goal-woop[open] > summary::before { transform: rotate(90deg); }
.goal-woop-row { margin-bottom: var(--atlas-space-3); }
.goal-woop-lbl {
  display: block;
  font-size: var(--atlas-font-label-size); font-weight: var(--atlas-font-label-weight);
  letter-spacing: var(--atlas-font-label-tracking); text-transform: uppercase;
  color: var(--atlas-text-muted); margin-bottom: 4px;
}
.goal-woop-body {
  font-size: var(--atlas-font-body-sm-size); line-height: var(--atlas-font-body-sm-lh);
  color: var(--atlas-text-body);
}
.goal-commentary { margin-top: var(--atlas-space-4); }
.goal-commentary-lbl, .habit-commentary-lbl {
  display: block;
  font-size: var(--atlas-font-label-size); font-weight: var(--atlas-font-label-weight);
  letter-spacing: var(--atlas-font-label-tracking); text-transform: uppercase;
  color: var(--atlas-text-muted); margin-bottom: 4px;
}
.goal-commentary-input, .habit-commentary-input {
  width: 100%; min-height: 68px; resize: vertical;
  background: var(--atlas-bg-elev-1); color: var(--atlas-text-body);
  border: 1px solid var(--atlas-border-strong); border-radius: 8px;
  padding: 10px 12px;
  font-family: inherit; font-size: var(--atlas-font-body-sm-size); line-height: var(--atlas-font-body-sm-lh);
}
.goal-commentary-input:focus, .habit-commentary-input:focus {
  outline: none; border-color: var(--atlas-blue-mid);
}
.goal-commentary-status, .habit-commentary-status {
  display: inline-block; margin-top: 4px;
  font-size: var(--atlas-font-caption-size); color: var(--atlas-text-faint);
  min-height: 14px;
}
.goal-coach-notes {
  margin-top: var(--atlas-space-4);
  padding: var(--atlas-space-3);
  background: var(--atlas-gold-soft);
  border-left: 2px solid var(--atlas-gold);
  border-radius: 8px;
}
.goal-coach-notes-lbl {
  font-size: var(--atlas-font-label-size); font-weight: var(--atlas-font-label-weight);
  letter-spacing: var(--atlas-font-label-tracking); text-transform: uppercase;
  color: var(--atlas-gold); margin-bottom: 4px;
}
.goal-coach-notes-body {
  font-size: var(--atlas-font-body-sm-size); line-height: var(--atlas-font-body-sm-lh);
  color: var(--atlas-text-body);
}

/* ── Habit card ── */
.habits-list { display: flex; flex-direction: column; gap: var(--atlas-space-2); }
.habits-summary {
  margin-top: var(--atlas-space-3);
  font-size: var(--atlas-font-label-size); font-weight: var(--atlas-font-label-weight);
  letter-spacing: var(--atlas-font-label-tracking); text-transform: uppercase;
  color: var(--atlas-text-muted);
}

/* Brief 23 Ship 2 (30 Apr 2026) - unified Habits page totals + 7-day cells. */
.habits-totals {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-bottom: var(--atlas-space-3);
}
.habits-total-pill {
  font-size: var(--atlas-font-body-sm-size);
  padding: 6px 12px; border-radius: 18px;
  background: var(--atlas-surface-card);
  border: 1px solid var(--atlas-divider);
  color: var(--atlas-text-body);
}
.habits-total-pill strong {
  color: var(--atlas-text-strong, #F1EEE8);
  font-weight: 700; font-variant-numeric: tabular-nums;
  margin-right: 3px;
}
.habits-totals-meta {
  font-size: var(--atlas-font-caption-size);
  color: var(--atlas-text-muted);
  margin-left: auto;
}

/* Unified card - tappable cells, today highlight, Logged pill. */
.habit-card-unified .habit-week-row {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  margin-top: var(--atlas-space-2);
}
.habit-card-unified .habit-week-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 6px 0;
  background: var(--atlas-surface-nested);
  border: 1px solid transparent; border-radius: 8px;
  color: var(--atlas-text-faint);
  cursor: pointer; font-family: inherit;
  min-height: 44px; /* mobile touch target */
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.habit-card-unified button.habit-week-cell { /* override default button chrome */
  -webkit-appearance: none; appearance: none;
}
.habit-card-unified .habit-week-cell:hover:not(.future) {
  background: rgba(255,255,255,0.07);
  border-color: var(--atlas-divider);
}
.habit-card-unified .habit-week-cell:active:not(.future) {
  transform: scale(0.96);
}
.habit-card-unified .habit-week-cell:focus-visible {
  outline: 2px solid var(--atlas-blue-mid);
  outline-offset: 2px;
}
.habit-card-unified .habit-week-cell.filled {
  background: rgba(100,181,246,0.12);
}
.habit-card-unified .habit-week-cell.filled .habit-week-mark {
  color: var(--atlas-blue-mid);
}
.habit-card-unified .habit-week-cell.today {
  background: rgba(212,178,106,0.10);
  border-color: rgba(212,178,106,0.40);
}
.habit-card-unified .habit-week-cell.today.filled {
  background: rgba(212,178,106,0.22);
  border-color: rgba(212,178,106,0.60);
}
.habit-card-unified .habit-week-cell.today.filled .habit-week-mark {
  color: #D4B26A;
}
.habit-card-unified .habit-week-cell.future {
  cursor: not-allowed; opacity: 0.4;
}

/* Brief 23 Ship 2.4 - dynamic stage target appended to title. Lighter weight so
   the canonical name reads as primary; the target reads as week-specific context. */
.habit-target-suffix {
  font-weight: 400;
  color: var(--atlas-text-muted, rgba(255,255,255,0.55));
}

/* Logged pill - confirms today's tick at a glance. */
.habit-logged-pill {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px;
  background: rgba(105,240,174,0.15);
  color: var(--atlas-up);
  margin-left: 4px;
}

/* Compact totals on narrow viewports - meta drops below pills. */
@media (max-width: 540px) {
  .habits-totals { flex-direction: column; align-items: stretch; gap: 6px; }
  .habits-totals-meta { margin-left: 0; }
}

/* Brief 23 Ship 2.1 - window navigation + Daily/Weekly section split. */
.habits-window-nav {
  display: flex; align-items: center; gap: 12px;
  margin: 4px 0 var(--atlas-space-3);
  padding: 8px 12px;
  background: var(--atlas-surface-nested);
  border: 1px solid var(--atlas-divider);
  border-radius: 8px;
}
.habits-window-btn {
  -webkit-appearance: none; appearance: none;
  font: inherit; cursor: pointer;
  padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--atlas-divider);
  background: rgba(255,255,255,0.05);
  color: var(--atlas-text-body);
  font-size: var(--atlas-font-body-sm-size);
  transition: background 0.12s, border-color 0.12s;
}
.habits-window-btn:hover:not([disabled]) {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
}
.habits-window-btn:focus-visible {
  outline: 2px solid var(--atlas-blue-mid);
  outline-offset: 2px;
}
.habits-window-btn[disabled] {
  opacity: 0.35; cursor: not-allowed;
}
.habits-window-label {
  flex: 1; text-align: center;
  font-size: var(--atlas-font-body-sm-size);
  color: var(--atlas-text-body);
  font-variant-numeric: tabular-nums;
}

.habits-section { margin-bottom: var(--atlas-space-4, 16px); }
.habits-section + .habits-section { margin-top: var(--atlas-space-3); }
.habits-section-title {
  font-size: var(--atlas-font-label-size); font-weight: var(--atlas-font-label-weight);
  letter-spacing: var(--atlas-font-label-tracking); text-transform: uppercase;
  color: var(--atlas-text-muted);
  margin-bottom: var(--atlas-space-2);
  display: flex; align-items: center; gap: 8px;
}
.habits-section-count {
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: var(--atlas-text-muted);
  letter-spacing: 0;
}

@media (max-width: 540px) {
  .habits-window-nav { flex-wrap: wrap; gap: 8px; padding: 8px; }
  .habits-window-label { order: -1; flex: 1 0 100%; text-align: left; }
}
.habit-card { padding: var(--atlas-space-3) !important; transition: background 120ms ease; }
/* 30 May 2026 PM - selected-state visual contract (see
   project_selected_state_visual_contract.md). When a habit card is
   expanded, pull to canonical 2px gold rail + 90deg gradient + bright
   title. Same visual family as My Stack, Coming Up, Atlas Recommends,
   Daily Timing, Today row. */
.habit-card.habit-card-open {
  background: linear-gradient(90deg, rgba(212,178,106,0.10), rgba(255,255,255,0.05) 60%) !important;
  border-left: 2px solid #D4B26A !important;
}
.habit-card.habit-card-open .habit-title { color: #F4DDA8; }
.habit-row {
  display: flex; align-items: center; gap: var(--atlas-space-3);
}
.habit-check {
  flex-shrink: 0;
  width: 44px; height: 44px; min-width: 44px;
  border-radius: 50%;
  border: 2px solid var(--atlas-border-strong);
  background: transparent; color: var(--atlas-blue-mid);
  font-size: 20px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center;
  transition: all 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.habit-check:hover { border-color: var(--atlas-blue-mid); }
.habit-check.checked {
  background: var(--atlas-blue-tint); color: var(--atlas-blue-mid);
  border-color: var(--atlas-blue-mid);
}
.habit-check:disabled { opacity: 0.6; cursor: wait; }
.habit-body { flex: 1 1 auto; min-width: 0; }
.habit-title-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--atlas-space-2);
  min-height: 24px;
}
.habit-title {
  font-size: var(--atlas-font-title-size); font-weight: var(--atlas-font-title-weight);
  color: var(--atlas-text-primary);
}
.habit-streak {
  font-size: var(--atlas-font-caption-size); font-weight: 600;
  color: var(--atlas-watch);
}
.habit-freq-target {
  font-size: var(--atlas-font-caption-size);
  color: var(--atlas-text-muted);
}
.habit-expand-btn {
  flex-shrink: 0;
  width: 44px; height: 44px; min-width: 44px;
  background: transparent; border: none;
  color: var(--atlas-text-faint); font-size: 14px;
  cursor: pointer; font-family: inherit;
  transition: color 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.habit-expand-btn:hover { color: var(--atlas-text-body); }
.habit-log-today-btn {
  flex-shrink: 0; min-height: 44px;
  white-space: nowrap;
}
.habit-log-today-btn[aria-pressed="true"] {
  background: var(--atlas-up-tint); color: var(--atlas-up); border-color: var(--atlas-up);
}
.habit-detail {
  margin-top: var(--atlas-space-3);
  padding-top: var(--atlas-space-3);
  border-top: 1px solid var(--atlas-divider);
  display: flex; flex-direction: column; gap: var(--atlas-space-3);
}
.habit-detail[hidden] { display: none; }
.habit-detail-row { display: flex; gap: var(--atlas-space-3); }
.habit-lbl {
  flex-shrink: 0; min-width: 80px;
  font-size: var(--atlas-font-label-size); font-weight: var(--atlas-font-label-weight);
  letter-spacing: var(--atlas-font-label-tracking); text-transform: uppercase;
  color: var(--atlas-text-muted);
}
.habit-detail-row > div {
  flex: 1 1 auto;
  font-size: var(--atlas-font-body-sm-size); line-height: var(--atlas-font-body-sm-lh);
  color: var(--atlas-text-body);
}
/* 31 May 2026 - Atomic Habits framework: "Make this habit yours" inline panel
   inside the habit-detail. Promoted from violet to the brand gold-rail + 90deg
   gradient pattern used by Nutrition supplement accordions - same selected-
   state visual language across the dashboard so consistency does the work.
   Auto-saves each field on blur. */
.habit-ah-panel {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(212,178,106,0.32);
  border-left: 3px solid #D4B26A;
  background: linear-gradient(90deg, rgba(212,178,106,0.10), rgba(255,255,255,0.05) 60%);
  display: flex; flex-direction: column; gap: 10px;
}
.habit-ah-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.habit-ah-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(212,178,106,0.9); }
.habit-ah-progress {
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  padding: 2px 8px; border-radius: 8px;
  background: rgba(212,178,106,0.16); color: #D4B26A;
  border: 1px solid rgba(212,178,106,0.32);
}
.habit-ah-fields { display: flex; flex-direction: column; gap: 8px; }
.habit-ah-field { display: flex; flex-direction: column; gap: 4px; }
.habit-ah-lbl { font-size: 11px; color: rgba(241,238,232,0.65); line-height: 1.4; }
.habit-ah-lbl strong { color: #F1EEE8; font-weight: 700; font-size: 12px; letter-spacing: 0.2px; }
.habit-ah-input { width: 100%; box-sizing: border-box; padding: 8px 10px; background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.08); color: #F1EEE8; border-radius: 8px; font-size: 13px; line-height: 1.45; font-family: inherit; resize: vertical; outline: none; }
.habit-ah-input:focus { border-color: rgba(212,178,106,0.55); background: rgba(0,0,0,0.32); }
.habit-ah-input::placeholder { color: rgba(241,238,232,0.32); font-style: italic; }
.habit-ah-status { font-size: 11px; color: rgba(241,238,232,0.5); align-self: flex-end; min-height: 14px; }
/* Sister panel inside the shared _schOpenDetailModal - same gold-rail
   treatment so Daily Timeline + Practice habit modals stay visually
   identical. */
.sch-ah-section {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(212,178,106,0.32);
  border-left: 3px solid #D4B26A;
  background: linear-gradient(90deg, rgba(212,178,106,0.10), rgba(255,255,255,0.05) 60%);
  display: flex; flex-direction: column; gap: 10px;
}
.sch-ah-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sch-ah-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(212,178,106,0.9); }
.sch-ah-progress {
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  padding: 2px 8px; border-radius: 8px;
  background: rgba(212,178,106,0.16); color: #D4B26A;
  border: 1px solid rgba(212,178,106,0.32);
}
.sch-ah-fields { display: flex; flex-direction: column; gap: 8px; }
.sch-ah-field { display: flex; flex-direction: column; gap: 4px; }
.sch-ah-lbl { font-size: 11px; color: rgba(241,238,232,0.65); line-height: 1.4; }
.sch-ah-lbl strong { color: #F1EEE8; font-weight: 700; font-size: 13px; letter-spacing: 0.2px; }
.sch-ah-input { width: 100%; box-sizing: border-box; padding: 9px 11px; background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.08); color: #F1EEE8; border-radius: 8px; font-size: 13px; line-height: 1.45; font-family: inherit; resize: vertical; outline: none; }
.sch-ah-input:focus { border-color: rgba(212,178,106,0.55); background: rgba(0,0,0,0.32); }
.sch-ah-input::placeholder { color: rgba(241,238,232,0.32); font-style: italic; }
.sch-ah-status { font-size: 11px; color: rgba(241,238,232,0.5); align-self: flex-end; min-height: 14px; }
/* 26 May 2026 - Client-owned "Your time" picker. Custom hour/minute selects
   (native <input type=time> ignores most CSS on Safari/iOS - fork to paired
   <select>s for cross-browser fidelity). Auto-saves on change; status pill
   flashes Saved/Cleared in green for 2.2s. Reset button labeled "Clear". */
.sch-detail-cell--yourtime { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.sch-yourtime-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sch-yourtime-picker {
  display: inline-flex; align-items: center; gap: 2px;
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  padding: 3px 6px;
  transition: border-color 120ms ease, background 120ms ease;
}
.sch-yourtime-picker:hover { border-color: rgba(241,238,232,0.3); }
.sch-yourtime-picker:focus-within { border-color: rgba(241,238,232,0.5); background: rgba(0,0,0,0.45); }
.sch-yourtime-sel {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: transparent;
  border: none;
  color: #F1EEE8;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 4px 4px;
  cursor: pointer;
  outline: none;
  text-align: center;
  text-align-last: center;
  min-width: 32px;
  color-scheme: dark;
}
.sch-yourtime-sel option { background: #1D2524; color: #F1EEE8; font-weight: 500; }
.sch-yourtime-sel:focus { color: #FFFFFF; }
.sch-yourtime-colon { color: rgba(241,238,232,0.55); font-weight: 700; font-size: 15px; user-select: none; }
.sch-yourtime-reset {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.6);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.2px;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.sch-yourtime-reset:hover { background: rgba(255,255,255,0.06); color: #F1EEE8; border-color: rgba(255,255,255,0.28); }
.sch-yourtime-status {
  display: inline-flex; align-items: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 3px 8px;
  border-radius: 8px;
  transition: opacity 160ms ease;
  min-height: 22px;
}
.sch-yourtime-status:empty { display: none; }
.sch-yourtime-status[data-kind="saving"] { background: rgba(255,255,255,0.06); color: rgba(241,238,232,0.7); }
.sch-yourtime-status[data-kind="ok"] { background: rgba(120,200,140,0.16); color: #94e3a8; }
.sch-yourtime-status[data-kind="ok"]::before { content: "✓"; margin-right: 4px; font-weight: 700; }
.sch-yourtime-status[data-kind="reset"] { background: rgba(255,255,255,0.06); color: rgba(241,238,232,0.7); }
.sch-yourtime-status[data-kind="hint"] { background: rgba(255,200,100,0.12); color: #ffc864; }
.sch-yourtime-status[data-kind="err"] { background: rgba(220,90,90,0.18); color: #f59595; }
.sch-yourtime-hint {
  font-size: 11px;
  color: rgba(241,238,232,0.45);
  letter-spacing: 0.2px;
  line-height: 1.3;
  font-style: italic;
}
.habit-week-dots { display: inline-flex; gap: 4px; }
.habit-week-dot {
  font-size: 14px; color: var(--atlas-text-faint);
}
.habit-week-dot.filled { color: var(--atlas-blue-mid); }
.habit-week-row {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  margin-top: var(--atlas-space-2);
}
.habit-week-cell {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px 0;
  color: var(--atlas-text-faint);
}
.habit-week-dow {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--atlas-text-muted);
}
.habit-week-mark { font-size: 16px; color: var(--atlas-text-faint); }
.habit-week-cell.filled .habit-week-mark { color: var(--atlas-blue-mid); }
.habit-week-cell.future .habit-week-mark { opacity: 0.35; }
.habit-week-count {
  margin-top: var(--atlas-space-2);
  font-size: var(--atlas-font-caption-size); color: var(--atlas-text-muted);
}
.habit-week-count.met { color: var(--atlas-up); font-weight: 600; }

/* ── Progressive Habits Phase 1 - Stage block + map (Atlas DS v1 tokens only) ── */
.habit-stage-block {
  margin-top: var(--atlas-space-3);
  padding: var(--atlas-space-3);
  background: var(--atlas-blue-tint);
  border-left: 2px solid var(--atlas-blue-mid);
  border-radius: 4px;
  display: flex; flex-direction: column; gap: 6px;
}
.habit-stage-week {
  font-size: var(--atlas-font-label-size); font-weight: 700;
  letter-spacing: var(--atlas-font-label-tracking);
  color: var(--atlas-blue-mid);
}
.habit-stage-target {
  font-size: var(--atlas-font-body-sm-size); color: var(--atlas-text-body);
}
.habit-stage-lbl {
  text-transform: uppercase; letter-spacing: var(--atlas-font-label-tracking);
  font-size: 10px; color: var(--atlas-text-muted); margin-right: 6px;
}
.habit-stage-desc {
  font-size: var(--atlas-font-body-sm-size);
  line-height: var(--atlas-font-body-sm-lh);
  color: var(--atlas-text-muted);
  font-style: italic;
  padding-left: var(--atlas-space-3);
  border-left: 1px solid var(--atlas-divider);
}

/* Full progression map - shown in expand detail. */
.habit-stage-map {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--atlas-space-2) 0;
}
.habit-stage-map-title {
  font-size: var(--atlas-font-label-size); font-weight: var(--atlas-font-label-weight);
  letter-spacing: var(--atlas-font-label-tracking); text-transform: uppercase;
  color: var(--atlas-text-muted); margin-bottom: 6px;
}
.habit-stage-row {
  display: flex; align-items: center; gap: var(--atlas-space-3);
  padding: 8px var(--atlas-space-2);
  border-radius: 8px;
  transition: background 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.habit-stage-row-num {
  flex-shrink: 0; width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  background: var(--atlas-surface-hover); color: var(--atlas-text-muted);
}
.habit-stage-row-main {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.habit-stage-row-title {
  font-size: var(--atlas-font-body-sm-size); color: var(--atlas-text-body);
}
.habit-stage-row-target {
  font-size: var(--atlas-font-caption-size); color: var(--atlas-text-faint);
}
.habit-stage-row-status {
  flex-shrink: 0; font-size: 14px; color: var(--atlas-text-faint);
}

/* Status variants (applied to the row). */
.stage-status-active {
  background: var(--atlas-blue-tint);
}
.stage-status-active .habit-stage-row-num {
  background: var(--atlas-blue-mid); color: var(--atlas-bg);
}
.stage-status-active .habit-stage-row-status { color: var(--atlas-blue-mid); }
.stage-status-active .habit-stage-row-title { color: var(--atlas-text-primary); font-weight: 600; }

.stage-status-completed { opacity: 0.65; }
.stage-status-completed .habit-stage-row-num { background: var(--atlas-up-tint); color: var(--atlas-up); }
.stage-status-completed .habit-stage-row-status { color: var(--atlas-up); }

.stage-status-pending { opacity: 0.55; }

.stage-status-held .habit-stage-row-num { background: var(--atlas-watch-tint); color: var(--atlas-watch); }
.stage-status-held .habit-stage-row-status { color: var(--atlas-watch); }

.stage-status-skipped { opacity: 0.4; }
.stage-status-skipped .habit-stage-row-title { text-decoration: line-through; }

/* Coach-advance button (conditional on window.__atlas_isCoach). */
.habit-stage-advance-btn {
  flex-shrink: 0; min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--atlas-blue-mid);
  border-radius: 8px;
  background: var(--atlas-blue-tint);
  color: var(--atlas-blue-mid);
  font-size: var(--atlas-font-label-size); font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.habit-stage-advance-btn:hover { background: rgba(91,155,181,0.25); }
.habit-stage-advance-btn:disabled { opacity: 0.5; cursor: wait; }

/* ── Weekly Check-In card (Progressive Habits Phase 1) ──
 * Atlas DS v1 tokens. 3-layer scaffold with layer 1 (Dynamic) hidden at MVP. */
.checkin-card {
  margin-bottom: var(--atlas-space-5);
  display: flex; flex-direction: column; gap: var(--atlas-space-4);
  border-left: 3px solid var(--atlas-blue-mid) !important;
}
.checkin-card-completed {
  border-left: 3px solid var(--atlas-up) !important;
  opacity: 0.85;
}
.checkin-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--atlas-space-3);
}
.checkin-label {
  font-size: var(--atlas-font-title-size); font-weight: var(--atlas-font-title-weight);
  color: var(--atlas-text-primary);
}
.checkin-completed-body {
  font-size: var(--atlas-font-body-sm-size); color: var(--atlas-text-muted);
}
.checkin-section {
  display: flex; flex-direction: column; gap: var(--atlas-space-2);
  padding-top: var(--atlas-space-3);
  border-top: 1px solid var(--atlas-divider);
}
.checkin-section:first-of-type { padding-top: 0; border-top: none; }
.checkin-section-title {
  font-size: var(--atlas-font-label-size); font-weight: var(--atlas-font-label-weight);
  letter-spacing: var(--atlas-font-label-tracking); text-transform: uppercase;
  color: var(--atlas-text-muted);
}
.checkin-habits-list { display: flex; flex-direction: column; gap: var(--atlas-space-3); }
.checkin-habit-row {
  display: grid; grid-template-columns: 1fr auto; gap: var(--atlas-space-2);
  align-items: center;
}
.checkin-habit-main { min-width: 0; }
.checkin-habit-title {
  font-size: var(--atlas-font-body-size); font-weight: 600;
  color: var(--atlas-text-primary);
}
.checkin-habit-target {
  font-size: var(--atlas-font-caption-size); color: var(--atlas-text-muted);
  margin-top: 2px;
}
.checkin-response-group {
  grid-column: 2;
  display: inline-flex; gap: 4px;
}
.checkin-resp-btn {
  min-height: 44px; padding: 0 14px;
  background: transparent; color: var(--atlas-text-muted);
  border: 1px solid var(--atlas-border-strong); border-radius: 8px;
  font-size: var(--atlas-font-body-sm-size); font-weight: 500;
  cursor: pointer; font-family: inherit;
  transition: background 150ms cubic-bezier(0.22, 1, 0.36, 1), color 150ms;
}
.checkin-resp-btn:hover { background: var(--atlas-surface-hover); color: var(--atlas-text-body); }
.checkin-resp-btn.selected {
  background: var(--atlas-blue-tint); color: var(--atlas-blue-mid);
  border-color: var(--atlas-blue-mid);
}
.checkin-exception-reason {
  grid-column: 1 / -1;
  background: var(--atlas-bg-elev-1); color: var(--atlas-text-body);
  border: 1px solid var(--atlas-border-strong); border-radius: 8px;
  padding: 8px 12px; min-height: 36px;
  font-family: inherit; font-size: var(--atlas-font-body-sm-size);
}
.checkin-exception-reason:focus { outline: none; border-color: var(--atlas-blue-mid); }

/* Day 5 (10 May 2026) - Weekly Card objective tick-off rows in the check-in.
   Same visual register as habit rows but with a gold accent on the Yes button
   (matches the Card's gold-themed coach-note panel) so the contract framing
   reads through. "No" reveals the optional context input below. */
.checkin-objectives-section { background: rgba(212,178,106,0.04); border: 1px solid rgba(212,178,106,0.18); border-radius: 12px; padding: 14px 16px; }
.checkin-objectives-list { display: flex; flex-direction: column; gap: 8px; }
.checkin-obj-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; background: var(--atlas-surface-nested); border: 1px solid rgba(255,255,255,0.05); border-radius: 8px; }
.checkin-obj-main { min-width: 0; }
.checkin-obj-title { font-size: var(--atlas-font-body-size); font-weight: 600; color: var(--atlas-text-body, #F1EEE8); line-height: 1.4; }
.checkin-obj-type { font-size: var(--atlas-font-caption-size); color: rgba(241,238,232,0.4); margin-top: 2px; letter-spacing: 0.06em; text-transform: uppercase; }
.checkin-obj-resp { display: inline-flex; gap: 4px; }
.checkin-obj-btn { min-height: 38px; padding: 0 14px; background: transparent; color: rgba(241,238,232,0.55); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; font-size: var(--atlas-font-body-sm-size); font-weight: 600; cursor: pointer; font-family: inherit; transition: background 150ms, color 150ms, border-color 150ms; }
.checkin-obj-btn:hover { background: var(--atlas-surface-card); color: var(--atlas-text-body, #F1EEE8); }
.checkin-obj-btn[data-resp="Yes"].selected { background: rgba(74,157,107,0.18); color: #4A9D6B; border-color: #4A9D6B; }
.checkin-obj-btn[data-resp="No"].selected { background: rgba(239,83,80,0.16); color: #E88A8A; border-color: rgba(239,83,80,0.45); }
.checkin-obj-btn[data-resp="Skip"].selected { background: rgba(255,255,255,0.06); color: rgba(241,238,232,0.7); border-color: rgba(255,255,255,0.2); }
.checkin-obj-notes { grid-column: 1 / -1; background: rgba(0,0,0,0.2); color: var(--atlas-text-body, #F1EEE8); border: 1px solid rgba(239,83,80,0.25); border-radius: 8px; padding: 8px 12px; min-height: 36px; font-family: inherit; font-size: var(--atlas-font-body-sm-size); }
.checkin-obj-notes:focus { outline: none; border-color: rgba(239,83,80,0.5); }
@media (max-width: 540px) {
  .checkin-obj-row { grid-template-columns: 1fr; }
  .checkin-obj-resp { justify-content: flex-start; }
}

.checkin-slider-row {
  display: grid; grid-template-columns: 90px 1fr; gap: var(--atlas-space-2);
  align-items: center;
}
.checkin-slider-lbl {
  font-size: var(--atlas-font-body-sm-size); color: var(--atlas-text-body);
}
.checkin-slider-track {
  display: flex; align-items: center; gap: var(--atlas-space-2);
  flex-wrap: wrap;
}
.checkin-slider-endpoint {
  font-size: var(--atlas-font-caption-size); color: var(--atlas-text-muted);
  flex-shrink: 0;
  min-width: 60px;
}
.checkin-slider-endpoint:first-of-type { text-align: right; }
.checkin-slider { display: inline-flex; gap: 6px; }
.checkin-slider-dot {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--atlas-border-strong);
  cursor: pointer; font-family: inherit;
  transition: all 150ms cubic-bezier(0.22, 1, 0.36, 1);
  padding: 0;
}
.checkin-slider-dot:hover { border-color: var(--atlas-blue-mid); }
.checkin-slider-dot.selected {
  background: var(--atlas-blue-mid);
  border-color: var(--atlas-blue-mid);
}
.checkin-slider-dot:focus-visible {
  outline: 2px solid var(--atlas-blue-pale);
  outline-offset: 2px;
}

.checkin-flags {
  display: flex; flex-wrap: wrap; gap: var(--atlas-space-2);
}
.checkin-flag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--atlas-surface-hover);
  border: 1px solid var(--atlas-border); border-radius: 999px;
  font-size: var(--atlas-font-body-sm-size); color: var(--atlas-text-body);
  cursor: pointer;
  min-height: 36px;
}
.checkin-flag input[type="checkbox"] { margin: 0; }

.checkin-textarea {
  width: 100%; min-height: 72px; resize: vertical;
  background: var(--atlas-bg-elev-1); color: var(--atlas-text-body);
  border: 1px solid var(--atlas-border-strong); border-radius: 8px;
  padding: 10px 12px;
  font-family: inherit; font-size: var(--atlas-font-body-sm-size); line-height: var(--atlas-font-body-sm-lh);
}
.checkin-textarea:focus { outline: none; border-color: var(--atlas-blue-mid); }

.checkin-prompt-block {
  padding: var(--atlas-space-2) var(--atlas-space-3);
  background: var(--atlas-blue-tint);
  border-left: 2px solid var(--atlas-blue-mid);
  border-radius: 4px;
  font-size: var(--atlas-font-body-sm-size); line-height: var(--atlas-font-body-sm-lh);
  color: var(--atlas-text-body); white-space: pre-wrap;
}

.checkin-actions {
  display: flex; align-items: center; gap: var(--atlas-space-3);
  padding-top: var(--atlas-space-3);
  border-top: 1px solid var(--atlas-divider);
}
.checkin-submit-status {
  font-size: var(--atlas-font-caption-size); color: var(--atlas-text-faint);
}

@media (max-width: 480px) {
  .checkin-habit-row { grid-template-columns: 1fr; }
  .checkin-response-group { grid-column: 1; justify-content: flex-start; }
  .checkin-slider-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ── Travel review + event manager (22 May 2026) ───────────────────────────── */
.checkin-travel-review .checkin-trip-review {
  background: rgba(212,178,106,0.04);
  border: 1px solid rgba(212,178,106,0.18);
  border-radius: 12px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px; margin-top: 8px;
}
.checkin-trip-review-head { font-size: var(--atlas-font-body-size); font-weight: 600; color: var(--atlas-text-primary, #F1EEE8); }
.checkin-trip-review-dates { font-size: var(--atlas-font-caption-size); font-weight: 500; color: var(--atlas-text-muted); margin-left: 6px; }

.evm-card { display: flex; flex-direction: column; gap: var(--atlas-space-4, 20px); margin-top: var(--atlas-space-3, 16px); }
.evm-block { display: flex; flex-direction: column; gap: 10px; }
.evm-head { display: flex; align-items: center; justify-content: space-between; }
.evm-title {
  font-size: var(--atlas-font-label-size, 11px); font-weight: var(--atlas-font-label-weight, 600);
  letter-spacing: var(--atlas-font-label-tracking, 0.6px); text-transform: uppercase;
  color: var(--atlas-text-muted);
}
.evm-add-btn {
  background: rgba(212,178,106,0.08); color: #D4B26A;
  border: 1px solid rgba(212,178,106,0.35); border-radius: 8px;
  padding: 6px 12px; min-height: 34px; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 600; transition: background 150ms, border-color 150ms;
}
.evm-add-btn:hover { background: rgba(212,178,106,0.16); border-color: rgba(212,178,106,0.55); }
.evm-list { display: flex; flex-direction: column; gap: 8px; }
.evm-empty { font-size: 13px; color: var(--atlas-text-faint, rgba(241,238,232,0.4)); padding: 6px 2px; }
.evm-item {
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: start;
  padding: 12px 14px; background: var(--atlas-surface-nested);
  border: 1px solid rgba(255,255,255,0.06); border-radius: 12px;
}
.evm-item.evm-item-editing { display: block; }
.evm-item-main { min-width: 0; }
.evm-item-name { font-size: 14px; font-weight: 600; color: var(--atlas-text-body, #F1EEE8); }
.evm-item-loc { font-weight: 500; color: var(--atlas-text-muted); }
.evm-item-meta { font-size: 12px; color: var(--atlas-text-muted); margin-top: 2px; }
.evm-item-notes { font-size: 13px; color: var(--atlas-text-body, #F1EEE8); margin-top: 6px; white-space: pre-wrap; opacity: 0.85; }
.evm-item-actions { display: inline-flex; gap: 10px; align-items: center; }
.evm-link { background: none; border: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--atlas-text-body, #BCC6C4); padding: 4px 2px; }
.evm-link:hover { text-decoration: underline; }
.evm-link-danger { color: #E88A8A; }
.evm-coach-tag { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--atlas-text-faint, rgba(241,238,232,0.4)); border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; padding: 3px 9px; }
.evm-add-form { padding: 14px 0 4px; margin-top: 8px; border-top: 1px solid rgba(255,255,255,0.08); }
.evm-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.evm-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.evm-field[hidden] { display: none; }
.evm-field-wide { grid-column: 1 / -1; }
.evm-field > span { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--atlas-text-muted); }
.evm-hint { text-transform: none !important; letter-spacing: normal !important; font-size: 11px; color: var(--atlas-text-faint, rgba(241,238,232,0.45)); margin-top: 2px; font-style: italic; }
.evm-field input, .evm-field select, .evm-field textarea {
  width: 100%; color-scheme: dark;
  background: var(--atlas-bg-elev-1, rgba(0,0,0,0.25)); color: var(--atlas-text-body, #F1EEE8);
  border: 1px solid var(--atlas-border-strong); border-radius: 8px; padding: 9px 11px;
  font-family: inherit; font-size: 14px;
}
.evm-field textarea { min-height: 56px; resize: vertical; }
.evm-field input:focus, .evm-field select:focus, .evm-field textarea:focus { outline: none; border-color: rgba(212,178,106,0.5); }
/* Phase 2 (29 May 2026 refactor) - flight-leg editor: Outbound + Inbound. */
/* 23 Jul 2026 (Harry) - de-boxed on desktop too (was a nested card). Reads as
   a divided section, matching the no-cards-in-cards grammar the mobile pass
   already applied. */
.evm-flights { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.08); }
.evm-flights[hidden] { display: none; }
.evm-flights-intro { margin-bottom: 14px; }
.evm-flights-intro .evm-section-label { display: block; margin-bottom: 4px; }
.evm-flights-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.evm-flights-hint { font-size: 11px; color: rgba(241,238,232,0.5); line-height: 1.45; display: block; }
.evm-section-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #8F9A98; }
.evm-flight-direction { padding: 10px 0; }
.evm-flight-direction + .evm-flight-direction { border-top: 1px dashed rgba(255,255,255,0.08); margin-top: 4px; padding-top: 14px; }
.evm-leg-add { background: transparent; border: 1px dashed rgba(212,178,106,0.5); color: #D4B26A; padding: 5px 10px; border-radius: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.3px; cursor: pointer; font-family: inherit; }
.evm-leg-add:hover { background: rgba(212,178,106,0.12); border-style: solid; }
.evm-flights-list { display: flex; flex-direction: column; gap: 10px; }
.evm-leg { padding: 10px; background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; }
.evm-leg-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.evm-leg-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(241,238,232,0.55); }
.evm-leg-remove { background: transparent; border: none; color: rgba(241,238,232,0.4); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; font-family: inherit; }
.evm-leg-remove:hover { color: #E0685B; }
.evm-leg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* Custom airport typeahead - replaces native <datalist> for reliable filter UX. */
.evm-airport-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; position: relative; }
.evm-airport-wrap > span { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--atlas-text-muted); }
.evm-airport-input { padding: 7px 10px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; color: #F1EEE8; font-size: 13px; font-family: inherit; }
.evm-airport-input:focus { outline: none; border-color: var(--atlas-blue-mid, #6c8cff); }
.evm-airport-dropdown { position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; max-height: 240px; overflow-y: auto; background: #1D2524; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; box-shadow: 0 6px 16px rgba(0,0,0,0.4); z-index: 20; }
.evm-airport-dropdown[hidden] { display: none; }
.evm-airport-option { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 8px; padding: 8px 12px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.04); }
.evm-airport-option:last-child { border-bottom: none; }
.evm-airport-option:hover { background: rgba(212,178,106,0.10); }
.evm-airport-city { font-size: 13px; color: #F1EEE8; }
.evm-airport-name { font-size: 11px; color: rgba(241,238,232,0.55); grid-column: 1; }
.evm-airport-iata { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; color: #D4B26A; grid-row: 1 / span 2; }
.evm-airport-empty { padding: 10px 12px; font-size: 12px; color: rgba(241,238,232,0.5); font-style: italic; }
/* Address typeahead - debounced /api/geocode lookup. 28 May 2026. */
.evm-address-wrap { display: flex; flex-direction: column; gap: 4px; position: relative; }
.evm-address-input { padding: 9px 11px; background: var(--atlas-bg-elev-1, rgba(0,0,0,0.25)); color: var(--atlas-text-body, #F1EEE8); border: 1px solid var(--atlas-border-strong); border-radius: 8px; font-family: inherit; font-size: 14px; }
.evm-address-input:focus { outline: none; border-color: var(--atlas-blue-mid, #6c8cff); }
.evm-address-dropdown { position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; max-height: 280px; overflow-y: auto; background: #1D2524; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; box-shadow: 0 6px 16px rgba(0,0,0,0.4); z-index: 20; }
.evm-address-dropdown[hidden] { display: none; }
.evm-address-option { padding: 9px 12px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.04); }
.evm-address-option:last-child { border-bottom: none; }
.evm-address-option:hover { background: rgba(212,178,106,0.10); }
.evm-address-short { font-size: 13px; color: #F1EEE8; }
.evm-address-full { font-size: 11px; color: rgba(241,238,232,0.5); margin-top: 2px; }
/* Itinerary summary rendered on the saved card. */
.evm-item-itinerary { margin-top: 8px; padding: 8px 10px; background: rgba(212,178,106,0.06); border-left: 2px solid rgba(212,178,106,0.4); border-radius: 4px; display: flex; flex-direction: column; gap: 8px; }
.evm-itinerary-dir { display: flex; flex-direction: column; gap: 4px; }
.evm-itinerary-dir-label { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(212,178,106,0.85); }
.evm-itinerary-leg { display: flex; gap: 10px; align-items: baseline; font-size: 12px; color: rgba(241,238,232,0.85); flex-wrap: wrap; }
.evm-itinerary-route { font-variant-numeric: tabular-nums; }
.evm-itinerary-arrow { color: rgba(241,238,232,0.4); margin: 0 2px; }
.evm-itinerary-times { color: rgba(241,238,232,0.6); font-size: 11px; font-variant-numeric: tabular-nums; }
.evm-itinerary-flight { font-size: 10px; padding: 1px 6px; background: rgba(255,255,255,0.06); border-radius: 8px; color: rgba(241,238,232,0.7); letter-spacing: 0.3px; }
@media (max-width: 600px) { .evm-leg-grid { grid-template-columns: 1fr; } }
/* Travel-context: accommodation + anchor-times blocks. Mirror the .evm-flights
   shell so the form reads as one continuous section. 28 May 2026. */
.evm-accommodation, .evm-anchors {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.evm-section-optional { font-size: 10px; font-weight: 500; color: rgba(241,238,232,0.45); letter-spacing: 0.4px; text-transform: none; margin-left: 4px; }
.evm-form-grid-nested { margin-top: 4px; }
.evm-amenity-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.evm-amenity-chip {
  background: rgba(0,0,0,0.25); color: rgba(241,238,232,0.7);
  border: 1px solid rgba(255,255,255,0.10);
  padding: 6px 11px; border-radius: 16px; font-size: 12px;
  font-family: inherit; cursor: pointer; letter-spacing: 0.2px;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.evm-amenity-chip:hover { border-color: rgba(212,178,106,0.4); color: #F1EEE8; }
.evm-amenity-chip.active {
  background: rgba(212,178,106,0.18);
  border-color: rgba(212,178,106,0.55);
  color: #D4B26A;
}
.evm-anchors-list { display: flex; flex-direction: column; gap: 12px; margin: 6px 0 10px; }
.evm-anchor-row { display: flex; flex-direction: column; gap: 8px; padding: 10px; background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; }
.evm-anchor-row-top { display: grid; grid-template-columns: 1.4fr 1fr 28px; gap: 8px; align-items: stretch; }
.evm-anchor-row-bot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.evm-anchor-recur-label { font-size: 11px; letter-spacing: 0.06em; color: rgba(241,238,232,0.55); text-transform: uppercase; }
.evm-anchor-label, .evm-anchor-time, .evm-anchor-until {
  padding: 8px 10px;
  background: var(--atlas-bg-elev-1, rgba(0,0,0,0.25));
  color: var(--atlas-text-body, #F1EEE8);
  border: 1px solid var(--atlas-border-strong);
  border-radius: 8px;
  font-family: inherit; font-size: 13px;
}
.evm-anchor-label:focus, .evm-anchor-time:focus, .evm-anchor-until:focus { outline: none; border-color: var(--atlas-blue-mid, #6c8cff); }
.evm-anchor-until[hidden] { display: none; }
.evm-anchor-days { display: flex; gap: 4px; flex-wrap: wrap; }
.evm-anchor-day {
  background: rgba(0,0,0,0.25); color: rgba(241,238,232,0.6);
  border: 1px solid rgba(255,255,255,0.10);
  padding: 5px 10px; border-radius: 16px; font-size: 11px;
  font-family: inherit; cursor: pointer; letter-spacing: 0.3px;
  min-width: 38px; text-align: center;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.evm-anchor-day:hover { border-color: rgba(212,178,106,0.4); color: #F1EEE8; }
.evm-anchor-day.active {
  background: rgba(212,178,106,0.18);
  border-color: rgba(212,178,106,0.55);
  color: #D4B26A;
}
.evm-anchor-remove {
  background: transparent; border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px; color: rgba(241,238,232,0.5);
  cursor: pointer; font-size: 16px; font-family: inherit;
}
.evm-anchor-remove:hover { color: #E0685B; border-color: rgba(224,104,91,0.4); }
.evm-anchor-add { background: transparent; border: 1px dashed rgba(212,178,106,0.5); color: #D4B26A; padding: 6px 12px; border-radius: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.3px; cursor: pointer; font-family: inherit; }
.evm-anchor-add:hover { background: rgba(212,178,106,0.12); border-style: solid; }
/* Card-side summaries for accommodation + anchors. */
.evm-item-accommodation { margin-top: 8px; font-size: 12px; color: rgba(241,238,232,0.8); }
.evm-item-accom-addr { color: rgba(241,238,232,0.5); }
.evm-item-amenities { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.evm-item-amenity-chip { font-size: 10px; padding: 2px 8px; background: rgba(212,178,106,0.10); border: 1px solid rgba(212,178,106,0.28); border-radius: 12px; color: rgba(212,178,106,0.85); letter-spacing: 0.2px; }
.evm-item-anchors { margin-top: 8px; font-size: 12px; color: rgba(241,238,232,0.8); display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.evm-item-anchor-chip { font-size: 11px; padding: 2px 9px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; color: rgba(241,238,232,0.85); letter-spacing: 0.2px; }
@media (max-width: 480px) {
  .evm-anchor-row { grid-template-columns: 1fr; }
}
.evm-form-actions { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.evm-status { font-size: 12px; font-weight: 600; }
.evm-status-ok { color: #6BE39A; }
.evm-status-err { color: #E88A8A; }
@media (max-width: 480px) {
  .evm-form-grid { grid-template-columns: 1fr; }
  .evm-item { grid-template-columns: 1fr; }
  .evm-item-actions { justify-content: flex-start; }
  /* 20 Jul 2026 (Harry) - native app overflow. The grid already collapsed to
     one column here, but the trip form still ran off-screen: iOS gives
     date / datetime-local / time inputs a LARGE intrinsic minimum width and
     will not shrink them below it, even at width:100%. One of those inside a
     grid/flex track drags the whole card wider than the viewport, which is
     why the right edge clipped and (with margin:0 auto) the left did too.
     Cap them, and make sure every track can actually shrink. */
  .evm-card, .evm-form, .evm-form-grid, .evm-field, .evm-leg-grid,
  .evm-anchor-row, .evm-anchor-row-top { min-width: 0; max-width: 100%; }
  .evm-field input, .evm-field select, .evm-field textarea { box-sizing: border-box; max-width: 100%; }
  .evm-field input[type="date"],
  .evm-field input[type="datetime-local"],
  .evm-field input[type="time"],
  .evm-anchor-row input[type="datetime-local"] {
    min-width: 0; max-width: 100%; box-sizing: border-box;
    -webkit-appearance: none; appearance: none;
  }
  /* Label + time + remove button stacks rather than fighting for 3 columns. */
  .evm-anchor-row-top { grid-template-columns: 1fr; }
  .evm-amenity-chips { max-width: 100%; }
}

/* ── Check-in additions - objective banner V2, Dynamic triggers, fixed Standing ── */

/* P1a 5-column objective banner. Uses .atlas-card base + blue-mid left accent. */
.checkin-objective-v2 {
  border-left: 3px solid var(--atlas-blue-mid) !important;
  margin-bottom: var(--atlas-space-4);
  display: flex; flex-direction: column; gap: var(--atlas-space-3);
}
.checkin-objective-v2-title {
  font-size: var(--atlas-font-label-size); font-weight: var(--atlas-font-label-weight);
  letter-spacing: var(--atlas-font-label-tracking); text-transform: uppercase;
  color: var(--atlas-text-muted);
}
.checkin-objective-v2-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: var(--atlas-space-4);
}
.checkin-obj-col {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.checkin-obj-header {
  font-size: 10px; font-weight: 700;
  letter-spacing: var(--atlas-font-label-tracking); text-transform: uppercase;
  color: var(--atlas-text-muted);
}
.checkin-obj-primary {
  font-size: calc(var(--atlas-font-body-size) * 1.2);
  font-weight: 700;
  color: var(--atlas-text-primary);
  font-variant-numeric: tabular-nums;
}
.checkin-obj-secondary {
  font-size: calc(var(--atlas-font-body-size) * 0.9);
  color: var(--atlas-text-muted);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 768px) {
  .checkin-objective-v2-grid { grid-template-columns: repeat(2, 1fr); gap: var(--atlas-space-3); }
}
@media (max-width: 480px) {
  .checkin-objective-v2-grid { grid-template-columns: 1fr; }
}

/* Inline objective prompt beneath each slider (when summary has data). */
.checkin-slider-col {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.checkin-slider-objective {
  font-size: var(--atlas-font-caption-size); line-height: 1.4;
  color: var(--atlas-text-muted);
  padding-left: calc(60px + var(--atlas-space-2)); /* align under dot row past left endpoint */
}
@media (max-width: 480px) {
  .checkin-slider-objective { padding-left: 0; }
}

.checkin-dynamic-section { background: var(--atlas-blue-tint); border-radius: 8px; padding: var(--atlas-space-3); border-top: none; }
.checkin-dynamic-block {
  display: flex; flex-direction: column; gap: var(--atlas-space-2);
  padding: var(--atlas-space-2) 0;
}
/* Bug B fix: [hidden] attribute must beat the class-level `display: flex`.
 * Tied specificity (0,1,0) falls through to source order - author CSS wins over
 * UA stylesheet, so we need explicit attribute-selector rules. */
.checkin-section[hidden],
.checkin-dynamic-section[hidden],
.checkin-dynamic-block[hidden] { display: none; }
.checkin-dynamic-block + .checkin-dynamic-block { border-top: 1px solid var(--atlas-divider); margin-top: var(--atlas-space-2); padding-top: var(--atlas-space-3); }
.checkin-dynamic-prefix {
  font-size: 11px; font-weight: 600;
  color: var(--atlas-blue-mid);
  letter-spacing: 0.3px;
}
.checkin-dynamic-q {
  display: flex; flex-direction: column; gap: 4px;
  font-size: var(--atlas-font-body-sm-size); color: var(--atlas-text-body);
}

/* 16 May 2026 - travel trip-form (renders inside a dynamic-block when the
 * Travel week friction flag is ticked). Structured per-trip card supporting
 * multiple trips via the + Add another trip button. */
.checkin-trip-intro { font-size: 12px; color: var(--atlas-text-muted); margin-bottom: 4px; }
.checkin-trip-list { display: flex; flex-direction: column; gap: var(--atlas-space-2); }
.checkin-trip-card {
  position: relative;
  background: var(--atlas-surface-nested);
  border: 1px solid var(--atlas-divider);
  border-radius: 8px;
  padding: var(--atlas-space-3);
  display: flex; flex-direction: column; gap: var(--atlas-space-2);
}
.checkin-trip-remove {
  position: absolute; top: 6px; right: 8px;
  background: transparent; border: none;
  color: rgba(241,238,232,0.4); font-size: 18px; line-height: 1;
  cursor: pointer; padding: 2px 8px; border-radius: 4px;
}
.checkin-trip-remove:hover { color: #E88A8A; background: rgba(239,83,80,0.08); }
.checkin-trip-row { display: flex; flex-direction: column; gap: 4px; }
.checkin-trip-row-2col { flex-direction: row; gap: var(--atlas-space-2); }
.checkin-trip-row-2col > .checkin-trip-label { flex: 1; }
.checkin-trip-label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(241,238,232,0.55);
}
.checkin-trip-input {
  background: rgba(10,14,14,0.5);
  border: 1px solid var(--atlas-divider);
  color: #F1EEE8; border-radius: 8px;
  padding: 8px 10px; font-size: 13px; font-family: inherit;
  text-transform: none; letter-spacing: 0;
}
.checkin-trip-input:focus { outline: none; border-color: rgba(212,178,106,0.5); background: rgba(10,14,14,0.7); }
.checkin-trip-textarea { resize: vertical; min-height: 56px; line-height: 1.45; }
.checkin-trip-flighttime[hidden] { display: none; }
.checkin-trip-add {
  align-self: flex-start;
  background: rgba(212,178,106,0.08);
  border: 1px dashed rgba(212,178,106,0.35);
  color: #D4B26A;
  padding: 8px 14px; border-radius: 8px;
  font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
  margin-top: var(--atlas-space-2);
}
.checkin-trip-add:hover { background: rgba(212,178,106,0.16); border-style: solid; }

.checkin-standing-q {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: var(--atlas-space-3);
}
.checkin-standing-q-lbl {
  font-size: var(--atlas-font-body-sm-size);
  color: var(--atlas-text-body);
  font-weight: 500;
}
.checkin-standing-q:last-of-type { margin-bottom: 0; }

/* ── Propose modal (shared Goals + Habits) ── */
.atlas-propose-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--atlas-space-4);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
@media (max-height: 700px) {
  .atlas-propose-overlay { align-items: flex-start; }
}
.atlas-propose-modal {
  position: relative;
  background: var(--atlas-bg-elev-2);
  border: 1px solid var(--atlas-border-strong);
  border-radius: 16px;
  width: 100%; max-width: 480px;
  /* 4 May 2026 - same scroll fix as .nutr-modal: dvh + safe-area-inset-bottom
     so Cancel/Propose buttons clear the iOS Safari toolbar + home indicator. */
  max-height: calc(100dvh - 40px - env(safe-area-inset-bottom, 0px));
  max-height: calc(100vh - 40px - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: var(--atlas-space-6) var(--atlas-space-6) calc(var(--atlas-space-6) + env(safe-area-inset-bottom, 0px));
}
.atlas-propose-close {
  position: absolute; top: 12px; right: 12px;
  width: 44px; height: 44px;
  background: transparent; border: none;
  color: var(--atlas-text-muted); font-size: 24px;
  cursor: pointer; font-family: inherit;
  border-radius: 8px;
}
.atlas-propose-close:hover { color: var(--atlas-text-body); background: var(--atlas-surface-hover); }
.atlas-propose-title {
  font-size: var(--atlas-font-display-md-size); line-height: var(--atlas-font-display-md-lh);
  font-weight: var(--atlas-font-display-md-weight); letter-spacing: var(--atlas-font-display-md-tracking);
  color: var(--atlas-text-primary); margin: 0 0 var(--atlas-space-2);
}
.atlas-propose-hint {
  font-size: var(--atlas-font-body-sm-size); color: var(--atlas-text-muted);
  margin: 0 0 var(--atlas-space-4);
}
.atlas-propose-label {
  display: block; margin-bottom: var(--atlas-space-3);
  font-size: var(--atlas-font-label-size); font-weight: var(--atlas-font-label-weight);
  letter-spacing: var(--atlas-font-label-tracking); text-transform: uppercase;
  color: var(--atlas-text-muted);
}
.atlas-propose-label input,
.atlas-propose-label select,
.atlas-propose-label textarea {
  display: block; width: 100%; margin-top: 6px;
  background: var(--atlas-bg-elev-1); color: var(--atlas-text-primary);
  border: 1px solid var(--atlas-border-strong); border-radius: 8px;
  padding: 10px 12px; min-height: 44px;
  font-family: inherit; font-size: var(--atlas-font-body-sm-size);
  text-transform: none; letter-spacing: 0;
}
.atlas-propose-label textarea { min-height: 68px; resize: vertical; }
.atlas-propose-label input:focus,
.atlas-propose-label select:focus,
.atlas-propose-label textarea:focus {
  outline: none; border-color: var(--atlas-blue-mid);
}
.atlas-propose-required { color: var(--atlas-concern); margin-left: 3px; }
.atlas-propose-error {
  color: var(--atlas-concern);
  font-size: var(--atlas-font-body-sm-size);
  margin: var(--atlas-space-2) 0;
  min-height: 18px;
}
.atlas-propose-actions {
  display: flex; justify-content: flex-end; gap: var(--atlas-space-2);
  margin-top: var(--atlas-space-4);
}

/* ── Mobile tweaks (§10) ── */
@media (max-width: 480px) {
  .atlas-section-header { flex-direction: column; align-items: flex-start; }
  .habit-row { flex-wrap: wrap; }
  .habit-body { flex-basis: calc(100% - 100px); }
  .habit-log-today-btn { margin-top: var(--atlas-space-2); }
  .goal-card-summary { flex-direction: column; }
  .goal-summary-aside { align-self: flex-start; }
  .habit-week-row { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * DS CONSISTENCY PASS - P0 (Brief 25 Apr 2026)
 * Last-wins cascade: every bespoke card class normalizes onto the canonical
 * .atlas-card spec (padding 20, radius 14, surface-card bg, border token).
 * Placed at end of file so it overrides per-class drift earlier in this file.
 * Per-class nested variants override via .atlas-card--nested or :where overrides.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* P0.1 + C1 - Card signature lock. .atlas-card itself stays unpadded since it
   relies on .atlas-card-header / .atlas-card-body inner padding; bespoke flat
   cards get the full 20px padding spec. backdrop-filter, hover, and surface
   tokens are unified so flicking between tabs reads pixel-equivalent. */
.atlas-card,
.journal-card,
.nutr-day-card,
.nutr-summary-card,
.supp-card,
.bio-tile,
.bio-group-header,
.bio-list-row,
.ex-card,
.ds-card,
.ds-hardsync-card,
.habit-card,
.goal-card,
.tl-session-card {
  border-radius: 16px;
  background: var(--atlas-surface-card);
  border: 1px solid var(--atlas-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 150ms cubic-bezier(0.22, 1, 0.36, 1),
              background-color 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.journal-card:hover,
.nutr-day-card:hover,
.nutr-summary-card:hover,
.supp-card:hover,
.bio-tile:hover,
.bio-group-header:hover,
.bio-list-row:hover,
.ds-card:hover,
.ds-hardsync-card:hover,
.habit-card:hover,
.goal-card:hover,
.tl-session-card:hover {
  border-color: var(--atlas-border-strong);
  background: var(--atlas-surface-card);
}
/* 31 May 2026 - ex-card removed from the generic hover-bg group above so
   the hover state can't strip the gold gradient off the currently-active
   exercise. The current-exercise gold treatment lives on
   .ex-card.ex-card-current (set by JS, persists across all hover/click). */
.ex-card:hover:not(.ex-card-current) {
  border-color: var(--atlas-border-strong);
}
.journal-card,
.nutr-day-card,
.nutr-summary-card,
.supp-card,
.bio-tile,
.bio-group-header,
.ex-card,
.ds-card,
.ds-hardsync-card,
.habit-card,
.goal-card,
.tl-session-card {
  padding: 20px;
}

/* C1 - Semantic card variants. Default cards have a clean uniform 4-sided
   border (no rail). Semantic cards opt-in to a 3px left rail in a token color
   that signals state. Pre-existing rails (.bio-attention-card, .supp-priority-*)
   are formalized below to use tokens; new uses should apply .is-attention /
   .is-warning / .is-pending alongside the base card class. */
.atlas-card.is-attention,
.bio-attention-card {
  border-left: 3px solid var(--atlas-concern);
  border-color: var(--atlas-concern-tint-strong, var(--atlas-concern-tint));
}
.atlas-card.is-warning {
  border-left: 3px solid var(--atlas-watch);
}
.atlas-card.is-pending {
  border-left: 3px solid var(--atlas-blue-mid);
}
.atlas-card.is-discontinued {
  border-left: 3px solid var(--atlas-stable);
  opacity: 0.7;
}
.supp-card.supp-priority-high   { border-left: 3px solid var(--atlas-up); }
.supp-card.supp-priority-medium { border-left: 3px solid var(--atlas-watch); }
/* Nested rows (rows-within-group, e.g. bio list rows under a group header)
   keep tighter spacing per DS §3. */
.bio-list-row,
.atlas-card.is-nested {
  padding: 14px 18px;
  border-radius: 12px;
}
/* Journal cards already use a left-strip via ::before on data-entry-type;
   keep their padding-left override (set in §9 P1c block) intact. */
.journal-card[data-entry-type] { padding-left: 18px; }
/* Check-in cards have padding 0 (head + body manage their own padding). */
.journal-card.journal-checkin-card { padding: 0; }

/* P0.3 - Status badge semantic classes. statusBadge() emits
   <span class="status-badge is-${status}"> instead of inline hex. */
.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.status-badge.is-active,
.status-badge.is-achieved,
.status-badge.is-completed,
.status-badge.is-responded,
.status-badge.is-high       { background: var(--atlas-up-tint); color: var(--atlas-up); }
.status-badge.is-trial      { background: var(--atlas-blue-tint); color: var(--atlas-blue-mid); }
.status-badge.is-paused,
.status-badge.is-pending,
.status-badge.is-modified,
.status-badge.is-medium     { background: var(--atlas-watch-tint); color: var(--atlas-watch); }
.status-badge.is-discontinued,
.status-badge.is-skipped,
.status-badge.is-low        { background: var(--atlas-concern-tint); color: var(--atlas-concern); }
.status-badge.is-planned,
.status-badge.is-reviewed   { background: var(--atlas-blue-tint); color: var(--atlas-blue-mid); }
.status-badge.is-abandoned  { background: var(--atlas-stable-tint); color: var(--atlas-stable); }

/* ═══════════════════════════════════════════════════════════════════════════
 * C6 (25 Apr 2026) - Today tab restructure.
 * Single-column stacked layout: AI summary (hero) → Recovery+Sleep merged
 * card with two nested sub-cards → Strain card. Compliance % rings killed.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Hero treatment for the AI summary at top of Today. Slight emphasis via
 * stronger border + subtle blue tint, no glassy overdo. */
.ai-unified-panel--hero {
  border: 1px solid var(--atlas-blue-mid);
  background: var(--atlas-blue-tint);
  margin-bottom: var(--atlas-space-5);
}

/* C7-LOCK (25 Apr) - hard-locked structural width parity for Today.
 *
 * Padding chain (single tier - by invariant):
 *   #content: 16/20/32 responsive horizontal gutter
 *   .atlas-card.today-card: padding 20px (THE ONLY padding tier)
 *   .ucard-headline / .ucard-chart / .metric-row / .metric-row-body / .chart-wrap:
 *     ZERO horizontal padding/border/background
 *   → every chart-svg fills card_width − 40px
 *
 * Five things that broke width parity in earlier rounds, all locked here:
 *  1. `.chart-wrap` was getting padding 16 + border 1 from the canonical-card
 *     rule at css line 4395 + line 4865. Stripped below - chart-wrap is now
 *     a transparent layout div, no styling.
 *  2. `.atlas-card` was getting padding 16 from the same canonical-card rule.
 *     Overridden to 20 here for .today-card so it's the SINGLE padding tier.
 *  3. `.metric-row-body` historically had padding 12 + border + background.
 *     Already neutralized in the .metric-row-body rule earlier; the structural
 *     guarantee depends on it staying that way.
 *  4. `.ucard-detail` wrapper added a SECOND padding tier (20 inside 16).
 *     Removed from Today's markup - content sits directly inside .today-card.
 *  5. `.atlas-card.is-nested` nested-card pattern caused width drift. Today
 *     uses no nested cards; flat siblings only.
 *
 * If any of (1)-(5) re-emerges, the 33px / 24px / 17px width deltas come back. */
.atlas-card.today-card {
  padding: var(--atlas-space-5);
  margin-bottom: var(--atlas-space-4);
}
.atlas-card.today-card .section-div {
  display: none;
}
/* metric-row-body visible by default per the C7-LOCK directive - no More
 * Metrics dropdown, charts always rendered (so chartdebug width audit can
 * read non-zero widths without manual expansion). Click toggle still works
 * via per-row JS handler (see app.js). */
.atlas-card.today-card .metric-row-body {
  display: block;
}
/* `.chart-wrap` neutralizer - strips the padding-16 + border-1 + bg + radius
 * the canonical-card rule was applying, plus the hover border-color shift.
 * `.chart-wrap` is now a layout-only div: zero contribution to width math. */
.chart-wrap {
  background: transparent !important;
  border: none !important;
  border-radius: 0!important;
  padding: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.chart-wrap:hover {
  border-color: transparent !important;
}

/* .perf-grid override left in place from C6 in case any cached HTML still
 * references it; safe to remove later. */
.perf-grid { display: flex; flex-direction: column; gap: var(--atlas-space-4); }

/* ═══════════════════════════════════════════════════════════════════════════
 * C7-WHOOP (26 Apr 2026) - Today as gauges + sectioned metric rows.
 * Whoop home pattern: three top gauges, sectioned tight rows below, click any
 * row to expand its trend view inline. Charts only render in the drill-down.
 *
 * INVARIANT: metric-row is a tight list-item, NOT a card. No background/
 * border-radius. Single border-bottom for separation.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Home readiness trio (24 May 2026) ─────────────────────────────────────
 * WHOOP-Age-style banded radial gauges. Atlas Score is the hero (centre, larger
 * ring + delta line); Recovery + Sleep flank it as satellites. The grid uses a
 * wider centre column so the hero reads as primary. Each gauge is a button that
 * opens the Data pill. Below 479px the trio stacks (hero first). */
.home-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;            /* all three cards equal height */
  gap: var(--atlas-space-3);
  margin-bottom: var(--atlas-space-5);
}
.home-trio-sat,
.home-trio-hero {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;         /* centre content within the equal-height card */
  gap: var(--atlas-space-2);
  padding: var(--atlas-space-4) var(--atlas-space-3);
  background: var(--atlas-surface-card);
  border: 1px solid var(--atlas-border);
  border-radius: 16px;
  transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
/* Atlas card keeps the same SIZE as the satellites, but a slightly brighter
 * border + a caret signal it's the primary, tap-to-expand card (breakdown). */
.home-trio-hero { border-color: var(--atlas-border-strong, rgba(255, 255, 255, 0.18)); }
.hg-caret { color: var(--atlas-text-muted); margin-top: 2px; line-height: 0; transition: transform 0.2s ease; }
.home-trio-hero.open .hg-caret { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .hg-caret { transition: none; } }
.home-trio-sat:hover,
.home-trio-hero:hover {
  border-color: var(--atlas-border-strong, rgba(255,255,255,0.18));
  transform: translateY(-1px);
}
.home-trio-sat:focus-visible,
.home-trio-hero:focus-visible {
  outline: 2px solid var(--atlas-accent, #5b9bb5);
  outline-offset: 2px;
}

/* Gauge ring wrapper - value number is centred over the SVG. */
.hg-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hg-sm { width: 104px; height: 104px; }
.hg-lg { width: 104px; height: 104px; }   /* equalised - trio cards are uniform now */
.hg-svg { width: 100%; height: 100%; display: block; }
.hg-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 700;
  color: var(--atlas-text-primary);
  letter-spacing: -0.02em;
  /* nudge up slightly - the 270° gap is at the bottom */
  transform: translateY(-3px);
}
.hg-num-lg { font-size: 34px; }
.hg-label {
  font-size: var(--atlas-font-label-size);
  font-weight: var(--atlas-font-label-weight);
  letter-spacing: var(--atlas-font-label-tracking);
  text-transform: uppercase;
  color: var(--atlas-text-muted);
}
.hg-label-lg { color: var(--atlas-text-secondary, var(--atlas-text-muted)); }
.hg-delta {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--atlas-text-muted);
}
.hg-delta.up   { color: #6CD693; }
.hg-delta.down { color: #c4534a; }
.hg-delta.flat { color: var(--atlas-text-muted); }
.hg-partial {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--atlas-text-muted);
  border: 1px solid var(--atlas-border);
  border-radius: 8px;
  padding: 1px 7px;
}

/* ── Atlas Score breakdown (tap the hero) ─────────────────────────────────── */
.atlas-breakdown {
  margin: calc(-1 * var(--atlas-space-2)) 0 var(--atlas-space-5);
  padding: var(--atlas-space-4) var(--atlas-space-5);
  background: var(--atlas-surface-card);
  border: 1px solid var(--atlas-border);
  border-radius: 16px;
}
.atlas-bd-head { margin-bottom: var(--atlas-space-3); }
/* Plain-English takeaway - the one line that tells a client where to look. */
.atlas-bd-insight {
  margin: 0 0 var(--atlas-space-4);
  font-size: 14px;
  line-height: 1.5;
  color: var(--atlas-text-secondary, rgba(255, 255, 255, 0.82));
}
.atlas-bd-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--atlas-text-secondary, var(--atlas-text-primary));
}
/* Weekly Atlas Score trend (progress view) - neutral line, full-width. */
.atlas-trend { margin-bottom: var(--atlas-space-4); }
.atlas-trend-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.atlas-trend-title { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--atlas-text-muted); }
.atlas-trend-now { font-size: 16px; font-weight: 700; color: var(--atlas-text-primary); font-variant-numeric: tabular-nums; }
.atlas-trend-chart { display: flex; gap: 8px; align-items: stretch; }
.atlas-trend-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 64px;
  padding: 1px 0;
  font-size: 9px;
  font-weight: 600;
  color: var(--atlas-text-muted);
  font-variant-numeric: tabular-nums;
}
.atlas-trend-svg { flex: 1; height: 64px; display: block; }

.atlas-bd-rows { display: flex; flex-direction: column; gap: 10px; }
.atlas-bd-row {
  display: grid;
  grid-template-columns: 140px 1fr 44px;
  align-items: center;
  gap: 12px;
}
.atlas-bd-name {
  font-size: 13px;
  color: var(--atlas-text-primary);
}
.atlas-bd-name small {
  display: block;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* Brighter than --atlas-text-muted so the weight labels clear 4.5:1 on the card. */
  color: var(--atlas-text-secondary, rgba(255, 255, 255, 0.62));
  margin-top: 1px;
}
.atlas-bd-track {
  height: 9px;
  border-radius: 8px;
  /* Visible empty-track so the bar reads on the dark panel. */
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
/* Neutral, high-contrast fill - colour stays on the value number, not the bar. */
.atlas-bd-bar { display: block; height: 100%; border-radius: 8px; background: rgba(255, 255, 255, 0.82); }
.atlas-bd-val {
  text-align: right;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--atlas-text-primary);
}
.atlas-bd-row.absent .atlas-bd-val {
  font-size: 11px;
  font-weight: 600;
  color: var(--atlas-text-muted);
}
.atlas-bd-empty {
  font-size: 13px;
  color: var(--atlas-text-muted);
  margin: 0;
}
.atlas-bd-data-link {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  margin-top: var(--atlas-space-2);
  /* ≥44px tap target (Accessibility / touch-target-size). */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--atlas-accent, #5b9bb5);
}
.atlas-bd-data-link:hover { text-decoration: underline; }
@media (max-width: 479px) {
  .atlas-bd-row { grid-template-columns: 104px 1fr 40px; gap: 8px; }
}

/* Animated fill - walk stroke-dashoffset from the full arc length down to the
 * computed fill offset. Both values are passed inline as --hg-arc / --hg-off. */
.hg-fill {
  stroke-dashoffset: var(--hg-arc);
  animation: hgFill 1.05s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
@keyframes hgFill { to { stroke-dashoffset: var(--hg-off); } }
@media (prefers-reduced-motion: reduce) {
  .hg-fill { animation: none; stroke-dashoffset: var(--hg-off); }
}

@media (max-width: 479px) {
  /* Three uniform cards, tighter gauges so they fit a phone row. */
  .home-trio { gap: var(--atlas-space-2); }
  .home-trio-sat, .home-trio-hero { padding: var(--atlas-space-3) var(--atlas-space-2); }
  .hg-sm, .hg-lg { width: 72px; height: 72px; }
  .hg-num { font-size: 22px; }
  .hg-num-lg { font-size: 24px; }
}

/* ── Home Data pill (24 May 2026) ──────────────────────────────────────────
 * All metric cards + sparklines + range controls live behind this collapsed
 * pill. Tap (or any trio gauge) opens it. Sparklines are never deleted - only
 * tucked away here. */
.today-data {
  margin-bottom: var(--atlas-space-6);
}
.today-data-toggle {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--atlas-space-3);
  padding: var(--atlas-space-4);
  background: var(--atlas-surface-card);
  border: 1px solid var(--atlas-border);
  border-radius: 16px;
  color: var(--atlas-text-primary);
  text-align: left;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.today-data-toggle:hover {
  border-color: var(--atlas-border-strong, rgba(255,255,255,0.18));
}
.today-data-toggle:focus-visible {
  outline: 2px solid var(--atlas-accent, #5b9bb5);
  outline-offset: 2px;
}
.today-data-toggle-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.today-data-toggle-label {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.today-data-toggle-sub {
  font-size: 12px;
  color: var(--atlas-text-muted);
}
.today-data-chevron {
  color: var(--atlas-text-muted);
  flex: none;
  transition: transform 0.2s ease;
}
.today-data.open .today-data-chevron { transform: rotate(180deg); }
.today-data-body { margin-top: var(--atlas-space-4); }
@media (prefers-reduced-motion: reduce) {
  .today-data-chevron { transition: none; }
}

/* Section wrapping under gauges - uses canonical .atlas-section-header from
 * Goals/Habits/Journal so density and typography read identical cross-tab. */
.today-section {
  margin-bottom: var(--atlas-space-6);
}
.today-section .atlas-section-header {
  margin-bottom: var(--atlas-space-3);
}
.today-section .atlas-section-title {
  /* Use label-style (not display-md) so section headers read as
     "RECOVERY / SLEEP / ACTIVITY" caps small, matching Whoop. */
  font-size: var(--atlas-font-label-size);
  font-weight: var(--atlas-font-label-weight);
  letter-spacing: var(--atlas-font-label-tracking);
  text-transform: uppercase;
  color: var(--atlas-text-muted);
}

/* ── Today metric card grid (4 May 2026 redesign) ─────────────────────
   Replaces the .metric-rows expandable stack. 3-across desktop grid,
   1-col mobile. Cards mirror the Nutrition card visual: label top-left,
   current value top-right (swaps to hovered day's value via JS),
   sparkline body, 30D avg bottom-left. Lonely cards left-align - they
   don't stretch to fill the row (Harry's spec). Grid uses
   grid-auto-rows:1fr so all cards in a row share the tallest height,
   eliminating the alignment failure mode from the prior attempt.        */
.today-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 12px;
}
@media (max-width: 768px) {
  .today-metric-grid {
    grid-template-columns: 1fr;
  }
}
.today-metric-card {
  display: flex;
  flex-direction: column;
  padding: 16px 18px;
  background: var(--atlas-surface-card);
  border: 1px solid var(--atlas-border);
  border-radius: 16px;
  min-width: 0;
  transition: border-color 150ms cubic-bezier(0.22, 1, 0.36, 1),
              background-color 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.today-metric-card:hover {
  border-color: var(--atlas-border-strong);
}
.today-metric-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
}
.today-metric-card-label {
  font-size: 11px;
  font-weight: 600;
  color: #8F9A98;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.today-metric-card-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--atlas-text-primary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: color 80ms ease-out;
  /* Defensive right-alignment (7 May 2026): even with the flex
     space-between on .today-metric-card-head, the Body Composition rows
     (Weight / Lean Mass formats including the unit suffix) were rendering
     visually left-of-flush. margin-left:auto + text-align:right
     guarantees the value sits flush right regardless of label width
     differences across sections. Harmless on cards already right-aligned
     via flex. */
  margin-left: auto;
  text-align: right;
}
.today-metric-card-chart {
  flex: 1;
  min-height: 60px;
  margin: 4px 0;
}
.today-metric-card-chart .trend-mini-wrap {
  height: 60px;
  margin-top: 0;
}
.today-metric-card-foot {
  font-size: 10px;
  color: #8F9A98;
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.today-metric-card-avg,
.today-metric-card-date {
  letter-spacing: 0.3px;
}
.today-metric-card-date {
  color: #8F9A98;
  font-variant-numeric: tabular-nums;
  min-height: 1em; /* reserve space so revealing the date doesn't shift the row */
}
/* Thin the sparkline stroke + shrink the dots when rendered inside a today
   metric card. Defaults (1.5px stroke, 6px dot, 8px on hover) are tuned for
   the 120px-tall expanded chart; at 60px card height a lighter weight reads
   cleaner and stops the dots from dominating the line. */
.today-metric-card .trend-mini-wrap path[stroke="#F1EEE8"] {
  stroke-width: 1;
}
.today-metric-card .trend-mini-overlay .cd-dot {
  width: 4px;
  height: 4px;
}
.today-metric-card .trend-mini-overlay .cd-html:hover .cd-dot,
.today-metric-card .trend-mini-overlay .cd-html.is-active .cd-dot {
  width: 6px;
  height: 6px;
}
/* Crosshair line - bumped from 0.18 opacity / 0.75 stroke (set via setAttribute
   in showLineByDate) to a more visible 0.42 / 1px. Only applies inside the
   today-metric-card grid; other chart surfaces keep the original muted stroke. */
.today-metric-card .trend-mini-svg line.cd-crosshair {
  stroke: rgba(255, 255, 255, 0.42);
  stroke-width: 1;
}

/* Metric rows - legacy (pre-4 May 2026 expandable list). Kept in case
   any non-Today surface still uses .metric-row markup. */
.metric-rows {
  display: flex;
  flex-direction: column;
  background: var(--atlas-surface-card);
  border: 1px solid var(--atlas-border);
  border-radius: 16px;
  overflow: hidden;
}
.metric-row {
  display: flex;
  align-items: center;
  gap: var(--atlas-space-3);
  width: 100%;
  padding: var(--atlas-space-3) var(--atlas-space-4);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--atlas-divider, var(--atlas-border));
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-height: 64px;
  transition: background-color 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.metric-row:last-of-type {
  border-bottom: 0;
}
.metric-row:hover {
  background: var(--atlas-surface-nested);
}
.metric-row.is-expanded {
  background: var(--atlas-surface-nested);
}
.metric-row-icon {
  flex-shrink: 0;
  width: 24px;
  font-size: 16px;
  color: var(--atlas-text-faint);
  text-align: center;
}
.metric-row-label {
  flex: 1;
  font-size: var(--atlas-font-body-sm-size);
  font-weight: 500;
  color: var(--atlas-text-primary);
  letter-spacing: -0.01em;
}
.metric-row-values {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
  text-align: right;
  min-width: 96px;
}
/* C7-WHOOP-POLISH item 1 (26 Apr) - value text scaled DOWN. Was 17/700,
 * label is 13/500 (body-sm). Now 14/600 - slightly larger than label for
 * hierarchy, NOT 2x bigger. Row reads as a tight horizontal list-item. */
.metric-row-current {
  font-size: 14px;
  font-weight: 600;
  color: var(--atlas-text-primary);
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  line-height: 1;
}
.metric-row-prev {
  font-size: 11px;
  font-weight: 500;
  color: var(--atlas-text-faint);
  line-height: 1;
}
.metric-row-arrow {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.metric-row-arrow.up { color: var(--atlas-up); }
.metric-row-arrow.down { color: var(--atlas-concern); }
.metric-row-arrow.flat { color: var(--atlas-text-faint); }
.metric-row-chevron {
  flex-shrink: 0;
  width: 16px;
  font-size: 18px;
  color: var(--atlas-text-faint);
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.metric-row.is-expanded .metric-row-chevron {
  transform: rotate(90deg);
}

/* Inline trend view - opens directly under the row when clicked.
 * C7-WHOOP-POLISH item 5 (26 Apr): no background, no inset card. Chart blends
 * into the row stack. Visual continuity with surrounding rows. */
.metric-row-trend {
  background: transparent;
  border-bottom: 1px solid var(--atlas-divider, var(--atlas-border));
}
/* C7-WHOOP-POLISH-4 (26 Apr 2026) - Nutrition macro-card pattern for the
 * trend-view drill-down on Today. C7-WHOOP-POLISH-5 (26 Apr 2026) - flush
 * corners (border-radius 0, no border) so the card sits flush below the
 * metric row above. The .metric-row-trend's border-bottom + the metric-row
 * stack's borders carry the visual separation; the card itself is a clean
 * inset block. */
.trend-view-card {
  min-width: 0;
  padding: 16px 20px;
  background: var(--atlas-surface-nested);
  border: 0;
  border-radius: 0;
}
.trend-view-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.trend-view-card-label {
  font-size: 11px;
  font-weight: 600;
  color: #8F9A98;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.trend-view-card-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--atlas-text-primary);
}
.trend-view-card-foot {
  font-size: 10px;
  color: #8F9A98;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
/* C7-WHOOP-POLISH-6 (26 Apr) - color key for the stacked-bar chart. Lives
 * inline with the period-avg footer; muted text + 8px swatches. */
.trend-view-card-keys {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.trend-key {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: #8F9A98;
}
.trend-key-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #5a6577;
}
.trend-key-dot--deep  { background: #2E6B8A; }
.trend-key-dot--rem   { background: #5B9BB5; }
.trend-key-dot--light { background: #8EC4D4; }
/* C7-WHOOP-POLISH-8 (26 Apr) - signed value colour helpers used by
 * sleep-debt formatHtml. Up = surplus (green), concern = debt (red),
 * muted = zero/no-data. Applied via inline class so prev value picks
 * the same colour. */
.val-up      { color: var(--atlas-up); }
.val-concern { color: var(--atlas-concern); }
.val-muted   { color: var(--atlas-text-faint); }
/* C7-WHOOP-POLISH-5 (26 Apr) - chart wrap is now a relative-positioned
 * container holding the SVG (line / bands) + an HTML overlay layer for dots.
 * HTML dots stay round under any SVG horizontal stretch (preserveAspectRatio
 * "none" was warping SVG circles into ellipses at row width). Hard-pin
 * height to 120px so no Chrome quirk re-inflates it. */
.trend-mini-wrap {
  position: relative;
  width: 100%;
  height: 120px;
  margin-top: 4px;
}
.trend-mini-wrap .trend-mini-svg {
  display: block;
  width: 100%;
  height: 100%;
}
.trend-mini-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Each .cd-html is a column-shaped hit zone (left + width set inline as
 * percentages); the .cd-dot child is the visible round element positioned
 * vertically by inline top: Y%. */
.trend-mini-overlay .cd-html {
  position: absolute;
  top: 0;
  height: 100%;
  pointer-events: auto;
  cursor: pointer;
}
.trend-mini-overlay .cd-dot {
  position: absolute;
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #F1EEE8;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.6;
  transition: opacity 120ms ease-out, width 120ms ease-out, height 120ms ease-out;
}
.trend-mini-overlay .cd-html:hover .cd-dot,
.trend-mini-overlay .cd-html.is-active .cd-dot {
  opacity: 1;
  width: 8px;
  height: 8px;
}
/* Nutrition history sparklines reuse .trend-mini-wrap markup for
 * crosshair sync but keep the original visual format (line only, no
 * visible dots). Hide .cd-dot inside the macro grid; the .cd hit zone
 * still catches mouseenter, the crosshair line + tooltip provide all
 * hover feedback. Per Harry: format is perfect, nothing else changes. */
.nutr-macro-minigrid .trend-mini-overlay .cd-dot {
  display: none;
}
/* metric-row-note styles the empty-state subtitle in the prev slot
 * (e.g. "Available on Whoop only" for Sleep Needed on Oura-source days,
 * or "as of <date>" when the headline value is the most recent measured
 * reading rather than today's). Same size as prev (11/500) but with the
 * faint-text token so it reads as metadata, not a comparison value. */
.metric-row-note {
  color: var(--atlas-text-faint);
  font-style: italic;
}
/* Stacked-bar (sleep stages) - bars stretching slightly under SVG horizontal
 * scale is fine; just brighten the active bar group on hover/sync. */
.trend-mini-svg .cd:hover rect:not(.cd-hit),
.trend-mini-svg .cd.is-active rect:not(.cd-hit) {
  filter: brightness(1.18);
}

/* AI panel sits at top above gauges, compact. .ai-unified-panel--hero already
 * styled in C6 - slim down padding for the new layout. */
.today-gauges + .today-section,
.ai-unified-panel--hero ~ .today-gauges {
  /* No-op anchor; reserved for visual rhythm tweaks if needed. */
}

/* ── Bug capture (soft launch May 1 → end of June) ─────────────────────── */
/* .bug-fab removed Brief 26 iter 2 (30 Apr 2026) - floating FAB got covered
   by the sidebar overlay. Trigger now docks as a sidebar nav item
   (#sidebar-bug-report in .sidebar-bottom). Modal markup + .bug-overlay
   styling below is reused; bugOpen() in atlas-sections.js opens it. */

.bug-overlay {
  /* z-index 10002 keeps the modal above the FAB (10001) and the sidebar (10000)
     so the open dialog covers everything. Brief 26 (30 Apr 2026). */
  display: none; position: fixed; inset: 0; z-index: 10002;
  background: rgba(0,0,0,0.7); align-items: center; justify-content: center;
  padding: 20px; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
@media (max-height: 700px) {
  .bug-overlay { align-items: flex-start; }
}
.bug-overlay.open { display: flex; }
.bug-dialog {
  background: #1D2524; border: 1px solid rgba(10,14,14,0.8); border-radius: 16px;
  max-width: 520px; width: 100%; color: #F1EEE8;
  /* 4 May 2026 - same scroll fix as .nutr-modal: dvh + safe-area-inset-bottom
     so Send button on bug report clears iOS Safari toolbar. */
  max-height: calc(100dvh - 40px - env(safe-area-inset-bottom, 0px));
  max-height: calc(100vh - 40px - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 22px 24px calc(22px + env(safe-area-inset-bottom, 0px));
}
.bug-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.bug-title { font-size: 18px; font-weight: 700; color: #F1EEE8; margin: 0; }
.bug-close { background: transparent; border: none; color: rgba(255,255,255,0.5); font-size: 24px; cursor: pointer; padding: 0 4px; line-height: 1; }
.bug-close:hover { color: #F1EEE8; }
.bug-hint { font-size: 12px; color: rgba(255,255,255,0.55); margin: 0 0 14px; line-height: 1.5; }
.bug-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin: 12px 0 4px; }
.bug-label:first-of-type { margin-top: 0; }
.bug-req { color: #E88A8A; font-weight: 700; }
.bug-input,
.bug-textarea {
  width: 100%; padding: 10px 12px; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.1);
  color: #F1EEE8; border-radius: 8px; font-size: 13px; font-family: inherit; outline: none; box-sizing: border-box;
}
.bug-textarea { resize: vertical; min-height: 70px; }
.bug-input:focus,
.bug-textarea:focus { border-color: rgba(212,178,106,0.5); }
.bug-error { font-size: 12px; color: #E88A8A; margin-top: 8px; }
.bug-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.06); }
.bug-btn {
  padding: 9px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: inherit; border: 1px solid transparent;
}
.bug-btn.ghost { background: transparent; border-color: rgba(255,255,255,0.16); color: rgba(255,255,255,0.7); }
.bug-btn.ghost:hover { color: #F1EEE8; border-color: rgba(255,255,255,0.3); }
.bug-btn.primary { background: #D4B26A; color: #1D2524; }
.bug-btn.primary:hover { background: #e0c182; }
.bug-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.bug-thanks { padding: 28px 8px; text-align: center; }
.bug-thanks-tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(105,240,174,0.14); color: #69f0ae;
  font-size: 30px; font-weight: 700; margin-bottom: 14px;
}
.bug-thanks-title { font-size: 16px; font-weight: 700; color: #F1EEE8; margin-bottom: 6px; }
.bug-thanks-sub { font-size: 12px; color: rgba(255,255,255,0.5); line-height: 1.5; }

/* ── Atlas Performance Analysis - narrative-led rebuild (30 Apr 2026) ──
   Five sections rendered by renderAtlasAnalysis: story hero, what's working,
   what to watch, this week's move (coach-prescribed), show the data expander.
   Visual language inherits from existing .ai-* tokens above. */
.ai-pa-section { margin-bottom: 22px; }
.ai-pa-section:last-child { margin-bottom: 0; }
.ai-pa-section-label {
  /* 25 May 2026 - unified eyebrow scale: all PA labels (this, period, data
     toggle) sit at 11px so the three small-caps headers read as one tier. */
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--atlas-text-faint, #8F9A98);
  margin-bottom: 10px;
}

/* Section 1 - THIS WEEK'S STORY (hero) */
.ai-pa-story {
  padding: 18px 20px; border-radius: 12px;
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(255,255,255,0.06);
}
.ai-pa-period {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--atlas-text-faint, #8F9A98);
  margin-bottom: 10px;
}
.ai-pa-story-body { display: flex; flex-direction: column; gap: 8px; }
.ai-pa-story-para {
  font-size: 16px; color: #EEF3F1; line-height: 1.6;
  margin: 0;
}
.ai-pa-story-para.ai-pa-empty { color: #8F9A98; font-style: italic; font-size: 14px; }

/* Section 2 - WHAT'S WORKING / Section 3 - WHAT TO WATCH */
.ai-pa-bullets { padding-left: 12px; border-left: 2px solid rgba(255,255,255,0.08); }
/* Uniform semantics - green = good/working, amber = watch. Explicit classes
   (set in app.js bulletGroup) instead of :nth-of-type, which counted sibling
   sections and inverted the colours. Matches the Improving/Watch block. */
.ai-pa-working { border-left-color: rgba(74,157,107,0.55); }
.ai-pa-watch   { border-left-color: rgba(212,169,78,0.55); }
.ai-pa-working .ai-pa-section-label { color: rgba(74,157,107,0.9); }
.ai-pa-watch   .ai-pa-section-label { color: rgba(212,169,78,0.9); }
.ai-pa-bullet-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ai-pa-bullet-list li { font-size: 14px; line-height: 1.6; color: #c0c8d4; }
.ai-pa-bullet-label { font-weight: 700; color: #EEF3F1; }
.ai-pa-bullet-label::after { content: " - "; color: var(--atlas-text-faint, #8F9A98); font-weight: 500; }
/* 25 May 2026 - detail text shares the body colour (#c0c8d4); hierarchy comes
   from the bold label, not a dim wash. Old #8F9A98 read as a lighter font and
   dipped below comfortable contrast. */
.ai-pa-bullet-detail { color: #c0c8d4; }

/* Section 4 - SHOW THE DATA expander */
.ai-pa-data {
  padding-top: 16px; margin-top: 4px;
  border-top: 1px dashed rgba(255,255,255,0.08);
}
.ai-pa-data-toggle {
  display: flex; align-items: center; gap: 8px;
  background: transparent; border: none;
  color: var(--atlas-text-faint, #8F9A98);
  font-family: inherit; font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer; padding: 0;
}
.ai-pa-data-toggle:hover { color: #c0c8d4; }
.ai-pa-data-chev { transition: transform 0.15s; font-size: 13px; }
.ai-pa-data-body { margin-top: 14px; }

/* ═══════════════════════════════════════════════════
   Today - next-day symptom follow-up card
   ═══════════════════════════════════════════════════ */
.today-symptom { margin: 0 0 var(--atlas-space-4); }
.today-symptom-card {
  padding: 16px 18px;
  background: rgba(212,178,106,0.05);
  border: 1px solid rgba(212,178,106,0.28);
  border-radius: 16px;
  animation: todaySymptomIn 220ms ease-out;
}
@keyframes todaySymptomIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Sent confirmation - brief state between answering a card and the next
 * pending one sliding in, so each answer visibly registers. */
.today-symptom-card--sent {
  display: flex; align-items: center; justify-content: center;
  min-height: 88px;
}
.today-symptom-sent {
  display: flex; align-items: center; gap: 9px;
  animation: todaySymptomIn 200ms ease-out;
}
.today-symptom-sent-check {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: #D4B26A; color: #15110a; font-size: 13px; font-weight: 700;
}
.today-symptom-sent-text {
  font-size: 13px; font-weight: 600; color: #F1EEE8;
}
@media (prefers-reduced-motion: reduce) {
  .today-symptom-card, .today-symptom-sent { animation: none; }
}
.today-symptom-eyebrow {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: rgba(212,178,106,0.9); margin-bottom: 6px;
}
.today-symptom-q {
  font-size: 16px; font-weight: 700; color: #F1EEE8; letter-spacing: -0.2px;
}
.today-symptom-sub {
  font-size: 12px; color: rgba(255,255,255,0.5); margin: 4px 0 14px; line-height: 1.4;
}
.today-symptom-status {
  display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px;
}
.today-symptom-opt {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.78); padding: 8px 13px; border-radius: 16px;
  font-size: 12px; font-family: inherit; cursor: pointer; transition: all 0.12s;
}
.today-symptom-opt:hover { border-color: rgba(212,178,106,0.5); color: #D4B26A; }
.today-symptom-opt.active { background: #D4B26A; border-color: #D4B26A; color: #15110a; font-weight: 700; }
.today-symptom-opt--bad.active { background: #E0685B; border-color: #E0685B; color: #1a1010; }
.today-symptom-scale-wrap { margin-bottom: 14px; }
.today-symptom-scale-label {
  font-size: 11px; color: rgba(255,255,255,0.55); margin-bottom: 7px;
}
.today-symptom-scale-label span { color: rgba(255,255,255,0.35); }
.today-symptom-scale { display: flex; gap: 5px; }
.today-symptom-scale-dot {
  flex: 1; aspect-ratio: 1; min-width: 0; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.5);
  border-radius: 8px; font-size: 11px; font-family: inherit; cursor: pointer;
  transition: all 0.1s;
}
.today-symptom-scale-dot:hover { border-color: rgba(212,178,106,0.5); }
.today-symptom-scale-dot.active {
  background: rgba(212,178,106,0.85); border-color: #D4B26A; color: #15110a; font-weight: 700;
}
.today-symptom-submit {
  width: 100%; background: #D4B26A; border: none; color: #15110a; font-weight: 700;
  font-size: 13px; padding: 11px; border-radius: 11px; cursor: pointer; font-family: inherit;
  transition: opacity 0.12s;
}
.today-symptom-submit:hover { opacity: 0.92; }
.today-symptom-submit:disabled { opacity: 0.4; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════
   Today - Recovery Engine diagnosis + prescription card
   ═══════════════════════════════════════════════════ */
.today-recovery { margin: 0 0 var(--atlas-space-4); }
.today-rec-card {
  padding: 18px 20px;
  background: rgba(212,178,106,0.05);
  border: 1px solid rgba(212,178,106,0.28);
  border-radius: 16px;
}
.today-rec-eyebrow {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: rgba(212,178,106,0.9); margin-bottom: 6px;
}
.today-rec-cause {
  font-size: 17px; font-weight: 700; color: #F1EEE8; letter-spacing: -0.2px;
}
.today-rec-trigger {
  font-size: 13px; color: #F1EEE8; margin-top: 6px; line-height: 1.5;
  background: var(--atlas-surface-card); border-radius: 8px; padding: 8px 11px;
}
.today-rec-reasoning {
  font-size: 13px; color: rgba(255,255,255,0.62); line-height: 1.55; margin-top: 8px;
}
/* Client-voice summary - the second-person "here's what's going on" line */
.today-rec-summary {
  font-size: 14px; color: #F1EEE8; line-height: 1.6; margin-top: 8px;
}
.today-rec-coachnote {
  font-size: 13px; color: rgba(255,255,255,0.82); line-height: 1.55; margin-top: 10px;
  background: rgba(212,178,106,0.08); border: 1px solid rgba(212,178,106,0.25);
  border-radius: 8px; padding: 9px 12px;
}
.today-rec-coachnote strong { color: #D4B26A; }
.today-rec-sub {
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,0.4); margin: 16px 0 8px;
}
/* Time-of-day grouping - the day reads as a sequenced plan */
.today-rec-timeblock { margin-bottom: 12px; }
.today-rec-timelabel {
  font-size: 11px; font-weight: 700; color: #D4B26A; letter-spacing: 0.3px;
  margin-bottom: 6px;
}
.today-rec-fixtag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.06);
  padding: 2px 6px; border-radius: 4px; margin-left: 8px; vertical-align: middle;
}
.today-rec-blocks, .today-rec-checklist { display: flex; flex-direction: column; gap: 8px; }
.today-rec-block {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--atlas-surface-nested); border-radius: 8px; padding: 9px 12px;
}
/* Tickable item - checkbox + label + prescription */
.today-rec-item {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--atlas-surface-nested); border-radius: 8px; padding: 10px 12px;
  cursor: pointer; transition: opacity 0.15s;
}
.today-rec-item.is-done { opacity: 0.5; }
.today-rec-tick {
  margin: 1px 0 0; width: 18px; height: 18px; flex-shrink: 0;
  accent-color: #D4B26A; cursor: pointer;
}
.today-rec-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.today-rec-block-type, .today-rec-item-name {
  font-size: 12px; font-weight: 700; color: #D4B26A;
}
.today-rec-item.is-done .today-rec-item-name { text-decoration: line-through; }
.today-rec-block-rx, .today-rec-item-rx {
  font-size: 13px; color: rgba(255,255,255,0.8); line-height: 1.45;
}
/* "As planned" - green-light variant */
.today-rec-card--good {
  background: rgba(105,240,174,0.05);
  border-color: rgba(105,240,174,0.3);
}
.today-rec-card--good .today-rec-eyebrow { color: rgba(105,240,174,0.9); }

/* Reinforcement - positive verdict. Same green family as "as planned" but
 * fuller card with the highlight headline, specific praise, and a
 * keepDoing list pulled from the client's actual protocols. */
.today-rec-card--reinforce {
  background: rgba(105,240,174,0.06);
  border-color: rgba(105,240,174,0.35);
}
.today-rec-card--reinforce .today-rec-eyebrow { color: rgba(105,240,174,0.95); }
.today-rec-card--reinforce .today-rec-cause { color: #69F0AA; }
.today-rec-keepdoing { display: flex; flex-direction: column; gap: 8px; }
.today-rec-keepitem {
  background: rgba(105,240,174,0.05); border: 1px solid rgba(105,240,174,0.18);
  border-radius: 8px; padding: 10px 12px;
}
.today-rec-keepitem-name {
  font-size: 13px; font-weight: 700; color: #69F0AA;
}
.today-rec-keepitem-why {
  font-size: 13px; color: rgba(255,255,255,0.78); line-height: 1.5; margin-top: 3px;
}
.today-rec-reassess {
  font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 14px;
  padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.06);
}

/* Recovery Engine - compact banner on the Training tab */
.recovery-banner--tab {
  background: rgba(212,178,106,0.06);
  border: 1px solid rgba(212,178,106,0.3);
  border-radius: 12px; padding: 13px 16px; margin-bottom: 14px;
}
.recovery-banner-eyebrow {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: rgba(212,178,106,0.9); margin-bottom: 5px;
}
.recovery-banner-cause { font-size: 15px; font-weight: 700; color: #F1EEE8; }
.recovery-banner-trigger { font-size: 12px; color: rgba(255,255,255,0.7); margin-top: 4px; line-height: 1.45; }
.recovery-banner-rec { font-size: 13px; color: rgba(255,255,255,0.82); margin-top: 7px; }
.recovery-banner-rec strong { color: #D4B26A; }
.recovery-banner-foot { font-size: 11px; color: rgba(255,255,255,0.45); margin-top: 6px; }

/* Recovery Engine v2 #61 - interactive checklist on RECOVERY_DAY journal cards.
 * Client can re-open a past Recovery day entry and tick boxes they forgot to
 * tick before bed. Each change POSTs to /api/recovery-diagnosis/tick. */
.journal-recovery-card {
  background: rgba(212,178,106,0.04);
  border: 1px solid rgba(212,178,106,0.22);
  border-radius: 12px; padding: 14px 16px;
}
.recovery-check-progress {
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  color: rgba(212,178,106,0.9); margin-left: auto;
}
.recovery-check-cause {
  font-size: 13px; color: rgba(255,255,255,0.75); line-height: 1.5;
  background: var(--atlas-surface-nested); border-radius: 8px; padding: 8px 11px;
}
.recovery-check-list { display: flex; flex-direction: column; gap: 6px; }
.recovery-check-row {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--atlas-surface-nested); border-radius: 8px; padding: 10px 12px;
  cursor: pointer; transition: opacity 0.15s, background 0.15s;
}
.recovery-check-row:hover { background: rgba(255,255,255,0.05); }
.recovery-check-row.recovery-check-saving { opacity: 0.6; }
.recovery-check-readonly { cursor: default; }
.recovery-check-row input[type="checkbox"] {
  margin: 2px 0 0; width: 17px; height: 17px; flex-shrink: 0;
  accent-color: #D4B26A; cursor: pointer;
}
.recovery-check-readonly input[type="checkbox"] { cursor: default; }
.recovery-check-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.recovery-check-label {
  font-size: 13px; font-weight: 700; color: #D4B26A;
}
.recovery-check-row input:checked ~ .recovery-check-text .recovery-check-label {
  text-decoration: line-through; opacity: 0.6;
}
.recovery-check-timing {
  font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.5);
  text-transform: uppercase; letter-spacing: 0.06em; margin-left: 6px;
}
.recovery-check-detail {
  font-size: 13px; color: rgba(255,255,255,0.78); line-height: 1.45;
}
.recovery-check-empty {
  font-size: 12px; color: rgba(255,255,255,0.5); font-style: italic;
  padding: 6px 0;
}

/* Recovery Engine - session-start interception screen */
.recovery-intercept {
  border: 1px solid rgba(212,178,106,0.32);
  background: rgba(212,178,106,0.05);
}
.recovery-intercept-eyebrow {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: rgba(212,178,106,0.9); margin-bottom: 6px;
}
.recovery-intercept-cause { font-size: 19px; font-weight: 700; color: #f1eee8; letter-spacing: -0.2px; }
.recovery-intercept-trigger {
  font-size: 13px; color: #f1eee8; margin-top: 8px; line-height: 1.5;
  background: var(--atlas-surface-card); border-radius: 8px; padding: 9px 12px;
}
.recovery-intercept-rec { font-size: 14px; color: rgba(255,255,255,0.85); margin-top: 12px; }
.recovery-intercept-rec strong { color: #D4B26A; }
.recovery-intercept-reasoning {
  font-size: 13px; color: rgba(255,255,255,0.62); line-height: 1.55; margin-top: 10px;
}
.recovery-intercept-actions {
  display: flex; flex-direction: column; gap: 10px; margin-top: 18px;
}
.recovery-intercept-actions button { width: 100%; }

/* ── Mid-session Resume pill (Bug 2, 12 May 2026; sidebar treatment 14 May) ──
 * A highlighted pill pinned to the top of the sidebar nav. Surfaces whenever a
 * non-expired in-progress gym session is persisted in localStorage - lets a
 * client who got bounced (phone lock / iOS tab eviction) drop straight back
 * into the tracker. Gold-accented so it reads as the one priority action in
 * the nav without competing with the active-section styling. */
.sidebar-resume-pill {
  display: flex; align-items: center; gap: 9px;
  width: 100%; margin-bottom: 8px; padding: 9px 11px;
  border-radius: 12px; cursor: pointer; font-family: inherit;
  text-align: left;
  background: var(--atlas-gold-soft);
  border: 1px solid rgba(212, 178, 106, 0.45);
  box-shadow: inset 0 0 0 1px rgba(212, 178, 106, 0.06);
  transition: background 150ms, border-color 150ms;
  animation: atlasResumeIn 200ms ease-out;
}
.sidebar-resume-pill:hover {
  background: rgba(212, 178, 106, 0.22);
  border-color: rgba(212, 178, 106, 0.65);
}
@keyframes atlasResumeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sidebar-resume-pill .resume-pill-dot {
  flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--atlas-gold);
  box-shadow: 0 0 0 0 rgba(212, 178, 106, 0.6);
  animation: atlasResumePulse 2s ease-out infinite;
}
@keyframes atlasResumePulse {
  0%   { box-shadow: 0 0 0 0 rgba(212, 178, 106, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(212, 178, 106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 178, 106, 0); }
}
.sidebar-resume-pill .resume-pill-text {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px;
}
.sidebar-resume-pill .resume-pill-label {
  font-size: 12px; font-weight: 700; color: var(--atlas-gold);
  letter-spacing: 0.01em;
}
.sidebar-resume-pill .resume-pill-name {
  font-size: 11px; font-weight: 500; color: var(--atlas-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-resume-pill .resume-pill-dismiss {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 8px;
  color: var(--atlas-text-faint); font-size: 12px; line-height: 1;
  transition: color 120ms, background 120ms;
}
.sidebar-resume-pill .resume-pill-dismiss:hover {
  color: var(--atlas-text-primary); background: rgba(255, 255, 255, 0.08);
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-resume-pill { animation: none; }
  .sidebar-resume-pill .resume-pill-dot { animation: none; }
}
/* Mobile: sidebar is a drawer, so badge the hamburger when a session is
 * pending - keeps the cue visible with the drawer closed. */
.sidebar-hamburger.has-resume::after {
  content: ''; position: absolute; top: 7px; right: 7px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--atlas-gold);
  border: 2px solid var(--atlas-bg);
}

/* ════════════════════════════════════════════════════════════════════
 * Performance History tabbed report - v2 styles (16 May 2026)
 * Stack date/dose, Silent change content, Training expand, Nutrition bars.
 * ════════════════════════════════════════════════════════════════════ */

/* Stack tab - Added / Continuing / Removed rows with dose + date display.
 * 16 May 2026 v2.6 - fixed-center 3-col grid. Both side columns are EQUAL
 * 1fr with min-width: 0 so long names/dates can't push them past the split.
 * Middle column = auto (wraps chip's fixed 110px width). Result: chip sits
 * at the dead-center of every row regardless of name or date length. */
/* 23 May 2026 - dose pill moved to a FIXED left column (Harry): every row
 * reads dose → name → date, with all pills the same width so they form a
 * clean left rail. */
/* 23 May 2026 - dose pill is a FIXED-WIDTH left rail (Harry): every pill is
 * exactly the same width so the names line up in a clean column. The dose
 * column is sized by the pill's hard pixel width (not a flexible fraction),
 * so pill width never tracks name length. */
.ph-stack-item {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: var(--atlas-surface-nested);
  border-radius: 8px;
  margin-bottom: 4px;
  font-size: 13px;
}
.ph-stack-name {
  color: #F1EEE8; font-weight: 600;
  text-align: left !important;
  justify-self: start !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.ph-stack-dose {
  font-size: 11px; font-weight: 600;
  color: #D4B26A;
  background: rgba(212,178,106,0.10);
  border: 1px solid rgba(212,178,106,0.25);
  padding: 3px 4px; border-radius: 8px;
  white-space: nowrap;
  width: 84px !important;
  min-width: 84px !important;
  max-width: 84px !important;
  box-sizing: border-box;
  justify-self: start;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ph-stack-dose-empty {
  color: rgba(255,255,255,0.3);
  background: var(--atlas-surface-nested);
  border-color: rgba(255,255,255,0.05);
}
.ph-stack-meta {
  font-size: 12px; color: rgba(255,255,255,0.55);
  letter-spacing: 0.2px; white-space: nowrap;
  text-align: right;
  justify-self: end;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ph-stack-meta-missing { color: rgba(255,255,255,0.3); font-style: italic; }
.ph-stack-dur { color: rgba(255,255,255,0.4); margin-left: 2px; }
@media (max-width: 700px) {
  .ph-stack-item {
    grid-template-columns: 84px 1fr;
    grid-template-areas: "dose name" "dose meta";
    column-gap: 12px;
    row-gap: 2px;
  }
  .ph-stack-dose { grid-area: dose; align-self: center; }
  .ph-stack-name { grid-area: name; }
  .ph-stack-meta { grid-area: meta; text-align: left; justify-self: start; }
}
.ph-stack-bucket {
  border-left: 3px solid rgba(255,255,255,0.08);
  padding: 8px 12px 8px 14px;
  margin-bottom: 10px;
  background: rgba(255,255,255,0.015);
  border-radius: 0 8px 8px 0;
}
.ph-stack-bucket.added       { border-left-color: rgba(105,240,174,0.55); background: rgba(105,240,174,0.04); }
.ph-stack-bucket.continuing  { border-left-color: rgba(212,178,106,0.55); background: rgba(212,178,106,0.04); }
.ph-stack-bucket.removed     { border-left-color: rgba(239,125,122,0.55); background: rgba(239,125,122,0.05); }
.ph-stack-bucket-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.ph-stack-bucket-lbl {
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ph-stack-bucket.added       .ph-stack-bucket-lbl { color: #69F0AA; }
.ph-stack-bucket.continuing  .ph-stack-bucket-lbl { color: #D4B26A; }
.ph-stack-bucket.removed     .ph-stack-bucket-lbl { color: #E88A8A; }
.ph-stack-bucket-count {
  font-size: 11px; color: rgba(255,255,255,0.5);
}
.ph-stack-list { display: flex; flex-direction: column; gap: 2px; }

/* Silent change callout - now surfaces the actual client-written explanation */
.ph-silent-change {
  background: rgba(212,178,106,0.06);
  border: 1px solid rgba(212,178,106,0.35);
  border-left: 4px solid rgba(212,178,106,0.7);
  border-radius: 8px;
  padding: 11px 14px;
  margin-bottom: 14px;
}
.ph-silent-change-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ph-silent-change-tag {
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: #D4B26A;
}
.ph-silent-change-hint {
  font-size: 12px; color: rgba(255,255,255,0.55); font-style: italic;
}
.ph-silent-change-body {
  margin-top: 7px;
  font-size: 13px; line-height: 1.55; color: rgba(241,238,232,0.92);
  background: rgba(0,0,0,0.18);
  border-radius: 8px;
  padding: 9px 12px;
}

/* 16 May 2026 v2.4 - Phase context card sits above session list on Training
 * tab. Phase name + week-of-week + focus tag + thin progress bar +
 * completion / Atlas / RPE stat chips. Per Harry: "where are we in the
 * phase? what moved the needle this week?" */
.ph-train-phase {
  background: rgba(212,178,106,0.04);
  border: 1px solid rgba(212,178,106,0.22);
  border-left: 3px solid rgba(212,178,106,0.6);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.ph-train-phase-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 9px; flex-wrap: wrap;
}
.ph-train-phase-title {
  font-size: 14px; font-weight: 700; color: #F1EEE8;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.ph-train-phase-wk {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #D4B26A;
  background: rgba(212,178,106,0.10);
  border: 1px solid rgba(212,178,106,0.28);
  padding: 2px 8px; border-radius: 4px;
}
.ph-train-phase-focus {
  font-size: 12px; color: rgba(255,255,255,0.6);
  font-style: italic;
}
.ph-train-phase-progress { margin-bottom: 9px; }
.ph-train-phase-progress-track {
  height: 4px; border-radius: 4px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.ph-train-phase-progress-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, rgba(212,178,106,0.55), #D4B26A);
}
.ph-train-phase-stats {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.ph-train-stat {
  font-size: 12px; font-weight: 700;
  padding: 3px 9px; border-radius: 8px;
  display: inline-flex; gap: 5px; align-items: baseline;
  background: var(--atlas-surface-card);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(241,238,232,0.95);
}
.ph-train-stat-lbl {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
}
.ph-train-stat-good { background: rgba(105,240,174,0.07); border-color: rgba(105,240,174,0.25); color: #69F0AA; }
.ph-train-stat-good .ph-train-stat-lbl { color: rgba(105,240,174,0.75); }
.ph-train-stat-poor { background: rgba(239,125,122,0.07); border-color: rgba(239,125,122,0.25); color: #E88A8A; }
.ph-train-stat-poor .ph-train-stat-lbl { color: rgba(239,125,122,0.75); }
.ph-train-stat-neutral { background: rgba(212,178,106,0.07); border-color: rgba(212,178,106,0.22); color: #D4B26A; }
.ph-train-stat-neutral .ph-train-stat-lbl { color: rgba(212,178,106,0.75); }
.ph-train-stat-meta strong { color: #F1EEE8; }

/* Training tab - tap-to-expand session cards with exercise/set detail */
.ph-train-clickable {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ph-train-chevron {
  margin-left: auto;
  font-size: 18px; color: rgba(255,255,255,0.35);
  transition: transform 0.18s ease;
}
.ph-train-row.ph-train-open .ph-train-chevron { transform: rotate(90deg); color: #D4B26A; }
.ph-train-row.ph-train-open .ph-train-row-head { border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 8px; }
.ph-train-detail { margin-top: 10px; padding-top: 6px; }
.ph-train-detail-inner { display: flex; flex-direction: column; gap: 10px; }
.ph-train-loading {
  font-size: 12px; color: rgba(255,255,255,0.5);
  padding: 12px; text-align: center;
}
.ph-train-error { color: #E88A8A; }
.ph-train-empty-detail {
  font-size: 12px; color: rgba(255,255,255,0.5);
  padding: 10px 12px; font-style: italic;
}

.ph-ex-card {
  background: rgba(0,0,0,0.18);
  border-radius: 8px;
  padding: 10px 12px;
}
.ph-ex-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.ph-ex-name {
  font-size: 13px; font-weight: 700; color: #F1EEE8;
}
.ph-ex-tags { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.ph-ex-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px;
}
.ph-ex-group       { background: rgba(212,178,106,0.15); color: #D4B26A; border: 1px solid rgba(212,178,106,0.3); }
.ph-ex-intensifier { background: rgba(239,125,122,0.15); color: #E88A8A; border: 1px solid rgba(239,125,122,0.3); }
.ph-ex-skipped     { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.12); }

.ph-ex-target {
  font-size: 12px; color: rgba(255,255,255,0.55);
  margin-bottom: 6px;
}
.ph-ex-coach-notes {
  font-size: 12px; color: rgba(255,255,255,0.72);
  background: rgba(212,178,106,0.05);
  border-left: 2px solid rgba(212,178,106,0.4);
  padding: 5px 9px; border-radius: 0 8px 8px 0;
  margin-bottom: 8px; line-height: 1.45;
}
.ph-ex-no-sets {
  font-size: 12px; color: rgba(255,255,255,0.4); font-style: italic;
  padding: 6px 0;
}
.ph-ex-sets {
  width: 100%; border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px; color: rgba(241,238,232,0.85);
}
/* 17 May 2026 - explicit column widths via colgroup keep header + body
   aligned regardless of how short the data is. Numeric cols centered;
   Notes left-aligned and gets the remainder. */
.ph-ex-col-set   { width: 48px; }
.ph-ex-col-reps  { width: 80px; }
.ph-ex-col-load  { width: 110px; }
.ph-ex-col-rpe   { width: 70px; }
.ph-ex-col-notes { width: auto; }
.ph-ex-sets thead th {
  text-align: center;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  padding: 5px 8px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ph-ex-sets thead th:first-child,
.ph-ex-sets thead th:last-child { text-align: left; }
.ph-ex-sets tbody td {
  padding: 6px 8px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ph-ex-sets tbody td:first-child,
.ph-ex-sets tbody td:last-child { text-align: left; }
.ph-ex-sets tbody tr:last-child td { border-bottom: none; }
.ph-ex-set-note {
  color: rgba(255,255,255,0.55); font-size: 12px;
  white-space: normal; word-break: break-word;
}

/* ─────────────────────────────────────────────────────────────────────────
 * About-this-compound block (Pharmaceuticals + Supplements drill-in).
 * Moved out of inline-injected styles 17 May 2026 - the injection was
 * timing-dependent (only ran on first renderPeptides) and the white-button
 * Anastrozole bug was traced to the inline rules not applying in some
 * navigation paths. These rules ship with the static CSS so they always
 * win, no matter the entry point. Container also gets visible framing
 * so the body never floats outside its card.
 * ───────────────────────────────────────────────────────────────────── */
.pep-about {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}
.pep-about-head {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 0;
  background: none !important;
  border: none !important;
  cursor: pointer;
  color: inherit; font-family: inherit;
  text-align: left;
  appearance: none; -webkit-appearance: none;
}
.pep-about-head:focus-visible {
  outline: 2px solid rgba(212,178,106,0.5);
  outline-offset: 2px; border-radius: 4px;
}
.pep-about-title {
  flex: 1;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.pep-about-chev {
  color: rgba(255,255,255,0.4); font-size: 12px;
  transition: transform 0.2s;
}
.pep-about[data-pep-about-expanded="1"] .pep-about-chev { transform: rotate(180deg); }
.pep-about-body { display: none; margin-top: 14px; }
.pep-about[data-pep-about-expanded="1"] .pep-about-body { display: block; }
.pep-about-banner {
  display: flex; gap: 10px; align-items: flex-start;
  margin-bottom: 14px; padding: 10px 12px;
  background: rgba(255,183,77,0.08);
  border: 1px solid rgba(255,183,77,0.25);
  border-radius: 8px;
  color: #ffb74d; font-size: 13px; line-height: 1.45;
}
.pep-about-banner-icon { font-size: 14px; line-height: 1.45; }
.pep-about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px; margin-bottom: 14px;
}
.pep-about-block {
  margin-bottom: 0;
  padding: 10px 12px;
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
}
.pep-about-h {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 6px;
}
.pep-about-p {
  font-size: 13px; line-height: 1.5;
  color: rgba(241,238,232,0.78);
  white-space: pre-wrap; word-break: break-word;
}
.pep-about-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 5px;
}
.pep-about-list li {
  position: relative; padding-left: 14px;
  font-size: 13px; line-height: 1.45;
  color: rgba(241,238,232,0.78);
}
.pep-about-list li::before {
  content: "•"; position: absolute; left: 2px; top: 0;
  color: rgba(212,178,106,0.85); font-weight: 700;
}
.pep-about-desc { margin-top: 0; }
.pep-about-cjc {
  margin-top: 14px; padding: 12px;
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
}
.pep-about-cjc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; margin-top: 6px;
}
.pep-about-cjc-tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #D4B26A;
  margin-bottom: 4px;
}
.pep-about-cjc-body {
  font-size: 13px; line-height: 1.45;
  color: rgba(241,238,232,0.78);
}
@media (prefers-reduced-motion: reduce) {
  .pep-about-chev { transition: none; }
}

/* Nutrition tab - 4-bar adherence grid + days-logged ladder */
.ph-nut-meta-row { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.ph-nut-meta-cell {
  flex: 1; min-width: 140px;
  background: var(--atlas-surface-nested);
  border-radius: 8px;
  padding: 9px 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-left: 3px solid rgba(255,255,255,0.08);
}
.ph-nut-meta-cell.good     { border-left-color: rgba(105,240,174,0.6); }
.ph-nut-meta-cell.partial  { border-left-color: rgba(212,178,106,0.6); }
.ph-nut-meta-cell.poor     { border-left-color: rgba(239,125,122,0.6); }
.ph-nut-meta-lbl {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(255,255,255,0.55);
}
.ph-nut-meta-val { font-size: 13px; font-weight: 700; color: #F1EEE8; }

.ph-nut-bars {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 600px) {
  .ph-nut-bars { grid-template-columns: 1fr; }
}
.ph-nut-bar {
  background: var(--atlas-surface-nested);
  border-radius: 8px;
  padding: 10px 12px;
}
.ph-nut-bar.good     { background: rgba(105,240,174,0.05); }
.ph-nut-bar.partial  { background: rgba(212,178,106,0.05); }
.ph-nut-bar.poor     { background: rgba(239,125,122,0.05); }
.ph-nut-bar.neutral  { background: var(--atlas-surface-nested); }
.ph-nut-bar-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.ph-nut-bar-lbl {
  font-size: 12px; font-weight: 700; letter-spacing: 0.4px;
  color: rgba(255,255,255,0.7);
}
.ph-nut-bar-pct {
  font-size: 15px; font-weight: 700; color: #F1EEE8;
}
.ph-nut-bar.good    .ph-nut-bar-pct { color: #69F0AA; }
.ph-nut-bar.partial .ph-nut-bar-pct { color: #D4B26A; }
.ph-nut-bar.poor    .ph-nut-bar-pct { color: #E88A8A; }
/* 16 May 2026 v2.3 - simplified bar. Always fills 100% of track; tier color
 * tells how-far-off-target. No more overflow visual that escaped the bar. */
.ph-nut-bar-track {
  position: relative;
  height: 8px; border-radius: 4px;
  background: rgba(255,255,255,0.06);
  margin-bottom: 6px;
  overflow: hidden;
}
.ph-nut-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 100%;
  border-radius: 4px;
  background: rgba(255,255,255,0.3);
}
.ph-nut-bar.good     .ph-nut-bar-fill { background: linear-gradient(90deg, rgba(105,240,174,0.55), #69F0AA); }
.ph-nut-bar.partial  .ph-nut-bar-fill { background: linear-gradient(90deg, rgba(212,178,106,0.55), #D4B26A); }
.ph-nut-bar.poor     .ph-nut-bar-fill { background: linear-gradient(90deg, rgba(239,125,122,0.55), #E88A8A); }
.ph-nut-bar.neutral  .ph-nut-bar-fill { background: rgba(255,255,255,0.12); }
.ph-nut-bar-sub {
  font-size: 11px; color: rgba(255,255,255,0.5);
  letter-spacing: 0.2px;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.ph-nut-bar-sub-txt { white-space: nowrap; }
.ph-nut-dir {
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px;
  white-space: nowrap;
}
.ph-nut-dir.in-band { background: rgba(105,240,174,0.12); color: #69F0AA; border: 1px solid rgba(105,240,174,0.3); }
.ph-nut-dir.good    { background: rgba(105,240,174,0.12); color: #69F0AA; border: 1px solid rgba(105,240,174,0.3); }
.ph-nut-dir.over    { background: rgba(239,125,122,0.12); color: #E88A8A; border: 1px solid rgba(239,125,122,0.3); }
.ph-nut-dir.under   { background: rgba(212,178,106,0.12); color: #D4B26A; border: 1px solid rgba(212,178,106,0.3); }
.ph-nut-legend {
  font-size: 11px; color: rgba(255,255,255,0.5);
  margin-top: 10px; padding: 8px 11px;
  background: var(--atlas-surface-nested);
  border-radius: 8px;
  line-height: 1.45;
}
.ph-nut-legend-lbl {
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(255,255,255,0.65);
  margin-right: 8px;
}

/* ────────────────────────────────────────────────────────────────────
 * Plan tab - Coach Actions split into 3 colored cards (Maintain / Remove
 * / Add) with collapsible long items. 16 May 2026 v2.1.
 * ──────────────────────────────────────────────────────────────────── */
.ph-ca-section { display: flex; flex-direction: column; gap: 12px; }
.ph-ca-head {
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(255,255,255,0.62);
  margin-bottom: 2px;
}
.ph-ca-bucket {
  border-left: 3px solid;
  background: rgba(255,255,255,0.015);
  border-radius: 0 8px 8px 0;
  padding: 11px 14px;
}
.ph-ca-maintain { border-left-color: rgba(105,240,174,0.6); background: rgba(105,240,174,0.04); }
.ph-ca-remove   { border-left-color: rgba(239,125,122,0.6); background: rgba(239,125,122,0.045); }
.ph-ca-add      { border-left-color: rgba(212,178,106,0.6); background: rgba(212,178,106,0.04); }
.ph-ca-bucket-head {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 9px;
}
.ph-ca-bucket-lbl {
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ph-ca-maintain .ph-ca-bucket-lbl { color: #69F0AA; }
.ph-ca-remove   .ph-ca-bucket-lbl { color: #E88A8A; }
.ph-ca-add      .ph-ca-bucket-lbl { color: #D4B26A; }
.ph-ca-bucket-count {
  font-size: 11px; color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.05);
  padding: 1px 7px; border-radius: 8px;
}
.ph-ca-items { display: flex; flex-direction: column; gap: 5px; }
.ph-ca-item {
  background: rgba(0,0,0,0.18);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
}
.ph-ca-item.ph-ca-has-body {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ph-ca-item.ph-ca-has-body:hover { background: rgba(0,0,0,0.28); }
.ph-ca-item-head {
  display: flex; align-items: center; gap: 10px;
}
.ph-ca-item-title {
  flex: 1;
  color: #F1EEE8; font-weight: 600; line-height: 1.4;
}
.ph-ca-item-chevron {
  font-size: 16px; color: rgba(255,255,255,0.4);
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
.ph-ca-item.ph-ca-open .ph-ca-item-chevron { transform: rotate(90deg); color: #D4B26A; }
.ph-ca-item-body {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.05);
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  line-height: 1.55;
}

/* ─────────────────────────────────────────────────────────────────────────
   Habit Tracker (26 May 2026) - PRACTICE-EXPERIENCE-BRIEF.md §6
   Client-facing weekly bucket view. Calm; no red, no judgement, no daily
   dots. Bucket shading uses --atlas-gold tinted at four opacities; the
   "Some" tier overlays a sparse hatched fill so it's distinct from None
   without leaning on colour alone (accessibility: not colour-only signal).
   ──────────────────────────────────────────────────────────────────────── */
.atlas-section-header.has-link {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
}
.atlas-section-header-link {
  font-size: 13px; font-weight: 600;
  color: #c0c8d4; background: var(--atlas-surface-card);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 6px 12px; cursor: pointer;
  font-family: inherit; text-decoration: none;
}
.atlas-section-header-link:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
}

/* 26 May 2026 - was max-width:880px centered. That made sense when the
   Tracker was a standalone surface; once it lives inside Practice it created
   a visible offset (Practice header full-width, Tracker body narrow + centered).
   Drop the constraint; the parent section width governs the layout. */
.ht-shell { padding: 8px 0 24px; }
.ht-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 18px; flex-wrap: wrap; gap: 12px;
}
.ht-title { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: #EEF3F1; }
.ht-sub { font-size: 13px; color: #8F9A98; }
.ht-range {
  display: flex; gap: 4px; background: var(--atlas-surface-card);
  padding: 3px; border-radius: 12px;
}
.ht-range-btn {
  padding: 6px 12px; border: none; background: transparent;
  color: #8F9A98; font-size: 12px; font-weight: 600;
  border-radius: 8px; cursor: pointer; font-family: inherit;
}
.ht-range-btn:hover { color: #c0c8d4; }
.ht-range-btn.active { background: rgba(255,255,255,0.08); color: #EEF3F1; }

.ht-list { display: flex; flex-direction: column; gap: 8px; }
.ht-row {
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: 14px;
  padding: 14px 16px;
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  align-items: center;
}
.ht-row-info { min-width: 0; }
.ht-row-name { font-size: 14px; font-weight: 700; color: #EEF3F1; margin-bottom: 4px; }
.ht-row-meta { font-size: 12px; color: #8F9A98; }
.ht-row-meta .ht-dot { display: inline-block; opacity: 0.45; margin: 0 6px; }
.ht-stage-badge {
  display: inline-block; margin-left: 8px;
  padding: 2px 8px; border-radius: 8px;
  background: rgba(212,178,106,0.12); color: #D4B26A;
  font-size: 11px; font-weight: 600;
}

.ht-chunks { display: flex; gap: 4px; }
.ht-chunk {
  width: 24px; height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: transparent;
  position: relative;
  transition: transform 0.12s, border-color 0.12s;
  cursor: pointer;
}
.ht-chunk:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.22); }
.ht-chunk.bucket-all  { background: rgba(212,178,106,0.8);  border-color: rgba(212,178,106,0.85); }
.ht-chunk.bucket-most { background: rgba(212,178,106,0.5);  border-color: rgba(212,178,106,0.55); }
.ht-chunk.bucket-some {
  background-color: rgba(212,178,106,0.25);
  border-color: rgba(212,178,106,0.32);
  background-image: repeating-linear-gradient(45deg,
    transparent 0, transparent 3px,
    rgba(212,178,106,0.18) 3px, rgba(212,178,106,0.18) 4px);
}
.ht-chunk.bucket-few  { background: rgba(212,178,106,0.12); border-color: rgba(212,178,106,0.28); }
.ht-chunk.bucket-none { background: transparent; border-color: rgba(255,255,255,0.2); }
.ht-chunk.bucket-null { background: transparent; border-color: rgba(255,255,255,0.06); }
/* 26 May 2026 - Bridge Timeline → Practice. Suggested chunks (computed from
   daily logs because no check-in submission yet) read with a dashed border so
   the client knows it's "what we see so far" not "what you said". */
.ht-chunk.ht-chunk-suggested { border-style: dashed; }
.ht-tip-source { margin-top: 4px; font-size: 10px; font-style: italic; color: rgba(255,255,255,0.55); letter-spacing: 0.2px; }

.ht-asneeded-head {
  margin: 22px 0 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #8F9A98;
}
.ht-asneeded-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ht-asneeded-tile {
  flex: 1 1 200px; min-width: 0;
  padding: 12px 14px;
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.ht-asneeded-tile:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); transform: translateY(-1px); }
.ht-asneeded-tile:focus-visible { outline: 2px solid rgba(212,178,106,0.6); outline-offset: 2px; }
/* 26 May 2026 - habit row tap opens the rich method modal. Hover signals
   interactivity; focus ring for keyboard users. Cursor is set inside the
   Practice style block (the inline-expand CSS), keep it visible here too. */
.ht-row { cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.ht-row:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); }
.ht-row:focus-visible { outline: 2px solid rgba(212,178,106,0.6); outline-offset: 2px; }
.ht-asneeded-tile-name { font-size: 13px; font-weight: 700; color: #EEF3F1; margin-bottom: 4px; }
.ht-asneeded-tile-count { font-size: 12px; color: #8F9A98; }

.ht-empty {
  text-align: center; padding: 40px 20px;
  color: #8F9A98; font-size: 13px;
}

.ht-tip {
  position: absolute;
  bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  min-width: 180px; max-width: 240px;
  background: #1D2524;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 12px; line-height: 1.5; color: #c0c8d4;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  z-index: 80;
  pointer-events: none;
  white-space: normal; text-align: left;
}
.ht-tip-bucket { font-weight: 700; color: #EEF3F1; }
.ht-tip-bucket.bucket-all,
.ht-tip-bucket.bucket-most { color: #D4B26A; }
.ht-tip-bucket.bucket-some { color: #c0c8d4; }
.ht-tip-bucket.bucket-none { color: #8F9A98; }
.ht-tip-bucket.bucket-null { color: #8F9A98; font-weight: 600; }
.ht-tip-range { font-size: 11px; color: #8F9A98; margin-top: 2px; }
.ht-tip-reflect { margin-top: 6px; font-style: italic; color: #c0c8d4; }

@media (max-width: 480px) {
  .ht-row { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .ht-chunks { justify-content: flex-start; }
  .ht-chunk { width: 20px; height: 24px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   26 May 2026 - Client "Add to your day" sheet + FAB.
   Apple Calendar-style entry point for the client to author their own
   timeline. FAB lives bottom-right of the Daily Timeline; tapping it (or
   an empty slot) opens a bottom-sheet drawer with 5 category tabs.
   Mobile-first; on wider screens the sheet caps at 520px wide and centres.
   ───────────────────────────────────────────────────────────────────────── */
.sch-fab {
  position: sticky; bottom: 16px; margin-left: auto; margin-top: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(212, 178, 106, 0.12);
  color: #d4b26a;
  border: 1px solid rgba(212, 178, 106, 0.45);
  border-radius: 999px;
  padding: 10px 18px 10px 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.2);
  z-index: 50;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease;
}
.sch-fab:hover { transform: translateY(-1px); background: rgba(212, 178, 106, 0.2); border-color: rgba(212, 178, 106, 0.7); }
.sch-fab:active { transform: translateY(0); }
.sch-fab-plus { font-size: 17px; font-weight: 700; line-height: 1; margin-top: -1px; }
.sch-fab-label { line-height: 1; }
.sch-wrap { position: relative; }

/* Sheet overlay - covers the screen, dims background. */
.sch-add-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(8, 10, 14, 0.6);
  backdrop-filter: blur(8px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity 200ms ease;
  pointer-events: none;
}
.sch-add-overlay.open { opacity: 1; pointer-events: auto; }

.sch-add-sheet {
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  /* 31 May 2026 - teal brand surface (was #14171F navy). Matches the
     dashboard's theme-color #101514 and the rest of the Daily Timeline
     chrome - no more navy island floating on a teal page. */
  background: #101514;
  border: 1px solid rgba(212,178,106,0.22);
  border-bottom: none;
  border-radius: 18px 18px 0 0;
  display: flex; flex-direction: column;
  transform: translateY(40px);
  transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 -16px 48px rgba(0,0,0,0.5);
  overflow: hidden;
}
.sch-add-overlay.open .sch-add-sheet { transform: translateY(0); }

@media (min-width: 720px) {
  .sch-add-overlay { align-items: center; }
  .sch-add-sheet { border-radius: 18px; border-bottom: 1px solid rgba(212,178,106,0.22); max-height: 80vh; }
}

.sch-add-grab {
  width: 40px; height: 4px; border-radius: 4px;
  background: rgba(255,255,255,0.16);
  margin: 8px auto 4px;
}
.sch-add-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 20px 12px;
}
.sch-add-title { font-size: 18px; font-weight: 700; color: #F1EEE8; margin: 0; letter-spacing: -0.01em; }
.sch-add-close {
  background: transparent; border: none; color: rgba(241,238,232,0.55);
  font-size: 24px; line-height: 1; cursor: pointer; padding: 4px 8px;
  border-radius: 8px; transition: background 120ms ease, color 120ms ease;
}
.sch-add-close:hover { background: rgba(255,255,255,0.06); color: #F1EEE8; }

/* Time row */
.sch-add-time-row {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sch-add-time-lbl { font-size: 12px; font-weight: 600; color: rgba(241,238,232,0.55); letter-spacing: 0.06em; text-transform: uppercase; }
.sch-add-time-picker { font-size: 17px; }
.sch-add-time-picker .sch-yourtime-sel { font-size: 18px; min-width: 36px; }

/* Tabs */
.sch-add-tabs {
  display: flex; gap: 4px; padding: 12px 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  overflow-x: auto;
}
.sch-add-tab {
  background: transparent; border: none; color: rgba(241,238,232,0.55);
  font-family: inherit; font-size: 13px; font-weight: 600;
  letter-spacing: 0.2px;
  padding: 10px 14px; border-radius: 8px 8px 0 0;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.sch-add-tab:hover { color: #F1EEE8; background: var(--atlas-surface-card); }
.sch-add-tab.active { color: #d4b26a; border-bottom-color: #d4b26a; }

/* Body */
.sch-add-body {
  flex: 1; overflow-y: auto;
  padding: 16px 20px 24px;
  display: flex; flex-direction: column; gap: 18px;
}
.sch-add-loading { color: rgba(241,238,232,0.5); font-size: 13px; padding: 24px 0; text-align: center; }
.sch-add-empty { color: rgba(241,238,232,0.4); font-size: 13px; font-style: italic; padding: 8px 4px; }

.sch-add-section { display: flex; flex-direction: column; gap: 8px; }
.sch-add-section-hd {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(241,238,232,0.5);
  margin-bottom: 2px;
}

/* Existing-item row */
.sch-add-existing-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 11px 14px;
  font-family: inherit;
  color: #F1EEE8;
  font-size: 14px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
  text-align: left;
}
.sch-add-existing-row:hover { background: rgba(212,178,106,0.06); border-color: rgba(212,178,106,0.32); }
.sch-add-existing-row:active { transform: scale(0.99); }
.sch-add-existing-row[disabled] { opacity: 0.5; cursor: not-allowed; }
.sch-add-existing-name { flex: 1; font-weight: 600; letter-spacing: 0.1px; }
.sch-add-existing-time {
  font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
  background: rgba(212,178,106,0.12);
  color: #d4b26a;
  padding: 3px 8px; border-radius: 8px;
  font-variant-numeric: tabular-nums;
}
.sch-add-existing-time.muted { background: var(--atlas-surface-card); color: rgba(241,238,232,0.4); font-style: italic; font-weight: 500; }
.sch-add-existing-arrow { color: rgba(212,178,106,0.55); font-size: 16px; font-weight: 600; }

/* Input + textarea */
.sch-add-input {
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 10px 12px;
  color: #F1EEE8;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 120ms ease, background 120ms ease;
  appearance: none; -webkit-appearance: none;
}
.sch-add-input:focus { border-color: rgba(212,178,106,0.55); background: rgba(0,0,0,0.42); }
.sch-add-input::placeholder { color: rgba(241,238,232,0.32); }
.sch-add-textarea {
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 10px 12px;
  color: #F1EEE8;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  resize: vertical;
  min-height: 60px;
  transition: border-color 120ms ease, background 120ms ease;
}
.sch-add-textarea:focus { border-color: rgba(212,178,106,0.55); background: rgba(0,0,0,0.42); }
.sch-add-textarea::placeholder { color: rgba(241,238,232,0.32); }

.sch-add-row-meta { display: flex; align-items: center; gap: 12px; }
.sch-add-meta-lbl { font-size: 12px; color: rgba(241,238,232,0.55); letter-spacing: 0.3px; min-width: 64px; }
.sch-add-meta-sel { flex: 1; cursor: pointer; }

.sch-add-hint {
  font-size: 11px; color: rgba(241,238,232,0.4);
  letter-spacing: 0.2px; line-height: 1.4;
}
.sch-add-primary {
  background: #d4b26a;
  border: 1px solid #d4b26a;
  border-radius: 12px;
  padding: 12px 18px;
  color: #14171F;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1px;
  cursor: pointer;
  margin-top: 4px;
  transition: transform 80ms ease, background 140ms ease, opacity 120ms ease;
}
.sch-add-primary:hover { background: #e0c179; border-color: #e0c179; }
.sch-add-primary:active { transform: scale(0.98); }
.sch-add-primary[disabled] { opacity: 0.5; cursor: not-allowed; }
.sch-add-secondary {
  background: transparent;
  border: 1px solid rgba(220,90,90,0.32);
  border-radius: 8px;
  padding: 10px 16px;
  color: #f59595;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.sch-add-secondary:hover { background: rgba(220,90,90,0.08); border-color: rgba(220,90,90,0.5); }

/* Status flash pill (Saved / Error) */
.sch-add-flash {
  position: absolute; bottom: 84px; left: 50%; transform: translateX(-50%);
  background: rgba(120,200,140,0.18); color: #94e3a8;
  border: 1px solid rgba(120,200,140,0.32);
  padding: 8px 18px; border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.3px;
  opacity: 0; transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
}
.sch-add-flash.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }
.sch-add-flash[data-kind="err"] { background: rgba(220,90,90,0.18); color: #f59595; border-color: rgba(220,90,90,0.32); }

/* Editable anchor pill - buttons reset, hover glows amber. */
.sch-anchor-pill--editable {
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  font-size: 11px;
  transition: background 140ms ease, border-color 140ms ease;
}
.sch-anchor-pill--editable:hover { background: rgba(212,178,106,0.1); border-color: rgba(212,178,106,0.45); }
.sch-anchor-pill--editable:focus-visible { outline: 2px solid rgba(212,178,106,0.6); outline-offset: 2px; }

/* Visual cue on the timeline's in-grid anchor blocks that they're tappable. */
.sch-swim-block.type-anchor { cursor: pointer; }
.sch-swim-block.type-anchor:hover { background: rgba(212,178,106,0.06); }

/* 28 May 2026 - Inline tag for eyebrow row (e.g. Client-logged on training). */
.sch-detail-tag {
  display: inline-block;
  background: rgba(120,200,140,0.14);
  color: #94e3a8;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 6px; border-radius: 4px;
  margin-left: 8px;
  vertical-align: 1px;
  text-transform: uppercase;
}

/* 28 May 2026 - Exercises list in the training anchor detail modal.
   Compact card per exercise with name + intensifier tag, then a single
   metadata line (Sets × Reps · Load · RPE · Tempo · Rest). Order Group
   header (Superset A/B/C) only renders when >1 exercise shares a group. */
.sch-detail-eyebrow-count {
  display: inline-block;
  background: rgba(255,255,255,0.08);
  color: rgba(241,238,232,0.7);
  font-size: 10px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
  margin-left: 4px;
  letter-spacing: 0.2px;
}
.sch-tx-group {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(212,178,106,0.7);
  margin: 12px 0 4px;
}
.sch-tx-list { display: flex; flex-direction: column; gap: 6px; }
.sch-tx {
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 10px 12px;
}
.sch-tx-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.sch-tx-name {
  flex: 1;
  font-size: 14px; font-weight: 600;
  color: #F1EEE8;
  letter-spacing: -0.05px;
}
.sch-tx-intens {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: rgba(212,178,106,0.14);
  color: #d4b26a;
  padding: 2px 7px; border-radius: 4px;
}
.sch-tx-meta {
  font-size: 12px;
  color: rgba(241,238,232,0.7);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1px;
}
.sch-tx-meta .sch-tx-prim { color: #F1EEE8; font-weight: 600; }
.sch-tx-meta .sch-tx-load { color: rgba(212,178,106,0.85); font-weight: 600; }
.sch-tx-meta .sch-tx-rpe,
.sch-tx-meta .sch-tx-tempo,
.sch-tx-meta .sch-tx-rest { color: rgba(241,238,232,0.55); }
.sch-tx-notes {
  font-size: 12px; color: rgba(241,238,232,0.55);
  margin-top: 6px; line-height: 1.4;
  font-style: italic;
}

/* Anchor editor modal - reuses Add-sheet chassis */
.sch-anchor-merged-note {
  background: rgba(212,178,106,0.1);
  border: 1px solid rgba(212,178,106,0.32);
  color: #e0c179;
  padding: 10px 12px; border-radius: 8px;
  font-size: 12px; line-height: 1.4;
  margin-bottom: 4px;
}
.sch-anchor-edit-row {
  display: flex; align-items: center; gap: 12px;
  margin: 12px 0 4px;
}
.sch-anchor-edit-row .sch-yourtime-sel { font-size: 18px; min-width: 36px; }

/* Client-event detail modal - reuses sheet styling */
.sch-add-meta-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sch-add-meta-row:last-of-type { border-bottom: none; }
.sch-add-meta-key { font-size: 12px; color: rgba(241,238,232,0.5); letter-spacing: 0.06em; text-transform: uppercase; }
.sch-add-meta-val { font-size: 14px; font-weight: 600; color: #F1EEE8; }
.sch-add-meta-cap { text-transform: capitalize; }
.sch-add-meta-block {
  background: var(--atlas-surface-nested);
  border-radius: 8px;
  padding: 12px 14px;
  color: rgba(241,238,232,0.75);
  font-size: 13px; line-height: 1.5;
  margin: 12px 0;
}
.sch-add-actions { display: flex; gap: 10px; margin-top: 16px; }

/* 28 May 2026 - Visual cue on the timeline chip for client-added items.
   Dashed border was too noisy; solid border + a subtle left "•" badge on
   the title reads as a quiet "you added this" without breaking the chip's
   silhouette. Kept distinct from coach-prescribed items (no dot) and from
   manual-time anchors (amber MANUAL tag). */
[data-sch-action="open-client-event"] .sch-swim-block-title::before {
  content: "•";
  color: rgba(241,238,232,0.45);
  font-weight: 700;
  margin-right: 6px;
}

/* 28 May 2026 - Day-of-week + Training/Rest picker in the Add Habit form.
   Mon-Sun chips are square pill toggles; presets (Daily/Weekdays/Weekends)
   are subtle text-style buttons. Training filter is single-select pill row. */
.sch-add-day-row {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.05);
  flex-wrap: wrap;
}
.sch-add-day-row:first-of-type { border-top: none; padding-top: 4px; margin-top: 4px; }
.sch-add-day-row .sch-add-meta-lbl { min-width: 64px; padding-top: 6px; }
.sch-day-quickrow { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.sch-day-preset {
  background: transparent;
  border: none;
  color: rgba(241,238,232,0.5);
  font-family: inherit; font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 6px 10px; cursor: pointer;
  border-radius: 8px;
  transition: color 120ms ease, background 120ms ease;
}
.sch-day-preset:hover { color: #F1EEE8; background: var(--atlas-surface-card); }
.sch-day-preset.active { color: #d4b26a; background: rgba(212,178,106,0.1); }
.sch-day-chips { display: flex; gap: 4px; width: 100%; }
.sch-day-chip {
  flex: 1; min-width: 32px;
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(241,238,232,0.55);
  font-family: inherit;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.3px;
  padding: 8px 0; border-radius: 8px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.sch-day-chip:hover { border-color: rgba(212,178,106,0.32); color: #F1EEE8; }
.sch-day-chip.active, .sch-day-chip[aria-pressed="true"] {
  background: rgba(212,178,106,0.16);
  border-color: rgba(212,178,106,0.6);
  color: #d4b26a;
}
.sch-day-filter { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.sch-day-filter-btn {
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(241,238,232,0.55);
  font-family: inherit;
  font-size: 12px; font-weight: 600;
  padding: 5px 12px; border-radius: 999px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.sch-day-filter-btn:hover { border-color: rgba(212,178,106,0.32); color: #F1EEE8; }
.sch-day-filter-btn.active {
  background: rgba(212,178,106,0.16);
  border-color: rgba(212,178,106,0.6);
  color: #d4b26a;
}

/* 28 May 2026 - Anchor picker (Custom time | Wake / Breakfast / Lunch /
   Dinner / Training / Bedtime). Same chip pattern as the Day filter; when
   an anchor is picked the Before / Same / After row + offset input
   reveals below. */
/* 29 May 2026 - eyebrow alignment fix. The section label (e.g. "Anchor")
   was sitting at the section's left edge while the chip below it sat in a
   flex row whose first chip had 12px inner padding - so the label TEXT was
   12px left of the chip TEXT. Add matching left padding to the eyebrow so
   the two texts align column-wise, and tighten margin-bottom so the label
   reads as the chip's caption rather than a separate heading. */
.sch-detail-section .sch-detail-eyebrow { padding-left: 13px; margin-bottom: 8px; }
.sch-anchor-chips { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.sch-anchor-chip {
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(241,238,232,0.55);
  font-family: inherit;
  font-size: 12px; font-weight: 600;
  padding: 5px 12px; border-radius: 999px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.sch-anchor-chip:hover { border-color: rgba(212,178,106,0.32); color: #F1EEE8; }
.sch-anchor-chip.active {
  background: rgba(212,178,106,0.16);
  border-color: rgba(212,178,106,0.6);
  color: #d4b26a;
}
.sch-anchor-offset {
  display: flex; align-items: center; gap: 6px; flex: 1; flex-wrap: wrap;
}
.sch-anchor-pos {
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(241,238,232,0.55);
  font-family: inherit;
  font-size: 12px; font-weight: 600;
  padding: 5px 12px; border-radius: 999px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.sch-anchor-pos:hover { border-color: rgba(212,178,106,0.32); color: #F1EEE8; }
.sch-anchor-pos.active {
  background: rgba(212,178,106,0.16);
  border-color: rgba(212,178,106,0.6);
  color: #d4b26a;
}
.sch-anchor-offset-min {
  -moz-appearance: textfield;
}
.sch-anchor-offset-min::-webkit-outer-spin-button,
.sch-anchor-offset-min::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.sch-anchor-offset-unit {
  font-size: 11px;
  color: rgba(241,238,232,0.55);
  letter-spacing: 0.2px;
}

/* 28 May 2026 - Protocol overview modal component rows. Each row = a
   timeline item this protocol drives. Tap to jump into its detail. */
.sch-proto-list { display: flex; flex-direction: column; gap: 4px; }
.sch-proto-row {
  display: grid;
  grid-template-columns: 56px 1fr auto auto;
  align-items: center;
  gap: 10px;
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 9px 12px;
  font-family: inherit;
  color: #e5e7eb;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.sch-proto-row:hover { background: rgba(212,178,106,0.06); border-color: rgba(212,178,106,0.32); }
.sch-proto-row-time {
  font-size: 12px; font-weight: 700;
  color: #9ca3af;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
}
.sch-proto-row-name {
  font-size: 13px; font-weight: 600;
  color: #F1EEE8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sch-proto-row-cat {
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.6px;
  color: rgba(212,178,106,0.7);
  background: rgba(212,178,106,0.1);
  padding: 2px 6px; border-radius: 4px;
}
.sch-proto-row-arrow {
  color: rgba(241,238,232,0.4);
  font-size: 14px; font-weight: 600;
}

/* 28 May 2026 - Logistical chips sit in the Logistical column; cool-grey
   accent matches the column's overall vibe. Client-added chips already
   carry the "•" dot prefix on the title via the rule above. */
.sch-swim-block.type-logistical .sch-swim-block-accent {
  background: #378ADD;
}
.sch-swim-block.type-logistical .sch-swim-block-title {
  color: #e5e7eb;
}
/* Ad-hoc Meal chips render in the Non-negotiables column (alongside
   Breakfast/Lunch/Dinner anchors). Same blue accent as meal anchors. */
.sch-swim-block.type-meal .sch-swim-block-accent {
  background: #378ADD;
}
.sch-swim-block.type-meal .sch-swim-block-title {
  color: #e5e7eb;
}
/* Note chips live in the Logistical column with a subtler treatment -
   they're free-text reminders, not first-class day structure. */
.sch-swim-block.type-note .sch-swim-block-accent {
  background: rgba(229,231,235,0.45);
}
.sch-swim-block.type-note .sch-swim-block-title {
  color: rgba(229,231,235,0.85);
  font-style: italic;
  font-weight: 500;
}

/* Remove this habit footer - client-authored only, in detail modal */
.sch-detail-remove {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column; gap: 6px;
  align-items: flex-start;
}
.sch-detail-remove-btn {
  background: transparent;
  border: 1px solid rgba(220,90,90,0.4);
  border-radius: 8px;
  padding: 9px 16px;
  color: #f59595;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.1px;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.sch-detail-remove-btn:hover { background: rgba(220,90,90,0.08); border-color: rgba(220,90,90,0.6); }
.sch-detail-remove-btn.arming {
  background: rgba(255,170,80,0.12);
  border-color: rgba(255,170,80,0.55);
  color: #ffc864;
}
.sch-detail-remove-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.sch-detail-remove-hint { font-size: 11px; color: rgba(241,238,232,0.4); line-height: 1.4; }
.sch-detail-remove-status { font-size: 12px; color: rgba(241,238,232,0.6); }

/* ─────────────────────────────────────────────────────────────────────────
 * Performance dashboard (30 May 2026) - sidebar tab "performance".
 * Mockup source: training-dashboard-mockup.html
 * All numbers in lb. Atlas dark theme.
 * ───────────────────────────────────────────────────────────────────────── */

.atlas-perf {
  font-variant-numeric: tabular-nums;
}

.atlas-perf-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(241,238,232,0.08);
}
.atlas-perf-crumb {
  font-size: 11px;
  color: rgba(241,238,232,0.5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.atlas-perf-title {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink, #f1eee8);
}
.atlas-perf-header-pills {
  display: flex;
  gap: 8px;
}

/* Sub-tab nav */
.atlas-perf-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid rgba(241,238,232,0.08);
  margin-bottom: 24px;
  overflow-x: auto;
  scrollbar-width: none;
}
.atlas-perf-tabs::-webkit-scrollbar { display: none; }
.perf-tab {
  background: transparent;
  border: none;
  padding: 10px 16px;
  font-size: 13px;
  font-family: inherit;
  color: rgba(241,238,232,0.5);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s;
  white-space: nowrap;
}
.perf-tab:hover { color: rgba(241,238,232,0.8); }
.perf-tab.active {
  color: var(--ink, #f1eee8);
  border-bottom-color: #D4B26A;
}

.perf-view { display: none; }
.perf-view.active { display: block; }

/* 5 Jun 2026 PM - Nutrition tab nav reused .atlas-perf-tabs / .perf-tab /
   .perf-view directly inside renderFuelHub for visual parity with Training
   (Harry flagged drift). No bespoke nav CSS needed. Section spacing inside
   Nutrition's perf-view panes: */
.perf-view > section { margin-bottom: 28px; }
.perf-view > section:last-child { margin-bottom: 0; }

/* 5 Jun 2026 PM - Phase 2 Overview enrichment styles. */

/* Section eyebrows between sections */
.nutr-section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 4px 0 12px;
}
.nutr-section-title {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(241,238,232,0.55);
}
.nutr-section-meta { font-size: 11px; color: rgba(241,238,232,0.4); }

/* 5 Jun 2026 PM - Movement & NEAT tile on Fuel Overview. Single wide card
   showing walking volume + delta + body-comp tag. Band colour shifts only
   when a body-comp goal is active and walking is materially down/up. */
.nutr-neat-card {
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 3px solid transparent;
  border-radius: 16px;
  padding: 14px 18px;
  margin-bottom: 24px;
}
.nutr-neat-red    { border-left-color: #d85a30; background: linear-gradient(90deg, rgba(216,90,48,0.10), rgba(255,255,255,0.03) 50%); }
.nutr-neat-amber  { border-left-color: #efad27; background: linear-gradient(90deg, rgba(239,173,39,0.10), rgba(255,255,255,0.03) 50%); }
.nutr-neat-green  { border-left-color: #6CD693; background: linear-gradient(90deg, rgba(74,157,107,0.10), rgba(255,255,255,0.03) 50%); }
.nutr-neat-neutral{ border-left-color: rgba(255,255,255,0.10); }
.nutr-neat-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.nutr-neat-lbl { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(241,238,232,0.55); margin-bottom: 4px; }
.nutr-neat-val { font-size: 26px; font-weight: 500; color: #f1eee8; font-variant-numeric: tabular-nums; line-height: 1.1; }
.nutr-neat-sub { font-size: 12px; color: rgba(241,238,232,0.45); margin-top: 4px; }
.nutr-neat-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.nutr-neat-delta { font-size: 13px; letter-spacing: 0.2px; font-variant-numeric: tabular-nums; }
.nutr-neat-delta-red    { color: #ef9696; }
.nutr-neat-delta-amber  { color: #efad27; }
.nutr-neat-delta-green  { color: #6CD693; }
.nutr-neat-delta-neutral{ color: rgba(241,238,232,0.55); }
.nutr-neat-goal {
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #d4b26a; background: rgba(212,178,106,0.10);
  border: 1px solid rgba(212,178,106,0.30); border-radius: 99px;
  padding: 3px 9px;
}

/* Adherence KPI grid - 4 cards in a row, wraps to 2 below 880px */
.nutr-kpi-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-bottom: 24px;
}
/* 5 Jun 2026 PM - 3-up variant for "This week" (Calories / Protein / Fibre)
   after fasting was folded into Meal Times as a pill. */
.nutr-kpi-grid.three-up { grid-template-columns: repeat(3, 1fr); }
/* 5 Jun 2026 PM - Phase 2.6 - 5-up for full macro spread (Cal/P/C/F/Fibre).
   Below 1100px we drop to 3-up so cards don't crush; below 720px 2-up. */
.nutr-kpi-grid.five-up { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) {
  .nutr-kpi-grid.five-up { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .nutr-kpi-grid.five-up { grid-template-columns: repeat(2, 1fr); }
}
.nutr-kpi {
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 13px 14px 12px;
}
/* DS v3 flatness: inside the weekly macro stack the rows are NOT sub-cards -
   divider rows with breathing room (Harry, 23 Jul: "food needs spacing"). */
.nutr-macro-rows .nutr-kpi {
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--atlas-divider);
  padding: 14px 2px;
}
.nutr-macro-rows .nutr-kpi:last-child { border-bottom: none; }
.nutr-kpi-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.nutr-kpi-lbl {
  font-size: 10px; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(241,238,232,0.5);
}
.nutr-kpi-status {
  font-size: 10px; padding: 2px 7px; border-radius: 12px;
  font-weight: 500; letter-spacing: 0.3px;
}
.nutr-kpi-status.green { background: rgba(159,225,203,0.12); color: #9FE1CB; }
.nutr-kpi-status.amber { background: rgba(250,199,117,0.12); color: #E8C97E; }
.nutr-kpi-status.red   { background: rgba(247,193,193,0.10); color: #F7C1C1; }
.nutr-kpi-status.muted { background: var(--atlas-surface-card); color: rgba(241,238,232,0.45); }
.nutr-kpi-val {
  font-size: 22px; font-weight: 500; color: #F1EEE8;
  line-height: 1.05; font-variant-numeric: tabular-nums;
}
.nutr-kpi-unit { font-size: 12px; color: rgba(241,238,232,0.5); font-weight: 400; margin-left: 2px; }
/* 3 Jul 2026 - muted "/ target" segment inside the headline value line
   ("2,944 / 2,620 kcal" - avg bold, target quiet). Smaller than the avg,
   larger than the unit, so the fraction reads at a glance. */
.nutr-kpi-vt {
  font-size: 15px; color: rgba(241,238,232,0.5); font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.nutr-kpi-of {
  font-size: 11px; color: rgba(241,238,232,0.55);
  margin-top: 2px; font-variant-numeric: tabular-nums;
}
.nutr-kpi-foot {
  display: flex; justify-content: space-between;
  font-size: 11px; color: rgba(241,238,232,0.55);
  margin-top: 8px; font-variant-numeric: tabular-nums;
}
.nutr-kpi-foot .streak { color: #9FE1CB; }

/* 2 Jul 2026 - stacked macro card. One card: Calories headline (.nutr-kpi,
   full anatomy) then Protein / Carbs / Fat / Fibre as compact rows beneath.
   Replaces the five-up grid; keeps all data + the scrubber hooks. */
.nutr-macro-stack {
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 14px 15px 13px;
  margin-bottom: 24px;
}
/* Headline calories card sheds its own chrome - the stack wrapper carries it. */
.nutr-macro-stack > .nutr-kpi {
  background: transparent; border: 0; border-radius: 0;
  padding: 0 0 13px;
}
.nutr-macro-stack > .nutr-kpi .nutr-kpi-val { font-size: 26px; }
.nutr-macro-rows {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 4px;
}
/* 9 Jul 2026 - Calories folded into the rows (uniform with P/C/F/Fibre);
   the lead container drops the divider the old headline card provided. */
.nutr-macro-rows-lead { border-top: 0; padding-top: 0; }
/* Compact macro row: name · value · of-target · hit-rate · status · slim bars.
   Grid columns keep numbers on a shared tabular baseline. */
.nutr-macro-row {
  display: grid;
  grid-template-columns: 62px 100px 1fr auto auto 108px;
  align-items: center;
  gap: 10px;
  /* 9 Jul 2026 - rows are .nutr-kpi boxes; this later rule was zeroing their
     horizontal padding, so names sat flush on the box edge. */
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.nutr-macro-row:last-child { border-bottom: 0; }
.nmr-name {
  font-size: 12px; font-weight: 500; color: rgba(241,238,232,0.85);
}
.nmr-val {
  font-size: 15px; font-weight: 500; color: #F1EEE8;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  /* 9 Jul 2026 - right-align the value against the "/ target" column so the
     slash sits at ONE x across all five rows and the number-to-slash gap is
     constant ("2,975 kcal / ..." over "81 g / ..."). */
  text-align: right; justify-self: stretch;
}
.nmr-val .nutr-kpi-unit { font-size: 10px; }
.nmr-of {
  font-size: 11px; color: rgba(241,238,232,0.5);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.nmr-hits {
  font-size: 11px; color: rgba(241,238,232,0.55);
  font-variant-numeric: tabular-nums; white-space: nowrap; justify-self: end;
}
/* Slim 7-day bar strip - reuses .nutr-spark / .nutr-spark-bar rendering at a
   shorter height so the row stays a single line. */
.nmr-spark { justify-self: end; width: 100%; }
.nmr-spark .nutr-spark { height: 18px; margin-top: 0; gap: 2px; }
@media (max-width: 720px) {
  /* 3 Jul 2026 - mobile keeps everything (was: of-target + bars hidden).
     Two-line row via grid areas, no markup change:
       line 1: name · value · of-target · status chip
       line 2: hit-rate · full-width slim bar strip
     Same spans, so every data-spark-* / .nutr-spark-bar scrubber hook is
     untouched. Fits 390px: of-target column is the flexible one and
     ellipsizes rather than overflowing. */
  .nutr-macro-row {
    grid-template-columns: 62px 84px minmax(0, 1fr) auto;
    grid-template-areas:
      "name val of   status"
      "hits spark spark spark";
    column-gap: 8px;
    row-gap: 7px;
  }
  .nmr-name { grid-area: name; }
  .nmr-val  { grid-area: val; }
  .nmr-of {
    grid-area: of;
    min-width: 0; overflow: hidden; text-overflow: ellipsis;
  }
  .nutr-macro-row > .nutr-kpi-status { grid-area: status; justify-self: end; }
  .nmr-hits { grid-area: hits; justify-self: start; }
  .nmr-spark { grid-area: spark; justify-self: end; max-width: 132px; }
  /* Slightly taller bars on touch - easier scrub targets, still slim. */
  .nmr-spark .nutr-spark { height: 20px; }
}

/* 7-day sparkline bars */
.nutr-spark {
  display: flex; gap: 3px; align-items: flex-end;
  height: 26px; margin-top: 10px;
}
.nutr-spark-bar {
  flex: 1; border-radius: 4px 4px 0 0;
  background: rgba(159,225,203,0.55);
}
.nutr-spark-bar.miss { background: rgba(250,199,117,0.55); }
.nutr-spark-bar.low { background: rgba(247,193,193,0.55); }
.nutr-spark-bar.empty { background: rgba(255,255,255,0.06); }
.nutr-spark-bar.today { background: #D4B26A; }
.nutr-spark-bar.miss.today { background: linear-gradient(0deg, #D4B26A, rgba(250,199,117,0.55)); }
.nutr-spark-bar.low.today  { background: linear-gradient(0deg, #D4B26A, rgba(247,193,193,0.55)); }
/* 5 Jun 2026 PM - synced scrubber states. .scrubbed brightens the matched
   day across all cards; .dimmed fades the other six so the eye lands on
   the active day. Cursor hint nudges discoverability. */
.nutr-spark-bar { cursor: pointer; transition: opacity 120ms ease; }
.nutr-spark-bar.scrubbed {
  background: rgba(255,255,255,0.85);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.35);
}
.nutr-spark-bar.dimmed { opacity: 0.35; }
/* 2 Jul 2026 - refeed-day marker. A small gold dot under the bar (subtle -
   the day is judged against its own refeed targets, not flagged as a miss).
   The legend line under the macro rows explains it once, quietly. */
.nutr-spark-bar.refeed { position: relative; }
.nutr-spark-bar.refeed::after {
  content: '';
  position: absolute; left: 50%; bottom: -5px;
  width: 3px; height: 3px; border-radius: 50%;
  transform: translateX(-50%);
  background: rgba(212,178,106,0.75);
}
.nutr-refeed-legend {
  display: flex; align-items: center; gap: 6px;
  margin-top: 10px;
  font-size: 11px; color: rgba(241,238,232,0.45);
}
.nutr-refeed-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(212,178,106,0.75); flex: 0 0 auto;
}

/* Target strip - Hydration / Electrolytes / Meal times */
.nutr-target-grid {
  display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 10px;
  margin-bottom: 24px;
}
.nutr-target-card {
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 13px 15px;
}
.nutr-target-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
.nutr-target-lbl {
  font-size: 10px; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(241,238,232,0.5);
}
.nutr-target-tag {
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #D4B26A; background: rgba(212,178,106,0.10);
  padding: 2px 7px; border-radius: 12px;
}
.nutr-target-val {
  font-size: 22px; font-weight: 500; color: #F1EEE8;
  line-height: 1.05; font-variant-numeric: tabular-nums;
}
.nutr-target-foot {
  font-size: 11px; color: rgba(241,238,232,0.5);
  margin-top: 6px;
}
.nutr-target-rows { display: flex; flex-direction: column; gap: 4px; }
.nutr-target-rows > div {
  display: flex; justify-content: space-between;
  font-size: 13px; color: rgba(241,238,232,0.85);
  padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
  font-variant-numeric: tabular-nums;
}
.nutr-target-rows > div:last-child { border-bottom: none; }
.nutr-target-rows > div > span:first-child {
  font-size: 12px; color: rgba(241,238,232,0.55);
}
/* 5 Jun 2026 PM - Phase 2.5 compact mineral table. 4 rows (Water/Sodium/
   Potassium/Magnesium) with 7d avg + target side-by-side. Replaces the
   prior 4-up KPI grid for Hydration & electrolytes - denser, more honest
   when avg values aren't live yet. */
.nutr-mineral-table {
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 4px 0;
  margin-bottom: 24px;
}
.nutr-mineral-row {
  display: grid;
  grid-template-columns: 140px 1fr 1.6fr;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.nutr-mineral-row:last-child { border-bottom: none; }
.nutr-mineral-name {
  font-size: 13px;
  font-weight: 500;
  color: #F1EEE8;
  letter-spacing: 0.2px;
}
.nutr-mineral-avg {
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.nutr-mineral-avg.in-range  { color: #9FE1CB; }
.nutr-mineral-avg.out-range { color: #E8C97E; }
.nutr-mineral-avg.muted     { color: rgba(241,238,232,0.5); }
.nutr-mineral-avg-tag {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(241,238,232,0.4);
}
.nutr-mineral-target {
  font-size: 14px;
  font-weight: 500;
  color: rgba(241,238,232,0.85);
  font-variant-numeric: tabular-nums;
}
.nutr-mineral-target > div:first-child {
  display: flex; align-items: baseline; gap: 8px;
}
.nutr-mineral-target-tag {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(241,238,232,0.4);
}
.nutr-mineral-sub {
  font-size: 11px;
  color: rgba(241,238,232,0.45);
  margin-top: 2px;
}
@media (max-width: 720px) {
  .nutr-mineral-row {
    grid-template-columns: 90px 1fr 1fr;
    padding: 11px 14px;
    gap: 12px;
  }
}

/* Responsive - wrap to 2-up below 880px */
@media (max-width: 880px) {
  .nutr-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .nutr-target-grid { grid-template-columns: 1fr; }
}

/* ─── 6 Jun 2026 - Phase 4 Gut Intelligence (Food tab section) ──────── */

.gut-intel { margin-bottom: 28px; }

/* Test header card */
.gut-head {
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  margin-bottom: 4px;
}
.gut-head-left { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.gut-head-provider { font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #D4B26A; }
.gut-head-title { font-size: 15px; color: #F1EEE8; font-weight: 500; }
.gut-head-date { font-size: 12px; color: rgba(241,238,232,0.55); margin-top: 2px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gut-next-pill { font-size: 11px; padding: 3px 9px; background: rgba(212,178,106,0.10); border: 1px solid rgba(212,178,106,0.25); border-radius: 12px; color: #D4B26A; letter-spacing: 0.3px; font-weight: 500; }
.gut-head-actions { display: flex; gap: 8px; flex-shrink: 0; }
.gut-head-btn { font-size: 12px; padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.10); color: rgba(241,238,232,0.85); background: var(--atlas-surface-card); text-decoration: none; }
.gut-head-btn.gold { color: #D4B26A; border-color: rgba(212,178,106,0.32); background: rgba(212,178,106,0.08); cursor: pointer; }
.gut-head-btn:hover { background: rgba(255,255,255,0.07); }
.gut-head-btn.gold:hover { background: rgba(212,178,106,0.14); }

/* 5 functional score tiles */
.gut-scores-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.gut-score-tile { background: var(--atlas-surface-nested); border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; padding: 13px 14px 14px; }
.gut-score-lbl { font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(241,238,232,0.5); margin-bottom: 6px; }
.gut-score-val { font-size: 28px; font-weight: 500; color: #F1EEE8; font-variant-numeric: tabular-nums; line-height: 1; display: flex; align-items: baseline; gap: 6px; }
.gut-score-out { font-size: 11px; color: rgba(241,238,232,0.4); margin-left: 1px; }
.gut-score-foot { font-size: 11px; color: rgba(241,238,232,0.6); margin-top: 8px; display: flex; align-items: center; gap: 6px; }
.gut-score-dot { width: 10px; height: 10px; border-radius: 50%; }
/* 10 Jul 2026 facelift - zone palette unified with Fitness/Bloods
   (#6CD693 optimal-green glows / #E8A857 watch / #E88A8A bad). */
.gut-score-tile.low    { border-color: rgba(108,214,147,0.25); }
.gut-score-tile.low    .gut-score-dot { background: #6CD693; box-shadow: 0 0 6px rgba(108,214,147,0.6); }
.gut-score-tile.low    .gut-score-foot { color: #6CD693; }
.gut-score-tile.mod    { border-color: rgba(232,168,87,0.32); }
.gut-score-tile.mod    .gut-score-dot { background: #E8A857; }
.gut-score-tile.mod    .gut-score-foot { color: #E8A857; }
.gut-score-tile.high   { background: linear-gradient(180deg, rgba(232,138,138,0.10), rgba(232,138,138,0.04)); border-color: rgba(232,138,138,0.4); }
.gut-score-tile.high   .gut-score-dot { background: #E88A8A; }
.gut-score-tile.high   .gut-score-foot { color: #E88A8A; font-weight: 500; }
.gut-score-tile.high   .gut-score-val { color: #E88A8A; }

/* Priority finding card */
.gut-prio { background: linear-gradient(90deg, rgba(212,178,106,0.10), rgba(212,178,106,0.00) 65%); border-left: 2px solid #D4B26A; border-radius: 4px; padding: 16px 20px 18px; }
.gut-prio-eye { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; }
.gut-prio-tag { font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #D4B26A; padding: 2px 8px; border: 1px solid rgba(212,178,106,0.35); border-radius: 12px; }
.gut-prio-sev { font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #E88A8A; padding: 2px 8px; background: rgba(232,138,138,0.10); border-radius: 12px; }
.gut-prio-name { font-size: 18px; color: #F4DDA8; font-weight: 500; margin-bottom: 12px; }

.gut-block { padding: 10px 0; border-top: 1px solid rgba(255,255,255,0.06); }
.gut-block:first-of-type { border-top: none; padding-top: 0; }
.gut-block-lbl { font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #D4B26A; margin-bottom: 6px; }
.gut-block-body { font-size: 13px; color: rgba(241,238,232,0.88); line-height: 1.55; }
/* Canonical prose food line (grey, dot-joined) — replaces the pill chips so
   every food list reads the same across the nutrition surfaces (3 Jul 2026). */
.gut-food-chips { line-height: 1.7; margin-top: 4px; }
.gut-food-chip { display: inline; font-size: 12px; padding: 0; background: none; border: none; color: #C7EFE0; }
.gut-food-chip:not(:last-child)::after { content: " · "; color: rgba(255,255,255,0.28); }
/* BRIEF-86 fix (10 Jun) - the region-label cell was dropped on 9 Jun, leaving a
   single child in this 2-col grid; the supplement text got crammed into the
   40px column and wrapped one word per line. Now a plain block so the list
   flows full-width and wraps on spaces. */
.gut-supp-row { display: block; padding: 4px 0; }
.gut-supp-region { font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(241,238,232,0.5); }
.gut-supp-list { font-size: 12px; color: rgba(241,238,232,0.85); }

.gut-ask-atlas { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 14px; background: #D4B26A; color: #101514; border-radius: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.2px; cursor: pointer; text-decoration: none; }
.gut-ask-atlas:hover { filter: brightness(1.08); }
.gut-ask-atlas.ghost { background: transparent; color: #D4B26A; border: 1px solid rgba(212,178,106,0.32); }

/* Secondary findings */
.gut-sec-findings { display: flex; flex-direction: column; gap: 10px; }
.gut-sec-find { background: var(--atlas-surface-nested); border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; overflow: hidden; }
.gut-sec-find summary { cursor: pointer; list-style: none; padding: 14px 18px; display: flex; gap: 14px; align-items: baseline; justify-content: space-between; }
.gut-sec-find summary::-webkit-details-marker { display: none; }
.gut-sec-find-left { flex: 1; min-width: 0; }
.gut-sec-find-name { font-size: 14px; color: #F1EEE8; font-weight: 500; margin-bottom: 4px; }
.gut-sec-find-meta { font-size: 12px; color: rgba(241,238,232,0.55); line-height: 1.4; }
.gut-sec-find-sev { font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: 12px; white-space: nowrap; flex-shrink: 0; }
/* 10 Jul 2026 facelift - severity pills on the unified zone palette. */
.gut-sec-find-sev.mod { background: rgba(232,168,87,0.10); color: #E8A857; }
.gut-sec-find-sev.high { background: rgba(232,138,138,0.10); color: #E88A8A; }
/* BRIEF-86 - Green tier (optimal, education-only). Muted sage so it reads as
   "all clear" without competing with the amber/red priority pills. */
.gut-sec-find-sev.green { background: rgba(154,201,160,0.10); color: #9AC9A0; }
.gut-prio-sev.high { color: #E88A8A; background: rgba(232,138,138,0.10); }
.gut-prio-sev.mod { color: #E8A857; background: rgba(232,168,87,0.10); }
.gut-prio-sev.green { color: #9AC9A0; background: rgba(154,201,160,0.10); }
/* Preserve authored phase/line breaks in the tiered protocol block. */
.gut-block-pre { white-space: pre-wrap; }

/* BRIEF-87 - active protocol banner + this-week objectives card. */
.gut-protocol-banner { background: linear-gradient(135deg, rgba(212,178,106,0.12), rgba(212,178,106,0.04)); border: 1px solid rgba(212,178,106,0.32); border-radius: 16px; padding: 16px 18px; margin-bottom: 14px; }
.gpb-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #D4B26A; margin-bottom: 6px; }
.gpb-title { font-size: 16px; font-weight: 700; color: #F1EEE8; line-height: 1.3; }
.gpb-meta { font-size: 12px; color: rgba(241,238,232,0.65); margin-top: 5px; }
.gpb-progress { margin-top: 12px; height: 6px; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; }
.gpb-progress-fill { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #D4B26A, #E7CE94); }
.gut-protocol-week { background: var(--atlas-surface-nested); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.gpw-head { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(241,238,232,0.5); margin-bottom: 10px; }
.gpw-block { padding: 8px 0; border-top: 1px solid rgba(255,255,255,0.06); }
.gpw-block:first-of-type { border-top: 0; padding-top: 0; }
.gpw-block-lbl { font-size: 11px; font-weight: 600; color: rgba(241,238,232,0.6); margin-bottom: 5px; }
.gpw-list { margin: 0 0 8px; padding-left: 18px; }
.gpw-list li { font-size: 13px; color: rgba(241,238,232,0.88); line-height: 1.55; margin-bottom: 2px; }
/* BRIEF-88 - cadence sub-header within the foods block. */
.gpw-cadence { font-size: 11px; font-weight: 600; letter-spacing: 0.3px; color: #D4B26A; margin: 6px 0 3px; }
/* BRIEF-88 - adherence status widget on the active-protocol banner. */
.gpb-adherence { display: flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 12px; color: rgba(241,238,232,0.8); }
.gpb-adh-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: rgba(241,238,232,0.4); }
.gpb-adherence.met .gpb-adh-dot { background: #9AC9A0; }
.gpb-adherence.met { color: #9AC9A0; }
.gpb-adherence.behind .gpb-adh-dot { background: #E8C97E; }
.gpb-adherence.behind { color: #E8C97E; }
.gpb-adherence.escalated .gpb-adh-dot { background: #F7C1C1; }
.gpb-adherence.escalated { color: #F7C1C1; }
/* BRIEF-88 - weekly-card protocol check-in section. */
.checkin-protocol { background: rgba(212,178,106,0.06); border: 1px solid rgba(212,178,106,0.28); border-radius: 12px; padding: 14px 16px; }
.cpx-head { font-size: 13px; font-weight: 700; color: #D4B26A; margin-bottom: 8px; }
.cpx-carry { font-size: 12px; color: rgba(241,238,232,0.7); background: var(--atlas-surface-nested); border-radius: 8px; padding: 7px 9px; margin-bottom: 10px; line-height: 1.45; }
.cpx-q { padding: 7px 0; border-top: 1px solid rgba(255,255,255,0.06); }
.cpx-q:first-child { border-top: 0; }
.cpx-q-label { display: block; font-size: 13px; color: rgba(241,238,232,0.9); margin-bottom: 5px; line-height: 1.4; }
.cpx-q-input-row { display: flex; align-items: center; gap: 8px; }
.cpx-q-input { width: 64px; padding: 6px 8px; font-size: 14px; text-align: center; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; color: #F1EEE8; }
.cpx-q-unit { font-size: 12px; color: rgba(241,238,232,0.55); }
/* BRIEF-88 follow-up - coach test-mode badge on the check-in (gate bypassed). */
.checkin-coach-badge { display: inline-block; margin-bottom: 14px; padding: 6px 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.3px; color: #E8A857; background: rgba(239,159,39,0.10); border: 1px dashed rgba(239,159,39,0.5); border-radius: 8px; }

/* ════════════════════════════════════════════════════════════════════════
   BRIEF-supplement-builder Phase 3 (16 Jun 2026) - Trial Review pop-up
   Inline cards mounted in #checkin-trial-review-mount at the TOP of the
   weekly check-in. Gold-border accent matches the brief's mockup at
   MOCKUP-supplement-builder.html § Surface 3.
   ════════════════════════════════════════════════════════════════════════ */
.tr-card { background: #364747; border: 1px solid #D4B26A; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; max-width: 520px; box-shadow: 0 0 0 3px rgba(212,178,106,0.06); }
.tr-card.tr-done { border-color: rgba(108,214,147,0.5); box-shadow: 0 0 0 3px rgba(108,214,147,0.06); padding: 10px 14px; }
.tr-done-inner { color: #6CD693; font-size: 13px; font-weight: 600; padding: 4px 0; }

.tr-pip { display: inline-flex; align-items: center; gap: 4px; background: rgba(212,178,106,0.15); color: #D4B26A; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; flex-shrink: 0; }
/* BRIEF-supplement-builder Phase 5 - Supplement/Peptide discriminator pill in pop-up */
.tr-kind { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 9px; font-weight: 800; letter-spacing: 0.8px; flex-shrink: 0; }
.tr-kind-supplement { background: rgba(212,178,106,0.18); color: #D4B26A; border: 1px solid rgba(212,178,106,0.35); }
.tr-kind-peptide { background: rgba(170,130,220,0.18); color: #c8a8e6; border: 1px solid rgba(170,130,220,0.40); }
.tr-name { font-size: 14px; font-weight: 600; color: #F1EEE8; margin: 0; }
.tr-started { color: rgba(255,255,255,0.5); font-size: 11px; }

/* Compact Q rows - label inline with controls when space allows */
.tr-q-block { margin-bottom: 10px; }
.tr-q { font-size: 12px; color: rgba(255,255,255,0.7); margin-bottom: 6px; font-weight: 500; }
.tr-opt { color: rgba(255,255,255,0.35); font-weight: 400; font-size: 11px; }

/* Stars - small inline row, not aspect-ratio boxes */
.tr-stars { display: inline-flex; gap: 4px; }
.tr-star { width: 28px; height: 28px; background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.32); font-size: 14px; cursor: pointer; user-select: none; transition: background 0.12s ease, color 0.12s ease; }
.tr-star:hover { background: rgba(255,255,255,0.05); }
.tr-star.on { color: #D4B26A; background: rgba(212,178,106,0.1); border-color: rgba(212,178,106,0.4); }

/* Pills - tighter padding */
.tr-pill-row { display: flex; flex-wrap: wrap; gap: 5px; }
.tr-pill { padding: 5px 10px; border-radius: 16px; background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.08); font-size: 12px; color: rgba(255,255,255,0.7); cursor: pointer; user-select: none; line-height: 1.2; }
.tr-pill:hover { background: rgba(255,255,255,0.05); }
.tr-pill.on { background: rgba(108,214,147,0.12); border-color: #6CD693; color: #6CD693; }

/* Textareas - shorter default, grow on focus */
.tr-text { width: 100%; background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.08); color: #F1EEE8; padding: 7px 10px; font-size: 12px; border-radius: 8px; resize: vertical; min-height: 34px; font-family: inherit; box-sizing: border-box; line-height: 1.4; }
.tr-text:focus { outline: 2px solid rgba(212,178,106,0.4); outline-offset: -1px; min-height: 56px; }

/* Submit - inline pill, not full-width slab */
.tr-submit-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.tr-submit-btn { padding: 6px 16px; background: var(--atlas-gold-grad, #D4B26A); color: #141008; font-weight: 600; font-size: 12px; border: none; border-radius: 8px; cursor: pointer; letter-spacing: 0.2px; }
.tr-submit-btn:hover:not(:disabled) { background: #c19f56; }
.tr-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.tr-legal { font-size: 11px; color: rgba(255,255,255,0.35); line-height: 1.3; }

/* 26 Jun 2026 - trial reviews grouped under ONE submit. Group wrapper + single
   "Submit all reviews" row, "Not started" card state, invalid-card highlight. */
.tr-group { max-width: 520px; }
.tr-group-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #F1EEE8; letter-spacing: 0.2px; margin-bottom: 10px; }
.tr-group-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 8px; background: rgba(212,178,106,0.18); border: 1px solid rgba(212,178,106,0.35); color: #D4B26A; font-size: 11px; font-weight: 700; }
.tr-group-note { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.55); margin: -2px 0 12px; max-width: 520px; }
.tr-group-note strong { color: rgba(212,178,106,0.9); font-weight: 600; }
.tr-submit-all-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 520px; margin-top: 2px; flex-wrap: wrap; }
.tr-submit-all-btn { padding: 10px 20px; background: #D4B26A; color: #1a2424; font-weight: 600; font-size: 14px; border: none; border-radius: 8px; cursor: pointer; letter-spacing: 0.2px; font-family: inherit; }
.tr-submit-all-btn:hover:not(:disabled) { background: #c19f56; }
.tr-submit-all-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.tr-card.tr-notstarted { border-color: rgba(255,255,255,0.12); box-shadow: none; opacity: 0.85; }
.tr-pip-notstarted { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.6); }
.tr-notstarted-note { font-size: 13px; color: rgba(255,255,255,0.5); font-style: italic; padding: 2px 0; }
.tr-card-invalid { border-color: #E88A8A; box-shadow: 0 0 0 3px rgba(232,138,138,0.10); }

/* "Not added yet" toggle - client declares they haven't started this trial.
   Marked cards mute the rating form and are excluded from the rating check;
   they POST a notAdded signal on submit (worker clears the trial clock). */
.tr-card-foot { display: flex; justify-content: flex-end; margin-top: 8px; }
.tr-notadded-btn { background: transparent; border: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.6); font-size: 13px; font-family: inherit; padding: 7px 13px; border-radius: 8px; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.tr-notadded-btn:hover { border-color: rgba(255,255,255,0.32); color: rgba(255,255,255,0.82); }
.tr-marked-notadded { border-color: rgba(212,178,106,0.45); }
.tr-marked-notadded .tr-q-block { opacity: 0.35; pointer-events: none; }
.tr-marked-notadded .tr-notadded-btn { border-color: rgba(212,178,106,0.55); color: #D4B26A; }

/* 26 Jun 2026 - normalise the check-in trial-card type scale. Questions,
   pills and inputs all read at one body rhythm (~13-14px) instead of the
   prior 11.5/12px patchwork. Inputs go to 16px on phones so iOS doesn't
   zoom the viewport on focus (readable-font-size UX rule). Small badge pips
   stay small on purpose. */
.tr-name { font-size: 15px; }
.tr-started { font-size: 12px; }
.tr-q { font-size: 13px; }
.tr-opt { font-size: 12px; }
.tr-pill { font-size: 13px; padding: 6px 11px; }
.tr-text { font-size: 14px; }
@media (max-width: 480px) {
  .tr-text { font-size: 16px; }
}

/* 2 Jul 2026 - compact batch rows. Nine same-day trials rendered nine
   full-height form cards; each trial is now ONE row. The header (pip + name
   + chevron) and the rating controls (stars + notice chips) are always
   visible, so a rated row reads at a glance while collapsed. Tapping the
   header toggles .tr-open on the card to reveal .tr-row-detail (optional
   notes, trial meta, "Not added yet") - one row open at a time, wired in
   atlas-sections.js _mountTrialReviewCards. */
.tr-card.tr-row { padding: 10px 12px; margin-bottom: 8px; }
.tr-row-head { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; padding: 0; margin: 0; cursor: pointer; font-family: inherit; text-align: left; color: inherit; }
.tr-row-head .tr-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.tr-row-head-static { cursor: default; }
.tr-row-chev { color: rgba(255,255,255,0.4); font-size: 12px; flex-shrink: 0; transition: transform 160ms ease; }
.tr-card.tr-open .tr-row-chev { transform: rotate(180deg); }

/* "Not added" tag in the collapsed header - appears once the client marks
   the trial via the "Not added yet" button in the expanded detail. */
.tr-row-tag-notadded { display: none; }
.tr-marked-notadded .tr-row-tag-notadded { display: inline-block; padding: 2px 7px; border-radius: 4px; background: rgba(212,178,106,0.15); color: #D4B26A; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; flex-shrink: 0; }

/* Inline rating controls - shown collapsed and expanded */
.tr-row-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 9px; }
.tr-row-controls .tr-q-block { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 0; }
.tr-q-mini { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.45); flex-shrink: 0; }

/* Expandable detail - hidden until the row is opened */
.tr-row-detail { display: none; }
.tr-card.tr-open .tr-row-detail { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.08); }
.tr-row-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.tr-row .tr-notstarted-note { margin-top: 6px; }

/* 390px phones: chips wrap (flex-wrap above), stars and chips get real
   touch targets (stars >=44px). */
@media (max-width: 480px) {
  .tr-star { width: 44px; height: 44px; font-size: 18px; }
  .tr-pill { padding: 9px 12px; }
  .tr-row-controls { gap: 10px; }
  .tr-row-controls .tr-q-block { width: 100%; }
}

.gut-sec-find-chev { color: rgba(241,238,232,0.35); font-size: 14px; transition: transform 200ms; flex-shrink: 0; }
.gut-sec-find[open] .gut-sec-find-chev { transform: rotate(180deg); }
.gut-sec-find-body { padding: 0 18px 16px; }

/* Marker grid */
.gut-marker-grid { background: var(--atlas-surface-nested); border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; }
.gut-marker-row { display: grid; grid-template-columns: 1fr 110px 140px 140px; gap: 16px; align-items: center; padding: 10px 18px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.gut-marker-row:last-child { border-bottom: none; }
.gut-marker-row.head { background: rgba(0,0,0,0.08); padding: 8px 18px; font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(241,238,232,0.45); }
.gut-marker-name { font-size: 13px; color: #F1EEE8; font-weight: 500; }
.gut-marker-sub { font-size: 11px; color: rgba(241,238,232,0.5); margin-top: 1px; line-height: 1.3; }
.gut-marker-val { font-size: 14px; color: #F1EEE8; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.gut-marker-range { font-size: 12px; color: rgba(241,238,232,0.55); font-variant-numeric: tabular-nums; text-align: right; }
.gut-marker-status { display: flex; align-items: center; gap: 6px; justify-content: flex-end; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.gut-marker-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
/* 10 Jul 2026 facelift - zone palette unified with Fitness/Bloods; the
   optimal dot glows (Atlas signature, matches the luminous optimal band). */
.gut-marker-status.optimal { color: #6CD693; }
.gut-marker-status.optimal .gut-marker-status-dot { background: #6CD693; box-shadow: 0 0 6px rgba(108,214,147,0.6); }
.gut-marker-status.in-range { color: rgba(241,238,232,0.6); }
.gut-marker-status.in-range .gut-marker-status-dot { background: rgba(241,238,232,0.4); }
.gut-marker-status.low { color: #E8A857; }
.gut-marker-status.low .gut-marker-status-dot { background: #E8A857; }
.gut-marker-status.flagged { color: #E88A8A; }
.gut-marker-status.flagged .gut-marker-status-dot { background: #E88A8A; }
.gut-grid-foot { background: var(--atlas-surface-nested); border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; padding: 14px 18px; margin-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }

/* Trends strip */
.gut-trends-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gut-trend-card { background: var(--atlas-surface-nested); border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; padding: 12px 14px; }
.gut-trend-lbl { font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(241,238,232,0.5); margin-bottom: 4px; }
.gut-trend-val { font-size: 17px; font-weight: 500; color: #F1EEE8; font-variant-numeric: tabular-nums; line-height: 1; display: flex; align-items: baseline; gap: 6px; }
.gut-trend-tag { font-size: 10px; padding: 2px 7px; background: rgba(212,178,106,0.10); color: #D4B26A; border-radius: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.gut-trend-foot { font-size: 11px; color: rgba(241,238,232,0.5); margin-top: 6px; }

@media (max-width: 880px) {
  .gut-scores-grid { grid-template-columns: repeat(3, 1fr); }
  .gut-marker-row { grid-template-columns: 1fr 74px 118px; gap: 10px; padding: 10px 14px; }
  .gut-marker-row > div:nth-child(3) { display: none; }  /* hide ref range on mobile */
  .gut-marker-row.head > div:nth-child(3) { display: none; }
  /* Status column tight on phones - keep the label on one line. */
  .gut-marker-status { font-size: 10px; letter-spacing: 0.02em; gap: 5px; }
  .gut-trends-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── 5 Jun 2026 PM - Phase 2.9 Targets tab ──────────────────────────── */

/* Macro band - 5 cells, calm prescription read */
.tgt-macro-band {
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.tgt-macro-cell { padding: 0 4px; }
.tgt-macro-lbl { font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(241,238,232,0.5); margin-bottom: 5px; }
.tgt-macro-val { font-size: 24px; font-weight: 500; color: #F1EEE8; font-variant-numeric: tabular-nums; line-height: 1; }
.tgt-macro-unit { font-size: 12px; color: rgba(241,238,232,0.5); margin-left: 3px; }
.tgt-macro-foot { font-size: 11px; color: rgba(241,238,232,0.45); margin-top: 6px; }

/* Refeed card */
.tgt-refeed {
  background: linear-gradient(90deg, rgba(212,178,106,0.08), rgba(212,178,106,0.00) 70%);
  border-left: 2px solid #D4B26A;
  border-radius: 4px;
  padding: 14px 16px;
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: baseline;
}
.tgt-refeed-head { font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #D4B26A; margin-bottom: 5px; }
.tgt-refeed-title { font-size: 14px; color: #F4DDA8; font-weight: 500; }
.tgt-refeed-macros { font-size: 13px; color: #F1EEE8; font-variant-numeric: tabular-nums; }
.tgt-refeed-macros b { font-weight: 500; }
.tgt-refeed-delta { font-size: 11px; color: #9FE1CB; margin-top: 4px; }

/* Coach note */
.tgt-note {
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 12px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.tgt-note-icon { color: rgba(241,238,232,0.5); font-size: 14px; }
.tgt-note-body { flex: 1; font-size: 13px; color: rgba(241,238,232,0.85); line-height: 1.5; }
.tgt-note-body b { color: #F1EEE8; font-weight: 500; }

/* Fasting window - full-width card */
.tgt-fast {
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 20px 24px 22px;
  margin-bottom: 22px;
}
.tgt-fast-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.tgt-fast-lbl { font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(241,238,232,0.5); }
.tgt-fast-status { font-size: 10px; padding: 3px 9px; border-radius: 12px; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(212,178,106,0.12); color: #D4B26A; }
.tgt-fast-val { font-size: 28px; font-weight: 500; color: #F1EEE8; font-variant-numeric: tabular-nums; line-height: 1; display: flex; align-items: baseline; gap: 12px; }
.tgt-fast-val .unit { font-size: 14px; color: rgba(241,238,232,0.5); }
.tgt-fast-headline { font-size: 13px; color: rgba(241,238,232,0.65); margin-left: auto; font-weight: 400; }
.tgt-fast-headline b { color: #F1EEE8; font-weight: 500; }

.tgt-fast-wrap { margin-top: 24px; position: relative; padding-bottom: 28px; }
.tgt-fast-bar { position: relative; height: 40px; background: var(--atlas-surface-nested); border-radius: 8px; }
.tgt-fast-eating {
  position: absolute; top: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(212,178,106,0.22), rgba(212,178,106,0.10));
  border-left: 2px solid #D4B26A;
  border-right: 2px solid #D4B26A;
  border-radius: 4px;
  z-index: 1;
}
.tgt-fast-tick {
  position: absolute; top: -4px; bottom: -4px; width: 2px;
  background: #F4DDA8;
  box-shadow: 0 0 8px rgba(244,221,168,0.55);
  z-index: 2;
  transform: translateX(-50%);
  pointer-events: none;
}

.tgt-fast-ticks { position: relative; height: 16px; margin-top: 12px; }
.tgt-fast-ticks span { position: absolute; transform: translateX(-50%); font-size: 11px; font-variant-numeric: tabular-nums; }
.tgt-fast-ticks .edge { color: rgba(241,238,232,0.32); }
.tgt-fast-ticks .gold { color: rgba(212,178,106,0.85); font-weight: 500; }
.tgt-fast-ticks .now  { color: #F4DDA8; font-weight: 500; top: auto; bottom: 76px; }

.tgt-fast-meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.04); font-size: 12px; color: rgba(241,238,232,0.55); }
.tgt-fast-meta-block { display: flex; flex-direction: column; gap: 2px; }
.tgt-fast-meta-block.center { align-items: center; }
.tgt-fast-meta-block.right  { align-items: flex-end; }
.tgt-fast-meta-lbl { font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(241,238,232,0.4); }
.tgt-fast-meta-val { font-size: 13px; color: #F1EEE8; font-weight: 500; font-variant-numeric: tabular-nums; }
.tgt-fast-meta-val.live { color: #F4DDA8; }

@media (max-width: 720px) {
  .tgt-macro-band { grid-template-columns: repeat(2, 1fr); }
  .tgt-refeed { grid-template-columns: 1fr; gap: 8px; }
  .tgt-refeed > div:last-child { text-align: left !important; }
}

/* 2 Jul 2026 - Explore tile grid (.nutr-ov-grid / .nutr-ov-tile*) removed
   with the 7→4 Nutrition tab cut - the tiles duplicated the tab strip. */
.nutr-ov-recommends { margin-bottom: 18px; }

/* 8 Jun 2026 - Foods hero (push / avoid chips at top of Food tab). Renders
   above the meal-plan placeholder for any client with a gut report on file. */
.fuel-foods-hero {
  background: rgba(74, 157, 107, 0.04);
  border: 1px solid rgba(74, 157, 107, 0.20);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 14px;
}
.fuel-hero-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(212, 178, 106, 0.85);
  margin-bottom: 10px;
}
.fuel-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 720px) { .fuel-hero-grid { grid-template-columns: 1fr; } }
.fuel-hero-col-head { margin-bottom: 8px; }
.fuel-hero-col-lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fuel-hero-col.push .fuel-hero-col-lbl { color: #6CD693; }
.fuel-hero-col.avoid .fuel-hero-col-lbl { color: #d85a30; }
.fuel-hero-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fuel-hero-chip {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e8e6df;
}
.fuel-hero-chip.push {
  background: rgba(74, 157, 107, 0.10);
  border-color: rgba(74, 157, 107, 0.28);
  color: #c1e0a0;
}
.fuel-hero-chip.avoid {
  background: rgba(216, 90, 48, 0.10);
  border-color: rgba(216, 90, 48, 0.28);
  color: #e8aa92;
}
.fuel-hero-empty {
  font-size: 12px;
  color: rgba(241, 238, 232, 0.45);
  font-style: italic;
}
.fuel-hero-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(74, 157, 107, 0.10);
  font-size: 12px;
  color: rgba(241, 238, 232, 0.55);
}
.fuel-hero-ask {
  color: #d4b26a;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.fuel-hero-ask:hover { color: #e0c481; }

/* "This phase, in practice" - action-first gut summary on Food (2 Jul 2026).
   Replaced the full report dump, which now lives in Metrics > Gut. Same
   gold-rail treatment as .gut-prio so it reads as the coaching voice. */
.gut-phase-card {
  background: linear-gradient(90deg, rgba(212,178,106,0.10), rgba(212,178,106,0.00) 65%);
  border-left: 2px solid #D4B26A;
  border-radius: 4px;
  padding: 16px 18px;
  margin-bottom: 24px;
}
.gpc-eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #D4B26A;
  margin-bottom: 4px;
}
.gpc-name { font-size: 15px; color: #F4DDA8; font-weight: 500; }
.gpc-success { font-size: 13px; color: rgba(241,238,232,0.65); line-height: 1.5; margin-top: 4px; }
.gpc-actions { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.gpc-action { font-size: 13px; color: #F1EEE8; line-height: 1.5; padding-left: 14px; position: relative; }
.gpc-action::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: #D4B26A; }
.gpc-link { display: inline-block; margin-top: 12px; font-size: 12px; color: rgba(241,238,232,0.55); cursor: pointer; text-decoration: none; }
.gpc-link:hover { color: #D4B26A; }

/* 2 Jul 2026 - full-width quiet "View gut data" button at the bottom of the
   Food tab. Mirrors Home's "View all metrics" CTA (.hv3-metrics-cta). */
.fuel-gut-cta {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; margin-top: 20px;
  background: #26302f; border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px; padding: 13px 16px;
  cursor: pointer; font-family: inherit; text-align: left;
  transition: border-color 140ms ease;
}
.fuel-gut-cta:hover { border-color: rgba(212,178,106,0.35); }
.fuel-gut-cta-txt { display: flex; flex-direction: column; gap: 1px; }
.fuel-gut-cta-title { color: #EEF3F1; font-size: 15px; font-weight: 600; }
.fuel-gut-cta-sub { color: #8F9A98; font-size: 12px; }
.fuel-gut-cta-arrow { color: #D4B26A; font-size: 17px; line-height: 1; }

@media (max-width: 720px) {
  .nutr-tab { padding: 9px 12px; font-size: 12px; }
  .nutr-ov-grid { grid-template-columns: 1fr; }
}

/* Pills (re-skinned for Performance) */
.perf-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}
.perf-pill-gold   { background: rgba(212,178,106,0.14); color: #D4B26A; }
.perf-pill-amber  { background: rgba(212,178,106,0.14); color: #D4B26A; } /* mapped to brand gold 31 May PM */
.perf-pill-green  { background: rgba(79,209,138,0.14);  color: #4fd18a; }
.perf-pill-red    { background: rgba(232,85,110,0.14);  color: #e8556e; }
.perf-pill-blue   { background: rgba(95,179,232,0.14);  color: #5fb3e8; }
.perf-pill-purple { background: rgba(139,123,232,0.14); color: #8b7be8; }
.perf-pill-muted  { background: rgba(255,255,255,0.05); color: rgba(241,238,232,0.55); }

/* Pill-as-button affordance - only when actually clickable (button element). */
button.perf-pill {
  border: 0;
  font-family: inherit;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
button.perf-pill:hover { filter: brightness(1.15); }
button.perf-pill:focus-visible { outline: 1px solid rgba(212,178,106,0.6); outline-offset: 2px; }

/* Section heads */
.perf-section { margin-bottom: 28px; }
.perf-section-head {
  font-size: 12px;
  color: rgba(241,238,232,0.55);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
  margin: 0 0 14px;
}

/* Generic card */
.perf-card {
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(241,238,232,0.08);
  border-radius: 12px;
  padding: 4px 20px;
}

/* Phase hero */
/* Canonical "selected/current" treatment - gold left rail + 90deg gradient.
   Mirrors the selected-state visual contract proven on My Stack. Tokens:
   gold default (#D4B26A). Apply via .perf-selected-rail or as a per-component
   variant (e.g. .perf-phase-hero, .perf-microcycle-current). */
.perf-phase-hero {
  background:
    linear-gradient(90deg, rgba(212,178,106,0.10) 0%, rgba(212,178,106,0.02) 35%, transparent 65%),
    rgba(255,255,255,0.025);
  border: 1px solid rgba(241,238,232,0.08);
  border-left: 3px solid #D4B26A;
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.perf-phase-hero-empty {
  background: var(--atlas-surface-nested);
  border-left-color: rgba(241,238,232,0.15);
}
.perf-phase-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.perf-phase-main { flex: 1; min-width: 0; }
.perf-phase-meta {
  font-size: 11px;
  color: rgba(241,238,232,0.5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.perf-phase-title {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: var(--ink, #f1eee8);
}
.perf-phase-sub {
  font-size: 14px;
  color: rgba(241,238,232,0.7);
}
.perf-phase-intent {
  margin-top: 10px;
  font-size: 13px;
  color: rgba(241,238,232,0.6);
  line-height: 1.5;
  font-style: italic;
}
/* R7 (21 Jul 2026) - 'About this phase' expandable (client-facing Phase
   Brief on the phase hero). Native details/summary; quiet gold toggle. */
.perf-phase-brief { margin-top: 12px; }
.perf-phase-brief summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--atlas-gold, #D4B26A);
  -webkit-tap-highlight-color: transparent;
}
.perf-phase-brief summary::-webkit-details-marker { display: none; }
.perf-phase-brief summary::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 0.15s ease;
}
.perf-phase-brief[open] summary::after { transform: rotate(-135deg) translateY(1px); }
.perf-phase-brief p {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(241,238,232,0.75);
  max-width: 640px;
}
.perf-phase-aside { text-align: right; flex-shrink: 0; }
/* 2 Jul 2026 PM - .perf-phase-next-label/-name/-date removed with the hero's
   stacked next-phase block; a single quiet line (.perf-phase-next-quiet,
   below the progress meta) replaced it. */
.perf-phase-progress { margin-top: 22px; }
.perf-progress-bar {
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}
.perf-progress-fill {
  height: 100%;
  background: #D4B26A;
  border-radius: 999px;
  transition: width 0.4s;
}
.perf-progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(241,238,232,0.45);
  gap: 12px;
}

/* KPI grid */
.perf-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.perf-kpi-card {
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(241,238,232,0.08);
  border-radius: 12px;
  padding: 18px;
}
.perf-kpi-label {
  font-size: 11px;
  color: rgba(241,238,232,0.5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.perf-kpi-value {
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}
.perf-kpi-unit {
  font-size: 13px;
  color: rgba(241,238,232,0.55);
  margin-left: 3px;
  font-weight: 400;
}
.perf-kpi-delta {
  font-size: 12px;
  margin-top: 8px;
}
.perf-kpi-sub {
  font-size: 11px;
  margin-top: 6px;
  color: rgba(241,238,232,0.45);
  min-height: 14px;
}
.perf-delta-up   { color: #4fd18a; }
.perf-delta-down { color: #e8556e; }
.perf-delta-flat { color: rgba(241,238,232,0.45); }

/* Goals - client-interactive cards (2 Jul 2026 rebuild). Quiet status text
   replaces the red OVERDUE pill; one Edit expander per card replaces the
   Mark complete / Extend deadline / Drop button row. */
/* 23 Jul 2026 (Harry) - each goal is its own card (like the Habits list),
   not rows sharing one big card. */
.perf-goals-list { display: flex; flex-direction: column; gap: 12px; }
.perf-goal-row {
  padding: 16px 18px;
  background: var(--atlas-surface-card);
  border: 1px solid var(--atlas-border);
  border-radius: 16px;
}
.perf-goal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.perf-goal-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.perf-goal-title {
  font-size: 14px;
  font-weight: 500;
}
.perf-goal-cat {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(241,238,232,0.5);
  background: rgba(255,255,255,0.05);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.perf-goal-edit {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: rgba(241,238,232,0.6);
  background: transparent;
  border: 1px solid rgba(241,238,232,0.14);
  border-radius: 8px;
  padding: 8px 16px;
  min-height: 36px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 140ms ease, border-color 140ms ease;
}
.perf-goal-edit:hover {
  color: #f1eee8;
  border-color: rgba(241,238,232,0.28);
}
.perf-goal-pct {
  font-size: 13px;
  color: rgba(241,238,232,0.7);
  font-weight: 500;
}
.perf-goal-bar {
  height: 3px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  margin: 6px 0;
  overflow: hidden;
}
.perf-goal-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s;
}
.perf-goal-fill-quiet { background: rgba(212,178,106,0.8); }
.perf-goal-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: rgba(241,238,232,0.55);
  margin-top: 6px;
}
.perf-goal-sep { color: rgba(241,238,232,0.3); }
.perf-goal-state-muted { color: rgba(241,238,232,0.45); }
.perf-goal-state-gold  { color: rgba(212,178,106,0.85); }
.perf-goal-state-green { color: rgba(79,209,138,0.75); }

/* Inline editor (expanded via the Edit button) + add-goal form.
   11 Jul 2026 (RESTYLE-BRIEF-17) - uniform vertical rhythm: the container owns
   the spacing (flex gap), so every field sits on the same grid and the ad-hoc
   per-child margins are zeroed below. */
.perf-goal-editor {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(241,238,232,0.06);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.perf-goal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.perf-goal-field > span {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(241,238,232,0.5);
}
.perf-goal-field input,
.perf-goal-field select {
  font-family: inherit;
  font-size: 16px; /* >=16px avoids iOS focus zoom */
  color: var(--ink, #f1eee8);
  background: var(--atlas-surface-card);
  border: 1px solid rgba(241,238,232,0.12);
  border-radius: 8px;
  padding: 10px 12px;
  min-height: 44px;
  width: 100%;
  box-sizing: border-box;
}
.perf-goal-field input:focus,
.perf-goal-field select:focus {
  border-color: rgba(212,178,106,0.5);
  outline: none;
}
.perf-goal-field-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 0; /* container gap owns vertical spacing now */
  align-items: end;
}
.perf-goal-msg {
  font-size: 12px;
  color: #D4B26A;
  margin-top: 0;
}
.perf-goal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.perf-goal-actions-spacer { flex: 1; }
/* 23 Jul 2026 (Harry) - solid block gold (matches the travel Save button /
   .atlas-btn-primary), not a gold-tint outline. */
.perf-goal-save {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #141008;
  background: var(--atlas-gold-grad, #d4b26a);
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  min-height: 44px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(212,178,106,0.2), inset 0 1px 0 rgba(255,255,255,0.3);
  transition: background 140ms ease;
}
.perf-goal-save:hover {
  background: #e0c481;
}
.perf-goal-save:disabled { opacity: 0.5; cursor: default; }
.perf-goal-quiet {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: rgba(241,238,232,0.6);
  background: transparent;
  border: 1px solid rgba(241,238,232,0.12);
  border-radius: 8px;
  padding: 10px 14px;
  min-height: 44px;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease;
}
.perf-goal-quiet:hover {
  color: #f1eee8;
  border-color: rgba(241,238,232,0.25);
}
.perf-goal-quiet:disabled { opacity: 0.5; cursor: default; }
.perf-goal-danger { color: rgba(232,85,110,0.85); border-color: rgba(232,85,110,0.3); }
.perf-goal-danger:hover { color: #e8556e; border-color: rgba(232,85,110,0.5); }
.perf-goal-remove-confirm {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: 13px;
  color: rgba(241,238,232,0.7);
}
.perf-goal-add {
  margin-top: 10px;
  padding: 18px;
  border: 1px dashed rgba(241,238,232,0.18);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (max-width: 600px) {
  .perf-goal-field-row { grid-template-columns: 1fr; }
  .perf-goal-edit { min-height: 44px; padding: 10px 18px; }
  .perf-goal-actions-spacer { display: none; }
  .perf-goal-actions > button { flex: 1 1 calc(50% - 8px); }
}

/* Program timeline */
.perf-timeline {
  display: grid;
  gap: 6px;
  margin: 6px 0;
}
.perf-timeline-phase {
  background: var(--atlas-surface-nested);
  border-radius: 8px;
  padding: 12px 14px;
  border: 1px solid rgba(241,238,232,0.08);
}
.perf-timeline-phase-done    { opacity: 0.55; }
.perf-timeline-phase-current {
  border-color: rgba(212,178,106,0.18);
  border-left: 3px solid #D4B26A;
  background:
    linear-gradient(90deg, rgba(212,178,106,0.12) 0%, rgba(212,178,106,0.02) 40%, transparent 70%),
    rgba(255,255,255,0.025);
  padding-left: 13px; /* compensate for heavier left border */
}
.perf-timeline-phase-future  { opacity: 0.72; }
.perf-timeline-num {
  font-size: 10px;
  color: rgba(241,238,232,0.45);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.perf-timeline-phase-current .perf-timeline-num { color: #D4B26A; }
.perf-timeline-name {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
}
.perf-timeline-dates {
  font-size: 11px;
  color: rgba(241,238,232,0.45);
  margin-bottom: 8px;
}
.perf-timeline-tag {
  font-size: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  color: rgba(241,238,232,0.65);
  display: inline-block;
}
.perf-timeline-phase-current .perf-timeline-tag {
  background: rgba(212,178,106,0.16);
  color: #D4B26A;
}

/* Empty / stub states */
.perf-empty-card {
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(241,238,232,0.08);
  border-radius: 12px;
  padding: 22px 24px;
  text-align: center;
}
.perf-empty-card p { margin: 0 0 6px; font-size: 14px; }
.perf-empty-sub { color: rgba(241,238,232,0.55); font-size: 12px; }

/* ── Recent activity feed on Performance Overview (5 Jun 2026) ───────── */
.perf-recent-header { display: flex; justify-content: space-between; align-items: baseline; margin: 0 4px 10px; }
.perf-recent-header h3 { margin: 0; font-size: 13px; font-weight: 500; color: rgba(241,238,232,0.78); text-transform: uppercase; letter-spacing: 0.06em; }
.perf-recent-meta { font-size: 11px; color: rgba(241,238,232,0.45); }
.perf-recent-day { margin-bottom: 12px; }
.perf-recent-day:last-child { margin-bottom: 0; }
.perf-recent-day-label { font-size: 11px; color: rgba(241,238,232,0.45); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.perf-recent-row { display: grid; grid-template-columns: 14px 50px 1fr auto; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.perf-recent-row:last-child { border-bottom: 0; }
.perf-recent-glyph { font-size: 14px; line-height: 1; }
.perf-recent-glyph.is-session { color: #6CD693; }
.perf-recent-glyph.is-activity { color: rgba(255,255,255,0.55); }
.perf-recent-time { font-size: 11px; color: rgba(241,238,232,0.45); font-variant-numeric: tabular-nums; }
.perf-recent-name { font-size: 13px; color: #e5e7eb; }
.perf-recent-sub { font-size: 11px; color: rgba(241,238,232,0.55); margin-top: 2px; }
.perf-recent-src { font-size: 10px; color: rgba(241,238,232,0.45); text-transform: uppercase; letter-spacing: 0.06em; }

/* ── Recovery sub-tab (5 Jun 2026) ───────────────────────────────────── */
.perf-rec-header { margin-bottom: 16px; }
.perf-rec-header h2 { margin: 0; font-size: 18px; font-weight: 500; color: #f1eee8; }
.perf-rec-header-sub { font-size: 12px; color: rgba(241,238,232,0.55); margin-top: 4px; }
/* 4 Jul 2026 - 4 → 3 tiles (Streak tile cut, §14 no-gamification) */
.perf-rec-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.perf-rec-tile { background: var(--atlas-surface-card); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 12px 14px; }
.perf-rec-tile-label { font-size: 10px; color: rgba(241,238,232,0.55); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.perf-rec-tile-value { font-size: 22px; font-weight: 500; color: #f1eee8; line-height: 1.1; }
.perf-rec-tile-sub { font-size: 11px; color: rgba(241,238,232,0.45); margin-top: 2px; }
.perf-rec-card-label { font-size: 11px; color: rgba(241,238,232,0.55); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; margin-bottom: 12px; }
.perf-rec-bytype { padding: 14px 16px; margin-bottom: 14px; }
.perf-rec-bytype-row { display: grid; grid-template-columns: 1fr 50px 70px 1fr; gap: 10px; align-items: center; padding: 6px 0; font-size: 13px; }
.perf-rec-bytype-name { color: #e5e7eb; }
.perf-rec-bytype-count, .perf-rec-bytype-time { color: rgba(241,238,232,0.55); text-align: right; font-variant-numeric: tabular-nums; }
.perf-rec-bytype-bar { height: 6px; background: rgba(74,157,107,0.18); border-radius: 0; position: relative; overflow: hidden; }
.perf-rec-bytype-bar span { position: absolute; left: 0; top: 0; height: 100%; background: #6CD693; }
.perf-rec-list { padding: 14px 16px; }
.perf-rec-row { display: grid; grid-template-columns: 90px 1fr auto; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.05); cursor: pointer; }
.perf-rec-row:last-child { border-bottom: 0; }
.perf-rec-row:hover { background: rgba(74,157,107,0.04); }
.perf-rec-row-when { font-size: 11px; color: rgba(241,238,232,0.45); font-variant-numeric: tabular-nums; }
.perf-rec-row-name { font-size: 13px; color: #e5e7eb; }
.perf-rec-row-sub { font-size: 11px; color: rgba(241,238,232,0.55); margin-top: 2px; }
.perf-rec-row-src { font-size: 10px; color: rgba(241,238,232,0.45); text-transform: uppercase; letter-spacing: 0.06em; }
@media (max-width: 720px) {
  .perf-rec-tiles { grid-template-columns: repeat(2, 1fr); }
  /* 3 tiles at phone widths: 2 up top, third (Most used - longest value)
     full-width beneath - no orphan half-tile at 390px. */
  .perf-rec-tiles .perf-rec-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .perf-rec-bytype-row { grid-template-columns: 1fr 40px 60px; }
  .perf-rec-bytype-bar { display: none; }
}

/* ── Home recent activity tile (5 Jun 2026) ──────────────────────────── */
.hv2-recent-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.hv2-recent-title { font-size: 11px; color: rgba(241,238,232,0.55); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }
.hv2-recent-meta { font-size: 11px; color: rgba(241,238,232,0.45); }
.hv2-recent-row { display: grid; grid-template-columns: 14px 84px 1fr auto; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.hv2-recent-row:last-of-type { border-bottom: 0; }
.hv2-recent-glyph { font-size: 13px; line-height: 1; }
.hv2-recent-glyph.is-session { color: #6CD693; }
.hv2-recent-glyph.is-activity { color: rgba(255,255,255,0.55); }
.hv2-recent-when { font-size: 11px; color: rgba(241,238,232,0.45); font-variant-numeric: tabular-nums; }
.hv2-recent-name { font-size: 13px; color: #e5e7eb; }
.hv2-recent-src { font-size: 10px; color: rgba(241,238,232,0.45); text-transform: uppercase; letter-spacing: 0.06em; }
.hv2-recent-foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.06); text-align: right; }
.hv2-recent-link { font-size: 11px; color: #F4DDA8; letter-spacing: 0.3px; text-decoration: none; }
.hv2-recent-link:hover { color: #fff; }
.hv2-recent-empty { font-size: 12px; color: rgba(241,238,232,0.45); padding: 14px 0; text-align: center; }

/* Recent activity feeds - no strikethrough inheritance from other surfaces */
.perf-recent-name, .perf-recent-sub, .hv2-recent-name, .perf-rec-row-name, .perf-rec-row-sub {
  text-decoration: none !important;
}
.perf-recent-row, .perf-rec-row, .hv2-recent-row { cursor: pointer; }
/* 6 Jun 2026 - completed-session rows in the Recent Activity feed are
   now clickable (they route to the post-session review via the shared
   data-perf-launch-session handler). The previous "session rows are
   non-clickable" rule was overruled when Harry asked for click-to-
   review across the whole feed. Old `[data-recent-kind="session"]`
   override removed - both session and activity rows now share the
   same hover treatment. */
.perf-recent-row:hover, .hv2-recent-row:hover { background: rgba(212,178,106,0.06); }

/* ── Wearable activity detail modal (5 Jun 2026) ─────────────────────── */
.wa-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 9999;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: waFade 140ms ease;
}
@keyframes waFade { from { opacity: 0; } to { opacity: 1; } }
.wa-modal {
  background: #243333; border: 1px solid rgba(212,178,106,0.30); border-radius: 16px;
  padding: 22px 24px; max-width: 540px; width: 100%; max-height: 90vh; overflow-y: auto;
  color: #e5e7eb; box-shadow: 0 24px 48px rgba(0,0,0,0.4);
}
.wa-modal-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; gap: 12px; }
.wa-modal-eyebrow { font-size: 10px; color: #D4B26A; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.wa-modal-title { font-size: 22px; font-weight: 500; color: #f1eee8; line-height: 1.2; }
.wa-modal-sub { font-size: 12px; color: rgba(241,238,232,0.55); margin-top: 4px; }
.wa-modal-close { background: transparent; border: 0; color: rgba(241,238,232,0.55); font-size: 22px; cursor: pointer; padding: 0 6px; line-height: 1; }
.wa-modal-close:hover { color: #fff; }
.wa-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.wa-tile { background: var(--atlas-surface-card); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 12px 14px; }
.wa-tile-label { font-size: 10px; color: rgba(241,238,232,0.55); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.wa-tile-value { font-size: 20px; font-weight: 500; color: #f1eee8; line-height: 1.1; }
.wa-unit { font-size: 11px; color: rgba(241,238,232,0.55); font-weight: 400; }
.wa-missing { color: rgba(241,238,232,0.35); font-weight: 400; }
.wa-card-label { font-size: 11px; color: rgba(241,238,232,0.55); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; margin-bottom: 12px; }
.wa-zones { background: var(--atlas-surface-card); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.wa-zone-row { display: grid; grid-template-columns: 60px 1fr 40px; gap: 10px; align-items: center; padding: 5px 0; font-size: 12px; }
.wa-zone-name { color: rgba(241,238,232,0.55); }
.wa-zone-bar { height: 8px; background: var(--atlas-surface-card); border-radius: 0; position: relative; overflow: hidden; }
.wa-zone-bar span { position: absolute; left: 0; top: 0; height: 100%; }
.wa-zone-val { color: rgba(241,238,232,0.55); text-align: right; font-variant-numeric: tabular-nums; }
.wa-matched {
  background: linear-gradient(90deg, rgba(212,178,106,0.10), rgba(255,255,255,0.05) 60%);
  border-left: 2px solid #D4B26A; padding: 12px 14px; border-radius: 0;
  margin-bottom: 14px;
}
.wa-matched-label { font-size: 10px; color: #D4B26A; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.wa-matched-body { font-size: 13px; color: #F4DDA8; }
.wa-matched-chip { display: inline-block; padding: 3px 9px; border-radius: 999px; background: rgba(212,178,106,0.15); border: 1px solid rgba(212,178,106,0.35); color: #F4DDA8; font-size: 13px; }

/* 5 Jun 2026 PM - auto-link chip on activity rows (Recovery list,
   Conditioning wearable cardio list, Overview rolling feed). Gold accent,
   small, sits below the sub-line. */
.perf-rec-row-matched, .perf-recent-matched {
  margin-top: 4px;
  font-size: 11px;
  color: #D4B26A;
  letter-spacing: 0.2px;
}

/* 6 Jun 2026 v2 - paired row in the Overview rolling feed. Atlas + wearable
   share one body line; wearable telemetry collapses into a compact right-
   aligned chip. Subtle gold-rail on the left signals "matched pair" so the
   eye reads it as a single unit. Previous two-column grid wasted horizontal
   space and confused the visual hierarchy. */
.perf-recent-row-pair {
  padding-left: 10px;
  margin-left: -10px;
  border-left: 2px solid rgba(212,178,106,0.45);
  background: linear-gradient(90deg, rgba(212,178,106,0.04), transparent 40%);
}
.perf-recent-row-pair .perf-recent-glyph.is-pair {
  color: #D4B26A;
  font-size: 11px;
}
.perf-recent-pair-main {
  padding: 2px 6px;
  margin: -2px -6px;
  border-radius: 8px;
  cursor: pointer;
}
.perf-recent-pair-main:hover {
  background: rgba(212,178,106,0.07);
}
.perf-recent-pair-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  padding: 4px 10px;
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.perf-recent-pair-chip:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
}
.perf-recent-pair-chip-provider {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(241,238,232,0.5);
}
.perf-recent-pair-chip-meta {
  font-size: 12px;
  color: rgba(241,238,232,0.78);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
  .perf-recent-pair-chip {
    align-items: flex-start;
    margin-top: 4px;
  }
  .perf-recent-row-pair {
    grid-template-columns: 14px 50px 1fr;
  }
  .perf-recent-pair-chip {
    grid-column: 2 / -1;
  }
}

/* 6 Jun 2026 - Source confirmation badges + dismiss button. Auto-Detected
   rows get an amber inline pill with a dismiss affordance. Dismissed rows
   stay visible but fade so the user sees what they actioned. */
.perf-rec-row-dismiss {
  display: inline-block; margin-top: 6px;
  background: rgba(239,173,39,0.10);
  border: 1px solid rgba(239,173,39,0.30);
  color: #efad27;
  border-radius: 99px;
  padding: 3px 10px;
  font-size: 11px; letter-spacing: 0.3px;
  cursor: pointer;
  font-family: inherit;
}
.perf-rec-row-dismiss:hover:not(:disabled) {
  background: rgba(239,173,39,0.18);
  color: #f4c155;
}
.perf-rec-row-dismiss:disabled {
  opacity: 0.55; cursor: default;
}
.perf-rec-row-srctag {
  display: inline-block; margin-top: 4px;
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(241,238,232,0.45);
}
.perf-rec-row-srctag-manual { color: #6CD693; }
.perf-rec-row-dismissed {
  opacity: 0.35;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(241,238,232,0.3);
}
.wa-notes { background: var(--atlas-surface-card); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 14px 16px; font-size: 13px; color: rgba(241,238,232,0.78); line-height: 1.55; }
@media (max-width: 540px) {
  .wa-tiles { grid-template-columns: repeat(2, 1fr); }
  .wa-modal { padding: 18px 18px; }
  .wa-modal-title { font-size: 19px; }
}
/* 2 Jul 2026 - 8 → 4 sub-tab cut. .perf-stub styles removed with the last
   stub tabs. New quiet affordances below: the "Phase plan" expander on the
   Overview phase card, its foldout container, and the single "View metrics"
   link that replaced the body/recovery KPI row. */
.perf-phase-plan-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #F4DDA8;
  background: var(--atlas-surface-card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 6px 12px;
  margin-top: 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.perf-phase-plan-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.16);
}
.perf-phase-plan { margin: 16px 0 28px; }
.perf-metrics-link { text-align: right; margin: -16px 0 28px; }
.perf-metrics-link a {
  font-size: 12px;
  color: rgba(241,238,232,0.55);
  letter-spacing: 0.3px;
  text-decoration: none;
}
.perf-metrics-link a:hover { color: #F4DDA8; }

/* 2 Jul 2026 PM - "Coming up" list. Remaining sessions this week, directly
   under the Today card. Quiet rows (day · type dot · name), each expanding
   inline to the session's blueprint prescription. Row height ≥44px. */
.perf-comingup { margin-bottom: 24px; }
.perf-comingup-headline {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a9595;
  padding: 0 4px 8px;
}
.perf-comingup-item {
  border-radius: 12px;
  border: 1px solid rgba(241,238,232,0.07);
  background: var(--atlas-surface-nested);
  margin-bottom: 6px;
}
.perf-comingup-item[data-open="true"] { background: rgba(0,0,0,0.18); }
.perf-comingup-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms ease;
}
.perf-comingup-row:hover { background: var(--atlas-surface-nested); }
.perf-comingup-row:active { background: rgba(255,255,255,0.05); }
.perf-comingup-day {
  width: 34px;
  flex-shrink: 0;
  font-size: 10px;
  color: rgba(241,238,232,0.45);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.perf-comingup-dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
}
.perf-comingup-dot.is-lift { background: #D4B26A; }
.perf-comingup-dot.is-cond { background: #8fae7e; }
.perf-comingup-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink, #f1eee8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.perf-comingup-chevron {
  font-size: 12px;
  color: rgba(241,238,232,0.4);
  transition: transform 160ms ease;
}
.perf-comingup-item[data-open="true"] .perf-comingup-chevron {
  transform: rotate(180deg);
  color: #D4B26A;
}
.perf-comingup-body { padding: 0 14px 10px; }
.perf-comingup-rest,
.perf-comingup-empty {
  font-size: 12px;
  color: rgba(241,238,232,0.45);
  font-style: italic;
  padding: 6px 4px;
  line-height: 1.5;
}

/* Blueprint embed - a phase-session row re-hosted inside a Coming-up
   expansion or the week-strip preview sheet. The host names the session,
   so the row's own header is hidden and the body is forced open; Start
   CTAs are suppressed (previews are for browsing - the Today card and the
   sheet's own button carry the start affordance). Video links + Ask Atlas
   stay live. */
.perf-bp-embed .perf-sess-row { background: transparent; margin: 0; }
.perf-bp-embed .perf-sess-row[data-open="true"] { background: transparent; padding-bottom: 0; }
.perf-bp-embed .perf-sess-row-head { display: none; }
.perf-bp-embed .perf-sess-row-body { display: block; padding: 2px 0 0; }
.perf-bp-embed .perf-sess-start-wrap,
.perf-bp-embed .perf-sess-start-wrap-ghost { display: none; }
.perf-bp-embed .perf-sess-row-ex { flex-wrap: wrap; }

/* 3 Jul 2026 - Today card auto-expanded. The gold header row
   (.perf-today-cta, styled in atlas-tabbar.css) becomes the top half of
   one card; the attached detail panel below carries the "Today's intent"
   expectation block, the inline exercise list (shared blueprint rows via
   .perf-bp-embed), and the quiet "View all sessions" link. */
.perf-today-card { margin-bottom: 14px; }
.perf-today-card .perf-today-cta {
  margin-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.perf-today-detail {
  background: #354646;
  border: 0.5px solid rgba(212, 178, 106, 0.35);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  padding: 12px 16px 6px;
}
.perf-today-expect {
  padding-bottom: 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(241, 238, 232, 0.07);
}
.perf-today-expect-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #d4b26a;
  margin-bottom: 6px;
}
.perf-today-expect-line {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(241, 238, 232, 0.78);
}
.perf-today-expect-line + .perf-today-expect-line { margin-top: 4px; }
.perf-today-exlist-loading {
  font-size: 12px;
  color: rgba(241, 238, 232, 0.45);
  padding: 8px 0;
}
.perf-today-viewall {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.3px;
  color: rgba(241, 238, 232, 0.55);
  text-decoration: none;
  padding: 9px 0 6px;
  border-top: 1px solid rgba(241, 238, 232, 0.07);
  margin-top: 6px;
}
.perf-today-viewall:hover { color: #d4b26a; }
.perf-today-detail--slim { padding-top: 0; }
.perf-today-detail--slim .perf-today-viewall {
  border-top: 0;
  margin-top: 0;
  padding-top: 8px;
}
@media (max-width: 480px) {
  .perf-today-detail { padding: 10px 12px 4px; }
}

/* 2 Jul 2026 PM - phase-hero block bar. One segmented bar, segment width ∝
   block weeks, per-week ticks, done blocks dimmed, current block filled to
   the current week. Labels underneath share the same flex ratios so they
   align with their segments. */
.perf-phase-blocks { margin-bottom: 8px; }
.perf-phase-blocks-bar {
  display: flex;
  gap: 3px;
  height: 6px;
}
.perf-phase-blockseg {
  position: relative;
  min-width: 0;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  overflow: hidden;
}
.perf-phase-blockseg-fill {
  height: 100%;
  background: #D4B26A;
  border-radius: 4px;
  transition: width 0.4s;
}
.perf-phase-blockseg.is-done .perf-phase-blockseg-fill { background: rgba(212,178,106,0.4); }
.perf-phase-blockseg-ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.perf-phase-blocks-labels {
  display: flex;
  gap: 3px;
  margin: 6px 0 10px;
}
.perf-phase-blocklabel {
  min-width: 0;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: rgba(241,238,232,0.4);
}
.perf-phase-blocklabel.is-current { color: #D4B26A; }
.perf-phase-blocklabel-name {
  display: block;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.perf-phase-blocklabel-weeks {
  display: block;
  margin-top: 1px;
  color: rgba(241,238,232,0.3);
  font-variant-numeric: tabular-nums;
}
.perf-phase-blocklabel.is-current .perf-phase-blocklabel-weeks { color: rgba(212,178,106,0.7); }
.perf-phase-next-quiet {
  margin-top: 10px;
  font-size: 12px;
  color: rgba(241,238,232,0.55);
}
@media (max-width: 480px) {
  .perf-comingup-row { padding: 10px 12px; }
  .perf-comingup-body { padding: 0 12px 10px; }
  .perf-comingup-day { width: 30px; }
  .perf-phase-blocklabel { font-size: 9px; }
  .perf-bp-embed .perf-sess-row-ex-meta { white-space: normal; }
}

/* Mobile breakpoints */
@media (max-width: 768px) {
  .perf-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .perf-kpi-card { padding: 14px; }
  .perf-kpi-value { font-size: 24px; }
  .perf-phase-row { flex-direction: column; gap: 14px; }
  .perf-phase-aside { text-align: left; }
  .perf-phase-title { font-size: 22px; }
  .atlas-perf-title { font-size: 18px; }
  .perf-tab { padding: 9px 12px; font-size: 12px; }
  .perf-section { margin-bottom: 22px; }
  .perf-timeline { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 480px) {
  .perf-kpi-grid { grid-template-columns: 1fr; }
  .perf-timeline { grid-template-columns: repeat(2, 1fr) !important; }
  .perf-phase-hero { padding: 18px 16px; }
  .perf-card { padding: 4px 14px; }
}

/* Phase detail tab */
.perf-phase-detail-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  align-items: start;
}
.perf-phase-list {
  position: sticky;
  top: 16px;
}
.perf-phase-list-item {
  padding: 12px 14px;
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(241,238,232,0.08);
  border-radius: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.perf-phase-list-item:hover { border-color: rgba(241,238,232,0.16); }
.perf-phase-list-done    { opacity: 0.55; }
.perf-phase-list-future  { opacity: 0.78; }
/* 6 Jun 2026 - concurrent-phase support. Reserve the gold treatment for
   the SELECTED pill only (the one whose detail is in the right pane).
   Unselected pills - whether CURRENT or UPCOMING - get a neutral teal
   so the visual hierarchy reads cleanly: one bright pill, others muted.
   Previous gold-on-every-Active rendering made it impossible to tell
   which phase the right pane was anchored to.
   The "CURRENT" / "UPCOMING" status text on the pill itself signals tier
   without needing a colour cue. */
.perf-phase-list-active {
  border-color: rgba(255,255,255,0.10);
  background: var(--atlas-surface-nested);
}
.perf-phase-list-num {
  font-size: 10px;
  color: rgba(241,238,232,0.45);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.perf-phase-list-active .perf-phase-list-num { color: rgba(241,238,232,0.62); }
.perf-phase-list-selected {
  border-color: rgba(212,178,106,0.55);
  border-left: 3px solid #d4b26a;
  box-shadow: inset 0 0 0 1px rgba(212,178,106,0.20);
  background:
    linear-gradient(90deg, rgba(212,178,106,0.22) 0%, rgba(212,178,106,0.06) 50%, transparent 90%),
    rgba(255,255,255,0.035);
  padding-left: 13px;
}
.perf-phase-list-selected .perf-phase-list-num { color: #e8c97a; }
.perf-phase-list-selected .perf-phase-list-name { color: #f4e2b0; font-weight: 600; }

/* 6 Jun 2026 - preview-only banner. Shown above the phase hero when the
   client is browsing an upcoming-but-Active phase. Sets the read-only
   expectation (no Start CTA below) without dimming the entire pane. */
.perf-phase-preview-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 14px;
  background:
    linear-gradient(90deg, rgba(120,160,180,0.16), rgba(120,160,180,0.04));
  border: 1px solid rgba(140,180,200,0.28);
  border-left: 3px solid #8FB4C8;
  border-radius: 12px;
  font-size: 13px;
  color: rgba(241,238,232,0.85);
  line-height: 1.45;
}
.perf-phase-preview-banner strong { color: #BFD7E3; font-weight: 600; }
.perf-phase-preview-icon { font-size: 18px; flex-shrink: 0; }
.perf-phase-list-name {
  font-size: 13px;
  font-weight: 500;
  margin: 4px 0 2px;
}
.perf-phase-list-dates {
  font-size: 11px;
  color: rgba(241,238,232,0.45);
}

.perf-phase-aims {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(241,238,232,0.08);
  font-size: 13px;
  color: rgba(241,238,232,0.7);
  line-height: 1.6;
}

.perf-microcycle-grid {
  display: grid;
  gap: 10px;
}
.perf-microcycle-card {
  padding: 14px;
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(241,238,232,0.08);
  border-radius: 12px;
}
.perf-microcycle-done    { opacity: 0.55; }
.perf-microcycle-future  { opacity: 0.72; }
.perf-microcycle-current {
  border-color: rgba(212,178,106,0.18);
  border-left: 3px solid #D4B26A;
  background:
    linear-gradient(90deg, rgba(212,178,106,0.12) 0%, rgba(212,178,106,0.02) 40%, transparent 70%),
    rgba(255,255,255,0.025);
  padding-left: 13px; /* compensate for the heavier left border */
}
.perf-microcycle-meta {
  font-size: 10px;
  color: rgba(241,238,232,0.45);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.perf-microcycle-current .perf-microcycle-meta { color: #D4B26A; }
.perf-microcycle-label {
  font-size: 14px;
  font-weight: 500;
  margin: 6px 0 4px;
}
.perf-microcycle-intent {
  font-size: 12px;
  color: rgba(241,238,232,0.55);
  line-height: 1.5;
  font-style: italic;
}

/* Phase tab v2 (31 May 2026 evening) - day-grouped session list pattern.
   Matches the upcoming-phase preview look: per-day rows with day chip on
   the left, session name on the right, click to expand exercise list. */
.perf-sess-list {
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(241,238,232,0.08);
  border-radius: 12px;
  padding: 14px 8px 8px;
  margin-bottom: 22px;
}
.perf-sess-list-banner {
  padding: 0 12px 12px;
  border-bottom: 1px solid rgba(241,238,232,0.06);
  margin-bottom: 6px;
}
.perf-sess-list-eyebrow {
  font-size: 10px;
  color: rgba(212,178,106,0.85);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.perf-sess-list-eyebrow [data-perf-banner-label] {
  color: #D4B26A;
  font-weight: 600;
}
.perf-sess-list-intent {
  font-size: 13px;
  color: rgba(241,238,232,0.7);
  font-style: italic;
  line-height: 1.5;
  margin-top: 6px;
}
.perf-sess-list-notice {
  font-size: 11px;
  color: rgba(241,238,232,0.45);
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--atlas-surface-nested);
  border-left: 2px solid rgba(241,238,232,0.15);
  border-radius: 0 4px 4px 0;
  line-height: 1.5;
}
.perf-sess-row {
  border-radius: 8px;
  margin: 2px 0;
}
.perf-sess-row[data-open="true"] {
  background: rgba(0,0,0,0.18);
  padding-bottom: 8px;
}
.perf-sess-row-head {
  width: 100%;
  display: grid;
  grid-template-columns: 100px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms ease;
  border-radius: 8px;
}
.perf-sess-row-head:hover { background: var(--atlas-surface-nested); }
.perf-sess-row-day {
  font-size: 10px;
  color: rgba(241,238,232,0.45);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.perf-sess-row-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink, #f1eee8);
}
.perf-sess-row-chevron {
  font-size: 12px;
  color: rgba(241,238,232,0.4);
  transition: transform 160ms ease;
}
.perf-sess-row[data-open="true"] .perf-sess-row-chevron { transform: rotate(180deg); color: #D4B26A; }
.perf-sess-row-body {
  display: none;
  padding: 4px 14px 6px 128px; /* line up with session name column */
}
.perf-sess-row[data-open="true"] .perf-sess-row-body { display: block; }
.perf-sess-row-ex {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-size: 13px;
  color: rgba(241,238,232,0.85);
}
/* 2 Jul 2026 PM - name takes the flexible space so the meta + play-button
   columns anchor to the right edge at a consistent x on every row. */
.perf-sess-row-ex-name { font-weight: 400; flex: 1 1 auto; min-width: 0; }
.perf-sess-row-ex-meta {
  font-size: 11px;
  color: #D4B26A;
  white-space: nowrap;
}
.perf-sess-row-empty {
  font-size: 12px;
  color: rgba(241,238,232,0.45);
  padding: 8px 0;
  font-style: italic;
}
.perf-sess-warmup {
  font-size: 12px;
  color: rgba(241,238,232,0.65);
  padding: 6px 0 10px;
  line-height: 1.5;
}
.perf-sess-warmup-label {
  font-size: 10px;
  color: rgba(241,238,232,0.45);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 8px;
}
.perf-sess-ex-int {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  color: #D4B26A;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* 2 Jun 2026 - Stage 1. Exercise-order chip (A / B / C1 / C2 / D) renders
   to the left of each exercise name on Phase Detail. Replaces the SUPERSET
   intensifier tag - the shared letter on grouped lifts conveys the pair. */
.perf-ex-order {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: #D4B26A;
  background: rgba(201, 169, 106, 0.12);
  border: 1px solid rgba(201, 169, 106, 0.22);
  border-radius: 8px;
  padding: 2px 6px;
  margin-right: 10px;
  min-width: 26px;
  text-align: center;
  letter-spacing: 0.04em;
  vertical-align: 1px;
  font-variant-numeric: tabular-nums;
}
/* Today's session - day label tinted gold, auto-expanded by the renderer
   (data-open="true"). Stage 2 wires the bottom Start CTA into the
   in-session view. */
.perf-sess-row-today .perf-sess-row-day {
  color: #D4B26A;
  font-weight: 600;
}
.perf-sess-start-wrap {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.perf-sess-start-btn {
  display: block;
  width: 100%;
  background: #D4B26A;
  color: #1d1611;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 0;
  border-radius: 13px;
  padding: 14px;
  text-align: center;
  box-shadow: 0 8px 22px rgba(201, 169, 106, 0.22);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.perf-sess-start-btn:hover { box-shadow: 0 10px 28px rgba(201, 169, 106, 0.32); }
.perf-sess-start-btn:active { transform: scale(0.98); }
.perf-sess-start-sub {
  margin-top: 7px;
  text-align: center;
  font-size: 11px;
  color: rgba(241, 238, 232, 0.5);
  letter-spacing: 0.04em;
}
/* Ghost Start CTA - any non-today session row. Same affordance, lower
   visual weight so the dashboard doesn't shout with six gold buttons. */
.perf-sess-start-wrap-ghost {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
}
.perf-sess-start-btn-ghost {
  background: transparent;
  color: #D4B26A;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid rgba(201, 169, 106, 0.34);
  border-radius: 12px;
  padding: 9px 22px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.perf-sess-start-btn-ghost:hover {
  background: rgba(201, 169, 106, 0.08);
  border-color: rgba(201, 169, 106, 0.55);
}
.perf-sess-start-btn-ghost:active {
  transform: scale(0.98);
}
.perf-sess-notes {
  font-size: 12px;
  color: rgba(241,238,232,0.55);
  font-style: italic;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(241,238,232,0.08);
  line-height: 1.5;
}

/* Microcycle card - now a button, with a selected (pressed) state. */
.perf-microcycle-card {
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, transform 80ms ease;
}
.perf-microcycle-card:hover { border-color: rgba(212,178,106,0.32); }
.perf-microcycle-card:active { transform: scale(0.99); }
.perf-microcycle-card[aria-pressed="true"] {
  border-color: rgba(212,178,106,0.18);
  border-left: 3px solid #D4B26A;
  background:
    linear-gradient(90deg, rgba(212,178,106,0.18) 0%, rgba(212,178,106,0.04) 40%, transparent 70%),
    rgba(255,255,255,0.025);
  padding-left: 13px;
}
.perf-microcycle-card[aria-pressed="true"] .perf-microcycle-meta { color: #D4B26A; }

.perf-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.perf-summary-label {
  font-size: 10px;
  color: rgba(241,238,232,0.45);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.perf-summary-value {
  font-size: 15px;
  font-weight: 500;
  margin-top: 4px;
}

@media (max-width: 900px) {
  .perf-phase-detail-grid { grid-template-columns: 1fr; }
  .perf-phase-list { position: static; }
  .perf-microcycle-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .perf-summary-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Lifts tab */
.perf-lifts-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  gap: 12px;
  flex-wrap: wrap;
}
.perf-lifts-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.perf-lifts-grid {
  display: grid;
  /* 3-col grid for 5+ lifts gives a 3+2 rhythm instead of 2+2+1 orphan.
     Auto-fit flex on narrower viewports so cards reflow cleanly. */
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
}
@media (min-width: 1200px) {
  .perf-lifts-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Exercises tab (31 May 2026 evening) - per-exercise history drill */
.perf-ex-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 20px;
  align-items: start;
}
.perf-ex-picker {
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(241,238,232,0.08);
  border-radius: 12px;
  padding: 12px;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
}
.perf-ex-picker-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(241,238,232,0.06);
}
.perf-ex-search {
  width: 100%;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(241,238,232,0.1);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--ink, #f1eee8);
  font-family: inherit;
}
.perf-ex-search:focus { outline: 1px solid rgba(212,178,106,0.4); }
.perf-ex-filters { display: flex; flex-wrap: wrap; gap: 4px; }
.perf-ex-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-right: -4px;
  padding-right: 4px;
}
.perf-ex-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms ease;
}
.perf-ex-row:hover { background: var(--atlas-surface-card); }
.perf-ex-row-selected {
  background:
    linear-gradient(90deg, rgba(212,178,106,0.18) 0%, rgba(212,178,106,0.04) 40%, transparent 70%),
    rgba(255,255,255,0.025);
  border-left: 3px solid #D4B26A;
  padding-left: 9px;
}
.perf-ex-row-main { flex: 1; min-width: 0; }
.perf-ex-row-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink, #f1eee8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.perf-ex-row-sub {
  font-size: 11px;
  color: rgba(241,238,232,0.45);
  margin-top: 2px;
}
.perf-ex-row-e3rm {
  font-size: 14px;
  font-weight: 500;
  color: #D4B26A;
  white-space: nowrap;
}
.perf-ex-unit {
  font-size: 0.7em;
  color: rgba(241,238,232,0.45);
  margin-left: 2px;
}
.perf-ex-detail {
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(241,238,232,0.08);
  border-radius: 12px;
  padding: 24px 28px;
}
.perf-ex-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(241,238,232,0.06);
  margin-bottom: 20px;
}
.perf-ex-detail-pattern {
  font-size: 10px;
  color: rgba(212,178,106,0.85);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.perf-ex-detail-name {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
}
.perf-ex-detail-cur { text-align: right; }
.perf-ex-detail-cur-val {
  font-size: 32px;
  font-weight: 500;
  color: #D4B26A;
  line-height: 1;
}
.perf-ex-detail-cur-label {
  font-size: 11px;
  color: rgba(241,238,232,0.5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}
.perf-ex-detail-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}
.perf-ex-stat {
  font-size: 14px;
  margin-top: 4px;
  color: rgba(241,238,232,0.85);
}
.perf-ex-detail-spark { margin: 20px 0; }
.perf-spark-axis {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: rgba(241,238,232,0.4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}
.perf-spark-empty {
  font-size: 12px;
  color: rgba(241,238,232,0.4);
  text-align: center;
  padding: 20px 0;
}
.perf-ex-detail-recent { margin-top: 8px; }
.perf-ex-sets-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.perf-ex-sets-table thead th {
  font-size: 10px;
  color: rgba(241,238,232,0.45);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  font-weight: 500;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(241,238,232,0.08);
}
.perf-ex-sets-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(241,238,232,0.04);
  color: rgba(241,238,232,0.85);
}
.perf-ex-sets-table tbody tr:last-child td { border-bottom: 0; }
.perf-ex-set-e3rm { color: #D4B26A; }
.perf-ex-detail-recent-empty {
  font-size: 12px;
  color: rgba(241,238,232,0.45);
  font-style: italic;
  padding: 12px 0;
}
@media (max-width: 900px) {
  .perf-ex-grid { grid-template-columns: 1fr; }
  .perf-ex-picker { position: static; max-height: 50vh; }
}

.perf-lift-card {
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(241,238,232,0.08);
  border-radius: 12px;
  padding: 20px;
}
.perf-lift-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}
.perf-lift-card-name {
  font-size: 16px;
  font-weight: 500;
}
.perf-lift-card-cat {
  font-size: 10px;
  color: rgba(241,238,232,0.45);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}
.perf-lift-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.perf-lift-stat-label {
  font-size: 10px;
  color: rgba(241,238,232,0.45);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.perf-lift-stat-value {
  font-size: 20px;
  font-weight: 500;
  margin-top: 2px;
  letter-spacing: -0.01em;
}
.perf-spark-empty {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: rgba(241,238,232,0.35);
  font-style: italic;
  border-top: 1px solid rgba(241,238,232,0.06);
  margin-top: 8px;
}
.perf-lift-recent {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(241,238,232,0.06);
}
.perf-lift-recent-empty {
  font-size: 12px;
  color: rgba(241,238,232,0.4);
  font-style: italic;
}
.perf-lift-set-line {
  display: grid;
  grid-template-columns: 70px 1fr 70px 70px;
  gap: 10px;
  padding: 6px 0;
  font-size: 12px;
  align-items: center;
}
.perf-lift-set-date { color: rgba(241,238,232,0.5); }
.perf-lift-set-load { color: var(--ink, #f1eee8); font-weight: 500; }
.perf-lift-set-count {
  font-size: 11px;
  color: rgba(241,238,232,0.5);
  font-weight: 400;
  margin-left: 4px;
}

/* Phase Detail - prescription hint + missing-data placeholders (1 Jun 2026 PM) */
.perf-sess-prescription-hint {
  font-size: 11px;
  color: rgba(241,238,232,0.55);
  font-style: italic;
  padding: 8px 12px;
  margin: 0 0 10px;
  background: rgba(212,178,106,0.06);
  border-left: 2px solid rgba(212,178,106,0.35);
  border-radius: 0 4px 4px 0;
  line-height: 1.5;
}
.perf-sess-row-ex-meta-empty {
  color: rgba(241,238,232,0.35) !important;
  font-style: italic;
  font-size: 11px !important;
}
.perf-lift-set-rpe,
.perf-lift-set-e3rm { color: rgba(241,238,232,0.6); text-align: right; }

@media (max-width: 768px) {
  .perf-lifts-grid { grid-template-columns: 1fr; }
  .perf-lift-set-line { grid-template-columns: 60px 1fr 60px 60px; }
}

/* History tab */
.perf-history-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.perf-history-stat-value {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-top: 6px;
  line-height: 1;
}

.perf-trend-chart { margin: 4px 0 8px; }
.perf-trend-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: 12px;
  color: rgba(241,238,232,0.65);
  align-items: center;
}
.perf-legend-line {
  display: inline-block;
  width: 12px;
  height: 2px;
  vertical-align: middle;
  margin-right: 6px;
  border-radius: 4px;
}
.perf-legend-dashed {
  width: 14px;
  height: 0;
  border-top: 1.6px dashed #e8556e;
  background: transparent;
}
.perf-trend-legend-bw { margin-left: auto; }

.perf-relative-strength {
  border-left: 3px solid #D4B26A;
  padding: 22px 24px !important;
}
.perf-rs-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  gap: 12px;
}
.perf-rs-eyebrow {
  font-size: 11px;
  color: #D4B26A;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.perf-rs-title {
  font-size: 18px;
  font-weight: 500;
  margin: 8px 0 14px;
  letter-spacing: -0.01em;
}
.perf-rs-sub {
  font-size: 13px;
  color: rgba(241,238,232,0.6);
  line-height: 1.5;
  margin: 0 0 20px;
  max-width: 720px;
}
.perf-ratio-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.perf-ratio-card {
  background: var(--atlas-surface-nested);
  border-radius: 12px;
  padding: 14px;
}
.perf-ratio-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
}
.perf-ratio-value {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.perf-ratio-x {
  font-size: 14px;
  color: rgba(241,238,232,0.55);
  margin-left: 2px;
}
.perf-ratio-delta {
  font-size: 12px;
  font-weight: 500;
}
.perf-ratio-then,
.perf-ratio-now {
  font-size: 11px;
  color: rgba(241,238,232,0.45);
  margin-top: 4px;
}
.perf-ratio-now { color: rgba(241,238,232,0.55); }

.perf-history-phase-row {
  display: grid;
  grid-template-columns: 140px 1fr 90px 110px 90px;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(241,238,232,0.06);
  align-items: center;
}
.perf-history-phase-row:last-child { border-bottom: none; }
.perf-history-phase-dates {
  font-size: 12px;
  color: rgba(241,238,232,0.45);
}
.perf-history-phase-name {
  font-size: 14px;
  font-weight: 500;
}
.perf-history-phase-sub {
  font-size: 11px;
  color: rgba(241,238,232,0.45);
  margin-top: 2px;
}
.perf-history-phase-val {
  font-size: 14px;
  font-weight: 500;
  margin-top: 2px;
}

.perf-pr-row {
  display: grid;
  grid-template-columns: 1fr 100px 120px;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(241,238,232,0.06);
}
.perf-pr-row:last-child { border-bottom: none; }
.perf-pr-head { border-bottom: 1px solid rgba(241,238,232,0.14); padding-bottom: 10px; }
.perf-pr-name { font-size: 14px; font-weight: 500; }
.perf-pr-load { font-size: 16px; font-weight: 500; text-align: right; }
.perf-pr-date { font-size: 12px; color: rgba(241,238,232,0.45); text-align: right; }

@media (max-width: 768px) {
  .perf-history-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .perf-ratio-grid { grid-template-columns: repeat(2, 1fr); }
  .perf-history-phase-row { grid-template-columns: 1fr 80px 80px; gap: 12px; }
  .perf-history-phase-dates { grid-column: 1 / -1; order: -1; }
  .perf-history-phase-row > :nth-child(2) { grid-column: 1 / -1; }
  .perf-trend-legend-bw { margin-left: 0; }
}

/* Conditioning tab — Conditioning system v1 (3 Jul 2026). Replaces the old
   zone-card grid / Z2 chart / upcoming-row styles (renderers removed). */
.perf-cond-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}
.perf-cond-head h2 { font-size: 16px; margin: 0; }
.perf-cond-head-sub { font-size: 11px; color: rgba(241,238,232,0.45); }
.perf-cond-notargets { font-size: 13px; color: rgba(241,238,232,0.5); margin: 0; }

.perf-cond-week-card { padding: 16px 20px; }
.perf-cond-prog-row { padding: 7px 0; }
.perf-cond-prog-label { font-size: 13px; color: #f1eee8; margin-bottom: 6px; }
.perf-cond-prog-tick { color: #4fd18a; font-size: 12px; margin-left: 6px; }
.perf-cond-prog-bar {
  height: 6px;
  background: rgba(241,238,232,0.08);
  border-radius: 4px;
  overflow: hidden;
}
.perf-cond-prog-bar span {
  display: block;
  height: 100%;
  background: var(--atlas-gold, #D4B26A);
  border-radius: 4px;
}
.perf-cond-total { font-size: 11px; color: rgba(241,238,232,0.45); margin-top: 10px; }

.perf-cond-list { padding: 4px 20px; }
.perf-cond-item { border-bottom: 1px solid rgba(241,238,232,0.06); }
.perf-cond-item:last-child { border-bottom: none; }
.perf-cond-row {
  display: grid;
  grid-template-columns: 96px 1fr auto 14px;
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  cursor: pointer;
}
.perf-cond-row-date { font-size: 12px; color: rgba(241,238,232,0.5); }
.perf-cond-row-date.is-today { color: var(--atlas-gold, #D4B26A); }
.perf-cond-row-name { font-size: 14px; font-weight: 500; }
.perf-cond-row-meta { font-size: 11px; color: rgba(241,238,232,0.45); margin-top: 2px; }
.perf-cond-status { font-size: 11px; color: rgba(241,238,232,0.45); white-space: nowrap; }
.perf-cond-status.is-done { color: #4fd18a; }
/* 4 Jul 2026 - past uncompleted assigned session: quiet, not red (§14) */
.perf-cond-status.is-past { color: rgba(241,238,232,0.30); }
/* 4 Jul 2026 - qualified-activity rows + walking confirm affordance */
.perf-cond-act { grid-template-columns: 96px 1fr auto; cursor: default; }
.perf-cond-act.is-unqualified .perf-cond-row-name { color: rgba(241,238,232,0.6); }
.perf-cond-confirm {
  background: transparent;
  border: 1px solid rgba(212,178,106,0.4);
  color: var(--atlas-gold, #D4B26A);
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.perf-cond-confirm:disabled { opacity: 0.5; cursor: default; }

/* 4 Jul 2026 - conditioning block cards */
.perf-cond-block { padding: 14px 0; border-bottom: 1px solid rgba(241,238,232,0.06); }
.perf-cond-block:last-child { border-bottom: none; }
.perf-cond-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.perf-cond-block-week { font-size: 11px; color: var(--atlas-gold, #D4B26A); white-space: nowrap; }
.perf-cond-block-notes { margin-top: 6px; }

.perf-cond-chev {
  font-size: 10px;
  color: rgba(241,238,232,0.35);
  transition: transform 0.15s ease;
}
.perf-cond-row.open .perf-cond-chev { transform: rotate(90deg); }
.perf-cond-det { padding: 0 0 16px; }
.perf-cond-det-block { margin-bottom: 12px; }
.perf-cond-det-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(241,238,232,0.45);
  margin-bottom: 4px;
}
.perf-cond-det-text {
  font-size: 13px;
  color: rgba(241,238,232,0.75);
  line-height: 1.55;
  white-space: pre-line;
}
.perf-cond-open {
  background: transparent;
  border: 1px solid rgba(241,238,232,0.18);
  color: rgba(241,238,232,0.75);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
.perf-cond-open:hover { border-color: rgba(241,238,232,0.35); }

.perf-cond-hist {
  display: flex;
  gap: 18px;
  align-items: flex-end;
  padding: 18px 20px 4px;
}
.perf-cond-hist-col { flex: 1; text-align: center; min-width: 0; }
.perf-cond-hist-min { font-size: 11px; color: rgba(241,238,232,0.55); margin-bottom: 6px; }
.perf-cond-hist-bar {
  height: 72px;
  width: 28px;
  margin: 0 auto;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  gap: 1px;
}
.perf-cond-hist-seg { display: block; width: 100%; border-radius: 1px; }
.perf-cond-hist-week { font-size: 10px; color: rgba(241,238,232,0.45); margin-top: 6px; }
.perf-cond-hist-col.is-focal .perf-cond-hist-week { color: rgba(241,238,232,0.7); }
.perf-cond-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 20px 16px;
  font-size: 10px;
  color: rgba(241,238,232,0.5);
}
.perf-cond-legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  margin-right: 4px;
  vertical-align: middle;
}

@media (max-width: 480px) {
  .perf-cond-row { grid-template-columns: 74px 1fr auto 12px; gap: 8px; }
  .perf-cond-hist { gap: 10px; }
  .perf-cond-hist-bar { width: 22px; }
}

/* Goals tab */
.perf-pending-goal-card {
  background:
    linear-gradient(90deg, rgba(212,178,106,0.12) 0%, rgba(212,178,106,0.02) 40%, transparent 70%),
    rgba(255,255,255,0.025);
  border: 1px solid rgba(241,238,232,0.08);
  border-left: 3px solid #D4B26A;
  border-radius: 12px;
  padding: 18px 22px 18px 22px;
  margin-bottom: 12px;
  position: relative;
}
.perf-pending-goal-meta {
  font-size: 10px;
  color: #D4B26A;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.perf-pending-goal-title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.perf-pending-goal-target {
  font-size: 13px;
  color: rgba(241,238,232,0.65);
  margin-top: 6px;
}
.perf-pending-goal-desc {
  font-size: 13px;
  color: rgba(241,238,232,0.55);
  margin-top: 8px;
  line-height: 1.55;
}

.perf-add-goal-btn {
  display: block;
  width: 100%;
  background: transparent;
  border: 1px dashed rgba(241,238,232,0.18);
  color: rgba(241,238,232,0.6);
  padding: 16px;
  border-radius: 12px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
  margin-top: 8px;
}
.perf-add-goal-btn:hover {
  color: var(--ink, #f1eee8);
  border-color: #D4B26A;
  background: rgba(212,178,106,0.04);
}
.perf-add-goal-btn:active {
  transform: scale(0.99);
}

/* ════════════════════════════════════════════════════════════════════════
 * Travel Protocol v2 - modal + Daily Timeline injection.
 * 31 May 2026 · BRIEF-TRAVEL-PROTOCOL-V2-30MAY.md
 * Gold rail + 90deg gradient = the selected-state visual contract from
 * project_selected_state_visual_contract. Same treatment is reused for
 * the Today block, day-chips, and trip/event rows on the Daily Timeline.
 * ════════════════════════════════════════════════════════════════════════ */
.proto-v2 { color:#e5e7eb; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
.proto-v2-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; }
.proto-v2-eyebrow { font-size:11px; color:#9ca3af; text-transform:uppercase; letter-spacing: 0.06em; font-weight:500; margin-bottom:4px; }
.proto-v2-title { font-size:18px; font-weight:500; color:#f1eee8; line-height:1.3; }
.proto-v2-submeta { font-size:12px; color:#9ca3af; margin-top:3px; }
.proto-v2-status { font-size:11px; font-weight:500; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.proto-v2-status.active { color:#6CD693; background:rgba(74,157,107,0.12); border:1px solid rgba(74,157,107,0.3); }
.proto-v2-status.upcoming { color:#378ADD; background:rgba(55,138,221,0.12); border:1px solid rgba(55,138,221,0.3); }
.proto-v2-status.complete { color:#9ca3af; background:rgba(156,163,175,0.10); border:1px solid rgba(156,163,175,0.25); }

/* Gold-rail Today block - selected-state visual contract */
.proto-today {
  background: linear-gradient(90deg, rgba(212,178,106,0.18) 0%, rgba(212,178,106,0.06) 45%, rgba(212,178,106,0.01) 100%);
  border-left: 3px solid #d4b26a;
  border-top: 1px solid rgba(212,178,106,0.18);
  border-right: 1px solid rgba(212,178,106,0.10);
  border-bottom: 1px solid rgba(212,178,106,0.10);
  border-radius: 0 12px 12px 0;
  padding: 14px 14px 12px;
  margin-bottom: 14px;
}
.proto-today-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.proto-today-eyebrow { font-size:11px; color:#f1d99c; text-transform:uppercase; letter-spacing: 0.06em; font-weight:600; }
.proto-today-count { font-size:11px; color:#9ca3af; }
.proto-today-row { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid rgba(255,255,255,0.05); }
.proto-today-row:last-child { border-bottom:0; }
.proto-today-row.current { padding:8px 0; background:rgba(212,178,106,0.04); margin:0 -14px; padding-left:14px; padding-right:14px; }
.proto-today-tick {
  width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; flex-shrink:0;
}
.proto-today-tick.done { background:rgba(74,157,107,0.18); color:#6CD693; }
.proto-today-tick.open { border:1.5px solid rgba(156,163,175,0.4); }
.proto-today-tick.now  { border:1.5px solid #f1d99c; }
.proto-today-time { font-size:12px; color:#9ca3af; font-variant-numeric:tabular-nums; width:48px; }
.proto-today-time.now { color:#f1d99c; font-weight:500; }
.proto-today-text { font-size:13px; color:#e5e7eb; flex:1; min-width:0; }
.proto-today-text.done { color:#9ca3af; text-decoration:line-through; }
.proto-today-text.now-block { flex:1; min-width:0; }
.proto-today-text-title { font-size:13px; color:#f1eee8; font-weight:500; }
.proto-today-text-detail { font-size:12px; color:#c9b886; margin-top:1px; line-height:1.45; }
.proto-today-cta {
  background:rgba(212,178,106,0.18); color:#f1d99c;
  border:1px solid rgba(212,178,106,0.4);
  font-size:11px; font-weight:500;
  padding:5px 11px; border-radius:8px;
  cursor:pointer; white-space:nowrap;
  font-family:inherit;
}

/* 4-row adapted grid */
.proto-rows-grid {
  display:grid; grid-template-columns:90px 1fr;
  gap:10px 12px; font-size:13px; align-items:start;
  margin-bottom:14px;
}
.proto-rows-label { color:#9ca3af; padding-top:3px; }
.proto-rows-icon-training  { color:#7f77dd; }
.proto-rows-icon-stack     { color:#E8A857; }
.proto-rows-icon-nutrition { color:#6CD693; }
.proto-rows-icon-sleep     { color:#378add; }
.proto-rows-summary { color:#e5e7eb; line-height:1.5; font-weight:500; }
.proto-rows-detail { color:#9ca3af; font-size:12px; margin-top:2px; line-height:1.5; }
/* 31 May 2026 v2.1 - bullet rows. Tight leading + 14px indent. */
.proto-rows-bullets { margin:5px 0 0; padding-left:14px; color:#c0c8d4; font-size:12px; line-height:1.65; }
.proto-rows-bullets li { margin:0 0 2px; }
.proto-rows-bullets li:last-child { margin-bottom:0; }
.proto-rows-bullets li strong { color:#e5e7eb; font-weight:500; }

/* Venue card */
.proto-venue {
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px; padding:12px 14px;
  margin-bottom:14px;
}
.proto-venue-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:8px; }
.proto-venue-name { font-size:13px; color:#f1eee8; font-weight:500; }
.proto-venue-sub { font-size:12px; color:#9ca3af; margin-top:1px; }
.proto-venue-link {
  font-size:11px; color:#D4B26A; text-decoration:none;
  white-space:nowrap; display:flex; align-items:center; gap:3px;
  transition: color 120ms ease;
}
.proto-venue-link:hover { color:#F4DDA8; }
.proto-venue-tags { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:8px; }
.proto-venue-tag {
  font-size:11px; padding:3px 8px; border-radius:8px;
}
.proto-venue-tag.have { color:#6CD693; background:rgba(74,157,107,0.10); border:1px solid rgba(74,157,107,0.22); }
.proto-venue-tag.limit { color:#E8A857; background:rgba(212,160,90,0.10); border:1px solid rgba(212,160,90,0.22); }
.proto-venue-foot {
  display:flex; justify-content:space-between; align-items:center;
  padding-top:8px; border-top:1px solid rgba(255,255,255,0.05);
  font-size:11px;
}
.proto-venue-foot-left { color:#6b7280; }
.proto-venue-recheck {
  background:transparent; border:0; color:#D4B26A;
  font-size:11px; cursor:pointer; padding:0;
  font-family:inherit;
  transition: color 120ms ease;
}
.proto-venue-recheck:hover { color:#F4DDA8; }
.proto-venue-recheck:disabled { color:rgba(212,178,106,0.5); cursor:wait; }

/* 5-day strip */
.proto-day-strip {
  display:flex; gap:6px; margin-bottom:14px;
}
.proto-day-chip {
  flex:1; text-align:center;
  padding:6px 0; border-radius:8px;
  font-size:11px; color:#9ca3af;
  background:var(--atlas-surface-nested);
  border:1px solid rgba(255,255,255,0.04);
}
.proto-day-chip-name { font-weight:500; color:#9ca3af; }
.proto-day-chip-sub { font-size:10px; margin-top:2px; }
.proto-day-chip.done .proto-day-chip-sub { color:#6CD693; }
.proto-day-chip.today {
  background: linear-gradient(90deg, rgba(212,178,106,0.18) 0%, rgba(212,178,106,0.04) 100%);
  border:1px solid rgba(212,178,106,0.4);
  color:#f1d99c; font-weight:500;
}
.proto-day-chip.today .proto-day-chip-name { color:#f1d99c; }
.proto-day-chip.today .proto-day-chip-sub { color:#f1d99c; opacity:0.7; }

/* Contingencies */
.proto-conting { border:1px solid rgba(255,255,255,0.06); border-radius:12px; margin-bottom:6px; }
.proto-conting-head {
  padding:10px 12px; display:flex; justify-content:space-between; align-items:center;
  cursor:pointer;
}
.proto-conting-trigger {
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:#e5e7eb;
}
.proto-conting-trigger i { color:#E8A857; font-size:14px; }
.proto-conting-chev { color:#6b7280; font-size:13px; transition:transform 0.15s; }
.proto-conting.open .proto-conting-chev { transform:rotate(180deg); }
.proto-conting-body {
  display:none;
  padding:0 12px 12px;
  font-size:13px; color:#9ca3af; line-height:1.5;
}
.proto-conting.open .proto-conting-body { display:block; }

.proto-v2-foot {
  font-size:11px; color:#5a6577; text-align:center;
  margin-top:14px; padding-top:10px;
  border-top:1px solid rgba(255,255,255,0.04);
}
.proto-v2-section-label {
  font-size:11px; color:#9ca3af; text-transform:uppercase;
  letter-spacing: 0.06em; font-weight:500; margin-bottom:8px;
}

/* Packing list - expandable itinerary of stack items per peptide /
   supplement with bring/skip rationale. 31 May 2026 v2. */
.proto-packing { border:1px solid rgba(255,255,255,0.06); border-radius:12px; margin-bottom:14px; overflow:hidden; }
.proto-packing-head {
  padding:10px 12px; display:flex; justify-content:space-between; align-items:center;
  cursor:pointer; background:var(--atlas-surface-nested);
  transition: background 120ms ease;
}
.proto-packing-head:hover { background:rgba(255,255,255,0.05); }
.proto-packing-title {
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:#e5e7eb; font-weight:500;
}
.proto-packing-title i { color:#D4B26A; font-size:14px; }
.proto-packing-count {
  font-size:11px; color:rgba(241,238,232,0.55); font-variant-numeric:tabular-nums;
}
.proto-packing-chev { color:#6b7280; font-size:13px; transition:transform 0.15s; margin-left:6px; }
.proto-packing.open .proto-packing-chev { transform:rotate(180deg); }
.proto-packing-body { display:none; padding:0 12px 10px; }
.proto-packing.open .proto-packing-body { display:block; }
.proto-packing-row {
  display:grid; grid-template-columns: auto 1fr; gap:10px;
  padding:8px 0; border-top:1px solid rgba(255,255,255,0.05);
  font-size:12px;
}
.proto-packing-row:first-child { border-top:none; }
.proto-packing-flag {
  flex-shrink:0; width:60px; font-size:10px; font-weight:600;
  letter-spacing: 0.06em; text-transform:uppercase;
  border-radius:4px; padding:3px 6px; text-align:center;
  align-self:start;
}
.proto-packing-flag.bring { color:#6CD693; background:rgba(74,157,107,0.12); border:1px solid rgba(74,157,107,0.32); }
.proto-packing-flag.skip { color:rgba(241,238,232,0.55); background:var(--atlas-surface-card); border:1px solid rgba(255,255,255,0.08); }
.proto-packing-flag.cold { color:#85B7EB; background:rgba(133,183,235,0.10); border:1px solid rgba(133,183,235,0.28); }
.proto-packing-body-text { color:#e5e7eb; line-height:1.45; }
.proto-packing-body-text strong { color:#F1EEE8; font-weight:500; }
.proto-packing-body-text .proto-packing-rationale {
  display:block; color:rgba(241,238,232,0.55); font-size:11px; margin-top:2px;
}
.proto-packing-body-text .proto-packing-dose-day {
  color:#D4B26A; font-weight:500;
}

/* Ask Atlas about this trip - CTA at the bottom of the v2 modal. Pre-loads
   Concierge with full trip context for quick-fire follow-up questions. */
.proto-ask-atlas {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:12px 16px;
  background: linear-gradient(90deg, rgba(212,178,106,0.14), rgba(255,255,255,0.04) 60%);
  border:1px solid rgba(212,178,106,0.32); border-left:2px solid #D4B26A;
  border-radius:12px; margin:14px 0 6px;
  color:#F4DDA8; font-family:inherit; font-size:13px; font-weight:500;
  cursor:pointer; transition: background 120ms ease, border-color 120ms ease;
}
.proto-ask-atlas:hover {
  background: linear-gradient(90deg, rgba(212,178,106,0.20), rgba(255,255,255,0.06) 60%);
  border-color:rgba(212,178,106,0.55);
}
.proto-ask-atlas i { font-size:15px; color:#D4B26A; }

/* Daily Timeline - trip/event row gold-rail injection */
.sch-row.proto-injected {
  background: linear-gradient(90deg, rgba(212,178,106,0.10) 0%, rgba(212,178,106,0.01) 90%);
  border-left: 3px solid #d4b26a;
  padding-left: 13px;
}
.sch-row.proto-injected .sch-row-time { color:#f1d99c; font-weight:500; }
.sch-row.proto-injected .sch-row-title { color:#f1eee8; font-weight:500; }
.sch-row.proto-injected .sch-row-detail { color:#c9b886; }
.sch-proto-pill {
  font-size: 10px; color:#d4b26a;
  background:rgba(212,178,106,0.14);
  border:1px solid rgba(212,178,106,0.3);
  padding:3px 9px; border-radius:999px;
  text-transform:uppercase; letter-spacing: 0.06em; font-weight:500;
  flex-shrink:0;
}
.sch-proto-foot {
  margin-top:12px; padding-top:10px;
  border-top:1px solid rgba(255,255,255,0.05);
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px;
}
.sch-proto-foot-left { color:#6b7280; }
.sch-proto-foot-link {
  font-size:11px; color:#d4b26a; text-decoration:none;
  display:flex; align-items:center; gap:4px;
}

/* Overview v2 - 5-card grids + clickable cards (31 May 2026) */
.perf-kpi-grid-5 {
  grid-template-columns: repeat(5, 1fr);
}
/* 6-col variant used when 5 lifts + Add tile (1 Jun 2026 PM) - stops the
   Add tile from orphaning onto its own row. */
.perf-kpi-grid-6 {
  grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 1400px) {
  .perf-kpi-grid-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .perf-kpi-grid-6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .perf-kpi-grid-6 { grid-template-columns: 1fr; }
}
.perf-kpi-clickable {
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, transform 0.1s;
}
.perf-kpi-clickable:hover {
  border-color: rgba(201, 169, 106, 0.4);
  background: var(--atlas-surface-card);
}
.perf-kpi-clickable:active {
  transform: scale(0.985);
}

@media (max-width: 1200px) {
  .perf-kpi-grid-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .perf-kpi-grid-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .perf-kpi-grid-5 { grid-template-columns: 1fr; }
}

/* Per-exercise tracking v3 (31 May 2026) - benchmark cards with edit + add */
.perf-kpi-grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.perf-bench-card {
  position: relative;
}
.perf-bench-edit {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: rgba(241,238,232,0.35);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 8px;
  transition: color 0.15s, background-color 0.15s;
  font-family: inherit;
}
.perf-bench-edit:hover {
  color: var(--ink, #f1eee8);
  background: rgba(255,255,255,0.06);
}
/* Brief 3 (4 Jun 2026) - coach-set lift goal overlay on benchmark cards.
   Gold fill on a darker-teal rail; "Goal reached" pill replaces the bar
   once current ≥ goal. Goal-less cards are untouched (no layout shift). */
.perf-benchmark-goal-bar {
  height: 4px;
  background: #243131;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 10px;
}
.perf-benchmark-goal-bar-fill {
  height: 100%;
  background: #d4b26a;
  border-radius: 999px;
  transition: width 0.4s;
}
.perf-benchmark-goal-meta {
  font-size: 11px;
  color: rgba(241,238,232,0.45);
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
}
.perf-benchmark-goal-met {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #4fd18a;
  background: rgba(79,209,138,0.12);
  border: 1px solid rgba(79,209,138,0.25);
}
.perf-add-bench-tile {
  background: transparent;
  border: 1px dashed rgba(241,238,232,0.18);
  border-radius: 12px;
  color: rgba(241,238,232,0.55);
  padding: 18px;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s;
  min-height: 110px;
}
.perf-add-bench-tile:hover {
  color: var(--ink, #f1eee8);
  border-color: #D4B26A;
  background: rgba(212,178,106,0.04);
}
.perf-add-bench-plus { font-size: 22px; line-height: 1; }
.perf-add-bench-label { font-size: 12px; }

/* Lift picker modal */
.perf-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11,15,20,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 24px;
}
.perf-picker-modal {
  width: 100%;
  max-width: 540px;
  max-height: 80dvh;
  background: #101514;
  border: 1px solid rgba(241,238,232,0.12);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.perf-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(241,238,232,0.08);
}
.perf-picker-title {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.01em;
}
.perf-picker-close {
  background: transparent;
  border: none;
  color: rgba(241,238,232,0.55);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.perf-picker-search {
  width: calc(100% - 32px);
  margin: 14px 16px 4px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  background: var(--atlas-surface-card);
  border: 1px solid rgba(241,238,232,0.12);
  border-radius: 8px;
  color: var(--ink, #f1eee8);
  outline: none;
}
.perf-picker-search:focus {
  border-color: #D4B26A;
}
.perf-picker-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px 16px;
}
.perf-picker-section-head {
  font-size: 10px;
  color: rgba(241,238,232,0.45);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px 10px 6px;
}
.perf-picker-list { display: flex; flex-direction: column; }
.perf-picker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 12px;
  background: transparent;
  border: none;
  color: var(--ink, #f1eee8);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.12s;
  margin: 1px 0;
}
.perf-picker-row:hover {
  background: rgba(255,255,255,0.05);
}
.perf-picker-name { font-weight: 500; }
.perf-picker-meta { font-size: 11px; color: rgba(241,238,232,0.5); }
.perf-picker-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Trends KPI cards (C1 layout) - Home V2 rolling 7-day trends.
   31 May 2026 - replaces the old _renderTrendRow vertical block layout
   ("blocky and childish" per Harry). 3-col grid of cards with a stat on
   top + 7-day sparkline (gradient fill) below. Brand teal palette
   (#101514 body → #1D2524 cards). Hover sync wired in atlas-sections.js
   `_wireTrendsHover`: cursor X on any spark maps to a day index (0-6),
   ALL cards swap stat to that day's value, dashed gold crosshair + dot
   land on every spark at the same index. Mouseleave reverts.
   Sleep Debt gets the gold rim - new metric, signals distinction.
   ─────────────────────────────────────────────────────────────────────── */
.trd-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 700px) {
  .trd-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .trd-grid { grid-template-columns: 1fr; }
}
.trd-card {
  background: #1D2524;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 180ms;
  cursor: crosshair;
}
.trd-card:hover { border-color: rgba(212, 178, 106, 0.4); }
/* When grid is in hover-mode, fade non-active cards' borders and brighten
   the active one. Keeps focus on the card the cursor is on while all six
   sync their stat. */
.trd-grid.is-hovering .trd-card { border-color: rgba(255, 255, 255, 0.04); }
.trd-grid.is-hovering .trd-card.is-active { border-color: rgba(212, 178, 106, 0.55); }
.trd-card.trd-gold { border-color: rgba(212, 178, 106, 0.45); }
.trd-card.trd-gold:hover { border-color: rgba(212, 178, 106, 0.7); }
.trd-top { padding: 12px 12px 8px; }
.trd-label {
  font-size: 10px;
  color: #a8b3b3;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.trd-label.trd-gold-label { color: #d4b26a; }
.trd-stat {
  font-size: 23px;
  font-weight: 500;
  color: #f1eee8;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-top: 5px;
}
.trd-unit {
  font-size: 11px;
  color: #7a8585;
  font-weight: 400;
  margin-left: 1px;
}
.trd-delta {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1px;
  margin-top: 4px;
  min-height: 14px;
}
.trd-spark {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  height: 32px;
  display: block;
  width: 100%;
}
.trd-foot {
  margin-top: 12px;
  padding: 9px 11px;
  background: rgba(212, 178, 106, 0.07);
  border: 1px solid rgba(212, 178, 106, 0.2);
  border-radius: 8px;
  font-size: 11px;
  color: #a8b3b3;
  line-height: 1.5;
}
.trd-foot-label { color: #d4b26a; font-weight: 500; }
.trd-foot-code {
  color: #7a8585;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
}

/* Header row above the grid: title left, pill selector + meta right. */
.trd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.trd-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.trd-meta {
  font-size: 10px;
  color: #7a8585;
  letter-spacing: 0.5px;
}
/* Duration selector pills - 7d / 14d / 30d / 60d / 120d.
   Single-row segmented control. Active state uses the gold accent at low
   intensity so it reads as "selected" without competing with the gold-rim
   sleep-debt card. */
.trd-pills {
  display: inline-flex;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 2px;
  gap: 1px;
}
.trd-pill {
  appearance: none;
  background: transparent;
  border: 0;
  color: #a8b3b3;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  padding: 4px 9px;
  border-radius: 8px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background-color 150ms, color 150ms;
}
.trd-pill:hover {
  color: #f1eee8;
  background: var(--atlas-surface-card);
}
.trd-pill.active {
  background: rgba(212, 178, 106, 0.18);
  color: #d4b26a;
}
.trd-pill.active:hover {
  background: rgba(212, 178, 106, 0.25);
}
@media (max-width: 480px) {
  .trd-meta { display: none; }
  .trd-pills { width: 100%; justify-content: space-between; }
  .trd-pill { flex: 1; text-align: center; }
}

/* ════════════════════════════════════════════════════════════════════
   2 Jun 2026 - Stage 2 of the new session-flow build.
   Session overlay: full-screen take-over rendered on Start session tap.
   Mobile-first, centers as a card on desktop. Mirrors the mockup at
   /mockups/session-flow-mockup.html (screens 02 + 03).
   ════════════════════════════════════════════════════════════════════ */
body.atlas-session-active { overflow: hidden; }

.perf-session-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #1c2828;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.perf-session-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  min-height: 100dvh;
}

/* Header - back / lift count / session name / elapsed timer chip */
.perf-sess-head {
  padding: 14px 18px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: #1c2828;
  position: sticky;
  top: 0;
  z-index: 2;
}
.perf-sess-head-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.perf-sess-back {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--atlas-surface-card);
  border: 1px solid rgba(255,255,255,0.08);
  color: #b6bcb6;
  display: grid; place-items: center;
  font-size: 18px;
  cursor: pointer;
  flex: 0 0 32px;
  padding: 0;
  line-height: 1;
}
.perf-sess-back:hover { background: rgba(255,255,255,0.08); color: #e8eae6; }
.perf-sess-head-text { min-width: 0; }
.perf-sess-head-sub {
  font-size: 10px;
  color: #7e8780;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
.perf-sess-head-title {
  font-size: 14px;
  font-weight: 600;
  color: #e8eae6;
  letter-spacing: -0.01em;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 240px;
}
.perf-sess-timer {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  font-weight: 700;
  color: #D4B26A;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
  padding: 5px 12px;
  border: 1px solid rgba(212,178,106,0.3);
  border-radius: 999px;
  background: rgba(212,178,106,0.08);
  letter-spacing: 0.04em;
}

/* Body - scrollable stack of all exercise cards (Stage 2 v2). Bottom
   padding clears the fixed foot bar. */
.perf-sess-body {
  padding: 14px 16px 180px;
  flex: 1;
}
.perf-sess-body > .perf-sess-ex-card + .perf-sess-ex-card { margin-top: 14px; }

/* Exercise card - one per exercise, stacked vertically. Fully-done card
   dims; skipped card collapses to a one-liner with undo. */
.perf-sess-ex-card {
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 14px 14px 12px;
  transition: opacity 200ms ease;
}
.perf-sess-ex-card.done { opacity: 0.72; }
.perf-sess-ex-card.skipped {
  padding: 12px 14px;
  border-style: dashed;
  opacity: 0.65;
}
.perf-sess-ex-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.perf-sess-ex-card-head .perf-ex-order-lg { margin-top: 1px; }
.perf-sess-ex-card-name-wrap {
  flex: 1;
  min-width: 0;
}
.perf-sess-ex-card-name {
  font-size: 16px;
  font-weight: 600;
  color: #e8eae6;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.perf-sess-ex-card-target {
  margin-top: 3px;
  font-size: 12px;
  color: #b6bcb6;
  font-variant-numeric: tabular-nums;
}
.perf-sess-ex-undo {
  background: transparent;
  border: 1px solid rgba(212,178,106,0.32);
  color: #D4B26A;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  margin-left: 8px;
}
.perf-sess-ex-undo:hover { background: rgba(212,178,106,0.08); }
.perf-sess-ex-card .perf-sess-set-table { margin-top: 12px; }
.perf-sess-ex-card-actions {
  margin-top: 10px;
  display: flex;
  gap: 6px;
}
.perf-ex-order-lg {
  font-size: 12px;
  padding: 3px 8px;
  min-width: 32px;
  margin-right: 12px;
  vertical-align: 3px;
}
/* Set table - Strong/Hevy row paradigm */
.perf-sess-set-table {
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  overflow: hidden;
}
.perf-sess-set-thead {
  display: grid;
  grid-template-columns: 32px 1fr 1fr 1fr 38px;
  padding: 9px 12px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7e8780;
  font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.18);
}
.perf-sess-set-thead > div:nth-child(2),
.perf-sess-set-thead > div:nth-child(3),
.perf-sess-set-thead > div:nth-child(4) { text-align: center; }
.perf-sess-set-row {
  display: grid;
  grid-template-columns: 32px 1fr 1fr 1fr 38px;
  padding: 10px 12px;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  gap: 4px;
}
.perf-sess-set-row.done { color: #b6bcb6; }
.perf-sess-set-row.current {
  background: linear-gradient(90deg, rgba(212,178,106,0.12) 0%, rgba(212,178,106,0.02) 100%);
  border-left: 3px solid #D4B26A;
  padding-left: 9px;
}
.perf-sess-set-num {
  font-size: 12px;
  color: #7e8780;
  font-weight: 700;
}
.perf-sess-set-row.done .perf-sess-set-num,
.perf-sess-set-row.current .perf-sess-set-num { color: #D4B26A; }
.perf-sess-set-row.pending { color: #5f6862; }
.perf-sess-set-cell {
  text-align: center;
  font-weight: 500;
}
.perf-sess-set-cell .u {
  color: #7e8780;
  font-size: 11px;
  margin-left: 2px;
  font-weight: 500;
}
.perf-sess-set-input {
  text-align: center;
  background: rgba(0,0,0,0.32);
  border: 1px solid #D4B26A;
  border-radius: 8px;
  padding: 8px 2px;
  font-size: 16px; /* avoid iOS auto-zoom on focus */
  font-weight: 600;
  color: #D4B26A;
  font-variant-numeric: tabular-nums;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-width: 0;
  font-family: inherit;
}
.perf-sess-set-input::-webkit-outer-spin-button,
.perf-sess-set-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.perf-sess-set-input:focus {
  outline: none;
  background: rgba(0,0,0,0.5);
  box-shadow: 0 0 0 2px rgba(212,178,106,0.4);
}
.perf-sess-set-input::placeholder {
  color: rgba(212,178,106,0.4);
}
.perf-sess-set-check {
  justify-self: end;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 14px;
  font-weight: 700;
  padding: 0;
  font-family: inherit;
  line-height: 1;
}
/* Done - tappable to undo */
button.perf-sess-set-check.done {
  background: rgba(212,178,106,0.18);
  color: #D4B26A;
  border: 1px solid rgba(212,178,106,0.4);
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}
button.perf-sess-set-check.done:hover {
  background: rgba(212,178,106,0.28);
}
button.perf-sess-set-check.done:active { transform: scale(0.92); }
/* Current - the primary log affordance, replaces the old bottom CTA */
button.perf-sess-set-check.current {
  background: rgba(212,178,106,0.12);
  border: 1px solid #D4B26A;
  color: #D4B26A;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(212,178,106,0);
  transition: box-shadow 160ms ease, background 120ms ease, transform 120ms ease;
}
button.perf-sess-set-check.current:hover {
  background: rgba(212,178,106,0.24);
  box-shadow: 0 0 0 4px rgba(212,178,106,0.14);
}
button.perf-sess-set-check.current:active { transform: scale(0.92); }
.perf-sess-set-check.pending {
  background: transparent;
  border: 1px dashed rgba(255,255,255,0.06);
  color: #5f6862;
  width: 24px; height: 24px;
  font-size: 12px;
}
.perf-sess-set-add {
  display: block;
  width: 100%;
  text-align: center;
  padding: 12px;
  font-size: 11px;
  color: #7e8780;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
}
.perf-sess-set-add:hover { color: #D4B26A; }

/* Exercise escape hatches */
.perf-sess-ex-actions {
  display: flex;
  gap: 8px;
}
.perf-sess-ex-action {
  flex: 1;
  background: var(--atlas-surface-nested);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 10px 0;
  font-size: 11px;
  color: #b6bcb6;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
}
.perf-sess-ex-action:hover { background: rgba(255,255,255,0.06); color: #e8eae6; }

/* All-done card */
.perf-sess-done-card {
  background: linear-gradient(180deg, rgba(212,178,106,0.10), rgba(212,178,106,0.02));
  border: 1px solid rgba(212,178,106,0.22);
  border-radius: 18px;
  padding: 32px 24px;
  text-align: center;
}
.perf-sess-done-eyebrow {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #D4B26A;
  font-weight: 700;
}
.perf-sess-done-title {
  margin-top: 8px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #e8eae6;
}
.perf-sess-done-sub {
  margin-top: 10px;
  font-size: 13px;
  color: #b6bcb6;
  line-height: 1.5;
}

/* Foot - fixed bottom: primary CTA + Ask Atlas banner */
.perf-sess-foot {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(28,40,40,0), #1c2828 55%);
  padding: 14px 18px calc(22px + env(safe-area-inset-bottom));
  z-index: 3;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.perf-sess-foot-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 720px;
  margin: 0 auto;
}
.perf-sess-primary {
  width: 100%;
  background: #D4B26A;
  color: #1d1611;
  font-weight: 700;
  border: 0;
  border-radius: 13px;
  padding: 16px;
  font-size: 15px;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 22px rgba(212,178,106,0.22);
  cursor: pointer;
  font-family: inherit;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.perf-sess-primary:hover { box-shadow: 0 12px 32px rgba(212,178,106,0.32); }
.perf-sess-primary:active { transform: scale(0.99); }
.perf-sess-ask-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #1D2524;
  border: 1px solid rgba(110,168,143,0.30);
  border-radius: 12px;
  padding: 10px 14px;
  color: #e8eae6;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.perf-sess-ask-bar:hover { border-color: rgba(110,168,143,0.55); }
.perf-sess-ask-dot {
  flex: 0 0 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #6ea88f;
  box-shadow: 0 0 8px rgba(110,168,143,0.6);
}
.perf-sess-ask-input {
  flex: 1;
  color: #7e8780;
  font-weight: 500;
}
.perf-sess-ask-arrow {
  color: #5f6862;
  font-size: 14px;
}

@media (max-width: 420px) {
  .perf-sess-head-title { max-width: 180px; }
  .perf-sess-ex-card-name { font-size: 15px; }
  .perf-sess-set-thead,
  .perf-sess-set-row { grid-template-columns: 28px 1fr 1fr 1fr 34px; padding-left: 10px; padding-right: 10px; }
  .perf-sess-set-input { padding: 8px 0; }
}

/* Disabled primary state - when no sets logged yet, "Complete session"
   reads as "Log a set to finish" with reduced affordance. */
.perf-sess-primary[disabled],
.perf-sess-primary[aria-disabled="true"] {
  background: rgba(212,178,106,0.18);
  color: rgba(29,22,17,0.5);
  box-shadow: none;
  cursor: default;
}
.perf-sess-primary[disabled]:hover,
.perf-sess-primary[aria-disabled="true"]:hover {
  box-shadow: none;
}

/* ════════════════════════════════════════════════════════════════════
   2 Jun 2026 - Stage 3.5 of the new session-flow build.
   Pre-session questionnaire - mounts into #atlas-section (Performance's
   container) when Start session is tapped. Six 1-10 scales, ghost Skip
   + gold Continue.
   ════════════════════════════════════════════════════════════════════ */
.perf-q-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 18px 18px 120px;
}
.perf-q-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.perf-q-back {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--atlas-surface-card);
  border: 1px solid rgba(255,255,255,0.10);
  color: #b6bcb6;
  display: grid; place-items: center;
  font-size: 20px;
  cursor: pointer;
  flex: 0 0 36px;
  padding: 0;
  line-height: 1;
  font-family: inherit;
}
.perf-q-back:hover { background: rgba(255,255,255,0.08); color: #e8eae6; }
.perf-q-head-text { min-width: 0; }
.perf-q-eyebrow {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #D4B26A;
  font-weight: 700;
}
.perf-q-title {
  margin-top: 4px;
  font-size: 22px;
  font-weight: 600;
  color: #e8eae6;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.perf-q-sub {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(241,238,232,0.5);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.perf-q-intro {
  margin: 0 0 18px 48px;
  font-size: 13px;
  color: rgba(241,238,232,0.7);
  line-height: 1.5;
}
.perf-q-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.perf-q-row {
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 12px 14px;
}
.perf-q-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.perf-q-row-label {
  font-size: 13px;
  font-weight: 600;
  color: #e8eae6;
  letter-spacing: -0.01em;
}
.perf-q-row-value {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  font-weight: 700;
  color: #D4B26A;
  font-variant-numeric: tabular-nums;
}
.perf-q-pips {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
}
.perf-q-pip {
  height: 36px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.22);
  border-radius: 8px;
  color: rgba(241,238,232,0.45);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  padding: 0;
  transition: background 100ms ease, border-color 100ms ease, color 100ms ease;
  -webkit-tap-highlight-color: transparent;
}
.perf-q-pip:hover {
  background: rgba(212,178,106,0.08);
  color: #e8eae6;
}
.perf-q-pip.filled {
  background: rgba(212,178,106,0.16);
  border-color: rgba(212,178,106,0.32);
  color: #D4B26A;
}
.perf-q-pip.selected {
  background: #D4B26A;
  border-color: #D4B26A;
  color: #1d1611;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(212,178,106,0.32);
}
.perf-q-row-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(241,238,232,0.32);
  font-weight: 600;
}

/* Foot bar - Skip + Continue */
.perf-q-foot {
  position: sticky;
  bottom: 0;
  left: 0; right: 0;
  margin-top: 22px;
  padding: 14px 0 calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(10,14,14,0), #101514 60%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2;
}
.perf-q-continue {
  width: 100%;
  background: #D4B26A;
  color: #1d1611;
  font-weight: 700;
  border: 0;
  border-radius: 13px;
  padding: 16px;
  font-size: 15px;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 22px rgba(212,178,106,0.22);
  cursor: pointer;
  font-family: inherit;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.perf-q-continue:hover { box-shadow: 0 12px 32px rgba(212,178,106,0.32); }
.perf-q-continue:active { transform: scale(0.99); }
.perf-q-continue[disabled] {
  background: rgba(212,178,106,0.18);
  color: rgba(29,22,17,0.5);
  box-shadow: none;
  cursor: default;
}
.perf-q-skip {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(241,238,232,0.6);
  font-size: 13px;
  font-weight: 500;
  border-radius: 12px;
  padding: 10px;
  cursor: pointer;
  font-family: inherit;
}
.perf-q-skip:hover { background: var(--atlas-surface-card); color: #e8eae6; }

@media (max-width: 420px) {
  .perf-q-shell { padding: 14px 14px 110px; }
  .perf-q-title { font-size: 18px; }
  .perf-q-intro { margin-left: 0; margin-top: 8px; }
  .perf-q-pips { grid-template-columns: repeat(10, 1fr); gap: 3px; }
  .perf-q-pip { height: 34px; font-size: 11px; }
}

/* In-DOM toast - non-blocking feedback so a stray double-click doesn't
   stack a queue of OK presses. */
.perf-sess-toast {
  position: fixed;
  left: 50%;
  bottom: calc(120px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(8px);
  background: rgba(28,40,40,0.96);
  border: 1px solid rgba(212,178,106,0.32);
  color: #e8eae6;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 11px 16px;
  border-radius: 999px;
  max-width: min(90vw, 460px);
  text-align: center;
  z-index: 9100;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 14px 40px rgba(0,0,0,0.45);
  transition: opacity 200ms ease, transform 200ms ease;
}
.perf-sess-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ════════════════════════════════════════════════════════════════════
   2 Jun 2026 - Stage 3.5 polish (Harry pass 4):
   • + Add set button below the set table.
   • Action row collapsed into three equal-weight pills (Notes / Swap /
     Flag) with the notes textarea hidden by default. Overrides the
     existing colored swap/flag styles in atlas-sections.js inline CSS
     so the trio reads as one consistent row.
   ════════════════════════════════════════════════════════════════════ */

/* + Add set - sits at the bottom of the set-log-section, full-width
   ghost button that matches the section's quiet aesthetic. */
.ex-add-set-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 10px;
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.ex-add-set-btn:hover {
  border-color: rgba(201, 169, 106, 0.4);
  color: #D4B26A;
  background: rgba(201, 169, 106, 0.06);
}
.ex-add-set-btn:active { transform: scale(0.99); }

/* Pill row - Notes / Swap / Flag. Equal width, low visual weight,
   consistent treatment so the trio reads as a single tool row. */
.ex-action-row--pills {
  display: flex;
  gap: 6px;
  margin-top: 14px;
}
.ex-action-row--pills .ex-pill-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 10px;
  background: var(--atlas-surface-card);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  color: rgba(241, 238, 232, 0.75);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-family: inherit;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  margin-top: 0; /* override the legacy .ex-flag-btn margin-top in inline CSS */
  width: auto;   /* override legacy width: 100% */
}
.ex-action-row--pills .ex-pill-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #F1EEE8;
  border-color: rgba(255, 255, 255, 0.18);
}
.ex-action-row--pills .ex-pill-icon {
  font-size: 13px;
  line-height: 1;
  opacity: 0.85;
}
.ex-action-row--pills .ex-pill-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* Notes pill - when textarea expanded, the pill takes a subtle gold
   tint so the client can see at a glance that they're mid-note. */
.ex-notes-pill[aria-expanded="true"] {
  background: rgba(201, 169, 106, 0.10);
  border-color: rgba(201, 169, 106, 0.30);
  color: #D4B26A;
}
/* Flag pill keeps its red-on-hover affordance. */
.ex-action-row--pills .ex-flag-btn:hover {
  border-color: rgba(224, 104, 91, 0.42);
  color: #E0685B;
  background: rgba(224, 104, 91, 0.06);
}
/* Swap pill keeps its blue-on-hover affordance. */
.ex-action-row--pills .ex-swap-btn:hover {
  border-color: rgba(108, 140, 255, 0.5);
  color: #c5d1ff;
  background: rgba(108, 140, 255, 0.06);
}

/* Notes section - hidden by default, revealed by the pill toggle. */
.ex-notes-section[hidden] { display: none !important; }
.ex-notes-section {
  margin-top: 10px;
}

/* ───────────────────────────────────────────────────────────────────────────
   BRIEF-93 - three-zone gut page: tier bar (Zone 1) + active-phase detail
   (Zone 2) + sample-characteristics + Zone 3 divider. Uses --atlas-* tokens.
   State is conveyed by icon + fill + rail + text (never colour alone).
   ─────────────────────────────────────────────────────────────────────────── */

/* Zone 1 - tier progress bar */
.gtb { margin: var(--atlas-space-5) 0 var(--atlas-space-6); }
.gtb-track {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--atlas-space-3);
}
.gtb-seg { display: flex; flex-direction: column; min-width: 0; }
.gtb-seg-btn {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  width: 100%; min-height: 48px; padding: var(--atlas-space-3);
  background: var(--atlas-surface-card); border: 1px solid var(--atlas-border);
  border-radius: 12px; cursor: pointer; text-align: left; color: var(--atlas-text-body);
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.gtb-seg-btn[aria-disabled] { cursor: default; }
.gtb-seg-btn:hover:not([aria-disabled]) { background: var(--atlas-surface-hover, rgba(255,255,255,.06)); }
.gtb-seg-btn:active:not([aria-disabled]) { transform: scale(.99); }
.gtb-seg-btn:focus-visible { outline: 2px solid var(--atlas-gold); outline-offset: 2px; }
.gtb-seg-top { display: flex; align-items: center; gap: 6px; }
.gtb-seg-tier { font-size: 11px; letter-spacing: .08em; font-weight: 600; color: var(--atlas-text-muted); }
.gtb-seg-name { font-size: 14px; font-weight: 600; color: var(--atlas-text-primary); line-height: 1.25; }
.gtb-seg-status { font-size: 12px; color: var(--atlas-text-muted); font-variant-numeric: tabular-nums; }
.gtb-rail { height: 3px; border-radius: 4px; margin: var(--atlas-space-2) 0 6px; background: transparent; }
.gtb-seg-owner { font-size: 12px; color: var(--atlas-text-body); line-height: 1.3; }
.gtb-seg-owner.gtb-muted { color: var(--atlas-text-faint); }
.gtb-ic { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; }
.gtb-ic-done { color: var(--atlas-gold); }
.gtb-ic-lock { color: var(--atlas-text-faint); }
.gtb-ic-now { width: 9px; height: 9px; border-radius: 50%; background: var(--atlas-gold); box-shadow: 0 0 0 0 var(--atlas-gold-soft); animation: gtb-pulse 1.8s ease-out infinite; }

/* States */
.gtb-completed .gtb-seg-btn { background: var(--atlas-gold-soft); border-color: var(--atlas-gold-soft); }
.gtb-completed .gtb-rail { background: var(--atlas-gold-soft); }
.gtb-current .gtb-seg-btn { border-color: var(--atlas-gold); background: var(--atlas-gold-soft); }
.gtb-current .gtb-seg-name { color: var(--atlas-text-primary); }
.gtb-current .gtb-rail { background: var(--atlas-gold); }
.gtb-upcoming .gtb-seg-btn { background: transparent; }
.gtb-upcoming .gtb-rail { background: transparent; border-top: 2px dashed var(--atlas-border-strong); height: 0; }
.gtb-upcoming .gtb-seg-name, .gtb-upcoming .gtb-seg-status { color: var(--atlas-text-muted); }

@keyframes gtb-pulse {
  0% { box-shadow: 0 0 0 0 var(--atlas-gold-soft); }
  70% { box-shadow: 0 0 0 7px rgba(212,178,106,0); }
  100% { box-shadow: 0 0 0 0 rgba(212,178,106,0); }
}
@media (prefers-reduced-motion: reduce) { .gtb-ic-now { animation: none; } }

/* Expanded inline card (completed summary / upcoming teaser) */
.gtb-card {
  margin-top: var(--atlas-space-2); padding: var(--atlas-space-3);
  background: var(--atlas-bg-elev-1); border: 1px solid var(--atlas-border);
  border-radius: 12px;
}
.gtb-card-h { font-size: 13px; font-weight: 600; color: var(--atlas-text-primary); }
.gtb-card-owner { font-size: 13px; color: var(--atlas-text-body); margin-top: 4px; }
.gtb-card-meta { font-size: 12px; color: var(--atlas-text-muted); margin-top: 4px; line-height: 1.4; }

@media (max-width: 640px) {
  .gtb-track { grid-template-columns: repeat(2, 1fr); }
}

/* Zone 2 - active-phase detail */
.gap {
  margin: 0 0 var(--atlas-space-6); padding: var(--atlas-space-5);
  background: var(--atlas-surface-card); border: 1px solid var(--atlas-gold-soft);
  border-radius: 16px;
}
.gap-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--atlas-space-3); }
.gap-head-name { font-size: 18px; font-weight: 700; color: var(--atlas-text-primary); line-height: 1.2; }
.gap-head-meta { font-size: 13px; color: var(--atlas-text-muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.gap-owner-chip {
  flex: none; font-size: 12px; font-weight: 600; color: var(--atlas-gold);
  padding: 3px 9px; border: 1px solid var(--atlas-gold-soft); border-radius: 999px;
  background: var(--atlas-gold-soft);
}
.gap-block { margin-top: var(--atlas-space-4); }
.gap-block-lbl { font-size: 12px; letter-spacing: .04em; font-weight: 600; color: var(--atlas-text-muted); margin-bottom: 6px; }
.gap-supps { display: flex; flex-direction: column; gap: 6px; }
.gap-supp {
  font-size: 14px; color: var(--atlas-text-primary); padding: 8px 10px;
  background: var(--atlas-bg-elev-1); border: 1px solid var(--atlas-border); border-radius: 8px;
}
.gap-cta { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--atlas-gold); cursor: pointer; }
.gap-cta:hover { text-decoration: underline; }
.gap-behav-row, .gap-success-row {
  font-size: 14px; color: var(--atlas-text-body); padding: 6px 0; line-height: 1.4;
}
.gap-success-row.gap-muted, .gap-muted { color: var(--atlas-text-muted); }
.gap-next {
  margin-top: var(--atlas-space-4); padding-top: var(--atlas-space-3);
  border-top: 1px solid var(--atlas-border); font-size: 13px; color: var(--atlas-text-body);
}

/* Zone 3 divider + sample-characteristics */
.gut-zone3-head {
  margin: var(--atlas-space-6) 0 var(--atlas-space-3); padding-top: var(--atlas-space-4);
  border-top: 1px solid var(--atlas-border);
}
.gut-zone3-title { font-size: 13px; letter-spacing: 0.06em; font-weight: 600; color: var(--atlas-text-muted); text-transform: uppercase; }
.gut-obs-grid .gut-marker-name { color: var(--atlas-text-body); }
.gut-obs-grid .gut-marker-row { opacity: .92; }

/* ── BRIEF-93h - client gut page polish ─────────────────────────────────── */

/* §6 Ask-Atlas star - compact sparkle next to markers + supplements. */
.gut-ask-star {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; min-width: 22px; padding: 0; margin-left: 4px;
  font-size: 12px; line-height: 1; color: #D4B26A; cursor: pointer;
  background: rgba(212,178,106,0.10); border: 1px solid rgba(212,178,106,0.28);
  border-radius: 50%; vertical-align: middle; transition: background .15s, transform .12s;
}
.gut-ask-star:hover { background: rgba(212,178,106,0.22); transform: scale(1.08); }
.gut-ask-star:focus-visible { outline: 2px solid rgba(212,178,106,0.6); outline-offset: 2px; }

/* §2 Supplement pills (Zone 2 active phase + Zone 3 finding cards). */
.gut-supp-pills {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; margin-top: 6px;
}
.gut-supp-pill {
  position: relative; padding: 11px 12px 12px; border-radius: 12px;
  background: var(--atlas-surface-nested); border: 1px solid rgba(255,255,255,0.07);
  border-left: 3px solid rgba(212,178,106,0.55);
}
.gut-supp-pill-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.gut-supp-qty { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: #D4B26A; text-transform: uppercase; }
.gut-supp-prod { font-size: 14px; font-weight: 600; color: #F1EEE8; line-height: 1.25; }
.gut-supp-dose { font-size: 13px; color: #F1EEE8; margin-top: 2px; font-variant-numeric: tabular-nums; }
.gut-supp-brand { font-size: 11px; color: rgba(241,238,232,0.6); margin-top: 2px; }
.gut-supp-cad { font-size: 11px; color: rgba(241,238,232,0.72); margin-top: 4px; line-height: 1.3; }
.gut-supp-dur { font-size: 11px; color: rgba(241,238,232,0.5); margin-top: 3px; font-variant-numeric: tabular-nums; }
.gut-supp-note { font-size: 11px; color: #9FE1CB; margin-top: 4px; font-style: italic; }

/* §1 Coach-action block - only rendered in coach view-as; flag the context. */
.gut-block-coach { border-left: 2px solid rgba(212,178,106,0.4); padding-left: 10px; }
.gut-coach-only {
  font-size: 9px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: #101514; background: #D4B26A; border-radius: 8px; padding: 1px 6px; margin-left: 6px;
}

/* §4/§5 Expandable marker rows. <details>/<summary> with the disclosure
   triangle suppressed; summary reuses the existing 4-col grid. */
.gut-marker-d { border-bottom: 1px solid rgba(255,255,255,0.04); }
.gut-marker-d:last-child { border-bottom: none; }
.gut-marker-d > summary { display: grid; cursor: pointer; list-style: none; border-bottom: none; }
.gut-marker-d > summary::-webkit-details-marker { display: none; }
.gut-marker-d > summary::marker { content: ''; }
.gut-marker-d > summary:hover { background: var(--atlas-surface-nested); }
.gut-marker-d[open] > summary { background: rgba(212,178,106,0.05); }
.gut-marker-namecell { min-width: 0; }
.gut-marker-detail { padding: 4px 18px 16px; }
.gut-marker-detail-body { font-size: 13px; line-height: 1.5; color: rgba(241,238,232,0.82); }
.gut-marker-detail-body.gut-muted { color: rgba(241,238,232,0.45); font-style: italic; }
.gut-marker-detail-meta {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px;
  font-size: 11px; color: rgba(241,238,232,0.5); font-variant-numeric: tabular-nums;
}

/* §8 Consolidated foods - cadence groups + category-grouped pulled foods. */
.fuel-foods-consolidated .fuel-cad-group { margin-top: 14px; }
.fuel-foods-consolidated .fuel-cad-group:first-of-type { margin-top: 10px; }
.fuel-cad-head {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: #D4B26A; margin-bottom: 6px;
}
.fuel-cad-head::before { content: '◯  '; color: rgba(212,178,106,0.6); }
.fuel-cad-group.avoid .fuel-cad-head { color: #E8C97E; }
.fuel-cad-group.avoid .fuel-cad-head::before { color: rgba(250,199,117,0.6); }
/* 23 Jul 2026 - DS v3: one row per food (name line + muted detail line),
   rows separated by hairline dividers instead of the old inline list. */
.fuel-cad-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.fuel-cad-list li { font-size: 13px; color: #F1EEE8; line-height: 1.4; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.fuel-cad-list li:first-child { padding-top: 4px; }
.fuel-cad-list li:last-child { border-bottom: none; padding-bottom: 4px; }
.fuel-cad-name { display: block; font-weight: 600; color: #EEF3F1; }
.fuel-cad-detail { display: block; margin-top: 2px; font-size: 12px; color: rgba(241,238,232,0.6); }
.fuel-cat-groups { display: flex; flex-direction: column; gap: 8px; }
.fuel-cat-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.fuel-cat-lbl {
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(241,238,232,0.45); min-width: 78px; flex-shrink: 0;
}
.fuel-cat-pills { line-height: 1.7; }
/* Avoid foods: amber name + muted qualifier, prose (not pills). Dot-joined via
   the shared .gut-food-chip::after separator above. */
.gut-food-chip.avoid { display: inline; background: none; border: none; color: #FAD9A6; }
.gut-chip-name { font-weight: 500; }
.gut-chip-qual { font-size: 11px; color: rgba(250,199,117,0.55); font-weight: 400; margin-left: 4px; }

/* ═══════════════════════════════════════════════════════════════════════════
 * DS v2 polish layer (9 Jul 2026) - additive, appended last so it wins ties.
 * Scope: glass depth on cards, unified press feedback, gold focus ring.
 * No layout, no geometry, no new components. Base sweep: #2E3E3E→#101514,
 * #3A4D4D→#1D2524, #445858→#263332 across css/js/html (comments included).
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Glass depth: inner top highlight + soft drop. Matches ATLAS-V2-PROTOTYPE. */
.atlas-card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 40px rgba(0,0,0,0.35);
  transition: border-color var(--atlas-dur-fast) var(--atlas-ease),
              background var(--atlas-dur-fast) var(--atlas-ease),
              transform var(--atlas-dur-fast) var(--atlas-ease);
}

/* Unified press feedback: every real button compresses slightly on touch.
   Transform-only (no layout shift), 180ms out, interruptible. */
button:not([disabled]) {
  transition: transform var(--atlas-dur-fast) var(--atlas-ease),
              background var(--atlas-dur-fast) var(--atlas-ease),
              border-color var(--atlas-dur-fast) var(--atlas-ease),
              color var(--atlas-dur-fast) var(--atlas-ease);
}
button:not([disabled]):active { transform: scale(0.97); }

/* Keyboard focus: gold ring, consistent with .sess-audio-toggle precedent. */
:focus-visible { outline: 2px solid rgba(212,178,106,0.7); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .atlas-card, button:not([disabled]) { transition: none; }
  button:not([disabled]):active { transform: none; }
}


/* 9 Jul 2026 - zone-target rows are tappable (deep-link to Sessions) */
.perf-cond-prog-row[data-cond-goto-sessions] { cursor: pointer; }
.perf-cond-prog-row[data-cond-goto-sessions]:hover .perf-cond-prog-label { color: var(--atlas-text-primary); }

/* 9 Jul 2026 - "Ask Atlas how it works" link on supp/peptide detail. Replaces
   the long mechanism essay in the client view; depth lives in the concierge. */
.fuel-ask-learn {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--atlas-gold, #D4B26A); cursor: pointer; text-decoration: none;
}
.fuel-ask-learn:hover { color: var(--atlas-gold-bright, #E8CC8C); }

/* 10 Jul 2026 - stack detail: schedule day-pills + bulleted larger sections */
.fuel-day-pills { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 3px; }
.fuel-day-pill {
  font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
  padding: 3px 7px; border-radius: 6px; min-width: 24px; text-align: center;
  background: rgba(255,255,255,0.05); color: var(--atlas-text-faint);
  border: 1px solid var(--atlas-divider);
}
.fuel-day-pill.on {
  background: rgba(74,157,107,0.18); color: #6CD693; border-color: rgba(74,157,107,0.35);
}
.fuel-sched-note { font-size: 13px; color: var(--atlas-text-body); }
.fuel-bullets { margin: 4px 0 0; padding-left: 18px; list-style: disc; }
.fuel-bullets li { font-size: 13px; line-height: 1.5; color: var(--atlas-text-body); margin-bottom: 3px; }
.fuel-bullets li::marker { color: var(--atlas-text-faint); }
.fuel-detail-body-text { font-size: 13px; line-height: 1.5; color: var(--atlas-text-body); }

/* ══════════════════════════════════════════════════════════════════════════
   DS v2 TRAINING RE-SKIN  (10 Jul 2026 · RESTYLE-BRIEF-16 §3)
   Brings the near-black glass look from ATLAS-TRAINING-REDESIGN-PROTOTYPE.html
   to the live Training tab. SCOPED ENTIRELY UNDER .atlas-perf so Nutrition
   (which reuses .perf-tab / .perf-view / .perf-card) and every other surface
   are untouched. Additive override layer only - the original perf-* rules are
   left intact, so this reverts by deleting this block. Reuses the existing
   --atlas-* DS tokens (surface-card, border, gold, up) already defined at :root.
   ══════════════════════════════════════════════════════════════════════════ */

/* Sub-tab nav → segmented pill bar (the prototype's signature chrome) */
.atlas-perf .atlas-perf-tabs {
  gap: 3px;
  background: var(--atlas-surface-nested);
  border: 1px solid var(--atlas-border);
  border-radius: 999px;
  padding: 3px;
  margin-bottom: 22px;
}
.atlas-perf .perf-tab {
  flex: 1 1 0;
  text-align: center;
  padding: 9px 12px;
  border-radius: 999px;
  border-bottom: none;
  margin-bottom: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(241,238,232,0.5);
}
.atlas-perf .perf-tab:hover { color: rgba(241,238,232,0.82); }
.atlas-perf .perf-tab.active {
  background: rgba(255,255,255,0.09);
  color: #F2F5F4;
  border-bottom: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Header title - lift the weight to match the mock */
.atlas-perf .atlas-perf-title { font-size: 23px; font-weight: 700; letter-spacing: -0.02em; }

/* Generic glass card - rounder, inner highlight + soft drop shadow */
.atlas-perf .perf-card {
  background: var(--atlas-surface-card);
  border: 1px solid var(--atlas-border);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 40px rgba(0,0,0,0.32);
}

/* Phase hero - keep the gold rail, round it up, add the glass depth */
.atlas-perf .perf-phase-hero {
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 40px rgba(0,0,0,0.32);
}

/* Pills - brighter DS gold/teal/green, hairline border, a touch more padding */
.atlas-perf .perf-pill { padding: 4px 10px; font-size: 10.5px; border: 1px solid transparent; }
.atlas-perf .perf-pill-gold,
.atlas-perf .perf-pill-amber { background: rgba(212,178,106,0.14); color: #E8CC8C; border-color: rgba(212,178,106,0.30); }
.atlas-perf .perf-pill-green { background: rgba(108,214,147,0.14); color: #6CD693; border-color: rgba(108,214,147,0.30); }
.atlas-perf .perf-pill-red,
.atlas-perf .perf-pill-down   { background: rgba(232,138,138,0.14); color: #E88A8A; border-color: rgba(232,138,138,0.30); }
.atlas-perf .perf-pill-muted { background: rgba(255,255,255,0.05); color: #B8C2BF; border-color: var(--atlas-border); }

/* Coming-up rows - glass tiles */
.atlas-perf .perf-comingup-item {
  border-radius: 16px;
  border: 1px solid var(--atlas-border);
  background: var(--atlas-surface-card);
  margin-bottom: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

/* Today card detail - swap the teal-grey panel for near-black glass */
.atlas-perf .perf-today-detail {
  background: var(--atlas-surface-card);
  border-color: rgba(212,178,106,0.30);
}

/* Lift + benchmark + ratio cards - rounder glass */
.atlas-perf .perf-lift-card,
.atlas-perf .perf-bench-card,
.atlas-perf .perf-ratio-card {
  background: var(--atlas-surface-card);
  border: 1px solid var(--atlas-border);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.atlas-perf .perf-add-bench-tile { border-radius: 16px; }

/* e1RM chooser select - DS input treatment */
.atlas-perf .perf-e1rm-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--atlas-surface-nested);
  border: 1px solid var(--atlas-border);
  color: #F2F5F4;
  border-radius: 10px;
  padding: 8px 30px 8px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.atlas-perf .perf-e1rm-select-wrap { position: relative; }
.atlas-perf .perf-e1rm-select-wrap::after {
  content: '';
  position: absolute;
  right: 13px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid rgba(241,238,232,0.5);
  border-bottom: 2px solid rgba(241,238,232,0.5);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* Reviewable phase rows - hover affordance + rounded item wrap */
.atlas-perf .perf-history-phase-item { border-radius: 12px; transition: background 140ms ease; }
.atlas-perf .perf-history-phase-item:hover { background: rgba(255,255,255,0.02); }
.atlas-perf .perf-history-phase-item[data-open="true"] { background: rgba(255,255,255,0.03); }

/* ── DS v2 re-skin · pass 2 (10 Jul 2026) ──────────────────────────────────
   Depth + accents so the glass reads as raised on the near-black bg, the week
   strip becomes glass tiles, and the Today card + week's today-cell pick up
   the gold wash from the mock. Still scoped under .atlas-perf. */

/* Cards get a faint top-highlight gradient + a touch more border so they
   separate from the background instead of blending in. */
.atlas-perf .perf-card,
.atlas-perf .perf-lift-card,
.atlas-perf .perf-bench-card,
.atlas-perf .perf-ratio-card,
.atlas-perf .perf-comingup-item {
  background-image: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0) 60%);
  border-color: rgba(255,255,255,0.10);
}

/* Week strip → glass day tiles; today cell gets the gold wash + ring. */
.atlas-perf .perf-week-pill {
  background: var(--atlas-surface-card);
  border: 1px solid var(--atlas-border);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.atlas-perf .perf-week-pill.is-today {
  border-color: rgba(212,178,106,0.5);
  background-image: linear-gradient(180deg, rgba(212,178,106,0.10), transparent 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px rgba(212,178,106,0.15);
}

/* Today card - rounder, subtle state wash, gilded primary CTA (the mock's
   signature gold button). Done state keeps its green rather than gold. */
.atlas-perf .perf-today-card .perf-today-cta {
  border-radius: 20px 20px 0 0;
  background-image: linear-gradient(180deg, rgba(212,178,106,0.06), transparent 65%);
}
.atlas-perf .perf-today-card .perf-today-cta.is-done {
  background-image: linear-gradient(180deg, rgba(108,214,147,0.06), transparent 65%);
}
.atlas-perf .perf-today-detail { border-radius: 0 0 20px 20px; }
.atlas-perf .perf-today-cta-btn {
  background: var(--atlas-gold-grad);
  color: #141008;
  border-radius: 12px;
  padding: 11px 16px;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(212,178,106,0.22), inset 0 1px 0 rgba(255,255,255,0.35);
}
.atlas-perf .perf-today-cta-btn .perf-today-cta-icon { color: #141008; }

/* Phase hero - faint top highlight to match the other glass surfaces. */
.atlas-perf .perf-phase-hero { background-image: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0) 55%), linear-gradient(90deg, rgba(212,178,106,0.10) 0%, rgba(212,178,106,0.02) 35%, transparent 65%); }

/* RESTYLE-BRIEF-17 A1 - week-strip day is selectable; the chosen day gets a teal
   ring (distinct from the gold today cell) so the panel below reads as "this day". */
.atlas-perf .perf-week-pill[data-perf-day-select] { cursor: pointer; }
.atlas-perf .perf-week-pill.is-selected {
  border-color: rgba(127,209,200,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px rgba(127,209,200,0.25);
}

/* RESTYLE-BRIEF-17 E1 - History "previous phases" as clean glass review cards.
   Each phase is its own card; expanding loads that phase's session list rather
   than repeating the header stats. */
.atlas-perf .perf-history-phase-list { display: flex; flex-direction: column; gap: 10px; }
.atlas-perf .perf-history-phase-item {
  background: var(--atlas-surface-card);
  border: 1px solid var(--atlas-border);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden;
  transition: border-color 140ms ease;
}
.atlas-perf .perf-history-phase-item:not(.perf-history-phase-item--static) .perf-history-phase-row { cursor: pointer; }
.atlas-perf .perf-history-phase-item:not(.perf-history-phase-item--static):hover { border-color: var(--atlas-border-strong); }
.atlas-perf .perf-history-phase-item[data-open="true"] { border-color: rgba(212,178,106,0.30); }
.atlas-perf .perf-history-phase-row { padding: 14px 16px; border-bottom: none; }
.atlas-perf .perf-history-phase-end { justify-self: end; display: inline-flex; align-items: center; gap: 8px; }
.atlas-perf .perf-history-phase-chevron { color: #7C8886; transition: transform .2s ease; }
.atlas-perf .perf-history-phase-item[data-open="true"] .perf-history-phase-chevron { transform: rotate(180deg); }
.atlas-perf .perf-history-phase-body { display: none; padding: 2px 16px 16px; border-top: 1px solid var(--atlas-divider); }
.atlas-perf .perf-history-phase-item[data-open="true"] .perf-history-phase-body { display: block; }
.atlas-perf .perf-hpr-sub { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #7C8886; margin: 14px 0 8px; }
.atlas-perf .perf-hpr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.atlas-perf .perf-hpr-ba-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--atlas-divider); }
.atlas-perf .perf-hpr-ba-k { flex: 1; font-size: 13px; color: #c9c4bb; }
.atlas-perf .perf-hpr-ba-v { font-size: 13px; color: #8F9A98; }
.atlas-perf .perf-hpr-ba-v b { color: #F2F5F4; font-weight: 700; }
.atlas-perf .perf-hpr-ba-delta { width: 52px; text-align: right; font-weight: 700; font-size: 12px; }
.atlas-perf .perf-hpr-empty { font-size: 12.5px; color: #7C8886; padding: 6px 0; }

/* RESTYLE-BRIEF-17 - History review: block-level Atlas objective + per-movement
   best working set (achievement, not prescription). */
.atlas-perf .perf-rev-ask {
  display: flex; align-items: center; gap: 9px; width: 100%;
  margin: 4px 0 12px; padding: 11px 13px; border-radius: 10px;
  background: var(--atlas-surface-nested); border: 1px solid rgba(79,163,165,0.30);
  color: #7FD1C8; font-family: inherit; font-size: 12.5px; font-weight: 600;
  text-align: left; cursor: pointer; transition: background 140ms ease;
}
.atlas-perf .perf-rev-ask:active { background: var(--atlas-surface-hover); }
.atlas-perf .perf-rev-ex { display: flex; align-items: baseline; gap: 12px; padding: 9px 2px; border-top: 1px solid var(--atlas-divider); }
.atlas-perf .perf-rev-ex:first-child { border-top: none; }
.atlas-perf .perf-rev-ex-name { flex: 1; font-size: 13.5px; font-weight: 600; color: #F2F5F4; }
.atlas-perf .perf-rev-ex-best { font-size: 13px; font-weight: 700; color: #7FD1C8; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* RESTYLE-BRIEF-17 - phase-plan block cards stacked full-width with more room,
   and the aims rendered as a clean bulleted list instead of a run-on string. */
.atlas-perf .perf-microcycle-grid--stacked { display: flex; flex-direction: column; gap: 10px; }
.atlas-perf .perf-microcycle-grid--stacked .perf-microcycle-card { width: 100%; text-align: left; padding: 16px 18px; }
.atlas-perf .perf-phase-aims-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.atlas-perf .perf-phase-aims-list li { position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.5; color: #B8C2BF; }
.atlas-perf .perf-phase-aims-list li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--atlas-gold, #D4B26A); }
.atlas-perf .perf-phase-aims-line { font-size: 13.5px; line-height: 1.55; color: #B8C2BF; margin: 0; }

/* RESTYLE-BRIEF-17 C2 - compact per-domain goal card (Nutrition / Metrics tabs).
   Global (NOT .atlas-perf scoped) because the Metrics hub renders outside it. */
.dgs { background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 16px 18px 8px; margin: 18px 0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }
.dgs-head { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8F9A98; margin-bottom: 4px; }
.dgs-sub { font-size: 12px; color: #6b7676; margin-bottom: 12px; line-height: 1.45; }
.dgs-row { padding: 10px 0; border-top: 1px solid rgba(255,255,255,0.05); }
.dgs-row:first-of-type { border-top: none; }
.dgs-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.dgs-title { font-size: 13.5px; font-weight: 600; color: #F2F5F4; }
.dgs-meta { font-size: 11.5px; color: #8F9A98; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dgs-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.07); overflow: hidden; margin-top: 7px; }
.dgs-bar i { display: block; height: 100%; border-radius: 3px; background: rgba(212,178,106,0.8); }
.dgs-manage { display: block; width: 100%; text-align: center; margin-top: 12px; padding: 10px 0; background: none; border: none; border-top: 1px solid rgba(255,255,255,0.05); color: #D4B26A; font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.dgs-manage:hover { color: #E8CC8C; }

/* RESTYLE-BRIEF-17 - goal how/why note fields + their read display. */
.perf-goal-field textarea { width: 100%; background: var(--atlas-surface-card); border: 1px solid rgba(241,238,232,0.12); border-radius: 8px; color: var(--ink, #f1eee8); font-family: inherit; font-size: 16px; padding: 10px 12px; resize: vertical; line-height: 1.45; box-sizing: border-box; }
.perf-goal-field textarea:focus { outline: none; border-color: rgba(212,178,106,0.5); }
.perf-goal-notes { margin-top: 9px; display: flex; flex-direction: column; gap: 6px; }
.perf-goal-note { display: flex; gap: 9px; font-size: 12px; color: rgba(241,238,232,0.6); line-height: 1.45; }
.perf-goal-note-k { flex-shrink: 0; width: 30px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(212,178,106,0.75); padding-top: 1px; }
/* Metric-link live baseline line in the goal editor. */
.perf-goal-metric-live { font-size: 12px; color: rgba(241,238,232,0.55); line-height: 1.4; }


/* ══════════════════════════════════════════════════════
   DS v3 (23 Jul 2026) — Atmosphere Glass ground layer.
   Approved vs the 48-screen gallery. Tokens above carry the
   palette; this block adds the atmosphere + shadow recipe.
   ══════════════════════════════════════════════════════ */
/* body atmosphere lives on body::before (line ~154) — Option C corner radials. */
.card-glow, .journal-card, .atlas-card, .meal-card-library, .nutr-builder-card,
.supp-card, .ucard, .chart-wrap, .nutrition-summary, .ongoing-banner, .morning-prompt,
.ai-unified-panel, .nutr-inspire-card, .nutr-inspire-remaining {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 18px 44px rgba(0,0,0,0.34);
}


/* DS v3 (23 Jul) — pre-auth chrome: the tab bar has no business on the login screen. */
body:has(#login-screen:not(.hidden)) .atlas-tabbar { display: none !important; }

/* DS v3 — uniform 12px rhythm between metric cards */
#met-fit-main .met-fit-card, #met-fit-main .met-trend-card { margin-bottom: 12px; }