/* ============================================ */
/* INCREMENTAL PATCHES (Style blocks #2-#94)    */
/* ============================================ */
/* === Style block #2 === */
/* === VISUAL TWEAKS (SAFE OVERRIDES) === */

/* 1) Help Me Build button: make the red border ~3x thicker (was 2px inline) */
#shareWithJamesBtn{
  border-width: 6px !important;
}

/* 2) Get Report link inside Save a Scenario box: double font size */
#scenarioGetReportLink{
  font-size: 1.9rem !important;
}

/* === Style block #3 === */
/* === OUTSIDE spacing for the LIFESTYLE question box (between sections) === */
/* Adds space ABOVE (from Summary Chart) and BELOW (toward Scenario section) */
#lifestyle-question-box{
  margin-top: 36px !important;
  margin-bottom: 36px !important;
}

/* === Style block #4 === */
/* === Extra whitespace between GOLD STANDARD title box and title === */
.gold-tagline-box{
  margin-bottom: 56px !important;
}

/* === Style block #5 === */
/* === Guided Walkthrough toast: make it more "box" than wide rectangle === */
/* Put this late in the cascade so it overrides earlier width/max-width rules. */
#tourToast.tour-toast{
  width: min(420px, calc(100vw - 40px)) !important;
  max-width: 420px !important;
}

/* === Style block #6 === */
/* === SUMMARY TABLE: Monthly columns (Gross Monthly col 4, Net Monthly col 5)
   Conditional formatting:
   - Positive (.surplus): green background + REGULAR white font
   - Negative/zero (.shortfall / .zero-benefit): red background + REGULAR white font
   NOTE: Temporary yellow highlight while dragging sliders is preserved below.
*/

/* Gross Monthly Salary (col 4) */
#resultsCard #resultsBody td:nth-child(4).surplus{
  background: #15803d !important; /* green */
  color: #ffffff !important;      /* white text */
  font-weight: 400 !important;    /* regular */
}
#resultsCard #resultsBody td:nth-child(4).shortfall,
#resultsCard #resultsBody td:nth-child(4).zero-benefit{
  background: #b91c1c !important; /* red */
  color: #ffffff !important;      /* white text */
  font-weight: 400 !important;    /* regular */
}

/* Net Monthly Salary (col 5) */
#resultsCard #resultsBody td:nth-child(5).surplus{
  background: #15803d !important; /* green */
  color: #ffffff !important;      /* white text */
  font-weight: 400 !important;    /* regular */
}
#resultsCard #resultsBody td:nth-child(5).shortfall,
#resultsCard #resultsBody td:nth-child(5).zero-benefit{
  background: #b91c1c !important; /* red */
  color: #ffffff !important;      /* white text */
  font-weight: 400 !important;    /* regular */
}

/* === Preserve the "live slider" yellow row highlight while dragging ===
   During slider drag, the app adds #resultsBody.slider-dragging and highlights
   the active start-age row(s). These overrides force cols 4/5 to go yellow too,
   even though they are conditionally colored above.
*/
#resultsBody.slider-dragging tr.row-selected td:nth-child(4),
#resultsBody.slider-dragging tr.row-selected td:nth-child(5),
#resultsBody.slider-dragging tr.row-selected-ann2 td:nth-child(4),
#resultsBody.slider-dragging tr.row-selected-ann2 td:nth-child(5),
#resultsBody.slider-dragging tr.row-selected-ann3 td:nth-child(4),
#resultsBody.slider-dragging tr.row-selected-ann3 td:nth-child(5),
#resultsBody.slider-dragging tr.row-selected-ann4 td:nth-child(4),
#resultsBody.slider-dragging tr.row-selected-ann4 td:nth-child(5){
  background: #ffeb3b !important; /* yellow */
  color: #000000 !important;      /* black text on yellow */
  font-weight: 900 !important;
}

/* === Style block #7 === */
/* === ADD HORIZONTAL BORDERS for Monthly Columns (Gross & Net Monthly) === */
/* Columns: 4 = Gross Monthly, 5 = Net Monthly */

#resultsCard #resultsBody td:nth-child(4),
#resultsCard #resultsBody td:nth-child(5){
  border-top: 1px solid #000 !important;
  border-bottom: 1px solid #000 !important;
}

/* === Style block #8 === */
/* === PATCH: Summary table monthly columns conditional formatting ===
   Gross Monthly Salary (col 4) and Net Monthly Salary (col 5):
   - Positive (.surplus): green background + white regular font
   - Negative / zero (.shortfall, .zero-benefit): red background + white regular font
   This block is intentionally placed late in the cascade and uses high specificity.
*/
#resultsCard #resultsBody td:nth-child(4),
#resultsCard #resultsBody td:nth-child(5){
  color: #ffffff !important;
  font-weight: 400 !important; /* regular */
}

/* Positive values -> green background */
#resultsCard #resultsBody td:nth-child(4).surplus,
#resultsCard #resultsBody td:nth-child(5).surplus{
  background: #15803d !important; /* green */
}

/* Negative / zero values -> red background */
#resultsCard #resultsBody td:nth-child(4).shortfall,
#resultsCard #resultsBody td:nth-child(4).zero-benefit,
#resultsCard #resultsBody td:nth-child(5).shortfall,
#resultsCard #resultsBody td:nth-child(5).zero-benefit{
  background: #b91c1c !important; /* red */
}

/* === Style block #9 === */
/* === Final polish additions === */

/* What this does line */
.what-this-does{
  text-align:center;
  font-size: 1.05rem;
  font-weight: 800;
  color:#111;
  margin: 10px auto 6px;
  max-width: 980px;
  padding: 0 12px;
}

/* Trust micro-badge */
.trust-badge{
  text-align:center;
  font-size: 0.95rem;
  font-weight: 400;
  color:#14532d;
  margin: 0 auto 18px;
  max-width: 980px;
  padding: 6px 12px;
}

/* First-visit highlight for Load Sample (only when body has .first-visit) */
@keyframes samplePulseGlow{
  0%   { transform: scale(1);   box-shadow: 0 0 0 0 rgba(255,235,59,0.0); }
  50%  { transform: scale(1.03); box-shadow: 0 0 0 8px rgba(255,235,59,0.55); }
  100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(255,235,59,0.0); }
}

body.first-visit #sampleLinkHouse{
  position: relative;
  background: #ffeb3b !important;
  color: #000 !important;
  border: 2px solid #000 !important;
  border-radius: 10px !important;
  padding: 3px 10px !important;
  text-decoration: none !important;
  animation: samplePulseGlow 1.15s ease-in-out infinite;
}

/* Tooltip on first visit - REMOVED per user request */
/* body.first-visit #sampleLinkHouse::after and ::before styles deleted */


/* Mobile tooltip styles also removed */


/* === Style block #10 === */
/* === FINAL POLISH: Summary legend + final anchor question === */
.colors-legend{
  text-align:center;
  margin: 10px auto 2px;
  font-size: 0.92rem;
  font-weight: 900;
  color:#111;
  background: rgba(255,255,255,0.75);
  border: 2px solid #000;
  border-radius: 12px;
  padding: 8px 10px;
  max-width: 980px;
}

/* Final anchor question: tighter, stronger, and no line breaks in the gold phrase */
#time-investing-question-box .gold-tagline{
  letter-spacing: 0.035em !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}
#time-investing-question-box .gold-standard{
  white-space: nowrap !important; /* keep IN THE FIRST PLACE !? together */
}
/* Lock it visually before CTA */
#time-investing-question-box{
  margin-top: 18px !important;
  margin-bottom: 28px !important;
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.85),
    0 0 18px rgba(212,175,55,0.55) !important;
}

/* === Style block #11 === */
/* === GLOBAL FOCUS (refined): keep strong outline for links/buttons only === */
/* Inputs already have their own red focus styling; avoid double borders. */
a:focus-visible, button:focus-visible{
  outline: 4px solid rgba(220,38,38,0.85) !important;
  outline-offset: 3px !important;
  border-radius: 8px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: none !important;
}

/* === Style block #12 === */
/* === Quiet footer line (professional polish) === */
.quiet-footer{
  text-align:center;
  font-size: 0.95rem;
  font-weight: 700;
  color:#374151;
  margin: 22px auto 10px;
  max-width: 980px;
  padding: 0 12px;
}
@media print{
  .quiet-footer{ display:none !important; }
}

/* === Style block #13 === */
/* =========================
   SUMMARY CHART FINAL OVERRIDES (safe + late in cascade)
   Goals:
   1) Body values regular-weight (except headers + far-right column)
   2) Consistent thin WHITE horizontal gridlines
   3) Restore live yellow row highlight while dragging sliders for ALL columns
   ========================= */

/* 1) Regular-weight numbers in summary body cells */
#resultsCard #resultsBody td{
  font-weight: 400 !important; /* regular */
}

