/* ══════════════════════════════════════════════════════════════
   ALM ACADEMY · DEBT PAYOFF
   Sits on academy.css: the same rail, top bar, panels, buttons and
   tags. Everything here is scoped under .dp.

   Layout: one column of inputs on the left and the results pinned on
   the right, so a change anywhere shows up next to the field that made
   it. One column on narrow screens, with a dock at the bottom that
   keeps the date in view while typing.

   Chart colours: debts take the eight slots below in this fixed order,
   validated with the dataviz checker against the panel (#052B24, dark):
   lightness, chroma, CVD and normal-vision separation all pass. Mint
   is reserved for ALM. Re-run before changing:
   node validate_palette.js "#4F8BE8,#D3711F,#C060C0,#9C9435,#d55181,#2E9BD6,#c98500,#9085e9" --mode dark --surface "#052B24"
   ══════════════════════════════════════════════════════════════ */

.dp{
  --c-min:    var(--ink-3);
  --c-alm:    var(--mint);
  --c-tax:    #8FA39D;
  --c-pocket: #F2CF7A;
  --well:     rgba(1,16,13,.38);
  width:min(100%,1240px);
  container:dp / inline-size;
}
.dp .mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
/* the hidden attribute wins over every display rule below */
.dp [hidden], .dp-dock[hidden]{ display:none !important; }

/* ── shared pieces ──────────────────────────────────────── */
.dp-lab{ display:block; font-size:.76rem; font-weight:600; color:var(--ink-2); }
.dp-lab b{ margin-left:6px; font-weight:600; color:var(--ink); }
.dp-cap{ font-size:.74rem; line-height:1.5; color:var(--ink-3); }
.err{ font-size:.74rem; line-height:1.45; color:var(--red); }

.dp-ph{ display:flex; align-items:center; gap:10px; padding:18px 18px 0; }
.dp-ph h2{ font-size:1.02rem; font-weight:700; letter-spacing:-.01em; }
.dp-ph-r{ margin-left:auto; font-size:.8rem; color:var(--ink-2); text-align:right; }

.fld{ display:flex; flex-direction:column; gap:6px; min-width:0; }

.inp{
  display:flex; align-items:center; gap:2px;
  min-height:40px; padding:0 10px;
  background:var(--well); border:1px solid var(--rule); border-radius:var(--r-sm);
  transition:border-color .2s var(--ease);
}
.inp:focus-within{ border-color:var(--mint-deep); }
.inp i{ font-style:normal; font-family:var(--mono); font-size:.78rem; color:var(--ink-3); }
.inp input{
  width:100%; min-width:0; padding:9px 2px;
  background:none; border:0; color:var(--ink);
  font-family:var(--mono); font-size:.86rem; font-variant-numeric:tabular-nums;
}
.inp input:focus{ outline:none; }
.inp input::placeholder{ font-family:var(--sans); color:var(--ink-3); }
.inp.is-bad{ border-color:rgba(255,143,128,.6); }
.inp-sm{ width:120px; min-height:34px; }
.inp-sm input{ padding:6px 2px; font-size:.8rem; }

.chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 11px; border-radius:99px;
  background:transparent; border:1px solid var(--rule); color:var(--ink-2);
  font-family:var(--sans); font-size:.76rem; font-weight:500; cursor:pointer;
  transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.chips .chip{ font-family:var(--mono); font-size:.72rem; }
.chip .ic{ width:15px; height:15px; }
.chip:hover{ border-color:var(--mint-deep); color:var(--ink); }
.chip.is-on{ border-color:var(--mint-deep); color:var(--mint); background:var(--mint-dim); }
.chip:disabled{ opacity:.45; cursor:default; }
.chips{ display:flex; flex-wrap:wrap; gap:6px; }

.dp-link{
  padding:0; background:none; border:0; cursor:pointer;
  font-size:.78rem; font-weight:600; color:var(--ink-2);
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--rule);
}
.dp-link:hover{ color:var(--mint); text-decoration-color:var(--mint-deep); }

.dp-range{ width:100%; accent-color:var(--mint); cursor:pointer; }

