/* ══════════════════════════════════════════════════════════════
   ALM ACADEMY · RETIREMENT CALCULATOR
   Sits on academy.css: the same rail, top bar, panels, buttons and
   tags. Every class here starts with rc- because academy.css owns
   plain names like .num, .step, .goal, .stat and .dot.

   Layout, same as Debt Payoff: inputs in one column on the left,
   the results pinned on the right. Phones: results first, then the
   inputs, with a dock at the bottom that keeps the age in view.

   Path colours, checked with the dataviz validator against the panel
   (#052B24, dark): #4F8BE8 and #D3711F pass every check as a pair; mint
   is the hero and sits above the band on purpose, like the Vault on the
   Vault page; the gold Number line clears every pair (worst ΔE 12.3
   deutan, 16.0 normal vision). Re-run before changing:
   node validate_palette.js "#4F8BE8,#D3711F,#97FCE4,#F2CF7A" --mode dark --surface "#052B24" --pairs all
   ══════════════════════════════════════════════════════════════ */

.rc{
  --c-base:   #4F8BE8;
  --c-trades: #D3711F;
  --c-vault:  var(--mint);
  --c-need:   #F2CF7A;
  --c-tax:    #8FA39D;
  --c-pocket: #C060C0;
  --well:     rgba(1,16,13,.38);
  width:min(100%,1360px);
  container:rc / inline-size;
  /* an open ? answer near the edge never widens the page */
  overflow-x:clip;
}
.rc .mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.rc .phead-c{ max-width:none; }
/* a control reached with Tab never hides under the sticky top bar or the phone dock */
html{ scroll-padding-top:calc(var(--top) + 16px); scroll-padding-bottom:96px; }
/* the hidden attribute wins over every display rule below */
.rc [hidden], .rc-dock[hidden]{ display:none !important; }

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

.rc-ph{ display:flex; align-items:center; gap:10px; padding:18px 18px 0; }
.rc-ph h2{ font-size:1.02rem; font-weight:700; letter-spacing:-.01em; }

/* the steps: a number, a title, and one line on what to do */
.rc-sh{ display:grid; gap:4px; padding:18px 18px 0; }
.rc-sh h2{ font-size:1.08rem; font-weight:700; letter-spacing:-.01em; }
.rc-stepn{ font-family:var(--mono); font-size:.72rem; font-weight:600; color:var(--mint); }
.rc-how{ font-size:.84rem; line-height:1.5; color:var(--ink-2); max-width:62ch; }
.rc-pad > .rc-how{ margin-top:6px; }
/* how-to lines under a field: quieter than the label, brighter than a caption */
.rc-hint{ font-size:.75rem; line-height:1.45; color:#7FA39A; }
.rc-tabhint{ margin-top:12px; font-size:.78rem; line-height:1.45; color:var(--ink-2); }

/* sample numbers on screen: one calm line with the way in */
.rc-notice{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; margin:0 0 12px;
  padding:8px 12px; border-radius:var(--r-sm);
  background:rgba(242,207,122,.07); border:1px solid rgba(242,207,122,.24);
  font-size:.78rem; line-height:1.45; color:var(--ink-2);
}
.rc-notice .rc-link{ font-size:.78rem; color:var(--ink); }

/* the ? answers: hover on a computer, a tap on a phone, Enter on a keyboard */
.rc-help{ position:relative; display:inline-flex; vertical-align:middle; margin-left:4px; }
.rc-help:empty{ display:none; }
.rc-q{
  position:relative; display:inline-grid; place-items:center;
  width:17px; height:17px; padding:0; border-radius:50%;
  border:1px solid var(--rule-mint); background:transparent; color:var(--ink-2);
  font-family:var(--sans); font-size:.64rem; font-weight:700; line-height:1; cursor:help;
  transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.rc-q:hover, .rc-help.is-open .rc-q{ color:var(--mint); border-color:var(--mint-deep); background:var(--mint-dim); }
.rc-pop{
  display:none; position:absolute; z-index:40; top:calc(100% + 8px); left:50%;
  transform:translateX(calc(-50% + var(--dx, 0px)));
  width:max-content; max-width:min(280px, calc(100vw - 32px)); padding:10px 12px;
  border-radius:var(--r-sm); background:var(--field-deep); border:1px solid var(--rule);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  font-family:var(--sans); font-size:.78rem; font-weight:400; line-height:1.5; letter-spacing:0;
  text-transform:none; text-align:left; white-space:normal; color:var(--ink-2);
}
@media (hover:hover){ .rc-help:hover .rc-pop{ display:block; } }
.rc-help.is-open .rc-pop{ display:block; }
@media (pointer:coarse){ .rc-q::after{ content:""; position:absolute; inset:-12px; } }

.rc-fld{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.rc-f2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 12px; padding:14px 18px 0; align-items:start; }
.rc-body{ display:grid; gap:16px; padding:14px 18px 18px; }

.rc-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);
}
.rc-inp:focus-within{ border-color:var(--mint-deep); }
.rc-inp i{ font-style:normal; font-family:var(--mono); font-size:.78rem; color:var(--ink-3); }
.rc-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;
}
.rc-inp input:focus{ outline:none; }
.rc-inp input::placeholder{ font-family:var(--sans); color:var(--ink-3); }
.rc-inp.is-bad{ border-color:rgba(255,143,128,.6); }
.rc-inp-sm{ width:120px; min-height:34px; }
.rc-inp-sm input{ padding:6px 2px; font-size:.8rem; }