/* Keep headers bold (already) */
#resultsCard thead th{
  font-weight: 900 !important;
}

/* Far-right column (Net Cumulative) stays bold + WHITE text (even when not highlighted) */
#resultsCard #resultsBody td:nth-child(7){
  font-weight: 900 !important;
  color: #ffffff !important;
}

/* 2) Consistent white horizontal gridlines (thin) */
#resultsCard table thead th,
#resultsCard table tbody td{
  border-top: 1px solid #ffffff !important;
  border-bottom: 1px solid #ffffff !important;
}

/* Keep vertical gridlines black and consistent */
#resultsCard table thead th,
#resultsCard table tbody td{
  border-left: 1px solid #000000 !important;
  border-right: 1px solid #000000 !important;
}

/* 3) LIVE SLIDER HIGHLIGHT: force the entire active row yellow across ALL columns */
#resultsBody.slider-dragging tr.row-selected td,
#resultsBody.slider-dragging tr.row-selected-ann2 td,
#resultsBody.slider-dragging tr.row-selected-ann3 td,
#resultsBody.slider-dragging tr.row-selected-ann4 td{
  background: #ffeb3b !important; /* yellow */
  color: #000000 !important;      /* black text on yellow */
  font-weight: 900 !important;    /* bold while adjusting */
}

/* Ensure any nested spans (badges) stay readable on yellow */
#resultsBody.slider-dragging tr.row-selected td *,
#resultsBody.slider-dragging tr.row-selected-ann2 td *,
#resultsBody.slider-dragging tr.row-selected-ann3 td *,
#resultsBody.slider-dragging tr.row-selected-ann4 td *{
  color: #000000 !important;
}

/* After dragging ends, restore far-right column to white text */
#resultsBody:not(.slider-dragging) td:nth-child(7){
  color: #ffffff !important;
}

/* === Style block #14 === */
/* === Spacing polish: more distance between Lifestyle box and Summary chart above === */
#lifestyle-question-box{
  margin-top: 70px !important;
}

/* === Style block #15 === */
/* === Final layout polish: center Save a Scenario between gold line boxes === */
.scenario-tools{
  margin-top: 60px !important;
  margin-bottom: 60px !important;
}

/* === Style block #16 === */
/* =========================
   FIX: Live slider yellow row highlight across ALL columns
   - Ensures Gross Monthly + Net Monthly highlight correctly
   - Ensures text turns BOLD + BLACK during drag (including far-right column)
   ========================= */

/* Only keep far-right column white WHEN NOT dragging */
#resultsCard #resultsBody:not(.slider-dragging) td:nth-child(7){
  color: #ffffff !important;
  font-weight: 900 !important;
}

/* During slider drag: force entire active row yellow + bold black text */
#resultsCard #resultsBody.slider-dragging tr.row-selected td,
#resultsCard #resultsBody.slider-dragging tr.row-selected-ann2 td,
#resultsCard #resultsBody.slider-dragging tr.row-selected-ann3 td,
#resultsCard #resultsBody.slider-dragging tr.row-selected-ann4 td{
  background: #ffeb3b !important;
  color: #000000 !important;
  font-weight: 900 !important;
}

/* Explicitly override any per-column conditional rules for Gross/Net Monthly (cols 4 & 5) while dragging */
#resultsCard #resultsBody.slider-dragging tr.row-selected td:nth-child(4),
#resultsCard #resultsBody.slider-dragging tr.row-selected td:nth-child(5),
#resultsCard #resultsBody.slider-dragging tr.row-selected-ann2 td:nth-child(4),
#resultsCard #resultsBody.slider-dragging tr.row-selected-ann2 td:nth-child(5),
#resultsCard #resultsBody.slider-dragging tr.row-selected-ann3 td:nth-child(4),
#resultsCard #resultsBody.slider-dragging tr.row-selected-ann3 td:nth-child(5),
#resultsCard #resultsBody.slider-dragging tr.row-selected-ann4 td:nth-child(4),
#resultsCard #resultsBody.slider-dragging tr.row-selected-ann4 td:nth-child(5){
  background: #ffeb3b !important;
  color: #000000 !important;
  font-weight: 900 !important;
}

/* Ensure far-right column is ALSO black during drag (it was being forced white) */
#resultsCard #resultsBody.slider-dragging tr.row-selected td:nth-child(7),
#resultsCard #resultsBody.slider-dragging tr.row-selected-ann2 td:nth-child(7),
#resultsCard #resultsBody.slider-dragging tr.row-selected-ann3 td:nth-child(7),
#resultsCard #resultsBody.slider-dragging tr.row-selected-ann4 td:nth-child(7){
  color: #000000 !important;
  font-weight: 900 !important;
}

/* Keep badges readable on yellow */
#resultsCard #resultsBody.slider-dragging tr.row-selected td *,
#resultsCard #resultsBody.slider-dragging tr.row-selected-ann2 td *,
#resultsCard #resultsBody.slider-dragging tr.row-selected-ann3 td *,
#resultsCard #resultsBody.slider-dragging tr.row-selected-ann4 td *{
  color: #000000 !important;
}

/* === Style block #17 === */
/* =========================
   SUMMARY CHART GRIDLINES + FINAL COLUMN SEPARATOR
   1) Consistent BLACK gridlines throughout (no white)
   2) Distinct final column: thick YELLOW vertical divider before it
   ========================= */

/* Force all summary cell borders to thin BLACK */
#resultsCard table th,
#resultsCard table td{
  border-top: 1px solid #000 !important;
  border-bottom: 1px solid #000 !important;
  border-left: 1px solid #000 !important;
  border-right: 1px solid #000 !important;
}

/* Strong divider between Net Annual (col 6) and Net Cumulative (col 7) */
#resultsCard table thead th:nth-child(6),
#resultsCard table tbody td:nth-child(6){
  border-right: 8px solid #ffeb3b !important; /* thick yellow divider */
}
#resultsCard table thead th:nth-child(7),
#resultsCard table tbody td:nth-child(7){
  border-left: 8px solid #ffeb3b !important;  /* matching left edge */
}

/* Optional: make the final column feel slightly separated (subtle) */
#resultsCard table thead th:nth-child(7){
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.15);
}

/* === Style block #18 === */
/* =========================
   FLOATING FINAL COLUMN (Net Cumulative...) — Refinements
   - Yellow separator 2x width
   - Hide TOP table border + header-bottom border crossing the yellow separator
   - Hide BOTTOM table border crossing the yellow separator
   - Add a mid-weight BLACK inner border on the left edge of the final column
   ========================= */

/* 1) Yellow separator 2x width (was 8px -> now 16px) */
#resultsCard table thead th:nth-child(6),
#resultsCard table tbody td:nth-child(6){
  border-right: 16px solid #ffeb3b !important;
}
#resultsCard table thead th:nth-child(7),
#resultsCard table tbody td:nth-child(7){
  border-left: 16px solid #ffeb3b !important;
  position: relative !important; /* for inner black line */
}

/* 2) Hide TOP table border crossing the separator (on cols 6 & 7) */
#resultsCard table thead th:nth-child(6),
#resultsCard table thead th:nth-child(7){
  border-top: none !important;
}

/* 3) Hide the header-bottom border crossing the separator (on cols 6 & 7) */
#resultsCard table thead th:nth-child(6),
#resultsCard table thead th:nth-child(7){
  border-bottom: none !important;
}

/* 4) Hide the table bottom border crossing the separator (last row, cols 6 & 7) */
#resultsCard table tbody tr:last-child td:nth-child(6),
#resultsCard table tbody tr:last-child td:nth-child(7){
  border-bottom: none !important;
}

/* 5) Add a mid-weight BLACK inner border just inside the final column (to the right of the yellow) */
#resultsCard table thead th:nth-child(7)::before,
#resultsCard table tbody td:nth-child(7)::before{
  content: "";
  position: absolute;
  left: 0;               /* immediately inside the yellow border */
  top: 0;
  bottom: 0;
  width: 3px;            /* mid-weight black line */
  background: #000;
  pointer-events: none;
}

/* === Style block #19 === */
/* =========================
   FINAL FLOATING FIX:
   Remove ALL horizontal borders crossing the yellow separator
   for the Net Annual (col 6) and Net Cumulative (col 7) columns
   ========================= */

/* Kill horizontal borders for columns 6 & 7 entirely */
#resultsCard table thead th:nth-child(6),
#resultsCard table thead th:nth-child(7),
#resultsCard table tbody td:nth-child(6),
#resultsCard table tbody td:nth-child(7){
  border-top: none !important;
  border-bottom: none !important;
}

