/* RideClaim claim calculator: live state pages. Template tokens (--t-*) only,
   so it follows Templates A, B and C in light and dark. Scoped to the
   calculator (.rc-calc, .rc-calc-slot) and the grid row it sits in. */

/* ---------- calculator ---------- */
.rc-calc { container-type: inline-size; }
.rc-calc__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 4px 0 0; }
@container (min-width: 540px) { .rc-calc__form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); align-items: end; } }
.rc-calc__field { min-width: 0; }
.rc-calc__field label, .rc-calc__label { display: block; font-family: var(--t-ui); font-weight: 600; font-size: 13.5px; line-height: 1.3; margin: 0 0 6px; color: var(--t-text); }
.rc-calc__money-input { display: flex; align-items: center; border: 1px solid var(--t-rule-soft); border-radius: var(--t-radius, 0); background: var(--t-paper); min-height: 46px; }
.rc-calc__money-input span { padding: 0 2px 0 12px; font-family: var(--t-mono); color: var(--t-muted); }
.rc-calc__money-field { border: 0; outline: none; background: transparent; min-height: 44px; width: 100%; min-width: 0; padding: 0 10px 0 4px; font-family: var(--t-mono); font-size: 16px; color: var(--t-text); }
.rc-calc__money-input:focus-within { outline: 2px solid var(--t-accent-ink); outline-offset: 1px; }
.rc-calc__chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 6px; }
.rc-calc__chip { position: relative; display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 6px; border: 1px solid var(--t-rule-soft); border-radius: var(--t-radius, 0); background: var(--t-paper); color: var(--t-text); font-family: var(--t-ui); font-weight: 600; font-size: 14px; cursor: pointer; text-align: center; }
.rc-calc__chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rc-calc__chip:has(input:checked) { background: var(--t-text); color: var(--t-paper); border-color: var(--t-text); }
.rc-calc__chip:has(input:focus-visible) { outline: 2px solid var(--t-accent-ink); outline-offset: 2px; }

.rc-calc__result { margin: 20px 0 0; padding: 18px 20px; border: 1px solid var(--t-rule-soft); border-left: 4px solid var(--t-accent-ink); border-radius: var(--t-radius, 0); background: var(--t-surface); }
.rc-calc__result p { margin: 0 !important; max-width: none; }
.rc-calc__result-label { font-family: var(--t-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--t-muted); }
.rc-calc__total { font-family: var(--t-display); font-size: clamp(36px, 5vw, 52px); line-height: 1.05; font-weight: 700; color: var(--t-text); margin-top: 4px !important; font-variant-numeric: tabular-nums; }
.rc-calc__math { margin-top: 8px !important; font-family: var(--t-mono); font-size: 13px; line-height: 1.5; color: var(--t-text); overflow-wrap: anywhere; }
.rc-calc__rule { margin-top: 8px !important; font-size: 13px; line-height: 1.45; color: var(--t-muted); }
.rc-calc__collectable { margin-top: 8px !important; font-size: 14px; line-height: 1.5; color: var(--t-text); font-weight: 600; }
.rc-calc__collectable::before { content: ""; display: block; width: 36px; height: 2px; background: var(--t-accent-ink); margin-bottom: 6px; }
.rc-calc__facts { list-style: none; margin: 14px 0 0 !important; padding: 0 !important; display: grid; gap: 6px; }
.rc-calc__facts li { margin: 0; padding-left: 16px; position: relative; font-size: 14px; line-height: 1.45; }
.rc-calc__facts li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; background: var(--t-accent-ink); }
.rc-calc__cite { font-family: var(--t-mono); font-size: 11.5px; color: var(--t-muted); }
.rc-calc__cta { margin: 18px 0 0 !important; }
.rc-calc__cta .btn { min-height: 48px; }
.rc-calc .btn.rc-calc__solid { background: var(--t-text); color: var(--t-paper); border: 1px solid var(--t-text); }
.rc-calc .btn.rc-calc__solid:hover { background: var(--t-accent-ink); border-color: var(--t-accent-ink); color: var(--t-paper); }
.rc-calc__disclaimer { margin-top: 14px !important; }
@container (max-width: 539px) { .rc-calc__cta .btn { width: 100%; justify-content: center; } }

/* ---------- shared range text ---------- */
.rc-calc__total { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.15; text-wrap: balance; }
.rc-calc__total.is-empty { font-size: 18px; font-weight: 500; color: var(--t-muted); }
.rc-calc__rule { color: var(--t-text) !important; opacity: .82; margin-top: 10px !important; }
.rc-calc__chip span { min-width: 0; overflow-wrap: anywhere; }

/* =====================================================================
   TEMPLATE FORMATS. Same markup everywhere; each template restyles it.
   ===================================================================== */

/* ---------- A  Broadsheet: editorial page, rules, serif headline figure ---------- */
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc-chips li { background: transparent; border: 0; border-top: 2px solid var(--t-rule); border-radius: 0; padding: 10px 0 0; }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__form { border-top: 1px solid var(--t-rule); border-bottom: 1px solid var(--t-rule); padding: 16px 0 18px; column-gap: 24px; }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__field label,
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__label { font: 500 10.5px/1.3 var(--t-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--t-muted); }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__money-input { border: 0; border-bottom: 1px solid var(--t-rule); border-radius: 0; background: transparent; }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__money-input span { padding-left: 0; font-family: var(--t-display); font-size: 20px; color: var(--t-text); }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__money-field { font-family: var(--t-display); font-size: 22px; }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__chips { gap: 0; border: 1px solid var(--t-rule); }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__chip { border: 0; border-left: 1px solid var(--t-rule); border-radius: 0; background: transparent; font-family: var(--t-display); font-weight: 500; font-size: 16px; }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__chip:first-child { border-left: 0; }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__chip:has(input:checked) { background: var(--t-accent); color: var(--t-on-accent); font-style: italic; }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__result { background: transparent; border: 0; border-top: 4px double var(--t-rule); border-bottom: 1px solid var(--t-rule); border-radius: 0; padding: 18px 0 20px; text-align: center; }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__result-label { color: var(--t-accent-ink); letter-spacing: .16em; }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__total { font-family: var(--t-display); font-weight: 600; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.04; letter-spacing: -.02em; max-width: 22ch; margin-left: auto !important; margin-right: auto !important; }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__rule { font-family: var(--t-display); font-style: italic; font-size: 16px; line-height: 1.4; max-width: 56ch !important; margin-left: auto !important; margin-right: auto !important; opacity: 1; color: var(--t-muted) !important; }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__facts { counter-reset: rc-fact; }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__facts li { counter-increment: rc-fact; padding-left: 26px; font-size: 14.5px; }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__facts li::before { content: counter(rc-fact) "."; background: none; width: auto; height: auto; top: 0; font: 600 14px/1.45 var(--t-display); color: var(--t-accent-ink); }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc .btn.rc-calc__solid { border-radius: 0; font-family: var(--t-ui); letter-spacing: .02em; }

