/* =====================================================================
   Supracited charts (/css/charts.v2.css). Source: site/styles/charts.v2.css; copied to /css/charts.v2.css by
   site/build_census.py, which fails its --check when the two differ. Loaded after /css/site.v60.css (fonts, tokens,
   folds, tables, the geometry classes .x-N and .w-N) on every census page and on the industry report.
   One component: a list of horizontal bars. Each row is a real button; its bar runs from 0 to the share it stands
   for, and the pale band behind it is the range. Toggles are real radios (or one select) inside a fieldset; CSS
   :has() switches the pre-rendered views, so the toggles work with the script off; the script adds the tooltip, a
   live status line and the switch for browsers without :has(). Nothing under 15px; one family; the teal ramp plus
   one gold accent; motion only under prefers-reduced-motion: no-preference, 200 ms or less, transform and opacity.
   ===================================================================== */
:root{--c-a:#0B5F59;--c-b:#2F9E8F;--c-g:#B98423}

/* ---------- the wrap and the toggles ---------- */
.cw{position:relative;min-width:0}
.ct{display:flex;flex-wrap:wrap;gap:14px 32px;margin-bottom:1.25rem}
.ct-g{min-width:0;margin:0;padding:0;border:0}
.ct-l{display:block;padding:0;margin:0 0 8px;font-size:15px;line-height:1.5;font-weight:600;color:var(--muted)}
.ct-row{display:flex;flex-wrap:wrap;gap:8px}
.ct-o{position:relative;display:inline-flex}
.ct-o input{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ct-o span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1.5px solid var(--hair);border-radius:999px;background:var(--white);font-size:16px;font-weight:600;line-height:1.2;color:var(--ink);pointer-events:none}
.ct-o input:hover+span{border-color:var(--teal)}
.ct-o input:checked+span{background:var(--teal);border-color:var(--teal);color:var(--white)}
.ct-o input:focus-visible+span{outline:2px solid var(--teal);outline-offset:2px}
.ct-sel{min-height:44px;max-width:100%;padding:0 12px;border:1.5px solid var(--ink);border-radius:10px;background:var(--white);font-family:var(--font);font-size:16px;font-weight:600;line-height:1.2;color:var(--ink)}
.ct-sel:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* ---------- the views: one per toggle state, written whole at build time; the checked control picks one ---------- */
.cw:has(.ct-a[value="a"]:checked) .cv:not([data-a="a"]),
.cw:has(.ct-a[value="b"]:checked) .cv:not([data-a="b"]),
.cw:has(.ct-a[value="g"]:checked) .cv:not([data-a="g"]),
.cw:has(.ct-s[value="all"]:checked) .cv:not([data-s="all"]),
.cw:has(.ct-s[value="pain"]:checked) .cv:not([data-s="pain"]),
.cw:has(.ct-s[value="allergy"]:checked) .cv:not([data-s="allergy"]),
.cw:has(.ct-v[value="both"]:checked) .cv:not([data-v="both"]),
.cw:has(.ct-v[value="pew"]:checked) .cv:not([data-v="pew"]),
.cw:has(.ct-v[value="ipsos"]:checked) .cv:not([data-v="ipsos"]),
.cw:has(.ct-m option[value="m0"]:checked) .cv:not([data-m="m0"]),
.cw:has(.ct-m option[value="m1"]:checked) .cv:not([data-m="m1"]),
.cw:has(.ct-m option[value="m2"]:checked) .cv:not([data-m="m2"]),
.cw:has(.ct-m option[value="m3"]:checked) .cv:not([data-m="m3"]),
.cw:has(.ct-m option[value="m4"]:checked) .cv:not([data-m="m4"]),
.cw:has(.ct-m option[value="m5"]:checked) .cv:not([data-m="m5"]),
.cw:has(.ct-m option[value="m6"]:checked) .cv:not([data-m="m6"]),
.cw:has(.ct-m option[value="m7"]:checked) .cv:not([data-m="m7"]),
.cw:has(.ct-m option[value="m8"]:checked) .cv:not([data-m="m8"]),
.cw:has(.ct-m option[value="m9"]:checked) .cv:not([data-m="m9"]),
.cw:has(.ct-m option[value="m10"]:checked) .cv:not([data-m="m10"]),
.cw:has(.ct-m option[value="m11"]:checked) .cv:not([data-m="m11"]){display:none}
.cv[hidden]{display:none}
.cv-h{margin:0 0 .6rem;font-size:15px;line-height:1.5;color:var(--muted);max-width:72ch}
.cv-h strong{color:var(--ink);font-weight:700}

/* ---------- the rows ---------- */
.cb{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.cb-row{border-bottom:1px solid var(--hair)}
.cb-btn{display:grid;grid-template-columns:minmax(0,11.5rem) minmax(0,1fr) 7rem;grid-template-areas:"name track val";align-items:center;gap:4px 18px;width:100%;min-height:52px;margin:0;padding:8px 6px;border:0;border-radius:8px;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none}
.cb-btn:hover,.cb-btn[aria-expanded="true"]{background:var(--tray)}
.band--tray .cb-btn:hover,.band--tray .cb-btn[aria-expanded="true"]{background:var(--white)}
.cb-btn:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.cb-name{grid-area:name;min-width:0;font-size:16px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.cb-name .kind{margin-left:8px;font-weight:500;vertical-align:1px}
.kind--type{border:1.5px solid var(--hair)}
.cb-rank{display:inline-block;min-width:1.75rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.cb-sub{display:block;font-size:15px;font-weight:400;line-height:1.4;color:var(--muted)}
.cb-track{grid-area:track;position:relative;height:26px;min-width:0;border-radius:6px;background:var(--track);overflow:hidden}
.cb-band{position:absolute;top:0;bottom:0;background:var(--tint)}
.cb-fill{position:absolute;top:7px;bottom:7px;left:0;border-radius:3px;background:var(--c-a);min-width:3px}
.cb-fill.w-0{display:none}
.cb-fill--b{background:var(--c-b)}
.cb-fill--g{background:var(--c-g)}
.cb-val{grid-area:val;text-align:right;line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap}
.cb-pct{display:block;font-size:1.25rem;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.cb-of{display:block;margin-top:3px;font-size:15px;line-height:1.3;color:var(--muted)}
/* two series in one row (the report): two thin tracks, two values, each value with its series swatch */
.cb-tracks{grid-area:track;display:grid;gap:5px;min-width:0}
.cb-tracks .cb-track{grid-area:auto;height:14px;border-radius:4px}
.cb-tracks .cb-fill{top:2px;bottom:2px;border-radius:2px}
.cb-vals{grid-area:val;display:grid;gap:5px;text-align:right;line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap}
.cb-vals .cb-pct{display:inline-block;font-size:16px}
.cb-vals .cb-pct::before{content:"";display:inline-block;width:10px;height:10px;margin-right:7px;border-radius:2px;background:var(--c-a);vertical-align:0}
.cb-vals .cb-pct--b::before{background:var(--c-b)}
.cb-vals .cb-pct--g::before{background:var(--c-g)}
.cb-na{font-size:15px;line-height:1.3;color:var(--muted);white-space:normal}
/* compact rows for a small chart in a narrow column: name and value on one line, the bar beneath */
.cb--tight .cb-btn,.cb-btn--stack{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name val" "track track";gap:6px 12px;padding:10px 6px}
.cb--tight .cb-track{height:22px}
.cb--tight .cb-fill{top:6px;bottom:6px}
@media (max-width:719px){
  .cb-btn{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name val" "track track";gap:6px 12px;padding:10px 4px}
  .cb-track{height:22px}
  .cb-fill{top:6px;bottom:6px}
  .cb-tracks .cb-track{height:12px}
  .cb-tracks .cb-fill{top:2px;bottom:2px}
  .cb-vals{display:flex;justify-content:flex-end;gap:14px}
}

/* ---------- the rest of a chart: more names, the key, the status line ---------- */
.cb-more{margin:0}
.cb-more>summary{position:relative;display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 6px 8px 28px;border-bottom:1px solid var(--hair);font-size:16px;font-weight:600;line-height:1.3;color:var(--teal);cursor:pointer;list-style:none}
.cb-more>summary::-webkit-details-marker{display:none}
.cb-more>summary::before{content:"+";position:absolute;left:4px;top:50%;transform:translateY(-50%);width:18px;text-align:center;font-size:22px;font-weight:600;line-height:1}
.cb-more[open]>summary::before{content:"\2212"}
.cb-more>summary:hover{text-decoration:underline;text-underline-offset:3px}
.cb-more>summary:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:6px}
.cb-more .cb{border-top:0}
.ch-key{list-style:none;display:flex;flex-wrap:wrap;gap:6px 22px;margin:1rem 0 0;padding:0;font-size:15px;line-height:1.45;color:var(--muted)}
.ch-key li{display:inline-flex;align-items:center;gap:8px}
.ch-sw{display:inline-block;flex:none;width:18px;height:10px;border-radius:3px;background:var(--c-a)}
.ch-sw--b{background:var(--c-b)}
.ch-sw--g{background:var(--c-g)}
.ch-sw--band{width:22px;height:16px;border-radius:4px;background:var(--tint)}
.ch-grid{display:grid;gap:1.75rem 2.5rem}
@media (min-width:64rem){.ch-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ch-grid>div{min-width:0}
.ch-h{margin:0 0 .35rem;font-size:1.0625rem;line-height:1.35;font-weight:700}
.tbl+.tbl{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--hair)}
.tbl>*+*{margin-top:14px}
.data--chart{min-width:0}
.data--chart td.num{white-space:normal}

/* ---------- the tooltip: one per chart, placed by the script under the row it describes ---------- */
.ch-tip{position:absolute;left:0;right:0;z-index:4;max-width:38rem;margin:0;padding:12px 16px 14px;border:1px solid var(--hair);border-radius:12px;background:var(--white);box-shadow:var(--lift);font-size:15px;line-height:1.5;color:var(--ink)}
.ch-tip[hidden]{display:none}
.ch-tip p{margin:0;max-width:none}
.ch-tip p+p{margin-top:3px}
.ch-tip .t-h{font-size:16px;font-weight:700}
.ch-tip .t-m{color:var(--muted)}

/* ---------- motion: the bars draw in once when a view appears; the tooltip settles; nothing under reduced motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .cb-fill{transform-origin:0 50%;animation:cb-draw 200ms var(--ease-draw) both}
  .ch-tip{animation:ch-tip 150ms var(--ease-draw) both}
  .ct-o span{transition:background-color 150ms,border-color 150ms,color 150ms}
}
@keyframes cb-draw{from{transform:scaleX(0)}}
@keyframes ch-tip{from{opacity:0;transform:translateY(-4px)}}

/* D-030 (2026-10-21, Sarthak: text "vertically cut into half of the page" on census pages): from 64rem the section
   ledes, foot-notes, field notes and the source line run to a comfortable full measure instead of stopping near the
   middle of the container. Loaded by the census pages and the report only. */
@media (min-width:64rem){main .sh-lede,main .foot-note,main .af-note,main .v9h .v8h-src,main .comply{max-width:92ch}}
@media (min-width:64rem){.cw[data-chart="sources"] .cb-btn{grid-template-columns:minmax(0,17rem) minmax(0,1fr) 7rem}}