/* === Style block #20 === */
/* === Traffic light legend (top placement) === */
.colors-legend{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  margin: 10px auto 16px;
  padding: 10px 18px;
  max-width: 900px;
  background: #ffffff;
  border: 3px solid #000;
  border-radius: 999px;
  font-weight: 900;
  font-size: 1.05rem;
}
.legend-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.legend-dot{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-block;
  border: 2px solid rgba(0,0,0,0.4);
}
.surplus-dot{ background:#16a34a; }
.shortfall-dot{ background:#dc2626; }
.adjust-dot{ background:#facc15; }

/* === Style block #21 === */
/* =========================
   FINAL TYPOGRAPHY + GRID REFINEMENT
   ========================= */

/* 1) Improve character spacing for emphasis GOLD words */
.gold-standard{
  letter-spacing: 0.14em !important;   /* wider, premium spacing */
}

/* Ensure LIFESTYLE also benefits if wrapped separately */
#lifestyle-question-box .gold-standard{
  letter-spacing: 0.18em !important;   /* slightly stronger for LIFESTYLE */
}

/* 2) Remove horizontal borders ONLY for column 6 (Net Annual Salary) */
#resultsCard table thead th:nth-child(6),
#resultsCard table tbody td:nth-child(6){
  border-top: none !important;
  border-bottom: none !important;
}

/* === Style block #22 === */
/* =========================
   HARD OVERRIDE: Column 6 horizontal borders OFF (all states)
   ========================= */

/* Header cell */
#resultsCard table thead th:nth-child(6){
  border-top: none !important;
  border-bottom: none !important;
}

/* Body cells */
#resultsCard table tbody td:nth-child(6){
  border-top: none !important;
  border-bottom: none !important;
}

/* While slider is dragging (row highlight state) */
#resultsCard #resultsBody.slider-dragging tr td:nth-child(6){
  border-top: none !important;
  border-bottom: none !important;
}

/* === Style block #23 === */
/* =========================
   SEPARATOR COLOR UPDATE:
   Floating separator is now BLACK
   ========================= */

/* Thick black separator between column 6 and 7 */
#resultsCard table thead th:nth-child(6),
#resultsCard table tbody td:nth-child(6){
  border-right: 16px solid #000000 !important;
}

#resultsCard table thead th:nth-child(7),
#resultsCard table tbody td:nth-child(7){
  border-left: 16px solid #000000 !important;
}

/* Disable any inner accent line */
#resultsCard table thead th:nth-child(7)::before,
#resultsCard table tbody td:nth-child(7)::before{
  display: none !important;
}

/* === Style block #24 === */
/* =========================
   GLOBAL SUMMARY GRIDLINE LOCK
   Ensures all cell gridlines are consistently thin BLACK,
   regardless of earlier cascade rules.
   Preserves thick black separator between col 6 and 7.
   ========================= */

#resultsCard table{
  border-collapse: collapse !important;
}

/* Hard-lock gridlines for ALL summary cells */
#resultsCard table thead th,
#resultsCard table tbody td{
  border: 1px solid #000000 !important;   /* consistent thin black */
}

/* Re-apply the thick separator between Net Annual (col 6) and Net Cumulative (col 7) */
#resultsCard table thead th:nth-child(6),
#resultsCard table tbody td:nth-child(6){
  border-right: 16px solid #000000 !important;
}
#resultsCard table thead th:nth-child(7),
#resultsCard table tbody td:nth-child(7){
  border-left: 16px solid #000000 !important;
}

/* Keep live slider highlight working (does not change borders) */
#resultsCard #resultsBody.slider-dragging tr.row-selected td,
#resultsCard #resultsBody.slider-dragging tr.row-selected-ann2 td,
#resultsCard #resultsBody.slider-dragging tr.row-selected-ann3 td,
#resultsCard #resultsBody.slider-dragging tr.row-selected-ann4 td{
  background: #ffeb3b !important;
  color: #000000 !important;
  font-weight: 900 !important;
}
#resultsCard #resultsBody.slider-dragging tr.row-selected td *,
#resultsCard #resultsBody.slider-dragging tr.row-selected-ann2 td *,
#resultsCard #resultsBody.slider-dragging tr.row-selected-ann3 td *,
#resultsCard #resultsBody.slider-dragging tr.row-selected-ann4 td *{
  color: #000000 !important;
}

/* === Style block #25 === */
/* Emphasize "Slider Updates Instantly" */
.slider-updates-instantly{
  color: #c00000 !important;
  font-size: 1.35em !important; /* emphasized but no wrap */
  font-weight: 900;
  white-space: nowrap;         /* never wrap */
}

/* === Style block #26 === */
/* === Summary header grouping row (GROSS / NET) === */
#resultsCard table thead .group-header-row th{
  border: 1px solid #000 !important;
  font-weight: 950 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.14em;
  padding: 6px 4px !important;
}
#resultsCard table thead .group-empty{
  background: #f3f4f6 !important;
}
#resultsCard table thead .group-gross{
  background: #4b5563 !important; /* deep green */
  color: #ffeb3b !important;
}
#resultsCard table thead .group-net{
  background: #1e40af !important; /* deep blue */
  color: #ffffff !important;
}

/* === Style block #27 === */
/* =========================
   SUMMARY TABLE LAYOUT TUNING
   - Narrow S1/S2 Age columns
   - Equalize remaining 5 columns (3-7), ignoring the thick separator before col 7
   - Update GROSS SALARY group header + its two subheaders styling
   ========================= */

/* Keep summary table predictable for width control */
#resultsCard table{
  table-layout: fixed !important;
  width: 100% !important;
}

/* Narrow S1/S2 age columns equally */
#resultsCard table thead th:nth-child(1),
#resultsCard table tbody td:nth-child(1),
#resultsCard table thead th:nth-child(2),
#resultsCard table tbody td:nth-child(2){
  width: 8% !important;
}

/* Equalize remaining 5 columns (3–7) */
#resultsCard table thead th:nth-child(3),
#resultsCard table tbody td:nth-child(3),
#resultsCard table thead th:nth-child(4),
#resultsCard table tbody td:nth-child(4),
#resultsCard table thead th:nth-child(5),
#resultsCard table tbody td:nth-child(5),
#resultsCard table thead th:nth-child(6),
#resultsCard table tbody td:nth-child(6),
#resultsCard table thead th:nth-child(7),
#resultsCard table tbody td:nth-child(7){
  width: 16.8% !important;
}

/* Group header row: GROSS SALARY styling */
#resultsCard table thead .group-gross{
  background: #4b5563 !important; /* dark grey */
  color: #000000 !important;      /* black text */
}

/* Make the two subheaders under GROSS (cols 3-4 in second header row) lighter grey */
#resultsCard table thead tr:nth-child(2) th:nth-child(3),
#resultsCard table thead tr:nth-child(2) th:nth-child(4){
  background: #d1d5db !important; /* light grey */
  color: #000000 !important;
  font-weight: 900 !important;
}

/* Keep NET subheaders readable (optional: slightly distinct, but not requested) */

/* === Style block #28 === */
/* =========================
   SUMMARY COLUMN WIDTHS (COLGROUP-LOCK)
   - Narrow S1/S2 Age
   - Equalize the remaining 5 columns (3–7)
   ========================= */
#resultsCard table{
  table-layout: fixed !important;
  width: 100% !important;
}

/* Reset any legacy per-cell widths so colgroup wins */
#resultsCard table thead th,
#resultsCard table tbody td{
  width: auto !important;
}

/* Set exact column widths */
#resultsCard table colgroup col.col-s1-age,
#resultsCard table colgroup col.col-s2-age{
  width: 6% !important;
}
#resultsCard table colgroup col.col-gross-annual,
#resultsCard table colgroup col.col-gross-monthly,
#resultsCard table colgroup col.col-net-annual-label,
#resultsCard table colgroup col.col-net-monthly-label,
#resultsCard table colgroup col.col-cumulative{
  width: 17.6% !important; /* (100 - 12) / 5 */
}

/* === Style block #29 === */
/* =========================
   GROSS SALARY HEADER COLOR REFINEMENT
   ========================= */

/* GROSS SALARY group header */
#resultsCard table thead .group-gross{
  background: #4b5563 !important; /* dark grey */
  color: #000000 !important;      /* black text */
}

/* GROSS subheaders: Annual + Monthly (columns 3 and 4 in 2nd header row) */
#resultsCard table thead tr:nth-child(2) th:nth-child(3),
#resultsCard table thead tr:nth-child(2) th:nth-child(4){
  background: #d1d5db !important; /* lighter grey */
  color: #000000 !important;
  font-weight: 900 !important;
}

/* === Style block #30 === */
/* =========================
   NET SALARY HEADER ALIGNMENT
   Make NET Annual match NET Monthly styling
   ========================= */

