/* Meridian — machined light
   Canvas #F5F6F8 · card frosted white · ink #1C1D21 · sub #71747C
   accent champagne #A8823C · up #1F9D55 · down #E5484D
   Apple-style system type, hairline borders, layered soft shadows */

:root {
  --canvas: #f7f6f2;
  --card: rgba(255, 255, 255, 0.88);
  --card-solid: #fffefb;
  --hair: rgba(38, 32, 22, 0.09);
  --hair-soft: rgba(38, 32, 22, 0.055);
  --ink: #211e19;
  --sub: #746f66;
  --faint: #9d988d;
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --gold: #a8823c;
  --gold-soft: #c9a961;
  --gold-bright: #d7bc7e;
  --up: #1f9d55;
  --down: #e5484d;
  --sh-card: 0 1px 2px rgba(43, 34, 18, 0.05), 0 10px 30px rgba(43, 34, 18, 0.06);
  --sh-pop: 0 2px 6px rgba(43, 34, 18, 0.08), 0 18px 50px rgba(43, 34, 18, 0.15);
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Spline Sans Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; -webkit-tap-highlight-color: transparent; }

[hidden] { display: none !important; }

::selection { background: rgba(168, 130, 60, 0.22); }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(22, 26, 34, 0.18); border-radius: 6px;
  border: 3px solid var(--canvas);
}
::-webkit-scrollbar-thumb:hover { background: rgba(22, 26, 34, 0.3); }

html { background: var(--canvas); }

body {
  font-family: var(--ui);
  color: var(--ink);
  background: var(--canvas);
  min-height: 100vh;
  max-width: 840px;
  margin: 0 auto;
  padding: 0 32px 100px;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv01" 1, "ss03" 1;
  font-weight: 450;
  font-size: 14px;
  line-height: 1.5;
}

.num, .networth, .lg-value, .alloc-pct, .delta { font-family: var(--mono); font-variant-numeric: tabular-nums; }

:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; border-radius: 4px; }

/* ---------- opening choreography ---------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.masthead { animation: rise 500ms cubic-bezier(.22,.9,.3,1) both; }
.hero { animation: rise 550ms cubic-bezier(.22,.9,.3,1) 60ms both; }
.kpis { animation: rise 550ms cubic-bezier(.22,.9,.3,1) 160ms both; }
#portfolio-panel { animation: rise 550ms cubic-bezier(.22,.9,.3,1) 240ms both; }
#homes-panel { animation: rise 550ms cubic-bezier(.22,.9,.3,1) 320ms both; }
#alloc-panel { animation: rise 550ms cubic-bezier(.22,.9,.3,1) 400ms both; }
#ledger-panel { animation: rise 550ms cubic-bezier(.22,.9,.3,1) 470ms both; }
.colophon { animation: rise 550ms cubic-bezier(.22,.9,.3,1) 560ms both; }

.networth.pop { animation: npop 750ms cubic-bezier(.34,1.56,.64,1); }
@keyframes npop {
  0% { transform: scale(0.988); }
  45% { transform: scale(1.012); text-shadow: 0 2px 30px rgba(168, 130, 60, 0.35); }
  100% { transform: scale(1); text-shadow: none; }
}

.chip {
  display: inline-block; margin-left: 12px; padding: 4px 12px;
  border: 1px solid rgba(168, 130, 60, 0.35); border-radius: 999px;
  color: var(--gold); font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  background: rgba(168, 130, 60, 0.08);
  animation: chippop 600ms cubic-bezier(.34,1.56,.64,1) 900ms both;
}
@keyframes chippop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }

.live { fill: var(--gold); }
.live-ping { fill: none; stroke: var(--gold); stroke-width: 1; animation: ping 2200ms ease-out infinite; }
@keyframes ping { 0% { opacity: 0.7; r: 3; } 70%, 100% { opacity: 0; r: 13; } }

.delta.up { animation: deltain 900ms ease 700ms both; }
@keyframes deltain {
  0% { opacity: 0; }
  40% { opacity: 1; text-shadow: 0 1px 14px rgba(31, 157, 85, 0.4); }
  100% { opacity: 1; text-shadow: none; }
}

@keyframes flashu { 0% { color: var(--up); text-shadow: 0 1px 12px rgba(31, 157, 85, 0.45); } }
@keyframes flashd { 0% { color: var(--down); text-shadow: 0 1px 12px rgba(229, 72, 77, 0.45); } }
@keyframes flashg { 0% { color: var(--gold); text-shadow: 0 1px 12px rgba(168, 130, 60, 0.5); } }
.flash-up { animation: flashu 1.2s ease both; }
.flash-down { animation: flashd 1.2s ease both; }
.flash-gold { animation: flashg 1.2s ease both; }

/* ---------- Sextant: a bright instrument in porcelain and brass ---------- */

.orb {
  position: fixed; right: 22px; bottom: 22px; z-index: 30;
  width: 72px; height: 72px; padding: 0;
  border: none; cursor: pointer; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #ffffff 0%, #f7f4ec 55%, #ebe5d6 100%);
  box-shadow:
    0 0 0 1px rgba(22, 26, 34, 0.09),
    0 2px 5px rgba(16, 20, 28, 0.1),
    0 12px 30px rgba(16, 20, 28, 0.14),
    inset 0 1px 1px rgba(255, 255, 255, 0.9);
  animation: orbfloat 6s ease-in-out infinite;
  transition: transform 200ms cubic-bezier(.34,1.4,.64,1), box-shadow 250ms;
}
.orb:hover {
  transform: scale(1.07);
  box-shadow:
    0 0 0 1px rgba(168, 130, 60, 0.35),
    0 4px 10px rgba(16, 20, 28, 0.12),
    0 16px 38px rgba(16, 20, 28, 0.16),
    0 0 24px rgba(201, 169, 97, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.9);
}
#orb-canvas { width: 100%; height: 100%; display: block; border-radius: 50%; }

@keyframes orbfloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}

/* ---------- AI page: Sextant at full scale ---------- */

.ai-stage {
  position: relative;
  /* iOS Safari's 100vh is the chrome-hidden height, which pushes the orb off
     centre as the address bar slides. dvh tracks the real viewport; the vh
     line stays as the fallback for anything that doesn't support it. */
  min-height: calc(100vh - 230px);
  min-height: calc(100dvh - 230px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0;
  isolation: isolate;
}
/* slow brass wash behind the orb */
.ai-field {
  position: absolute; z-index: -1;
  width: min(560px, 86vw); aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(168, 130, 60, 0.13) 0%, rgba(168, 130, 60, 0.05) 42%, rgba(0, 0, 0, 0) 70%);
  animation: aifield 9s ease-in-out infinite;
}
@keyframes aifield {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.09); opacity: 1; }
}

.ai-orb {
  position: relative;
  width: min(300px, 66vw); height: min(300px, 66vw);
  padding: 0; border: none; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 32% 26%, #ffffff 0%, #f7f4ec 55%, #ebe5d6 100%);
  box-shadow:
    0 0 0 1px rgba(22, 26, 34, 0.09),
    0 6px 18px rgba(16, 20, 28, 0.10),
    0 30px 70px rgba(16, 20, 28, 0.16),
    inset 0 2px 2px rgba(255, 255, 255, 0.9);
  animation: orbfloat 6s ease-in-out infinite;
  transition: transform 220ms cubic-bezier(.34, 1.4, .64, 1), box-shadow 260ms;
  /* iOS: kill the grey tap flash, the 300ms double-tap-zoom delay, and the
     text-selection callout that a fast double tap otherwise triggers. */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.ai-title, .ai-hint { -webkit-user-select: none; user-select: none; }
#ai-orb-canvas { width: 100%; height: 100%; display: block; border-radius: 50%; }

/* the ring that snaps out on the first press */
.ai-ring {
  position: absolute; inset: -3px;
  border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(168, 130, 60, 0);
}

/* --- press 1: charged, waiting for the second --- */
.ai-orb.charged {
  animation: none;
  transform: scale(1.05);
  box-shadow:
    0 0 0 1px rgba(168, 130, 60, 0.5),
    0 6px 18px rgba(16, 20, 28, 0.12),
    0 30px 70px rgba(16, 20, 28, 0.18),
    0 0 60px rgba(201, 169, 97, 0.55),
    inset 0 2px 2px rgba(255, 255, 255, 0.9);
}
.ai-orb.charged .ai-ring { animation: airing 620ms cubic-bezier(.22, 1, .36, 1) both; }
@keyframes airing {
  from { transform: scale(0.97); border-color: rgba(168, 130, 60, 0.85); }
  to { transform: scale(1.3); border-color: rgba(168, 130, 60, 0); }
}
/* the tap itself: a hard, quick compression */
.ai-orb:active { transform: scale(0.955); transition-duration: 90ms; }

/* --- press 2: ignition --- */
.ai-orb.igniting {
  animation: aiignite 620ms cubic-bezier(.5, 0, .2, 1) forwards;
}
@keyframes aiignite {
  0% { transform: scale(1.05); }
  22% { transform: scale(0.86); }          /* inhale */
  100% { transform: scale(14); opacity: 0; } /* swallow the screen */
}

.ai-title {
  margin-top: 30px;
  font-family: var(--ui); font-size: 15px; font-weight: 560;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink);
}
.ai-hint {
  margin-top: 8px; height: 18px;
  font-family: var(--ui); font-size: 12.5px; font-weight: 500;
  color: var(--faint); letter-spacing: 0.02em;
  transition: color 200ms, opacity 200ms;
}
.ai-hint.armed { color: var(--gold); opacity: 1; animation: aihint 500ms ease both; }
@keyframes aihint {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

/* the gate: flash, then the game's own night sky */
.ai-gate {
  position: fixed; inset: 0; z-index: 90;
  background: #0d0b16; opacity: 0; pointer-events: none;
  animation: aigate 620ms cubic-bezier(.5, 0, .2, 1) forwards;
}
@keyframes aigate {
  0% { opacity: 0; }
  55% { opacity: 0; }
  100% { opacity: 1; }
}
.ai-gate-flash {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, #fffdf6 0%, rgba(201, 169, 97, 0.5) 30%, rgba(255, 255, 255, 0) 62%);
  opacity: 0;
  animation: aiflash 520ms ease-out forwards;
}
@keyframes aiflash {
  0% { opacity: 0; transform: scale(0.2); }
  32% { opacity: 0.95; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.9); }
}

