/* ============================================================
   Home — one question answered before you scroll:
   am I behind, and who do I chase today?
   ============================================================ */

/* alerts sit above everything, and only when they are true */
.alerts{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.alert{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:12px var(--sp-4);border-radius:var(--r-sm);
  font-size:var(--t-label);font-weight:600;line-height:1.4;
}
.alert svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.alert.warn{background:var(--warn-bg);color:var(--warn)}
.alert.bad{background:var(--bad-bg);color:var(--bad)}
.alert b{font-weight:800}
.alert .go{margin-left:auto;flex-shrink:0;font-weight:700;opacity:.8;text-decoration:underline;text-underline-offset:3px}

/* ---------- the hero: the one bold thing on the whole app ---------- */
.hero{
  background:linear-gradient(158deg,var(--navy) 0%,var(--navy-deep) 100%);
  border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-5) var(--sp-4);
  color:#fff;position:relative;overflow:hidden;margin-bottom:var(--sp-4);
}
.hero::after{
  content:"";position:absolute;width:220px;height:220px;border-radius:50%;
  top:-130px;right:-70px;
  background:radial-gradient(circle,rgba(243,111,36,.34),transparent 68%);
}
.hero-q{font-size:var(--t-label);color:#A8BADA;font-weight:600;position:relative}
.hero-fig{
  display:flex;align-items:baseline;gap:var(--sp-2);
  margin:var(--sp-2) 0 var(--sp-1);position:relative;
}
.hero-fig .amt{font-size:var(--t-display);font-weight:800;letter-spacing:-.035em;line-height:1}
.hero-fig .of{font-size:var(--t-label);color:#A8BADA;font-weight:600}
.hero-state{font-size:var(--t-body);font-weight:650;position:relative;margin-bottom:var(--sp-4)}
.hero-state.ahead{color:#6EE7B7}
.hero-state.behind{color:#FDBA74}

.hero-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden;position:relative}
.hero-bar span{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#F8A05C,var(--orange));
  transition:width 1s cubic-bezier(.22,1,.36,1);
}
.hero-foot{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:var(--sp-3);font-size:var(--t-micro);color:#A8BADA;position:relative;
}
.hero-foot b{color:#fff;font-size:var(--t-label)}

/* ---------- cards ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:var(--sp-4);margin-bottom:var(--sp-4);
  box-shadow:var(--lift);
}
.card-head{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.card-head h2{font-size:var(--t-body);font-weight:700;letter-spacing:-.01em}
.card-head .more{
  margin-left:auto;font-size:var(--t-label);font-weight:650;color:var(--orange);
}

/* ---------- who to chase ---------- */
.chase{display:flex;flex-direction:column;gap:var(--sp-2)}
.chase-row{
  display:grid;grid-template-columns:1fr auto;gap:var(--sp-2) var(--sp-3);
  padding:var(--sp-3);border-radius:var(--r-sm);
  border:1px solid var(--line-soft);background:var(--surface-2);
}
.chase-row .who b{display:block;font-size:var(--t-body);font-weight:650;letter-spacing:-.01em}
.chase-row .who i{display:block;font-style:normal;font-size:var(--t-label);color:var(--ink-3);margin-top:2px}
.chase-row .val{text-align:right}
.chase-row .val b{display:block;font-size:var(--t-body);font-weight:700}
.chase-row .val b.owed{color:var(--orange)}
.chase-row .val i{display:block;font-style:normal;font-size:var(--t-micro);color:var(--ink-3)}
.chase-acts{grid-column:1/-1;display:flex;gap:var(--sp-2);padding-top:var(--sp-3);border-top:1px solid var(--line-soft)}
.chase-acts a,.chase-acts button{
  flex:1;text-align:center;padding:10px;border-radius:var(--r-sm);
  font-size:var(--t-label);font-weight:650;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  min-height:42px;display:flex;align-items:center;justify-content:center;
}
.chase-acts .wa{background:var(--good-bg);border-color:transparent;color:var(--good)}
.chase-acts .take{background:var(--navy);border-color:transparent;color:#fff}
[data-theme="dark"] .chase-acts .take{background:var(--orange)}

/* ---------- money summary ---------- */
.money-card{cursor:pointer;transition:transform .16s,border-color .16s}
.money-card:active{transform:scale(.99)}
.money-top{display:flex;align-items:baseline;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.money-top .big{font-size:var(--t-title);font-weight:800;letter-spacing:-.02em}
.money-top .of{font-size:var(--t-label);color:var(--ink-3)}
.money-top .cnt{margin-left:auto;font-size:var(--t-label);color:var(--ink-3);font-weight:600}
.pips{display:flex;gap:5px}
.pip{flex:1;height:6px;border-radius:99px;background:var(--line)}
.pip.full{background:var(--good)}
.pip.part{background:var(--warn)}

/* ---------- milestones ---------- */
.miles{display:flex;flex-direction:column;gap:var(--sp-3)}
.mile{display:flex;align-items:center;gap:var(--sp-3)}
.mile .tick{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  border:2px solid var(--line);color:transparent;
}
.mile.done .tick{background:var(--good);border-color:var(--good);color:#fff}
.mile .tick svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.mile .lbl{flex:1;font-size:var(--t-label);color:var(--ink-2);font-weight:600}
.mile.done .lbl{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--line)}
.mile .amt{font-size:var(--t-label);font-weight:700;color:var(--ink-3)}
.mile.done .amt{color:var(--good)}

/* ---------- empty state: an invitation, not an apology ---------- */
.empty{text-align:center;padding:var(--sp-6) var(--sp-4)}
.empty h2{font-size:var(--t-title);font-weight:700;letter-spacing:-.02em;margin-bottom:var(--sp-2)}
.empty p{font-size:var(--t-body);color:var(--ink-3);max-width:34ch;margin:0 auto var(--sp-5)}
.empty button{
  background:var(--orange);color:#fff;border-radius:var(--r-sm);
  padding:14px var(--sp-5);font-weight:700;font-size:var(--t-body);
}