/* ============================================ */
/* SIDECAR CONTROLS + ANNUITY PICKERS           */
/* ============================================ */
/* === Sidecar Controls (Phase 1) === */
.-grid{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  align-items: start;
}
.-main{ min-width: 0; } /* prevents table from overflowing grid */
@media (max-width: 640px){
  .-grid{ grid-template-columns: 1fr; }
}
.sidecar{
  background:#fff;
  border:1px solid #e0e0e0;
  border-radius:10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
  padding: 12px 12px 10px;
}
.sidecar h3{
  margin: 2px 0 4px;
  font-size: 1.05rem;
  font-weight: 900;
  text-align:center;
}
.sidecar .sidecar-sub{
  margin: 0 0 10px;
  font-size: 0.85rem;
  font-weight: 700;
  color:#374151;
  text-align:center;
}
.sidecar .annuity-block{
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 10px 8px;
  margin-bottom: 10px;
}
.sidecar .annuity-title{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-weight: 900;
}
.sidecar .annuity-title .small{
  font-weight: 800;
  font-size: 0.8rem;
  color:#6b7280;
}
.sidecar .annuity-value{
  margin-top: 6px;
  font-size: 1.1rem;
  font-weight: 900;
  text-align:center;
}
.sidecar .annuity-meta{
  margin-top: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color:#374151;
  text-align:center;
}
.sidecar input[type="range"]{
  width: 100%;
  margin-top: 10px;
}
/* Touch-friendly thumbs */
.sidecar input[type="range"]::-webkit-slider-thumb{ width:22px; height:22px; }
.sidecar input[type="range"]::-moz-range-thumb{ width:22px; height:22px; }

@media (max-width: 600px){
  .sidecar{ padding: 12px; }
  .sidecar .annuity-block{ padding: 12px 10px; }
}


/* === Sidecar beautification === */
.sidecar{
  border: 2px solid #2f9e44 !important;
  background: #f0fdf4 !important; /* soft green tint */
  box-shadow: 0 10px 26px rgba(0,0,0,0.10) !important;
}
.sidecar h3{
  color:#14532d;
  letter-spacing: 0.04em;
}
.sidecar .sidecar-sub{
  color:#14532d;
  font-size: 0.82rem;
  margin-bottom: 12px;
}
.sidecar .annuity-block{
  background:#ffffff;
  border: 2px solid #000000;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.sidecar .annuity-title{
  font-size: 0.98rem;
}
.sidecar .annuity-value{
  font-size: 1.25rem;
  margin-top: 2px;
}
.sidecar .annuity-meta{
  font-size: 0.75rem;
  margin-top: 8px;
  color:#374151;
}
/* Sticky sidecar on desktop so user can tune while reading table */
@media (min-width: 981px){
  .sidecar{
    position: sticky;
    top: 14px;
  }
}


/* === Sidecar Age Picker (Phase 2A – Annuity 1) === */
.age-picker{
  margin-top:10px;
  border:1px solid #d1d5db;
  border-radius:8px;
  background:#ffffff;
  padding:6px 6px 4px;
}
.age-picker-header{
  text-align:center;
  font-size:0.78rem;
  font-weight:800;
  color:#14532d;
  margin-bottom:4px;
}
.age-list{
  max-height:220px;
  overflow-y:auto;
  font-size:0.78rem;
}
.age-list label{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:2px 6px;
  cursor:pointer;
  border-radius:4px;
}
.age-list label:hover{
  background:#f0fdf4;
}
.age-list input[type="radio"]{
  margin-right:6px;
}
.age-list input[type="radio"]:checked + span{
  color:#15803d;
  font-weight:900;
}


/* === Coordinated colors for Annuity 1 age picker === */
#ann1_age_picker{
  border: 2px solid #2563eb !important; /* blue */
  background: #eff6ff !important;       /* light blue */
}
#ann1_age_picker .age-picker-header{
  color: #1d4ed8 !important;
  letter-spacing: 0.06em;
}
#ann1_age_picker .age-list label{
  border: 1px solid transparent;
}
#ann1_age_picker .age-list label:hover{
  background: #dbeafe !important;
}
#ann1_age_picker input[type="radio"]{
  accent-color: #2563eb;
}
#ann1_age_picker input[type="radio"]:checked + span{
  color:#1d4ed8 !important;
}

/* === Highlight the selected age row in the picker itself === */
#ann1_age_picker .age-list label.is-selected{
  background: #bfdbfe !important;
  border-color: #1d4ed8 !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.25);
}

/* === Highlight the corresponding summary table row === */
#resultsBody tr.row-selected{
  outline: 4px solid #2563eb;
  outline-offset: -2px;
  box-shadow: 0 0 0 6px rgba(37,99,235,0.18);
}
#resultsBody tr.row-selected td{
  background-color: #fff8b3 !important; /* your signature yellow */
  border-color: #2563eb !important;
}


/* === Coordinated colors for Annuity 2 age picker === */
#ann2_age_picker{
  border: 2px solid #be185d !important;
  background: #fdf2f8 !important;
}
#ann2_age_picker .age-picker-header{
  color: #9d174d !important;
  letter-spacing: 0.06em;
}
#ann2_age_picker .age-list label:hover{
  background: #fce7f3 !important;
}
#ann2_age_picker input[type="radio"]{
  accent-color: #be185d;
}
#ann2_age_picker input[type="radio"]:checked + span{
  color:#9d174d !important;
}
#ann2_age_picker .age-list label.is-selected{
  background: #fbcfe8 !important;
  border-color: #9d174d !important;
  box-shadow: 0 0 0 3px rgba(190,24,93,0.22);
}

/* Row highlight variant for Annuity 2 */
#resultsBody tr.row-selected-ann2{
  outline: 4px solid #be185d;
  outline-offset: -2px;
  box-shadow: 0 0 0 6px rgba(190,24,93,0.16);
}
#resultsBody tr.row-selected-ann2 td{
  background-color: #fff8b3 !important;
  border-color: #be185d !important;
}


/* === Coordinated colors for Annuity 3 age picker === */
#ann3_age_picker{
  border: 2px solid #0f766e !important; /* teal */
  background: #ecfeff !important;       /* light cyan */
}
#ann3_age_picker .age-picker-header{
  color: #0f766e !important;
  letter-spacing: 0.06em;
}
#ann3_age_picker .age-list label:hover{
  background: #cffafe !important;
}
#ann3_age_picker input[type="radio"]{
  accent-color: #0f766e;
}
#ann3_age_picker input[type="radio"]:checked + span{
  color:#0f766e !important;
}
#ann3_age_picker .age-list label.is-selected{
  background: #a5f3fc !important;
  border-color: #0f766e !important;
  box-shadow: 0 0 0 3px rgba(15,118,110,0.22);
}