@media (max-width: 700px) {
  /* the bottom tab bar already claims space via body padding */
  .ai-stage { min-height: calc(100vh - 200px); min-height: calc(100dvh - 200px); }
  .ai-title { margin-top: 24px; font-size: 14px; }
  .ai-orb { width: min(272px, 70vw); height: min(272px, 70vw); }
}

@media (prefers-reduced-motion: reduce) {
  .ai-field, .ai-orb, .ai-orb.charged .ai-ring { animation: none; }
  .ai-orb.igniting { animation: none; opacity: 0.35; }
  .ai-gate, .ai-gate-flash { animation: none; }
  .ai-gate { opacity: 1; }
}

.mm-bubble {
  position: fixed; right: 22px; bottom: 104px; z-index: 30;
  width: 344px; max-width: calc(100vw - 44px);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(22, 26, 34, 0.08);
  border-radius: 12px; padding: 16px 18px 14px;
  box-shadow: var(--sh-pop);
  animation: bubblein 420ms cubic-bezier(.34,1.4,.64,1) both;
  transform-origin: bottom right;
}
@keyframes bubblein {
  from { opacity: 0; transform: scale(0.85) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.mm-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.mm-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e9d5a4, #a8823c 65%, #6d5426);
  box-shadow: 0 0 8px rgba(168, 130, 60, 0.5);
}
.mm-title { font-size: 13.5px; font-weight: 560; letter-spacing: -0.006em; flex: 1; }
.mm-tag {
  color: var(--sub); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--hair); border-radius: 999px; padding: 2px 8px;
  background: rgba(22, 26, 34, 0.03); white-space: nowrap;
}
.mm-close {
  background: none; border: none; color: var(--faint); cursor: pointer;
  font-size: 12px; padding: 2px 5px; border-radius: 6px;
}
.mm-close:hover { color: var(--ink); background: rgba(22, 26, 34, 0.06); }
.mm-text {
  font-size: 13.5px; line-height: 1.58; color: #33353b;
  min-height: 42px; max-height: 250px; overflow-y: auto;
  padding-right: 6px; scrollbar-width: thin;
}
.mm-text .mm-caret {
  display: inline-block; width: 7px; height: 14px; margin-left: 2px;
  background: var(--gold); vertical-align: -2px;
  animation: caret 800ms steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.mm-seg {
  display: flex; gap: 2px; margin-top: 12px;
  background: rgba(22, 26, 34, 0.05); border-radius: 8px; padding: 2.5px;
}
.mm-seg button {
  flex: 1; border: none; background: none; cursor: pointer;
  font-family: var(--ui); font-size: 11px; font-weight: 560; color: var(--sub);
  padding: 5.5px 0; border-radius: 6px; transition: background 130ms, color 130ms;
}
.mm-seg button.active { background: #ffffff; color: var(--ink); box-shadow: 0 1px 2px rgba(16, 20, 28, 0.1); }
.mm-seg button[data-p="aggressive"].active { color: var(--down); }
.mm-seg button[data-p="cautious"].active { color: var(--up); }

.mm-actions { display: flex; gap: 8px; align-items: center; }
.mm-tip-btn {
  background: none; border: none; cursor: pointer;
  font-family: var(--ui); font-size: 11.5px; font-weight: 560; color: var(--sub);
  padding: 6px 8px; border-radius: 7px;
}
.mm-tip-btn:hover { color: var(--ink); background: rgba(22, 26, 34, 0.05); }

.mm-report-head {
  font-size: 12px; font-weight: 590; color: var(--ink);
  margin-bottom: 8px; letter-spacing: -0.005em;
}
.mm-finding {
  display: flex; gap: 9px; padding: 5px 0;
  font-size: 12.5px; line-height: 1.5; color: #33353b;
  animation: findingin 380ms cubic-bezier(.25,.8,.3,1) both;
}
.mm-finding i { width: 7px; height: 7px; border-radius: 50%; margin-top: 5.5px; flex: 0 0 auto; }
.mm-finding.good i { background: var(--up); }
.mm-finding.watch i { background: var(--gold); }
.mm-finding.flag i { background: var(--down); }
@keyframes findingin {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

.mm-report-hint {
  float: right; font-weight: 450; font-size: 10px; color: var(--faint); letter-spacing: 0.02em;
}
.mm-finding.has-sol { cursor: pointer; border-radius: 8px; margin: 0 -6px; padding-left: 6px; padding-right: 6px; }
.mm-finding.has-sol:hover { background: rgba(22, 26, 34, 0.035); }
.mm-fix {
  color: var(--gold); font-size: 10px; font-weight: 650; white-space: nowrap;
  letter-spacing: 0.05em; margin-left: 4px;
}
.mm-finding.open .mm-fix { color: var(--sub); }
.mm-sol {
  margin: 2px 0 10px 15px; padding: 9px 12px;
  border-left: 2px solid var(--gold); border-radius: 0 8px 8px 0;
  background: rgba(168, 130, 60, 0.06);
  font-size: 12px; line-height: 1.55; color: #44464c;
  animation: findingin 320ms cubic-bezier(.25,.8,.3,1) both;
}
.mm-sol-tag {
  display: block; margin-bottom: 5px;
  font-size: 9px; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold);
}

/* scan theater: Sextant reading the statement */
.scan-theater { position: relative; padding: 4px 0 2px; overflow: hidden; }
.scan-step {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; color: var(--sub); padding: 5px 0;
  animation: scanstep 340ms cubic-bezier(.25,.8,.3,1) both;
}
.scan-step i {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px solid rgba(168, 130, 60, 0.5); background: transparent;
  animation: scandot 340ms 260ms both;
}
@keyframes scanstep {
  from { opacity: 0; transform: translateX(-7px); }
  to { opacity: 1; transform: none; }
}
@keyframes scandot {
  to { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 7px rgba(168, 130, 60, 0.5); }
}
.scan-beam {
  position: absolute; left: -6px; right: -6px; height: 20px; top: -20px;
  background: linear-gradient(180deg, rgba(168,130,60,0) 0%, rgba(201,169,97,0.16) 50%, rgba(168,130,60,0) 100%);
  border-bottom: 1px solid rgba(168, 130, 60, 0.4);
  animation: scanbeam 1.5s cubic-bezier(.4,.1,.6,.9) infinite;
}
@keyframes scanbeam {
  from { top: -22px; } to { top: 110%; }
}
.scan-title { font-size: 12px; font-weight: 590; color: var(--ink); margin-bottom: 6px; }

.mm-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hair-soft);
}
.mm-note { color: var(--faint); font-size: 10.5px; letter-spacing: 0.03em; }
.mm-next {
  background: #211e19; border: 1px solid #211e19; color: #ffffff;
  font-family: var(--ui); font-size: 11.5px; font-weight: 600;
  padding: 6px 13px; border-radius: 8px; cursor: pointer;
}
.mm-next:hover { background: #2c2820; }
.mm-next:active { transform: scale(0.97); }

/* ---------- masthead ---------- */

.masthead {
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 25;
  margin: 0 -32px; padding: 16px 32px;
  border-bottom: 1px solid transparent;
  transition: background 200ms, border-color 200ms, padding 200ms;
}
.masthead.scrolled {
  background: rgba(247, 246, 242, 0.85);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: rgba(38, 32, 22, 0.07);
  padding-top: 12px; padding-bottom: 12px;
}
.brand { display: flex; align-items: center; gap: 9px; }
.brand-mark { display: block; flex: 0 0 auto; }
.brand-name {
  font-size: 15.5px; font-weight: 590; letter-spacing: -0.012em; color: #16171b;
}
.nav { display: flex; gap: 4px; }
.nav-link {
  color: var(--sub); text-decoration: none; font-size: 13px; font-weight: 550;
  padding: 6px 12px; border-radius: 8px; transition: color 140ms, background 140ms;
}
.nav-link:hover { color: var(--ink); background: rgba(38, 32, 22, 0.045); }
.nav-link.active { color: var(--ink); background: rgba(38, 32, 22, 0.07); }
.statement-date { color: var(--faint); font-size: 11.5px; font-weight: 450; }

/* ---------- hero & kpis ---------- */

.hero { padding: 28px 24px 20px; margin-top: 36px; }
.hero .eyebrow { margin-bottom: 14px; }
.hero .delta { display: block; margin-top: 10px; }
.hero-chart { margin-top: 22px; }
.hero-chart-note {
  color: var(--faint); font-size: 11px; font-family: var(--mono);
  margin-top: 8px; text-align: right;
}

.kpis { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.kpi {
  background: #ffffff; border: 1px solid rgba(22, 26, 34, 0.07);
  border-radius: 12px; padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(16, 20, 28, 0.03);
  display: flex; flex-direction: column; gap: 5px;
}
.kpi-label {
  color: var(--faint); font-size: 11px; font-weight: 510;
  letter-spacing: 0.04em;
}
.kpi-value {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 19px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em;
}
.kpi .solvency { margin-top: 4px; }

/* ---------- thesis ---------- */

.thesis { padding: 72px 0 52px; }
.thesis-cf { padding: 54px 0 46px; }

.eyebrow {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  color: var(--faint); font-size: 11px; font-weight: 560;
  letter-spacing: 0.06em; margin-bottom: 18px;
}

.networth {
  font-family: var(--display);
  font-weight: 540;
  font-variation-settings: "opsz" 60;
  font-size: clamp(46px, 8vw, 74px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  font-variant-numeric: lining-nums tabular-nums;
  color: #1b1813;
}
.networth .cents { font-size: 0.42em; font-weight: 510; letter-spacing: -0.01em; color: var(--faint); }
.networth-cf.neg { color: var(--down); }
.networth-cf { font-size: clamp(38px, 7vw, 62px); }

.rule-gold {
  height: 1.5px; border-radius: 1px;
  background: linear-gradient(90deg, #e8d194 0%, #a8823c 22%, #cba95f 48%, rgba(168, 130, 60, 0.06) 100%);
  margin: 26px 0 20px;
  transform-origin: left;
  animation: drawrule 900ms cubic-bezier(.25,.8,.3,1) both;
}
@keyframes drawrule { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.thesis-meta { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 14px; }
.delta { font-size: 14px; color: var(--sub); }
.delta.up { color: var(--up); }
.delta.down { color: var(--down); }
.split { display: flex; gap: 30px; color: var(--sub); font-size: 13px; } /* legacy */
.split-item b { color: var(--ink); font-weight: 600; margin-left: 8px; }
.split-wrap { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.solvency {
  width: 100%; min-width: 190px; height: 3px; border-radius: 2px;
  background: rgba(229, 72, 77, 0.2); overflow: hidden;
}
.solvency i {
  display: block; height: 100%; border-radius: 2px;
  background: var(--gold);
  transition: width 800ms cubic-bezier(.25,.8,.3,1);
}

/* ---------- cashflow ---------- */

.cf-nav { margin-left: 10px; letter-spacing: 0; }
.cf-arrow {
  background: #ffffff;
  border: 1px solid rgba(22, 26, 34, 0.12); color: var(--sub);
  width: 25px; height: 25px; border-radius: 7px; cursor: pointer;
  font-size: 15px; line-height: 1; vertical-align: -3px;
}
.cf-arrow:hover { color: var(--gold); border-color: rgba(168, 130, 60, 0.45); }
.cf-arrow:disabled { opacity: 0.4; cursor: default; }

.cf-legend { display: flex; gap: 22px; margin-top: 12px; color: var(--sub); font-size: 12px; }
.cf-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }
.cf-sw-in { background: var(--gold); }
.cf-sw-out { background: var(--down); }

.cf-quick { display: flex; gap: 10px; align-items: center; }
#cf-quick-in {
  flex: 1; font-family: var(--ui); font-size: 15px;
  background: var(--card-solid); color: var(--ink);
  border: 1px solid rgba(22, 26, 34, 0.12); border-radius: 8px; padding: 12px 14px;
}
#cf-quick-in::placeholder { color: var(--faint); }
#cf-quick-in:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(168, 130, 60, 0.12);
}
.cf-cat-chip {
  font-family: var(--ui); font-size: 11px; font-weight: 650;
  letter-spacing: 0.09em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid rgba(168, 130, 60, 0.4); color: var(--gold);
  background: rgba(168, 130, 60, 0.08);
  border-radius: 999px; padding: 7px 13px; cursor: pointer;
}
.cf-cat-chip.income { border-color: rgba(31, 157, 85, 0.4); color: var(--up); background: rgba(31, 157, 85, 0.07); }
.cf-cat-chip:active { transform: scale(0.95); }

.cf-repeats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cf-repeat {
  font-family: var(--ui); font-size: 12.5px; font-weight: 550; color: var(--ink);
  background: rgba(22, 26, 34, 0.04);
  border: 1px solid transparent; border-radius: 999px;
  padding: 7px 14px; cursor: pointer;
  transition: background 130ms, border-color 130ms;
}
.cf-repeat b { font-family: var(--mono); font-weight: 500; color: var(--sub); margin-left: 6px; }
.cf-repeat:hover { background: rgba(22, 26, 34, 0.07); border-color: rgba(22, 26, 34, 0.08); }
.cf-repeat:active { transform: scale(0.96); }
.cf-detailed { margin-top: 16px; margin-bottom: 0; }
.cf-detailed[open] summary { margin-bottom: 14px; }

.cf-form {
  display: grid;
  grid-template-columns: auto 130px 150px 1fr 150px auto;
  gap: 10px; align-items: center;
}
.cf-form input, .cf-form select {
  font-family: var(--ui); font-size: 14px;
  background: var(--card-solid); color: var(--ink);
  border: 1px solid var(--hair); border-radius: 10px; padding: 9px 12px;
}
.cf-form input:focus, .cf-form select:focus { outline: none; border-color: rgba(168, 130, 60, 0.55); }
#cf-amount { font-family: var(--mono); }
#cf-date { color-scheme: light; }
.cf-kind {
  display: flex; border-radius: 10px; overflow: hidden;
  background: rgba(22, 26, 34, 0.05); padding: 3px; gap: 2px;
}
.cf-kind-btn {
  background: none; border: none; color: var(--sub); cursor: pointer;
  font-family: var(--ui); font-size: 13px; font-weight: 600; padding: 7px 13px;
  border-radius: 8px;
}
.cf-kind-btn.active[data-kind="expense"] { background: #ffffff; color: var(--down); box-shadow: 0 1px 3px rgba(16,20,28,0.12); }
.cf-kind-btn.active[data-kind="income"] { background: #ffffff; color: var(--up); box-shadow: 0 1px 3px rgba(16,20,28,0.12); }

.cf-day {
  font-size: 11px; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint); padding: 14px 0 6px; border-bottom: 1px solid var(--hair-soft);
}
.cf-row { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; }
.cf-note { font-size: 14px; font-weight: 510; }
.cf-cat {
  color: var(--sub); font-size: 10px; font-weight: 600; margin-left: 8px;
  border: 1px solid var(--hair); border-radius: 999px; padding: 1px 8px;
  letter-spacing: 0.08em; text-transform: uppercase; background: rgba(22, 26, 34, 0.02);
}
.cf-amt { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 14.5px; }
.cf-amt.in { color: var(--up); }
.cf-amt.out { color: var(--down); }

/* ---------- panels ---------- */

.panel {
  background: #ffffff;
  border: 1px solid rgba(22, 26, 34, 0.07);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(16, 20, 28, 0.03);
}
.panel-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 20px; flex-wrap: wrap; gap: 8px;
}
.panel-head h2 { font-weight: 560; font-size: 14px; letter-spacing: -0.006em; color: var(--ink); }
.panel-note { color: var(--faint); font-size: 12px; }
.panel-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- chart ---------- */

.chart-wrap { position: relative; }
#chart { width: 100%; height: 220px; display: block; }
.chart-hi, .chart-lo {
  position: absolute; left: 0; pointer-events: none;
  font-family: var(--mono); font-size: 10px; color: var(--faint); letter-spacing: 0.02em;
}
.chart-hi { top: 2px; }
.chart-lo { bottom: 6px; }
.chart-tip {
  position: absolute; pointer-events: none;
  background: rgba(28, 29, 33, 0.94); border-radius: 10px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 7px 11px; font-family: var(--mono); font-size: 12px;
  color: #ffffff; white-space: nowrap; transform: translate(-50%, -130%);
  box-shadow: 0 6px 20px rgba(16, 20, 28, 0.25);
}
.chart-tip small { display: block; color: rgba(255, 255, 255, 0.6); }

/* ---------- portfolio ---------- */

.btn {
  font-family: var(--ui); font-size: 13px; font-weight: 560;
  background: #ffffff;
  border: 1px solid rgba(22, 26, 34, 0.13); color: var(--ink);
  padding: 8px 14px; border-radius: 7px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 20, 28, 0.05);
  transition: background 130ms, border-color 130ms, box-shadow 130ms;
}
.btn:hover { background: #f6f7f9; border-color: rgba(22, 26, 34, 0.2); }
.btn:active, .mm-next:active { transform: scale(0.98); }
.icon-btn:active { transform: scale(0.92); }
.btn-gold {
  background: #211e19; border-color: #211e19; color: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 20, 28, 0.18);
}
.btn-gold:hover { background: #2c2820; border-color: #2c2820; }
.btn-sm { padding: 6px 13px; font-size: 12px; }
.btn-sm.busy { opacity: 0.55; pointer-events: none; }

.pf-head, .pf-row {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr 1fr 0.9fr 1.1fr 52px;
  gap: 10px; align-items: baseline;
}
.pf-head {
  font-size: 10px; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase;
  color: #a4a7ae; padding-bottom: 10px; border-bottom: 1px solid var(--hair);
}
.pf-row { padding: 10px 0; }
.pf-sym { font-family: var(--mono); font-size: 14px; font-weight: 500; }
.pf-name { display: block; color: var(--faint); font-family: var(--ui); font-size: 11px; font-weight: 500; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 14px; text-align: right; }
.pf-qty, .pf-price {
  background: none; border: none; color: var(--ink); cursor: pointer;
  padding: 2px 6px; border-radius: 6px;
}
.pf-qty:hover, .pf-price:hover, .pf-qty:focus-visible, .pf-price:focus-visible {
  background: rgba(168, 130, 60, 0.1); color: var(--gold); outline: none;
}
.pf-price.stale { color: var(--faint); }
.pf-chg { font-size: 13px; }
.pf-chg.up { color: var(--up); }
.pf-chg.down { color: var(--down); }
.pf-chg.na { color: var(--faint); }
.pf-total-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--hair);
}
.pf-total-label { font-size: 10.5px; font-weight: 650; letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint); }
.pf-total-value { font-family: var(--mono); font-size: 16px; font-weight: 500; }
.pf-total-chg { font-family: var(--mono); font-size: 13px; margin-left: 12px; }
input.pf-edit, input.lg-edit {
  font-family: var(--mono); font-size: 14px; width: 120px;
  background: var(--card-solid); color: var(--ink);
  border: 1.5px solid var(--gold); border-radius: 6px; padding: 2px 7px;
  text-align: right;
}
input.lg-edit { width: 140px; font-size: 15px; }
.lg-tools { display: flex; gap: 4px; }
.icon-btn {
  background: none; border: none; color: var(--faint); cursor: pointer;
  font-size: 12px; width: 26px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; opacity: 0;
  transition: opacity 120ms, background 120ms, color 120ms, transform 120ms;
}
.lg-row:hover .icon-btn, .pf-row:hover .icon-btn, .hm-row:hover .icon-btn,
.cf-row:hover .icon-btn, .icon-btn:focus-visible { opacity: 1; }
.icon-btn:hover { color: var(--ink); background: rgba(22, 26, 34, 0.07); }
.icon-btn.danger:hover { color: var(--down); background: rgba(229, 72, 77, 0.1); }

/* ---------- vault summary (ledger panel) ---------- */

.vt-sum-row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 11px 8px; margin: 0 -8px; border-radius: 10px;
  transition: background 140ms;
}
.vt-sum-row:hover { background: rgba(22, 26, 34, 0.028); }
.vt-sum-name { font-size: 14px; font-weight: 510; }
.vt-sum-sub {
  color: var(--faint); font-size: 11px; font-weight: 500;
  margin-left: 8px; font-family: var(--mono);
}
.vt-sum-acc { color: var(--gold); }
.vt-sum-val { font-size: 15px; color: var(--ink); }
.vt-sum-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 10px; padding-top: 11px; border-top: 1px solid var(--hair);
  font-size: 11px; font-weight: 650; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--faint);
}
.vt-sum-total .num {
  font-size: 15px; font-weight: 550; color: var(--ink);
  letter-spacing: 0; text-transform: none;
}

