.psk-spa-page { padding:24px 0 48px; }
.psk-spa-page [hidden] { display:none !important; }
.psk-spa-page .psk-spa-breadcrumbs ol { display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0 0 28px; list-style:none; font-size:.84rem; }
.psk-spa-page .psk-spa-breadcrumbs li + li::before { content:"/"; margin-right:8px; color:var(--psk-muted); }
.psk-spa-page .psk-spa-header { max-width:780px; margin-bottom:28px; }
.psk-spa-page h1 { margin:0 0 14px; font-size:clamp(2rem,5vw,3rem); line-height:1.15; }
.psk-spa-page .psk-spa-header > p:last-child { color:var(--psk-muted); font-size:1.05rem; }
.psk-spa-page .psk-spa-calculator { display:grid; grid-template-columns:minmax(0,1fr); border:1px solid var(--psk-line); border-radius:var(--psk-radius); background:var(--psk-card); overflow:hidden; }
.psk-spa-page .psk-spa-inputs { padding:20px; min-width:0; }
.psk-spa-page h2 { font-size:1.35rem; line-height:1.3; margin:0 0 12px; }
.psk-spa-page .psk-spa-inputs > p { margin:0 0 20px; color:var(--psk-muted); }
.psk-spa-page .psk-spa-fields { display:grid; grid-template-columns:minmax(0,1fr); gap:18px; }
.psk-spa-page .psk-spa-field { min-width:0; }
.psk-spa-page .psk-spa-field label { display:block; margin-bottom:6px; font-weight:750; font-size:.92rem; }
.psk-spa-page input, .psk-spa-page select { width:100%; min-height:48px; padding:10px 12px; border:1px solid var(--psk-line); border-radius:9px; background:var(--psk-card); color:var(--psk-ink); font:inherit; }
.psk-spa-page .psk-spa-help { margin:8px 0 0; font-size:.86rem; color:var(--psk-muted); }
.psk-spa-page #psk-spa-format-help { margin-top:18px; }
.psk-spa-page .psk-spa-error { color:var(--psk-ink); font-size:.86rem; font-weight:700; margin:6px 0 0; }
.psk-spa-page input[aria-invalid="true"] { border:2px solid var(--psk-dark-2); }
.psk-spa-page .psk-spa-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.psk-spa-page .psk-spa-actions button { min-height:48px; }
.psk-spa-page .psk-spa-result { padding:24px 20px; background:var(--psk-soft); border-top:1px solid var(--psk-line); overflow-wrap:anywhere; min-width:0; }
.psk-spa-page .psk-spa-primary { font-size:clamp(2.2rem,4vw,3.25rem); font-weight:850; line-height:1.15; margin:22px 0 12px; color:var(--psk-dark); }
.psk-spa-page .psk-spa-secondary { font-size:1.4rem; font-weight:750; margin:0 0 22px; }
.psk-spa-page .psk-spa-readings { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 14px; margin:20px 0; font-size:.92rem; }
.psk-spa-page .psk-spa-readings dt { font-weight:650; }
.psk-spa-page .psk-spa-readings dd { margin:0; text-align:right; overflow-wrap:anywhere; }
.psk-spa-page .psk-spa-assumptions, .psk-spa-page .psk-spa-placeholder { color:var(--psk-muted); }
.psk-spa-page .psk-spa-no-addition { font-weight:750; color:var(--psk-dark); }
.psk-spa-page .psk-spa-guide { max-width:var(--psk-reading); margin:36px auto 0; }
.psk-spa-page .psk-spa-guide h2 { margin-top:28px; }
.psk-spa-page .psk-spa-guide li { overflow-wrap:anywhere; }
.psk-spa-page .psk-spa-byline { max-width:var(--psk-reading); margin:24px auto 0; color:var(--psk-muted); font-size:.85rem; }
.psk-spa-page :focus-visible { outline:3px solid var(--psk-dark-2); outline-offset:4px; }
@media (min-width:721px) {
 .psk-spa-page .psk-spa-calculator { grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); }
 .psk-spa-page .psk-spa-inputs { padding:28px; }
 .psk-spa-page .psk-spa-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .psk-spa-page .psk-spa-result { padding:32px; border-top:0; border-left:1px solid var(--psk-line); }
}
@media (prefers-reduced-motion:reduce) {
 .psk-spa-page *, .psk-spa-page *::before, .psk-spa-page *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}

.psk-spa-page .psk-spa-notice { padding:20px; margin:0; border-top:1px solid var(--psk-line); grid-column:1 / -1; background:var(--psk-soft); }

.psk-spa-page select[aria-invalid="true"] { border:2px solid var(--psk-dark-2); }
.psk-spa-page .psk-spa-warning { border-left:3px solid var(--psk-dark-2); padding-left:12px; font-weight:700; }

.psk-spa-page .psk-spa-readings { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.psk-spa-page .psk-spa-readings dt:last-of-type, .psk-spa-page .psk-spa-readings dd:last-child { grid-column:1 / -1; text-align:left; }
