/* ============================================ */
/* BASE: Core layout, cards, responsive         */
/* ============================================ */

/* === Style block #1 === */
  /* Pulse animation for trial banner instruction box */
  @keyframes pulseBox {
    0%, 100% { 
      transform: scale(1); 
      box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    }
    50% { 
      transform: scale(1.03); 
      box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.2);
    }
  }
  .pulse-instruction-box {
    animation: pulseBox 1.5s ease-in-out infinite;
  }

  @keyframes goldPulseGlow {
    0%, 100% { box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.3), 0 0 0 4px rgba(234, 179, 8, 0.1); }
    50% { box-shadow: 0 0 0 3px rgba(234, 179, 8, 1), 0 0 0 6px rgba(234, 179, 8, 0.5); }
  }
  .gold-pulse-glow {
    animation: goldPulseGlow 1.5s ease-in-out infinite;
  }
  @keyframes greenPulseGlow {
    0% { box-shadow: 0 0 0 2px #4ade80, 0 0 0 4px rgba(74, 222, 128, 0.5); }
    50% { box-shadow: 0 0 0 4px #4ade80, 0 0 0 8px rgba(74, 222, 128, 0.4), 0 0 0 12px rgba(74, 222, 128, 0.2); }
    100% { box-shadow: 0 0 0 2px #4ade80, 0 0 0 4px rgba(74, 222, 128, 0.5); }
  }
  .green-pulse-glow {
    animation: greenPulseGlow 1.5s ease-in-out infinite;
  }
  @keyframes silverPulseGlow {
    0% { box-shadow: 0 0 0 2px #c0c0c0, 0 0 0 4px rgba(192, 192, 192, 0.5); }
    50% { box-shadow: 0 0 0 4px #c0c0c0, 0 0 0 8px rgba(192, 192, 192, 0.4), 0 0 0 12px rgba(192, 192, 192, 0.2); }
    100% { box-shadow: 0 0 0 2px #c0c0c0, 0 0 0 4px rgba(192, 192, 192, 0.5); }
  }
  .silver-pulse-glow {
    animation: silverPulseGlow 1.5s ease-in-out infinite;
  }
  @keyframes redPulseGlow {
    0% { box-shadow: 0 0 0 2px #dc2626, 0 0 0 4px rgba(220, 38, 38, 0.5); }
    50% { box-shadow: 0 0 0 4px #dc2626, 0 0 0 8px rgba(220, 38, 38, 0.4), 0 0 0 12px rgba(220, 38, 38, 0.2); }
    100% { box-shadow: 0 0 0 2px #dc2626, 0 0 0 4px rgba(220, 38, 38, 0.5); }
  }
  .red-pulse-glow {
    animation: redPulseGlow 1.5s ease-in-out infinite;
  }
  @keyframes yellowPulseGlow {
    0% { box-shadow: 0 0 0 1px #fef08a, 0 0 0 3px rgba(254, 240, 138, 0.4); }
    50% { box-shadow: 0 0 0 2px #fef08a, 0 0 0 5px rgba(254, 240, 138, 0.3), 0 0 0 8px rgba(254, 240, 138, 0.15); }
    100% { box-shadow: 0 0 0 1px #fef08a, 0 0 0 3px rgba(254, 240, 138, 0.4); }
  }
  .yellow-pulse-glow {
    animation: yellowPulseGlow 1.5s ease-in-out infinite;
  }
  @keyframes bronzePulseGlow {
    0% { box-shadow: 0 0 0 2px #b45309, 0 0 0 4px rgba(180, 83, 9, 0.5); }
    50% { box-shadow: 0 0 0 4px #b45309, 0 0 0 8px rgba(180, 83, 9, 0.4), 0 0 0 12px rgba(180, 83, 9, 0.2); }
    100% { box-shadow: 0 0 0 2px #b45309, 0 0 0 4px rgba(180, 83, 9, 0.5); }
  }
  .bronze-pulse-glow {
    animation: bronzePulseGlow 1.5s ease-in-out infinite;
  }
  .hide-spin::-webkit-outer-spin-button,
  .hide-spin::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .hide-spin {
    -moz-appearance: textfield;
  }
  #worksheetCurrentTSP::placeholder {
    color: #0e7490;
    opacity: 0.7;
    font-weight: 900;
  }
  #worksheetLowestPremiumCarrier::placeholder {
    color: #6b21a8;
    opacity: 0.7;
    font-weight: 900;
  }
  #worksheetLowerPremiumCount::placeholder {
    color: #6b21a8;
    opacity: 0.7;
    font-weight: 900;
  }
  #worksheetMonthlyBenefit::placeholder {
    color: #6b21a8;
    opacity: 0.7;
    font-weight: 900;
  }
  #worksheetS4AnnualContribution::placeholder {
    color: #374151;
    opacity: 0.7;
    font-weight: 700;
    font-size: 0.7rem;
  }
  
  /* MOBILE FIRST - CRITICAL OVERRIDE */
@media (max-width: 900px) {
  div#mainCards,
  div.cards,
  .cards-wrapper .cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 20px !important;
    padding: 0 10px !important;
  }
  
  .card.household,
  .card.spouse1,
  .card.spouse2 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto 20px auto !important;
  }
}
  
  /* Center "See Detailed Chart View" under Summary */
.detail-toggle-centered{
  width:100%;
  display:flex !important;
  justify-content:center !important;
  align-items:center;
  margin: 18px 0 28px;
}
  /* SHARE WITH JAMES BLOCK STYLES */
.share-box {
  border: 2px solid #15803d;
  border-radius: 14px;
  padding: 16px;
  margin: 20px auto;
  max-width: 600px;
  background: #f0fdf4; /* soft green tint */
  text-align: center;
}

#shareWithJamesBtn {
  background:#16a34a;
  color:white;
  border:2px solid #14532d;
  padding:10px 28px;
  border-radius:999px;
  font-size:1rem;
  font-weight:700;
  cursor:pointer;
  min-width:260px;
  text-align:center;
  transition: all 0.25s ease;
}

#shareWithJamesBtn:hover {
  background:#15803d;  /* darker hover */
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

#shareWithJamesBtn:focus {
  outline:none;
  box-shadow: 0 0 0 4px rgba(34,197,94,0.5); /* soft green glow */
}

.share-input {
  padding:6px 12px;
  border-radius:999px;
  border:1px solid #9ca3af;
  font-size:0.9rem;
  min-width:200px;
}

/* FORCE Age column in detailed view to be narrow */
#detailResultsCard table colgroup col.age-col {
  width: 45px !important;   /* nice and tight */
  max-width: 45px !important;
  min-width: 45px !important;
}

:root {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  margin: 0;
  padding: 0;
  background: #f4f4f7;
  color: #222;
}

.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0px 16px 48px;
}

h1 {
  font-size: 2.8rem;
  font-weight: 800;
  margin: 0 0 14px;
  text-align: center;
  letter-spacing: 1px;
}

.subtitle {
  text-align: center;
  margin-bottom: 8px;
  color: #000;          /* darker + stronger */
  font-size: 0.95rem;
  font-weight: 600;
}

.contact-line {
  text-align: center;
  margin: 0 0 18px;
  color: #b91c1c;
  font-size: 1.35rem;
  font-weight: 700;
}

/* Heading above summary chart */
.-heading {
  text-align: center;
  font-size: 1.75rem;   /* enlarged */
  font-weight: 800;
  color: #222;
  margin: 28px 0 22px;
}

.cards-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-bottom: 12px;
}

.cards {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 34px;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
}

/* Make all cards equal height */
.card {
  height: 100%;
  display: flex;
  flex-direction: column;
}


/* Widen Spouse 1 card to fit WS button */
.card.spouse1 {
  width: 240px !important;
  min-width: 240px !important;
}


/* Reduce spacing in household card to compensate for removed button */
.card.household .field-row,
.card.household .field {
  margin-bottom: 5px;
}

.card.household .house-subheading {
  margin: 2px 0 6px !important;
}

/* Remove bottom margin from last elements in all cards - AGGRESSIVE */
.card .field-row:last-of-type,
.card .note:last-child,
.card > div:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Remove any extra spacing at the end of spouse cards */
.card.spouse1 > div:last-of-type,
.card.spouse2 > div:last-of-type {
  margin-bottom: 0 !important;
}

/* Tighten up the overall card bottom padding even more */
.card {
  padding-bottom: 8px !important;
}

@media (max-width: 900px) {
  #mainCards {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 0 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Hide Ben Franklin on mobile */
  #benFranklinContainer {
    display: none !important;
  }
  
  /* Hide left sidebar buttons on mobile */
  #leftSidebarButtons {
    display: none !important;
  }
  
  /* Remove fixed widths on cards */
  .card.household,
  .card.spouse1,
  .card.spouse2 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 16px !important;
  }
  
  /* Larger touch targets for inputs */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  .house-input,
  .blue-focus,
  .pink-input,
  .green-input {
    min-height: 44px !important;
    font-size: 16px !important;
    padding: 8px 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Make spouse 1 inputs full width on mobile */
  .card.spouse1 input[type="number"],
  .card.spouse1 input[type="text"] {
    width: 100% !important;
  }
  
  /* Spouse 1 field rows full width */
  .card.spouse1 .field-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  
  /* Spouse 2 also full width */
  .card.spouse2 input {
    width: 100% !important;
  }
  
  /* Labels on top instead of side-by-side */
  .field-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  
  label {
    text-align: left !important;
    margin-bottom: 4px;
  }
  
  /* Better button sizing */
  button,
  .btn-primary,
  .btn-secondary {
    min-height: 50px !important;
    font-size: 1rem !important;
    padding: 12px 20px !important;
    width: 100%;
    max-width: 400px;
    margin: 10px auto;
  }
  
  /* Title sizing */
  h1 {
    font-size: 2rem !important;
    line-height: 1.2;
  }
  
  h2 {
    font-size: 1.3rem !important;
  }
  
  .subtitle {
    font-size: 0.9rem !important;
  }
  
  .contact-line {
    font-size: 1.1rem !important;
  }
  
  /* Share box mobile optimization */
  .share-box {
    padding: 20px 16px !important;
    margin: 20px 10px !important;
  }
  
  .share-input {
    min-width: 100% !important;
    width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important;
    margin-bottom: 10px;
  }
  
  #shareWithJamesBtn {
    width: 100% !important;
    min-width: 100% !important;
    font-size: 1.1rem !important;
    padding: 14px 20px !important;
  }
  
  /* Scenario tools mobile */
  .scenario-tools {
    padding: 16px !important;
  }
  
  .scenario-tools input,
  .scenario-tools select {
    min-height: 44px !important;
    font-size: 16px !important;
    width: 100% !important;
  }
  
  .scenario-tools-row {
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  .scenario-tools-row button {
    width: 100% !important;
    margin: 5px 0 !important;
  }
  
  /* House quick links stacked */
  .house-quick-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }
  
  .house-quick-links a {
    font-size: 1rem !important;
    padding: 10px 20px;
  }
  
  .link-sep {
    display: none;
  }
  
  /* Table responsiveness */
  #resultsCard table,
  #detailResultsCard table {
    font-size: 0.75rem !important;
  }
  
  #resultsCard th,
  #resultsCard td,
  #detailResultsCard th,
  #detailResultsCard td {
    padding: 6px 4px !important;
  }
  
  /* Chart container */
  #chartCard {
    padding: 10px !important;
  }
  
  canvas {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Mobile tooltip - larger and tap-friendly */
  .tooltip-icon {
    font-size: 1.1rem !important;
    padding: 8px;
    margin-left: 8px;
  }
  
  .tooltip-icon::after {
    min-width: 200px;
    max-width: 300px;
    font-size: 0.85rem !important;
    left: 50%;
    transform: translateX(-50%);
  }
  
  /* Show tooltip on tap (active state) for mobile */
  .tooltip-icon:active::after,
  .tooltip-icon:active::before {
    opacity: 1;
  }
}

