/* DC pension projector: Maple Groove Financial brand styling.
   Every selector is scoped under .dcpx so nothing leaks into the shared
   stylesheet. Brand tokens (--ink, --blue, --green, --amber, --rule…) come
   from styles.css :root. Mirrors the IPP (.ippx) build. */

.dcpx{
  max-width:1180px;
  margin:0 auto;
  padding:0 var(--gutter);
  font-family:'Space Mono', ui-monospace, monospace;
  color:var(--ink);
  font-size:15px;
  width:100%;
  box-sizing:border-box;
}
.dcpx *, .dcpx *::before, .dcpx *::after{box-sizing:border-box}

/* ── intro ─────────────────────────────────────────────────── */
.dcpx .page-header{margin:6px 0 24px}
.dcpx .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;line-height:1.05;
}
.dcpx .page-header p{font-size:13px;color:var(--ink-dim);max-width:66ch;line-height:1.6}

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

/* ── the deck: chart left, readouts + sliders together on the right ── */
.dcpx .deck{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:20px;align-items:start;margin-bottom:20px;
}
.dcpx .deck__chart{margin-bottom:0;display:flex;flex-direction:column}
.dcpx .chart-wrap{position:relative;height:380px;max-width:100%}
.dcpx .chart-wrap canvas{max-width:100%}
.dcpx .chart-note{font-size:11px;color:var(--ink-dim);margin-top:10px;line-height:1.5}

.dcpx .legend{display:flex;gap:8px 18px;flex-wrap:wrap;margin-bottom:12px}
.dcpx .leg{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-dim)}
.dcpx .leg-sq{width:13px;height:13px;border-radius:3px;flex-shrink:0}
.dcpx .leg-dash{width:16px;height:0;border-top:2px dashed var(--amber);flex-shrink:0}
.dcpx .leg b{color:var(--ink);font-weight:700}

/* ── metrics ───────────────────────────────────────────────── */
.dcpx .metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.dcpx .metric{background:#0c0c0c;border:1px solid var(--rule-2);border-radius:10px;padding:14px 16px;min-width:0}
.dcpx .metric-lbl{font-size:11px;color:var(--ink-dim);margin-bottom:8px;letter-spacing:0.04em;line-height:1.4}
.dcpx .metric-val{font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:0.02em;color:var(--ink);line-height:1;overflow-wrap:anywhere}
.dcpx .metric-sub{font-size:10px;color:var(--ink-dim);margin-top:6px;letter-spacing:0.03em}
.dcpx .metric-val.blue{color:var(--blue)}
.dcpx .metric-val.green{color:var(--green)}
.dcpx .metric-val.amber{color:var(--amber)}

.dcpx .cap-note{
  font-size:12px;line-height:1.5;color:#fde68a;background:#1a0e00;
  border:1px solid var(--amber);border-radius:8px;padding:10px 14px;margin-bottom:14px;
}
.dcpx .cap-note[hidden]{display:none}

/* ── controls ──────────────────────────────────────────────── */
.dcpx .controls{
  background:#0c0c0c;border:1px solid var(--rule-2);border-radius:12px;
  padding:18px 20px;display:grid;gap:20px;
}
.dcpx .ctrl-group__title{
  font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:0.07em;
  margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--rule);
}
.dcpx .ctrl-group__title.blue{color:var(--blue)}
.dcpx .ctrl-group__title.green{color:var(--green)}
.dcpx .ctrl-group__title.amber{color:var(--amber)}
.dcpx .sl{margin-bottom:14px}
.dcpx .sl:last-child{margin-bottom:0}
.dcpx .sl label{font-size:12px;color:var(--ink-dim);display:block;margin-bottom:6px;letter-spacing:0.04em}
.dcpx .sl-row{display:flex;align-items:center;gap:12px}
.dcpx .sl-row input[type=range]{flex:1;min-width:0;height:5px;accent-color:var(--blue);cursor:pointer}
.dcpx .sl-val{font-size:14px;font-weight:700;color:var(--ink);min-width:88px;text-align:right;font-variant-numeric:tabular-nums}
.dcpx .sub-group[hidden]{display:none}