/* ---------- B  Night Map: map-app panels, grid, glow ---------- */
:root[data-rc-template="B"] .rc-calc__money-input, :root[data-rc-template="B"] .rc-calc__chip { border-radius: 10px; background: var(--t-surface); }
:root[data-rc-template="B"] .rc-calc__chips { padding: 4px; gap: 4px; border: 1px solid var(--t-rule-soft); border-radius: 12px; background: var(--t-surface); }
:root[data-rc-template="B"] .rc-calc__chip { border-color: transparent; background: transparent; min-height: 38px; font-weight: 500; }
:root[data-rc-template="B"] .rc-calc__chip:has(input:checked) { background: var(--t-accent-soft); color: var(--t-accent-ink); border-color: var(--t-accent); box-shadow: 0 0 0 3px var(--t-glow); }
:root[data-rc-template="B"] .rc-calc__field label, :root[data-rc-template="B"] .rc-calc__label { font-weight: 500; color: var(--t-muted); }
/* The result is always a night-map panel (B's dark tokens, scoped here), in light mode too. */
:root[data-rc-template="B"] .rc-calc__result {
  --np-bg: #11121d; --np-text: #e9e9ed; --np-muted: #9b9dad; --np-grid: rgba(233,233,237,.06);
  --np-accent: oklch(81% .13 var(--rc-hue, 24)); --np-glow: oklch(78% .14 var(--rc-hue, 24) / .38);
  position: relative; overflow: hidden; border: 1px solid #2c2f40; border-radius: 16px; padding: 22px 24px 22px 24px; color: var(--np-text);
  background:
    radial-gradient(ellipse 55% 90% at 100% 0%, var(--np-glow), transparent 70%),
    linear-gradient(var(--np-grid) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--np-grid) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--np-bg);
}
:root[data-rc-template="B"] .rc-calc__result-label { color: var(--np-accent); display: flex; align-items: center; gap: 8px; }
:root[data-rc-template="B"] .rc-calc__result-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--np-accent); box-shadow: 0 0 0 4px var(--np-glow); }
:root[data-rc-template="B"] .rc-calc__total { font-family: var(--t-display); font-weight: 600; letter-spacing: -.025em; color: var(--np-text); }
:root[data-rc-template="B"] .rc-calc__total.is-empty { color: var(--np-muted); }
:root[data-rc-template="B"] .rc-calc__rule { color: var(--np-muted) !important; opacity: 1; }
:root[data-rc-template="B"] .rc-calc__facts li { padding: 10px 12px 10px 30px; border: 1px solid var(--t-rule-soft); border-radius: 10px; background: var(--t-surface); }
:root[data-rc-template="B"] .rc-calc__facts li::before { left: 12px; top: 1.05em; border-radius: 50%; background: var(--t-accent); box-shadow: 0 0 0 3px var(--t-glow); }
:root[data-rc-template="B"] .rc-calc .btn.rc-calc__solid { border-radius: 10px; background: var(--t-accent); border-color: var(--t-accent); color: var(--t-on-accent); }
:root[data-rc-template="B"] .rc-calc .btn.rc-calc__solid:hover { background: var(--t-accent-ink); border-color: var(--t-accent-ink); color: var(--t-paper); }

/* ---------- C  Trip Record: receipt lines, mono, tear-off stub ---------- */
:root[data-rc-template="C"] .rc-calc-chips strong { font-stretch: 75%; font-variation-settings: 'wdth' 75; text-transform: uppercase; font-weight: 800; }
:root[data-rc-template="C"] .rc-calc__form { border-top: 1.5px dashed var(--t-rule); border-bottom: 1.5px dashed var(--t-rule); padding: 14px 0 16px; }
:root[data-rc-template="C"] .rc-calc__field label, :root[data-rc-template="C"] .rc-calc__label { font: 700 11px/1.3 var(--t-mono); text-transform: uppercase; letter-spacing: .03em; }
:root[data-rc-template="C"] .rc-calc__money-input { border: 0; border-bottom: 1.5px dotted var(--t-rule); border-radius: 0; background: transparent; }
:root[data-rc-template="C"] .rc-calc__money-input span, :root[data-rc-template="C"] .rc-calc__money-field { font-family: var(--t-mono); font-weight: 700; color: var(--t-text); }
:root[data-rc-template="C"] .rc-calc__chip { border: 1.5px solid var(--t-rule); border-radius: 0; background: transparent; font: 700 10.5px/1.2 var(--t-mono); text-transform: uppercase; letter-spacing: .02em; padding: 0 4px; }
:root[data-rc-template="C"] .rc-calc__chip:has(input:checked) { background: var(--t-ink); color: var(--t-on-ink); border-color: var(--t-ink); }
:root[data-rc-template="C"] .rc-calc__result { position: relative; margin-top: 26px; border: 0; border-radius: 0; padding: 26px 22px 30px; background: var(--t-surface); text-align: left;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 16px 51% repeat-x;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 16px 51% repeat-x; }
:root[data-rc-template="C"] .rc-calc__result-label { font: 700 11px/1.2 var(--t-mono); color: var(--t-text); padding-bottom: 10px; border-bottom: 1.5px dashed var(--t-rule); }
:root[data-rc-template="C"] .rc-calc__total { margin-top: 12px !important; font-family: var(--t-display); font-stretch: 72%; font-variation-settings: 'wdth' 72; font-weight: 900; text-transform: uppercase; font-size: clamp(30px, 3.6vw, 44px); line-height: .98; }
:root[data-rc-template="C"] .rc-calc__total.is-empty { text-transform: none; font-weight: 500; font-stretch: 100%; font-variation-settings: normal; font-size: 16px; }
:root[data-rc-template="C"] .rc-calc__rule { font-family: var(--t-mono); font-size: 11.5px; line-height: 1.6; padding-top: 10px; border-top: 1.5px dashed var(--t-rule); opacity: .9; }
:root[data-rc-template="C"] .rc-calc__result::after { content: ""; display: block; height: 26px; margin-top: 14px; background: repeating-linear-gradient(90deg, var(--t-text) 0 2px, transparent 2px 4px, var(--t-text) 4px 7px, transparent 7px 9px, var(--t-text) 9px 10px, transparent 10px 13px); opacity: .85; }
:root[data-rc-template="C"] .rc-calc__facts li { padding-left: 22px; font-family: var(--t-mono); font-size: 12px; line-height: 1.6; }
:root[data-rc-template="C"] .rc-calc__facts li::before { content: "*"; background: none; width: auto; height: auto; top: 0; font: 700 13px/1.5 var(--t-mono); color: var(--t-text); }
:root[data-rc-template="C"] .rc-calc .btn.rc-calc__solid { border-radius: 0; background: var(--t-ink); border-color: var(--t-ink); color: var(--t-on-ink); font: 700 13px/1 var(--t-mono); text-transform: uppercase; letter-spacing: .04em; }

