:root {
  /* ============ miracle.fyi brand tokens ============
     The brand is the dawn — cool night yielding to warm light.
     Brand gradient: violet → indigo → blue → dawn → gold (103°). */

  /* Brand — the colors that ARE miracle.fyi */
  --brand-violet:      #7c3aed;
  --brand-dawn:        #f59e6b;
  --brand-gold:        #fbbf24;
  --gradient-dawn:     linear-gradient(103deg, #7c3aed 0%, #4f46e5 28%, #2563eb 52%, #f59e6b 82%, #fbbf24 100%);

  /* Page surfaces — colder and quieter than before, less brown at OLED night */
  --bg-0: #08080c;
  --bg-1: #0f0f15;
  --bg-2: #16161f;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.07);
  --surface-3: rgba(255, 255, 255, 0.11);
  --border: rgba(255, 255, 255, 0.06);
  --border-2: rgba(255, 255, 255, 0.14);

  /* Text — never pure white on dark; #fff vibrates */
  --ink: #f5f5f7;
  --ink-2: #c7c7d1;
  --ink-3: #8a8a99;
  --ink-4: #4a4a57;

  /* Goal Grid — five levels, the dawn sweep */
  --c-bhag-1: #a78bfa;   /* violet-400 — lifetime, distant */
  --c-bhag-2: #7c3aed;   /* violet-600 */
  --c-month-1: #818cf8;  /* indigo-400 */
  --c-month-2: #4f46e5;  /* indigo-600 */
  --c-week-1: #60a5fa;   /* blue-400 */
  --c-week-2: #2563eb;   /* blue-600 */
  --c-day-1: #5eead4;    /* teal-300 — warmer, more alive than old cyan */
  --c-day-2: #14b8a6;    /* teal-500 */
  --c-now-1: #fbbf24;    /* gold */
  --c-now-2: #f59e6b;    /* dawn — replaces the orange-600 alarm jump with a single warm tone */
  --c-journal-1: #34d399; /* emerald-400 */
  --c-journal-2: #10b981; /* emerald-500 */

  /* UI accents */
  --accent: #7c3aed;     /* brand violet — primary actions */
  --accent-2: #f59e6b;   /* dawn — warm pair */
  --accent-3: #5eead4;   /* teal — cool quiet */
  --gold: #fbbf24;
  --green: #34d399;
  --red: #f87171;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: "Fraunces", "Inter", serif;
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.18);
  --shadow-md: 0 1px 2px rgba(0,0,0,0.5), 0 12px 32px rgba(0,0,0,0.28);
  --shadow-lg: 0 1px 2px rgba(0,0,0,0.5), 0 24px 60px rgba(0,0,0,0.4);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 160ms; --t-med: 280ms; --t-slow: 520ms;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg-0); color: var(--ink);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; overflow-x: hidden;
}
body {
  min-height: 100vh; min-height: 100dvh; position: relative;
  background:
    radial-gradient(1200px 800px at 20% -20%, rgba(124, 58, 237, 0.18), transparent 60%),
    radial-gradient(900px 700px at 110% 10%, rgba(79, 70, 229, 0.14), transparent 55%),
    radial-gradient(700px 700px at 90% 95%, rgba(245, 158, 107, 0.10), transparent 55%),
    radial-gradient(800px 800px at 30% 110%, rgba(37, 99, 235, 0.10), transparent 55%),
    linear-gradient(180deg, #08080c 0%, #0c0c14 100%);
}
button { font-family: inherit; }
/* Make the [hidden] attribute always win — components like .btn override default display */
[hidden] { display: none !important; }
::selection { background: rgba(167, 139, 250, 0.4); color: white; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); }

input, textarea, select {
  font-family: inherit;
  color: var(--ink);
  /* iOS Safari zooms the page when a focused field's font-size is < 16px.
     Set the floor globally; specific fields may override upward only. */
  font-size: 16px;
}

/* ============ Aurora ============ */
/* Background drift. Previous version used filter:blur(80px) +
   mix-blend-mode:screen + 24-36s drift, which caused visible compositing
   flicker on many laptops — the filter pass recomposites every frame.
   The fix: bake softness into the radial-gradient itself (transparent at
   85% instead of 65%), drop the parent blur, give each blob its own GPU
   layer via will-change+translateZ so it paints once and only translates,
   and stretch the cycle to 80-120s so the motion reads as "still" to the
   eye while keeping subtle parallax. */
.aurora {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  opacity: 0.55;
}
.aurora__blob {
  position: absolute; border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  animation: drift 80s ease-in-out infinite alternate;
}
.aurora__blob--1 { width: 70vw; height: 70vw; top: -20%; left: -15%; background: radial-gradient(circle, rgba(139, 92, 246, 0.35), transparent 70%); }
.aurora__blob--2 { width: 60vw; height: 60vw; top: 25%; right: -20%; background: radial-gradient(circle, rgba(79, 70, 229, 0.30), transparent 70%); animation-delay: -28s; animation-duration: 100s; }
.aurora__blob--3 { width: 80vw; height: 80vw; bottom: -30%; left: 20%; background: radial-gradient(circle, rgba(14, 165, 233, 0.28), transparent 70%); animation-delay: -56s; animation-duration: 120s; }
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(3vw, -2vh, 0) scale(1.04); }
  100% { transform: translate3d(-2vw, 2vh, 0) scale(0.98); }
}
/* OS-level reduce-motion preference. (The in-app reduceMotion setting
   already display:nones the whole aurora; this handles the case where the
   user hasn't toggled the in-app setting but their OS asks for less
   motion.) Zero out every animation + transition so spring/ease motion
   collapses to instant, kill the aurora drift, but keep state changes
   themselves visible (we only remove the *motion*, not the end state). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .aurora__blob { animation: none; }
}

/* ============ Topbar ============ */
.topbar {
  position: relative; z-index: 10;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px; padding: 18px 32px;
  padding-top: max(18px, env(safe-area-inset-top));
}
.topbar__brand { display: flex; align-items: center; gap: 14px; }
.logo {
  width: 46px; height: 46px; border-radius: 12px;
  background:
    radial-gradient(120% 80% at 20% 100%, rgba(124, 58, 237, 0.18), transparent 70%),
    radial-gradient(120% 80% at 100% 0%, rgba(245, 158, 107, 0.16), transparent 70%),
    linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
  border: 1px solid var(--border-2);
  display: grid; place-items: center;
  flex: 0 0 46px;
}
.logo svg { width: 34px; height: 34px; display: block; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 400; font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.brand__name .brand__tld { color: var(--ink-3); }
.brand__tag {
  color: var(--ink-3); font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em; text-transform: uppercase;
  font-family: var(--font-sans); font-weight: 500;
  margin-top: 2px;
}

/* Tabs */
.tabs {
  display: flex; align-items: center; gap: 4px;
  padding: 4px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  width: max-content; margin: 0 auto;
}
.tab {
  appearance: none; border: 0; background: transparent;
  color: var(--ink-3);
  font-size: 13px; font-weight: 600; letter-spacing: -0.005em;
  padding: 9px 18px; border-radius: 999px; cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  /* Touch target — keep the pill >= the 44pt minimum on mobile so tabs
     (the primary nav) are reliably tappable. align-items:center keeps the
     label vertically centered as the box grows past the text height. */
  min-height: 44px;
}
.tab:hover { color: var(--ink); }
.tab.is-active {
  background: var(--surface-3);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 1px 2px rgba(0,0,0,0.15);
}
.tab__count {
  font-size: 10px; font-weight: 700;
  background: var(--red); color: white;
  padding: 1px 6px; border-radius: 999px;
  min-width: 16px; text-align: center;
}

/* Gear/sliders button at the end of the nav — opens the personal
   nav-visibility popover. Same pill height as the tabs, narrower. */
.tab--gear {
  padding: 9px 11px;
  color: var(--ink-3);
  margin-left: 2px;
}
.tab--gear:hover { color: var(--brand-dawn); background: var(--surface-2); }
.tab--gear svg { display: block; width: 16px; height: 16px; }
.tab--gear.is-open {
  background: var(--surface-3);
  color: var(--brand-dawn);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 1px 2px rgba(0,0,0,0.15);
}

.topbar__stats { display: flex; align-items: center; gap: 8px; }
.stat {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 13px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; color: var(--ink); cursor: pointer;
  font-size: 13px; font-weight: 600; letter-spacing: -0.005em;
  transition: all var(--t-fast) var(--ease-out);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  position: relative;
}
.stat:hover { background: var(--surface-2); border-color: var(--border-2); transform: translateY(-1px); }
.stat:active { transform: translateY(0) scale(0.98); }
.stat__icon { font-size: 15px; line-height: 1; display: inline-flex; align-items: center; }
.stat__icon svg { display: block; width: 14px; height: 14px; }
.stat--streak .stat__icon { color: var(--brand-gold); filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.45)); }
.stat--user .stat__icon { color: var(--ink-3); }
.stat--auth .stat__icon { color: var(--ink-2); }
.stat__label { color: var(--ink-3); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.stat__value { font-variant-numeric: tabular-nums; }
.stat--ghost { padding: 9px 11px; }
.stat--ghost .stat__icon { font-size: 13px; }
.stat.stat--pop { animation: pop 0.6s var(--ease-spring); }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.15); } 100% { transform: scale(1); } }

.stat__badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  background: var(--red); color: white;
  border-radius: 999px;
  font-size: 10px; font-weight: 800;
  display: grid; place-items: center;
  padding: 0 5px;
  border: 2px solid var(--bg-0);
  font-variant-numeric: tabular-nums;
}
.stat__badge[hidden] { display: none; }

/* ============ Stage / views ============ */
.stage {
  position: relative; z-index: 5;
  max-width: 1280px; margin: 0 auto;
  padding: 24px 32px 80px;
  /* Clear the iOS home indicator so the last row isn't hidden under it. */
  padding-bottom: max(80px, calc(80px + env(safe-area-inset-bottom)));
}
.view { display: grid; gap: 28px; animation: rise 0.5s var(--ease-out); }
.view[hidden] { display: none; }

/* ============ Anonymous gating ============ */
#view-landing { display: none; }
body.is-anonymous .tabs,
body.is-anonymous #streakBtn,
body.is-anonymous #alertBtn,
body.is-anonymous #settingsBtn { display: none !important; }
body.is-anonymous #view-home,
body.is-anonymous #view-grid,
body.is-anonymous #view-journal,
body.is-anonymous #view-todo,
body.is-anonymous #view-pacts,
body.is-anonymous #view-admin,
body.is-anonymous #view-settings,
body.is-anonymous #view-time { display: none !important; }
body.is-anonymous #view-landing { display: flex; flex-direction: column; gap: 80px; }
/* Auth-pending: before the async /api/auth/me resolves we don't yet know if the
   visitor is logged in. The body ships with is-anonymous (so all app views are
   hidden), but we must ALSO hide the landing page during this window — otherwise
   a returning logged-in user sees the marketing landing flash before the app
   swaps in (flash of unauthenticated content), made worse by the SW serving the
   cached shell instantly. renderAuthUI() removes auth-pending the moment auth is
   known (logged-in OR confirmed-anonymous), committing to app or landing with no
   flicker. A boot failsafe also clears it so a hung request can't leave it blank. */
body.auth-pending #view-landing { display: none !important; }
body.is-anonymous .tabs { display: none !important; }
body.is-anonymous .topbar { grid-template-columns: 1fr auto; }

/* ============ Landing page ============ */
.view--landing { padding-bottom: 60px; }

.lp-hero {
  text-align: center;
  padding: 60px 24px 40px;
  max-width: 880px; margin: 0 auto;
  position: relative;
}
.lp-hero__eyebrow {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--ink-3);
  margin-bottom: 28px;
  text-transform: none;
}
.lp-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 7vw, 84px);
  line-height: 1.02; letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0 0 24px;
  font-variation-settings: "opsz" 144;
}
.lp-hero__title em {
  font-style: italic;
  display: inline-block;
  padding-right: 0.10em;
  background: linear-gradient(103deg, #7c3aed 0%, #4f46e5 28%, #2563eb 52%, #f59e6b 82%, #fbbf24 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lp-hero__sub {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 680px; margin: 0 auto 36px;
}
.lp-cta {
  font-size: 15px; padding: 14px 28px;
  font-weight: 600;
}
.lp-hero__micro {
  margin-top: 16px;
  font-size: 12px; color: var(--ink-3);
  letter-spacing: 0.06em;
}

/* Stats banner */
.lp-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  max-width: 1100px; margin: 0 auto;
}
.lp-stat {
  display: flex; flex-direction: column; gap: 8px;
  padding: 28px 24px;
  background: rgba(10, 10, 20, 0.65);
  text-align: center;
}
.lp-stat__value {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(135deg, var(--brand-violet), var(--brand-dawn));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.lp-stat__label {
  font-size: 13px; color: var(--ink-2);
  line-height: 1.4;
}
.lp-stat__cite {
  font-size: 11px; color: var(--ink-4);
  font-style: italic;
  margin-top: 4px;
}

/* Pillar sections */
.lp-pillar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 40px 24px;
  max-width: 1200px; margin: 0 auto;
}
.lp-pillar--reverse .lp-pillar__copy { order: 2; }
.lp-pillar--reverse .lp-pillar__visual { order: 1; }
.lp-pillar__eyebrow {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--brand-dawn);
  margin-bottom: 14px;
}
.lp-pillar__head {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.08; letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 18px;
  font-variation-settings: "opsz" 120;
}
.lp-pillar__head em {
  font-style: italic;
  display: inline-block;
  padding-right: 0.10em;
  background: linear-gradient(135deg, var(--brand-gold), var(--brand-dawn));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lp-pillar__body {
  font-size: 16px; line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 24px;
}
.lp-pillar__cite {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px; line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
  padding: 14px 18px;
  border-left: 2px solid var(--accent);
  background: rgba(139, 92, 246, 0.05);
  border-radius: 0 8px 8px 0;
}
.lp-pillar__source {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  font-style: normal;
  color: var(--ink-3);
}

/* Russian doll visual */
.lp-doll-wrap { display: flex; justify-content: center; align-items: center; }
.lp-doll {
  padding: 18px 22px;
  border-radius: 18px;
  background:
    radial-gradient(400px 200px at 100% 0%, rgba(167, 139, 250, 0.10), transparent 60%),
    linear-gradient(135deg, rgba(139, 92, 246, 0.06), rgba(99, 102, 241, 0.03));
  border: 1px solid rgba(167, 139, 250, 0.20);
  position: relative;
  width: 100%;
}
.lp-doll__head {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.lp-doll__goal {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 14px;
  line-height: 1.2;
}
.lp-doll--month {
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(129, 140, 248, 0.07), rgba(79, 70, 229, 0.03));
  border-color: rgba(129, 140, 248, 0.18);
}
.lp-doll--month .lp-doll__goal { font-size: 16px; }
.lp-doll--week {
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.08), rgba(37, 99, 235, 0.03));
  border-color: rgba(96, 165, 250, 0.18);
}
.lp-doll--week .lp-doll__goal { font-size: 15px; }
.lp-doll--day {
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.10), rgba(8, 145, 178, 0.03));
  border-color: rgba(34, 211, 238, 0.20);
}
.lp-doll--day .lp-doll__goal { font-size: 14px; }
.lp-doll--now {
  padding: 12px 14px;
  border-radius: 10px;
  background:
    radial-gradient(300px 100px at 50% 50%, rgba(251, 191, 36, 0.14), transparent 60%),
    linear-gradient(135deg, rgba(251, 191, 36, 0.10), rgba(234, 88, 12, 0.05));
  border-color: rgba(251, 191, 36, 0.28);
  margin-bottom: 0;
}
.lp-doll--now .lp-doll__goal { font-size: 14px; margin-bottom: 0; font-style: italic; }

/* Journal mockup */
.lp-journal-mock { display: flex; flex-direction: column; gap: 14px; }
.lp-mock-session {
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.lp-mock-session__head {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-2);
  margin-bottom: 12px;
}
.lp-mock-pill {
  font-size: 10px; font-weight: 800;
  padding: 2px 8px; border-radius: 999px;
  background: linear-gradient(135deg, #fbbf24, #f97316);
  color: white;
  letter-spacing: 0.05em;
}
.lp-mock-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--ink);
}
.lp-mock-row:last-child { margin-bottom: 0; }
.lp-mock-row--done { background: rgba(255, 255, 255, 0.05); }
.lp-mock-row--active {
  border-color: var(--accent);
  background: rgba(167, 139, 250, 0.06);
}
.lp-mock-num {
  font-size: 11px; font-weight: 700;
  color: var(--ink-4); width: 18px;
}
.lp-mock-placeholder { color: var(--ink-4); font-style: italic; flex: 1; }
.lp-mock-tick {
  width: 16px; height: 16px; border-radius: 50%;
  margin-left: auto;
  background: linear-gradient(135deg, #34d399, #10b981);
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.4);
}
.lp-mock-tick--empty {
  background: transparent;
  border: 1px solid var(--border-2);
  box-shadow: none;
}

/* Weeks mock — uses real .weeks-grid with fixed scale */
.lp-weeks-mock {
  --cell-size: 7px;
  --cell-gap: 2px;
  --cell-count: 52;
}

/* Why-it-works section */
.lp-why {
  padding: 60px 24px;
  text-align: center;
  max-width: 1100px; margin: 0 auto;
}
.lp-why__eyebrow {
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.lp-why__head {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.15; letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 36px;
}
.lp-why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.lp-why__item {
  padding: 28px 24px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
  text-align: center;
}
.lp-why__icon {
  width: 32px; height: 32px;
  margin: 0 auto 14px;
  color: var(--brand-dawn);
}
.lp-why__icon svg { display: block; width: 100%; height: 100%; }
.lp-why__title {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 8px;
}
.lp-why__body { font-size: 14px; color: var(--ink-2); line-height: 1.5; }

/* Pull-quote */
.lp-quote {
  text-align: center;
  padding: 40px 24px;
  max-width: 880px; margin: 0 auto;
}
.lp-quote blockquote {
  font-family: var(--font-display);
  font-weight: 400; font-style: italic;
  font-size: clamp(22px, 2.8vw, 32px);
  line-height: 1.35; letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 14px;
}
.lp-quote cite {
  font-style: normal; font-size: 13px;
  color: var(--ink-3); letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Final CTA */
.lp-final {
  text-align: center;
  padding: 60px 24px;
  max-width: 720px; margin: 0 auto;
  border-radius: var(--r-xl);
  background:
    radial-gradient(700px 320px at 50% 0%, rgba(124, 58, 237, 0.18), transparent 60%),
    radial-gradient(500px 300px at 90% 100%, rgba(245, 158, 107, 0.10), transparent 60%),
    linear-gradient(135deg, rgba(124, 58, 237, 0.05), rgba(37, 99, 235, 0.03));
  border: 1px solid rgba(124, 58, 237, 0.22);
}
.lp-final__eyebrow {
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.lp-final__head {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1; letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 24px;
  font-variation-settings: "opsz" 120;
}
.lp-final__cta { font-size: 15px; padding: 14px 28px; }
.lp-final__micro {
  margin-top: 16px;
  font-size: 12px; color: var(--ink-3);
  letter-spacing: 0.04em;
}

/* FAQ */
.lp-faq {
  max-width: 720px; margin: 24px auto 0;
  padding: 0 24px;
}
.lp-faq > summary {
  cursor: pointer; padding: 16px 0; text-align: center;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
  list-style: none;
}
.lp-faq > summary::-webkit-details-marker { display: none; }
.lp-faq[open] > summary { color: var(--ink); }
.lp-faq__items {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 0 0;
}
.lp-faq__item {
  padding: 18px 22px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.lp-faq__q {
  font-weight: 600; font-size: 15px;
  color: var(--ink); margin-bottom: 6px;
}
.lp-faq__a {
  font-size: 14px; line-height: 1.55;
  color: var(--ink-2);
}

@media (max-width: 880px) {
  .lp-hero { padding: 36px 16px 28px; }
  .lp-stats { grid-template-columns: 1fr; }
  .lp-pillar { grid-template-columns: 1fr; gap: 36px; padding: 32px 16px; }
  .lp-pillar--reverse .lp-pillar__copy { order: 0; }
  .lp-pillar--reverse .lp-pillar__visual { order: 0; }
  .lp-why__grid { grid-template-columns: 1fr; }
  body.is-anonymous #view-landing { gap: 24px; }
}

/* ============ Home view ============ */
.hero {
  position: relative;
  /* Compact mobile-first hero — was 40px padding + huge serif title +
     stacked layout (~250px tall). Now a thin banner: ~14px vertical
     padding, single-line eyebrow + headline, CTAs inline on desktop.
     Total ~70-90px tall. The user's actual todos appear above the fold. */
  padding: 14px 18px;
  border-radius: var(--r-md);
  background:
    radial-gradient(500px 200px at 0% 0%, rgba(139, 92, 246, 0.12), transparent 60%),
    linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(79, 70, 229, 0.02));
  border: 1px solid rgba(139, 92, 246, 0.18);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
  transition: background 320ms var(--ease-out), border-color 320ms var(--ease-out);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "eyebrow eyebrow" "title cta" "sub sub";
  align-items: center;
  gap: 4px 16px;
}
.hero__eyebrow { grid-area: eyebrow; }
.hero__title   { grid-area: title; }
.hero__cta     { grid-area: cta; }
.hero__sub     { grid-area: sub; }
.hero__sub:empty { display: none; }
@media (max-width: 540px) {
  .hero {
    grid-template-columns: 1fr;
    grid-template-areas: "eyebrow" "title" "sub" "cta";
    gap: 6px;
    padding: 12px 14px;
  }
  .hero__cta { width: 100%; }
}
/* Hero tones — set by the time-aware coach (getHeroState) */
.hero.is-urgent {
  background:
    radial-gradient(700px 300px at 0% 0%, rgba(251, 191, 36, 0.20), transparent 60%),
    radial-gradient(700px 300px at 100% 100%, rgba(234, 88, 12, 0.14), transparent 60%),
    linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(234, 88, 12, 0.04));
  border-color: rgba(251, 191, 36, 0.32);
  animation: heroUrgentPulse 3.5s ease-in-out infinite;
}
@keyframes heroUrgentPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.18); }
  50%      { box-shadow: 0 0 40px rgba(251, 191, 36, 0.30); }
}
.hero.is-urgent .hero__eyebrow { color: #fbbf24; }
.hero.is-urgent .hero__title em {
  background: linear-gradient(135deg, #fbbf24, #ea580c);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero.is-active {
  background:
    radial-gradient(700px 300px at 0% 0%, rgba(251, 191, 36, 0.14), transparent 60%),
    radial-gradient(700px 300px at 100% 100%, rgba(167, 139, 250, 0.10), transparent 60%),
    linear-gradient(135deg, rgba(251, 191, 36, 0.06), rgba(139, 92, 246, 0.03));
  border-color: rgba(251, 191, 36, 0.24);
}
.hero.is-active .hero__eyebrow { color: #fbbf24; }
.hero.is-active .hero__title em {
  background: linear-gradient(135deg, #fbbf24, #f97316);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero.is-celebration {
  background:
    radial-gradient(700px 300px at 0% 0%, rgba(52, 211, 153, 0.18), transparent 60%),
    radial-gradient(700px 300px at 100% 100%, rgba(16, 185, 129, 0.12), transparent 60%),
    linear-gradient(135deg, rgba(52, 211, 153, 0.06), rgba(16, 185, 129, 0.03));
  border-color: rgba(52, 211, 153, 0.26);
}
.hero.is-celebration .hero__eyebrow { color: #10b981; }
.hero.is-celebration .hero__title em {
  background: linear-gradient(135deg, #34d399, #10b981);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero__eyebrow {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--accent); margin: 0;
}
.hero__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.25; letter-spacing: -0.015em;
  color: var(--ink); margin: 0;
  font-variation-settings: "opsz" 90;
  /* Truncate so a long goal name doesn't blow the hero up vertically */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero__title em {
  font-style: italic;
  display: inline-block;
  padding-right: 0.10em;
  background: linear-gradient(135deg, var(--c-bhag-1), var(--c-bhag-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Same italic-glyph clipping fix on every gradient <em> we render.
   Right-padding for the italic glyph overhang (italic "f", "y", "l" reach
   right past their logical width); bottom padding for descenders and
   italic swashes ("g", "y", "p", "f"). Negative margins compensate so
   baseline alignment stays intact. */
.lp-hero__title em,
.lp-pillar__head em,
.lp-final__head em,
.pact-head__title em,
.time-empty__title em,
.time-head__title em,
.hero.is-urgent .hero__title em,
.hero.is-active .hero__title em,
.hero.is-celebration .hero__title em {
  display: inline-block;
  padding-right: 0.18em;
  padding-bottom: 0.22em;
  padding-top: 0.04em;
  margin-right: -0.06em;
  margin-bottom: -0.22em;
  margin-top: -0.04em;
  line-height: 1.0;
}
.hero__sub {
  font-size: 12px; color: var(--ink-3); margin: 0;
  max-width: 640px; line-height: 1.4;
}
.hero__cta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.hero__cta .btn { padding: 6px 12px; font-size: 12px; }

.home-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 18px;
}
.home-card {
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  padding: 24px 26px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
  transition: all var(--t-med) var(--ease-out);
}
.home-card:hover { border-color: var(--border-2); background: var(--surface-2); }
.home-card__head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-2);
}
.home-card__head .dot { flex: 0 0 8px; }
.home-card__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 22px; letter-spacing: -0.02em; line-height: 1.3;
  color: var(--ink); margin: 0;
}
.home-card__body { color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.home-card__body strong { color: var(--ink); font-weight: 600; }
.home-card .btn { align-self: flex-start; margin-top: 4px; }

.home-card--focus {
  background:
    radial-gradient(800px 300px at 50% 0%, rgba(251,191,36,0.10), transparent 60%),
    linear-gradient(135deg, rgba(251,191,36,0.05), rgba(234, 88, 12, 0.04));
  border-color: rgba(251, 191, 36, 0.20);
}
.home-card--focus::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--c-now-1), var(--c-now-2));
  border-radius: inherit;
}

/* ============================================================
   HOME — rich-card vocabulary matching the 3·6·9 Journal page.
   Every section is a real panel with weight, padding, gradient
   accents, and bold typography. No more flat rows on dark.
   ============================================================ */
.home-list {
  /* No max-width — fills the stage. Never reintroduce a narrower constraint. */
  width: 100%;
  display: flex; flex-direction: column;
  gap: 18px;
}

/* ============================================================
   JOURNAL SESSION MINI-CARDS — three cards in a row.
   Reuses the exact visual language of the .session cards on the
   Journal page (color-coded gradient strip, padding, header).
   ============================================================ */
/* Section wrapper for the 3·6·9 journal chip row — adds a labeled
   header so the chips have context. Same eyebrow-style header pattern
   used elsewhere; click goes to the full Journal page. */
.home-sessions-wrap {
  display: flex; flex-direction: column;
  gap: 6px;
}
.home-sessions-wrap__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 0 2px;
}
.home-sessions-wrap__label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}
.home-sessions-wrap__label:hover { color: var(--ink); }
.home-sessions-wrap__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-journal-1), var(--c-journal-2));
  box-shadow: 0 0 5px rgba(52, 211, 153, 0.45);
}
.home-sessions-wrap__hint {
  font-size: 11px; color: var(--ink-3);
  font-style: italic;
}
@media (max-width: 540px) {
  .home-sessions-wrap__hint { display: none; }
}

