/*
 * css/styles.css · The Long Game — complete visual design system
 * Purpose: warm tokens (light + dark via html[data-theme] + prefers-color-scheme),
 *          teal accent identity, base elements & typography, surface-card system,
 *          .row contract, buttons, .sr-only, focus-visible, reduced-motion guard,
 *          global no-select, tabbar, topbar, sheets, verdict-row, chips/seg-control.
 * Related: index.html (links this), js/theme-boot.js (sets data-theme pre-paint),
 *          js/app.js (renders into these classes)
 *
 * Accent decision: deep teal --accent #2c6e63 (light) / #5fa394 (dark)
 *   #2c6e63 on #fff = 5.88:1 (AA pass — primary buttons)
 *   #2c6e63 on #fdfbf7 = 5.47:1 (AA pass — teal text on surface)
 *   dark #5fa394 on #262420 = 5.47:1 (AA pass — teal text on dark surface)
 *   dark primary button: --btn-text #14211e on #5fa394 = 5.79:1 (AA pass)
 *   REQUIRED FIX applied: dark mode --btn-text is #14211e NOT var(--ink)
 */

/* ===== SELF-HOSTED FONTS =====
   Inter and Newsreader served from fonts/ — no external requests ever.
   Newsreader is the "future-self" serif voice. Inter is the calm UI.
   Latin subset covers all app copy. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/newsreader-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/newsreader-400-italic.woff2') format('woff2');
}

/* ===== LIGHT THEME (default) ===== */
:root {
  /* Warm neutrals — inherited verbatim from wellness DNA */
  --bg:       #f5f1ea;
  --surface:  #fdfbf7;
  --surface-2:#f0ebe1;
  --ink:      #3a3a38;
  --ink-soft: #65605a;
  --line:     #e4ddd0;

  /* OWN accent: deep teal — the long view, water, horizon */
  --accent:     #2c6e63;
  --accent-ink: #245a51;   /* slightly darker for ghost-btn text + 3px focus rings */

  /* Button text: white on teal in light mode (5.88:1 AA) */
  --btn-text: #fff;

  /* Structural */
  --radius:    18px;
  --radius-sm: 12px;
  --shadow:    0 6px 24px rgba(80, 70, 55, 0.10);
  --tap:       44px;
  --topbar-h:  52px;
  --maxw:      520px;

  /* Typography stacks */
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Newsreader", "Lora", Georgia, "Times New Roman", serif;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Semantic honesty triad (outcome verdicts) — never red for Worse */
  --verdict-better-bg:  rgba(44, 110, 99, 0.12);
  --verdict-better-ink: #245a51;
  --verdict-same-bg:    rgba(101, 96, 90, 0.10);
  --verdict-same-ink:   #4a4540;
  --verdict-worse-bg:   rgba(74, 107, 130, 0.12);  /* warm slate-blue, NOT red */
  --verdict-worse-ink:  #3a5570;
  --verdict-mixed-bg:   rgba(138, 92, 24, 0.10);
  --verdict-mixed-ink:  #6b4210;
  --verdict-unclear-bg: rgba(101, 96, 90, 0.08);
  --verdict-unclear-ink:#65605a;

  /* Warm amber for "waiting / due soon" */
  --warm-amber:    #8a5c18;
  --warm-amber-bg: rgba(138, 92, 24, 0.10);
}

/* ===== DARK THEME ===== */
/* Path 1: explicit dark */
html[data-theme="dark"] {
  --bg:       #1e1c19;
  --surface:  #262420;
  --surface-2:#2e2b27;
  --ink:      #ede8df;
  --ink-soft: #a09890;
  --line:     #3a3630;
  --shadow:   0 6px 24px rgba(0, 0, 0, 0.35);

  /* Dark teal: lightened to maintain contrast on dark surfaces */
  --accent:     #5fa394;
  --accent-ink: #7cc0b1;

  /* REQUIRED: dark primary button text is very dark teal-ink, NOT --ink
     #14211e on #5fa394 = 5.79:1 (AA pass). var(--ink)=#ede8df on #5fa394 = 2.24:1 (FAIL) */
  --btn-text: #14211e;

  --verdict-better-bg:  rgba(95, 163, 148, 0.15);
  --verdict-better-ink: #7cc0b1;
  --verdict-same-bg:    rgba(160, 152, 144, 0.12);
  --verdict-same-ink:   #c0b8b0;
  --verdict-worse-bg:   rgba(122, 155, 176, 0.15);
  --verdict-worse-ink:  #9ab8cc;
  --verdict-mixed-bg:   rgba(192, 136, 56, 0.15);
  --verdict-mixed-ink:  #d4a878;
  --verdict-unclear-bg: rgba(160, 152, 144, 0.10);
  --verdict-unclear-ink:#a09890;

  --warm-amber:    #c08838;
  --warm-amber-bg: rgba(192, 136, 56, 0.14);
}