/* Extra small phones */
@media (max-width: 400px) {
  h1 {
    font-size: 1.6rem !important;
  }
  
  .page {
    padding: 12px 8px !important;
  }
  
  .card {
    padding: 12px !important;
  }
  
  input,
  button {
    font-size: 14px !important;
  }
  
  #resultsCard table,
  #detailResultsCard table {
    font-size: 7.5pt !important;
  }
}

/* Force PDF to generate in landscape orientation */
@page {
  size: letter landscape;
  margin: 8mm;
}

.card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
  padding: 14px 16px 8px; /* Reduced bottom padding to 8px to remove dead space */
  border: 1px solid #e0e0e0;
  /* Removed duplicate height/display flex as defined above */
}

.card.household {
  border: 3px solid #000000 !important;
  background: #ffffff;
  width: 310px !important;
  min-width: 310px !important;
}

.card.spouse1 {
  border: 3px solid #2563eb !important;
  background: #eff6ff;
  padding: 14px 8px 8px 16px !important; /* Right padding matches Spouse 2 */
  width: 340px !important; /* Explicit width - widened for WS button spacing */
  max-width: 340px !important; /* Widened to create ~10px gap between WS and input */
  min-width: 340px !important; /* Also set min-width to force it */
}

.card.spouse2 {
  border: 3px solid #be185d !important;
  background: #fdf2f8;
  padding: 14px 8px 8px 8px !important; /* Standard padding */
  width: 195px !important;
  min-width: 195px !important;
  max-width: 195px !important;
}