/* Compact 3·6·9 journal chips (mobile-first redesign May 2026).
   Was 156px-tall stacked cards, "✓ COMPLETE" rendered as a giant green
   button (inverted hierarchy — done items shouted while active ones
   whispered). Now ~60px chips, always 3-across, hierarchy inverted:
   complete = quiet, active = bright. */
.home-sessions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* always 3 columns, even on phones */
  gap: 8px;
}
.home-session {
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  min-height: 56px;
  transition: all var(--t-fast) var(--ease-out);
}
.home-session::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--g1), var(--g2));
  opacity: 0.35;
}
.home-session--morning { --g1: #fbbf24; --g2: #f97316; }
.home-session--noon    { --g1: #22d3ee; --g2: #2563eb; }
.home-session--evening { --g1: #818cf8; --g2: #6d28d9; }
.home-session:hover {
  border-color: var(--border-2);
  background: var(--surface-2);
}
/* Active session (current time window, not yet done) — THE chip that
   should draw the eye. Bright stripe, full opacity, subtle highlight. */
.home-session.is-active {
  border-color: var(--border-2);
  background: var(--surface-2);
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.15), 0 0 12px rgba(124, 58, 237, 0.10);
}
.home-session.is-active::before { opacity: 1; height: 3px; }
/* Complete session — fade into the background. No big celebration. */
.home-session.is-complete {
  opacity: 0.7;
  background: var(--surface);
}
.home-session.is-complete::before {
  background: linear-gradient(90deg, var(--c-journal-1), var(--c-journal-2));
  opacity: 0.6;
}
.home-session.is-complete:hover { opacity: 1; }
.home-session__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
}
.home-session__name {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--ink);
}
.home-session__time {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.home-session__count { display: none; }
/* Status line — replaces the giant COMPLETE button. Tiny text. */
.home-session__complete {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0;
  background: transparent;
  color: var(--c-journal-1);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}
.home-session__status {
  font-size: 11px; color: var(--ink-3);
  line-height: 1.3;
}
.home-session__status .num { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.home-session__status-cta {
  font-size: 10px; color: var(--brand-dawn);
  font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 1px;
}
.home-session.is-active .home-session__status-cta { color: var(--brand-violet); }
/* Button-styled CTA on incomplete chips. Visible affordance so the
   user can see at a glance which sessions still need action. Pill
   shape, color-coded by state. */
.home-session__cta {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: flex-start;
  padding: 4px 10px;
  margin-top: 2px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink-2);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  transition: all var(--t-fast) var(--ease-out);
}
.home-session:hover .home-session__cta {
  background: var(--surface-3);
  border-color: var(--border-2);
  color: var(--ink);
}
/* Active state — bright violet, the most "do this now" CTA */
.home-session__cta--active {
  background: rgba(124, 58, 237, 0.14);
  border-color: rgba(124, 58, 237, 0.40);
  color: var(--brand-violet);
}
.home-session:hover .home-session__cta--active {
  background: rgba(124, 58, 237, 0.22);
  border-color: rgba(124, 58, 237, 0.60);
}
/* Missed state — dawn-orange, "you owe yourself this catch-up" */
.home-session__cta--missed {
  background: rgba(245, 158, 107, 0.12);
  border-color: rgba(245, 158, 107, 0.36);
  color: var(--brand-dawn);
}
.home-session:hover .home-session__cta--missed {
  background: rgba(245, 158, 107, 0.20);
}
/* Progress bar at the bottom — slim 3px strip. */
.home-session__progress {
  display: flex; gap: 2px;
  margin-top: auto;
  padding-top: 2px;
}
.home-session__progress-cell {
  height: 3px; flex: 1; min-width: 3px;
  border-radius: 2px;
  background: var(--surface-3);
  transition: all 200ms var(--ease-out);
}
.home-session__progress-cell.is-filled {
  background: linear-gradient(135deg, var(--g1), var(--g2));
}

/* ============================================================
   PANEL — rich card containing rows (Pacts, Today + Inbox).
   Same vocabulary as journal sessions: surface, border, padding.
   ============================================================ */
.home-panel {
  position: relative;
  padding: 22px 24px 18px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
}
.home-panel--pacts::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--brand-dawn); opacity: 0.7;
}
.home-panel--todos::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--brand-violet);
  opacity: 0.5;
}
.home-panel__head {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 14px;
}
.home-panel__title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--ink); margin: 0;
  flex: 1;
}
.home-panel__count {
  font-size: 11px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.home-panel__sub {
  font-size: 12px; color: var(--ink-3);
  letter-spacing: 0.04em; text-transform: uppercase;
  font-weight: 600;
}
.home-panel__rows { display: flex; flex-direction: column; }

/* Sub-section inside a panel (Today / Inbox inside the todos panel) */
.home-subsection {
  margin-top: 18px;
}
.home-subsection__head {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 4px;
  margin-bottom: 6px;
}
.home-subsection__head::before {
  content: "";
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--brand-dawn);
  box-shadow: 0 0 6px var(--brand-dawn);
}
.home-subsection__head--quiet::before {
  background: var(--ink-4);
  box-shadow: none;
}
.home-subsection__name {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0; flex: 1;
}
.home-subsection__head--quiet .home-subsection__name { color: var(--ink-3); }
.home-subsection__count {
  font-size: 11px; color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

/* Sessions stay 3-across at every width — the chips are designed to
   fit even on a 320px screen. Stacking them vertically (old behavior)
   ate the whole viewport before the user saw a single todo. */
@media (max-width: 540px) {
  .home-session { padding: 8px 10px; }
  .home-session__name { font-size: 13px; }
  .home-session__time { display: none; }   /* save horizontal space */
}

/* Capture input — same composition as the To Do tab's capture */
.home-capture {
  display: flex; align-items: center; gap: 12px;
  padding: 2px 18px 2px 18px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  transition: all var(--t-fast) var(--ease-out);
  margin-bottom: 8px;
}
.home-capture:focus-within {
  border-color: var(--accent);
  background: rgba(124, 58, 237, 0.06);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
}
.home-capture__plus {
  font-size: 22px; line-height: 1; color: var(--ink-3); font-weight: 300;
  user-select: none;
}
.home-capture__input {
  flex: 1;
  background: transparent; border: 0;
  padding: 14px 0;
  font-family: inherit; font-size: 16px;
  color: var(--ink); outline: none;
  letter-spacing: -0.005em;
  min-width: 0;
}
.home-capture__input::placeholder { color: var(--ink-4); }
.home-capture__hint {
  display: inline-flex; align-items: center;
  font-size: 11px; color: var(--ink-4);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease-out);
  user-select: none;
  pointer-events: none;
}
.home-capture__hint kbd {
  font-family: inherit; font-size: 13px; line-height: 1;
  color: var(--ink-3);
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  padding: 3px 7px;
  font-weight: 500;
}
.home-capture.has-text .home-capture__hint,
.home-capture:focus-within .home-capture__hint { opacity: 1; }

/* ---- Section + header system ---- */
.home-section { display: flex; flex-direction: column; }
.home-section__head {
  display: flex; align-items: center; gap: 8px;
  padding: 28px 4px 12px;
}
.home-section__name {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
  flex: 1;
}
/* Quieter variant (Inbox) — secondary section */
.home-section__head--quiet .home-section__name { color: var(--ink-3); }
/* Small dawn dot prefix for Today section (quiet brand signature) */
.home-section__head--dot::before {
  content: "";
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--brand-dawn);
  box-shadow: 0 0 6px var(--brand-dawn);
  flex: 0 0 4px;
}
.home-section__count {
  font-size: 11px; color: var(--ink-4);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.home-section__more {
  display: inline-block; margin: 10px 4px 0;
  font-size: 12px; color: var(--brand-dawn);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.home-section__more:hover { color: var(--brand-gold); }

/* Spacing between the ritual cluster (Right Now + Sessions) and what follows */
.home-ritual {
  display: flex; flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

/* ---- Pacts section spacing on Home ---- */
.home-section--pacts { margin-top: 20px; }

/* ---- Drag-and-drop ghost + drop indicator (shared with .todo-item drag) ---- */
.home-drag-ghost {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  box-shadow: 0 16px 40px rgba(0,0,0,0.50), 0 6px 16px rgba(0,0,0,0.35);
  transform: scale(1.03);
  transition: none;
}
.home-drop-indicator {
  height: 2px;
  background: var(--brand-dawn);
  border-radius: 1px;
  margin: 0 16px;
  box-shadow: 0 0 8px rgba(245, 158, 107, 0.45);
}

/* Hide the legacy home-grid / pending list since the unified list owns now */
.home-grid, .pending-list { display: flex; flex-direction: column; gap: 8px; }
.pending-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
  text-align: left; appearance: none; color: inherit;
  font-family: inherit; font-size: 14px;
  width: 100%;
}
.pending-item:hover { background: var(--surface-3); border-color: var(--border-2); transform: translateX(2px); }
.pending-item__icon { font-size: 18px; }
.pending-item__text { flex: 1; }
.pending-item__title { font-weight: 600; color: var(--ink); font-size: 14px; }
.pending-item__sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.pending-item__cta { color: var(--accent); font-size: 12px; font-weight: 600; }
.pending-item--done { opacity: 0.55; cursor: default; }
.pending-item--done:hover { transform: none; }

.stat-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.stat-tile {
  padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 4px;
}
.stat-tile__label { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.stat-tile__value { font-family: var(--font-display); font-size: 24px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }

.quote-card {
  padding: 22px 26px;
  border-radius: var(--r-lg);
  background:
    linear-gradient(135deg, rgba(167,139,250,0.05), rgba(96,165,250,0.04));
  border: 1px solid var(--border);
  font-family: var(--font-display);
  font-style: italic; font-size: 17px; line-height: 1.45;
  color: var(--ink-2);
  border-left: 3px solid var(--accent);
  font-variation-settings: "opsz" 90;
}

/* ============ Goal Grid — Russian-doll nested levels ============ */
.level {
  position: relative;
  display: flex; flex-direction: column;
  gap: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  transition:
    border-color 200ms var(--ease-out),
    box-shadow 280ms var(--ease-out);
  overflow: hidden;
}
.level::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--g1, var(--accent)), var(--g2, var(--accent-2)));
  opacity: 0.7;
  border-top-left-radius: inherit; border-top-right-radius: inherit;
  transition: opacity 200ms var(--ease-out), height 200ms var(--ease-out);
  z-index: 2;
}
.level:hover {
  border-color: var(--hover-border, rgba(255,255,255,0.20));
  box-shadow:
    0 0 0 1px var(--hover-ring, rgba(255,255,255,0.10)),
    0 10px 30px var(--hover-shadow, rgba(0,0,0,0.25)),
    inset 0 0 60px var(--hover-glow, transparent);
}
.level:hover::before { opacity: 1; height: 3px; }

/* ===== LIFE — violet · BHAG is a HEADLINE that looms over the nested levels,
   not a card that contains them. No container chrome. ===== */
.level--bhag {
  --g1: var(--c-bhag-1); --g2: var(--c-bhag-2);
  padding: 12px 4px 4px;
  background: none;
  border: 0;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
  transition: none;
  gap: 8px;
}
.level--bhag::before { display: none; }
.level--bhag:hover { border-color: transparent; box-shadow: none; }
.level--bhag:hover::before { display: none; }
/* Give the Month card breathing room beneath the headline */
.level--bhag > .level--month { margin-top: 28px; }

/* ===== MONTH — indigo ===== */
.level--month {
  --g1: var(--c-month-1); --g2: var(--c-month-2);
  --hover-border: rgba(129, 140, 248, 0.32);
  --hover-ring: rgba(129, 140, 248, 0.16);
  --hover-shadow: rgba(79, 70, 229, 0.18);
  --hover-glow: rgba(99, 102, 241, 0.05);
  padding: 26px 28px; border-radius: 26px; margin-top: 22px;
  background:
    radial-gradient(600px 240px at 100% 0%, rgba(129, 140, 248, 0.08), transparent 60%),
    linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(79, 70, 229, 0.025));
  border-color: rgba(129, 140, 248, 0.14);
}

/* ===== WEEK — blue ===== */
.level--week {
  --g1: var(--c-week-1); --g2: var(--c-week-2);
  --hover-border: rgba(96, 165, 250, 0.32);
  --hover-ring: rgba(96, 165, 250, 0.16);
  --hover-shadow: rgba(37, 99, 235, 0.18);
  --hover-glow: rgba(59, 130, 246, 0.05);
  padding: 24px 26px; border-radius: 22px; margin-top: 18px;
  background:
    radial-gradient(600px 240px at 100% 0%, rgba(96, 165, 250, 0.09), transparent 60%),
    linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.025));
  border-color: rgba(96, 165, 250, 0.14);
}

/* ===== TODAY — cyan ===== */
.level--day {
  --g1: var(--c-day-1); --g2: var(--c-day-2);
  --hover-border: rgba(34, 211, 238, 0.34);
  --hover-ring: rgba(34, 211, 238, 0.16);
  --hover-shadow: rgba(8, 145, 178, 0.20);
  --hover-glow: rgba(6, 182, 212, 0.06);
  padding: 22px 24px; border-radius: 18px; margin-top: 16px;
  background:
    radial-gradient(600px 240px at 100% 0%, rgba(34, 211, 238, 0.10), transparent 60%),
    linear-gradient(135deg, rgba(6, 182, 212, 0.06), rgba(8, 145, 178, 0.03));
  border-color: rgba(34, 211, 238, 0.16);
}

/* ===== RIGHT NOW — amber (the warm action layer) ===== */
.level--now {
  --g1: var(--c-now-1); --g2: var(--c-now-2);
  --hover-border: rgba(251, 191, 36, 0.40);
  --hover-ring: rgba(251, 191, 36, 0.20);
  --hover-shadow: rgba(234, 88, 12, 0.25);
  --hover-glow: rgba(251, 191, 36, 0.08);
  padding: 22px 24px; border-radius: 16px; margin-top: 16px;
  background:
    radial-gradient(600px 220px at 50% 50%, rgba(251, 191, 36, 0.12), transparent 60%),
    linear-gradient(135deg, rgba(251, 191, 36, 0.07), rgba(234, 88, 12, 0.05));
  border-color: rgba(251, 191, 36, 0.24);
}
.level--now::before { height: 3px; opacity: 1; }

.level__pulse {
  position: absolute; top: 50%; right: -20%;
  width: 60%; height: 160%;
  background: radial-gradient(circle, rgba(251,191,36,0.18), transparent 60%);
  transform: translateY(-50%);
  filter: blur(30px); pointer-events: none;
  animation: ambient 5s ease-in-out infinite alternate;
}
@keyframes ambient {
  0% { opacity: 0.5; transform: translateY(-50%) scale(1); }
  100% { opacity: 1; transform: translateY(-50%) scale(1.08); }
}

.level__head {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-2);
  position: relative;
  flex-wrap: wrap;
}
.level--bhag .level__head { font-size: 12px; letter-spacing: 0.14em; }
.level__label { flex: 0 1 auto; }
.level__sub {
  color: var(--ink-4); font-weight: 500;
  letter-spacing: 0.04em; font-size: 11px;
  text-transform: none;
}
.level__head .check { margin-left: auto; flex: 0 0 auto; }

.level__goal {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  outline: none;
  min-height: 1.2em;
  font-variation-settings: "opsz" 100;
  position: relative;
}

/* A11Y — when a route change moves focus into a view's heading/container via
   tabindex="-1", suppress the focus ring on that programmatic target so the
   navigation stays visually identical (the focus is for AT/keyboard order,
   not a visible affordance). Real keyboard focus on interactive elements is
   unaffected — those don't carry tabindex="-1". */
.view[tabindex="-1"]:focus,
.view h1[tabindex="-1"]:focus,
.view h2[tabindex="-1"]:focus { outline: none; }
.level__goal:empty::before {
  content: attr(data-placeholder);
  color: var(--ink-4);
  font-style: italic; font-weight: 300;
}
.level--bhag .level__goal {
  font-size: clamp(28px, 4.4vw, 46px);
  font-variation-settings: "opsz" 120;
  line-height: 1.06; letter-spacing: -0.025em;
  text-shadow: 0 1px 30px rgba(139, 92, 246, 0.20);
}
.level--month .level__goal { font-size: clamp(22px, 3vw, 30px); }
.level--week  .level__goal { font-size: clamp(20px, 2.6vw, 26px); }
.level--day   .level__goal { font-size: clamp(18px, 2.4vw, 22px); }
.level--now   .level__goal { font-size: clamp(18px, 2.4vw, 22px); font-style: italic; }

.level__timer {
  display: flex; align-items: center; gap: 14px;
  padding: 4px 0;
  position: relative;
}

/* Rest day toggle — lives at the bottom of the Goal Grid */
.rest-day {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; margin-top: 18px;
  text-align: center;
}
.rest-day__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(167, 139, 250, 0.20);
  color: var(--ink-2);
  border-radius: 999px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
}
.rest-day__btn:hover {
  background: rgba(139, 92, 246, 0.16);
  border-color: rgba(167, 139, 250, 0.40);
  color: var(--ink);
  transform: translateY(-1px);
}
.rest-day__btn.is-active {
  background: linear-gradient(135deg, var(--c-bhag-1), var(--c-month-2));
  border-color: transparent;
  color: white;
  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.35);
}
.rest-day__icon { font-size: 14px; line-height: 1; }
.rest-day__hint {
  font-size: 13px; color: var(--ink-2);
  margin: 0; line-height: 1.55;
  max-width: 460px;
}

/* ============ Archive (completed goals log) ============ */
.archive {
  margin-top: 28px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.025);
  overflow: hidden;
  transition: border-color var(--t-fast) var(--ease-out);
}
.archive[open] { border-color: var(--border-2); }
.archive__summary {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 22px;
  cursor: pointer;
  list-style: none;
  font-size: 13px; font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  transition: background var(--t-fast) var(--ease-out);
}
.archive__summary::-webkit-details-marker { display: none; }
.archive__summary:hover { background: rgba(255, 255, 255, 0.025); color: var(--ink); }
.archive__icon { font-size: 16px; line-height: 1; }
.archive__label { color: var(--ink); }
.archive__count {
  margin-left: 8px;
  font-size: 12px; color: var(--ink-3);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.archive__chevron {
  margin-left: auto;
  font-size: 18px; color: var(--ink-4);
  transition: transform 220ms var(--ease-spring);
}
.archive[open] .archive__chevron { transform: rotate(90deg); }
.archive__body {
  padding: 0 22px 22px;
  display: flex; flex-direction: column; gap: 16px;
}
.archive__filters {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-top: 4px;
}
.archive-chip {
  font-family: inherit;
  padding: 6px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink-3);
  font-size: 12px; font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
}
.archive-chip:hover { background: var(--surface-2); color: var(--ink); border-color: var(--border-2); }
.archive-chip.is-active {
  background: linear-gradient(135deg, var(--c-bhag-1), var(--c-month-2));
  border-color: transparent;
  color: white;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.30);
}

.archive__list { display: flex; flex-direction: column; gap: 18px; }
.archive__empty {
  padding: 32px 16px;
  text-align: center;
  font-size: 14px; color: var(--ink-3);
  font-style: italic;
}

.archive-group { display: flex; flex-direction: column; gap: 6px; }
.archive-group__head {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-4); margin: 0 0 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.archive-group__entries { display: flex; flex-direction: column; gap: 4px; }