/* Path 2: system follows OS preference */
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --bg:       #1e1c19;
    --surface:  #262420;
    --surface-2:#2e2b27;
    --ink:      #ede8df;
    --ink-soft: #a09890;
    --line:     #3a3630;
    --shadow:   0 6px 24px rgba(0, 0, 0, 0.35);
    --accent:     #5fa394;
    --accent-ink: #7cc0b1;
    --btn-text: #14211e;
    --verdict-better-bg:  rgba(95, 163, 148, 0.15);
    --verdict-better-ink: #7cc0b1;
    --verdict-same-bg:    rgba(160, 152, 144, 0.12);
    --verdict-same-ink:   #c0b8b0;
    --verdict-worse-bg:   rgba(122, 155, 176, 0.15);
    --verdict-worse-ink:  #9ab8cc;
    --verdict-mixed-bg:   rgba(192, 136, 56, 0.15);
    --verdict-mixed-ink:  #d4a878;
    --verdict-unclear-bg: rgba(160, 152, 144, 0.10);
    --verdict-unclear-ink:#a09890;
    --warm-amber:    #c08838;
    --warm-amber-bg: rgba(192, 136, 56, 0.14);
  }
}

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 100%;          /* honors user browser preference */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body { padding-bottom: 88px; } /* room for the fixed tab bar */

/* ===== NO ACCIDENTAL TEXT-SELECTION (long-press safety) =====
   Prevents the phone's native "Search/Translate/Copy" bubble on long-press.
   Re-enabled on inputs and textareas so writing works normally. */
html, body {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
input, textarea, select,
[contenteditable="true"], [contenteditable=""] {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* ===== SCREEN READER UTILITY ===== */
.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;
}

/* ===== APP SHELL ===== */
#app {
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: 100vh;
  padding-top: var(--topbar-h);
}

/* ===== SCREEN SETTLE ANIMATION =====
   Fade only (0.8→1), NO vertical translation — the compass surface never
   "jumps" on re-render. Reduced-motion: instant. */
.screen {
  padding: 22px 18px 8px;
  animation: settle 180ms ease;
}
@keyframes settle { from { opacity: 0.8; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .screen { animation: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ===== SVG ICON DISPLAY FIX ===== */
.ic svg, .chev svg, [data-icon] svg { display: block; }

/* ===== TOPBAR ===== */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: var(--topbar-h);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  z-index: 60;
}
.topbar-left  { display: flex; align-items: center; gap: 2px; }
.topbar-right { display: flex; align-items: center; gap: 2px; }

.topbar-home {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: none; border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
  transition: background 0.15s, transform 0.12s;
}
.topbar-home:hover   { background: var(--surface-2); }
.topbar-home:active  { transform: scale(0.9); }
.topbar-home:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.topbar-home svg { width: 22px; height: 22px; display: block; }

.topbar-icon-btn {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 10px;
  background: none; border: none;
  color: var(--ink); opacity: 0.72;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: opacity 0.15s, background 0.15s, transform 0.12s;
}
.topbar-icon-btn:hover  { opacity: 1; background: var(--surface-2); }
.topbar-icon-btn:active { transform: scale(0.9); opacity: 1; }
.topbar-icon-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.topbar-icon-btn svg { width: 21px; height: 21px; display: block; }

/* ===== BOTTOM TAB BAR ===== */
.tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  max-width: var(--maxw);
  margin: 0 auto;
  height: 64px;
  background: var(--bg);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: stretch;
  z-index: 60;
}
.tab-btn {
  flex: 1;
  background: none; border: none;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
  font-size: 0.7rem; font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  min-height: var(--tap);
  transition: color 0.15s;
  padding: 8px 4px;
  -webkit-tap-highlight-color: transparent;
}
.tab-btn[aria-selected="true"] {
  color: var(--accent);
}
.tab-btn svg {
  display: block;
  width: 22px; height: 22px;
  transition: opacity 0.15s;
}
.tab-btn[aria-selected="false"] svg { opacity: 0.55; }
.tab-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: -2px; }
.tab-label { font-size: 0.68rem; }

