/* ── UNICORN: money.css ── */
/* Money tab only. Every selector is .money-* (or scoped under .money-scroll), so nothing here reaches
   another tab. The tab looks like the Overview tab: it is built from app.css's .dash-scroll, .widget,
   .widget-header, .widget-title and .widget-badge, and every surface, border and text colour here is an
   app.css token. The Money palette (--m-*) is declared once on .money-scroll and used ONLY by the
   composition bar and the charts (balance chart, goal progress). Buttons are the app-wide .btn-*. */

.money-scroll{
  --m-ink:#3B3431;--m-sage:#607B70;--m-mist:#BFD1CB;--m-sand:#EBE4DB;--m-mute:#7E746D;--m-cream:#FFFFF3;
}
.money-head{padding:4px 4px 12px;display:flex;flex-direction:column;gap:2px}
.money-h1{font-size:20px;font-weight:700;line-height:1.25}
.money-sec{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
.money-sec .widget{margin-bottom:0}
.money-sec-head{margin:4px 0 0;padding:0 4px;gap:10px;align-items:baseline}
.money-sec-head .widget-badge{text-align:right}
.money-panel{padding-top:16px}
.money-panel[hidden]{display:none}
.money-card{display:flex;flex-direction:column;gap:10px}
.money-card > .widget-header{margin-bottom:0}
.money-lead{font-size:13px;color:var(--taupe)}
.money-hero{font-size:28px;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.money-body{font-size:14px;line-height:1.5;margin:0}
.money-note{font-size:13px;color:var(--taupe);line-height:1.5}
.money-pad{padding:0 4px}
.money-absent{color:var(--taupe);font-style:italic;font-weight:400}
.money-good{font-weight:600}

/* Section switch + Cashflow period switch: pill segments, full width */
.money-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;background:var(--dismiss-border);border-radius:999px;padding:4px}
.money-seg button{min-height:40px;border:none;border-radius:999px;background:transparent;color:var(--ink);font:500 14px var(--font);cursor:pointer}
.money-seg button[aria-pressed="true"],.money-seg button[aria-selected="true"]{background:var(--white);font-weight:600}
.money-tabs button{min-height:44px}

/* Brief tiles */
.money-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.money-tile{padding:14px 12px;display:flex;flex-direction:column;gap:4px;min-width:0}
.money-tile-lbl{font-size:12px;color:var(--taupe)}
.money-tile-note{font-size:12px;color:var(--taupe);line-height:1.35}
.money-tile-val{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

/* Rows (balance sheet, coming up) */
.money-list{gap:0}
.money-list > .widget-header{margin-bottom:4px}
.money-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--border)}
.money-row:last-child{border-bottom:none}
.money-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.money-row-label{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.money-row-sub{font-size:12px;color:var(--taupe);overflow-wrap:anywhere}
.money-row-amt{font-size:14px;font-weight:600;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.money-date{width:36px;flex:none;text-align:center;display:flex;flex-direction:column}
.money-date span{font-size:11px;color:var(--taupe)}
.money-date strong{font-size:16px;font-weight:700}

/* Composition: Money palette. 1px ink separators between segments; the legend always names each
   segment, so identity never rests on colour alone. */
.money-comp{padding-top:4px;display:flex;flex-direction:column;gap:12px}
.money-bar{display:flex;height:14px;border-radius:999px;overflow:hidden;border:1px solid var(--m-ink)}
.money-bar span{display:block;height:100%;box-sizing:border-box}
.money-bar span + span{border-left:1px solid var(--m-ink)}        /* 1px ink separator between segments */
.money-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;font-size:13px}
.money-legend div{display:flex;align-items:center;gap:8px}
.money-sw{width:12px;height:12px;border-radius:3px;flex:none;border:1px solid var(--m-ink);box-sizing:border-box}
/* Composition fills — brand tokens only. Cash and Other are patterns so no two categories rely on a
   near-identical tint: cash is a diagonal ink-on-cream stripe, Other a dot grid on sand. */
.money-c-home{background:var(--m-ink)}
.money-c-pension{background:var(--m-sage)}
.money-c-investments{background:var(--m-mist)}
.money-c-cash{background:repeating-linear-gradient(45deg,var(--m-ink) 0 1.5px,var(--m-cream) 1.5px 5px)}
.money-c-other{background-color:var(--m-sand);background-image:radial-gradient(var(--m-mute) 1px,transparent 1.3px);background-size:4px 4px}

/* Balance chart: Money palette */
.money-chart{margin:4px 0 0}
.money-chart-wrap{position:relative}
.money-chart svg{display:block;width:100%;height:170px;overflow:visible;touch-action:pan-y}
.money-area{fill:var(--m-mist);opacity:.45}
.money-line{fill:none;stroke:var(--m-sage);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.money-dot{fill:var(--m-sage)}
.money-buf{stroke:var(--m-ink);stroke-width:1.2;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.money-buf-lbl{position:absolute;right:4px;font-size:12px;color:var(--m-ink);pointer-events:none}
.money-cross{stroke:var(--m-mute);stroke-width:1;vector-effect:non-scaling-stroke}
.money-tip{position:absolute;top:0;width:120px;background:var(--m-ink);color:#fff;font-size:12px;border-radius:8px;padding:4px 8px;text-align:center;pointer-events:none;font-variant-numeric:tabular-nums}
.money-axis{position:relative;height:16px;font-size:12px;color:var(--m-mute)}
.money-axis span{position:absolute;top:0;transform:translateX(-50%)}
.money-axis span:first-child{transform:none}

/* Goals — the progress bar is a chart: Money palette */
.money-goal-hd{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.money-goal-name{font-size:16px;font-weight:700;overflow-wrap:anywhere}
.money-status{font-size:13px;font-weight:600;white-space:nowrap}
.money-progress{height:8px;border-radius:999px;background:var(--m-sand);overflow:hidden}
.money-progress span{display:block;height:100%}
.money-fill{background:var(--m-sage)}
.money-fill-ink{background:var(--m-ink)}

/* Can we afford it? — pinned answers */
.money-afford-q{align-self:flex-end;max-width:85%;background:var(--light);border-radius:16px 16px 4px 16px;padding:10px 14px;font-size:14px}
.money-afford-a{display:flex;flex-direction:column;gap:8px}

/* Weekly brief cards */
.money-brief-cards{display:flex;flex-direction:column;gap:12px}
.money-brief-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.money-tag{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;color:var(--ink);background:var(--blush)}
.money-tag-nothing{background:var(--light)}
.money-tag-add{background:transparent;border:1px dashed var(--add-border)}
.money-brief-fig{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.money-brief-title{font-size:16px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.money-brief-opts{background:var(--light);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.money-brief-btns{display:flex;gap:8px;padding-top:4px}
.money-brief-btns > button{flex:1 1 0;width:auto}
.money-brief-done{opacity:.8}
.money-change{font-size:14px;font-weight:600}
.money-flash{outline:2px solid var(--sage);outline-offset:2px;border-radius:12px;transition:outline-color .6s}