/* ---------- homes ---------- */

.hm-row {
  display: grid;
  grid-template-columns: 1.7fr 0.9fr 1.2fr 1.1fr 52px;
  gap: 10px; align-items: baseline;
  padding: 11px 0;
}
.hm-name { font-size: 14px; font-weight: 510; }
.hm-meta {
  display: block; color: var(--faint); font-size: 11.5px; font-weight: 500; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hm-badge {
  display: inline-block; margin-left: 7px; padding: 1px 8px;
  border: 1px solid var(--hair); border-radius: 999px; background: rgba(22, 26, 34, 0.03);
  color: var(--sub); font-size: 9.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  vertical-align: 1px;
}
.hm-num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.hm-ppm2 { font-size: 12.5px; color: var(--sub); }
.hm-range { font-size: 11.5px; color: var(--faint); }
.hm-value { font-size: 15px; font-weight: 500; }
.hm-total-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--hair);
}

.scan {
  position: relative; overflow: hidden;
  border: 1px solid rgba(168, 130, 60, 0.3); border-radius: 8px;
  padding: 13px 16px; margin-bottom: 14px;
  background: rgba(168, 130, 60, 0.06);
}
.scan-text {
  font-family: var(--mono); font-size: 12px; color: var(--gold);
  letter-spacing: 0.05em;
}
.scan-text::after { content: "\2588"; animation: caret 700ms steps(1) infinite; margin-left: 4px; }
.scan-sweep {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: sweep 1200ms cubic-bezier(.4,.2,.3,1) infinite;
}
@keyframes sweep { to { transform: translateX(100%); } }

