/* ═══════════════════════════════════════════════
   MOMENTUM — Design System v2  (Liquid Glass)
   Phase 1: Tokens + Components
   ═══════════════════════════════════════════════ */

/* Global hidden attribute support */
[hidden] { display: none !important; }

/* ── 1. Tokens ──────────────────────────────── */
:root {
  color-scheme: light;

  /* Canvas */
  --canvas:          #f5f4f0;
  --canvas-warm:     #faf9f5;

  /* Surface (cards) */
  --surface-0:       rgba(255, 254, 251, 0.96);
  --surface-1:       rgba(255, 254, 251, 0.88);
  --surface-2:       rgba(255, 254, 251, 0.72);
  --surface-muted:   rgba(240, 238, 232, 0.72);

  /* Glass (nav / sheet) */
  --glass-bg:        rgba(250, 249, 245, 0.68);
  --glass-border:    rgba(255, 255, 255, 0.55);
  --glass-shadow:    0 8px 32px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255,255,255,0.6) inset;

  /* Text */
  --text-primary:    #1c1b18;
  --text-secondary:  #6b6860;
  --text-tertiary:   #a09d94;

  /* Hairline */
  --hairline:        rgba(0, 0, 0, 0.06);
  --hairline-strong: rgba(0, 0, 0, 0.10);

  /* Accent palette — muted, botanical */
  --sage:            #7a9e74;
  --sage-light:      #e4ede2;
  --sage-ultra:      rgba(122, 158, 116, 0.12);
  --butter:          #c8a84b;
  --butter-light:    #f5edd4;
  --butter-ultra:    rgba(200, 168, 75, 0.12);
  --blush:           #c07a72;
  --blush-light:     #f3e1de;
  --blush-ultra:     rgba(192, 122, 114, 0.10);
  --sky:             #6a9abf;
  --sky-light:       #deeaf4;
  --sky-ultra:       rgba(106, 154, 191, 0.12);

  /* Typography scale */
  --t-xs:   11px;
  --t-sm:   13px;
  --t-md:   15px;
  --t-lg:   17px;
  --t-xl:   22px;
  --t-2xl:  28px;
  --t-display: 72px;

  /* Spacing */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  52px;

  /* Radius */
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   18px;
  --r-xl:   22px;
  --r-2xl:  28px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-xs:  0 1px 3px rgba(0,0,0,0.06);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.07), 0 0 0 0.5px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);

  /* Legacy compat aliases (keep app.js untouched) */
  --color-canvas:         var(--canvas);
  --color-surface:        var(--surface-0);
  --color-surface-muted:  var(--surface-muted);
  --color-text:           var(--text-primary);
  --color-text-muted:     var(--text-secondary);
  --color-hairline:       var(--hairline);
  --color-sage:           var(--sage);
  --color-sage-soft:      var(--sage-light);
  --color-butter:         var(--butter);
  --color-butter-soft:    var(--butter-light);
  --color-blush:          var(--blush);
  --color-blush-soft:     var(--blush-light);

  /* Legacy spacing aliases */
  --space-1: var(--s-1); --space-2: var(--s-2); --space-3: var(--s-3);
  --space-4: var(--s-4); --space-5: var(--s-5); --space-6: var(--s-6);
  --space-7: var(--s-7); --space-8: var(--s-8);

  /* Legacy radius aliases */
  --radius-md: var(--r-md); --radius-lg: var(--r-lg);
  --radius-xl: var(--r-xl); --radius-pill: var(--r-pill);

  /* Legacy shadow alias */
  --shadow-soft: var(--shadow-sm);

  /* Legacy text aliases */
  --text-xs: var(--t-xs); --text-sm: var(--t-sm); --text-md: var(--t-md);
  --text-lg: var(--t-lg); --text-xl: var(--t-xl); --text-display: var(--t-display);
}