/* Make Spouse 2 narrower - center inputs without label column */
.card.spouse2 .field-row {
  display: flex;
  justify-content: flex-start;
  padding-left: 20px;
}

.card.spouse2 label {
  display: none !important; /* Remove ALL labels completely - no exceptions */
}

/* FERS field row uses standard Spouse 2 centering */

/* Hide labels in Spouse 2 card only */
.card.spouse2 input {
  width: 77.5px !important;
  flex-shrink: 0;
  box-sizing: border-box;
}

.card.spouse1 h2,
.card.spouse2 h2 {
  text-align: center;
}

.card h2 {
  margin: 0 0 10px;
  font-size: 1.1rem;
  border-bottom: 1px solid #eee;
  padding-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}

.step-badge {
  display: none !important;
}

/* "(monthly)" label under Spouse headings */
.monthly-label {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
  margin: 4px 0 8px;
  color: #374151;
}

.field,
.field-row {
  font-size: 0.9rem;
  margin-bottom: 5px;
}

.field-row {
  display: grid;
  grid-template-columns: 1.15fr 0.56fr;
  gap: 8px;
  align-items: center;
}

/* Tighten spacing in Spouse 1 card - use grid layout like household */
.card.spouse1 .field-row {
  display: grid;
  grid-template-columns: 1fr 87.5px;
  gap: 0px;
  align-items: center;
  padding-right: 13px;
}