/* a count or an age: type it, use the arrow keys, or the - and + buttons */
.rc-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);
  transition:border-color .2s var(--ease);
}
.rc-step button{ display:grid; place-items:center; height:38px; background:none; border:0; color:var(--ink-2); cursor:pointer; }
.rc-step button:hover{ color:var(--mint); }
.rc-step button .ic{ width:15px; height:15px; }
.rc-step:focus-within{ border-color:var(--mint-deep); }
.rc-step.is-bad{ border-color:rgba(255,143,128,.6); }
.rc-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;
}
.rc-step input:focus{ outline:none; }

.rc-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(--mono); font-size:.72rem; font-weight:500; cursor:pointer;
  transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.rc-chip-w, .rc-add{ font-family:var(--sans); font-size:.76rem; }
.rc-chip .ic{ width:15px; height:15px; }
.rc-chip:hover{ border-color:var(--mint-deep); color:var(--ink); }
.rc-chip.is-on{ border-color:var(--mint-deep); color:var(--mint); background:var(--mint-dim); }
.rc-chip:disabled{ opacity:.45; cursor:default; }
.rc-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }

.rc-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);
}
.rc-link:hover{ color:var(--mint); text-decoration-color:var(--mint-deep); }
.rc-link.is-done{ color:var(--mint); }

.rc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:38px; padding:8px 16px; border-radius:99px;
  background:transparent; border:1px solid var(--rule-mint); color:var(--ink);
  font-size:.8rem; font-weight:650; cursor:pointer;
  transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.rc-btn:hover{ border-color:var(--mint-deep); background:var(--mint-dim); }
.rc-btn.is-done{ color:var(--mint); border-color:var(--mint-deep); background:var(--mint-dim); }
.rc-btn.is-warn{ color:var(--red); border-color:rgba(255,143,128,.55); background:var(--red-dim); }
.rc-btn.is-on{ color:var(--mint); border-color:var(--mint-deep); background:var(--mint-dim); }
.rc-btn-sm{ min-height:34px; padding:6px 13px; font-size:.78rem; }
.rc-btn b{ font-weight:600; }


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

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

