:root {
  /* NHS blue palette */
  --bg: #f0f4f8;
  --panel: #ffffff;
  --panel-border: #d8e1e8;
  --text: #1a2733;
  --text-dim: #55697a;
  --accent: #005eb8;
  --ok: #007f3b;
  --warn: #ed8b00;
  --below: #da291c;
  --input-bg: #f4f8fb;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  line-height: 1.4;
}

.app-header {
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid var(--panel-border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.app-header-text { flex: 1; min-width: 0; }
.app-header h1 { margin: 0 0 0.3rem; font-size: 1.3rem; color: var(--accent); }
.disclaimer { margin: 0; color: var(--text-dim); font-size: 0.85rem; max-width: 60rem; }
.privacy-note {
  margin: 0.3rem 0 0;
  color: var(--ok);
  font-size: 0.8rem;
  font-weight: 600;
}

.kofi-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  background: var(--panel);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.kofi-button:hover {
  background: var(--accent);
  color: var(--panel);
}

.app-footer {
  padding: 1.5rem;
  text-align: center;
  border-top: 1px solid var(--panel-border);
}
.footer-privacy {
  margin: 0.9rem 0 0.4rem;
  color: var(--text-dim);
  font-size: 0.75rem;
}
.clear-data-btn {
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: 0.75rem;
  text-decoration: underline;
  cursor: pointer;
}
.clear-data-btn:hover { color: var(--below); }

.app-layout {
  display: grid;
  grid-template-columns: 22rem 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1rem;
}
/* Grid items default to min-width:auto, which floors their track at the content's
   min-content size and can force the whole grid wider than the viewport. Override so
   the tracks can actually shrink to the available space and let overflow-x:auto
   wrappers (.table-scroll) do the clipping instead. */
.inputs-panel, .results-panel, .main-panel {
  min-width: 0;
}
.main-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* While the guided flow is in progress it owns the main area: the inputs column
   and results are hidden, and the wizard sits centred under the sticky headline.
   Both reappear the moment the flow completes ("all can be shown"). */
body.guided-flow-active .app-layout { grid-template-columns: 1fr; }
body.guided-flow-active .inputs-panel { display: none; }
body.guided-flow-active .results-panel { display: none; }
/* The wizard, the headline bar and the results all live in .main-panel and fill it
   fully — so the wizard card, the persistent A/B/C headline boxes and the three
   scenario detail boxes below are all exactly the same width, in both the
   single-column flow and the two-column done state. */
.guided-wizard {
  width: 100%;
}
.guided-wizard:empty { display: none; }
.inputs-panel {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  position: sticky;
  top: 1rem;
}

@media (max-width: 900px) {
  .app-layout { grid-template-columns: 1fr; }
  /* The main column (headline + results) holds the persistent figures, so on a
     single-column phone layout it must come before the tall input form — otherwise
     completing the flow buries the headline and results below every input. */
  .main-panel { order: -1; }
  .inputs-panel {
    max-height: none;
    overflow-y: visible;
    position: static;
  }

  /* Header and button fight for horizontal space on narrow screens and squeeze the
     title — stack them instead, button on top (it's second in the DOM, so reversing
     the column order puts it first without needing to reorder the markup). */
  .app-header {
    flex-direction: column-reverse;
    align-items: flex-start;
  }


  /* Reference tables (Retirement Living Standards / Glossary / Assumptions) switch from
     a horizontally-scrolling table to a stacked term/definition layout — a wide nowrap
     first column reading sideways is awkward on a phone. */
  .reference-table tr.reference-table-head {
    display: none;
  }
  .reference-table {
    display: block;
    max-height: none;
    overflow-y: visible;
  }
  .reference-table tr {
    display: block;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--panel-border);
  }
  .reference-table tr:last-child {
    border-bottom: none;
  }
  .reference-table td {
    display: block;
    border-bottom: none;
    padding: 0.15rem 0;
    white-space: normal;
  }
  .reference-table td:first-child {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text);
  }
  .reference-table td:not(:first-child)::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    color: var(--accent);
  }
}

/* Sticky bar wrapping the guided headline — pinned to the top of the main column
   so the numbers stay visible (and visibly update) while the user works through the
   wizard. Vertical-only padding so the headline card fills the column and lines up
   with the wizard card and scenario boxes; the card's own border is the divider. */
