/* ==========================================================================
   RetireNerd Analyzer -- Editable Stylesheet
   ==========================================================================
   Extracted from the single-file tool's inline <style> blocks into this
   external file so styling can be edited without touching index.html or
   its JavaScript. This is a pure move -- no rule, value, or !important was
   added, removed, or changed in the process.

   HISTORY / STRUCTURE: this file is the base stylesheet followed by a long
   sequence of incremental patch layers, each originally its own inline
   <style id="..."> block added over the tool's iterative history (visible
   below as section markers). Order matters: later sections often override
   earlier ones at equal CSS specificity (frequently via !important), so the
   sections below are kept in their EXACT original order. Moving a section
   to a different position in this file can change which rule wins and
   silently change the rendered page -- if you need to override something
   here, prefer adding a new rule after the relevant section (or at the very
   end of the file) rather than reordering existing sections.
   ========================================================================== */

/* ---- section: base stylesheet ---- */
  :root{
    color-scheme:light only;
    --bg:var(--c-gray-99);
    --panel:var(--c-gray-99);
    --panel2:var(--c-gray-99);
    --border:var(--c-gray-90);
    --border-soft:transparent;
    --text:var(--c-slate-25);
    --muted:var(--c-slate-50);
    --muted2:var(--c-slate-65);
    --teal:var(--c-blue-25);
    --teal-dim:var(--c-sand-95b);
    --gold:var(--c-amber-70);
    --gold-dim:var(--c-sand-95);
    --red:var(--c-red-55b);
    --red-dim:var(--c-rose-95);
    --green:var(--c-green-55);
    --green-dim:var(--c-gray-95);
  }
  *{box-sizing:border-box;}
  /* This tool is light-themed only (see color-scheme above) — some mobile browsers and in-app
     webviews apply their own automatic dark-mode color adjustment anyway when the device's system
     appearance is dark, regardless of that declaration, inverting backgrounds and washing out text
     in whatever areas of the page don't have a background color already deemed "intentional." That
     produced a genuinely worse result than doing nothing — visible black stripes in the gaps between
     individually-patched white elements, rather than one uniform (if wrong) dark area. This directly
     targets the same media query a browser would use to decide whether to invert anything in the
     first place, forcing every layer of the actual page background back to this tool's own real,
     light values — a stronger, page-level fix rather than chasing individual elements one at a time.*/
  @media(prefers-color-scheme:dark){
    html,body,.wrap,#toolView,#modeSelector,#modeIndicator,#qsWrapper,#helpView,#rothView,#expensesView{
      background:var(--c-gray-95)!important;
      color:var(--c-slate-25)!important;
    }
  }
  #mobileStickyTotal{display:none;} /* shown only via the mobile media query below - JS never sets display directly, so this stays correctly hidden on desktop regardless of fund count */
  body{margin:0;background:var(--bg);color:var(--text);font-family:'Compass Sans',sans-serif;font-size:14px;line-height:1.5;}
  :is(h1,.pg-h1),h2,h3{font-family:'Compass Display',sans-serif;margin:0;}
  .mono{font-family:'Compass Sans',sans-serif;font-variant-numeric:tabular-nums;}
  .wrap{max-width:980px;margin:0 auto;padding:28px 24px 80px;}
  @media(max-width:600px){ .wrap{padding:16px 12px 60px;} body{font-size:13px;} .hero{padding:20px 16px;} .hero :is(h1,.pg-h1){font-size:21px;} .panel{padding:14px;}
    /* iOS Safari force-zooms the whole page on focus if an input's font-size is under 16px — this
       is what was making the tool feel broken on iPhone. Bumping every field to 16px on mobile fixes it. */
    .field input, .field select, .alloc-input, input, select { font-size:16px !important; }
  }

  /* HERO */
  .hero{border:1px solid var(--border);border-radius:4px;padding:28px 30px;background:var(--panel);position:relative;overflow:hidden;margin-bottom:22px;}
    .hero :is(h1,.pg-h1){font-size:26px;font-weight:600;color:var(--text);}
  .hero-sub{color:var(--muted);margin-top:6px;font-size:14px;max-width:640px;}

  /* glide path svg */
  .glide{margin-top:22px;}

  .section-title{display:flex;align-items:baseline;gap:10px;margin:34px 0 12px;}
  .section-icon-wrap{width:44px;height:44px;border-radius:50%;background:var(--teal-dim);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .section-icon-wrap svg{width:22px;height:22px;}
  .section-title .num{font-family:'Compass Sans',sans-serif;font-variant-numeric:tabular-nums;color:var(--gold-ink);font-size:12px;}
  .section-title h2{font-size:17px;font-weight:600;}
  .section-desc{color:var(--muted);font-size:12.5px;margin-bottom:14px;max-width:720px;}
  /* One-line, always-visible "who this is for" hint under an optional section's Yes/No question —
     deliberately separate from .has-tip, since a tooltip requires a hover or a tap to discover at
     all, and the whole point here is to let someone rule a section in or out at a glance, before
     they've decided whether it's even worth reading the fuller tooltip/section-desc explanation. */
  .toggle-hint{color:var(--muted2);font-size:11.5px;margin:3px 0 10px;max-width:640px;line-height:1.4;}

  /* Quick Start section */
  .qs-step{display:none;}
  .qs-step.qs-active{display:block;}
  .qs-step-label{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--gold-ink);font-family:'Compass Sans',sans-serif;font-variant-numeric:tabular-nums;margin-bottom:10px;}
  .qs-disclaimer{margin-top:18px;padding:14px 18px;background:rgba(var(--c-amber-70-rgb), 0.07);border:1px solid rgba(var(--c-amber-70-rgb), 0.3);border-radius:6px;font-size:12px;color:var(--muted);line-height:1.6;}
  .qs-disclaimer strong{color:var(--gold-ink);}
  .qs-next-btn{margin-top:14px;padding:10px 24px;background:var(--teal);color:var(--c-gray-99);border:none;border-radius:4px;font-weight:700;font-size:13px;cursor:pointer;}
  .qs-next-btn:hover{opacity:.9;}
    .qs-secondary-btn{display:inline-block;padding:7px 14px;font-size:12px;font-weight:600;color:var(--teal);background:var(--teal-dim);border:1px solid var(--teal);border-radius:5px;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s;}
  .qs-secondary-btn:hover{background:var(--teal);color:var(--c-slate-20);}
  .qs-handoff{margin-top:18px;padding:16px 20px;background:var(--panel2);border:1px solid var(--teal);border-radius:6px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
  .qs-handoff-text{flex:1;min-width:200px;font-size:12.5px;color:var(--muted);line-height:1.6;}
  .qs-handoff-text strong{color:var(--text);}
  .qs-open-full-btn{padding:10px 20px;background:transparent;border:1.5px solid var(--teal);color:var(--teal);border-radius:4px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;}
  .qs-open-full-btn:hover{background:var(--teal-dim);}

  /* Mode selector cards */
    .diagnostic-btn{display:block;width:100%;padding:15px 20px;background:rgba(var(--c-amber-70-rgb), 0.08);border:2px solid var(--gold);border-radius:6px;color:var(--gold-ink);font-family:'Compass Display',sans-serif;font-weight:700;font-size:15px;cursor:pointer;text-align:center;letter-spacing:.01em;transition:background .15s,transform .1s;}
  .diagnostic-btn:hover{background:rgba(var(--c-amber-70-rgb), 0.15);transform:translateY(-1px);}
    @media(max-width:700px){#modeSelector > div[style*="grid-template-columns"]{grid-template-columns:1fr !important;}}

  .panel{background:var(--panel);border:1px solid var(--border);border-radius:4px;padding:20px;}
      @media(max-width:820px){}

  table{width:100%;border-collapse:collapse;font-size:12.5px;}
  th{text-align:left;color:var(--muted);font-weight:500;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;padding:8px 8px;border-bottom:1px solid var(--border);white-space:nowrap;}
  td{padding:7px 8px;border-bottom:1px solid var(--border-soft);white-space:nowrap;}

  #projTable{table-layout:fixed;}
  #projTable th{white-space:normal;line-height:1.3;vertical-align:bottom;padding:6px 5px;font-size:9.5px;}
  #projTable td{white-space:normal;padding:6px 5px;font-size:11.5px;word-break:break-word;}
  #projTable td.mono{font-size:12px;}
  tr.grp-bond td.tick{color:var(--c-blue-75);}
  tr.grp-us td.tick{color:var(--teal);}
  tr.grp-foreign td.tick{color:var(--gold-ink);}
  tr.grp-em td.tick{color:var(--c-pink-75);}
  tr.grp-alt td.tick{color:var(--c-orange-75);}
  tr.grp-single td.tick{color:var(--c-purple-55);}
  .tick{font-family:'Compass Sans',sans-serif;font-variant-numeric:tabular-nums;font-weight:600;}

  /* Each fund row gets a full-perimeter border in its asset-class color, so funds are visually
     separated from each other at a glance — same color scheme already used for the ticker text
     and the legend dots above the table, just extended to a border around the whole row. */
  #fundTable{border-collapse:separate;border-spacing:0 5px;font-size:11.5px;}
  #fundTable td{padding:6px 6px;}
  #fundTable th{padding:6px 6px;}
  #fundBody tr.grp-bond{--rowcolor:var(--c-blue-75);}
  #fundBody tr.grp-us{--rowcolor:var(--teal);}
  #fundBody tr.grp-foreign{--rowcolor:var(--gold);}
  #fundBody tr.grp-em{--rowcolor:var(--c-pink-75);}
  #fundBody tr.grp-alt{--rowcolor:var(--c-orange-75);}
  #fundBody tr td{border-top:1px solid var(--rowcolor, var(--border-soft));border-bottom:1px solid var(--rowcolor, var(--border-soft));}
  #fundBody tr td:first-child{border-left:1px solid var(--rowcolor, var(--border-soft));border-radius:5px 0 0 5px;}
  #fundBody tr td:last-child{border-right:1px solid var(--rowcolor, var(--border-soft));border-radius:0 5px 5px 0;}
  .fundname{color:var(--muted);white-space:normal;}
  .num-cell{font-family:'Compass Sans',sans-serif;font-variant-numeric:tabular-nums;text-align:right;}
  .alloc-input{width:58px;background:var(--panel2);border:1px solid var(--border);color:var(--text);font-family:'Compass Sans',sans-serif;font-variant-numeric:tabular-nums;padding:4px 5px;border-radius:3px;text-align:right;}
  .alloc-slider{height:5px;border-radius:3px;cursor:pointer;vertical-align:middle;}
  .alloc-slider::-webkit-slider-runnable-track{background:var(--border);border-radius:3px;height:5px;}
  .alloc-slider::-webkit-slider-thumb{margin-top:-5.5px;}
  /* Larger, more prominent thumb for the Quick Start mix slider specifically (not allocation
     sliders) — requested to look "impressive" as the very first screen a user sees. Track height
     is 6px (set inline on the slider itself); thumb is 24px, so margin-top is -9px to keep it
     vertically centered on the track rather than sitting low, the same centering issue already
     documented for the allocation sliders above. */
  #qsMixSlider{-webkit-appearance:none;appearance:none;background:var(--border-soft);border-radius:3px;}
  #qsMixSlider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:var(--gold);border:3px solid var(--c-gray-99);box-shadow:0 1px 4px rgba(var(--c-shadow-rgb), 0.25);margin-top:-9px;cursor:pointer;}
  #qsMixSlider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--gold);border:3px solid var(--c-gray-99);box-shadow:0 1px 4px rgba(var(--c-shadow-rgb), 0.25);cursor:pointer;}
  #qsMixSlider::-moz-range-track{background:var(--border-soft);border-radius:3px;height:6px;}
  .alloc-slider::-moz-range-track{background:var(--border);border-radius:3px;height:5px;}
  .alloc-slider::-moz-range-progress{background:currentColor;border-radius:3px;height:5px;}
  .alloc-input:focus{outline:1px solid var(--teal);}
  .score-pill{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:2px solid;background:var(--c-gray-99);font-family:'Compass Sans',sans-serif;font-variant-numeric:tabular-nums;font-weight:700;font-size:12.5px;}
  .score-hi{border-color:var(--teal);color:var(--teal);}
  .score-mid{border-color:var(--gold);color:var(--gold-ink);}
  .score-lo{border-color:var(--red);color:var(--red);}
  .legend-card{display:flex;gap:16px;flex-wrap:wrap;padding:10px 16px;border:1px solid var(--border-soft);border-radius:30px;background:var(--c-gray-99);}
  .legend-card span{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted);}

      tr.alloc-active td{background:rgba(var(--c-blue-25-rgb), 0.07);}
  tr.alloc-active td.tick{box-shadow:inset 3px 0 0 var(--teal);}
    .global-nav{display:flex;gap:10px;padding:14px 0 0;margin-bottom:6px;}
  .site-header{display:flex;justify-content:space-between;align-items:center;padding-top:20px;flex-wrap:wrap;gap:10px;}
  .site-logo-link{display:inline-block;line-height:0;}
  .site-logo{height:44px;width:auto;display:block;}
          @media(max-width:560px){.site-header{padding-top:14px;} .site-logo{height:36px;} }
  .global-tab{padding:9px 18px;border:1px solid var(--border);background:var(--panel2);color:var(--muted);border-radius:22px;font-size:13px;font-family:'Compass Display',sans-serif;font-weight:600;cursor:pointer;}
  .global-tab.active{border-color:var(--teal);color:var(--teal);background:var(--teal-dim);}
  .global-tab:hover{color:var(--text);}

  .legend{display:flex;gap:16px;flex-wrap:wrap;margin:10px 0 4px;font-size:11.5px;color:var(--muted);}
  .legend span{display:inline-flex;align-items:center;gap:5px;}
  .dot{width:8px;height:8px;border-radius:50%;display:inline-block;}

  .totalbar{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);}
  .totalbar .n{font-family:'Compass Display',sans-serif;font-size:20px;font-weight:600;}
  .warn{color:var(--red);}
  .ok{color:var(--teal);}

  .summary-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:16px;}
  @media(max-width:900px){.summary-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:480px){.summary-grid{grid-template-columns:1fr;}}
  .sumcard{background:var(--panel2);border:1px solid var(--border-soft);border-radius:4px;padding:12px 14px;}
  .sumcard .l{font-size:10.5px;color:var(--muted2);text-transform:uppercase;letter-spacing:.06em;}
  .sumcard .v{font-family:'Compass Display',sans-serif;font-size:19px;font-weight:600;margin-top:3px;}

  .inputs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
  @media(max-width:900px){.inputs-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:560px){.inputs-grid{grid-template-columns:1fr;} .toggle-row{flex-direction:column;}}
        @media(max-width:900px){}
  @media(max-width:560px){}
  .qs-inputs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
  @media(max-width:700px){.qs-inputs-grid{grid-template-columns:repeat(2,1fr);}}
  .portfolio-save-grid{grid-template-columns:1.6fr 1fr 1fr 1fr;}
  @media(max-width:700px){.portfolio-save-grid{grid-template-columns:1fr;}}
  @media(max-width:480px){.qs-inputs-grid{grid-template-columns:1fr;}}
  .field label{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:5px;}
  .field input, .field select{width:100%;background:var(--panel2);border:1px solid var(--border);color:var(--text);padding:8px 9px;border-radius:3px;font-family:'Compass Sans',sans-serif;font-variant-numeric:tabular-nums;font-size:13px;}
  .field input:focus, .field select:focus{outline:1px solid var(--teal);}
  .toggle-row{display:flex;gap:8px;margin-top:4px;}
  .toggle-btn{flex:1;padding:8px 6px;border:1px solid var(--border);background:var(--panel2);color:var(--muted);border-radius:3px;font-size:11.5px;cursor:pointer;text-align:center;}
  .toggle-btn.active{border-color:var(--teal);color:var(--teal);background:var(--teal-dim);}

  .runbtn{margin-top:18px;width:100%;padding:13px;background:var(--teal);color:var(--c-gray-99);border:none;border-radius:4px;font-family:'Compass Display',sans-serif;font-weight:600;font-size:14.5px;cursor:pointer;letter-spacing:.01em;}
  .runbtn-gold{background:var(--gold);color:var(--c-gray-99);}
  .runbtn:hover{background:var(--c-blue-35b);}
  .runbtn:disabled{opacity:.5;cursor:default;}

  .presets{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;}
  .preset-btn{padding:7px 13px;border:1px solid var(--border);background:var(--panel2);color:var(--muted);border-radius:20px;font-size:11.5px;cursor:pointer;}
        .preset-btn:hover{color:var(--text);border-color:var(--teal);}

  canvas{width:100%;display:block;}

  .result-hero{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:18px;}
  .result-card{flex:1;min-width:150px;background:var(--panel2);border:1px solid var(--border-soft);border-radius:4px;padding:16px;}
  .result-card .l{font-size:10.5px;text-transform:uppercase;color:var(--muted2);letter-spacing:.06em;}
  .result-card .v{font-family:'Compass Display',sans-serif;font-size:26px;font-weight:700;margin-top:4px;}
  .result-card.hero-success .v{color:var(--teal);}

  .dash-banner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 28px;border-radius:10px;margin-bottom:18px;border:1px solid var(--border-soft);background:var(--panel2);overflow:hidden;position:relative;}
  .dash-banner.ok{background:linear-gradient(120deg,var(--c-gray-95) 0%,var(--c-gray-99) 55%,var(--c-gray-95) 100%);}
  .dash-banner.warn{background:linear-gradient(120deg,var(--c-sand-95) 0%,var(--c-gray-99) 55%,var(--c-sand-95) 100%);}
  .dash-banner.risk{background:linear-gradient(120deg,var(--c-rose-95) 0%,var(--c-gray-99) 55%,var(--c-rose-95) 100%);}








  @media(max-width:760px){.dash-banner{flex-direction:column;align-items:flex-start;} }

  .dash-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;}
  @media(max-width:900px){.dash-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:560px){.dash-grid{grid-template-columns:1fr;}}
  .dash-card{background:var(--c-gray-99);border:1px solid var(--border-soft);border-radius:10px;padding:16px 18px;box-shadow:0 1px 2px rgba(var(--c-shadow-rgb), 0.04);}
  .dash-card-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
  .dash-card-iconwrap{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .dash-card-iconwrap svg{width:18px;height:18px;}
  .dash-card-iconwrap.blue{background:var(--teal-dim);} .dash-card-iconwrap.blue svg{stroke:var(--teal);}
  .dash-card-iconwrap.green{background:var(--green-dim);} .dash-card-iconwrap.green svg{stroke:var(--green);}
  .dash-card-iconwrap.red{background:var(--red-dim);} .dash-card-iconwrap.red svg{stroke:var(--red);}
  .dash-card-label{font-size:11px;text-transform:uppercase;color:var(--text);letter-spacing:.04em;font-weight:700;border-bottom:1px dotted var(--border-soft);padding-bottom:6px;}
  .dash-card-value{font-family:'Compass Display',sans-serif;font-size:24px;font-weight:700;}
  .dash-card-sub{font-size:12px;color:var(--muted2);margin-top:4px;}
        .dash-info-icon{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--muted2);color:var(--muted2);display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;cursor:help;font-family:'Compass Display',sans-serif;}
  @media(max-width:900px){}

  .rec-box{border:1px solid var(--border);border-radius:4px;padding:18px 20px;background:var(--panel2);margin-top:16px;}
  .rec-box h3{font-size:14.5px;margin-bottom:8px;color:var(--gold-ink);}
  .rec-box p{margin:0 0 8px;color:var(--text);font-size:13px;}
  .rec-box p:last-child{margin-bottom:0;}

  .footnote{font-size:11px;color:var(--muted2);margin-top:26px;border-top:1px solid var(--border-soft);padding-top:16px;line-height:1.6;}
  #projTable td, #projTable th{border-right:1px dotted var(--border-soft);}
  #projTable td:last-child, #projTable th:last-child{border-right:none;}
  .footnote strong{color:var(--muted);}

  /* Year-by-Year table readability pass — this tool is explicitly used by elderly people, so this
     table gets larger text, alternating row stripes for easier row-tracking, a colored pill (not
     just text) for the Working/Retired distinction so it doesn't rely on reading alone, and a clear
     visual break at the exact year retirement begins, since that's the single most important
     transition in the whole table. */
  #projTable{font-size:13.5px;}
  #projTable tbody tr:nth-child(even){background:var(--panel2);}
  #projTable td[data-label="Age"]{font-family:'Compass Display',sans-serif;font-size:16px;font-weight:700;color:var(--text);}
  #projTable tr.retirement-year-start td{border-top:2.5px solid var(--gold);}
  .phase-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px 4px 7px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap;}
  .phase-pill svg{width:13px;height:13px;flex-shrink:0;}
  .phase-pill.working{background:var(--green-dim);color:var(--green);}
  .phase-pill.retired{background:var(--teal-dim);color:var(--teal);}
  @media(max-width:700px){#projTable{font-size:13px;} #projTable td[data-label="Age"]{font-size:15px;}}

  /* Per-fund "Show all"/"Hide all" toggle only exists for the mobile card layout below — hidden by
     default here so it never appears in the normal desktop table, which already shows every column
     as a real table cell with no need for a per-row show/hide control at all. */
  .row-detail-toggle-btn{display:none;}
  /* Responsive tables: on narrow screens, stack rows into labeled cards instead of scrolling sideways */
  @media(max-width:680px){
    #mobileStickyTotal.has-funds{
      display:block;position:fixed;left:0;right:0;bottom:0;z-index:200;
      background:var(--panel);border-top:1px solid var(--border);
      padding:10px 16px calc(10px + env(safe-area-inset-bottom));
      text-align:center;font-size:13px;color:var(--muted);
      font-family:'Compass Sans',sans-serif;font-variant-numeric:tabular-nums;
      box-shadow:0 -4px 16px rgba(var(--c-shadow-rgb), 0.35);
    }
    #mobileStickyTotal span{font-weight:700;font-size:14px;}
    #fundTable, #projTable, #histTable, #portfoliosTable, #diagnosticTable{border:none;display:block;width:100%;}
    #fundTable thead, #projTable thead, #histTable thead, #portfoliosTable thead, #diagnosticTable thead{display:none;}
    #fundTable tbody, #projTable tbody, #histTable tbody, #portfoliosTable tbody, #diagnosticTable tbody{display:block;}
    #fundTable tfoot, #projTable tfoot, #histTable tfoot, #portfoliosTable tfoot, #diagnosticTable tfoot{display:block;width:100%;}
    #fundTable tr, #projTable tr, #histTable tr, #portfoliosTable tr, #diagnosticTable tr{display:block;width:100%;border:1px solid var(--border-soft);border-radius:6px;margin-bottom:10px;padding:12px 14px;background:var(--panel2);}
    #fundBody tr{border-color:var(--rowcolor, var(--border-soft));}
    #fundTable tfoot tr, #projTable tfoot tr, #histTable tfoot tr, #portfoliosTable tfoot tr, #diagnosticTable tfoot tr{display:block;width:100%;border:1px solid var(--teal);border-radius:6px;padding:10px 12px;background:var(--teal-dim);}
    #fundTable td, #projTable td, #histTable td, #portfoliosTable td, #diagnosticTable td{display:flex;width:100%;justify-content:space-between;align-items:center;gap:10px;text-align:right;padding:6px 0;border-bottom:1px solid var(--border-soft);white-space:normal;}
    /* Allocation % specifically holds a slider AND a number input side by side — competing for
       width against the row label (which never shrinks) is what caused the number input, and
       specifically its native iOS spinner arrows, to overflow past the card's right edge. Stacking
       the label above the controls instead removes that competition entirely. */
    #fundTable td[data-label="Allocation %"]{flex-direction:column;align-items:stretch;gap:6px;}
    #fundTable td[data-label="Allocation %"]::before{text-align:left;}
    #fundTable td[data-label="Allocation %"] > div{width:100%;}
    /* Internal lines between fields (Exp. Ratio, Est. Return, etc.) match the same style already
       used for row separators in the Year-by-Year Projection table — intentionally distinct from the
       bold, group-colored outer perimeter border, which marks the fund apart as a whole rather than
       dividing it internally. */
    #fundBody tr td{border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);}
    #fundBody tr td:first-child{border-top:none;}
    /* The border-left/border-right/border-radius on first/last cell is a desktop-only trick for
       rounding the corners of a horizontal row of table columns — on mobile, cells stack vertically
       instead, so that same rule was leaking a stray rounded-corner fragment onto individual cells
       here. The card's own outer border already handles rounding for the whole card on mobile. */
    #fundBody tr td:first-child, #fundBody tr td:last-child{border-left:none;border-right:none;border-radius:0;}
    #fundTable td:last-child, #projTable td:last-child, #histTable td:last-child, #portfoliosTable td:last-child, #diagnosticTable td:last-child{border-bottom:none;}
    #fundTable td::before, #projTable td::before, #histTable td::before, #portfoliosTable td::before, #diagnosticTable td::before{content:attr(data-label);color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;text-align:left;flex-shrink:0;font-family:'Compass Sans',sans-serif;font-weight:500;}
    #fundTable td.tick, #projTable td.mono, #histTable td.mono{justify-content:space-between;}
    #fundTable .fundname{text-align:right;}
    /* These four rows are secondary/reference stats — shrinking them (font + padding) keeps a fund's
       card from taking up excessive vertical space when several funds are listed on a narrow screen. */
    #fundTable td[data-label="Est. Return*"], #fundTable td[data-label="Est. Std Dev*"],
    #fundTable td[data-label="Est. Sharpe*"], #fundTable td[data-label="Portfolio Fit"]{
      font-size:11.5px; padding:3px 0;
    }
    #fundTable td[data-label="Est. Return*"]::before, #fundTable td[data-label="Est. Std Dev*"]::before,
    #fundTable td[data-label="Est. Sharpe*"]::before, #fundTable td[data-label="Portfolio Fit"]::before{
      font-size:9.5px;
    }
    #fundTable td.fundname{display:block;}
    #fundTable .alloc-input{width:70px;}
  }

  .has-tip{border-bottom:1px dotted var(--muted2);cursor:help;}
  th.has-tip{border-bottom:1px dotted var(--muted2);}
  #tooltipBubble{position:fixed;max-width:260px;background:var(--teal);border:1px solid var(--teal);color:var(--c-gray-99);font-size:11.5px;line-height:1.5;padding:9px 11px;border-radius:5px;pointer-events:none;z-index:9999;opacity:0;transition:opacity .1s ease;box-shadow:0 6px 20px rgba(var(--c-shadow-rgb), 0.3);}
  #tooltipBubble.visible{opacity:1;}
  .print-only{display:none;}
  @media print{
    body{background:var(--c-gray-99);color:var(--c-gray-20);}
    .global-nav, .runbtn, .preset-btn, #tooltipBubble, #helpView, #customFundStatus,
    .toggle-row, th.has-tip[data-label="Remove"], td[data-label="Remove"],
    #bracketToggleIcon, .section-desc, #simValidationWarning, #histValidationWarning,
    #earlyWithdrawalWarning, .fund-view-tabs, #scenarioTabs, #histBearCards, #guardrailsScenarioTabs,
    #addFundFormBlock, .footnote, #autosaveIndicator, #clearSavedDataBtn, #startFreshBtn, #restoreBanner, #importPlanFile, #mobileStickyTotal,
    #section01bWrap, #section07Wrap, button, #fundTableRemoveHeader { display:none !important; }
    input, select { border:none !important; background:transparent !important; color:var(--c-gray-20) !important; pointer-events:none; }
    input::placeholder { color:transparent !important; } /* empty fields shouldn't show their example text in print */
    .panel, .sumcard, .result-card, .hero { background:var(--c-gray-99) !important; border:1px solid var(--c-gray-85) !important; page-break-inside:avoid; }
    .section-title h2, :is(h1,.pg-h1), h3 { color:var(--c-gray-20) !important; }
    .l, th { color:var(--c-gray-45) !important; }
    .v, td, .n { color:var(--c-gray-20) !important; }
    canvas{ max-width:100%; }
    .print-only{display:block !important;}
    a[href]::after{content:none !important;}
    /* Wide tables (Build Your Investment Mix, Year-by-Year Projection, Historical Stress Test) live in
       an overflow-x:auto container for on-screen horizontal scrolling — there's no way to "scroll"
       a printed page, so without this override the browser was silently clipping columns past the
       visible width instead of scrolling to them, printing an incomplete table with no indication
       anything was cut off. Letting it print at its natural width instead (shrinking to fit the
       page, or spilling to a second page if truly too wide) is the correct fallback either way. */
    #fundTableContainer, #projTableContainer, #histTableContainer { overflow-x:visible !important; }
  }