/* ===== TYPOGRAPHY SCALE ===== */
/* NOTE: only Newsreader 400 (regular + italic) is self-hosted; 600 would be
   synthesised by the browser (faux-bold = smeared). All serif headings and
   titles below use font-weight:400 — Newsreader at display sizes reads warm
   and confident without needing bold. Inter (sans) 400/500/600 ARE hosted
   and can use those weights freely. */
.greeting {
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 400; /* Newsreader 400 only — no faux-bold */
  letter-spacing: -0.01em;
  margin: 6px 0 2px;
  line-height: 1.25;
}
.date-line {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin-bottom: 14px;
}
h2.section {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 18px 4px 12px;
}
.overline {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Newsreader italic for past-self quoted words */
.past-self-quote {
  font-family: var(--serif);
  font-style: italic;
  line-height: 1.65;
}

.section-title {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 var(--space-3);
}

/* ===== SURFACE CARD SYSTEM — 3 TIERS ===== */
/* Tier 1 (elevated, focal): --surface bg + border + radius + shadow + 18px pad */
.surface-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
/* Tier 2 (flat, secondary): surface-2 bg, no shadow */
.surface-card--flat {
  background: var(--surface-2);
  box-shadow: none;
}
/* Modifier --rows: 0 pad + overflow hidden for row-hosting lists */
.surface-card--rows {
  padding: 0;
  overflow: hidden;
}
/* Accent left-edge highlight (for focal revisit-due card on Today) */
.surface-card--accent-edge {
  border-left: 3px solid var(--accent);
}

/* ===== ROW CONTRACT =====
   All rows share this base: flex, gap 10, top-border separators.
   .row:first-child / .row-first-in-group removes the separator. */
.row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
}
.row:first-child,
.row-first-in-group { border-top: none; }
.row__body { flex: 1; min-width: 0; }
.row__meta { flex-shrink: 0; margin-left: auto; color: var(--ink-soft); font-size: 0.88rem; }

/* ===== PILL (non-interactive badge/tag) ===== */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.pill--sm { padding: 2px 8px;  font-size: 0.72rem; }
.pill--md { padding: 4px 10px; font-size: 0.82rem; }

/* Verdict-tinted pills for closed calls in the list */
.pill--better  { background: var(--verdict-better-bg);  color: var(--verdict-better-ink);  border-color: transparent; }
.pill--same    { background: var(--verdict-same-bg);    color: var(--verdict-same-ink);    border-color: transparent; }
.pill--worse   { background: var(--verdict-worse-bg);   color: var(--verdict-worse-ink);   border-color: transparent; }
.pill--mixed   { background: var(--verdict-mixed-bg);   color: var(--verdict-mixed-ink);   border-color: transparent; }
.pill--unclear { background: var(--verdict-unclear-bg); color: var(--verdict-unclear-ink); border-color: transparent; }
.pill--due     { background: var(--warm-amber-bg);      color: var(--warm-amber);          border-color: transparent; }

/* ===== BUTTONS ===== */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 14px 18px;
  min-height: var(--tap);
  background: var(--accent);
  color: var(--btn-text);
  font: 600 1rem/1 var(--sans);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  text-align: center;
}
.btn:active    { transform: scale(0.99); }
.btn:disabled  { opacity: 0.5; cursor: default; }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Ghost button: transparent + accent-ink text + 1px line border */
.btn.ghost {
  background: transparent;
  color: var(--accent-ink);
  border: 1px solid var(--line);
  font-weight: 500;
}
.btn.ghost:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; }