/* NET subheaders: Annual + Monthly (columns 5 and 6 in 2nd header row) */
#resultsCard table thead tr:nth-child(2) th:nth-child(5),
#resultsCard table thead tr:nth-child(2) th:nth-child(6){
  background: #5b21b6 !important; /* same purple as Net Monthly */
  color: #ffffff !important;      /* white font */
  font-weight: 900 !important;
}

/* === Style block #31 === */
/* =========================
   HEADER COLOR HIERARCHY REFINEMENT
   ========================= */

/* GROSS SALARY group header: darkest grey + white font */
#resultsCard table thead .group-gross{
  background: #374151 !important; /* darker grey */
  color: #ffffff !important;      /* white font */
  font-weight: 900 !important;
}

/* GROSS subheaders remain lighter grey */
#resultsCard table thead tr:nth-child(2) th:nth-child(3),
#resultsCard table thead tr:nth-child(2) th:nth-child(4){
  background: #d1d5db !important; /* lighter grey */
  color: #000000 !important;
}

/* NET SALARY group header (unchanged, reference color assumed purple) */
#resultsCard table thead .group-net{
  background: #4c1d95 !important; /* deep purple */
  color: #ffffff !important;
  font-weight: 900 !important;
}

/* NET subheaders lighter than NET SALARY header */
#resultsCard table thead tr:nth-child(2) th:nth-child(5),
#resultsCard table thead tr:nth-child(2) th:nth-child(6){
  background: #7c3aed !important; /* lighter purple */
  color: #ffffff !important;
  font-weight: 900 !important;
}

/* === Style block #32 === */
/* =========================
   GROUP HEADER POLISH
   ========================= */

/* Subtle top/bottom borders to frame the header block */
#resultsCard table thead .group-header-row th{
  border-top: 3px solid #000 !important;
  border-bottom: 3px solid #000 !important;
}

/* Add a subtle divider between group row and subheader row */
#resultsCard table thead tr:nth-child(2) th{
  border-top: 2px solid #000 !important;
  border-bottom: 3px solid #000 !important;
}

/* FORCE GROSS SALARY to dark grey (win over any earlier pink) */
#resultsCard table thead .group-gross{
  background: #374151 !important; /* dark grey */
  color: #ffffff !important;      /* white font */
}

/* Make the left group cell (above S1/S2) a useful block */
#resultsCard table thead .group-ages{
  background: #d1d5db !important;
  color: #000000 !important;
  font-weight: 950 !important;
  letter-spacing: 0.18em !important;
}

/* Keep the empty right spacer cell consistent (above cumulative) */
#resultsCard table thead .group-header-row th.group-empty:not(.group-ages){
  background: #111827 !important;
  color: #ffffff !important;
}

/* === Style block #33 === */
/* Bulletproof override: ensure GROSS SALARY band is dark grey */
#resultsCard table thead tr.group-header-row th.group-gross,
#resultsCard table thead tr.group-header-row th.group-gross *{
  background: #374151 !important;
  color: #ffffff !important;
}

/* === Style block #34 === */
/* === Header polish: top-right "NET CUMULATIVE" label === */
#resultsCard table thead .group-cum{
  background: #111827 !important;
  color: #ffffff !important;
  font-weight: 950 !important;
  letter-spacing: 0.10em !important;
  white-space: nowrap;
}

/* === Style block #35 === */
/* =========================
   HEADER VISUAL CONNECTION TWEAKS
   ========================= */

/* GROSS subheaders (Annual / Monthly): slightly darker than before */
#resultsCard table thead tr:nth-child(2) th:nth-child(3),
#resultsCard table thead tr:nth-child(2) th:nth-child(4){
  background: #c7cbd1 !important; /* slightly darker light grey */
}

/* GROSS Annual: yellow font */
#resultsCard table thead tr:nth-child(2) th:nth-child(3){
  color: #facc15 !important; /* yellow */
}

/* GROSS Monthly: keep black font */
#resultsCard table thead tr:nth-child(2) th:nth-child(4){
  color: #000000 !important;
}

/* NET Annual (col 5): yellow font */
#resultsCard table thead tr:nth-child(2) th:nth-child(5){
  color: #facc15 !important; /* yellow */
}

/* NET Monthly (col 6): black font */
#resultsCard table thead tr:nth-child(2) th:nth-child(6){
  color: #000000 !important;
}

/* === Style block #36 === */
/* =========================
   HIGH-CONTRAST GROSS SUBHEADERS
   ========================= */

/* Darken GROSS subheader boxes (Annual / Monthly) */
#resultsCard table thead tr:nth-child(2) th:nth-child(3),
#resultsCard table thead tr:nth-child(2) th:nth-child(4){
  background: #6b7280 !important; /* solid medium-dark grey */
}

/* GROSS Annual: strong yellow */
#resultsCard table thead tr:nth-child(2) th:nth-child(3){
  color: #fde047 !important; /* bright yellow */
}

/* GROSS Monthly: light bright green */
#resultsCard table thead tr:nth-child(2) th:nth-child(4){
  color: #86efac !important; /* bright light green */
  font-weight: 900 !important;
}

/* === Style block #37 === */
/* =========================
   FINAL HEADER COLOR HARMONIZATION
   ========================= */

/* Darken GROSS SALARY group header further */
#resultsCard table thead .group-gross{
  background: #1f2937 !important; /* very dark grey */
  color: #ffffff !important;
}

/* NET SALARY subheaders: match GROSS Annual/Monthly scheme */

/* NET Annual: bright yellow */
#resultsCard table thead tr:nth-child(2) th:nth-child(5){
  background: #6b7280 !important; /* same dark grey fill */
  color: #fde047 !important;      /* bright yellow */
  font-weight: 900 !important;
}

/* NET Monthly: bright light green */
#resultsCard table thead tr:nth-child(2) th:nth-child(6){
  background: #6b7280 !important; /* same dark grey fill */
  color: #86efac !important;      /* bright green */
  font-weight: 900 !important;
}

/* === Style block #38 === */
/* =========================
   HEADER FINISHING TOUCHES
   ========================= */

/* GROSS SALARY group header: solid black */
#resultsCard table thead tr.group-header-row th.group-gross{
  background: #000000 !important;
  color: #ffffff !important;
}

/* White vertical divider between GROSS SALARY and NET SALARY (group header row) */
#resultsCard table thead tr.group-header-row th.group-gross{
  border-right: 4px solid #ffffff !important;
}
#resultsCard table thead tr.group-header-row th.group-net{
  border-left: 4px solid #ffffff !important;
}

/* NET CUMULATIVE header: grey fill, reduced font size */
#resultsCard table thead tr.group-header-row th.group-cum{
  background: #6b7280 !important; /* neutral grey */
  color: #ffffff !important;
  font-size: 0.75rem !important;  /* fit within spacing */
  letter-spacing: 0.08em !important;
  padding: 6px 4px !important;
}

/* === Style block #39 === */
/* =========================
   GROUP SEPARATORS: finish the lines cleanly
   1) Complete the NET→CUMULATIVE separator in the TOP group header row
   2) Extend the GROSS↔NET white divider all the way down the table (thicker)
   ========================= */

/* (1) Make the NET→CUM separator appear complete in the group header row */
#resultsCard table thead tr.group-header-row th.group-net{
  border-right: 16px solid #000000 !important; /* match the black separator before cumulative */
}
#resultsCard table thead tr.group-header-row th.group-cum{
  border-left: 16px solid #000000 !important;  /* match the black separator */
}

/* (2) Extend the GROSS↔NET divider down the entire chart (between col 4 and col 5) */
#resultsCard table thead th:nth-child(4),
#resultsCard table tbody td:nth-child(4){
  border-right: 8px solid #ffffff !important;  /* 2x thicker for visibility */
}
#resultsCard table thead th:nth-child(5),
#resultsCard table tbody td:nth-child(5){
  border-left: 8px solid #ffffff !important;   /* 2x thicker for visibility */
}

/* Ensure the divider remains visible even during slider-drag highlight */
#resultsCard #resultsBody.slider-dragging tr td:nth-child(4),
#resultsCard #resultsBody.slider-dragging tr td:nth-child(5){
  border-right-color: #ffffff !important;
  border-left-color: #ffffff !important;
}

/* === Style block #40 === */
/* =========================
   SEPARATOR & HEADER REFINEMENT
   ========================= */

/* Replace GROSS↔NET divider with black separator (half width of cumulative) */
/* Cumulative separator is 16px; use 8px here */
#resultsCard table thead th:nth-child(4),
#resultsCard table tbody td:nth-child(4){
  border-right: 8px solid #000000 !important;
}
#resultsCard table thead th:nth-child(5),
#resultsCard table tbody td:nth-child(5){
  border-left: 8px solid #000000 !important;
}

