/* Vendor calculator, standalone page (Home/Calculator).
   Colours, type scale and fonts come from site.css (--lg-*, --fs-*, @font-face).
   Bootstrap is not loaded on this page.

   H6 (design audit 21 Oct): on the site scale now —
     labels      12px IBM Plex Mono, uppercase (the eyebrow style used elsewhere)
     text        13 (help, disclaimer) / 14 (intro, notes, figure names) / 16 (inputs, plan names)
     results     20 (figures, headline) / 28 (net per month)
     h1          28
     spacing     multiples of 4; radii 6 / 8 / 14
   The two-panel layout and the tinted result panel are unchanged. */

/* ---------- page and shell ---------- */
body.lg-calc-page { display: block; margin: 0; padding: 0; min-height: 100dvh; background: var(--lg-bg); color: var(--lg-paper); }

.lg-calc { width: min(940px, calc(100% - 24px)); margin: 12px auto; padding: 0; border: 1px solid var(--lg-line-strong); border-radius: var(--lg-radius); background: var(--lg-bg); color: var(--lg-paper); }
.lg-calc-grid { display: grid; grid-template-columns: 1.05fr .95fr; }
.lg-calc-inputs { padding: 40px 32px 24px; }

/* ---------- close button ---------- */
.lg-calc-close-form { position: sticky; top: 0; height: 0; margin: 0; z-index: 2; text-align: right; }
.lg-calc-close { cursor: pointer; min-height: 44px; padding: 12px 20px; border: 0; background: transparent; color: var(--lg-muted); font: 500 var(--fs-caption)/16px 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.lg-calc-close:hover { color: var(--lg-paper); }

/* ---------- headings ---------- */
.lg-calc .lg-eyebrow { display: block; margin-bottom: 16px; font: 500 var(--fs-caption)/16px 'IBM Plex Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--lg-brass); }
.lg-calc h1 { margin: 0 0 8px; font: 600 var(--fs-xl)/34px 'Space Grotesk', sans-serif; color: var(--lg-paper); }
.lg-calc-intro { margin: 0 0 24px; font-size: var(--fs-ui); line-height: 20px; color: var(--lg-muted); }

/* ---------- labels: one style for legends and field labels ---------- */
.lg-calc-plan legend,
.lg-calc-field { float: none; font: 500 var(--fs-caption)/16px 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--lg-muted); }

/* ---------- segmented choices (currency, plan) ---------- */
.lg-calc-plan { margin: 0 0 20px; padding: 0; border: 0; min-width: 0; }
.lg-calc-plan legend { width: auto; padding: 0; margin-bottom: 8px; }
.lg-calc-plan-opts { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--lg-line-strong); border-radius: 8px; overflow: hidden; }
.lg-calc-plan label { position: relative; cursor: pointer; margin: 0; }
.lg-calc-plan label + label { border-left: 1px solid var(--lg-line-strong); }
.lg-calc-plan input { position: absolute; opacity: 0; inset: 0; }
.lg-calc-plan span { display: block; padding: 12px 16px; font: 600 var(--fs-base)/24px 'Inter', sans-serif; color: var(--lg-paper); text-transform: none; letter-spacing: 0; }
.lg-calc-plan small { display: block; font: 400 var(--fs-caption)/16px 'IBM Plex Mono', monospace; color: var(--lg-muted); }
.lg-calc-plan small span { display: inline; padding: 0; font: inherit; color: inherit; }
.lg-calc-plan input:checked + span { background: var(--lg-brass); color: var(--lg-on-brass); }
.lg-calc-plan input:checked + span small { color: rgba(26,18,0,.7); }

.lg-calc-currency { margin-bottom: 16px; }
.lg-calc-currency .lg-calc-plan-opts { width: 224px; }
.lg-calc-currency span { padding: 8px 16px; font-size: var(--fs-ui); line-height: 20px; }

