/* FB Atlas — Cashflow Planner
   Design language: FB Atlas UI Kit (fb-atlas-ui-kit.web.app)
   tokens.css + atlas-glass.css supply palette + glass surfaces. */

* { margin:0; padding:0; box-sizing:border-box; -webkit-font-smoothing:antialiased; }
html, body { height:100%; }
body {
  font-family: futura-pt, "Futura PT", "Futura", "Trebuchet MS", "Helvetica Neue", Arial, sans-serif;
  font-weight:400;
  color: var(--core-primary-text);
  background: var(--atlas-linen);
  overflow-x:hidden;
  touch-action: manipulation;
}
.hidden { display:none !important; }
button { font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
input, select { font:inherit; color:inherit; }

/* chart palette — validated (cobalt income / rust expense, CVD-safe pair) */
:root {
  --fin-in:  var(--atlas-cobalt);   /* #224CCC */
  --fin-out: var(--atlas-rust);     /* #CC6F39 */
  --ink:     var(--core-primary-text);
  --muted:   var(--core-primary);
  --faint:   var(--atlas-grey-icon);
  --danger:  var(--core-error);
  --ok:      var(--core-success);
}

/* ══════════ screens — sign-in (.atlas-login) + loader (.atlas-loader) come
   from the UI kit: https://fb-atlas-ui-kit.web.app/atlas-components.css ══════════ */

/* ══════════ shell — header (.atlas-topbar) + nav (.atlas-seg) come from the UI kit ══════════ */
#app { position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:14px 18px 40px; }

.view { display:none; }
.view.is-on { display:block; }
.view.is-on .card { animation:cardIn .55s cubic-bezier(.22,.8,.28,1) backwards; }
.view.is-on .card:nth-child(2) { animation-delay:.05s; }
.view.is-on .card:nth-child(3) { animation-delay:.1s; }
.view.is-on .card:nth-child(4) { animation-delay:.15s; }
.view.is-on .card:nth-child(5) { animation-delay:.2s; }
.view.is-on .card:nth-child(6) { animation-delay:.24s; }
.view.is-on .card:nth-child(7) { animation-delay:.28s; }
.view.is-on .card:nth-child(8) { animation-delay:.32s; }
.view.is-on .card:nth-child(n+9) { animation-delay:.36s; }
@keyframes cardIn { from { opacity:0; transform:translateY(16px) scale(.985); } to { opacity:1; transform:none; } }

.grid { display:grid; grid-template-columns:repeat(12, 1fr); gap:16px; }
.card { padding:22px 24px; container-type:inline-size; }
.card.c3 { grid-column:span 3; } .card.c4 { grid-column:span 4; }
.card.c6 { grid-column:span 6; }
.card.c8 { grid-column:span 8; } .card.c12 { grid-column:span 12; }
@media (max-width:980px) {
  .card.c3 { grid-column:span 6; } .card.c4 { grid-column:span 6; }
  .card.c8 { grid-column:span 12; } .card.c6 { grid-column:span 6; }
}
@media (max-width:640px) {
  .grid { gap:13px; }
  .card.c3, .card.c4, .card.c6, .card.c8, .card.c12 { grid-column:span 12; }
}

/* press feedback — Apple-style */
.mini-btn, .icon-btn, .foot-logout, .wi-seg button {
  transition:transform .16s ease, opacity .16s ease, color .2s ease, border-color .2s ease, background .2s ease; }
.mini-btn:active, .icon-btn:active, .wi-seg button:active { transform:scale(.95); }
.card { transition:box-shadow .25s ease; }

.card-kicker { font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.card-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.card-note { font-weight:300; font-size:14px; color:var(--muted); margin:-6px 0 14px; line-height:1.45; }
.card-kpis { font-size:14px; color:var(--muted); }
.card-kpis span { font-size:17px; color:var(--ink); }

/* ══════════ dashboard hero + ring ══════════ */
.hero-flex { display:flex; gap:26px; align-items:flex-start; justify-content:space-between; }
.hero-main { flex:1; min-width:0; }
.hero .verdict { margin:14px 0 16px; }
.ring-wrap { flex:none; text-align:center; padding-top:8px; }
#dash-ring { width:132px; }
#dash-ring svg { width:100%; height:auto; display:block; }
.ring-p { stroke:var(--faint); transition:stroke-dashoffset 1s cubic-bezier(.25,.8,.3,1), stroke .4s; }
.ring-p.ok { stroke:var(--ok); } .ring-p.warn { stroke:var(--atlas-copper); } .ring-p.crit { stroke:var(--atlas-rust); }
.ring-num { font:300 30px futura-pt, sans-serif; fill:var(--ink); }
.ring-lbl { font:300 11.5px futura-pt, sans-serif; fill:var(--faint); letter-spacing:.14em; text-transform:uppercase; }
.ring-note { margin-top:6px; font-weight:300; font-size:12px; color:var(--faint); }
@media (max-width:640px) { .hero-flex { flex-direction:column-reverse; align-items:center; } .hero-main { width:100%; text-align:left; } }

.accounts-box { margin-top:16px; padding-top:14px; border-top:1px solid rgba(0,0,0,.06); }
.duo-bars { margin-top:14px; display:flex; flex-direction:column; gap:7px; }
.duo-bars .db { height:7px; border-radius:6px; background:rgba(0,0,0,.06); overflow:hidden; }
.duo-bars .db i { display:block; height:100%; border-radius:6px; transition:width .8s cubic-bezier(.25,.8,.3,1); }
.duo-bars .db.in i { background:var(--fin-in); } .duo-bars .db.out i { background:var(--fin-out); }

.mini-list { margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.mini-list .ml { display:flex; justify-content:space-between; gap:10px; font-size:13.5px; font-weight:300; }
.mini-list .ml span { color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-list .ml b { font-weight:400; font-variant-numeric:tabular-nums; white-space:nowrap; }

.card-kicker small { text-transform:none; letter-spacing:.04em; color:var(--faint); }
.rec-list.compact .rec-row { padding:9px 12px; border-radius:14px; }
.rec-list.compact .rec-ico { width:30px; height:30px; border-radius:10px; font-size:13px; }
.rec-list.compact .rec-main b { font-size:14px; }
.rec-list.compact .rec-amt { font-size:13.5px; }

/* chart motion */
.chart rect.bar { transform-box:fill-box; transform-origin:center bottom; animation:barRise .7s cubic-bezier(.22,.8,.28,1) backwards; }
@keyframes barRise { from { transform:scaleY(0); } }
.chart path.draw { stroke-dasharray:1; stroke-dashoffset:1; animation:drawLine 1.2s cubic-bezier(.4,.1,.3,1) forwards; }
.chart path.draw.d2 { animation-delay:.25s; }
@keyframes drawLine { to { stroke-dashoffset:0; } }
.chart .area-f { opacity:0; animation:areaIn .9s ease .55s forwards; }
@keyframes areaIn { to { opacity:1; } }

/* ══════════ overview ══════════ */
.hero-amount { font-size:clamp(38px,6cqi,54px); font-weight:300; letter-spacing:.01em; }
.hero-amount small { font-size:.42em; color:var(--muted); letter-spacing:.08em; }
.hero-sub { color:var(--muted); font-weight:300; font-size:14.5px; margin-top:4px; }

.accounts { margin-top:18px; display:flex; flex-direction:column; gap:8px; }
.acc-row { display:grid; grid-template-columns:1fr 150px 30px; gap:10px; align-items:center; }
.acc-row input { height:42px; border:0; border-bottom:1px solid var(--core-secondary); background:transparent; outline:none; font-size:15.5px; border-radius:0; }
.acc-row input:focus { border-bottom-color:var(--ink); }
.acc-row input.bal { text-align:right; font-variant-numeric:tabular-nums; }
.acc-del { color:var(--faint); font-size:18px; text-align:center; }
.acc-del:hover { color:var(--danger); }
.accounts-actions { display:flex; gap:10px; margin-top:14px; }
.mini-btn { padding:9px 18px; border-radius:100px; border:1px solid var(--core-secondary);
  font-size:13.5px; letter-spacing:.08em; color:var(--muted); transition:all .18s; }
.mini-btn:hover { border-color:var(--ink); color:var(--ink); }
.mini-btn.primary { background:var(--ink); border-color:var(--ink); color:var(--core-tertiary); }
.mini-btn.danger { border-color:transparent; color:var(--danger); }

.kpi-duo { display:flex; flex-direction:column; gap:10px; }
.kpi-duo > div { display:flex; align-items:baseline; gap:8px; }
.kpi-duo b { font-size:22px; font-weight:400; font-variant-numeric:tabular-nums; }
.kpi-duo span { color:var(--muted); font-weight:300; font-size:13.5px; }
.dot { width:9px; height:9px; border-radius:50%; display:inline-block; flex:none; align-self:center; }
.dot.in { background:var(--fin-in); } .dot.out { background:var(--fin-out); }
.kpi-net { margin-top:12px; font-size:14px; color:var(--muted); }
.kpi-net b { font-weight:400; }
.neg { color:var(--atlas-rust); }
.kpi-big { font-size:clamp(26px,9cqi,34px); font-weight:300; }
.kpi-big small { font-size:.5em; color:var(--muted); }
.kpi-note { margin-top:6px; color:var(--faint); font-weight:300; font-size:13px; }

.verdict { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.v-chip { padding:7px 16px; border-radius:100px; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:var(--faint); }
.v-chip.ok { background:var(--ok); } .v-chip.warn { background:var(--atlas-copper); } .v-chip.crit { background:var(--atlas-rust); }
.v-text { font-weight:300; font-size:16px; line-height:1.45; flex:1; min-width:220px; }

.advisor { display:flex; flex-direction:column; gap:12px; }
.adv { display:flex; gap:14px; align-items:flex-start; padding:14px 16px; border-radius:20px; background:rgba(255,255,255,.42); }
.adv .a-ico { width:34px; height:34px; flex:none; border-radius:12px; display:grid; place-items:center; color:#fff; font-size:15px; }
.adv.crit .a-ico { background:var(--atlas-rust); } .adv.warn .a-ico { background:var(--atlas-copper); }
.adv.info .a-ico { background:var(--atlas-navy); } .adv.ok .a-ico { background:var(--ok); }
.adv b { display:block; font-weight:400; font-size:15.5px; margin-bottom:2px; }
.adv p { font-weight:300; font-size:14px; color:var(--muted); line-height:1.45; }

/* ══════════ charts ══════════ */
.legend { display:flex; gap:16px; font-size:13px; color:var(--muted); align-items:center; }
.legend span { display:inline-flex; align-items:center; gap:6px; }
.line { width:18px; height:0; border-top:2px solid var(--ink); display:inline-block; }
.line.base { border-color:var(--ink); }
.line.scen { border-color:var(--fin-in); border-top-style:dashed; }
.chart { width:100%; margin-top:6px; }
.chart svg { width:100%; height:auto; display:block; }
.chart .bar { transition:opacity .15s; }
.chart .bar:hover { opacity:.75; }
.axis-t { font:300 11px futura-pt, sans-serif; fill:var(--faint); }
.grid-l { stroke:rgba(0,0,0,.07); stroke-width:1; }
.zero-l { stroke:rgba(0,0,0,.28); stroke-width:1; }

.tooltip { position:fixed; z-index:99; pointer-events:none; background:rgba(18,18,18,.92); color:#f2f2f6;
  padding:9px 13px; border-radius:12px; font-size:13px; line-height:1.5; max-width:240px;
  transform:translate(-50%, calc(-100% - 10px)); }
.tooltip b { font-weight:400; }

.hbars { display:flex; flex-direction:column; gap:12px; justify-content:space-between; }
.hbar { }
.hbar .h-top { display:flex; justify-content:space-between; font-size:14px; margin-bottom:5px; }
.hbar .h-top i { font-style:normal; color:var(--muted); font-variant-numeric:tabular-nums; }
.hbar .h-track { height:8px; border-radius:6px; background:rgba(0,0,0,.07); overflow:hidden; }
.hbar .h-fill { height:100%; border-radius:6px; background:var(--fin-out); }

.stat-rows { display:flex; flex-direction:column; gap:11px; }
.stat-rows .sr { display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:14.5px; }
.stat-rows .sr span { color:var(--muted); font-weight:300; }
.stat-rows .sr b { font-weight:400; font-variant-numeric:tabular-nums; white-space:nowrap; }
.stat-rows .sr b.neg { color:var(--atlas-rust); }
.stat-rows .sr b.pos { color:var(--ok); }

.tbl-details summary { margin-top:14px; font-size:13.5px; color:var(--muted); cursor:pointer; }
.tbl-wrap { overflow-x:auto; margin-top:12px; }
table { border-collapse:collapse; width:100%; font-size:13.5px; }
th { text-align:right; font-weight:400; color:var(--muted); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; padding:8px 10px; border-bottom:1px solid rgba(0,0,0,.12); }
th:first-child, td:first-child { text-align:left; }
td { padding:8px 10px; text-align:right; font-variant-numeric:tabular-nums; border-bottom:1px solid rgba(0,0,0,.05); white-space:nowrap; }
td.neg { color:var(--atlas-rust); }

/* ══════════ recurring / receivable lists ══════════ */
.rec-list { display:flex; flex-direction:column; gap:9px; margin-bottom:14px; }
.rec-row { display:flex; align-items:center; gap:13px; padding:12px 16px; border-radius:18px; background:rgba(255,255,255,.42); }
.rec-row.off { opacity:.45; }
.rec-ico { width:36px; height:36px; flex:none; border-radius:12px; display:grid; place-items:center; color:#fff; font-size:15px; }
.rec-ico.in { background:var(--fin-in); } .rec-ico.out { background:var(--fin-out); }
.rec-main { flex:1; min-width:0; }
.rec-main b { display:block; font-weight:400; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rec-main span { font-weight:300; font-size:12.5px; color:var(--muted); }
.rec-amt { font-variant-numeric:tabular-nums; font-size:15px; white-space:nowrap; }
.rec-act { display:flex; gap:4px; }
.icon-btn { width:32px; height:32px; border-radius:10px; display:grid; place-items:center; color:var(--faint); font-size:15px; }
.icon-btn:hover { background:rgba(0,0,0,.06); color:var(--ink); }


/* ══════════ forecast controls ══════════ */
.ctrl { display:flex; flex-direction:column; gap:18px; }
.ctrl label { font-size:14px; color:var(--muted); font-weight:300; display:block; }
.ctrl label b { font-weight:400; color:var(--ink); }
.ctrl .atlas-slider { margin-top:2px; }
.switch { display:flex !important; align-items:center; gap:10px; cursor:pointer; }

/* ══════════ scenarios ══════════ */
.sc-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:13px; }
.sc-card { padding:17px 18px; border-radius:22px; background:rgba(255,255,255,.42); display:flex; flex-direction:column; gap:9px; }
.sc-card.off { opacity:.5; }
.sc-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sc-top b { font-weight:400; font-size:16px; }
.sc-chip { font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; padding:4px 11px; border-radius:100px; color:#fff; }
.sc-chip.in { background:var(--fin-in); } .sc-chip.out { background:var(--fin-out); }
.sc-amt { font-size:21px; font-weight:300; font-variant-numeric:tabular-nums; }
.sc-meta { font-weight:300; font-size:13px; color:var(--muted); line-height:1.5; }
.sc-foot { display:flex; align-items:center; justify-content:space-between; margin-top:2px; }

/* ══════════ modal — .atlas-sheet linked dynamically from the UI kit ══════════
   https://fb-atlas-ui-kit.web.app/atlas-components.css (loaded in index.html) */

/* ══════════ what-if — full-screen stage (Apple-keynote style) ══════════ */
.wi-stage { position:relative; margin-left:calc(50% - 50vw); width:100vw;
  min-height:calc(100svh - 96px); display:flex; flex-direction:column; overflow:hidden; }
.wi-sky { position:absolute; inset:0; z-index:0; opacity:0; transition:opacity .8s ease; pointer-events:none;
  background:radial-gradient(90% 70% at 50% 100%, rgba(204,111,57,.14), transparent 70%); }
.wi-stage.warn .wi-sky { opacity:.55; }
.wi-stage.crit .wi-sky { opacity:1; }
.wi-stage.ok .wi-sky { opacity:0; }

.wi-chart-bg { position:absolute; left:0; right:0; bottom:0; height:46vh; z-index:0; pointer-events:none; }
.wi-chart-bg svg { width:100%; height:100%; display:block; }

.wi-content { position:relative; z-index:2; flex:1; display:flex; flex-direction:column;
  align-items:center; text-align:center; padding:7vh 20px 0; }
.wi-verdict { display:inline-flex; align-items:center; gap:9px; font-size:13.5px; letter-spacing:.22em;
  text-indent:.22em; text-transform:uppercase; color:var(--muted); }
.wi-dot { width:9px; height:9px; border-radius:50%; background:var(--faint); transition:background .4s; flex:none; }
.wi-dot.ok { background:var(--ok); } .wi-dot.warn { background:var(--atlas-copper); } .wi-dot.crit { background:var(--atlas-rust); }
.wi-verdict.bump { animation:vBump .5s cubic-bezier(.3,.8,.3,1.4); }
@keyframes vBump { 0%{transform:scale(1)} 40%{transform:scale(1.14)} 100%{transform:scale(1)} }

.wi-big { font-size:clamp(64px,13vw,148px); font-weight:300; letter-spacing:-.02em; line-height:1;
  margin-top:2vh; font-variant-numeric:tabular-nums; transition:color .4s ease; }
.wi-big small { font-size:.24em; color:var(--muted); font-weight:300; letter-spacing:.04em; }

.wi-pips { display:flex; gap:7px; justify-content:center; margin:3.5vh 0 0; }
.wi-pip { width:min(30px,5.5vw); height:9px; border-radius:6px; background:rgba(0,0,0,.10);
  transition:background .35s ease, transform .3s cubic-bezier(.3,.8,.3,1); }
.wi-stage.ok .wi-pip.on { background:var(--ok); }
.wi-stage.warn .wi-pip.on { background:var(--atlas-copper); }
.wi-stage.crit .wi-pip.on { background:var(--atlas-rust); }
.wi-pip.pop { transform:scaleY(1.7); }

.wi-sub { margin-top:2.2vh; font-weight:300; font-size:clamp(16px,2vw,19px); color:var(--muted); font-variant-numeric:tabular-nums; }
.wi-sub b { font-weight:400; color:var(--ink); }

/* moves — floating chips */
.wi-moves { margin-top:4vh; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center; max-width:820px; }
.wi-moves-row { display:contents; }
.wi-chip { display:inline-flex; align-items:center; gap:9px; padding:11px 19px; border-radius:100px;
  font-size:14.5px; letter-spacing:.02em; cursor:pointer; user-select:none;
  border:1px solid rgba(0,0,0,.16); color:var(--muted); background:transparent;
  transition:all .22s cubic-bezier(.3,.8,.3,1); }
.wi-chip b { font-weight:400; font-variant-numeric:tabular-nums; }
.wi-chip.on { background:var(--ink); border-color:var(--ink); color:var(--core-tertiary); transform:scale(1.03); }
.wi-chip.on b.in { color:var(--atlas-periwinkle); } .wi-chip.on b.out { color:var(--atlas-peach); }
.wi-chip:not(.on) b.in { color:var(--fin-in); } .wi-chip:not(.on) b.out { color:var(--fin-out); }
.wi-chip:active { transform:scale(.95); }
.wi-chip.add { border-style:dashed; }
.wi-reset { margin:3vh auto 0; position:relative; z-index:2; }

/* levers — vertical faders standing on the stage */
.wi-faders { position:relative; z-index:3; display:flex; justify-content:center; align-items:flex-end;
  gap:clamp(26px,6vw,58px); margin:4vh auto 8px; }
.wi-faders .af-track { background:rgba(255,255,255,.44);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.07), 0 10px 30px -18px rgba(0,0,0,.25); }
.wi-faders .af-val { cursor:text; font-size:16px; }
.wi-faders .af-lbl { line-height:1.35; }
@media (max-width:800px) {
  .wi-faders { gap:24px; }
  .wi-faders .af-track { width:64px; height:150px; border-radius:32px; }
}
.wi-hint { position:relative; z-index:2; text-align:center; font-weight:300; font-size:12px;
  color:var(--faint); letter-spacing:.04em; padding-bottom:14px; }
@media (max-width:800px) {
  .wi-dock { grid-template-columns:1fr; gap:6px; padding:16px 22px 10px; }
  .wi-content { padding-top:4vh; }
  .wi-chart-bg { height:22vh; bottom:330px; }
}
body.wi-mode .foot { display:none; }

.atlas-slider.tint-in { --as-fill: var(--fin-in); }
.atlas-slider.tint-out { --as-fill: var(--fin-out); }

/* chart wrapper internals: veil dims the future, cursor marks the chosen date */
.wi-chart-bg > #wi-spark { position:absolute; inset:0; }
.wi-chart-bg > #wi-spark svg { width:100%; height:100%; display:block; }
.wi-veil { position:absolute; top:0; bottom:0; right:0; left:100%; z-index:1;
  background:linear-gradient(90deg, rgba(235,233,229,.55), rgba(235,233,229,.75));
  transition:left .55s cubic-bezier(.3,.8,.3,1); pointer-events:none; }
.wi-cursor { position:absolute; top:0; bottom:0; left:100%; width:0; z-index:2; pointer-events:none;
  transition:left .55s cubic-bezier(.3,.8,.3,1); opacity:0; }
.wi-cursor.show { opacity:1; }
.wi-cursor i { position:absolute; top:0; bottom:0; left:-.5px; width:1px; background:rgba(0,0,0,.25); }
.wi-cursor::after { content:""; position:absolute; top:14px; left:-4.5px; width:9px; height:9px;
  border-radius:50%; background:var(--ink); }

/* time scrubber */
.wi-time { position:relative; z-index:3; width:min(720px, calc(100% - 48px)); margin:2.5vh auto 0;
  display:flex; align-items:center; gap:16px; }
.wi-time .wt-lbl { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
  font-weight:300; white-space:nowrap; }
.wi-time .atlas-slider { flex:1; }

.wi-pip.dim { opacity:.28; }
.wi-big.money { font-size:clamp(44px,9vw,104px); }
.wi-big .neg { color:var(--atlas-rust); }

/* drag value bubble */
.wi-bubble { position:fixed; z-index:60; transform:translate(-50%,-150%); pointer-events:none;
  background:var(--ink); color:var(--core-tertiary); padding:6px 13px; border-radius:100px;
  font-size:13.5px; font-variant-numeric:tabular-nums; white-space:nowrap;
  opacity:0; transition:opacity .18s ease; }
.wi-bubble.show { opacity:1; }

/* amount flying into the score */
.wi-fly { position:fixed; z-index:70; pointer-events:none; padding:7px 14px; border-radius:100px;
  background:var(--core-secondary-background); box-shadow:0 4px 18px rgba(0,0,0,.16);
  font-size:15px; font-variant-numeric:tabular-nums;
  transition:transform .75s cubic-bezier(.25,.8,.3,1), opacity .75s ease; }
.wi-fly.in { color:var(--fin-in); } .wi-fly.out { color:var(--fin-out); }

#wi-confetti { position:fixed; inset:0; z-index:65; pointer-events:none; }

/* ══════════ modal — .atlas-sheet linked dynamically from the UI kit ══════════
   https://fb-atlas-ui-kit.web.app/atlas-components.css (loaded in index.html) */

/* ══════════ what-if ══════════ */
.wi { display:flex; flex-direction:column; gap:16px; max-width:640px; margin:0 auto; }
.wi .card { padding:26px 28px; }

.wi-hero { text-align:center; padding:34px 28px 26px; }
.wi-verdict { display:inline-flex; align-items:center; gap:8px; font-size:13px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); }
.wi-dot { width:9px; height:9px; border-radius:50%; background:var(--faint); transition:background .4s; }
.wi-dot.ok { background:var(--ok); } .wi-dot.warn { background:var(--atlas-copper); } .wi-dot.crit { background:var(--atlas-rust); }
.wi-big { font-size:clamp(52px,14cqi,76px); font-weight:300; letter-spacing:-.01em; line-height:1.05; margin-top:10px;
  font-variant-numeric:tabular-nums; }
.wi-big small { font-size:.32em; color:var(--muted); font-weight:300; letter-spacing:.04em; }
.wi-sub { margin-top:6px; font-weight:300; font-size:16px; color:var(--muted); font-variant-numeric:tabular-nums; }
.wi-sub b { font-weight:400; color:var(--ink); }
.wi-sub b.neg { color:var(--atlas-rust); }
.wi-chart { margin:20px auto 0; width:min(460px,100%); }
.wi-chart svg { width:100%; height:auto; display:block; }
.wi-reset { margin-top:16px; }

/* month pips — the "lives bar": one light per funded month */
.wi-pips { display:flex; gap:6px; justify-content:center; margin:16px 0 2px; }
.wi-pip { width:20px; height:8px; border-radius:6px; background:rgba(0,0,0,.10);
  transition:background .35s ease, transform .3s cubic-bezier(.3,.8,.3,1); }
.wi-hero.ok .wi-pip.on { background:var(--ok); }
.wi-hero.warn .wi-pip.on { background:var(--atlas-copper); }
.wi-hero.crit .wi-pip.on { background:var(--atlas-rust); }
.wi-pip.pop { transform:scaleY(1.7); }

/* springy verdict */
.wi-verdict.bump { animation:vBump .5s cubic-bezier(.3,.8,.3,1.4); }
@keyframes vBump { 0%{transform:scale(1)} 40%{transform:scale(1.14)} 100%{transform:scale(1)} }
.wi-big { transition:color .4s ease; }

/* drag value bubble */
.wi-bubble { position:fixed; z-index:60; transform:translate(-50%,-150%); pointer-events:none;
  background:var(--ink); color:var(--core-tertiary); padding:6px 13px; border-radius:100px;
  font-size:13.5px; font-variant-numeric:tabular-nums; white-space:nowrap;
  opacity:0; transition:opacity .18s ease; }
.wi-bubble.show { opacity:1; }

/* amount flying into the score when a move toggles */
.wi-fly { position:fixed; z-index:70; pointer-events:none; padding:7px 14px; border-radius:100px;
  background:var(--core-secondary-background); box-shadow:0 4px 18px rgba(0,0,0,.16);
  font-size:15px; font-variant-numeric:tabular-nums;
  transition:transform .75s cubic-bezier(.25,.8,.3,1), opacity .75s ease; }
.wi-fly.in { color:var(--fin-in); } .wi-fly.out { color:var(--fin-out); }

#wi-confetti { position:fixed; inset:0; z-index:65; pointer-events:none; }

.wi-row { padding:14px 0 6px; }
.wi-row + .wi-row { border-top:1px solid rgba(0,0,0,.06); }
.wi-row-top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:2px; }
.wi-row-top span { font-size:16px; font-weight:300; }
.wi-row-top span small { font-size:12.5px; color:var(--faint); }
.wi-row-top b { font-weight:400; font-size:19px; font-variant-numeric:tabular-nums; transition:color .2s; }

.atlas-slider.tint-in { --as-fill: var(--fin-in); }
.atlas-slider.tint-out { --as-fill: var(--fin-out); }

/* chart wrapper internals: veil dims the future, cursor marks the chosen date */
.wi-chart-bg > #wi-spark { position:absolute; inset:0; }
.wi-chart-bg > #wi-spark svg { width:100%; height:100%; display:block; }
.wi-veil { position:absolute; top:0; bottom:0; right:0; left:100%; z-index:1;
  background:linear-gradient(90deg, rgba(235,233,229,.55), rgba(235,233,229,.75));
  transition:left .55s cubic-bezier(.3,.8,.3,1); pointer-events:none; }
.wi-cursor { position:absolute; top:0; bottom:0; left:100%; width:0; z-index:2; pointer-events:none;
  transition:left .55s cubic-bezier(.3,.8,.3,1); opacity:0; }
.wi-cursor.show { opacity:1; }
.wi-cursor i { position:absolute; top:0; bottom:0; left:-.5px; width:1px; background:rgba(0,0,0,.25); }
.wi-cursor::after { content:""; position:absolute; top:14px; left:-4.5px; width:9px; height:9px;
  border-radius:50%; background:var(--ink); }

/* time scrubber */
.wi-time { position:relative; z-index:3; width:min(720px, calc(100% - 48px)); margin:2.5vh auto 0;
  display:flex; align-items:center; gap:16px; }
.wi-time .wt-lbl { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
  font-weight:300; white-space:nowrap; }
.wi-time .atlas-slider { flex:1; }

.wi-pip.dim { opacity:.28; }
.wi-big.money { font-size:clamp(44px,9vw,104px); }
.wi-big .neg { color:var(--atlas-rust); }

.wi-list { display:flex; flex-direction:column; }
.wi-item { display:flex; align-items:center; gap:14px; padding:15px 2px; }
.wi-item + .wi-item { border-top:1px solid rgba(0,0,0,.06); }
.wi-item .t { flex:1; min-width:0; }
.wi-item .t b { display:block; font-weight:400; font-size:16.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wi-item .t span { font-weight:300; font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.wi-item .amt { font-size:16px; font-weight:300; font-variant-numeric:tabular-nums; white-space:nowrap; }
.wi-item .amt.in { color:var(--fin-in); } .wi-item .amt.out { color:var(--fin-out); }

.wi-add { display:grid; grid-template-columns:1fr 92px auto auto; gap:9px; align-items:center;
  margin-top:14px; padding-top:16px; border-top:1px solid rgba(0,0,0,.06); }
.wi-add input { height:42px; border:0; border-bottom:1px solid var(--core-secondary); background:transparent;
  outline:none; font-size:15px; border-radius:0; min-width:0; }
.wi-add input:focus { border-bottom-color:var(--ink); }
.wi-seg { display:flex; background:rgba(0,0,0,.07); border-radius:100px; padding:3px; }
.wi-seg button { padding:7px 13px; border-radius:100px; font-size:13px; color:var(--muted); white-space:nowrap; }
.wi-seg button.is-on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.12); }
.wi-note { text-align:center; font-weight:300; font-size:12.5px; color:var(--faint); line-height:1.6; padding:0 20px; }
@media (max-width:560px) { .wi-add { grid-template-columns:1fr 80px; } .wi-add .wi-seg { justify-self:start; } }

/* ══════════ footer ══════════ */
.foot { margin-top:34px; text-align:center; color:var(--faint); font-weight:300; font-size:12.5px; letter-spacing:.08em; }
.foot-logout { margin-left:12px; padding:6px 16px; border-radius:100px; border:1px solid var(--core-secondary); font-size:12px; color:var(--muted); }
.foot-logout:hover { border-color:var(--ink); color:var(--ink); }
.foot-disclaimer { margin-top:10px; font-size:11.5px; color:var(--faint); letter-spacing:.02em; }