/* ===== RetireNerd Modern UI Upgrade ===== */
:root{
  --bg:var(--c-gray-99);
  --panel:var(--c-gray-99);
  --panel2:var(--c-gray-99);
  --border:var(--c-gray-90);
  --border-soft:transparent;
  --text:var(--c-slate-25);
  --muted:var(--c-slate-55b);
  --muted2:var(--c-slate-70);
  --teal:var(--c-blue-35);
  --teal-dim:var(--c-sand-95b);
  --gold:var(--c-amber-75);
  --gold-dim:var(--c-sand-99);
  --red:var(--c-red-55b);
  --red-dim:var(--c-rose-95);
  --green:var(--c-green-55);
  --green-dim:var(--c-gray-95);
  --primary:var(--c-blue-55c);
  --primary-hover:var(--c-blue-50d);
  --shadow-sm:0 1px 2px rgba(var(--c-shadow-rgb), 0.05);
  --shadow-md:0 10px 30px rgba(var(--c-shadow-rgb), 0.08);
  --shadow-lg:0 18px 50px rgba(var(--c-shadow-rgb), 0.12);
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:18px;
}
body{background:linear-gradient(180deg,var(--c-gray-99) 0%,var(--c-gray-99) 100%);font-size:14px;}
.wrap{max-width:1180px;padding:26px 28px 90px;}
.site-header{padding:8px 2px 18px;border-bottom:1px solid var(--border-soft);}
.site-logo{height:48px;}
.global-nav{position:sticky;top:0;z-index:120;background:rgba(var(--c-gray-99-rgb), 0.9);backdrop-filter:blur(14px);padding:12px 0;margin:0 0 18px;border-bottom:1px solid rgba(var(--c-gray-90-rgb), 0.75);}
.global-tab{padding:10px 16px;border-radius:12px;background:var(--c-gray-99);border:1px solid var(--border-soft);box-shadow:var(--shadow-sm);transition:.2s ease;}
.global-tab:hover{transform:translateY(-1px);border-color:var(--c-slate-80);}
.global-tab.active{background:linear-gradient(135deg,var(--teal),var(--c-blue-45b));color:var(--c-gray-99);border-color:transparent;box-shadow:0 8px 20px rgba(var(--c-shadow-rgb), 0.18);}
.hero{border:none;border-radius:var(--radius-lg);padding:34px;background:linear-gradient(135deg,var(--c-slate-30) 0%,var(--c-blue-35) 52%,var(--c-blue-45b) 100%);box-shadow:var(--shadow-lg);margin-bottom:28px;}
.hero::after{content:'';position:absolute;width:300px;height:300px;border-radius:50%;right:-100px;top:-120px;background:radial-gradient(circle,rgba(var(--c-gray-99-rgb), 0.18),rgba(var(--c-gray-99-rgb), 0) 68%);}
.hero :is(h1,.pg-h1){color:var(--c-gray-99);font-size:32px;font-weight:700;letter-spacing:-.02em;}
.hero-sub{color:rgba(var(--c-gray-99-rgb), 0.78);font-size:14px;max-width:780px;}
.hero .field label{color:rgba(var(--c-gray-99-rgb), 0.7);}
.hero .field input,.hero .field select{background:rgba(var(--c-gray-99-rgb), 0.96);border-color:rgba(var(--c-gray-99-rgb), 0.24);}
.panel{border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:22px;background:var(--c-gray-99);box-shadow:var(--shadow-sm);}
.section-title{margin:38px 0 14px;align-items:center;}
.section-title h2{font-size:19px;font-weight:700;letter-spacing:-.01em;}
.section-title .num{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:28px;padding:0 8px;border-radius:999px;background:var(--gold-dim);color:var(--c-amber-60);font-weight:700;}
.section-icon-wrap,.dash-card-iconwrap{box-shadow:inset 0 0 0 1px rgba(var(--c-shadow-rgb), 0.06);}
.field label{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--c-slate-55b);}
.field input,.field select{min-height:44px;background:var(--c-gray-99);border:1px solid var(--c-gray-90);border-radius:10px;padding:10px 12px;transition:.18s ease;}
.field input:focus,.field select:focus,.alloc-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(var(--c-blue-55c-rgb), 0.12);}
.alloc-input{border-radius:8px;background:var(--c-gray-99);}
.qs-next-btn,.runbtn{border-radius:12px;min-height:46px;box-shadow:0 8px 18px rgba(var(--c-shadow-rgb), 0.14);transition:.18s ease;}
.runbtn{background:linear-gradient(135deg,var(--primary),var(--c-blue-40c));font-weight:700;}
.runbtn:hover{background:linear-gradient(135deg,var(--primary-hover),var(--c-blue-40b));transform:translateY(-1px);box-shadow:0 10px 22px rgba(var(--c-blue-55c-rgb), 0.2);}
.runbtn-gold{background:linear-gradient(135deg,var(--c-amber-75),var(--c-amber-65));}
.qs-next-btn{background:linear-gradient(135deg,var(--teal),var(--c-blue-45b));}
.qs-next-btn:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(var(--c-shadow-rgb), 0.18);}
.preset-btn,.view-tab,.toggle-btn,.qs-secondary-btn,.qs-open-full-btn,.expand-btn{border-radius:10px;transition:.18s ease;}
.preset-btn{background:var(--c-gray-99);border-color:var(--border-soft);box-shadow:var(--shadow-sm);}
.preset-btn:hover,.view-tab:hover,.toggle-btn:hover{transform:translateY(-1px);border-color:var(--c-slate-80);}
.view-tab.active,.toggle-btn.active{background:var(--c-slate-95);border-color:var(--c-blue-85);color:var(--c-blue-50d);}
.qs-handoff{border-radius:14px;background:linear-gradient(180deg,var(--c-gray-99),var(--c-gray-99));border-color:var(--c-slate-85);}
.summary-grid,.dash-grid{gap:16px;}
.sumcard,.result-card,.dash-card{border-radius:14px;background:var(--c-gray-99);border:1px solid var(--border-soft);box-shadow:var(--shadow-sm);}
.sumcard:hover,.result-card:hover,.dash-card:hover{box-shadow:var(--shadow-md);}
.sumcard .v,.result-card .v,.dash-card-value{letter-spacing:-.02em;}
.dash-banner{border-radius:16px;box-shadow:var(--shadow-sm);padding:24px 26px;}
.rec-box{border-radius:14px;background:var(--c-gray-99);border-color:var(--border-soft);box-shadow:var(--shadow-sm);}
.legend-card{border-radius:12px;box-shadow:var(--shadow-sm);}
#fundTable{border-spacing:0 8px;}
#fundBody tr td{background:var(--c-gray-99);}
#fundBody tr:hover td{background:var(--c-gray-99);}
#fundBody tr td:first-child{border-radius:10px 0 0 10px;}
#fundBody tr td:last-child{border-radius:0 10px 10px 0;}
.score-pill{box-shadow:var(--shadow-sm);}
#tooltipBubble{border:none;border-radius:10px;background:var(--c-slate-30);box-shadow:var(--shadow-lg);padding:11px 13px;}
#restoreBanner{border-radius:14px!important;background:var(--c-gray-95)!important;border-color:var(--c-slate-85b)!important;box-shadow:var(--shadow-sm);}
#modeIndicator{border-radius:12px!important;background:var(--c-gray-99)!important;box-shadow:var(--shadow-sm);}
#qsPanel{padding:28px;}
#qsMixSlider{height:8px!important;}
#qsMixSlider::-webkit-slider-thumb{width:26px;height:26px;box-shadow:0 3px 10px rgba(var(--c-shadow-rgb), 0.18);}
#mobileStickyTotal{box-shadow:0 -10px 30px rgba(var(--c-shadow-rgb), 0.12)!important;}
@media(max-width:700px){
  .wrap{padding:14px 12px 72px;}
  .global-nav{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;}
  .global-tab{white-space:nowrap;}
  .hero{padding:24px 18px;border-radius:16px;}
  .hero :is(h1,.pg-h1){font-size:25px;}
  .panel{padding:16px;border-radius:12px;}
  }

/* ===== RetireNerd UI PASS 2: decision-first app polish ===== */
:root{
  --rn-ink:var(--c-slate-25);
  --rn-blue:var(--c-blue-55c);
  --rn-blue-2:var(--c-blue-50d);
  --rn-sky:var(--c-slate-95);
  --rn-line:var(--c-gray-90);
  --rn-card:var(--c-gray-99);
  --rn-canvas:var(--c-gray-95);
  --rn-success:var(--c-green-55);
  --rn-warning:var(--c-amber-65);
  --rn-danger:var(--c-red-55b);
}
body{background:
  radial-gradient(circle at 14% -5%,rgba(var(--c-blue-55c-rgb), 0.08),transparent 28rem),
  radial-gradient(circle at 92% 8%,rgba(var(--c-amber-70-rgb), 0.06),transparent 24rem),
  var(--rn-canvas);}