.archive-entry {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  transition: all var(--t-fast) var(--ease-out);
}
.archive-entry:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border);
}
.archive-entry__check {
  flex: 0 0 22px;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  background: linear-gradient(135deg, var(--c-journal-1), var(--c-journal-2));
  color: white;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.30);
  margin-top: 2px;
}
.archive-entry__body { flex: 1; min-width: 0; }
.archive-entry__goal {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 4px;
  word-wrap: break-word;
}
.archive-entry__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 11px; color: var(--ink-3);
}
.archive-entry__level-pill {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 2px 8px; border-radius: 999px;
  color: white;
  background: linear-gradient(135deg, var(--g1, var(--accent)), var(--g2, var(--accent-2)));
  box-shadow: 0 0 6px rgba(0,0,0,0.20);
}
.archive-entry__period, .archive-entry__when {
  letter-spacing: -0.005em;
}
.archive-entry__when::before { content: "·"; margin-right: 6px; color: var(--ink-4); }

.archive-entry--bhag  { --g1: var(--c-bhag-1);  --g2: var(--c-bhag-2); }
.archive-entry--month { --g1: var(--c-month-1); --g2: var(--c-month-2); }
.archive-entry--week  { --g1: var(--c-week-1);  --g2: var(--c-week-2); }
.archive-entry--day   { --g1: var(--c-day-1);   --g2: var(--c-day-2); }
.archive-entry--now   { --g1: var(--c-now-1);   --g2: var(--c-now-2); }

.dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
  background: linear-gradient(135deg, var(--g1, var(--accent)), var(--g2, var(--accent-2)));
  box-shadow: 0 0 12px var(--g2, var(--accent-2));
  flex: 0 0 8px;
}
.dot--bhag { --g1: var(--c-bhag-1); --g2: var(--c-bhag-2); }
.dot--month { --g1: var(--c-month-1); --g2: var(--c-month-2); }
.dot--week { --g1: var(--c-week-1); --g2: var(--c-week-2); }
.dot--day  { --g1: var(--c-day-1);  --g2: var(--c-day-2); }
.dot--now  { --g1: var(--c-now-1); --g2: var(--c-now-2); animation: pulse 1.8s ease-in-out infinite; }
.dot--journal { --g1: var(--c-journal-1); --g2: var(--c-journal-2); }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 12px var(--g2); transform: scale(1); }
  50%      { box-shadow: 0 0 24px var(--g2); transform: scale(1.25); }
}

/* Check button + done state — each level inherits its own --check-glow / --check-ring */
.check {
  position: relative; display: inline-grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--ink-2); cursor: pointer;
  flex: 0 0 32px;
  transition: all var(--t-fast) var(--ease-out);
}
.check svg { width: 16px; height: 16px; transform: scale(0.85); transition: transform var(--t-fast) var(--ease-spring); }
.check:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--g2, var(--accent));
  color: var(--ink);
  transform: scale(1.08);
}
.check:active { transform: scale(0.95); }
.check.check--pulsed { animation: checkPulse 0.6s var(--ease-spring); }
@keyframes checkPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 var(--check-ring, rgba(139, 92, 246, 0.5)); }
  40% { transform: scale(1.15); box-shadow: 0 0 0 16px transparent; }
  100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
}
.check.is-done {
  background: linear-gradient(135deg, var(--g1, var(--accent)), var(--g2, var(--accent)));
  border-color: transparent;
  color: var(--ink);
  box-shadow:
    0 6px 20px var(--check-glow, rgba(139, 92, 246, 0.35)),
    0 0 0 4px var(--check-ring, rgba(139, 92, 246, 0.12));
}
.check.is-done svg { transform: scale(1); stroke-width: 3; }
.check.is-done:hover {
  filter: brightness(1.10);
  transform: scale(1.06);
  border-color: transparent;
}

/* Per-level glow + ring colors (inherited by each .check inside) */
.level--bhag  { --check-glow: rgba(139, 92, 246, 0.40); --check-ring: rgba(139, 92, 246, 0.16); }
.level--month { --check-glow: rgba(99, 102, 241, 0.35); --check-ring: rgba(99, 102, 241, 0.14); }
.level--week  { --check-glow: rgba(59, 130, 246, 0.35); --check-ring: rgba(59, 130, 246, 0.14); }
.level--day   { --check-glow: rgba(6, 182, 212, 0.40);  --check-ring: rgba(6, 182, 212, 0.16); }
.level--now   { --check-glow: rgba(251, 191, 36, 0.45); --check-ring: rgba(251, 191, 36, 0.18); }

/* BHAG check has a labeled pill form */
.check--bhag {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; height: 38px; padding: 0 18px;
  border-radius: 999px; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: -0.005em;
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(167, 139, 250, 0.35);
  color: var(--ink);
  flex: 0 0 auto;
  white-space: nowrap;
}
.check--bhag svg { width: 14px; height: 14px; transform: none; flex: 0 0 14px; }
.check--bhag:hover {
  background: rgba(139, 92, 246, 0.22);
  border-color: rgba(167, 139, 250, 0.55);
  transform: none;
}
.check--bhag.is-done {
  background: linear-gradient(135deg, var(--c-bhag-1), var(--c-bhag-2));
  border-color: transparent;
  color: var(--ink);
  box-shadow:
    0 8px 24px rgba(139, 92, 246, 0.40),
    0 0 0 4px rgba(139, 92, 246, 0.15);
}

.level.is-done::before { opacity: 1; height: 3px; }
.level.is-done .level__goal { opacity: 0.88; }

.level--bhag.is-done {
  background: none;
  border-color: transparent;
  box-shadow: none;
}
.level--month.is-done {
  background:
    radial-gradient(600px 280px at 100% 0%, rgba(129, 140, 248, 0.18), transparent 60%),
    linear-gradient(135deg, rgba(99, 102, 241, 0.10), rgba(79, 70, 229, 0.05));
  border-color: rgba(129, 140, 248, 0.30);
  box-shadow: 0 0 40px rgba(99, 102, 241, 0.14);
}
.level--week.is-done {
  background:
    radial-gradient(600px 280px at 100% 0%, rgba(96, 165, 250, 0.18), transparent 60%),
    linear-gradient(135deg, rgba(59, 130, 246, 0.10), rgba(37, 99, 235, 0.05));
  border-color: rgba(96, 165, 250, 0.30);
  box-shadow: 0 0 40px rgba(59, 130, 246, 0.14);
}
.level--day.is-done {
  background:
    radial-gradient(600px 280px at 100% 0%, rgba(34, 211, 238, 0.20), transparent 60%),
    linear-gradient(135deg, rgba(6, 182, 212, 0.10), rgba(8, 145, 178, 0.05));
  border-color: rgba(34, 211, 238, 0.32);
  box-shadow: 0 0 40px rgba(6, 182, 212, 0.14);
}
.level--now.is-done {
  background:
    radial-gradient(600px 220px at 50% 50%, rgba(251, 191, 36, 0.24), transparent 60%),
    linear-gradient(135deg, rgba(251, 191, 36, 0.14), rgba(234, 88, 12, 0.10));
  border-color: rgba(251, 191, 36, 0.40);
  box-shadow: 0 0 50px rgba(251, 191, 36, 0.22);
}

/* Timer */
.timer { position: relative; width: 72px; height: 72px; flex: 0 0 72px; }
.timer__ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer__track { fill: none; stroke: rgba(255,255,255,0.07); stroke-width: 8; }
.timer__progress {
  fill: none; stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: 326.7; stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.5));
}
.timer__inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
}
.timer__time { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: var(--ink); }
.timer__state { font-size: 8px; font-weight: 700; letter-spacing: 0.16em; color: var(--ink-3); }
.timer__controls { display: flex; gap: 6px; flex-wrap: wrap; }
.timer__controls .btn { padding: 7px 14px; font-size: 12px; min-width: auto; }
.timer__controls .btn--primary { min-width: 64px; }
.timer__controls .btn--ghost { padding: 7px 10px; }
.timer.running .timer__progress { filter: drop-shadow(0 0 14px rgba(251, 191, 36, 0.85)); }
.timer.running .timer__time { animation: tickGlow 1s ease-in-out infinite; }
@keyframes tickGlow {
  0%, 100% { color: var(--ink); }
  50% { color: var(--ink); text-shadow: 0 0 12px rgba(251, 191, 36, 0.55); }
}
.timer.done .timer__time { color: var(--gold); animation: doneFlash 0.6s ease-out 3; }
@keyframes doneFlash { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Buttons */
.btn {
  appearance: none; border: 1px solid var(--border-2);
  background: var(--surface-2); color: var(--ink);
  padding: 9px 18px; border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: -0.005em;
  cursor: pointer; transition: all var(--t-fast) var(--ease-out);
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn:hover { background: var(--surface-3); border-color: var(--accent); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.97); }
.btn--primary {
  /* Solid brand violet — clean, recognizable, no 5-stop rainbow. */
  background: var(--brand-violet);
  border-color: transparent; color: white;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.32), 0 1px 0 rgba(255,255,255,0.18) inset;
  min-width: 80px;
  transition: background var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.btn--primary:hover {
  background: #6d28d9; /* slightly darker violet on hover */
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.40), 0 1px 0 rgba(255,255,255,0.22) inset;
}
.btn--ghost { background: transparent; border-color: var(--border); color: var(--ink-2); padding: 9px 12px; }
.btn--ghost:hover { background: var(--surface); color: var(--ink); }
.btn--danger { background: transparent; border-color: rgba(248, 113, 113, 0.3); color: var(--red); }
.btn--danger:hover { background: rgba(248, 113, 113, 0.1); border-color: var(--red); }

.editable { position: relative; border-radius: 6px; transition: background var(--t-fast) var(--ease-out); }
.editable:focus { background: rgba(167, 139, 250, 0.06); outline: none; }
.editable:hover:not(:focus) { background: rgba(255, 255, 255, 0.025); }

/* ============ Journal view ============ */
.journal-head {
  position: relative;
  padding: 28px 32px;
  border-radius: var(--r-xl);
  background:
    radial-gradient(700px 250px at 50% 0%, rgba(52, 211, 153, 0.14), transparent 60%),
    linear-gradient(135deg, rgba(52, 211, 153, 0.05), rgba(16, 185, 129, 0.03));
  border: 1px solid rgba(52, 211, 153, 0.18);
}
.journal-head__label {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-2); margin-bottom: 12px;
}
.journal-head__hint { color: var(--ink-4); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 13px; }
.journal-head__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(22px, 3vw, 32px); line-height: 1.15;
  letter-spacing: -0.02em; color: var(--ink);
  outline: none; min-height: 1.2em; cursor: text;
  font-variation-settings: "opsz" 100;
}
.journal-head__title:empty::before {
  content: attr(data-placeholder);
  color: var(--ink-4); font-style: italic; font-weight: 300;
}
.journal-head__meta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 14px; font-size: 13px; color: var(--ink-3);
}
.journal-streak {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 999px;
  color: var(--ink); font-weight: 600;
}
.journal-streak .streak-flame {
  width: 14px; height: 14px;
  color: var(--brand-gold);
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.45));
}

/* Day navigator — prev / label / next / Today */
.journal-day-nav {
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: auto; flex-wrap: wrap;
}
.journal-day-nav__btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--ink-2); cursor: pointer;
  display: grid; place-items: center;
  font-size: 18px; line-height: 1;
  transition: all 160ms var(--ease-out);
  font-family: inherit;
}
.journal-day-nav__btn:hover:not(:disabled) {
  background: var(--surface-2); border-color: var(--border-2); color: var(--ink);
  transform: scale(1.05);
}
.journal-day-nav__btn:disabled { opacity: 0.30; cursor: not-allowed; }
.journal-day-nav__label {
  color: var(--ink); font-weight: 600; font-size: 13px;
  font-variant-numeric: tabular-nums; letter-spacing: -0.005em;
  text-align: center;
  padding: 0 8px;
  display: inline-flex; align-items: center; gap: 6px;
}
.journal-day-nav__badge {
  font-size: 9px; font-weight: 800; letter-spacing: 0.12em;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(251, 191, 36, 0.18);
  color: #fbbf24;
  text-transform: uppercase;
  border: 1px solid rgba(251, 191, 36, 0.30);
}
.journal-day-nav__today { padding: 7px 14px; font-size: 12px; }
/* Badge sits INSIDE the label-wrap and is centered with the label as a
   group — removing it shifts the label horizontally. So we keep it in
   the layout via visibility:hidden when not applicable. The "Jump to
   today" button, in contrast, sits to the LEFT of the chevron cluster,
   so it can use display:none (via the `hidden` attribute) without
   shifting the chevrons. */
.journal-day-nav__badge.is-placeholder {
  visibility: hidden;
  pointer-events: none;
}

/* ============ Time Left (Your Life in Weeks) ============ */
.time-empty {
  display: grid; place-items: center;
  min-height: 60vh;
}
.time-empty[hidden] { display: none; }
.time-empty__inner {
  max-width: 560px; text-align: center;
  padding: 48px 32px;
  border-radius: var(--r-xl);
  background:
    radial-gradient(700px 320px at 50% 0%, rgba(139, 92, 246, 0.18), transparent 60%),
    linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(99, 102, 241, 0.03));
  border: 1px solid rgba(139, 92, 246, 0.20);
}
.time-empty__eyebrow {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.24em;
  color: var(--accent); margin-bottom: 16px;
  font-variant-caps: small-caps;
}
.time-empty__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.06; letter-spacing: -0.025em;
  color: var(--ink); margin: 0 0 16px;
  font-variation-settings: "opsz" 120;
}
.time-empty__title em {
  font-style: italic;
  background: linear-gradient(135deg, var(--c-bhag-1), var(--c-bhag-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.time-empty__sub {
  font-size: 15px; line-height: 1.6;
  color: var(--ink-3); margin: 0 0 32px;
}
.time-empty__form {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 360px; margin: 0 auto;
}
.time-empty__field {
  display: flex; flex-direction: column; gap: 6px;
  text-align: left;
}
.time-empty__field-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-3);
  padding-left: 14px;
}
.time-empty__form .input { font-size: 16px; padding: 12px 16px; }
.time-empty__form .btn { margin-top: 6px; justify-content: center; }

.time-main { display: flex; flex-direction: column; gap: 14px; }
.time-main[hidden] { display: none; }
.time-head {
  position: relative;
  padding: 24px 32px 22px;
  border-radius: var(--r-xl);
  background:
    radial-gradient(700px 300px at 50% 0%, rgba(139, 92, 246, 0.14), transparent 60%),
    linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(99, 102, 241, 0.03));
  border: 1px solid rgba(139, 92, 246, 0.18);
}
.time-head__eyebrow { margin-bottom: 8px; }
.time-head__title { line-height: 1.0; }
.time-head__eyebrow {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--accent); margin-bottom: 12px;
}
.time-head__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(28px, 4.4vw, 46px);
  line-height: 1.06; letter-spacing: -0.025em;
  color: var(--ink); margin: 0;
  outline: none; min-height: 1.2em; cursor: text;
  font-variation-settings: "opsz" 120;
  text-shadow: 0 1px 30px rgba(139, 92, 246, 0.20);
}
.time-head__title:empty::before {
  content: attr(data-placeholder);
  color: var(--ink-4);
  font-style: italic; font-weight: 300;
  text-shadow: none;
}

.time-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.time-stat {
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 4px;
}
.time-stat__value {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.time-stat__label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-3);
}

.weeks-grid-wrap {
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.weeks-grid {
  --cell-size: 10px;
  --cell-gap: 2px;
  --cell-count: 52;
  display: grid;
  grid-template-columns: repeat(var(--cell-count), var(--cell-size));
  gap: var(--cell-gap);
  justify-content: center;
  margin: 0 auto;
}
.week-cell {
  width: var(--cell-size);
  height: var(--cell-size);
  border-radius: 1px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: transform 120ms var(--ease-spring);
  position: relative;
}
.week-cell--past { border-color: transparent; }
.week-cell--past.stage-childhood  { background: rgba(167, 139, 250, 0.55); }
.week-cell--past.stage-school     { background: rgba(96, 165, 250, 0.55); }
.week-cell--past.stage-college    { background: rgba(34, 211, 238, 0.55); }
.week-cell--past.stage-career     { background: rgba(251, 191, 36, 0.50); }
.week-cell--past.stage-retirement { background: rgba(192, 132, 252, 0.45); }
.week-cell--current {
  background: #fbbf24;
  border: 0;
  z-index: 2;
  animation: weekPulse 1.6s ease-in-out infinite;
}
@keyframes weekPulse {
  0%, 100% { box-shadow: 0 0 0 1px #fbbf24, 0 0 8px rgba(251, 191, 36, 0.7); transform: scale(1); }
  50%      { box-shadow: 0 0 0 2px #fbbf24, 0 0 18px rgba(251, 191, 36, 0.95); transform: scale(1.5); }
}
.week-cell--future { border-color: rgba(255, 255, 255, 0.06); }
.week-cell:hover:not(.week-cell--current) {
  transform: scale(1.4);
  border-color: rgba(255, 255, 255, 0.30);
  z-index: 1;
}

.weeks-legend {
  display: flex; flex-wrap: wrap; gap: 14px 22px;
  padding: 12px 4px;
  font-size: 12px; color: var(--ink-2);
}
.legend-item { display: inline-flex; align-items: center; gap: 8px; }
.legend-item .muted { font-size: 11px; color: var(--ink-4); }

.dot--childhood   { --g1: #a78bfa; --g2: #8b5cf6; }
.dot--school      { --g1: #60a5fa; --g2: #3b82f6; }
.dot--college     { --g1: #22d3ee; --g2: #06b6d4; }
.dot--career      { --g1: #fbbf24; --g2: #f97316; }
.dot--retirement  { --g1: #c084fc; --g2: #a855f7; }
.dot--current     {
  --g1: #fbbf24; --g2: #f97316;
  animation: pulse 1.8s ease-in-out infinite;
}

.time-config {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 0 20px;
}
.time-config > summary {
  cursor: pointer; padding: 16px 0;
  font-weight: 600; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-2);
  list-style: none;
}
.time-config > summary::marker { display: none; }
.time-config > summary::before {
  content: "▸ ";
  display: inline-block;
  margin-right: 6px;
  transition: transform 200ms ease;
}
.time-config[open] > summary::before {
  transform: rotate(90deg);
}
.time-config__body {
  padding-bottom: 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.time-lifespan {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.lifespan-btn {
  padding: 8px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--t-fast) var(--ease-out);
}
.lifespan-btn:hover { background: var(--surface-3); color: var(--ink); }
.lifespan-btn.is-active {
  background: linear-gradient(135deg, var(--c-bhag-1), var(--c-bhag-2));
  border-color: transparent;
  color: white;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.30);
}
.lifespan-custom { width: 90px; padding: 8px 12px; font-size: 13px; }

/* Home page mini preview */
.home-time {
  padding: 24px 26px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 14px;
  transition: all var(--t-med) var(--ease-out);
}
.home-time:hover { background: var(--surface-2); border-color: var(--border-2); }
.home-time__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.home-time__label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-2);
}
.home-time__open { font-size: 12px; padding: 6px 12px; }
.home-time__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 22px; letter-spacing: -0.02em; line-height: 1.3;
  color: var(--ink); margin: 0;
}
/* Home preview — fill card width edge-to-edge via 1fr cells + square aspect-ratio */
.weeks-grid--mini {
  --cell-count: 208;
  --cell-gap: 1px;
  grid-template-columns: repeat(var(--cell-count), 1fr);
  gap: var(--cell-gap);
  width: 100%;
}
.weeks-grid--mini .week-cell {
  width: auto;
  height: auto;
  aspect-ratio: 1;
  border-radius: 1px;
}
.weeks-grid--mini .week-cell--current {
  animation: weekPulse 1.6s ease-in-out infinite;
}

/* Calendar — mark the day currently being edited */
.cal-day--current:not(.cal-day--today) {
  border-color: rgba(167, 139, 250, 0.50);
  box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.18);
  color: var(--ink);
}
.cal-day--current.cal-day--today {
  box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.25);
}

.sessions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.session {
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  padding: 22px 24px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
  transition: all var(--t-med) var(--ease-out);
}
.session::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--g1), var(--g2));
  opacity: 0.7;
}
/* Sessions follow a circadian color arc: sunrise → midday sky → twilight */
.session--morning { --g1: #fbbf24; --g2: #f97316; }  /* sunrise amber → orange */
.session--noon    { --g1: #22d3ee; --g2: #2563eb; }  /* clear cyan → blue */
.session--evening { --g1: #818cf8; --g2: #6d28d9; }  /* twilight indigo → deep violet */
.session.is-active { border-color: var(--border-2); background: var(--surface-2); }
.session.is-active::before { opacity: 1; height: 3px; }
.session.is-complete {
  background: linear-gradient(135deg, rgba(52,211,153,0.06), rgba(96,165,250,0.03));
}
.session.is-complete::before {
  background: linear-gradient(90deg, var(--c-journal-1), var(--c-journal-2));
  opacity: 1; height: 3px;
}
.session.is-locked { opacity: 0.55; }

.session__head {
  display: flex; align-items: center; gap: 10px;
}
.session__name {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 500; letter-spacing: -0.015em;
  color: var(--ink); flex: 1;
}
.session__time {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.session__count {
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  color: white;
}
.session__status {
  font-size: 12px; color: var(--ink-3);
  font-weight: 500;
}
.session__status .num { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

.entries { display: flex; flex-direction: column; gap: 8px; }
.entry {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 4px 14px;
  min-height: 44px;
  transition: all var(--t-fast) var(--ease-out);
}
.entry:focus-within { border-color: var(--accent); background: rgba(167,139,250,0.05); }
.entry__num {
  font-size: 11px; font-weight: 700;
  color: var(--ink-4); width: 18px;
  font-variant-numeric: tabular-nums;
  flex: 0 0 18px;
}
.entry textarea {
  flex: 1; background: transparent; border: 0;
  padding: 12px 0; font-size: 16px;
  color: var(--ink); outline: none;
  font-weight: 500;
  letter-spacing: -0.005em;
  font-family: inherit;
  line-height: 1.4;
  resize: none;
  overflow: hidden;
  min-height: 1.4em;
  display: block;
  width: 100%;
}
.entry textarea::placeholder { color: var(--ink-4); font-style: italic; font-weight: 300; }
.entry__check {
  width: 18px; height: 18px; border-radius: 50%;
  flex: 0 0 18px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  transition: all var(--t-fast) var(--ease-out);
}
.entry.is-filled .entry__check {
  background: linear-gradient(135deg, var(--c-journal-1), var(--c-journal-2));
  border-color: transparent;
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.45);
}

.session__complete {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--c-journal-1), var(--c-journal-2));
  color: white;
  align-self: flex-start;
  box-shadow: 0 4px 14px rgba(52, 211, 153, 0.30);
}

/* Calendar */
.calendar {
  padding: 24px 26px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}
.calendar__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.calendar__title {
  font-family: var(--font-display); font-size: 20px;
  font-weight: 500; letter-spacing: -0.02em;
  color: var(--ink);
}
.calendar__nav { display: flex; gap: 6px; }
.calendar__nav button {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--ink-2); cursor: pointer;
  display: grid; place-items: center;
  font-size: 16px; line-height: 1;
  transition: all var(--t-fast);
}
.calendar__nav button:hover { background: var(--surface-3); color: var(--ink); border-color: var(--border-2); }
.calendar__weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-4);
  margin-bottom: 8px; text-align: center;
}
.calendar__grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;
}
.cal-day {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 13px; font-weight: 600;
  color: var(--ink-2); cursor: pointer;
  appearance: none; font-family: inherit;
  transition: all var(--t-fast) var(--ease-out);
}
.cal-day:hover:not(.cal-day--empty):not(.cal-day--future) {
  background: var(--surface-3); border-color: var(--border-2); transform: translateY(-1px);
}
.cal-day--empty { background: transparent; border-color: transparent; cursor: default; }
.cal-day--today { border-color: var(--accent); color: var(--ink); }
.cal-day--today::after {
  content: ""; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
}
.cal-day--future { opacity: 0.35; cursor: default; }
.cal-day__num { font-variant-numeric: tabular-nums; }
.cal-day__dots { display: flex; gap: 2px; }
.cal-day__dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,0.15);
}
.cal-day__dot.is-on { background: linear-gradient(135deg, var(--c-journal-1), var(--c-journal-2)); box-shadow: 0 0 4px rgba(96,165,250,0.5); }
.cal-day.is-perfect {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.18), rgba(16, 185, 129, 0.10));
  border-color: rgba(52, 211, 153, 0.42);
  color: var(--ink);
  box-shadow: 0 0 14px rgba(52, 211, 153, 0.18);
}