/* ---------- allocation ---------- */

.alloc-row { display: grid; grid-template-columns: 110px 1fr 100px 56px; gap: 14px; align-items: center; padding: 7px 0; }
.alloc-name { color: var(--sub); font-size: 13px; font-weight: 550; text-transform: capitalize; }
.alloc-bar {
  height: 6px; border-radius: 3px; overflow: hidden;
  background: rgba(22, 26, 34, 0.06);
}
.alloc-fill {
  height: 100%; border-radius: 3px;
  background: var(--gold);
  transition: width 700ms cubic-bezier(.25,.8,.3,1);
}
.alloc-val { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; font-size: 12px; color: var(--sub); }
.alloc-pct { text-align: right; font-size: 13px; color: var(--ink); }

/* ---------- ledger ---------- */

.lg-group { margin-bottom: 6px; }
.lg-group + .lg-group { margin-top: 22px; }
.lg-group-title {
  font-size: 10.5px; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint); padding-bottom: 10px; border-bottom: 1px solid var(--hair);
  margin-bottom: 4px; display: flex; justify-content: space-between;
}
.lg-group-title .num { color: var(--ink); letter-spacing: 0; font-weight: 500; }

.lg-row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 11px 8px; margin: 0 -8px; border-radius: 10px;
  transition: background 140ms;
}
.lg-row:hover { background: rgba(22, 26, 34, 0.035); }
.lg-name { font-size: 14px; font-weight: 510; }
.lg-cat { color: var(--faint); font-size: 11px; font-weight: 500; margin-left: 8px; text-transform: capitalize; }
.lg-leader {
  flex: 1; border-bottom: 1px dotted rgba(22, 26, 34, 0.16);
  transform: translateY(-4px);
}
.lg-value {
  font-size: 15px; background: none; border: none; color: var(--ink);
  cursor: pointer; padding: 2px 7px; border-radius: 6px;
}
.lg-value:hover, .lg-value:focus-visible { background: rgba(168, 130, 60, 0.1); color: var(--gold); outline: none; }
.lg-value.liability { color: var(--down); }
.lg-value.liability:hover { color: var(--down); }

/* ---------- empty states ---------- */

.empty { text-align: center; padding: 34px 0 22px; }
.empty p { font-size: 18px; font-weight: 560; letter-spacing: -0.012em; }
.empty-sub {
  color: var(--sub); font-size: 14px !important; font-weight: 400 !important;
  max-width: 420px; margin: 10px auto 22px;
}
.empty-inline { color: var(--sub); font-size: 14px; padding: 8px 0 2px; max-width: 500px; }

/* ---------- dialogs ---------- */