/* ── 2. Reset + Base ────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--canvas);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(192,122,114,0.13), transparent),
    radial-gradient(ellipse 60% 40% at 100% 60%, rgba(122,158,116,0.08), transparent);
  color: var(--text-primary);
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "PingFang SC", "Hiragino Sans GB", Inter, system-ui, sans-serif;
  font-size: var(--t-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; }
h1, h2, h3, h4, p { margin: 0; }

a { color: inherit; text-decoration: none; }

/* ── 3. Typography ──────────────────────────── */
.label-xs {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.label-sm {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

.body-sm  { font-size: var(--t-sm); line-height: 1.45; }
.body-md  { font-size: var(--t-md); line-height: 1.5; }

/* Legacy label aliases */
.eyebrow, .section-label {
  margin: 0 0 var(--s-2);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

h1 {
  font-size: var(--t-2xl);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--t-xl);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--t-lg);
  font-weight: 500;
  line-height: 1.3;
}

/* ── 4. App Shell ───────────────────────────── */
body.locked { overflow: hidden; }

body.locked .app-shell,
body.locked .toast { visibility: hidden; }

.app-shell {
  width: min(100%, 460px);
  min-height: 100vh;
  margin: 0 auto;
  padding: var(--s-6) var(--s-5) 112px;
}

/* ── 5. Access Gate ─────────────────────────── */
.access-gate {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--s-6);
  background-color: var(--canvas);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(192,122,114,0.15), transparent),
    radial-gradient(ellipse 60% 40% at 100% 60%, rgba(122,158,116,0.10), transparent);
}

body.locked .access-gate { display: flex; }

.access-card {
  width: min(100%, 400px);
  background: var(--surface-0);
  border: 0.5px solid var(--hairline-strong);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-lg);
  padding: var(--s-7);
}

.access-copy {
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

.access-field {
  display: block;
  margin-top: var(--s-7);
}

.access-button {
  width: 100%;
  margin-top: var(--s-5);
}

.access-error {
  min-height: 20px;
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  color: var(--blush);
}

/* ── 6. Top Bar ─────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-2) 0 var(--s-6);
}

.today-pill {
  flex: 0 0 auto;
  padding: 7px 14px;
  background: var(--surface-1);
  border: 0.5px solid var(--hairline-strong);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-xs);
  color: var(--text-secondary);
  font-size: var(--t-sm);
  font-weight: 450;
  text-align: center;
  backdrop-filter: blur(8px);
}

/* ── 7. View transitions ────────────────────── */
.view {
  display: none;
  opacity: 0;
  transform: translateY(6px);
}

.view.active {
  display: block;
  animation: view-in 240ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes view-in {
  to { opacity: 1; transform: translateY(0); }
}

/* ── 8. Cards (base surface) ────────────────── */
.card {
  background: var(--surface-0);
  border: 0.5px solid var(--hairline);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Keep legacy class names working — map to new card */
.hero,
.training-panel,
.progress-panel,
.today-section {
  background: var(--surface-0);
  border: 0.5px solid var(--hairline);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
}

/* ── 9. Home ────────────────────────────────── */

/* Hero: countdown */
.hero {
  padding: var(--s-6) var(--s-6) var(--s-5);
}

.countdown-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-3);
}

.countdown-row h2 {
  font-size: var(--t-display);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--text-primary);
}

.countdown-row small {
  margin-left: var(--s-2);
  font-size: var(--t-xl);
  font-weight: 300;
  color: var(--text-secondary);
  vertical-align: baseline;
}

/* Training panel */
.training-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-3);
  padding: var(--s-5) var(--s-6);
}

.training-panel p:not(.section-label) {
  margin-top: var(--s-1);
  font-size: var(--t-sm);
  color: var(--text-secondary);
  line-height: 1.4;
}

.training-plan-card {
  align-items: flex-start;
}

.training-plan-copy {
  min-width: 0;
}

.training-plan-name {
  margin-top: var(--s-1);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--sage);
}

.training-status-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-3);
  font-size: var(--t-xs);
  color: var(--text-tertiary);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 var(--s-3);
  border-radius: var(--r-pill);
  background: var(--surface-muted);
  color: var(--text-secondary);
  border: 0.5px solid var(--hairline);
  font-weight: 600;
}

.status-pill[data-status="completed"] {
  background: var(--sage-light);
  color: #3a5c35;
}

.status-pill[data-status="in_progress"] {
  background: var(--butter-light);
  color: #7a5c1a;
}

.training-action-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-2);
  min-width: 116px;
}

.quiet-link-button,
.back-button {
  min-height: 40px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
}

.quiet-link-button {
  border: 0.5px solid var(--hairline);
  background: var(--surface-muted);
}