/* Keep divider visible during slider-drag highlight */
#resultsCard #resultsBody.slider-dragging tr td:nth-child(4),
#resultsCard #resultsBody.slider-dragging tr td:nth-child(5){
  border-right-color: #000000 !important;
  border-left-color: #000000 !important;
}

/* Ensure group header row matches the same GROSS↔NET separator */
#resultsCard table thead tr.group-header-row th.group-gross{
  border-right: 8px solid #000000 !important;
}
#resultsCard table thead tr.group-header-row th.group-net{
  border-left: 8px solid #000000 !important;
}

/* Decrease NET CUMULATIVE header font size to ensure visibility */
#resultsCard table thead tr.group-header-row th.group-cum{
  font-size: 0.68rem !important;
  line-height: 1.1 !important;
  padding: 6px 4px !important;
  white-space: nowrap;
}

/* === Style block #41 === */
/* =========================
   NET CUMULATIVE LABEL COLOR CODING
   ========================= */

/* Match positive (green) and negative (red) chart semantics */
#resultsCard table thead .cum-surplus{
  color: #facc15 !important; /* same green as positive fills */
  font-weight: 900;
}

#resultsCard table thead .cum-deficit{
  color: #dc2626 !important; /* same red as negative fills */
  font-weight: 900;
}

/* === Style block #42 === */
/* =========================
   DARKER SURPLUS GREEN (HIGHER CONTRAST)
   ========================= */

#resultsCard table thead .cum-surplus{
  color: #15803d !important; /* darker green for readability */
  font-weight: 900;
}

/* === Style block #43 === */
/* =========================
   SIDECAR: Tilt annuity tabs + keep all 4 on one row (more open space)
   ========================= */

/* Force the 4 tabs into a single row inside the sidecar */
.annuity-tabs{
  flex-wrap: nowrap !important;
  gap: 6px !important;
  justify-content: space-between !important;
  margin: 12px 0 18px !important;
}

/* Make each tab share the row evenly and stay compact */
.annuity-tab{
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 6px 6px !important;
  font-size: 0.78rem !important;
  line-height: 1.05 !important;
  text-align: center !important;

  /* Tilt UP to the right (left lower, right higher) */
  transform: rotate(-12deg);
  transform-origin: left bottom;
}

/* Prevent hover from changing layout due to transforms/shadows */
.annuity-tab:hover{
  transform: rotate(-12deg) translateY(-1px);
}

/* Slightly reduce the active outline so it doesn't collide when rotated */
.annuity-tab[aria-selected="true"]{
  outline-width: 2px !important;
}

/* === Style block #44 === */
/* =========================
   SIDECAR TABS: angled rounded-rects + no wrapping
   ========================= */

/* Keep one row */
.annuity-tabs{
  flex-wrap: nowrap !important;
  gap: 8px !important;
  justify-content: space-between !important;
}

/* Rounded rectangles instead of pills + no-wrap labels */
.annuity-tab{
  flex: 1 1 0 !important;
  min-width: 0 !important;

  border-radius: 14px !important;   /* rounded rectangle */
  padding: 8px 8px !important;
  font-size: 0.8rem !important;
  line-height: 1.0 !important;

  white-space: nowrap !important;   /* never wrap */
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  transform: rotate(-14deg) !important; /* slightly stronger angle */
  transform-origin: left bottom !important;
}

/* Make inner text centered and compact */
.annuity-tab br{ display:none !important; } /* prevent accidental line breaks */

/* === Style block #45 === */
/* =========================
   SIDECAR TABS: compact ovals with numbers only
   ========================= */
.annuity-tabs{
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 12px 0 18px !important;
}

.annuity-tab{
  flex: 0 0 auto !important;
  width: 64px !important;
  height: 48px !important;
  padding: 0 !important;

  border-radius: 999px !important;   /* oval / pill */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 1.25rem !important;     /* “fill” the oval */
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;

  transform: rotate(-10deg) !important;  /* keep the angled vibe */
  transform-origin: left bottom !important;
}

/* Keep hover consistent with the angle */
.annuity-tab:hover{
  transform: rotate(-10deg) translateY(-1px) !important;
}

/* === Style block #46 === */
/* =========================
   SIDECAR TABS: final clean ovals, level, compact
   ========================= */

/* Ensure tabs stay on one row and inside the card */
.annuity-tabs{
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: 10px 0 14px !important;
}

/* Small, even, level ovals */
.annuity-tab{
  flex: 0 0 auto !important;
  width: 56px !important;
  height: 40px !important;
  padding: 0 !important;

  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 1.05rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;

  white-space: nowrap !important;
  overflow: hidden !important;

  transform: none !important; /* remove tilt */
}

/* Prevent hover/focus from shifting layout */
.annuity-tab:hover,
.annuity-tab:focus{
  transform: none !important;
}

/* === Style block #47 === */
/* =========================
   SIDECAR TABS: fit all 4 ovals + spin animation
   ========================= */

/* Tighter row */
.annuity-tabs{
  gap: 6px !important;
  padding: 0 4px !important;
  justify-content: center !important;
}

/* Slightly smaller ovals so all four fit */
.annuity-tab{
  width: 50px !important;
  height: 36px !important;
  font-size: 0.98rem !important;
}

/* Spin 3 times on click */
@keyframes annuitySpin3{
  from { transform: rotate(0deg); }
  to   { transform: rotate(1080deg); } /* 3 full turns */
}
.annuity-tab.spin3{
  animation: annuitySpin3 0.85s ease-in-out;
}

/* === Style block #48 === */
/* =========================
   SIDECAR SPACING: move annuity buttons downward
   ========================= */
.annuity-tabs{
  margin-top: 26px !important;  /* push buttons further down */
}

/* === Style block #49 === */
/* =========================
   SIDECAR SPACING: further lower annuity buttons
   ========================= */
.annuity-tabs{
  margin-top: 44px !important;  /* more breathing room above annuity buttons */
}

/* === Style block #50 === */
/* =========================
   SIDECAR SPACING: center the 4 annuity buttons between subtitle and panel
   ========================= */

/* Remove any exaggerated top margin from earlier tweaks by overriding explicitly */
.sidecar .annuity-tabs{
  margin-top: 18px !important;     /* space from subtitle */
  margin-bottom: 18px !important;  /* space to annuity panel */
}

/* Keep the subtitle snug so the spacing is controlled by annuity-tabs */
.sidecar .sidecar-sub{
  margin-bottom: 0 !important;
}

/* Ensure the annuity panel doesn't add extra top margin */
.sidecar .annuity-folder{
  margin-top: 0 !important;
}

/* === Style block #51 === */
/* === Summary flags: Death markers (black flag with white text) === */
.salary-badge.badge-death{
  background: #000000 !important;
  border: 2px solid #000000 !important;
  color: #ffffff !important;
  font-weight: 950 !important;
}
.salary-badge.badge-death::before{ border-right-color: #000000 !important; }
.salary-badge.badge-death::after{ border-left-color: #000000 !important; }

/* === Style block #52 === */
/* =========================
   Net Cumulative column formatting (Summary)
   - White background always
   - Green text for surplus, red text for deficit
   - Always black horizontal gridlines
   ========================= */
#resultsCard table thead th,
#resultsCard table tbody td{
  border-top: 1px solid #000000 !important;
  border-bottom: 1px solid #000000 !important;
}
#resultsCard #resultsBody td:nth-child(7){
  background: #ffffff !important;
}
#resultsCard #resultsBody td:nth-child(7).surplus{
  color: #15803d !important;
  font-weight: 900 !important;
}
#resultsCard #resultsBody td:nth-child(7).shortfall,
#resultsCard #resultsBody td:nth-child(7).zero-benefit{
  color: #b91c1c !important;
  font-weight: 900 !important;
}

/* === Style block #53 === */
/* =========================
   FIX: Force visible BLACK horizontal gridlines in Summary table (all columns)
   ========================= */

/* Hard lock horizontal lines everywhere in the summary table */
#resultsCard table thead th,
#resultsCard table tbody td{
  border-top: 1px solid #000000 !important;
  border-bottom: 1px solid #000000 !important;
}

/* Also ensure no column-specific rules can remove them */
#resultsCard table thead th:nth-child(1),
#resultsCard table thead th:nth-child(2),
#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),
#resultsCard table thead th:nth-child(7),
#resultsCard table tbody td:nth-child(1),
#resultsCard table tbody td:nth-child(2),
#resultsCard table tbody td:nth-child(3),
#resultsCard table tbody td:nth-child(4),
#resultsCard table tbody td:nth-child(5),
#resultsCard table tbody td:nth-child(6),
#resultsCard table tbody td:nth-child(7){
  border-top: 1px solid #000000 !important;
  border-bottom: 1px solid #000000 !important;
}

/* Keep the thick vertical separators as-is, but do not let them affect horizontals */

