/* Stratalyx — Plan Retirement module styles (Build 390).
 * Scoped under #tab-retirement (and the dashboard card #dashRetirementSummary)
 * so it reuses the global design tokens from style.css without colliding with
 * any global component class. Palette/type come entirely from :root tokens. */

#tab-retirement .mhead{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
#tab-retirement .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* sub-tabs */
#tab-retirement .subtabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:20px}
#tab-retirement .stab{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:600;padding:8px 14px;border-radius:9px;cursor:pointer;border:1px solid var(--bdr);background:var(--bg2);color:var(--txt2);transition:all .15s}
#tab-retirement .stab:hover{border-color:var(--acc);color:var(--txt)}
#tab-retirement .stab.active{background:var(--acc);color:#fff;border-color:var(--acc);box-shadow:0 2px 8px rgba(37,99,235,.35)}
#tab-retirement .stab .cnt{font-size:.6rem;font-weight:700;background:rgba(15,23,42,.08);border-radius:999px;padding:1px 6px}
#tab-retirement .stab.active .cnt{background:rgba(255,255,255,.22)}

/* layout */
#tab-retirement .grid{display:grid;gap:16px}
#tab-retirement .g-2{grid-template-columns:1fr 1fr}
#tab-retirement .g-3{grid-template-columns:1fr 1fr 1fr}
#tab-retirement .card{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);padding:18px;box-shadow:var(--sh2);margin-bottom:16px}
#tab-retirement .card:last-child{margin-bottom:0}
#tab-retirement .card h2,#tab-retirement .card h3{font-size:var(--h2);font-weight:700;margin:0}
#tab-retirement .ctitle{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap}
#tab-retirement .eyebrow{font-size:var(--cap);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--txt3)}
#tab-retirement .muted{color:var(--txt3)}
#tab-retirement .hr{height:1px;background:var(--bdr);border:0;margin:14px 0}
#tab-retirement a{color:var(--acc-h)}

/* stat tiles */
#tab-retirement .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:18px}
#tab-retirement .mtile{position:relative;background:var(--card);border:1px solid var(--bdr);border-radius:14px;padding:16px 16px 15px 20px;box-shadow:var(--sh2);overflow:hidden;transition:transform .15s,box-shadow .15s,border-color .15s}
#tab-retirement .mtile:hover{transform:translateY(-2px);box-shadow:var(--sh);border-color:var(--acc)}
#tab-retirement .mtile .bar{position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--acc)}
#tab-retirement .mtile.blue .bar{background:#2563eb}#tab-retirement .mtile.sky .bar{background:#0ea5e9}
#tab-retirement .mtile.violet .bar{background:#7c3aed}#tab-retirement .mtile.teal .bar{background:#0d9488}
#tab-retirement .mtile.amber .bar{background:#d97706}#tab-retirement .mtile.grn .bar{background:var(--grn)}#tab-retirement .mtile.rose .bar{background:#e11d48}
#tab-retirement .mtile .ico{font-size:1.25rem}
#tab-retirement .mtile .lbl{font-size:var(--cap);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--txt3);margin-top:8px}
#tab-retirement .mtile .val{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--num-lg);font-weight:800;letter-spacing:-.5px;line-height:1.05;margin-top:3px;color:var(--txt)}
#tab-retirement .mtile .val.pos{color:var(--grn)}#tab-retirement .mtile .val.neg{color:var(--red)}
#tab-retirement .mtile .vsub{font-size:.66rem;font-weight:600;color:var(--txt3);margin-top:4px}

/* pills (own .pd dot; independent of global .pill) */
#tab-retirement .pill,#dashRetirementSummary .pill{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:700;border-radius:999px;padding:4px 11px}
#tab-retirement .pill .pd,#dashRetirementSummary .pill .pd{width:6px;height:6px;border-radius:50%}
#tab-retirement .pill.grn,#dashRetirementSummary .pill.grn{background:var(--grn-bg,#f0fdf4);color:var(--grn);border:1px solid var(--grn-bd,#bbf7d0)}#tab-retirement .pill.grn .pd,#dashRetirementSummary .pill.grn .pd{background:var(--grn)}
#tab-retirement .pill.red,#dashRetirementSummary .pill.red{background:var(--red-bg,#fef2f2);color:var(--red);border:1px solid var(--red-bd,#fecaca)}#tab-retirement .pill.red .pd,#dashRetirementSummary .pill.red .pd{background:var(--red)}
#tab-retirement .pill.ylw,#dashRetirementSummary .pill.ylw{background:var(--ylw-bg,#fffbeb);color:var(--ylw);border:1px solid var(--ylw-bd,#fde68a)}#tab-retirement .pill.ylw .pd,#dashRetirementSummary .pill.ylw .pd{background:var(--ylw)}
#tab-retirement .pill.blu,#dashRetirementSummary .pill.blu{background:var(--blu-bg,#eff6ff);color:var(--blu);border:1px solid var(--blu-bd,#bfdbfe)}#tab-retirement .pill.blu .pd,#dashRetirementSummary .pill.blu .pd{background:var(--blu)}
#tab-retirement .pill.purp,#dashRetirementSummary .pill.purp{background:var(--purp-bg,#f5f3ff);color:var(--purp);border:1px solid var(--purp-bd,#ddd6fe)}#tab-retirement .pill.purp .pd,#dashRetirementSummary .pill.purp .pd{background:var(--purp)}