/* Row highlight variant for Annuity 3 (match Spouse 2 age column) */
#resultsBody tr.row-selected-ann3{
  outline: 4px solid #0f766e;
  outline-offset: -2px;
  box-shadow: 0 0 0 6px rgba(15,118,110,0.16);
}
#resultsBody tr.row-selected-ann3 td{
  background-color: #fff8b3 !important;
  border-color: #0f766e !important;
}


/* === Coordinated colors for Annuity 4 age picker === */
#ann4_age_picker{
  border: 2px solid #6d28d9 !important;
  background: #f5f3ff !important;
}
#ann4_age_picker .age-picker-header{
  color: #5b21b6 !important;
  letter-spacing: 0.06em;
}
#ann4_age_picker .age-list label:hover{
  background: #ede9fe !important;
}
#ann4_age_picker input[type="radio"]{
  accent-color: #6d28d9;
}
#ann4_age_picker input[type="radio"]:checked + span{
  color:#5b21b6 !important;
}
#ann4_age_picker .age-list label.is-selected{
  background: #ddd6fe !important;
  border-color: #5b21b6 !important;
  box-shadow: 0 0 0 3px rgba(109,40,217,0.20);
}
#resultsBody tr.row-selected-ann4{
  outline: 4px solid #6d28d9;
  outline-offset: -2px;
  box-shadow: 0 0 0 6px rgba(109,40,217,0.15);
}
#resultsBody tr.row-selected-ann4 td{
  background-color: #fff8b3 !important;
  border-color: #6d28d9 !important;
}