/* === Style block #54 === */
/* =========================
   NET CUMULATIVE HEADER: white fill, black font
   ========================= */
#resultsCard table thead tr.group-header-row th.group-cum{
  background: #ffffff !important;
  color: #000000 !important;
  border: 3px solid #000000 !important;
}

/* === Style block #55 === */
/* =========================
   SIDECAR SPACING: add gap between tab buttons and the annuity panel
   (Do NOT move the buttons; push the panel down)
   ========================= */
.sidecar .annuity-folder{
  margin-top: 26px !important;  /* increases space below the #1–#4 buttons */
}

/* === Style block #56 === */
/* =========================
   Guided Tour Step 3: highlight Spouse 1 age row
   ========================= */
.tour-step-3-active #s1_age_now{
  outline: 4px solid #dc2626 !important;
  box-shadow:
    0 0 0 4px rgba(220,38,38,0.55),
    0 0 18px rgba(220,38,38,0.85) !important;
  border-radius: 10px;
}

/* === Style block #57 === */
/* === TOUR (Step 4): red glow around "Scroll Down to Start Age" picker === */
.tour-step-4-active #ann1_age_picker{
  border: 5px solid #dc2626 !important;
  box-shadow: 0 0 0 6px rgba(220,38,38,0.22), 0 0 26px rgba(220,38,38,0.60) !important;
}

/* === Style block #58 === */
/* Guided Tour emphasis */
.tour-deficit{
  color: #dc2626 !important;
  font-weight: 900;
}

/* === Style block #59 === */

/* =========================
   PRINT/PDF OVERRIDES (STRONG)
   Fix: invasive row highlights + fit-to-portrait
   ========================= */
@media print {
  /* Disable interactive "selected row" highlights that show blue/red lines/yellow wash */
  #resultsBody tr.row-selected,
  #resultsBody tr.row-selected-ann2,
  #resultsBody tr.row-selected-ann3,
  #resultsBody tr.row-selected-ann4,
  #resultsBody tr.row-selected-ann5,
  #resultsBody tr.row-selected-ann6,
  #resultsBody tr[class^="row-selected"]{
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
  }
  #resultsBody tr.row-selected td,
  #resultsBody tr.row-selected-ann2 td,
  #resultsBody tr.row-selected-ann3 td,
  #resultsBody tr.row-selected-ann4 td,
  #resultsBody tr.row-selected-ann5 td,
  #resultsBody tr.row-selected-ann6 td,
  #resultsBody tr[class^="row-selected"] td{
    background-color: inherit !important;
  }

  /* Hide guided-tour overlays/arrows/buttons during print */
  .tour-overlay, .tour-arrow, .tour-arrow-black, .tour-step, .guided-tour,
  #takeGuidedTourButton, #tourArrow, #tourArrowBlack {
    display: none !important;
  }

  /* Portrait fit: density is now handled by the booklet builder */
  /* Font-size and padding controlled by pb-summary/pb-detail classes */

  /* Slightly slimmer divider between Net Monthly and Net Cumulative for print */
  #resultsCard table tbody td:nth-child(6){
    border-right: 4px solid #000000 !important;
  }
  #resultsCard table thead th:nth-child(7),
  #resultsCard table tbody td:nth-child(7){
    border-left: 4px solid #000000 !important;
  }

  /* No scale — booklet fitToOnePage handles scaling */
}


/* === Style block #60 === */
/* === PRINT: repeating footer on every PDF page (includes Last Calculated) === */
@media print{
  #printBooklet .pb-footer{
    position: fixed;
    left: 10mm;
    right: 10mm;
    bottom: 6mm;
    font-size: 9pt;
    color: #666;
    text-align: center;
    z-index: 9999;
  }
  #printBooklet .pb-footer .sep{ margin: 0 6px; }
  #printBooklet .pb-footer .lc{ font-weight: 700; color:#444; }
}

/* === Style block #61 === */
/* === PRINT: Chart and Comparison Pages === */
@media print {
  /* Chart Page - Force visible even if hidden on screen */
  .pdf-chart-page,
  #chartSection {
    display: block !important;
    visibility: visible !important;
    page-break-before: always;
    page-break-after: always;
    margin: 0 auto;
    padding: 20px;
    max-width: 100%;
    background: white !important;
    border: none !important;
    opacity: 1 !important;
  }
  
  .pdf-chart-page button,
  #chartSection button {
    display: none !important;
  }
  
  .pdf-chart-page h3,
  #chartSection h3 {
    text-align: center;
    margin-bottom: 20px;
  }
  
  #retirementChart {
    display: block !important;
    visibility: visible !important;
    margin: 0 auto;
    max-width: 90%;
    height: auto;
  }
  
  /* Comparison Page - Force visible even if hidden on screen */
  .pdf-comparison-page,
  #compareModal {
    display: block !important;
    visibility: visible !important;
    page-break-before: always;
    page-break-after: always;
    position: static !important;
    background: white !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
  }
  
  .pdf-comparison-page > div,
  #compareModal > div {
    max-width: 100% !important;
    background: white !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 auto !important;
    padding: 20px !important;
  }
  
  .pdf-comparison-page button,
  #compareModal button {
    display: none !important;
  }
  
  .pdf-comparison-page select,
  #compareModal select {
    display: none !important;
  }
  
  .pdf-comparison-page h2,
  #compareModal h2 {
    text-align: center;
    margin-bottom: 20px;
  }
  
  #comparisonResults {
    min-height: 0 !important;
  }
  
  #comparisonResults table {
    width: 100%;
    font-size: 0.75rem;
  }
  
  /* Hide the scenario selection section in print */
  #compareModal .scenario-selection,
  #compareModal > div > div:first-child {
    display: none !important;
  }
}

/* === Style block #62 === */
/* === TOUR (Step 4 only): flashing "Choose a Starting Age" button inside the red glow box === */
.tour-choose-age-btn{
  display: none; /* default hidden */
  width: 100%;
  margin: 8px 0 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 3px solid #000;
  font-size: 0.85rem; /* Reduced font size to prevent bumping */
  font-weight: 900;
  cursor: pointer;
  text-align: center;
  background: #ffeb3b;
  color: #000;
}

@keyframes tourChooseAgeFlash{
  0%   { transform: scale(1);   box-shadow: 0 0 0 0 rgba(220,38,38,0.0); filter: brightness(1); }
  50%  { transform: scale(1.03); box-shadow: 0 0 0 8px rgba(220,38,38,0.55); filter: brightness(1.06); }
  100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(220,38,38,0.0); filter: brightness(1); }
}

.tour-step-4-active #ann1_age_picker #tourChooseStartAgeBtn{
  display: block !important;
  animation: tourChooseAgeFlash 1.05s ease-in-out infinite;
}

.tour-step-4-active #ann1_age_picker #tourChooseStartAgeBtn:focus-visible{
  outline: 4px solid rgba(220,38,38,0.85);
  outline-offset: 2px;
}

/* === Style block #63 === */
/* === Guided Tour Arrow Pulse === */
@keyframes tourArrowPulse {
  0%   { stroke-opacity: 0.35; stroke-width: 2; }
  50%  { stroke-opacity: 1;    stroke-width: 5; }
  100% { stroke-opacity: 0.35; stroke-width: 2; }
}
.tour-arrow-pulse {
  animation: tourArrowPulse 1.2s ease-in-out infinite;
}

/* === Style block #64 === */
/* === TOUR STEP 4: Yellow arrow flags (SVG) === */
.tour-arrow-flag rect{
  fill: #ffeb3b;
  stroke: #000000;
  stroke-width: 2;
  rx: 10;
  ry: 10;
}
.tour-arrow-flag text{
  fill: #000000;
  font-weight: 900;
  font-size: 12px;
  dominant-baseline: middle;
  text-anchor: middle;
}

/* === Style block #65 === */
/* === PULSE: Guided Walkthrough CTA (Start Guided Walkthrough button) === */
@keyframes guidedPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.65); }
  50% { transform: scale(1.06); box-shadow: 0 0 0 14px rgba(22, 163, 74, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.65); }
}
#startTourBtn { animation: guidedPulse 0.75s ease-in-out infinite; }
#startTourBtn:hover,
#startTourBtn:focus,
#startTourBtn:focus-visible { animation: none; }

/* === Style block #66 === */
/* FIXED CARD & BUTTON COMPACTING */
button, .calculate-btn {
  white-space: nowrap !important;
  padding: 6px 12px !important;
  line-height: 1.1 !important;
  height: auto !important;
}
.cards, .card-container {
  align-items: flex-start !important;
}
.card {
  height: auto !important;
}