.card.spouse1 label {
  text-align: left;
  justify-self: start;
}

/* Make household card input boxes 30% smaller */
.card.household .field-row {
  grid-template-columns: 1.15fr 0.412fr;
}

/* Set Spouse 1 input boxes to 87.5px wide (25% increase) */
.card.spouse1 input[type="number"],
.card.spouse1 input[type="text"] {
  width: 87.5px !important;
  flex-shrink: 0;
  box-sizing: border-box;
}

label {
  font-weight: 500;
  color: #111;
}

input[type="number"],
input[type="text"] {
  padding: 6px 8px;
  border-radius: 4px;
  border: 1.5px solid #111;
  font-size: 0.9rem;
  width: 100%;
  box-sizing: border-box;
  color: #111;
  background: white;
  text-align: left;
}

/* Household 4 grey boxes, bold red text */
.house-input {
  background: #d1d5db !important;
  border-color: #4b5563 !important;
  color: #b91c1c !important;
  font-weight: 700 !important;
}

/* "What If:" sub-heading */
.house-subheading {
  margin: 12px 0 6px;
  font-size: 1.1rem;
  font-weight: 600;
  color: #4b5563;
}

.whatif-label {
  color: #6b7280;
  font-weight: 500;
  font-style: italic;
}
/* NEW: subtle note under What If section */
.whatif-note {
  font-size: 0.85rem;
  color: #6b7280;     /* same soft grey */
  margin: -4px 0 8px 0;
  text-align: left;
}
.house-whatif {
  background: #e5e7eb !important;
  border-color: #d1d5db !important;
  color: #374151 !important;
  font-weight: 500 !important;
}