.wrap{max-width:1160px;padding-left:22px;padding-right:22px;}
.site-header{padding:18px 2px 10px;}
.site-logo{height:48px;}
.global-nav{position:sticky;top:0;z-index:90;margin:0 -12px 18px;padding:10px 12px;background:rgba(var(--c-gray-95-rgb), 0.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(var(--c-slate-90-rgb), 0.75);}
.global-tab{min-height:42px;padding:0 16px;background:rgba(var(--c-gray-99-rgb), 0.82);border-color:var(--c-slate-90);box-shadow:0 2px 7px rgba(var(--c-shadow-rgb), 0.04);}
.global-tab.active{color:var(--c-gray-99);background:linear-gradient(135deg,var(--c-blue-35),var(--c-blue-45b));border-color:var(--c-blue-35);box-shadow:0 7px 18px rgba(var(--c-shadow-rgb), 0.18);}
.global-tab.active svg{stroke:var(--c-gray-99);}

#modeSelector{padding:18px 0 38px!important;}
#modeSelector>div:first-child{margin-bottom:26px!important;}
#modeSelector>div:first-child>div:first-child{font-size:27px!important;letter-spacing:-.025em!important;font-family:'Compass Display',sans-serif;}
#modeSelector>div:first-child>div:nth-child(2){font-size:14px!important;}
#modeSelector>div:nth-child(2){max-width:900px!important;gap:22px!important;}

.hero{position:relative;overflow:hidden;padding:34px 34px 28px!important;border-radius:22px!important;background:
  radial-gradient(circle at 88% 16%,rgba(var(--c-blue-70b-rgb), 0.24),transparent 18rem),
  linear-gradient(135deg,var(--c-slate-25) 0%,var(--c-blue-35) 58%,var(--c-blue-40b) 100%)!important;box-shadow:0 20px 45px rgba(var(--c-shadow-rgb), 0.18)!important;}
.hero::after{content:'';position:absolute;right:-90px;bottom:-130px;width:310px;height:310px;border:1px solid rgba(var(--c-gray-99-rgb), 0.1);border-radius:50%;box-shadow:0 0 0 44px rgba(var(--c-gray-99-rgb), 0.035),0 0 0 88px rgba(var(--c-gray-99-rgb), 0.025);pointer-events:none;}
.hero :is(h1,.pg-h1){max-width:780px;font-size:36px!important;line-height:1.08!important;letter-spacing:-.035em!important;margin-top:13px!important;}
.hero-sub{max-width:830px!important;font-size:14px!important;line-height:1.7!important;color:rgba(var(--c-gray-99-rgb), 0.76)!important;}
.hero-capabilities{display:flex;gap:8px;flex-wrap:wrap;margin-top:17px;position:relative;z-index:2;}
.hero-capabilities span{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;border:1px solid rgba(var(--c-gray-99-rgb), 0.13);background:rgba(var(--c-gray-99-rgb), 0.07);color:var(--c-gray-95);font-size:11.5px;font-weight:600;}
.hero-capabilities svg{width:13px;height:13px;opacity:.9;}
.hero .field label{color:rgba(var(--c-gray-99-rgb), 0.7)!important;}
.hero .field input{background:rgba(var(--c-gray-99-rgb), 0.97)!important;border-color:rgba(var(--c-gray-99-rgb), 0.24)!important;}
.hero .preset-btn{min-height:40px!important;padding:9px 13px!important;border-radius:10px!important;box-shadow:0 6px 16px rgba(var(--c-shadow-rgb), 0.12)!important;}
.hero #autosaveIndicator{color:rgba(var(--c-gray-99-rgb), 0.64)!important;}

.section-title{position:relative;margin-top:44px!important;padding:0 0 10px;border-bottom:1px solid var(--c-gray-90);}
.section-title .num{min-width:36px;height:30px;border-radius:9px!important;background:var(--c-gray-95)!important;color:var(--c-blue-35)!important;}
.section-title h2{font-size:20px!important;letter-spacing:-.02em!important;}
.section-desc{font-size:13.5px!important;line-height:1.65!important;max-width:820px!important;}
.panel{border-color:var(--c-gray-90)!important;border-radius:16px!important;box-shadow:0 8px 24px rgba(var(--c-shadow-rgb), 0.055)!important;}
#qsPanel{border:1px solid var(--c-slate-90)!important;background:linear-gradient(180deg,var(--c-gray-99),var(--c-gray-99))!important;box-shadow:0 12px 32px rgba(var(--c-shadow-rgb), 0.07)!important;}
.qs-step-label{display:inline-flex;padding:6px 9px;border-radius:7px;background:var(--c-gray-95);color:var(--c-amber-55b)!important;font-weight:700;letter-spacing:.07em!important;}
.qs-next-btn{padding:0 22px!important;min-height:46px!important;background:linear-gradient(135deg,var(--c-blue-55c),var(--c-blue-50d))!important;}
.qs-secondary-btn{background:var(--c-gray-99)!important;border:1px solid var(--c-slate-90)!important;}
.qs-handoff{padding:18px 20px!important;background:linear-gradient(135deg,var(--c-gray-95),var(--c-gray-99))!important;border-color:var(--c-slate-90b)!important;}

.field input,.field select{font-size:14px!important;}
.field input:hover,.field select:hover{border-color:var(--c-slate-80b);}
.field input:focus,.field select:focus,.alloc-input:focus{box-shadow:0 0 0 4px rgba(var(--c-blue-55c-rgb), 0.11)!important;}
.runbtn{font-size:15px!important;min-height:50px!important;border-radius:12px!important;background:linear-gradient(135deg,var(--c-blue-35),var(--c-blue-55c))!important;box-shadow:0 10px 24px rgba(var(--c-blue-55c-rgb), 0.17)!important;}
.runbtn:hover{background:linear-gradient(135deg,var(--c-blue-30),var(--c-blue-50d))!important;transform:translateY(-2px)!important;box-shadow:0 14px 28px rgba(var(--c-blue-55c-rgb), 0.22)!important;}
.runbtn-gold{background:linear-gradient(135deg,var(--c-amber-75),var(--c-amber-65))!important;box-shadow:0 10px 24px rgba(var(--c-amber-65-rgb), 0.16)!important;}
.preset-btn{font-weight:600!important;min-height:34px;}

/* Portfolio table: app-style rows without disturbing mobile card conversion */
@media(min-width:681px){
 #fundTable{border-collapse:separate!important;border-spacing:0 8px!important;}
 #fundTable thead th{padding:0 10px 7px!important;border:0!important;color:var(--c-slate-60b)!important;font-size:10px!important;}
 #fundTable tbody td{padding:11px 10px!important;border-top:1px solid var(--c-gray-95)!important;border-bottom:1px solid var(--c-gray-95)!important;background:var(--c-gray-99)!important;}
 #fundTable tbody td:first-child{border-left:1px solid var(--c-gray-95)!important;border-radius:11px 0 0 11px!important;}
 #fundTable tbody td:last-child{border-right:1px solid var(--c-gray-95)!important;border-radius:0 11px 11px 0!important;}
 #fundTable tbody tr:hover td{background:var(--c-gray-99)!important;border-color:var(--c-slate-90)!important;}
}

/* Result dashboard: elevate the decision-driving numbers */
.dash-banner{padding:26px 28px!important;border-width:1px!important;border-radius:18px!important;box-shadow:0 12px 30px rgba(var(--c-shadow-rgb), 0.07)!important;}

.dash-grid{gap:15px!important;}
.dash-card{position:relative;padding:18px 19px!important;border-color:var(--c-gray-90)!important;border-radius:15px!important;box-shadow:0 7px 19px rgba(var(--c-shadow-rgb), 0.055)!important;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;}
.dash-card:hover{transform:translateY(-2px);box-shadow:0 12px 25px rgba(var(--c-shadow-rgb), 0.08)!important;border-color:var(--c-slate-90)!important;}
.dash-card-label{color:var(--c-slate-55b)!important;border-bottom-color:var(--c-gray-95)!important;}
.dash-card-value{font-size:27px!important;color:var(--c-slate-30);}
.dash-card-sub{line-height:1.5;}
.result-card{padding:18px!important;border-color:var(--c-gray-90)!important;}
.result-card.hero-success{background:linear-gradient(180deg,var(--c-gray-99),var(--c-gray-99))!important;border-color:var(--c-sage-90b)!important;}
.result-card.hero-success .v{color:var(--c-green-55)!important;}
.rec-box{border-left:4px solid var(--c-blue-55c)!important;padding:19px 21px!important;}
.rec-box h3{color:var(--c-blue-35)!important;font-size:15px!important;}

/* Projection / stress tables */
#projTable thead th{background:var(--c-gray-99)!important;color:var(--c-slate-55b)!important;}
#projTable tbody tr:hover td{background:var(--c-gray-99)!important;}
.legend-card{border-color:var(--c-gray-90)!important;}

/* More polished controls and states */
.toggle-btn.active,.view-tab.active{background:var(--c-slate-95)!important;color:var(--c-blue-50d)!important;border-color:var(--c-blue-85)!important;box-shadow:inset 0 0 0 1px rgba(var(--c-blue-55c-rgb), 0.04);}
.score-pill{border-radius:999px!important;padding-left:9px!important;padding-right:9px!important;}
#modeIndicator{padding:11px 14px!important;border-color:var(--c-slate-90)!important;}
#tooltipBubble{max-width:310px!important;line-height:1.5!important;}

@media(max-width:700px){
 .wrap{padding-left:12px;padding-right:12px;}
 .site-logo{height:40px;}
 .global-nav{margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px;}
 #modeSelector>div:first-child>div:first-child{font-size:23px!important;}
  .hero{padding:27px 20px 24px!important;border-radius:18px!important;}
 .hero :is(h1,.pg-h1){font-size:29px!important;}
 .hero-capabilities{gap:6px;}
 .hero-capabilities span{font-size:10.5px;padding:6px 8px;}
 .section-title h2{font-size:18px!important;}
 .dash-banner{padding:21px 19px!important;}

 .dash-card-value{font-size:24px!important;}
}

@media print{
 body{background:var(--c-gray-99)!important;}
 .global-nav{position:static!important;background:transparent!important;backdrop-filter:none!important;border:0!important;}
 .hero,.panel,.dash-card,.dash-banner,.result-card,.rec-box{box-shadow:none!important;}
 .hero-capabilities{display:none!important;}
}

/* ===== RetireNerd UI PASS 3: Monte Carlo dashboard + projection chart ===== */
#resultsPanel > .panel{
  background:linear-gradient(180deg,var(--c-gray-99) 0%,var(--c-gray-99) 100%);
  border:1px solid var(--c-gray-90);
  box-shadow:0 22px 60px rgba(var(--c-shadow-rgb), 0.08);
  border-radius:20px;
  padding:28px;
}
#resultsPanel .dash-banner{
  border-radius:18px;
  padding:26px 30px;
  min-height:162px;
  box-shadow:inset 0 1px 0 rgba(var(--c-gray-99-rgb), 0.72),0 10px 28px rgba(var(--c-shadow-rgb), 0.06);
}

/* dollar-mode segmented control */
#dashModeNominalBtn,#dashModeRealBtn{
  min-height:34px!important;
  padding:7px 14px!important;
  font-size:12px!important;
  transition:all .18s ease;
}
#dashModeNominalBtn:hover,#dashModeRealBtn:hover{filter:brightness(.98);}

#resultsPanel .dash-grid{
  gap:16px;
  grid-template-columns:minmax(238px,.95fr) repeat(3,minmax(0,1fr));
  align-items:stretch;
}
#resultsPanel .dash-card{
  border:1px solid var(--c-slate-90);
  border-radius:16px;
  padding:20px 20px 18px;
  min-height:168px;
  background:linear-gradient(180deg,var(--c-gray-99) 0%,var(--c-gray-99) 100%);
  box-shadow:0 8px 24px rgba(var(--c-shadow-rgb), 0.055);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
#resultsPanel .dash-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(var(--c-shadow-rgb), 0.09);border-color:var(--c-slate-90);}
#resultsPanel .dash-card-head{gap:10px;margin-bottom:18px;}
#resultsPanel .dash-card-iconwrap{width:40px;height:40px;border-radius:12px;}
#resultsPanel .dash-card-iconwrap svg{width:19px;height:19px;}
#resultsPanel .dash-card-label{font-size:11.5px;letter-spacing:.055em;line-height:1.25;font-weight:800;}
#resultsPanel .dash-card-value{font-size:31px;line-height:1.05;letter-spacing:-.035em;margin-top:auto;}
#resultsPanel .dash-card-sub{font-size:12.5px;line-height:1.45;margin-top:8px;}
#dashYearsFunded{font-size:28px!important;}
#resultsPanel .dash-info-icon{width:20px;height:20px;line-height:18px;border-color:var(--c-slate-80);color:var(--c-slate-60b);background:var(--c-gray-99);}

/* scenario cards get an unmistakable risk hierarchy */
#dashBadLuck{color:var(--c-red-55b)!important;}
#dashGoodLuck{color:var(--c-green-55)!important;}
#resultsPanel .dash-card:has(#dashBadLuck){background:linear-gradient(180deg,var(--c-gray-99) 0%,var(--c-gray-99) 100%);border-color:var(--c-rose-90b);}
#resultsPanel .dash-card:has(#dashGoodLuck){background:linear-gradient(180deg,var(--c-gray-99) 0%,var(--c-gray-99) 100%);border-color:var(--c-sage-90b);}
#resultsPanel .dash-card:has(#dashLowPoint){background:linear-gradient(180deg,var(--c-gray-99) 0%,var(--c-gray-99) 100%);}

/* plain-English summary */
#plainSummary{
  border-radius:16px!important;
  border:1px solid var(--c-gray-90)!important;
  background:var(--c-gray-99)!important;
  padding:22px 24px!important;
  margin-top:20px!important;
}

/* projection chart presentation card */
.fan-chart-shell{
  margin-top:24px;
  border:1px solid var(--c-slate-90);
  border-radius:18px;
  background:var(--c-gray-99);
  box-shadow:0 10px 30px rgba(var(--c-shadow-rgb), 0.055);
  overflow:hidden;
}
.fan-chart-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:20px 22px 13px;border-bottom:1px solid var(--c-gray-95);
  background:linear-gradient(180deg,var(--c-gray-99),var(--c-gray-99));
}
.fan-chart-title{font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--text);}
.fan-chart-subtitle{font-size:12.5px;color:var(--muted);line-height:1.45;margin-top:4px;}
.fan-chart-canvas-wrap{position:relative;padding:12px 16px 0;}
#fanChart{border-radius:12px;}
#fanChartTooltip,#guardrailsChartTooltip{
  border-radius:12px!important;padding:10px 12px!important;border:1px solid var(--c-slate-90)!important;
  background:rgba(var(--c-gray-99-rgb), 0.97)!important;box-shadow:0 12px 32px rgba(var(--c-shadow-rgb), 0.16)!important;
  font-family:'Compass Sans',sans-serif!important;font-size:12px!important;line-height:1.55!important;
  backdrop-filter:blur(10px);
}
.fan-chart-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:6px 22px 18px;}
#fanChartCaption{margin:0!important;font-size:11.5px!important;color:var(--c-slate-55b)!important;}
#resultsPanel .fan-chart-foot .legend{margin:0!important;gap:16px;font-size:11.5px;color:var(--c-slate-55b);}
#resultsPanel .fan-chart-foot .legend .dot{width:9px;height:9px;}

#recBox{border-radius:16px!important;margin-top:22px!important;padding:20px 22px!important;}
#diagnosticSection{border-radius:16px!important;padding:20px 22px!important;}

@media(max-width:980px){
  #resultsPanel .dash-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .fan-chart-head{flex-direction:column;}
  }
@media(max-width:640px){
  #resultsPanel > .panel{padding:16px;border-radius:16px;}
  #resultsPanel .dash-banner{padding:20px;min-height:auto;}

  #resultsPanel .dash-grid{grid-template-columns:1fr;gap:12px;}
  #resultsPanel .dash-card{min-height:auto;padding:17px;}

  .fan-chart-shell{border-radius:14px;margin-top:18px;}
  .fan-chart-head{padding:16px 16px 12px;}
  .fan-chart-canvas-wrap{padding:8px 4px 0;}
  .fan-chart-foot{padding:6px 16px 15px;}
}
@media print{
  #resultsPanel > .panel,#resultsPanel .dash-card,.fan-chart-shell{box-shadow:none!important;}
  #resultsPanel .dash-card:hover{transform:none;}
}

/* ---- section: ui-pass-4-year-projection ---- */
/* ======================================================================
   PASS 4 — YEAR-BY-YEAR PROJECTION EXPERIENCE
   Presentation only. Projection calculations and render logic untouched.
   ====================================================================== */

#yearByYearContent{
  margin-top:4px;
  padding:18px;
  border:1px solid var(--c-slate-90);
  border-radius:18px;
  background:linear-gradient(180deg,var(--c-gray-99) 0%,var(--c-gray-99) 100%);
  box-shadow:0 14px 34px rgba(var(--c-shadow-rgb), 0.07);
}

#scenarioTabs{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px!important;
  margin:0 0 16px!important;
  padding:5px;
  background:var(--c-gray-95);
  border:1px solid var(--c-gray-95);
  border-radius:14px;
}
#scenarioTabs .preset-btn{
  width:100%;
  min-height:46px;
  justify-content:center;
  border:1px solid transparent!important;
  border-radius:10px!important;
  background:transparent!important;
  box-shadow:none!important;
  font-size:12.5px!important;
  font-weight:750!important;
  letter-spacing:-.01em;
  transition:all .18s ease!important;
}
#scenarioTabs .preset-btn svg{width:16px;height:16px;}
#scenarioTabs .preset-btn:not(.active-scenario):hover{
  background:var(--c-gray-99)!important;
  box-shadow:0 3px 10px rgba(var(--c-shadow-rgb), 0.06)!important;
}
#scenarioTabs #tab15{color:var(--c-red-55b)!important;}
#scenarioTabs #tab50{color:var(--c-blue-45)!important;}
#scenarioTabs #tab90{color:var(--c-amber-60)!important;}
#scenarioTabs #tab15.active-scenario{
  color:var(--c-red-50b)!important;
  background:linear-gradient(180deg,var(--c-gray-99),var(--c-gray-95))!important;
  border-color:var(--c-rose-85)!important;
  box-shadow:0 4px 12px rgba(var(--c-red-55b-rgb), 0.1)!important;
}
#scenarioTabs #tab50.active-scenario{
  color:var(--c-blue-35)!important;
  background:linear-gradient(180deg,var(--c-gray-99),var(--c-slate-95))!important;
  border-color:var(--c-slate-85b)!important;
  box-shadow:0 4px 12px rgba(var(--c-shadow-rgb), 0.1)!important;
}
#scenarioTabs #tab90.active-scenario{
  color:var(--c-amber-55b)!important;
  background:linear-gradient(180deg,var(--c-gray-99),var(--c-sand-95b))!important;
  border-color:var(--c-amber-85)!important;
  box-shadow:0 4px 12px rgba(var(--c-amber-60-rgb), 0.1)!important;
}

#projTableContainer.projection-table-shell{
  position:relative;
  overflow:auto!important;
  border:1px solid var(--c-gray-90);
  border-radius:14px;
  background:var(--c-gray-99);
  box-shadow:0 5px 18px rgba(var(--c-shadow-rgb), 0.055);
  scrollbar-color:var(--c-slate-80) var(--c-gray-95);
  scrollbar-width:thin;
}
#projTableContainer::-webkit-scrollbar{height:10px;width:10px;}
#projTableContainer::-webkit-scrollbar-track{background:var(--c-gray-95);border-radius:999px;}
#projTableContainer::-webkit-scrollbar-thumb{background:var(--c-slate-80);border-radius:999px;border:2px solid var(--c-gray-95);}

#projTable{
  margin:0!important;
  min-width:1120px;
  border-collapse:separate!important;
  border-spacing:0!important;
  font-size:13.5px!important;
  font-variant-numeric:tabular-nums;
}
#projTable thead th{
  position:sticky;
  top:0;
  z-index:4;
  padding:14px 10px 13px!important;
  background:var(--c-gray-99)!important;
  border-bottom:1px solid var(--c-slate-90)!important;
  border-right:1px solid var(--c-gray-95)!important;
  color:var(--c-slate-55b)!important;
  font-size:10.5px!important;
  font-weight:800!important;
  line-height:1.2!important;
  letter-spacing:.07em!important;
  text-transform:uppercase!important;
  box-shadow:0 2px 0 rgba(var(--c-gray-99-rgb), 0.8);
}
#projTable thead th:first-child{border-top-left-radius:13px;}
#projTable thead th:last-child{border-top-right-radius:13px;border-right:none!important;}

#projTable tbody tr{
  background:var(--c-gray-99)!important;
  transition:background .15s ease,box-shadow .15s ease;
}
#projTable tbody tr:nth-child(even){background:var(--c-gray-99)!important;}
#projTable tbody tr:has(.phase-pill.working){background:var(--c-gray-99)!important;}
#projTable tbody tr:has(.phase-pill.retired):nth-child(even){background:var(--c-gray-99)!important;}
#projTable tbody tr:hover{
  background:var(--c-gray-99)!important;
  box-shadow:inset 3px 0 0 var(--c-blue-70);
}
#projTable tbody td{
  padding:13px 10px!important;
  min-height:54px;
  border-bottom:1px solid var(--c-gray-95)!important;
  border-right:1px solid var(--c-gray-95)!important;
  color:var(--c-slate-35);
  line-height:1.35;
  vertical-align:middle!important;
}
#projTable tbody td:last-child{border-right:none!important;}
#projTable td[data-label="Age"]{
  font-size:17px!important;
  font-weight:800!important;
  color:var(--c-blue-30)!important;
  letter-spacing:-.025em;
}
#projTable td[data-label="Balance"]{
  font-weight:750;
  color:var(--c-blue-35);
}
#projTable td[data-label="Roth Balance"]{
  color:var(--c-slate-45b);
}
#projTable td[data-label="Social Security"]{
  color:var(--c-slate-45b);
}
#projTable td[data-label="Portfolio Withdrawal"]{
  color:var(--c-blue-35);
  line-height:1.42!important;
}
#projTable td[data-label="Portfolio Withdrawal"] a,
#projTable td[data-label="Portfolio Withdrawal"] span{
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
#projTable td[data-label="Total Tax"]{color:var(--c-slate-45b);}
#projTable td[data-label="Eff. Tax Rate"]{color:var(--c-slate-35);}
#projTable td[data-label="Spendable Income"]{
  font-weight:750;
  color:var(--c-blue-30);
  background:linear-gradient(90deg,rgba(var(--c-gray-95-rgb), 0.25),rgba(var(--c-gray-95-rgb), 0.7));
}
#projTable td[data-label="Spendable Income"] .sub,
#projTable td[data-label="Eff. Tax Rate"] .sub{
  font-weight:500;
  color:var(--c-slate-70b);
}

#projTable .phase-pill{
  min-height:30px;
  padding:5px 10px 5px 8px!important;
  gap:6px!important;
  border:1px solid transparent;
  border-radius:999px!important;
  font-size:11.5px!important;
  font-weight:750!important;
  letter-spacing:.01em;
}
#projTable .phase-pill.working{
  background:var(--c-sage-95)!important;
  border-color:var(--c-sage-90b);
  color:var(--c-green-55)!important;
}
#projTable .phase-pill.retired{
  background:var(--c-gray-95)!important;
  border-color:var(--c-slate-90);
  color:var(--c-blue-45)!important;
}
#projTable .phase-pill svg{width:14px!important;height:14px!important;}

