/* calc.css: /calculator/ only (CALC bundle), on the site's tokens (style.css). Mobile first: every
   control is 44px or taller, text 16px and up, fine print 14px.
   The look: the form is a card of numbered steps; the answer is the share card filled in, a navy band
   with the amount and a meter (the ceiling range as a gold bar, what they pay as a pin, the stretch
   above the ceiling striped). From 1024px the form and the answer sit side by side, and until the
   first estimate the answer column holds the share card's blanks. The reading copy below keeps one
   centred measure. */

.calc { --calc-edge: #74879b;   /* control borders: 3.7:1 on white (WCAG 1.4.11 asks 3:1) */
    margin: 0 0 var(--space-3xl); }
.calc__aside { margin-top: 20px; }
@media (min-width: 1024px) {
    .calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
    .calc__aside { margin-top: 0; }
}
/* the answer stays in view while the form changes it; not on short screens, not while they type a number */
@media (min-width: 1024px) and (min-height: 820px) {
    .calc:not(.is-capturing) .calc__aside { position: sticky; top: calc(var(--header-h) + 20px); }
}
.calc-copy { max-width: 68ch; margin: 0 auto; }

/* ---- the form: a card of numbered steps ---- */
.calc__main { padding: 22px 18px 24px; background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--gold-500); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
@media (min-width: 600px) { .calc__main { padding: 28px 30px 30px; } }
.content-section .calc__h { margin: 0 0 18px; font-size: var(--text-h3); color: var(--navy-800); }
.content-section .calc__noscript { margin: 0; }
.calc__form { display: grid; gap: 24px; counter-reset: calc-step; }
.calc__field { margin: 0; padding: 0; border: 0; min-width: 0; }
.calc__form > .calc__field { counter-increment: calc-step; }   /* the silver step counts only once it shows */
.calc__label { display: block; padding: 0; margin: 0 0 8px; font-weight: 600; font-size: var(--text-h4); line-height: 1.35; color: var(--navy-800); }
.calc__field > .calc__label::before {
    content: counter(calc-step); display: inline-grid; place-items: center; width: 26px; height: 26px; margin: 0 10px 0 0;
    border-radius: 50%; background: var(--navy-700); color: var(--white); font-size: 0.875rem; font-weight: 700; line-height: 1; vertical-align: 2px; font-variant-numeric: tabular-nums;
}
.content-section .calc__helper, .calc__helper { margin: -2px 0 10px; font-size: var(--text-sm); color: var(--muted); line-height: 1.45; }
.calc__select, .calc__input { font: inherit; font-size: 1rem; color: var(--ink); background: var(--white); border: 1px solid var(--calc-edge); border-radius: var(--radius-md); min-height: 48px; transition: border-color var(--transition-fast); }
.calc__select:hover, .calc__input:hover { border-color: var(--navy-600); }
.calc__select { width: 100%; padding: 10px 12px; }
.calc__input { width: 100%; max-width: 22rem; padding: 10px 12px; }
.calc__stepper { display: inline-flex; align-items: center; gap: 6px; background: var(--white); border: 1px solid var(--calc-edge); border-radius: var(--radius-md); padding: 2px; }
.calc__stepper button { width: 44px; height: 44px; border: 0; border-radius: 6px; background: var(--navy-50); color: var(--navy-700); font-size: 1.4rem; line-height: 1; cursor: pointer; transition: background var(--transition-fast); }
.calc__stepper button:hover:not([aria-disabled="true"]) { background: var(--navy-100); }
/* at a limit: aria-disabled, never `disabled`, so a keyboard user keeps focus on the button (calc.js setSize) */
.calc__stepper button[aria-disabled="true"] { background: transparent; color: var(--gray-400); cursor: default; }
.calc__stepper output { min-width: 2.5ch; text-align: center; font-weight: 700; font-size: 1.25rem; color: var(--navy-800); font-variant-numeric: tabular-nums; }
.calc__bands { display: grid; gap: 8px; }
@media (min-width: 600px) { .calc__bands { grid-template-columns: 1fr 1fr; } }
.calc__choices { display: flex; flex-wrap: wrap; gap: 8px; }
.calc__choice { position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px; background: var(--white); border: 1px solid var(--calc-edge); border-radius: var(--radius-md); cursor: pointer; font-size: 1rem; line-height: 1.3; font-variant-numeric: tabular-nums; transition: border-color var(--transition-fast), background var(--transition-fast); }
.calc__choice:hover { border-color: var(--navy-600); background: var(--navy-50); }
.calc__choice input { width: 20px; height: 20px; margin: 0; accent-color: var(--navy-700); flex: none; }
.calc__choice:has(input:checked) { border-color: var(--navy-700); box-shadow: inset 0 0 0 1px var(--navy-700); background: var(--navy-50); color: var(--navy-800); }
.calc__choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.calc__choice--inline { flex: 1 1 auto; }
/* the premium: one bordered field, "$" before and "a month" after */
.calc__money { display: inline-flex; align-items: stretch; max-width: 100%; background: var(--white); border: 1px solid var(--calc-edge); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--transition-fast); }
.calc__money:hover { border-color: var(--navy-600); }
.calc__money:focus-within { border-color: var(--navy-700); outline: 3px solid var(--focus); outline-offset: 2px; }
.calc__money-cur { display: grid; place-items: center; padding: 0 14px; background: var(--navy-50); border-right: 1px solid var(--line); font-weight: 700; font-size: 1.15rem; color: var(--navy-800); }
.calc__money-input { width: 6.5rem; min-width: 0; min-height: 48px; padding: 10px 12px; border: 0; font: inherit; font-size: 1.125rem; font-weight: 600; color: var(--ink); background: transparent; font-variant-numeric: tabular-nums; }
.calc__money-input:focus-visible { outline: none; }   /* the whole field shows the ring (focus-within) */
.calc__money-per { display: grid; place-items: center; padding: 0 14px; background: var(--navy-50); border-left: 1px solid var(--line); color: var(--gray-700); white-space: nowrap; }
.content-section .calc__err, .calc__err { margin: 0; color: #b3261e; font-size: var(--text-sm); font-weight: 600; }
.calc__err:empty { display: none; }
.calc__go { width: 100%; }

/* ---- the answer: a navy band with the amount and the meter, then the words and the buttons ---- */
.calc__result { outline: none; }
.calc-card { overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.calc-card__head, .calc-preview {
    color: var(--white);
    background: radial-gradient(260px 220px at 100% 0%, rgba(197, 160, 89, 0.24), transparent 70%), linear-gradient(150deg, var(--navy-700) 0%, var(--navy-900) 100%);
}
.calc-card__head { padding: 20px 20px 22px; }
.calc-card__body { padding: 20px 20px 22px; }
@media (min-width: 600px) { .calc-card__head { padding: 24px 28px 26px; } .calc-card__body { padding: 22px 28px 26px; } }
.content-section .calc-card__h { margin: 0 0 6px; font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; line-height: 1.35; color: var(--gold-400); letter-spacing: 0.01em; text-wrap: balance; }
.content-section .calc-card__amount { margin: 0; font-family: var(--font-display); font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.35rem); line-height: 1.12; color: var(--white); text-wrap: balance; }
.calc-card__head :focus-visible { outline-color: var(--gold-400); }
.calc-card__h:focus { outline: none; }
.calc-card__h:focus-visible { outline: 3px solid var(--gold-400); outline-offset: 2px; }
.content-section .calc-card__line { margin: 0 0 12px; font-size: var(--text-base); line-height: 1.6; }
.content-section .calc-card__line--lead { font-size: var(--text-long); font-weight: 600; line-height: 1.5; color: var(--navy-800); }
.content-section .calc-card__nudge { color: var(--navy-700); font-weight: 600; }
.content-section .calc-card__note { margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: var(--text-sm); color: var(--muted); }
.calc-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
@media (max-width: 599px) { .calc-card__actions .btn { width: 100%; } }
.content-section .calc-card__more { margin: 18px 0 0; padding: 14px 16px; background: var(--gold-100); border-left: 3px solid var(--gold-500); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: var(--text-base); line-height: 1.55; }
.calc-card__more strong { color: var(--navy-800); }
.content-section .calc-card__fine { margin: 14px 0 0; font-size: var(--text-xs); color: var(--muted); }
/* an unlicensed state: the honest answer, no band */
.calc-card--oos { padding: 18px 20px; background: var(--gold-100); border-color: var(--gold-300); border-left: 4px solid var(--gold-500); box-shadow: none; }
.content-section .calc-card--oos .calc-card__line { margin: 0; }

/* the meter (drawing only; the words above and below it say the same) */
.calc-meter { --lo: 0%; --hi: 0%; --pin: 0%; margin-top: 18px; }
.calc-meter__label { display: block; width: max-content; max-width: 100%; font-size: var(--text-xs); line-height: 1.3; white-space: nowrap; }
.calc-meter__label--pin { margin-bottom: 8px; color: var(--white); font-weight: 600; }
.calc-meter__label--band { margin-top: 8px; color: var(--gold-400); }
.calc-meter--empty .calc-meter__label--pin { color: var(--on-dark-muted); font-weight: 400; }
.calc-meter__track { position: relative; height: 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); }
.calc-meter__band { position: absolute; top: 0; bottom: 0; left: var(--lo); width: calc(var(--hi) - var(--lo)); min-width: 12px; border-radius: 999px; background: var(--gold-500); }
.calc-meter__gap { position: absolute; top: 3px; bottom: 3px; left: var(--hi); width: calc(var(--pin) - var(--hi)); background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0 3px, transparent 3px 7px); }
.calc-meter__pin { position: absolute; top: 50%; left: var(--pin); width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 3px var(--navy-800), 0 2px 6px rgba(0, 0, 0, 0.35); }
.calc-meter--empty .calc-meter__pin { background: transparent; border: 2px dashed rgba(255, 255, 255, 0.6); box-shadow: none; }