.scrim {
  position: fixed; inset: 0; background: rgba(24, 26, 31, 0.28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  /* above the bottom tab bar (z-index 40) — as a mobile bottom sheet the dialog
     sits flush to the bottom edge, and its action row was being covered */
  display: flex; align-items: center; justify-content: center; z-index: 50;
  padding: 20px;
}
.dialog {
  background: #ffffff; border: 1px solid rgba(22, 26, 34, 0.07);
  border-radius: 12px; padding: 26px; width: 100%; max-width: 440px;
  box-shadow: 0 4px 12px rgba(16, 20, 28, 0.08), 0 24px 60px rgba(16, 20, 28, 0.16);
}
.dialog h3 { font-weight: 590; font-size: 18px; letter-spacing: -0.014em; margin-bottom: 20px; }
.dialog label {
  display: block; font-size: 11px; font-weight: 650; color: var(--sub);
  letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 16px;
}
.dialog input, .dialog select {
  display: block; width: 100%; margin-top: 7px;
  font-family: var(--ui); font-size: 15px; font-weight: 450;
  background: var(--card-solid); color: var(--ink);
  border: 1px solid rgba(22, 26, 34, 0.12); border-radius: 8px; padding: 10px 12px;
}
.dialog input:focus, .dialog select:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(168, 130, 60, 0.12);
}
#f-value { font-family: var(--mono); }
.dialog-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dialog-advanced { margin-bottom: 16px; }
.dialog-advanced summary {
  color: var(--sub); font-size: 12px; font-weight: 600; letter-spacing: 0.03em; cursor: pointer;
  margin-bottom: 12px;
}
.dialog-advanced summary:hover { color: var(--ink); }
.lbl-opt { color: var(--gold-soft); letter-spacing: 0.02em; text-transform: none; font-size: 10px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.form-error { color: var(--down); font-size: 13px; font-weight: 500; margin-top: 12px; }

/* ---------- toast ---------- */

.toast {
  position: fixed; left: 50%; bottom: 30px; z-index: 60;
  transform: translateX(-50%) translateY(10px);
  background: rgba(28, 29, 33, 0.94); color: #ffffff;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 13px; font-weight: 550; padding: 11px 19px; border-radius: 999px;
  box-shadow: 0 8px 30px rgba(16, 20, 28, 0.3);
  opacity: 0; pointer-events: auto;
  transition: opacity 240ms, transform 240ms cubic-bezier(.25,.8,.3,1);
}
.toast:not(.show) { pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-undo {
  background: none; border: none; color: var(--gold-bright); cursor: pointer;
  font-family: var(--ui); font-size: 13px; font-weight: 700; margin-left: 14px; padding: 0;
}
.toast-undo:hover { text-decoration: underline; }

.colophon {
  color: var(--faint); font-size: 12px; text-align: center;
  padding-top: 30px; margin-top: 14px; border-top: 1px solid var(--hair-soft);
}

/* ---------- Sextant playbook chips ---------- */

.mm-plays { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.mm-play {
  font: inherit; font-size: 11.5px; font-weight: 550;
  color: var(--sub); cursor: pointer;
  background: rgba(168, 130, 60, 0.07);
  border: 1px solid rgba(168, 130, 60, 0.2);
  border-radius: 999px; padding: 5px 11px;
  transition: background 140ms, color 140ms, border-color 140ms;
}
.mm-play:hover { background: rgba(168, 130, 60, 0.14); color: var(--ink); border-color: rgba(168, 130, 60, 0.4); }
.mm-play.active { background: var(--gold); color: #fff; border-color: var(--gold); }
.mm-play-nav {
  display: flex; align-items: center; gap: 8px; margin: 2px 0 10px;
  font-size: 11px; color: var(--faint); font-family: var(--mono);
}
.mm-play-nav button {
  font: inherit; cursor: pointer; color: var(--gold);
  background: none; border: 1px solid rgba(168, 130, 60, 0.3);
  border-radius: 6px; padding: 2px 9px;
}
.mm-play-nav button:hover { background: rgba(168, 130, 60, 0.1); }
.mm-play-nav .mm-play-exit { margin-left: auto; border: none; color: var(--faint); }

/* ---------- editorial refinements ---------- */

.empty-mark { display: block; margin-bottom: 10px; opacity: 0.75; }


/* the meridian line: a fine gold rule under the masthead */
.masthead::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(168, 130, 60, 0.45) 18%,
    rgba(168, 130, 60, 0.45) 82%, transparent 100%);
  pointer-events: none;
}

/* serif carries through to section titles — the statement voice */
.panel-head h2, .dialog h3 {
  font-family: var(--display);
  font-weight: 560;
  font-variation-settings: "opsz" 22;
  font-size: 16.5px;
  letter-spacing: 0;
}

/* styled scrollbars, warm and thin */
* { scrollbar-width: thin; scrollbar-color: rgba(120, 104, 74, 0.35) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(120, 104, 74, 0.3); border-radius: 999px;
  border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(120, 104, 74, 0.5); border: 2px solid transparent; background-clip: content-box; }

/* ---------- the vault: live metal accrual ---------- */

.hero-vault {
  background-image: linear-gradient(180deg, #fdfbf4 0%, #f8f2e4 100%);
  border-top: 2px solid rgba(168, 130, 60, 0.35);
}

.vt-live {
  display: flex; gap: 24px; align-items: stretch; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair-soft);
}
.vt-counter { min-width: 240px; }
.vt-counter-label, .vt-today-label {
  display: block; font-size: 10px; font-weight: 590; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 5px;
}
.vt-counter-label::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); margin-right: 6px; vertical-align: 1px;
  animation: vtlive 1.6s ease-in-out infinite;
}
@keyframes vtlive { 50% { opacity: 0.3; } }
.vt-counter-val {
  font-family: var(--mono); font-size: 27px; font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--gold);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .vt-counter-val > span {
    background-image: linear-gradient(105deg,
      #8a6a2f 0%, #c9a961 35%, #f3e3b0 50%, #c9a961 65%, #8a6a2f 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: goldsheen 5.5s ease-in-out infinite;
  }
}
@keyframes goldsheen {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .vt-counter-val > span { animation: none; }
}
.vt-counter-val em { font-style: normal; font-size: 14px; color: var(--faint); margin-left: 4px; }
.vt-counter-eur { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--sub); margin-top: 3px; }
.vt-today { border-left: 1px solid var(--hair-soft); padding-left: 24px; display: flex; flex-direction: column; justify-content: center; }
.vt-today-val { font-family: var(--mono); font-size: 17px; font-variant-numeric: tabular-nums; color: var(--ink); }