#projTable tr.retirement-year-start td{
  border-top:3px solid var(--c-amber-70)!important;
  background-image:linear-gradient(180deg,rgba(var(--c-sand-95b-rgb), 0.5),rgba(var(--c-gray-99-rgb), 0));
}
#projTable tr.retirement-year-start td:first-child{
  position:relative;
  color:var(--c-amber-55b)!important;
}
#projTable tr.retirement-year-start td:first-child::before{
  content:"RETIREMENT";
  position:absolute;
  top:-10px;
  left:8px;
  padding:2px 6px;
  border-radius:5px;
  background:var(--c-sand-99);
  border:1px solid var(--c-amber-85b);
  color:var(--c-amber-55b);
  font:800 8px/1 'Compass Sans',sans-serif;
  letter-spacing:.09em;
}

#projTable tfoot td{
  padding:13px 10px!important;
  background:var(--c-gray-95)!important;
  border-top:1px solid var(--c-slate-85b)!important;
  color:var(--c-blue-35)!important;
  font-weight:800!important;
}
#projTable #projFooter{border-top:none!important;}

#yearByYearContent > div:last-child{
  margin-top:14px!important;
  padding:14px 16px!important;
  border:1px solid var(--c-slate-90);
  border-radius:12px!important;
  background:var(--c-gray-99)!important;
  color:var(--c-slate-45b)!important;
  line-height:1.55;
}
#yearByYearContent > div:last-child strong{color:var(--c-blue-40);}

@media(max-width:900px){
  #yearByYearContent{padding:14px;}
  #scenarioTabs{grid-template-columns:1fr;gap:6px;}
  #scenarioTabs .preset-btn{justify-content:flex-start;padding-left:14px!important;}
}
@media(max-width:680px){
        #yearByYearContent{padding:10px;border-radius:14px;}
  #projTable{min-width:0!important;font-size:13px!important;}
  #projTable thead{display:none!important;}
  #projTable tbody tr{
    margin-bottom:12px!important;
    border:1px solid var(--c-gray-90)!important;
    border-radius:12px!important;
    overflow:hidden;
    box-shadow:0 4px 12px rgba(var(--c-shadow-rgb), 0.05);
  }
  #projTable tbody td{padding:10px 12px!important;min-height:0;}
  #projTable td[data-label="Spendable Income"]{background:var(--c-gray-99)!important;}
  #projTable tr.retirement-year-start td:first-child::before{top:5px;right:10px;left:auto;}
}
@media print{
  #yearByYearContent{box-shadow:none!important;border:1px solid var(--c-gray-80)!important;padding:10px!important;}
  #scenarioTabs{background:var(--c-gray-99)!important;}
  #projTableContainer{box-shadow:none!important;overflow:visible!important;}
  #projTable{min-width:0!important;font-size:9px!important;}
  #projTable thead th{position:static!important;background:var(--c-gray-95)!important;}
  #projTable tbody tr:hover{box-shadow:none!important;}
}

/* ---- section: year-by-year-width-fix-v41 ---- */
/* Pass 4.1 — keep the full Year-by-Year table inside its card on desktop. */
@media (min-width:1001px){
  #projTableContainer.projection-table-shell{
    width:100%;
    max-width:100%;
    overflow-x:hidden!important;
  }
  #projTable{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    table-layout:fixed!important;
  }
  #projTable thead th{
    padding-left:7px!important;
    padding-right:7px!important;
    font-size:10px!important;
  }
  #projTable tbody td{
    padding-left:7px!important;
    padding-right:7px!important;
    font-size:12.5px!important;
  }
  #projTable td[data-label="Age"]{font-size:16px!important;}
  #projTable .phase-pill{padding-left:7px!important;padding-right:8px!important;font-size:11px!important;}
}
/* At mid-size desktop/tablet widths, preserve access to every column with a deliberate scrollbar. */
@media (min-width:681px) and (max-width:1000px){
  #projTableContainer.projection-table-shell{overflow-x:auto!important;}
  #projTable{width:1000px!important;min-width:1000px!important;}
}

/* ---- section: year-by-year-phase-alignment-v42 ---- */
/* Pass 4.2 — improve Phase column spacing and alignment. */
@media (min-width:1001px){
  /* Column widths now live in retirenerd-analyzer.css (class-based, 2026-09-23). */

  /* Phase reads best as a centered status, rather than a right-aligned number. */
  #projTable thead th:nth-child(2),
  #projTable tbody td:nth-child(2){
    text-align:center!important;
  }
  #projTable tbody td:nth-child(2) .phase-pill{
    display:inline-flex!important;
    justify-content:center!important;
    max-width:100%;
    margin-inline:auto!important;
    padding:5px 9px!important;
    gap:5px!important;
    font-size:10.75px!important;
  }

  /* Keep neighboring financial values visually separated from the status pill. */
  #projTable thead th:nth-child(3),
  #projTable tbody td:nth-child(3){
    padding-left:10px!important;
  }
}

@media (min-width:681px) and (max-width:1000px){
  #projTable thead th:nth-child(2),
  #projTable tbody td:nth-child(2){text-align:center!important;}
  #projTable tbody td:nth-child(2) .phase-pill{margin-inline:auto!important;}
}

/* ---- section: year-by-year-centered-columns-v43 ---- */
/* Pass 4.3 — center Year-by-Year table content on tablet/desktop. */
@media (min-width:681px){
  #projTable thead th,
  #projTable tbody td,
  #projTable tfoot td{
    text-align:center!important;
  }

  /* Center status pills inside the Phase column. */
  #projTable tbody td[class="proj-core-cell" data-label="Phase"] .phase-pill,
  #projTable tbody td:nth-child(2) .phase-pill{
    display:inline-flex!important;
    margin-left:auto!important;
    margin-right:auto!important;
    justify-content:center!important;
  }

  /* Keep multiline explanatory financial cells balanced around the center. */
  #projTable td[data-label="Portfolio Withdrawal"],
  #projTable td[data-label="Std Deduction"],
  #projTable td[data-label="Eff. Tax Rate"],
  #projTable td[data-label="Spendable Income"]{
    text-align:center!important;
  }

  #projTable td[data-label="Portfolio Withdrawal"] a,
  #projTable td[data-label="Portfolio Withdrawal"] span,
  #projTable td[data-label="Std Deduction"] span,
  #projTable td[data-label="Eff. Tax Rate"] span,
  #projTable td[data-label="Spendable Income"] span{
    text-align:center!important;
  }
}

/* Preserve the intentionally label/value split layout on phones. */
@media (max-width:680px){
  #projTable tbody td{
    text-align:right!important;
  }
  #projTable tbody td[class="proj-core-cell" data-label="Phase"] .phase-pill,
  #projTable tbody td:nth-child(2) .phase-pill{
    margin-left:auto!important;
    margin-right:0!important;
  }
}

/* ===== PASS 5 · Historical Stress Test / Backtest ===== */
#historicalBacktestPanel{
  padding:28px;
  border:1px solid var(--c-gray-90);
  border-radius:18px;
  background:linear-gradient(180deg,var(--c-gray-99) 0%,var(--c-gray-99) 100%);
  box-shadow:0 14px 36px rgba(var(--c-shadow-rgb), 0.07);
}
#historicalBacktestMethod{
  margin:0 0 18px !important;
  padding:16px 18px 16px 20px;
  border:1px solid var(--c-gray-95);
  border-left:4px solid var(--c-blue-60b);
  border-radius:12px;
  background:var(--c-gray-99);
  color:var(--c-slate-50b);
  font-size:13px;
  line-height:1.7;
}
#historicalBacktestPanel > .runbtn{
  position:relative;
  min-height:54px;
  margin-top:2px;
  border:1px solid rgba(var(--c-blue-55c-rgb), 0.28);
  border-radius:13px;
  background:linear-gradient(100deg,var(--c-blue-35) 0%,var(--c-blue-45b) 46%,var(--c-blue-55c) 100%);
  box-shadow:0 10px 24px rgba(var(--c-blue-55c-rgb), 0.18);
  font-size:15px;
  font-weight:750;
  letter-spacing:-.01em;
}
#historicalBacktestPanel > .runbtn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(var(--c-blue-55c-rgb), 0.24);
}
#histResults{margin-top:22px !important;}
#histValidationWarning,#histStaleBanner{
  border-radius:12px !important;
  padding:14px 16px !important;
}
#histGapBanner{
  margin-bottom:20px !important;
  padding:15px 18px !important;
  border:1px solid var(--c-amber-85b) !important;
  border-left:4px solid var(--c-amber-75) !important;
  border-radius:12px !important;
  background:linear-gradient(90deg,var(--c-sand-99) 0%,var(--c-gray-99) 100%) !important;
  color:var(--c-amber-50) !important;
  font-size:12.5px !important;
  line-height:1.65 !important;
  box-shadow:0 5px 16px rgba(var(--c-amber-50b-rgb), 0.07);
}
#histGapBanner strong{color:var(--c-amber-55b);}

#histSummaryCards{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin:0 0 18px;
}
#histSummaryCards .result-card{
  position:relative;
  min-height:132px;
  margin:0;
  padding:20px 22px;
  border-radius:16px;
  border:1px solid var(--c-gray-90);
  background:var(--c-gray-99);
  box-shadow:0 8px 22px rgba(var(--c-shadow-rgb), 0.06);
  overflow:hidden;
}
#histSummaryCards .result-card::after{
  position:absolute;
  right:18px;
  top:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:11px;
  font-size:19px;
  font-weight:800;
}
#histSummaryCards .result-card:nth-child(1){
  border-color:var(--c-sage-90b);
  background:linear-gradient(145deg,var(--c-gray-99) 0%,var(--c-gray-99) 72%);
}
#histSummaryCards .result-card:nth-child(1)::after{
  content:'✓';
  color:var(--c-green-55);
  background:var(--c-sage-95);
}
#histSummaryCards .result-card:nth-child(2){
  border-color:var(--c-rose-90b);
  background:linear-gradient(145deg,var(--c-gray-99) 0%,var(--c-gray-99) 72%);
}
#histSummaryCards .result-card:nth-child(2)::after{
  content:'↓';
  color:var(--c-red-55b);
  background:var(--c-rose-95);
}
#histSummaryCards .result-card:nth-child(3){
  border-color:var(--c-slate-90);
  background:linear-gradient(145deg,var(--c-gray-99) 0%,var(--c-gray-99) 72%);
}
#histSummaryCards .result-card:nth-child(3)::after{
  content:'↑';
  color:var(--c-blue-45b);
  background:var(--c-gray-95);
}
#histSummaryCards .l{
  max-width:78%;
  border-bottom:0;
  color:var(--c-slate-60b);
  font-size:10.5px;
  font-weight:750;
  letter-spacing:.095em;
  text-transform:uppercase;
}
#histSummaryCards .v{
  margin-top:13px;
  font-size:34px;
  line-height:1;
  letter-spacing:-.04em;
  font-weight:800;
}
#histSummaryCards .hero-success .v{color:var(--c-green-55);}

#histBearCards{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px !important;
  margin:0 0 22px !important;
}
#histBearCards .sumcard{
  min-width:0 !important;
  margin:0;
  padding:17px 18px 16px;
  border:1px solid var(--c-sand-90);
  border-radius:15px;
  background:linear-gradient(150deg,var(--c-gray-99) 0%,var(--c-gray-99) 68%);
  box-shadow:0 7px 20px rgba(var(--c-shadow-rgb), 0.05);
}
#histBearCards .sumcard .l{
  border-bottom:0;
  color:var(--c-amber-65) !important;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.055em;
  line-height:1.35;
  text-transform:uppercase;
}
#histBearCards .sumcard .v{
  margin-top:10px;
  font-size:24px !important;
  line-height:1.1;
  font-weight:800;
  letter-spacing:-.025em;
}

#histTableContainer{
  overflow:hidden !important;
  border:1px solid var(--c-gray-90);
  border-radius:15px;
  background:var(--c-gray-99);
  box-shadow:0 7px 20px rgba(var(--c-shadow-rgb), 0.045);
}
#histTable{
  width:100%;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;
}
#histTable thead th{
  padding:14px 16px;
  border-bottom:1px solid var(--c-slate-90);
  background:var(--c-gray-95);
  color:var(--c-slate-55b);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.075em;
  text-transform:uppercase;
  vertical-align:middle;
}
#histTable thead th:first-child{width:46%;text-align:left !important;}
#histTable thead th:not(:first-child){text-align:center !important;}
#histTable tbody td{
  padding:14px 16px;
  border-bottom:1px solid var(--c-gray-95);
  background:var(--c-gray-99);
  color:var(--c-slate-35);
  font-size:13px;
  vertical-align:middle;
}
#histTable tbody tr:last-child td{border-bottom:0;}
#histTable tbody tr:hover td{background:var(--c-gray-99);}
#histTable tbody td:first-child{text-align:left;}
#histTable tbody td:not(:first-child){text-align:center !important;}
#histTable tbody td:nth-child(2){font-weight:750;color:var(--c-blue-35);}
#histTable tbody td:nth-child(3){font-weight:750;}
#histTable tbody td:nth-child(4){color:var(--c-slate-50b);}
#histTable tbody tr:has(.custom-badge) td{
  background:linear-gradient(90deg,var(--c-gray-99) 0%,var(--c-gray-99) 100%) !important;
}
#histTable td span[style*="font-size:10px"]{
  display:inline-block;
  margin-top:4px;
  color:var(--c-slate-65b) !important;
  font-size:10.5px !important;
  line-height:1.35;
}

@media(max-width:850px){
  #historicalBacktestPanel{padding:20px;}
  #histSummaryCards,#histBearCards{grid-template-columns:1fr;}
  #histSummaryCards .result-card{min-height:112px;}
  #histTableContainer{overflow-x:auto !important;}
  #histTable{min-width:720px;}
}
@media(max-width:680px){
  #historicalBacktestPanel{
    padding:16px;
    border-radius:14px;
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:hidden;
    box-sizing:border-box;
  }
  #historicalBacktestMethod{padding:14px 15px;font-size:12.5px;}
  #historicalBacktestPanel > .runbtn{
    min-height:50px;
    font-size:14px;
    width:100%;
    max-width:100%;
    white-space:normal;
  }

  /* iPhone fix: the tablet rule above gives the historical table a 720px
     minimum width. Mobile Safari treats that as page-wide layout content,
     zooms the rest of the app down, and makes the results appear to occupy
     only the left half of the screen. On phones the table already becomes
     labeled cards, so it must not retain any desktop/tablet min-width. */
  #histResults,
  #histTableContainer,
  #histTable,
  #histTable tbody,
  #histTable tr{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box;
  }
  #histTableContainer{
    border:0;
    box-shadow:none;
    overflow:hidden !important;
    background:transparent;
  }
  #histTable{display:block !important;}
  #histTable tbody{display:block !important;}
  #histTable tr{
    display:block !important;
    overflow:hidden;
  }
  #histTable td{
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
    overflow-wrap:anywhere;
  }
  #histTable td > *{max-width:100%;}
  #histSummaryCards,
  #histBearCards{
    width:100%;
    max-width:100%;
    min-width:0;
  }
}
@media print{
  #historicalBacktestPanel{box-shadow:none !important;border:1px solid var(--c-gray-85) !important;}
  #histTableContainer{overflow:visible !important;box-shadow:none !important;}
  #histGapBanner{background:var(--c-gray-99) !important;color:var(--c-gray-30) !important;border:1px solid var(--c-gray-85) !important;}
}

/* ---- section: ui-pass-6-plan-diagnostic ---- */
/* ======================================================================
   PASS 6 — WHAT'S HURTING MY PLAN / PLAN DIAGNOSTIC
   Presentation only. Diagnostic and Monte Carlo calculations untouched.
   ====================================================================== */

#diagnosticSection.plan-diagnostic{
  position:relative;
  margin-top:26px!important;
  padding:24px!important;
  border:1px solid var(--c-slate-90)!important;
  border-radius:18px!important;
  background:
    radial-gradient(circle at 100% 0,rgba(var(--c-blue-55c-rgb), 0.06),transparent 30%),
    linear-gradient(180deg,var(--c-gray-99) 0%,var(--c-gray-99) 100%)!important;
  box-shadow:0 12px 34px rgba(var(--c-shadow-rgb), 0.055);
  overflow:hidden;
}
#diagnosticSection.plan-diagnostic::before{
  content:"";position:absolute;inset:0 auto 0 0;width:4px;
  background:linear-gradient(180deg,var(--c-blue-55c),var(--c-blue-35));
}
.diagnostic-intro{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px;max-width:920px;}
.diagnostic-intro-icon{
  flex:0 0 44px;width:44px;height:44px;border-radius:13px;
  display:grid;place-items:center;color:var(--c-blue-50b);
  background:linear-gradient(145deg,var(--c-slate-95),var(--c-gray-99));border:1px solid var(--c-slate-90);
  box-shadow:0 6px 16px rgba(var(--c-shadow-rgb), 0.08);
}
.diagnostic-intro-icon svg{width:23px;height:23px;}
.diagnostic-intro-copy{min-width:0;padding-top:1px;}
.diagnostic-heading{font-family:'Compass Display',sans-serif;font-size:18px;line-height:1.3;font-weight:800;letter-spacing:-.015em;color:var(--c-slate-30);}
.diagnostic-subheading{margin-top:5px;font-size:12.5px;line-height:1.55;color:var(--c-slate-60b);max-width:820px;}

#diagnosticSection .diagnostic-btn{
  width:auto!important;max-width:100%;min-width:340px;
  margin:0!important;padding:10px 12px 10px 14px!important;
  display:inline-flex!important;align-items:center;gap:11px;
  border:1px solid var(--c-blue-40b)!important;border-radius:12px!important;
  background:linear-gradient(135deg,var(--c-blue-35) 0%,var(--c-blue-50b) 58%,var(--c-blue-55c) 100%)!important;
  color:var(--c-gray-99)!important;text-align:left!important;
  box-shadow:0 9px 22px rgba(var(--c-shadow-rgb), 0.2),inset 0 1px rgba(var(--c-gray-99-rgb), 0.16);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease!important;
}
#diagnosticSection .diagnostic-btn:hover{
  transform:translateY(-2px)!important;filter:saturate(1.05) brightness(1.02);
  box-shadow:0 13px 26px rgba(var(--c-shadow-rgb), 0.25),inset 0 1px rgba(var(--c-gray-99-rgb), 0.18)!important;
}
#diagnosticSection .diagnostic-btn:active{transform:translateY(0)!important;}
#diagnosticSection .diagnostic-btn:focus-visible{outline:3px solid rgba(var(--c-blue-55c-rgb), 0.22);outline-offset:3px;}
#diagnosticSection .diagnostic-btn-icon{
  flex:0 0 34px;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:rgba(var(--c-gray-99-rgb), 0.13);border:1px solid rgba(var(--c-gray-99-rgb), 0.14);
}
#diagnosticSection .diagnostic-btn-icon svg{width:19px;height:19px;}
#diagnosticSection .diagnostic-btn-copy{display:flex;flex-direction:column;gap:1px;line-height:1.2;}
#diagnosticSection .diagnostic-btn-copy strong{font-family:'Compass Display',sans-serif;font-size:14px;font-weight:800;letter-spacing:.005em;}
#diagnosticSection .diagnostic-btn-copy small{font-family:'Compass Sans',sans-serif;font-size:10.5px;font-weight:500;color:rgba(var(--c-gray-99-rgb), 0.72);letter-spacing:0;}
#diagnosticSection .diagnostic-btn:disabled{cursor:wait;transform:none!important;filter:saturate(.75);}

#diagnosticRunning.diagnostic-running{
  width:max-content;max-width:100%;display:flex;align-items:center;gap:9px;
  padding:9px 12px;border-radius:10px;background:var(--c-gray-99);border:1px solid var(--c-slate-95);
  color:var(--c-slate-55b)!important;font-size:11.5px!important;line-height:1.45;
}
.diagnostic-spinner{width:13px;height:13px;flex:0 0 13px;border-radius:50%;border:2px solid var(--c-slate-90b);border-top-color:var(--c-blue-50b);animation:diagSpin .75s linear infinite;}
@keyframes diagSpin{to{transform:rotate(360deg)}}

