/* DB pension estimator: Maple Groove Financial brand styling.
   Every selector is scoped under .dbpx (or .dbp-chart, the chart panel,
   which the phone cockpit moves into its dock outside .dbpx) so nothing
   leaks into the shared stylesheet. Brand tokens (--ink, --blue, --green,
   --amber, --rule…) come from styles.css :root. No hover reveals anywhere:
   hover only shifts colour and border. */

.dbpx{
  max-width:1060px;
  margin:0 auto;
  font-family:'Space Mono', ui-monospace, monospace;
  color:var(--ink);
  font-size:15px;
}
.dbpx *,.dbpx *::before,.dbpx *::after,.dbp-chart,.dbp-chart *{box-sizing:border-box}

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

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

/* The chart panel: its own root because it travels into the phone dock. */
.dbp-chart{font-family:'Space Mono', ui-monospace, monospace;color:var(--ink);background:#0c0c0c;border:1px solid var(--rule-2);border-radius:12px;padding:22px;display:flex;flex-direction:column;min-width:0}
.dbp-chart .panel-title{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:0.04em;color:var(--ink);margin-bottom:12px}
.dbp-chart .legend{display:flex;gap:6px 18px;flex-wrap:wrap;margin-bottom:12px}
.dbp-chart .leg{display:flex;align-items:flex-start;gap:8px;font-size:11px;color:var(--ink-dim);line-height:1.45;max-width:100%}
.dbp-chart .leg[hidden]{display:none}
.dbp-chart .leg-sq{width:12px;height:12px;border-radius:3px;flex-shrink:0;margin-top:2px}
.dbp-chart .leg-sq.blue{background:var(--blue)}
.dbp-chart .leg-sq.green{background:var(--green)}
.dbp-chart .leg-sq.amber{background:rgba(232,166,52,0.35);border:1.5px solid var(--amber)}
.dbp-chart .chart-wrap{position:relative;height:300px;max-width:100%}
.dbp-chart .chart-wrap canvas{max-width:100%}
.dbp-chart .chart-note{font-size:11px;color:var(--ink-dim);margin-top:10px;line-height:1.5}

/* ── the deck: chart left, readouts + sliders together right ─ */
.dbpx .deck{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:20px;align-items:start;margin-bottom:20px}
.dbpx .deck__side{display:flex;flex-direction:column;gap:16px;min-width:0}

/* ── metrics ───────────────────────────────────────────────── */
.dbpx .metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dbpx .metric{background:#0c0c0c;border:1px solid var(--rule-2);border-radius:10px;padding:12px 14px;min-width:0}
.dbpx .metric[hidden]{display:none}
.dbpx .metric-lbl{font-size:10.5px;color:var(--ink-dim);margin-bottom:6px;letter-spacing:0.04em;line-height:1.35}
.dbpx .metric-val{font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:0.02em;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.dbpx .metric-val.blue{color:var(--blue)}
.dbpx .metric-val.green{color:var(--green)}
.dbpx .metric-val.amber{color:var(--amber)}
.dbpx .metric-sub{font-size:10.5px;color:var(--ink-dim);margin-top:5px;line-height:1.35}

/* ── controls ──────────────────────────────────────────────── */
.dbpx .controls{
  background:#0c0c0c;border:1px solid var(--rule-2);border-radius:12px;
  padding:18px 20px;display:flex;flex-direction:column;gap:18px;
}
.dbpx .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);
}
.dbpx .ctrl-group__title.blue{color:var(--blue)}
.dbpx .ctrl-group__title.green{color:var(--green)}
.dbpx .ctrl-group__title.amber{color:var(--amber)}

.dbpx .seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:14px}
.dbpx .seg button{
  font:inherit;font-size:11px;line-height:1.3;letter-spacing:0.03em;
  background:#111;color:var(--ink-dim);border:1px solid var(--rule-2);
  border-radius:8px;padding:9px 6px;cursor:pointer;min-height:44px;
  transition:border-color .15s,color .15s,background .15s;
}
.dbpx .seg button:hover{border-color:var(--ink-faint);color:var(--ink)}
.dbpx .seg button[aria-pressed="true"]{background:#07131f;border-color:var(--blue);color:var(--ink)}
.dbpx .seg button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.dbpx .seg-help{font-size:10.5px;color:var(--ink-dim);line-height:1.45;margin:-6px 0 14px}

.dbpx .sl{margin-bottom:14px}
.dbpx .sl[hidden]{display:none}
.dbpx .sl:last-child{margin-bottom:0}
.dbpx .sl label{font-size:12px;color:var(--ink-dim);display:block;margin-bottom:6px;letter-spacing:0.03em;line-height:1.4}
.dbpx .sl-row{display:flex;align-items:center;gap:12px}
.dbpx .sl-row input[type=range]{flex:1;min-width:0;height:5px;accent-color:var(--blue);cursor:pointer}
.dbpx .sl-val{font-size:14px;font-weight:700;color:var(--ink);min-width:84px;text-align:right;font-variant-numeric:tabular-nums}
.dbpx .sl-help{font-size:10.5px;color:var(--ink-dim);margin-top:6px;line-height:1.45}

.dbpx .switch{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink);cursor:pointer;min-height:44px}
.dbpx .switch input{width:20px;height:20px;accent-color:var(--amber);cursor:pointer;flex-shrink:0}
.dbpx .switch.is-disabled{color:var(--ink-faint);cursor:not-allowed}
.dbpx .switch.is-disabled input{cursor:not-allowed}
.dbpx .reason{font-size:11px;color:var(--amber);line-height:1.45;margin:2px 0 10px}
.dbpx .reason[hidden]{display:none}
.dbpx .integ-body[hidden]{display:none}