.house-whatif-checkbox {
  transform: scale(1.1);
}

/* Spouse inputs */
.blue-focus {
  background: #dbeafe !important;
  border-color: #1d4ed8 !important;
  color: #1d4ed8 !important;
  font-weight: 700 !important;
}

.pink-input {
  background: #fce7f3 !important;
  border-color: #be185d !important;
  color: #111 !important;
  font-weight: 700 !important;
}

.green-input {
  background: #dcfce7 !important;
  border-color: #16a34a !important;
  color: #15803d !important;
  font-weight: 700 !important;
}

.note {
  font-size: 0.78rem;
  color: #777;
  margin-top: 4px;
}

.actions {
  max-width: 1100px;
  margin: 8px auto 18px;
  padding: 0 16px;
}

.actions-row {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.action-slot {
  flex: 1 1 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

button {
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 0.95rem;
  cursor: pointer;
  font-weight: 600;
  min-width: 160px;
  text-align: center;
}

.btn-primary { background: #2563eb; color: #fff; }
.btn-secondary { background: #e5e7eb; color: #111; }

#calcBtn { border: 2px solid #000; }
#sampleBtn { border: 2px solid #000; }
#resetBtn { border: 2px solid #b91c1c; }
#toggleDetailBtn,
#saveScenarioBtn,
#printReportBtn { padding: 6px 14px; font-size: 0.85rem; }

/* Generate PDF button: red fill, yellow font */
#printReportBtn {
  background: #b91c1c;
  color: #facc15;
  border: 2px solid #7f1d1d;
}
/* Yellow highlight and red glow for all primary buttons on keyboard focus */
#calcBtn:focus,
#calcBtn:focus-visible,
#resetBtn:focus,
#resetBtn:focus-visible,
#sampleBtn:focus,
#sampleBtn:focus-visible,
#shareWithJamesBtn:focus,
#shareWithJamesBtn:focus-visible,
#toggleDetailBtn:focus,
#toggleDetailBtn:focus-visible,
#printReportBtn:focus,
#printReportBtn:focus-visible,
#backToTopBtn:focus,
#backToTopBtn:focus-visible {
  outline: none;
  background-color: #fff8b3 !important;     /* yellow highlight */
  color: #000 !important;                    /* readable black text */
  border-color: #b91c1c !important;          /* red border */
  border-width: 4px !important;              /* bold border */
  box-shadow: 0 0 0 4px rgba(248,113,113,0.7); /* red glow */
}

/* Make the small subtext readable when Calculate button is focused */
.btn-subtext {
  color: #facc15;
  font-size: 0.75rem;
  font-weight: 700;
  margin-top: 4px;
}
#calcBtn:focus .btn-subtext,
#calcBtn:focus-visible .btn-subtext {
  color: #1e3a8a !important;  /* dark blue */
}

/* Yellow focus when tabbing to SS-drop checkbox and docs link */
#ss_drop_25:focus-visible,
.card.household .note a:focus-visible {
  background-color: #fff8b3;
  border-radius: 4px;
  box-shadow: 0 0 0 4px rgba(248,113,113,0.7);
  outline: none;
}
.-card {
  background: #fff;
  border-radius: 10px;
  padding: 14px 16px 16px;
  border: 1px solid #e0e0e0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

#resultsCard:focus-visible,
#detailResultsCard:focus-visible {
  outline: none;
  border: 4px solid #b91c1c;
  box-shadow: 0 0 0 4px rgba(248,113,113,0.6);
}

.table-wrapper {
  max-height: 380px;
  overflow: auto;
  border-radius: 8px;
  border: 3px solid #000000;
}

/* SUMMARY TABLE LAYOUT */
#resultsCard table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  table-layout: fixed;
}