.rc-tiles{ display:grid; gap:6px; }
.rc-tiles-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.rc-tiles-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.rc-tiles-5{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.rc-tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  min-height:38px; padding:7px 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);
}
.rc-tile small{ font-family:var(--sans); font-size:.68rem; font-weight:600; color:var(--ink-2); }
.rc-tile:hover{ border-color:var(--mint-deep); color:var(--ink); }
.rc-tile[aria-pressed="true"]{ border-color:var(--mint-deep); color:var(--mint); background:var(--mint-dim); }
.rc-tile[aria-pressed="true"] small{ color:var(--ink-2); }
/* the custom multiple sits in the last tile's slot */
.rc-tile-in{ min-height:38px; padding:0 4px; }
.rc-tile-in input{ text-align:center; font-size:.78rem; padding:6px 0; }
.rc-tile-in input::placeholder{ font-size:.72rem; }
.rc-inp.is-on{ border-color:var(--mint-deep); background:var(--mint-dim); }
.rc-inp.is-on input{ color:var(--mint); }
.rc-tile-in.is-on{ border-color:var(--mint-deep); background:var(--mint-dim); }
.rc-tile-in.is-on input{ color:var(--mint); }


/* ── layout ─────────────────────────────────────────────── */
.rc-grid{ display:grid; gap:16px; margin-top:26px; }
.rc-in{ display:grid; gap:16px; min-width:0; align-content:start; }
.rc-card{ min-width:0; padding-bottom:18px; }
.rc-pad{ padding:18px; }
.rc-pad h3{ font-size:1rem; font-weight:700; letter-spacing:-.01em; }
/* the top bar's height is auto on phones, so the jump back from the dock uses a fixed margin */
.rc-out{ padding:16px 18px 18px; min-width:0; scroll-margin-top:84px; container:out / inline-size; }

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

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

/* ── you ────────────────────────────────────────────────── */
.rc-fld-kv{ align-self:stretch; justify-content:flex-start; }
.rc-fld-kv b{
  display:flex; align-items:center; min-height:40px; padding:0 2px;
  font-size:.92rem; font-weight:600; color:var(--ink);
}

.rc-more{ margin:16px 18px 0; border-top:1px solid var(--rule-soft); }
.rc-more summary{
  display:flex; align-items:center; gap:10px; padding:12px 0 0; cursor:pointer; list-style:none;
  font-size:.78rem; font-weight:650; color:var(--ink-2);
}
.rc-more summary::-webkit-details-marker{ display:none; }
.rc-more summary:hover{ color:var(--ink); }
.rc-more summary:focus-visible{ outline:2px solid var(--mint); outline-offset:3px; border-radius:6px; }
.rc-more summary .ic{ width:15px; height:15px; margin-left:auto; color:var(--ink-3); transition:transform .25s var(--ease); }
.rc-more[open] summary .ic{ transform:rotate(180deg); }
.rc-more-v{ font-size:.7rem; font-weight:400; color:var(--ink-3); }
.rc-more .rc-f2{ padding:12px 0 0; }

/* ── retirement ─────────────────────────────────────────── */
.rc-need{
  display:grid; gap:4px; padding:12px 14px 13px;
  border:1px solid var(--rule-soft); border-radius:var(--r-md); background:rgba(1,16,13,.26);
}
.rc-need-h{ display:flex; align-items:center; gap:8px; }
.rc-need-h .rc-lab{ display:flex; align-items:center; gap:8px; }
.rc-need-h .rc-lab::before{ content:""; width:14px; height:0; border-top:2px dashed var(--c-need); }
.rc-need-h .tag{ font-size:.55rem; padding:2px 7px; }
.rc-need-v{ font-size:1.36rem; font-weight:600; color:var(--ink); letter-spacing:-.01em; }
/* on Auto: the number for retiring ten years earlier, at the goal, and ten years later */
.rc-need-ages{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:8px; }
.rc-need-ages > div{ min-width:0; padding:7px 9px; border:1px solid var(--rule-soft); border-radius:var(--r-sm); background:rgba(1,16,13,.25); }
.rc-need-ages > div.is-goal{ border-color:var(--rule-mint); }
.rc-need-ages span{ display:block; font-size:.66rem; font-weight:600; color:var(--ink-3); }
.rc-need-ages b{ display:block; margin-top:2px; font-size:.86rem; font-weight:600; color:var(--ink); }