/* buttons */
#tab-retirement .btn,#dashRetirementSummary .btn{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:600;padding:9px 15px;border-radius:9px;border:1px solid var(--bdr);background:var(--bg2);color:var(--txt2);cursor:pointer;transition:all .15s}
#tab-retirement .btn:hover,#dashRetirementSummary .btn:hover{border-color:var(--acc);color:var(--txt)}
#tab-retirement .btn.pri,#dashRetirementSummary .btn.pri{background:var(--acc);border-color:var(--acc);color:#fff}
#tab-retirement .btn.pri:hover,#dashRetirementSummary .btn.pri:hover{background:var(--acc-h)}
#tab-retirement .btn.sm,#dashRetirementSummary .btn.sm{padding:6px 11px;font-size:.72rem}

/* kpi row */
#tab-retirement .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:16px}
#tab-retirement .kpi .lbl{font-size:var(--cap);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--txt3)}
#tab-retirement .kpi .num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--num-md);font-weight:800;letter-spacing:-.4px;margin-top:5px;color:var(--txt)}

/* tables */
#tab-retirement .tblwrap{overflow-x:auto}
#tab-retirement .tbl{width:100%;border-collapse:collapse;font-size:.78rem}
#tab-retirement .tbl th{text-align:left;font-size:var(--cap);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--txt3);padding:8px 10px;border-bottom:1px solid var(--bdr)}
/* Build 478 — freeze the header row when a table body scrolls (e.g. the year-by-year
   cash-flow table has max-height:460px;overflow-y:auto). Opaque bg + z-index so rows
   scroll underneath cleanly in both light and dark themes. */
#tab-retirement .tbl thead th{position:sticky;top:0;z-index:3;background:var(--bg3);box-shadow:0 1px 0 var(--bdr)}
/* Build 481 — brokerage-style totals row (Portfolio holdings table). Frozen at the
   bottom of the scroll box so total cost basis / value / P&L stay visible while the
   holdings scroll. Only the Portfolio table has a tfoot, so this is scoped safely. */
#tab-retirement .tbl tfoot td{position:sticky;bottom:0;z-index:2;background:var(--bg3);box-shadow:0 -1px 0 var(--bdr);font-weight:700;border-top:2px solid var(--bdr);color:var(--txt)}
#tab-retirement .tbl td{padding:9px 10px;border-bottom:1px solid var(--bg3);color:var(--txt2)}
#tab-retirement .tbl td.num,#tab-retirement .tbl th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
#tab-retirement .tbl tbody tr:hover{background:var(--bg3)}
#tab-retirement .tk{font-weight:700;color:var(--txt);font-family:var(--mono)}

/* tier + action chips */
#tab-retirement .tier{display:inline-flex;align-items:center;font-size:.66rem;font-weight:700;border-radius:6px;padding:2px 7px}
#tab-retirement .tier.core{background:var(--blu-bg,#eff6ff);color:var(--blu)}#tab-retirement .tier.growth{background:var(--purp-bg,#f5f3ff);color:var(--purp)}
#tab-retirement .tier.octane{background:var(--red-bg,#fef2f2);color:var(--red)}#tab-retirement .tier.div{background:var(--bg3);color:var(--txt3)}#tab-retirement .tier.income{background:var(--grn-bg,#f0fdf4);color:var(--grn)}
#tab-retirement .act{font-size:.68rem;font-weight:700;border-radius:6px;padding:3px 8px}
#tab-retirement .act.buy{background:var(--grn-bg,#f0fdf4);color:var(--grn);border:1px solid var(--grn-bd,#bbf7d0)}
#tab-retirement .act.add{background:var(--blu-bg,#eff6ff);color:var(--blu);border:1px solid var(--blu-bd,#bfdbfe)}
#tab-retirement .act.up{background:var(--ylw-bg,#fffbeb);color:var(--ylw);border:1px solid var(--ylw-bd,#fde68a)}
#tab-retirement .act.rev{background:var(--bg3);color:var(--txt3);border:1px solid var(--bdr)}