/* Secondary: surface-2 bg */
.btn.secondary {
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line);
  font-weight: 500;
}

/* Danger variant */
.btn.danger {
  background: transparent;
  color: #c05050;           /* light: 4.62:1 AA on --surface #fdfbf7 */
  border: 1px solid rgba(192,80,80,0.3);
  font-weight: 500;
}
/* Dark-mode danger: lighten text to maintain >= 4.5:1 on --surface #262420 */
html[data-theme="dark"] .btn.danger { color: #e07070; }   /* 4.72:1 AA on #262420 */
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .btn.danger { color: #e07070; }
}

/* Auto-width variant */
.btn.auto { width: auto; }

/* ===== COMPASS FAB (the primary + capture button) ===== */
.compass-fab {
  position: fixed;
  bottom: 76px;
  right: 18px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  box-shadow: 0 4px 16px rgba(44,110,99,0.35);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 1.6rem; line-height: 1;
  font-weight: 300;
  z-index: 55;
  transition: transform 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.compass-fab:hover  { transform: scale(1.06); }
.compass-fab:active { transform: scale(0.95); }
.compass-fab:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Left-handed mode: FAB mirrors to bottom-left */
html.lefty .compass-fab { right: auto; left: 18px; }

/* ===== SEG CONTROL (view-mode switcher) ===== */
.seg-control {
  display: flex;
  gap: 0;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 3px;
}
.seg-btn {
  flex: 1;
  padding: 8px 12px;
  min-height: var(--tap);
  background: none;
  border: none;
  border-radius: calc(var(--radius-sm) - 2px);
  font: 500 0.88rem/1 var(--sans);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
/* Active = accent OUTLINE, never a filled box (house rule) */
.seg-btn[aria-pressed="true"] {
  background: var(--surface);
  color: var(--accent);
  box-shadow: 0 1px 4px rgba(80,70,55,0.10);
  outline: 1.5px solid var(--accent);
  outline-offset: -1.5px;
}
.seg-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: -2px; }

/* ===== CHIPS (interactive toggle controls) ===== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  min-height: var(--tap);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 500 0.88rem/1 var(--sans);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.chip[aria-pressed="true"] {
  background: var(--accent);
  color: var(--btn-text);  /* light: #fff (5.88:1 AA on #2c6e63); dark: #14211e (5.65:1 AA on #5fa394) */
  border-color: var(--accent);
}
.chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Chip row container */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ===== BOTTOM SHEET ===== */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 200;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.sheet-backdrop.is-open { opacity: 1; }

.sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  max-width: var(--maxw);
  margin: 0 auto;
  background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0;
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 32px rgba(80,70,55,0.12);
  max-height: 88vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 201;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
.sheet.is-open { transform: translateY(0); }

.sheet-grab {
  width: 38px; height: 4px;
  background: var(--line);
  border-radius: 999px;
  margin: 12px auto 0;
  flex-shrink: 0;
}
.sheet-body { padding: 16px 20px 32px; }
.sheet-title {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 400; /* Newsreader 400 only — no faux-bold */
  color: var(--ink);
  margin: 0 0 var(--space-4);
}
.sheet-subtitle {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin: -8px 0 var(--space-4);
}

/* Prefilled target link chip shown at top of capture sheet */
.capture-target-chip {
  display: inline-flex;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: var(--space-3);
}
.capture-target-chip-label {
  font-size: 0.78rem;
  color: var(--accent);
  font-weight: 500;
}

/* Follow-up banner in the capture sheet — "carrying forward from" a prior call. */
.capture-followup {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: var(--radius-sm, 8px);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}
.capture-followup-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.capture-followup-title {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.4;
}
.capture-followup-lesson {
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-top: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .sheet { transition: none; }
  .sheet-backdrop { transition: none; }
}

/* ===== OVERLAY (full-screen) ===== */
.overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 300;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: settle 180ms ease;
}
.overlay-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 12px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 1;
}
.overlay-back {
  width: 44px; height: 44px;
  background: none; border: none;
  color: var(--accent-ink);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  flex-shrink: 0;
  transition: background 0.15s;
}
.overlay-back:hover { background: var(--surface-2); }
.overlay-back:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.overlay-back svg { display: block; width: 20px; height: 20px; }
.overlay-title {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 400; /* Newsreader 400 only — no faux-bold */
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.overlay-body {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px 18px 48px;
}

/* ===== VERDICT ROW (Better / Same / Worse) ===== */
/* The single most important control — all three carry equal weight.
   Worse is never visually punished. Redundant signals: glyph + word + position. */
.verdict-row {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}
.verdict-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 8px;
  min-height: 80px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.verdict-btn:active { transform: scale(0.97); }
.verdict-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.verdict-glyph { font-size: 1.25rem; line-height: 1; }
.verdict-label { font-size: 0.78rem; font-weight: 600; line-height: 1.2; }
.verdict-phrase { font-size: 0.68rem; color: var(--ink-soft); line-height: 1.3; }

/* Selected state — soft settle (160ms, reduced-motion: instant) */
.verdict-btn[aria-pressed="true"] {
  transform: scale(1.03);
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
/* Sibling recede when one is selected */
.verdict-row:has(.verdict-btn[aria-pressed="true"]) .verdict-btn[aria-pressed="false"] {
  opacity: 0.55;
}

/* Per-verdict coloring */
.verdict--better[aria-pressed="true"] {
  background: var(--verdict-better-bg);
  border-color: var(--verdict-better-ink);
  color: var(--verdict-better-ink);
}
.verdict--better[aria-pressed="true"] .verdict-phrase { color: var(--verdict-better-ink); }

.verdict--same[aria-pressed="true"] {
  background: var(--verdict-same-bg);
  border-color: var(--verdict-same-ink);
  color: var(--verdict-same-ink);
}
.verdict--same[aria-pressed="true"] .verdict-phrase { color: var(--verdict-same-ink); }

.verdict--worse[aria-pressed="true"] {
  background: var(--verdict-worse-bg);
  border-color: var(--verdict-worse-ink);
  color: var(--verdict-worse-ink);
}
.verdict--worse[aria-pressed="true"] .verdict-phrase { color: var(--verdict-worse-ink); }

.verdict--mixed[aria-pressed="true"] {
  background: var(--verdict-mixed-bg);
  border-color: var(--verdict-mixed-ink);
  color: var(--verdict-mixed-ink);
}
.verdict--unclear[aria-pressed="true"] {
  background: var(--verdict-unclear-bg);
  border-color: var(--verdict-unclear-ink);
  color: var(--verdict-unclear-ink);
}

@media (prefers-reduced-motion: reduce) {
  .verdict-btn[aria-pressed="true"] { transform: none; transition: none; }
  .verdict-row:has(.verdict-btn[aria-pressed="true"]) .verdict-btn[aria-pressed="false"] { transition: none; }
}

/* ===== JOURNAL TEXTAREA (captures + letter writing) ===== */
.journal-area {
  width: 100%;
  min-height: 100px;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--ink);
  line-height: 1.65;
  resize: vertical;
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
.journal-area::placeholder { color: var(--ink-soft); opacity: 0.75; }
.journal-area:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  background: var(--surface);
}
.journal-area--sm { min-height: 72px; font-size: 0.96rem; }

/* ===== FORM ELEMENTS ===== */
.form-label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: var(--space-2);
}
.form-field { margin-bottom: var(--space-4); }
.text-input {
  width: 100%;
  padding: 12px 14px;
  min-height: var(--tap);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: 1rem/1.5 var(--sans);
  color: var(--ink);
  -webkit-user-select: text;
  user-select: text;
}
.text-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  background: var(--surface);
}
.text-input::placeholder { color: var(--ink-soft); opacity: 0.7; }