/* ---------- PROTOTYPE ONLY ---------- */

/* QA fixes: keep severity chips on one line inside the narrow hub column. */
@container (min-width: 540px) { .rc-calc__form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.7fr); } }
.rc-calc__chip { display: grid !important; place-items: center; white-space: nowrap; }
:root[data-rc-template="B"] .rc-calc__chip { font-size: 13px; padding: 0 2px; }
:root[data-rc-template="C"] .rc-calc__chip { font-size: 10px; letter-spacing: 0; padding: 0 2px; }


/* ==========================================================================
   calculator first. The calculator renders into .rc-calc-slot,
   which sits right after the hero in the markup, and gets its own grid row
   directly under the hero at every width (before the TOC pills, the guide
   sections and the form on mobile).
   ========================================================================== */
.rc-calc-slot { grid-area: calc; min-width: 0; }
.rc-calc-slot:empty { display: none; }
.rc-calc-slot > .rc-calc { counter-increment: none; }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc-slot .rc-kicker::before { content: none; }
:root[data-rc-template="C"] .rc-calc-slot .rc-kicker::before { content: "§ "; }

/* A (Broadsheet) and C (Trip Record) share the base grid tracks. */
:root:not([data-rc-template="B"]) .rc-shell { grid-template-areas: "hero hero hero" ". calc ." ". left ." ". main ." ". right ."; }
@media (max-width: 900px) {
  :root:not([data-rc-template="B"]) body .rc-shell { grid-template-areas: "hero hero hero" ". calc ." ". toc ." ". states ." ". main ." ". right ."; }
}
@media (min-width: 901px) and (max-width: 1179px) {
  :root:not([data-rc-template="B"]) body .rc-shell { grid-template-areas: "hero hero hero hero" ". calc right ." ". toc right ." ". states right ." ". main right ."; }
}
@media (min-width: 1180px) {
  :root:not([data-rc-template="B"]) body .rc-shell { grid-template-areas: "hero hero hero hero hero" ". left calc right ." ". left main right ."; }
}
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc-slot { padding-top: 36px; }
@media (min-width: 1180px) { :is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc-slot { padding-top: 44px; } }
:root[data-rc-template="C"] .rc-calc-slot { padding-top: 26px; }
@media (max-width: 900px) { :root[data-rc-template="C"] .rc-calc-slot { margin: 0 calc(-1 * var(--pad) + 8px); padding-top: 18px; } }

/* B (Night Map) has its own tracks. */
@media (max-width: 900px) {
  :root[data-rc-template="B"] body .rc-shell { grid-template-areas: "hero" "calc" "toc" "states" "main" "right"; }
  :root[data-rc-template="B"] .rc-calc-slot { margin: 14px var(--pad) 0; }
}
@media (min-width: 901px) and (max-width: 1179px) {
  :root[data-rc-template="B"] body .rc-shell { grid-template-areas: "hero right" "calc right" "toc right" "states right" "main right"; }
  :root[data-rc-template="B"] .rc-calc-slot { margin: 18px var(--pad) 0; }
}
@media (min-width: 1180px) {
  :root[data-rc-template="B"] body .rc-shell { grid-template-areas: "left hero right" "left calc right" "left main right"; }
  :root[data-rc-template="B"] body .rc-shell > .rc-rail--left { grid-row: 1 / span 3; }
  :root[data-rc-template="B"] .rc-calc-slot { margin: 18px 28px 0; }
}

/* B light: white on the mid-lightness accent measured about 4.4:1 for some
   hues, so light-mode accent buttons use the deeper accent-ink fill. */