/* ============ Settings / Modals ============ */
.modal {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: 24px;
  animation: fadeIn var(--t-med) var(--ease-out);
}
.modal[hidden] { display: none; }
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(7, 7, 12, 0.7);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.modal__card {
  position: relative; width: 100%; max-width: 560px;
  max-height: 90vh;
  max-height: 90dvh; /* dvh excludes the iOS toolbar so action buttons don't clip; vh above is the fallback */
  overflow-y: auto;
  padding: 28px 32px;
  padding-bottom: max(28px, env(safe-area-inset-bottom));
  border-radius: var(--r-lg);
  background: var(--bg-1); border: 1px solid var(--border-2);
  box-shadow: var(--shadow-lg);
  animation: rise var(--t-med) var(--ease-spring);
}
.modal__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.modal__head h2 { font-family: var(--font-display); font-weight: 500; font-size: 22px; letter-spacing: -0.015em; margin: 0; }
.modal__close {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--ink-2); font-size: 20px; cursor: pointer;
  display: grid; place-items: center;
  transition: all var(--t-fast);
}
.modal__close:hover { background: var(--surface-2); color: var(--ink); }
.modal__foot { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); text-align: center; }
.muted { color: var(--ink-4); font-size: 12px; letter-spacing: 0.02em; }

.settings__group { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; border-top: 1px solid var(--border); }
.settings__group:first-of-type { border-top: none; padding-top: 0; }
.settings__group--danger { flex-direction: row; gap: 12px; flex-wrap: wrap; }
.settings__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; cursor: pointer; }
.settings__row--field { cursor: default; flex-direction: column; align-items: stretch; gap: 8px; }
.settings__title { font-weight: 600; font-size: 14px; }
.settings__sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
/* Telegram capture section — one-tap pair flow. Status dot + label
   on top, primary action button + optional disconnect below.
   No copy-paste, no token strings exposed in the UI. */
.settings__group--telegram { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; }
.telegram-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-2);
  margin-top: 6px;
}
.telegram-status__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-3);
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  transition: background 200ms ease, box-shadow 200ms ease;
}
.telegram-status__dot[data-state="on"] {
  background: #34d399; /* same green as completed checks */
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
}
.telegram-status__dot[data-state="pending"] {
  background: #fbbf24;
  animation: telegramPulse 1.2s ease-in-out infinite;
}
@keyframes telegramPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(251, 191, 36, 0); }
}
.telegram-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 2px;
}
.telegram-actions__hint {
  font-size: 12px; color: var(--ink-3); line-height: 1.4;
}
.telegram-actions__hint strong { color: var(--ink-2); font-weight: 600; }

/* Inbox webhook section — copyable URL + regenerate. Treats the
   URL like an AWS access key: monospace, copyable, important-but-boring. */
.settings__group--inbox { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; }
.inbox-token__row {
  display: flex; align-items: stretch; gap: 6px;
  margin-top: 6px;
}
.inbox-token__url {
  flex: 1; min-width: 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  outline: none;
  overflow: auto;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.inbox-token__url:focus { border-color: var(--brand-violet); }
.inbox-token__examples { margin-top: 4px; }
.inbox-token__examples summary {
  cursor: pointer; font-size: 12px;
  color: var(--ink-3);
  padding: 4px 0;
  user-select: none;
}
.inbox-token__examples summary:hover { color: var(--ink-2); }
.inbox-token__examples[open] summary { color: var(--ink-2); margin-bottom: 8px; }
.inbox-token__code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px; line-height: 1.55;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--ink-2);
  overflow: auto;
  white-space: pre;
  margin: 0;
}
.inbox-token__actions { display: flex; gap: 8px; align-items: center; }
.btn.btn--sm { padding: 6px 12px; font-size: 12px; }

.settings__row input[type="checkbox"] {
  appearance: none; width: 40px; height: 22px;
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: 999px; position: relative; cursor: pointer;
  transition: background var(--t-fast); flex: 0 0 40px;
}
.settings__row input[type="checkbox"]::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink-2);
  transition: transform var(--t-med) var(--ease-spring);
}
.settings__row input[type="checkbox"]:checked { background: linear-gradient(135deg, var(--c-bhag-1), var(--c-month-2)); border-color: transparent; }
.settings__row input[type="checkbox"]:checked::after { transform: translateX(18px); background: white; }
.input {
  background: var(--surface-2); border: 1px solid var(--border-2);
  color: var(--ink); padding: 10px 14px;
  border-radius: var(--r-md); font-size: 16px;
  outline: none; transition: all var(--t-fast) var(--ease-out);
  font-family: inherit;
}
.input:focus { border-color: var(--accent); background: rgba(167,139,250,0.06); }
select.input { appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%238b8b97'><path d='M3 4l3 3 3-3'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; }

.time-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.time-row label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }

.quote {
  font-family: var(--font-display);
  font-size: 16px; font-style: italic;
  font-weight: 400; line-height: 1.5; color: var(--ink-2);
  padding: 14px 0 4px;
  border-left: 2px solid var(--accent); padding-left: 16px;
}

/* Personal nav-visibility popover — anchored to the gear in the topbar.
   Quiet glass panel with a warm dawn breath at the top edge. Each row is
   a single line: section dot · name · toggle. No description noise — the
   user knows what these are; they live in the nav above. */
.nav-pop {
  position: fixed; top: 76px; z-index: 95;
  width: 340px;
  background:
    radial-gradient(360px 140px at 50% -20%, rgba(245, 158, 107, 0.10), transparent 70%),
    var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 28px 80px rgba(0,0,0,0.55),
    0 6px 24px rgba(0,0,0,0.35);
  padding: 22px 22px 18px;
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  animation: rise 240ms var(--ease-spring);
}
.nav-pop__head { margin-bottom: 16px; }
.nav-pop__title {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 500;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0;
  line-height: 1.1;
}
.nav-pop__sub {
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 6px;
  line-height: 1.45;
  letter-spacing: -0.005em;
}
.nav-pop__sub em {
  font-style: italic;
  color: var(--ink-2);
}

.nav-pop__list {
  display: flex; flex-direction: column;
  gap: 2px;
  padding: 4px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.nav-pop__row {
  /* Reset browser button defaults */
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;

  display: grid;
  grid-template-columns: 12px 1fr 44px;
  gap: 16px;
  align-items: center;
  width: 100%;
  padding: 14px 6px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out);
}
.nav-pop__row:hover { background: rgba(255, 255, 255, 0.025); }
.nav-pop__row-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--c, var(--ink-3));
  box-shadow: 0 0 10px var(--c, transparent), 0 0 2px var(--c, transparent);
  transition: all 220ms var(--ease-out);
}
.nav-pop__row.is-off .nav-pop__row-dot {
  background: transparent;
  border: 1px solid var(--ink-4);
  box-shadow: none;
}
.nav-pop__row-label {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.018em;
  line-height: 1.2;
  transition: color 220ms var(--ease-out);
}
.nav-pop__row.is-off .nav-pop__row-label { color: var(--ink-3); }

/* The toggle — Apple-style pill, a touch larger than before for thumb reach */
/* Per-level "Show on Home" pill — injected into each .level__head on the
   Goal Grid. Toggles whether the goal text appears as a row in the unified
   Home list. Small chip with a 6px dot indicator; on = violet glow. */
.level-show {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: inherit;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
  cursor: pointer;
  margin-left: auto;
  transition: all var(--t-fast) var(--ease-out);
}
.level-show:hover {
  color: var(--ink); border-color: var(--border-2);
  background: var(--surface-2);
}
.level-show.is-on {
  color: var(--brand-violet);
  border-color: rgba(124, 58, 237, 0.40);
  background: rgba(124, 58, 237, 0.08);
}
.level-show__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-4);
  transition: background var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.level-show.is-on .level-show__dot {
  background: var(--brand-violet);
  box-shadow: 0 0 6px var(--brand-violet);
}
/* Disabled — goal level has no text yet. There's nothing to mirror onto
   Home, so the pill is non-interactive and visually muted. The hover state
   doesn't fire (cursor: not-allowed), and the dot stays grey. */
.level-show.is-empty,
.level-show:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.level-show.is-empty:hover,
.level-show:disabled:hover {
  color: var(--ink-3);
  background: var(--surface);
  border-color: var(--border);
}
/* When the pill is inside a .level__head, the .check button right after
   should sit right next to it (drop its margin-left:auto override). */
.level-show + .check { margin-left: 0 !important; }

.nav-toggle {
  position: relative;
  width: 44px; height: 26px;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  cursor: pointer;
  transition: background 240ms var(--ease-out), border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
  padding: 0;
  justify-self: end;
}
.nav-toggle::before {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--ink-3);
  transition: transform 260ms var(--ease-spring), background 240ms var(--ease-out);
  box-shadow: 0 1px 2px rgba(0,0,0,0.30);
}
.nav-toggle.is-on {
  background: var(--brand-violet);
  border-color: transparent;
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.32);
}
.nav-toggle.is-on::before {
  transform: translateX(18px);
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25), 0 0 6px rgba(245, 158, 107, 0.40);
}
.nav-toggle:focus { outline: none; box-shadow: 0 0 0 3px rgba(245, 158, 107, 0.22); }

.nav-pop__foot {
  margin-top: 14px;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
  font-style: italic;
  font-family: var(--font-display);
  letter-spacing: -0.003em;
}
.nav-pop__foot strong { color: var(--ink-2); font-weight: 500; font-style: normal; }

@media (max-width: 720px) {
  .nav-pop { right: 16px; left: 16px; width: auto; }
}

/* Streak popover */
.streak-pop {
  position: fixed; top: 64px; right: 24px; z-index: 95;
  min-width: 320px; max-width: 380px;
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 18px;
  animation: rise 200ms var(--ease-spring);
}
.streak-pop__head {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 14px;
}
.streak-pop__flame { display: inline-flex; align-items: center; color: var(--brand-gold); filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.55)); }
.streak-pop__flame svg { width: 20px; height: 20px; display: block; }
.streak-pop__count {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.streak-pop__unit {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-3);
}
.streak-pop__items {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 12px;
}
.streak-pop__item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 8px; border-radius: var(--r-sm);
  transition: background var(--t-fast) var(--ease-out);
}
.streak-pop__item:hover { background: var(--surface-2); }
.streak-pop__check {
  flex: 0 0 22px;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--border-2);
  color: var(--ink-4);
  margin-top: 2px;
  transition: all var(--t-fast) var(--ease-out);
}
.streak-pop__item.is-done .streak-pop__check {
  background: linear-gradient(135deg, var(--c-journal-1), var(--c-journal-2));
  border-color: transparent;
  color: var(--ink);
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.45);
}
.streak-pop__text { flex: 1; min-width: 0; }
.streak-pop__title {
  font-size: 13px; font-weight: 600;
  color: var(--ink); letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.streak-pop__sub {
  font-size: 12px; color: var(--ink-3); line-height: 1.4;
}
.streak-pop__count-mini {
  font-size: 11px; font-weight: 700;
  padding: 1px 6px; border-radius: 999px;
  background: var(--surface-3); color: var(--ink-2);
  margin-left: 4px; font-variant-numeric: tabular-nums;
}
/* Streak freeze (cosmetic) — banked count + status. Cool/icy palette so it
   reads as distinct from the warm flame, never as a money/XP element. */
.streak-pop__freeze {
  display: flex; align-items: center; gap: 8px;
  margin: 2px 0 0; padding: 9px 10px;
  border-radius: var(--r-sm);
  background: rgba(96, 165, 250, 0.10);
  border: 1px solid rgba(147, 197, 253, 0.28);
}
.streak-pop__freeze-icon {
  font-size: 14px; line-height: 1;
  color: #93c5fd;
  filter: drop-shadow(0 0 5px rgba(147, 197, 253, 0.5));
}
.streak-pop__freeze-text {
  font-size: 12px; color: var(--ink-2); line-height: 1.4;
}
.streak-pop__saved {
  margin: 8px 0 0; padding: 9px 10px;
  border-radius: var(--r-sm);
  background: rgba(52, 211, 153, 0.10);
  border: 1px solid rgba(52, 211, 153, 0.28);
  font-size: 12px; font-weight: 600; line-height: 1.4;
  color: var(--ink-2);
}
.streak-pop__repair {
  width: 100%; margin: 8px 0 0; padding: 11px 12px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  appearance: none;
  border: 1px solid rgba(147, 197, 253, 0.40);
  border-radius: var(--r-sm);
  background: rgba(96, 165, 250, 0.14);
  color: var(--ink);
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
}
.streak-pop__repair:hover {
  background: rgba(96, 165, 250, 0.24);
  border-color: rgba(147, 197, 253, 0.6);
}
.streak-pop__repair:active { transform: scale(0.98); }
.streak-pop__rest {
  width: 100%; padding: 12px;
  background: rgba(139, 92, 246, 0.10);
  border: 1px solid rgba(167, 139, 250, 0.30);
  color: var(--ink);
  border-radius: var(--r-sm);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  transition: all var(--t-fast) var(--ease-out);
}
.streak-pop__rest:hover {
  background: rgba(139, 92, 246, 0.20);
  border-color: rgba(167, 139, 250, 0.50);
}
.streak-pop__rest.is-active {
  background: linear-gradient(135deg, var(--c-bhag-1), var(--c-month-2));
  border-color: transparent;
  color: var(--ink);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.30);
}
.streak-pop__cta {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 14px 0 10px;
  padding: 12px 16px;
  appearance: none;
  border: 1px solid rgba(167, 139, 250, 0.4);
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(244, 114, 182, 0.16), rgba(167, 139, 250, 0.16));
  color: var(--ink);
  font-family: inherit;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
}
.streak-pop__cta:hover {
  background: linear-gradient(135deg, rgba(244, 114, 182, 0.28), rgba(167, 139, 250, 0.28));
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(167, 139, 250, 0.25);
}
.streak-pop__cta:active { transform: translateY(0) scale(0.98); }
.streak-pop__cta__arrow {
  color: var(--accent-2);
  font-weight: 800;
  font-size: 14px;
}
.streak-pop__note {
  margin: 6px 0 0;
  font-size: 11px; line-height: 1.5;
  color: var(--ink-2); text-align: center;
}
@media (max-width: 880px) {
  .streak-pop { right: 16px; top: 96px; min-width: 280px; }
}

/* User popover menu */
.user-menu {
  position: fixed;
  top: 64px; right: 24px;
  z-index: 95;
  min-width: 240px;
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  animation: rise 180ms var(--ease-spring);
}
.user-menu__info {
  padding: 12px 12px 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.user-menu__name {
  font-weight: 600; font-size: 14px; color: var(--ink);
  letter-spacing: -0.005em;
}
.user-menu__email {
  font-size: 12px; color: var(--ink-3); margin-top: 2px;
}
.user-menu__btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 12px;
  background: transparent; border: 0;
  color: var(--ink-2);
  font: inherit; font-size: 13px; font-weight: 500; letter-spacing: -0.005em;
  text-align: left;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.user-menu__btn:hover { background: var(--surface-2); color: var(--ink); }
.user-menu__btn--danger { color: var(--ink-2); }
.user-menu__btn--danger:hover { background: rgba(248, 113, 113, 0.08); color: var(--red); }
.user-menu__icon {
  font-size: 14px; line-height: 1; width: 18px; text-align: center;
}
@media (max-width: 880px) {
  .user-menu { right: 16px; top: 96px; }
}

/* Toast */
.toast {
  position: fixed; bottom: 32px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 80; padding: 12px 20px;
  border-radius: 999px;
  background: rgba(20, 20, 30, 0.92);
  border: 1px solid var(--border-2);
  color: var(--ink); font-size: 14px; font-weight: 500; letter-spacing: -0.005em;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none;
  transition: all var(--t-med) var(--ease-spring);
  max-width: calc(100% - 48px);
  display: flex; align-items: center; gap: 8px;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============ Sync-failure banner (data-loss guard) ============
   Persistent + non-blocking. Sits above the home indicator, full-width on
   mobile, pill-ish on desktop. Tappable (retry now / re-login). Amber for
   the retrying state, red for session-expired. Distinct from .toast so it
   can stay up indefinitely without fighting the auto-hide timer. */
.sync-banner {
  position: fixed; left: 50%;
  bottom: max(20px, calc(20px + env(safe-area-inset-bottom)));
  transform: translateX(-50%);
  z-index: 95;
  display: flex; align-items: center; gap: 10px;
  max-width: calc(100% - 32px);
  padding: 11px 16px;
  border-radius: 12px;
  background: rgba(40, 30, 10, 0.96);
  border: 1px solid rgba(251, 191, 36, 0.5);
  color: var(--ink);
  font-size: 14px; font-weight: 500; letter-spacing: -0.005em;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
}
.sync-banner[hidden] { display: none; }
.sync-banner--expired {
  background: rgba(45, 12, 12, 0.96);
  border-color: rgba(248, 113, 113, 0.55);
}
.sync-banner__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); flex: 0 0 8px;
}
.sync-banner--expired .sync-banner__dot { background: var(--red); }
.sync-banner__action {
  margin-left: 6px;
  text-decoration: underline; text-underline-offset: 2px;
  color: var(--ink-2); font-weight: 600; white-space: nowrap;
}

.confetti { position: fixed; inset: 0; z-index: 200; pointer-events: none; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.level-up { position: fixed; inset: 0; z-index: 150; pointer-events: none; display: grid; place-items: center; }
.level-up__text {
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: clamp(60px, 12vw, 140px);
  background: linear-gradient(135deg, var(--gold), var(--accent-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.04em;
  animation: levelUp 1.6s var(--ease-spring);
  filter: drop-shadow(0 0 40px rgba(251, 191, 36, 0.5));
}
@keyframes levelUp {
  0% { opacity: 0; transform: scale(0.6) rotate(-4deg); }
  20% { opacity: 1; transform: scale(1.1) rotate(2deg); }
  50% { opacity: 1; transform: scale(1) rotate(0); }
  100% { opacity: 0; transform: scale(0.95); }
}

/* ============ Responsive ============ */
@media (max-width: 1024px) {
  .home-grid { grid-template-columns: 1fr; }
  .sessions { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
  .topbar {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px 18px;
  }
  .topbar__brand { justify-content: center; }
  /* Tab strip becomes a horizontally-scrollable rail on mobile. Hides the
     scrollbar (iOS pattern), uses scroll-snap for a tab-by-tab feel, and
     fades the edges so it's visually obvious there's more content beyond
     either side. Auto-scroll-into-view of the active tab lives in setRoute. */
  .tabs {
    margin: 0; width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, transparent 0, black 18px, black calc(100% - 18px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 18px, black calc(100% - 18px), transparent 100%);
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { scroll-snap-align: center; flex-shrink: 0; }
  .topbar__stats { justify-content: center; }
  .stage { padding: 16px 16px 60px; padding-bottom: max(60px, calc(60px + env(safe-area-inset-bottom))); }
  .view { gap: 16px; }
  .hero { padding: 28px 24px; }
  .level--bhag  { padding: 8px 2px 2px; }
  .level--bhag > .level--month { margin-top: 20px; }
  .level--month { padding: 20px 18px; margin-top: 16px; }
  .level--week  { padding: 18px 16px; margin-top: 14px; }
  .level--day   { padding: 16px 14px; margin-top: 12px; }
  .level--now   { padding: 16px 14px; margin-top: 12px; }
  .stat-strip { grid-template-columns: 1fr 1fr; }
  .stat__label { display: none; }
  .stat { padding: 8px 11px; }
  .session { padding: 20px 20px; }
  .calendar { padding: 18px 18px; }
  .time-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .level--bhag .level__goal { font-size: 26px; }
  .tab { padding: 8px 12px; font-size: 12px; }
}

/* ============================================================
   TO DO — minimal Things-inspired tab
   Soul: today is a commitment, not a dumping ground.
   Hard rule: no metadata fields, no headings inside lists, no sub-sections.
   ============================================================ */
.todo-head {
  padding: 28px 32px 22px;
  border-radius: var(--r-xl);
  background:
    radial-gradient(700px 300px at 50% 0%, rgba(139, 92, 246, 0.14), transparent 60%),
    linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(99, 102, 241, 0.03));
  border: 1px solid rgba(139, 92, 246, 0.18);
}
.todo-head__eyebrow {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--accent); margin-bottom: 10px;
}
.todo-head__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(26px, 3.6vw, 38px);
  line-height: 1.1; letter-spacing: -0.022em;
  color: var(--ink); margin: 0 0 12px;
  font-variation-settings: "opsz" 120;
}
.todo-head__title em {
  font-style: italic;
  display: inline-block;
  padding-right: 0.10em;
  background: linear-gradient(135deg, var(--c-bhag-1), var(--c-bhag-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.todo-head__sub {
  font-size: 14px; color: var(--ink-2);
  margin: 0; line-height: 1.55;
  max-width: 620px;
}

/* Capture form — pill input on top, three destination chips beneath.
   Restructured May 2026 so the chip strip can sit below the rounded pill
   without breaking the pill silhouette. */
.todo-capture {
  display: flex; flex-direction: column;
  gap: 8px;
}
.todo-capture__pill {
  display: flex; align-items: center; gap: 12px;
  padding: 2px 18px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  transition: all var(--t-fast) var(--ease-out);
}
.todo-capture:focus-within .todo-capture__pill {
  border-color: var(--accent);
  background: rgba(139, 92, 246, 0.06);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.12);
}
.todo-capture__plus {
  font-size: 22px; line-height: 1; color: var(--ink-3); font-weight: 300;
  user-select: none;
}
.todo-capture__input {
  flex: 1;
  background: transparent; border: 0;
  padding: 14px 0;
  font-family: inherit; font-size: 16px;
  color: var(--ink); outline: none;
  letter-spacing: -0.005em;
  min-width: 0;
}
.todo-capture__input::placeholder { color: var(--ink-4); }
/* Screen-reader-only submit button — preserves form submission semantics */
.todo-capture__sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Destination chips — three pills below the capture input showing where
   the text will go (Inbox / Today / Pact). Always visible (discoverability)
   at quieter opacity, brighten on focus/hover. Click sends to that
   destination; keyboard shortcuts (↵ / ⇧↵ / ⌘↵) do the same. */
.todo-capture__chips {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 0 10px;
  opacity: 0.55;
  transition: opacity 220ms var(--ease-out);
}
.todo-capture:focus-within .todo-capture__chips,
.todo-capture:hover .todo-capture__chips { opacity: 1; }
.todo-capture__chip {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink-3);
  font-family: inherit;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
}
.todo-capture__chip:hover {
  color: var(--ink);
  background: var(--surface-2);
  border-color: var(--border-2);
  transform: translateY(-1px);
}
.todo-capture__chip kbd {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-4);
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}
.todo-capture__chip:hover kbd { color: var(--ink-3); }
/* Pact chip — when hovered, glow violet to signal "this kicks off the
   create-pact form with your typed text pre-filled." */
.todo-capture__chip--pact:hover {
  color: var(--brand-violet);
  border-color: rgba(124, 58, 237, 0.40);
  background: rgba(124, 58, 237, 0.08);
}
.todo-capture__chip--pact:hover kbd {
  color: var(--brand-violet);
  border-color: rgba(124, 58, 237, 0.30);
}

.todo-section {
  display: flex; flex-direction: column;
}
.todo-section__head {
  display: flex; align-items: center; gap: 10px;
  padding: 22px 4px 10px;
  border-bottom: 1px solid var(--border);
}
.todo-section__head--summary {
  cursor: pointer; list-style: none;
}
.todo-section__head--summary::-webkit-details-marker { display: none; }
.todo-section__star {
  color: #fbbf24; font-size: 14px; line-height: 1;
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.5));
}
.todo-section__icon {
  font-size: 13px; color: var(--ink-3); line-height: 1;
}
.todo-section__name {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0; flex: 1;
}
/* "Today, kept." quiet celebration — same gradient treatment as the
   pact-section equivalent. Acknowledge, don't celebrate. */