.back-button {
  margin-bottom: var(--s-4);
  padding: 0;
  color: var(--sage);
}

/* Home goals row */
.home-goals-panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.home-goal-item {
  background: var(--surface-0);
  border: 0.5px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--s-4) var(--s-4) var(--s-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.home-goal-label {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.home-goal-value {
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text-primary);
}

.home-goal-target {
  font-size: var(--t-xs);
  color: var(--text-tertiary);
}

/* ── 10. Buttons ────────────────────────────── */
.quiet-button,
.primary-button,
.nav-item {
  min-height: 44px;
  border: 0;
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: transform 80ms ease, opacity 100ms ease;
}

.quiet-button:active,
.primary-button:active,
.nav-item:active {
  transform: scale(0.97);
  opacity: 0.85;
}

.quiet-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-width: 96px;
  padding: 10px 16px;
  background: var(--surface-muted);
  color: var(--text-primary);
  font-size: var(--t-sm);
  font-weight: 500;
  border: 0.5px solid var(--hairline);
  box-shadow: var(--shadow-xs);
}

.quiet-button.done {
  background: var(--sage-light);
  color: #3a5c35;
  border-color: rgba(122, 158, 116, 0.2);
}

.primary-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--s-5);
  background: var(--sage-light);
  color: #354d31;
  font-size: var(--t-sm);
  font-weight: 600;
  border: 0.5px solid rgba(122, 158, 116, 0.25);
  box-shadow: var(--shadow-xs);
}

.checkin-submit {
  width: 100%;
  margin-top: var(--s-5);
  background: var(--text-primary);
  color: var(--canvas-warm);
  border-color: transparent;
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: var(--r-xl);
  min-height: 52px;
}

.checkin-submit:active {
  background: #3a3832;
}

/* ── 11. Today page ─────────────────────────── */
.today-section {
  margin-top: var(--s-3);
  padding: var(--s-6);
}

.today-section:first-child { margin-top: 0; }

/* Workout card */
.workout-card {
  background:
    linear-gradient(145deg, var(--sage-ultra) 0%, var(--surface-0) 70%);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-height: 220px;
  justify-content: space-between;
}

.workout-card h2 {
  max-width: 11em;
  font-size: var(--t-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.workout-meta {
  font-size: var(--t-sm);
  color: var(--text-secondary);
  line-height: 1.45;
}

.workout-note {
  font-size: var(--t-xs);
  color: var(--text-tertiary);
  line-height: 1.5;
}

.workout-button {
  width: 100%;
  min-height: 50px;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--surface-0);
  color: var(--text-primary);
  font-size: var(--t-md);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  border: 0.5px solid var(--hairline);
  transition: transform 80ms ease, box-shadow 80ms ease;
}

.workout-button:active {
  transform: scale(0.98);
  box-shadow: var(--shadow-xs);
}

.today-workout-summary {
  min-height: 168px;
}

.plan-detail-card,
.active-lesson-card,
.completion-card {
  background: var(--surface-0);
}

.plan-detail-card h2,
.active-lesson-card h2,
.completion-card h2 {
  font-size: var(--t-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.18;
}

.lesson-list {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-5);
}

.lesson-row {
  width: 100%;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 0.5px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--surface-muted);
  color: var(--text-primary);
  text-align: left;
  cursor: default;
}

.course-start-row > span {
  min-width: 0;
}

.lesson-row strong,
.lesson-row small,
.lesson-row em {
  display: block;
}

.lesson-row strong {
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.25;
}

.lesson-row small {
  margin-top: 3px;
  font-size: var(--t-xs);
  color: var(--text-tertiary);
}

.lesson-row em {
  flex: 0 0 auto;
  min-width: 64px;
  padding: 5px 9px;
  border-radius: var(--r-pill);
  background: var(--surface-0);
  color: var(--text-secondary);
  font-style: normal;
  font-size: var(--t-xs);
  font-weight: 600;
  text-align: center;
  border: 0.5px solid var(--hairline);
}

.lesson-row.current {
  background: var(--sage-ultra);
  border-color: rgba(122, 158, 116, 0.28);
}

.lesson-row.completed em {
  background: var(--sage-light);
  color: #3a5c35;
}

.lesson-row.locked {
  opacity: 0.62;
}