:root[data-rc-template="B"] { --pv-btn-bg: var(--t-accent-ink); --pv-btn-ink: #fff; }
:root[data-rc-template="B"][data-theme="dark"] { --pv-btn-bg: var(--t-accent); --pv-btn-ink: var(--t-on-accent); }
@media (prefers-color-scheme: dark) { :root[data-rc-template="B"]:not([data-theme]) { --pv-btn-bg: var(--t-accent); --pv-btn-ink: var(--t-on-accent); } }
:root[data-rc-template="B"] body.rc-state .rc-calc__cta .btn { background: var(--pv-btn-bg) !important; color: var(--pv-btn-ink) !important; }

/* ==========================================================================
   step 2, the short contact step inside the calculator card.
   Inputs reuse the money-input look, so each template keeps its format.
   ========================================================================== */
.rc-calc__step2 { margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid var(--t-rule); }
.rc-calc__step2[hidden] { display: none; }
.rc-calc__step-label { margin: 0 0 4px; font: 500 11px/1.3 var(--t-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--t-muted); }
.rc-calc__step2 h3 { margin: 0 0 6px; font-family: var(--t-display); font-size: clamp(21px, 2vw, 26px); line-height: 1.15; color: var(--t-text); text-wrap: balance; }
.rc-calc__step-sub { margin: 0 0 14px; font-size: 14.5px; color: var(--t-muted); }
.rc-calc__lead-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@container (min-width: 540px) { .rc-calc__lead-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rc-calc__text-input .rc-calc__money-field { padding-left: 12px; }
.rc-calc__consent { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; font-size: 13px; line-height: 1.45; color: var(--t-text); }
.rc-calc__consent input { margin-top: 3px; flex: none; width: 18px; height: 18px; accent-color: var(--t-accent-ink); }
.rc-calc__lead .rc-calc__cta { margin-top: 14px !important; }
.rc-calc__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__step2 { border-top: 3px double var(--t-rule); }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__text-input .rc-calc__money-field { padding-left: 0; }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__step2 h3 { font-weight: 500; letter-spacing: -.01em; }
:root[data-rc-template="B"] .rc-calc__step2 { border-top: 1px solid var(--t-rule-soft); }
:root[data-rc-template="B"] .rc-calc__step2 h3 { font-weight: 600; letter-spacing: -.02em; }
:root[data-rc-template="C"] .rc-calc__step2 { border-top: 1.5px dashed var(--t-rule); }
:root[data-rc-template="C"] .rc-calc__step2 h3 { font-stretch: 62%; font-variation-settings: 'wdth' 62; font-weight: 900; text-transform: uppercase; }
:root[data-rc-template="C"] .rc-calc__text-input .rc-calc__money-field { padding-left: 0; }
:root[data-rc-template="C"] .rc-calc__step-sub, :root[data-rc-template="C"] .rc-calc__consent { font-family: var(--t-mono); font-size: 12px; }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__text-input .rc-calc__money-field { font-size: 18px; }
body.rc-state .rc-calc .rc-calc__step2 h3 { margin: 0 0 6px; font-family: var(--t-display); font-size: clamp(22px, 2.2vw, 28px); line-height: 1.12; color: var(--t-text); }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) body.rc-state .rc-calc .rc-calc__step2 h3 { font-weight: 500; letter-spacing: -.015em; }
:root[data-rc-template="B"] body.rc-state .rc-calc .rc-calc__step2 h3 { font-weight: 600; letter-spacing: -.025em; }
:root[data-rc-template="C"] body.rc-state .rc-calc .rc-calc__step2 h3 { font-stretch: 62%; font-variation-settings: 'wdth' 62; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; font-size: clamp(26px, 2.6vw, 34px); line-height: .95; }

/* ==========================================================================
   step 2 question 1, "Who were you in the accident?" chips.
   Native radios (Tab into the group, arrow keys to move, Space to pick),
   visually covered by the label. Chips wrap at any width.
   ========================================================================== */
.rc-calc__who { margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
.rc-calc__who legend { padding: 0; margin: 0 0 8px; }
.rc-calc__who-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rc-calc__who-chip { position: relative; display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; box-sizing: border-box; padding: 8px 14px; border: 1px solid var(--t-rule-soft); border-radius: var(--t-radius, 0); background: var(--t-paper); color: var(--t-text); font: 600 14px/1.25 var(--t-ui); cursor: pointer; text-align: left; }
.rc-calc__who-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rc-calc__who-chip span { min-width: 0; overflow-wrap: anywhere; }
.rc-calc__who-chip:has(input:checked) { background: var(--t-text); color: var(--t-paper); border-color: var(--t-text); }
.rc-calc__who-chip:has(input:focus-visible) { outline: 2px solid var(--t-accent-ink); outline-offset: 2px; }
/* A: ruled newspaper boxes, serif labels, accent fill with italic when picked */
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__who-chips { gap: 6px; }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__who-chip { border: 1px solid var(--t-rule); border-radius: 0; background: transparent; font: 500 16px/1.2 var(--t-display); }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__who-chip:has(input:checked) { background: var(--t-accent); color: var(--t-on-accent); border-color: var(--t-accent); font-style: italic; }
/* B: rounded pills with the state glow */
:root[data-rc-template="B"] .rc-calc__who-chip { border-radius: 999px; background: var(--t-surface); font-weight: 500; font-size: 13.5px; padding: 8px 16px; }
:root[data-rc-template="B"] .rc-calc__who-chip:has(input:checked) { background: var(--t-accent-soft); color: var(--t-accent-ink); border-color: var(--t-accent); box-shadow: 0 0 0 3px var(--t-glow); }
/* C: receipt boxes, mono uppercase, ink fill when picked */
:root[data-rc-template="C"] .rc-calc__who-chip { border: 1.5px solid var(--t-rule); border-radius: 0; background: transparent; font: 700 11px/1.3 var(--t-mono); text-transform: uppercase; letter-spacing: .02em; padding: 8px 10px; }
:root[data-rc-template="C"] .rc-calc__who-chip:has(input:checked) { background: var(--t-ink); color: var(--t-on-ink); border-color: var(--t-ink); }

/* ==========================================================================
   clearer calculator. One contained card per template, a plain
   heading, bigger inputs and labels, one short disclaimer, one fact line,
   and a required accident date in step 2.
   ========================================================================== */
:root { --calc-err: #b3261e; }
:root[data-theme="dark"] { --calc-err: #ffb4ab; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { --calc-err: #ffb4ab; } }
.rc-calc__sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rc-calc__head h2 { margin: 0 !important; max-width: none; }
.rc-calc__head .rc-kicker { margin-bottom: 8px; }
.rc-calc__body > .rc-calc__form { margin-top: 0; }
.rc-calc__field label, .rc-calc__label { font-size: 15px; }
.rc-calc__money-input { min-height: 52px; }
.rc-calc__money-field { min-height: 50px; font-size: 18px; }
.rc-calc__chip { min-height: 52px; }
.rc-calc__facts { margin-top: 12px !important; }
.rc-calc__facts li { font-size: 14px; }
.rc-calc__lead-fields { row-gap: 14px; }
@container (min-width: 540px) { .rc-calc__lead-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; } }
.rc-calc__date input[type="date"] { color-scheme: light dark; min-width: 0; padding-right: 10px; }
.rc-calc__date input[aria-invalid="true"] { color: var(--calc-err); }
.rc-calc__date .rc-calc__money-input:has(input[aria-invalid="true"]) { border-color: var(--calc-err) !important; box-shadow: inset 0 -2px 0 var(--calc-err); }
.rc-calc__error { margin: 6px 0 0 !important; font: 600 14px/1.35 var(--t-ui); color: var(--calc-err); }
.rc-calc__error[hidden] { display: none; }
.rc-calc__cta .btn { min-height: 54px; padding-left: 26px; padding-right: 26px; font-size: 16px; }
.rc-calc__consent { font-size: 13.5px; }

/* ---------- A  Broadsheet: a boxed "clipping" with a masthead band ---------- */
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc {
  padding: 0 !important; border: 2px solid var(--t-rule); border-bottom: 2px solid var(--t-rule) !important;
  background: var(--t-paper); box-shadow: 8px 8px 0 var(--t-accent); margin-right: 8px; }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__head { padding: 20px 26px 18px; background: var(--t-hero-bg); color: var(--t-hero-text); border-bottom: 2px solid var(--t-rule); }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__head .rc-kicker { color: var(--t-hero-text); opacity: .9; font-size: 12px; }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__head h2 { color: var(--t-hero-text); font-size: clamp(30px, 3.2vw, 40px); line-height: 1.05; font-weight: 500; }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__body { padding: 24px 26px 26px; }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__form { border: 0; padding: 0; column-gap: 18px; }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__field label,
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__label { font: 600 15px/1.3 var(--t-ui); letter-spacing: 0; text-transform: none; color: var(--t-text); }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__money-input { border: 1.5px solid var(--t-rule); background: var(--t-bg); padding-left: 12px; }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__text-input { padding-left: 0; }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__text-input .rc-calc__money-field { padding-left: 12px; }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__chips { border-width: 1.5px; }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__chip { background: var(--t-bg); }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__result { margin-top: 22px; padding: 20px 22px 18px; background: var(--t-accent-soft); border: 0; border-top: 4px double var(--t-rule); border-bottom: 1px solid var(--t-rule); }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__result-label { font-size: 12px; }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__rule { font-size: 15px; color: var(--t-text) !important; opacity: .85; }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__facts li { padding-left: 0; text-align: center; font: italic 400 15px/1.45 var(--t-display); color: var(--t-text); }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__facts li::before { content: none; }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc .btn.rc-calc__solid { background: var(--t-accent); border-color: var(--t-accent); color: var(--t-on-accent); font-weight: 700; }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc .btn.rc-calc__solid:hover { background: var(--t-text); border-color: var(--t-text); color: var(--t-paper); }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__step-sub { color: var(--t-text); }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__who-chip { background: var(--t-bg); border-width: 1.5px; }
@media (max-width: 900px) {
  :is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc { box-shadow: 5px 5px 0 var(--t-accent); margin-right: 5px; }
  :is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__head { padding: 16px 18px 14px; }
  :is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__body { padding: 18px; }
}

/* ---------- B  Night Map: a lit-up panel with a glowing edge ---------- */
:root[data-rc-template="B"] .rc-calc { border: 1.5px solid var(--t-accent); box-shadow: 0 0 0 4px var(--t-glow), 0 24px 48px -30px rgba(10, 12, 30, .55); border-radius: 18px; }
:root[data-rc-template="B"] .rc-calc__head { margin: -28px -28px 22px; padding: 22px 28px 18px; border-bottom: 1px solid var(--t-rule-soft); border-radius: 16px 16px 0 0;
  background: radial-gradient(ellipse 60% 140% at 100% 0%, var(--t-glow), transparent 70%), var(--t-surface); }
:root[data-rc-template="B"] .rc-calc__head h2 { font-size: clamp(26px, 2.6vw, 32px); line-height: 1.1; font-weight: 650; }
:root[data-rc-template="B"] .rc-calc__field label, :root[data-rc-template="B"] .rc-calc__label { font-weight: 600; color: var(--t-text); }
:root[data-rc-template="B"] .rc-calc__money-input { border: 1.5px solid var(--t-rule-soft); }
:root[data-rc-template="B"] .rc-calc__chips { padding: 4px; }
:root[data-rc-template="B"] .rc-calc__chip { min-height: 44px; font-size: 14px; }
:root[data-rc-template="B"] .rc-calc__facts li { padding: 0 0 0 18px; border: 0; background: none; font-size: 14px; color: var(--t-muted); }
:root[data-rc-template="B"] .rc-calc__facts li::before { left: 2px; top: .5em; }
:root[data-rc-template="B"] .rc-calc__rule { font-size: 14px; }
@media (max-width: 900px) { :root[data-rc-template="B"] .rc-calc__head { margin: -22px -18px 18px; padding: 18px 18px 14px; } }

/* ---------- C  Trip Record: light trims only ---------- */
:root[data-rc-template="C"] .rc-calc__field label, :root[data-rc-template="C"] .rc-calc__label { font-size: 12px; }
:root[data-rc-template="C"] .rc-calc__money-field { font-size: 18px; }
:root[data-rc-template="C"] .rc-calc__rule { font-size: 12px; }
:root[data-rc-template="C"] .rc-calc__facts li { font-size: 12px; }
:root[data-rc-template="C"] .rc-calc__error { font: 700 12px/1.4 var(--t-mono); text-transform: uppercase; }
:root[data-rc-template="C"] .rc-calc__date input[type="date"] { font-family: var(--t-mono); font-weight: 700; }

/* Force the who-question to a compact select; hide any leftover chips. */
.rc-calc__who-chips, .rc-calc__who-chip { display: none !important; }
.rc-calc__who select {
  width: 100%;
  appearance: auto;
  background: transparent;
  border: 0;
  font: inherit;
  color: inherit;
  padding: 8px 10px;
  min-height: 44px;
}
/* ==========================================================================
   2026-10-30 Calculator split. Each state's calculator lives on its own page
   (/<state>/rideshare-accident-settlement-calculator, body.rc-calc-page) and
   the hub keeps a call-to-action card in the calculator's grid slot
   (.rc-calc-cta). Markup comes from calcsplit gen_calcsplit.py.
   ========================================================================== */

/* Hub: the card that replaced the calculator. Reuses the calculator card look. */
.rc-calc-cta .rc-calc__body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; }
.rc-calc-cta__lede { flex: 1 1 300px; min-width: 0; margin: 0 !important; }
.rc-calc-cta .rc-calc__cta { flex: 0 0 auto; margin: 0 !important; }
.rc-calc-cta .rc-calc__cta .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none !important; }
@container (max-width: 539px) { .rc-calc-cta .rc-calc__cta { flex: 1 1 100%; } }

/* Calculator page: compact hero (rev 2, 2026-10-30). Same template look, much
   shorter: the state name with a small state map to its right, the h1 under
   it and a link back to the guide. The name is sized from the hero's own width
   (container units) minus the thumbnail, divided by the longest word in the
   name (--rc-fit-chars, set by gen_calcsplit.py), so one-word names stay on one
   line and two-word names break between words. */
body.rc-calc-page .rc-hero.rc-hero--compact {
  --rc-thumb: clamp(76px, 21cqi, 156px);
  --rc-gap: clamp(12px, 3cqi, 30px);
  container-type: inline-size;
  display: grid !important; grid-template-columns: minmax(0, max-content) auto minmax(0, 1fr); grid-template-rows: auto;
  grid-template-areas: "name map ." "title title title" "back back back";
  column-gap: 0; row-gap: 0; align-items: center; min-height: 0 !important;
}
body.rc-calc-page .rc-hero--compact .rc-hero__copy { display: contents !important; }
body.rc-calc-page .rc-hero--compact .rc-hero__eyebrow { display: none !important; }
body.rc-calc-page .rc-hero.rc-hero--compact .rc-hero__name {
  grid-area: name; align-self: center; margin: 0; min-width: 0; text-wrap: balance;
  font-size: clamp(28px, calc((100cqi - var(--rc-thumb) - var(--rc-gap)) / (var(--rc-fit-chars, var(--rc-name-chars, 8)) * var(--rc-cw, .6))), var(--rc-name-max, 96px)) !important;
}
body.rc-calc-page .rc-hero.rc-hero--compact .rc-hero__map {
  grid-area: map; display: block !important; width: var(--rc-thumb) !important; max-width: none; margin: 0 0 0 var(--rc-gap) !important; opacity: 1;
  align-self: center; justify-self: end; animation: none;
}
body.rc-calc-page .rc-hero--compact .rc-hero__map svg { width: 100%; height: auto; }
/* The hero strokes use vector-effect: non-scaling-stroke, which browsers ignore
   on <use>, so at thumbnail size (about 0.08-0.16 of the 1000-unit viewBox)
   they shrink to hairlines. Set them in viewBox units instead. */
body.rc-calc-page .rc-hero--compact .rc-hero__line, body.rc-calc-page .rc-hero--compact .rc-hero__ring { vector-effect: none; }
body.rc-calc-page .rc-hero.rc-hero--compact .rc-hero__line { stroke-width: 26px; }
body.rc-calc-page .rc-hero.rc-hero--compact .rc-hero__ring { stroke-width: 12px; }
@media (min-width: 901px) {
  body.rc-calc-page .rc-hero.rc-hero--compact .rc-hero__line { stroke-width: 15px; }
  body.rc-calc-page .rc-hero.rc-hero--compact .rc-hero__ring { stroke-width: 8px; }
}
body.rc-calc-page .rc-hero--compact .rc-hero__title { grid-area: title; margin: 12px 0 0; min-width: 0; text-wrap: balance; }
body.rc-calc-page .rc-hero--compact .rc-hero__back { grid-area: back; margin: 12px 0 0; }
body.rc-calc-page .rc-hero--compact .rc-hero__back a { color: inherit !important; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* A (Broadsheet) */
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) body.rc-calc-page .rc-hero--compact { --rc-cw: .52; --rc-name-max: 120px; padding-top: 22px; padding-bottom: 22px; }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) body.rc-calc-page .rc-hero--compact .rc-hero__title { font-family: var(--t-display); font-weight: 400; font-size: clamp(22px, 5.6cqi, 36px); line-height: 1.1; letter-spacing: -.02em; color: var(--t-hero-text); max-width: 30ch; }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) body.rc-calc-page .rc-hero--compact .rc-hero__back { font-size: 14px; color: var(--t-hero-text); opacity: .85; }