.vt-lease { padding: 14px 0; }
.vt-lease + .vt-lease { border-top: 1px solid var(--hair-soft); }
.vt-l-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vt-dot { width: 10px; height: 10px; border-radius: 50%; align-self: center; flex: 0 0 auto; }
.vt-dot.gold { background: linear-gradient(135deg, #e6c876, #a8823c); box-shadow: 0 0 6px rgba(201,169,97,.5); }
.vt-dot.silver { background: linear-gradient(135deg, #d6dade, #9aa1a8); }
.vt-dot.platinum { background: linear-gradient(135deg, #c4ccd2, #7e8a93); }
.vt-l-name { font-size: 14px; font-weight: 560; }
.vt-l-terms { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.vt-l-value { margin-left: auto; font-family: var(--mono); font-size: 15px; font-variant-numeric: tabular-nums; }
.vt-l-acc {
  font-family: var(--mono); font-size: 12.5px; color: var(--gold);
  font-variant-numeric: tabular-nums; margin: 7px 0 6px;
}
.vt-l-acc b { font-weight: 500; }
.vt-l-daily { color: var(--sub); font-size: 11px; font-family: var(--mono); margin-left: 10px; }
.vt-bar {
  height: 4px; border-radius: 999px; background: rgba(38, 32, 22, 0.07);
  overflow: hidden; max-width: 420px;
}
.vt-bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), #d7bc7e);
  transition: width 400ms linear;
}
.vt-bar-note { font-size: 10.5px; color: var(--faint); font-family: var(--mono); margin-top: 4px; }
.vt-fields { grid-template-columns: 1fr 1fr 1fr; }
.vt-fields select {
  width: 100%; font-family: var(--ui); font-size: 14px; color: var(--ink);
  background: #fff; border: 1px solid rgba(38, 32, 22, 0.12); border-radius: 8px; padding: 10px 12px;
}

.vt-adj-note { font-size: 11.5px; color: var(--faint); margin-top: 8px; line-height: 1.5; min-height: 17px; }
.vt-lease .icon-btn.adj { font-size: 15px; font-weight: 500; color: var(--sub); }
.vt-lease .icon-btn.adj:hover { color: var(--gold); background: rgba(168, 130, 60, 0.08); }

/* ---------- engraved hero, serif figures ---------- */

.hero {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='230'><g fill='none' stroke='%23a8823c' stroke-width='0.6' opacity='0.07'><circle cx='300' cy='-40' r='28'/><circle cx='300' cy='-40' r='43'/><circle cx='300' cy='-40' r='58'/><circle cx='300' cy='-40' r='73'/><circle cx='300' cy='-40' r='88'/><circle cx='300' cy='-40' r='103'/><circle cx='300' cy='-40' r='118'/><circle cx='300' cy='-40' r='133'/><circle cx='300' cy='-40' r='148'/><circle cx='300' cy='-40' r='163'/><circle cx='300' cy='-40' r='178'/><circle cx='300' cy='-40' r='193'/><circle cx='300' cy='-40' r='208'/><circle cx='300' cy='-40' r='223'/><circle cx='300' cy='-40' r='238'/><circle cx='300' cy='-40' r='253'/><circle cx='300' cy='-40' r='268'/><circle cx='300' cy='-40' r='283'/><circle cx='300' cy='-40' r='298'/><circle cx='300' cy='-40' r='313'/><circle cx='340' cy='30' r='28'/><circle cx='340' cy='30' r='43'/><circle cx='340' cy='30' r='58'/><circle cx='340' cy='30' r='73'/><circle cx='340' cy='30' r='88'/><circle cx='340' cy='30' r='103'/><circle cx='340' cy='30' r='118'/><circle cx='340' cy='30' r='133'/><circle cx='340' cy='30' r='148'/><circle cx='340' cy='30' r='163'/><circle cx='340' cy='30' r='178'/><circle cx='340' cy='30' r='193'/><circle cx='340' cy='30' r='208'/><circle cx='340' cy='30' r='223'/><circle cx='340' cy='30' r='238'/><circle cx='340' cy='30' r='253'/></g></svg>");
  background-repeat: no-repeat;
  background-position: top right;
}
.delta { font-variant-numeric: tabular-nums; }
.brand-name { letter-spacing: 0.01em; }

/* ---------- filter, pull-to-refresh, touch targets ---------- */

.cf-filter {
  font-family: var(--ui); font-size: 12.5px; color: var(--ink);
  background: #fff; border: 1px solid rgba(22, 26, 34, 0.12); border-radius: 999px;
  padding: 5px 12px; width: 130px; transition: width 160ms;
}
.cf-filter:focus { outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(168,130,60,.1); width: 180px; }

.ptr {
  position: fixed; top: 0; left: 50%; z-index: 60;
  transform: translate(-50%, -46px);
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid rgba(22, 26, 34, 0.1);
  border-radius: 999px; padding: 8px 16px;
  font-size: 12px; font-weight: 560; color: var(--sub);
  box-shadow: 0 4px 16px rgba(16, 20, 28, 0.12);
  transition: transform 150ms; pointer-events: none;
}
.ptr .ptr-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 8px rgba(201, 169, 97, 0.6);
}
.ptr.armed .ptr-dot { animation: ptrpulse 0.7s ease-in-out infinite; }
.ptr.spinning .ptr-dot { animation: ptrpulse 0.5s ease-in-out infinite; }
@keyframes ptrpulse { 50% { transform: scale(1.7); opacity: 0.6; } }

/* generous touch targets on coarse pointers */
@media (pointer: coarse) {
  .icon-btn { width: 38px; height: 38px; opacity: 1; position: relative; }
  .icon-btn::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; }
  .lg-value, .ka-cur, .goal-chip { min-height: 34px; }
  .period-seg button { padding: 7px 11px; }
  .cf-filter { width: 110px; }
}

/* ---------- confirm dialog, hints ---------- */

.dialog-confirm { max-width: 380px; }
.btn-confirm-danger {
  background: var(--down); border-color: var(--down); color: #fff;
}
.btn-confirm-danger:hover { background: #d13a3f; border-color: #d13a3f; }

.hist-hint { color: var(--faint); font-size: 12px; margin-top: 12px; line-height: 1.5; }
.hist-hint button {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--gold); border-bottom: 1px dashed rgba(168, 130, 60, 0.5);
}
.hist-hint button:hover { border-bottom-style: solid; }

/* ---------- polish pass ---------- */

::selection { background: rgba(168, 130, 60, 0.25); }

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

button:focus-visible, a:focus-visible, .tab:focus-visible, summary:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px;
}

.h-count {
  font-style: normal; font-family: var(--mono); font-size: 11px; font-weight: 400;
  color: var(--faint); margin-left: 4px; vertical-align: 1px;
}

/* consistent quiet row hover */
.lg-row:hover, .pf-row:hover, .hm-row:hover, .cf-row:hover, .ka-row:hover,
.fam-member:hover, .rec-row:hover, .alloc-row:hover {
  background: rgba(22, 26, 34, 0.028);
  border-radius: 7px;
  box-shadow: 0 0 0 6px rgba(22, 26, 34, 0.028);
}

/* toast gets its gold tell */
.toast { display: flex; align-items: center; gap: 9px; }
.toast::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold-bright, #c9a961); flex: 0 0 auto;
  box-shadow: 0 0 8px rgba(201, 169, 97, 0.6);
}

/* skeleton shimmer while first data loads */
.booting .networth, .booting .kpi-value, .booting #delta {
  color: transparent !important; border-radius: 8px; user-select: none;
  background: linear-gradient(100deg, rgba(22,26,34,0.06) 40%, rgba(22,26,34,0.12) 50%, rgba(22,26,34,0.06) 60%);
  background-size: 240% 100%;
  animation: shimmer 1.2s linear infinite;
}
.booting .networth { min-width: 220px; }
@keyframes shimmer { from { background-position: 130% 0; } to { background-position: -110% 0; } }

/* view switch transition */
main.view-anim { animation: viewin 240ms cubic-bezier(.25,.8,.3,1) both; }
@keyframes viewin {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* tab bar: soft active pill */
.tab.active { background: rgba(168, 130, 60, 0.09); }

/* zero-state hero copy */
.delta.hint { color: var(--faint); font-weight: 450; }

/* ---------- onboarding, ask, backfill ---------- */

.ob-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ob-step {
  display: flex; gap: 12px; align-items: flex-start; text-align: left;
  background: rgba(22, 26, 34, 0.025); border: 1px solid rgba(22, 26, 34, 0.07);
  border-radius: 10px; padding: 14px; cursor: pointer; font-family: var(--ui);
  transition: border-color 130ms, background 130ms;
}
.ob-step:hover { border-color: rgba(168, 130, 60, 0.45); background: rgba(168, 130, 60, 0.04); }
.ob-step i {
  width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto; margin-top: 1px;
  border: 1.5px solid rgba(22, 26, 34, 0.25);
}
.ob-step.done { opacity: 0.55; cursor: default; }
.ob-step.done i {
  border-color: var(--up); background: var(--up);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>');
  background-size: 11px; background-position: center; background-repeat: no-repeat;
}
.ob-step b { display: block; font-size: 13px; font-weight: 560; color: var(--ink); margin-bottom: 2px; }
.ob-step span { font-size: 12px; color: var(--sub); line-height: 1.45; }

.mm-ask {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
  border: 1px solid rgba(22, 26, 34, 0.11); border-radius: 8px; padding: 7px 10px;
  color: var(--faint);
}
.mm-ask:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(168,130,60,.1); }
.mm-ask input {
  flex: 1; border: none; background: none; font-family: var(--ui);
  font-size: 12.5px; color: var(--ink); min-width: 0;
}
.mm-ask input:focus { outline: none; }

.pf-cur { font-size: 9.5px; color: var(--faint); margin-left: 3px; letter-spacing: 0.04em; }

/* ---------- chart controls, goal, account, recurring ---------- */

.chart-controls { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.period-seg { display: flex; gap: 2px; background: rgba(22, 26, 34, 0.05); border-radius: 7px; padding: 2px; }
.period-seg button {
  border: none; background: none; cursor: pointer;
  font-family: var(--ui); font-size: 11px; font-weight: 560; color: var(--sub);
  padding: 4px 9px; border-radius: 5px;
}
.period-seg button.active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(16, 20, 28, 0.1); }
.goal-chip {
  border: 1px solid rgba(168, 130, 60, 0.35); background: rgba(168, 130, 60, 0.06);
  color: var(--gold); font-family: var(--ui); font-size: 11px; font-weight: 560;
  border-radius: 999px; padding: 4px 11px; cursor: pointer;
}
.goal-chip:hover { background: rgba(168, 130, 60, 0.12); }
.goal-chip input {
  font-family: var(--mono); font-size: 11.5px; width: 90px; border: none;
  background: transparent; color: var(--ink); text-align: right;
}
.goal-chip input:focus { outline: none; }
.chart-controls .hero-chart-note { margin: 0 0 0 auto; }

.pf-gain { font-size: 10.5px; font-family: var(--mono); display: block; margin-top: 1px; }
.pf-gain.up { color: var(--up); }
.pf-gain.down { color: var(--down); }
.pf-gain.na { color: var(--faint); cursor: pointer; border-bottom: 1px dashed rgba(22,26,34,0.2); }

.user-name { background: none; border: none; cursor: pointer; font-family: var(--ui);
  font-size: 12.5px; font-weight: 560; color: var(--sub); padding: 5px 8px; border-radius: 7px; }
.user-name:hover { color: var(--ink); background: rgba(22, 26, 34, 0.05); }

.acct-sub { color: var(--sub); font-size: 13px; margin: -8px 0 16px; }
.acct-section { border-top: 1px solid var(--hair-soft); padding: 14px 0; }
.acct-section h4 { font-size: 12px; font-weight: 590; margin-bottom: 10px; }
.acct-row { display: flex; gap: 8px; flex-wrap: wrap; }
.acct-row .btn { text-decoration: none; }
.acct-section input { width: 100%; margin-bottom: 8px; font-family: var(--ui); font-size: 14px;
  border: 1px solid rgba(22, 26, 34, 0.12); border-radius: 8px; padding: 10px 12px; }
.acct-section input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(168,130,60,.12); }

.cf-repeat-opt { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--sub); white-space: nowrap; }
.cf-repeat-opt input { accent-color: #211e19; width: 15px; height: 15px; }

.rec-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; font-size: 13.5px; }
.rec-day { font-family: var(--mono); font-size: 11px; color: var(--faint);
  border: 1px solid rgba(22, 26, 34, 0.1); border-radius: 6px; padding: 2px 7px; flex: 0 0 auto; }
