/* ─────────────────────────────────────────────────────────────────────
   Loren
   Navy + white for trust, one confident blue for action, a soft sky tint
   for the things you're saving toward. Cool-gray field, white cards.
   Every token here is shared with Loren Wealth, so the whole app moves
   together when the palette does.
   ───────────────────────────────────────────────────────────────────── */

/* Self-hosted fonts (see fonts/README.md for sources and the SIL OFL).
   Variable files: Figtree covers weights 400-800, Bricolage Grotesque 500-800
   plus its optical-size axis. Split by unicode-range the way Google Fonts
   serves them, so the Latin Extended file is only fetched when a page needs it. */
@font-face {
  font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url(fonts/bricolage-grotesque-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url(fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonts/figtree-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonts/figtree-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Contrast (WCAG): --text on --bg 15.4:1 · --muted on white 5.4:1, on
     --accent-soft 4.7:1 · --accent on white 5.8:1, on --accent-soft 5.1:1 ·
     white on --accent-strong 8.2:1 · --sky-ink on --navy 9.8:1. */
  --navy: #0B1F3A;           /* nav, headings, the landing band */
  --navy-2: #13305A;
  --bg: #F4F7FB;             /* light cool gray */
  --bg-tint: #EAF0F8;
  --panel: #FFFFFF;
  --panel-raised: #F7F9FC;
  --border: #D8E1EE;
  --border-soft: #E6ECF4;
  --text: #0B1F3A;
  --text-2: #334766;
  --muted: #5B6B82;
  --accent: #1D5FD1;         /* primary blue — actions */
  --accent-strong: #1549A8;
  --accent-soft: #E6F0FF;    /* sky tint — goal & balance cards */
  --accent-ink: #FFFFFF;     /* text on the accent */
  --sky: #3BA3F5;            /* bright accent: fills, highlights (never body text on white) */
  --sky-soft: #D6ECFF;
  --sky-ink: #9CCBFF;        /* readable blue on navy */

  --take: #0E7A54;      --take-bg: #E4F3EC;   --take-line: #10905F;
  --qualified: #8A5A00; --qualified-bg: #FBF1DC;
  --notrade: #5B6B82;   --notrade-bg: #EDF1F7;
  --error: #B23A2E;     --error-bg: #FBEAE7;  --error-line: #C0392B;
  --warn-bg: #FBF1DC;   --warn-text: #7A5A0A; --warn-border: #E8CE93;

  --shadow-sm: 0 1px 2px rgba(11, 31, 58, .05), 0 1px 3px rgba(11, 31, 58, .06);
  --shadow-md: 0 2px 6px rgba(11, 31, 58, .06), 0 10px 26px rgba(11, 31, 58, .08);
  --shadow-lg: 0 14px 44px rgba(11, 31, 58, .16);

  --font-display: 'Bricolage Grotesque', 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', 'Cascadia Code', Consolas, monospace;

  --col-tool: 880px;
  --col-wide: 1080px;
  --ease: cubic-bezier(.22, .8, .3, 1);
  --radius: 16px;
  --radius-sm: 10px;
  --tabbar-h: 0px;           /* set on phones, where the bottom tab bar shows */
}

* { box-sizing: border-box; }

/* Layout rules below set display on elements the app toggles via [hidden];
   without this they would outrank the UA sheet and stay visible. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font: 15px/1.55 var(--font-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  /* Sticky footer: on a short page the footer sits at the viewport bottom; on a
     long page it flows after the content. */
  min-height: 100vh;
  /* dvh tracks the iOS toolbar as it collapses; 100vh alone leaves the footer
     stranded below the fold. Ordered so browsers without dvh keep the vh rule. */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; }

a { color: var(--accent); }

/* ── Motion (respected-reduced below) ──────────────────────────────── */
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
.fade-up { animation: fade-up .7s var(--ease) both; }
.fade-up-1 { animation: fade-up .7s var(--ease) .08s both; }
.fade-up-2 { animation: fade-up .7s var(--ease) .16s both; }
.fade-up-3 { animation: fade-up .7s var(--ease) .24s both; }

:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── Header ───────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 24px;
  background: #ffffffeb;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: inherit;
}

.monogram {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  font: 800 19px/1 var(--font-display);
  color: #fff;
  background: var(--navy);
  border-radius: 11px;
  box-shadow: inset 0 -4px 0 var(--accent);
}

.wordmark {
  font: 700 20px/1 var(--font-display);
  letter-spacing: -.01em;
  color: var(--navy);
}

.tabs { display: flex; gap: 2px; flex-wrap: wrap; align-items: center; }

