/* BCAR — /compare/ and /glossary/.
   Loads after site.css and only re-declares the properties where the shared
   component layer differs from Compare.dc.html / Glossary.dc.html. Both
   prototypes are drawn at a fixed desktop width (1200px / 1140px), so the
   designed values land in the 71.25rem tier and the smaller tiers are the
   mobile-first reduction. Nothing here restyles a shared class globally:
   every override is scoped to a page section owned by these two views. */

/* ---------- shared utility ---------- */
.bcar-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0 }

/* ================= compare ================= */

/* Hero. The prototype wraps eyebrow + h1 + deck in one 820px column and starts
   the ink panel at 52px, where the shared page hero indents the eyebrow by 22px
   and caps the title at 900px / the deck at 700px. */
.bcar-page-hero--compare { padding: 38px 0 34px }
.bcar-page-hero--compare .bcar-eyebrow { margin-top: 0 }
.bcar-cmp-hero__inner { max-width: 820px }
.bcar-page-hero--compare .bcar-page-hero__title { margin-top: 16px; max-width: none; font-size: clamp(2.125rem, 3.8vw, 3.125rem) }
.bcar-page-hero--compare .bcar-page-hero__deck { max-width: none }

/* Table. */
.bcar-cmp-table { padding-top: 30px }
/* The prototype's body carries no line-height, so the table's dense 13px grid
   runs at `normal`. site.css's 1.55 body leading inflates every row ~25%. */
.bcar-cmp-table .bcar-table { min-width: 1040px; line-height: normal }
/* The prototype has no visible caption; the table still needs one, so it is
   exposed to assistive tech only. */
.bcar-cmp-table caption { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0 }
.bcar-cmp-table .bcar-table th.is-center, .bcar-cmp-table .bcar-table td.is-center { text-align: center }
/* The prototype lets "Commercial focus" wrap onto two lines rather than widen
   its column; site.css pins every th to one line. */
.bcar-cmp-table .bcar-table thead th { white-space: normal }
.bcar-cmp-table .bcar-table-pill { white-space: nowrap }
.bcar-cmp-table .bcar-table td, .bcar-cmp-table .bcar-table tbody th { vertical-align: baseline }
/* Rank is a row header, so the shared td:first-child rules do not reach it. */
.bcar-cmp-table .bcar-table tbody th { padding: 15px 10px 15px 22px; border-bottom: 1px solid var(--c-lines); font-size: 13px; font-weight: 900; letter-spacing: 0; text-transform: none; text-align: left; white-space: nowrap; color: var(--c-mu); font-variant-numeric: tabular-nums }
.bcar-cmp-table .bcar-table tbody tr.is-top th { padding-left: 18px; border-left: 4px solid var(--c-ac); color: var(--c-acd); font-size: 15px }
.bcar-cmp-table .bcar-table tbody tr.is-top .bcar-table-score { color: var(--c-acd) }
.bcar-cmp-table .bcar-table td a { font-size: 11.5px; font-weight: 800 }
.bcar-cmp-table .bcar-table tbody tr.is-top .bcar-cmp-em { font-weight: 800; color: var(--c-ink) }
/* These need to out-rank `.bcar-table td { color: ... }` (0,1,1) in site.css.
   A bare class is (0,1,0) and lost, so every flag cell rendered body-ink and
   the table's whole yes/no colour language disappeared. */
.bcar-cmp-table .bcar-table td.bcar-cmp-flagcell { font-size: 12px; font-weight: 800 }
.bcar-cmp-table .bcar-table td.bcar-cmp-flagcell--ok { color: var(--wp--preset--color--success) }
.bcar-cmp-table .bcar-table td.bcar-cmp-flagcell--mid { color: var(--wp--preset--color--accent-deep) }
.bcar-cmp-table .bcar-table td.bcar-cmp-flagcell--bad { color: var(--wp--preset--color--danger) }
.bcar-cmp-mark { margin-right: .3em }
.bcar-table-scroll:focus-visible { outline: 2px solid var(--c-ac); outline-offset: 2px }

/* Score cards. */
.bcar-cmp-scores { padding-top: 36px }
.bcar-cmp-scores .bcar-section__head { gap: 16px }
.bcar-cmp-scores__h2 { font-size: clamp(1.375rem, 2.5vw, 1.875rem) }
.bcar-cmp-scores__note { font-size: 16px }
.bcar-cmp-scores .bcar-score-card { line-height: normal }
/* site.css spaces the first bar with .bcar-score-bar:first-of-type, but the
   card's own header is the first div, so that rule never matches. */