.todo-section__head--kept .todo-section__name {
  font-style: italic;
  background: linear-gradient(103deg, var(--brand-violet) 0%, var(--brand-dawn) 70%, var(--brand-gold) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: 0.10em;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
  line-height: 1.0;
  display: inline-block;
}
.todo-section__count {
  font-size: 11px; font-weight: 700;
  color: var(--ink-3);
  padding: 2px 8px; border-radius: 999px;
  background: var(--surface-2);
  font-variant-numeric: tabular-nums;
  min-width: 24px; text-align: center;
}
.todo-section__chevron {
  font-size: 18px; color: var(--ink-4);
  transition: transform 220ms var(--ease-spring);
}
.todo-section--done[open] .todo-section__chevron { transform: rotate(90deg); }
.todo-section--archived[open] .todo-section__chevron { transform: rotate(90deg); }
.todo-section--archived .todo-item { opacity: 0.7; }
.todo-section--archived .todo-item__check { cursor: default; opacity: 0.4; }
/* Trash variant of the archive button — only appears in the Archived
   section, signals "this is the permanent destruction step." */
.todo-item__archive--danger:hover {
  color: var(--red);
  background: rgba(248, 113, 113, 0.14);
  transform: scale(1.10);
}

.todo-list { display: flex; flex-direction: column; padding: 6px 0; }

.todo-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 12px 12px 4px;
  border-radius: var(--r-sm);
  background: transparent;
  transition:
    background var(--t-fast) var(--ease-out),
    opacity 380ms var(--ease-out),
    transform 380ms var(--ease-spring),
    max-height 380ms var(--ease-out),
    padding 380ms var(--ease-out);
  max-height: 200px;
}
.todo-item:hover { background: var(--surface-2); }

/* Six-dot drag handle — left of the check button. Affordance is the whole
   thing the user can grab to reorder. Subtle by default (ink-4 dots, 0
   opacity until hover) so it doesn't clutter the row. The drag pointer
   listener attaches via [data-drag-handle] in JS. */
.todo-item__handle {
  flex: 0 0 16px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 22px;
  margin-top: 1px;
  color: var(--ink-4);
  cursor: grab;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
  -webkit-touch-callout: none;
  user-select: none;
  touch-action: none;
}
.todo-item__handle svg {
  display: block; width: 8px; height: 12px;
  fill: currentColor;
}
.todo-item:hover .todo-item__handle { opacity: 0.55; }
.todo-item__handle:hover { opacity: 1 !important; color: var(--ink-2); }
.todo-item__handle:active,
.todo-item.is-dragging .todo-item__handle { cursor: grabbing; }
@media (hover: none) {
  /* Always slightly visible on touch — no hover state to discover it */
  .todo-item__handle { opacity: 0.4; }
}
/* Invisible placeholder used on rows that aren't draggable (done todos,
   archived pacts) so check buttons across the whole list still line up at
   the same x — without this, rows without handles shift left by ~28px and
   the unified list reads as a visual zigzag. */
.todo-item__handle--spacer {
  opacity: 0 !important;
  pointer-events: none;
  cursor: default;
}
.todo-item:hover .todo-item__handle--spacer { opacity: 0 !important; }
.todo-item__check {
  flex: 0 0 26px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1.5px solid var(--border-2);
  display: grid; place-items: center;
  color: transparent;
  font-size: 13px; font-weight: 800;
  cursor: pointer;
  transition: all 180ms var(--ease-spring);
  margin-top: 1px;
  /* Pseudo-element extends the touch target out to ~44pt without
     making the visual bigger. Mobile-first: every tap target must
     comfortably fit a thumb. */
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.todo-item__check::before {
  content: "";
  position: absolute; inset: -9px;
  border-radius: 50%;
}
.todo-item__check:hover {
  border-color: var(--accent);
  background: var(--surface-3);
  transform: scale(1.08);
}
/* Body is the giant tap target on mobile — tapping anywhere on it
   opens the detail panel. Generous padding ensures a 44pt-ish hit
   area on small screens. No contenteditable, no cursor:text — title
   editing happens in the detail panel. */
.todo-item__body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
  padding: 6px 4px;
  margin: -6px -4px;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.todo-item__body:hover { background: rgba(139, 92, 246, 0.04); }
.todo-item__body:focus-visible {
  outline: 1px solid rgba(124, 58, 237, 0.40);
  outline-offset: 2px;
}
.todo-item__text {
  font-size: 15px; line-height: 1.4;
  color: var(--ink);
  letter-spacing: -0.005em;
  word-break: break-word;
}
.todo-item.is-expanded .todo-item__body {
  background: rgba(139, 92, 246, 0.06);
}
/* "Today" subtitle pill — replaces the visible star icon on the row
   for active items that are starred. Tiny gold uppercase chip. */
.todo-item__when-today {
  color: var(--brand-gold);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

/* Expand panel — sibling of the row, contains only the notes textarea.
   Single-expanded model (one visible at a time across both Home + To Do).
   Indented to align under the body so it visually belongs to the row.
   Acknowledge, don't celebrate — quiet surface, no chrome. */
.todo-item__panel {
  display: flex; flex-direction: column; gap: 8px;
  padding: 2px 12px 14px 64px;  /* 64px = handle (16) + gap (12) + check (24) + gap (12) */
  animation: panelOpen 180ms var(--ease-out);
}
.todo-item__panel[hidden] { display: none; }
@keyframes panelOpen {
  0%   { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}
/* Title input in the detail panel. Explicit color + -webkit-text-fill-color
   shuts down Chromium/Brave autofill which clobbers `color` with an
   inherited Highlight value (text becomes invisible against the dark
   surface). Same defense applied to .todo-item__panel-notes below. */
.todo-item__panel-title {
  font-family: inherit;
  font-size: 15px; line-height: 1.4;
  font-weight: 500;
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  letter-spacing: -0.005em;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
  caret-color: var(--ink);
}
.todo-item__panel-title::placeholder {
  color: var(--ink-4);
  -webkit-text-fill-color: var(--ink-4);
}
.todo-item__panel-title:focus {
  border-color: var(--brand-violet);
  background: rgba(255, 255, 255, 0.06);
}
.todo-item__panel-title:-webkit-autofill,
.todo-item__panel-title:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink) !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.04) inset !important;
  caret-color: var(--ink);
}
.todo-item__panel-title[readonly] {
  background: transparent;
  border-color: transparent;
  padding: 2px 0;
  cursor: default;
}

.todo-item__panel-notes {
  font-family: inherit;
  font-size: 14px; line-height: 1.5;
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  letter-spacing: -0.003em;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  outline: none;
  resize: none;
  min-height: 72px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
  caret-color: var(--ink);
}
.todo-item__panel-notes:focus {
  border-color: var(--brand-violet);
  background: rgba(255, 255, 255, 0.06);
}
.todo-item__panel-notes::placeholder {
  color: var(--ink-4);
  font-style: italic;
}
.todo-item__panel-notes[readonly] {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.04);
  cursor: default;
}
/* Detail panel action buttons — replace the per-row icon cluster.
   Grid with auto-fit so buttons reflow gracefully: 3-across on wider
   panels, 2 on narrower, 1 on phones. Each cell ≥110px so labels
   don't get crammed. */
.todo-panel__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 6px;
  margin-top: 4px;
}
.todo-panel__action {
  min-height: 36px;
  min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 12.5px; font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  overflow: hidden;
}
.todo-panel__action svg {
  width: 15px; height: 15px;
  flex: 0 0 15px;
}
.todo-panel__action span {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.todo-panel__action:hover {
  background: var(--surface-2);
  border-color: var(--border-2);
  color: var(--ink);
}
.todo-panel__action:active { transform: scale(0.98); }
/* Star button — when toggled on (today=true), light up violet so the
   user can SEE the current state without reading the label. */
.todo-panel__action--star.is-on {
  background: rgba(251, 191, 36, 0.10);
  border-color: rgba(251, 191, 36, 0.40);
  color: var(--brand-gold);
}
.todo-panel__action--star.is-on svg {
  color: var(--brand-gold);
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.40));
}
/* Danger variant — destructive verb (Permanently delete). Red on hover. */
.todo-panel__action--danger:hover {
  background: rgba(248, 113, 113, 0.10);
  border-color: rgba(248, 113, 113, 0.40);
  color: var(--red);
}
/* Mobile sizing — force single-column stack on phones for big thumb
   targets, and inputs at ≥16px so iOS doesn't zoom on focus. */
@media (max-width: 540px) {
  .todo-panel__actions {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .todo-panel__action {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 14px;
  }
  .todo-panel__action svg { width: 17px; height: 17px; flex: 0 0 17px; }
  .todo-item__panel-title { min-height: 44px; font-size: 16px; padding: 10px 12px; }
  .todo-item__panel-notes { font-size: 15px; padding: 12px 14px; }
}
.todo-item__star {
  flex: 0 0 22px;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border: 0; background: transparent;
  color: var(--ink-4);
  cursor: pointer;
  border-radius: 50%;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              opacity var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
  margin-top: 1px;
  opacity: 0;
}
.todo-item__star svg {
  display: block; width: 13px; height: 13px;
  fill: currentColor;
}
.todo-item:hover .todo-item__star,
.todo-item__star:focus { opacity: 1; }
.todo-item__star:hover {
  color: #fbbf24;
  background: var(--surface-3);
  transform: scale(1.08);
}
.todo-item__star.is-on {
  color: #fbbf24; opacity: 1;
}
.todo-item__star.is-on svg {
  filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.55));
}
/* Promote-to-pact — circular-arrow icon that converts a captured todo into
   a recurring pact. Same vocabulary as star/delete (22×22, hover-revealed),
   uses brand-violet on hover to signal "this becomes a pact". */
.todo-item__make-pact {
  flex: 0 0 22px;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border: 0; background: transparent;
  color: var(--ink-4);
  cursor: pointer;
  border-radius: 50%;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              opacity var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
  margin-top: 1px;
  opacity: 0;
}
.todo-item__make-pact svg { display: block; width: 13px; height: 13px; }
.todo-item:hover .todo-item__make-pact,
.todo-item__make-pact:focus { opacity: 1; }
.todo-item__make-pact:hover {
  color: var(--brand-violet);
  background: rgba(124, 58, 237, 0.10);
  transform: scale(1.08);
}
@media (hover: none) { .todo-item__make-pact { opacity: 0.5; } }

.todo-item__delete {
  flex: 0 0 22px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 0; background: transparent;
  color: var(--ink-4);
  font-size: 14px; line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: all var(--t-fast) var(--ease-out);
  margin-top: 1px;
  opacity: 0;
}
.todo-item:hover .todo-item__delete,
.todo-item__delete:focus { opacity: 1; }
.todo-item__delete:hover { color: var(--red); background: rgba(248, 113, 113, 0.10); }

/* Check-off animation: fill → 380ms pause as reward → slide up & out.
   The pause is the reward. */
.todo-item.is-completing .todo-item__check {
  background: linear-gradient(135deg, var(--c-journal-1), var(--c-journal-2));
  border-color: transparent;
  color: white;
  box-shadow: 0 0 14px rgba(52, 211, 153, 0.55);
  transform: scale(1.10);
}
.todo-item.is-completing .todo-item__text {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-color: var(--ink-4);
}
.todo-item.is-completing { background: rgba(52, 211, 153, 0.05); }
.todo-item.is-leaving {
  opacity: 0;
  transform: translateY(-14px) scale(0.96);
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Done section — completed items shown chronologically */
.todo-item--done .todo-item__check {
  background: linear-gradient(135deg, var(--c-journal-1), var(--c-journal-2));
  border-color: transparent;
  color: white;
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.30);
}
.todo-item--done .todo-item__text {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-color: var(--ink-4);
}
.todo-item--done .todo-item__star { display: none; }
.todo-item__when {
  font-size: 11px; color: var(--ink-4);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px;
}
.todo-item__when > * + * {
  /* dot separator implemented via the joined string · in JS */
}

/* ----- Pact rows (unified .todo-item vocabulary) -----
   A pact uses the same row shape as a todo. The .todo-item--pact modifier
   carries pact-specific cosmetics (subtitle metadata, edit/archive buttons,
   nesting for segmented numeric pacts). One canonical row across Home and
   the Pacts tab — per design committee. */

/* Subtitle metadata bits — kept ultra-quiet so the row scans like a single
   line at a glance; the metadata sits as a faint second line. */
.todo-item__when-owed { color: var(--ink-2); }
.todo-item__when-kept { color: var(--c-journal-1); }
/* "view landing →" secondary affordance on an owned group-pact row. A real
   link (reachable + keyboard-focusable) but styled quietly to match the
   subtitle. Replaces the old bespoke .pact-card--leading "view landing" CTA. */
.todo-item__when-link {
  color: var(--brand-dawn);
  text-decoration: none;
  font-weight: 600;
}
.todo-item__when-link:hover { text-decoration: underline; }
.todo-item__when-rest { color: var(--ink-4); font-style: italic; }
.todo-item__when-goal {
  font-style: italic;
  color: var(--ink-3);
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: lowercase;
}
/* Goal rows — NO decorative identity marker. Earlier versions tried
   either a violet ring on the check (which collided with the
   active-pact-segment ring — state vs identity sharing visual vocab)
   or a left-edge violet hairline (which read as decoration noise
   because nothing else in the list used a similar marker). The
   subtitle ("this week", "today", etc.) is sufficient identity — it
   tells you the row is from the Goal Grid without competing with
   action affordances. Check button stays neutral; only state owns
   any kind of ring/glow on the check. */
.todo-item--goal.todo-item--done .todo-item__check {
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.30);
}
.todo-item__when-active {
  color: var(--brand-dawn);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-size: 10px; font-weight: 700;
}
.todo-item__when-missed {
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-size: 10px; font-weight: 700;
}
.todo-item__when-streak {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--brand-gold);
  font-weight: 600;
}
.todo-item__when-streak svg {
  width: 11px; height: 11px;
  filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.45));
}

/* Edit + Archive — same visual vocabulary as .todo-item__star / __delete.
   Right side of the row. Always faintly visible so the owner can find the
   archive on a pact they lead without having to hunt — Things 3 pattern. */
.todo-item__actions {
  display: inline-flex; align-items: center; gap: 2px;
  margin-top: 1px;
}
.todo-item__edit,
.todo-item__archive {
  flex: 0 0 24px;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border: 0; background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: 50%;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              opacity var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.todo-item__edit svg,
.todo-item__archive svg { display: block; width: 14px; height: 14px; stroke-width: 1.9; }
/* Mobile hit-target expanders (review May 2026): the icons render at
   24px but the tappable area extends outward via a transparent
   ::before so they approach Apple's 44pt floor without changing the
   visual size. Vertical expansion is generous (no neighbors above/
   below the row's action cluster); horizontal is modest since edit +
   archive sit side by side and over-expanding would make a tap
   between them ambiguous. */
.todo-item__edit, .todo-item__archive { position: relative; }
.todo-item__edit::before, .todo-item__archive::before {
  content: ""; position: absolute; top: -10px; bottom: -10px; left: -6px; right: -6px;
}
/* Edit — primary management affordance. Visible at 0.85 even when the row
   isn't hovered; hover to brand-violet + scale. */
.todo-item__edit { opacity: 0.85; color: var(--ink-2); }
.todo-item:hover .todo-item__edit { opacity: 1; color: var(--ink); }
.todo-item__edit:hover,
.todo-item__edit:focus {
  opacity: 1; color: var(--brand-violet);
  background: rgba(124, 58, 237, 0.10);
  border: 1px solid rgba(124, 58, 237, 0.30);
  transform: scale(1.08);
}
/* Archive — destructive, secondary. Visible at 0.4 always (was opacity:0,
   which made it un-findable for owners managing their own pacts — the
   100-pushups discoverability bug). Brightens on row-hover, full on
   action-hover with red tint. */
.todo-item__archive { opacity: 0.4; }
.todo-item:hover .todo-item__archive,
.todo-item__archive:focus { opacity: 0.7; }
.todo-item__archive:hover { opacity: 1; color: var(--red); background: rgba(248, 113, 113, 0.10); transform: scale(1.08); }
@media (hover: none) {
  /* Touch — keep both visible at quiet baseline opacities */
  .todo-item__edit { opacity: 0.85; }
  .todo-item__archive { opacity: 0.5; }
}

/* Off-day / archived state — softly muted, no check action.
   The crescent moon glyph fills the check slot to keep layout stable. */
.todo-item--rest,
.todo-item--archived { opacity: 0.6; }
.todo-item__check--rest {
  background: transparent;
  border-style: dashed;
  border-color: var(--ink-4);
  color: var(--ink-4);
  cursor: default;
  pointer-events: none;
}
.todo-item__check--rest svg { width: 12px; height: 12px; }

/* Numeric parent — the check slot is a progress moon. Conic gradient driven
   by an inline --p variable (0%..100%). Clickable: at <100% fills the rest
   of the segments; at 100% undoes them all (Things-style project toggle). */
/* Auto-verified check (journal mode) — looks like a regular check button
   but is non-interactive (auto-fills from journal entries). When the
   journal day is complete it fills with the emerald done gradient. */
.todo-item__check--auto {
  flex: 0 0 22px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1.5px solid var(--c-journal-1);
  display: grid; place-items: center;
  color: transparent;
  font-size: 12px; font-weight: 800;
  cursor: default;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.18);
  margin-top: 1px;
}
.todo-item__check--auto.is-full {
  background: linear-gradient(135deg, var(--c-journal-1), var(--c-journal-2));
  border-color: transparent;
  color: white;
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.40);
}
/* Journal-pact row body: clickable (opens /#/journal). Subtle cursor hint. */
.todo-item--pact-journal .todo-item__body { cursor: pointer; }
.todo-item--pact-journal:hover .todo-item__text { color: var(--ink); }
.todo-item__when-journal {
  display: inline-flex; align-items: center;
  color: var(--c-journal-1);
  font-weight: 600;
}

.todo-item__check--progress {
  appearance: none;
  background: conic-gradient(var(--brand-violet) var(--p, 0%), var(--surface-3) 0);
  border: 1.5px solid transparent;
  color: transparent;
  cursor: pointer;
  display: grid; place-items: center;
  position: relative;
  font-family: inherit;
  padding: 0;
  transition: transform 180ms var(--ease-spring),
              box-shadow var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.todo-item__check--progress:hover {
  transform: scale(1.08);
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.40);
}
.todo-item__check--progress:active { transform: scale(0.94); }
.todo-item__check--progress:disabled {
  cursor: default;
  pointer-events: none;
  opacity: 0.5;
}
.todo-item__check--progress.is-full {
  background: linear-gradient(135deg, var(--c-journal-1), var(--c-journal-2));
  color: white;
  font-size: 12px; font-weight: 800;
}
.todo-item__check--progress.is-full:hover {
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.55);
}
.todo-item--pact-parent .todo-item__text {
  /* Parent gets a slightly heavier title than a regular todo to anchor the
     group of nested segment rows beneath it. */
  font-weight: 500;
}

/* Segment rows — indented under their parent with a hairline left rail.
   Re-anchored after the unified-row alignment fix: parent rows now have a
   16px drag handle in their first slot, which pushes the parent's check
   center to ~43px. Segments sit at padding-left 60px (check center ~71px)
   so they read as nested *under and to the right of* the parent's check.
   The rail sits at x=43px (the parent's check centerline) so it visually
   descends from the parent. The horizontal stub bridges rail → segment
   check. */
.todo-item--pact-segment {
  position: relative;
  padding-left: 60px;
}
.todo-item--pact-segment::before {
  content: "";
  position: absolute;
  left: 43px; top: 4px; bottom: 4px;
  width: 1px;
  background: var(--border);
}
.todo-item--pact-segment::after {
  /* Short connector horizontal stub from rail to the check button */
  content: "";
  position: absolute;
  left: 43px; top: 50%;
  width: 13px; height: 1px;
  background: var(--border);
  transform: translateY(-50%);
}
/* Active segment — soft violet glow on the check border so it reads as
   "this one's open right now" without shouting. */
.todo-item--pact-segment--active .todo-item__check {
  border-color: var(--brand-violet);
  box-shadow: 0 0 0 1.5px rgba(124, 58, 237, 0.25);
}
.todo-item--pact-segment--past-due .todo-item__check {
  border-color: rgba(245, 158, 107, 0.40);
}
/* The last segment in a stack — clip the left rail so it doesn't dangle
   below the final row. Achieved via :last-of-type within the rendered group;
   in practice the segments stop at the end of their parent so this is mostly
   cosmetic but worth doing for correctness. */
.todo-item--pact-segment:last-of-type::before {
  bottom: 50%;
}

/* ============ Pact dot strip ============
   Replaces the old "parent + N segment rows" stack with a compact
   horizontal row of tappable dots on the parent. One dot per segment,
   state-colored. Apple Activity rings / Loop Habit Tracker vocabulary.
   Tap a dot to toggle that segment's done state. */
.pact-dots {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 10px;
}
/* Caption above the dot row — names what each dot represents.
   "× 10 pushups each" reads like a key for the strip. */
.pact-dots__caption {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-transform: lowercase;
  padding: 0 4px;
}
.pact-dots__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
}
.pact-dots__row--wrap {
  /* Day editor's dot row — explicitly allow wrapping so 10+ dots don't
     overflow on narrow phones */
  row-gap: 10px;
}
/* Cell wraps a dot + its time label as a single tap target. Click target
   is the whole cell, not just the dot — fixes the "what am I tapping?"
   problem on mobile. Vertical stack: dot on top, time below. */
