/* ══════════════════════════════════════════════════════════
   Mission Control — design system
   Palette roles follow the validated reference instance:
   one accent hue for magnitude, reserved status hues for state.
   ══════════════════════════════════════════════════════════ */

/* ── Tokens: light is the base, matching Superfocus's zinc + emerald system.
      Neutrals are Tailwind zinc; the accent is emerald; primary actions are
      near-black, as they are on superfocus.me. ── */
:root {
  color-scheme: light;

  /* surfaces — the page is tinted so white cards actually lift off it.
     White-on-white separated only by a hairline reads flat. */
  --plane:        #f4f4f5;
  --surface:      #ffffff;
  --surface-2:    #f4f4f5;
  --surface-sunk: #e9e9ec;

  /* ink */
  --ink:          #101010;
  --ink-2:        #616165;
  --ink-muted:    #9e9ea2;

  /* lines */
  --line:         #e4e4e7;
  --line-strong:  #d4d4d8;
  --ring:         rgba(16,16,16,.08);

  /* accent — emerald, the single progress hue */
  --accent:       #047857;
  --accent-ink:   #ffffff;
  --accent-soft:  #ecfdf5;
  --accent-line:  rgba(4,120,87,.28);

  /* primary action — near-black, like Superfocus's CTAs */
  --solid:        #101010;
  --solid-ink:    #ffffff;
  --solid-hover:  #2a2a2a;

  /* ordinal ramp for the month grid */
  --ramp-0:  #f1f1f3;
  --ramp-1:  #a7f3d0;
  --ramp-2:  #34d399;
  --ramp-3:  #047857;

  /* status — reserved, always paired with a dot + label */
  --good:     #047857;
  --warning:  #b45309;
  --critical: #b91c1c;
  --good-soft:     #ecfdf5;
  --warning-soft:  #fffbeb;
  --critical-soft: #fef2f2;

  /* streak tiers 1–2 — text sits on a lightly-tinted-transparent chip, so it
     needs its own light/dark step the same as --warning does; tiers 3–4 are
     white-on-solid-gradient and don't need one. */
  --flame-1: #b45309;
  --flame-2: #c2410c;

  /* geometry */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;
  --nav-w: 236px;
  --shadow: 0 1px 2px rgba(16,16,16,.04), 0 8px 24px -12px rgba(16,16,16,.10);

  --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ── Dark: same roles, re-stepped for a dark ground ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --plane:        #08080a;
    --surface:      #151518;
    --surface-2:    #1e1e22;
    --surface-sunk: #111114;
    --ink:          #fafafa;
    --ink-2:        #a1a1aa;
    --ink-muted:    #71717a;
    --line:         #27272a;
    --line-strong:  #3f3f46;
    --ring:         rgba(250,250,250,.10);
    --accent:       #10b981;
    --accent-ink:   #04231a;
    --accent-soft:  rgba(16,185,129,.14);
    --accent-line:  rgba(16,185,129,.34);
    --solid:        #fafafa;
    --solid-ink:    #101010;
    --solid-hover:  #e4e4e7;
    --ramp-0:  #1c1c1f;
    --ramp-1:  #065f46;
    --ramp-2:  #059669;
    --ramp-3:  #10b981;
    --good:     #10b981;
    --warning:  #f59e0b;
    --critical: #ef4444;
    --good-soft:     rgba(16,185,129,.14);
    --warning-soft:  rgba(245,158,11,.14);
    --critical-soft: rgba(239,68,68,.14);
    --flame-1: #f59e0b;
    --flame-2: #fb923c;
    --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --plane:        #08080a;
  --surface:      #151518;
  --surface-2:    #1e1e22;
  --surface-sunk: #111114;
  --ink:          #fafafa;
  --ink-2:        #a1a1aa;
  --ink-muted:    #71717a;
  --line:         #27272a;
  --line-strong:  #3f3f46;
  --ring:         rgba(250,250,250,.10);
  --accent:       #10b981;
  --accent-ink:   #04231a;
  --accent-soft:  rgba(16,185,129,.14);
  --accent-line:  rgba(16,185,129,.34);
  --solid:        #fafafa;
  --solid-ink:    #101010;
  --solid-hover:  #e4e4e7;
  --ramp-0:  #1c1c1f;
  --ramp-1:  #065f46;
  --ramp-2:  #059669;
  --ramp-3:  #10b981;
  --good:     #10b981;
  --warning:  #f59e0b;
  --critical: #ef4444;
  --good-soft:     rgba(16,185,129,.14);
  --warning-soft:  rgba(245,158,11,.14);
  --critical-soft: rgba(239,68,68,.14);
  --flame-1: #f59e0b;
  --flame-2: #fb923c;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--plane);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
h1,h2,h3,h4,p,figure,ul,ol { margin: 0; }
ul,ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ══ App shell ══ */
.app { display: grid; grid-template-columns: var(--nav-w) 1fr; min-height: 100dvh; }

/* ══ Nav ══ */
.nav {
  display: flex; flex-direction: column; gap: 4px;
  padding: 22px 14px;
  background: var(--surface-sunk);
  border-right: 1px solid var(--line);
  position: sticky; top: 0; height: 100dvh;
}
.nav__brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 22px; }
.nav__mark {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 50% 50%, var(--accent) 0 26%, transparent 27%);
  box-shadow: inset 0 0 0 2px var(--accent-line);
}
.nav__wordmark { font-size: 14px; font-weight: 650; letter-spacing: -.01em; }
.nav__list { display: flex; flex-direction: column; gap: 2px; }
.nav__item, .theme-toggle {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 9px 10px;
  background: none; border: 0; border-radius: var(--r-sm);
  color: var(--ink-2); text-align: left; cursor: pointer;
  transition: background .12s, color .12s;
}
.nav__item:hover, .theme-toggle:hover { background: var(--surface-2); color: var(--ink); }
.nav__item[aria-current="page"] { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.nav__ico, .theme-toggle__ico { font-size: 15px; width: 18px; text-align: center; flex: none; opacity: .85; }
.nav__item[aria-current="page"] .nav__ico { color: var(--accent); opacity: 1; }
.nav__foot { margin-top: auto; }

/* A quiet dot, not a badge with a number — something wants a look, that's all. */
.nav__item--alert::after {
  content: ''; position: absolute; top: 7px; left: 22px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--critical); box-shadow: 0 0 0 2px var(--surface-sunk);
}
.nav__item--alert[aria-current="page"]::after { box-shadow: 0 0 0 2px var(--accent-soft); }

