/* The farm data series pages (/data/{series}[/{state}[/{county}]]), drawn on top of the shipped tools.css (tt-*). Loaded only by those pages.
   Mockup: docs/design/usda-data-explorer/b-series-cash-rent-*.png, built from explorer.css. Colours: brand greens and accents come from tools.css;
   the chart colours are the validated categorical pair (blue #2a78d6, orange #eb6834) plus a neutral dashed grey, written by the SVG renderer.
   Nothing is encoded by colour alone: every line has a marker shape and a direct label, and every status has an icon and words. */

.dx-wide { max-width: 1120px; }
.dx-hero { padding-bottom: 1rem; }

/* The place pickers: a plain GET form of two selects and a button. */
.dx-picks fieldset { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem; margin: 1rem 0 0; padding: 0; border: 0; min-width: 0; }
.dx-pick { position: relative; display: inline-flex; align-items: center; margin: 0; }
.dx-pick > i { position: absolute; left: .75rem; pointer-events: none; color: #56665e; }
.dx-pick .form-select { min-height: 44px; padding-left: 2.1rem; font-size: 15px; font-weight: 600; color: #2f3d36; min-width: 12rem; max-width: 100%; }
.dx-picks .btn { min-height: 44px; }

/* The land-type control: links styled as the tools' segmented control, the current one filled. */
.dx-family { margin: 1rem 0 0; }
.dx-seg { overflow: visible; }
.dx-seg .cc-tip-host:first-child a { border-radius: 7px 0 0 7px; }
.dx-seg .cc-tip-host:last-child a { border-radius: 0 7px 7px 0; }
.dx-seg a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 8px 16px; font-weight: 700; font-size: 14px; color: #3d4a43; background: #fff; text-decoration: none; }
.dx-seg a:hover { background: #f1f4f2; }
.dx-seg a[aria-current="page"] { background: #1b3d2a; color: #fff; }
.dx-seg a:focus-visible { outline: 2px solid var(--accent, #d97746); outline-offset: -2px; }

/* Freshness / status badge: icon + words, never colour alone. */
.dx-status { display: inline-flex; align-items: center; gap: .35rem; font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px; border: 1px solid; white-space: nowrap; }
.dx-status.is-current { color: #1b5e2f; background: #eef4ef; border-color: #cfe1d3; }
.dx-status.is-due { color: #24507a; background: #eef4fb; border-color: #cbdcee; }
.dx-status.is-late { color: #5c3b00; background: #fff6e8; border-color: #f1dcb4; }
.dx-status.is-off { color: #4a4f4c; background: #f1f2f0; border-color: #d6d9d6; }
.dx-fresh { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; font-size: 13px; color: #43514a; margin: 0 0 1rem; }
.dx-nodata { font-size: 15px; line-height: 1.55; color: #2f3d36; margin: 0; }

/* Hero figures: the place, its state, the nation. */
.dx-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0 0 1.1rem; }
.dx-fig { border: 1px solid #e7e1d6; border-radius: 10px; padding: .8rem 1rem; background: #fff; min-width: 0; }
.dx-fig.is-you { background: #eef4ef; border-color: #d9e6dd; }
.dx-fig .lb { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #43514a; display: flex; align-items: center; gap: .4rem; }
.dx-fig .v { font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 800; color: #16281d; line-height: 1.1; margin: .2rem 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dx-fig .v span { font-size: .95rem; font-weight: 700; color: #43514a; }
.dx-fig .n { font-size: 13px; color: #43514a; line-height: 1.4; }
@media (max-width: 620px) { .dx-figs { grid-template-columns: 1fr; gap: .6rem; } }

/* The legend and the chart: both SVGs are in the page and CSS shows one (the other is display:none, so a screen reader reads one chart). */
.dx-legend { margin: 0 0 .2rem; }
.dx-legend-key { display: inline-flex; align-items: center; gap: .4rem; margin-right: 1rem; font-size: 13px; color: #2f3d36; }
/* A USDA forecast and its range: dotted line + hollow marker, and a shaded band. The swatches take the legend's ink; the words carry the meaning, not the shade. */
.dx-legend-forecast, .dx-legend-range { color: #2f3d36; }
.dx-chart-d svg, .dx-chart-m svg { display: block; width: 100%; height: auto; }
.dx-chart-m { display: none; }
@media (max-width: 576px) { .dx-chart-d { display: none; } .dx-chart-m { display: block; } }

.dx-facts { margin: .8rem 0 0; padding-left: 1.1rem; font-size: 14px; line-height: 1.6; color: #2f3d36; }

/* The data table: the chart's numbers, newest first, scrolling inside its own box so the page never scrolls sideways. */
.dx-scroll { margin-top: 1rem; overflow: auto; max-height: 28rem; max-width: 100%; }
.dx-scroll:focus-visible { outline: 2px solid var(--accent, #d97746); outline-offset: 2px; }
.dx-table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.dx-table caption { caption-side: top; text-align: left; font-size: 13px; font-weight: 700; color: #2f3d36; padding: 0 0 .4rem; }
.dx-table th, .dx-table td { padding: 6px 8px; border-bottom: 1px solid #eef0ec; text-align: right; }
.dx-table thead th { position: sticky; top: 0; background: #fff; color: #43514a; border-bottom-color: #d9ddd9; font-weight: 700; }
.dx-table tbody th { font-weight: 400; color: inherit; }
.dx-table th:first-child, .dx-table td:first-child { text-align: left; }
.dx-table .np { color: #56665e; font-style: italic; font-variant-numeric: normal; }

/* Share chart / Embed this chart (spec I2): the two buttons under the table; the panels they open are the tools' own (.tt-embed, tools.css). */
.dx-actions, .dx-compare-link { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 0; }

/* Under every chart: the credit that travels with a screenshot (recessive ink, 4.5:1 on white), then the W2 action row (.tt-actions, tools.css): View the data and Save image.
   The table they open lives in the sheet (.tt-dlg); the section is only shown by :target (scripts off) or inside the sheet. */
.dx-credit { margin: .35rem 0 0; text-align: right; font-size: 12px; line-height: 1.3; }
.dx-credit a { display: inline-flex; align-items: center; gap: .35rem; color: #56665e; text-decoration: none; }
.dx-credit a:hover { color: #1b3d2a; text-decoration: underline; }
.dx-credit a:focus-visible { outline: 2px solid var(--accent, #d97746); outline-offset: 2px; }
.dx-credit img { width: 14px; height: 14px; flex: none; }
.dx-chartrow { margin-top: .6rem; }
@media (min-width: 768px) { .dx-chartrow { grid-auto-columns: minmax(0, 14rem); justify-content: start; } }
.tt-dlg .dx-scroll { margin-top: 0; max-height: none; }

/* Source / provenance block, with the NASS notice. */
.dx-source { font-size: 12.5px; line-height: 1.55; color: #43514a; margin: 1rem 0 0; padding: .8rem 1rem; background: #f6f7f5; border-radius: 8px; }
.dx-source b { color: #2f3d36; }

.dx-related { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

/* ── The compare page (/data/compare) ───────────────────────────────────────────────────────────── */
.dx-picked { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
.dx-picked li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .2rem .8rem; align-items: center; border: 1px solid #e7e1d6; border-radius: 10px; padding: .6rem .8rem; background: #fff; }
.dx-picked li.is-off { background: #f6f7f5; }
.dx-picked li.is-off .btn { color: #2b302d; border-color: #2b302d; }
.dx-picked .nm { font-weight: 800; color: #16281d; font-size: 14.5px; overflow-wrap: anywhere; }
.dx-picked .mt { font-size: 12.5px; color: #43514a; }
.dx-picked .dx-card-reason { color: #4a1f19; font-weight: 600; }
.dx-tag { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; color: #fff; font-weight: 800; font-size: 14px; background: #7d8782; }
.dx-tag.is-slot1 { background: #2a78d6; }
.dx-tag.is-slot2 { background: #eb6834; }
.dx-tag.is-slot3 { background: #5f6b65; }
.dx-tag.is-slot4 { background: #9455c4; }
.dx-tag.is-slot0 { background: #7d8782; }
.dx-extra { font-size: 13.5px; color: #43514a; margin: 0 0 1rem; }

/* The verdict box: icon and words, never colour alone. */
.dx-verdict { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .8rem; border-radius: 10px; padding: .9rem 1rem; margin: 0 0 1rem; border: 1px solid; }
.dx-verdict > i { font-size: 1.4rem; line-height: 1.2; grid-row: 1 / span 6; }
.dx-verdict .h { font-weight: 800; font-size: 15px; }
.dx-verdict p { margin: 0; font-size: 14px; line-height: 1.5; grid-column: 2; }
.dx-verdict .dx-caveat { font-size: 13px; color: #43514a; }
.dx-verdict.is-ok { background: #eef4ef; border-color: #cfe1d3; color: #1f3a28; }
.dx-verdict.is-ok > i { color: #1b5e2f; }
.dx-verdict.is-no { background: #fdf0ee; border-color: #efc9c3; color: #4a1f19; }
.dx-verdict.is-no > i { color: #a3271c; }
.dx-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; }
.dx-verdict .dx-actions { grid-column: 2; margin-top: .6rem; }
/* An outline button's muted grey text is below 4.5:1 on the refusal's pink; use the box's own text colour. */
.dx-verdict.is-no .dx-actions .btn { color: #4a1f19; border-color: #4a1f19; }
.dx-open-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: 13.5px; font-weight: 700; }
.dx-offer-note { font-size: 13px; color: #4a1f19; }

/* The interactive Chart.js view replaces the SVGs when scripts run; the data table stays. */
.dx-chart-js { position: relative; height: 340px; width: 100%; }
.dx-chart-js[hidden] { display: none; }
.dx-js .dx-chart-d, .dx-js .dx-chart-m { display: none; }
@media (max-width: 576px) { .dx-chart-js { height: 280px; } }

.dx-add { margin: 1.2rem 0 0; }
.dx-add fieldset { justify-content: flex-start; }

/* The public rule table. */
.dx-kinds { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .6rem; }
.dx-kinds li { border: 1px solid #e7e1d6; border-radius: 10px; padding: .7rem .8rem; background: #fff; font-size: 13px; line-height: 1.45; color: #43514a; }
.dx-kinds b { display: flex; align-items: center; gap: .4rem; color: #16281d; font-size: 14px; margin-bottom: .2rem; }
/* The county map section (farm data spec F, mockup b): the map above its legend and the ranked table; side by side from 761 px.
   Shading is never the only cue: the legend names every bin and its count, a county NASS combined into "other counties" is hatched, and the page's own county
   has a heavy outline, a label and the words "This county" in the table. The swatch colours are the model's own, written as attributes, not styles. */
.dx-maph { font-size: 1.15rem; font-weight: 800; color: #16281d; margin: 0 0 .3rem; }
.dx-map { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; margin-top: 1rem; }
.dx-map-fig svg { display: block; width: 100%; height: auto; }
.dx-map-side { min-width: 0; }
.dx-bins { list-style: none; padding: 0; margin: 0 0 .8rem; display: grid; gap: .3rem; font-size: 13px; color: #2f3d36; }
.dx-bins li { display: flex; align-items: center; gap: .5rem; }
.dx-sw { width: 22px; height: 14px; border: 1px solid #9aa39e; border-radius: 2px; flex: none; }
.dx-count { color: #56665e; }
.dx-map-side .tt-note { margin: 0 0 .6rem; }
@media (max-width: 760px) { .dx-map { grid-template-columns: 1fr; gap: 1rem; } }
/* The map is drawn about 307 px wide (0.51 of its own size) on a 375 px phone: the selected county's label grows to 24 units, 12.3 px there, to stay over 11 px (SvgCountyMapRenderer.PhoneLabelFontSize). */
@media (max-width: 576px) { .dx-map-fig svg g { font-size: 24px; } }

/* The ranked table: the map's numbers, highest first, in its own box (it can be 250 rows long) so the page never scrolls sideways. */
.dx-rank { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.dx-rank caption { caption-side: top; text-align: left; font-size: 13px; font-weight: 700; color: #2f3d36; padding: 0 0 .4rem; }
.dx-rank th, .dx-rank td { padding: 6px 8px; border-bottom: 1px solid #eef0ec; text-align: right; }
.dx-rank thead th { position: sticky; top: 0; background: #fff; color: #43514a; border-bottom-color: #d9ddd9; font-weight: 700; }
.dx-rank tbody th { font-weight: 400; color: inherit; }
.dx-rank th:first-child, .dx-rank td:first-child, .dx-rank th:nth-child(2) { text-align: left; }
.dx-rank .np { color: #56665e; font-style: italic; font-variant-numeric: normal; }
.dx-rank tr.is-you th, .dx-rank tr.is-you td { background: #eef4fb; font-weight: 700; }
.dx-rank a { color: #1b3d2a; text-decoration: underline; text-underline-offset: 2px; }
.dx-rank a:hover { color: #2a78d6; }
.dx-rank a:focus-visible { outline: 2px solid var(--accent, #d97746); outline-offset: 2px; }
.dx-you { margin-left: .25rem; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #24507a; }

/* ── The BLS retail price pages (R2-BLS-DESIGN.md). Light only; every chart colour is a token and every SVG mark has a class, so a later site-wide dark mode re-colours the charts with one block. ── */
:root {
  --bx-plane: #faf8f4;      /* page */
  --bx-surface: #ffffff;    /* card and chart surface */
  --bx-ink: #16281d;        /* figures, headings, labels */
  --bx-ink2: #2f3d36;       /* body text */
  --bx-muted: #56665e;      /* axis text, dates, notes */
  --bx-grid: #e6e4df;       /* hairline gridlines */
  --bx-base: #c9c7bf;       /* the $0 baseline */
  --bx-border: #e7e1d6;
  --bx-retail: #2a78d6;     /* store price, the item's own line (categorical slot 1) */
  --bx-farm: #eb6834;       /* farm price (slot 2), only in the farm-to-store view */
  --bx-ref: #a7aaa4;        /* the US reference line in the regional panels (a neutral, never a series hue) */
  --bx-spread: #5f6b65;     /* the shaded gap; drawn at 16% */
  --bx-spread-a: .16;
  --bx-tip-bg: #16281d;
  --bx-tip-ink: #ffffff;
  --bx-chip: #eef4ef;
}
html[data-theme="dark"] {
  --bx-plane: #0f1512;
  --bx-surface: #17201b;
  --bx-ink: #eef2ee;
  --bx-ink2: #cfd8d2;
  --bx-muted: #9fb0a6;
  --bx-grid: #26302a;
  --bx-base: #3d4842;
  --bx-border: #2a352e;
  --bx-retail: #3987e5;
  --bx-farm: #d95926;
  --bx-ref: #6d756f;
  --bx-spread: #c3c2b7;
  --bx-spread-a: .14;
  --bx-tip-bg: #eef2ee;
  --bx-tip-ink: #16281d;
  --bx-chip: #1f2b24;
}

.bx { max-width: 1080px; color: var(--bx-ink2); }
.bx-head { text-align: center; padding: 2rem 0 1.2rem; }
.bx-head h1 { font-size: clamp(1.6rem, 4.2vw, 2.35rem); font-weight: 800; color: var(--bx-ink); letter-spacing: -.01em; margin: 0 0 .5rem; line-height: 1.15; }
.bx-sub { font-size: 15.5px; line-height: 1.55; color: var(--bx-ink2); max-width: 60ch; margin: 0 auto; }

/* Place: US city average and the regions the definition lists. Links (a GET page each), the current one filled. Scrolls inside itself on a phone. */
.bx-places { display: inline-flex; margin: 1.1rem auto 0; border: 1px solid var(--bx-border); border-radius: 8px; overflow: hidden; max-width: 100%; overflow-x: auto; background: var(--bx-surface); }
.bx-places a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 8px 15px; font-weight: 700; font-size: 14px; color: var(--bx-ink2); text-decoration: none; white-space: nowrap; border-left: 1px solid var(--bx-border); }
.bx-places a:first-child { border-left: 0; }
.bx-places a[aria-current="page"] { background: #1b3d2a; color: #fff; }
.bx-oneplace { font-size: 13.5px; color: var(--bx-muted); margin: 1rem 0 0; }

.bx-card { background: var(--bx-surface); border: 1px solid var(--bx-border); border-radius: 12px; padding: 1.4rem 1.5rem 1.3rem; margin: 0 0 1.2rem; }
.bx-card > h2, .bx-h2 { font-size: 1.15rem; font-weight: 800; color: var(--bx-ink); margin: 0 0 .25rem; }
.bx-lede { font-size: 14px; color: var(--bx-ink2); margin: 0 0 .9rem; line-height: 1.5; }
.bx .dx-fresh { color: var(--bx-muted); }

/* The hero: the owner's sentence, with the number as its subject. One per page. */
.bx-hero { margin: .2rem 0 1.2rem; }
.bx-hero-lb { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--bx-muted); }
.bx-hero-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; margin: .25rem 0 .2rem; }
.bx-hero-v { font-size: clamp(3rem, 9vw, 4.2rem); font-weight: 800; color: var(--bx-ink); line-height: 1; letter-spacing: -.02em; }
.bx-hero-u { font-size: 1.35rem; font-weight: 700; color: var(--bx-ink2); }
.bx-hero-d { display: inline-flex; align-items: center; gap: .45rem; font-size: 1.35rem; font-weight: 800; color: var(--bx-ink); }
.bx-hero-d i { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bx-chip); font-size: 1rem; }
.bx-hero-n { font-size: 14px; color: var(--bx-ink2); }

.bx-charthead { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .5rem 1rem; margin: 0 0 .4rem; }
.bx-charthead h3 { font-size: 1rem; font-weight: 800; color: var(--bx-ink); margin: 0; }
.dx-range { display: inline-flex; border: 1px solid var(--bx-border, #cfd8d2); border-radius: 7px; overflow: visible; }
.dx-range .cc-tip-host:first-child a { border-radius: 6px 0 0 6px; }
.dx-range .cc-tip-host:last-child a { border-radius: 0 6px 6px 0; }
.dx-range a { min-height: 36px; display: inline-flex; align-items: center; gap: .4rem; padding: 4px 12px; font-size: 13px; font-weight: 700; color: var(--bx-ink2, #3d4a43); text-decoration: none; border-left: 1px solid var(--bx-border, #cfd8d2); }
.dx-range .cc-tip-host:first-child a { border-left: 0; }
.dx-range a[aria-current="true"] { background: var(--bx-chip, #eef3ef); color: var(--bx-ink, #1b3d2a); box-shadow: inset 0 -2px 0 #1b3d2a; }
.dx-range a:focus-visible { outline: 2px solid var(--accent, #d97746); outline-offset: -2px; }
html[data-theme="dark"] .dx-range a[aria-current="true"] { box-shadow: inset 0 -2px 0 #9fd9ad; }
.dx-rangebar { display: flex; justify-content: flex-end; margin: 0 0 .5rem; }

.bx-chart svg { display: block; width: 100%; height: auto; }
.bx-chart .m { display: none; }
@media (max-width: 576px) { .bx-chart .d { display: none; } .bx-chart .m { display: block; } }

/* The chart's marks, by class (the dark block re-colours them). */
.bx-chart text, .bx-panel text { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.c-grid { stroke: var(--bx-grid); }
.c-base { stroke: var(--bx-base); }
.c-axis { fill: var(--bx-muted); }
.c-ink { fill: var(--bx-ink); }
.c-muted { fill: var(--bx-muted); }
.c-retail { stroke: var(--bx-retail); }
.c-farm { stroke: var(--bx-farm); }
.c-ref { stroke: var(--bx-ref); }
.c-dot-retail { fill: var(--bx-retail); stroke: var(--bx-surface); }
.c-dot-farm { fill: var(--bx-farm); stroke: var(--bx-surface); }
.c-dot-hollow { fill: var(--bx-surface); stroke: var(--bx-retail); }
.c-band { fill: var(--bx-spread); fill-opacity: var(--bx-spread-a); }
.c-cross { stroke: var(--bx-muted); }
.c-tip { fill: var(--bx-tip-bg); }
.c-tip-t { fill: var(--bx-tip-ink); }

/* Under every chart: the summary line, always visible, then the action row (tools.css .tt-actions). */
.bx-summary { font-size: 15px; font-weight: 700; color: var(--bx-ink); margin: .6rem 0 0; }
.bx-summary + .bx-summary { margin-top: .15rem; }
.bx-note { font-size: 12.5px; color: var(--bx-muted); margin: .7rem 0 0; line-height: 1.5; }
.bx .tt-actions { margin-top: .8rem; }
.bx-one-action { display: flex; margin-top: .7rem; }
.bx-facts { margin: 1rem 0 0; padding-left: 1.1rem; font-size: 14px; line-height: 1.6; color: var(--bx-ink2); }

/* Regions: small multiples, one shared scale. */
.bx-key { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: 13px; color: var(--bx-ink2); margin: 0 0 .7rem; align-items: center; }
.bx-key span { display: inline-flex; align-items: center; gap: .4rem; }
.bx-key .scale { color: var(--bx-muted); }
.bx-panels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
@media (max-width: 860px) { .bx-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } }
.bx-panel { border: 1px solid var(--bx-border); border-radius: 10px; padding: .6rem .7rem .4rem; min-width: 0; }
.bx-panel .nm { font-size: 13.5px; font-weight: 800; color: var(--bx-ink); }
.bx-panel .vl { font-size: 13px; color: var(--bx-ink2); font-variant-numeric: tabular-nums; }
.bx-panel .vl b { color: var(--bx-ink); font-size: 15px; }
.bx-panel svg { display: block; width: 100%; height: auto; margin-top: .2rem; }
.bx-panel .m { display: none; }
@media (max-width: 576px) { .bx-panel .d { display: none; } .bx-panel .m { display: block; } }
.bx-panel.is-none { border-style: dashed; display: flex; flex-direction: column; }
.bx-panel.is-none .why { flex: 1; display: flex; gap: .45rem; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--bx-muted); padding: .5rem 0 .6rem; }
.bx-panel.is-none .why i { font-size: 1rem; line-height: 1.3; }

/* Farm to store. */
.bx-verdict { display: flex; gap: .6rem; align-items: flex-start; border: 1px solid var(--bx-border); background: var(--bx-chip); border-radius: 10px; padding: .7rem .9rem; font-size: 13.5px; line-height: 1.5; color: var(--bx-ink2); margin: 0 0 .9rem; }
.bx-verdict i { color: var(--bx-ink); font-size: 1.1rem; line-height: 1.3; }
.bx-verdict b { color: var(--bx-ink); }
.bx-toggle { text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; gap: .5rem; font-size: 14px; font-weight: 700; color: var(--bx-ink); margin: 0 0 .8rem; }
.bx-toggle .sw { width: 38px; height: 22px; border-radius: 11px; background: #6b7a72; position: relative; flex: none; }
.bx-toggle .sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.bx-toggle .sw.is-on { background: #1b3d2a; }
.bx-toggle .sw.is-on::after { left: auto; right: 3px; }
.bx-toggle:focus-visible, .bx-places a:focus-visible, .bx-range a:focus-visible, .bx-panel .nm a:focus-visible { outline: 2px solid var(--accent, #d97746); outline-offset: 2px; }

/* Source block: the required words, in order. */
.bx-source { font-size: 12.5px; line-height: 1.6; color: var(--bx-ink2); background: var(--bx-surface); border: 1px solid var(--bx-border); border-radius: 10px; padding: .8rem 1rem; margin: 0 0 1.2rem; }
.bx-source b { color: var(--bx-ink); }
.bx-what { max-width: 70ch; margin: 1.6rem auto 2.4rem; font-size: 14.5px; line-height: 1.6; }
.bx-what h2 { font-size: 1.1rem; font-weight: 800; color: var(--bx-ink); }

/* The data sheets: each table lives in the page's markup and the W2 <dialog> (tools.css .tt-dlg) shows it. */
.bx-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.bx-table caption { caption-side: top; text-align: left; font-size: 13px; color: var(--bx-muted); padding: 0 0 .5rem; }
.bx-table th, .bx-table td { padding: 7px 8px; border-bottom: 1px solid var(--bx-grid); text-align: right; }
.bx-table thead th { position: sticky; top: 0; background: var(--bx-surface); color: var(--bx-ink2); font-weight: 700; border-bottom-color: var(--bx-base); }
.bx-table tbody th { font-weight: 600; color: var(--bx-ink2); }
.bx-table th:first-child, .bx-table td:first-child { text-align: left; }
.bx-table .np { color: var(--bx-muted); font-style: italic; }
.bx-panel .nm a { color: var(--bx-ink); text-decoration: none; }
.bx-panel .nm a:hover { color: var(--bx-ink); text-decoration: underline; }
/* Secondary buttons on the page plane: Bootstrap's #6c757d is 4.42:1 on #faf8f4, short of AA. */
.bx .btn-outline-secondary { --bs-btn-color: #565e64; --bs-btn-border-color: #565e64; --bs-btn-hover-bg: #565e64; --bs-btn-hover-border-color: #565e64; --bs-btn-active-bg: #565e64; --bs-btn-active-border-color: #565e64; }
.bx-flush { margin: 0; }
.bx-sheet-sub { font-size: 13px; color: var(--bx-muted); margin: 0 0 .5rem; }
.bx-sheet-actions { margin-top: .8rem; }
.bx .tt-actions.bx-row { grid-auto-columns: minmax(0, 14rem); justify-content: start; }
.c-dot-ref { fill: var(--bx-ref); stroke: var(--bx-surface); }
.bx-sheet-sub + .dx-scroll { margin-top: 0; }

/* Popular comparisons (the curated /data/compare/{slug} pages): a plain list of links on the /data home and on the empty compare page. */
.dx-popular-h2 { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #435049; margin: 1.6rem 0 .7rem; }
.dx-popular-h { font-size: 14px; font-weight: 700; margin: 1.2rem 0 .5rem; }
.dx-popular { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .45rem; }
.dx-popular a { display: block; padding: .55rem .8rem; border: 1px solid #d9e0db; border-radius: 8px; color: inherit; text-decoration: none; font-weight: 600; }
.dx-popular a:hover, .dx-popular a:focus-visible { border-color: #1f6f43; text-decoration: underline; }