/* === Sidecar Folder Tabs (collapsible / tabbed annuities) === */
.annuity-tabs{
  display:flex;
  gap:8px;
  justify-content: center;
  margin: 10px 0 10px;
  flex-wrap: wrap;
}
.annuity-tab{
  border: 2px solid #000;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 900;
  cursor: pointer;
  background: #ffffff;
  color: #111;
  min-width: 110px;
  text-align: center;
}
.annuity-tab[aria-selected="true"]{
  box-shadow: 0 0 0 4px rgba(0,0,0,0.10);
  transform: translateY(-1px);
}
/* Color-coded tabs */
.annuity-tab.tab-ann1{ background:#f59e0b; }  /* amber */
.annuity-tab.tab-ann2{ background:#60a5fa; }  /* blue */
.annuity-tab.tab-ann3{ background:#86efac; }  /* green */
.annuity-tab.tab-ann4{ background:#ef4444; }  /* red */
.annuity-tab[aria-selected="true"].tab-ann1{ outline: 3px solid #b45309; }
.annuity-tab[aria-selected="true"].tab-ann2{ outline: 3px solid #1d4ed8; }
.annuity-tab[aria-selected="true"].tab-ann3{ outline: 3px solid #15803d; }
.annuity-tab[aria-selected="true"].tab-ann4{ outline: 3px solid #991b1b; }

/* Folder container keeps the sidecar compact */
.annuity-folder{
  display:block;
}
.annuity-folder .annuity-block{
  display:none;
}
.annuity-folder .annuity-block.is-active{
  display:block;
}

/* Make the active "folder" feel like it opens */
.annuity-folder .annuity-block.is-active{
  border-width: 3px !important;
}


/* Sidecar subtitle note */
.sidecar-sub-note{
  display:inline-block;
  margin-top:4px;
  font-size:0.78rem;
  font-weight:900;
  color:#14532d;
  letter-spacing:0.06em;
  text-transform: uppercase;
}


/* === Palette sync: Tabs + Pickers use the same family colors (lighter pastels) === */
/* Tabs (override) */
.annuity-tab.tab-ann1{ background:#fde68a !important; } /* light amber */
.annuity-tab.tab-ann2{ background:#bfdbfe !important; } /* light blue */
.annuity-tab.tab-ann3{ background:#bbf7d0 !important; } /* light green */
.annuity-tab.tab-ann4{ background:#fecaca !important; } /* light red */

/* Pickers to match tabs */
#ann1_age_picker{ border-color:#b45309 !important; background:#fffbeb !important; }
#ann1_age_picker .age-picker-header{ color:#b45309 !important; }
#ann1_age_picker .age-list label:hover{ background:#fef3c7 !important; }

#ann2_age_picker{ border-color:#1d4ed8 !important; background:#eff6ff !important; }
#ann2_age_picker .age-picker-header{ color:#1d4ed8 !important; }
#ann2_age_picker .age-list label:hover{ background:#dbeafe !important; }

#ann3_age_picker{ border-color:#15803d !important; background:#f0fdf4 !important; }
#ann3_age_picker .age-picker-header{ color:#15803d !important; }
#ann3_age_picker .age-list label:hover{ background:#dcfce7 !important; }

#ann4_age_picker{ border-color:#991b1b !important; background:#fef2f2 !important; }
#ann4_age_picker .age-picker-header{ color:#991b1b !important; }
#ann4_age_picker .age-list label:hover{ background:#fee2e2 !important; }


/* === alignment: keep chart + sidecar aligned and similar height === */
.-grid{
  align-items: stretch !important;
}
.-main,
.sidecar{
  align-self: stretch !important;
}
/* Make sidecar scroll internally if content exceeds chart height */
@media (min-width: 981px){
  .sidecar{
    max-height: 520px;       /* tuned to match summary card height visually */
    overflow: auto;
  }
}


/* === Visual tweak: make main Fine-Tune container light grey (distinct from Annuity 3) === */
.sidecar{
  background: #eef2f7 !important;   /* light grey-blue */
}

/* Ensure Annuity 3 picker is NOT the same as the container */
#ann3_age_picker{
  background: #ecfeff !important;   /* light cyan */
  border-color: #15803d !important; /* keep green edge consistent */
}

/* === Height alignment: make summary chart match Fine-Tune box height === */
@media (min-width: 981px){
  /* Increase both panels to the same max height */
  .sidecar{ max-height: 750px !important; }
  /* Give the summary table more vertical room */
  #resultsCard .table-wrapper{ max-height: 750px !important; }
}


/* === Layout: side-by-side, NON-sticky (internal scroll only) === */
@media (min-width: 981px){
  /* Ensure neither panel is sticky */
  #resultsCard, .sidecar{
    position: static !important;
    top: auto !important;
  }

  /* Same visual height */
  #resultsCard, .sidecar{
    height: 620px !important;
    max-height: 620px !important;
  }

  /* Internal scroll areas */
  #resultsCard .table-wrapper{
    max-height: 520px !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .sidecar{
    overflow: auto !important;
  }

  .-grid{ align-items: stretch !important; }
  .-main{ min-width:0; }
}


/* === Horizontal alignment: make the two panels start at the same Y === */
@media (min-width: 981px){
  .-grid{ margin-top: 0 !important; }
  /* remove extra top spacing inside left panel */
  #resultsCard{ margin-top: 0 !important; }
  /* make the sidecar match the card's top padding visually */
  .sidecar{ margin-top: 0 !important; }
}


/* === Show more visible summary rows to fill the chart card height === */
@media (min-width: 981px){
  /* Card is 620px tall; increase the internal table window height */
  #resultsCard .table-wrapper{
    max-height: 610px !important;  /* nearly full card height */
  }
  /* Reduce padding inside resultsCard so table can be taller */
  #resultsCard{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}


/* === Align top of Fine-Tune box with top of Chart === */
@media (min-width: 981px){
  .-grid{
    align-items: start !important;
  }
  .sidecar{
    margin-top: 0 !important;
    padding-top: 12px !important;
  }
  #resultsCard{
    margin-top: 0 !important;
  }
}


/* === Give breathing room between Fine-Tune title and box border === */
.sidecar{
  padding-top: 26px !important; /* more space from top border */
}
.sidecar h3{
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}
.sidecar .sidecar-sub{
  margin-bottom: 18px !important;
}


/* === Extra white space between annuity tabs and the active annuity panel === */
/* This adds breathing room WITHOUT changing the overall container height */
.annuity-tabs{
  margin-bottom: 18px !important; /* space below the 4 buttons */
}
.annuity-folder{
  margin-top: 6px !important;     /* subtle separation above the white panel */
}


/* === Even more white space between tabs and annuity panel === */
.annuity-tabs{
  margin-bottom: 30px !important; /* significantly more breathing room */
}
.annuity-folder{
  margin-top: 10px !important;
}

/* === Visual hierarchy: darker infill for the active annuity panel === */
.annuity-folder .annuity-block.is-active{
  background: #e5e7eb !important;  /* darker grey than container */
}


/* === Distinct black border around the active annuity slider panel === */
.annuity-folder .annuity-block.is-active{
  border: 3px solid #000 !important; /* strong black border */
}


/* === header bar: [title | last calculated] === */
.-header-bar{
  display:flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin: 10px 0 12px;
}
.-header-title .-heading{
  margin: 0 !important;
}
.-header-meta #lastCalculated{
  margin: 0 !important;
  display: inline-block;
  text-align: right !important;
  white-space: nowrap;
}
@media (max-width: 900px){
  .-header-bar{
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .-header-meta #lastCalculated{
    text-align: center !important;
    white-space: normal;
  }
}


/* === Always highlight Last Calculated badge === */
#lastCalculated{
  background: #ffeb3b !important; /* solid yellow */
  color: #000 !important;
  font-weight: 900 !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  border: 2px solid #000 !important;
  display: inline-block !important;
}


/* === Slightly larger Fine-Tune title === */
.sidecar h3{
  font-size: 1.35rem !important; /* subtle increase */
  letter-spacing: 0.03em;
}


/* === Center the title === */
.-header-title .-heading{
  text-align: center !important;
  width: 100%;
}


/* === Darker green border for Fine-Tune container === */
.sidecar{
  border: 3px solid #166534 !important; /* dark green */
}


/* === FORCE true center for title while keeping Last Calculated on the right === */
.-header-bar{
  position: relative !important;
  justify-content: center !important;
}

.-header-title{
  width: 100%;
  text-align: center !important;
}

.-header-title .-heading{
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Pin Last Calculated to the right without affecting centering */
.-header-meta{
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
}


/* === Last Calculated moved to top-center above GOLD STANDARD box === */
.lastcalc-top-banner{
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 16px 0 10px;
}
#lastCalculatedTop{
  background: #ffeb3b;
  color: #000;
  font-weight: 900;
  padding: 8px 16px;
  border-radius: 8px;
  border: 3px solid #000;
  display: inline-block;
}
/* Hide the old in-header last calculated if it still exists */
.-header-meta #lastCalculated{
  display:none !important;
}


/* === Reduce dead space above GOLD STANDARD banner (small, controlled adjustment) === */
.lastcalc-top-banner{
  margin: 8px 0 6px !important;   /* was much larger; tighten gently */
}

/* The gold tagline box itself */
.gold-tagline-box{
  margin-top: 6px !important;     /* pull up closer to cards */
}

/* Reduce bottom margin of the cards section just above */
.cards{
  margin-bottom: 10px !important; /* keep breathing room, remove excess gap */
}


/* === Last Calculated under GOLD STANDARD title === */
.lastcalc-under-gold{
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 6px 0 10px;
}
#lastCalculatedUnder{
  background: #ffeb3b;
  color: #000;
  font-weight: 900;
  padding: 6px 14px;
  border-radius: 8px;
  border: 3px solid #000;
}


/* === Safety: keep + Fine-Tune centered within the page (prevents full-bleed) === */
.-header-bar,
.-grid{
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  width: 100% !important;
  box-sizing: border-box;
}


/* === Reduce whitespace between annuity disclaimer and GOLD STANDARD banner (by ~50%) === */
.annuity-disclaimer,
.annuity-note,
.annuity-footnote{
  margin-bottom: 10px !important;
}

.gold-tagline-box{
  margin-top: 10px !important;
}


/* === Emphasize 'See Detailed Chart View' button === */
#toggleDetailBtn,
.see-detailed-btn{
  font-size: 1.4rem !important;          /* ~2x visual weight */
  padding: 16px 32px !important;
  background-color: #166534 !important;  /* dark green */
  color: #ffffff !important;             /* white text */
  border: 3px solid #0f3d24 !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em;
}

/* Hover / focus state */
#toggleDetailBtn:hover,
#toggleDetailBtn:focus,
.see-detailed-btn:hover,
.see-detailed-btn:focus{
  background-color: #ffeb3b !important;  /* yellow hover */
  color: #000000 !important;             /* black text */
  border-color: #000000 !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  cursor: pointer;
}


/* === Further reduce space between GOLD STANDARD banner and annuity disclaimer === */
/* Tighten bottom margin of GOLD banner */
.gold-tagline-box{
  margin-bottom: 6px !important;
}

/* Tighten top margin of annuity disclaimer line */
.annuity-disclaimer,
.annuity-note,
.annuity-footnote{
  margin-top: 6px !important;
}


/* === Normalize Spouse 2 annuity colors to GREEN (match Spouse 1) === */

/* Spouse 2 annuity 3 & 4 input boxes */
#s2_other1,
#s2_other2,
#s2_start1,
#s2_start2{
  border-color: #15803d !important;     /* green border */
  background-color: #ecfdf5 !important;/* light green fill */
  color: #14532d !important;            /* dark green text */
}

/* Spouse 2 annuity sliders */
#s2_annuity1_slider,
#s2_annuity2_slider{
  accent-color: #15803d !important;     /* green slider */
}

/* Spouse 2 annuity labels */
label[for="s2_other1"],
label[for="s2_other2"],
label[for="s2_start1"],
label[for="s2_start2"]{
  color: #14532d !important;
  font-weight: 800;
}

/* Sidecar tabs for Annuity 3 & 4 – switch to green family */
.annuity-tab.tab-ann3,
.annuity-tab.tab-ann4{
  background: #bbf7d0 !important;       /* light green */
  border-color: #15803d !important;
  color: #14532d !important;
}

/* Active annuity panel (when Annuity 3 or 4 selected) */
#sidecar_ann3.is-active,
#sidecar_ann4.is-active{
  border-color: #15803d !important;
}


/* === Detailed View: full screen width when opened === */
@media (min-width: 981px){
  /* full-bleed heading + card */
  #detailHeading,
  #detailResultsCard{
    width: calc(100vw - 40px) !important;            /* keep 20px gutters */
    max-width: none !important;
    margin-left: calc(50% - 50vw + 20px) !important;
    margin-right: calc(50% - 50vw + 20px) !important;
  }
  /* avoid horizontal scrollbars */
  body{ overflow-x: hidden; }
}