/* Narrow age columns; make the four money columns equal width */
#resultsCard th:nth-child(1),
#resultsCard td:nth-child(1) { width: 10%; }           /* S1 Age */
#resultsCard th:nth-child(2),
#resultsCard td:nth-child(2) { width: 10%; }           /* S2 Age */

#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: 20%;  /* Gross / Net / Annual / Cumulative */
}

/* DETAILED TABLE LAYOUT */
#detailResultsCard table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.5rem;
  table-layout: fixed;
}

/* Smaller, non-wrapping headers for detailed view */
#detailResultsCard thead th {
  font-size: 0.6rem;
  white-space: nowrap;
}

#detailResultsCard th,
#detailResultsCard td {
  padding: 1px 2px;
  word-wrap: break-word;
  white-space: normal;
}

/* Narrow S1/S2 Age Columns */
#detailResultsCard th:nth-child(1),
#detailResultsCard td:nth-child(1),
#detailResultsCard th:nth-child(2),
#detailResultsCard td:nth-child(2) {
  width: 4% !important;
  max-width: 4% !important;
  min-width: 4% !important;
  white-space: nowrap !important;
}

thead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f9fafb;
  box-shadow: 0 3px 0 0 #000000; /* persistent black line */
}

th, td {
  border: 2px solid #6b7280;
  text-align: center;
}

/* Thicker header borders */
#resultsCard table thead th,
#detailResultsCard table thead th {
  border: 3px solid #000000 !important;
  border-bottom: 4px solid #000000 !important;
}

/* Strong horizontal lines */
.-card table tbody td {
  border-top: 2px solid #9ca3af !important;
  border-bottom: 2px solid #9ca3af !important;
}

/* SUMMARY header colors */
#resultsCard table thead th:nth-child(1) { background: #b4c9fb; } /* S1 Age */
#resultsCard table thead th:nth-child(2) { background: #f9b5b5; } /* S2 Age */
#resultsCard table thead th:nth-child(3) { background: #b9f2c8; } /* Gross */
#resultsCard table thead th:nth-child(4) { background: #f6de8c; } /* Net */
#resultsCard table thead th:nth-child(5) { background: #9ce9f5; } /* Annual */
#resultsCard table thead th:nth-child(6) { background: #d2c4ff; } /* Cumulative */

/* SUMMARY body backgrounds (match headers) */
#resultsBody td:nth-child(1) { background: #dbeafe; } /* S1 Age */
#resultsBody td:nth-child(2) { background: #fee2e2; } /* S2 Age */
#resultsBody td:nth-child(3) { background: #dcfce7; } /* Gross */
#resultsBody td:nth-child(4) { background: #fef3c7; } /* Net */
#resultsBody td:nth-child(5) { background: #cffafe; } /* Annual */
#resultsBody td:nth-child(6) { background: #ede9fe; } /* Cumulative */

/* Bold black numeric */
#resultsBody td,
#detailResultsBody td {
  font-weight: 700;
  color: #111;
}

/* Strong vertical divider between S1 and S2 in summary */
#resultsCard table thead th:nth-child(1),
#resultsBody td:nth-child(1) {
  border-right: 4px solid #000000 !important;
}

/* Divider between S2 and Gross Monthly */
#resultsCard table thead th:nth-child(2),
#resultsBody td:nth-child(2) {
  border-right: 4px solid #000000 !important;
}

/* DETAILED header colors (13 columns) */
#detailResultsCard table thead th:nth-child(1) { background: #e5e7eb; } /* S1 Age */
#detailResultsCard table thead th:nth-child(2) { background: #b4c9fb; } /* S2 Age */
#detailResultsCard table thead th:nth-child(3) { background: #f9b5b5; } /* Expenses */

#detailResultsCard table thead th:nth-child(4),
#detailResultsCard table thead th:nth-child(9)  { background: #bfdbfe; } /* FERS */
#detailResultsCard table thead th:nth-child(5),
#detailResultsCard table thead th:nth-child(10) { background: #a5f3fc; } /* TSP */
#detailResultsCard table thead th:nth-child(6),
#detailResultsCard table thead th:nth-child(11) { background: #ede9fe; } /* SS */
#detailResultsCard table thead th:nth-child(7),
#detailResultsCard table thead th:nth-child(8),
#detailResultsCard table thead th:nth-child(12),
#detailResultsCard table thead th:nth-child(13) { background: #bbf7d0; } /* Other */