/* desktop, before the first estimate: the share card with blanks */
.calc-preview { display: none; }
@media (min-width: 1024px) { .calc-preview { display: block; padding: 28px 30px 30px; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } }
.content-section .calc-preview__label { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--gold-400); }
.content-section .calc-preview__value { margin: 2px 0 18px; font-family: var(--font-display); font-size: 1.75rem; line-height: 1.25; color: var(--white); }
.calc-blank { display: inline-block; width: 3.2em; height: 0.8em; margin: 0 0.12em; border-bottom: 2px dashed rgba(255, 255, 255, 0.55); }
.calc-meter__label .calc-blank { width: 2.6em; height: 0.9em; margin: 0 0 0 0.1em; }
.calc-preview .calc-meter { margin-top: 4px; }
.calc-preview .calc-meter__band { left: 28%; width: 34%; background: rgba(197, 160, 89, 0.5); }

/* Mary by the buttons */
.calc-mary { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 12px 14px; background: var(--navy-50); border-radius: var(--radius-md); }
.calc-mary__photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--gold-300); }
.content-section .calc-mary__text { margin: 0; font-size: var(--text-base); color: var(--gray-700); line-height: 1.45; }

/* "Have Mary call me" */
.calc-capture { margin-top: 16px; padding: 20px; background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--navy-700); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
@media (min-width: 600px) { .calc-capture { padding: 24px 28px 26px; } }
.content-section .calc-capture__h { margin: 0 0 6px; font-size: var(--text-h3); color: var(--navy-800); }
.content-section .calc-capture__text { margin: 0 0 16px; font-size: var(--text-base); }
.calc-capture .calc__label { font-size: var(--text-base); }
.calc-capture .calc__input { max-width: none; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.calc-consent { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0 12px; padding: 12px 14px; background: var(--gray-100); border-radius: var(--radius-md); font-size: var(--text-base); line-height: 1.5; color: var(--gray-700); cursor: pointer; }   /* consent at body size, never fine print */
.calc-consent input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--navy-700); }
.calc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.calc-capture #calc-send { width: 100%; }
.calc-capture #calc-send[aria-disabled="true"] { opacity: .75; cursor: progress; }
.content-section .calc-capture__legal { margin: 12px 0 0; }
.calc-done { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 16px 18px; background: var(--success-light); border: 1px solid rgba(46, 125, 50, 0.3); border-radius: var(--radius-lg); }
.calc-done__icon { flex: none; width: 28px; height: 28px; color: var(--success); }
.content-section .calc-done p { margin: 2px 0 0; font-size: var(--text-base); }
.calc-done:focus { outline: none; }