/* controls */
#tab-retirement .ctrl{margin-bottom:14px}
#tab-retirement .ctrl .row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
#tab-retirement .ctrl label{font-size:.76rem;font-weight:600;color:var(--txt2)}
#tab-retirement .ctrl .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:700;font-size:.82rem;color:var(--acc-h)}
#tab-retirement input[type=range]{width:100%;accent-color:var(--acc);height:5px}
#tab-retirement .field{display:flex;flex-direction:column;gap:5px}
#tab-retirement .field .cap{font-size:.7rem;font-weight:600;color:var(--txt3)}
#tab-retirement .field .box{border:1px solid var(--bdr);border-radius:8px;background:var(--bg2);padding:8px 11px;font-family:var(--mono);font-weight:600;font-size:.85rem;color:var(--txt);display:flex;align-items:center;gap:6px}

/* accounts */
#tab-retirement .acctrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--bg3)}
#tab-retirement .acctrow:last-child{border-bottom:0}
#tab-retirement .acctrow .nm{font-weight:600;font-size:.82rem}
#tab-retirement .acctrow .in{font-size:.7rem;color:var(--txt3)}
#tab-retirement .tgl{width:38px;height:22px;border-radius:999px;background:var(--grn);position:relative;cursor:pointer;border:none;flex-shrink:0;transition:background .15s}
#tab-retirement .tgl::after{content:"";position:absolute;top:2px;left:18px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
#tab-retirement .tgl.off{background:var(--bdr2)}
#tab-retirement .tgl.off::after{left:2px}

/* misc */
#tab-retirement .note{font-size:.72rem;color:var(--txt3);line-height:1.55}
#tab-retirement .callout{background:var(--acc-lt);border:1px solid var(--blu-bd,#bfdbfe);border-radius:10px;padding:12px 14px;font-size:.76rem;color:var(--txt2);display:flex;gap:9px}
#tab-retirement .callout .em{font-size:1rem}
#tab-retirement .legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:.72rem;color:var(--txt3)}
#tab-retirement .legend span{display:inline-flex;align-items:center;gap:6px}
#tab-retirement .legend i{width:14px;height:3px;border-radius:2px;display:inline-block}
#tab-retirement .chart{width:100%;height:auto;display:block}
#tab-retirement .prem{display:inline-flex;align-items:center;gap:6px;font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--purp);background:var(--purp-bg,#f5f3ff);border:1px solid var(--purp-bd,#ddd6fe);border-radius:999px;padding:4px 10px}

@media(max-width:900px){#tab-retirement .g-2,#tab-retirement .g-3{grid-template-columns:1fr}}

/* Build 391 — full-parity additions */
#tab-retirement .darkc{background:var(--navy);color:#e2e8f0;border-color:var(--navy2)}
#tab-retirement .darkc .eyebrow{color:#94a3b8}
#tab-retirement .hero-num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:2.2rem;font-weight:800;color:#fff;letter-spacing:-1px;line-height:1.05}
#tab-retirement .hero-num.pos{color:#4ade80}#tab-retirement .hero-num.neg{color:#fb7185}
#tab-retirement .hero-num2{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.4rem;font-weight:800;color:#fff}
#tab-retirement .hero-num2.pos{color:#4ade80}#tab-retirement .hero-num2.neg{color:#fb7185}
#tab-retirement .hero-lbl{font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#94a3b8;margin-bottom:4px}
#tab-retirement .hero-sub{font-size:.74rem;color:#9fb0c0;margin-top:5px;line-height:1.5}
#tab-retirement .hero-sub.pos{color:#4ade80}#tab-retirement .hero-sub.neg{color:#fb7185}
#tab-retirement .herostats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}
#tab-retirement .hs-l{font-size:.62rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#94a3b8}
#tab-retirement .hs-v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.05rem;font-weight:800;color:#fff;margin-top:3px}
#tab-retirement .btn.ghost{background:transparent}
#tab-retirement .darkc .btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#e2e8f0}
#tab-retirement .darkc .btn.pri{background:var(--acc);border-color:var(--acc);color:#fff}
#tab-retirement .darkc .btn.ghost{background:transparent;border-color:rgba(255,255,255,.22);color:#cbd5e1}
#tab-retirement .darkc .btn:hover{border-color:#fff;color:#fff}
#tab-retirement .act.core{background:var(--grn-bg,#f0fdf4);color:var(--grn);border:1px solid var(--grn-bd,#bbf7d0)}
#tab-retirement select{color:var(--txt);background:var(--bg2)}
/* modal */
#tab-retirement .rmodal-bg{position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px}
#tab-retirement .rmodal{background:var(--card);border:1px solid var(--bdr);border-radius:14px;padding:22px;max-width:540px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.35);max-height:90vh;overflow-y:auto}
#tab-retirement .rmodal h3{font-size:1.05rem;font-weight:700;color:var(--txt)}