/* ============================================================
   Reset, document defaults, shared utilities and number styling.
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  font-size:var(--fs-base);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
  font-feature-settings: normal;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;background:none;border:none;font-feature-settings:inherit}
input,select,textarea{outline:none}

.num{font-size:var(--fs-sm);font-weight:500;color:var(--ink)}
/* every money/number element: fixed-width digits so columns line up */
.num, .stat-value, .stat-delta, .settle-amt, .debt-meta,
.bgt-amt, .goal-amt, .goal-pct, .goal-remain, .wfact-val,
.sp-amt, .split-sum, input.tx-amount-field, input[type="number"],
.tbl td, .tbl th, .cl-row{font-variant-numeric:tabular-nums}
/* amount colours — set via amountClass() / txKindClass() in state.js */
.num.neg{color:var(--bad)}
.num.pos{color:var(--good)}
.num.zero{color:var(--ink-mute)}
.num.move{color:var(--move)}
.muted{color:var(--ink-mute)}
.soft{color:var(--ink-soft)}
.faint{color:var(--ink-faint)}

/* Misc */
.row{display:flex;align-items:center;gap:8px}
.spacer{flex:1}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}
.chart-wrap{position:relative;height:260px;width:100%}
.chart-wrap.lg{height:300px}
/* a card stretched by its row neighbour lets its chart grow into the space */
.card-fill{display:flex;flex-direction:column}
.card-fill .chart-wrap{flex:1 1 auto;height:auto;min-height:300px}
.divider{height:1px;background:var(--line-soft);margin:14px 0}
.hidden{display:none!important}
/* .field/.opt-extra set display, which would otherwise beat the UA [hidden] rule */
[hidden]{display:none!important}

/* Scrollbar */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:var(--radius-sm)}
::-webkit-scrollbar-thumb:hover{background:var(--ink-faint)}
::-webkit-scrollbar-track{background:transparent}