.lesson-start-button {
  flex: 0 0 auto;
  min-width: 68px;
  min-height: 38px;
  border: 0.5px solid rgba(122, 158, 116, 0.25);
  border-radius: var(--r-md);
  background: var(--sage-light);
  color: #354d31;
  font-size: var(--t-sm);
  font-weight: 700;
  cursor: pointer;
}

.active-course-list {
  display: grid;
  gap: var(--s-2);
  margin: var(--s-5) 0;
}

.active-course-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--surface-muted);
  border: 0.5px solid var(--hairline);
}

.active-course-item > span {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-0);
  color: var(--sage);
  font-size: var(--t-xs);
  font-weight: 700;
}

.active-course-item strong,
.active-course-item small {
  display: block;
}

.active-course-item strong {
  font-size: var(--t-md);
  line-height: 1.3;
}

.active-course-item small {
  margin-top: 3px;
  color: var(--text-tertiary);
  font-size: var(--t-xs);
}

.complete-lesson-button {
  width: 100%;
  min-height: 52px;
  margin-top: var(--s-3);
  background: var(--text-primary);
  color: var(--canvas-warm);
  border-color: transparent;
}

.completion-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
  margin-top: var(--s-5);
}

.completion-grid div {
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--surface-muted);
  border: 0.5px solid var(--hairline);
}

.completion-grid span,
.completion-grid strong {
  display: block;
}

.completion-grid span {
  font-size: var(--t-xs);
  color: var(--text-tertiary);
}

.completion-grid strong {
  margin-top: var(--s-1);
  font-size: var(--t-xl);
  color: var(--text-primary);
}

.next-preview {
  margin-top: var(--s-5);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--sage-ultra);
  color: var(--text-secondary);
  font-size: var(--t-sm);
  line-height: 1.5;
}

.completion-secondary {
  width: 100%;
  margin-top: var(--s-2);
}

/* Nutrition card */
.nutrition-card {
  background:
    linear-gradient(145deg, var(--butter-ultra) 0%, var(--surface-0) 65%);
}

.nutrition-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
}

.nutrition-badge {
  flex: 0 0 auto;
  padding: 4px 10px;
  background: var(--butter-light);
  border-radius: var(--r-pill);
  color: #7a5c1a;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 0.5px solid rgba(200,168,75,0.2);
}

/* Check-in card */
.checkin-card {
  background:
    linear-gradient(145deg, var(--blush-ultra) 0%, var(--surface-0) 65%);
}

/* ── 12. Nutrition deck ─────────────────────── */
.nutrition-deck {
  position: relative;
  margin-top: var(--s-5);
  height: 124px;
}

.nutrition-deck-card {
  position: absolute;
  inset: 0;
  background: var(--surface-0);
  border: 0.5px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
  will-change: transform;
  transition: transform 220ms cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 220ms ease;
}

.nutrition-deck-card:nth-child(1) {
  z-index: 3;
  transform: translateY(0) scale(1);
  box-shadow: var(--shadow-md);
}

.nutrition-deck-card:nth-child(2) {
  z-index: 2;
  transform: translateY(7px) scale(0.97);
  box-shadow: var(--shadow-sm);
}

.nutrition-deck-card:nth-child(3) {
  z-index: 1;
  transform: translateY(14px) scale(0.94);
  box-shadow: var(--shadow-xs);
}

.nutrition-deck-card.dragging {
  transition: none;
  cursor: grabbing;
  box-shadow: var(--shadow-lg);
}

.nutrition-deck-card.fly-left {
  transition: transform 260ms ease, opacity 240ms ease;
  transform: translateX(-112%) rotate(-7deg) !important;
  opacity: 0;
}

.nutrition-deck-card.fly-right {
  transition: transform 260ms ease, opacity 240ms ease;
  transform: translateX(112%) rotate(7deg) !important;
  opacity: 0;
}