/* ===== CARD COMPONENTS ===== */

/* Call-list row card */
.call-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.call-row:first-child { border-top: none; }
.call-row:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.call-row:active { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.call-row:focus-visible { outline: 3px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-sm); }

.call-row-glyph {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.call-row-body { flex: 1; min-width: 0; }
.call-row-title {
  font-weight: 600;
  font-size: 0.97rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin-bottom: 4px;
}
.call-row-meta {
  font-size: 0.78rem;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.call-row-actions { flex-shrink: 0; margin-left: auto; }

/* call-row-btn: reset native <button> chrome so the element looks identical to
   the previous div[role=button] call-row. We apply this class BEFORE .call-row
   in source order — IMPORTANT: in the HTML the element has both classes
   ("call-row call-row-btn") so .call-row's border-top / padding / display:flex
   must win. We set only the properties that native buttons add beyond what .call-row
   already declares (appearance, bg, font, text-align, color, width).
   We deliberately do NOT set border: none here — .call-row's border-top handles
   the row separator and must not be overridden.
   A <button> legally contains non-interactive children (spans, divs), so the
   rich inner markup (glyph, title, meta) is fine here. No nested focusable
   elements exist — the button IS the interactive element. */
.call-row-btn {
  appearance: none;
  background: none;     /* overridden by .call-row hover/active states */
  text-align: left;
  font: inherit;
  color: inherit;
  width: 100%;
  /* Note: border is deliberately omitted — .call-row sets border-top for the
     row separator. On most browsers appearance:none already removes native
     button border. If a browser still shows a border, the specificity of
     .call-row's border-top (same specificity, earlier in source) still applies. */
}

/* ===== CALLS SEARCH + ARENA FILTER ===== */
/* Sits above the seg control on the Calls screen.
   Calm, minimal — search wrap + arena select side by side. */
.calls-search-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-3);
}

