/* ============================================================
   calc-modern.css — modernization layer for calculator pages.
   Linked AFTER each page's inline <style>, so equal-specificity
   rules here win. This layer only refines STRUCTURE (radius,
   shadows, spacing, motion, grid) and never touches page theme
   colors, gradients, font stacks, or JS-controlled visibility.
   No !important anywhere.
   ============================================================ */

/* ---------- 0. Baseline & accessibility ---------- */
body{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:color-mix(in srgb, var(--primary, #1D6BEE) 18%, transparent)}
:focus-visible{
  outline:2px solid var(--primary, #1D6BEE);
  outline-offset:2px;
}
/* money columns line up */
.hero-amount,.br-amount,.legend-amount,.nhs-stat-val,.chart-center-pct,
.data-table td,.pension-tier-table td,.examples-table td{
  font-variant-numeric:tabular-nums;
}

/* ---------- 1. Frosted sticky header ---------- */
.header{
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:color-mix(in srgb, var(--border, #E2EBFB) 65%, transparent);
}
.logo-icon{
  border-radius:12px;
  box-shadow:0 4px 12px color-mix(in srgb, var(--primary, #1D6BEE) 26%, transparent);
}
.year-badge{box-shadow:0 1px 4px color-mix(in srgb, var(--primary, #1D6BEE) 12%, transparent)}
.nav-link{transition:color .18s ease, background-color .18s ease}

/* ---------- 2. Page intro & typography ---------- */
.page-intro h1{letter-spacing:-.02em;line-height:1.22}
.page-intro p{line-height:1.68;max-width:none}
.updated-note{border-radius:0 10px 10px 0;max-width:none}

/* ---------- 3. Form controls ---------- */
.field-select,.field-input,.opt-select,.opt-input{
  height:46px;
  border-radius:10px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.field-select,.opt-select{
  -webkit-appearance:none;
  appearance:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1.5 6 6.5 11 1.5" stroke="%2364748B" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:36px;
}
.field-select:focus,.field-input:focus,.opt-select:focus,.opt-input:focus{
  box-shadow:0 0 0 4px color-mix(in srgb, var(--primary, #1D6BEE) 13%, transparent);
}
.radio-pill,.preset-btn{
  border-radius:22px;
  transition:border-color .18s ease, background-color .18s ease, color .18s ease,
             box-shadow .18s ease, transform .18s ease;
}
.radio-pill:hover,.preset-btn:hover{transform:translateY(-1px)}
.radio-pill:active,.preset-btn:active{transform:translateY(0) scale(.97)}
.radio-pill.active,.preset-btn.active{
  box-shadow:0 3px 12px color-mix(in srgb, var(--primary, #1D6BEE) 20%, transparent);
}
.hint{line-height:1.5}
.acc-header{transition:background-color .18s ease}
.acc-header:hover{background-color:color-mix(in srgb, var(--primary, #1D6BEE) 3%, transparent)}

/* ---------- 4. Panels & cards ---------- */
.input-panel{
  border-radius:20px;
  box-shadow:0 1px 2px rgba(13,27,54,.04),
             0 8px 28px color-mix(in srgb, var(--primary, #1D6BEE) 8%, transparent);
}
.card,.chart-card,.breakdown-card,.tips-card,.section-card,.result-card,
.afford-card,.marginal-card,.compare-card,.toc-card,.summary-grid{
  border-radius:20px;
}
.card,.chart-card,.breakdown-card,.section-card,.result-card{
  box-shadow:0 1px 2px rgba(13,27,54,.04),
             0 6px 24px color-mix(in srgb, var(--primary, #1D6BEE) 7%, transparent);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover,.chart-card:hover,.breakdown-card:hover,.section-card:hover,.result-card:hover{
  transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(13,27,54,.05),
             0 12px 32px color-mix(in srgb, var(--primary, #1D6BEE) 12%, transparent);
}
.breakdown-row{transition:background-color .15s ease}
.breakdown-row:not(.total):hover{
  background-color:color-mix(in srgb, var(--primary, #1D6BEE) 4%, transparent);
}
.tier-warning{border-radius:12px}
.hicbc-banner{border-radius:14px}

/* ---------- 4b. Personalised result interpretation ---------- */
.interpretation-card{
  background:var(--card, #fff);
  border:1px solid var(--border, #E2EBFB);
  border-left:4px solid var(--primary, #1D6BEE);
  border-radius:16px;
  padding:20px 22px;
  box-shadow:0 1px 2px rgba(13,27,54,.04),
             0 6px 24px color-mix(in srgb, var(--primary, #1D6BEE) 6%, transparent);
}
.interpretation-title{
  font-size:.8rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:var(--primary, #1D6BEE);
  margin-bottom:10px;
}
.interpretation-body p{
  margin:0 0 10px;
  font-size:.92rem;
  line-height:1.65;
  color:var(--text, #1E293B);
}
.interpretation-body p:last-child{margin-bottom:0}
.interpretation-body strong{color:inherit}

/* ---------- 5. Hero card (gradient untouched) ---------- */
.hero-card{border-radius:22px;padding:32px 30px}
.hero-amount{font-size:clamp(2.3rem, 4.5vw, 3.15rem);letter-spacing:-.02em}
.hero-label{letter-spacing:.12em}
.eff-rate-badge{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.nhs-stat{border-radius:12px}

/* ---------- 6. Results grid: hero full-width, cards paired ---------- */
/* Only kicks in on wide screens, only when the panel has 3+ children,
   and only rearranges structure — order stays DOM order. */
@media (min-width:1200px){
  .results-panel:has(> :nth-child(3)){
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
  }
  .results-panel > *{min-width:0}
  /* Everything except the chart/breakdown pair spans the full width. */
  .results-panel > :not(.card):not(.chart-card):not(.breakdown-card),
  .results-panel > #employerCard,
  .results-panel > .tips-card ~ .card{
    grid-column:1 / -1;
  }
  /* half-width breakdown cards: let the row columns shrink/wrap
     instead of overflowing the card edge */
  .results-panel:has(> :nth-child(3)) .breakdown-row{padding:13px 16px;gap:10px}
  .results-panel:has(> :nth-child(3)) .br-left{min-width:0}
  .results-panel:has(> :nth-child(3)) .br-name{line-height:1.3}
  .results-panel:has(> :nth-child(3)) .br-amount{min-width:78px}
  .results-panel:has(> :nth-child(3)) .br-bar-wrap{min-width:32px}
}

/* ---------- 7. Tables ---------- */
.pension-tier-table th,.data-table th,.examples-table th{letter-spacing:.05em}
.pension-tier-table tbody tr,.data-table tbody tr,.examples-table tbody tr{
  transition:background-color .15s ease;
}
.pension-tier-table tbody tr:hover,
.data-table tbody tr:hover,
.examples-table tbody tr:hover{
  background-color:color-mix(in srgb, var(--primary, #1D6BEE) 5%, transparent);
}

/* ---------- 8. Chips, FAQ, footer ---------- */
.tool-chip{
  border-radius:22px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
}
.tool-chip:hover{transform:translateY(-2px)}
.faq-section details{
  border-radius:14px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.faq-section details:hover{
  border-color:color-mix(in srgb, var(--primary, #1D6BEE) 35%, var(--border, #E2EBFB));
}
.faq-section details[open]{
  box-shadow:0 4px 16px color-mix(in srgb, var(--primary, #1D6BEE) 8%, transparent);
}
footer{border-top-color:color-mix(in srgb, var(--border, #E2EBFB) 70%, transparent)}
.footer-link{transition:color .15s ease}

/* ---------- 9. Entrance animation (no fill-forward, so hover
              transforms keep working after it finishes) ---------- */
@keyframes cm-fade-up{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
.input-panel,.hero-card,.hero,
.results-panel > .card,.results-panel > .chart-card,
.breakdown-card,.tips-card{
  animation:cm-fade-up .5s cubic-bezier(.22,.61,.36,1) backwards;
}
.results-panel > :nth-child(2){animation-delay:.05s}
.results-panel > :nth-child(3){animation-delay:.09s}
.results-panel > :nth-child(4){animation-delay:.13s}
.results-panel > :nth-child(5){animation-delay:.17s}
.results-panel > :nth-child(6){animation-delay:.21s}

/* ---------- 10. Mobile fixes (pre-existing overflow) ---------- */
.field-row > *,.acc-row > *,.options-grid > *{min-width:0}
@media (max-width:480px){
  .field-row,.acc-row,.options-grid{grid-template-columns:1fr}
}

/* ---------- 11. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms;
    animation-iteration-count:1;
    transition-duration:.01ms;
  }
}