#diagnosticResults{margin-top:20px!important;}
#diagnosticResults > div{
  padding:18px 20px 16px!important;background:var(--c-gray-99)!important;
  border:1px solid var(--c-slate-90)!important;border-radius:14px!important;
  box-shadow:0 7px 22px rgba(var(--c-shadow-rgb), 0.045);
}
#diagnosticResults > div > div:first-child{
  margin-bottom:14px!important;padding:0 0 13px!important;border-bottom:1px solid var(--c-gray-95);
  color:var(--c-slate-55b)!important;font-size:12px!important;line-height:1.5;
}
#diagnosticResults > div > div:first-child strong{font-size:14px;color:var(--c-blue-35)!important;}
#diagnosticTable{border-collapse:separate;border-spacing:0;width:100%!important;table-layout:fixed;}
#diagnosticTable th{
  padding:9px 12px 10px!important;background:var(--c-gray-99);color:var(--c-slate-55b)!important;
  border-top:1px solid var(--c-gray-95);border-bottom:1px solid var(--c-gray-90)!important;
  font-size:10.5px!important;font-weight:800!important;letter-spacing:.07em!important;text-transform:uppercase;
}
#diagnosticTable th:first-child{width:70%;text-align:left!important;border-left:1px solid var(--c-gray-95);border-radius:9px 0 0 9px;}
#diagnosticTable th:nth-child(2){width:18%;text-align:center!important;}
#diagnosticTable th:last-child{width:12%;text-align:center!important;border-right:1px solid var(--c-gray-95);border-radius:0 9px 9px 0;}
#diagnosticTable td{padding:12px!important;border-bottom:1px solid var(--c-gray-95)!important;font-size:12.5px;line-height:1.45;vertical-align:middle;}
#diagnosticTable tbody tr{transition:background .15s ease;}
#diagnosticTable tbody tr:hover{background:var(--c-gray-99);}
#diagnosticTable td:first-child{color:var(--c-slate-35);font-weight:550;}
#diagnosticTable td:nth-child(2),#diagnosticTable td:nth-child(3){text-align:center!important;font-family:'Compass Sans',sans-serif;font-variant-numeric:tabular-nums;font-variant-numeric:tabular-nums;white-space:nowrap;}
#diagnosticTable td:nth-child(2){font-weight:700;color:var(--c-blue-35);}
#diagnosticTable td:nth-child(3){font-weight:800!important;}
#diagnosticTable tbody tr:last-child td{background:var(--c-gray-99);border-top:1px solid var(--c-slate-90)!important;border-bottom:0!important;}
#diagnosticTable tbody tr:last-child td:first-child{border-radius:9px 0 0 9px;}
#diagnosticTable tbody tr:last-child td:last-child{border-radius:0 9px 9px 0;}
#diagnosticResults > div > div:last-child{
  margin-top:14px!important;padding:11px 13px;border-radius:10px;background:var(--c-gray-99);
  border:1px solid var(--c-gray-95);color:var(--c-slate-65b)!important;font-size:10.5px!important;line-height:1.55!important;
}

@media(max-width:760px){
  #diagnosticSection.plan-diagnostic{padding:18px!important;border-radius:15px!important;}
  .diagnostic-intro{gap:11px;margin-bottom:15px;}
  .diagnostic-intro-icon{width:40px;height:40px;flex-basis:40px;border-radius:11px;}
  .diagnostic-heading{font-size:16px;}
  #diagnosticSection .diagnostic-btn{width:100%!important;min-width:0;justify-content:flex-start;}
  }
@media(max-width:680px){
  #diagnosticTable{display:block!important;table-layout:auto;}
  #diagnosticTable tbody tr{background:var(--c-gray-99)!important;border-color:var(--c-slate-90)!important;border-radius:12px!important;}
  #diagnosticTable td{padding:7px 0!important;text-align:right!important;}
  #diagnosticTable td:nth-child(2),#diagnosticTable td:nth-child(3){text-align:right!important;}
  #diagnosticTable tbody tr:last-child td{background:transparent!important;border-top:0!important;}
  #diagnosticResults > div{padding:15px!important;}
}
@media print{
  #diagnosticSection.plan-diagnostic,#diagnosticResults > div{box-shadow:none!important;}
  #diagnosticSection .diagnostic-btn{display:none!important;}
}

/* ---- section: ui-pass-6-1-stable-allocation-chart ---- */
/* ======================================================================
   PASS 6.1 — STABLE ASSET CLASS MIX LAYOUT
   The donut keeps a permanent footprint so allocation changes never cause
   the portfolio table/controls to jump. Calculation logic is untouched.
   ====================================================================== */
.allocation-overview-row{
  min-height:126px;
  align-items:center!important;
}
#allocPieWrap{
  display:block!important;
  flex:0 0 118px!important;
  width:118px;
  min-width:118px;
  min-height:118px;
  padding:4px 8px 8px;
  border-radius:14px;
  box-sizing:border-box;
  transition:none!important;
}
#allocPie{
  display:block;
  width:90px!important;
  height:90px!important;
  margin:0 auto;
}
.allocation-overview-row .legend-card{
  flex:0 1 auto;
  align-self:center;
}

@media(max-width:760px){
  .allocation-overview-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 104px;
    gap:12px!important;
    min-height:116px;
    align-items:center!important;
  }
  #allocPieWrap{
    width:104px;
    min-width:104px;
    flex-basis:104px!important;
    min-height:108px;
    padding-left:4px;padding-right:4px;
  }
  #allocPie{width:82px!important;height:82px!important;}
  .allocation-overview-row .legend-card{
    width:100%;
    min-width:0;
  }
}

@media(max-width:560px){
  .allocation-overview-row{
    grid-template-columns:1fr;
    min-height:0;
    justify-items:stretch;
  }
  .allocation-overview-row .legend-card{
    width:100%;
  }
  #allocPieWrap{
    width:112px;
    min-width:112px;
    min-height:112px;
    justify-self:center;
  }
  #allocPie{width:86px!important;height:86px!important;}
}

@media print{
  .allocation-overview-row{min-height:118px;}
  #allocPieWrap{display:block!important;}
}

/* ---- section: senior-friendly-progressive-disclosure-v7 ---- */
/* PASS 7 — Progressive disclosure: keep the decision visible; keep technical detail available. */
.senior-details{margin:-4px 0 16px;max-width:920px;color:var(--c-slate-55b);font-size:12.5px;line-height:1.6;}
.senior-details.compact{margin-top:-2px;margin-bottom:12px;}
.senior-details summary{display:inline-flex;align-items:center;gap:7px;cursor:pointer;list-style:none;color:var(--c-blue-45b);font-weight:700;padding:6px 0;user-select:none;}
.senior-details summary::-webkit-details-marker{display:none;}
.senior-details summary::before{content:'+';width:20px;height:20px;border-radius:6px;border:1px solid var(--c-slate-85);background:var(--c-gray-99);display:inline-flex;align-items:center;justify-content:center;font-size:14px;line-height:1;color:var(--c-blue-50b);}
.senior-details[open] summary::before{content:'−';}
.senior-details-body{margin:5px 0 4px;padding:12px 14px;border:1px solid var(--c-gray-95);border-radius:10px;background:var(--c-gray-99);color:var(--c-slate-55b);}
.simple-detail-bar,.projection-detail-control{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:15px 0 8px;padding:10px 12px;border:1px solid var(--c-gray-95);border-radius:11px;background:var(--c-gray-99);color:var(--c-slate-55b);font-size:12px;}
.simple-detail-bar>div{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}.simple-detail-bar strong{color:var(--c-blue-35);font-size:13px}.simple-detail-bar span{color:var(--c-slate-60b);}
.detail-toggle-btn{min-height:36px;padding:7px 12px;border:1px solid var(--c-slate-90);border-radius:9px;background:var(--c-gray-99);color:var(--c-blue-45b);font:700 12px 'Compass Sans',sans-serif;cursor:pointer;box-shadow:0 1px 2px rgba(var(--c-shadow-rgb), 0.04);}
.detail-toggle-btn:hover{background:var(--c-gray-95);border-color:var(--c-slate-80b);}
/* Portfolio defaults to essentials. Ticker/Fund, Score, Allocation and Remove remain visible. */
#fundTable.portfolio-details-hidden th:nth-child(3),#fundTable.portfolio-details-hidden th:nth-child(4),#fundTable.portfolio-details-hidden th:nth-child(5),#fundTable.portfolio-details-hidden th:nth-child(6),
#fundTable.portfolio-details-hidden td[data-label="Exp. Ratio"],#fundTable.portfolio-details-hidden td[data-label="Est. Return*"],#fundTable.portfolio-details-hidden td[data-label="Est. Std Dev*"],#fundTable.portfolio-details-hidden td[data-label="Est. Sharpe*"]{display:none!important;}
/* Year-by-year defaults to the retirement story; tax mechanics are optional. */

/* More legible defaults for an older audience. */
.section-desc{font-size:14px!important;line-height:1.6!important;color:var(--c-slate-55b)!important;}
.field label{font-size:11px!important;letter-spacing:.055em!important;}
.global-tab,.preset-btn,.toggle-btn{font-size:13px;}
#historicalBacktestMethod{margin:0 0 16px!important;padding:0!important;border:0!important;background:transparent!important;}
#plainSummary .result-explanation{margin:10px 0 0;}
/* The mobile-only version of this rule already existed below (inside the 680px media query) —
   this unconditional copy makes the same "Show/Hide tax details" toggle actually work on desktop
   too. The more elaborate proj-detail-cell/proj-core-cell rules further down in this stylesheet
   were built for a table markup (col/th/td elements carrying those specific classes) that this
   tool's actual <table id="projTable"> was never given — it uses data-label attributes instead,
   which this rule targets directly, matching what the table's real HTML actually has. */
#projTable.projection-details-hidden td[data-label="Roth Balance"],#projTable.projection-details-hidden td[data-label="Std Deduction"],#projTable.projection-details-hidden td[data-label="Total Tax"],#projTable.projection-details-hidden td[data-label="Eff. Tax Rate"]{display:none!important;}
/* With the 4 tax columns hidden, redistribute their freed width toward From Portfolio specifically
   (it holds a formula string like "= 4.0% x $910K (start-of-year balance)" that needs real room to
   avoid wrapping), rather than splitting the space evenly with Money Available to Spend. */
@media(max-width:680px){
 .senior-details{font-size:13px;margin-bottom:14px}.senior-details summary{min-height:38px;padding:8px 0;}
 .simple-detail-bar,.projection-detail-control{align-items:stretch;flex-direction:column;}
 .detail-toggle-btn{width:100%;min-height:44px;font-size:13px;}
 /* On mobile, the optional detail rows stay hidden until requested, reducing each fund/year card substantially. */
 /* On mobile, each fund card defaults to its most compact form — Ticker, Fund Name, and Category
    only — with every other field (Exp. Ratio, Est. Return/Std Dev/Sharpe, Portfolio Fit, Allocation
    %, Remove) hidden until that specific fund's own toggle is tapped (see the per-fund button that
    replaces the old "GENERIC" badge position in renderTable()). This is deliberately row-scoped, not
    table-scoped like the older .portfolio-details-hidden rule directly above still is for desktop's
    width logic — the whole point here is that one fund can be expanded while others stay collapsed,
    which a single shared table-level class can't express. The global "Show/Hide investment details"
    button still works exactly as it did before, now also driving this per-row class on every row at
    once (see togglePortfolioDetails()), so it still acts as a genuine show-all/hide-all master
    control rather than losing that ability once per-row control was added alongside it. */
    #fundTable tr:not(.row-details-shown) td[data-label="Exp. Ratio"],
    #fundTable tr:not(.row-details-shown) td[data-label="Est. Return*"],
    #fundTable tr:not(.row-details-shown) td[data-label="Est. Std Dev*"],
    #fundTable tr:not(.row-details-shown) td[data-label="Est. Sharpe*"],
    #fundTable tr:not(.row-details-shown) td[data-label="Portfolio Fit"],
    #fundTable tr:not(.row-details-shown) td[data-label="Allocation %"],
    #fundTable tr:not(.row-details-shown) td[data-label="Remove"]{display:none!important;}
    #fundTable td.tick{display:flex!important;justify-content:space-between;align-items:center;gap:8px;}
    #fundTable .row-detail-toggle-btn{display:inline-block;padding:3px 9px;font-size:10.5px;flex-shrink:0;}
 #projTable.projection-details-hidden td[data-label="Roth Balance"],#projTable.projection-details-hidden td[data-label="Std Deduction"],#projTable.projection-details-hidden td[data-label="Total Tax"],#projTable.projection-details-hidden td[data-label="Eff. Tax Rate"]{display:none!important;}
}
@media print{.senior-details:not([open]),.simple-detail-bar,.projection-detail-control{display:none!important;}}

/* ---- section: mobile-allocation-controls-v72 ---- */
/* Pass 7.2 — stable, finger-friendly allocation editing on mobile + locked desktop geometry. */
.mobile-alloc-stepper{display:none;}

/* Desktop: keep the allocation controls in a fixed footprint so range dragging cannot
   cause the portfolio table/container to horizontally auto-scroll or reflow. */
@media (min-width:1001px){
  #fundTableContainer{
    overflow-x:hidden!important;
    max-width:100%;
  }
  #fundTable td[data-label="Allocation %"] > .allocation-control{
    width:180px!important;
    min-width:180px!important;
    max-width:180px!important;
    margin-left:auto!important;
    display:grid!important;
    grid-template-columns:minmax(70px,1fr) 62px!important;
    gap:10px!important;
    align-items:center!important;
    justify-content:end!important;
  }
  #fundTable td[data-label="Allocation %"] .alloc-slider{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
  }
  #fundTable td[data-label="Allocation %"] .alloc-input{
    width:62px!important;
    min-width:62px!important;
  }
}

/* Tablet keeps deliberate horizontal access if the complete fund table needs it. */
@media (min-width:681px) and (max-width:1000px){
  #fundTableContainer{overflow-x:auto!important;}
}

/* Mobile portfolio cards */
@media (max-width:680px){
  body{padding-bottom:92px;}

  #fundTable td[data-label="Allocation %"]{
    padding:12px 0 14px!important;
    gap:8px!important;
  }

  #fundTable td[data-label="Allocation %"]::before{
    font-size:11px!important;
    font-weight:700!important;
    letter-spacing:.06em!important;
    margin-bottom:2px;
  }

  #fundTable td[data-label="Allocation %"] > .allocation-control{
    display:grid!important;
    grid-template-columns:48px minmax(0,1fr) 48px 84px!important;
    align-items:center!important;
    gap:10px!important;
    width:100%!important;
  }

  /* Reset native range styling. Without this, iOS/WebKit can position the custom
     thumb relative to the native control instead of the custom 8px track. */
  #fundTable .alloc-slider{
    -webkit-appearance:none!important;
    appearance:none!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    height:48px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    cursor:pointer;
    touch-action:pan-y;
  }

  #fundTable .alloc-slider::-webkit-slider-runnable-track{
    height:8px!important;
    border-radius:999px!important;
    background:var(--c-gray-90)!important;
  }
  #fundTable .alloc-slider::-webkit-slider-thumb{
    -webkit-appearance:none!important;
    appearance:none!important;
    width:32px!important;
    height:32px!important;
    border-radius:50%!important;
    margin-top:-12px!important; /* (8 - 32) / 2 = -12: exact track centering */
    background:currentColor!important;
    border:3px solid var(--c-gray-99)!important;
    box-shadow:0 2px 6px rgba(var(--c-shadow-rgb), 0.28),0 0 0 1px rgba(var(--c-shadow-rgb), 0.1)!important;
  }

  #fundTable .alloc-slider::-moz-range-track{
    height:8px!important;
    border-radius:999px!important;
    background:var(--c-gray-90)!important;
  }
  #fundTable .alloc-slider::-moz-range-thumb{
    width:32px!important;
    height:32px!important;
    border-radius:50%!important;
    background:currentColor!important;
    border:3px solid var(--c-gray-99)!important;
    box-shadow:0 2px 6px rgba(var(--c-shadow-rgb), 0.28),0 0 0 1px rgba(var(--c-shadow-rgb), 0.1)!important;
  }

  #fundTable .alloc-input[data-t]{
    width:84px!important;
    min-width:84px!important;
    height:50px!important;
    padding:7px 8px!important;
    font-size:18px!important;
    text-align:center!important;
    border-radius:12px!important;
  }

  .mobile-alloc-stepper{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    padding:0!important;
    border:1px solid var(--c-slate-90);
    border-radius:13px;
    background:var(--c-gray-99);
    color:var(--c-blue-35);
    font:700 25px/1 'Compass Sans',sans-serif;
    box-shadow:0 2px 6px rgba(var(--c-shadow-rgb), 0.06);
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }
  .mobile-alloc-stepper:active{
    transform:scale(.96);
    background:var(--c-gray-95);
  }

  /* Persistent mobile allocation meter. It remains visible while other fund cards
     are above or below the viewport, so the user always knows the portfolio total. */
  #mobileStickyTotal.has-funds{
    display:block!important;
    position:fixed!important;
    left:12px!important;
    right:12px!important;
    bottom:10px!important;
    z-index:500!important;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom))!important;
    background:rgba(var(--c-gray-99-rgb), 0.97)!important;
    border:1px solid var(--c-slate-90)!important;
    border-radius:15px!important;
    box-shadow:0 12px 34px rgba(var(--c-shadow-rgb), 0.18)!important;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    color:var(--c-slate-50b)!important;
    font-family:'Compass Sans',sans-serif!important;
    text-align:left!important;
  }
  #mobileStickyTotal .mobile-total-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  #mobileStickyTotal .mobile-total-label{
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.07em;
    color:var(--c-slate-55b);
  }
  #mobileStickyTotalPct{
    font-family:'Compass Sans',sans-serif;font-variant-numeric:tabular-nums;
    font-size:18px!important;
    font-weight:800!important;
  }
  #mobileStickyRemaining{
    margin-left:6px;
    font-size:12px;
    font-weight:650;
    color:var(--c-slate-60b);
    white-space:nowrap;
  }
  #mobileStickyTrack{
    height:5px;
    margin-top:7px;
    overflow:hidden;
    border-radius:999px;
    background:var(--c-gray-95);
  }
  #mobileStickyFill{
    height:100%;
    width:0;
    border-radius:999px;
    background:var(--c-blue-55c);
    transition:width .12s linear,background .12s linear;
  }
}

@media (max-width:430px){
  #fundTable td[data-label="Allocation %"] > .allocation-control{
    grid-template-columns:48px minmax(0,1fr) 48px!important;
    grid-template-areas:
      "minus slider plus"
      ". value ."!important;
    row-gap:7px!important;
  }
  .mobile-alloc-minus{grid-area:minus;}
  #fundTable .alloc-slider{grid-area:slider;}
  .mobile-alloc-plus{grid-area:plus;}
  #fundTable .alloc-input[data-t]{grid-area:value;justify-self:center;}
}