.pact-dot-cell {
  appearance: none; -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 4px 4px 2px;
  margin: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 160ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
/* Vertical hit-expander for the packed dot strip. The dots are the
   primary "mark done" target for numeric pacts but render small and
   tightly spaced — expanding vertically (where there are no
   neighbors) lets a thumb that lands slightly high or low still
   register. Horizontal expansion is intentionally tiny: the dots sit
   shoulder-to-shoulder, so a wide ::before would steal taps from the
   adjacent dot. (A fuller fix is a tap-row→detail redesign, noted.) */
.pact-dot-cell::before {
  content: ""; position: absolute; top: -11px; bottom: -11px; left: -1px; right: -1px;
}
.pact-dot-cell:hover { background: rgba(255, 255, 255, 0.04); }
.pact-dot-cell:hover .pact-dot { transform: scale(1.08); border-color: var(--ink-3); }
.pact-dot-cell:hover .pact-dot.is-done { filter: brightness(1.1); border-color: transparent; }
.pact-dot-cell__time {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
/* State-specific label colors so the time itself signals what's open */
.pact-dot-cell--active .pact-dot-cell__time {
  color: var(--brand-violet);
}
.pact-dot-cell--past-due .pact-dot-cell__time {
  color: rgba(248, 113, 113, 0.75);
}
.pact-dot-cell.is-done .pact-dot-cell__time {
  color: var(--c-journal-1);
  opacity: 0.85;
}

.pact-dot {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--ink-4);
  color: transparent;
  font-size: 11px; line-height: 1;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 160ms var(--ease-out),
              border-color 160ms var(--ease-out),
              transform 160ms var(--ease-out),
              box-shadow 160ms var(--ease-out);
  pointer-events: none;   /* cell wrapper owns the click */
  position: relative;
}
/* Upcoming — quiet grey ring */
.pact-dot--future {
  /* base style above */
}
/* Active right now — orange-violet glow with a slow ambient pulse so
   "this is the open window" reads without celebrating. 5s cycle is well
   above the "shimmer" threshold (per design persona). */
.pact-dot--active {
  border-color: var(--brand-violet);
  box-shadow: 0 0 0 1.5px rgba(124, 58, 237, 0.22), 0 0 8px rgba(124, 58, 237, 0.30);
  animation: pactDotPulse 5s ease-in-out infinite;
}
@keyframes pactDotPulse {
  0%, 100% { box-shadow: 0 0 0 1.5px rgba(124, 58, 237, 0.22), 0 0 6px rgba(124, 58, 237, 0.25); }
  50%      { box-shadow: 0 0 0 2.5px rgba(124, 58, 237, 0.32), 0 0 12px rgba(124, 58, 237, 0.45); }
}
/* Past-due — missed the window, not done. Faint red ring. */
.pact-dot--past-due {
  border-color: rgba(248, 113, 113, 0.45);
}
.pact-dot--past-due:hover {
  border-color: var(--red);
}
/* Done — green fill + small check. Same green as journal/entry completion. */
.pact-dot.is-done,
.pact-dot--done {
  background: linear-gradient(135deg, var(--c-journal-1), var(--c-journal-2));
  border-color: transparent;
  color: white;
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.30);
  animation: none;
}
.pact-dot.is-done:hover,
.pact-dot--done:hover {
  filter: brightness(1.1);
  transform: scale(1.08);
}

.todo-empty {
  padding: 20px 12px;
  font-size: 14px; color: var(--ink-3);
  font-style: italic;
  line-height: 1.5;
}

/* Today celebration — when all stars are checked off */
.todo-today-clear {
  padding: 24px 18px;
  border-radius: var(--r-md);
  background:
    radial-gradient(400px 200px at 50% 0%, rgba(52, 211, 153, 0.16), transparent 60%),
    linear-gradient(135deg, rgba(52, 211, 153, 0.06), rgba(16, 185, 129, 0.03));
  border: 1px solid rgba(52, 211, 153, 0.22);
  text-align: center;
}
.todo-today-clear__title {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 500;
  color: var(--ink); margin: 0 0 4px;
  font-style: italic;
}
.todo-today-clear__sub {
  font-size: 13px; color: var(--ink-2); margin: 0;
}

@media (max-width: 720px) {
  .todo-head { padding: 22px 22px 18px; }
  .todo-head__title { font-size: 24px; }
  .todo-capture { padding-left: 14px; padding-right: 14px; }
  .todo-capture__hint kbd { font-size: 12px; padding: 2px 6px; }
  .todo-item { padding: 12px 8px; }
  .todo-item__star, .todo-item__delete { opacity: 1; }
}

.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.05ms !important;
}
.reduce-motion .aurora { display: none; }

/* ============================================================
   HOT-SWAP — completing a goal flies it to the archive
   and prompts the next one
   ============================================================ */
/* Prompt = a quiet eyebrow hint above the editable goal text. NOT an
   input — input is the contenteditable directly below. Previously
   styled as a bordered, pulsing box, which read as an input field
   and confused users about where to type. Stripped to a small
   uppercase caption + arrow, no chrome. */
.level__prompt {
  display: flex; align-items: baseline; gap: 6px;
  margin: -2px 0 6px;
  padding: 0;
  font-size: 11px; font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  border-radius: 0;
  animation: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.level__prompt[hidden] { display: none; }
.level__prompt em {
  font-style: normal;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 90;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--ink-2);
}
.level__prompt__arrow {
  font-size: 13px; font-weight: 700;
  color: var(--accent-2);
  flex: 0 0 auto;
  opacity: 0.75;
}
.level__prompt__text { flex: 1; line-height: 1.4; }

/* ============================================================
   GOAL HEADER EDIT BUTTON
   ============================================================
   A small pencil button at the end of each level header row. Opens
   the goal wizard for that level. The affordance is explicit — title
   text below is read-only display, no mystery hover/tap behavior. */
.level__edit {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 28px;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  margin-left: auto;
  border: 0; background: transparent;
  color: var(--ink-3);
  opacity: 0.5;
  cursor: pointer;
  border-radius: 50%;
  transition: opacity var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
/* When the Show-on-Home pill is injected between .level__edit and .check,
   it sits flush against the pencil — both elements are part of the
   right-side cluster so the spacing reads as one group. The pill keeps
   its left-side margin (set by .level-show below) so it doesn't
   accidentally re-grab the layout. */
.level__edit + .level-show { margin-left: 0; }
.level__edit + .check      { margin-left: 0; }
.level__edit svg { display: block; width: 15px; height: 15px; stroke-width: 1.9; }
.level__edit:hover,
.level__edit:focus-visible {
  opacity: 1; color: var(--brand-violet);
  background: rgba(124, 58, 237, 0.10);
  transform: scale(1.06);
  outline: none;
}
.level__edit:focus-visible {
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.32);
}
@media (hover: none) {
  .level__edit { opacity: 0.7; }
}

/* Sub-level "auto from BHAG" hint. Shown under the contenteditable
   on month/week/day when goalsMeta[level].type === 'quantitative'.
   Quiet caption, sits right under the goal text. */
.level__auto-hint {
  margin: 4px 0 0;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.level__auto-hint[hidden] { display: none; }

/* ============================================================
   GOAL EDIT WIZARD — modal sheet for stepping a user through
   choosing a goal type (words vs number), entering values, and
   previewing the cascade. Mirrors .pact-commit for the backdrop +
   sheet + mobile bottom-sheet behavior so the two modals feel
   like one family.
   ============================================================ */
.goal-wizard {
  position: fixed; inset: 0;
  z-index: 220;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 8, 16, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 24px;
}
.goal-wizard[hidden] { display: none; }
.goal-wizard__sheet {
  width: 100%; max-width: 560px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px 26px 20px;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px); /* dvh fallback to vh above — keeps the footer buttons above the iOS toolbar */
  overflow: auto;
}
.goal-wizard__head {
  display: flex; flex-direction: column; gap: 10px;
}
.goal-wizard__steps {
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-violet);
  font-weight: 700;
}
.goal-wizard__progress {
  width: 100%; height: 3px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.goal-wizard__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-violet), #a78bfa);
  border-radius: 999px;
  transition: width 280ms var(--ease-out);
}
.goal-wizard__title {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 500;
  margin: 4px 0 0; line-height: 1.15;
  letter-spacing: -0.01em;
}
.goal-wizard__subhead {
  font-size: 14px; line-height: 1.5;
  color: var(--ink-3);
  margin: 0;
}
.goal-wizard__body {
  display: flex; flex-direction: column; gap: 16px;
}
/* Two-up card row for the type-choice step. Stacks on mobile so the
   tap targets stay generous. */
.goal-wizard__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.goal-wizard__card {
  appearance: none; -webkit-appearance: none;
  text-align: left;
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px 16px 16px;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.goal-wizard__card:hover {
  border-color: rgba(124, 58, 237, 0.45);
  background: rgba(124, 58, 237, 0.04);
}
.goal-wizard__card.is-selected {
  border-color: var(--brand-violet);
  background: rgba(124, 58, 237, 0.10);
}
.goal-wizard__card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.32);
}
.goal-wizard__card-title {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.goal-wizard__card-body {
  font-size: 13px; line-height: 1.5;
  color: var(--ink-3);
}
.goal-wizard__card-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 2px;
}
.goal-wizard__card-tag {
  font-size: 11px;
  color: var(--ink-3);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  padding: 3px 8px;
  border-radius: 999px;
}
/* Number-mode form: vertical stack on mobile, but each row is its
   own line on desktop too — generous spacing reads as calm. */
.goal-wizard__fields {
  display: flex; flex-direction: column; gap: 14px;
}
.goal-wizard__field {
  display: flex; flex-direction: column; gap: 6px;
}
.goal-wizard__field-label {
  font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 700;
  color: var(--ink-3);
}
.goal-wizard__field-hint {
  font-size: 12px; line-height: 1.5;
  color: var(--ink-4);
}
.goal-wizard__field-hint code {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
}
.goal-wizard__input {
  appearance: none; -webkit-appearance: none;
  width: 100%;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  transition: border-color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}
.goal-wizard__input::placeholder { color: var(--ink-4); }
.goal-wizard__input:focus {
  outline: none;
  border-color: var(--brand-violet);
  background: rgba(124, 58, 237, 0.06);
}
.goal-wizard__input--display {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 14px 14px;
}
/* Live preview phrase under the number fields — the brand-violet
   display type makes it read like the goal itself, so the user
   sees what they're committing to before they commit. */
.goal-wizard__preview {
  margin-top: 4px;
  padding: 12px 14px;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.28);
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-size: 22px; font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--brand-violet);
  min-height: 1.4em;
}
.goal-wizard__preview-label {
  font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 700;
  color: var(--ink-3);
  display: block;
  margin-bottom: 6px;
}
/* Cascade preview table — four rows, period label on left in
   eyebrow style, value in display type on right. Calm spacing. */
.goal-wizard__cascade-table {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.goal-wizard__cascade-row {
  display: flex; align-items: baseline; gap: 14px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
}
.goal-wizard__cascade-row:last-child { border-bottom: none; }
.goal-wizard__cascade-period {
  flex: 0 0 70px;
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 700;
  color: var(--ink-3);
}
.goal-wizard__cascade-value {
  flex: 1;
  font-family: var(--font-display);
  font-size: 22px; font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
}
.goal-wizard__cascade-row--year .goal-wizard__cascade-value {
  font-size: 26px;
  color: var(--brand-violet);
}
.goal-wizard__caveat {
  font-size: 12.5px; line-height: 1.5;
  color: var(--ink-4);
  margin: 0;
}
/* Body of the auto-from-BHAG state (sub-level wizards). */
.goal-wizard__body-text {
  font-size: 14px; line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}
.goal-wizard__body-text strong {
  color: var(--ink);
  font-weight: 600;
}
.goal-wizard__foot {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 4px;
}
.goal-wizard__foot--spread { justify-content: space-between; }
.goal-wizard__foot .btn { min-width: 108px; }
@media (max-width: 520px) {
  .goal-wizard { align-items: flex-end; padding: 0; }
  .goal-wizard__sheet {
    border-radius: 18px 18px 0 0;
    max-width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    padding: 22px 20px 18px;
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }
  .goal-wizard__cards {
    grid-template-columns: 1fr;
  }
  .goal-wizard__title { font-size: 22px; }
  .goal-wizard__cascade-period { flex: 0 0 56px; }
  .goal-wizard__cascade-value { font-size: 19px; }
  .goal-wizard__cascade-row--year .goal-wizard__cascade-value { font-size: 22px; }
  .goal-wizard__foot .btn { min-width: 96px; }
}

/* The goal text element flying to the archive icon */
.fly-clone {
  position: fixed;
  z-index: 500;
  pointer-events: none;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  background: linear-gradient(135deg, rgba(244, 114, 182, 0.28), rgba(167, 139, 250, 0.28));
  color: var(--ink);
  padding: 12px 18px;
  border-radius: var(--r-md);
  border: 1px solid rgba(167, 139, 250, 0.45);
  box-shadow: 0 12px 40px rgba(167, 139, 250, 0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform 650ms cubic-bezier(0.5, 0, 0.5, 1.05), opacity 650ms ease;
  transform-origin: center;
}

/* Archive count badge pulses on +1 */
.archive__count.badge--pop {
  animation: archiveBadgePop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes archiveBadgePop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.5); color: white; background: linear-gradient(135deg, var(--accent-2), var(--accent)); box-shadow: 0 0 30px rgba(244, 114, 182, 0.6); }
  100% { transform: scale(1); }
}

/* Toast undo button + improved layout */
.toast__check { opacity: 0.85; font-weight: 700; color: var(--green); }
.toast__msg { flex: 1; }
.toast__undo {
  appearance: none;
  border: 1px solid rgba(167, 139, 250, 0.5);
  background: rgba(167, 139, 250, 0.12);
  color: var(--accent);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: inherit;
  transition: all var(--t-fast) var(--ease-out);
}
.toast__undo:hover { background: rgba(167, 139, 250, 0.25); color: var(--ink); border-color: var(--accent); }

/* BHAG ceremony — full-screen takeover */
.bhag-ceremony {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at center, rgba(244, 114, 182, 0.35), rgba(7, 7, 12, 0.96));
  backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
  animation: ceremonyIn 800ms cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
}
.bhag-ceremony.is-fading { animation: ceremonyOut 800ms ease forwards; }
.bhag-ceremony__inner { text-align: center; padding: 0 24px; }
.bhag-ceremony__eyebrow {
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.45em; color: var(--accent-2);
  margin-bottom: 28px;
  text-transform: uppercase;
}
.bhag-ceremony__text {
  font-family: var(--font-display);
  font-style: italic; font-weight: 700;
  font-size: clamp(56px, 14vw, 160px);
  line-height: 0.92; letter-spacing: -0.045em;
  background: linear-gradient(135deg, #fbbf24, #f472b6 45%, #a78bfa);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 80px rgba(251, 191, 36, 0.5));
}
.bhag-ceremony__sub {
  margin-top: 26px;
  font-size: 14px; color: var(--ink-2);
  font-weight: 500; letter-spacing: 0.04em;
}
@keyframes ceremonyIn  { 0% { opacity: 0; transform: scale(0.6); } 100% { opacity: 1; transform: scale(1); } }
@keyframes ceremonyOut { 0% { opacity: 1; transform: scale(1); }   100% { opacity: 0; transform: scale(1.15); } }

/* ============================================================
   PACTS — daily-habit commitments with optional skin in the game.

   Design language: the dawn arc is the brand mark — each card carries
   a subtle echo of it on the left edge that warms on hover and ignites
   on check-in. 7-day rhythm dots show the user's recent rhythm at a
   glance (memento-mori adjacent — your week, visible).

   Money is gravity, not threat: quiet tabular numerals, never red,
   never bold. The streak counter is the dopamine; the cash is the
   contract.

   Provocation: would a monk install this?
   ============================================================ */
/* Pact head — mirrors .journal-head exactly. Rich panel with dawn-tinted
/* ============ Voice mantra dictation (journal page) ============ */
.journal-mantra-controls {
  display: flex; align-items: center; gap: 12px;
  margin: 8px 0 18px;
  flex-wrap: wrap;
}
.journal-mantra-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.14), rgba(167, 139, 250, 0.06));
  border: 1px solid rgba(124, 58, 237, 0.40);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px; font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
}
.journal-mantra-btn:hover {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.22), rgba(167, 139, 250, 0.10));
  border-color: rgba(124, 58, 237, 0.65);
}
.journal-mantra-btn__icon {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--brand-violet);
}
.journal-mantra-btn__progress {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  font-variant-numeric: tabular-nums;
}
.journal-mantra-btn.is-listening {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.18), rgba(244, 114, 182, 0.10));
  border-color: rgba(248, 113, 113, 0.55);
  animation: mantraListening 1.4s ease-in-out infinite;
}
.journal-mantra-btn.is-listening .journal-mantra-btn__icon { color: #f87171; }
@keyframes mantraListening {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.22); }
  50%      { box-shadow: 0 0 0 6px rgba(248, 113, 113, 0); }
}
.journal-mantra-btn.is-complete {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.14), rgba(16, 185, 129, 0.06));
  border-color: rgba(52, 211, 153, 0.50);
}
.journal-mantra-btn.is-complete .journal-mantra-btn__icon { color: var(--c-journal-1); }
.journal-mantra-btn.is-transcribing {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.20), rgba(167, 139, 250, 0.10));
  border-color: rgba(124, 58, 237, 0.55);
  opacity: 0.85;
  cursor: progress;
}
.journal-mantra-btn.is-transcribing .journal-mantra-btn__icon { color: var(--brand-violet); }
.journal-mantra-hint {
  font-size: 12px; color: var(--ink-3);
  font-style: italic;
}
/* Hide entirely on phones — Web Speech is iffy on mobile and the user
   explicitly didn't want a mic button there. */
@media (max-width: 720px) {
  .journal-mantra-controls { display: none !important; }
}

/* ============ Pact stats / analytics page ============ */
.pact-stats__head {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 18px;
}
.pact-stats__title-row { display: flex; align-items: baseline; gap: 12px; }
.pact-stats__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.2vw, 32px);
  font-weight: 500; letter-spacing: -0.02em;
  margin: 0; color: var(--ink);
}
.pact-stats__edit { margin-left: auto; align-self: center; flex: 0 0 auto; gap: 6px; }
.pact-stats__edit svg { width: 15px; height: 15px; }
.pact-stats__sub { font-size: 13px; color: var(--ink-3); }
.pact-stats__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}
.pact-stats__grid .pact-stats__card--money { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .pact-stats__grid { grid-template-columns: 1fr 1fr; }
  .pact-stats__card--hero { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .pact-stats__grid { grid-template-columns: 1fr; }
}
.pact-stats__card {
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px;
  min-height: 110px;
  min-width: 0;
  overflow: hidden;
}
.pact-stats__card--hero {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.10), rgba(167, 139, 250, 0.04));
  border-color: rgba(124, 58, 237, 0.30);
}
.pact-stats__metric {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 500; letter-spacing: -0.025em;
  line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pact-stats__metric--green { color: var(--c-journal-1); }
.pact-stats__metric--red { color: var(--red); }
.pact-stats__metric-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--ink-3);
  margin-top: 6px;
}
.pact-stats__metric-sub { font-size: 12px; color: var(--ink-4); margin-top: 2px; }
.pact-stats__money-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}

.pact-stats__calendar-card, .pact-stats__weekday-card {
  padding: 20px 22px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 14px;
}
.pact-stats__calendar-head {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 600px) {
  .pact-stats__calendar-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}
.pact-stats__h2 {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink); margin: 0;
}
.pact-stats__legend {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-size: 11px; color: var(--ink-3);
}
.pact-stats__legend-item { display: inline-flex; align-items: center; gap: 5px; }

/* Calendar grid — 13 columns (weeks) × 7 rows (Mon-Sun). GitHub style. */
.pact-stats__calendar {
  display: grid;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  grid-template-rows: repeat(7, 16px);
  gap: 4px;
  grid-auto-flow: column;
  max-width: 480px;
}
.pact-stats__cell {
  width: 100%; min-width: 0;
  border-radius: 3px;
  background: var(--surface-3);
  border: 1px solid transparent;
}
@media (max-width: 600px) {
  .pact-stats__calendar { gap: 3px; }
  .pact-stats__calendar-card { padding: 14px 14px; }
}
.pact-stats__cell--done    { background: linear-gradient(135deg, var(--c-journal-1), var(--c-journal-2)); }
.pact-stats__cell--partial { background: rgba(52, 211, 153, 0.30); }
.pact-stats__cell--missed  { background: rgba(248, 113, 113, 0.35); border-color: rgba(248, 113, 113, 0.55); }
.pact-stats__cell--rest    { background: rgba(167, 139, 250, 0.20); border-color: rgba(167, 139, 250, 0.40); }
.pact-stats__cell--future, .pact-stats__cell--none { background: var(--surface-3); opacity: 0.55; }
.pact-stats__cell--today { box-shadow: 0 0 0 1.5px var(--brand-violet); }
.pact-stats__cell { cursor: pointer; transition: transform var(--t-fast) var(--ease-out); }
.pact-stats__cell:hover { transform: scale(1.20); }
.pact-stats__cell--future { cursor: default; }
.pact-stats__cell--future:hover { transform: none; }
.pact-stats__cell--selected { box-shadow: 0 0 0 1.5px var(--brand-gold); }

.pact-stats__calendar-hint {
  font-size: 11px; color: var(--ink-4);
  margin: 10px 0 0; font-style: italic;
}
.pact-stats__early-state {
  font-size: 12px; color: var(--ink-3);
  font-style: italic;
  margin: 14px 0 0;
}

/* Day editor — pops up under the calendar when a cell is tapped */
.pact-stats__day-editor {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  animation: panelOpen 180ms var(--ease-out);
}
.pact-stats__day-editor[hidden] { display: none; }
.pact-stats__day-editor-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.pact-stats__day-editor-date {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.pact-stats__day-editor-close {
  background: transparent; border: 0;
  color: var(--ink-3);
  font-size: 18px; line-height: 1;
  cursor: pointer; padding: 4px 8px;
  border-radius: 4px;
}
.pact-stats__day-editor-close:hover { color: var(--ink); background: var(--surface-2); }
.pact-stats__day-editor-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 8px;
}

/* Weekday bars */
.pact-stats__weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 600px) {
  .pact-stats__weekdays { gap: 4px; }
  .pact-stats__weekday { padding: 6px 2px; }
  .pact-stats__weekday-name { font-size: 9px; letter-spacing: 0.04em; }
  .pact-stats__weekday-pct { font-size: 14px; }
}
.pact-stats__weekday {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 4px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
}
.pact-stats__weekday-name {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}
.pact-stats__weekday-pct {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pact-stats__weekday-bar {
  width: 100%; height: 4px;
  border-radius: 2px;
  background: var(--surface-3);
  overflow: hidden;
}
.pact-stats__weekday-bar-fill {
  height: 100%;
  background: linear-gradient(135deg, var(--c-journal-1), var(--c-journal-2));
  border-radius: 2px;
  transition: width 280ms var(--ease-out);
}

/* ============ Pact head — original block-level header (used by
   pact-new / pact-edit views). Eyebrow + Fraunces title + meta row.
   Same visual weight as the 3·6·9 Journal title block. */
.pact-head {
  position: relative;
  padding: 28px 32px;
  border-radius: var(--r-xl);
  background:
    radial-gradient(700px 250px at 50% 0%, rgba(245, 158, 107, 0.14), transparent 60%),
    linear-gradient(135deg, rgba(124, 58, 237, 0.05), rgba(245, 158, 107, 0.03));
  border: 1px solid rgba(245, 158, 107, 0.18);
}
.pact-head__eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-2);
  margin-bottom: 12px;
}
.pact-head__eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-dawn);
  box-shadow: 0 0 8px var(--brand-dawn);
}
.pact-head__hint { color: var(--ink-4); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 13px; }
.pact-head__title {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 400;
  letter-spacing: -0.028em;
  line-height: 1.04;
  margin: 0 0 16px;
  color: var(--ink);
  font-variation-settings: "opsz" 144;
}
.pact-head__sub {
  font-size: 14px; color: var(--ink-3);
  line-height: 1.55; max-width: 620px; margin: 0;
}
.pact-head__meta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 18px; font-size: 13px; color: var(--ink-3);
}
.pact-head__actions {
  display: inline-flex; gap: 12px; align-items: center;
}
.pact-head__owed {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.pact-head__owed strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
}