/* ══ Main ══ */
.main { padding: 34px 40px 80px; max-width: 1080px; width: 100%; margin: 0 auto; }
.page-head { margin-bottom: 26px; }
.page-head__kicker {
  font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: 6px;
}
.page-head h1 { font-size: 27px; font-weight: 680; letter-spacing: -.022em; line-height: 1.2; }
.page-head p { color: var(--ink-2); margin-top: 7px; max-width: 62ch; }

/* ══ Layout helpers ══ */
.stack   { display: flex; flex-direction: column; gap: 18px; }
.stack-s { display: flex; flex-direction: column; gap: 10px; }
.row     { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.wrap    { flex-wrap: wrap; }
.grow    { flex: 1 1 auto; min-width: 0; }
.grid-2  { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 18px; }

/* ══ Card ══ */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: 0 1px 2px rgba(16,16,16,.04);
}
.card--flush { padding: 0; overflow: hidden; }
.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card__title { font-size: 14px; font-weight: 650; letter-spacing: -.005em; }
.card__note  { font-size: 12.5px; color: var(--ink-muted); }

/* ══ Typography bits ══ */
.eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-muted); }
.muted   { color: var(--ink-muted); }
.dim     { color: var(--ink-2); }
.small   { font-size: 13px; }
.tnum    { font-variant-numeric: tabular-nums; }

/* ══ Hero figure ══ */
.figure { display: flex; align-items: baseline; gap: 8px; }
.figure__value { font-size: 42px; font-weight: 680; letter-spacing: -.03em; line-height: 1; }
.figure__unit  { font-size: 15px; color: var(--ink-2); font-weight: 500; }

/* ══ Buttons ══ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 15px; min-height: 38px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  font-size: 14px; font-weight: 550; cursor: pointer;
  transition: background .12s, border-color .12s, transform .06s;
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--solid); border-color: var(--solid); color: var(--solid-ink); font-weight: 600; }
.btn--primary:hover { background: var(--solid-hover); border-color: var(--solid-hover); }
.btn--ghost { background: none; border-color: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn--danger { color: var(--critical); border-color: var(--line-strong); }
.btn--danger:hover { background: var(--critical-soft); }
.btn--sm { padding: 5px 10px; min-height: 30px; font-size: 13px; }
.btn--block { width: 100%; }

/* ══ Forms ══ */
.field { display: flex; flex-direction: column; gap: 5px; }
.field > label { font-size: 13px; font-weight: 570; color: var(--ink-2); }
.field__hint { font-size: 12.5px; color: var(--ink-muted); }
.input, .select, .textarea {
  width: 100%; padding: 9px 11px; min-height: 38px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  font: inherit; font-size: 14px;
}
.textarea { min-height: 78px; resize: vertical; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: var(--ink-muted); }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Goal form swaps fields depending on the kind of goal chosen. */
form[data-kind="accumulate"] .only-reach { display: none; }
form[data-kind="reach"] .only-accumulate { display: none; }

/* ══ Segmented control ══ */
.seg { display: inline-flex; flex-wrap: wrap; padding: 3px; gap: 3px; background: var(--surface-sunk); border: 1px solid var(--line); border-radius: var(--r-sm); }
.seg button {
  padding: 6px 13px; border: 0; border-radius: 4px; background: none;
  color: var(--ink-2); font-size: 13px; font-weight: 550; cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.14); }

/* ══ Status pill — colour never travels alone ══ */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 7px; border-radius: 99px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}
.pill__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.pill--good     { background: var(--good-soft);     color: var(--ink); border-color: color-mix(in srgb, var(--good) 30%, transparent); }
.pill--good .pill__dot     { background: var(--good); }
.pill--warning  { background: var(--warning-soft);  color: var(--ink); border-color: color-mix(in srgb, var(--warning) 34%, transparent); }
.pill--warning .pill__dot  { background: var(--warning); }
.pill--critical { background: var(--critical-soft); color: var(--ink); border-color: color-mix(in srgb, var(--critical) 30%, transparent); }
.pill--critical .pill__dot { background: var(--critical); }
.pill--neutral  { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }
.pill--neutral .pill__dot  { background: var(--ink-muted); }

/* ══ Meter (magnitude by length, single hue) ══ */
.meter { display: flex; flex-direction: column; gap: 6px; }
.meter__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.meter__name { font-size: 14px; font-weight: 570; }
.meter__val { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.meter__track {
  position: relative; height: 8px; border-radius: 99px;
  background: var(--surface-sunk); overflow: hidden;
}
.meter__fill { height: 100%; border-radius: 99px; background: var(--accent); transition: width .35s cubic-bezier(.4,0,.2,1); }
.meter__fill--good     { background: var(--good); }
.meter__fill--warning  { background: var(--warning); }
.meter__fill--critical { background: var(--critical); }
/* pace marker — where you should be today */
.meter__pace {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: var(--ink); opacity: .55; border-radius: 2px;
}

/* ══ Capacity bar (168 hours) ══ */
.capacity { display: flex; height: 30px; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); }
.capacity__seg { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--ink-2); min-width: 0; }
.capacity__seg + .capacity__seg { border-left: 2px solid var(--surface); }
.capacity__seg--fixed  { background: var(--surface-sunk); }
.capacity__seg--planned{ background: var(--accent); color: var(--accent-ink); }
.capacity__seg--over   { background: var(--critical); color: #fff; }
.capacity__seg--free   { background: var(--surface-2); }
.capacity__key { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12.5px; color: var(--ink-2); }
.capacity__key span { display: inline-flex; align-items: center; gap: 6px; }
.capacity__swatch { width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--ring); }

/* ══ Mission card ══ */
.mission { border: 1px solid var(--line); border-radius: var(--r); padding: 15px 16px; background: var(--surface); }
.mission + .mission { margin-top: 10px; }
.mission__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.mission__pillar { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.mission__title { font-size: 15.5px; font-weight: 620; letter-spacing: -.01em; margin-top: 2px; }
.mission__meta { font-size: 12.5px; color: var(--ink-muted); margin-top: 3px; }
.mission__body { margin-top: 13px; }
.mission__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: 12.5px; color: var(--ink-2); }