.guided-headline-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  padding: 0.5rem 0;
}
.guided-headline-bar:empty { display: none; }

.headline-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 0.7rem 1.2rem;
}
.headline-item {
  flex: 1;
  min-width: 8rem;
}
.headline-age {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 0.3rem;
}
.headline-amount {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--accent);
}
.headline-na {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-dim);
}
.headline-amount span {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text-dim);
  margin-left: 0.25rem;
}
.headline-note {
  margin: 0.35rem auto 0;
  max-width: 60rem;
  font-size: 0.75rem;
  color: var(--text-dim);
}
.headline-empty {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dim);
  padding: 0.3rem 0;
}
.headline-caveat {
  color: var(--warn);
  font-weight: 600;
}

/* The sticky headline bar must stay compact on a phone — at full size the two
   stacked items eat a quarter of the screen. Force them side by side and shrink.
   NB: this block must come AFTER the .headline-* base rules above — the main
   @media (max-width: 900px) block earlier in the file would lose the specificity
   tie to them. */
@media (max-width: 900px) {
  /* Reduced vertical padding for compactness; horizontal comes from app-layout now
     that the bar lives inside the main column. */
  .guided-headline-bar { padding: 0.4rem 0 0.3rem; }
  .headline-panel {
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    flex-wrap: nowrap;
  }
  .headline-item { min-width: 0; }
  .headline-age { font-size: 0.62rem; margin-bottom: 0.1rem; }
  .headline-amount { font-size: 1rem; }
  .headline-amount span { font-size: 0.65rem; }
  .headline-note { font-size: 0.68rem; margin-top: 0.25rem; }
}

/* Guided wizard card */
.wizard-card {
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--panel);
  padding: 1rem 1.1rem;
}
.wizard-progress {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-dim);
  margin-bottom: 0.4rem;
}
.wizard-question {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 700;
}
.wizard-help {
  margin: 0 0 0.7rem;
  font-size: 0.8rem;
  color: var(--text-dim);
}
.wizard-answers {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.7rem;
}
.wizard-answer {
  flex: 1;
  min-width: 5rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.wizard-answer:hover { border-color: var(--accent); }
.wizard-answer.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--panel);
}
.wizard-notsure-explainer {
  margin: 0 0 0.7rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.78rem;
  color: var(--text);
  background: rgba(237,139,0,0.08);
  border: 1px solid rgba(237,139,0,0.3);
  border-radius: 8px;
}
.wizard-reveal-note {
  margin: 0 0 0.7rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ok);
  background: rgba(0,127,59,0.07);
  border: 1px solid rgba(0,127,59,0.25);
  border-radius: 8px;
}
/* Real form fields moved into the active step card. On wider screens the fields
   flow into two columns; moved whole sections (old pensions, scenarios) span full
   width via their own block layout. */
.wizard-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  column-gap: 1rem;
  align-items: start;
}
.wizard-fields:not(:empty) {
  margin-bottom: 0.7rem;
}
.wizard-fields fieldset,
.wizard-fields details.input-section {
  grid-column: 1 / -1;
}

/* Grouped in-card fields (e.g. SIPP / LISA / S&S ISA / GIA on the private-savings
   step): each group spans the full card width with its own header and inner grid. */
.wizard-field-group {
  grid-column: 1 / -1;
  border-top: 1px solid var(--panel-border);
  padding-top: 0.55rem;
  margin-bottom: 0.35rem;
}
.wizard-field-group:first-child {
  border-top: none;
  padding-top: 0;
}
.wizard-group-title {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.5rem;
}
.wizard-group-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  column-gap: 1rem;
  align-items: start;
}