.pact-section {
  padding: 0;
}
.pact-section + .pact-section { margin-top: 12px; }
.pact-section__head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 4px 10px;
}
.pact-section__head::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-dawn);
  box-shadow: 0 0 6px var(--brand-dawn);
  flex: 0 0 6px;
}
.pact-section__head--kept::before { background: var(--brand-gold); box-shadow: 0 0 6px var(--brand-gold); }

/* Archived pacts — collapsed details, mirrors .todo-section--done */
.pact-section__head--summary { cursor: pointer; list-style: none; }
.pact-section__head--summary::-webkit-details-marker { display: none; }
.pact-section__chevron {
  font-size: 16px; color: var(--ink-4);
  transition: transform 220ms var(--ease-spring);
  margin-left: 4px;
}
.pact-section--archived[open] .pact-section__chevron { transform: rotate(90deg); }
.pact-section--archived .pact-card { opacity: 0.7; }
.pact-section--archived .pact-card::before { background: var(--ink-4); opacity: 0.4; }
.pact-section--archived .pact-card__archive { display: none; }
.pact-section__name {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0; flex: 1;
}
.pact-section__head--kept .pact-section__name {
  font-style: italic;
  background: linear-gradient(103deg, var(--brand-violet) 0%, var(--brand-dawn) 70%, var(--brand-gold) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: 0.10em;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
  line-height: 1.0;
  display: inline-block;
}
.pact-section__head--kept { border-bottom-color: rgba(245, 158, 107, 0.18); }
.pact-section__sub {
  font-size: 13px; color: var(--ink-3);
  font-style: italic; font-family: var(--font-display);
}
.pact-section__count {
  font-size: 11px; font-weight: 600;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.pact-list { display: flex; flex-direction: column; gap: 18px; padding: 18px 0; }

/* ----- Pact card — uses .session vocabulary from the Journal page.
   22px padding, surface bg, 1px border, 2px gradient strip on top.
   Same visual weight as a journal session card.
   4-column grid: check · body · streak/money · archive (own column so no overlap) ----- */
.pact-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
  transition:
    background var(--t-med) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    transform var(--t-fast) var(--ease-out),
    opacity 380ms var(--ease-out),
    max-height 380ms var(--ease-out),
    padding 380ms var(--ease-out);
  max-height: 300px;
}
.pact-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  /* Solid violet strip — same as the home apex card. Dawn reads as muddy
     orange on these wide horizontal lines; violet matches the brand-primary
     surface chrome and sits better against the dark backdrop. */
  background: var(--brand-violet);
  opacity: 0.85;
  transition: opacity var(--t-fast) var(--ease-out), height var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}

/* ----- Segmented (numeric) pact card -----
   Same outer .pact-card vocabulary but the layout shifts: the top row is the
   familiar 4-column grid (just without the parent check — segments own
   checks), and below it sits a stack of .pact-segment rows. */
.pact-card--segmented {
  display: block; /* override the grid layout — head row + segments stack */
  padding: 22px 24px 18px;
  max-height: none; /* segments grow the card */
}
.pact-card--segmented .pact-card__head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: start;
  gap: 20px;
}
.pact-card--segmented .pact-card__body { min-width: 0; }

/* Aggregate progress pills — show under the title in segmented mode.
   "60 of 100 push-ups" + "3 of 5". Same .pact-pill recipe everywhere.
   Tabular nums so the digits stay aligned as they climb. */
.pact-pills {
  display: flex; flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.pact-pill {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.pact-pill--gold { color: var(--brand-gold); }

/* Stack of inline segment rows beneath the parent card head */
.pact-segments {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* Individual segment row — 44px check left, content middle, "i / N" right.
   Compact (56-ish px), restrained, no bold. */
.pact-segment {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 16px 10px 12px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid transparent;
  transition: opacity var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}

/* Per-state visuals (per UX spec) -------------------------------------- */

/* Future — locked, dimmed, check disabled */
.pact-segment--future { opacity: 0.55; }
.pact-segment--future .pact-segment__check { cursor: not-allowed; }

/* Active — "it's time." 2px left-edge violet strip + tiny dawn dot before
   the time. Brighter border. The only dawn in the card and it's earned. */
.pact-segment--active {
  border-color: var(--border-2);
  background: var(--surface-3);
}
.pact-segment--active::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px;
  background: var(--brand-violet);
  border-radius: 2px;
}
.pact-segment__activedot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-dawn);
  box-shadow: 0 0 6px var(--brand-dawn);
  flex: 0 0 6px;
}

/* Past-due (unchecked, time has passed) — dawn-tinted border, quiet
   "MISSED" chip. Never red, never bold, never shake. */
.pact-segment--past-due {
  border-color: rgba(245, 158, 107, 0.28);
}
.pact-segment__chip {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(245, 158, 107, 0.10);
  color: var(--ink-3);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em;
  margin-left: 8px;
}

/* Done — emerald check + dim the label */
.pact-segment--done .pact-segment__label,
.pact-segment--done .pact-segment__time { color: var(--ink-3); }

/* The 44px check button — same vocabulary as .pact-card__check */
.pact-segment__check {
  appearance: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-4);
  background: transparent;
  cursor: pointer;
  display: grid; place-items: center;
  font-family: inherit;
  transition: all var(--t-fast) var(--ease-out);
}
.pact-segment__check:hover {
  border-color: var(--brand-dawn);
  transform: scale(1.06);
  box-shadow: 0 0 12px rgba(245, 158, 107, 0.2);
}
.pact-segment__check:active { transform: scale(0.96); }
.pact-segment__check svg { display: block; width: 18px; height: 18px; }
.pact-segment--done .pact-segment__check {
  border-color: transparent;
  background: linear-gradient(135deg, var(--c-journal-1), var(--c-journal-2));
}

/* Body — Fraunces label (the count), Inter time below */
.pact-segment__body {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.pact-segment__label {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.pact-segment__time {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.pact-segment--active .pact-segment__time { color: var(--ink-2); }

/* "1 / 5" index — tiny, far right, quiet */
.pact-segment__index {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.pact-card:hover {
  border-color: var(--border-2);
  background: var(--surface-2);
}
.pact-card:hover::before { opacity: 1; height: 3px; }
.pact-card--done::before {
  background: linear-gradient(90deg, var(--c-journal-1), var(--c-journal-2));
  opacity: 1; height: 3px;
}
.pact-card--done {
  background: linear-gradient(135deg, rgba(52,211,153,0.06), rgba(96,165,250,0.03));
}

.pact-card__check {
  flex: 0 0 44px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--border-2);
  background: transparent;
  display: grid; place-items: center;
  cursor: pointer;
  transition: all 240ms var(--ease-spring);
  color: transparent;
  padding: 0;
  appearance: none; -webkit-appearance: none;
}
.pact-card__check:hover {
  border-color: var(--brand-dawn);
  transform: scale(1.06);
  box-shadow: 0 0 0 6px rgba(245, 158, 107, 0.10);
}
.pact-card__check svg { display: block; width: 18px; height: 18px; }

.pact-card__body { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pact-card__title {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}
.pact-card__meta {
  font-size: 13px; color: var(--ink-3);
  display: flex; gap: 8px; align-items: center;
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
}
.pact-card__meta-sep { color: var(--ink-4); }
.pact-card__leader { color: var(--ink-2); }
.pact-card__pill {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  background: var(--brand-violet);
  color: white;
  letter-spacing: 0.02em;
}

/* Card actions column — owner-only icon buttons. Edit is always visible
   (primary discoverable action). Archive stays hover-revealed (destructive,
   secondary). Stacks horizontally; both share the same 32px circle vocab. */
.pact-card__actions {
  display: flex; align-items: center; gap: 6px;
  align-self: center;
}
.pact-card__edit,
.pact-card__archive {
  appearance: none; -webkit-appearance: none;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink-3);
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
  padding: 0;
}
.pact-card__edit svg,
.pact-card__archive svg { display: block; width: 15px; height: 15px; }
/* Edit is always visible — discoverability matters more than visual quiet
   for an action the user is now actively looking for. */
.pact-card__edit { opacity: 0.7; }
.pact-card__edit:hover {
  opacity: 1; color: var(--ink);
  border-color: var(--brand-violet);
  background: rgba(124, 58, 237, 0.10);
  transform: scale(1.05);
}
/* Archive stays hover-revealed (destructive, secondary). On touch always 55%. */
.pact-card__archive { opacity: 0; }
.pact-card:hover .pact-card__archive,
.pact-card__archive:focus { opacity: 1; }
.pact-card__archive:hover {
  color: var(--red);
  border-color: rgba(248, 113, 113, 0.40);
  background: rgba(248, 113, 113, 0.08);
  transform: scale(1.05);
}
@media (hover: none) {
  .pact-card__archive { opacity: 0.55; }
}

/* Off-day pacts — informational only. Muted card, no check button (replaced
   with a small moon glyph in the same slot to preserve layout). The "rest
   day" tag in the meta row makes the state legible without shouting. */
.pact-card--offday {
  opacity: 0.65;
}
.pact-card--offday::before {
  /* Drop the violet strip on off-day cards — they're context, not action */
  opacity: 0.35;
}
.pact-card__check--rest {
  border-style: dashed !important;
  background: transparent !important;
  color: var(--ink-4);
  cursor: default !important;
  pointer-events: none;
}
.pact-card__check--rest:hover {
  transform: none !important;
  box-shadow: none !important;
}
.pact-card__rest-tag {
  font-style: italic;
  color: var(--ink-4);
  font-size: 12.5px;
}

/* 7-day rhythm strip — the visceral memory of the past week.
   Each dot is a day: done (gradient-filled), missed (dim outline),
   rest (warm gold ring), upcoming/future (faint hairline). */
.pact-rhythm {
  display: flex; gap: 5px; align-items: center;
  padding-top: 2px;
}
.pact-rhythm__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--ink-4);
  transition: all var(--t-fast) var(--ease-out);
}
.pact-rhythm__dot--done {
  background: var(--brand-dawn);
  border-color: transparent;
  box-shadow: 0 0 5px rgba(245, 158, 107, 0.45);
}
.pact-rhythm__dot--missed { border-color: var(--ink-3); opacity: 0.45; }
.pact-rhythm__dot--rest {
  background: transparent;
  border-color: var(--brand-gold);
  border-width: 1.5px;
}
.pact-rhythm__dot--today { transform: scale(1.25); border-color: var(--brand-dawn); border-width: 1.5px; }
.pact-rhythm__dot--today.pact-rhythm__dot--done {
  border-color: transparent;
  background: var(--brand-gold);
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.25), 0 0 8px rgba(251, 191, 36, 0.60);
}
.pact-rhythm__dot--future { opacity: 0.22; }

.pact-card__right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}

/* Streak badge — the dopamine. Subtle warm pulse when on a run. */
.pact-card__streak {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-display);
  font-size: 16px; font-weight: 500;
  color: var(--brand-gold);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.pact-card__streak svg {
  width: 13px; height: 13px;
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.45));
}
.pact-card__streak--zero { color: var(--ink-4); }
.pact-card__streak--zero svg { filter: none; opacity: 0.45; }

.pact-card__money {
  font-size: 13px; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.003em;
}
.pact-card__money--kept { color: var(--brand-gold); }
.pact-card__money--free { color: var(--ink-4); }
.pact-card__money--owed { color: var(--ink); }

/* Check-in animation: fill → 380ms pause → slide out.
   Same Things rhythm as To Do. */
.pact-card.is-checking {
  background:
    radial-gradient(500px 200px at 0% 50%, rgba(245, 158, 107, 0.18), transparent 70%),
    var(--surface-2);
  border-color: rgba(245, 158, 107, 0.40);
}
.pact-card.is-checking::before {
  opacity: 1;
  box-shadow: 0 0 28px rgba(245, 158, 107, 0.55);
}
.pact-card.is-checking .pact-card__check {
  /* Emerald — matches the COMPLETE state from the Journal page. */
  background: linear-gradient(135deg, var(--c-journal-1), var(--c-journal-2));
  border-color: transparent;
  color: white;
  box-shadow: 0 0 24px rgba(52, 211, 153, 0.55);
  transform: scale(1.10);
}
.pact-card.is-checking .pact-card__money { color: var(--brand-gold); }
.pact-card.is-leaving {
  opacity: 0;
  transform: translateY(-14px) scale(0.96);
  max-height: 0;
  padding-top: 0; padding-bottom: 0;
  pointer-events: none;
  overflow: hidden;
  border-color: transparent;
}

/* Already-done card (lives quietly in "Your pacts" once checked today) */
.pact-card--done { opacity: 0.78; }
.pact-card--done .pact-card__check {
  /* Emerald — completion = green check, same as journal and to-do. */
  background: linear-gradient(135deg, var(--c-journal-1), var(--c-journal-2));
  border-color: transparent;
  color: white;
}
.pact-card--done .pact-card__title { color: var(--ink-2); }
.pact-card--done .pact-card__money--kept { color: var(--brand-gold); }
.pact-card--done::before { opacity: 0.85; }

/* Pact-you-lead card — the leader's view of their own group pact.
   Whole card is a link to the public landing page. */
.pact-card--leading {
  /* Outer wrapper is now a div (was an <a>) — the inner .pact-card__link
     owns the grid layout, and an edit button sits as a sibling overlay
     in the top-right. position: relative so the edit button anchors here. */
  display: block;
  padding: 0;
  cursor: default;
  color: var(--ink);
  background:
    radial-gradient(520px 160px at 0% 50%, rgba(124, 58, 237, 0.14), transparent 70%),
    radial-gradient(320px 140px at 100% 50%, rgba(245, 158, 107, 0.08), transparent 70%),
    var(--surface);
}
.pact-card--leading:hover {
  border-color: rgba(124, 58, 237, 0.35);
  transform: translateY(-1px);
}
/* Inner link inherits the grid layout that .pact-card used to have.
   Extra right-padding reserves clear space for the edit pencil that
   sits absolutely positioned at top-right (otherwise the "$X / miss"
   text collides with the button). */
.pact-card--leading .pact-card__link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
  padding-right: 64px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: inherit;
}
.pact-card--leading .pact-card__check {
  background: var(--brand-violet);
  border-color: transparent;
  color: white;
  pointer-events: none;
}
.pact-card--leading .pact-card__check svg { width: 22px; height: 22px; }
/* Edit pencil — overlay vertically-centered on the right edge.
   Sits in the padding-right area reserved by .pact-card__link so it
   doesn't visually collide with the "$X / miss" copy in the right
   column. Solid-enough background to read as a button at a glance. */
.pact-card__edit--leading {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  z-index: 2;
  background: rgba(10, 8, 20, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--ink-2);
  width: 34px; height: 34px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}
.pact-card__edit--leading:hover {
  color: var(--ink);
  border-color: rgba(124, 58, 237, 0.55);
  background: rgba(124, 58, 237, 0.18);
}
.pact-card__edit--leading svg { width: 16px; height: 16px; }

/* Empty state — full-width panel matching .session weight.
   No more 540px-centered island leaving empty columns on the sides. */
.pact-empty {
  position: relative;
  padding: 40px 32px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  overflow: hidden;
  margin-top: 24px;
}
.pact-empty::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--brand-violet);
  opacity: 0.7;
}
.pact-empty__body { min-width: 0; }
.pact-empty__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(22px, 2.8vw, 28px); font-weight: 400;
  color: var(--ink);
  margin: 0 0 12px;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.pact-empty__sub {
  font-size: 15px; color: var(--ink-2);
  line-height: 1.55;
  margin: 0 0 22px;
  max-width: 560px;
}
.pact-empty__example {
  display: inline-block;
  padding: 14px 18px; border-radius: var(--r-md);
  background: rgba(245, 158, 107, 0.06);
  border: 1px dashed rgba(245, 158, 107, 0.30);
  color: var(--ink-2);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  margin: 0 0 22px;
  max-width: 100%;
}
.pact-empty__cta {
  display: inline-block;
  margin-top: 0;
}
.pact-empty__visual {
  display: grid; place-items: center;
  width: 140px; height: 140px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(245, 158, 107, 0.12), transparent 70%),
    radial-gradient(circle, rgba(124, 58, 237, 0.06), transparent 70%);
  flex: 0 0 140px;
}
.pact-empty__visual svg {
  width: 64px; height: 64px;
  filter: drop-shadow(0 0 16px rgba(245, 158, 107, 0.40));
}
@media (max-width: 720px) {
  .pact-empty { grid-template-columns: 1fr; gap: 20px; padding: 28px 24px; text-align: center; }
  .pact-empty__visual { display: none; }
  .pact-empty__sub { margin-left: auto; margin-right: auto; }
}

/* Leader dashboard — shepherd, not coach */
.pact-leader-dash {
  margin: 24px 0 0; padding: 0 32px;
}
.pact-leader-dash__cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin-bottom: 16px;
}
.pact-leader-dash__tile {
  padding: 16px 18px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border);
}
.pact-leader-dash__tile-label {
  font-size: 11px; color: var(--ink-3); text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 600; margin-bottom: 6px;
}
.pact-leader-dash__tile-value {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 500;
  color: var(--ink); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.pact-leader-dash__members {
  margin-top: 24px;
}
.pact-leader-dash__member {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center; gap: 16px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.pact-leader-dash__member-name { color: var(--ink); }
.pact-leader-dash__member-email { color: var(--ink-3); font-size: 12px; }
.pact-leader-dash__member-stat { color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* Group pact landing page (/p/:slug) */
.pact-landing {
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100dvh;
}
.pact-landing__hero {
  position: relative;
  padding: clamp(48px, 8vh, 80px) clamp(24px, 5vw, 64px);
  background:
    radial-gradient(900px 500px at 0% 0%, rgba(124, 58, 237, 0.20), transparent 65%),
    radial-gradient(700px 500px at 100% 100%, rgba(245, 158, 107, 0.16), transparent 65%);
  border-bottom: 1px solid var(--border);
}
.pact-landing__inner {
  max-width: 720px; margin: 0 auto;
}
.pact-landing__brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 16px; color: var(--ink-3);
  margin-bottom: 28px;
  text-decoration: none;
  letter-spacing: -0.015em;
}
.pact-landing__brand svg { width: 22px; height: 22px; }
.pact-landing__brand-name { color: var(--ink-2); }
.pact-landing__brand-tld { color: var(--ink-3); }
.pact-landing__eyebrow {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--brand-dawn);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.pact-landing__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 6vw, 60px);
  line-height: 1.03; letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 18px;
  font-variation-settings: "opsz" 144;
}
.pact-landing__sub {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 32px;
  max-width: 580px;
}
.pact-landing__cta {
  font-size: 16px; padding: 16px 32px;
  display: inline-flex; align-items: center; gap: 10px;
}
/* Secondary "Invite a friend" affordance — quieter than the Join CTA, but
   present on every landing so the loop is one tap from anyone who lands here. */
.pact-landing__invite {
  display: inline-flex; align-items: center; justify-content: center;
  margin: 14px 0 0; padding: 10px 18px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  color: var(--ink-2);
  font-family: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.pact-landing__invite:hover { background: var(--surface-3); color: var(--ink); }
.pact-landing__invite[hidden] { display: none; }
.pact-landing__micro {
  margin-top: 16px;
  font-size: 13px; color: var(--ink-3);
}
.pact-landing__stats {
  margin-top: 36px;
  display: flex; gap: 28px; flex-wrap: wrap;
}
.pact-landing__stat-value {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.pact-landing__stat-label {
  font-size: 12px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.pact-landing__story {
  padding: clamp(48px, 8vh, 80px) clamp(24px, 5vw, 64px);
}
.pact-landing__story-inner {
  max-width: 640px; margin: 0 auto;
  display: grid; gap: 36px;
}
.pact-landing__leader {
  display: grid; grid-template-columns: 72px 1fr; gap: 18px; align-items: center;
}
.pact-landing__leader-photo {
  width: 72px; height: 72px; border-radius: 50%;
  background:
    linear-gradient(135deg, var(--brand-violet), var(--brand-dawn));
  background-size: cover; background-position: center;
  border: 2px solid var(--border-2);
}
.pact-landing__leader-name {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.pact-landing__leader-bio {
  font-size: 14px; color: var(--ink-3);
  margin-top: 4px;
}
.pact-landing__h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 14px;
}
.pact-landing__body {
  font-size: 16px; line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  white-space: pre-wrap;
}
.pact-landing__research {
  margin-top: 12px;
  padding: 18px 22px;
  border-radius: var(--r-md);
  background: var(--surface);
  border-left: 2px solid var(--brand-dawn);
  font-size: 14px; color: var(--ink-2);
  line-height: 1.55;
}
.pact-landing__research cite {
  display: block; margin-top: 8px;
  font-style: normal;
  font-size: 12px; color: var(--ink-3);
}
.pact-landing__terms {
  display: grid; gap: 14px;
  padding: 24px 28px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
}
.pact-landing__terms-row {
  display: grid; grid-template-columns: 140px 1fr; gap: 14px;
  font-size: 14px;
}
.pact-landing__terms-label { color: var(--ink-3); }
.pact-landing__terms-value { color: var(--ink); }

.pact-landing__final {
  padding: clamp(40px, 6vh, 60px) clamp(24px, 5vw, 64px);
  text-align: center;
  border-top: 1px solid var(--border);
}
.pact-landing__final h2 {
  font-family: var(--font-display);
  font-weight: 400; font-style: italic;
  font-size: clamp(22px, 3vw, 28px);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 24px;
}
.pact-landing__footer {
  padding: 24px;
  text-align: center;
  font-size: 12px; color: var(--ink-3);
}

/* Pact create modal */
/* Pact-new view — standalone "Make a pact" page. Stack of .session-style
   form cards, one per step. Card vocabulary mirrors the Journal session card
   spec (see design_pattern.md). Replaces the old modal entirely. */
.pact-new-head { margin-bottom: 16px; }
.pact-new-head .pact-head__meta { margin-top: 18px; }

.pact-form-stack {
  display: flex; flex-direction: column; gap: 14px;
}
.pact-form-card {
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  padding: 22px 24px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
}
.pact-form-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--g1, var(--brand-violet)), var(--g2, var(--brand-violet)));
  opacity: 0.7;
}
.pact-form-card__head {
  display: flex; flex-direction: column; gap: 4px;
}
.pact-form-card__name {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 500;
  letter-spacing: -0.015em; color: var(--ink);
}
.pact-form-card__hint {
  font-size: 13px; color: var(--ink-3); line-height: 1.5;
}