/* ══ Today: action rows ══ */
.action {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 15px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r);
  cursor: pointer; text-align: left; width: 100%;
  transition: border-color .12s, background .12s;
}
.action + .action { margin-top: 8px; }
.action:hover { border-color: var(--line-strong); }
.action[data-done="true"] { background: var(--surface-sunk); }
.action[data-done="true"] .action__title { color: var(--ink-muted); text-decoration: line-through; }
.action__check {
  width: 25px; height: 25px; flex: none; border-radius: 50%;
  border: 2px solid var(--line-strong);
  display: grid; place-items: center;
  font-size: 13px; color: transparent;
  transition: background .14s, border-color .14s, color .14s;
}
.action[data-done="true"] .action__check { background: var(--good); border-color: var(--good); color: #fff; }
.action__title { font-size: 15px; font-weight: 560; }
.action__sub   { font-size: 12.5px; color: var(--ink-muted); margin-top: 1px; }

/* ══ Rituals — the app speaking up at a boundary ══ */
.ritual { border-left: 3px solid var(--line-strong); padding: 16px 20px; }
.ritual--warning  { border-left-color: var(--warning); }
.ritual--critical { border-left-color: var(--critical); }
.ritual__title { font-size: 15px; font-weight: 650; letter-spacing: -.012em; }

/* ══ Today: the day's headline progress ══ */
.daybar {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 18px 22px; margin-bottom: 18px;
  box-shadow: 0 1px 2px rgba(16,16,16,.04);
}
.daybar--complete { border-color: var(--accent); background: var(--accent-soft); }
.daybar__top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.daybar__count { font-size: 30px; font-weight: 690; letter-spacing: -.03em; line-height: 1; }
.daybar__count small { font-size: 16px; font-weight: 550; color: var(--ink-muted); letter-spacing: 0; }
.daybar__note { font-size: 13px; color: var(--ink-2); text-align: right; max-width: 34ch; }
.daybar__track { height: 10px; border-radius: 99px; background: var(--surface-sunk); overflow: hidden; display: flex; gap: 2px; }
.daybar__seg { flex: 1; background: var(--surface-sunk); border-radius: 2px; transition: background .3s; }
.daybar__seg[data-on="true"] { background: var(--accent); }

/* ══ Today: a mission row with its ladder impact ══ */
.todo__progress { margin-top: 11px; }
.todo__prow {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 5px;
  font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.todo__prow b { color: var(--ink); font-weight: 640; }
.todo__bar { position: relative; height: 9px; border-radius: 99px; background: var(--surface-sunk); overflow: hidden; }
.todo__fill { height: 100%; border-radius: 99px; background: var(--accent); transition: width .4s cubic-bezier(.4,0,.2,1); }
.todo__fill--good { background: var(--good); }
.todo__fill--warning { background: var(--warning); }
.todo__fill--critical { background: var(--critical); }
.todo__pace { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--ink); opacity: .45; border-radius: 2px; }

/* month strip, secondary to the missions */
.monthstrip { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.monthstrip .streak { flex: 1 1 260px; }


.todo {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 14px 15px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r);
}
.todo + .todo { margin-top: 8px; }
.todo[data-done="true"] { background: var(--surface-2); }
.todo[data-done="true"] .todo__title { color: var(--ink-muted); text-decoration: line-through; }
.todo__check {
  width: 26px; height: 26px; flex: none; margin-top: 1px;
  border-radius: 50%; border: 2px solid var(--line-strong);
  background: none; cursor: pointer;
  display: grid; place-items: center;
  font-size: 13px; color: transparent;
  transition: background .14s, border-color .14s, color .14s, transform .1s;
}
.todo__check:hover { border-color: var(--accent); transform: scale(1.06); }
.todo[data-done="true"] .todo__check { background: var(--good); border-color: var(--good); color: #fff; }
/* Count / weekly missions need a quantity, not a tick — you can do three
   meal-prep sessions in one afternoon, and a once-a-day checkbox makes a
   target like "30 this month" literally impossible to reach. */
.stepper {
  display: inline-flex; align-items: center; gap: 1px; flex: none;
  border: 1px solid var(--line-strong); border-radius: 99px;
  padding: 2px; background: var(--surface);
}
.stepper__btn {
  width: 26px; height: 26px; border: 0; background: none; cursor: pointer;
  border-radius: 50%; font-size: 16px; line-height: 1; color: var(--ink-2);
  display: grid; place-items: center;
}
.stepper__btn:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.stepper__btn:disabled { opacity: .3; cursor: default; }
.stepper__val {
  min-width: 26px; text-align: center; font-size: 14px; font-weight: 660;
  font-variant-numeric: tabular-nums;
}
.todo[data-done="true"] .stepper { border-color: var(--good); }
.todo[data-done="true"] .stepper__val { color: var(--good); }

.todo__title { font-size: 15px; font-weight: 570; letter-spacing: -.008em; }
.todo__sub { font-size: 12.5px; color: var(--ink-muted); margin-top: 1px; }

/* ══ Streak grid (ordinal ramp: missed → partial → hit) ══ */
.streak { display: grid; grid-template-columns: repeat(auto-fill, minmax(13px, 1fr)); gap: 3px; }
.streak__cell { aspect-ratio: 1; border-radius: 3px; background: var(--ramp-0); border: 1px solid var(--ring); }
.streak__cell[data-level="1"] { background: var(--ramp-1); border-color: transparent; }
.streak__cell[data-level="2"] { background: var(--ramp-3); border-color: transparent; }
.streak__cell[data-today="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--ink-2); }
.streak__key { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--ink-muted); }
.streak__key i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; border: 1px solid var(--ring); }

/* ══ Balance wheel ══ */
.wheel-wrap { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 26px; align-items: center; }
.wheel { width: 100%; height: auto; display: block; }
.wheel__grid  { fill: none; stroke: var(--line); stroke-width: 1; }
.wheel__spoke { stroke: var(--line); stroke-width: 1; }
.wheel__area  { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.wheel__pt    { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.wheel__label { fill: var(--ink-2); font-size: 11px; font-weight: 600; font-family: var(--font); }

/* ══ Table view (the accessible twin) ══ */
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th, .tbl td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); }
.tbl th { font-size: 12px; font-weight: 600; color: var(--ink-muted); letter-spacing: .03em; text-transform: uppercase; }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tr:last-child td { border-bottom: 0; }
details.tblwrap { margin-top: 14px; }
details.tblwrap > summary { cursor: pointer; font-size: 13px; color: var(--ink-2); padding: 5px 0; }
details.tblwrap > summary:hover { color: var(--ink); }

/* ══ Findings list (plan strength / interventions) ══ */
.finding { display: flex; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.finding:last-child { border-bottom: 0; }
.finding__ico { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; margin-top: 1px; }
.finding--good     .finding__ico { background: var(--good-soft);     color: var(--good); }
.finding--warning  .finding__ico { background: var(--warning-soft);  color: var(--warning); }
.finding--critical .finding__ico { background: var(--critical-soft); color: var(--critical); }
.finding__text { font-size: 13.5px; line-height: 1.5; }
.finding__text b { font-weight: 620; }

/* ══ Today: the identity banner — the "why" above the checklist ══ */
.creed {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-lg);
  padding: 20px 24px;
  margin-bottom: 18px;
  box-shadow: 0 1px 2px rgba(16,16,16,.04);
}
.creed__label {
  font-size: 11px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 12px;
}
.creed__list { display: flex; flex-direction: column; gap: 7px; }
.creed__line {
  font-size: 16.5px; font-weight: 450; font-style: italic;
  line-height: 1.45; letter-spacing: -.008em; color: var(--ink);
}
.creed__foot {
  margin-top: 15px; padding-top: 13px;
  border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-muted);
}
.creed__stat { margin-top: 8px; font-size: 12.5px; color: var(--ink-muted); }
.creed__stat b { color: var(--ink); font-weight: 650; }