/* === Reduce space between disclaimer and GOLD STANDARD (reliable selectors) === */
.credibility-line{
  margin-bottom: 18px !important;   /* was large; tighten */
}
.gold-tagline-box{
  margin-top: 12px !important;      /* pull GOLD STANDARD up */
}
/* Keep Last Calculated snug under GOLD STANDARD */
.lastcalc-under-gold{
  margin-top: 6px !important;
  margin-bottom: 10px !important;
}


/* === Detailed View: align to site width (NOT full bleed) === */
@media (min-width: 981px){
  #detailHeading,
  #detailResultsCard{
    width: 100% !important;
    max-width: 1100px !important;   /* match .page max width */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
}


/* === Ensure Detailed View spans the full site width even if it ends up inside the grid === */
#detailHeading,
#detailResultsCard{
  width: 100% !important;
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.-grid #detailHeading,
.-grid #detailResultsCard{
  grid-column: 1 / -1 !important; /* span both grid columns */
  justify-self: stretch !important;
  align-self: start !important;
}


/* === Make Detailed View table fill the same full site width as the summary row === */
#detailResultsCard{
  width: 100% !important;
  max-width: 1100px !important;
}
#detailResultsCard .table-wrapper{
  width: 100% !important;
}
#detailResultsCard table{
  width: 100% !important;
  table-layout: auto !important;   /* allow natural expansion */
  font-size: 0.62rem !important;   /* slightly larger for readability when expanded */
}


/* === FORCE Detailed View table to actually stretch to full card width === */
#detailResultsCard{
  width: 100% !important;
  max-width: 1100px !important;
}
#detailResultsCard .table-wrapper{
  width: 100% !important;
  max-width: none !important;
  display: block !important;
}
#detailResultsCard table{
  width: 100% !important;
  max-width: none !important;
  display: table !important;
  table-layout: auto !important;      /* override any fixed layout */
}
/* Let columns expand; prevent any accidental narrow colgroup effects */
#detailResultsCard colgroup,
#detailResultsCard col{
  width: auto !important;
}


/* === LAST RESORT: force detailed table to stretch using flex === */
#detailResultsCard .table-wrapper{
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  width: 100% !important;
}
#detailResultsCard table{
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 100% !important;
}


/* === Fix: restore Annuity 4 tab to RED (not green) === */
.annuity-tab.tab-ann4{
  background: #fecaca !important;   /* light red */
  border-color: #991b1b !important; /* dark red border */
  color: #7f1d1d !important;        /* dark red text */
}

/* Active state for Annuity 4 tab */
.annuity-tab.tab-ann4[aria-selected="true"]{
  outline: 3px solid #7f1d1d !important;
}


/* === Fine-Tune box: bright yellow infill (CSS-only, safe rollback base) === */
.sidecar{
  background: #ffeb3b !important;        /* bright yellow */
  border-color: #166534 !important;      /* dark green border */
}
/* Keep text readable on yellow */
.sidecar, .sidecar h3, .sidecar .sidecar-sub, .sidecar .sidecar-sub-note{
  color: #111 !important;
}


/* === Detailed View placement: full site width (not constrained by side-by-side grid) === */
#detailHeading,
#detailResultsCard{
  width: 100% !important;
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Ensure the detailed table stretches to the card width */
#detailResultsCard .table-wrapper{ width: 100% !important; }
#detailResultsCard table{ width: 100% !important; }


/* === Keep Fine-Tune sidecar beside summary on most screens (only stack on phones) === */
.sidecar{ width: 340px; }
@media (max-width: 860px){
  .sidecar{ width: 320px; }
}
@media (max-width: 640px){
  .sidecar{ width: auto; }
}


/* === Keep Fine-Tune sliders beside summary chart (disable sticky sidecar on desktop) === */
@media (min-width: 981px){
  .sidecar{
    position: static !important;
    top: auto !important;
  }
}


/* === FORCE summary chart + Fine-Tune to stay side-by-side on desktop/tablet === */
@media (min-width: 700px){
  .-grid{
    grid-template-columns: minmax(0, 1fr) 340px !important;
    align-items: start !important;
  }
  .-main{
    grid-column: 1 / 2 !important;
  }
  .sidecar{
    grid-column: 2 / 3 !important;
    grid-row: 1 !important;
    width: 340px !important;
  }
}
@media (max-width: 699px){
  .-grid{ grid-template-columns: 1fr !important; }
  .sidecar{ width: auto !important; }
}

/* === Reduce dead space inside age picker rows (radio + age closer together) === */
.age-list label{
  justify-content: flex-start !important;
  gap: 10px !important;
}
.age-list label span{
  margin-left: 0 !important;
}