/* ---- section: portfolio-stable-layout-v74 ---- */
/* Pass 7.4 — stable desktop portfolio layout without a fund-table colgroup. */
@media (min-width:1001px){
  #fundTable{
    width:100%!important;
    max-width:100%!important;
    table-layout:fixed!important;
  }
  #fundTableContainer{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  /* Simple view uses the five essential physical columns: 1,2,7,8,9. */
  #fundTable.portfolio-details-hidden th:nth-child(1){width:11%!important;}
  #fundTable.portfolio-details-hidden th:nth-child(2){width:39%!important;}
  #fundTable.portfolio-details-hidden th:nth-child(7){width:11%!important;}
  #fundTable.portfolio-details-hidden th:nth-child(8){width:25%!important;}
  #fundTable.portfolio-details-hidden th:nth-child(9){width:14%!important;}

  #fundTable.portfolio-details-hidden th:nth-child(1),
  #fundTable.portfolio-details-hidden th:nth-child(2),
  #fundTable.portfolio-details-hidden th:nth-child(7),
  #fundTable.portfolio-details-hidden th:nth-child(8),
  #fundTable.portfolio-details-hidden th:nth-child(9),
  #fundTable.portfolio-details-hidden td:nth-child(1),
  #fundTable.portfolio-details-hidden td:nth-child(2),
  #fundTable.portfolio-details-hidden td:nth-child(7),
  #fundTable.portfolio-details-hidden td:nth-child(8),
  #fundTable.portfolio-details-hidden td:nth-child(9){
    display:table-cell!important;
  }

  #fundTable.portfolio-details-hidden th,
  #fundTable.portfolio-details-hidden td{
    min-width:0!important;
  }

  #fundTable.portfolio-details-hidden td.fundname input,
  #fundTable.portfolio-details-hidden td.fundname select{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }

  #fundTable.portfolio-details-hidden th:nth-child(7),
  #fundTable.portfolio-details-hidden td:nth-child(7){
    text-align:center!important;
  }

  #fundTable.portfolio-details-hidden td[data-label="Allocation %"] > .allocation-control{
    width:190px!important;
    min-width:190px!important;
    max-width:190px!important;
    margin:0 auto!important;
    display:grid!important;
    grid-template-columns:minmax(86px,1fr) 72px!important;
    align-items:center!important;
    gap:12px!important;
  }
  #fundTable.portfolio-details-hidden .allocation-control .alloc-slider{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
  }
  #fundTable.portfolio-details-hidden .allocation-control .alloc-input{
    width:72px!important;
    min-width:72px!important;
    max-width:72px!important;
  }

  /* Expanded detail view is fixed too, but keeps all nine columns. */
  #fundTable:not(.portfolio-details-hidden){
    table-layout:fixed!important;
  }
  #fundTable:not(.portfolio-details-hidden) th:nth-child(1){width:8%!important;}
  #fundTable:not(.portfolio-details-hidden) th:nth-child(2){width:22%!important;}
  #fundTable:not(.portfolio-details-hidden) th:nth-child(3){width:8%!important;}
  #fundTable:not(.portfolio-details-hidden) th:nth-child(4){width:9%!important;}
  #fundTable:not(.portfolio-details-hidden) th:nth-child(5){width:9%!important;}
  #fundTable:not(.portfolio-details-hidden) th:nth-child(6){width:8%!important;}
  #fundTable:not(.portfolio-details-hidden) th:nth-child(7){width:8%!important;}
  #fundTable:not(.portfolio-details-hidden) th:nth-child(8){width:18%!important;}
  #fundTable:not(.portfolio-details-hidden) th:nth-child(9){width:10%!important;}

  #fundTable:not(.portfolio-details-hidden) td[data-label="Allocation %"] > .allocation-control{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(62px,1fr) 62px!important;
    gap:8px!important;
  }
}

@media (min-width:681px) and (max-width:1000px){
  #fundTable.portfolio-details-hidden{
    width:100%!important;
    min-width:0!important;
    table-layout:fixed!important;
  }
  #fundTable.portfolio-details-hidden th:nth-child(1){width:12%!important;}
  #fundTable.portfolio-details-hidden th:nth-child(2){width:36%!important;}
  #fundTable.portfolio-details-hidden th:nth-child(7){width:12%!important;}
  #fundTable.portfolio-details-hidden th:nth-child(8){width:25%!important;}
  #fundTable.portfolio-details-hidden th:nth-child(9){width:15%!important;}
  #fundTableContainer{overflow-x:hidden!important;}
  #fundTable:not(.portfolio-details-hidden){min-width:940px!important;}
  #fundTableContainer:has(#fundTable:not(.portfolio-details-hidden)){overflow-x:auto!important;}
}

/* ---- section: portfolio-desktop-allocation-v75 ---- */
/* Pass 7.5 — bring the finger-friendly mobile allocation control to desktop,
   reduce Score visual weight, and reclaim width from Fund / Category. */

@media (min-width:1001px){
  /* Rebalance simplified desktop columns to favor allocation editing. */
  #fundTable.portfolio-details-hidden th:nth-child(1){width:10%!important;}
  #fundTable.portfolio-details-hidden th:nth-child(2){width:34%!important;}
  #fundTable.portfolio-details-hidden th:nth-child(7){width:8%!important;}
  #fundTable.portfolio-details-hidden th:nth-child(8){width:34%!important;}
  #fundTable.portfolio-details-hidden th:nth-child(9){width:14%!important;}

  /* Fund/category no longer dominates the row. */
  #fundTable.portfolio-details-hidden td.fundname{
    padding-right:12px!important;
  }
  #fundTable.portfolio-details-hidden td.fundname select{
    max-width:520px!important;
  }

  /* Smaller score indicator. */
  #fundTable.portfolio-details-hidden .score-pill{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    font-size:14px!important;
    border-width:2px!important;
    padding:0!important;
    box-shadow:none!important;
  }

  /* Show the precision controls on desktop too. */
  #fundTable.portfolio-details-hidden .mobile-alloc-stepper{
    display:inline-flex!important;
    width:48px!important;
    height:48px!important;
    border-radius:13px!important;
    font-size:25px!important;
  }

  #fundTable.portfolio-details-hidden td[data-label="Allocation %"] > .allocation-control{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:48px minmax(180px,1fr) 48px 84px!important;
    align-items:center!important;
    gap:12px!important;
  }

  /* Desktop range adopts the same polished geometry as mobile. */
  #fundTable.portfolio-details-hidden .alloc-slider{
    -webkit-appearance:none!important;
    appearance:none!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    height:48px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
  }

  #fundTable.portfolio-details-hidden .alloc-slider::-webkit-slider-runnable-track{
    height:8px!important;
    border-radius:999px!important;
    background:var(--c-gray-90)!important;
  }
  #fundTable.portfolio-details-hidden .alloc-slider::-webkit-slider-thumb{
    -webkit-appearance:none!important;
    appearance:none!important;
    width:32px!important;
    height:32px!important;
    border-radius:50%!important;
    margin-top:-12px!important;
    background:currentColor!important;
    border:3px solid var(--c-gray-99)!important;
    box-shadow:0 2px 6px rgba(var(--c-shadow-rgb), 0.24),0 0 0 1px rgba(var(--c-shadow-rgb), 0.08)!important;
  }
  #fundTable.portfolio-details-hidden .alloc-slider::-moz-range-track{
    height:8px!important;
    border-radius:999px!important;
    background:var(--c-gray-90)!important;
  }
  #fundTable.portfolio-details-hidden .alloc-slider::-moz-range-thumb{
    width:32px!important;
    height:32px!important;
    border-radius:50%!important;
    background:currentColor!important;
    border:3px solid var(--c-gray-99)!important;
    box-shadow:0 2px 6px rgba(var(--c-shadow-rgb), 0.24),0 0 0 1px rgba(var(--c-shadow-rgb), 0.08)!important;
  }

  #fundTable.portfolio-details-hidden .alloc-input[data-t]{
    width:84px!important;
    min-width:84px!important;
    max-width:84px!important;
    height:50px!important;
    font-size:18px!important;
    text-align:center!important;
    border-radius:12px!important;
  }

  /* Keep Remove compact and visually secondary. */
  #fundTable.portfolio-details-hidden td[data-label="Remove"]{
    text-align:center!important;
  }
}

/* Slightly smaller score in expanded detail view too. */
@media (min-width:681px){
  #fundTable:not(.portfolio-details-hidden) .score-pill{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    font-size:12px!important;
    padding:0!important;
  }
}

/* ---- section: desktop-allocation-buttons-v76 ---- */
/* Pass 7.6 — compact desktop +/- controls while preserving large mobile targets. */
@media (min-width:1001px){
  #fundTable.portfolio-details-hidden .mobile-alloc-stepper{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    border-radius:9px!important;
    border:1px solid var(--c-slate-85)!important;
    font-size:21px!important;
    font-weight:700!important;
    box-shadow:0 1px 3px rgba(var(--c-shadow-rgb), 0.08)!important;
  }

  #fundTable.portfolio-details-hidden td[data-label="Allocation %"] > .allocation-control{
    grid-template-columns:36px minmax(190px,1fr) 36px 78px!important;
    gap:10px!important;
  }

  #fundTable.portfolio-details-hidden .alloc-input[data-t]{
    width:78px!important;
    min-width:78px!important;
    max-width:78px!important;
    height:44px!important;
    font-size:17px!important;
    border-radius:10px!important;
  }
}

/* ---- section: rn-blue-form-style-test ---- */
/* ===== Blue form style experiment =====
   Presentation only: this changes no inputs, calculations, event handlers, or results. */

/* Main labels and section headings */

/* Secondary/helper copy */

/* Keep entry fields light, high-contrast and familiar */

/* Toggle controls: blue glass when off, light-blue selected state */

/* Nested cards / subpanels inside the big form use a subtle glass surface */

/* Expanded helper boxes should not flash white against the dark form */

/* Preserve warning/status semantics */

@media(max-width:700px){
    }

/* Printing remains clean/white */
@media print{
    }

/* ---- section: rn-blue-form-contrast-refinement ---- */
/* Contrast refinement for the blue setup card.
   Keep results/data surfaces light; make every setup label/helper readable. */

/* Anything inheriting muted colors inside the blue card gets an explicit light value. */

/* Labels need stronger contrast than helper copy. */

/* Small explanatory text remains secondary but clearly readable. */

/* Links and dotted-help affordances become brighter cyan/ice blue. */

/* Strong status text */

/* Toggle controls */

/* Nested panel/card text: do not let old dark inline colors leak through. */

/* Inputs remain very high contrast. */

/* Special helper box */

/* Section dividers/icons */

/* Buttons that live inside the blue setup surface */

/* Keep the overall app balanced: analysis/results remain white, but gain a subtle blue top accent. */
#resultsPanel > .panel,
#historicalBacktestPanel,
#sequenceRiskPanel,
#diagnosticPanel,
#projectionPanel{
  position:relative;
}
#resultsPanel > .panel::before,
#historicalBacktestPanel::before,
#sequenceRiskPanel::before,
#diagnosticPanel::before,
#projectionPanel::before{
  content:'';
  position:absolute;
  left:18px;right:18px;top:0;
  height:3px;
  border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,var(--c-blue-35),var(--c-blue-60b));
  opacity:.78;
  pointer-events:none;
}

@media(max-width:700px){
    }

/* ---- section: rn-mobile-usability-pass ---- */
/* ===== Mobile usability / screen optimization pass =====
   Presentation only. No financial calculation logic is changed. */

@media(max-width:700px){

  /* 1. Navigation: show all three primary destinations at once.
     Previously Help & User Guide sat partly off-screen and required horizontal discovery. */
  .global-nav{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:7px !important;
    overflow:visible !important;
    padding:9px 10px !important;
    margin-left:-12px !important;
    margin-right:-12px !important;
  }
  .global-tab{
    min-width:0 !important;
    width:100% !important;
    min-height:50px !important;
    height:auto !important;
    padding:7px 6px !important;
    font-size:12px !important;
    line-height:1.15 !important;
    white-space:normal !important;
    text-align:center !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
  }
  .global-tab svg{
    width:14px !important;
    height:14px !important;
    flex:0 0 auto;
  }

  /* 2. Minimum comfortable tap target.
     Apple's common touch-target guidance is about 44 CSS px. */
  button,
  .toggle-btn,
  .preset-btn,
  .view-tab,
  .qs-secondary-btn,
  .qs-open-full-btn,
  .expand-btn{
    min-height:44px;
  }
  .hero .preset-btn{
    min-height:46px !important;
  }

  /* 3. Readability: raise the smallest interactive/helper text on phones.
     Inputs already use 16px to prevent Safari focus zoom. */
  .field label{
    font-size:11.5px !important;
    line-height:1.3 !important;
  }
    .hero-capabilities span{font-size:11.5px !important;}
    .footnote,
  #financialAccuracyNote{
    font-size:12px !important;
    line-height:1.6 !important;
  }
  #autosaveIndicator,
  #clearSavedDataBtn,
  #startFreshBtn{
    font-size:12px !important;
  }

  /* 4. Give mobile form sections more breathing room and prevent cramped headings. */
  .section-title{
    gap:10px !important;
    margin-top:32px !important;
  }
  .section-title h2{
    line-height:1.18 !important;
  }
  .inputs-grid,
  .grid2,
  .grid3{
    gap:16px !important;
  }

  /* 5. Export/report actions wrap cleanly instead of forming a long desktop row. */
  .hero .presets,
  .hero [style*="display:flex"][style*="flex-wrap:wrap"]{
    row-gap:9px;
  }
  .hero .preset-btn{
    flex:1 1 155px;
  }

  /* 6. Tooltips are pointer-hover UI. On touch-first devices they can become sticky
     overlays after a tap. Hide the floating bubble; the interface remains usable
     without requiring hover to understand core controls. */
  #tooltipBubble{
    display:none !important;
  }

  /* Keep mobile table/cards pinned to the viewport width. */
  #fundTableContainer,
  #projTableContainer,
  #histTableContainer,
  #portfoliosTable,
  #diagnosticPanel{
    max-width:100% !important;
  }
}

/* Use the tooltip normally on devices that actually support hover. */
@media(hover:hover) and (pointer:fine){
  #tooltipBubble{display:block;}
}

/* ---- section: rn-touch-target-final-pass ---- */
/* Final touch-target cleanup for phones + tablets. */
@media(max-width:900px){
  button,
  .global-tab,
  .toggle-btn,
  .preset-btn,
  .view-tab,
  .qs-secondary-btn,
  .qs-open-full-btn,
  .expand-btn,
  #swrTargetSuccess{
    min-height:44px !important;
  }
  #swrTargetSuccess{
    min-width:68px;
    padding:8px 10px !important;
  }
}

/* ---- section: rn-mobile-coarse-pointer-final ---- */
/* Touch-device finalization, including landscape phones and iPad. */
@media(max-width:900px){
  .hero .preset-btn{
    min-height:44px !important;
  }
}
@media(pointer:coarse){
  #tooltipBubble{
    display:none !important;
  }
  button,
  .global-tab,
  .toggle-btn,
  .preset-btn,
  .view-tab,
  .qs-secondary-btn,
  .qs-open-full-btn,
  .expand-btn,
  #swrTargetSuccess{
    min-height:44px !important;
  }
}

/* ---- section: rn-blue-contrast-cleanup-final ---- */
/* Final contrast cleanup: light surfaces get dark text; dark surfaces keep light text. */

/* The year/tax-data status banner is a pale card, so it must NOT inherit pale blue text. */

/* Bracket Breakdown is intentionally a light card inside the blue form. */

/* Other explicitly light helper surfaces inside the dark setup panel. */

/* Keep methodology copy out of the form; calculation behavior is unchanged. */

/* On phones, make the status and bracket cards especially easy to scan. */
@media(max-width:700px){
      }

/* ---- section: rn-primary-monte-carlo-cta ---- */
/* ===== Primary Monte Carlo CTA =====
   Visual/interaction upgrade only; onclick behavior remains runSimulation(). */

button[onclick="runSimulation()"]{
  position:relative;
  width:100%;
  min-height:88px !important;
  margin-top:20px !important;
  padding:16px 22px !important;
  border:1px solid rgba(var(--c-blue-70c-rgb), 0.42) !important;
  border-radius:18px !important;
  background:
    radial-gradient(circle at 82% 20%,rgba(var(--c-blue-70c-rgb), 0.24),transparent 32%),
    linear-gradient(135deg,var(--c-blue-30) 0%,var(--c-blue-45c) 52%,var(--c-blue-50d) 100%) !important;
  color:var(--c-gray-99) !important;
  box-shadow:
    0 14px 30px rgba(var(--c-shadow-rgb), 0.24),
    inset 0 1px 0 rgba(var(--c-gray-99-rgb), 0.18) !important;
  display:grid !important;
  grid-template-columns:54px 1fr 34px;
  align-items:center;
  gap:14px;
  text-align:left !important;
  overflow:hidden;
  cursor:pointer;
  transform:translateY(0);
  transition:
    transform .16s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    filter .18s ease !important;
}

button[onclick="runSimulation()"]::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 20%,rgba(var(--c-gray-99-rgb), 0.1) 48%,transparent 74%);
  transform:translateX(-130%);
  transition:transform .55s ease;
  pointer-events:none;
}
button[onclick="runSimulation()"]:hover{
  background:
    radial-gradient(circle at 82% 20%,rgba(var(--c-blue-70b-rgb), 0.3),transparent 33%),
    linear-gradient(135deg,var(--c-blue-35b) 0%,var(--c-blue-50c) 50%,var(--c-blue-55c) 100%) !important;
  border-color:rgba(var(--c-blue-80-rgb), 0.7) !important;
  box-shadow:
    0 18px 36px rgba(var(--c-shadow-rgb), 0.3),
    0 0 0 4px rgba(var(--c-blue-60d-rgb), 0.1),
    inset 0 1px 0 rgba(var(--c-gray-99-rgb), 0.22) !important;
  transform:translateY(-2px) !important;
  filter:none !important;
}
button[onclick="runSimulation()"]:hover::before{
  transform:translateX(130%);
}
button[onclick="runSimulation()"]:active{
  transform:translateY(0) scale(.995) !important;
  box-shadow:
    0 8px 18px rgba(var(--c-shadow-rgb), 0.24),
    inset 0 2px 7px rgba(var(--c-shadow-rgb), 0.28) !important;
}
button[onclick="runSimulation()"]:focus-visible{
  outline:none !important;
  box-shadow:
    0 16px 34px rgba(var(--c-shadow-rgb), 0.28),
    0 0 0 4px rgba(var(--c-blue-75b-rgb), 0.38) !important;
}
button[onclick="runSimulation()"]:disabled{
  background:linear-gradient(135deg,var(--c-slate-60b),var(--c-slate-60b)) !important;
  border-color:rgba(var(--c-gray-99-rgb), 0.1) !important;
  box-shadow:none !important;
  opacity:.68 !important;
  transform:none !important;
  cursor:not-allowed;
}

button[onclick="runSimulation()"] .mc-cta-icon{
  width:52px;
  height:52px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(var(--c-gray-99-rgb), 0.1);
  border:1px solid rgba(var(--c-gray-99-rgb), 0.16);
  box-shadow:inset 0 1px 0 rgba(var(--c-gray-99-rgb), 0.1);
}
button[onclick="runSimulation()"] .mc-cta-icon svg{
  width:27px;
  height:27px;
}
button[onclick="runSimulation()"] .mc-cta-copy{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
button[onclick="runSimulation()"] .mc-cta-title{
  font-family:'Compass Display',sans-serif;
  font-size:20px;
  line-height:1.15;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--c-gray-99);
}
button[onclick="runSimulation()"] .mc-cta-subtitle{
  font-size:12.5px;
  line-height:1.25;
  font-weight:500;
  color:rgba(var(--c-gray-95-rgb), 0.82);
  letter-spacing:.01em;
}

/* Neutralize the old gold CTA rule for this single primary action. */
button[onclick="runSimulation()"].runbtn-gold{
  background:
    radial-gradient(circle at 82% 20%,rgba(var(--c-blue-70c-rgb), 0.24),transparent 32%),
    linear-gradient(135deg,var(--c-blue-30) 0%,var(--c-blue-45c) 52%,var(--c-blue-50d) 100%) !important;
}

@media(max-width:700px){
  button[onclick="runSimulation()"]{
    min-height:82px !important;
    grid-template-columns:46px 1fr 28px;
    gap:11px;
    padding:14px 16px !important;
    border-radius:16px !important;
  }
  button[onclick="runSimulation()"] .mc-cta-icon{
    width:44px;height:44px;border-radius:12px;
  }
  button[onclick="runSimulation()"] .mc-cta-icon svg{
    width:24px;height:24px;
  }
  button[onclick="runSimulation()"] .mc-cta-title{
    font-size:18px;
  }
  button[onclick="runSimulation()"] .mc-cta-subtitle{
    font-size:12px;
  }
  }

@media(max-width:390px){
  button[onclick="runSimulation()"]{
    grid-template-columns:42px 1fr;
  }
  }

@media print{
  button[onclick="runSimulation()"]{display:none !important;}
}

/* ---- section: rn-primary-monte-carlo-gold-palette ---- */
/* Preserve the redesigned CTA; restore a premium gold/amber hierarchy so the
   primary simulation action stands apart from the surrounding blue surface. */