.rec-note { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-cat { color: var(--faint); font-size: 11.5px; margin-left: 6px; }
.rec-amt { margin-left: auto; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.rec-amt.in { color: var(--up); }

.alloc-row.budget-over .alloc-fill { background: var(--down); }
.alloc-budget { color: var(--faint); font-size: 10.5px; font-family: var(--mono); }
.alloc-budget.over { color: var(--down); }
.alloc-name.tappable { cursor: pointer; border-bottom: 1px dashed rgba(22, 26, 34, 0.2); }
.alloc-name.tappable:hover { color: var(--gold); }
.alloc-name input { font-family: var(--mono); font-size: 12px; width: 76px;
  border: 1.5px solid var(--gold); border-radius: 6px; padding: 1px 6px; }
.alloc-name input:focus { outline: none; }

.mm-compare { border-top: 1px dashed rgba(22, 26, 34, 0.12); margin-top: 8px; padding-top: 8px;
  font-size: 11.5px; color: var(--sub); font-family: var(--mono); }
.mm-compare b { color: var(--ink); font-weight: 560; }

/* ---------- user chip & family ---------- */

.user-chip { display: flex; align-items: center; gap: 8px; }
.user-name { font-size: 12.5px; font-weight: 560; color: var(--sub); }
.user-chip .icon-btn { opacity: 1; width: 28px; height: 28px; color: var(--sub); }

.fam-copy { color: var(--sub); font-size: 13px; line-height: 1.6; margin-bottom: 16px; max-width: 60ch; }
.fam-forms { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fam-form { border: 1px solid rgba(22, 26, 34, 0.08); border-radius: 10px; padding: 16px; }
.fam-form h4 { font-size: 12.5px; font-weight: 590; margin-bottom: 12px; color: var(--ink); }
.fam-form input {
  width: 100%; font-family: var(--ui); font-size: 14px; color: var(--ink);
  background: #fff; border: 1px solid rgba(22, 26, 34, 0.12); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 10px;
}
.fam-form input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(168,130,60,.12); }
.fam-form .btn { width: 100%; }

.fam-code-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fam-code {
  font-family: var(--mono); font-size: 17px; font-weight: 500; letter-spacing: 0.28em;
  color: var(--ink); background: rgba(168, 130, 60, 0.08);
  border: 1px solid rgba(168, 130, 60, 0.35); border-radius: 8px; padding: 8px 14px 8px 17px;
}
.fam-spacer { flex: 1; }
.btn-danger { color: var(--down); border-color: rgba(229, 72, 77, 0.35); }
.btn-danger:hover { background: rgba(229, 72, 77, 0.06); border-color: rgba(229, 72, 77, 0.5); }

.fam-member {
  display: flex; align-items: center; gap: 14px; padding: 12px 0;
}
.fam-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  background: #211e19; color: #e9d9ae;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 590;
}
.fam-m-name { font-size: 14px; font-weight: 510; }
.fam-m-name .you { color: var(--faint); font-weight: 450; font-size: 12px; }
.fam-m-sub { color: var(--faint); font-size: 11.5px; font-family: var(--mono); margin-top: 2px; }
.fam-m-net { margin-left: auto; font-family: var(--mono); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.fam-m-net.neg { color: var(--down); }

/* ---------- kids ---------- */

.kid-back {
  display: inline-block; background: none; border: none; cursor: pointer;
  font-family: var(--ui); font-size: 12.5px; font-weight: 560; color: var(--sub);
  padding: 6px 8px; margin: 6px 0 10px -8px; border-radius: 7px;
}
.kid-back:hover { color: var(--ink); background: rgba(22, 26, 34, 0.05); }

.kid-card {
  display: flex; align-items: center; gap: 14px; width: 100%;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--ui); padding: 13px 8px; margin: 0 -8px; width: calc(100% + 16px);
  border-radius: 10px;
}
.kid-card:hover { background: rgba(22, 26, 34, 0.035); }
.kid-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  background: rgba(168, 130, 60, 0.12); border: 1.5px solid rgba(168, 130, 60, 0.5);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 590;
}
.kid-c-name { font-size: 14.5px; font-weight: 510; color: var(--ink); }
.kid-c-sub { color: var(--faint); font-size: 11.5px; font-family: var(--mono); margin-top: 2px; }
.kid-c-total { margin-left: auto; font-family: var(--mono); font-size: 15.5px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); }
.kid-c-arrow { color: var(--faint); font-size: 15px; margin-left: 4px; }

.empty-note { color: var(--faint); font-size: 13px; line-height: 1.6; padding: 10px 0 4px; max-width: 56ch; }

.ka-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; }
.ka-main { min-width: 0; }
.ka-name { font-size: 14px; font-weight: 510; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ka-sub { color: var(--faint); font-size: 11.5px; font-family: var(--mono); margin-top: 2px; }
.ka-sub .ka-edit { cursor: pointer; border-bottom: 1px dashed rgba(22, 26, 34, 0.25); }
.ka-sub .ka-edit:hover { color: var(--ink); }
.ka-gain { font-size: 11px; font-family: var(--mono); margin-left: 8px; }
.ka-gain.up { color: var(--up); }
.ka-gain.down { color: var(--down); }
.ka-cur {
  margin-left: auto; font-family: var(--mono); font-size: 14.5px; font-weight: 500;
  font-variant-numeric: tabular-nums; cursor: pointer;
  border-bottom: 1px dashed rgba(22, 26, 34, 0.25); padding-bottom: 1px;
}
.ka-cur:hover { color: var(--gold); border-bottom-color: var(--gold); }
.ka-cur.fixed { cursor: default; border-bottom: none; }
.ka-cur input, .ka-sub input {
  font-family: var(--mono); font-size: 13px; width: 90px;
  border: 1.5px solid var(--gold); border-radius: 6px; padding: 2px 7px; text-align: right;
}
.ka-cur input:focus, .ka-sub input:focus { outline: none; }

.ka-addform { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hair-soft); }
.seg {
  display: flex; gap: 2px; background: rgba(22, 26, 34, 0.05);
  border-radius: 8px; padding: 2.5px; margin-bottom: 12px; max-width: 340px;
}
.seg button {
  flex: 1; border: none; background: none; cursor: pointer;
  font-family: var(--ui); font-size: 12px; font-weight: 560; color: var(--sub);
  padding: 7px 0; border-radius: 6px; transition: background 130ms, color 130ms;
}
.seg button.active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(16, 20, 28, 0.1); }
.ka-fields { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.ka-fields input {
  width: 100%; font-family: var(--ui); font-size: 14px; color: var(--ink);
  background: #fff; border: 1px solid rgba(22, 26, 34, 0.12); border-radius: 8px; padding: 10px 12px;
}
.ka-fields input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(168,130,60,.12); }

.lbl-opt { font-weight: 450; color: var(--faint); }

/* ---------- bottom tab bar (phones) ---------- */

.tabbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: rgba(248, 249, 251, 0.88);
  backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-top: 1px solid rgba(22, 26, 34, 0.09);
  padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
}
.tab {
  flex: 1; background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--faint); font-family: var(--ui); font-size: 10.5px; font-weight: 560;
  padding: 6px 0; border-radius: 10px;
}
.tab.active { color: var(--ink); }
.tab.active svg { color: var(--gold); }
.tab:active { transform: scale(0.96); }

/* ---------- a11y & responsive ---------- */

@media (prefers-reduced-motion: reduce) {
  .masthead, .hero, .kpis,
  #portfolio-panel, #homes-panel, #alloc-panel, #ledger-panel, .colophon,
  .networth.pop, .chip, .live-ping, .delta.up,
  .orb, .mm-bubble, .rule-gold, .alloc-fill, .scan-sweep, .solvency i { animation: none; transition: none; }
}

@media (max-width: 700px) {
  .cf-form { grid-template-columns: 1fr 1fr; }
  .cf-kind { grid-column: 1 / -1; }
  #cf-note { grid-column: 1 / -1; }
  .cf-quick { flex-wrap: wrap; }
  #cf-quick-in { flex-basis: 100%; }
}

@media (max-width: 640px) {
  .pf-head, .pf-row { grid-template-columns: 1.4fr 0.9fr 1.1fr 46px; }
  .pf-col-price, .pf-chg { display: none; }
  .hm-row { grid-template-columns: 1.6fr 1.1fr 46px; }
  .hm-ppm2, .hm-range { display: none; }
}