/* ── the ALM method ─────────────────────────────────────── */
.rc-alm{ display:grid; gap:16px; margin-top:12px; }
.rc-alm-h{ display:grid; gap:6px; }

.rc-trades{ display:grid; margin-top:4px; container:trades / inline-size; }
.rc-trade{ padding:14px 0 16px; }
.rc-trade + .rc-trade{ border-top:1px solid var(--rule-soft); }
.rc-trade-h{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.rc-trade-n{ font-size:.84rem; font-weight:650; color:var(--ink); }
.rc-trade-f{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:10px; }
.rc-trade-f .rc-fld-w{ grid-column:1 / -1; }
.rc-add{ margin-top:2px; }
.rc-note{ margin-top:10px; }
#trade-max{ margin-top:8px; }

/* what one win makes, and what it does for the retire date */
.rc-win{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:12px; border:1px solid var(--rule-soft); border-radius:var(--r-sm);
  background:rgba(1,16,13,.22);
}
.rc-win > div{ display:flex; flex-direction:column; gap:4px; min-width:0; padding:9px 11px 10px; }
.rc-win > div + div{ border-left:1px solid var(--rule-soft); }
.rc-win > div > span{ font-size:.68rem; font-weight:600; color:var(--ink-3); line-height:1.25; }
.rc-win b{ font-family:var(--mono); font-size:.86rem; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rc-win b.is-up{ color:var(--mint); }
.rc-win b.is-down{ color:var(--red); }
/* a ? stays with the word before it */
.rc-nw{ white-space:nowrap; }

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

#vault-card .rc-fld{ margin-top:14px; }
#wr-custom{ text-align:left; }
#vault-card .rc-inp-sm{ margin-top:2px; }
#vret-cap{ margin-top:2px; }

.rc-save{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; padding:2px 4px 0; }
.rc-save .rc-cap{ margin-left:auto; }
#reset{ min-width:136px; }

/* ── results ────────────────────────────────────────────── */
.rc-out-h{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; margin-bottom:12px; }
.rc-out-h h2{ font-size:1.02rem; font-weight:700; letter-spacing:-.01em; }
.rc-out-h .tag{ font-size:.55rem; padding:2px 7px; }
.rc-out-h .rc-goalchip{ margin-left:auto; }
.rc-goalchip{
  display:inline-flex; align-items:baseline; gap:8px; padding:5px 11px; border-radius:99px;
  border:1px solid var(--rule); font-size:.74rem; font-weight:600; color:var(--ink-2);
}
.rc-goalchip b{ font-size:.8rem; font-weight:600; color:var(--ink); }
button.rc-goalchip{ background:none; cursor:pointer; transition:border-color .2s var(--ease); }
button.rc-goalchip:hover{ border-color:var(--mint-deep); color:var(--ink); }

/* the board: every path at once, like a departures board. Pick one and the
   chart follows it. */
.rc-board{ border:1px solid var(--rule); border-radius:var(--r-md); overflow:hidden; background:var(--well); }
.rc-row{
  position:relative;
  display:grid; grid-template-columns:16px minmax(0,1fr) auto 96px 108px; align-items:center; gap:12px;
  width:100%; padding:10px 16px; min-height:62px;
  background:none; border:0; color:var(--ink-2); text-align:left; cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.rc-row + .rc-row{ border-top:1px solid var(--rule); }
.rc-row:hover{ background:rgba(151,252,228,.04); color:var(--ink); }
.rc-row[aria-selected="true"]{ background:var(--panel-hi); color:var(--ink); }
.rc-row[aria-selected="true"]::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--k); }
.rc-row:disabled{ cursor:default; opacity:.62; }
/* the board clips its corners, so the focus ring sits inside the row */
.rc-row:focus-visible{ outline:2px solid var(--mint); outline-offset:-4px; border-radius:var(--r-sm); }
.rc-row:disabled:hover{ background:none; color:var(--ink-2); }
.rc-key{ display:block; width:16px; height:0; border-top:3px solid var(--k); border-radius:2px; }
.rc-name{ font-size:.88rem; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rc-when{ font-family:var(--mono); font-size:.76rem; color:var(--ink-2); white-space:nowrap; }
.rc-vs{ font-size:.76rem; font-weight:600; text-align:right; white-space:nowrap; color:var(--ink-3); }
.rc-vs.is-early{ color:var(--mint); }
.rc-vs.is-late{ color:var(--ink-2); }

/* the one loud thing on the page: the retire age, one tile per digit, flipped in when it changes */
.rc-flap{ display:flex; gap:3px; perspective:400px; justify-content:flex-end; }
.rc-flap > span{
  display:inline-grid; place-items:center;
  min-width:1.1em; 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(--ink);
  transform-origin:50% 50%;
}
.rc-flap > span.is-word{ font-family:var(--sans); font-size:.86rem; font-weight:700; padding:8px 8px 7px; color:var(--ink-2); }
.rc-row.is-vault .rc-flap > span{ color:var(--mint); }
.rc-row:disabled .rc-flap > span{ color:var(--ink-3); }
@media (prefers-reduced-motion:no-preference){
  .rc-flap > span.is-flip{ animation:rc-flip .5s var(--ease) both; }
  @keyframes rc-flip{ from{ transform:rotateX(-90deg); opacity:.15; } to{ transform:none; opacity:1; } }
}

.rc-numline{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 10px; margin-top:12px; font-size:.8rem; color:var(--ink-2); }
.rc-numkey{ align-self:center; width:16px; height:0; border-top:2px dashed var(--c-need); }
.rc-numline b{ font-size:.92rem; font-weight:600; color:var(--ink); }
.rc-numsub{ font-size:.74rem; color:var(--ink-3); }

.rc-views{ display:flex; gap:18px; margin-top:14px; border-bottom:1px solid var(--rule-soft); }
.rc-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);
}
.rc-view:hover{ color:var(--ink-2); }
.rc-view[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--mint); }