/* B (Night Map). The full hero hangs the map behind the copy (grid-area 1/1
   with a 110px top margin); here it sits in its own cell. */
:root[data-rc-template="B"] body.rc-calc-page .rc-hero--compact { --rc-cw: .53; --rc-name-max: 76px; padding: 20px 22px 20px; }
:root[data-rc-template="B"] body.rc-calc-page .rc-hero--compact .rc-hero__fill { fill: color-mix(in srgb, var(--t-accent) 30%, transparent); }
:root[data-rc-template="B"] body.rc-calc-page .rc-hero--compact .rc-hero__line { stroke: var(--t-accent); stroke-opacity: 1; filter: drop-shadow(0 0 4px var(--t-glow)); }
:root[data-rc-template="B"] body.rc-calc-page .rc-hero--compact .rc-hero__ring--1 { stroke-opacity: .5; }
:root[data-rc-template="B"] body.rc-calc-page .rc-hero--compact .rc-hero__ring--3 { display: none; }
:root[data-rc-template="B"] body.rc-calc-page .rc-hero--compact .rc-hero__title { font-weight: 500; font-size: clamp(20px, 5.4cqi, 30px); line-height: 1.12; letter-spacing: -.025em; max-width: 30ch; }
:root[data-rc-template="B"] body.rc-calc-page .rc-hero--compact .rc-hero__back { font: 500 11.5px/1.4 var(--t-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--t-accent-ink); }