.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 8px 14px;
  font: 600 14.5px/1.2 var(--font-body);
  color: var(--text-2);
  text-decoration: none;
  border-radius: 12px;
  transition: background .15s, color .15s;
}
.tab.active { color: var(--accent-strong); background: var(--accent-soft); }
.nav-ico { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sprite symbol, .tabbar svg, .nav-ico { fill: none; stroke: currentColor; }

/* Strategies dropdown — a <details> that overlays rather than reflows. */
.tab-menu { position: relative; }
.tab-menu-summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.tab-menu-summary::-webkit-details-marker { display: none; }
.tab-menu .caret { font-size: 10px; opacity: .7; transition: transform .15s ease; }
.tab-menu[open] .caret { transform: rotate(180deg); }
.tab-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 214px;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 14px 34px -14px rgba(11, 31, 58, .3);
  /* The menu is taller than a phone screen; without its own scroll the lower
     entries were unreachable (the header it hangs from is sticky). */
  max-height: calc(100vh - 96px);
  max-height: calc(100dvh - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.tab-dropdown .tab { min-height: 40px; padding: 8px 12px; border-radius: 9px; font-size: 14px; }
.sheet-title { display: none; }
.tab-dropdown .tab.active { color: var(--text); background: var(--accent-soft); }
.tab-dropdown .tab.active::after { display: none; }
.tab-dropdown-wide { min-width: 232px; }
.tab-dropdown .tab-strong { font-weight: 700; color: var(--navy); }
.tab-group {
  margin: 8px 0 2px; padding: 0 12px;
  font: 500 9.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.tab-group:first-of-type { margin-top: 6px; }

/* Reference strip at the top of each strategy desk. */
.desk-reference {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 4px 0 20px;
}
.desk-reference .ref-item {
  padding: 12px 14px;
  background: var(--panel-raised);
  border: 1px solid var(--border-soft);
  border-radius: 9px;
}
.desk-reference .ref-k {
  display: block;
  font: 600 10.5px/1 var(--font-mono, monospace);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 6px;
}
.desk-reference .ref-item p { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.5; }
@media (max-width: 760px) { .desk-reference { grid-template-columns: 1fr; } }

/* ── Panels ───────────────────────────────────────────────────────── */
.panel-home { max-width: var(--col-wide); margin: 0 auto; padding: 0 24px; }
.panel-tool { max-width: var(--col-tool); margin: 0 auto; padding: 28px 24px 56px; }

.eyebrow {
  margin: 0 0 12px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center;
  padding: 76px 0 68px;
}

.hero-copy h1 {
  margin: 0 0 20px;
  font: 400 clamp(34px, 4.6vw, 54px)/1.06 var(--font-display);
  letter-spacing: -.015em;
  color: var(--text);
}

.lede {
  margin: 0 0 28px;
  max-width: 46ch;
  font-size: 16px;
  color: var(--text-2);
}

.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Signature: the cycle rails ───────────────────────────────────── */
.clocks {
  margin: 0;
  padding: 22px 24px 18px;
  box-shadow: var(--shadow-md);
  background: linear-gradient(180deg, var(--panel), var(--panel-raised));
  border: 1px solid var(--border);
  border-radius: 10px;
}

.clocks-cap {
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}

.rail-group { margin-top: 26px; }

.rail-title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--text);
}
.rail-span {
  margin-left: 8px;
  font: 400 11px/1 var(--font-mono);
  letter-spacing: .08em;
  color: var(--muted);
}

.rail { position: relative; padding-bottom: 34px; }

.rail-track {
  position: relative;
  height: 2px;
  background: var(--border);
}

.rail-fill {
  height: 100%;
  width: var(--fill);
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  transform-origin: left;
  animation: rail-draw 1s cubic-bezier(.22, .8, .3, 1) both;
}
.rail-monthly .rail-fill { animation-delay: .18s; }
.rail-quarterly .rail-fill { animation-delay: .36s; }
.rail-longterm .rail-fill { animation-delay: .54s; }

.rail-marks {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rail-marks li {
  position: absolute;
  left: var(--at);
  top: 0;
  transform: translateX(-50%);
  animation: mark-in .5s ease-out both;
  animation-delay: calc(.5s + var(--i) * .09s);
}

.mark {
  display: block;
  width: 7px;
  height: 7px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--accent-strong);
}
.mark-end { background: var(--accent-strong); }

.mark-label {
  display: block;
  margin-top: 9px;
  font: 500 12px/1.25 var(--font-mono);
  color: var(--text-2);
  text-align: center;
  white-space: nowrap;
}
.mark-label em {
  display: block;
  margin-top: 2px;
  font: 400 9.5px/1 var(--font-mono);
  font-style: normal;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.clocks-foot {
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  font-size: 13px;
  color: var(--muted);
}

@keyframes rail-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mark-in { from { opacity: 0; transform: translateX(-50%) translateY(4px); } }

/* ── Home sections ────────────────────────────────────────────────── */
.strip {
  padding: 52px 0;
  border-top: 1px solid var(--border-soft);
}

.section-h {
  margin: 0 0 6px;
  font: 400 26px/1.2 var(--font-display);
  letter-spacing: -.01em;
  color: var(--text);
}
.section-sub { margin: 0 0 34px; color: var(--muted); font-size: 14px; }

.stages {
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  overflow: hidden;
}

.stage { padding: 24px 22px 26px; background: var(--panel); }

.stage-n {
  display: block;
  margin-bottom: 14px;
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
.stage h3 {
  margin: 0 0 9px;
  font: 400 18px/1.25 var(--font-display);
  color: var(--text);
}
.stage p { margin: 0; font-size: 13.5px; color: var(--text-2); }

.tool-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
@media (min-width: 1000px) { .tool-grid { grid-template-columns: repeat(4, 1fr); } }

.tool {
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.tool h3 {
  margin: 0 0 12px;
  font: 400 24px/1.15 var(--font-display);
  color: var(--text);
}
.tool-body { margin: 0 0 20px; font-size: 14px; color: var(--text-2); }

.spec {
  margin: 0 0 22px;
  padding: 14px 0 0;
  border-top: 1px solid var(--border-soft);
}
.spec > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
}
.spec dt {
  font: 400 11px/1.4 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.spec dd {
  margin: 0;
  font: 500 12.5px/1.4 var(--font-mono);
  color: var(--text-2);
}

.tool .btn { margin-top: auto; align-self: flex-start; }

.principle-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.principle-grid li { border-top: 2px solid var(--accent); padding-top: 14px; }
.principle-grid h4 {
  margin: 0 0 6px;
  font: 500 14px/1.3 var(--font-body);
  color: var(--text);
}
.principle-grid p { margin: 0; font-size: 13px; color: var(--muted); }

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  font: 600 14.5px/1.2 var(--font-body);
  border: 1.5px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s var(--ease);
}
.btn .ico { width: 19px; height: 19px; }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 1px 2px rgba(11, 31, 58, .12), 0 4px 12px -4px rgba(29, 95, 209, .45); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
  background: var(--panel);
  border-color: var(--border);
  color: var(--text-2);
}
.btn-soft { background: var(--accent-soft); color: var(--accent-strong); }
.btn-danger-ghost { background: transparent; border-color: var(--border); color: var(--error); }
.btn-sm { min-height: 36px; padding: 6px 12px; font-size: 13.5px; border-radius: 10px; }
.btn-lg { min-height: 48px; padding: 12px 20px; font-size: 15.5px; }
.btn-xl { min-height: 56px; padding: 14px 24px; font-size: 17px; border-radius: 14px; }
.btn-block { display: flex; width: 100%; }
.btn:disabled { background: var(--bg-tint); border-color: transparent; color: var(--muted); cursor: default; box-shadow: none; transform: none; }

/* ── Analyzer ─────────────────────────────────────────────────────── */
.desk-head { margin-bottom: 26px; }
.desk-title {
  margin: 0 0 6px;
  font: 400 32px/1.15 var(--font-display);
  letter-spacing: -.01em;
}
.desk-sub { margin: 0; color: var(--muted); font-size: 14px; max-width: 60ch; }

.controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.tickers {
  flex: 1;
  min-width: 220px;
  padding: 10px 12px;
  font: 500 15px/1.2 var(--font-mono);
  letter-spacing: .04em;
  color: var(--text);
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: 5px;
}
.tickers::placeholder { color: var(--muted); letter-spacing: .04em; }

.universe-select {
  padding: 10px 12px;
  font: 500 13.5px/1.2 var(--font-body);
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
  max-width: 220px;
}

.card-about {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.took-fill {
  margin-top: 8px;
  padding: 12px 14px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 8px;
}
.took-fill label {
  display: block;
  font: 500 11px/1.5 var(--font-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 8px;
}
.took-fill input {
  display: block;
  width: 120px;
  margin-top: 5px;
  padding: 9px 11px;
  font: 500 16px/1.2 var(--font-mono);
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 5px;
}
.took-fill-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.took-fill .btn { padding: 9px 15px; font-size: 13.5px; }

.universe {
  flex: 1 1 100%;
  margin: 0;
  font: 400 12px/1.5 var(--font-mono);
  color: var(--muted);
}
.universe .linklike { font: inherit; }

/* Live screen progress. A full-index screen runs for minutes, so the bar is the
   only sign the run is alive. */
.screen-bar {
  display: block;
  height: 3px;
  margin-bottom: 6px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.screen-bar i {
  display: block;
  height: 100%;
  background: var(--accent-strong);
  transition: width .3s var(--ease);
}

.settings { width: 100%; }
.settings summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
  padding: 4px 0;
}

.settings-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: 12px 0 4px;
}
.settings-form label {
  font: 400 11px/1.5 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.settings-form input {
  display: block;
  width: 88px;
  margin-top: 4px;
  padding: 7px 8px;
  font: 500 13px/1.2 var(--font-mono);
  color: var(--text);
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.week-header {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.week-summary {
  font: 500 13px/1.5 var(--font-mono);
  letter-spacing: .02em;
  color: var(--text);
}
.week-events { font-size: 13px; color: var(--muted); flex: 1 1 100%; }
.spark-line { stroke: var(--take); }

.warning {
  padding: 11px 13px;
  margin-bottom: 12px;
  font-size: 13.5px;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: 8px;
  color: var(--warn-text);
}

.card {
  margin-bottom: 14px;
  padding: 0 16px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.card .banner {
  margin: 0 -16px 12px;
  padding: 7px 16px;
  font: 500 12px/1.4 var(--font-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.verdict-take .banner { background: var(--take-bg); color: var(--take); border-bottom: 1px solid var(--take); }
.verdict-qualified .banner { background: var(--qualified-bg); color: var(--qualified); border-bottom: 1px solid var(--qualified); }
.verdict-no_trade .banner { background: var(--notrade-bg); color: var(--notrade); border-bottom: 1px solid var(--notrade); }
.verdict-error .banner { background: var(--error-bg); color: var(--error); border-bottom: 1px solid var(--error); }
.score { float: right; font-weight: 400; letter-spacing: .06em; }

.card h2 {
  margin: 0 0 8px;
  font: 400 22px/1.2 var(--font-display);
  color: var(--text);
}
.card h2 small {
  font: 400 12.5px/1.2 var(--font-mono);
  color: var(--muted);
  letter-spacing: .02em;
}

.trade {
  font: 400 13px/1.65 var(--font-mono);
  color: var(--text-2);
}
.trade strong { color: var(--text); letter-spacing: .04em; text-transform: uppercase; font-size: 12px; }

.riskbox {
  width: 100%;
  margin: 12px 0;
  text-align: center;
  border-collapse: collapse;
}
.riskbox td {
  padding: 8px 6px;
  font: 400 10.5px/1.5 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border-soft);
}
.riskbox b {
  display: block;
  margin-top: 3px;
  font: 500 15px/1.2 var(--font-mono);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}

.why {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 13.5px;
  color: var(--muted);
}
.why li { margin-bottom: 3px; }

.exit {
  margin: 12px 0;
  padding: 10px 14px 12px;
  font-size: 13.5px;
  background: var(--panel-raised);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
}
.exit summary {
  cursor: pointer;
  font: 500 11px/1.4 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
.exit-headline { margin: 10px 0 8px; color: var(--text-2); font-style: italic; }
.exit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.exit-tp, .exit-sl {
  padding: 9px 10px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  color: var(--text-2);
}
.exit-tp { border-color: var(--take); }
.exit-sl { border-color: var(--error); }
.exit-tp .exit-label { color: var(--take); }
.exit-sl .exit-label { color: var(--error); }
.exit-label {
  display: block;
  margin-bottom: 4px;
  font: 400 10px/1.4 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.exit-catalyst {
  margin: 10px 0;
  padding: 8px 10px;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: 6px;
  color: var(--warn-text);
}
.exit-block { margin-top: 12px; }
.exit-block ul { margin: 4px 0 0; padding-left: 18px; color: var(--text-2); }
.exit-block li { margin-bottom: 3px; }

.card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.took { background: var(--take-bg); color: var(--take); border-color: var(--take); }
/* An action that cannot be taken must not wear the colour of one that can:
   the take-green disabled state was near-identical to the live button and
   silently absorbed clicks. `.is-unavailable` stays clickable so the handler
   can explain itself; `:disabled` is the settled post-log state. */
.took:disabled,
.took.is-unavailable {
  background: var(--panel-raised);
  color: var(--muted);
  border-color: var(--border);
}
.took:disabled { cursor: not-allowed; }
.save:disabled { opacity: .7; }

.status { padding: 10px 0; font-size: 13.5px; color: var(--muted); }

/* ── Footer ───────────────────────────────────────────────────────── */
.site-footer {
  max-width: var(--col-wide);
  margin: 0 auto;
  padding: 30px 24px 44px;
  border-top: 1px solid var(--border-soft);
}
.disclaimer {
  margin: 0 0 10px;
  max-width: 78ch;
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--muted);
}
.disclaimer em { font-style: italic; }
.copyright {
  margin: 0;
  font: 400 11px/1 var(--font-mono);
  letter-spacing: .08em;
  color: var(--muted);
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding: 48px 0 44px; }
  .stages { grid-template-columns: 1fr; }
  .tool-grid { grid-template-columns: 1fr; }
  .principle-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .site-header { padding: 10px 16px; }
  .wordmark { font-size: 15px; }
  .tabs { width: 100%; }
  .tab { padding: 7px 10px; font-size: 13px; }
  .tab.active::after { left: 10px; right: 10px; }
  .panel-home, .panel-tool, .site-footer { padding-left: 16px; padding-right: 16px; }
  .principle-grid { grid-template-columns: 1fr; }
  .exit-grid { grid-template-columns: 1fr; }
  .mark-label { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* Seed System doc, "Respect Reduce Motion": every animation becomes a
     150ms cross-fade instead of the blanket near-instant snap above — the
     plant still visibly changes state, it just doesn't move to get there. */
  .seed-mark-ring-fill, .seed-mark-stem, .seed-mark-leaves, .seed-water-drop {
    transition-duration: 150ms !important;
  }
  /* The confetti burst is pure motion with no state change behind it, so
     it's off entirely. */
  .seed-confetti { display: none !important; }
}

/* ── Auth (header + modal) ─────────────────────────────────────────── */
.auth { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.auth-user { display: flex; align-items: center; gap: 10px; }
.auth-name { font: 600 14px/1 var(--font-body); color: var(--text-2); }
.auth .btn { padding: 7px 13px; font-size: 13px; }

/* A modal taller than the screen (the onboarding quick check is 8 questions)
   used to be centred in both directions with no overflow, so its top and
   bottom were unreachable. Now the backdrop itself scrolls, and the card's
   auto margins centre it when it fits and pin it to the top when it doesn't.
   The page behind is locked while a modal is open (html.modal-open, set by
   app.js). */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 50;
  display: flex;
  background: rgba(11, 31, 58, .52); backdrop-filter: blur(3px);
  padding: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
html.modal-open, html.modal-open body { overflow: hidden; }
.modal {
  position: relative;
  margin: auto;
  flex: none;
  width: 100%; max-width: 400px;
  padding: 28px 26px 24px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 20px;
  box-shadow: var(--shadow-lg);
  animation: fade-up .35s var(--ease) both;
}
.modal.is-nudged { animation: nudge .38s ease-in-out; }
@keyframes nudge { 0%, 100% { transform: none; } 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
.modal-close {
  position: absolute; top: 8px; right: 8px;
  display: grid; place-items: center; width: 44px; height: 44px;
  background: none; border: 0; border-radius: 12px; color: var(--muted);
  font-size: 24px; line-height: 1; cursor: pointer;
}
.modal-title { margin: 0 0 4px; font: 700 24px/1.2 var(--font-display); letter-spacing: -.01em; color: var(--text); }
.modal-sub { margin: 0 0 18px; font-size: 13px; color: var(--muted); }
.auth-form, .wl-save-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form label, .wl-save-form label { display: flex; flex-direction: column; gap: 6px; font: 600 14px/1.2 var(--font-body); color: var(--text-2); }
.auth-form input, .wl-save-form input {
  min-height: 48px; padding: 10px 13px; font: 500 16px/1.2 var(--font-body);
  color: var(--text); background: var(--panel); border: 1.5px solid var(--border); border-radius: 12px;
}
.auth-form input:focus, .wl-save-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.auth-form .btn, .wl-save-form .btn { margin-top: 4px; }
.auth-error, .wl-error { margin: 0; padding: 8px 10px; font-size: 13px; background: var(--error-bg); color: var(--error); border-radius: 6px; }

/* ── Watchlist manager ─────────────────────────────────────────────── */
#watchlist-modal .modal { max-width: 460px; }
.wl-list { list-style: none; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.wl-empty { font-size: 13px; color: var(--muted); }
.wl-row { display: flex; align-items: center; gap: 8px; }
.wl-row-name {
  flex: 1; min-width: 0;
  padding: 8px 10px; font: 500 13.5px/1.2 var(--font-body);
  color: var(--text); background: var(--panel-raised); border: 1px solid var(--border); border-radius: 5px;
}
.wl-row-count {
  flex: none; min-width: 34px; text-align: right;
  font: 400 12px/1 var(--font-mono); color: var(--muted);
}
.wl-row-del { flex: none; padding: 7px 12px; font-size: 12.5px; }
.wl-row-del[data-armed="1"] { color: var(--error); border-color: var(--error); }
.auth-switch { margin: 16px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.linklike { background: none; border: 0; color: var(--accent-strong); cursor: pointer; font: inherit; text-decoration: underline; padding: 0; }

/* ── Portfolio ─────────────────────────────────────────────────────── */
.panel-portfolio { max-width: 1040px; margin: 0 auto; padding: 28px 24px 64px; }
.pf-gate { max-width: 460px; margin: 60px auto; text-align: center; }
.pf-gate p { color: var(--text-2); margin: 12px 0 22px; }
.pf-title { margin: 0; font: 400 32px/1.15 var(--font-display); letter-spacing: -.01em; }
.pf-loading { color: var(--muted); padding: 40px 0; }

.pf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.pf-balance { text-align: right; display: flex; flex-direction: column; }
.pf-balance-label { font: 500 10.5px/1 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.pf-balance-num { font: 500 40px/1.05 var(--font-mono); letter-spacing: -.01em; margin: 4px 0 3px; }
.pf-balance.up .pf-balance-num { color: var(--take); }
.pf-balance.down .pf-balance-num { color: var(--error); }
.pf-balance-sub { font: 400 12px/1.4 var(--font-mono); color: var(--muted); }

.pf-actions { margin-bottom: 20px; }

.pf-perf { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; margin-bottom: 26px; box-shadow: var(--shadow-sm); }
.pf-win-switch { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.pf-win-btn {
  padding: 6px 13px; font: 500 12px/1 var(--font-mono); letter-spacing: .04em;
  color: var(--muted); background: transparent; border: 1px solid var(--border-soft); border-radius: 5px; cursor: pointer;
}
.pf-win-btn.active { color: var(--bg); background: var(--accent-strong); border-color: var(--accent-strong); }
.pf-summary { font: 400 13px/1.5 var(--font-mono); color: var(--text-2); margin-bottom: 8px; }
.pf-summary strong { color: var(--text); }

.perf-chart { width: 100%; height: auto; display: block; }
.perf-zero { stroke: var(--border); stroke-width: 1; }
.perf-x { fill: var(--muted); font: 400 10px var(--font-mono); }
.perf-line { stroke-width: 2.5; stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: draw 1.1s var(--ease) .1s forwards; }
.perf-chart.up .perf-line { stroke: var(--take); }
.perf-chart.down .perf-line { stroke: var(--error); }
.perf-chart.up .perf-area { fill: var(--take); opacity: .12; }
.perf-chart.down .perf-area { fill: var(--error); opacity: .12; }

.pf-section { margin-bottom: 28px; }
.pf-h { font: 400 20px/1.2 var(--font-display); color: var(--text); margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.pf-count { font: 500 12px/1 var(--font-mono); color: var(--muted); background: var(--panel-raised); padding: 3px 8px; border-radius: 10px; }
.pf-empty { color: var(--muted); font-size: 14px; }

.pf-open { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; margin-bottom: 12px; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.pf-open.awaiting { border-color: var(--qualified); }
.pf-open-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pf-open-head h4 { margin: 0; font: 400 18px/1.2 var(--font-display); color: var(--text); }
.pf-struct { font: 400 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pf-tag { font: 500 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--accent-strong); border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; }
.pf-exp { margin-left: auto; font: 400 12px/1 var(--font-mono); color: var(--muted); }

.pf-profit { background: var(--panel-raised); border-radius: 8px; padding: 11px 13px; margin-bottom: 12px; }
.pf-profit-head { margin: 0 0 6px; font-weight: 600; color: var(--text); font-size: 14px; }
.pf-profit-how { margin: 0; font-size: 13.5px; color: var(--text-2); }
.pf-profit-stop { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.pf-profit strong { color: var(--text-2); }

.pf-next { margin: 0 0 10px; font-size: 13.5px; color: var(--text-2); }
.pf-next-when { font: 500 12px/1 var(--font-mono); color: var(--accent-strong); text-transform: uppercase; letter-spacing: .04em; }
.pf-next-done { color: var(--qualified); }

.pf-schedule { margin-bottom: 12px; }
.pf-schedule summary { cursor: pointer; font: 500 11px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pf-steps { list-style: none; margin: 8px 0 0; padding: 0; }
.pf-step { display: grid; grid-template-columns: 92px 60px 110px 1fr; gap: 8px; padding: 6px 0; border-top: 1px solid var(--border-soft); font-size: 12.5px; align-items: baseline; }
.pf-step .pf-date { font: 500 12px var(--font-mono); color: var(--text-2); }
.pf-step .pf-dte { font: 400 11px var(--font-mono); color: var(--muted); }
.pf-step .pf-label { font-weight: 600; color: var(--text); }
.pf-step .pf-action { color: var(--muted); }
.pf-step.pf-due .pf-label { color: var(--qualified); }
.pf-step.pf-due .pf-date { color: var(--qualified); }
.pf-step.pf-past { opacity: .5; }
.pf-step.pf-past .pf-label { text-decoration: line-through; }

.pf-close { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.pf-close-title { flex: 1 1 100%; font-size: 13px; color: var(--text-2); font-weight: 600; }
.pf-close label { display: flex; flex-direction: column; gap: 4px; font: 500 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pf-close input { padding: 7px 9px; font: 500 13px var(--font-mono); color: var(--text); background: var(--panel-raised); border: 1px solid var(--border); border-radius: 4px; }
.pf-close .btn { padding: 8px 14px; font-size: 13px; }
.pf-close-hint { font-size: 12px; color: var(--muted); align-self: center; }

.pf-closed { width: 100%; border-collapse: collapse; }
.pf-closed th { text-align: left; font: 500 10.5px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); }
.pf-closed td { padding: 9px 10px; font-size: 13.5px; color: var(--text-2); border-bottom: 1px solid var(--border-soft); }
.pf-closed .pf-num { text-align: right; font: 500 13.5px var(--font-mono); }
.pf-closed tr.win .pf-num { color: var(--take); }
.pf-closed tr.loss .pf-num { color: var(--error); }

@media (max-width: 620px) {
  .site-header { flex-wrap: wrap; }
  .auth { margin-left: 0; }
  .panel-portfolio { padding-left: 16px; padding-right: 16px; }
  .pf-head { flex-direction: column; align-items: flex-start; }
  .pf-balance { text-align: left; }
  .pf-step { grid-template-columns: 1fr 1fr; }
  .pf-step .pf-action { grid-column: 1 / -1; }
  .pf-hide-sm { display: none; }
}

/* ── Homepage: risk-assessment call-to-action ─────────────────────── */
.assess-cta {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: space-between;
  padding: 26px 28px; border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #fff; box-shadow: var(--shadow-md);
}
.assess-cta h3 { margin: 0 0 6px; font: 400 22px/1.2 var(--font-display); color: #fff; }
.assess-cta p { margin: 0; font-size: 14px; color: #E6F0FF; max-width: 52ch; }
.assess-cta .btn { background: #fff; color: var(--accent-strong); border-color: #fff; white-space: nowrap; }

/* ── Risk assessment view ─────────────────────────────────────────── */
.panel-assessment { max-width: 760px; margin: 0 auto; padding: 40px 24px 72px; }
.assess-intro { text-align: center; padding: 24px 0; }
.assess-intro .eyebrow { justify-content: center; }
.assess-intro h1 { margin: 0 0 14px; font: 400 34px/1.15 var(--font-display); }
.assess-intro p { color: var(--text-2); max-width: 56ch; margin: 0 auto 12px; }
.assess-intro .assess-meta { color: var(--muted); font: 500 12px/1.5 var(--font-mono); }
.assess-intro .btn { margin-top: 20px; }

.assess-progress-wrap { margin-bottom: 26px; }
.assess-progress-head { display: flex; justify-content: space-between; font: 500 12px/1 var(--font-mono); color: var(--muted); margin-bottom: 8px; letter-spacing: .04em; }
.assess-progress { height: 6px; border-radius: 3px; background: var(--bg-tint); overflow: hidden; }
.assess-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); border-radius: 3px; transition: width .4s var(--ease); }

.assess-domain { margin: 0 0 4px; font: 400 26px/1.2 var(--font-display); color: var(--text); }
.assess-domain-sub { margin: 0 0 24px; color: var(--muted); font-size: 14px; }
.assess-q { margin-bottom: 22px; animation: fade-up .4s var(--ease) both; }
.assess-q-prompt { font-size: 15.5px; font-weight: 600; color: var(--text); margin: 0 0 10px; }
.assess-options { display: grid; gap: 8px; }
.assess-opt {
  display: flex; align-items: center; gap: 11px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel); cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.assess-opt input { accent-color: var(--accent); width: 17px; height: 17px; }
.assess-opt.checked { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.assess-opt span { font-size: 14px; color: var(--text); }

.assess-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 28px; }
.assess-error { color: var(--error); font-size: 13px; margin: 10px 0 0; }

/* Result */
.assess-result { text-align: center; animation: fade-up .5s var(--ease) both; }
.grade-badge {
  display: inline-grid; place-items: center; width: 96px; height: 96px; margin: 0 auto 8px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: #fff;
  font: 600 40px/1 var(--font-mono); box-shadow: var(--shadow-md);
}
.grade-name { font: 400 28px/1.2 var(--font-display); margin: 6px 0 4px; }
.grade-blurb { color: var(--text-2); max-width: 52ch; margin: 0 auto 8px; }
.grade-limit { color: var(--muted); font-size: 13.5px; margin: 0 auto 24px; max-width: 52ch; }
.grade-limit strong { color: var(--accent-strong); }
.pillars { display: grid; gap: 12px; max-width: 460px; margin: 0 auto 26px; text-align: left; }
.pillar-row { display: grid; grid-template-columns: 96px 1fr 44px; gap: 12px; align-items: center; }
.pillar-name { font: 500 12px/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.pillar-bar { height: 8px; border-radius: 4px; background: var(--bg-tint); overflow: hidden; }
.pillar-fill { height: 100%; border-radius: 4px; background: var(--accent); transition: width .6s var(--ease); }
.pillar-fill.limiting { background: var(--qualified); }
.pillar-val { font: 500 13px var(--font-mono); color: var(--text-2); text-align: right; }
.assess-caps { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin: 0 0 24px; }
.assess-cap { text-align: center; }
.assess-cap b { display: block; font: 500 20px/1 var(--font-mono); color: var(--text); }
.assess-cap span { font: 400 11px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.assess-result-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.assess-disclaimer { margin: 22px auto 0; max-width: 60ch; font-size: 11.5px; color: var(--muted); }

/* ── Account settings (portfolio) ─────────────────────────────────── */
.pf-account { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; margin-bottom: 26px; box-shadow: var(--shadow-sm); }
.pf-account-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pf-account h3 { margin: 0; font: 400 18px/1.2 var(--font-display); }
.pf-account-size { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.pf-account-size label { display: flex; flex-direction: column; gap: 5px; font: 500 10.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pf-account-size input { width: 140px; padding: 9px 11px; font: 500 15px var(--font-mono); color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 6px; }
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.profile-card {
  border: 1px solid var(--border); border-radius: 9px; padding: 12px 13px; cursor: pointer; background: var(--panel);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.profile-card.selected { border-color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.profile-card .pc-grade { font: 500 10px/1 var(--font-mono); letter-spacing: .1em; color: var(--accent-strong); }
.profile-card .pc-name { font: 400 16px/1.2 var(--font-display); color: var(--text); margin: 4px 0 6px; }
.profile-card .pc-caps { font: 400 11.5px/1.5 var(--font-mono); color: var(--muted); }
.pf-account-actions { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.pf-account-note { font-size: 12.5px; color: var(--muted); }

/* Profile banner on the analyzer desks */
.desk-profile { margin: -14px 0 18px; font: 500 12.5px/1.5 var(--font-mono); color: var(--accent-strong); background: var(--accent-soft); border-radius: 6px; padding: 8px 12px; display: inline-block; }

/* ── Home: the two doors ──────────────────────────────────────────── */
.chooser { max-width: 900px; margin: 0 auto; padding: 72px 0 40px; text-align: center; }
.chooser h1 { margin: 10px 0 0; font: 400 clamp(36px, 6vw, 60px)/1.05 var(--font-display); letter-spacing: -.02em; }
.chooser .lede { margin: 18px auto 0; max-width: 62ch; font-size: 16.5px; line-height: 1.65; color: var(--text-2); }
.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin: 44px 0 0; text-align: left; }
.door {
  display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 24px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  text-decoration: none; color: inherit; box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.door:focus-visible { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-md); }
.door h2 { margin: 0; font: 400 27px/1.15 var(--font-display); letter-spacing: -.01em; }
.door-body { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--text-2); }
.door-go { margin-top: 6px; font: 500 13px/1 var(--font-body); color: var(--accent-strong); display: inline-flex; align-items: center; gap: 7px; }
.door-arrow { transition: transform .22s var(--ease); }
.chooser-foot { margin: 34px auto 0; max-width: 60ch; font-size: 12.5px; line-height: 1.6; color: var(--muted); }

/* ── Planned asset classes ────────────────────────────────────────────
   A door with nothing behind it must not look like one that works. These read
   as quieter than a live door and carry an explicit tag, so the difference is
   visible before the click rather than discovered after it. */
.door-tag {
  display: inline-block; margin-left: 8px; padding: 2px 7px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--panel-raised); color: var(--muted);
  font: 500 10px/1.5 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
  vertical-align: middle;
}
.door-planned { background: var(--panel-raised); border-style: dashed; box-shadow: none; }
.door-planned .door-go { color: var(--muted); }
/* Still reachable and still responsive to hover — it is a real page, just an
   empty one — but it never borrows the accent a working door uses. */
.door-planned:focus-visible { border-color: var(--muted); box-shadow: var(--shadow-sm); }

.hub-planned { max-width: 900px; }
.planned-list {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 26px;
  margin: 0; padding: 0; list-style: none;
}
.planned-list li { border-top: 2px solid var(--border); padding-top: 14px; }
.planned-list h4 { margin: 0 0 6px; font: 500 14px/1.3 var(--font-body); color: var(--text); }
.planned-list p { margin: 0; font-size: 13.5px; line-height: 1.62; color: var(--text-2); }
.planned-foot {
  margin: 30px 0 0; padding-top: 18px; border-top: 1px solid var(--border-soft);
  max-width: 74ch; font-size: 12.5px; line-height: 1.65; color: var(--muted);
}
.planned-foot code, .planned-list code {
  font: 500 12px var(--font-mono); background: var(--bg-tint);
  padding: 1px 5px; border-radius: 4px;
}
@media (max-width: 760px) { .planned-list { grid-template-columns: 1fr; } }

/* ── Equities hub ─────────────────────────────────────────────────── */
.hub-head { max-width: 760px; padding: 64px 0 8px; }
.hub-head h1 { margin: 10px 0 0; font: 400 clamp(30px, 5vw, 46px)/1.08 var(--font-display); letter-spacing: -.02em; }
.hub-head .lede { margin: 16px 0 0; font-size: 16px; line-height: 1.65; color: var(--text-2); }
.tool-grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.tool-quiet { background: var(--panel-raised); }

/* ── Portfolio Balancer ───────────────────────────────────────────── */
.panel-wide { max-width: var(--col-wide); margin: 0 auto; padding: 28px 24px 56px; }

.bal-intro { max-width: 68ch; padding: 40px 0 10px; }
.bal-intro h1 { margin: 10px 0 0; font: 400 clamp(28px, 4.5vw, 42px)/1.1 var(--font-display); letter-spacing: -.02em; }
.bal-intro .lede { margin: 16px 0 0; font-size: 16px; line-height: 1.65; color: var(--text-2); }

.bal-form { margin: 26px 0 0; max-width: 720px; }
.bal-label { display: block; font: 500 10.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.bal-textarea {
  width: 100%; padding: 14px 15px; font: 400 14.5px/1.7 var(--font-mono);
  color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 9px; resize: vertical;
}
.bal-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.bal-hint { margin: 10px 0 0; font-size: 12.5px; line-height: 1.65; color: var(--muted); }
.bal-hint code { font: 500 12px var(--font-mono); background: var(--bg-tint); padding: 1px 5px; border-radius: 4px; color: var(--text-2); }
.bal-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.bal-loading { margin: 14px 0 0; font-size: 13px; color: var(--muted); max-width: 60ch; line-height: 1.6; }
.bal-error { margin: 14px 0 0; padding: 11px 14px; font-size: 13.5px; color: var(--error); background: var(--error-bg); border: 1px solid var(--error-line); border-radius: 7px; }

.bal-pending { margin: 18px 0 0; padding: 16px 18px; background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: 9px; }
.bal-pending-h { margin: 0 0 12px; font: 500 12.5px/1 var(--font-body); color: var(--warn-text); }
.bal-match { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; flex-wrap: wrap; }
.bal-match-q { font: 500 13.5px var(--font-mono); color: var(--text); min-width: 130px; }
.bal-match-pick { flex: 1; min-width: 240px; padding: 7px 9px; font: 400 13px var(--font-body); border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); }
.bal-match-none { font-size: 12.5px; color: var(--warn-text); }

/* Report shell */
.bal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 32px 0 6px; flex-wrap: wrap; }
.bal-head h1 { margin: 8px 0 0; font: 400 clamp(26px, 4vw, 36px)/1.12 var(--font-display); letter-spacing: -.02em; }
.bal-sub { margin: 10px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); max-width: 74ch; }
.bal-excluded { display: flex; flex-direction: column; gap: 4px; margin: 18px 0 0; font-size: 13px; }
.bal-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.65; color: var(--muted); max-width: 78ch; }

.bal-section { margin: 46px 0 0; padding-top: 30px; border-top: 1px solid var(--border-soft); }
.bal-section:first-of-type { border-top: none; }
.bal-h { margin: 0; font: 400 25px/1.2 var(--font-display); letter-spacing: -.01em; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bal-h3 { margin: 34px 0 0; font: 400 19px/1.2 var(--font-display); }
.bal-layer {
  font: 500 9.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent); padding: 5px 8px; border-radius: 4px;
}
.bal-lede { margin: 12px 0 0; max-width: 78ch; font-size: 14.5px; line-height: 1.7; color: var(--text-2); }
.bal-lede code, .viz-note code { font: 500 12.5px var(--font-mono); background: var(--bg-tint); padding: 1px 5px; border-radius: 4px; }

/* Stat tiles */
.bal-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; margin: 20px 0 0; }
.bal-stats-4 { grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); }
.bal-stat { padding: 14px 15px; background: var(--panel); border: 1px solid var(--border); border-radius: 9px; box-shadow: var(--shadow-sm); }
.bal-stat dt { font: 500 9.5px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.bal-stat dd { margin: 7px 0 0; font: 400 25px/1 var(--font-body); color: var(--text); font-variant-numeric: tabular-nums; }
.bal-stat p { margin: 6px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.bal-stat.good dd { color: var(--take); }
.bal-stat.bad dd { color: var(--error); }

/* Tables */
.bal-tablewrap { overflow-x: auto; margin: 18px 0 0; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); }
.bal-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bal-table th, .bal-table td { padding: 9px 13px; text-align: left; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.bal-table thead th { font: 500 10px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--panel-raised); }
.bal-table tbody tr:last-child th, .bal-table tbody tr:last-child td { border-bottom: none; }
.bal-table tbody th { font: 500 13px var(--font-mono); color: var(--text); }
.bal-table .r { text-align: right; font-variant-numeric: tabular-nums; }
.bal-table tbody tr.is-fail { background: var(--error-bg); }
.bal-flag { margin-left: 7px; font: 500 9px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--warn-text); background: var(--warn-bg); padding: 2px 5px; border-radius: 3px; }
.bal-mark { font-size: 14px; font-weight: 700; }
.bal-mark.pass { color: var(--take); }
.bal-mark.fail { color: var(--error); }
.bal-mark.none { color: var(--muted); }
.bal-side { font: 500 10.5px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; }
.bal-side.buy { color: var(--take); background: var(--take-bg); }
.bal-side.sell { color: var(--error); background: var(--error-bg); }

/* Construction presets + sliders */
.bal-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin: 20px 0 0; }
.bal-preset {
  text-align: left; padding: 11px 13px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer; font-family: inherit;
  transition: border-color .15s, transform .15s var(--ease), box-shadow .15s;
}
.bal-preset strong { display: block; font: 500 13.5px/1.2 var(--font-body); color: var(--text); }
.bal-preset span { display: block; margin-top: 5px; font-size: 11.5px; line-height: 1.45; color: var(--muted); }

.bal-sliders { margin: 22px 0 0; padding: 14px 16px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }
.bal-slider { display: grid; grid-template-columns: 30px 62px 1fr 58px 62px; align-items: center; gap: 10px; padding: 5px 0; }
.bal-slider.is-locked { opacity: .62; }
.bal-slider label { font: 500 13px var(--font-mono); color: var(--text); }
.bal-lock { border: none; background: none; cursor: pointer; font-size: 14px; padding: 3px; border-radius: 5px; line-height: 1; }
.bal-range { width: 100%; accent-color: var(--accent); cursor: pointer; }
.bal-range:disabled { cursor: not-allowed; }
.bal-out { font: 500 13px var(--font-mono); color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.bal-delta { font: 500 12px var(--font-mono); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.bal-delta.up { color: var(--take); }
.bal-delta.down { color: var(--error); }
.bal-sliderfoot { display: flex; align-items: center; gap: 14px; margin: 12px 0 0; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.bal-turnover { margin-left: auto; font: 500 12.5px var(--font-mono); color: var(--text-2); }

/* Policy controls */
.bal-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 22px 0 0; }
.bal-field { margin: 0; padding: 13px 15px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 9px; }
.bal-field-wide { grid-column: 1 / -1; }
.bal-field legend { padding: 0 5px; font: 500 9.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.bal-field p { margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.bal-field input[type="range"] { width: 100%; accent-color: var(--accent); margin-top: 4px; }
.bal-field output { display: inline-block; margin-top: 3px; font: 500 13px var(--font-mono); color: var(--text); }
.bal-field select { width: 100%; margin-top: 4px; padding: 7px 9px; font: 400 13px var(--font-body); border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); }
.bal-radios { display: grid; grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); gap: 8px; margin-top: 6px; }
.bal-radio { display: block; padding: 10px 12px; border: 1px solid var(--border); border-radius: 7px; cursor: pointer; transition: border-color .15s, background .15s; }
.bal-radio.is-on { border-color: var(--accent); background: var(--accent-soft); }
.bal-radio input { margin-right: 7px; accent-color: var(--accent); }
.bal-radio strong { font: 500 13px var(--font-body); color: var(--text); }
.bal-radio span { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.45; color: var(--muted); }

.bal-driftpick { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.bal-driftsel { padding: 6px 9px; font: 500 13px var(--font-mono); border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); }
.bal-driftnote { color: var(--text-2); }

/* Figures */
.bal-fig { margin: 26px 0 0; padding: 16px 18px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-sm); }
.bal-fig figcaption { font: 500 11px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.bal-figbar { display: flex; gap: 16px; align-items: center; margin: -4px 0 10px; flex-wrap: wrap; font-size: 12.5px; }
.bal-toggle { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); cursor: pointer; }
.bal-toggle input { accent-color: var(--accent); }
.chart-empty { font-size: 13px; color: var(--muted); }

.viz { display: block; width: 100%; height: auto; overflow: visible; }
.viz-grid { stroke: #E6ECF4; stroke-width: 1; }
.viz-zero { stroke: #C3CFDF; stroke-width: 1; }
.viz-line { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz-dashed { stroke-dasharray: 5 4; }
.viz-tick { font: 400 10px var(--font-mono); fill: #5B6B82; }
.viz-endlabel { font: 500 10.5px var(--font-mono); }
.viz-rowlabel { font: 500 11.5px var(--font-mono); fill: #0B1F3A; }
.viz-collabel, .viz-cell { font: 400 9.5px var(--font-mono); fill: #5B6B82; }
.viz-rowval { font: 400 11px var(--font-mono); fill: #5B6B82; }
.viz-rowval.is-out { fill: #B23A2E; font-weight: 500; }
.viz-band { fill: #EAF0F8; stroke: #D8E1EE; stroke-width: 1; }
.viz-bar { stroke: #FFFFFF; stroke-width: 2; paint-order: stroke; }
.viz-paneltitle { font: 500 10px var(--font-mono); fill: #334766; letter-spacing: .04em; }
.viz-marker { stroke: #5B6B82; stroke-width: 1; stroke-dasharray: 3 3; }
.viz-target { stroke: #0B1F3A; stroke-width: 1.5; stroke-dasharray: 4 3; }
.viz-targetlabel { font: 500 9.5px var(--font-mono); fill: #1549A8; }
.viz-scatterlabel { font: 400 10.5px var(--font-mono); fill: #334766; }
.viz-axistitle { font: 400 10px var(--font-mono); fill: #5B6B82; }
.viz-crosshair { stroke: #8C9AB0; stroke-width: 1; stroke-dasharray: 3 3; }
.viz-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 12px 0 0; font-size: 12px; color: var(--text-2); }
.viz-key { width: 11px; height: 11px; border-radius: 3px; background: var(--k, var(--muted)); display: inline-block; margin-right: -10px; }
.viz-key-band { background: #EAF0F8; border: 1px solid var(--border); }
.viz-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.65; color: var(--muted); max-width: 82ch; }

.viz-tip {
  position: absolute; z-index: 60; pointer-events: none; padding: 9px 11px; min-width: 150px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 7px; box-shadow: var(--shadow-md);
  font: 400 12px/1.5 var(--font-body); color: var(--text-2);
}
.viz-tip strong { display: block; margin-bottom: 5px; font: 500 11px var(--font-mono); color: var(--text); }
.viz-tip span { display: flex; align-items: center; gap: 7px; }
.viz-tip i { width: 9px; height: 9px; border-radius: 2px; background: var(--k); flex: none; }
.viz-tip b { margin-left: auto; font: 500 12px var(--font-mono); color: var(--text); font-variant-numeric: tabular-nums; }

/* Method */
.bal-method .bal-details > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; }
.bal-method .bal-details > summary::-webkit-details-marker { display: none; }
.bal-method .bal-details > summary::after { content: '▾'; font-size: 13px; color: var(--muted); transition: transform .18s var(--ease); }
.bal-method .bal-details[open] > summary::after { transform: rotate(180deg); }
.bal-layers { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin: 22px 0 0; }
.bal-layers article { padding: 16px 18px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }
.bal-layers h3 { margin: 0 0 10px; font: 400 17px/1.25 var(--font-display); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bal-layers p { margin: 0 0 10px; font-size: 13px; line-height: 1.68; color: var(--text-2); }
.bal-layers p:last-child { margin-bottom: 0; }
.bal-layers code { font: 500 12px var(--font-mono); background: var(--bg-tint); padding: 1px 5px; border-radius: 4px; }
.bal-honest { margin: 20px 0 0; padding: 18px 20px; background: var(--panel-raised); border: 1px solid var(--border); border-radius: 10px; }
.bal-honest h3 { margin: 0 0 12px; font: 400 18px/1.2 var(--font-display); }
.bal-honest ul { margin: 0; padding-left: 20px; }
.bal-honest li { margin-bottom: 9px; font-size: 13px; line-height: 1.68; color: var(--text-2); }
.bal-honest li:last-child { margin-bottom: 0; }
.bal-disclaimer { margin: 40px 0 0; padding-top: 20px; border-top: 1px solid var(--border-soft); font-size: 11.5px; line-height: 1.7; color: var(--muted); max-width: 84ch; }

@media (max-width: 720px) {
  .chooser { padding-top: 48px; }
  .bal-slider { grid-template-columns: 28px 52px 1fr 54px; }
  .bal-slider .bal-delta { display: none; }
  .bal-turnover { margin-left: 0; }
  .bal-fig { padding: 14px 12px 12px; }
  .panel-wide { padding-left: 16px; padding-right: 16px; }
}

/* ── Exit alerts opt-in (portfolio) ──────────────────────────────────── */
.pf-alerts { margin: 18px 0 0; }
.pf-alerts-card {
  padding: 16px 18px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.pf-alerts-card strong { color: var(--text); }
.pf-alerts-card em { font-style: normal; font-weight: 600; color: var(--accent-strong); }
.pf-alerts-card .btn { margin-left: auto; flex-shrink: 0; }
/* Already on: settled, not a call to action. */
.pf-alerts-card.on { background: var(--take-bg); border-color: var(--take); }

/* ── iOS safe areas ───────────────────────────────────────────────────
   index.html sets viewport-fit=cover, which lets the page paint into the
   rounded corners and under the Dynamic Island and home indicator. That is
   only correct if the chrome then insets itself. Without this block the
   installed app draws the brand lockup under the status bar and the footer
   under the home indicator.

   The insets are 0 on every non-notched device and on desktop, so these rules
   are inert there; the @supports guard keeps older browsers off env() maths. */
@supports (padding: env(safe-area-inset-top)) {
  .site-header {
    padding-top: calc(12px + env(safe-area-inset-top));
    padding-left: calc(24px + env(safe-area-inset-left));
    padding-right: calc(24px + env(safe-area-inset-right));
  }
  .site-footer {
    padding-bottom: calc(44px + env(safe-area-inset-bottom));
    padding-left: calc(24px + env(safe-area-inset-left));
    padding-right: calc(24px + env(safe-area-inset-right));
  }
  /* Fixed to the viewport, so it owns its own insets on all four sides. */
  .modal-backdrop {
    padding: calc(20px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right))
             calc(20px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
  }
  /* The narrow breakpoints drop the side padding to 16px; keep them in step so
     content still clears the rounded corners in landscape. */
  @media (max-width: 620px) {
    .panel-home, .panel-tool, .site-footer {
      padding-left: calc(16px + env(safe-area-inset-left));
      padding-right: calc(16px + env(safe-area-inset-right));
    }
    /* The compact header is `padding: 10px 16px` — a shorthand, so re-state the
       top inset against 10px or it keeps the 12px from the desktop rule above. */
    .site-header {
      padding-top: calc(10px + env(safe-area-inset-top));
      padding-left: calc(16px + env(safe-area-inset-left));
      padding-right: calc(16px + env(safe-area-inset-right));
    }
  }
}


/* ═════════════════════════════════════════════════════════════════════
   Loren — personal finance (Home, Budget, Goals, Accounts, onboarding)
   One obvious action per screen, plain words, big touch targets (44px+),
   depth behind "More options". Sky-tint cards hold the things you're saving
   toward; navy carries trust; the primary blue is only ever "do this".
   ═════════════════════════════════════════════════════════════════════ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.panel-finance { max-width: var(--col-wide); margin: 0 auto; padding: 0 24px; }
.fin-page { padding: 32px 0 48px; }
.page-head { margin: 4px 0 24px; }
.page-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.page-title { margin: 0; font: 800 clamp(28px, 4.4vw, 40px)/1.08 var(--font-display); letter-spacing: -.025em; color: var(--navy); text-wrap: balance; }
.page-sub { margin: 8px 0 0; max-width: 60ch; font-size: 16.5px; color: var(--text-2); }
.fine { margin: 0; font-size: 13.5px; color: var(--muted); }
.page-fine { margin-top: 32px; text-align: center; }
.row-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.empty-state { max-width: 520px; margin: 40px auto; text-align: center; }
.empty-state .row-actions { justify-content: center; margin-top: 22px; }
.empty-state .page-sub { margin-left: auto; margin-right: auto; }
.empty-ico { display: inline-grid; place-items: center; width: 72px; height: 72px; margin-bottom: 18px; color: var(--accent-strong); background: var(--accent-soft); border-radius: 22px; }
.empty-ico .ico { width: 36px; height: 36px; }

/* Visually hidden radios/checkboxes whose styled <span> is the control. */
.goal-pick, .seg label, .tile-check, .opt, .type-pick { position: relative; }
.goal-pick input, .seg input, .tile-check input, .opt input, .type-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.goal-pick input:focus-visible + span, .seg input:focus-visible + span, .tile-check input:focus-visible + span,
.opt input:focus-visible + span, .type-pick input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ── Fields ──────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field-label { font: 600 14.5px/1.3 var(--font-body); color: var(--text-2); padding: 0; }
.field-label em { font-style: normal; font-weight: 500; color: var(--muted); }
.field > input, .field > select, .field > textarea, .pg-custom input {
  width: 100%; min-height: 48px; padding: 10px 13px;
  font: 500 16px/1.2 var(--font-body); color: var(--text);
  background: var(--panel); border: 1.5px solid var(--border); border-radius: 12px;
}
.field > textarea { font-family: var(--font-body); resize: vertical; }
.field > input:focus, .field > select:focus, .field > textarea:focus, .pg-custom input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.stack-form { display: grid; gap: 16px; }
.stack-form > .btn { justify-self: start; }
.inline-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 10px 0 12px; }
.inline-form .field { flex: 1 1 200px; }
.form-error { margin: 0; padding: 10px 12px; font-size: 14.5px; color: var(--error); background: var(--error-bg); border-radius: 10px; }

.money-input {
  display: flex; align-items: stretch; min-height: 48px; width: 100%;
  background: var(--panel); border: 1.5px solid var(--border); border-radius: 12px; overflow: hidden;
}
.money-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.money-input > span, .money-input > select {
  display: flex; align-items: center; flex: none; padding: 0 12px;
  font: 700 14.5px/1 var(--font-body); color: var(--text-2);
  background: var(--panel-raised); border: 0; border-right: 1px solid var(--border-soft);
}
.money-input > select { cursor: pointer; padding-right: 6px; max-width: 52%; }
.money-input > select:focus { outline: none; }
.money-input input { flex: 1; min-width: 0; padding: 10px 12px; font: 600 18px/1.2 var(--font-body); color: var(--text); background: transparent; border: 0; font-variant-numeric: tabular-nums; }
.money-input input:focus { outline: none; }
.money-input-lg { min-height: 58px; }
.money-input-lg input { font: 800 26px/1 var(--font-display); letter-spacing: -.01em; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px;
  font: 600 14.5px/1.1 var(--font-body); color: var(--text-2);
  background: var(--panel); border: 1.5px solid var(--border); border-radius: 999px; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.chip .ico { width: 18px; height: 18px; }

.seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--bg-tint); border-radius: 14px; }
.seg span {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 8px 16px;
  font: 600 14.5px/1 var(--font-body); color: var(--text-2); border-radius: 10px; cursor: pointer; transition: background .15s, color .15s;
}
.seg span .ico { width: 18px; height: 18px; }
.seg input:checked + span { background: var(--panel); color: var(--accent-strong); box-shadow: var(--shadow-sm); }
.seg-2 { display: flex; width: 100%; }
.seg-2 label { flex: 1; }
.seg-2 span { width: 100%; }

.icon-btn { display: grid; place-items: center; width: 44px; height: 44px; flex: none; color: var(--muted); background: none; border: 0; border-radius: 12px; cursor: pointer; }

details.more > summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font: 600 14.5px/1 var(--font-body); color: var(--accent-strong); cursor: pointer; list-style: none;
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::after {
  content: ''; width: 7px; height: 7px; margin: -3px 0 0 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
  transition: transform .18s var(--ease);
}
details.more[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.more-card { margin-top: 18px; padding: 2px 18px; background: var(--panel); border: 1px solid var(--border); border-radius: 18px; }
.more-card[open] { padding-bottom: 18px; }
.more-card .sheet-card { margin: 4px 0 0; box-shadow: none; border: 0; padding: 0; }

/* ── Progress bar (savings milestones, budget use) ─────────────────── */
.pbar { position: relative; height: 14px; margin: 14px 0 10px; background: var(--bg-tint); border-radius: 999px; overflow: hidden; }
.pbar.on-soft { background: var(--panel); box-shadow: inset 0 0 0 1px #CFE0FA; }
.pbar-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--sky), var(--accent)); transition: width .6s var(--ease); }
.pbar i { position: absolute; top: 3px; bottom: 3px; width: 2px; margin-left: -1px; background: rgba(255, 255, 255, .85); border-radius: 1px; }
.pbar.on-soft i { background: #CFE0FA; }
.pbar.is-good .pbar-fill { background: var(--take-line); }
.pbar.is-close .pbar-fill { background: #D39A12; }
.pbar.is-over .pbar-fill { background: var(--error-line); }

.pill { flex: none; padding: 4px 10px; font: 700 12.5px/1.2 var(--font-body); border-radius: 999px; }
.pill.is-good { color: var(--take); background: var(--take-bg); }
.pill.is-close { color: var(--warn-text); background: var(--warn-bg); }
.pill.is-over { color: var(--error); background: var(--error-bg); }
.is-good { color: var(--take); }
.is-close { color: var(--warn-text); }
.is-over { color: var(--error); }

/* ── Landing (logged-out Home): the savings playground ─────────────── */
.landing { padding: 20px 0 48px; }
.land-hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 40px; align-items: start;
  padding: 52px 48px; color: #fff; border-radius: 30px;
  background:
    radial-gradient(520px 320px at 8% 108%, rgba(59, 163, 245, .30), transparent 70%),
    radial-gradient(420px 260px at 96% -8%, rgba(29, 95, 209, .55), transparent 70%),
    var(--navy);
}
.land-copy { padding-top: 12px; }
.land-copy h1 { margin: 0; font: 800 clamp(36px, 5.4vw, 60px)/1.0 var(--font-display); letter-spacing: -.035em; color: #fff; text-wrap: balance; }
.land-lede { margin: 20px 0 0; max-width: 40ch; font-size: 18.5px; line-height: 1.55; color: #C9D8EE; }
.land-points { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.land-points li { display: flex; align-items: center; gap: 10px; font: 600 16px/1.3 var(--font-body); color: #E6EEF9; }
.land-points .ico { width: 22px; height: 22px; padding: 3px; color: var(--navy); background: var(--sky); border-radius: 50%; stroke-width: 2.6; }
.hero-art { display: block; width: min(300px, 80%); margin: 40px 0 0; }
.hero-art .ha-ground { stroke: rgba(156, 203, 255, .35); stroke-width: 2; fill: none; }
.hero-art .ha-stack rect { fill: var(--accent); stroke: var(--navy); stroke-width: 2; }
.hero-art .ha-top rect { fill: var(--sky); }
.hero-art .ha-flag { fill: none; stroke: var(--sky-ink); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.hero-art .ha-arc { fill: none; stroke: var(--sky-ink); stroke-width: 2; stroke-dasharray: 3 7; stroke-linecap: round; opacity: .7; }
.hero-art .ha-stack { animation: fade-up .6s var(--ease) both; }
.hero-art .ha-stack:nth-child(3) { animation-delay: .1s; }
.hero-art .ha-stack:nth-child(4) { animation-delay: .2s; }
.hero-art .ha-stack:nth-child(5) { animation-delay: .3s; }

.playground {
  color: var(--text); background: var(--panel); border-radius: 24px; padding: 26px 24px 22px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45);
}
.pg-block { margin: 0 0 22px; padding: 0; border: 0; min-width: 0; }
.pg-q { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 0; font: 700 17px/1.25 var(--font-display); color: var(--navy); }
.pg-n { display: grid; place-items: center; width: 28px; height: 28px; flex: none; font: 800 14px/1 var(--font-body); color: var(--accent-strong); background: var(--accent-soft); border-radius: 50%; }
.goal-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.goal-pick span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 15px;
  font: 600 15px/1.1 var(--font-body); color: var(--text-2);
  background: var(--panel); border: 1.5px solid var(--border); border-radius: 999px; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.goal-pick input:checked + span { color: var(--accent-strong); background: var(--accent-soft); border-color: var(--accent); }
.goal-pick .ico { width: 20px; height: 20px; }
.pg-custom { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.pg-slider { display: grid; grid-template-columns: 1fr 170px; gap: 14px; align-items: center; margin-top: 14px; }
.pg-slider input[type=range] { width: 100%; height: 32px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.pg-result { margin: 0 0 18px; padding: 16px 18px 14px; background: var(--accent-soft); border-radius: 18px; }
.stairs { display: block; width: 100%; height: auto; }
.stairs .st-bar { fill: var(--sky); opacity: .5; }
.stairs .st-last { fill: var(--accent); opacity: 1; }
.stairs .st-goal { stroke: var(--navy); stroke-width: 1.5; stroke-dasharray: 4 4; }
.stairs .st-base { stroke: #B8C7DC; stroke-width: 1.5; }
.stairs .st-flag path { fill: none; stroke: var(--accent-strong); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.stairs .st-label { font: 600 11.5px var(--font-body); fill: var(--text-2); }
.pg-when { display: flex; flex-direction: column; gap: 4px; margin: 12px 0 0; font-size: 16px; color: var(--text-2); }
.pg-when strong { color: var(--navy); }
.pg-big { font: 800 32px/1.05 var(--font-display); letter-spacing: -.02em; color: var(--navy); }
.pg-nudge { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 12px 0 0; padding: 10px 12px; font-size: 15px; color: var(--text-2); background: var(--panel); border-radius: 12px; }
.pg-nudge > .ico { color: var(--accent); }
.pg-nudge > span { flex: 1 1 200px; }
.pg-nudge strong { color: var(--navy); }
.pg-foot { margin: 14px 0 0; font-size: 15px; color: var(--muted); text-align: center; }
.pg-foot .linklike { font-weight: 600; min-height: 44px; }

.section-title { margin: 0 0 18px; font: 800 clamp(24px, 3vw, 32px)/1.15 var(--font-display); letter-spacing: -.02em; color: var(--navy); text-wrap: balance; }
.land-how { margin: 64px 0 0; }
.how-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; }
.how-steps li { position: relative; padding: 24px 22px; background: var(--panel); border: 1px solid var(--border-soft); border-radius: 22px; box-shadow: var(--shadow-sm); }
.how-ico { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 16px; color: var(--accent-strong); background: var(--accent-soft); border-radius: 16px; }
.how-ico .ico { width: 28px; height: 28px; }
.how-steps h3 { margin: 0 0 6px; font: 700 19px/1.25 var(--font-display); color: var(--navy); }
.how-steps p { margin: 0; font-size: 15.5px; color: var(--text-2); }
.land-trust { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: center; margin: 40px 0 0; padding: 32px; background: var(--panel); border: 1px solid var(--border-soft); border-radius: 24px; }
.land-trust .section-title { margin-bottom: 8px; }
.land-trust p { margin: 0; max-width: 58ch; font-size: 16px; color: var(--text-2); }
.land-wealth { display: flex; align-items: center; gap: 14px; padding: 18px; color: var(--text-2); text-decoration: none; background: var(--panel-raised); border: 1.5px solid var(--border); border-radius: 18px; transition: border-color .15s, transform .15s var(--ease); }
.land-wealth > .ico { color: var(--accent); width: 28px; height: 28px; }
.land-wealth span { flex: 1; font-size: 14.5px; }
.land-wealth strong { display: block; font: 700 16px/1.3 var(--font-display); color: var(--navy); }
.land-wealth span[aria-hidden] { flex: none; font-size: 20px; color: var(--accent); }

/* ── Logged-in Home ─────────────────────────────────────────────────── */
.hero-goal { position: relative; padding: 28px; background: var(--accent-soft); border: 1px solid #CFE0FA; border-radius: 26px; }
.hg-header { display: flex; align-items: flex-start; gap: 16px; }
.hg-header-text { min-width: 0; flex: 1; }
.hg-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.hg-kicker { margin: 0; font: 700 14.5px/1.2 var(--font-body); color: var(--accent-strong); }
.hg-sheng { font-weight: 500; color: var(--text-2); }
.goal-switch select { min-height: 44px; padding: 6px 10px; font: 600 15px var(--font-body); color: var(--text); background: var(--panel); border: 1.5px solid var(--border); border-radius: 10px; }
.hg-name { margin: 6px 0 4px; font: 800 clamp(26px, 3.8vw, 38px)/1.1 var(--font-display); letter-spacing: -.025em; color: var(--navy); overflow-wrap: anywhere; }
.hg-amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 0; font-size: 17px; color: var(--text-2); }
.hg-amount strong { font: 800 30px/1.1 var(--font-display); letter-spacing: -.02em; color: var(--navy); font-variant-numeric: tabular-nums; }
.hg-pct { align-self: center; margin-left: 4px; padding: 3px 10px; font: 700 13.5px/1.3 var(--font-body); color: var(--accent-strong); background: var(--panel); border-radius: 999px; }
.hg-meta { margin: 0; font-size: 15.5px; color: var(--text-2); }
.hg-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.hg-save-box { max-width: 480px; margin-top: 16px; padding: 18px; background: var(--panel); border-radius: 18px; box-shadow: var(--shadow-sm); }
.hero-goal.is-done .pbar-fill { background: linear-gradient(90deg, var(--accent), var(--accent-strong)); }
.hero-goal-empty { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.hero-goal-empty h2 { margin: 0 0 4px; font: 800 26px/1.15 var(--font-display); color: var(--navy); }
.hero-goal-empty p { margin: 0; color: var(--text-2); font-size: 16px; }
.setup-dots { display: flex; gap: 6px; margin: 16px 0 0; }
.setup-dots span { width: 40px; height: 6px; background: var(--panel); border-radius: 999px; }
.setup-dots .is-done { background: var(--accent); }
.setup-dots .is-now { background: var(--sky); }

.save-form { display: grid; gap: 12px; }
.save-form .fine { text-align: center; }

.insights { display: grid; gap: 12px; margin: 20px 0 0; }
.insight { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; padding: 16px 14px 16px 18px; background: var(--panel); border: 1px solid var(--border); border-radius: 18px; }
.insight-ico { display: grid; place-items: center; width: 40px; height: 40px; color: var(--accent-strong); background: var(--accent-soft); border-radius: 50%; }
.insight h3 { margin: 0 0 3px; font: 700 16.5px/1.3 var(--font-display); color: var(--navy); }
.insight p { margin: 0; font-size: 15px; color: var(--text-2); }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin: 20px 0 0; }
.tile { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 22px; background: var(--panel); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-sm); }
.tile > .btn { align-self: flex-start; margin-top: auto; }
.tile-title { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 18.5px/1.2 var(--font-display); color: var(--navy); }
.tile-title .ico { color: var(--accent); }
.tile-figure { margin: 0; font-size: 15.5px; color: var(--text-2); }
.tile-figure strong { font: 800 26px/1.2 var(--font-display); letter-spacing: -.02em; color: var(--navy); font-variant-numeric: tabular-nums; }
.tile-note { margin: 0; font: 600 14.5px/1.3 var(--font-body); }
.tile-empty { margin: 0; font-size: 15.5px; color: var(--text-2); }
.tile-sub { margin: 14px 0 0; font: 700 15.5px/1.2 var(--font-display); color: var(--navy); }
.tile .pbar { margin: 4px 0 0; }
.tile .viz { margin-top: 6px; }

.callout { display: grid; grid-template-columns: auto 1fr auto; gap: 14px 16px; align-items: center; margin: 20px 0 0; padding: 18px 20px; background: var(--panel); border: 1.5px dashed #BFD3F2; border-radius: 20px; }
.callout-ico { display: grid; place-items: center; width: 48px; height: 48px; color: var(--accent-strong); background: var(--accent-soft); border-radius: 14px; }
.callout h3 { margin: 0 0 3px; font: 700 17px/1.3 var(--font-display); color: var(--navy); }
.callout p { margin: 0; font-size: 15px; color: var(--text-2); }
.callout + .hero-goal { margin-top: 20px; }

.wealth-door { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; margin: 28px 0 0; padding: 18px 22px; font-size: 15px; color: #C9D8EE; text-decoration: none; background: var(--navy); border-radius: 20px; transition: transform .18s var(--ease), box-shadow .18s; }
.wealth-door strong { color: #fff; }
.wealth-door-ico { color: var(--sky-ink); }
.wealth-door-go { font-size: 20px; color: var(--sky-ink); }

/* ── Admin (operator metrics, #admin) ───────────────────────────────── */
.admin-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.admin-stat { min-width: 0; padding: 18px 20px; background: var(--panel); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-sm); }
.admin-stat:first-child { background: var(--accent-soft); border-color: #C7DBFA; }
.admin-stat-label { margin: 0; font: 600 13.5px/1.3 var(--font-body); color: var(--text-2); }
.admin-stat-value { margin: 6px 0 4px; font: 800 32px/1.1 var(--font-display); letter-spacing: -.02em; color: var(--navy); font-variant-numeric: tabular-nums; }
.admin-stat-note { margin: 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
.admin-refresh { align-self: flex-end; }
.admin-records { grid-column: 1 / -1; }
.admin-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 32px; align-items: start; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.admin-table th, .admin-table td { padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
.admin-table th { font-weight: 600; text-align: left; color: var(--navy); }
.admin-table td { text-align: right; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.admin-table tr.is-sub th { padding-left: 16px; font-weight: 400; color: var(--text-2); }
.admin-table tr.is-sub td { font-weight: 400; color: var(--text-2); }
.admin-table tr:last-child th, .admin-table tr:last-child td { border-bottom: 0; }
.admin-learning > .page-head-row { align-items: center; }
.admin-scroll { margin-top: 8px; overflow-x: auto; }
.admin-table-3 thead th { font-size: 13px; font-weight: 600; color: var(--muted); }
.admin-table-3 thead th + th { text-align: right; }
.admin-table-3 td { padding-left: 12px; white-space: nowrap; }
.admin-table-3 tbody th { overflow-wrap: anywhere; }
@media (max-width: 900px) { .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759px) {
  .admin-stat { padding: 14px 16px; }
  .admin-stat-value { font-size: 26px; }
  .auth .auth-admin { padding: 7px 10px; }
}

/* ── Goals ───────────────────────────────────────────────────────────── */
.goal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.goal-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 20px; background: var(--accent-soft); border: 1px solid #CFE0FA; border-radius: 24px; transition: box-shadow .18s; }
.gc-top { display: flex; align-items: center; gap: 16px; }
.gc-ring { width: 84px; flex: none; }
.gc-ring .viz-rowlabel { font: 800 17px var(--font-body); fill: var(--navy); }
.gc-ring circle:first-child { stroke: #fff; }
.gc-text { min-width: 0; }
.gc-name { margin: 0; font: 700 20px/1.2 var(--font-display); color: var(--navy); overflow-wrap: anywhere; }
.gc-amount { margin: 4px 0 0; font-size: 15px; color: var(--text-2); }
.gc-amount strong { color: var(--navy); font-variant-numeric: tabular-nums; }
.gc-meta { margin: 3px 0 0; font-size: 14px; color: var(--muted); }
.gc-save-box { padding: 16px; background: var(--panel); border-radius: 18px; }
.goal-card details.more { border-top: 1px solid #CFE0FA; }
.goal-card details.more .btn-danger-ghost { margin: 4px 0 6px; }
.goal-card.is-done { background: linear-gradient(160deg, var(--accent-soft), var(--sky-soft)); }

.sheet-card { margin: 0 0 22px; padding: 22px; background: var(--panel); border: 1.5px solid #CFE0FA; border-radius: 24px; box-shadow: var(--shadow-md); }
.sheet-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: -6px -8px 12px 0; min-height: 44px; }
.add-goal .chips { margin-bottom: 16px; }

/* ── Budget ──────────────────────────────────────────────────────────── */
.budget-summary { padding: 24px; background: var(--accent-soft); border: 1px solid #CFE0FA; border-radius: 24px; }
.bs-label { margin: 0; font: 600 15px/1.3 var(--font-body); color: var(--text-2); }
.bs-figure { margin: 6px 0 0; font-size: 17px; color: var(--text-2); }
.bs-figure strong { font: 800 34px/1.1 var(--font-display); letter-spacing: -.02em; color: var(--navy); font-variant-numeric: tabular-nums; }
.budget-summary .pbar { background: var(--panel); }
.bs-left { margin: 0; font: 600 15.5px/1.3 var(--font-body); }
.bud-list { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.bud-row { padding: 16px 18px 6px; background: var(--panel); border: 1px solid var(--border); border-radius: 18px; }
.bud-row-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bud-name { font: 700 16.5px/1.3 var(--font-display); color: var(--navy); }
.bud-row .pbar { height: 10px; margin: 12px 0 4px; }
.bud-row-bottom { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14.5px; color: var(--text-2); }
.bud-row-bottom strong { color: var(--navy); font-variant-numeric: tabular-nums; }
.bud-edit { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; font-weight: 600; text-decoration: none; }
.bud-edit .ico { width: 17px; height: 17px; }
.suggest-card.is-lead { border-color: var(--accent); }
.suggest-card .tile-title { margin-bottom: 8px; }
.budget-suggest-list { margin: 10px 0 14px; padding: 0; list-style: none; }
.budget-suggest-list li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; font-size: 15.5px; color: var(--text-2); border-bottom: 1px solid var(--border-soft); }
.budget-suggest-list strong { color: var(--navy); font-variant-numeric: tabular-nums; }

/* ── Describe your budget (natural-language parser confirm card) ──────── */
.describe-budget textarea { min-height: 84px; }
.describe-result:empty { margin: 0; }
.dnl-cadence { margin: 4px 0 14px; }
.dnl-list { display: grid; gap: 10px; margin: 10px 0 14px; padding: 0; list-style: none; }
.dnl-line { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; }
.dnl-keep { flex: none; padding-top: 3px; }
.dnl-keep input { width: 20px; height: 20px; }
.dnl-line-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.dnl-source { margin: 0; font-size: 13.5px; color: var(--muted); font-style: italic; }
.dnl-fields { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dnl-fields select { min-height: 44px; padding: 8px 10px; font: 500 15px/1.2 var(--font-body); color: var(--text); background: var(--panel); border: 1.5px solid var(--border); border-radius: 10px; flex: 1 1 160px; }
.dnl-fields .money-input { flex: 0 1 160px; min-height: 44px; }
.dnl-kind-label { font: 700 13px/1 var(--font-body); color: var(--accent-strong); text-transform: uppercase; letter-spacing: .03em; }
.dnl-line .pill { align-self: flex-start; }
.dnl-unparsed { margin: 14px 0; }
.dnl-unparsed .mini-list li { color: var(--muted); }
.dnl-unparsed .ico { width: 15px; height: 15px; color: var(--muted); }

/* ── Accounts ────────────────────────────────────────────────────────── */
.mpesa-card { display: grid; grid-template-columns: auto 1fr auto; gap: 16px 20px; align-items: center; margin: 0 0 20px; padding: 22px 24px; color: #C9D8EE; background: var(--navy); border-radius: 24px; }
.mpesa-card h2 { margin: 0 0 4px; font: 700 21px/1.2 var(--font-display); color: #fff; }
.mpesa-card p { margin: 0; max-width: 62ch; font-size: 15px; }
.mpesa-ico { display: grid; place-items: center; width: 56px; height: 56px; color: var(--sky-ink); background: rgba(59, 163, 245, .16); border-radius: 16px; }
.mpesa-ico .ico { width: 30px; height: 30px; }
.mpesa-card .btn-primary { color: var(--navy); background: #fff; box-shadow: none; }
.mpesa-card .btn:disabled { color: #C9D8EE; background: rgba(255, 255, 255, .1); }
.acct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: start; }
.acct-list, .tx-list { display: grid; margin: 4px 0 0; padding: 0; list-style: none; }
.acct-row { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 12px; align-items: center; padding: 12px 0 4px; border-bottom: 1px solid var(--border-soft); }
.acct-row:last-child, .tx-row:last-child { border-bottom: 0; }
.acct-ico, .tx-ico { display: grid; place-items: center; width: 42px; height: 42px; color: var(--accent-strong); background: var(--accent-soft); border-radius: 12px; }
.acct-name, .tx-what { min-width: 0; }
.acct-name strong, .tx-what strong { display: block; font: 600 15.5px/1.3 var(--font-body); color: var(--navy); overflow-wrap: anywhere; }
.acct-name small, .tx-what small { display: block; font-size: 13.5px; color: var(--muted); }
.acct-bal { font: 700 16px/1.2 var(--font-body); color: var(--navy); font-variant-numeric: tabular-nums; }
.acct-bal.is-owed { color: var(--error); }
.acct-more { grid-column: 2 / -1; }
.acct-more .btn-danger-ghost { margin-top: 2px; }
.acct-more .fine { margin: 6px 0 10px; }
.tx-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.tx-ico.is-out { color: var(--text-2); background: var(--bg-tint); }
.tx-ico.is-in { color: var(--take); background: var(--take-bg); }
.tx-amt { font: 700 15.5px/1.2 var(--font-body); font-variant-numeric: tabular-nums; }
.tx-amt.is-out { color: var(--navy); }
.tx-amt.is-in { color: var(--take); }
.type-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.type-pick span { display: flex; align-items: center; gap: 9px; min-height: 50px; padding: 10px 12px; font: 600 14.5px/1.2 var(--font-body); color: var(--text-2); background: var(--panel); border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer; }
.type-pick input:checked + span { color: var(--accent-strong); background: var(--accent-soft); border-color: var(--accent); }

/* ── Onboarding ──────────────────────────────────────────────────────── */
.onboarding-modal { max-width: 560px; padding: 20px 24px 26px; }
.ob-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 18px; }
.ob-progress { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ob-dot { width: 28px; height: 6px; background: var(--border); border-radius: 999px; }
.ob-dot.is-done { background: var(--accent); }
.ob-dot.is-active { background: var(--sky); }
.onboarding-modal .modal-title { font-size: 27px; outline: none; }
.ob-copy { margin: 6px 0 18px; font-size: 16px; line-height: 1.55; color: var(--text-2); }
.ob-note { margin: -6px 0 16px; padding: 10px 12px; font-size: 14.5px; color: var(--warn-text); background: var(--warn-bg); border-radius: 10px; }
.ob-promises { display: grid; gap: 10px; margin: 0 0 8px; padding: 0; list-style: none; }
.ob-promises li { display: flex; align-items: center; gap: 10px; font: 600 15.5px/1.3 var(--font-body); color: var(--text-2); }
.ob-promises .ico { padding: 3px; color: #fff; background: var(--accent); border-radius: 50%; stroke-width: 2.6; }
.ob-form { display: grid; gap: 14px; }
.ob-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ob-actions .ob-back { margin-right: auto; }
.tile-checks { display: grid; gap: 8px; }
.tile-check span { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; font: 600 15.5px/1.25 var(--font-body); color: var(--text); background: var(--panel); border: 1.5px solid var(--border); border-radius: 14px; cursor: pointer; transition: border-color .15s, background .15s; }
.tile-check span > .ico { color: var(--accent); }
.tile-check .tick { display: grid; place-items: center; width: 26px; height: 26px; margin-left: auto; flex: none; color: #fff; border: 1.5px solid #9AAAC0; border-radius: 8px; }
.tile-check .tick .ico { width: 16px; height: 16px; opacity: 0; stroke-width: 2.8; }
.tile-check input:checked + span { background: var(--accent-soft); border-color: var(--accent); }
.tile-check input:checked + span .tick { background: var(--accent); border-color: var(--accent); }
.tile-check input:checked + span .tick .ico { opacity: 1; }
.ob-goal-rows { display: grid; gap: 12px; }
.ob-goal-row { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 16px; border: 1.5px solid var(--border-soft); border-radius: 16px; }
.ob-add-goal { justify-self: start; }
.ob-risk-q { margin: 0 0 22px; padding: 0; border: 0; min-width: 0; }
.ob-risk-q legend { margin-bottom: 10px; padding: 0; font: 700 16.5px/1.35 var(--font-display); color: var(--navy); }
.ob-qn { display: block; margin-bottom: 4px; font: 600 13.5px/1 var(--font-body); color: var(--accent-strong); }
.opt-list { display: grid; gap: 8px; }
.opt span { position: relative; display: flex; align-items: center; min-height: 50px; padding: 11px 14px 11px 46px; font-size: 15.5px; color: var(--text); background: var(--panel); border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.opt span::before { content: ''; position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px; box-sizing: border-box; border: 2px solid #9AAAC0; border-radius: 50%; background: var(--panel); transition: border-width .15s, border-color .15s; }
.opt input:checked + span { background: var(--accent-soft); border-color: var(--accent); }
.opt input:checked + span::before { border: 6px solid var(--accent); }
.ob-error { margin: 0 0 12px; padding: 10px 12px; font-size: 14.5px; color: var(--error); background: var(--error-bg); border-radius: 10px; }
.ob-done-art { display: grid; place-items: center; width: 68px; height: 68px; margin: 4px 0 14px; color: #fff; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 8px var(--accent-soft); animation: pop .5s var(--ease) both; }
.ob-done-art .ico { width: 34px; height: 34px; stroke-width: 2.6; }
.ob-personality strong { color: var(--accent-strong); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }

/* ── Inline notices (there are no toasts or pop-ups) ──────────────────
   Confirmations and errors appear inside the card where the action
   happened (public/finance/ui.js showNotice). Success fades after a few
   seconds; the goal-milestone band stays until dismissed. */
.inline-notice, .celebrate-band {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center;
  margin: 12px 0; padding: 8px 4px 8px 12px; border-radius: 16px;
  animation: notice-in .3s var(--ease) both; transition: opacity .4s var(--ease);
}
.inline-notice.is-ok { color: var(--text); background: var(--take-bg); border: 1px solid #BFE3D0; }
.inline-notice.is-error { color: var(--error); background: var(--error-bg); border: 1px solid #F1C6BF; }
.inline-notice.is-fading { opacity: 0; }
.celebrate-band { color: #fff; background: linear-gradient(135deg, var(--accent-strong), var(--navy) 75%); padding-top: 12px; padding-bottom: 12px; }
.notice-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; }
.notice-ico .ico { width: 19px; height: 19px; stroke-width: 2.6; }
.is-ok .notice-ico { background: var(--take-line); }
.is-error .notice-ico { background: var(--error-line); }
.celebrate-band .notice-ico { width: 42px; height: 42px; color: var(--navy); background: var(--sky-ink); }
.notice-text strong { display: block; font: 700 15.5px/1.25 var(--font-display); }
.notice-text span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; }
.is-ok .notice-text span { color: var(--text-2); }
.celebrate-band .notice-text strong { font-size: 17px; }
.celebrate-band .notice-text span { color: #C9D8EE; }
.notice-close { display: grid; place-items: center; width: 44px; height: 44px; color: inherit; opacity: .75; background: none; border: 0; border-radius: 12px; cursor: pointer; }
.notice-close .ico { width: 19px; height: 19px; }
.goal-card > .inline-notice, .goal-card > .celebrate-band, .hero-goal > .inline-notice, .hero-goal > .celebrate-band { margin: 0 0 12px; }
.acct-row > .inline-notice { grid-column: 1 / -1; margin: 6px 0 8px; }
.inline-error { margin-top: 8px; }
@keyframes notice-in { from { opacity: 0; transform: translateY(-4px); } }

/* ── "Did you know?" cards (public/finance/tips.js) ──────────────────── */
.dyk-card { margin: 0 0 20px; background: var(--panel); border: 1.5px solid #CFE0FA; border-radius: 18px; }
.dyk-card > summary { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px; cursor: pointer; list-style: none; }
.dyk-card > summary::-webkit-details-marker { display: none; }
.dyk-card > summary::after {
  content: ''; flex: none; width: 8px; height: 8px; margin: -4px 4px 0 auto;
  border-right: 2px solid var(--accent-strong); border-bottom: 2px solid var(--accent-strong); transform: rotate(45deg);
  transition: transform .18s var(--ease);
}
.dyk-card[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.dyk-ico { display: grid; place-items: center; width: 36px; height: 36px; flex: none; color: var(--accent-strong); background: var(--accent-soft); border-radius: 12px; }
.dyk-ico .ico { width: 20px; height: 20px; }
.dyk-text { display: flex; flex-direction: column; min-width: 0; }
.dyk-kicker { font: 700 12px/1.3 var(--font-body); letter-spacing: .05em; text-transform: uppercase; color: var(--accent-strong); }
.dyk-title { font: 700 15.5px/1.3 var(--font-display); color: var(--navy); }
.dyk-body { padding: 0 16px 16px 64px; }
.dyk-body p { margin: 0 0 12px; font-size: 15px; color: var(--text-2); }
.dyk-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dyk-actions .btn { white-space: normal; }
.panel-home > .dyk-card { max-width: 760px; margin: 24px auto 0; }
.draft-flag { display: inline-block; margin: 0 0 10px !important; padding: 3px 10px; font: 700 12.5px/1.3 var(--font-body) !important; color: var(--qualified) !important; background: var(--qualified-bg); border-radius: 999px; }

/* ── Learn: the Money Path ───────────────────────────────────────────── */
.learn-next { margin: 0 0 16px; padding: 20px; background: var(--accent-soft); border: 1px solid #CFE0FA; border-radius: 24px; }
.learn-next-kicker { margin: 0 0 10px; font: 700 12.5px/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-strong); text-align: center; }
.learn-next .btn-xl { white-space: normal; text-align: center; }
.learn-next-title { margin: 10px 0 0; font-weight: 600; color: var(--text-2); text-align: center; }
.learn-next.is-finished { display: flex; align-items: center; gap: 14px; }
.learn-next.is-finished h2 { margin: 0; font: 700 18px/1.25 var(--font-display); color: var(--navy); }
.learn-next.is-finished p { margin: 4px 0 0; color: var(--text-2); }
.learn-next-ico { display: grid; place-items: center; width: 52px; height: 52px; flex: none; color: #fff; background: var(--accent); border-radius: 50%; }
.learn-meta { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 0 0 8px; }
.learn-streak { display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 16px 10px 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 18px; }
.streak-ico { display: grid; place-items: center; width: 40px; height: 40px; flex: none; color: var(--muted); background: var(--bg-tint); border-radius: 50%; }
.learn-streak.is-on .streak-ico { color: var(--accent-strong); background: var(--accent-soft); }
.streak-text strong { display: block; font: 700 15.5px/1.25 var(--font-display); color: var(--navy); }
.streak-text span { display: block; font-size: 13.5px; color: var(--muted); }
.learn-guest { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 14.5px; color: var(--text-2); }
.learn-guest > .ico { color: var(--accent); }
.learn-guest .linklike, .done-note .linklike { min-height: 44px; }
.badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.badge { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px 6px 8px; font: 600 13.5px/1.2 var(--font-body); color: var(--accent-strong); background: var(--panel); border: 1.5px solid #CFE0FA; border-radius: 999px; }
.badge .ico { width: 20px; height: 20px; }

.money-path { display: grid; gap: 30px; margin-top: 22px; }
.unit-band { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 16px 18px; color: #fff; background: var(--navy); border-radius: 22px; }
.unit-ico { display: grid; place-items: center; width: 48px; height: 48px; color: var(--sky-ink); background: rgba(255, 255, 255, .1); border-radius: 14px; }
.unit-ico .ico { width: 26px; height: 26px; }
.unit-text h2 { margin: 0; font: 700 19px/1.2 var(--font-display); }
.unit-text p { margin: 3px 0 0; font-size: 14px; line-height: 1.45; color: #C9D8EE; }
.unit-count { font: 600 13.5px/1.2 var(--font-body); color: var(--sky-ink); white-space: nowrap; }
.path-list { --wind: 34px; display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 22px 0 0; padding: 0; list-style: none; }
.path-node { transform: translateX(calc(var(--x) * var(--wind))); }
.node-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 230px; padding: 4px; color: inherit; text-align: center; text-decoration: none; border-radius: 18px; }
.node-dot { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; box-shadow: 0 5px 0 rgba(11, 31, 58, .16); transition: transform .15s var(--ease); }
.node-dot .ico { width: 30px; height: 30px; stroke-width: 2.2; }
.is-done .node-dot { color: #fff; background: var(--accent); }
.is-current .node-dot { width: 82px; height: 82px; color: #fff; background: var(--accent-strong); box-shadow: 0 0 0 8px var(--accent-soft), 0 6px 0 rgba(11, 31, 58, .2); animation: node-breathe 2.6s ease-in-out infinite; }
.is-current .node-dot .ico { width: 34px; height: 34px; fill: currentColor; }
.is-locked .node-dot { color: var(--muted); background: var(--bg-tint); border: 2px solid var(--border); box-shadow: none; }
.is-draft .node-dot { color: var(--qualified); background: var(--panel); border: 2.5px dashed var(--qualified); box-shadow: none; }
.node-label strong { display: block; font: 700 15px/1.25 var(--font-display); color: var(--navy); }
.node-label small { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }
.is-locked .node-label strong { color: var(--muted); }
.is-current .node-label strong { color: var(--accent-strong); }
@keyframes node-breathe { 50% { box-shadow: 0 0 0 13px var(--accent-soft), 0 6px 0 rgba(11, 31, 58, .2); } }

.review-drafts { margin: 0 0 22px; padding: 18px 20px; background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: 20px; }
.review-drafts .tile-title .pill { margin-left: 4px; }
.review-drafts > .fine { margin-top: 6px; color: var(--warn-text); }
.review-drafts.is-clear { padding: 12px 16px; background: var(--panel); border-color: var(--border); }
.review-drafts.is-clear .fine { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); }
.review-list { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.review-item { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; padding: 8px 10px 8px 14px; background: var(--panel); border-radius: 14px; }
.review-item > .inline-notice { flex-basis: 100%; margin: 0; }
.review-link { display: flex; flex-direction: column; justify-content: center; flex: 1 1 200px; min-width: 0; min-height: 44px; color: var(--navy); text-decoration: none; }
.review-link small { color: var(--muted); font-size: 13px; }
.review-problems { margin-top: 10px; }
.review-problems ul { margin: 6px 0 8px; padding-left: 18px; font-size: 13.5px; color: var(--text-2); }
.review-problems code { font-size: 12.5px; overflow-wrap: anywhere; }

/* ── Learn: one lesson ───────────────────────────────────────────────── */
.lesson-page, .gloss-page { max-width: 700px; margin: 0 auto; }
.lesson-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 16px; }
.lesson-where { font: 600 13.5px/1.3 var(--font-body); color: var(--muted); }
.draft-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin: 0 0 16px; padding: 14px 16px; color: var(--warn-text); background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: 16px; }
.draft-bar p { flex: 1 1 260px; margin: 0; font-size: 14.5px; }
.admin-lesson { margin: 0 0 12px; }
.admin-lesson .fine { margin: 0 0 8px; }
.lesson-title { margin: 0; font: 800 clamp(26px, 4.2vw, 34px)/1.12 var(--font-display); letter-spacing: -.02em; color: var(--navy); text-wrap: balance; }
.lesson-summary { margin: 8px 0 0; font-size: 16px; color: var(--text-2); }
.lesson-min { white-space: nowrap; font-size: 14px; color: var(--muted); }
.lesson-progress { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; margin: 18px 0 16px; }
.lesson-progress span { height: 8px; background: var(--bg-tint); border-radius: 999px; transition: background .2s; }
.lesson-progress span.is-done { background: var(--accent); }
.lesson-progress span.is-now { background: var(--sky); }
.lesson-progress span.is-quiz-start { margin-left: 6px; }
.lesson-card { min-height: 240px; padding: 24px; background: var(--panel); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow-md); animation: fade-up .35s var(--ease) both; }
.card-count { margin: 0 0 8px; font: 700 12.5px/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-strong); }
.card-heading { margin: 0 0 12px; font: 800 22px/1.25 var(--font-display); color: var(--navy); outline: none; }
.card-body { font-size: 17px; line-height: 1.65; color: var(--text); overflow-wrap: break-word; }
.card-body p { margin: 0 0 12px; }
.card-body p:last-child { margin-bottom: 0; }
.card-body strong { color: var(--navy); }
/* A tappable glossary word. The ::after widens the hit area to 44px tall
   without pushing the lines of text apart. */
.gloss-term {
  position: relative; display: inline; padding: 0 2px; font: inherit; line-height: inherit; font-weight: 600;
  color: var(--accent-strong); background: var(--accent-soft); border: 0; border-bottom: 2px dotted var(--accent); border-radius: 4px; cursor: pointer;
}
.gloss-term::after { content: ''; position: absolute; left: -2px; right: -2px; top: 50%; height: 44px; transform: translateY(-50%); }
.gloss-term[aria-expanded="true"] { color: #fff; background: var(--accent); border-bottom-color: var(--accent-strong); }
.gloss-def { margin: 0 0 14px; padding: 12px 14px; font-size: 15.5px; line-height: 1.55; background: var(--accent-soft); border-left: 4px solid var(--accent); border-radius: 0 12px 12px 0; animation: fade-up .25s var(--ease) both; }
.gloss-def p { margin: 0; }
.gloss-def .gloss-def-term { margin-bottom: 4px; color: var(--navy); }
.gloss-sw { font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.gloss-more { display: inline-flex; align-items: center; min-height: 44px; font-size: 14.5px; }
.lesson-nav { display: flex; gap: 10px; margin: 16px 0 0; }
.lesson-nav .btn { flex: 1 1 auto; }
.lesson-nav .btn-ghost { flex: 0 1 auto; }
.swipe-hint { margin-top: 10px; text-align: center; }
@media (hover: hover) and (pointer: fine) { .swipe-hint { display: none; } }
.quiz-options { display: grid; gap: 10px; margin-top: 6px; }
.quiz-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; padding: 12px 16px;
  font: 600 16.5px/1.35 var(--font-body); text-align: left; color: var(--text);
  background: var(--panel); border: 2px solid var(--border); border-radius: 14px; box-shadow: 0 3px 0 var(--border-soft); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.quiz-opt:disabled { cursor: default; }
.quiz-opt:disabled:not(.is-right):not(.is-wrong) { opacity: .7; }
.quiz-opt .ico { width: 22px; height: 22px; stroke-width: 2.6; }
.quiz-opt.is-right { color: var(--take); background: var(--take-bg); border-color: var(--take-line); }
.quiz-opt.is-wrong { color: var(--error); background: var(--error-bg); border-color: var(--error-line); }
.quiz-explain { margin-top: 14px; padding: 14px 16px; border-radius: 14px; animation: fade-up .25s var(--ease) both; }
.quiz-explain.is-right { background: var(--take-bg); }
.quiz-explain.is-wrong { background: var(--bg-tint); }
.quiz-verdict { margin: 0 0 6px; font-size: 16px; }
.quiz-explain.is-right .quiz-verdict strong { color: var(--take); }
.quiz-explain .card-body { font-size: 16px; }
.lesson-done { padding: 28px 22px; text-align: center; background: var(--accent-soft); border: 1px solid #CFE0FA; border-radius: 24px; animation: fade-up .4s var(--ease) both; }
.done-ico { display: inline-grid; place-items: center; width: 72px; height: 72px; margin-bottom: 12px; color: #fff; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 8px var(--panel); }
.done-ico .ico { width: 36px; height: 36px; stroke-width: 2.6; }
.lesson-done .card-heading { margin-bottom: 8px; font-size: 26px; }
.done-score { margin: 0 0 8px; font-size: 17px; color: var(--text-2); }
.done-note { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; margin: 8px 0 0; font-size: 15.5px; color: var(--text-2); }
.done-note .ico { color: var(--accent-strong); }
.done-actions { display: grid; gap: 12px; margin-top: 20px; }
.done-actions .btn-xl { white-space: normal; }
.done-actions .row-actions { justify-content: center; }
.lesson-foot { display: grid; gap: 10px; margin-top: 28px; padding: 16px 18px; background: var(--panel-raised); border: 1px solid var(--border-soft); border-radius: 16px; }
.lesson-disclaimer { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 14.5px; font-weight: 600; color: var(--text-2); }
.lesson-disclaimer .ico { color: var(--accent); }
.lesson-sources ul { margin: 2px 0 0; padding-left: 18px; font-size: 14.5px; }
.lesson-sources a { display: inline-block; padding: 8px 0; overflow-wrap: anywhere; }

/* ── Learn: glossary ─────────────────────────────────────────────────── */
.gloss-tools { margin: 0 0 8px; }
.search-input { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px; color: var(--muted); background: var(--panel); border: 1.5px solid var(--border); border-radius: 12px; }
.search-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.search-input input { flex: 1; min-width: 0; min-height: 44px; font: 500 16px/1.2 var(--font-body); color: var(--text); background: transparent; border: 0; }
.search-input input:focus { outline: none; }
.az { display: flex; flex-wrap: wrap; gap: 4px; margin: 12px 0 8px; }
.az-btn { min-width: 44px; min-height: 44px; font: 700 15px/1 var(--font-display); color: var(--accent-strong); background: var(--panel); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.gloss-letter { scroll-margin-top: 84px; }
.gloss-letter-h { margin: 22px 0 8px; font: 800 22px/1 var(--font-display); color: var(--navy); }
.gloss-item { margin: 0 0 8px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; scroll-margin-top: 84px; }
.gloss-item[open] { border-color: #BFD3F2; }
.gloss-item > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-height: 52px; padding: 14px 16px; list-style: none; cursor: pointer; }
.gloss-item > summary::-webkit-details-marker { display: none; }
.gloss-item-term { font: 700 16.5px/1.3 var(--font-display); color: var(--navy); }
.gloss-item-body { padding: 0 16px 12px; }
.gloss-item-body p { margin: 0 0 8px; }
.gloss-related a { display: inline-block; padding: 6px 2px; }

/* ── Learn: loading skeleton (learn.js's showPath, before the catalog
   arrives) — shaped like the Money Path it is about to become: a "next
   lesson" banner, then unit bands with a few lesson nodes under each. No
   other page in the app has a shimmer skeleton yet, so this pattern is new;
   reuse it rather than a bare "Loading…" string if another view needs one. */
.skeleton-block {
  border-radius: 16px;
  background: linear-gradient(100deg, var(--bg-tint) 30%, var(--border-soft) 50%, var(--bg-tint) 70%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.skeleton-next { height: 108px; margin: 0 0 16px; border-radius: 24px; }
.skeleton-unit { height: 72px; margin: 0 0 16px; border-radius: 22px; }
.skeleton-nodes { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 0 0 30px; }
.skeleton-node { width: 68px; height: 68px; border-radius: 50%; }
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (max-width: 759px) {
  .path-list { --wind: 22px; }
  .node-btn { max-width: 190px; }
  .unit-band { grid-template-columns: auto minmax(0, 1fr); }
  .unit-count { grid-column: 2; }
  .lesson-card { padding: 20px 18px; }
  .dyk-body { padding-left: 16px; }
  .learn-next { padding: 16px; }
  .lesson-nav .btn-xl { padding-left: 14px; padding-right: 14px; }
}

/* ── Bottom tab bar + phone layout ───────────────────────────────────── */
.tabbar { display: none; }

@media (max-width: 759px) {
  :root { --tabbar-h: 64px; }
  /* Room for the fixed tab bar (plus the home indicator) under the last
     thing on every page — the footer included. */
  body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }

  .site-header { flex-wrap: nowrap; gap: 10px; background: #fff; backdrop-filter: none; }
  .tabs { width: auto; }
  .tabs .tab-main, .tab-menu-summary { display: none; }
  .auth { margin-left: auto; }
  .auth .btn { min-height: 40px; padding: 7px 12px; font-size: 14px; }
  .auth-name { display: none; }

  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: grid; grid-template-columns: repeat(5, 1fr);
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding: 6px max(6px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(6px, env(safe-area-inset-left, 0px));
    background: rgba(255, 255, 255, .97); border-top: 1px solid var(--border);
    box-shadow: 0 -6px 20px -12px rgba(11, 31, 58, .25);
  }
  .tabbar-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 52px; padding: 0; font: 600 12px/1 var(--font-body); color: var(--muted);
    text-decoration: none; background: none; border: 0; border-radius: 14px; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .tabbar-item svg { width: 24px; height: 24px; padding: 3px 16px; box-sizing: content-box; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; border-radius: 999px; transition: background .15s; }
  .tabbar-item.active, .tabbar-item[aria-expanded="true"] { color: var(--accent-strong); }
  .tabbar-item.active svg, .tabbar-item[aria-expanded="true"] svg { background: var(--accent-soft); }

  /* The Loren Wealth menu becomes a bottom sheet above the tab bar. The
     header's backdrop-filter is dropped above so these fixed boxes are
     positioned against the viewport, not the header. */
  .tab-menu[open]::before { content: ''; position: fixed; inset: 0; z-index: 44; background: rgba(11, 31, 58, .45); }
  .tab-menu[open] .tab-dropdown {
    position: fixed; z-index: 45; left: 0; right: 0; top: auto;
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    min-width: 0; max-height: calc(100vh - var(--tabbar-h) - 80px);
    max-height: calc(100dvh - var(--tabbar-h) - env(safe-area-inset-bottom, 0px) - 72px);
    padding: 14px 12px 16px; border-radius: 24px 24px 0 0; border-bottom: 0;
    box-shadow: 0 -16px 40px -12px rgba(11, 31, 58, .35);
  }
  .sheet-title { display: block; margin: 0 0 6px; padding: 4px 12px 10px; font: 800 20px/1.2 var(--font-display); color: var(--navy); border-bottom: 1px solid var(--border-soft); }
  .sheet-title span { display: block; margin-top: 3px; font: 500 14px/1.4 var(--font-body); color: var(--muted); }
  .tab-dropdown .tab { min-height: 46px; font-size: 15.5px; }

  .panel-finance { padding: 0 16px; }
  .fin-page { padding: 20px 0 32px; }
  .page-head-row > .btn { width: 100%; }
  .land-hero { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px 12px 12px; border-radius: 24px; }
  .land-copy { padding: 0 8px; }
  .land-lede { font-size: 17px; }
  .land-points { margin-top: 18px; gap: 10px; }
  .land-points li { font-size: 15px; }
  .hero-art { display: none; }
  .playground { padding: 20px 16px 18px; border-radius: 20px; }
  .pg-slider { grid-template-columns: 1fr; gap: 8px; }
  .pg-big { font-size: 28px; }
  .how-steps { grid-template-columns: 1fr; }
  .land-trust { grid-template-columns: 1fr; padding: 22px 18px; }
  .hero-goal { padding: 22px 18px; }
  .hg-actions > .btn { flex: 1 1 100%; }
  .callout { grid-template-columns: auto 1fr; }
  .callout > .btn, .callout > .row-actions { grid-column: 1 / -1; }
  .mpesa-card { grid-template-columns: auto 1fr; padding: 20px 18px; }
  .mpesa-card > .btn { grid-column: 1 / -1; }
  .wealth-door { padding: 16px 18px; }
  .tile, .sheet-card, .budget-summary { padding: 18px; }
  .stack-form > .btn { justify-self: stretch; }
  .acct-grid, .tiles, .goal-grid { grid-template-columns: minmax(0, 1fr); }

  /* Onboarding is a full-screen page on phones: no backdrop to mis-tap, and
     it scrolls like any page. */
  .modal-sheet { padding: 0 !important; }
  .modal-sheet .modal {
    min-height: 100%; max-width: none; border: 0; border-radius: 0;
    padding: calc(14px + env(safe-area-inset-top, 0px)) calc(18px + env(safe-area-inset-right, 0px))
             calc(28px + env(safe-area-inset-bottom, 0px)) calc(18px + env(safe-area-inset-left, 0px));
  }
  .ob-actions > .btn-primary { flex: 1; }
}

@supports (padding: env(safe-area-inset-top)) {
  @media (max-width: 759px) {
    .panel-finance {
      padding-left: calc(16px + env(safe-area-inset-left));
      padding-right: calc(16px + env(safe-area-inset-right));
    }
  }
}

/* ═════════════════════════════════════════════════════════════════════
   The Loren shell: logo kit v1 mark, Home · Money · Goals · Learn · Chama,
   the "You" menu and pages, sign-up, the Kenyan footer.
   ═════════════════════════════════════════════════════════════════════ */
/* Transparent line-art mark (a coin with a seed and sprout): no background
   tile, no shadow or gradient per the logo kit's usage rules. */
.brand-mark { display: block; width: 38px; height: 38px; flex: none; }

/* ── You menu ─────────────────────────────────────────────────────── */
.you-menu { position: relative; }
.you-summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 12px 4px 5px;
  list-style: none; cursor: pointer; font: 600 14.5px/1 var(--font-body); color: var(--text-2);
  background: var(--panel); border: 1.5px solid var(--border); border-radius: 999px;
  transition: border-color .15s, background .15s;
}
.you-summary::-webkit-details-marker { display: none; }
.you-menu[open] .you-summary, .you-menu.active .you-summary { border-color: var(--accent); color: var(--accent-strong); }
.you-avatar { display: grid; place-items: center; width: 32px; height: 32px; color: var(--accent-strong); background: var(--accent-soft); border-radius: 50%; }
.you-avatar svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.you-menu .caret { font-size: 10px; opacity: .7; transition: transform .15s ease; }
.you-menu[open] .caret { transform: rotate(180deg); }
.you-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
  display: flex; flex-direction: column; gap: 2px; min-width: 250px; padding: 8px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 16px 38px -14px rgba(11, 31, 58, .32);
}
.you-profile { display: flex; flex-direction: column; gap: 3px; margin: 0 0 6px; padding: 8px 12px 12px; border-bottom: 1px solid var(--border-soft); }
.you-profile .auth-name { display: block; font: 700 16px/1.25 var(--font-display); color: var(--navy); }
.you-phone { font: 500 13.5px/1.3 var(--font-body); color: var(--muted); font-variant-numeric: tabular-nums; }
.you-phone:empty { display: none; }
.you-item {
  display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 10px;
  font: 600 14.5px/1.2 var(--font-body); color: var(--text-2); text-decoration: none; text-align: left;
  background: none; border: 0; cursor: pointer; width: 100%;
}
.you-danger { color: var(--error); }
.you-wealth, .auth-admin { color: var(--navy); }
.auth-logout { border-top: 1px solid var(--border-soft); border-radius: 0 0 10px 10px; margin-top: 4px; }

/* ── Money: Plan | Accounts ─────────────────────────────────────── */
.panel-money { max-width: var(--col-wide); margin: 0 auto; padding: 0 24px; }
.panel-money > .panel-finance { max-width: none; padding: 0; }

/* Loren (the personal-finance side: Home, Money, Goals, Learn, Chama, You)
   fills whatever screen it is on: phone, tablet or desktop. It used to be
   capped to a 560px phone-width card from 640px up (owner asked for it to
   extend to fit the screen instead, 3 Oct 2026). Only the side padding
   scales with the viewport, so content never touches the edge and lines of
   text keep their own ch-based max-widths (.page-sub, .land-lede, etc.).
   Loren Wealth's own panels (.panel-home/.panel-tool/.panel-wide/
   .panel-portfolio/.panel-assessment) are a separate desktop research tool
   and keep their own widths. */
.panel-finance, .panel-money {
  max-width: none;
  margin: 0;
  padding: 0 clamp(24px, 4vw, 56px);
}
.money-switch { display: flex; padding: 24px 0 0; }
.money-seg a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 112px; min-height: 44px; padding: 8px 18px;
  font: 700 15px/1 var(--font-body); color: var(--text-2); text-decoration: none; border-radius: 11px;
}
.money-seg a.is-on { background: var(--panel); color: var(--accent-strong); box-shadow: var(--shadow-sm); }
.panel-money .fin-page { padding-top: 18px; }

/* ── Sign-up ────────────────────────────────────────────────────── */
.auth-modal { max-width: 440px; }
.signup-only { display: flex; flex-direction: column; gap: 12px; }
.field-hint { margin: -6px 0 0; font-size: 13px; color: var(--muted); }
.field-error { margin: -4px 0 0; padding: 8px 10px; font-size: 13.5px; line-height: 1.45; color: var(--error); background: var(--error-bg); border-radius: 8px; }
.auth-form input[aria-invalid="true"] { border-color: var(--error-line); }
.check { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 10px; font: 500 15px/1.4 var(--font-body) !important; color: var(--text) !important; cursor: pointer; }
.check input { flex: none; width: 22px; height: 22px; min-height: 0 !important; margin: 0; padding: 0; accent-color: var(--accent); }
.check em { font-style: normal; color: var(--muted); }
.check-optional { color: var(--text-2) !important; }
.privacy-note { padding: 12px 14px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); background: var(--accent-soft); border-radius: 12px; }
.privacy-note p { margin: 0; }
.field-optional { font-weight: 500; color: var(--muted); }

/* ── "Forgot password?" (same modal, a different inner view) ──────── */
.reset-flow { display: flex; flex-direction: column; gap: 14px; }
.reset-copy { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.reset-step { display: flex; flex-direction: column; gap: 14px; }
.reset-step .auth-form { gap: 12px; }
.reset-step .linklike { align-self: flex-start; font-size: 13.5px; }
.form-status { margin: 0; padding: 10px 12px; font-size: 14.5px; line-height: 1.45; color: var(--text-2); background: var(--accent-soft); border-radius: 10px; }

/* ── Footer (Kenyan) ────────────────────────────────────────────── */
.footer-lede { margin: 0 0 12px; max-width: 72ch; font-size: 13px; line-height: 1.6; color: var(--muted); }
.footer-lede strong { color: var(--text-2); }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 14px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 32px; font: 600 13.5px/1 var(--font-body); color: var(--accent-strong); text-decoration: none; }
.wealth-disclaimer { max-width: 84ch; margin: 40px auto 0; padding: 18px 0 0; font-size: 11.5px; line-height: 1.7; color: var(--muted); border-top: 1px solid var(--border-soft); }
.panel-tool > .wealth-disclaimer, .panel-home > .wealth-disclaimer { margin-left: 0; }

/* ── You pages ─────────────────────────────────────────────────── */
.btn-danger { background: var(--error); color: #fff; }
.you-page .tile + .tile { margin-top: 16px; }
.you-card .inline-notice, .you-card .celebrate-band { margin-top: 6px; }
.you-facts { display: grid; gap: 10px; margin: 0; }
.you-facts > div { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 12px; align-items: baseline; }
.you-facts dt { font: 600 14px/1.3 var(--font-body); color: var(--muted); }
.you-facts dd { margin: 0; font: 600 15.5px/1.35 var(--font-body); color: var(--navy); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.you-facts dd em { font-style: normal; font-weight: 500; color: var(--muted); }
.you-consents { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.you-consents li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--panel-raised); border: 1px solid var(--border-soft); border-radius: 12px; }
.you-consents strong { font-size: 15px; color: var(--navy); }
.you-consents span { font-size: 13.5px; color: var(--muted); }
.you-delete { border-color: #EBC5BF; }
.you-delete .tile-title .ico { color: var(--error); }
.you-delete-step { display: grid; gap: 12px; }
.you-delete-input { font-family: var(--font-mono) !important; letter-spacing: .08em; }
.you-edit { margin-top: 4px; }

.data-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 0 24px; }
.data-facts .callout { margin: 0; grid-template-columns: auto 1fr; align-items: start; }
.data-facts .callout > .btn { grid-column: 2; justify-self: start; }
.data-export { margin: 0 0 28px; }
.data-tables { display: grid; gap: 10px; margin: 0 0 30px; }
.data-page .section-title { margin: 8px 0 6px; }
.data-page .section-title + .fine { margin-bottom: 12px; }
.data-table { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; }
.data-table > summary { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; cursor: pointer; list-style: none; }
.data-table > summary::-webkit-details-marker { display: none; }
.data-table > summary strong { font: 700 16.5px/1.3 var(--font-display); color: var(--navy); }
.data-table > summary span { font-size: 14.5px; color: var(--text-2); }
.data-table[open] > summary { border-bottom: 1px solid var(--border-soft); }
.data-cols { display: grid; gap: 8px; margin: 0; padding: 14px 18px 16px; }
.data-cols > div { display: grid; grid-template-columns: minmax(110px, 190px) 1fr; gap: 12px; }
.data-cols dt code { font: 500 12.5px/1.5 var(--font-mono); color: var(--muted); overflow-wrap: anywhere; }
.data-cols dd { margin: 0; font-size: 14.5px; color: var(--text-2); }

.legal-text { max-width: 72ch; font-size: 16px; line-height: 1.65; color: var(--text-2); }
.legal-text h2 { margin: 0 0 14px; font: 800 clamp(28px, 4.4vw, 38px)/1.1 var(--font-display); color: var(--navy); }
.legal-text h3 { margin: 28px 0 8px; font: 700 20px/1.25 var(--font-display); color: var(--navy); }
.legal-text h4, .legal-text h5 { margin: 20px 0 6px; font: 700 16.5px/1.3 var(--font-body); color: var(--navy); }
.legal-text p, .legal-text ul, .legal-text ol { margin: 0 0 12px; }
.legal-text li { margin-bottom: 6px; }

.about-founder { flex-direction: row; align-items: center; gap: 18px; margin-bottom: 16px; }
.about-photo { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; background: var(--accent-soft); }
.admin-note { border-color: var(--warn-border); background: var(--warn-bg); }

/* The inline "complete your profile" banner on Home. */
.identity-banner { grid-template-columns: auto 1fr; margin: 0 0 20px; border-style: solid; border-color: #BFD3F2; }
.identity-form { grid-column: 1 / -1; display: grid; gap: 12px; max-width: 560px; }
.identity-form .btn { justify-self: start; }

/* ── Onboarding: the M-Pesa step ─────────────────────────────── */
.ob-choices { display: grid; gap: 12px; margin: 0 0 18px; }
.ob-choice {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; width: 100%; min-height: 72px; padding: 14px 16px;
  text-align: left; font: inherit; color: var(--text); background: var(--panel); border: 1.5px solid var(--border); border-radius: 16px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ob-choice:disabled { cursor: default; opacity: .6; }
.ob-choice strong { display: block; font: 700 16px/1.3 var(--font-display); color: var(--navy); }
.ob-choice small { display: block; margin-top: 2px; font-size: 14px; color: var(--text-2); }
.ob-choice-ico { display: grid; place-items: center; width: 44px; height: 44px; color: var(--accent-strong); background: var(--accent-soft); border-radius: 13px; }
.ob-have { display: flex; gap: 8px; align-items: center; }
.ob-have .ico { color: var(--take); }
.ob-balance-form .money-input { max-width: 320px; }

/* The M-Pesa importer's one-time consent (public/finance/mpesa-import.js). */
#mpesa-import .mpi-consent { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; padding: 12px 14px; font-size: 14px; line-height: 1.5; color: var(--text-2); background: var(--accent-soft); border-radius: 12px; cursor: pointer; }
#mpesa-import .mpi-consent input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }

/* Admin: the strategy report. */
.strategy-frame { display: block; width: 100%; height: calc(100vh - 220px); height: calc(100dvh - 220px); min-height: 480px; background: #fff; border: 1px solid var(--border); border-radius: 16px; }

@media (max-width: 759px) {
  .brand-mark { width: 34px; height: 34px; }
  .you-label, .you-menu .caret { display: none; }
  .you-summary { padding: 4px; border-width: 0; background: none; }
  .you-avatar { width: 38px; height: 38px; }
  /* Below the header, full width: a plain panel that drops down. */
  .you-dropdown { position: fixed; top: calc(62px + env(safe-area-inset-top, 0px)); left: 10px; right: 10px; min-width: 0; max-height: calc(100dvh - 62px - var(--tabbar-h) - 24px); overflow-y: auto; }
  .panel-money { padding: 0 16px; }
  .money-switch { padding-top: 16px; }
  .money-seg { display: flex; width: 100%; }
  .money-seg a { flex: 1; min-width: 0; }
  .data-facts { grid-template-columns: minmax(0, 1fr); }
  .you-facts > div, .data-cols > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .strategy-frame { height: calc(100dvh - var(--tabbar-h) - 200px); border-radius: 12px; }
}
@supports (padding: env(safe-area-inset-top)) {
  @media (max-width: 759px) {
    .panel-money {
      padding-left: calc(16px + env(safe-area-inset-left));
      padding-right: calc(16px + env(safe-area-inset-right));
    }
  }
}

/* ── Chama, Loren Plus, share cards (finance/chama.js, plus.js, share-card.js)
   Big buttons and plain words: every action on these pages is at least
   44px tall, and the main ones are the xl size. ─────────────────────── */
.back-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0 0 4px; font-weight: 600; text-decoration: none; }
.back-link .ico { width: 18px; height: 18px; }
.chama-page .tile, .plus-page .tile { margin-top: 18px; }
.chama-page .tiles .tile, .plus-page .tiles .tile { margin-top: 0; }
.chama-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 0 0 20px; }
.chama-actions .btn { width: 100%; }
.chama-list { display: grid; gap: 12px; }
.chama-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 18px; color: var(--text); text-decoration: none; background: var(--panel);
  border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-sm);
  transition: border-color .15s var(--ease), transform .15s var(--ease);
}
.chama-card-ico { display: grid; place-items: center; width: 48px; height: 48px; color: var(--accent); background: var(--accent-soft); border-radius: 14px; }
.chama-card-text strong { display: block; font: 700 18px/1.25 var(--font-display); color: var(--navy); overflow-wrap: anywhere; }
.chama-card-text span { color: var(--muted); font-size: 14.5px; }
.chama-card-num { text-align: right; font: 800 19px/1.2 var(--font-display); color: var(--navy); font-variant-numeric: tabular-nums; }
.chama-card-num small { display: block; font: 500 12.5px/1.3 var(--font-body); color: var(--muted); }
.chama-card .pill { grid-column: 2 / -1; justify-self: start; }
.chama-empty { margin: 24px auto; }
.chama-trust { display: flex; gap: 12px; align-items: flex-start; margin: 22px 0 0; padding: 14px 16px; font-size: 14.5px; color: var(--text-2); background: var(--accent-soft); border-radius: 16px; }
.chama-trust .ico { flex: none; width: 22px; height: 22px; color: var(--accent); }
.chama-challenges { margin-top: 30px; }
.challenge p { margin: 0; }
.challenge .eyebrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.ch-stats { display: grid; gap: 6px; margin: 4px 0; padding: 0; list-style: none; font-size: 15.5px; }
.ch-stats li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ch-stats .ico { width: 18px; height: 18px; color: #C2410C; }
.ch-stats strong { font: 800 20px/1 var(--font-display); color: var(--navy); }
.choice-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; }
.choice span { display: grid; place-items: center; min-height: 52px; padding: 10px 14px; font-weight: 700; color: var(--text-2); background: var(--panel); border: 1.5px solid var(--border); border-radius: 14px; }
.choice input:checked + span { color: var(--accent-strong); background: var(--accent-soft); border-color: var(--accent); }
.choice input:focus-visible + span { box-shadow: 0 0 0 4px var(--accent-soft); }
.chama-page .field > select, .plus-page .field > select { min-height: 48px; }
.field > input.code-input { font: 800 24px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.join-card { display: grid; gap: 12px; }
.join-card p { margin: 0; }

.cm-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.cm-figures p { margin: 0; padding: 12px 14px; background: var(--panel-raised); border: 1px solid var(--border-soft); border-radius: 14px; }
.cm-figures span { display: block; font-size: 13.5px; color: var(--muted); }
.cm-figures strong { display: block; font: 800 24px/1.2 var(--font-display); color: var(--navy); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cm-figures em { font-style: normal; font-size: 13.5px; color: var(--text-2); }
.cm-people { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cm-people li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--panel-raised); }
.cm-people .ico { width: 20px; height: 20px; }
.cm-people .is-paid .ico { color: var(--take-line); }
.cm-people .is-partly .ico, .cm-people .is-behind .ico { color: var(--qualified); }
.cm-people span { font-weight: 700; overflow-wrap: anywhere; }
.cm-people em { font-style: normal; font-size: 13.5px; color: var(--muted); text-align: right; }

.chama-record { margin-top: 18px; }
.chama-big-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.chama-big-actions .btn { width: 100%; }
.rec-form { margin: 14px 0 0; }
.rec-form .tile-title { margin: 0; }
.ledger-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ledger-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 14px; }
.ledger-row > div:first-child { min-width: 0; }
.ledger-row strong { display: block; overflow-wrap: anywhere; }
.ledger-row .fine { display: block; overflow-wrap: anywhere; }
.ledger-row .row-actions { grid-column: 1 / -1; }
.ledger-row.is-rejected { opacity: .65; }
.ledger-row.is-rejected .ledger-amt { text-decoration: line-through; }
.ledger-amt { font: 800 16.5px/1.2 var(--font-display); color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chama-waiting { border-color: var(--warn-border); background: #FFFCF4; }
.members-table td { font-variant-numeric: tabular-nums; }
.members-table th[scope=row] { overflow-wrap: anywhere; }
.mb-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.mb-role { min-height: 40px; padding: 4px 8px; font: inherit; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
.rotation-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rotation-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--panel-raised); }
.rotation-list li.is-next { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.rotation-list li.is-done { opacity: .75; }
.rotation-list em { font-style: normal; color: var(--muted); font-size: 14px; }
.rot-n { display: grid; place-items: center; width: 30px; height: 30px; font-weight: 800; color: var(--accent-strong); background: var(--panel); border-radius: 50%; }
.rot-edit { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.rot-edit li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: center; padding: 4px 4px 4px 10px; border: 1px solid var(--border-soft); border-radius: 12px; }
.rot-edit label { display: flex; gap: 8px; align-items: center; min-height: 44px; font-weight: 600; }
.rot-edit input { width: 20px; height: 20px; }
.invite-code { margin: 0; font: 800 30px/1.2 var(--font-mono); letter-spacing: .14em; color: var(--navy); }
.invite-code-sm { font-size: 20px; }
.copy-fallback { width: 100%; min-height: 48px; padding: 8px 12px; font: 600 14px var(--font-mono); border: 1px solid var(--border); border-radius: 12px; }
.streak-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.streak-list li { display: grid; gap: 2px; padding: 8px 12px; border-radius: 12px; background: var(--panel-raised); }
.streak-list span { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; font-size: 14.5px; color: var(--text-2); }
.streak-list .ico { width: 16px; height: 16px; color: #C2410C; }
.share-amounts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; min-height: 44px; font-weight: 600; cursor: pointer; }
.share-amounts input { width: 22px; height: 22px; flex: none; }
.chama-streaks .share-amounts { flex-wrap: nowrap; }
.chama-settings { margin-top: 18px; }
.chama-settings summary { min-height: 52px; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.set-extras { margin-top: 14px; }

.inline-notice.is-upgrade { color: var(--text); background: #FFF8E6; border: 1px solid var(--warn-border); grid-template-columns: auto minmax(0, 1fr); padding-right: 12px; }
.is-upgrade .notice-ico { color: var(--navy); background: #F2B233; }
.is-upgrade .notice-text span { color: var(--text-2); }

.share-panel { display: grid; gap: 12px; margin: 14px 0 0; padding: 16px; background: var(--panel-raised); border: 1px solid var(--border); border-radius: 18px; }
.share-head { display: flex; justify-content: space-between; align-items: center; }
.share-title { display: flex; gap: 8px; align-items: center; margin: 0; font: 700 16.5px/1.2 var(--font-display); color: var(--navy); }
.share-title .ico { width: 18px; height: 18px; color: var(--accent); }
.share-preview img { display: block; width: 100%; max-width: 320px; aspect-ratio: 1; border-radius: 14px; box-shadow: var(--shadow-md); }

.founding-strip { display: flex; gap: 10px; align-items: center; margin: 0 0 14px; padding: 10px 14px; font-size: 14.5px; color: var(--navy); background: #FFF4D6; border: 1px solid #F2D58A; border-radius: 14px; }
.founding-strip .ico { flex: none; width: 22px; height: 22px; color: #8A5A00; }
.plus-status { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 16px; padding: 16px 18px; background: var(--panel); border: 1px solid var(--border); border-radius: 18px; }
.plus-status > .ico { flex: none; width: 28px; height: 28px; color: var(--accent); }
.plus-status strong { display: block; font: 700 18px/1.25 var(--font-display); color: var(--navy); }
.plus-status span { color: var(--text-2); }
.plus-status.is-plus { color: #fff; background: linear-gradient(135deg, var(--accent-strong), var(--navy) 75%); border: 0; }
.plus-status.is-plus strong { color: #fff; }
.plus-status.is-plus span { color: #C9D8EE; }
.plus-status.is-plus > .ico { color: #F2B233; }
.plus-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 18px; }
.plus-page .plus-tiers .tile { margin-top: 0; }
.plus-tier.is-plus { border: 1.5px solid var(--accent); box-shadow: var(--shadow-md); }
.plus-tier .eyebrow { margin: 0; }
.plus-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.plus-list li { display: flex; gap: 8px; align-items: flex-start; }
.plus-list .ico { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--take-line); }
.plus-join { margin-top: 20px; }
/* "Would you pay for this?" — an inline, non-modal signal (finance/plus.js's
   wtpHtml), never a pop-up. Sits under the Plus price. */
.wtp { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.wtp-q { margin: 0 0 8px; font: 600 14.5px/1.3 var(--font-body); color: var(--navy); }
.wtp-thanks { margin-top: 8px; }
.trend-bars { display: flex; gap: 6px; align-items: flex-end; height: 160px; padding: 8px 0 0; border-bottom: 1px solid var(--border); overflow-x: auto; }
.trend-col { flex: 1 0 34px; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.trend-pair { flex: 1; display: flex; gap: 3px; align-items: flex-end; width: 100%; justify-content: center; }
.trend-pair i { display: block; width: 42%; max-width: 18px; min-height: 2px; border-radius: 5px 5px 0 0; }
.trend-col small { font-size: 11.5px; color: var(--muted); }
.trend-pair .is-in, .key.is-in { background: var(--take-line); }
.trend-pair .is-out, .key.is-out { background: var(--sky); }
.key { display: inline-block; width: 10px; height: 10px; margin: 0 4px 0 8px; border-radius: 3px; vertical-align: middle; }
.key:first-child { margin-left: 0; }

@media (max-width: 620px) {
  .chama-card { grid-template-columns: auto minmax(0, 1fr); }
  .chama-card-num { grid-column: 2; text-align: left; }
  .ledger-row { grid-template-columns: minmax(0, 1fr) auto; }
  .ledger-row .pill { grid-column: 1 / -1; justify-self: start; }
  .cm-people li { grid-template-columns: auto minmax(0, 1fr); }
  .cm-people em { grid-column: 2; text-align: left; }
  .invite-code { font-size: 24px; }
  .rotation-list li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .rotation-list .pill { grid-column: 2 / -1; justify-self: start; }
}

/* ── Seed Mark (Loren Seed System, Phase 1) ─────────────────────────────
   public/finance/seed-mark.js draws the mark itself; these rules only cover
   (a) the CSS-transition technique an animated mark relies on for its
   in-place "Grow" updates, (b) the splash's seed-crack + sway, (c) the
   Water drop, and (d) the first-deposit confetti. New rules — the existing
   .viz*/.pbar rules progressRing() and progressBar() use are untouched. */
.seed-mark { display: block; overflow: visible; }
.gc-seed, .hero-seed, .setup-seed { position: relative; flex: none; }
.gc-seed { width: 56px; }
.hero-seed { width: 80px; }
.home-empty-seed { width: 160px; margin: 0 auto 14px; }

/* The three attributes the doc's "Tech build" names — stroke-dashoffset,
   y2, transform — get the same 600ms ease-out curve everywhere. Only marks
   rendered with { animate: true } carry these classes (see seed-mark.js). */
.seed-mark-ring-fill { transition: stroke-dashoffset .6s cubic-bezier(.2, .8, .2, 1); }
.seed-mark-stem { transition: y2 .6s cubic-bezier(.2, .8, .2, 1), opacity .6s cubic-bezier(.2, .8, .2, 1); }
.seed-mark-leaves { transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .6s cubic-bezier(.2, .8, .2, 1); }

/* ── Water: a small drop that falls onto the seed just before Grow (deposit
   flow — ui.js wireSaveForm). Positioned by its caller (absolute, over the
   seed's on-screen position); ~350ms per the doc. */
.seed-water-drop {
  position: absolute; width: 10px; height: 14px; z-index: 5; pointer-events: none;
  background: var(--sky, #3BA3F5); border-radius: 0 60% 60% 60%; transform: rotate(45deg);
  opacity: 0; animation: seed-water-fall .35s cubic-bezier(.2, .8, .2, 1) forwards;
}
@keyframes seed-water-fall {
  0% { opacity: 0; transform: translateY(-22px) rotate(45deg) scale(.6); }
  30% { opacity: 1; }
  85% { opacity: 1; transform: translateY(0) rotate(45deg) scale(1); }
  100% { opacity: 0; transform: translateY(2px) rotate(45deg) scale(.8); }
}

/* ── First-deposit confetti: fires once, ever (see ui.js logSaving's
   caller in goals.js/home.js). Not a pop-up — nothing blocks or requires
   dismissal; a handful of falling squares that clean themselves up. */
.seed-confetti { position: absolute; inset: 0; overflow: visible; pointer-events: none; z-index: 6; }
.seed-confetti i {
  position: absolute; top: -6px; left: var(--x, 50%); width: 6px; height: 10px;
  background: var(--c, var(--accent)); border-radius: 1px;
  opacity: 0; animation: seed-confetti-fall .9s cubic-bezier(.2, .8, .2, 1) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes seed-confetti-fall {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--dx, 12px), 70px) rotate(var(--r, 200deg)); }
}

/* ── App chrome: no text-selection on tap targets ─────────────────────────
   Dragging a finger across a button or nav item used to select its label
   like plain web text — another tell that the UI is a web page rather than
   an app. Scoped to fixed-label interactive chrome only (buttons, tabs, nav,
   icon buttons, predefined option pickers) — never to actual content, so
   transaction descriptions, amounts, goal/chama names, lesson body copy and
   form inputs all stay selectable/copyable as normal. */
.btn, .tab, .tab-menu-summary, .tabbar, .tabbar-item, .icon-btn, .modal-close,
.notice-close, .az-btn, .pf-win-btn, .bal-lock, .money-seg a, .you-summary,
.you-item, .seg span, .chip, .type-pick span, .tile-check span, .opt span,
.goal-pick span, .choice span, .assess-opt, .ob-choice, .quiz-opt,
.bal-preset, .bal-radio {
  user-select: none;
  -webkit-user-select: none;
}

/* ── Hover states, gated to devices that actually have a mouse ───────────
   Without (hover: hover), a tap on a touch screen "locks in" the :hover
   style until the person taps something else — the classic tell that a UI
   is a web page, not an app. Every hover-only rule in this file lives here
   instead of next to the selector it styles, so this is the one place to
   check when adding a new one. Selectors that also carry :focus-visible or
   :disabled (keyboard-visibility and disabled styling must never depend on
   pointer type) were split at the source instead of moved here — only the
   :hover half of those rules appears below. */
@media (hover: hover) and (pointer: fine) {
  .tab:hover { color: var(--navy); background: var(--bg-tint); }
  .tool:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
  .btn-primary:hover { background: var(--accent-strong); box-shadow: 0 2px 4px rgba(11, 31, 58, .12), 0 8px 18px -6px rgba(29, 95, 209, .55); transform: translateY(-1px); }
  .btn-ghost:hover { border-color: var(--accent); color: var(--accent-strong); }
  .btn-soft:hover { background: var(--sky-soft); }
  .btn-danger-ghost:hover { border-color: var(--error); background: var(--error-bg); }
  .btn:disabled:hover { background: var(--bg-tint); border-color: transparent; color: var(--muted); cursor: default; box-shadow: none; transform: none; }
  .settings summary:hover { color: var(--text-2); }
  .took:hover { background: #D3EBDD; }
  .took.is-unavailable:hover { background: var(--bg-tint); }
  .modal-close:hover { color: var(--text); background: var(--bg-tint); }
  .pf-win-btn:hover { color: var(--text-2); }
  .pf-open:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .assess-cta .btn:hover { background: #EEF4FF; }
  .assess-opt:hover { border-color: var(--accent); background: var(--accent-soft); }
  .profile-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
  .door:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-md); }
  .door:hover .door-arrow { transform: translateX(4px); }
  .door-planned:hover { border-color: var(--muted); box-shadow: var(--shadow-sm); }
  .bal-preset:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
  .bal-lock:hover { background: var(--bg-tint); }
  .bal-radio:hover { border-color: var(--accent); }
  .chip:hover { border-color: var(--accent); color: var(--accent-strong); }
  .icon-btn:hover { color: var(--text); background: var(--bg-tint); }
  .goal-pick span:hover { border-color: var(--accent); color: var(--accent-strong); }
  .land-wealth:hover { border-color: var(--accent); transform: translateY(-2px); }
  .wealth-door:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .goal-card:hover { box-shadow: var(--shadow-md); }
  .mpesa-card .btn-primary:hover { background: var(--sky-soft); }
  .mpesa-card .btn:disabled:hover { color: #C9D8EE; background: rgba(255, 255, 255, .1); }
  .type-pick span:hover { border-color: var(--accent); }
  .tile-check span:hover { border-color: var(--accent); }
  .opt span:hover { border-color: var(--accent); }
  .notice-close:hover { opacity: 1; background: rgba(11, 31, 58, .06); }
  .celebrate-band .notice-close:hover { background: rgba(255, 255, 255, .12); }
  a.node-btn:hover .node-dot { transform: translateY(-2px); }
  .review-link:hover strong { text-decoration: underline; }
  .quiz-opt:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
  .az-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
  .you-summary:hover { border-color: var(--accent); color: var(--accent-strong); }
  .you-item:hover { background: var(--bg-tint); color: var(--navy); }
  .you-danger:hover { background: var(--error-bg); color: var(--error); }
  .money-seg a:hover { color: var(--navy); }
  .footer-links a:hover { text-decoration: underline; }
  .btn-danger:hover { background: #962f25; }
  .ob-choice:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
  .chama-card:hover { border-color: var(--accent); transform: translateY(-1px); }
}