.bcar-cmp-scores .bcar-score-card__top { margin-bottom: 14px }
.bcar-score-card--top { border: 2px solid var(--c-ac) }
.bcar-cmp-scores .bcar-score-card__score { color: var(--c-ink) }
.bcar-cmp-scores .bcar-score-card--top .bcar-score-card__score { color: var(--c-acd) }
.bcar-cmp-scores .bcar-score-bar + .bcar-score-bar { margin-top: 8px }
.bcar-cmp-scores .bcar-score-bar--sm .bcar-score-bar__track { margin-top: 4px }

/* ================= glossary ================= */
.bcar-page-hero--glossary { padding: 38px 0 34px }
.bcar-page-hero--glossary .bcar-eyebrow { margin-top: 0 }
.bcar-page-hero--glossary .bcar-page-hero__title { margin-top: 16px; font-size: clamp(2.125rem, 3.8vw, 3.125rem) }
.bcar-page-hero--glossary .bcar-page-hero__deck { max-width: 640px }
/* site.css draws a brass ring behind the state and glossary heroes; the
   glossary prototype's ink panel is flat. */
.bcar-page-hero--glossary::before { content: none }
.bcar-glossary-search label, .bcar-glossary-search__meta { line-height: normal }
/* site.css kills the outline on :focus for this input; restore a real ring. */
.bcar-glossary-search input:focus-visible { outline: 2px solid var(--c-ac); outline-offset: 2px; border-color: var(--c-ac) }
.bcar-glossary-search input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); cursor: pointer }

/* theme.json uppercases every h2 globally; glossary terms are sentence case. */
.bcar-glossary-term__name { text-transform: none }
.bcar-gloss-terms { padding-top: 36px }
.bcar-gloss-terms .bcar-glossary-grid { margin-top: 0 }
/* .bcar-glossary-term sets display:grid, which outranks the UA [hidden] rule
   that assets/js/glossary.js relies on to filter. */
.bcar-glossary-term[hidden] { display: none }
.bcar-glossary-empty { padding: 26px 0 56px }
.bcar-glossary-empty[hidden] { display: none }
.bcar-glossary-empty__title { margin: 0; font-size: 19px; font-weight: 800; color: var(--c-ink) }
.bcar-glossary-empty .bcar-serif { margin: 10px 0 0; font-size: 17px; line-height: 1.6; color: var(--c-mu) }
.bcar-gloss-cta { padding-top: 44px }

/* ================= shared CTA band ================= */
.bcar-cmp-cta { padding-top: 44px }
.bcar-cmp-cta.bcar-section--last, .bcar-gloss-cta.bcar-section--last { padding-bottom: 56px }
.bcar-cmp-cta .bcar-cta-band .bcar-h2, .bcar-gloss-cta .bcar-cta-band .bcar-h2 { font-size: clamp(1.375rem, 2.5vw, 2rem); line-height: 1.1 }
.bcar-cmp-cta .bcar-cta-band .bcar-h2 { max-width: 640px }
.bcar-cmp-cta .bcar-cta-band__text { max-width: 620px }
.bcar-cmp-cta .bcar-link-arrow, .bcar-gloss-cta .bcar-link-arrow { font-size: 13px }

/* ================= responsive ================= */
@media (min-width: 40rem) {
	.bcar-cmp-table { padding-top: 34px }
	.bcar-cmp-scores, .bcar-gloss-terms { padding-top: 40px }
	.bcar-cmp-cta, .bcar-gloss-cta { padding-top: 48px }
}

@media (min-width: 71.25rem) {
	.bcar-page-hero--compare, .bcar-page-hero--glossary { padding: 52px 0 46px }
	.bcar-cmp-table { padding-top: 40px }
	.bcar-cmp-scores, .bcar-gloss-terms { padding-top: 44px }
	.bcar-cmp-cta, .bcar-gloss-cta { padding-top: 52px }
	.bcar-cmp-cta.bcar-section--last, .bcar-gloss-cta.bcar-section--last { padding-bottom: 80px }
	.bcar-cmp-cta .bcar-cta-band, .bcar-gloss-cta .bcar-cta-band { padding: 42px 48px; gap: 44px }
	.bcar-glossary-empty { padding: 26px 0 70px }
}