/* === Style block #67 === */
/* FIX V2: spouse header removal + tighter alignment */
.cards, .card-container, .row, .cards-row {
  align-items: flex-start !important;
}
.card, .card-panel {
  height: auto !important;
  margin-top: 0 !important;
}
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6 {
  margin-top: 0 !important;
}
/* Button: force single-line and reduce height */
button, .calculate-btn {
  white-space: nowrap !important;
  padding: 5px 10px !important;
  line-height: 1.0 !important;
  height: auto !important;
}
.calc-btn-text { white-space: nowrap !important; display: inline-block; }

/* === Style block #68 === */
/* FIX V3: tighten header spacing + button single-line */
.subtitle, .tagline, .subheader, #subtitle, #tagline {
  margin-bottom: 6px !important;
  padding-bottom: 0 !important;
}
h1, .title, #title {
  margin-bottom: 6px !important;
}
/* Often the KEEP YOUR SALARY box is in a hero container; reduce its top margin */
.keep-salary, .keepSalary, .keep-salary-box, .salary-box, #keepSalaryBox, .hero-box, .hero, .banner {
  margin-top: 6px !important;
}
/* Button: single line + smaller height */
button, .calculate-btn, .calc-button, #calculateBtn {
  white-space: nowrap !important;
  padding: 4px 10px !important;
  line-height: 1.0 !important;
  height: auto !important;
}
.calc-btn-text { white-space: nowrap !important; display: inline-block; }

/* === Style block #69 === */
/* FIX V4: tighten space under subtitle + single-line calc button */
.what-this-does{ margin: 8px auto 0px !important; }
h1[style*="line-height:1.1"]{ margin-top: 0 !important; }
#calcBtn{
  padding: 6px 12px !important;
  min-width: unset !important;
  line-height: 1.0 !important;
  height: auto !important;
  white-space: nowrap !important;
}
#calcBtn .calc-btn-text{ white-space: nowrap !important; display:inline-block !important; }

/* === Style block #70 === */
/* FIX V5: smaller calculate button */
#calcBtn,
button.calculate-btn {
  padding: 3px 10px !important;
  line-height: 0.95 !important;
  font-size: 14px !important;
  height: auto !important;
}
#calcBtn .calc-btn-text{
  white-space: nowrap !important;
  display:inline-block !important;
}

/* === Style block #71 === */
/* FIX V6: FORCE smaller green CALCULATE button */
#calcBtn,
button#calcBtn,
button.calculate-btn,
.green-btn,
button[style*="background"] {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  line-height: 0.9 !important;
  font-size: 14px !important;
  height: 30px !important;
  min-height: 30px !important;
}
#calcBtn .calc-btn-text {
  line-height: 0.9 !important;
  white-space: nowrap !important;
}

/* === Style block #72 === */
/* FIX V7: align spouse card bottom border with Household card */
.spouse-card { padding-bottom: 22px !important; }

/* === Style block #73 === */
/* FIX V7: Spouse 2 annuity label weight */
.spouse2 .s2-regular { font-weight: 400 !important; }

/* === Style block #74 === */
/* FIX V11: spouse subtitle inline without breaking 3-column layout */
.card.spouse1 .monthly-label,
.card.spouse2 .monthly-label { display: none !important; }

.spouse-subtitle-inline{
  font-weight: 600;
  font-size: 0.78em;
  margin-left: 10px;
  white-space: nowrap;
}

/* Keep cards in a 3-column grid */
.cards { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.cards .card { min-width: 0 !important; }

/* === Style block #75 === */
/* FIX V12: reduce spouse header font sizes so text fits cleanly */
.card.spouse1 h2,
.card.spouse2 h2 {
  font-size: 1.15em !important;
}

.card.spouse1 .spouse-subtitle-inline,
.card.spouse2 .spouse-subtitle-inline {
  font-size: 0.7em !important;
  font-weight: 500 !important;
}

/* === Style block #76 === */
/* FIX V13: tighten Household explanatory text wrapping */
.household-card .what-if,
.household-card .social-security-note,
.household-card label,
.household-card p {
  line-height: 1.25 !important;
}
/* Constrain width slightly so the sentence wraps to two lines */
.household-card .social-security-note {
  max-width: 95%;
}

/* === Style block #77 === */
/* FIX V14: force Social Security line to two lines */
.household-card label[for*="Social"],
.household-card .ss-drop-label,
.household-card label {
  font-size: 0.9em !important;
  line-height: 1.2 !important;
}

/* === Style block #78 === */
/* FIX V15: force Social Security checkbox text to exactly 2 lines */
.household-card label[for*="Social"],
.household-card label:has(input[type="checkbox"]) {
  font-size: 0.78em !important;
  line-height: 1.15 !important;
  max-width: 100% !important;
}

/* === Style block #79 === */
/* FIX V17: CALCULATE word color */
.calc-word {
  color: #FFD700 !important; /* yellow */
}

/* === Style block #80 === */
@media print {
  /* Simple approach - let the JavaScript clone handle visibility */
  #tspWorksheetModal {
    display: none !important;
  }
  
  #section1Overlay,
  #section2Overlay,
  #section3Overlay,
  #section4Overlay {
    display: none !important;
  }
  
  /* The printTempContainer will be shown by JavaScript */
}

/* === Style block #81 === */
@media print {
  /* Simple approach - let the JavaScript clone handle visibility */
  #tspWorksheetModalS2 {
    display: none !important;
  }
  
  /* The printTempContainerS2 will be shown by JavaScript */
}

/* === Style block #82 === */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
@media (max-width: 700px){
  input, select, textarea, button{ font-size: 16px !important; }
  button, .tour-btn, .help-action-btn, .help-modal-close, .sidecar-detail-btn,
  .house-quick-links a, .house-action-calc, .house-action-pdf, #helpFab{
    min-height: 48px !important;
  }
  .house-quick-links a{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    border: 2px solid #000 !important;
    background: #fff !important;
    text-decoration: none !important;
  }
  body{ background:#f4f4f7 !important; }
  .page{ padding: 14px 12px 26px !important; }

  h1{ font-size: 2.0rem !important; }
  h1 span[style*="font-size:4rem"]{ font-size: 2.5rem !important; }

  .hero-subtitle-box{ padding: 10px 12px !important; }
  .trust-badge{ margin-bottom: 14px !important; }

  .cards{ gap: 12px !important; }
  .card{ padding: 12px 12px 12px !important; box-shadow: 0 6px 16px rgba(0,0,0,0.10) !important; }

  .card.household, .card.spouse1, .card.spouse2{ border-width: 3px !important; }

  .field-row{ grid-template-columns: 1fr !important; gap: 6px !important; }
  label{ display:block !important; }
  input[type="text"], input[type="number"], input[type="email"], input[type="tel"], select{
    padding: 12px 12px !important;
    border-radius: 12px !important;
  }

  .card.household{ position: static !important; }
  .card.household .house-quick-links{
    position: static !important;
    display:flex !important;
    flex-wrap: wrap !important;
    justify-content:center !important;
    gap: 10px !important;
    margin: 10px 0 8px !important;
    white-space: normal !important;
  }
  .card.household .house-quick-links .link-sep{ display:none !important; }

  .gold-tagline-box{ margin: 18px auto !important; }
  .-heading{ margin: 18px 0 12px !important; }

  #resultsCard .table-wrapper,
  #detailResultsCard .table-wrapper{
    max-height: 62vh !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #tourToast.tour-toast{
    left: 10px !important;
    right: 10px !important;
    max-width: none !important;
    bottom: 10px !important;
  }
  .tour-btn{ min-width: 110px !important; }
}
@media (max-width: 560px){
  .-grid{ display:block !important; }
  .sidecar{ width:auto !important; max-width:none !important; }
}
@supports (padding: max(0px)){
  @media (max-width: 700px){
    .page{
      padding-left: max(12px, env(safe-area-inset-left)) !important;
      padding-right: max(12px, env(safe-area-inset-right)) !important;
      padding-bottom: max(26px, env(safe-area-inset-bottom)) !important;
    }
    #tourToast.tour-toast{
      bottom: max(10px, env(safe-area-inset-bottom)) !important;
    }
  }
}

