/* IPP vs RRSP calculator — Maple Groove Financial brand styling.
   All selectors scoped under .ippx so nothing leaks into the shared
   stylesheet (and the shared sheet's bare selectors can't reach in).
   Brand tokens (--ink, --accent, --blue, --green, --amber, --rule…)
   come from styles.css :root, loaded on the page. */

.ippx{
  max-width:1060px;
  margin:0 auto;
  font-family:'Space Mono', ui-monospace, monospace;
  color:var(--ink);
  font-size:15px;
}

/* ── intro ─────────────────────────────────────────────────── */
.ippx .page-header{margin:6px 0 24px}
.ippx .page-header h1{
  font-family:'Bebas Neue', sans-serif;
  font-size:38px;
  font-weight:400;
  letter-spacing:0.04em;
  color:var(--ink);
  margin-bottom:8px;
}
.ippx .page-header p{font-size:13px;color:var(--ink-dim);max-width:60ch;line-height:1.6}

/* ── map panel ─────────────────────────────────────────────── */
.ippx .map-panel{
  background:#0c0c0c;border:1px solid var(--rule-2);border-radius:12px;
  padding:20px;margin-bottom:28px;text-align:center;
}
.ippx .map-prompt{
  font-size:11px;color:var(--ink-dim);margin-bottom:14px;
  letter-spacing:0.25em;text-transform:uppercase;
}
.ippx .map-inner{max-width:680px;margin:0 auto}
.ippx #canada-map path{fill:#1c2433}        /* base fill (JS keeps in sync) */
.ippx .prov-map-group{transition:filter .15s, transform .2s;cursor:pointer;transform-box:fill-box;transform-origin:center bottom}
.ippx .prov-map-group:hover{filter:brightness(1.5);transform:translateY(-7px)}
.ippx .prov-map-group.selected{transform:translateY(-10px)}
.ippx .prov-map-group.selected path,
.ippx path.prov-map-group.selected{fill:var(--blue) !important}

.ippx .selected-bar{
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  margin-top:14px;padding:12px 18px;background:#07131f;border:1px solid #14344e;
  border-radius:8px;min-height:48px;
}
.ippx .prov-name{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:0.06em;color:var(--blue)}
.ippx .rate-chip{font-size:12px;color:#bae6fd;background:#0a1c2b;border:1px solid #14344e;border-radius:5px;padding:4px 12px}
.ippx .prompt-txt{font-size:12px;color:var(--ink-dim);letter-spacing:0.05em}

/* ── calc shell ────────────────────────────────────────────── */
.ippx .calc{max-width:940px;margin:0 auto}
.ippx .two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}