/* Type chooser — two large radio cards */
.pact-form-type {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.pact-form-type-btn {
  appearance: none; border: 1px solid var(--border);
  background: var(--surface-2);
  padding: 16px 18px; border-radius: var(--r-md);
  text-align: left; cursor: pointer;
  font-family: inherit;
  transition: all var(--t-fast) var(--ease-out);
}
.pact-form-type-btn:hover {
  background: var(--surface-3); border-color: var(--border-2);
}
.pact-form-type-btn[aria-pressed="true"] {
  border-color: var(--brand-violet);
  background: rgba(124, 58, 237, 0.08);
}
.pact-form-type-name {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 500;
  color: var(--ink); margin-bottom: 4px;
}
.pact-form-type-desc {
  font-size: 12.5px; color: var(--ink-3); line-height: 1.4;
}

/* Form fields — label + input/textarea */
.pact-form-field { display: flex; flex-direction: column; gap: 6px; }
.pact-form-label {
  font-size: 11px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700;
}
.pact-form-optional {
  text-transform: none; letter-spacing: 0;
  color: var(--ink-4); font-weight: 400;
}
.pact-form-input,
.pact-form-textarea {
  width: 100%; padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink);
  font-family: inherit; font-size: 15px;
  outline: none;
  transition: border-color var(--t-fast) var(--ease-out);
}
.pact-form-textarea {
  min-height: 96px; resize: vertical; line-height: 1.55;
}
.pact-form-input:focus,
.pact-form-textarea:focus { border-color: var(--brand-violet); }

/* Stake slider row */
/* Pre-join commitment acknowledgment sheet — the hard stop between
   tapping Join and actually joining. Centered modal sheet on desktop,
   bottom-sheet feel on mobile. Each line a tap target with a check. */
.pact-commit {
  position: fixed; inset: 0;
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 8, 16, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 24px;
}
.pact-commit[hidden] { display: none; }
.pact-commit__sheet {
  width: 100%; max-width: 520px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px 26px 22px;
  padding-bottom: max(22px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px); /* dvh fallback to vh above — keeps the commit button above the iOS toolbar */
  overflow: auto;
}
.pact-commit__eyebrow {
  text-transform: uppercase;
  font-size: 11px; letter-spacing: 0.14em;
  color: var(--brand-violet);
  font-weight: 600;
}
.pact-commit__title {
  font-family: var(--font-display); font-size: 26px; font-weight: 500;
  margin: 4px 0 0; line-height: 1.15;
}
.pact-commit__sub {
  font-size: 13px; color: var(--ink-3); margin: 6px 0 0;
}
.pact-commit__list {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.pact-commit__item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 4px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  user-select: none;
}
.pact-commit__item:last-child { border-bottom: none; }
.pact-commit__item:hover { background: rgba(124, 58, 237, 0.04); }
.pact-commit__check {
  width: 22px; height: 22px;
  flex-shrink: 0;
  margin-top: 1px;
  border-radius: 5px;
  border: 1.5px solid var(--ink-3);
  display: inline-flex; align-items: center; justify-content: center;
  color: white;
  transition: background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.pact-commit__item.is-checked .pact-commit__check {
  background: var(--brand-violet);
  border-color: var(--brand-violet);
}
.pact-commit__check svg { width: 14px; height: 14px; opacity: 0; transition: opacity var(--t-fast); }
.pact-commit__item.is-checked .pact-commit__check svg { opacity: 1; }
.pact-commit__copy {
  flex: 1;
  font-size: 14px; line-height: 1.5;
  color: var(--ink-2);
}
.pact-commit__item.is-checked .pact-commit__copy { color: var(--ink); }
.pact-commit__copy strong { color: var(--ink); font-weight: 600; }
.pact-commit__foot {
  display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px;
}
.pact-commit__foot .btn { min-width: 108px; }
@media (max-width: 520px) {
  .pact-commit { align-items: flex-end; padding: 0; }
  .pact-commit__sheet {
    border-radius: 18px 18px 0 0;
    max-width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
  }
}

/* ============ Confirm / alert sheet (uiConfirm / uiAlert) ============
   Promise-based replacement for native confirm()/alert(). Shares the
   .pact-commit backdrop language (dark scrim + blur, brand-violet
   accent), narrower sheet for a single decision. danger=true paints the
   confirm button red. A gentle pop-in honors prefers-reduced-motion via
   the global reduce-motion media query (zeros the animation). */
.ui-confirm {
  position: fixed; inset: 0;
  z-index: 220; /* above pact-commit (200) and nav popovers */
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 8, 16, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 24px;
  animation: ui-confirm-fade var(--t-fast) var(--ease-out);
}
.ui-confirm[hidden] { display: none; }
.ui-confirm__sheet {
  width: 100%; max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px 26px 20px;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow: auto;
  animation: ui-confirm-pop var(--t-med) var(--ease-out);
}
.ui-confirm__title {
  font-family: var(--font-display); font-size: 22px; font-weight: 500;
  margin: 0; line-height: 1.2; color: var(--ink);
}
.ui-confirm__title:empty { display: none; }
.ui-confirm__message {
  font-size: 14px; line-height: 1.55; color: var(--ink-2);
  margin: 0;
  /* Honor \n in message strings (carried over from the old confirm copy). */
  white-space: pre-line;
}
.ui-confirm__message:empty { display: none; }
.ui-confirm__foot {
  display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px;
}
.ui-confirm__foot .btn { min-width: 96px; justify-content: center; }
/* Danger confirm — solid red CTA so a destructive choice reads as
   destructive (the ghost .btn--danger is for low-emphasis inline use;
   the sheet's primary action wants full weight). */
.ui-confirm__ok--danger {
  background: var(--red);
  border-color: transparent; color: #1a0a0a;
  box-shadow: 0 6px 18px rgba(248, 113, 113, 0.32), 0 1px 0 rgba(255,255,255,0.18) inset;
}
.ui-confirm__ok--danger:hover {
  background: #f15b5b;
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(248, 113, 113, 0.42), 0 1px 0 rgba(255,255,255,0.22) inset;
}
@keyframes ui-confirm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-confirm-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 520px) {
  .ui-confirm { align-items: flex-end; padding: 0; }
  .ui-confirm__sheet {
    border-radius: 18px 18px 0 0;
    max-width: 100%;
  }
}

/* "Commitment terms" collapsible card — owner-tunable anti-flake
   mechanics. Uses native <details> so it's discoverable + accessible
   without a JS toggle. Summary mimics the other .pact-form-card heads. */
.pact-form-commitment[hidden] { display: none; }
.pact-form-commitment > summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 0;
}
.pact-form-commitment > summary::-webkit-details-marker { display: none; }
.pact-form-commitment > summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--ink-3);
  font-size: 14px;
  transition: transform var(--t-fast) var(--ease-out);
}
.pact-form-commitment[open] > summary::after { transform: rotate(-180deg); }
.pact-form-commitment > .pact-form-field { margin-top: 16px; }

.pact-form-stake-row {
  display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center;
}
.pact-form-stake-row input[type="range"] { width: 100%; }
.pact-form-stake-amount {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 400;
  color: var(--ink); letter-spacing: -0.02em;
  min-width: 64px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.pact-form-hint {
  font-size: 12.5px; color: var(--ink-3); line-height: 1.5;
  margin: 0;
}

/* Weekday chips */
.pact-form-weekdays {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.pact-form-weekday {
  appearance: none; border: 1px solid var(--border);
  background: var(--surface-2);
  padding: 9px 14px; border-radius: 999px;
  font-size: 12.5px; color: var(--ink-3);
  cursor: pointer; font-family: inherit;
  transition: all var(--t-fast) var(--ease-out);
}
.pact-form-weekday:hover {
  border-color: var(--border-2); color: var(--ink-2);
}
.pact-form-weekday[aria-pressed="true"] {
  border-color: var(--brand-dawn);
  background: rgba(245, 158, 107, 0.08);
  color: var(--ink);
}

/* Mode toggle — Daily check vs Numeric. Twin pill buttons inside a card.
   Same visual weight as the type chooser so the form doesn't suddenly grow
   a different vocabulary in the middle. */
.pact-form-mode {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 720px) {
  .pact-form-mode { grid-template-columns: 1fr; }
}
.pact-form-mode-btn {
  appearance: none; border: 1px solid var(--border);
  background: var(--surface-2);
  padding: 16px 18px; border-radius: var(--r-md);
  text-align: left; cursor: pointer;
  font-family: inherit;
  transition: all var(--t-fast) var(--ease-out);
}
.pact-form-mode-btn:hover {
  background: var(--surface-3); border-color: var(--border-2);
}
.pact-form-mode-btn[aria-pressed="true"] {
  border-color: var(--brand-violet);
  background: rgba(124, 58, 237, 0.08);
}
.pact-form-mode-name {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 500;
  color: var(--ink); margin-bottom: 4px;
}
.pact-form-mode-desc {
  font-size: 12.5px; color: var(--ink-3); line-height: 1.4;
}

/* Numeric mode grid — 2x2. Each field its own minimal cell so the visual
   center of gravity is the live-preview line beneath. */
.pact-form-numeric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 14px;
}
.pact-form-field--big .pact-form-label {
  margin-bottom: 4px;
}
.pact-form-input--big {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 400;
  letter-spacing: -0.02em;
  padding: 10px 14px;
  font-variant-numeric: tabular-nums;
}
/* Stepper — minus / read-only number / plus. Single row, 999px pill. */
.pact-form-stepper {
  display: grid; grid-template-columns: 36px 1fr 36px;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.pact-form-stepper-btn {
  appearance: none; border: 0;
  background: transparent;
  color: var(--ink-2); font-size: 18px;
  height: 44px; cursor: pointer;
  font-family: inherit;
  transition: background var(--t-fast) var(--ease-out);
}
.pact-form-stepper-btn:hover { background: var(--surface-3); color: var(--ink); }
.pact-form-stepper-btn:disabled { color: var(--ink-4); cursor: not-allowed; }
.pact-form-stepper-input {
  background: transparent; border: 0;
  color: var(--ink);
  font-family: var(--font-display); font-size: 17px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  outline: none;
  padding: 0;
}
/* Strip the spin buttons — we drive value via the stepper */
.pact-form-stepper-input::-webkit-outer-spin-button,
.pact-form-stepper-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

/* Time window — two native time inputs sandwiching a "to". Hour precision
   only; the picker shows full HH:MM but we round to the hour on save. */
.pact-form-window {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 8px;
}
.pact-form-time {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 11px 12px;
  color: var(--ink);
  font-family: inherit; font-size: 15px;
  font-variant-numeric: tabular-nums;
  outline: none;
  width: 100%;
  color-scheme: dark;
  transition: border-color var(--t-fast) var(--ease-out);
}
.pact-form-time:focus { border-color: var(--brand-violet); }
.pact-form-window__sep {
  font-size: 12px; color: var(--ink-3);
  letter-spacing: 0.06em;
}

/* Live preview line — the single most important element in the numeric
   form. Shows the computed segment times the moment any input changes. */
.pact-form-preview {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px; font-weight: 400;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 4px 0 0;
  letter-spacing: -0.005em;
}

/* Action row — Cancel + Make the pact */
.pact-form-actions {
  display: flex; gap: 12px; justify-content: flex-end;
  padding-top: 8px;
}

/* ============================================================
   CONNECT iOS — QR code + status
   ============================================================ */
.connect-ios-qr-wrap {
  display: grid; place-items: center;
  padding: 22px;
  background: var(--surface-2);
  border-radius: var(--r-md);
  min-height: 280px;
}
.connect-ios-qr-wrap img {
  display: block;
  width: 260px; height: 260px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.40);
}
.connect-ios-qr-skeleton {
  font-size: 13px; color: var(--ink-3);
  font-style: italic;
}
.connect-ios-status {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-2);
  text-align: center;
  margin: 4px 0 0;
}
.connect-ios-status.is-paired {
  color: var(--c-journal-1);
  font-weight: 500;
  font-style: normal;
}
.connect-ios-status.is-expired {
  color: var(--brand-dawn);
}
.connect-ios-actions {
  display: flex; justify-content: center; gap: 10px;
}
.connect-ios-explainer {
  font-size: 13px; line-height: 1.55;
  color: var(--ink-3);
  margin: 0;
}
.connect-ios-explainer strong {
  color: var(--ink-2);
  font-weight: 600;
}

/* ============================================================
   SETTINGS PAGE — two-column layout (sticky left nav, scrollable
   right content). The page replaces the legacy modal — same section
   markup (.settings__group, .settings__title, etc.), new chrome.
   On narrow screens the nav collapses into a horizontal chip rail
   so the content still gets full width.
   ============================================================ */
.settings-page {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: start;
}
.settings-page__nav {
  position: sticky;
  top: 88px;
  display: flex; flex-direction: column;
  gap: 4px;
  /* Border on the right gives the sidebar a hairline anchor; matches
     the divider style used elsewhere (admin nav, journal day strip). */
  padding-right: 16px;
  border-right: 1px solid var(--border);
  /* Constrain the height so the nav can scroll if a user adds more
     sections later — for now the five items fit comfortably. */
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.settings-page__nav-head {
  padding: 12px 12px 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.settings-page__nav-name {
  font-weight: 600; font-size: 14px; color: var(--ink);
  letter-spacing: -0.005em;
}
.settings-page__nav-email {
  font-size: 12px; color: var(--ink-3); margin-top: 2px;
  word-break: break-all;
}
.settings-page__nav-signout {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px;
  padding: 6px 12px; font-size: 12px;
}
.settings-page__nav-list {
  display: flex; flex-direction: column; gap: 2px;
  padding-top: 4px;
}
.settings-nav__item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  color: var(--ink-3);
  font: inherit;
  font-size: 13px; font-weight: 500;
  letter-spacing: -0.005em;
  text-align: left;
  text-decoration: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.settings-nav__item:hover {
  background: var(--surface-2);
  color: var(--ink-2);
}
.settings-nav__item.is-active {
  background: rgba(124, 58, 237, 0.14);
  color: var(--ink);
}
.settings-nav__item.is-active::before {
  content: "";
  width: 3px; height: 16px;
  border-radius: 2px;
  background: var(--brand-violet);
  margin-left: -8px;
  margin-right: 4px;
}
.settings-page__content {
  display: flex; flex-direction: column;
  gap: 24px;
  min-width: 0; /* Allow pre/code blocks inside to shrink on narrow viewports. */
}
.settings-page__section {
  /* Each anchored subsection. scroll-margin-top compensates for the
     sticky topbar so the heading lands below the chrome on jump-to. */
  scroll-margin-top: 84px;
  padding: 0;
}
.settings-page__section-head {
  display: flex; flex-direction: column;
  gap: 4px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.settings-page__section-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
}
.settings-page__section-sub {
  font-size: 13px; color: var(--ink-3);
  line-height: 1.55;
  margin: 0;
}
/* Inside a page section, the first .settings__group keeps its top
   padding — the section head already provides separation, so the
   group should not stack another border on top of it. */
.settings-page__section .settings__group:first-of-type {
  padding-top: 0;
  border-top: none;
}

/* AI tools marketing block — prose intro authored in the
   Agent-Native Distribution Lead voice. Reads like API docs, not
   like landing-page copy. Slightly tighter line-length than the body
   default; the bulleted list uses an em-dash glyph instead of disc
   markers to match the rest of the brand's typography. */
.settings-marketing {
  display: flex; flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.06), rgba(245, 158, 107, 0.04));
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: var(--r-md);
  margin-bottom: 6px;
}
.settings-marketing__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.012em;
  margin: 0;
  color: var(--ink);
}
.settings-marketing__lead {
  font-size: 14px; line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 60ch;
}
.settings-marketing__list {
  display: flex; flex-direction: column;
  gap: 10px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.settings-marketing__list li {
  font-size: 13px; line-height: 1.55;
  color: var(--ink-2);
  padding-left: 18px;
  position: relative;
  max-width: 64ch;
}
.settings-marketing__list li::before {
  content: "—";
  position: absolute; left: 0; top: 0;
  color: var(--brand-violet);
  font-weight: 500;
}
.settings-marketing__list li strong {
  color: var(--ink);
  font-weight: 600;
}
.settings-marketing__close {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 6px 0 0;
  max-width: 60ch;
}

/* Narrow viewports: collapse the sidebar into a horizontal scroll-snap
   pill rail at the top of the page. Each chip behaves like a sidebar
   link — tapping it smooth-scrolls the matching anchor into view. */
@media (max-width: 720px) {
  .settings-page {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .settings-page__nav {
    position: static;
    top: auto;
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
    border-right: none;
    /* The hidden head (avatar / email / sign-out) collapses on mobile —
       it's already shown in the user-pill flow, so we don't double up
       on the chrome here. */
  }
  .settings-page__nav-head {
    border-bottom: none;
    margin-bottom: 0;
    padding: 0 0 8px;
  }
  .settings-page__nav-list {
    display: flex; flex-direction: row;
    gap: 6px;
    padding: 4px 0 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Hide the scrollbar but keep horizontal scroll working. */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .settings-page__nav-list::-webkit-scrollbar { display: none; }
  .settings-nav__item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 8px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    white-space: nowrap;
    font-size: 12px;
  }
  .settings-nav__item.is-active {
    background: rgba(124, 58, 237, 0.18);
    border-color: rgba(124, 58, 237, 0.35);
  }
  .settings-nav__item.is-active::before {
    display: none;
  }
  .settings-page__section {
    scroll-margin-top: 72px;
  }
  .settings-marketing {
    padding: 14px 14px;
  }
}

/* ============================================================
   TIME OFF — pact selection list + scheduled-windows list
   Same .pact-form-card vocabulary as the pact-new form. The lists below
   are compact rows; reuse the toggle-style chip patterns where possible.
   ============================================================ */
.pact-timeoff-pacts {
  display: flex; flex-direction: column;
  gap: 6px;
}
.pact-timeoff-pact {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.pact-timeoff-pact:hover {
  background: var(--surface-3);
  border-color: var(--border-2);
}
.pact-timeoff-pact__cb {
  width: 18px; height: 18px;
  accent-color: var(--brand-violet);
  cursor: pointer;
  flex: 0 0 18px;
}
.pact-timeoff-pact__name {
  flex: 1;
  font-family: var(--font-display);
  font-size: 15px; font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.pact-timeoff-pact__type {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.pact-timeoff-list {
  display: flex; flex-direction: column;
  gap: 6px;
}
.pact-timeoff-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.pact-timeoff-row__body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.pact-timeoff-row__pact {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.pact-timeoff-row__dates {
  font-size: 12.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.pact-timeoff-row__reason {
  font-style: italic;
  color: var(--ink-4);
}
.pact-timeoff-row__remove {
  appearance: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink-3);
  font-size: 18px; line-height: 1;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--t-fast) var(--ease-out);
}
.pact-timeoff-row__remove:hover {
  color: var(--red);
  border-color: rgba(248, 113, 113, 0.40);
  background: rgba(248, 113, 113, 0.10);
  transform: scale(1.05);
}

/* Date input styling — matches pact-form-input but with date-input chrome */
input[type="date"].pact-form-input {
  color-scheme: dark;
  font-variant-numeric: tabular-nums;
}

/* Edit mode locks — split per field so type can be unlocked for individual
   pacts (promoting to a group is safe) while mode stays locked everywhere
   (mode change would orphan pact_checks history). */
#view-pact-new.is-mode-locked .pact-form-mode,
#view-pact-new.is-type-locked .pact-form-type {
  pointer-events: none;
  opacity: 0.65;
  position: relative;
}
#view-pact-new.is-mode-locked .pact-form-mode::after,
#view-pact-new.is-type-locked .pact-form-type::after {
  content: "Locked — start a new pact to change this";
  position: absolute; left: 0; right: 0; bottom: -22px;
  font-size: 11.5px; color: var(--ink-4);
  font-style: italic;
  letter-spacing: 0.005em;
}
#view-pact-new.is-mode-locked .pact-form-card:has(.pact-form-mode),
#view-pact-new.is-type-locked .pact-form-card:has(.pact-form-type) {
  padding-bottom: 30px;
}

/* Admin view */
.admin-head { padding: 40px 32px 24px; max-width: 1100px; margin: 0 auto; }
.admin-section { max-width: 1100px; margin: 0 auto; padding: 16px 32px; }
.admin-table {
  width: 100%; border-collapse: collapse;
  font-size: 14px;
}
.admin-table th, .admin-table td {
  text-align: left; padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.admin-table th {
  font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-3);
  font-weight: 600;
}
.admin-table td { color: var(--ink-2); }
.admin-table td .leader-name { color: var(--ink); font-weight: 500; }
.admin-table input.rev-share-input {
  width: 64px; padding: 6px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-family: inherit; font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* Admin nav-visibility list — global toggles for each section */
.admin-nav-list {
  display: flex; flex-direction: column; gap: 6px;
}
.admin-nav-row {
  /* Reset browser button defaults */
  appearance: none;
  -webkit-appearance: none;
  color: inherit;
  font: inherit;
  text-align: left;
  width: 100%;

  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: 16px;
  padding: 14px 18px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.admin-nav-row:hover {
  background: var(--surface-2);
  border-color: var(--border-2);
}
.admin-nav-row.is-off { opacity: 0.66; }
.admin-nav-row__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--c, var(--ink-3));
  box-shadow: 0 0 8px var(--c, transparent);
}
.admin-nav-row.is-off .admin-nav-row__dot { opacity: 0.25; box-shadow: none; }
.admin-nav-row__label {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.admin-nav-row__desc {
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 3px;
  line-height: 1.4;
}

/* Pact-only mode — hide other tabs/views.
   The banner is hidden by default; pact-only mode swaps it to flex. */
/* Pact-only mode used to hard-hide non-pact tabs via CSS, which trapped
   users who'd explicitly toggled those tabs ON in their personal nav. The
   personal-nav toggles are now authoritative. Pact-only mode still
   triggers the onboarding banner + first-visit routing to /#/pacts, but
   tabs you've enabled stay visible. */
.pact-onboarding-banner {
  margin: 16px clamp(24px, 4vw, 36px);
  padding: 14px 22px;
  font-size: 13px; color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  align-items: center; justify-content: space-between;
  gap: 16px;
  display: none; /* default hidden — only visible in pact-only mode */
}
body.is-pact-only .pact-onboarding-banner { display: flex; }
.pact-onboarding-banner button {
  background: transparent; border: 0;
  color: var(--brand-dawn); cursor: pointer;
  font-family: inherit; font-size: 13px;
  text-decoration: underline; padding: 0;
}

/* Pact-landing visible — hide normal app chrome */
body.is-pact-landing .topbar,
body.is-pact-landing main.stage,
body.is-pact-landing .aurora { display: none !important; }
body.is-pact-landing { background: var(--bg-0); }

/* Tab admin chip styling */
.tab--admin {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-dawn);
}

@media (max-width: 720px) {
  .pact-head { padding: 24px 22px 16px; }
  .pact-head__title { font-size: 26px; }
  .pact-section { padding: 8px 22px 0; }
  .pact-card { padding: 14px 16px; gap: 14px; }
  .pact-card__check { width: 40px; height: 40px; }
  .pact-leader-dash__cards { grid-template-columns: 1fr; }
  .pact-form-card { padding: 18px 18px; }
  .pact-form-type { grid-template-columns: 1fr; }
  .pact-form-actions { flex-direction: column-reverse; }
  .pact-form-actions .btn { width: 100%; }
  .pact-landing__terms-row { grid-template-columns: 1fr; gap: 4px; }
}