/* C (Trip Record). The thumbnail keeps the receipt-paper card, without its label. */
:root[data-rc-template="C"] body.rc-calc-page .rc-hero--compact { --rc-cw: .49; --rc-name-max: 118px; padding-top: 18px; }
:root[data-rc-template="C"] body.rc-calc-page .rc-hero--compact .rc-hero__map { padding: 6px 6px 11px; box-shadow: 0 8px 18px rgba(0,0,0,.16); }
:root[data-rc-template="C"] body.rc-calc-page .rc-hero--compact .rc-hero__map::before { display: none; }
:root[data-rc-template="C"] body.rc-calc-page .rc-hero--compact .rc-hero__ring--1 { stroke-dasharray: 18 70; }
:root[data-rc-template="C"] body.rc-calc-page .rc-hero--compact .rc-hero__title { margin-top: 14px; font-family: var(--t-display); font-stretch: 70%; font-variation-settings: 'wdth' 70; font-weight: 800; text-transform: uppercase; font-size: clamp(22px, 6cqi, 40px); line-height: .98; letter-spacing: -.005em; color: var(--t-hero-text); max-width: 26ch; }
:root[data-rc-template="C"] body.rc-calc-page .rc-hero--compact .rc-hero__back { margin-top: 14px; padding: 11px 0 12px; border-top: 1.5px solid var(--t-rule); font: 400 11.5px/1.4 var(--t-mono); text-transform: uppercase; }