/* === Make Fine-Tune sidecar SKINNIER + keep it beside the summary chart (desktop) === */
@media (min-width: 860px){
  /* Use flex instead of grid to avoid odd implicit placements */
  .-grid{
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  .-main{
    flex: 1 1 auto !important;
    min-width: 0 !important; /* allow table to use remaining space */
  }
  .sidecar{
    flex: 0 0 260px !important;  /* skinnier */
    width: 260px !important;
    max-width: 260px !important;
    position: static !important;
  }
}

/* Tablet: still side-by-side but a hair wider for readability */
@media (min-width: 700px) and (max-width: 859px){
  .-grid{
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  .-main{ flex: 1 1 auto !important; min-width: 0 !important; }
  .sidecar{ flex: 0 0 240px !important; width: 240px !important; max-width: 240px !important; }
}

/* Phones: stack */
@media (max-width: 699px){
  .-grid{ display:block !important; }
  .sidecar{ width:auto !important; max-width:none !important; }
}

/* === Sidecar compact typography / spacing (so it doesn't feel cramped even when narrower) === */
.sidecar{ padding: 16px 12px 12px !important; }
.sidecar h3{ font-size: 1.15rem !important; margin-bottom: 8px !important; }
.sidecar .sidecar-sub{ font-size: 0.78rem !important; margin-bottom: 10px !important; }
.annuity-tabs{ gap: 8px !important; margin-bottom: 18px !important; }
.annuity-tab{ min-width: 92px !important; padding: 6px 10px !important; font-size: 0.92rem !important; }
.annuity-folder{ margin-top: 6px !important; }

/* Active annuity panel inside sidecar: tighter padding */
.annuity-folder .annuity-block.is-active{
  padding: 10px !important;
}

/* Age picker rows: even tighter */
.age-picker{ padding: 6px !important; }
.age-list{ max-height: 190px !important; font-size: 0.74rem !important; }
.age-list label{ padding: 2px 4px !important; gap: 8px !important; }


/* === FORCE side-by-side earlier (your screen may be <860px wide) === */
@media (min-width: 560px){
  .-grid{
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  .-main{
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .sidecar{
    flex: 0 0 220px !important;   /* even skinnier */
    width: 220px !important;
    max-width: 220px !important;
  }
}
@media (max-width: 559px){
  .-grid{ display:block !important; }
  .sidecar{ width:auto !important; max-width:none !important; }
}

/* === Make sidecar content fit a narrower width (reduce dead space) === */
.sidecar h3{ font-size: 1.05rem !important; line-height: 1.05 !important; }
.sidecar .sidecar-sub{ font-size: 0.72rem !important; }
.annuity-tab{ min-width: 84px !important; padding: 6px 8px !important; font-size: 0.86rem !important; }
.annuity-tabs{ gap: 6px !important; margin-bottom: 14px !important; }

/* Active annuity panel */
.annuity-folder .annuity-block.is-active{ padding: 8px !important; }

/* Age picker: tighter + allow label to wrap */
.age-list{ font-size: 0.70rem !important; }
.age-list label{ padding: 1px 2px !important; gap: 6px !important; }
.age-list label span{ white-space: normal !important; line-height: 1.1 !important; }


/* === FORCE sidecar to stay BESIDE the summary (prevent flex wrapping) === */
@media (min-width: 560px){
  .-grid{
    flex-wrap: nowrap !important;      /* do NOT allow sidecar to drop under */
  }
  .-main{
    overflow: visible !important;       /* keep table from forcing the flex item wider */
    min-width: 0 !important;
  }
  #resultsCard{
    max-width: 100% !important;
  }
  #resultsCard .table-wrapper{
    max-width: 100% !important;
    overflow: auto !important;         /* table scrolls inside */
  }
  #resultsCard table{
    width: 100% !important;
  }
}


/* === Spacing refinements inside Fine-Tune sidecar === */

/* Space between subtitle ("BASED ON SPOUSE 1 AGE") and Annuity 1/2 buttons */
.sidecar .sidecar-sub-note{
  display: block;
  margin-bottom: 18px !important;
}

/* Extra space between Annuity 3/4 buttons and the active annuity panel */
.annuity-tabs{
  margin-bottom: 26px !important;
}

/* Small top offset for the active annuity panel so it doesn't feel glued */
.annuity-folder{
  margin-top: 10px !important;
}


/* === Gold box title refinement (bottom of page) === */
/* Make title white, larger, spaced, and outlined per character */
.gold-box h2,
.gold-box h3,
.gold-contact-box h2,
.gold-contact-box h3{
  color: #ffffff !important;
  font-size: 2.1rem !important;          /* larger, wraps to ~3 lines */
  line-height: 1.25 !important;
  letter-spacing: 0.12em !important;     /* character spacing */
  text-align: center;
  margin-bottom: 14px !important;

  /* Character outline */
  -webkit-text-stroke: 1.5px #000000;
  text-shadow:
    1px 1px 0 #000,
   -1px 1px 0 #000,
    1px -1px 0 #000,
   -1px -1px 0 #000;
}


/* === Gold box title (top line in the Share box) === */
.share-box .share-title{
  color: #ffffff !important;
  font-size: 1.6rem !important;          /* bigger so it wraps */
  line-height: 1.15 !important;
  font-weight: 950 !important;
  letter-spacing: 0.10em !important;
  text-align: center !important;
  margin: 0 auto 14px !important;

  /* crisp outline around each character */
  -webkit-text-stroke: 1.2px #000000;
  text-shadow:
    1px 1px 0 #000,
   -1px 1px 0 #000,
    1px -1px 0 #000,
   -1px -1px 0 #000;

  /* encourage multi-line wrap (roughly ~3 lines on desktop) */
  max-width: 720px;
}


/* === Gold box title refinement: smaller text, thinner outline, ~3 lines === */
.share-box .share-title{
  font-size: 1.35rem !important;        /* reduced size */
  line-height: 1.25 !important;
  letter-spacing: 0.08em !important;    /* slightly tighter */
  max-width: 780px;                     /* encourage ~3-line wrap */

  /* thinner outline */
  -webkit-text-stroke: 0.8px #000000;
  text-shadow:
    0.5px 0.5px 0 #000,
   -0.5px 0.5px 0 #000,
    0.5px -0.5px 0 #000,
   -0.5px -0.5px 0 #000;
}


/* === Gold box title: clean text, NO outlines, smaller size, 3-line wrap === */
.share-box .share-title{
  font-size: 1.2rem !important;         /* smaller */
  line-height: 1.3 !important;
  letter-spacing: 0.05em !important;    /* subtle spacing */
  max-width: 760px;                     /* encourage 3 lines */
  color: #ffffff !important;
  font-weight: 800 !important;

  /* remove all outlines/shadows */
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}


/* === Gold box title: two-line copy, centered === */
.share-box .share-title{
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* === Borders around Email and Phone entry pills === */
#contact_email,
#contact_phone{
  border: 3px solid #000 !important;
}


/* === Gold box title final styling === */
.share-box .share-title{
  color: #000000 !important;      /* black title text */
}

/* White emphasis for "white knuckle" phrase */
.share-box .white-knuckle{
  color: #ffffff !important;
  font-weight: 900;
}

/* === Jagged black border around entire gold box === */
.share-box{
  border: 4px solid #000 !important;
  border-radius: 18px !important;
  position: relative;
}

/* Faux jagged effect using outline + shadow */
.share-box::before{
  content: "";
  position: absolute;
  inset: -6px;
  border: 3px dashed #000;
  border-radius: 22px;
  pointer-events: none;
}


/* === Sidecar age picker: shorter (show fewer ages by default) === */
.age-list{
  max-height: 140px !important; /* was taller; now ~6 rows visible depending on font */
}


/* === Sidecar "Show Detail View" button (small, natural) === */
.sidecar-detail-btn-wrap{
  display:flex;
  justify-content:center;
  margin-top: 12px;
}
.sidecar-detail-btn{
  background: #166534;
  color: #ffffff;
  border: 2px solid #0f3d24;
  border-radius: 12px;
  padding: 8px 14px;
  font-weight: 900;
  font-size: 0.9rem;
  cursor: pointer;
}
.sidecar-detail-btn:hover,
.sidecar-detail-btn:focus{
  background: #ffeb3b;
  color: #000;
  border-color: #000;
  outline: none;
}


/* === Hide the large Detailed Chart toggle button below the summary (sidecar button remains functional) === */
.detail-toggle-centered{
  display: none !important;
}


/* === SUMMARY TABLE: add Gross Annual Salary column (display only) === */

/* 7-column widths */
#resultsCard th:nth-child(1),
#resultsCard td:nth-child(1) { width: 9% !important; }   /* S1 Age */
#resultsCard th:nth-child(2),
#resultsCard td:nth-child(2) { width: 9% !important; }   /* S2 Age */

/* Gross Annual + Gross Monthly + Net Monthly + Annual Net + Cumulative Net */
#resultsCard th:nth-child(3),
#resultsCard td:nth-child(3),
#resultsCard th:nth-child(4),
#resultsCard td:nth-child(4),
#resultsCard th:nth-child(5),
#resultsCard td:nth-child(5),
#resultsCard th:nth-child(6),
#resultsCard td:nth-child(6) { width: 16% !important; }

#resultsCard th:nth-child(7),
#resultsCard td:nth-child(7) { width: 18% !important; }  /* Cumulative Net */

/* Header colors (darker) */
#resultsCard table thead th:nth-child(1) { background: #b4c9fb !important; } /* S1 Age */
#resultsCard table thead th:nth-child(2) { background: #f9b5b5 !important; } /* S2 Age */
#resultsCard table thead th:nth-child(3) { background: #94a3b8 !important; } /* Gross Annual (distinct slate) */
#resultsCard table thead th:nth-child(4) { background: #b9f2c8 !important; } /* Gross Monthly */
#resultsCard table thead th:nth-child(5) { background: #f6de8c !important; } /* Net Monthly */
#resultsCard table thead th:nth-child(6) { background: #9ce9f5 !important; } /* Annual Net */
#resultsCard table thead th:nth-child(7) { background: #d2c4ff !important; } /* Cumulative Net */

/* Body cell backgrounds (lighter than header) */
#resultsBody td:nth-child(1) { background: #dbeafe !important; } /* S1 Age */
#resultsBody td:nth-child(2) { background: #fee2e2 !important; } /* S2 Age */
#resultsBody td:nth-child(3) { background: #e2e8f0 !important; } /* Gross Annual */
#resultsBody td:nth-child(4) { background: #dcfce7 !important; } /* Gross Monthly */
#resultsBody td:nth-child(5) { background: #fef3c7 !important; } /* Net Monthly */
#resultsBody td:nth-child(6) { background: #cffafe !important; } /* Annual Net */
#resultsBody td:nth-child(7) { background: #ede9fe !important; } /* Cumulative Net */

/* Keep strong divider between S2 and money columns */
#resultsCard table thead th:nth-child(2),
#resultsBody td:nth-child(2) {
  border-right: 4px solid #000000 !important;
}