@media (max-width: 700px) {
  /* chrome: bottom tabs replace top nav */
  .tabbar { display: flex; }
  .nav { display: none; }
  .masthead { padding-top: 13px; padding-bottom: 11px; }
  .fam-forms { grid-template-columns: 1fr; }
  .ka-fields { grid-template-columns: 1fr; }
  .tab span { font-size: 10px; }
  body { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

  /* floating elements clear the tab bar */
  .orb { right: 14px; bottom: calc(74px + env(safe-area-inset-bottom)); width: 60px; height: 60px; }
  .mm-bubble { right: 14px; bottom: calc(146px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(84px + env(safe-area-inset-bottom)); max-width: calc(100vw - 32px); text-align: center; }

  /* dialogs become bottom sheets */
  .scrim { align-items: flex-end; padding: 0; }
  .dialog {
    max-width: none; border-radius: 16px 16px 0 0;
    padding: 22px 20px calc(24px + env(safe-area-inset-bottom));
    /* a long form plus the on-screen keyboard can outgrow the screen — let the
       sheet scroll instead of pushing its buttons out of reach */
    max-height: 88vh; max-height: 88dvh;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    animation: sheetup 320ms cubic-bezier(.25,.9,.3,1) both;
  }
  /* keep the action row (Save / Cancel) pinned and reachable while scrolling */
  .dialog-actions {
    position: sticky; bottom: 0; z-index: 1;
    background: #ffffff; margin-top: 10px;
    padding: 12px 0 4px;
    box-shadow: 0 -10px 14px -10px rgba(16, 20, 28, 0.22);
  }

  /* prevent iOS zoom-on-focus: inputs at 16px */
  .dialog input, .dialog select, #cf-quick-in, .cf-form input, .cf-form select { font-size: 16px; }

  /* touch targets */
  .icon-btn { opacity: 1; width: 32px; height: 32px; }
  .cf-arrow { width: 30px; height: 30px; border-radius: 8px; }
  .btn { padding: 10px 16px; }
  .lg-value, .pf-qty, .pf-price { padding: 6px 8px; }
  .lg-row { padding: 12px 8px; }
  .pf-row { padding: 12px 0; }
  .hm-row { padding: 13px 0; }
  .cf-row { padding: 12px 0; }

  /* repeat chips: one thumb-scroll row */
  .cf-repeats { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; margin: 14px -24px 0; padding: 0 24px 4px; }
  .cf-repeats::-webkit-scrollbar { display: none; }
  .cf-repeat { flex: 0 0 auto; }
}
@keyframes sheetup {
  from { transform: translateY(40px); opacity: 0.5; }
  to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 560px) {
  body { padding-left: 16px; padding-right: 16px; }
  .masthead { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
  .masthead-left { gap: 14px; }
  .hero { margin-top: 20px; padding: 22px 18px 16px; }
  .panel { padding: 18px 16px; margin-bottom: 12px; }
  .kpis { grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 12px; }
  .kpi { padding: 12px 12px; border-radius: 10px; }
  .kpi-value { font-size: 15px; }
  .kpi-label { font-size: 10px; }
  #chart { height: 170px; }
  .networth { font-size: clamp(40px, 12vw, 54px); }
  .networth-cf { font-size: clamp(34px, 10vw, 46px); }
  .alloc-row { grid-template-columns: 86px 1fr 52px; gap: 10px; }
  .alloc-val { display: none; }
  .lg-cat { display: none; }
  .panel-head h2 { font-size: 13.5px; }
  .cf-quick { gap: 8px; }
  #cf-quick-in { flex-basis: calc(100% - 0px); }
  #cf-quick-add { flex: 1; padding: 12px; }
  .cf-cat-chip { flex: 0 0 auto; }
}


/* ---------- dark mode (follows the system) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #131110; --card: #1b1815; --ink: #ece8e1; --sub: #a39d92;
    --faint: #6f6a60; --gold: #c9a05a; --gold-soft: #a98c52;
    --up: #3fb872; --down: #ef6a6e;
    --hair: rgba(255, 250, 240, 0.1); --hair-soft: rgba(255, 250, 240, 0.06);
  }
  body { background: #131110; color: var(--ink); }
  .networth { color: #f0ece3; }
  .hero { background-image: none; }
  .panel, .kpi, .dialog, .auth-card, .fam-form, .kid-avatar { background: #1b1815; }
  .panel, .kpi { border-color: rgba(255, 255, 255, 0.07); box-shadow: none; }
  .dialog { border-color: rgba(255, 255, 255, 0.09); }
  .networth, .brand-name, .panel-head h2, .dialog h3, .kpi-value,
  .kid-c-name, .kid-c-total, .fam-m-net, .rec-amt, .ka-cur, .ob-step b,
  .empty p, .mm-title, .mm-report-head, .scan-title, .fam-code { color: var(--ink); }
  .btn { background: #242019; border-color: rgba(255, 250, 240, 0.13); color: var(--ink); }
  .btn:hover { background: #2b261e; border-color: rgba(255, 250, 240, 0.2); }
  .btn-gold, .mm-next, .auth-submit { background: #e8e9ec; border-color: #e8e9ec; color: #14151a; }
  .btn-gold:hover, .mm-next:hover, .auth-submit:hover { background: #f6f7f9; }
  .btn-danger { color: var(--down); border-color: rgba(239, 106, 110, 0.4); }
  .nav-link:hover { background: rgba(255, 255, 255, 0.06); }
  .nav-link.active { background: rgba(255, 255, 255, 0.1); color: var(--ink); }
  .user-name:hover, .kid-back:hover, .mm-tip-btn:hover, .kid-card:hover,
  .mm-finding.has-sol:hover, .cf-repeat:hover { background: rgba(255, 255, 255, 0.05); }
  input, select, .dialog input, .dialog select, #cf-quick-in, .cf-form input,
  .cf-form select, .fam-form input, .ka-fields input, .acct-section input,
  .auth-card input {
    background: #211d18; border-color: rgba(255, 250, 240, 0.12); color: var(--ink);
  }
  .masthead.scrolled, .tabbar {
    background: rgba(19, 17, 16, 0.85); border-color: rgba(255, 250, 240, 0.08);
  }
  .brand-name { color: var(--ink); }
  .nav-link:hover { background: rgba(255, 250, 240, 0.06); }
  .nav-link.active { background: rgba(255, 250, 240, 0.1); color: var(--ink); }
  .mm-bubble { background: rgba(27, 24, 21, 0.96); border-color: rgba(255, 250, 240, 0.1); }
  .mm-text, .mm-finding, .mm-sol { color: #c6c8ce; }
  .mm-seg, .seg, .period-seg, .cf-kind, .auth-tabs, .cf-repeat, .ob-step,
  .rec-day { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.08); }
  .mm-seg button.active, .seg button.active, .period-seg button.active,
  .auth-tabs button.active { background: #2a2c33; color: var(--ink); }
  .alloc-bar, .solvency { background: rgba(255, 255, 255, 0.09); }
  .scan, .mm-sol, .chip, .cf-cat-chip, .goal-chip, .fam-code, .auth-codes code
    { background: rgba(201, 160, 90, 0.09); }
  .scrim { background: rgba(0, 0, 0, 0.5); }
  .toast { background: #e8e9ec; color: #14151a; }
  .cf-filter { background: #1d1f24; border-color: rgba(255, 255, 255, 0.12); color: var(--ink); }
  .ptr { background: #1f2126; border-color: rgba(255, 255, 255, 0.12); color: var(--ink); }
  .kid-avatar { border-color: rgba(201, 160, 90, 0.5); }
  .fam-avatar { background: #e8e9ec; color: #6d5426; }
  .orb { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 2px 5px rgba(0, 0, 0, 0.4),
    0 12px 30px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.9); }
  .acct-section, .ka-addform { border-color: rgba(255, 250, 240, 0.07); }
  .hero-vault { background-image: linear-gradient(180deg, #211c14 0%, #1b1815 100%);
    border-top-color: rgba(201, 160, 90, 0.45); }
  .masthead::after {
    background: linear-gradient(90deg, transparent 0%, rgba(201, 160, 90, 0.5) 18%,
      rgba(201, 160, 90, 0.5) 82%, transparent 100%);
  }
  * { scrollbar-color: rgba(160, 140, 100, 0.35) transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(160, 140, 100, 0.3); background-clip: content-box; }
  .vt-fields select { background: #211d18; border-color: rgba(255, 250, 240, 0.12); color: var(--ink); }
  .vt-bar { background: rgba(255, 250, 240, 0.1); }
  .lg-row:hover, .pf-row:hover, .hm-row:hover, .cf-row:hover, .ka-row:hover,
  .fam-member:hover, .rec-row:hover, .alloc-row:hover {
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.04);
  }
  .booting .networth, .booting .kpi-value, .booting #delta {
    background: linear-gradient(100deg, rgba(255,255,255,0.06) 40%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.06) 60%);
    background-size: 240% 100%;
  }
  .tab.active { background: rgba(201, 160, 90, 0.12); }
  .mm-play { background: rgba(201, 160, 90, 0.1); border-color: rgba(201, 160, 90, 0.28); color: var(--sub); }
  .mm-play:hover { background: rgba(201, 160, 90, 0.18); color: var(--ink); }
}


/* ---------- print: a clean paper statement ---------- */
@media print {
  body { padding: 0; background: #fff; }
  .masthead .nav, .user-chip, .tabbar, .orb, .mm-bubble, .toast, .scrim,
  .panel-tools, .icon-btn, .lg-tools, .period-seg, .goal-chip, .cf-quick,
  .cf-detailed, .ka-addform, .fam-forms, #onboard, .chart-tip, .colophon,
  .cf-repeats, .kid-back, .empty-inline, .empty-note { display: none !important; }
  .masthead { position: static; padding: 0 0 14px; border-bottom: 1px solid #ddd; }
  .panel, .kpi { box-shadow: none !important; border: 1px solid #e2e2e2 !important;
    break-inside: avoid; }
  .hero { margin-top: 14px; }
  .networth { font-size: 40px !important; }
  a { text-decoration: none; color: inherit; }
}