/* Calculator page order on phones: hero, calculator, case review, guide link. */
@media (max-width: 900px) {
  :root:root body.rc-calc-page .rc-shell { grid-template-areas: "hero hero hero" ". calc ." ". right ." ". main ." ". toc ." ". states ."; }
  :root:root[data-rc-template="B"] body.rc-calc-page .rc-shell { grid-template-areas: "hero" "calc" "right" "main" "toc" "states"; }
  :root[data-rc-template="C"] body.rc-calc-page .rc-rail--right { margin: 0 calc(-1 * var(--pad) + 8px); padding-top: 18px; }
  :root[data-rc-template="B"] body.rc-calc-page .rc-rail--right { margin: 0 var(--pad); }
}
body.rc-calc-page .rc-main { padding-bottom: 40px; }

/* Inline case review (aside.state-form[data-rc-inline]): stays in the page at
   every width instead of becoming the slide-up drawer. */
@media (max-width: 900px) {
  body.rc-state .state-form[data-rc-inline] {
    position: relative !important; inset: auto !important; z-index: auto; height: auto; overflow: hidden; overflow: clip;
    transform: none; visibility: visible; transition: none;
    padding: 22px 18px 24px !important;
  }
  body.rc-state .state-form[data-rc-inline] .state-form__close { display: none; }
  body.rc-state .state-form[data-rc-inline] h2 { padding-right: 0; }
}
body.rc-calc-page .rc-rail--right .rc-trust .rc-trust-line { white-space: normal; }

/* ------------------------------------------------------------------
   Visual-review prototype 2026-10-30: shared calculator CSS, all 50 states.
   All existing Broadsheet / Night Map / Trip Record design tokens retained.
   ------------------------------------------------------------------ */

/* Role is first, with a deliberate rhythm instead of a cramped 3-column form. */
.rc-calc__form { align-items: start; row-gap: 18px; }
.rc-calc__form > .rc-calc__field[hidden] { display: none !important; }
.rc-calc__form::before {
  content: 'STEP 1 OF 2  ·  YOUR CLAIM DETAILS';
  display: block; grid-column: 1 / -1; order: 0;
  font: 600 11px/1.4 var(--t-mono); letter-spacing: .10em;
  color: var(--t-accent-ink); padding: 0 0 11px;
  border-bottom: 1px solid var(--t-rule-soft);
}
.rc-calc__form .rc-calc__who { order: 1; }
.rc-calc__form .rc-calc__field:has([name='medical']) { order: 2; }
.rc-calc__form .rc-calc__field:has([name='wages']) { order: 3; }
.rc-calc__form .rc-calc__period { order: 4; }
.rc-calc__form .rc-calc__field:has(.rc-calc__chips) { order: 5; }
.rc-calc__form .rc-calc__fault { order: 6; }
.rc-calc__who select { width: 100%; min-width: 0; text-overflow: ellipsis; }
.rc-calc__chips { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.rc-calc__chip { white-space: normal; overflow-wrap: normal; padding-inline: 8px; }
.rc-calc__chip span { overflow-wrap: normal; }
.rc-calc__field label, .rc-calc__label { margin-bottom: 8px; }
.rc-calc__fault .rc-calc__money-input { max-width: 100%; }
@container (min-width: 540px) {
  .rc-calc__form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: 18px; }
  .rc-calc__form .rc-calc__who,
  .rc-calc__form .rc-calc__period,
  .rc-calc__form .rc-calc__field:has(.rc-calc__chips) { grid-column: 1 / -1; }
  .rc-calc__form .rc-calc__fault { grid-column: 1 / -1; }
  .rc-calc__fault .rc-calc__money-input { max-width: 420px; }
  .rc-calc__chips { gap: 0; }
}
@container (max-width: 539px) {
  .rc-calc__chips { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px; }
  .rc-calc__chip { min-height: 48px; }
}

/* Make the estimate itself scannable: quieter line, strong numbers. */
.rc-calc__total.has-range { font-size: 16px !important; line-height: 1.3 !important; letter-spacing: normal !important; }
.rc-calc__total-intro,
.rc-calc__total-tail { display: block; font: 500 13px/1.5 var(--t-ui); letter-spacing: 0; text-transform: none; }
.rc-calc__total-intro { color: var(--t-muted); margin: 4px 0 5px; }
.rc-calc__total-tail { color: var(--t-muted); margin-top: 7px; }
.rc-calc__total-range {
  display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap;
  gap: 0 10px; color: var(--t-text); font-family: var(--t-display);
  font-weight: 750; font-size: clamp(31px, 4.4cqi, 50px);
  line-height: 1.13; letter-spacing: -.035em; font-variant-numeric: tabular-nums;
}
.rc-calc__amount { white-space: nowrap; }
.rc-calc__range-sep { font-weight: 400; color: var(--t-accent-ink); }
:root[data-rc-template="B"] .rc-calc__total-range { justify-content: flex-start; }
:root[data-rc-template="C"] .rc-calc__total-range {
  justify-content: flex-start; font-family: var(--t-display);
  font-stretch: 72%; font-variation-settings: 'wdth' 72;
  font-size: clamp(28px, 4cqi, 43px); letter-spacing: -.02em;
}
:root[data-rc-template="C"] .rc-calc__total-intro,
:root[data-rc-template="C"] .rc-calc__total-tail { font-family: var(--t-mono); font-weight: 500; }