/* chart */
.rc-chart{ position:relative; margin-top:12px; }
.rc-chart svg{ display:block; width:100%; overflow:visible; touch-action:pan-y; }
.rc-chart .grid line{ stroke:rgba(151,252,228,.08); stroke-width:1; }
.rc-chart .axis text{ fill:var(--ink-3); font-family:var(--mono); font-size:10px; }
.rc-chart .axis text.is-need{ fill:var(--ink); font-weight:600; }
.rc-chart .need{ fill:none; stroke:var(--c-need); stroke-width:1.5; stroke-dasharray:6 5; }
.rc-chart .goal{ stroke:var(--ink-3); stroke-width:1; stroke-dasharray:3 4; }
.rc-chart .goal-band{ fill:rgba(157,186,178,.07); }
.rc-chart .goal-t{ fill:var(--ink-2); font-size:10px; font-weight:600; }
.rc-chart .ln{ fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.rc-chart .ln.is-on{ stroke-width:3; }
.rc-chart .area{ fill-opacity:.1; }
.rc-chart .pt{ stroke:#052B24; stroke-width:2; }
.rc-chart .pt-t{ fill:var(--ink); font-family:var(--mono); font-size:11px; font-weight:600; }
.rc-chart .gap{ fill:none; stroke:var(--ink-2); stroke-width:1; }
.rc-chart .gap-t{ fill:var(--ink); font-size:11px; font-weight:650; }
/* text over lines keeps a ring of the panel colour around it */
.rc-chart .halo{ paint-order:stroke; stroke:#052B24; stroke-width:4px; stroke-linejoin:round; }
.rc-chart .xh{ stroke:var(--ink-2); stroke-width:1; }
.rc-chart .hit{ fill:transparent; cursor:crosshair; }

.rc-tip{
  position:absolute; top:0; left:0; z-index:5; pointer-events:none;
  min-width:180px; 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);
}
.rc-tip .t{ font-size:.74rem; font-weight:700; color:var(--ink-2); margin-bottom:6px; }
.rc-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; }
.rc-tip .r b{ font-family:var(--mono); font-weight:600; color:var(--ink); }
.rc-tip .r i{ display:block; width:14px; height:0; border-top:2px solid var(--k); }
.rc-tip .r i.dash{ border-top-style:dashed; }
.rc-tip .r.sum{ margin-top:4px; padding-top:4px; border-top:1px solid var(--rule-soft); }

.rc-legend{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:10px; font-size:.74rem; color:var(--ink-2); }
.rc-legend span{ display:inline-flex; align-items:center; gap:7px; }
.rc-legend i{ display:inline-block; width:16px; height:0; border-top:2px solid var(--k); }
.rc-legend i.dash{ border-top-style:dashed; }
.rc-legend i.dot{ width:auto; }

/* tables: milestones and goal */
.rc-table{ max-height:440px; overflow:auto; margin-top:12px; border:1px solid var(--rule); border-radius:var(--r-sm); }
.rc-table table{ width:100%; border-collapse:collapse; font-size:.8rem; }
.rc-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); white-space:nowrap;
}
.rc-table th .rc-key{ display:inline-block; vertical-align:middle; margin-right:7px; width:12px; }
.rc-yr.rc-yr-n{ font-family:var(--sans); font-weight:600; white-space:normal; }
.rc-table td{ padding:9px 12px; border-top:1px solid var(--rule-soft); color:var(--ink-2); vertical-align:top; }
.rc-table .rc-num{ text-align:right; }
.rc-table td.rc-amt{ font-family:var(--mono); color:var(--ink); white-space:nowrap; }
.rc-table tr.is-need td{
  position:sticky; bottom:0; z-index:1;
  background:linear-gradient(rgba(242,207,122,.06), rgba(242,207,122,.06)), #04261F;
  border-top-color:var(--rule);
}
.rc-table tr.is-need td.rc-amt{ font-weight:600; }
.rc-age{ display:block; font-family:var(--mono); color:var(--ink); white-space:nowrap; }
.rc-yr{ display:block; margin-top:2px; font-family:var(--mono); font-size:.68rem; color:var(--ink-3); }
.rc-none{ color:var(--ink-3); white-space:nowrap; }
.rc-tnote{ margin-top:8px; }