button[onclick="runSimulation()"],
button[onclick="runSimulation()"].runbtn-gold{
  background:
    radial-gradient(circle at 82% 18%,rgba(var(--c-amber-90b-rgb), 0.25),transparent 31%),
    linear-gradient(135deg,var(--c-orange-60) 0%,var(--c-amber-70) 48%,var(--c-amber-75) 100%) !important;
  border-color:rgba(var(--c-amber-90b-rgb), 0.72) !important;
  box-shadow:
    0 14px 30px rgba(var(--c-shadow-rgb), 0.28),
    inset 0 1px 0 rgba(var(--c-sand-95b-rgb), 0.42) !important;
  color:var(--c-gray-99) !important;
}
button[onclick="runSimulation()"] .mc-cta-icon{
  background:rgba(var(--c-orange-30-rgb), 0.16) !important;
  border-color:rgba(var(--c-sand-95b-rgb), 0.28) !important;
  color:var(--c-gray-99) !important;
}
button[onclick="runSimulation()"] .mc-cta-title{
  color:var(--c-gray-99) !important;
  text-shadow:0 1px 1px rgba(var(--c-shadow-rgb), 0.2);
}
button[onclick="runSimulation()"] .mc-cta-subtitle{
  color:rgba(var(--c-sand-99-rgb), 0.91) !important;
}
button[onclick="runSimulation()"]:hover{
  background:
    radial-gradient(circle at 82% 18%,rgba(var(--c-amber-95-rgb), 0.3),transparent 32%),
    linear-gradient(135deg,var(--c-orange-60) 0%,var(--c-amber-75) 48%,var(--c-amber-80) 100%) !important;
  border-color:rgba(var(--c-amber-95-rgb), 0.92) !important;
  box-shadow:
    0 18px 36px rgba(var(--c-shadow-rgb), 0.32),
    0 0 0 4px rgba(var(--c-amber-80-rgb), 0.13),
    inset 0 1px 0 rgba(var(--c-sand-99b-rgb), 0.48) !important;
  transform:translateY(-2px) !important;
  filter:none !important;
}
button[onclick="runSimulation()"]:active{
  background:linear-gradient(135deg,var(--c-orange-50) 0%,var(--c-amber-65) 50%,var(--c-amber-75) 100%) !important;
  box-shadow:
    0 8px 18px rgba(var(--c-shadow-rgb), 0.28),
    inset 0 2px 8px rgba(var(--c-shadow-rgb), 0.22) !important;
}
button[onclick="runSimulation()"]:focus-visible{
  outline:none !important;
  box-shadow:
    0 16px 34px rgba(var(--c-shadow-rgb), 0.3),
    0 0 0 4px rgba(var(--c-amber-90b-rgb), 0.38) !important;
}

/* ---- section: rn-uniform-form-field-alignment ---- */
/* ===== Uniform form field alignment =====
   Keeps all labels in a row the same visual height so inputs line up cleanly. */

/* Desktop/tablet: reserve a consistent label block for every field.
   Two-line labels fit naturally; one-line labels still align to the same baseline. */
@media(min-width:701px){

  /* Inputs/selects start at the same vertical position within each grid row. */
  }

/* The spouse block includes fields directly beneath a section title;
   use the same rhythm there as the main retirement inputs. */

/* Keep helper text below an input from changing alignment of neighboring fields. */

/* Mobile stacks vertically, so label reservation isn't useful there. */
@media(max-width:700px){
  }

/* ---- section: rn-quick-start-matching-primary-cta ---- */
/* Quick Start uses the same primary-action design language as Advanced.
   Same premium gold palette, icon, hierarchy, hover and press behavior. */

@media(max-width:700px){
          }
@media(max-width:390px){
    }

/* ---- section: rn-quick-start-visual-slider ---- */
/* ===== Quick Start visual risk slider ===== */
/* Bold split-color rail using the current slider value as --qs-pct. */
#qsMixSlider{
-webkit-appearance:none !important;
  appearance:none !important;
  width:100% !important;
  height:28px !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,var(--c-blue-35b) 0%,var(--c-blue-35b) 46%,var(--c-amber-75) 54%,var(--c-amber-85b) 100%) !important;
  box-shadow:
    inset 0 1px 2px rgba(var(--c-shadow-rgb), 0.16),
    0 2px 7px rgba(var(--c-shadow-rgb), 0.07);
  cursor:pointer;
  outline:none;
}

/* WebKit */
#qsMixSlider::-webkit-slider-runnable-track{
  height:28px !important;
  background:transparent !important;
  border-radius:999px !important;
}
#qsMixSlider::-webkit-slider-thumb{
  -webkit-appearance:none !important;
  appearance:none !important;
  width:42px !important;
  height:42px !important;
  margin-top:-7px !important;
  border-radius:50% !important;
  background:
    radial-gradient(circle at 38% 32%,var(--c-amber-90b) 0 20%,var(--c-amber-75) 62%,var(--c-amber-60) 100%) !important;
  border:3px solid var(--c-sand-99) !important;
  box-shadow:
    0 4px 10px rgba(var(--c-shadow-rgb), 0.28),
    0 0 0 2px rgba(var(--c-amber-60-rgb), 0.55),
    inset 0 1px 2px rgba(var(--c-gray-99-rgb), 0.55) !important;
  cursor:grab !important;
}
#qsMixSlider:active::-webkit-slider-thumb{cursor:grabbing !important;}

/* Firefox */
#qsMixSlider::-moz-range-track{
  height:28px !important;
  background:transparent !important;
  border-radius:999px !important;
}
#qsMixSlider::-moz-range-progress{
  height:28px !important;
  background:var(--c-blue-35b) !important;
  border-radius:999px 0 0 999px !important;
}
#qsMixSlider::-moz-range-thumb{
  width:38px !important;
  height:38px !important;
  border-radius:50% !important;
  background:radial-gradient(circle at 38% 32%,var(--c-amber-90b) 0 20%,var(--c-amber-75) 62%,var(--c-amber-60) 100%) !important;
  border:3px solid var(--c-sand-99) !important;
  box-shadow:0 4px 10px rgba(var(--c-shadow-rgb), 0.28),0 0 0 2px rgba(var(--c-amber-60-rgb), 0.55) !important;
  cursor:grab !important;
}

@media(max-width:700px){
    #qsMixSlider{height:24px !important;}
  #qsMixSlider::-webkit-slider-runnable-track{height:24px !important;}
  #qsMixSlider::-webkit-slider-thumb{
    width:40px !important;height:40px !important;margin-top:-8px !important;
  }
    }

/* ---- section: rn-quick-start-slider-final-cleanup ---- */
/* Single-source Quick Start investment mix display.
   qsMixSliderLabel/Return are populated by QS_PRESETS, so the visible number always
   matches the actual preset used by the projection. */
#qsMixSliderLabel{
  display:block !important;
  text-align:center !important;
  font-family:'Compass Display',sans-serif !important;
  font-size:54px !important;
  line-height:1 !important;
  font-weight:600 !important;
  letter-spacing:-.055em !important;
  color:var(--c-blue-30) !important;
  margin:14px 0 5px !important;
}
#qsMixSliderReturn{
  display:block !important;
  text-align:center !important;
  font-size:14px !important;
  line-height:1.35 !important;
  font-weight:500 !important;
  color:var(--c-slate-55b) !important;
  margin-bottom:20px !important;
}

/* Fixed risk-direction track: blue = aggressive side, gold = conservative side.
   The thumb alone communicates the selected point; track color is not a percent fill. */
#qsMixSlider{
  background:linear-gradient(90deg,var(--c-blue-35b) 0%,var(--c-blue-35b) 46%,var(--c-amber-75) 54%,var(--c-amber-85b) 100%) !important;
}

/* Existing labels below are the only directional labels. */
#qsMixSlider + div{
  margin-top:12px !important;
}

@media(max-width:700px){
  #qsMixSliderLabel{
    font-size:46px !important;
    margin-top:10px !important;
  }
  #qsMixSliderReturn{
    font-size:13px !important;
    margin-bottom:18px !important;
  }
}

/* ---- section: rn-quick-start-slider-endpoint-labels ---- */
/* Explicit endpoints for the Quick Start stock/bond slider.
   Users should never need to infer what either end represents. */

/* Reinforce the endpoint meaning through the slider's two colors. */

@media(max-width:480px){
      }

@media(max-width:360px){
    }

/* ---- section: rn-quick-start-explicit-plan-horizon ---- */
/* Quick Start now exposes the simulation horizon instead of silently adding 25 years. */
@media(min-width:1000px){
  #qsStep1 .qs-inputs-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
}
@media(min-width:701px) and (max-width:999px){
  #qsStep1 .qs-inputs-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* ---- section: rn-quick-start-social-security-group ---- */
@media(min-width:1000px){
  }
@media(min-width:701px) and (max-width:999px){
  }
@media(max-width:700px){
          }

/* ---- section: rn-projection-columns-rebuilt ---- */
/* Rebuilt Year-by-Year column system.
   Core columns never hide. Tax/detail columns hide only by semantic class. */

/* Collapsed/simplified mode: ONLY semantic detail columns disappear. */

/* Core columns are always visible. */

/* In simplified desktop mode, use the full width across six core columns. */
@media(min-width:681px){

  #projTable.projection-details-hidden td[data-label="Social Security"]{
    display:table-cell !important;
    color:var(--c-blue-45) !important;
    font-weight:750 !important;
  }
}

/* Mobile cards: core items remain visible; detail rows stay behind the toggle. */
@media(max-width:680px){
    #projTable.projection-details-hidden td[data-label="Social Security"]{
    display:flex !important;
    color:var(--c-blue-45) !important;
    font-weight:750 !important;
  }
}

/* ---- section: rn-projection-separate-simple-table ---- */
/* Dedicated simplified Year-by-Year table.
   No column hiding is used here: it physically contains exactly six columns. */
@media(max-width:680px){
          }

/* ---- section: rn-projection-withdrawal-overflow-fix ---- */
/* Keep From Portfolio details contained inside their own column.
   The calculation note may be long, so allow wrapping rather than spilling
   into Money Available to Spend. */

/* The first line is the actual withdrawal amount; keep it prominent. */

/* Any nested methodology/detail text must stay inside the cell. */

/* Slightly rebalance the simplified desktop table so the calculation note
   has room without shrinking the spendable-income column too much. */
@media(min-width:681px){

  }

/* Mobile cards already stack vertically, but explicitly prevent long formulas
   from forcing horizontal scrolling. */
@media(max-width:680px){
  }

/* ---- section: rn-safe-spending-result-contrast-fix ---- */
/* Safe Spending result card sits on a light surface inside a dark-blue section.
   Force dark, high-contrast typography within the light card only. */

#swrResult{
  background:var(--c-gray-99) !important;
  border:1px solid var(--c-slate-90) !important;
  color:var(--c-blue-30) !important;
  box-shadow:0 8px 22px rgba(var(--c-shadow-rgb), 0.08) !important;
}

#swrResult,
#swrResult p,
#swrResult div,
#swrResult span,
#swrResult strong{
  color:var(--c-blue-30) !important;
}

#swrResult .muted,
#swrResult .sub,
#swrResult [style*="color:var(--muted"],
#swrResult [style*="color:var(--muted2"]{
  color:var(--c-slate-55b) !important;
}

#swrResult .v,
#swrResult [style*="font-size:34px"],
#swrResult [style*="font-size:36px"],
#swrResult [style*="font-size:40px"]{
  color:var(--c-blue-35) !important;
}

#swrResult a{
  color:var(--c-blue-45b) !important;
}

#swrResult hr{
  border-color:var(--c-gray-90) !important;
}

/* If the result title is rendered as inline pale-blue text, make it readable. */
#swrResult [style*="color:#"],
#swrResult [style*="color: #"]{
  text-shadow:none !important;
}

/* Keep emphasis lines readable but slightly softer than the percentage. */
#swrResult .result-explanation,
#swrResult .footnote{
  color:var(--c-slate-55b) !important;
  line-height:1.55 !important;
}

@media(max-width:700px){
  #swrResult{
    padding:18px !important;
  }
}

/* ---- section: rn-desktop-portfolio-controls-refined-v2 ---- */
/* Desktop portfolio refinement — ONLY when investment details are collapsed.
   Expanded "Show investment details" mode keeps the earlier clean layout. */
@media(min-width:1001px){

  /* Simplified view column balance */
  #fundTable.portfolio-details-hidden col:nth-child(1){width:10% !important;}
  #fundTable.portfolio-details-hidden col:nth-child(2){width:34% !important;}
  #fundTable.portfolio-details-hidden col:nth-child(7){width:10% !important;}
  #fundTable.portfolio-details-hidden col:nth-child(8){width:36% !important;}
  #fundTable.portfolio-details-hidden col:nth-child(9){width:10% !important;}

  /* Narrow Fund / Category only in simplified view */
  #fundTable.portfolio-details-hidden td[data-label="Fund / Category"]{
    padding-right:14px !important;
  }
  #fundTable.portfolio-details-hidden td[data-label="Fund / Category"] select,
  #fundTable.portfolio-details-hidden td[data-label="Fund / Category"] input{
    max-width:390px !important;
  }

  /* Smaller Portfolio Fit badge only in simplified view */
  #fundTable.portfolio-details-hidden td[data-label="Portfolio Fit"]{
    text-align:center !important;
  }
  #fundTable.portfolio-details-hidden td[data-label="Portfolio Fit"] .score-circle,
  #fundTable.portfolio-details-hidden td[data-label="Portfolio Fit"] .score-badge,
  #fundTable.portfolio-details-hidden td[data-label="Portfolio Fit"] > div{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    min-height:46px !important;
    max-width:46px !important;
    max-height:46px !important;
    font-size:16px !important;
    line-height:46px !important;
    margin:0 auto !important;
  }

  /* Simplified allocation editor */
  #fundTable.portfolio-details-hidden td[data-label="Allocation %"] > .allocation-control{
    display:grid !important;
    grid-template-columns:48px minmax(180px,1fr) 48px 86px !important;
    gap:12px !important;
    align-items:center !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }

  #fundTable.portfolio-details-hidden td[data-label="Allocation %"] button,
  #fundTable.portfolio-details-hidden td[data-label="Allocation %"] .alloc-step-btn,
  #fundTable.portfolio-details-hidden td[data-label="Allocation %"] .desktop-alloc-step{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    min-height:48px !important;
    padding:0 !important;
    margin:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    line-height:1 !important;
    font-size:26px !important;
    font-weight:700 !important;
    transform:none !important;
  }

  #fundTable.portfolio-details-hidden td[data-label="Allocation %"] button > span,
  #fundTable.portfolio-details-hidden td[data-label="Allocation %"] .alloc-step-btn > span{
    display:block !important;
    line-height:1 !important;
    transform:translateY(-1px);
  }

  #fundTable.portfolio-details-hidden td[data-label="Allocation %"] input[type="range"]{
    margin:0 !important;
    align-self:center !important;
  }

  #fundTable.portfolio-details-hidden td[data-label="Allocation %"] input[type="number"]{
    width:86px !important;
    min-width:86px !important;
    height:48px !important;
    text-align:center !important;
    padding:0 10px !important;
    margin:0 !important;
  }

  /* Expanded mode: explicitly restore the pre-refinement allocation geometry.
     No +/- buttons in the expanded details view; slider + number stay compact. */
  #fundTable:not(.portfolio-details-hidden) td[data-label="Allocation %"] .mobile-alloc-stepper,
  #fundTable:not(.portfolio-details-hidden) td[data-label="Allocation %"] .desktop-alloc-step,
  #fundTable:not(.portfolio-details-hidden) td[data-label="Allocation %"] .alloc-step-btn{
    display:none !important;
  }

  #fundTable:not(.portfolio-details-hidden) td[data-label="Allocation %"] > .allocation-control{
    width:180px !important;
    min-width:180px !important;
    max-width:180px !important;
    margin-left:auto !important;
    display:grid !important;
    grid-template-columns:minmax(70px,1fr) 62px !important;
    gap:10px !important;
    align-items:center !important;
    justify-content:end !important;
  }

  #fundTable:not(.portfolio-details-hidden) td[data-label="Allocation %"] input[type="range"]{
    width:100% !important;
    margin:0 !important;
  }

  #fundTable:not(.portfolio-details-hidden) td[data-label="Allocation %"] input[type="number"]{
    width:62px !important;
    min-width:62px !important;
    height:38px !important;
    margin:0 !important;
    padding:0 8px !important;
    text-align:center !important;
  }

  /* Expanded detail columns return to their natural sizing and original score footprint. */
  #fundTable:not(.portfolio-details-hidden) td[data-label="Fund / Category"] select,
  #fundTable:not(.portfolio-details-hidden) td[data-label="Fund / Category"] input{
    max-width:none !important;
  }
}

/* ---- section: rn-normal-portfolio-layout-final-fix ---- */
/* FINAL desktop fix for the NORMAL / collapsed portfolio view only.
   Keep expanded "Show investment details" mode untouched. */
@media(min-width:1001px){

  /* Use a stable 5-column layout in simplified mode:
     Ticker | Fund/Category | Portfolio Fit | Allocation | Remove */
  #fundTable.portfolio-details-hidden{
    table-layout:fixed !important;
    width:100% !important;
  }

  #fundTable.portfolio-details-hidden col:nth-child(1){width:10% !important;}
  #fundTable.portfolio-details-hidden col:nth-child(2){width:34% !important;}
  #fundTable.portfolio-details-hidden col:nth-child(7){width:11% !important;}
  #fundTable.portfolio-details-hidden col:nth-child(8){width:35% !important;}
  #fundTable.portfolio-details-hidden col:nth-child(9){width:10% !important;}

  /* Portfolio Fit stays centered in its own column and cannot overlap allocation. */
  #fundTable.portfolio-details-hidden th:nth-child(7),
  #fundTable.portfolio-details-hidden td[data-label="Portfolio Fit"]{
    text-align:center !important;
    padding-left:8px !important;
    padding-right:8px !important;
    overflow:visible !important;
  }

  #fundTable.portfolio-details-hidden td[data-label="Portfolio Fit"] .score-circle,
  #fundTable.portfolio-details-hidden td[data-label="Portfolio Fit"] .score-badge,
  #fundTable.portfolio-details-hidden td[data-label="Portfolio Fit"] > div{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    max-width:44px !important;
    max-height:44px !important;
    font-size:15px !important;
    line-height:44px !important;
    margin:0 auto !important;
    position:relative !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
  }

  /* Allocation gets a clean internal grid with no overlap into Portfolio Fit. */
  #fundTable.portfolio-details-hidden td[data-label="Allocation %"]{
    padding-left:14px !important;
    padding-right:12px !important;
    overflow:visible !important;
  }

  #fundTable.portfolio-details-hidden td[data-label="Allocation %"] > .allocation-control{
    display:grid !important;
    grid-template-columns:44px minmax(150px,1fr) 44px 82px !important;
    gap:10px !important;
    align-items:center !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
  }

  /* Properly centered +/- controls */
  #fundTable.portfolio-details-hidden td[data-label="Allocation %"] button,
  #fundTable.portfolio-details-hidden td[data-label="Allocation %"] .alloc-step-btn,
  #fundTable.portfolio-details-hidden td[data-label="Allocation %"] .desktop-alloc-step{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    padding:0 !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    line-height:1 !important;
    font-size:25px !important;
    font-weight:700 !important;
    box-sizing:border-box !important;
    position:static !important;
    transform:none !important;
  }

  #fundTable.portfolio-details-hidden td[data-label="Allocation %"] button > span,
  #fundTable.portfolio-details-hidden td[data-label="Allocation %"] .alloc-step-btn > span{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    height:100% !important;
    line-height:1 !important;
    transform:none !important;
  }

  #fundTable.portfolio-details-hidden td[data-label="Allocation %"] input[type="range"]{
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    align-self:center !important;
  }

  #fundTable.portfolio-details-hidden td[data-label="Allocation %"] input[type="number"]{
    width:82px !important;
    min-width:82px !important;
    max-width:82px !important;
    height:44px !important;
    margin:0 !important;
    padding:0 8px !important;
    text-align:center !important;
    box-sizing:border-box !important;
  }

  /* Keep Fund / Category narrower without forcing the rest of the row. */
  #fundTable.portfolio-details-hidden td[data-label="Fund / Category"] select,
  #fundTable.portfolio-details-hidden td[data-label="Fund / Category"] input{
    width:100% !important;
    max-width:360px !important;
  }

  /* Remove button remains isolated in final column. */
  #fundTable.portfolio-details-hidden td[data-label="Remove"]{
    text-align:center !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }
}