.nutrition-card-name {
  margin: 0;
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.nutrition-card-badge {
  display: inline-block;
  margin-top: var(--s-1);
  padding: 3px 8px;
  background: var(--butter-light);
  border-radius: var(--r-pill);
  color: #7a5c1a;
  font-size: var(--t-xs);
  font-weight: 600;
  border: 0.5px solid rgba(200,168,75,0.18);
}

.nutrition-card-order {
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  color: var(--text-secondary);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nutrition-deck-hint {
  margin-top: var(--s-2);
  font-size: var(--t-xs);
  color: var(--text-tertiary);
  text-align: center;
  letter-spacing: 0.02em;
}

/* ── 13. Log page ───────────────────────────── */

/* Tab bar */
.log-tab-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  margin-bottom: var(--s-4);
  padding: 4px;
  background: var(--glass-bg);
  border: 0.5px solid var(--glass-border);
  border-radius: var(--r-xl);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
}

.log-tab {
  min-height: 52px;
  border: 0;
  border-radius: var(--r-lg);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--t-md);
  font-weight: 500;
  transition: background 160ms, color 160ms, box-shadow 160ms;
}

.log-tab.active {
  background: var(--surface-0);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* Log card */
.log-card, .weekly-card {
  padding: var(--s-6);
}

.log-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}

.save-status {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--surface-muted);
  color: var(--text-tertiary);
  border: 0.5px solid var(--hairline);
}

.save-status.dirty {
  background: var(--butter-light);
  color: #7a5c1a;
  border-color: rgba(200,168,75,0.2);
}

.save-status.saved {
  background: var(--sage-light);
  color: #3a5c35;
  border-color: rgba(122,158,116,0.2);
}

/* Form */
.form-block {
  display: block;
  margin-top: var(--s-5);
}

.field-label {
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.text-field {
  width: 100%;
  min-height: 48px;
  border: 0.5px solid var(--hairline-strong);
  border-radius: var(--r-md);
  background: var(--surface-muted);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--t-md);
  outline: none;
  padding: 0 var(--s-4);
  overflow: hidden;
  transition: border-color 140ms, box-shadow 140ms;
}

.text-field:focus {
  border-color: rgba(122, 158, 116, 0.5);
  box-shadow: 0 0 0 3px rgba(122, 158, 116, 0.12);
  background: var(--surface-0);
}

/* time input — force inner spinbuttons to stay within bounds */
input[type="time"].text-field {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  padding: 0 var(--s-4);
  cursor: text;
}

input[type="time"].text-field::-webkit-datetime-edit {
  flex: 1;
  padding: 0;
  line-height: 1;
}

input[type="time"].text-field::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

input[type="time"].text-field::-webkit-calendar-picker-indicator {
  display: none;
}

.note-field {
  min-height: 76px;
  padding-top: var(--s-3);
  resize: vertical;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2);
  margin-top: var(--s-5);
}

.segmented {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2);
}

.choice-button {
  min-height: 46px;
  border: 0.5px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface-muted);
  color: var(--text-primary);
  cursor: pointer;
  font-size: var(--t-sm);
  font-weight: 500;
  transition: background 140ms, color 140ms, box-shadow 140ms, transform 80ms;
}

.choice-button:active { transform: scale(0.97); }

.choice-button.selected {
  background: var(--sage-light);
  color: #3a5c35;
  border-color: rgba(122,158,116,0.25);
  box-shadow: var(--shadow-xs);
}

.emoji-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
  margin-top: var(--s-2);
}

.emoji-button {
  min-height: 52px;
  border: 0.5px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface-muted);
  cursor: pointer;
  font-size: 22px;
  transition: background 120ms, transform 80ms;
}

.emoji-button:active { transform: scale(0.95); }

.emoji-button.selected {
  background: var(--sage-light);
  border-color: rgba(122,158,116,0.25);
  box-shadow: var(--shadow-xs);
}

/* AI analysis card */
.ai-analysis-card {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--sage-ultra);
  border: 0.5px solid rgba(122,158,116,0.2);
  border-radius: var(--r-lg);
}

.ai-analysis-card p:not(.section-label) {
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  color: var(--text-primary);
  line-height: 1.5;
}

/* Photo placeholder */
.photo-placeholder {
  margin-top: var(--s-5);
  padding: var(--s-6);
  border: 1.5px dashed var(--hairline-strong);
  border-radius: var(--r-lg);
  text-align: center;
  font-size: var(--t-sm);
  color: var(--text-tertiary);
  letter-spacing: 0.01em;
}

/* ── 14. Dashboard ──────────────────────────── */
.dashboard-today-card {
  padding: var(--s-6);
  background:
    linear-gradient(145deg, var(--sage-ultra) 0%, var(--surface-0) 60%);
}