/* ---------- number fields ---------- */
.lg-calc-field { display: block; margin-bottom: 16px; }
.lg-calc-field input { display: block; box-sizing: border-box; width: 100%; min-height: 44px; margin-top: 8px; padding: 8px 12px; border: 1px solid var(--lg-line-strong); border-radius: 8px; background: var(--lg-panel); color: var(--lg-paper); font: 600 var(--fs-base)/24px 'Inter', sans-serif; }
.lg-calc-field small { display: block; margin-top: 4px; font: 400 var(--fs-sm)/18px 'Inter', sans-serif; text-transform: none; letter-spacing: 0; }

.lg-calc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lg-calc-pair .lg-calc-field { display: flex; flex-direction: column; justify-content: flex-end; }

/* Money fields: the currency sign sits inside the input, centred vertically */
.lg-calc-money { position: relative; display: block; margin-top: 8px; }
.lg-calc-field .lg-calc-money input { margin-top: 0; padding-left: 32px; }
.lg-calc-money .cur { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font: 600 var(--fs-base)/24px 'Inter', sans-serif; color: var(--lg-muted); pointer-events: none; }

/* ---------- focus ---------- */
.lg-calc-plan input:focus-visible + span,
.lg-calc-field input:focus-visible,
.lg-calc-close:focus-visible { outline: 2px solid var(--lg-brass-bright); outline-offset: 2px; }

/* ---------- result panel ---------- */
.lg-calc-result { --tone: var(--lg-muted); display: flex; flex-direction: column; padding: 48px 32px 24px; background: color-mix(in srgb, var(--tone) 12%, var(--lg-panel)); border-left: 1px solid var(--lg-line); transition: background .25s; }
.lg-calc-result[data-verdict="green"] { --tone: var(--lg-ok); }
.lg-calc-result[data-verdict="orange"] { --tone: var(--lg-brass); }

.lg-calc-verdict { width: fit-content; padding: 4px 8px; border-radius: 6px; background: var(--tone); color: var(--lg-bg); font: 600 var(--fs-caption)/16px 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.lg-calc-headline { margin: 20px 0 24px; font: 600 var(--fs-lg)/28px 'Space Grotesk', sans-serif; color: var(--lg-paper); }

.lg-calc-figures { margin: 0 0 auto; border-top: 1px solid var(--lg-line-strong); }
.lg-calc-figures div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--lg-line-strong); }
.lg-calc-figures dt { font: 400 var(--fs-ui)/20px 'Inter', sans-serif; color: var(--lg-muted); }
.lg-calc-figures dd { margin: 0; font: 600 var(--fs-lg)/28px 'Space Grotesk', sans-serif; color: var(--lg-paper); }
.lg-calc-figures div:last-child dd { font-size: var(--fs-xl); line-height: 34px; color: var(--tone); }

.lg-calc-note { margin: 20px 0 0; font-size: var(--fs-ui); line-height: 20px; color: var(--lg-muted); }

/* ---------- disclaimer ---------- */
.lg-calc-disclaimer { margin: 0; padding: 16px 32px 20px; border-top: 1px solid var(--lg-line); font-size: var(--fs-sm); line-height: 18px; color: var(--lg-muted); }
.lg-calc-disclaimer a { color: var(--lg-brass-bright); }

/* ---------- prices could not be loaded ---------- */
.lg-calc-unavailable { padding: 40px 32px; }
.lg-calc-unavailable h1 { font: 600 var(--fs-xl)/34px 'Space Grotesk', sans-serif; }
.lg-calc-unavailable p { font-size: var(--fs-base); line-height: 24px; }
.lg-calc-unavailable a { color: var(--lg-brass-bright); }

/* ---------- phone ---------- */
@media (max-width: 720px) {
    .lg-calc { width: 100%; margin: 0; border: 0; border-radius: 0; }
    .lg-calc-grid, .lg-calc-pair { grid-template-columns: 1fr; gap: 0; }
    .lg-calc-pair .lg-calc-field { display: block; }
    .lg-calc-inputs { padding: 48px 20px 8px; }
    .lg-calc-result { padding: 24px 20px; border-left: 0; border-top: 1px solid var(--lg-line); }
    .lg-calc-disclaimer { padding: 16px 20px 20px; }
    .lg-calc-unavailable { padding: 40px 20px; }
}