.wizard-nav {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.wizard-btn {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--panel);
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.wizard-btn:disabled {
  border-color: var(--panel-border);
  color: var(--text-dim);
  cursor: default;
}
.wizard-next {
  background: var(--accent);
  color: var(--panel);
}
.wizard-skip-all {
  display: block;
  width: 100%;
  padding: 0.35rem;
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: 0.75rem;
  text-decoration: underline;
  cursor: pointer;
}
.wizard-skip-all:hover { color: var(--accent); }
.wizard-done-msg {
  margin: 0 0 0.7rem;
  font-size: 0.9rem;
  font-weight: 600;
}

/* "Where do I find this?" TRS guidance expanders */
.trs-help {
  margin: -0.35rem 0 0.55rem;
  font-size: 0.75rem;
}
.trs-help summary {
  cursor: pointer;
  color: var(--accent);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  list-style: none;
}
.trs-help summary::-webkit-details-marker { display: none; }
.trs-help p {
  margin: 0.4rem 0;
  color: var(--text-dim);
  line-height: 1.45;
}
/* Mock statement block — fictional example values, laid out like the real
   TRS / NHSBSA "Retirement Benefit Estimate" so the user can pattern-match. */
.trs-doc {
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  background: var(--input-bg);
  padding: 0.55rem 0.7rem;
  margin: 0.4rem 0 0.2rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.72rem;
  color: var(--text);
}
.trs-doc-title {
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.trs-doc-sub {
  font-weight: 700;
  margin-top: 0.3rem;
}
.trs-line { padding: 0.08rem 0; }
.trs-line.trs-dim { color: var(--text-dim); }
.trs-line.trs-hl {
  background: rgba(0,94,184,0.1);
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-radius: 4px;
  padding: 0.15rem 0.3rem;
  font-weight: 700;
}
.trs-arrow {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--accent);
  font-weight: 700;
  margin-left: 0.4rem;
}

fieldset {
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: var(--panel);
  padding: 0.8rem 1rem 1rem;
}
/* A native <legend> straddles the fieldset's top border by default (half in, half out) --
   using a plain div inside the fieldset instead keeps the title fully inside the box,
   consistent with the collapsible sections' <summary> titles below. */
.section-title {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.6rem;
}

/* Collapsible input sections — same visual container as fieldset, but the title is a
   clickable <summary> instead of a <legend>. */
details.input-section {
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: var(--panel);
  padding: 0.8rem 1rem 1rem;
}
details.input-section summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  list-style: none;
  margin: -0.2rem -0.2rem 0.6rem;
  padding: 0.2rem;
  border-radius: 4px;
}
details.input-section summary::-webkit-details-marker {
  display: none;
}
details.input-section summary::before {
  content: '▸';
  display: inline-block;
  width: 1em;
  margin-right: 0.2rem;
  transition: transform 0.15s ease;
}
details.input-section[open] summary::before {
  transform: rotate(90deg);
}
details.input-section summary:hover {
  background: rgba(79,157,255,0.08);
}
details.input-section:not([open]) summary {
  margin-bottom: 0;
}

.hint {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  color: var(--text-dim);
}

label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-bottom: 0.55rem;
}
label:last-child { margin-bottom: 0; }

input, select {
  display: block;
  width: 100%;
  margin-top: 0.2rem;
  padding: 0.4rem 0.5rem;
  background: var(--input-bg);
  border: 1px solid var(--panel-border);
  border-radius: 5px;
  color: var(--text);
  font-size: 0.9rem;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
}

label[data-note] {
  cursor: help;
  text-decoration: underline dotted var(--text-dim);
  text-underline-offset: 3px;
}

.field-tooltip {
  display: none;
  position: fixed;
  z-index: 100;
  max-width: 22rem;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  font-size: 0.78rem;
  line-height: 1.4;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  pointer-events: none;
}

.old-pension-row {
  border-top: 1px dashed var(--panel-border);
  padding-top: 0.6rem;
  margin-top: 0.6rem;
}
.old-pension-row:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.old-pension-row h3 { margin: 0 0 0.4rem; font-size: 0.82rem; color: var(--text); }

.results-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Always-on reference/assumption sections at the bottom of every page. Full content
   width with the same 1rem inset as .app-layout, so the strip's left edge lines up
   with the input column above rather than starting mid-page. */
.reference-panels {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1rem;
}
.reference-panels:empty { display: none; }

/* Each of the five reference sections is a single collapsed <details>, its title
   the clickable summary with a rotating ▸ marker (matching the input sections). */
.ref-panel { padding: 0.7rem 1rem; }
.ref-panel > summary {
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  list-style: none;
  display: flex;
  align-items: center;
}
.ref-panel > summary::-webkit-details-marker { display: none; }
.ref-panel > summary::before {
  content: '▸';
  color: var(--accent);
  display: inline-block;
  width: 1em;
  margin-right: 0.3rem;
  transition: transform 0.15s ease;
}
.ref-panel[open] > summary::before { transform: rotate(90deg); }
.ref-panel[open] > summary { margin-bottom: 0.6rem; }
.ref-panel > summary:hover { color: var(--accent); }

.scenario-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}