.dashboard-card {
  margin-top: var(--s-3);
  padding: var(--s-6);
}

/* Dashboard segmented control */
.dash-seg-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 3px;
  background: var(--glass-bg);
  border: 0.5px solid var(--glass-border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  margin-bottom: var(--s-5);
}

.dash-seg-btn {
  min-height: 36px;
  border: none;
  background: transparent;
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
  padding: 0 var(--s-2);
}

.dash-seg-btn.active {
  background: var(--surface-0);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* Dashboard panel container */
.dash-panel {
  min-height: 120px;
}

.dash-divider {
  margin-top: var(--s-5);
  height: 0.5px;
  background: var(--hairline-strong);
}

/* Journey metric picker */
.journey-metric-bar {
  display: flex;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
  flex-wrap: wrap;
}

.journey-metric-btn {
  height: 30px;
  padding: 0 var(--s-3);
  border: 0.5px solid var(--hairline-strong);
  background: var(--surface-muted);
  border-radius: 999px;
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.journey-metric-btn.active {
  background: var(--sage);
  border-color: var(--sage);
  color: #fff;
  font-weight: 600;
}

/* Journey sparkline chart area */
.journey-chart-wrap {
  position: relative;
  height: 80px;
  margin-bottom: var(--s-3);
}

.journey-chart-wrap svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.journey-chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: var(--t-sm);
  color: var(--text-tertiary);
}

/* Journey week node strip */
.journey-nodes {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  padding-bottom: var(--s-1);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.journey-nodes::-webkit-scrollbar { display: none; }

.journey-node {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 38px;
}

.journey-node-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  background: var(--surface-muted);
  color: var(--text-tertiary);
  border: 1.5px solid transparent;
  transition: background 200ms ease, border-color 200ms ease;
}

.journey-node-label {
  font-size: 9px;
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.2;
}

button.journey-node .journey-node-dot {
  cursor: pointer;
}

button.journey-node .journey-node-dot:hover {
  border-color: var(--sage);
}

.journey-node.node-active .journey-node-dot {
  background: var(--sage);
  color: #fff;
  border-color: var(--sage);
}

.journey-node.node-active .journey-node-label {
  color: var(--sage);
  font-weight: 600;
}

.journey-node.node-done .journey-node-dot {
  background: rgba(122,158,116,0.18);
  color: var(--sage);
  border-color: rgba(122,158,116,0.4);
}

.journey-node.node-done .journey-node-label {
  color: var(--text-secondary);
}

/* Progress rings */
.ring-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-5);
}

.ring-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
}

.ring-svg {
  width: 54px;
  height: 54px;
  transform: rotate(-90deg);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.06));
}

.ring-track {
  fill: none;
  stroke: var(--surface-muted);
  stroke-width: 4.5;
}

.ring-fill {
  fill: none;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-dasharray: 138.2;
  stroke-dashoffset: 138.2;
  transition: stroke-dashoffset 600ms cubic-bezier(0.34,1.2,0.64,1);
}

.ring-fill-training { stroke: var(--sage); }
.ring-fill-steps    { stroke: var(--sky); }
.ring-fill-water    { stroke: #5eb8b8; }
.ring-fill-calories { stroke: var(--butter); }

.ring-label {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--text-tertiary);
}

.ring-value {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1;
}

/* Stat grids */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2);
}

.stat-grid.three {
  grid-template-columns: repeat(3, 1fr);
}

.stat-grid div {
  padding: var(--s-3) var(--s-4);
  background: var(--surface-muted);
  border-radius: var(--r-md);
}

.stat-grid span {
  display: block;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--text-tertiary);
}

.stat-grid strong {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1.2;
}

/* Timeline */
.timeline-list {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

.timeline-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-muted);
  border-radius: var(--r-md);
}