#detailResultsBody td:nth-child(1)  { background: #f9fafb; } /* S1 Age */
#detailResultsBody td:nth-child(2)  { background: #dbeafe; } /* S2 Age */

#detailResultsBody td:nth-child(3) {
  background: #e5e7eb;              /* Expenses */
  color: #b91c1c !important;
  font-weight: 700;
}

#detailResultsBody td:nth-child(4),
#detailResultsBody td:nth-child(9)  { background: #eff6ff; } /* FERS */
#detailResultsBody td:nth-child(5),
#detailResultsBody td:nth-child(10) { background: #e0f2fe; } /* TSP */
#detailResultsBody td:nth-child(6),
#detailResultsBody td:nth-child(11) { background: #ede9fe; } /* SS */

#detailResultsBody td:nth-child(7),
#detailResultsBody td:nth-child(8),
#detailResultsBody td:nth-child(12),
#detailResultsBody td:nth-child(13) { background: #dcfce7; } /* Other incomes */

/* Strong border between S1 block and S2 block (between S1 Other 2 and S2 FERS) */
#detailResultsCard table thead th:nth-child(8),
#detailResultsBody td:nth-child(8) {
  border-right: 4px solid #000000 !important;
}

/* Divider between S2 and Expenses in detailed view */
#detailResultsCard table thead th:nth-child(2),
#detailResultsBody td:nth-child(2) {
  border-right: 4px solid #000000 !important;
}

/* Colors for summary: green/positive, red/negative/zero */
.surplus {
  color: #15803d !important;
  font-weight: 700 !important;
}
.shortfall {
  color: #b91c1c !important;
  font-weight: 700 !important;
}
.zero-benefit {
  color: #b91c1c !important;
  font-weight: 700 !important;
}
.still-working {
  background: #e5e7eb !important;
  color: #000 !important;
}

/* Hover highlight: bold red glow like inputs */
.-card tbody tr:hover td {
  background-color: #fff8b3 !important;
  border-color: #b91c1c !important;
  border-width: 3px !important;
  box-shadow: 0 0 0 6px rgba(248,113,113,0.7);
  animation: pulse 1.2s ease-in-out infinite;
  position: relative;
  z-index: 1;
}

/* Yellow tab highlight + red glow for inputs */
input.highlight-focus {
  background-color: #fff8b3 !important;
  border-color: #b91c1c !important;
  border-width: 4px !important;
  box-shadow: 0 0 0 0 rgba(248,113,113,0.7);
  animation: pulse 1.2s ease-in-out infinite;
  color: inherit !important;
}
@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(248,113,113,0.7);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(248,113,113,0);
  }
}
/* Current salary green input also gets yellow highlight */
#current_salary.highlight-focus {
  background-color: #fff8b3 !important;
  border-color: #b91c1c !important;
  border-width: 4px !important;
  box-shadow: 0 0 0 0 rgba(248,113,113,0.7);
  animation: pulse 1.2s ease-in-out infinite;
  color: #000 !important;
}
/* Override green background when highlighted */
input#current_salary.highlight-focus {
  background: #fff8b3 !important;
  border: 4px solid #b91c1c !important;
}
/* Yellow focus for checkbox, docs link, and Calculate button */
#ss_drop_25.highlight-focus,
.card.household .note a.highlight-focus,
#calcBtn.highlight-focus {
  background-color: #fff8b3 !important;
  border-color: #b91c1c !important;
  border-width: 2px !important;
  box-shadow: 0 0 0 4px rgba(248,113,113,0.7);
  outline: none;
}

/* Back to top button */
#backToTopBtn {
  position: fixed;
  left: 20px;
  bottom: 20px;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid #4b5563;
  background: #f3f4f6;
  color: #111827;
  font-size: 0.75rem;
  cursor: pointer;
  opacity: 0.85;
  z-index: 999;
  max-width: 60px;
}

#backToTopBtn:hover {
  opacity: 1;
  background: #e5e7eb;
}