.kv{ display:grid; gap:2px; margin-top:14px; padding-top:12px; border-top:1px solid var(--rule-soft); }
.kv > div{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.kv dt{ font-size:.78rem; color:var(--ink-2); }
.kv dd{ margin:0; font-size:.88rem; color:var(--ink); }
.kv dd.is-neg{ color:var(--red); }

/* ── layout ─────────────────────────────────────────────── */
.dp-grid{ display:grid; gap:16px; margin-top:26px; }
.dp-in{ display:grid; gap:16px; min-width:0; align-content:start; }
/* the top bar's height is auto on phones, so the jump back from the dock uses a fixed margin */
.dp-out{ padding:16px 18px 18px; min-width:0; scroll-margin-top:84px; }

/* phones and narrow windows: results first, then the inputs */
.dp-out{ order:-1; }

@container dp (min-width:860px){
  .dp-grid{ grid-template-columns:minmax(330px,400px) minmax(0,1fr); align-items:start; }
  .dp-out{ order:0; }
}
/* pinned beside the inputs whenever the window is tall enough to hold it */
@media (min-height:640px){
  @container dp (min-width:860px){
    .dp-out{ position:sticky; top:calc(var(--top) + 12px); }
  }
}

/* ── debts ──────────────────────────────────────────────── */
.debts{ display:grid; gap:8px; padding:14px 14px 0; }
.debt{
  --c:var(--ink-3);
  border:1px solid var(--rule); border-radius:var(--r-md);
  background:rgba(1,16,13,.24);
  transition:border-color .2s var(--ease);
}
.debt.is-open{ border-color:var(--rule-mint); }
.debt-row{
  display:grid; grid-template-columns:10px 18px minmax(0,1fr) auto 18px; align-items:center; gap:10px;
  width:100%; padding:11px 12px 4px;
  background:none; border:0; color:var(--ink); text-align:left; cursor:pointer;
}
.debt-sw{ width:10px; height:10px; border-radius:3px; background:var(--c); }
.debt-ic{ width:18px; height:18px; color:var(--ink-2); }
.debt-n{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.9rem; font-weight:650; }
.debt-v{ font-family:var(--mono); font-size:.8rem; color:var(--ink); white-space:nowrap; }
.debt-v small{ margin-left:8px; font-size:.7rem; color:var(--ink-3); }
.debt-chev{ width:16px; height:16px; color:var(--ink-3); transition:transform .25s var(--ease); }
.debt.is-open .debt-chev{ transform:rotate(180deg); }
.debt-s{
  display:flex; align-items:center; gap:7px;
  padding:0 12px 10px 50px;
  font-size:.74rem; color:var(--ink-3);
}
.debt-s .mono{ color:var(--ink-2); font-size:.7rem; }
.debt-s.is-bad{ color:var(--red); }
.debt-s .ic{ width:13px; height:13px; color:var(--c-pocket); }
.stamp{
  display:inline-block; padding:2px 7px; border-radius:4px;
  border:1px solid var(--mint-deep); color:var(--mint);
  font-size:.62rem; font-weight:800; letter-spacing:.06em;
}
@media (prefers-reduced-motion:no-preference){
  .stamp.is-new{ animation:stamp .45s var(--ease) both; }
  @keyframes stamp{ from{ transform:scale(1.6) rotate(-8deg); opacity:0; } to{ transform:none; opacity:1; } }
}
.debt-f{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;
  padding:4px 12px 12px;
}
.debt-f .fld-name{ grid-column:1 / -1; }
.debt-f .debt-msg{ grid-column:1 / -1; }
.debt-f .debt-del{ grid-column:1 / -1; justify-self:start; }
.debt-note{ font-size:.74rem; color:var(--ink-2); }

.dp-add{ padding:14px 14px 0; }
.dp-add-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.dp-add .dp-cap{ margin-top:8px; }

.dp-save{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; margin:16px 14px 0; padding:14px 0 16px; border-top:1px solid var(--rule-soft); }
.dp-save .dp-cap{ margin-left:auto; }
.dp-save .is-done{ color:var(--mint); }

/* ── budget ─────────────────────────────────────────────── */
.dp-budget{ display:grid; gap:14px; padding:14px 14px 18px; }
.dp-two{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
/* income, minus bills, minus minimums: what is left for Extra Per Month */
.dp-left{ margin-top:0; padding:10px 12px; border:1px solid var(--rule-soft); border-radius:var(--r-sm); background:rgba(1,16,13,.22); }
.dp-left dt{ font-size:.76rem; }
.dp-left dd{ font-size:.82rem; }
.dp-left .kv-sum{ margin-top:4px; padding-top:6px; border-top:1px solid var(--rule-soft); }
.dp-left .kv-sum dt{ color:var(--ink); font-weight:600; }
.dp-left .kv-sum dd{ font-weight:600; }

/* ── the ALM method ─────────────────────────────────────── */
.dp-alm{ display:grid; gap:16px; margin-top:12px; }
.dp-alm-h .sub{ margin-top:6px; }
.alm-card{ padding:18px; min-width:0; }
.alm-card h3{ font-size:1rem; font-weight:700; letter-spacing:-.01em; }
.alm-card-h{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.alm-f{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px; align-items:end; }
.alm-card > .fld{ margin-top:14px; }
.alm-card > .dp-cap{ margin-top:10px; }

/* the trades: each its own amount, profit, wins and losses */
.trades{ display:grid; margin-top:4px; }
.trade{ padding:14px 0 16px; }
.trade + .trade{ border-top:1px solid var(--rule-soft); }
.trade-h{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.trade-n{ font-size:.84rem; font-weight:650; color:var(--ink); }
.trade .alm-f{ margin-top:10px; }
.dp-addtrade{ margin-top:2px; }
.flow-pick{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }

.dp-step{
  display:grid; grid-template-columns:40px minmax(0,1fr) 40px; align-items:center;
  min-height:40px; border:1px solid var(--rule); border-radius:var(--r-sm); background:var(--well);
}
.dp-step button{ display:grid; place-items:center; height:38px; background:none; border:0; color:var(--ink-2); cursor:pointer; }
.dp-step button:hover{ color:var(--mint); }
.dp-step button .ic{ width:15px; height:15px; }
.dp-step:focus-within{ border-color:var(--mint-deep); }
.dp-step input{
  width:100%; min-width:0; padding:8px 0;
  background:none; border:0; color:var(--ink); text-align:center;
  font-family:var(--mono); font-size:.92rem; font-variant-numeric:tabular-nums;
}
.dp-step input:focus{ outline:none; }

.seg{ display:inline-flex; padding:3px; border-radius:9px; background:var(--well); border:1px solid var(--rule); }
.seg-b{
  padding:6px 10px; border:0; border-radius:7px; background:none; color:var(--ink-3); cursor:pointer;
  font-size:.74rem; font-weight:650;
}
.seg-b[aria-pressed="true"]{ background:var(--panel-hi); color:var(--ink); box-shadow:inset 0 0 0 1px var(--rule); }

/* the profit flow: one profit in, taxes, debt and pocket out */
.flow{ display:block; width:100%; margin-top:14px; overflow:visible; }
.flow .src{ fill:var(--ink-2); }
.flow .lab{ fill:var(--ink-2); font-size:11px; font-weight:600; }
.flow .val{ fill:var(--ink); font-family:var(--mono); font-size:13px; font-weight:600; }
.flow .val.big{ font-size:15px; }
.flow .neg{ fill:var(--red); font-family:var(--mono); font-size:13px; font-weight:600; }
.flow .msg{ fill:var(--ink-2); font-size:12px; }
.flow path{ fill-opacity:.3; }
.split-c{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:12px; }

.tiles{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.tile{
  padding:9px 4px; border-radius:var(--r-sm);
  background:var(--well); border:1px solid var(--rule); color:var(--ink-2); cursor:pointer;
  font-family:var(--mono); font-size:.8rem;
  transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.tile:hover{ border-color:var(--mint-deep); color:var(--ink); }
.tile[aria-pressed="true"]{ border-color:var(--mint-deep); color:var(--mint); background:var(--mint-dim); }
.alm-card .inp-sm{ margin-top:2px; }


/* ── results ────────────────────────────────────────────── */

/* the four plans on one board, like a departures board: pick one and the
   rest of the panel follows it */
.board{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--rule); border-radius:var(--r-md); overflow:hidden;
  background:var(--well);
}
.cell{
  position:relative;
  display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  min-width:0; padding:11px 14px 13px;
  background:none; border:0; border-left:1px solid var(--rule);
  color:var(--ink-2); text-align:left; cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.cell:first-child{ border-left:0; }
.cell:hover{ background:rgba(151,252,228,.04); color:var(--ink); }
.cell-n{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.8rem; font-weight:650; }
.cell-n .tag{ font-size:.5rem; padding:2px 6px; }
.cell-d{ font-family:var(--mono); font-size:1rem; font-weight:600; color:var(--ink); white-space:nowrap; }
.cell.is-alm .cell-d{ color:var(--mint); }
.cell[aria-selected="true"]{ background:var(--panel-hi); color:var(--ink); }
.cell[aria-selected="true"]::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--ink-2);
}
.cell.is-alm[aria-selected="true"]::after{ background:var(--mint); }
.dp-rule{ margin-top:10px; font-size:.8rem; color:var(--ink-2); }

.dp-stats{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr) minmax(0,1fr); gap:10px; margin-top:14px; }
.dp-stat{ padding:13px 15px; border-radius:var(--r-md); border:1px solid var(--rule); background:rgba(1,16,13,.28); min-width:0; }
.dp-stat > b{ display:block; margin-top:8px; font-size:1.12rem; font-weight:600; color:var(--ink); white-space:nowrap; }
.dp-stat > em{ display:block; margin-top:6px; font-style:normal; font-size:.72rem; color:var(--ink-3); }

/* the one loud thing on the page: one tile per letter, flipped in when it changes */
.flap{ display:flex !important; gap:3px; margin-top:8px; perspective:400px; }
.flap > span{
  display:inline-grid; place-items:center;
  min-width:1.05em; padding:6px 3px 5px;
  border-radius:4px; background:var(--field-deep); box-shadow:inset 0 -1px 0 rgba(151,252,228,.08);
  font-family:var(--mono); font-size:1.42rem; font-weight:600; line-height:1; color:var(--mint);
  transform-origin:50% 50%;
}
.flap > span.sp{ min-width:.5em; padding:0; background:none; box-shadow:none; }
@media (prefers-reduced-motion:no-preference){
  .flap > span.is-flip{ animation:flip .5s var(--ease) both; }
  @keyframes flip{ from{ transform:rotateX(-90deg); opacity:.15; } to{ transform:none; opacity:1; } }
}

.dp-views{ display:flex; gap:18px; margin-top:16px; border-bottom:1px solid var(--rule-soft); }
.dp-view{
  margin-bottom:-1px; padding:8px 0;
  background:none; border:0; border-bottom:2px solid transparent; cursor:pointer;
  font-size:.8rem; font-weight:650; color:var(--ink-3);
}
.dp-view[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--mint); }

/* chart */
.dp-chart{ position:relative; margin-top:12px; }
.dp-chart svg{ display:block; width:100%; overflow:visible; touch-action:pan-y; }
.dp-chart .grid line{ stroke:rgba(151,252,228,.08); stroke-width:1; }
.dp-chart .axis text{ fill:var(--ink-3); font-family:var(--mono); font-size:10px; }
.dp-chart .axis text.is-end{ fill:var(--ink); font-weight:600; }
.dp-chart .band{ fill-opacity:.22; }
.dp-chart .edge{ fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.dp-chart .base{ fill:none; stroke:var(--c-min); stroke-width:2; stroke-dasharray:5 5; }
.dp-chart .end{ fill:var(--mint); stroke:#052B24; stroke-width:2; }
.dp-chart .xh{ stroke:var(--ink-2); stroke-width:1; }
.dp-chart .hit{ fill:transparent; cursor:crosshair; }

.dp-tip{
  position:absolute; top:0; left:0; z-index:5; pointer-events:none;
  min-width:170px; padding:10px 12px;
  background:var(--field-deep); border:1px solid var(--rule); border-radius:var(--r-sm);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}
.dp-tip .t{ font-size:.74rem; font-weight:700; color:var(--ink-2); margin-bottom:6px; }
.dp-tip .r{ display:grid; grid-template-columns:14px auto 1fr; align-items:center; gap:8px; font-size:.74rem; color:var(--ink-3); line-height:1.75; }
.dp-tip .r b{ font-family:var(--mono); font-weight:600; color:var(--ink); }
.dp-tip .r i{ display:block; width:14px; height:0; border-top:2px solid var(--k); }
.dp-tip .r i.dash{ border-top-style:dashed; }
.dp-tip .r.sum{ margin-top:4px; padding-top:4px; border-top:1px solid var(--rule-soft); }

.dp-legend{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:10px; font-size:.74rem; color:var(--ink-2); }
.dp-legend span{ display:inline-flex; align-items:center; gap:7px; }
.dp-legend i{ display:inline-block; width:10px; height:10px; border-radius:2px; background:var(--k); }
.dp-legend i.line{ width:16px; height:0; border-radius:0; background:none; border-top:2px dashed var(--k); }

.dp-scrub{ display:flex; align-items:center; gap:12px; margin-top:12px; }
.dp-play{
  display:grid; place-items:center; width:36px; height:36px; flex:none;
  border-radius:50%; border:1px solid var(--rule-mint); background:var(--mint-dim); color:var(--mint); cursor:pointer;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.dp-play .ic{ width:14px; height:14px; }
.dp-play:hover{ border-color:var(--mint-deep); background:rgba(151,252,228,.18); }
.dp-scrub-m{ min-width:76px; font-size:.74rem; color:var(--ink-2); text-align:right; }

/* schedule */
.dp-table{ max-height:400px; overflow:auto; margin-top:12px; border:1px solid var(--rule); border-radius:var(--r-sm); }
.dp-table table{ width:100%; border-collapse:collapse; font-size:.8rem; }
.dp-table th{
  position:sticky; top:0; z-index:1; padding:10px 12px; background:var(--field-deep); text-align:left;
  font-size:.74rem; font-weight:650; color:var(--ink-3);
}
.dp-table td{ padding:8px 12px; border-top:1px solid var(--rule-soft); color:var(--ink-2); white-space:nowrap; }
.dp-table .dp-num{ text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; }
.dp-table th.dp-num{ font-family:var(--sans); }
.dp-table td.dp-num{ color:var(--ink); }
.dp-table tr.is-paid td{ color:var(--mint); }

/* ── the dock: phones only, while the results are off screen ── */
.dp-dock{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(1,16,13,.94); border-top:1px solid var(--rule);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.dock-b{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  width:100%; padding:0; background:none; border:0; color:var(--ink); text-align:left; cursor:pointer;
  font-family:var(--sans);
}
.dock-m{ font-size:.78rem; font-weight:650; color:var(--ink-2); }
.dock-d{ font-family:var(--mono); font-size:1rem; font-weight:600; color:var(--ink); }
.dock-d.is-alm{ color:var(--mint); }

/* short laptop screens: a tighter panel leaves the chart more room */
@media (max-height:780px){
  .cell{ padding:8px 12px 10px; }
  .dp-rule{ margin-top:8px; }
  .dp-stats{ margin-top:10px; }
  .dp-stat{ padding:10px 13px; }
  .dp-stat > em{ margin-top:4px; }
  .flap > span{ font-size:1.2rem; padding:5px 3px 4px; }
  .dp-views{ margin-top:10px; }
  .dp-scrub{ margin-top:8px; }
}

/* room under the footer so the dock never covers the last lines */
body.has-dock .foot{ padding-bottom:84px; }

/* ── responsive ─────────────────────────────────────────── */
@container dp (max-width:560px){
  .dp-out{ padding:12px 12px 16px; }
  .board{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cell:nth-child(3){ border-left:0; }
  .cell:nth-child(n+3){ border-top:1px solid var(--rule); }
  .dp-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dp-stat-hero{ grid-column:1 / -1; }
  .split-c{ grid-template-columns:1fr; gap:12px; }
}

@media (max-width:420px){
  .flap > span{ font-size:1.2rem; }
  .alm-f{ gap:10px; }
  .tiles{ gap:4px; }
}