/* === Gross Annual Salary column emphasis === */
/* Dark green header with white text */
#resultsCard table thead th:nth-child(3){
  background: #166534 !important;   /* dark green */
  color: #ffffff !important;
  font-weight: 900 !important;
}

/* White body cells (no fill) */
#resultsBody td:nth-child(3){
  background: #ffffff !important;
  color: #000000 !important;
  font-weight: 700;
}

/* Bold square border around entire Gross Annual column */
#resultsCard table thead th:nth-child(3),
#resultsBody td:nth-child(3){
  border-left: 4px solid #166534 !important;
  border-right: 4px solid #166534 !important;
}

/* Top and bottom borders to complete the square */
#resultsCard table thead th:nth-child(3){
  border-top: 4px solid #166534 !important;
}
#resultsBody tr:last-child td:nth-child(3){
  border-bottom: 4px solid #166534 !important;
}


/* === Gross Annual column: conditional color override (wins over forced black) === */
#resultsBody td:nth-child(3).surplus{
  color: #15803d !important;  /* bold green */
  font-weight: 900 !important;
}
#resultsBody td:nth-child(3).zero-benefit{
  color: #b91c1c !important;  /* bold red */
  font-weight: 900 !important;
}


/* === Gross Monthly Salary header styling === */
#resultsCard table thead th:nth-child(4){
  background: #3b7f4a !important;   /* medium green (between dark annual + light cells) */
  color: #ffeb3b !important;        /* yellow font */
  font-weight: 900 !important;
}

/* Keep body cells lighter for contrast */
#resultsBody td:nth-child(4){
  background: #dcfce7 !important;   /* light green */
}


/* === Gross Monthly Salary header font color correction === */
#resultsCard table thead th:nth-child(4){
  color: #ffffff !important; /* white font */
}


/* === Net Annual Salary (formerly Annual Net) header styling === */
#resultsCard table thead th:nth-child(6){
  background: #4b5563 !important;  /* dark grey */
  color: #ffffff !important;       /* white text */
  font-weight: 900 !important;
}

/* Body cells: neutral light grey for readability */
#resultsBody td:nth-child(6){
  background: #e5e7eb !important;
  font-weight: 800;
}


/* === Gross Monthly Salary: yellow header font === */
#resultsCard table thead th:nth-child(4){
  color: #ffeb3b !important;   /* yellow */
  font-weight: 900 !important;
}

/* === Net Monthly Salary header styling === */
#resultsCard table thead th:nth-child(7){
  background: #4c1d95 !important; /* dark purple */
  color: #ffeb3b !important;      /* yellow font */
  font-weight: 900 !important;
}

/* Body cells for Net Monthly Salary: keep existing light tone */
#resultsBody td:nth-child(7){
  font-weight: 800;
}