/* ---- the reading copy ---- */
.calc-table td { white-space: nowrap; }   /* short cells stay whole; the long headers wrap instead */
.calc-table th { white-space: normal; }
.calc-table td:last-child, .calc-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap .calc-table th { background: var(--navy-50); color: var(--navy-800); }
.calc-table tbody tr:nth-child(even) td { background: rgba(0, 51, 102, 0.025); }
.calc-table .calc-table__none td { background: var(--gold-100); color: var(--gray-700); font-weight: 600; }
.content-section .calc-sources, .content-section .calc-fine { font-size: var(--text-xs); color: var(--muted); }
/* the worked example: the sentence, then its four numbers in a row */
.calc-example-box { margin: var(--space-lg) 0; padding: 18px 18px 20px; background: var(--navy-50); border: 1px solid var(--line); border-radius: var(--radius-lg); }
@media (min-width: 600px) { .calc-example-box { padding: 22px 24px 24px; } }
.content-section .calc-example { margin: 0 0 16px; }
.calc-chain { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 600px) { .calc-chain { grid-template-columns: repeat(4, 1fr); gap: 22px; } }
.content-section .calc-chain__step { position: relative; display: flex; flex-direction: column; margin: 0; padding: 12px 12px 10px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); }
@media (min-width: 600px) {
    .calc-chain__step + .calc-chain__step::before {   /* a chevron between the steps */
        content: ""; position: absolute; top: 50%; left: -15px; width: 8px; height: 8px; margin-top: -4px;
        border-top: 2px solid var(--gold-500); border-right: 2px solid var(--gold-500); transform: rotate(45deg);
    }
}
.calc-chain__value { font-family: var(--font-display); font-size: 1.375rem; line-height: 1.2; color: var(--navy-800); font-variant-numeric: tabular-nums; }
.calc-chain__label { margin-top: 2px; font-size: var(--text-xs); line-height: 1.3; color: var(--muted); }
.calc-chain__step:last-child { background: var(--navy-700); border-color: var(--navy-700); }
.calc-chain__step:last-child .calc-chain__value { color: var(--white); }
.calc-chain__step:last-child .calc-chain__label { color: var(--gold-400); }
/* the 400% line for 1 to 4 people: four tiles */
.content-section .calc-cliffs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: var(--space-md) 0 var(--space-lg); padding: 0; list-style: none; }
@media (min-width: 600px) { .content-section .calc-cliffs { grid-template-columns: repeat(4, 1fr); } }
.content-section .calc-cliffs li { display: flex; flex-direction: column; margin: 0; padding: 12px 14px; background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--gold-500); border-radius: var(--radius-md); }
.calc-cliffs__label { font-size: var(--text-xs); line-height: 1.3; color: var(--muted); }
.calc-cliffs__value { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.25; color: var(--navy-800); font-variant-numeric: tabular-nums; }