/* === Style block #83 === */
@media (max-width: 700px){
  @media (hover: none) and (pointer: coarse){
    .-card tbody tr:hover td{
      animation: none !important;
      box-shadow: none !important;
    }
    .annuity-tab:hover,
    .btn:hover,
    button:hover{
      transform: none !important;
      box-shadow: none !important;
      filter: none !important;
    }
  }

  #resultsCard .table-wrapper,
  #detailResultsCard .table-wrapper{
    overscroll-behavior: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: auto !important;
  }

  .-grid{ display: block !important; }
  .-main{ width: 100% !important; }
  .sidecar{
    width: 100% !important;
    max-width: none !important;
    margin-top: 14px !important;
    position: static !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #resultsCard{ border-radius: 14px !important; }
  #resultsCard .table-wrapper{
    max-height: 54vh !important;
    border-radius: 12px !important;
  }

  #resultsCard table{ font-size: 0.72rem !important; }
  #resultsCard th, #resultsCard td{ padding: 6px 4px !important; }

  #detailResultsCard table{ font-size: 0.58rem !important; }
  #detailResultsCard th, #detailResultsCard td{ padding: 4px 3px !important; }

  .sidecar h3{ font-size: 1.1rem !important; }
  .annuity-tabs{ gap: 8px !important; justify-content: center !important; }
  .annuity-tab{
    width: 56px !important;
    height: 40px !important;
    font-size: 1.05rem !important;
    min-height: 40px !important;
  }
  .sidecar-detail-btn{
    min-height: 48px !important;
    padding: 10px 14px !important;
    font-size: 1rem !important;
  }
  .age-list{ max-height: 200px !important; }
  .age-list label{
    max-width: 240px !important;
    padding: 6px 8px !important;
  }
  .age-list input[type="radio"]{ transform: scale(1.15); }

  #tourToast.tour-toast{
    left: 10px !important;
    right: 10px !important;
    max-width: none !important;
    bottom: 12px !important;
  }

  #backToTopBtn{
    right: 12px !important;
    bottom: 12px !important;
    transform: none !important;
    opacity: 0.9 !important;
  }

  .card, .-card, .sidecar{
    box-shadow: 0 6px 16px rgba(0,0,0,0.10) !important;
  }

  @supports (padding: max(0px)){
    .page{
      padding-left: max(12px, env(safe-area-inset-left)) !important;
      padding-right: max(12px, env(safe-area-inset-right)) !important;
      padding-bottom: max(26px, env(safe-area-inset-bottom)) !important;
    }
    #tourToast.tour-toast{
      bottom: max(12px, env(safe-area-inset-bottom)) !important;
    }
  }
}

/* === Style block #84 === */
@media (max-width: 700px){
  /* Collapsible cards */
  .mobile-collapse-toggle{
    width: 100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 12px 12px !important;
    border-radius: 12px !important;
    border: 3px solid #000 !important;
    font-weight: 950 !important;
    cursor: pointer !important;
    margin: 8px 0 10px !important;
    background: #ffeb3b !important;
    color: #000 !important;
    min-height: 48px !important;
  }
  .mobile-collapse-toggle:focus-visible{
    outline: 4px solid rgba(220,38,38,0.85) !important;
    outline-offset: 3px !important;
  }
  .mobile-collapse-toggle .chev{
    font-size: 1.05rem;
    font-weight: 950;
    line-height: 1;
  }

  /* When collapsed, hide everything inside the card except the title and toggle button */
  .card.mobile-collapsed > :not(h2):not(.mobile-collapse-toggle){
    display: none !important;
  }

  /* Make collapsed cards feel lighter */
  .card.mobile-collapsed{
    padding-bottom: 10px !important;
  }

  /* Jump to Fine Tune button */
  #jumpToFineTuneBtn{
    position: fixed;
    left: 12px;
    bottom: 12px;
    z-index: 6000;
    border: 3px solid #000;
    background: #166534;
    color: #ffffff;
    border-radius: 999px;
    padding: 12px 14px;
    font-weight: 950;
    cursor: pointer;
    min-height: 48px;
    box-shadow: 0 10px 22px rgba(0,0,0,0.20);
    display: none; /* enabled by JS on mobile only */
  }
  #jumpToFineTuneBtn:focus-visible{
    outline: 4px solid rgba(220,38,38,0.85);
    outline-offset: 3px;
  }
  #jumpToFineTuneBtn:hover{ filter: brightness(1.02); }

  /* Safe-area support */
  @supports (padding: max(0px)){
    #jumpToFineTuneBtn{
      left: max(12px, env(safe-area-inset-left));
      bottom: max(12px, env(safe-area-inset-bottom));
    }
  }

  /* Avoid overlap with back-to-top button by nudging Top to the right on mobile */
  #backToTopBtn{
    right: 12px !important;
    bottom: 12px !important;
  }
}

/* === Style block #85 === */
@media (max-width: 700px){
  /* Allow the highlighted text to wrap naturally */
  h1 span,
  .hero-title span{
    white-space: normal !important;
    display: inline-block;
    line-height: 1.05;
  }

  /* Insert a line break before the green emphasis so KEEP starts line 2 */
  h1 span::before,
  .hero-title span::before{
    content: "\A";
    white-space: pre;
  }
}

/* === Style block #86 === */
@media (max-width: 700px){
  /* Tighten spacing between the normal line and the emphasized line */
  h1,
  .hero-title{
    line-height: 1.15 !important;
  }

  /* Reduce margin contribution around the emphasized span */
  h1 span,
  .hero-title span{
    margin-top: -0.25em !important;
  }
}

/* === Style block #87 === */
@media (max-width: 700px){
  .mobile-landscape-note{
    margin-top: 6px;
    font-size: 0.85rem;
    font-weight: 800;
    color: #b91c1c;
    text-align: center;
  }
}

/* === Style block #88 === */
@media (max-width: 700px){
  #mobileLandscapeNote{
    margin: 6px auto 0;
    font-size: 0.88rem;
    font-weight: 900;
    color: #b91c1c;
    text-align: center;
    max-width: 980px;
    padding: 0 12px;
  }
}

/* === Style block #89 === */
@media (max-width: 900px){
  /* Force the emphasized phrase onto its own line on all mobile orientations */
  h1 span,
  .hero-title span{
    display: block !important;
    margin-top: -0.15em !important;
    line-height: 1.05 !important;
  }

  /* Tighten overall title spacing so block-level span feels intentional */
  h1,
  .hero-title{
    line-height: 1.15 !important;
  }
}

/* === Style block #90 === */
@media (max-width: 900px){
  #mobileLandscapeNote{
    margin: 6px auto 0;
    font-size: 0.88rem;
    font-weight: 900;
    color: #b91c1c;
    text-align: center;
    max-width: 980px;
    padding: 0 12px;
  }
}

/* === Style block #91 === */
@media (max-width: 900px) and (orientation: portrait){
  #mobileLandscapeNote{
    display: block !important;
  }
}
@media (max-width: 900px) and (orientation: landscape){
  #mobileLandscapeNote{
    display: none !important;
  }
}

/* === Style block #92 === */
/* 1) Landscape-only font scaling for phones/small tablets */
@media (max-width: 900px) and (orientation: landscape){
  /* Hero sizing */
  h1{ font-size: 1.8rem !important; }
  h1 span[style*="font-size:4rem"]{ font-size: 2.2rem !important; }
  .hero-subtitle-box{ padding: 8px 12px !important; }
  .trust-badge{ font-size: 0.88rem !important; }
  .what-this-does{ font-size: 0.95rem !important; }
  /* Reduce vertical stack height */
  .page{ padding-top: 10px !important; }
}

/* 2) Hide the portrait-only disclaimer permanently after dismissal */
@media (max-width: 900px){
  body.landscape-note-dismissed #mobileLandscapeNote{ display: none !important; }
}

/* 3) Add-to-Home-Screen banners */
#a2hsBanner{
  display:none;
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 12px;
  z-index: 6500;
  border: 3px solid #000;
  border-radius: 14px;
  background: #ffeb3b;
  color: #000;
  padding: 10px 12px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.20);
  font-weight: 900;
}
#a2hsBanner .row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
#a2hsBanner .msg{
  font-size: 0.92rem;
  line-height: 1.2;
}
#a2hsBanner button{
  min-width: unset;
  border-radius: 12px;
  border: 2px solid #000;
  background: #166534;
  color: #fff;
  padding: 10px 12px;
  font-weight: 950;
  cursor: pointer;
}
#a2hsBanner button.secondary{
  background: #ffffff;
  color: #111;
}

@supports (padding: max(0px)){
  #a2hsBanner{
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
  }
}

/* === Style block #93 === */
  #a2hsBanner{ display:none !important; }

/* === Style block #94 === */
/* Hide the header title area + the yellow X close button */
#helpModalTitle,
#helpModalClose{
  display: none !important;
}

/* Reduce header padding since title is removed */
.help-modal-header{
  padding: 10px 12px !important;
  border-bottom: 3px solid #000 !important;
  justify-content: center !important;
}

/* When we move buttons into the header, make them fit nicely */
.help-modal-header .help-actions{
  margin: 0 !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;
}

/* Slightly compact the buttons in the header */
.help-modal-header .help-action-btn{
  min-width: 0 !important;
  padding: 10px 12px !important;
}

/* Remove the "Instructions..." subtitle line too (it lives in the header block) */
.help-modal-header div[style*="Quick overview"]{
  display: none !important;
}

/* Keep body spacing tidy now that actions are moved */
.help-modal-body{
  padding-top: 12px !important;
}