/* === Net Monthly Salary header: match Gross Monthly Salary header background === */
#resultsCard table thead th:nth-child(5){
  background: #3b7f4a !important; /* same as Gross Monthly Salary header */
  color: #ffeb3b !important;      /* bold yellow font */
  font-weight: 900 !important;
}

/* === Net Monthly Salary conditional cell fills === */
#resultsBody td:nth-child(5).surplus{
  background: #15803d !important; /* green fill */
  color: #ffffff !important;
  font-weight: 900 !important;
}
#resultsBody td:nth-child(5).shortfall,
#resultsBody td:nth-child(5).zero-benefit{
  background: #b91c1c !important; /* red fill */
  color: #ffffff !important;
  font-weight: 900 !important;
}


/* Override any previous Net Monthly header styling mistakenly targeting column 7 */
#resultsCard table thead th:nth-child(7){
  background: #d2c4ff !important; /* restore cumulative header color */
  color: #111 !important;
  font-weight: 900 !important;
}


/* === Gross Monthly Salary conditional cell fills (match Net Monthly logic) === */
#resultsBody td:nth-child(4).surplus{
  background: #15803d !important; /* green fill */
  color: #ffffff !important;
  font-weight: 900 !important;
}
#resultsBody td:nth-child(4).shortfall,
#resultsBody td:nth-child(4).zero-benefit{
  background: #b91c1c !important; /* red fill */
  color: #ffffff !important;
  font-weight: 900 !important;
}


/* === 1) Strong black vertical column borders in Summary table (always visible) === */
#resultsCard table th,
#resultsCard table td{
  border-left: 3px solid #000 !important;
  border-right: 3px solid #000 !important;
}
/* Keep horizontal borders readable too */
#resultsCard table th,
#resultsCard table td{
  border-top: 2px solid #000 !important;
  border-bottom: 2px solid #000 !important;
}
/* Preserve the thicker section divider after Spouse 2 Age */
#resultsCard table thead th:nth-child(2),
#resultsBody td:nth-child(2){
  border-right: 5px solid #000 !important;
}

/* === 2) All badges become WHITE flags with green/red text === */
.salary-badge,
.salary-badge.badge-negative{
  background: #ffffff !important;     /* white flag */
  border: 2px solid #000 !important; /* crisp flag border */
  color: #15803d !important;         /* default: green text */
  font-weight: 900 !important;
}
/* Negative-direction flags: red text */
.salary-badge.badge-negative{
  color: #b91c1c !important;
}
/* Make the flag "points" white with black outline */
.salary-badge::before{
  border-right-color: #ffffff !important;
}
.salary-badge::after{
  border-left-color: #ffffff !important;
}
/* Outline for the pointed ends */
.salary-badge::before{
  filter: drop-shadow(-1px 0 0 #000);
}
.salary-badge::after{
  filter: drop-shadow(1px 0 0 #000);
}


/* === 1) Match Gross Annual & Net Annual header infill to same PURPLE === */
#resultsCard table thead th:nth-child(3),  /* Gross Annual Salary */
#resultsCard table thead th:nth-child(6){  /* Net Annual Salary */
  background: #4c1d95 !important; /* dark purple */
  color: #ffffff !important;
  font-weight: 900 !important;
}

/* === 2) Birth/Age columns default to white cells === */
/* Spouse 1 Age */
#resultsBody td:nth-child(1){
  background: #ffffff !important;
  color: #000000 !important;
  font-weight: 800;
}

/* Spouse 2 Age */
#resultsBody td:nth-child(2){
  background: #ffffff !important;
  color: #000000 !important;
  font-weight: 800;
}


/* === Conditional formatting for Gross Annual & Net Annual Salary (match monthly logic) === */

/* Gross Annual Salary (column 3) */
#resultsBody td:nth-child(3).surplus{
  background: #15803d !important; /* green */
  color: #ffffff !important;
  font-weight: 900 !important;
}
#resultsBody td:nth-child(3).shortfall,
#resultsBody td:nth-child(3).zero-benefit{
  background: #b91c1c !important; /* red */
  color: #ffffff !important;
  font-weight: 900 !important;
}

/* Net Annual Salary (column 6) */
#resultsBody td:nth-child(6).surplus{
  background: #15803d !important; /* green */
  color: #ffffff !important;
  font-weight: 900 !important;
}
#resultsBody td:nth-child(6).shortfall,
#resultsBody td:nth-child(6).zero-benefit{
  background: #b91c1c !important; /* red */
  color: #ffffff !important;
  font-weight: 900 !important;
}


/* === 1) Gross Monthly & Net Monthly headers -> BLUE === */
#resultsCard table thead th:nth-child(4), /* Gross Monthly Salary */
#resultsCard table thead th:nth-child(5){ /* Net Monthly Salary */
  background: #1e40af !important;  /* strong blue */
  color: #ffffff !important;
  font-weight: 900 !important;
}

/* === 2) Spouse Age columns infill with header colors === */
/* Header colors already exist; mirror them into body cells */

/* Spouse 1 Age (column 1) */
#resultsCard table thead th:nth-child(1){
  background: #b4c9fb !important;
}
#resultsBody td:nth-child(1){
  background: #b4c9fb !important;
  color: #000000 !important;
  font-weight: 800 !important;
}

/* Spouse 2 Age (column 2) */
#resultsCard table thead th:nth-child(2){
  background: #f9b5b5 !important;
}
#resultsBody td:nth-child(2){
  background: #f9b5b5 !important;
  color: #000000 !important;
  font-weight: 800 !important;
}

/* === 3) Gross & Net Monthly Salary cells -> YELLOW FONT (keep green/red fills) === */
#resultsBody td:nth-child(4),
#resultsBody td:nth-child(5){
  color: #ffeb3b !important;   /* yellow font */
  font-weight: 900 !important;
}


/* === 1) Ensure ALL text in Gross Monthly + Net Monthly Salary columns is yellow === */
/* Header + body cells */
#resultsCard table thead th:nth-child(4),
#resultsCard table thead th:nth-child(5),
#resultsBody td:nth-child(4),
#resultsBody td:nth-child(5){
  color: #ffeb3b !important;   /* yellow */
  font-weight: 900 !important;
}

/* === 2) Bold white vertical column borders for Summary table === */
#resultsCard table th,
#resultsCard table td{
  border-left: 3px solid #ffffff !important;
  border-right: 3px solid #ffffff !important;
}
/* Keep the stronger divider after Spouse 2 Age */
#resultsCard table thead th:nth-child(2),
#resultsBody td:nth-child(2){
  border-right: 5px solid #ffffff !important;
}