.rc-goal-t{ margin-top:12px; font-size:.84rem; color:var(--ink-2); }
.rc-goal-t b{ color:var(--ink); }
.rc-need-c b{ display:block; font-family:var(--mono); font-weight:600; color:var(--ink); white-space:nowrap; }
.rc-need-c span{ display:block; margin-top:2px; font-size:.7rem; color:var(--ink-3); }
.rc-now{ font-family:var(--mono); color:var(--ink-2); white-space:nowrap; }
#goal-body .rc-key{ display:inline-block; vertical-align:middle; width:12px; margin-right:8px; }
.rc-st{
  display:inline-block; padding:3px 8px; border-radius:99px; white-space:nowrap;
  font-size:.66rem; font-weight:700; border:1px solid var(--rule);
}
.rc-st.is-ok{ color:var(--mint); border-color:var(--mint-deep); background:var(--mint-dim); }
.rc-st.is-short{ color:var(--red); border-color:rgba(255,143,128,.4); background:var(--red-dim); }
.rc-st.is-off{ color:var(--ink-3); }

/* ── the dock: phones only, while the results are off screen ── */
.rc-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);
}
.rc-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);
}
.rc-dock-m{ font-size:.78rem; font-weight:650; color:var(--ink-2); }
.rc-dock-d{ font-family:var(--mono); font-size:1rem; font-weight:600; color:var(--ink); }
.rc-dock-d.is-vault{ color:var(--mint); }
.rc-dock-s{ font-family:var(--mono); font-size:.74rem; color:var(--ink-3); }