.scenario-card, .panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 1rem 1.2rem;
}
.scenario-card h3, .panel h2 {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
}
.panel h2 { font-size: 1.05rem; }

.bridge-callout {
  background: rgba(255,184,79,0.1);
  border: 1px solid rgba(255,184,79,0.3);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  margin-bottom: 0.6rem;
}
.bridge-label {
  font-size: 0.72rem;
  color: var(--warn);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 0.15rem;
}
.bridge-amount {
  font-size: 1.3rem;
  font-weight: 700;
}
.bridge-amount span {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-dim);
  margin-left: 0.2rem;
}

.scenario-total-label {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-bottom: 0.15rem;
}

.spa-callout {
  background: rgba(79,157,255,0.1);
  border: 1px solid rgba(79,157,255,0.3);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  margin-top: 0.6rem;
}
.spa-callout-label {
  font-size: 0.72rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 0.15rem;
}
.spa-callout-amount {
  font-size: 1rem;
  font-weight: 700;
}
.spa-callout-amount span {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-dim);
  margin-left: 0.2rem;
}

.scenario-total {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.scenario-total span {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text-dim);
  margin-left: 0.2rem;
}

.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  margin-bottom: 0.7rem;
  background: var(--input-bg);
  color: var(--text-dim);
}
.badge-below { background: rgba(255,107,107,0.18); color: var(--below); }
.badge-minimum { background: rgba(255,184,79,0.18); color: var(--warn); }
.badge-moderate { background: rgba(79,157,255,0.18); color: var(--accent); }
.badge-comfortable { background: rgba(79,209,139,0.18); color: var(--ok); }

.breakdown-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.breakdown-table td, .breakdown-table th {
  padding: 0.3rem 0.4rem;
  border-bottom: 1px solid var(--panel-border);
  text-align: left;
}
.breakdown-table td:last-child, .breakdown-table th:last-child {
  text-align: right;
}

.note {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin: 0.6rem 0 0;
}
.note.ok { color: var(--ok); }
.note.warn { color: var(--warn); }

.projection-details summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
/* Plain-div scroll wrapper: unlike overflow-x on a <table> itself, a div reliably
   clips an oversized table instead of letting it force the page wider. */
.table-scroll {
  overflow-x: auto;
  max-width: 100%;
}

.projection-table {
  max-height: 20rem;
  display: block;
  overflow-y: auto;
}

.reference-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  display: block;
  max-height: 24rem;
  overflow-y: auto;
}
.reference-table th, .reference-table td {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--panel-border);
  text-align: left;
  vertical-align: top;
}
.reference-table th:first-child, .reference-table td:first-child {
  font-weight: 600;
  white-space: nowrap;
}
.reference-table td:not(:first-child) {
  color: var(--text-dim);
}

.assumptions-used-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.assumptions-used-row {
  border-top: 1px solid var(--panel-border);
  padding-top: 0.6rem;
}
.assumptions-used-row:first-child { border-top: none; padding-top: 0; }
.assumptions-used-main {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
}
.assumptions-used-value {
  color: var(--accent);
  white-space: nowrap;
}
.assumptions-used-rationale {
  margin: 0.25rem 0 0.5rem;
  font-size: 0.78rem;
  color: var(--text-dim);
}
.assumptions-used-edit {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  cursor: pointer;
}
.assumptions-used-edit:hover {
  background: var(--accent);
  color: var(--panel);
}

.field-highlight {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.footer-note {
  color: var(--text-dim);
  font-size: 0.78rem;
  text-align: center;
}

/* ---- print ----------------------------------------------------------------
   Flatten to the results: hide inputs, wizard, and chrome; un-stick the
   headline bar; keep each card on one page. Closed <details> print as just
   their summary line (app.js opens the short "Assumptions used" panel for the
   duration of the print). */
@media print {
  .app-header .kofi-button,
  .app-footer,
  #guidedWizard,
  .inputs-panel,
  .assumptions-used-edit,
  .field-tooltip {
    display: none !important;
  }
  /* Results are hidden mid-flow on screen — always print them. */
  body.guided-flow-active .results-panel { display: flex; }
  .app-layout {
    display: block;
    padding: 0.5rem 0;
  }
  .guided-headline-bar {
    position: static;
    border-bottom: none;
  }
  body { background: #fff; }
  .scenario-card, .panel { break-inside: avoid; }
}