.vision__identity {
  font-size: 15.5px; font-weight: 450; font-style: italic;
  line-height: 1.45; letter-spacing: -.008em; color: var(--ink);
}

/* what one tick actually moves */
.impact {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 9px; font-size: 12px; color: var(--ink-muted);
}
.impact__step { display: inline-flex; align-items: center; gap: 5px; }
.impact__sep { opacity: .5; }
.impact b { color: var(--ink-2); font-weight: 620; font-variant-numeric: tabular-nums; }

.cost {
  margin-top: 8px; font-size: 12.5px; color: var(--warning);
  display: flex; align-items: center; gap: 6px;
}

/* implementation intention — the when/where that makes it actually happen */
.cue {
  display: inline-flex; align-items: baseline; gap: 7px;
  margin-top: 7px; padding: 5px 11px 5px 9px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: 99px; font-size: 12.5px; color: var(--ink);
}
.cue__mark { color: var(--accent); font-weight: 700; }
.impact__lead {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-muted); margin-right: 2px;
}

/* stat row on the momentum card */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 12px; }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat__value { font-size: 25px; font-weight: 680; letter-spacing: -.03em; line-height: 1.1; }
.stat__label { font-size: 11.5px; color: var(--ink-muted); font-weight: 550; }

/* ══ The ladder — nested cascade, one rung per horizon ══ */
.ladder { display: flex; flex-direction: column; }
.rung { position: relative; padding: 11px 0 11px 24px; }
/* vertical connector */
.rung::before {
  content: ''; position: absolute; left: 7px; top: 0; bottom: 0;
  width: 1px; background: var(--line);
}
/* elbow into this rung */
.rung::after {
  content: ''; position: absolute; left: 7px; top: 21px;
  width: 11px; height: 1px; background: var(--line);
}
.rung:last-child::before { bottom: auto; height: 21px; }

.rung__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rung__tier {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-muted);
}
.rung__title { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; margin-top: 1px; }
.rung__meter { margin-top: 8px; max-width: 420px; }

/* the two rungs the app works out for you */
.rung__derived {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px;
}
.chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 4px 10px; border-radius: 99px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 11.5px; color: var(--ink-2);
}
.chip b { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.chip--auto { background: var(--accent-soft); border-color: var(--accent-line); }

.pillar-block { border: 1px solid var(--line); border-radius: var(--r); padding: 16px 17px; background: var(--surface); }
.pillar-block + .pillar-block { margin-top: 12px; }
.pillar-block__id {
  font-size: 13.5px; font-style: italic; color: var(--ink-2);
  margin-top: 3px; max-width: 56ch;
}

/* ══ Read-only week score ══ */
/* ── named milestones on a 90-day climb ── */
.milestones { margin-top: 10px; }
.milestones__track { position: relative; height: 4px; background: var(--surface-sunk); border-radius: 99px; margin-bottom: 8px; }
.milestones__mark {
  position: absolute; top: 50%; width: 9px; height: 9px; margin-left: -4.5px;
  border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong);
  transform: translateY(-50%); cursor: default;
}
.milestones__mark--hit { background: var(--accent); border-color: var(--accent); }
.milestones__list { display: flex; flex-direction: column; gap: 4px; }
.milestones__item { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--ink-2); }
.milestones__item--hit { color: var(--ink); }
.milestones__item--hit b { color: var(--accent); }
.milestones__x { background: none; border: 0; color: var(--ink-muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 2px; }
.milestones__x:hover { color: var(--critical); }

/* ── week grid: seven tap targets, Monday through Sunday ── */
.weekgrid { display: flex; gap: 6px; margin-top: 10px; }
.weekgrid__day { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.weekgrid__dow { font-size: 10.5px; font-weight: 600; color: var(--ink-muted); text-transform: uppercase; }
.weekgrid__day--today .weekgrid__dow { color: var(--accent); }
.weekgrid__blank { display: block; width: 26px; height: 26px; }

.wow { font-weight: 600; }
.wow--up { color: var(--good); }
.wow--down { color: var(--critical); }
.wow--same { color: var(--ink-muted); font-weight: 500; }

.scoreline { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.scoreline:last-of-type { border-bottom: 0; }
.scoreline__bar { height: 6px; border-radius: 99px; background: var(--surface-sunk); overflow: hidden; margin-top: 7px; max-width: 260px; }
.scoreline__fill { height: 100%; border-radius: 99px; }

/* ══ Empty state ══ */
.empty { text-align: center; padding: 44px 24px; color: var(--ink-muted); }
.empty__mark { font-size: 30px; opacity: .4; margin-bottom: 10px; }
.empty p { font-size: 14px; max-width: 40ch; margin: 0 auto 16px; }

/* ══ Onboarding ══ */
.onboard { min-height: 100dvh; display: grid; place-items: center; padding: 28px 20px 60px; background: var(--plane); }
.onboard__inner { width: 100%; max-width: 620px; }
.onboard__step { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.onboard h1 { font-size: 30px; font-weight: 690; letter-spacing: -.025em; line-height: 1.18; margin-bottom: 10px; }
.onboard__lede { color: var(--ink-2); font-size: 15.5px; margin-bottom: 26px; max-width: 52ch; }
.onboard__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.onboard__dots { display: flex; gap: 6px; justify-content: center; margin-top: 22px; }
.onboard__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.onboard__dots i[data-on="true"] { background: var(--accent); width: 18px; border-radius: 99px; }

/* pillar picker */
.pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 9px; }
.pick__item {
  display: flex; align-items: center; gap: 9px; padding: 12px 13px;
  border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface);
  cursor: pointer; text-align: left; transition: border-color .12s, background .12s;
}
.pick__item:hover { border-color: var(--ink-muted); }
.pick__item[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.pick__ico { font-size: 17px; flex: none; }
.pick__name { font-size: 14px; font-weight: 570; }

/* ══ Modal ══ */
.modal-host { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.55); backdrop-filter: blur(3px); }
.modal {
  width: 100%; max-width: 540px; max-height: 88dvh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px; box-shadow: var(--shadow);
}
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.modal__title { font-size: 18px; font-weight: 660; letter-spacing: -.015em; }
.modal__sub { font-size: 13px; color: var(--ink-muted); margin-top: 3px; }
.modal__foot { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }

/* ══ Coach ══ */
.coach__body {
  min-height: 110px; font-size: 14.5px; line-height: 1.62;
  white-space: pre-wrap; color: var(--ink);
}
.coach__loading { display: flex; align-items: center; gap: 10px; color: var(--ink-muted); font-size: 14px; }
.coach__error {
  padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--critical-soft); border: 1px solid color-mix(in srgb, var(--critical) 26%, transparent);
  font-size: 13.5px; line-height: 1.55;
}
.spinner {
  width: 15px; height: 15px; flex: none;
  border: 2px solid var(--line-strong); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.coach__src { font-size: 12px; color: var(--ink-muted); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }

/* ══ Toast ══ */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 80; padding: 11px 18px; border-radius: 99px;
  background: var(--ink); color: var(--plane);
  font-size: 13.5px; font-weight: 550; box-shadow: var(--shadow);
  animation: toast-in .2s cubic-bezier(.2,.8,.3,1);
  display: flex; align-items: center; gap: 14px;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } }
.toast__undo {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--plane); font: inherit; font-weight: 650;
  text-decoration: underline; text-underline-offset: 2px; flex: none;
}
.toast__undo:hover { opacity: .8; }

/* ══ Mobile ══ */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .nav {
    position: fixed; bottom: 0; left: 0; right: 0; top: auto; height: auto;
    flex-direction: row; align-items: center;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    border-right: 0; border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-sunk) 92%, transparent);
    backdrop-filter: blur(12px); z-index: 40;
  }
  .nav__brand, .nav__foot { display: none; }
  /* 7 items no longer fit a 375px bar with room to breathe — scroll rather
     than crush the tap targets or silently drop one off the edge. */
  .nav__list {
    flex-direction: row; width: 100%; justify-content: flex-start; gap: 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .nav__list::-webkit-scrollbar { display: none; }
  .nav__item { flex: none; flex-direction: column; gap: 3px; padding: 7px 4px; min-width: 58px; }
  .nav__item[aria-current="page"] { background: none; color: var(--accent); }
  .nav__ico { font-size: 18px; }
  .nav__label { font-size: 10.5px; font-weight: 570; }
  .nav__item--alert::after { top: 4px; left: 50%; transform: translateX(5px); }
  .main { padding: 22px 16px 104px; }
  .page-head h1 { font-size: 23px; }
  .wheel-wrap { grid-template-columns: 1fr; gap: 20px; }
  .field-row { grid-template-columns: 1fr; }
  .modal { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ══ Your own words, played back ══ */
.recall {
  margin-top: 9px; padding: 9px 12px;
  border-left: 2px solid var(--line-strong);
  background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.recall__line { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.recall__line + .recall__line { margin-top: 4px; }

/* ══ Breakdown proposal — editable fields before creating ══ */
.proposal-field {
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 13px 14px; margin: 0;
}
.proposal-field + .proposal-field { margin-top: 12px; }
.proposal-field legend {
  padding: 0 4px; margin-left: -4px;
}

/* ── The four quarters, and the habits under the first ────
   Quarters 2–4 are dimmed on purpose: they are a map of the year, not work
   you have signed up for yet. Only the live one reads at full strength. */
.qrow {
  display: grid; grid-template-columns: 62px 1fr 78px 72px; gap: 7px;
  align-items: center; padding: 7px 0;
  border-top: 1px solid var(--line);
  opacity: .62;
}
.qrow:first-of-type { border-top: 0; }
.qrow--live { opacity: 1; }
.qrow__n {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-muted);
}
.qrow--live .qrow__n { color: var(--accent); }
.qrow .input { font-size: 13px; padding: 6px 9px; }

.hrow { padding: 11px 0; border-top: 1px solid var(--line); }
.hrow:first-of-type { border-top: 0; padding-top: 2px; }

/* The hard capacity check on a proposed set of habits. Green when it fits,
   and the create button is genuinely disabled when it doesn't — the coach is
   told the limit, but only this refuses. */
.capbar {
  font-size: 12.5px; border-radius: var(--r-sm);
  padding: 8px 11px; margin-bottom: 12px;
  border: 1px solid var(--line);
}
.capbar--ok {
  background: var(--good-soft); border-color: var(--accent-line); color: var(--good);
}
.capbar--over {
  background: var(--critical-soft); border-color: var(--critical); color: var(--critical);
}

/* ── What the coach said ──────────────────────────────────
   Kept advice, collapsed. Left rule in accent rather than a filled block —
   emphasis in this app is always a rule or a tint, never a dark slab.        */
.advice { margin-top: 12px; }
.advice__sum {
  cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 600; color: var(--secondary);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 0;
}
.advice__sum::-webkit-details-marker { display: none; }
.advice__sum::before { content: '▸'; font-size: 10px; color: var(--secondary); }
.advice[open] .advice__sum::before { content: '▾'; }
.advice__sum:hover { color: var(--ink); }
.advice__n {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 0 7px; font-size: 11px; font-weight: 700;
}
.advice__item {
  border-left: 3px solid var(--accent);
  padding: 8px 0 8px 12px; margin-top: 10px;
}
.advice__meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--secondary); margin-bottom: 5px;
}
.advice__kind {
  text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; color: var(--accent);
}
.advice__x {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  color: var(--secondary); font-size: 16px; line-height: 1; padding: 0 4px;
}
.advice__x:hover { color: var(--critical, #b91c1c); }
.advice__text { font-size: 13.5px; line-height: 1.6; color: var(--ink); }

/* Blinking caret while the coach is still writing. */
.coach__caret {
  display: inline-block; width: 2px; height: 1em;
  background: var(--accent); vertical-align: text-bottom;
  margin-left: 2px; animation: caret 1s steps(2) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .coach__caret { animation: none; } }

/* ── Month challenge ──────────────────────────────────────
   The verdict is the one line read first, so it gets the emerald rule the
   rest of the app uses for emphasis — never a filled dark block.          */
.verdict {
  border-left: 3px solid var(--accent);
  padding: 2px 0 2px 12px; margin: 0 0 14px;
  font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--ink);
}
.pickline {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--line);
  font-size: 14px; cursor: pointer;
}
.pickline:first-of-type { border-top: 0; }
.pickline input { flex: none; width: 16px; height: 16px; accent-color: var(--accent); }

/* ══ TODAY ═══════════════════════════════════════════════
   Focus first, everything else quiet. The screen leads with what a tick is
   worth rather than what is outstanding.                                   */

/* ── the tap target ── */
.check {
  width: 30px; height: 30px; flex: none; cursor: pointer;
  border-radius: 9px; border: 1.5px solid var(--line-strong);
  background: var(--surface); color: transparent;
  font-size: 14px; line-height: 1;
  transition: background .16s, border-color .16s, color .16s, transform .16s;
}
.check:hover { border-color: var(--accent); color: var(--accent); }
.check--big { width: 52px; height: 52px; border-radius: 14px; font-size: 22px; border-width: 2px; }
.check--sm  { width: 26px; height: 26px; border-radius: 8px; font-size: 12px; }
.check[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

/* Streak insurance's third state — not a hit, not a plain miss. Amber and a
   shield, distinct from both, and still a real button: tapping it logs the
   day for real and the shield is replaced by the tick, same as any other cell. */
.check--saved {
  background: color-mix(in srgb, var(--warning) 16%, var(--surface));
  border-color: var(--warning); color: var(--warning);
}
.check--saved:hover { background: color-mix(in srgb, #f59e0b 26%, var(--surface)); }

/* ── the cross ──────────────────────────────────────────────
   Deliberately the quietest control on the screen. It is grey, never red:
   a recorded miss is a data point, not an alarm, and colouring it like an
   error would make logging one feel like an admission. Same size as the
   tick, because it is exactly as legitimate an answer. */
.tickpair { display: inline-flex; gap: 6px; align-items: center; }

.check--x {
  border-color: var(--line-strong);
  color: var(--ink-muted);
  background: var(--surface);
}
.check--x:hover {
  border-color: var(--ink-2);
  color: var(--ink-2);
  background: var(--surface-2);
}
.check--x-on {
  background: var(--surface-sunk);
  border-color: var(--ink-muted);
  color: var(--ink-2);
}

/* A recorded miss in the week grid. Distinct from an empty square — that
   means "you have told me nothing", which is a different fact. */
.check--missed {
  background: var(--surface-sunk);
  border-color: var(--line-strong);
  color: var(--ink-muted);
}
/* Wasn't possible: the day doesn't count either way, so it reads as absent
   rather than as anything you did or didn't do. */
.check--skipped {
  background: transparent;
  border-style: dashed;
  border-color: var(--line-strong);
  color: var(--ink-muted);
}

/* Reason chips in the miss modal. */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip--btn {
  cursor: pointer; font: inherit; font-size: 13px;
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink); border-radius: 99px; padding: 7px 13px;
}
.chip--btn:hover { border-color: var(--accent); color: var(--accent); }
.chip--skip { border-style: dashed; color: var(--ink-2); }

/* The reward. One pop on the control, one sweep across the rung it moved —
   short, once, and never blocking the next tap. */
.check--pop { animation: pop .34s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes pop {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}

.focus--just .rung2__fill,
.lite--just .lite__n { animation: sweep .5s ease-out; }
@keyframes sweep {
  0%   { filter: brightness(1.9); }
  100% { filter: brightness(1); }
}

/* A quiet ✓ that rises off the control and fades. */
.spark {
  position: absolute; pointer-events: none; z-index: 20;
  font-size: 15px; font-weight: 700; color: var(--accent);
  animation: rise .8s ease-out forwards;
}
@keyframes rise {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(.7); }
  22%  { opacity: 1; transform: translate(-50%, -12px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -34px) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .check--pop, .focus--just .rung2__fill, .lite--just .lite__n, .spark { animation: none; }
  .spark { display: none; }
  .streakbadge--4, .focus--flame-4 { animation: none; }
  .flameband { animation: none !important; background-position: 30% 50%; }
}

/* ── focus card ── */
.focus {
  position: relative;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 14px;
  padding: 20px; margin-bottom: 14px;
  transition: border-color .2s, background .2s, box-shadow .2s;
}

/* Streak fire — a banner across the top of the card announces it, the way a
   reward should be seen rather than found. Card border and box-shadow glow
   still escalate underneath it so the whole tile reads as lit up, not just
   the strip at the top. Every tier gets a live, moving gradient — this is
   the one place in the app allowed to not sit still, because it's meant to
   feel like something you'd protect. */
.focus--flame-1 {
  border-color: color-mix(in srgb, #f59e0b 45%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, #f59e0b 20%, transparent), 0 0 14px color-mix(in srgb, #f59e0b 14%, transparent);
}
.focus--flame-2 {
  border-color: color-mix(in srgb, #f97316 55%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, #f97316 26%, transparent), 0 0 18px color-mix(in srgb, #f97316 20%, transparent);
}
.focus--flame-3 {
  border-color: color-mix(in srgb, #ef4444 60%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, #ef4444 32%, transparent), 0 0 24px color-mix(in srgb, #ef4444 26%, transparent);
}
.focus--flame-4 {
  border-color: color-mix(in srgb, #dc2626 70%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, #dc2626 42%, transparent), 0 0 34px color-mix(in srgb, #dc2626 34%, transparent);
  animation: flame-glow 2.4s ease-in-out infinite;
}
@keyframes flame-glow {
  0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, #dc2626 42%, transparent), 0 0 26px color-mix(in srgb, #dc2626 26%, transparent); }
  50%      { box-shadow: 0 0 0 1px color-mix(in srgb, #dc2626 55%, transparent), 0 0 42px color-mix(in srgb, #dc2626 42%, transparent); }
}

/* The banner itself — bleeds to the card's edges (the card has 20px padding,
   this cancels it) and reads as the headline of the card, not a footnote. */
.flameband {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px;
  margin: -20px -20px 16px; padding: 10px 16px;
  border-radius: 13px 13px 0 0;
  font-weight: 800; font-size: 13.5px; letter-spacing: .01em; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.2);
  text-align: center;
  background-size: 250% 100%;
}
.flameband__flames { font-size: 16px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.flameband--1 { background-image: linear-gradient(100deg, #f59e0b, #fb923c, #f59e0b); animation: flame-sweep 5s ease-in-out infinite; }
.flameband--2 { background-image: linear-gradient(100deg, #f97316, #ef4444, #f97316); animation: flame-sweep 4s ease-in-out infinite; }
.flameband--3 { background-image: linear-gradient(100deg, #ef4444, #dc2626, #f59e0b, #ef4444); animation: flame-sweep 3.2s ease-in-out infinite; }
.flameband--4 {
  background-image: linear-gradient(100deg, #f59e0b, #dc2626, #7c1d1d, #f59e0b, #dc2626);
  background-size: 300% 100%;
  animation: flame-sweep 2.4s ease-in-out infinite;
}
@keyframes flame-sweep {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Trend on a measured goal. Deliberately quiet — this is an observation about
   a number you don't fully control, so it never gets the flame treatment a
   streak does. Moving the wrong way is stated, not flagged: there is nothing
   here to fail, and the work is scored elsewhere. */
.trendline {
  display: inline-block;
  font-size: 11.5px; font-weight: 500;
  color: var(--ink-2); letter-spacing: normal;
}
.trendline--good { color: var(--good); }

.streakbadge {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 700; text-transform: none; letter-spacing: normal;
  margin-top: 4px; padding: 2px 9px; border-radius: 99px;
}
.streakbadge--1 {
  font-size: 11.5px; color: var(--flame-1);
  background: color-mix(in srgb, #f59e0b 16%, transparent);
}
.streakbadge--2 {
  font-size: 12px; color: var(--flame-2);
  background: color-mix(in srgb, #f97316 20%, transparent);
}
.streakbadge--3 {
  font-size: 12.5px; color: #fff;
  background: linear-gradient(120deg, #f97316, #dc2626);
  box-shadow: 0 0 10px color-mix(in srgb, #f97316 45%, transparent);
}
.streakbadge--4 {
  font-size: 13px; color: #fff;
  background: linear-gradient(120deg, #f59e0b, #dc2626 65%, #7c1d1d);
  box-shadow: 0 0 14px color-mix(in srgb, #dc2626 55%, transparent);
  animation: flame-glow 2.6s ease-in-out infinite;
}

.focus__kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
}

.focus__title { font-size: 19px; font-weight: 650; line-height: 1.3; margin: 5px 0 0; }
.focus__chain { font-size: 11.5px; color: var(--ink-muted); margin-top: 4px; letter-spacing: .01em; }
.focus__row { display: flex; align-items: center; gap: 14px; margin-top: 16px; position: relative; }
.willdo { font-size: 13.5px; color: var(--secondary); line-height: 1.55; }
.willdo b { color: var(--ink); }
.willdo__win { color: var(--accent); font-weight: 600; }

/* ── the climb ── */
.climb { display: grid; gap: 7px; margin-top: 16px; }
.rung2 { display: grid; grid-template-columns: 76px 1fr 84px; gap: 10px; align-items: center; }
.rung2__label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--secondary); font-weight: 700;
}
.rung2__track { height: 9px; border-radius: 999px; background: var(--surface-sunk, #ececee); overflow: hidden; }
.rung2__fill { height: 100%; border-radius: 999px; background: var(--accent); transition: width .45s cubic-bezier(.22,1,.36,1); }
.rung2__val { font-size: 12px; color: var(--secondary); text-align: right; font-variant-numeric: tabular-nums; }
.rung2__val b { color: var(--ink); }

/* ── maintain rows ── */
.lite { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); position: relative; }
.lite:first-of-type { border-top: 0; }
.lite[data-done="true"] .lite__t { color: var(--secondary); text-decoration: line-through; text-decoration-thickness: 1px; }
.lite__t { font-size: 14.5px; line-height: 1.35; }
.lite__c { font-size: 12px; color: var(--secondary); margin-top: 2px; }
.lite__c--warn { color: var(--warning, #b45309); }
.lite__n {
  font-size: 12px; color: var(--secondary); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.lite[data-done="true"] .lite__n { color: var(--accent); font-weight: 600; }

/* ── banked ── */


/* Two pools, shown apart because they are not interchangeable. */
.pools { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.pool { border-left: 2px solid var(--line); padding-left: 12px; }
.pool--over { border-left-color: var(--critical); }
.pool__h { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--secondary); font-weight: 700; }
.pool__n { font-size: 20px; font-weight: 650; margin-top: 3px; }
.pool__s { font-size: 11.5px; color: var(--secondary); margin-top: 2px; line-height: 1.35; }
@media (max-width: 560px) { .pools { grid-template-columns: 1fr; } }
.bank__u { font-size: 12px; font-weight: 600; color: var(--secondary); margin-left: 3px; }

/* Shown only when nothing is on push: names the default rather than hiding it. */
.guessbar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-bottom: 14px; padding: 11px 14px;
  border: 1px dashed var(--line-strong); border-radius: 12px;
  background: var(--surface); font-size: 13px; color: var(--secondary); line-height: 1.5;
}

/* ══ Completion ══════════════════════════════════════════
   A finished mission is an achievement, not a disabled row. The old version
   greyed it out and dropped it to the bottom in the same frame, which read as
   the thing being quietly taken away. Now it stays put, lights up, and only
   settles once the win has been seen.                                       */

.focus--done {
  border-left-color: var(--accent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 62%),
    var(--surface);
}
.focus--done .focus__title { color: var(--ink); }

.focus__badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--accent); color: #fff;
  border-radius: 999px; padding: 3px 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}

/* The moment itself: the card lifts, the rungs climb from empty, the tick lands. */
.focus--just { animation: lift .95s cubic-bezier(.22, 1, .36, 1); }
@keyframes lift {
  0%   { transform: translateY(0)   scale(1);    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 42%, transparent); }
  26%  { transform: translateY(-4px) scale(1.012); box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--accent) 60%, transparent); }
  100% { transform: translateY(0)   scale(1);    box-shadow: 0 0 0 0 transparent; }
}

/* Bars grow from empty rather than snapping — scaleX so it works on any width. */
.focus--just .rung2__fill {
  transform-origin: left center;
  animation: climb .85s cubic-bezier(.22, 1, .36, 1) both;
}
.focus--just .rung2:nth-child(1) .rung2__fill { animation-delay: .04s; }
.focus--just .rung2:nth-child(2) .rung2__fill { animation-delay: .12s; }
.focus--just .rung2:nth-child(3) .rung2__fill { animation-delay: .20s; }
.focus--just .rung2:nth-child(4) .rung2__fill { animation-delay: .28s; }
@keyframes climb { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.focus--just .focus__badge { animation: badge .6s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes badge {
  0%   { opacity: 0; transform: scale(.6) translateY(4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.focus--just .willdo { animation: fadeup .5s ease-out .18s both; }
@keyframes fadeup {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lite--just { animation: liteflash .6s ease-out; }
@keyframes liteflash {
  0%   { background: color-mix(in srgb, var(--accent) 16%, transparent); }
  100% { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .focus--just, .focus--just .rung2__fill, .focus--just .focus__badge,
  .focus--just .willdo, .lite--just { animation: none; }
}

/* ── "That won't work for me…" ────────────────────────────
   A conversation with a commit button, not a chat window.               */
.revise { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.revise__sum {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--accent);
}
.revise__sum::-webkit-details-marker { display: none; }
.revise__sum::before { content: '↺'; font-size: 13px; }
.revise[open] .revise__sum { margin-bottom: 10px; }
.revise__past { margin-bottom: 10px; }
.revise__old {
  border-left: 2px solid var(--line-strong); padding: 3px 0 3px 10px;
  font-size: 12.5px; color: var(--secondary); font-style: italic; margin-bottom: 5px;
}
.revise textarea { resize: vertical; font-family: inherit; font-size: 13.5px; line-height: 1.5; }

/* ── Banked ───────────────────────────────────────────────
   Colour here is one hue at varying strength — depth reads as progress toward
   the 90-day goal. Six categorical pillar hues would look livelier and mean
   less: the pillar is already named by its icon, and six at once can't clear
   the colourblind-separation floor.                                        */
.banked { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; }
.bank {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 13px 15px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) calc(7% + (var(--fill, 0%) / 100) * 15%), transparent),
      transparent 78%),
    var(--surface);
}
.bank__ico { font-size: 13px; color: var(--accent); line-height: 1; margin-bottom: 7px; }
.bank__n { font-size: 24px; font-weight: 660; letter-spacing: -.015em; line-height: 1.05; }
.bank__u { font-size: 12px; font-weight: 600; color: var(--secondary); margin-left: 3px; }
.bank__l { font-size: 11.5px; color: var(--secondary); margin-top: 3px; line-height: 1.35; }
.bank__bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--surface-sunk, #ececee);
}
.bank__bar i {
  display: block; height: 100%; width: var(--fill, 0%);
  background: var(--accent); border-radius: 0 2px 2px 0;
  transition: width .5s cubic-bezier(.22, 1, .36, 1);
}

/* ── Day navigation ───────────────────────────────────────
   Sits inline in the page-head kicker, so looking back at a missed day is a
   two-tap correction, not a separate screen.                                */
.daynav { display: inline-flex; align-items: center; gap: 8px; }
.daynav__btn {
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 7px; width: 24px; height: 22px; line-height: 1;
  font-size: 15px; color: var(--secondary); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.daynav__btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.daynav__btn:disabled { opacity: .35; cursor: default; }

/* ══════════════════════════════════════════════════════════
   The sign-in gate.

   Deliberately the plainest screen in the app: it is a lock, not a
   destination. Nothing renders behind it — the app element stays hidden
   until Firebase says who you are, so a deployed copy shows a stranger
   this and nothing else.
   ══════════════════════════════════════════════════════════ */
.gate {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: 24px;
  background: var(--plane);
}
.gate[hidden] { display: none; }

.gate__card {
  width: 100%; max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 30px 26px 24px;
  display: flex; flex-direction: column;
}
.gate__mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--solid); margin-bottom: 16px;
}
.gate__title { font-size: 20px; font-weight: 640; margin: 0 0 5px; letter-spacing: -.01em; }
.gate__sub   { font-size: 13.5px; color: var(--ink-2); margin: 0 0 20px; line-height: 1.5; }
.gate__form  { display: block; }
.gate__err {
  font-size: 13px; margin: 12px 0 0; padding: 9px 11px;
  border-radius: var(--r-sm);
  background: var(--critical-soft); color: var(--critical);
  border: 1px solid var(--critical);
}
.gate__info {
  font-size: 13px; margin: 12px 0 0; padding: 9px 11px;
  border-radius: var(--r-sm);
  background: var(--good-soft); color: var(--good);
  border: 1px solid var(--accent-line);
}
.gate__links {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.gate__links .btn { justify-content: flex-start; padding-left: 0; padding-right: 0; }

/* Sync state, shown as a dot in Settings rather than a running commentary. */
#syncDot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--ink-muted); }
#syncDot[data-state="synced"]  { background: var(--good); }
#syncDot[data-state="syncing"] { background: var(--warning); }
#syncDot[data-state="offline"] { background: var(--warning); }
#syncDot[data-state="error"]   { background: var(--critical); }

/* ══════════════════════════════════════════════════════════
   The review ladder.

   The point of these visuals is attainment, not activity: a bar that fills
   to a marked target answers "did I get there" without you reading a number.
   That only works if targets are set with slack — chart a daily habit against
   a perfect 7 of 7 and every week is a wall of unfinished bars, which reads
   as failure however well it is drawn.
   ══════════════════════════════════════════════════════════ */
.rvrows { display: flex; flex-direction: column; }
.rvrow {
  display: grid; grid-template-columns: 1fr auto auto; gap: 14px;
  align-items: center; padding: 10px 0;
  border-top: 1px solid var(--line);
}
.rvrow:first-child { border-top: 0; }
.rvrow__n { font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Which days — the finding a bar alone would hide ("both misses were a weekend"). */
.rvdays { display: flex; gap: 3px; }
.rvday {
  width: 19px; height: 19px; border-radius: 5px;
  display: grid; place-items: center;
  font-size: 10px; background: var(--surface-sunk); color: transparent;
}
.rvday--done    { background: var(--accent); color: #fff; }
.rvday--missed  { background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--ink-muted); }
.rvday--skipped { background: transparent; border: 1px dashed var(--line-strong); color: var(--ink-muted); }
.rvday--unknown { background: var(--surface-sunk); }
.rvday--future  { background: transparent; }

/* Actual against target, with the target marked. */
.attain { display: flex; align-items: center; gap: 9px; min-width: 148px; }
.attain__track {
  position: relative; flex: 1; height: 14px;
  border-radius: 4px; background: var(--surface-sunk);
}
.attain__fill { height: 100%; border-radius: 4px; background: var(--warning); }
.attain__fill--hit { background: var(--accent); }
.attain__mark {
  position: absolute; top: -3px; bottom: -3px; right: 0;
  width: 2px; border-radius: 1px; background: var(--ink);
}
.attain__val {
  font-size: 12px; font-variant-numeric: tabular-nums;
  min-width: 52px; text-align: right;
}

.alignrow { padding: 11px 0; border-top: 1px solid var(--line); }
.alignrow:first-child { border-top: 0; padding-top: 0; }

@media (max-width: 560px) {
  .rvrow { grid-template-columns: 1fr; gap: 7px; }
  .attain { min-width: 0; }
}