/* room under the footer so the dock never covers the last lines */
body.has-dock .foot{ padding-bottom:84px; }
/* beside the side menu, the dock starts where the page does */
@media (min-width:1001px){ .rc-dock{ left:var(--rail); } }

/* one column only: a way back down to the inputs */
.rc-edit{ display:none; width:100%; margin-top:16px; }
@container rc (max-width:759px){ .rc-edit{ display:flex; } }
.rc-src{ margin-top:10px; }

/* short laptop screens: a tighter panel leaves the chart more room */
@media (max-height:780px){
  .rc-row{ min-height:54px; padding:7px 16px; }
  .rc-flap > span{ font-size:1.2rem; padding:5px 3px 4px; }
  .rc-out-h{ margin-bottom:10px; }
  .rc-numline{ margin-top:10px; }
  .rc-views{ margin-top:10px; }
}

/* ── responsive ─────────────────────────────────────────── */
/* the results panel's own width decides how a board row lays out */
@container out (max-width:540px){
  .rc-row{
    grid-template-columns:16px minmax(0,1fr) auto;
    grid-template-areas:"k n f" ". w v";
    gap:4px 12px; padding:10px 14px;
  }
  .rc-row .rc-key{ grid-area:k; }
  .rc-row .rc-name{ grid-area:n; }
  .rc-row .rc-flap{ grid-area:f; }
  .rc-row .rc-when{ grid-area:w; }
  .rc-row .rc-vs{ grid-area:v; }
  .rc-table td, .rc-table th{ padding-left:9px; padding-right:9px; }
}

@container rc (max-width:560px){
  .rc-out{ padding:12px 12px 16px; }
  .rc-split{ grid-template-columns:1fr; gap:12px; }
}

/* a narrow results panel: the milestone table's heads wrap and the cells tighten */
@container out (max-width:540px){
  .rc-table table{ font-size:.74rem; }
  .rc-table th{ white-space:normal; line-height:1.3; vertical-align:bottom; }
  .rc-table th .rc-key{ display:block; margin:0 0 5px; }
  .rc-table td, .rc-table th{ padding:8px 7px; }
  .rc-table td:first-child, .rc-table th:first-child{ padding-left:10px; }
  .rc-yr{ font-size:.62rem; }
}

/* a narrow trade: what one win does reads as rows */
@container trades (max-width:330px){
  .rc-win{ grid-template-columns:1fr; }
  .rc-win > div{ flex-direction:row; align-items:baseline; justify-content:space-between; padding:7px 10px; }
  .rc-win > div + div{ border-left:0; border-top:1px solid var(--rule-soft); }
}

/* fingers: every control at least 40px tall */
@media (pointer:coarse){
  .rc-chip{ min-height:40px; padding:8px 13px; }
  .rc-tile, .rc-tile-in{ min-height:44px; }
  .rc-inp, .rc-inp-sm{ min-height:44px; }
  .rc-step{ min-height:44px; }
  .rc-step button{ height:42px; }
  .rc-range{ height:36px; }
  .rc-more summary{ min-height:44px; padding-top:6px; }
  .rc-link{ min-height:40px; padding:0 4px; }
  .rc-btn{ min-height:44px; padding:10px 18px; }
  .rc-view{ padding:12px 6px; }
}

@media (max-width:420px){
  .rc-flap > span{ font-size:1.22rem; }
  .rc-f2{ gap:12px 10px; padding-left:14px; padding-right:14px; }
  .rc-ph{ padding-left:14px; padding-right:14px; }
  .rc-body{ padding-left:14px; padding-right:14px; }
  .rc-more{ margin-left:14px; margin-right:14px; }
  .rc-pad{ padding:16px 14px; }
  .rc-tiles{ gap:4px; }
  .rc-win > div{ padding:8px 9px 9px; }
}