/* === 3) Highlight "Load Sample" (household quick link) in yellow === */
.card.household .house-quick-links .link-sample{
  background: #ffeb3b !important;
  color: #000 !important;
  padding: 2px 8px !important;
  border-radius: 8px !important;
  border: 2px solid #000 !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}
.card.household .house-quick-links .link-sample:hover{
  filter: brightness(1.02);
}


/* === 1) Explicit white bold vertical border between Gross Annual and Gross Monthly === */
/* Gross Annual = col 3, Gross Monthly = col 4 */
#resultsCard table thead th:nth-child(3),
#resultsBody td:nth-child(3){
  border-right: 5px solid #ffffff !important;
}
#resultsCard table thead th:nth-child(4),
#resultsBody td:nth-child(4){
  border-left: 5px solid #ffffff !important;
}

/* === 2) Horizontal borders ONLY for salary columns (white, thin) === */
/* Salary columns: 3 = Gross Annual, 4 = Gross Monthly, 5 = Net Monthly, 6 = Net Annual */
#resultsCard table thead th:nth-child(3),
#resultsCard table thead th:nth-child(4),
#resultsCard table thead th:nth-child(5),
#resultsCard table thead th:nth-child(6),
#resultsBody td:nth-child(3),
#resultsBody td:nth-child(4),
#resultsBody td:nth-child(5),
#resultsBody td:nth-child(6){
  border-top: 2px solid #ffffff !important;
  border-bottom: 2px solid #ffffff !important;
}

/* Remove horizontal borders from non-salary columns */
#resultsCard table thead th:nth-child(1),
#resultsCard table thead th:nth-child(2),
#resultsCard table thead th:nth-child(7),
#resultsBody td:nth-child(1),
#resultsBody td:nth-child(2),
#resultsBody td:nth-child(7){
  border-top: none !important;
  border-bottom: none !important;
}


/* === Tone down borders: switch all table borders to black === */
#resultsCard table th,
#resultsCard table td{
  border-left: 2px solid #000000 !important;
  border-right: 2px solid #000000 !important;
  border-top: 1.5px solid #000000 !important;
  border-bottom: 1.5px solid #000000 !important;
}

/* Slightly stronger divider between Gross Annual and Gross Monthly */
#resultsCard table thead th:nth-child(3),
#resultsBody td:nth-child(3){
  border-right: 3px solid #000000 !important;
}
#resultsCard table thead th:nth-child(4),
#resultsBody td:nth-child(4){
  border-left: 3px solid #000000 !important;
}


/* === FINAL OVERRIDE: ALL summary chart borders black + thin (no white borders anywhere) === */
#resultsCard table th,
#resultsCard table td{
  border: 1px solid #000000 !important; /* thin black */
}

/* Keep the strong divider after Spouse 2 age and between annual/monthly blocks, but still black */
#resultsCard table thead th:nth-child(2),
#resultsBody td:nth-child(2){
  border-right: 3px solid #000000 !important;
}
#resultsCard table thead th:nth-child(3),
#resultsBody td:nth-child(3){
  border-right: 3px solid #000000 !important;
}
#resultsCard table thead th:nth-child(4),
#resultsBody td:nth-child(4){
  border-left: 3px solid #000000 !important;
}


/* === Remove horizontal borders ONLY under Cumulative Net column === */
/* Cumulative Net is the last column */
#resultsBody td:nth-child(7){
  border-top: none !important;
  border-bottom: none !important;
}

/* Keep vertical borders intact for Cumulative Net */
#resultsBody td:nth-child(7){
  border-left: 1px solid #000000 !important;
  border-right: 1px solid #000000 !important;
}


/* === Remove horizontal borders for Spouse Age columns (1 & 2) === */
#resultsBody td:nth-child(1),
#resultsBody td:nth-child(2){
  border-top: none !important;
  border-bottom: none !important;
}

/* Keep vertical borders for Spouse Age columns */
#resultsBody td:nth-child(1),
#resultsBody td:nth-child(2){
  border-left: 1px solid #000000 !important;
  border-right: 1px solid #000000 !important;
}


/* === FINAL: thin black horizontal borders for Spouse Age + Cumulative Net columns === */

/* Spouse 1 Age (col 1) */
#resultsBody td:nth-child(1){
  border-top: 1px solid #000 !important;
  border-bottom: 1px solid #000 !important;
}

/* Spouse 2 Age (col 2) */
#resultsBody td:nth-child(2){
  border-top: 1px solid #000 !important;
  border-bottom: 1px solid #000 !important;
}

/* Cumulative Net (last column = col 7) */
#resultsBody td:nth-child(7){
  border-top: 1px solid #000 !important;
  border-bottom: 1px solid #000 !important;
}


/* === Strong, clear BLACK vertical borders around the 4 middle salary columns === */
/* Columns: 3 = Gross Annual, 4 = Gross Monthly, 5 = Net Monthly, 6 = Net Annual */

/* Left border of Gross Annual */
#resultsCard table thead th:nth-child(3),
#resultsBody td:nth-child(3){
  border-left: 3px solid #000000 !important;
}

/* Right border of Net Annual */
#resultsCard table thead th:nth-child(6),
#resultsBody td:nth-child(6){
  border-right: 3px solid #000000 !important;
}

/* Internal vertical dividers between the salary columns */
#resultsCard table thead th:nth-child(3),
#resultsBody td:nth-child(3),
#resultsCard table thead th:nth-child(4),
#resultsBody td:nth-child(4),
#resultsCard table thead th:nth-child(5),
#resultsBody td:nth-child(5),
#resultsCard table thead th:nth-child(6),
#resultsBody td:nth-child(6){
  border-right: 3px solid #000000 !important;
}

/* Ensure age columns keep thinner borders so salary block pops */
#resultsCard table thead th:nth-child(1),
#resultsCard table thead th:nth-child(2),
#resultsBody td:nth-child(1),
#resultsBody td:nth-child(2){
  border-right: 1px solid #000000 !important;
}


/* === Subtle shadows for the 4 annuity tabs === */
.annuity-tab{
  box-shadow: 0 3px 10px rgba(0,0,0,0.18) !important;
}
.annuity-tab[aria-selected="true"]{
  box-shadow: 0 5px 14px rgba(0,0,0,0.24) !important;
}


/* === PRINT FIXES: remove Fine-Tune sidecar; make summary full width; show Last Calculated on cover === */
@media print{
  .sidecar, .annuity-tabs, .annuity-folder, .sidecar-detail-btn-wrap { display:none !important; }
  .-grid{ display:block !important; }
  .-main{ width:100% !important; }
  #resultsCard{ width:100% !important; }

  /* Show Last Calculated line on cover */
  #printLastCalculatedLine{ display:block !important; }
}
#printLastCalculatedLine{ display:none; }


/* === Bolder horizontal borders for Spouse Age columns === */
#resultsBody td:nth-child(1),