.timeline-row span {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

.timeline-row strong {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

/* ── 15. Navigation (Liquid Glass Tab Bar) ──── */
.bottom-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  width: min(calc(100% - 16px), 444px);
  margin: 0 auto 10px;
  padding: 4px;
  background: var(--glass-bg);
  border: 0.5px solid var(--glass-border);
  border-radius: var(--r-xl);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  z-index: 10;
}

.nav-item {
  background: transparent;
  color: var(--text-tertiary);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: var(--r-lg);
  min-height: 56px;
  transition: background 160ms, color 160ms, box-shadow 160ms;
}

.nav-item.active {
  background: var(--surface-0);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* ── 16. Toast ──────────────────────────────── */
.toast {
  position: fixed;
  right: 16px;
  bottom: 86px;
  left: 16px;
  max-width: 428px;
  margin: 0 auto;
  padding: 12px 16px;
  background: rgba(28, 27, 24, 0.90);
  border: 0.5px solid rgba(255,255,255,0.12);
  border-radius: var(--r-lg);
  color: rgba(255,254,251,0.95);
  font-size: var(--t-sm);
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.97);
  transition: opacity 180ms ease, transform 180ms ease;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.toast.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── 17. Misc legacy ────────────────────────── */
.focus-panel { display: none; }
.progress-panel { display: none; }

/* Soft grid (legacy Today focus list) */
.focus-list, .soft-grid { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.focus-list span, .soft-grid span {
  padding: 13px var(--s-4);
  border-radius: var(--r-md);
  background: var(--surface-muted);
  font-size: var(--t-md);
}

/* Goal list (legacy) */
.goal-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
  margin-top: var(--s-4);
}

.goal-list div {
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: var(--surface-muted);
  border: 0.5px solid var(--hairline);
}

.goal-list span {
  display: block;
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0.03em;
}

.goal-list strong {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ── 18. Responsive ─────────────────────────── */
@media (max-width: 380px) {
  .countdown-row h2 { font-size: 56px; }

  .training-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .training-action-stack {
    width: 100%;
  }

  .primary-button { width: 100%; }

  .metric-grid,
  .stat-grid,
  .stat-grid.three,
  .goal-list,
  .completion-grid { grid-template-columns: 1fr; }
}

/* ── 19. Legacy compat: Nutrition option cards ─ */
.nutrition-chip, .nutrition-option,
.nutrition-context, .nutrition-options { /* rendered by JS deck now */ }

.nutrition-summary, .nutrition-footnote { display: none; }

/* ── 20. Log compact overrides (from ia-v2) ─── */
.log-row-pair,
.log-inline-field,
.text-field-sm,
.metric-grid-4,
.note-field-sm,
.segmented-sm,
.emoji-group-sm,
.emoji-button-sm { /* no longer used, kept for compat */ }

/* ── 21. 请假弹窗 ─────────────────────────────────────── */
.training-action-row {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.pause-link { color: var(--text-secondary); font-size: 13px; }
.pause-link:hover { color: var(--text-primary); }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding: 24px;
}
.modal-overlay[hidden] { display: none; }

.modal-card {
  background: var(--card-bg);
  border-radius: 20px;
  padding: 28px 24px;
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}

.modal-title { font-size: 17px; font-weight: 600; margin: 0; }
.modal-desc  { font-size: 13px; color: var(--text-secondary); margin: 0; }

.modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.modal-field label { font-size: 12px; color: var(--text-secondary); }
.modal-field input[type="date"] {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-primary);
  font-size: 14px;
  width: 100%;
}

.pause-active-info {
  background: var(--bg);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pause-active-info[hidden] { display: none; }
.pause-active-info span { font-size: 13px; color: var(--text-secondary); }

.resume-button {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.15s;
}
.resume-button:hover { background: var(--hover-bg, rgba(255,255,255,0.06)); }

.modal-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

[data-status="paused"] { background: rgba(147, 112, 219, 0.15); color: #b39ddb; }


/* ══════════════════════════════════════════════════════════
   Journey Timeline rows (upgraded from .timeline-row)
   ══════════════════════════════════════════════════════════ */

.journey-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-muted);
  border-radius: var(--r-md);
  border: 0.5px solid transparent;
  width: 100%;
  text-align: left;
  cursor: default;
  transition: background 150ms, border-color 150ms;
  /* reset button styles */
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}

button.journey-row {
  cursor: pointer;
}

button.journey-row:hover {
  background: var(--surface-0);
  border-color: var(--hairline-strong);
}

button.journey-row:active {
  transform: scale(0.98);
}

.journey-row.journey-active {
  background: rgba(122, 158, 116, 0.1);
  border-color: rgba(122, 158, 116, 0.25);
}

.journey-row.journey-completed {
  background: var(--surface-muted);
}

.journey-row-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.journey-week {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.journey-sub {
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--text-tertiary);
  letter-spacing: 0.01em;
}

.journey-row.journey-active .journey-week,
.journey-row.journey-active .journey-sub {
  color: var(--sage);
}

.journey-chip {
  flex-shrink: 0;
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.journey-chip-active {
  color: var(--sage);
}

.journey-chip-done {
  color: var(--sky);
}


/* ══════════════════════════════════════════════════════════
   Week Report View
   ══════════════════════════════════════════════════════════ */

.week-report-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

/* Hero */
.wr-hero {
  padding: var(--s-5);
  background: var(--surface-0);
  border-radius: var(--r-xl);
  border: 0.5px solid var(--hairline);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.wr-hero-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wr-hero-title {
  font-size: var(--t-xl);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.025em;
  margin: 0;
}

.wr-hero-date {
  font-size: var(--t-sm);
  color: var(--text-tertiary);
  margin: 0;
}

.wr-status-pill {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 100px;
  background: rgba(106, 154, 191, 0.15);
  color: var(--sky);
}

.wr-status-pill[data-status="completed"] {
  background: rgba(122, 158, 116, 0.15);
  color: var(--sage);
}

.wr-status-pill[data-status="not_started"] {
  background: var(--surface-muted);
  color: var(--text-tertiary);
}

.wr-completion-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-1);
}

.wr-completion-bar-wrap {
  flex: 1;
  height: 4px;
  background: var(--surface-muted);
  border-radius: 2px;
  overflow: hidden;
}

.wr-completion-bar-fill {
  height: 100%;
  background: var(--sage);
  border-radius: 2px;
  transition: width 500ms cubic-bezier(0.34, 1.2, 0.64, 1);
  min-width: 0;
}

.wr-completion-label {
  flex-shrink: 0;
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--text-secondary);
}

/* Section labels inside report */
.wr-section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 0 var(--s-1);
  margin-bottom: calc(var(--s-2) * -1);
}