/* ── the math + explainer ──────────────────────────────────── */
.dbpx .math{font-size:12.5px;line-height:1.55}
.dbpx .math-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;padding:8px 0;border-bottom:1px solid var(--rule)}
.dbpx .math-row:last-child{border-bottom:none}
.dbpx .math-row .m-lbl{color:var(--ink)}
.dbpx .math-row .m-work{grid-column:1 / -1;color:var(--ink-dim);font-size:11.5px;overflow-wrap:anywhere}
.dbpx .math-row .m-val{font-weight:700;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.dbpx .math-row.total .m-lbl{font-weight:700}
.dbpx .math-row.total .m-val{color:var(--blue);font-size:14px}
.dbpx .math-row.slice .m-val{color:var(--amber)}
.dbpx .math-row.alt .m-val{color:var(--green)}
.dbpx .limit-note{margin-top:14px;padding:12px 14px;border:1px solid #4a3512;background:#161006;border-radius:8px;font-size:12px;line-height:1.55;color:var(--ink)}
.dbpx .limit-note.ok{border-color:var(--rule-2);background:#0a0a0a;color:var(--ink-dim)}
.dbpx .limit-note strong{color:var(--amber)}
.dbpx .limit-note.ok strong{color:var(--ink)}

.dbpx .explain h2{font-family:'Bebas Neue',sans-serif;font-size:22px;font-weight:400;letter-spacing:0.04em;margin:22px 0 8px;color:var(--ink)}
.dbpx .explain h2:first-child{margin-top:0}
.dbpx .explain p,.dbpx .explain li{font-size:13px;line-height:1.7;color:var(--ink-dim)}
.dbpx .explain p{margin-bottom:10px}
.dbpx .explain ul{margin:0 0 10px 18px}
.dbpx .explain li{margin-bottom:6px}
.dbpx .explain strong{color:var(--ink)}
.dbpx .explain a,.dbpx .related a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.dbpx .explain a:hover,.dbpx .related a:hover{color:var(--ink)}

.dbpx .related ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dbpx .related li{font-size:13px;line-height:1.55;color:var(--ink-dim)}

.dbpx .rates-note{font-size:11px;color:var(--ink-dim);text-align:center;margin:10px 0 18px;line-height:1.6}

/* ── responsive ────────────────────────────────────────────── */
@media(max-width:900px){
  .dbpx .deck{grid-template-columns:1fr}
}
@media(max-width:680px){
  .dbpx .page-header h1{font-size:30px}
  .dbpx .panel,.dbp-chart{padding:16px}
  .dbpx .controls{padding:16px}
  .dbp-chart .chart-wrap{height:240px}
}
@media(max-width:380px){
  .dbpx .metric-val{font-size:24px}
  .dbpx .sl-val{min-width:70px;font-size:13px}
  .dbpx .seg button{font-size:10.5px;padding:8px 4px}
}

/* Phone cockpit: the engine docks the chart panel and its .mgpc-holder
   rule lets the canvas fill; keep the docked panel compact. */
html.mg-phone-lock .dbp-chart{padding:8px 12px;border-radius:10px}
html.mg-phone-lock .dbp-chart .panel-title{font-size:15px;margin-bottom:4px}
html.mg-phone-lock .dbp-chart .legend{gap:2px 12px;margin-bottom:6px}
html.mg-phone-lock .dbp-chart .leg{font-size:10px}
html.mg-phone-lock .mgpc-dock .chart-note{display:none}