/* Shared presentation roles for the comparison, tools and editorial pages. */

/* Hierarchy: keep the buying decision distinct from the headline account size. */
.site-header nav { flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.site-header nav a { padding-block: 8px; }
.section-heading .eyebrow { margin-block: 0 10px; }
.section > .comparison-note { max-width: 70ch; }
.plan-row-heading { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.plan-facts .fact-notional dd { color: var(--muted); font-size: 1.25rem; }
.plan-facts .fact-loss dd { color: var(--accent); font-size: 1.625rem; }
.plan-facts .fact-entry dd { font-size: 1.625rem; }
.plan-scenario { background: #1b2c33; padding: 18px; border: 1px solid var(--line); border-radius: 8px; }
.plan-scenario > span { font-weight: 600; }
.plan-scenario small { max-width: 60ch; }
.fee-result > .eyebrow { color: var(--text); }
.profile-main h1 { line-height: 1.12; letter-spacing: -.04em; }
.profile-main .profile-intro { max-width: 65ch; }
.profile-main .profile-id { font: var(--type-caption)/1.7 var(--font-reading); }
.profile-section > h2 { line-height: 1.25; letter-spacing: -.025em; }
.profile-section > p { font-size: 1rem; line-height: 1.8; max-width: 72ch; }
.profile-fact p { font-size: var(--type-reading); line-height: 1.75; }
.profile-fact small, .profile-refs, .profile-sources small, .profile-plan-list small { font-size: var(--type-caption); line-height: 1.7; }
.profile-fact h3 { font-size: 1.125rem; line-height: 1.4; }
.plan-profile-link { font-size: var(--type-ui); }
@media (max-width: 700px) {
  .site-header { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .site-header nav { gap: 8px 22px; }
  .plan-scenario { padding: 16px; }
}

/* Spacing: a shared rhythm for comparison cards, tools and reading pages. */
:root { --space-panel: 24px; --space-section: 64px; }
.hero { padding-block: 64px; gap: 64px; }
.section { padding-top: var(--space-section); }
.section-heading { margin-bottom: 24px; }
.plan-results { gap: 20px; }
.plan-row, #fee-form, .fee-result, .drawdown-form, .drawdown-result,
#payout-form, .payout-result, .shortlist-workspace { padding: var(--space-panel); }
.plan-facts { gap: 24px; margin-block: 24px; }
.plan-scenario { column-gap: 16px; row-gap: 8px; }
.calculator-shell { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.input-grid { gap: 20px 24px; }
.input-grid label, .drawdown-controls label {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 8px;
}
.fee-breakdown { margin-block: 24px; }
.tool-nav { margin-top: var(--space-section); padding: 16px 20px; }
.profile-main { max-width: 1000px; }
.profile-section { margin-top: 40px; }
.profile-section > p, .profile-intro { max-width: 68ch; }
.profile-fact { padding: var(--space-panel); margin-block: 16px; }
.profile-fact p { max-width: 72ch; }
.profile-section > h2 { margin-bottom: 20px; }
.profile-sources, .profile-plan-list { padding-left: 22px; }

/* Icons: one local outline sprite, always alongside meaningful link text. */
.ui-icon { width: 1.125em; height: 1.125em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.18em; }
.site-header nav a { display: inline-flex; align-items: center; gap: 8px; }
.profile-sources .ui-icon, .profile-plan-list .ui-icon, .profile-refs .ui-icon { margin-left: 4px; }
.plan-profile-link .ui-icon { margin-left: 6px; }

/* Contrast: preserve the slate/lime identity while making controls unambiguous. */
:root { --control-border: #6f858e; }
.input-grid input, .drawdown-controls input, .drawdown-controls select,
.compare-controls input, .compare-controls select, .scenario-counts input,
.preset-select select, .payout-shell select, .path-input-table input,
.button.secondary, .preset-row button, .shortlist-chip {
  border-color: var(--control-border);
}
input::placeholder { color: #aabbbd; opacity: 1; }
.plan-row.selected { border-color: var(--accent); box-shadow: inset 3px 0 var(--accent); }
.plan-choice:has(input:checked) { color: var(--accent); }
[tabindex]:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

/* The chart has its own horizontal scroll area on narrow screens. */
#drawdown-chart:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

.history-event { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 22px; }
.history-event h3 { font-size: 1.25rem; }
.history-versions { overflow-wrap: anywhere; font-size: var(--type-caption); }
.history-scroll { overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.history-scroll table { border-collapse: collapse; width: 100%; min-width: 660px; font-size: var(--type-ui); }
.history-scroll caption { text-align: left; padding: 16px; font-size: var(--type-caption); color: var(--muted); }
.history-scroll th, .history-scroll td { padding: 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.history-scroll th:first-child { width: 20%; }
.history-scroll td { width: 40%; }
.history-scroll p { margin-block: 0 10px; }
.history-scroll small { display: block; color: var(--muted); font-size: var(--type-caption); }
.history-source a { text-decoration: underline; text-underline-offset: 3px; }

/* Polish: deliberate controls and states across the same underlying journeys. */
[hidden] { display: none !important; }
.button, .preset-row button, .shortlist-chip { min-height: 44px; border-radius: 8px; }
.site-header nav a { min-height: 44px; }
.button:hover { transform: none; }
.button.secondary:hover, .preset-row button:hover, .shortlist-chip:hover { background: #20323a; border-color: var(--accent); }
button:disabled, .button:disabled, button:disabled:hover, .button:disabled:hover {
  background: #22323a;
  color: var(--muted);
  border: 1px dashed var(--control-border);
  cursor: not-allowed;
  opacity: 1;
}
.button:has(> a) { padding: 0; }
.button > a { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: 15px 19px; min-height: 44px; }
.plan-row, .calculator-shell, .drawdown-form, .drawdown-result,
.payout-shell, .shortlist-workspace, .empty-state { border-radius: 12px; }
.empty-state { background: var(--surface); border: 1px solid var(--control-border); padding: var(--space-panel); }
.empty-state p { max-width: 65ch; margin-bottom: 0; }
.error-message { border-radius: 8px; border-color: #cd9b89; }
#drawdown-loading { padding: 20px; background: var(--surface); border: 1px solid var(--control-border); border-radius: 8px; }
.plan-evidence-warning { padding: 14px 16px; border-left: 3px solid #f3a58a; background: #302b29; color: #f3c7b7; }
.profile-fact:is([data-fact-status="stale"], [data-fact-status="expired"], [data-fact-status="conflicted"], [data-fact-status="invalid_date"]) { border-left: 3px solid #f3a58a; }
.shortlist-table { border: 1px solid var(--control-border); border-radius: 8px; }
.shortlist-table th, .shortlist-table td { vertical-align: top; line-height: 1.65; }
.shortlist-table thead th { font-weight: 650; }
.shortlist-table th:first-child { position: sticky; left: 0; background: #172630; z-index: 1; border-right: 1px solid var(--line); }
@media (max-width: 900px) { .fee-result { border-left: 0; border-top: 1px solid var(--line); } }

/* Clarity: keep the current fee assumptions beside the comparison results. */
.scenario-summary { font-size: var(--type-ui); line-height: 1.7; padding: 14px 16px; margin-block: 16px; border-left: 3px solid var(--accent); background: #1b2c33; color: var(--text); }
.empty-state .button { margin-top: 20px; }

/* Keep complete monetary amounts readable on narrow cards and enlarged text. */
.plan-row { container-type: inline-size; }
@container (max-width: 54rem) { .plan-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (max-width: 32rem) { .plan-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 17rem) { .plan-facts { grid-template-columns: 1fr; } }
.hero > *, .section-heading > *, #fee-form, #payout-form, .fee-result, .payout-result,
.input-grid label, .compare-controls label { min-width: 0; }
.section-heading { flex-wrap: wrap; }
.tag { max-width: 100%; white-space: normal; }
h1 { overflow-wrap: anywhere; }
.input-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#compare, #fee-form, #payout-form, .payout-result { container-type: inline-size; }
@container (max-width: 17rem) {
  .input-grid, .compare-controls, .payout-figures { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .questions { grid-template-columns: 1fr; }
  .questions > div { min-width: 0; }
}
@media (max-width: 900px) {
  .calculator-shell { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  :root { --space-panel: 20px; --space-section: 48px; }
  .hero { padding-block: 40px; gap: 32px; }
  .plan-facts { gap: 20px 16px; }
  .input-grid { gap: 20px 16px; }
  .profile-section { margin-top: 32px; }
  .tool-nav { gap: 8px; padding: 12px; }
}

/* Visual fixup: the comparison is the workspace, saved state is supporting UI. */
body .hero{padding-block:40px 44px;gap:48px}body .hero h1{font-size:clamp(48px,4.5vw,70px)}
body .hero-visual{aspect-ratio:1.35;max-height:460px}body .hero .intro{font-size:18px;line-height:1.75}
body .section{padding-top:48px}body .section-heading{margin-bottom:16px}body .section-heading h2{font-size:30px;line-height:1.25}
body .comparison-note{font-size:14px;line-height:1.75;margin-bottom:22px;max-width:85ch}
body .compare-controls{gap:14px 16px;padding:20px;border:1px solid var(--line);border-radius:12px;background:#162830;margin-bottom:16px}
body .compare-controls label{font-size:13px;line-height:1.5}body .compare-controls input,body .compare-controls select{min-height:44px;font-size:14px}
body .scenario-summary{padding:10px 14px;font-size:13px;line-height:1.7;margin-block:12px}
body .plan-row{padding:22px;border-color:#3c525c;background:linear-gradient(135deg,#1b3039,#182830);box-shadow:0 10px 30px #07101520}
body .plan-row-heading h3{font-size:23px;line-height:1.25}body .plan-facts{gap:16px;margin-block:18px}body .plan-facts dt{font-size:12px}body .plan-facts dd{font-size:23px}
body .plan-facts .fact-notional dd{font-size:20px}body .plan-scenario{padding:14px;background:#101f27;border-color:#334e58}
body .saved-comparisons{margin-top:24px;padding:20px;background:transparent;border:1px solid var(--line);border-radius:10px}
body .saved-comparisons h3{font-size:18px}body .saved-comparisons .quiet{font-size:13px;line-height:1.7}
body .input-grid label{font-size:14px}body .calculator-shell,body .payout-shell{box-shadow:0 12px 32px #07101524}
body .profile-main{max-width:1080px}body .profile-main h1{font-size:clamp(36px,4vw,54px)}body .profile-section{margin-top:32px}
@media(max-width:700px){
 body .site-header{padding-block:14px;gap:8px}body .site-header nav{gap:0 18px}body .site-header nav a{font-size:12px;min-height:36px;padding-block:6px}
 body .hero{display:flex;flex-direction:column;padding-block:26px 32px;gap:18px}body .hero>div:first-child{display:contents}
 body .hero>div:first-child>.eyebrow{order:1;margin:0;align-self:start}body .hero h1{order:2;font-size:44px;align-self:start;margin:0}body .hero>.hero-visual{order:3;width:100%;height:220px;aspect-ratio:auto}
 body .hero .intro{order:4;font-size:16px;margin:0;align-self:start}body .hero .actions{order:5;margin:0;align-self:start;gap:10px}body .hero .quiet{order:6;font-size:12px;margin:0;align-self:start}
 body .hero-visual figcaption{inset:auto 14px 32px;padding:12px;gap:10px}body .hero-visual figcaption strong{font-size:20px}
 body .section{padding-top:36px}body .section-heading h2{font-size:26px}body .compare-controls{padding:16px;gap:12px}
 body .plan-row{padding:18px}body .plan-row-heading h3{font-size:21px}body .plan-facts dd{font-size:22px}body .plan-facts .fact-notional dd{font-size:19px}
 body .saved-actions{gap:8px}body .saved-actions .button{font-size:12px;padding:10px 12px}
}

@media(max-width:700px){body .profile-main{padding-top:24px}body .profile-main h1{font-size:30px;margin-block:16px}body .profile-main .profile-intro{font-size:15px;line-height:1.7;margin-block:12px}body .profile-main .profile-id{font-size:12px;line-height:1.7;margin-block:12px}body .profile-actions{display:flex;flex-wrap:wrap;gap:10px}body .profile-actions .button{font-size:13px;padding:11px 14px;min-height:44px}}

body .limit-primer>*{min-width:0}body .limit-art .visual-kicker{max-width:100%;overflow-wrap:anywhere}body .limit-primer .account-card{min-width:0;max-width:100%}
@media(max-width:700px){body .limit-primer{grid-template-columns:minmax(0,1fr)}body .limit-art .topic-art{max-width:100%}}

body .method>*{min-width:0;max-width:100%}body .method h2{overflow-wrap:anywhere}@media(max-width:700px){body .method{grid-template-columns:minmax(0,1fr)}}