/* ---- section: rn-portfolio-fit-smaller-more-allocation-room ---- */
@media(min-width:1001px){
  /* Normal/collapsed portfolio only: shrink Portfolio Fit to free room for allocation values. */
  #fundTable.portfolio-details-hidden col:nth-child(7){width:8% !important;}
  #fundTable.portfolio-details-hidden col:nth-child(8){width:38% !important;}

  #fundTable.portfolio-details-hidden td[data-label="Portfolio Fit"] .score-circle,
  #fundTable.portfolio-details-hidden td[data-label="Portfolio Fit"] .score-badge,
  #fundTable.portfolio-details-hidden td[data-label="Portfolio Fit"] > div{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
    max-width:36px !important;
    max-height:36px !important;
    font-size:13px !important;
    line-height:36px !important;
  }

  /* Use the recovered width for the allocation number box. */
  #fundTable.portfolio-details-hidden td[data-label="Allocation %"] > .allocation-control{
    grid-template-columns:44px minmax(160px,1fr) 44px 96px !important;
  }

  #fundTable.portfolio-details-hidden td[data-label="Allocation %"] input[type="number"]{
    width:96px !important;
    min-width:96px !important;
    max-width:96px !important;
    padding:0 12px !important;
    overflow:visible !important;
  }
}

/* ---- section: rn-portfolio-fit-spacing-fix ---- */
@media(min-width:1001px){
  /* Collapsed portfolio only: create a visible gutter between Portfolio Fit and minus. */
  #fundTable.portfolio-details-hidden col:nth-child(7){width:9% !important;}
  #fundTable.portfolio-details-hidden col:nth-child(8){width:37% !important;}

  #fundTable.portfolio-details-hidden td[data-label="Portfolio Fit"]{
    padding-right:16px !important;
  }

  #fundTable.portfolio-details-hidden td[data-label="Allocation %"]{
    padding-left:18px !important;
  }

  /* Keep the score compact. */
  #fundTable.portfolio-details-hidden td[data-label="Portfolio Fit"] .score-circle,
  #fundTable.portfolio-details-hidden td[data-label="Portfolio Fit"] .score-badge,
  #fundTable.portfolio-details-hidden td[data-label="Portfolio Fit"] > div{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
    max-width:34px !important;
    max-height:34px !important;
    font-size:12px !important;
    line-height:34px !important;
  }

  /* Preserve enough room for complete allocation values. */
  #fundTable.portfolio-details-hidden td[data-label="Allocation %"] > .allocation-control{
    grid-template-columns:42px minmax(150px,1fr) 42px 96px !important;
    gap:10px !important;
  }

  #fundTable.portfolio-details-hidden td[data-label="Allocation %"] button,
  #fundTable.portfolio-details-hidden td[data-label="Allocation %"] .alloc-step-btn,
  #fundTable.portfolio-details-hidden td[data-label="Allocation %"] .desktop-alloc-step{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
  }
}

/* ---- section: rn-active-choice-green ---- */
/* Active yes/no and segmented-choice buttons:
   use the same strong green/white treatment as Import Plan. */
:root{
  --rn-active-green:var(--c-green-60);
  --rn-active-green-hover:var(--c-green-55);
}

/* Native active-state classes used throughout the planner */
.toggle-btn.active,
.toggle-button.active,
.segment-btn.active,
.segment-button.active,
.choice-btn.active,
.choice-button.active,
.option-btn.active,
.option-button.active,
.mode-btn.active,
.mode-button.active,
button.active[data-value],
button[aria-pressed="true"]:not(.scenario-tab):not(.tab-btn),
[role="button"][aria-pressed="true"]:not(.scenario-tab):not(.tab-btn){
  background:var(--rn-active-green) !important;
  background-image:none !important;
  color:var(--c-gray-99) !important;
  border-color:var(--rn-active-green) !important;
  box-shadow:0 5px 14px rgba(var(--c-shadow-rgb), 0.2) !important;
}

.toggle-btn.active:hover,
.toggle-button.active:hover,
.segment-btn.active:hover,
.segment-button.active:hover,
.choice-btn.active:hover,
.choice-button.active:hover,
.option-btn.active:hover,
.option-button.active:hover,
.mode-btn.active:hover,
.mode-button.active:hover,
button.active[data-value]:hover,
button[aria-pressed="true"]:not(.scenario-tab):not(.tab-btn):hover,
[role="button"][aria-pressed="true"]:not(.scenario-tab):not(.tab-btn):hover{
  background:var(--rn-active-green-hover) !important;
  border-color:var(--rn-active-green-hover) !important;
  color:var(--c-gray-99) !important;
}

/* Make nested labels/icons inherit white in active choices. */
.toggle-btn.active *,
.toggle-button.active *,
.segment-btn.active *,
.segment-button.active *,
.choice-btn.active *,
.choice-button.active *,
.option-btn.active *,
.option-button.active *,
.mode-btn.active *,
.mode-button.active *,
button.active[data-value] *,
button[aria-pressed="true"]:not(.scenario-tab):not(.tab-btn) *{
  color:var(--c-gray-99) !important;
  stroke:currentColor;
}

/* Keep focus visible for keyboard users. */
.toggle-btn.active:focus-visible,
.toggle-button.active:focus-visible,
.segment-btn.active:focus-visible,
.segment-button.active:focus-visible,
.choice-btn.active:focus-visible,
.choice-button.active:focus-visible,
.option-btn.active:focus-visible,
.option-button.active:focus-visible,
.mode-btn.active:focus-visible,
.mode-button.active:focus-visible,
button.active[data-value]:focus-visible,
button[aria-pressed="true"]:not(.scenario-tab):not(.tab-btn):focus-visible{
  outline:3px solid rgba(var(--c-gray-99-rgb), 0.88) !important;
  outline-offset:3px !important;
}

/* ---- section: rn-active-choice-green-persistent ---- */
/* Persistent selected-state treatment.
   This block is intentionally last so active controls stay green even when not hovered. */

.toggle-row .toggle-btn.active,
.toggle-row .toggle-button.active,
.toggle-group .toggle-btn.active,
.toggle-group .toggle-button.active,
.segmented-control .active,
.button-group .active,
.choice-group .active,
.option-group .active,
.mode-toggle .active,
.yes-no-toggle .active,
div.toggle-btn.active,
div.toggle-button.active,
button.toggle-btn.active,
button.toggle-button.active,
button.segment-btn.active,
button.choice-btn.active,
button.option-btn.active,
button.mode-btn.active,
button.active[aria-pressed="true"],
[role="button"].active[aria-pressed="true"]{
  background:var(--c-green-60) !important;
  background-color:var(--c-green-60) !important;
  background-image:none !important;
  color:var(--c-gray-99) !important;
  border-color:var(--c-green-60) !important;
  box-shadow:0 5px 14px rgba(var(--c-shadow-rgb), 0.2) !important;
  opacity:1 !important;
}

/* Force any nested text/icons to inherit white while selected. */
.toggle-row .toggle-btn.active *,
.toggle-row .toggle-button.active *,
.toggle-group .toggle-btn.active *,
.toggle-group .toggle-button.active *,
.segmented-control .active *,
.button-group .active *,
.choice-group .active *,
.option-group .active *,
.mode-toggle .active *,
.yes-no-toggle .active *,
div.toggle-btn.active *,
div.toggle-button.active *,
button.toggle-btn.active *,
button.toggle-button.active *,
button.segment-btn.active *,
button.choice-btn.active *,
button.option-btn.active *,
button.mode-btn.active *{
  color:var(--c-gray-99) !important;
  fill:currentColor !important;
  stroke:currentColor !important;
}

/* Hover only darkens the already-green selected state. */
.toggle-row .toggle-btn.active:hover,
.toggle-row .toggle-button.active:hover,
.toggle-group .toggle-btn.active:hover,
.toggle-group .toggle-button.active:hover,
.segmented-control .active:hover,
.button-group .active:hover,
.choice-group .active:hover,
.option-group .active:hover,
.mode-toggle .active:hover,
.yes-no-toggle .active:hover,
div.toggle-btn.active:hover,
div.toggle-button.active:hover,
button.toggle-btn.active:hover,
button.toggle-button.active:hover,
button.segment-btn.active:hover,
button.choice-btn.active:hover,
button.option-btn.active:hover,
button.mode-btn.active:hover,
button.active[aria-pressed="true"]:hover,
[role="button"].active[aria-pressed="true"]:hover{
  background:var(--c-green-55) !important;
  background-color:var(--c-green-55) !important;
  border-color:var(--c-green-55) !important;
  color:var(--c-gray-99) !important;
}

/* Some mobile browsers and in-app webviews apply their own automatic dark-mode color inversion
   to page elements that have no explicit background-color of their own — .panel already has one
   (#fff) and is correctly left alone, but .section-title/.section-desc/.senior-details sit between
   panels with no background set at all, so those specifically were getting inverted (dark
   background, washed-out text) even though this page already declares color-scheme:light and is
   never actually rendered in dark mode by its own CSS. Giving them the same explicit white as the
   panel they introduce closes that gap — an explicitly-styled element isn't a target for this kind
   of inversion the way an unstyled one is, regardless of which specific browser is doing it. */
.section-title,.section-desc,.senior-details{background:var(--c-gray-99)!important;padding:14px 18px!important;border-radius:var(--radius-md,10px);}
.section-title{padding-bottom:10px!important;border-top-left-radius:16px;border-top-right-radius:16px;}
.section-desc{margin-top:0!important;border-top:1px solid var(--border-soft,var(--c-gray-95));padding-top:12px!important;}
.senior-details{margin-top:0!important;}
.senior-details + .panel,.section-desc + .panel,.section-title + .panel{border-top-left-radius:0!important;border-top-right-radius:0!important;margin-top:0!important;}

/* CSS grid items default to min-width:auto, meaning they refuse to shrink below their content's
   own natural minimum size — normally invisible, but native date inputs (like Plan Date) render
   with their own built-in minimum width on iOS Safari specifically, wide enough that it can
   exceed a narrow phone-width grid column and push the input past the column, and sometimes past
   the edge of the screen itself, even though the input already has width:100% set. Overriding
   min-width back to 0 on the grid cell is the standard fix — it lets width:100% actually take
   over and constrain the input to its real available space instead of the input's own preferred
   native size. Belt-and-suspenders: also cap the date input itself at 100% width directly. */
.inputs-grid > .field{min-width:0;}
input[type="date"]{max-width:100%;}

/* ---- section: guided-walkthrough-feature ---- */
/* Added for the "Guide Me" interactive product tour (a manual, button-triggered spotlight walk
   through the page's main sections — see startGuidedWalkthrough() in the script). New rules only;
   appended at the very end per this file's own guidance above rather than inserted mid-file, and
   built entirely from the color/shadow/radius tokens already defined earlier in this file so it
   matches the tool's existing look instead of introducing a new visual language. */
#wtOverlay{position:fixed;inset:0;z-index:9997;pointer-events:none;}
#wtSpotlight{position:fixed;z-index:9998;border-radius:10px;box-shadow:0 0 0 9999px rgba(var(--c-shadow-rgb), 0.55);transition:top .25s ease,left .25s ease,width .25s ease,height .25s ease;pointer-events:none;}
#wtCard{position:fixed;z-index:9999;width:320px;max-width:calc(100vw - 32px);background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-md,14px);box-shadow:var(--shadow-lg,0 18px 50px rgba(var(--c-shadow-rgb), 0.12));padding:18px 20px;pointer-events:auto;font-family:'Compass Sans',sans-serif;}
#wtCard .wt-step-count{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:8px;}
#wtCard .wt-title{font-family:'Compass Display',sans-serif;font-weight:700;font-size:16px;color:var(--text);margin-bottom:8px;}
#wtCard .wt-body{font-size:13px;line-height:1.55;color:var(--muted);margin-bottom:16px;}
#wtCard .wt-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
#wtCard .wt-nav-btns{display:flex;gap:8px;}
#wtCard button.wt-btn{border:none;border-radius:8px;padding:8px 14px;font-weight:600;font-size:12.5px;cursor:pointer;font-family:'Compass Sans',sans-serif;}
#wtCard button.wt-btn-primary{background:var(--primary,var(--c-blue-55c));color:var(--c-gray-99);}
#wtCard button.wt-btn-primary:hover{background:var(--primary-hover,var(--c-blue-50d));}
#wtCard button.wt-btn-secondary{background:var(--panel2);color:var(--text);border:1px solid var(--border);}
#wtCard button.wt-btn-secondary:hover{background:var(--border);}
#wtCard .wt-skip{background:none;border:none;color:var(--muted);font-size:12px;text-decoration:underline;cursor:pointer;padding:8px 2px;}
#wtCard .wt-close{position:absolute;top:8px;right:10px;background:none;border:none;font-size:18px;line-height:1;color:var(--muted2);cursor:pointer;padding:4px;}
#wtCard .wt-close:hover{color:var(--text);}

/* ---- section: plan-summary-report-feature ---- */
/* Added for the "Plan Summary" report tab (see renderPlanSummaryReport() in the script). Mostly
   reuses existing classes (.hero, .section-title, .panel, .dash-banner, .rec-box, .diagnostic-btn,
   .fan-chart-canvas-wrap) as-is -- the rules below only cover print pagination for this new tab
   (so it exports to a clean, sensibly-paginated PDF) and hiding this tab's own interactive controls
   from the printed output, matching the same pattern the existing Analyzer print CSS already uses
   for its own buttons. New rules only; appended at the very end per this file's own guidance above. */
@media print{
  #summaryView .section-title{page-break-after:avoid;}
    #summaryView canvas{max-width:100%;}
  }
/* Quick estimate: "Not included yet" (2026-09-30). */
.qs-gaps-h{margin-top:12px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;}
.qs-gaps-h strong{color:var(--text);}
.qs-gaps-h span{font-size:12px;color:var(--muted);}
.qs-gaps{list-style:none;margin:8px 0 0;padding:0;}
.qs-gaps li{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--border-soft);}
.qs-gaps li>div{flex:1;min-width:0;}
.qs-gaps b{display:block;color:var(--text);font-size:13px;}
.qs-gaps li span{display:block;font-size:12px;line-height:1.45;color:var(--muted);}
.qs-gap-add{flex:none;min-width:64px;padding:7px 14px;border-radius:999px;border:1px solid var(--teal);background:var(--panel);color:var(--teal);font-weight:700;font-size:12.5px;cursor:pointer;}
.qs-gap-add:hover{background:var(--teal-dim);}
.qs-handoff-text [data-qs-gaps]{margin-top:4px;}
/* One app (2026-09-30): skip link on the quick questions; actions in the quick-estimate box. */
.qs-skip-link{display:inline-block;margin:6px 0 0;padding:0;border:0;background:none;color:var(--teal);font:inherit;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.qs-handoff-acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.qs-hide-btn{padding:8px 12px;border:0;background:none;color:var(--muted);font:inherit;font-size:12.5px;cursor:pointer;text-decoration:underline;}
/* Start screen H1 (2026-09-30, SEO): sized like the section titles it replaced. */
.section-title :is(h1,.pg-h1).qs-h1{margin:0;font-family:'Compass Display',sans-serif;font-size:22px!important;line-height:1.25;font-weight:700;letter-spacing:-.02em;color:var(--text);}
.qs-h1-sub{display:block;margin-top:4px;font-family:Compass Sans,sans-serif;font-size:13px;font-weight:400;letter-spacing:0;color:var(--muted);}
@media (max-width:600px){.section-title :is(h1,.pg-h1).qs-h1{font-size:20px!important;}}
/* Footer disclaimer, legal links and "Report a problem" (2026-09-30). */
.app-disclaimer{max-width:640px;margin:0 auto 8px;font-size:12px;line-height:1.5;color:var(--muted);}
.app-legal{display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;line-height:1.6;gap:4px 18px;margin:0 0 8px;font-size:12px;}
.app-legal a,.app-report-link{color:var(--teal);font:inherit;font-size:12px;text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:0;cursor:pointer;line-height:inherit;vertical-align:baseline;}
.report-dialog{width:min(560px,calc(100vw - 32px));border:1px solid var(--border-soft);border-radius:14px;padding:0;background:var(--panel);color:var(--text);}
.report-dialog::backdrop{background:rgba(var(--c-slate-20-rgb),.45);}
.report-form{padding:20px;display:flex;flex-direction:column;gap:8px;}
.report-form h2{margin:0;font-size:19px;}
.report-form p{margin:0;font-size:13px;line-height:1.5;color:var(--muted);}
.report-form label{font-size:13px;font-weight:700;margin-top:6px;}
.report-form textarea{width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:8px;padding:8px 10px;font:13px/1.45 Compass Sans,sans-serif;background:var(--panel2);color:var(--text);resize:vertical;}
.report-form #reportDetails{font-family:'Compass Sans',sans-serif;font-variant-numeric:tabular-nums;font-size:11.5px;}
.report-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;}
.report-acts button{padding:9px 16px;border-radius:999px;border:1px solid var(--teal);background:var(--teal);color:var(--c-gray-99);font-weight:700;cursor:pointer;}
.report-acts .report-close,.report-acts .report-clear,#reportEmail{background:var(--panel);color:var(--teal);}
/* Retirement details in labelled groups (2026-10-01). */
.rd-group{padding:0 0 18px;margin:0 0 18px;border-bottom:1px solid var(--border-soft);}
.rd-group:last-of-type{border-bottom:0;margin-bottom:0;}
.rd-group-h{margin:0 0 12px;}
.rd-group-h h3{margin:0;font-family:'Compass Display',sans-serif;font-size:16px;font-weight:700;color:var(--text);letter-spacing:-.01em;}
.rd-group-h p{margin:4px 0 0;max-width:760px;font-size:13px;line-height:1.5;color:var(--muted);}
.fld-opt{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--panel2);border:1px solid var(--border-soft);color:var(--muted);font-size:10.5px;font-weight:600;letter-spacing:.02em;text-transform:lowercase;vertical-align:1px;}
.rd-group-h h3 .fld-opt{vertical-align:2px;}
.rd-group .inputs-grid>.field>label{flex-wrap:wrap;justify-content:flex-start!important;align-content:flex-end;column-gap:0;}
.rd-group .inputs-grid>.field>label .fld-opt{margin-left:6px;}
.field>label:has(.fld-opt){flex-wrap:wrap;justify-content:flex-start!important;align-content:flex-end;}
.rd-live{margin:12px 0 0;max-width:760px;padding:9px 12px;border-left:3px solid var(--teal);border-radius:6px;background:var(--panel2);color:var(--text);font-size:13px;line-height:1.5;}
.rd-live[hidden]{display:none;}
#diagnosticTable.dg-4 th:first-child{width:50%;}
#diagnosticTable.dg-4 th:nth-child(2){width:15%;}
#diagnosticTable.dg-4 th:nth-child(3){width:11%;}
#diagnosticTable.dg-4 th:nth-child(4){width:24%;text-align:right!important;}
#diagnosticTable.dg-4 td:nth-child(4){text-align:right!important;font-family:'Compass Sans',sans-serif;font-variant-numeric:tabular-nums;font-variant-numeric:tabular-nums;white-space:nowrap;}
#diagnosticTable td:first-child{white-space:normal;overflow-wrap:anywhere;}
.gr-summary{margin:12px 0 4px;max-width:880px;font-size:14px;line-height:1.55;color:var(--text);}
.gr-summary p{margin:0 0 8px;}
.gr-years{margin-top:14px;}
.gr-years>summary{cursor:pointer;font-weight:700;font-size:14px;color:var(--text);padding:6px 0;}
#grYearsTable{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:6px;}
#grYearsTable th{text-align:left;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:6px 8px;border-bottom:1px solid var(--border-soft);}
#grYearsTable td{padding:6px 8px;border-bottom:1px solid var(--border-soft);color:var(--text);}
#grYearsTable .num-cell{text-align:right;font-family:'Compass Sans',sans-serif;font-variant-numeric:tabular-nums;font-variant-numeric:tabular-nums;white-space:nowrap;}
#grYearsTable tr.gr-cut .gr-rate,#grYearsTable tr.gr-late .gr-rate{color:var(--red);font-weight:700;}
#grYearsTable tr.gr-raise .gr-rate{color:var(--teal);font-weight:700;}
#grYearsTable tr.gr-late td{color:var(--muted);}
#grYearsTable th.num-cell{text-align:right;}
@media (max-width:700px){#grYearsTable .gr-sav{display:none;}#grYearsTable td.gr-what{min-width:150px;}}
.yb-toggle{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;}
.yb-toggle #yearByYearToggleIcon{font-size:14px;line-height:1;}
.yb-collapse{min-height:44px;}
.dash-watch-note{display:block;margin-top:6px;font-size:.92em;color:var(--muted);}