.dcpx .seg{display:flex;gap:0;margin-bottom:14px;border:1px solid var(--rule-2);border-radius:8px;overflow:hidden}
.dcpx .seg button{
  flex:1;font:inherit;font-size:12px;padding:9px 10px;background:#111;color:var(--ink-dim);
  border:0;cursor:pointer;letter-spacing:0.03em;
}
.dcpx .seg button + button{border-left:1px solid var(--rule-2)}
.dcpx .seg button[aria-pressed="true"]{background:#07131f;color:var(--blue);font-weight:700}
.dcpx .seg button:hover{color:var(--ink)}
.dcpx .reset{
  font:inherit;font-size:11px;letter-spacing:0.06em;color:var(--blue);background:transparent;
  border:1px solid #14344e;border-radius:6px;padding:7px 12px;cursor:pointer;
}
.dcpx .reset:hover{border-color:var(--blue)}

/* ── breakdown + explainer ─────────────────────────────────── */
.dcpx .calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-bottom:20px}
.dcpx .calc .panel{margin-bottom:0}
.dcpx .line{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;gap:14px}
.dcpx .line span{font-size:13px;color:var(--ink-dim)}
.dcpx .line strong{font-size:13px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.dcpx .line.blue strong{color:var(--blue)}
.dcpx .line.green strong{color:var(--green)}
.dcpx .line.big span{color:var(--ink);font-weight:700}
.dcpx .line.big strong{font-size:15px}
.dcpx .divider{border:none;border-top:1px solid var(--rule);margin:10px 0}

.dcpx details.math{margin-top:4px}
.dcpx details.math summary{
  cursor:pointer;font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:0.05em;color:var(--blue);
  list-style:none;
}
.dcpx details.math summary::-webkit-details-marker{display:none}
.dcpx details.math summary::before{content:'+ ';color:var(--ink-dim)}
.dcpx details.math[open] summary::before{content:'− '}
.dcpx .math ol{margin:12px 0 0 18px;padding:0}
.dcpx .math li{font-size:12px;color:var(--ink-dim);line-height:1.6;margin-bottom:8px;overflow-wrap:anywhere}

.dcpx .explain{max-width:760px;margin:8px auto 20px}
.dcpx .explain h2{
  font-family:'Bebas Neue',sans-serif;font-size:26px;font-weight:400;letter-spacing:0.04em;
  color:var(--ink);margin:26px 0 10px;
}
.dcpx .explain p, .dcpx .explain li{
  font-family:'Instrument Serif', Georgia, serif;font-size:18px;line-height:1.55;color:#cfcfcf;
}
.dcpx .explain p{margin-bottom:12px}
.dcpx .explain ul{margin:0 0 12px 20px;padding:0}
.dcpx .explain li{margin-bottom:6px}
.dcpx .explain em{color:var(--ink)}
.dcpx .explain a{color:var(--blue)}
.dcpx .related{list-style:none;margin-left:0 !important}
.dcpx .related li::before{content:'→ ';color:var(--accent)}

.dcpx .rates-note{font-size:11px;color:var(--ink-dim);text-align:center;margin:10px auto 24px;line-height:1.6;max-width:820px}
.dcpx .legal-disclaimer{max-width:760px;margin-left:auto;margin-right:auto}
.dcpx .jurisdiction-note{font-size:13px;color:var(--ink-dim);max-width:760px;margin:0 auto 14px;line-height:1.6}

/* The shared sheet sets overflow-x:hidden on html, which breaks
   position:sticky. `clip` stops sideways scroll without a scroll container.
   Only this page loads this file. */
html, body{overflow-x:clip}

/* ── sticky chart (desktop, tall-enough windows) ── */
@media (min-width:861px) and (min-height:700px){
  .dcpx .deck__chart{position:sticky;top:calc(var(--bar-h) + 12px)}
}

/* ── responsive ────────────────────────────────────────────── */
@media (max-width:860px){
  .dcpx .deck{grid-template-columns:minmax(0,1fr)}
  .dcpx .chart-wrap{height:300px}
  .dcpx .calc{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:680px){
  .dcpx{padding:0 16px}
  .dcpx .page-header h1{font-size:30px}
  .dcpx .metric-val{font-size:24px}
  .dcpx .sl-val{min-width:74px;font-size:13px}
  .dcpx .explain p, .dcpx .explain li{font-size:17px}
}

/* Phone cockpit (<=720px): the engine moves .deck__chart into .mgpc-dock,
   which sits OUTSIDE .dcpx, so .dcpx-scoped rules stop matching there. Only
   the canvas holder and the .lgd legend stay in the dock (title and note go
   back to the scroll pane), so the legend is restyled here, unscoped. */
html.mg-phone-lock .mgpc-dock .deck__chart{font-family:'Space Mono', ui-monospace, monospace;padding:0 2px}
html.mg-phone-lock .mgpc-dock .deck__chart .legend{display:flex;flex-wrap:wrap;flex:0 0 auto;gap:2px 12px;margin-bottom:6px}
html.mg-phone-lock .mgpc-dock .deck__chart .leg{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--ink-dim);line-height:1.35}
html.mg-phone-lock .mgpc-dock .deck__chart .leg b{color:var(--ink)}
html.mg-phone-lock .mgpc-dock .deck__chart .leg-sq{width:10px;height:10px;border-radius:2px;flex-shrink:0}
html.mg-phone-lock .mgpc-dock .deck__chart .leg-dash{width:14px;height:0;border-top:2px dashed var(--amber);flex-shrink:0}