.ippx .card{background:#0c0c0c;border:1px solid var(--rule-2);border-radius:12px;overflow:hidden}
.ippx .card-hd{padding:13px 20px;border-bottom:1px solid var(--rule-2);display:flex;align-items:center;gap:10px}
.ippx .card-hd.blue{background:#07131f}
.ippx .card-hd.green{background:#06140c}
.ippx .hd-title{font-family:'Bebas Neue',sans-serif;font-size:17px;letter-spacing:0.05em}
.ippx .hd-title.blue{color:var(--blue)}
.ippx .hd-title.green{color:var(--green)}
.ippx .badge{font-size:10px;padding:3px 10px;border-radius:4px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase}
.ippx .badge.blue{background:#0a1c2b;color:#bae6fd}
.ippx .badge.green{background:#0c2417;color:#bbf7d0}
.ippx .card-body{padding:20px 22px}

/* ── sliders ───────────────────────────────────────────────── */
.ippx .sl{margin-bottom:16px}
.ippx .sl label{font-size:12px;color:var(--ink-dim);display:block;margin-bottom:7px;letter-spacing:0.04em}
.ippx .sl-row{display:flex;align-items:center;gap:14px}
.ippx .sl-row input[type=range]{flex:1;height:5px;accent-color:var(--blue);cursor:pointer}
.ippx .sl-val{                       /* ← the fix: was #1a1a1a on #111 (invisible) */
  font-size:15px;font-weight:700;color:var(--ink);
  min-width:96px;text-align:right;font-variant-numeric:tabular-nums;
}

/* ── statement lines ───────────────────────────────────────── */
.ippx .divider{border:none;border-top:1px solid var(--rule);margin:12px 0}
.ippx .line{display:flex;justify-content:space-between;align-items:center;padding:5px 0;gap:14px}
.ippx .line span{font-size:13px;color:var(--ink-dim)}
.ippx .line strong{font-size:13px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.ippx .line.deduct strong{color:var(--accent-glow)}
.ippx .line.sub-tot strong{color:var(--blue)}
.ippx .line.sub-tot2 strong{color:var(--green)}
.ippx .line.refund strong{color:var(--green)}
.ippx .line.big{padding:9px 0}
.ippx .line.big span{font-size:14px;color:var(--ink);font-weight:700}
.ippx .line.big strong{font-size:16px}
.ippx .line.big strong#c-net{color:var(--blue)}
.ippx .line.big strong#p-marg{color:var(--blue)}
.ippx .line.sbd-warn span,.ippx .line.sbd-warn strong{font-size:12px;color:var(--amber)}
.ippx .sbd-bar-wrap{height:7px;background:var(--rule-2);border-radius:4px;margin:3px 0 10px;overflow:hidden}
.ippx .sbd-bar{height:100%;border-radius:4px;transition:width .3s;background:var(--amber)}

/* ── metrics ───────────────────────────────────────────────── */
.ippx .metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.ippx .metric{background:#0c0c0c;border:1px solid var(--rule-2);border-radius:10px;padding:16px 18px}
.ippx .metric-lbl{font-size:11px;color:var(--ink-dim);margin-bottom:8px;letter-spacing:0.04em}
.ippx .metric-val{font-family:'Bebas Neue',sans-serif;font-size:30px;letter-spacing:0.02em;color:var(--ink);line-height:1}
.ippx .metric-val.blue{color:var(--blue)}
.ippx .metric-val.green{color:var(--green)}
.ippx .metric-val.amber{color:var(--amber)}

/* ── winner / headline advantage ───────────────────────────── */
.ippx .winner{
  background:#1a0e00;border:2px solid var(--amber);
  box-shadow:0 0 22px rgba(232,166,52,0.28);border-radius:10px;
  padding:16px 24px;display:flex;justify-content:space-between;align-items:center;
  margin-bottom:24px;flex-wrap:wrap;gap:12px;
}
.ippx .winner-label{font-size:13px;color:#fde68a;max-width:560px;line-height:1.5}
.ippx .winner-val{font-family:'Bebas Neue',sans-serif;font-size:30px;letter-spacing:0.03em;color:var(--amber);white-space:nowrap}

/* ── panels ────────────────────────────────────────────────── */
.ippx .panel{background:#0c0c0c;border:1px solid var(--rule-2);border-radius:12px;padding:22px;margin-bottom:20px}
.ippx .panel-title{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:0.04em;color:var(--ink);margin-bottom:16px}

/* ── money-flow diagram ────────────────────────────────────── */
.ippx .scenarios{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ippx .scenario{background:#0a0a0a;border:1px solid var(--rule-2);border-radius:10px;overflow:hidden}
.ippx .sc-hd{padding:11px 15px;font-size:12px;font-weight:700;letter-spacing:0.03em;border-bottom:1px solid var(--rule-2)}
.ippx .sc-hd.blue{background:#0a1726;color:var(--blue)}
.ippx .sc-hd.green{background:#06140c;color:var(--green)}
.ippx .sc-body{padding:16px}
.ippx .flow-anim{position:relative;height:380px}
.ippx .fnode{position:absolute;border-radius:8px;border:1px solid var(--rule-2);padding:9px 11px;font-size:12px;text-align:center;background:#141414}
.ippx .fnode .fn-label{font-size:10px;color:var(--ink-dim);margin-bottom:3px;letter-spacing:0.03em}
.ippx .fnode .fn-val{font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.ippx .fnode.cn .fn-val{color:var(--blue)}
.ippx .fnode.tn{background:#1a0707;border-color:#5a1f1f}
.ippx .fnode.tn .fn-val{color:var(--accent-glow)}
.ippx .fnode.in{background:#07131f;border-color:#14344e}
.ippx .fnode.in .fn-val{color:var(--blue)}
.ippx .fnode.rn{background:#06140c;border-color:#15391f}
.ippx .fnode.rn .fn-val{color:var(--green)}
.ippx .arrow-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible}

/* ── growth chart ──────────────────────────────────────────── */
.ippx .grow-controls{display:flex;gap:28px;flex-wrap:wrap;margin-bottom:14px}
.ippx .legend{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:14px}
.ippx .leg{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-dim)}
.ippx .leg-sq{width:13px;height:13px;border-radius:3px;flex-shrink:0}
.ippx .chart-wrap{position:relative;height:260px}

.ippx .rates-note{font-size:11px;color:var(--ink-faint);text-align:center;margin-top:10px;line-height:1.6}

/* ── v2 command deck: map beside chart ─────────────────────── */
.ippx .deck{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch;margin-bottom:20px}
.ippx .deck .map-panel{margin-bottom:0;height:100%;display:flex;flex-direction:column;justify-content:center}
.ippx .deck .map-inner{max-width:100%}
.ippx .deck__right{display:flex;flex-direction:column}
.ippx .deck__right .chart-wrap{flex:1;min-height:240px}
.ippx .winner.deck__winner{margin:16px 0 0;padding:14px 18px}
.ippx .winner.deck__winner .winner-val{font-size:26px}

/* ── v2 controls strip: all sliders grouped, right under deck ─ */
.ippx .controls{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px 26px;
  background:#0c0c0c;border:1px solid var(--rule-2);border-radius:12px;
  padding:20px 24px;margin-bottom:24px;
}
.ippx .ctrl-group__title{
  font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:0.07em;
  margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--rule);
}
.ippx .ctrl-group__title.blue{color:var(--blue)}
.ippx .ctrl-group__title.green{color:var(--green)}
.ippx .ctrl-group__title.amber{color:var(--amber)}
.ippx .controls .sl:last-child{margin-bottom:0}

/* ── responsive ────────────────────────────────────────────── */
@media(max-width:860px){
  .ippx .deck{grid-template-columns:1fr}
  .ippx .controls{grid-template-columns:1fr;gap:20px}
}
@media(max-width:680px){
  .ippx .two-col{grid-template-columns:1fr}
  .ippx .scenarios{grid-template-columns:1fr}
  .ippx .page-header h1{font-size:30px}
}
@media(max-width:580px){
  .ippx .metrics{grid-template-columns:1fr 1fr}
}

/* The shared sheet sets `overflow-x:hidden` on html, which makes it a
   scroll container and breaks position:sticky. `clip` prevents the same
   horizontal scroll WITHOUT creating a scroll container, so the deck can
   pin to the viewport. Scoped here (ipp-vs-rrsp.css only loads on this page). */
html, body { overflow-x: clip; }

/* ── sticky command deck (desktop) ──
   Pin the map + growth chart + headline advantage just under the fixed nav
   so you can scroll through the sliders and watch the chart react — same
   pattern as the mortgage calc. Desktop + tall-enough windows only; on
   phones / short screens it stays in normal flow so it doesn't swallow the
   viewport. Black background covers content scrolling under the
   inter-card gap. */
@media (min-width: 861px) and (min-height: 760px) {
  .ippx .deck {
    position: sticky;
    top: calc(var(--bar-h) + 8px);
    z-index: 5;
    background: var(--bg);
    padding-bottom: 14px;
  }
  /* Compact the pinned deck so a laptop screen keeps a usable strip of
     sliders visible below it (mortgage deck pins at ~330px; this lands
     ~400px — the map is the floor). Map shrinks ~480→360px wide; small-
     province hitboxes (PEI/NB/NS) get fiddlier but stay clickable, and
     the hover-lift helps. Chips shrink so the province bar fits one row. */
  .ippx .deck .map-panel{padding:12px}
  .ippx .deck .map-prompt{margin-bottom:6px}
  .ippx .deck .map-inner{max-width:360px}
  .ippx .deck .selected-bar{margin-top:8px;padding:6px 12px;min-height:36px;gap:8px}
  .ippx .deck .prov-name{font-size:18px}
  .ippx .deck .rate-chip{font-size:11px;padding:3px 10px}
  .ippx .deck__right{padding:16px 18px}
  .ippx .deck__right .panel-title{font-size:18px;margin-bottom:8px}
  .ippx .deck__right .legend{margin-bottom:8px}
  .ippx .deck__right .chart-wrap{min-height:180px}
  .ippx .winner.deck__winner{margin-top:10px;padding:9px 14px}
  .ippx .winner.deck__winner .winner-val{font-size:22px}
}