/* One structured coverage row replaces the unexplained tiny accent bar. */
.rc-calc__collectable::before { display: none !important; }
.rc-calc__collectable:not([hidden]) {
  display: grid; gap: 6px; margin-top: 17px !important; padding: 12px 14px;
  border: 1px solid var(--t-rule-soft); border-radius: var(--t-radius, 0);
  background: color-mix(in srgb, var(--t-text) 4%, transparent);
  color: var(--t-text); font-weight: 500; text-align: left;
}
.rc-calc__coverage-label {
  display: block; font: 700 10px/1.25 var(--t-mono);
  letter-spacing: .09em; text-transform: uppercase; color: var(--t-muted);
}
.rc-calc__coverage-detail { font: 600 14px/1.4 var(--t-ui); color: var(--t-text); }
:root[data-rc-template="B"] .rc-calc__result .rc-calc__collectable:not([hidden]) {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); color: #f2f3f8 !important;
}
:root[data-rc-template="B"] .rc-calc__result .rc-calc__coverage-label { color: #b8bbc9 !important; }
:root[data-rc-template="B"] .rc-calc__result .rc-calc__coverage-detail { color: #f2f3f8 !important; }
:root[data-rc-template="B"] .rc-calc__result .rc-calc__total-intro,
:root[data-rc-template="B"] .rc-calc__result .rc-calc__total-tail { color: #b8bbc9 !important; }
:root[data-rc-template="B"] .rc-calc__result .rc-calc__total-range { color: #f5f6fc !important; }
:root[data-rc-template="B"] .rc-calc__result .rc-calc__range-sep { color: var(--np-accent) !important; }
:root[data-rc-template="C"] .rc-calc__collectable:not([hidden]) { border: 1px dashed var(--t-rule); border-radius: 0; }
:root[data-rc-template="C"] .rc-calc__coverage-detail { font-family: var(--t-mono); font-size: 12px; }
:root[data-rc-template="A"] .rc-calc__collectable:not([hidden]) { border-radius: 0; }

/* More robust receipt-style chips, especially for Catastrophic on phones. */
:root[data-rc-template="C"] .rc-calc__chip { font-size: 12px !important; line-height: 1.2; letter-spacing: 0; padding-inline: 5px; }
@container (max-width: 539px) {
  :root[data-rc-template="C"] .rc-calc__chip { font-size: 12px !important; }
  .rc-calc__total-range { gap: 0 7px; font-size: clamp(28px, 7.3cqi, 40px); }
}
/* Existing second step is only shown after enough data has been entered. */
.rc-calc__step2:not([hidden]) { animation: rc-step-reveal .32s ease-out both; }
@keyframes rc-step-reveal { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .rc-calc__step2:not([hidden]) { animation: none; } }
/* Broadsheet constrains the old sentence to 22ch; permit a full-width number row. */
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__total.has-range { max-width: none !important; }


/* v2.4 final readability pass — October 30, 2026.
   Spacing and font scale are tied to the calculator's actual width rather
   than the phone/desktop viewport; one rule set serves all state themes. */
.rc-calc__form { row-gap: 16px; }
.rc-calc__form::before { font-size: 12px; padding-bottom: 9px; }
.rc-calc__form .rc-calc__who { margin-bottom: 0; }
.rc-calc__field label, .rc-calc__label { margin-bottom: 7px; line-height: 1.4; }
.rc-calc__who select { font-size: 16px; }

/* Choose legibility over tiny type in oversize buttons.  The group itself is
   capped on broad cards, and chips use a measured 8–12px inline gutter. */
.rc-calc__chips {
  width: 100%; max-width: 624px;
  margin: 0;
  box-sizing: border-box;
}
.rc-calc__chip {
  min-height: 48px;
  padding: 9px 10px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.25;
  white-space: normal !important;
  overflow-wrap: normal !important;
}
.rc-calc__chip span { overflow-wrap: normal !important; hyphens: none; }
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__chip { font-size: 17px; padding-inline: 10px; }
:root[data-rc-template="B"] .rc-calc__chip { font-size: 16px; min-height: 48px; padding: 8px 10px; }
:root[data-rc-template="C"] .rc-calc__chip { font-size: 15px !important; min-height: 48px; padding: 8px 8px; line-height: 1.25; letter-spacing: 0; }
/* A label-specific rule previously overrode the chip type scale. */
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__field label.rc-calc__chip { font-size: 17px; font-family: var(--t-display); letter-spacing: 0; text-transform: none; line-height: 1.2; margin: 0; }
:root[data-rc-template="B"] .rc-calc__field label.rc-calc__chip { font-size: 16px; line-height: 1.25; margin: 0; }
:root[data-rc-template="C"] .rc-calc__field label.rc-calc__chip { font-size: 15px !important; line-height: 1.25; letter-spacing: 0; margin: 0; }
/* Small tablets can fit four useful, not miniature, choices on one row. */
@container (min-width: 520px) and (max-width: 539px) {
  .rc-calc__chips { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  :root[data-rc-template="C"] .rc-calc__field label.rc-calc__chip { font-size: 14.5px !important; padding-inline: 5px; }
}
@container (max-width: 519px) {
  .rc-calc__chips { max-width: 400px; }
  .rc-calc__chip { padding: 8px 9px; }
  :is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__chip:nth-child(n+3) { border-top: 1px solid var(--t-rule); }
  :is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__chip:nth-child(odd) { border-left: 0; }
}
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__field label,
:is(:root[data-rc-template="A"],:root:not([data-rc-template])) .rc-calc__label {
  font-size: 12.5px; letter-spacing: .075em;
}
:root[data-rc-template="C"] .rc-calc__field label,
:root[data-rc-template="C"] .rc-calc__label {
  font-size: 14px; line-height: 1.35; letter-spacing: .015em;
}
:root[data-rc-template="C"] .rc-calc__money-field { font-size: 17px; }
:root[data-rc-template="C"] .rc-calc__result-label { font-size: 12px; }
:root[data-rc-template="C"] .rc-calc__rule,
:root[data-rc-template="C"] .rc-calc__facts li { font-size: 14px; line-height: 1.5; }
.rc-calc__total-intro, .rc-calc__total-tail { font-size: 15px; }
.rc-calc__coverage-label { font-size: 12px; }
.rc-calc__coverage-detail { font-size: 15px; line-height: 1.5; }
:root[data-rc-template="C"] .rc-calc__total-intro,
:root[data-rc-template="C"] .rc-calc__total-tail,
:root[data-rc-template="C"] .rc-calc__coverage-detail { font-size: 14px; line-height: 1.5; }
.rc-calc__step-label { font-size: 12px; }
.rc-calc__step-sub { font-size: 15px; line-height: 1.5; }
.rc-calc__cta .btn { min-height: 50px; padding-inline: 19px; font-size: 16px; }
@container (max-width: 519px) {
  .rc-calc__form { row-gap: 14px; }
  .rc-calc__step-sub { font-size: 14px; }
  .rc-calc__cta .btn { padding-inline: 14px; }
}