/* Presentation only. Shared by existing server-rendered pages. */
:root { --bg:#f3f5f9; --surface:#fff; --surface-2:#f1f4f8; --surface-3:#e8edf5; --line:#dce2ea; --line-strong:#b5c0cf; --text:#172c40; --muted:#536478; --faint:#5c6c7d; --blue:#285ac8; --blue-open:#edf2ff; --gold:#86601a; --gold-open:#fff5df; --pink:#a83461; --olive:#176449; --olive-open:#e9f6ef; --danger:#ac2c41; --danger-open:#fff0f2; --shadow:0 6px 24px #20344b08; --radius:18px; color-scheme:light; }
body { background:var(--bg); font-size:16px; line-height:1.5; }
.sidebar,.topbar,.mobile-nav,.dashboard-tabs { background:#fffffffa; }
.sidebar { padding:24px 16px; }
.nav { margin-top:28px; gap:6px; }
.nav a { min-height:46px; font-size:.92rem; }
.nav a.active,.nav a:hover { color:var(--blue); background:var(--blue-open); }
.brand small,.risk-note p { font-size:.8rem; }
.main-content { max-width:1260px; padding:32px 32px 90px; }
.topbar { height:60px; }
.page-heading h1 { font-size:clamp(1.8rem,3vw,2.6rem); line-height:1.15; margin-bottom:10px; }
.page-heading p,.panel-head p,.helper-text,.alert,.explanation-box,.plain-details,.comparison-methods p { font-size:.94rem; line-height:1.65; }
.eyebrow { font-size:.7rem; letter-spacing:.1em; }
.panel { box-shadow:var(--shadow); margin-bottom:22px; }
.panel-head { padding:24px; align-items:flex-start; gap:18px; }
.panel-head h2 { font-size:1.25rem; line-height:1.3; }
.panel-head p { margin-top:8px; }
.button,button,input,select { min-height:46px; }
.button { font-size:.93rem; border-radius:12px; white-space:normal; text-align:center; }
.button:not(.ghost):not(.danger):not(.warning) { background:var(--blue); color:white; }
.button.ghost { background:var(--surface); color:var(--blue); border:1px solid var(--line-strong); }
.button.danger { color:var(--danger); background:var(--danger-open); }
.button.warning { color:var(--gold); background:var(--gold-open); }
input,select { font-size:1rem; background:var(--surface); color:var(--text); border-color:var(--line-strong); }
label { font-size:.94rem; }
.status-pill,.tag { font-size:.8rem; letter-spacing:0; text-transform:none; white-space:normal; line-height:1.4; }
.status-pill.safe,.tag.filled,.tag.executed,.positive { color:var(--olive); }
.status-pill.danger,.negative { color:var(--danger); }
.advice-stack { display:grid; gap:12px; margin-bottom:26px; }
.advice-banner { display:flex; gap:16px; padding:24px; background:var(--blue-open); border:1px solid #c8d5f5; border-radius:18px; }
.advice-banner.safe { background:var(--olive-open); border-color:#bbdac9; }
.advice-banner.warning { background:var(--gold-open); border-color:#e4d09e; }
.advice-banner.danger { background:var(--danger-open); border-color:#e2b0b9; }
.advice-icon { flex:0 0 36px; height:36px; display:grid; place-items:center; border-radius:50%; background:var(--surface); font-weight:800; }
.advice-banner h2 { font-size:1.3rem; margin:4px 0; }
.advice-banner p { margin:8px 0; color:var(--text); }
.advice-banner a { display:inline-block; min-height:44px; padding:10px 0; color:var(--blue); font-weight:700; text-decoration:underline; text-underline-offset:4px; }
.advice-extra { border:1px solid var(--line); background:var(--surface); border-radius:14px; padding:2px 20px; }
summary { cursor:pointer; min-height:46px; padding:12px 0; line-height:1.5; font-size:.95rem; }
.advice-extra summary { font-size:.95rem; }
.tax-status-strip span,.tax-status-strip small,.tax-year-form label,.tax-form-notice,.kpi-card small { font-size:.86rem; }
.tax-kpi-grid .kpi-card>span { font-size:.86rem; letter-spacing:0; text-transform:none; }
summary:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.money-cards { grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:20px; }
.snapshot-card { background:var(--surface); border:1px solid var(--line); padding:24px; }
.snapshot-card.primary { background:var(--blue); border-color:var(--blue); color:white; }
.snapshot-card.primary span,.snapshot-card.primary small,.snapshot-card.primary strong { color:white; }
.snapshot-card>span { font-size:.95rem; text-transform:none; letter-spacing:0; }
.snapshot-card>strong { font-size:clamp(1.8rem,2.8vw,2.4rem); margin:12px 0 8px; }
.snapshot-card small { font-size:.84rem; line-height:1.6; }
.comparison-grid { padding:24px; gap:24px; }
.comparison-grid span,.control-status span { font-size:.88rem; }
.comparison-grid small { font-size:.82rem; }
.dashboard-tabs { position:static; gap:6px; padding:6px; border:1px solid var(--line); border-radius:14px; margin:24px 0; }
.dashboard-tabs button { flex:1; white-space:normal; font-size:.94rem; padding:12px 8px; border-radius:10px; }
.dashboard-tabs button[aria-selected=true] { background:var(--blue); color:white; }
.asset-breakdown { padding:0 24px; }
.asset-breakdown-row { padding:18px 0; }
.asset-line strong { font-size:1.05rem; }
.asset-meta { font-size:.87rem; }
progress { height:9px; border-radius:8px; background:var(--surface-3); accent-color:var(--blue); width:100%; }
progress::-webkit-progress-bar { background:var(--surface-3); border-radius:8px; }
progress::-webkit-progress-value { background:var(--blue); border-radius:8px; }
progress::-moz-progress-bar { background:var(--blue); border-radius:8px; }
.section-action { padding:20px 24px 24px; }
.section-action p { margin:12px 0 0; }
.explanation-box { background:var(--surface-2); padding:12px 24px; border-radius:0 0 18px 18px; }
.padded { padding:16px 24px; }
.progress-grid.padded { margin:0; }
.progress-line>div { font-size:.9rem; gap:16px; }
.range-switch { display:flex; flex-wrap:wrap; background:var(--surface-2); }
.range-switch button { min-height:44px; font-size:.88rem; white-space:normal; }
.range-switch button.active { color:var(--blue); background:var(--surface); }
.chart-panel>.range-switch { width:fit-content; margin:0 24px; }
.chart-wrap { min-height:260px; }
.how-it-works { margin:0; padding:0 30px 20px 48px; }
.how-it-works li { padding:8px 8px; }
.how-it-works p { margin:6px 0; font-size:.95rem; }
.service-list { margin:0; padding:0 24px 12px; list-style:none; }
.service-list li { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 0; border-top:1px solid var(--line); }
.service-list small { display:block; color:var(--muted); margin-top:5px; font-size:.84rem; }
.control-status { padding:8px 24px 24px; }
.control-status>div { gap:16px; padding:12px 0; }
.control-status strong { font-size:.94rem; text-align:right; overflow-wrap:anywhere; }
.disclosure-panel>summary { padding:20px 24px; }
.disclosure-panel summary small { font-size:.85rem; margin-top:5px; }
table { font-size:.9rem; }
th { font-size:.78rem; letter-spacing:.02em; }
td small { font-size:.8rem; }
.table-wrap { overflow-x:auto; overscroll-behavior-x:contain; }
.signal-card>header,.signal-card>footer { flex-wrap:wrap; }
.signal-card>footer { font-size:.85rem; }
.detail-code { overflow-wrap:anywhere; white-space:pre-wrap; }
.cost-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.watchlist { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr)); gap:20px; padding:0 20px 20px; }
.watch-card { border:1px solid var(--line); border-radius:14px; padding:18px; }
.watch-card header { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.watch-card dl { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.watch-card dt { color:var(--muted); font-size:.78rem; }
.watch-card dd { margin:8px 0 0; font-weight:700; }
.cost-card { padding:24px; }
.cost-card h2 { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.cost-card dl { margin:0; }
.cost-card dl>div { display:flex; justify-content:space-between; gap:20px; padding:12px 0; border-bottom:1px solid var(--line); }
.cost-card dt { color:var(--muted); }
.cost-card dd { margin:0; font-weight:700; text-align:right; }
.cost-card li { margin:10px 0; }
.skip-link { position:fixed; top:-100px; left:12px; z-index:100; background:var(--surface); color:var(--blue); padding:15px; }
.skip-link:focus { top:12px; }
.menu-dialog { width:min(480px,calc(100% - 24px)); max-height:85dvh; border:1px solid var(--line); border-radius:20px; padding:22px; color:var(--text); background:var(--surface); }
.menu-dialog::backdrop { background:#12253699; }
.menu-dialog header { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.menu-dialog h2 { font-size:1.25rem; }
.menu-dialog nav { display:grid; margin:12px 0 20px; }
.menu-dialog nav a { min-height:50px; padding:12px 8px; border-bottom:1px solid var(--line); color:var(--blue); }
.login-intro { background:var(--surface-2); }
@media(max-width:1050px) { .money-cards { grid-template-columns:1fr 1fr; } .money-cards .primary { grid-column:1/-1; } .money-cards .primary>strong { font-size:2.8rem; } }
@media(max-width:840px) {
 .main-content { padding:24px 16px 110px; } .topbar { height:58px; padding:0 16px; }
 .page-heading { margin-bottom:22px; } .page-heading p { font-size:.88rem; }
 .topbar-status .status-pill { font-size:.72rem; padding:6px 10px; }
 .mobile-nav { padding:6px 8px calc(8px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); box-shadow:0 -4px 20px #172c4008; }
 .mobile-nav a,.mobile-nav button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:52px; min-width:0; border:0; border-radius:10px; background:transparent; color:var(--muted); }
 .mobile-nav small { font-size:.73rem; } .mobile-nav span { font-size:1.2rem; }
 .mobile-nav a.active { color:var(--blue); background:var(--blue-open); }
 .advice-banner { padding:20px 16px; gap:12px; } .advice-banner h2 { font-size:1.15rem; } .advice-banner p { font-size:.92rem; }
 .money-cards { gap:12px; } .snapshot-card { padding:18px 14px; } .snapshot-card>span { font-size:.86rem; } .snapshot-card>strong { font-size:1.7rem; } .snapshot-card small { font-size:.8rem; }
 .dashboard-tabs { display:grid; grid-template-columns:1fr 1fr; gap:5px; } .dashboard-tabs button { font-size:.9rem; }
 .panel-head,.section-action,.comparison-grid { padding:20px; } .panel-head { flex-direction:column; }
 .comparison-grid { grid-template-columns:1fr 1fr; gap:20px 16px; }
 .comparison-grid strong { font-size:1.4rem; }
 .asset-breakdown { padding:0 20px; } .asset-meta { flex-wrap:wrap; gap:6px; }
 .chart-panel>.range-switch { margin:0 16px; } .chart-wrap { min-height:280px; padding:12px; }
 .padded { padding:16px 20px; } .disclosure-panel>summary { padding:18px 20px; }
 .progress-grid { grid-template-columns:1fr; } .cost-cards { grid-template-columns:1fr; }
 .control-status>div { flex-wrap:wrap; } .service-list li { align-items:flex-start; } .service-list .tag { flex-shrink:0; max-width:42%; }
 .signal-card .legs>div { flex-wrap:wrap; gap:10px; }
 .comparison-controls { flex-wrap:wrap; } .comparison-controls label { width:100%; }
}
@media(max-width:360px) { .main-content { padding-left:12px; padding-right:12px; } .money-cards { grid-template-columns:1fr; } .money-cards .primary { grid-column:auto; } .comparison-grid { grid-template-columns:1fr; } .advice-icon { display:none; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
@media print { .mobile-nav,.topbar,.sidebar,.skip-link,.menu-dialog { display:none!important; } .main-content { padding:0; } .panel { box-shadow:none; break-inside:avoid; } .snapshot-card.primary { background:white; } .snapshot-card.primary * { color:black; } }