.calls-search-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

.calls-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-soft);
  pointer-events: none;
  display: flex;
  align-items: center;
}

.calls-search-input {
  width: 100%;
  height: var(--tap);       /* 44px tap target */
  padding: 0 10px 0 34px;   /* room for the search icon on the left */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font: 500 0.9rem / 1 var(--sans);
  -webkit-appearance: none; /* remove browser chrome (Safari) */
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.calls-search-input::placeholder { color: var(--ink-soft); opacity: 0.7; }
.calls-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* hide native "clear" button added by some browsers to type=search */
.calls-search-input::-webkit-search-cancel-button { display: none; }
.calls-search-input::-ms-clear { display: none; }

.calls-arena-select {
  height: var(--tap);       /* 44px tap target */
  min-width: 96px;
  max-width: 120px;
  padding: 0 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font: 500 0.82rem / 1 var(--sans);
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  cursor: pointer;
  /* Compact chevron via inline background — uses only design tokens (safe) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2365605a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px 7px;
  padding-right: 24px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.calls-arena-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* Revisit-due card on Today (accent left edge) */
.revisit-card {
  padding: 16px 18px 16px 20px;
  border-left: 3px solid var(--accent);
  cursor: pointer;
}
.revisit-card-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent);
  margin-bottom: 6px;
}
.revisit-card-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.45;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.revisit-card-meta {
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.revisit-card-cta {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--accent);
  margin-top: 10px;
}

/* North Star line */
.north-star-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.97rem;
  color: var(--ink-soft);
  line-height: 1.5;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: var(--space-4) 0;
}
.north-star-line::before {
  content: '◉ ';
  color: var(--accent);
  font-style: normal;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: var(--space-6) var(--space-5);
  color: var(--ink-soft);
}
.empty-state-serif {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: var(--space-4);
  color: var(--ink);
}
.empty-state-sub {
  font-size: 0.88rem;
  line-height: 1.55;
  margin-bottom: var(--space-5);
}

/* Letter / Future-Self card */
.letter-card {
  padding: 20px;
}
.letter-card-stamp {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.letter-card-body {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink);
}
.letter-card-sealed {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
}
.letter-card-seal-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

/* Onboarding panel */
.onboarding-panel {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  overflow-y: auto;
}
.onboarding-card {
  max-width: 420px;
  width: 100%;
  text-align: center;
}
.onboarding-title {
  font-family: var(--serif);
  font-size: 1.7rem;
  line-height: 1.3;
  margin-bottom: var(--space-4);
  color: var(--ink);
}
.onboarding-body {
  font-size: 1rem;
  color: var(--ink-soft);
  line-height: 1.65;
  margin-bottom: var(--space-5);
}
.onboarding-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: var(--space-6);
}
.onboarding-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--line);
  transition: background 0.2s;
}
.onboarding-dot.is-current { background: var(--accent); }
.onboarding-skip {
  position: absolute;
  top: 14px; right: 14px;
  min-height: 44px; min-width: 44px;
  padding: 8px 16px;
  background: none; border: none;
  color: var(--ink-soft);
  font: 500 0.88rem/1 var(--sans);
  cursor: pointer;
  border-radius: 8px;
}
.onboarding-skip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Compass SVG mark in onboarding */
.onboarding-compass {
  margin: 0 auto var(--space-5);
  width: 72px; height: 72px;
  color: var(--accent);
}