.wr-ai-badge {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--surface-muted);
  color: var(--text-tertiary);
}

.wr-ai-badge[data-source="ai"] {
  background: rgba(200, 168, 75, 0.15);
  color: var(--butter);
}

/* Progress Grid */
.wr-progress-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
}

.wr-progress-item {
  padding: var(--s-3) var(--s-3);
  background: var(--surface-muted);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.wr-progress-label {
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0.03em;
}

.wr-progress-value {
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.wr-progress-delta {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
}

.wr-progress-delta.delta-up   { color: var(--text-secondary); }
.wr-progress-delta.delta-down { color: var(--text-secondary); }
.wr-progress-delta.delta-good { color: var(--sage); }

/* Trends Grid */
.wr-trends-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2);
}

.wr-trend-item {
  padding: var(--s-3) var(--s-4);
  background: var(--surface-muted);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.wr-trend-label {
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0.03em;
}

.wr-trend-spark {
  display: flex;
  align-items: flex-end;
  min-height: 28px;
}

.wr-trend-empty {
  font-size: 11px;
  color: var(--text-tertiary);
  font-style: italic;
}

/* Insight */
.wr-insight-card {
  padding: var(--s-4) var(--s-5);
  background: var(--surface-0);
  border-radius: var(--r-xl);
  border: 0.5px solid var(--hairline);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.wr-insight-headline {
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.4;
}

.wr-insight-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.wr-insight-points li {
  font-size: var(--t-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  padding-left: var(--s-4);
  position: relative;
}

.wr-insight-points li::before {
  content: "·";
  position: absolute;
  left: var(--s-1);
  color: var(--sage);
  font-weight: 700;
}

/* Achievements */
.wr-achievements-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
}

.wr-achievement-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--s-3) var(--s-2);
  background: var(--surface-muted);
  border-radius: var(--r-md);
  border: 0.5px solid transparent;
  text-align: center;
  transition: opacity 150ms;
}

.wr-achievement-badge.earned {
  background: var(--surface-0);
  border-color: var(--hairline);
  box-shadow: var(--shadow-sm);
}

.wr-achievement-badge.locked {
  opacity: 0.38;
}

.wr-badge-emoji {
  font-size: 22px;
  line-height: 1;
}

.wr-badge-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.wr-achievement-badge.earned .wr-badge-label {
  color: var(--text-primary);
}