/* Layout for the /calculators/ pages. Shares the landing-page shell
   (assets/landing.css) and adds the form and results panel. */

.calc-grid { display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:clamp(1.5rem,3vw,2.5rem); align-items:start; margin-top:2rem; }
@media (max-width:900px) { .calc-grid { grid-template-columns:1fr; } }

.calc-form { padding:1.75rem; border:1px solid var(--c-line); border-radius:16px; background:var(--c-surface); position:sticky; top:6rem; }
@media (max-width:900px) { .calc-form { position:static; } }
.calc-form legend { padding:0; margin:0 0 1.25rem; color:var(--c-accent); font:500 .7rem 'IBM Plex Mono',monospace; letter-spacing:.14em; text-transform:uppercase; }
.calc-form fieldset { margin:0; padding:0; border:0; }
.calc-field { margin-bottom:1.15rem; }
.calc-field:last-child { margin-bottom:0; }
.calc-field label { display:block; margin-bottom:.35rem; color:var(--c-ink); font-size:.9rem; font-weight:600; }
.calc-field input, .calc-field select { width:100%; padding:.6rem .75rem; border:1px solid var(--c-line-firm); border-radius:8px; background:var(--c-surface); color:var(--c-ink); font-family:'IBM Plex Mono',monospace; font-size:.95rem; }
.calc-field input:focus, .calc-field select:focus { outline:2px solid var(--c-accent); outline-offset:1px; border-color:var(--c-accent); }
.calc-field .hint { display:block; margin-top:.3rem; color:var(--c-sub); font-size:.78rem; line-height:1.5; }

.calc-result { padding:1.75rem; border:1px solid var(--c-line); border-radius:16px; background:var(--c-surface); }
.calc-result > h2 { margin:0 0 1.25rem; font-size:1.3rem !important; }
.calc-table { width:100%; border-collapse:collapse; }
.calc-table th, .calc-table td { padding:.75rem .5rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--c-line-soft); }
.calc-table tr:last-child th, .calc-table tr:last-child td { border-bottom:0; }
.calc-table th { width:34%; color:var(--c-sub); font-size:.9rem; font-weight:500; }
.calc-val { width:24%; color:var(--c-ink); font-family:'IBM Plex Mono',monospace; font-size:1rem; font-weight:600; white-space:nowrap; }
.calc-why { color:var(--c-sub); font-size:.85rem; line-height:1.6; }
.calc-assume { margin:1.75rem 0 .6rem; color:var(--c-accent); font:500 .68rem 'IBM Plex Mono',monospace; letter-spacing:.14em; text-transform:uppercase; }
.calc-notes { margin:0; padding-left:1.2rem; color:var(--c-sub); font-size:.88rem; line-height:1.7; }
.calc-notes li { margin-bottom:.45rem; }
.calc-notes li:last-child { margin-bottom:0; }
.calc-empty { margin:0; color:var(--c-sub); font-size:.95rem; }

@media (max-width:600px) {
    .calc-table th, .calc-table td { display:block; width:auto; padding:.25rem 0; border-bottom:0; }
    .calc-table tr { display:block; padding:.75rem 0; border-bottom:1px solid var(--c-line-soft); }
    .calc-val { white-space:normal; }
}

/* ---- Selection report ---- */
.report-form { padding:1.75rem; border:1px solid var(--c-line); border-radius:16px; background:var(--c-surface); }
.report-form textarea { width:100%; min-height:110px; padding:.6rem .75rem; border:1px solid var(--c-line-firm); border-radius:8px; font-family:inherit; font-size:.95rem; line-height:1.6; resize:vertical; }
.report-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.5rem; }
.report-btn { padding:.75rem 1.25rem; border:0; border-radius:8px; background:var(--c-accent-fill); color:var(--c-on-accent); font:600 .78rem 'IBM Plex Mono',monospace; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; text-decoration:none; display:inline-block; }
.report-btn:hover { background:var(--c-accent-fill-hover); }
.report-btn--ghost { background:transparent; border:1px solid var(--c-line-hard); color:var(--c-ink); }
.report-btn--ghost:hover { background:var(--c-band); border-color:var(--c-accent); }
.report-preview { margin-top:2rem; padding:1.75rem; border:1px solid var(--c-line); border-radius:16px; background:var(--c-surface); }
.report-preview pre { margin:0; overflow-x:auto; color:var(--c-ink); font-family:'IBM Plex Mono',monospace; font-size:.82rem; line-height:1.7; white-space:pre-wrap; word-break:break-word; }

@media print {
    header, .site-footer, .lp-quote, .report-actions, .report-form { display:none !important; }
    .report-preview { border:0; padding:0; }
}

/* ---- Field validation ---- */
/* The status line is for screen readers only: sighted users already see the
   result table change, and a visible duplicate would just be noise. */
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; white-space:nowrap; clip:rect(0 0 0 0); border:0; }
.calc-field__error:empty { display:none; }
/* Colour is not the only signal: the message states the problem in words, and
   aria-invalid marks the control for assistive technology. */
.calc-field__error { display:block; margin-top:.4rem; color:var(--c-danger); font-size:.78rem; line-height:1.5; }
.calc-field.is-invalid input, .calc-field.is-invalid select { border-color:var(--c-danger); box-shadow:0 0 0 3px var(--c-danger-ring); }
.calc-field.is-invalid label { color:var(--c-danger); }
.calc-notes--errors { color:var(--c-danger); }