/* ===== TOAST (status announcements) ===== */
.toast-container {
  position: fixed;
  bottom: 76px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 400;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  max-width: calc(var(--maxw) - 32px);
  width: calc(100% - 32px);
}
.toast {
  background: var(--ink);
  color: var(--bg);
  padding: 10px 18px;
  border-radius: 24px;
  font-size: 0.88rem;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  animation: toast-in 200ms ease;
  text-align: center;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== CALL DETAIL (letter view) ===== */
.call-detail-letter {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: var(--space-4);
}

/* Lineage — the follow-up chain (Follows from… / Led to…) */
.call-lineage {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--space-4);
  padding: 6px;
}
.call-lineage-row {
  appearance: none;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius-sm, 8px);
  min-height: 44px;
}
.call-lineage-row:hover { background: var(--surface-2); }
.call-lineage-arrow {
  color: var(--accent);
  font-size: 1rem;
  line-height: 1.5;
  flex-shrink: 0;
}
.call-lineage-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.call-lineage-rel {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.call-lineage-title {
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.4;
}
.call-detail-from {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.call-detail-title {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 400; /* Newsreader 400 only — no faux-bold */
  margin-bottom: var(--space-3);
  line-height: 1.35;
}
.call-detail-expectation {
  border-left: 2px solid var(--line);
  padding-left: 14px;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.97rem;
  line-height: 1.65;
  margin-bottom: var(--space-3);
}
.call-detail-meta {
  font-size: 0.82rem;
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Self-compassion line (shown after Worse verdict) */
.self-compassion-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ink-soft);
  text-align: center;
  padding: 10px 0;
  line-height: 1.55;
}

/* ===== SETTINGS ===== */
.settings-section-title {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-soft);
  padding: 16px 4px 8px;
}
.data-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-top: 1px solid var(--line);
}
.data-row:first-child { border-top: none; }
.data-row-label { font-size: 0.97rem; font-weight: 500; }
.data-row-sub   { font-size: 0.82rem; color: var(--ink-soft); }
.data-row-body  { flex: 1; min-width: 0; }

/* Theme selector pills */
.theme-opts {
  display: flex;
  gap: 6px;
}
.theme-opt {
  padding: 6px 14px;
  min-height: var(--tap);  /* 44px — meets touch target minimum */
  background: var(--surface-2);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font: 500 0.82rem/1 var(--sans);
  color: var(--ink-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.theme-opt[aria-pressed="true"] {
  background: var(--accent);
  color: var(--btn-text);
  border-color: var(--accent);
}
.theme-opt:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ===== ACTION SHEET (destructive confirms) ===== */
.action-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 600;
}
.action-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  max-width: var(--maxw);
  margin: 0 auto;
  background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0;
  border-top: 1px solid var(--line);
  padding: 16px 20px 32px;
  z-index: 601;
}
.action-sheet-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  text-align: center;
  color: var(--ink);
  margin-bottom: var(--space-4);
  line-height: 1.5;
}
.action-sheet-body { display: flex; flex-direction: column; gap: 10px; }

/* ===== MISC HELPERS ===== */
.gap-sm  { gap: var(--space-2); }
.gap-md  { gap: var(--space-4); }
.mt-sm   { margin-top: var(--space-2); }
.mt-md   { margin-top: var(--space-4); }
.mt-lg   { margin-top: var(--space-5); }
.mb-sm   { margin-bottom: var(--space-2); }
.mb-md   { margin-bottom: var(--space-4); }
.text-soft { color: var(--ink-soft); }
.text-serif { font-family: var(--serif); }
.text-center { text-align: center; }
.text-sm { font-size: 0.88rem; }
.flex    { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.w-full  { width: 100%; }