/* People exposed to protection risks on /protection-severity: one grapher
   (map, chart, table) in the front page's visual language (serif titles, sans
   for everything read, mono for the map callout). Every selector is scoped
   under .pex-root; the markup is templates/_protection_exposure.html and the
   behaviour static/js/protection_exposure.js. */

.pex-root {
  --pex-ink: #0B1B33; --pex-ink-2: #14294A; --pex-ink-3: #24385C;
  --pex-paper-2: #F4F6F8; --pex-muted: #4A5972; --pex-muted-2: #5B6A82; /* text: 5.5:1 on white, 5.1:1 on #F4F7FC, 4.6:1 on #E6ECF7 */
  --pex-rule: rgba(11, 27, 51, 0.14); --pex-rule2: rgba(11, 27, 51, 0.08); --pex-rule-strong: rgba(11, 27, 51, 0.32);
  --pex-accent: #1e40af; --pex-accent-h: #17318c; --pex-accent-2: #8FB0FF; --pex-sel: #E6ECF7; --pex-navy: #0B1B33;
  --pex-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --pex-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --pex-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  position: relative; margin: 0 0 25px; font-family: var(--pex-sans); color: var(--pex-ink); font-size: 14px; line-height: 1.45;
}
.pex-root *, .pex-root *::before, .pex-root *::after { box-sizing: border-box; }
.pex-root p, .pex-root h2, .pex-root ol, .pex-root ul { margin: 0; padding: 0; }
.pex-root button { font-family: inherit; }
.pex-root .pex-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.pex-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── frame ───────────────────────────────────────────────────────────── */
/* the frame takes the page's card chrome (nav.css: --prism-radius, --prism-border, --prism-shadow) */
.pex-root .pex-gr { display: grid; grid-template-columns: minmax(0, 1fr) 284px; grid-template-rows: auto auto; grid-template-areas: "main side" "foot side";
  background: #fff; border: 1px solid var(--prism-border, #e2e8f0); border-radius: var(--prism-radius, 16px); box-shadow: var(--prism-shadow, 0 2px 12px rgba(0, 0, 0, 0.06)); }
.pex-root .pex-gr.is-wide { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "foot"; }
.pex-root .pex-gr.is-wide .pex-side { display: none; }
.pex-root .pex-main { grid-area: main; padding: 22px 24px 0; min-width: 0; }

.pex-root .pex-t { font-family: var(--pex-serif); font-size: 26px; line-height: 1.15; font-weight: 600; color: var(--pex-ink); letter-spacing: -0.01em; }
.pex-root .pex-t:focus { outline: none; }
.pex-root .pex-sum { font-family: var(--pex-serif); font-size: 16.5px; line-height: 1.5; color: var(--pex-ink-2); margin: 8px 0 16px; max-width: 800px; }
.pex-root .pex-sum b { font-weight: 600; color: var(--pex-ink); }

/* ── population chips ────────────────────────────────────────────────── */
.pex-root .pex-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.pex-root .pex-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 10px; border: 1px solid var(--pex-rule);
  border-radius: 6px; background: #fff; font: 500 13px/1.1 var(--pex-sans); color: var(--pex-ink-2); cursor: pointer; white-space: nowrap; flex: none;
  transition: border-color .15s, background .15s, color .15s; }
.pex-root .pex-chip:hover { border-color: var(--pex-rule-strong); }
.pex-root .pex-chip i { display: block; width: 10px; height: 10px; border-radius: 2px; flex: none; }
.pex-root .pex-chip small { font-size: 12px; font-weight: 500; color: var(--pex-muted-2); font-variant-numeric: tabular-nums; }
.pex-root .pex-chip-l { min-width: 0; }
.pex-root .pex-chip[aria-pressed="true"] { background: var(--pex-sel); border-color: var(--pex-accent); color: var(--pex-accent); font-weight: 600; }
.pex-root .pex-chip[aria-pressed="true"] small { color: var(--pex-accent); }
.pex-root .pex-chip:focus-visible { outline: 2px solid var(--pex-accent); outline-offset: 2px; }

/* ── view tabs ───────────────────────────────────────────────────────── */
.pex-root .pex-tabs { display: inline-flex; border: 1px solid var(--pex-rule); border-radius: 6px; overflow: hidden; margin: 0 0 14px; max-width: 100%; }
.pex-root .pex-tabs button { border: 0; border-right: 1px solid var(--pex-rule2); background: #fff; padding: 8px 15px; font: 500 13.5px/1 var(--pex-sans);
  color: var(--pex-ink-2); cursor: pointer; display: inline-flex; gap: 7px; align-items: center; justify-content: center; min-height: 38px; }
.pex-root .pex-tabs button:last-child { border-right: 0; }
.pex-root .pex-tabs button:hover { background: var(--pex-paper-2); }
.pex-root .pex-tabs button[aria-selected="true"] { background: var(--pex-sel); color: var(--pex-accent); font-weight: 600; }
.pex-root .pex-tabs button:focus-visible { outline: 2px solid var(--pex-accent); outline-offset: -2px; }

.pex-root .pex-body { position: relative; }
.pex-root .pex-skel { height: 420px; border-radius: 6px; background: var(--pex-paper-2); }
.pex-root .pex-msg { padding: 40px 12px; text-align: center; color: var(--pex-muted); font-size: 14px; }

/* ── map ─────────────────────────────────────────────────────────────── */
.pex-root .pex-mapbox { position: relative; margin: 0 auto; }
.pex-root .pex-map { display: block; width: 100%; height: auto; overflow: hidden; }
.pex-root .pex-map:focus { outline: none; }
.pex-root .pex-map:focus-visible { outline: 2px solid var(--pex-accent); outline-offset: 3px; border-radius: 3px; }
.pex-root .pex-map .pex-cty path { stroke: #fff; stroke-width: 0.7; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.pex-root .pex-map .pex-cty path.in { cursor: pointer; }
.pex-root .pex-map .pex-cty path.out { fill: #E6EAEF; }
.pex-root .pex-map .pex-hit { fill: transparent; pointer-events: all; cursor: pointer; }
/* small-country markers on touch screens and narrow cards */
.pex-root .pex-map .pex-lead line { stroke: var(--pex-navy); stroke-width: 0.9; opacity: 0.55; vector-effect: non-scaling-stroke; pointer-events: none; }
.pex-root .pex-map .pex-pin { stroke: #fff; stroke-width: 1.6; vector-effect: non-scaling-stroke; pointer-events: none; }
.pex-root .pex-map .pex-pin.is-on { stroke: var(--pex-navy); stroke-width: 2.2; }
.pex-root .pex-hl-hov, .pex-root .pex-hl-sel, .pex-root .pex-hl-halo { fill: none; pointer-events: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.pex-root .pex-hl-hov { stroke: var(--pex-navy); stroke-width: 1.6; }
.pex-root .pex-hl-halo { stroke: #fff; stroke-width: 5; }
.pex-root .pex-hl-sel { stroke: var(--pex-navy); stroke-width: 2.2; }

/* the instrument callout: on the largest figure, then on the selected country */
.pex-root .pex-co { position: absolute; z-index: 2; pointer-events: none; background: var(--pex-navy); color: var(--pex-accent-2); font: 500 11.5px/1 var(--pex-mono);
  padding: 5px 7px; border-radius: 3px; white-space: nowrap; }
.pex-root .pex-co b { color: #fff; font-weight: 600; margin-right: 2px; }
.pex-root .pex-co::after { content: ''; position: absolute; left: var(--px, 50%); bottom: -4px; width: 8px; height: 8px; margin-left: -4px; background: var(--pex-navy); transform: rotate(45deg); }
.pex-root .pex-co.is-below::after { bottom: auto; top: -4px; }
.pex-root .pex-co.is-right::after { left: -4px; top: var(--py, 50%); bottom: auto; margin: -4px 0 0 0; }
.pex-root .pex-co.is-left::after { left: auto; right: -4px; top: var(--py, 50%); bottom: auto; margin: -4px 0 0 0; }
.pex-root .pex-co-dot { position: absolute; z-index: 2; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--pex-navy); box-shadow: 0 0 0 1.5px #fff; pointer-events: none; }

/* legend */
.pex-root .pex-leg { display: flex; align-items: flex-start; gap: 12px; font: 500 11.5px/1 var(--pex-sans); color: var(--pex-muted-2); max-width: 700px; margin: 10px auto 0; font-variant-numeric: tabular-nums; }
.pex-root .pex-leg-nd { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; flex: none; line-height: 1.2; white-space: nowrap; }
.pex-root .pex-leg-nd svg, .pex-root .pex-leg-out, .pex-root .pex-leg-nod { display: block; width: 26px; height: 11px; border: 1px solid #D5DBE4; flex: none; }
.pex-root .pex-leg-out { background: #E6EAEF; }
.pex-root .pex-leg-nod { background: radial-gradient(circle, #7F8BA0 0.9px, #F1F3F6 1.2px) 0 0 / 4px 4px; }
.pex-root .pex-leg-sc { flex: 1; min-width: 0; }
.pex-root .pex-leg-bins { display: flex; height: 11px; }
.pex-root .pex-leg-bins span { flex: 1; border-right: 1px solid #fff; }
.pex-root .pex-leg-bins span:last-child { border-right: 0; }
.pex-root .pex-leg-lbls { position: relative; height: 13px; margin-top: 4px; }
.pex-root .pex-leg-lbls span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.pex-root .pex-leg-lbls span.is-mid { transform: translateX(-50%); }
.pex-root .pex-leg-unit { display: block; margin-top: 6px; font-size: 12px; line-height: 1.4; color: var(--pex-muted-2); }

.pex-root .pex-read { font-size: 13.5px; line-height: 1.45; min-height: 2.4em; margin: 12px auto 0; max-width: 700px; color: var(--pex-ink-2); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; text-align: center; }
.pex-root .pex-read b { font-weight: 600; color: var(--pex-ink); }
.pex-root .pex-read .k, .pex-root .pex-read .u { color: var(--pex-muted-2); }
.pex-root .pex-bd { flex: 1 1 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pex-root .pex-bd .pex-tip-bar { width: 100%; max-width: 360px; margin: 2px 0 0; }
.pex-root .pex-bd-l { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 12px; font-size: 12.5px; color: var(--pex-muted); font-variant-numeric: tabular-nums; }
.pex-root .pex-bd-l span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.pex-root .pex-bd-l span.is-on { color: var(--pex-ink); font-weight: 600; }
.pex-root .pex-bd-l i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
.pex-root .pex-go { border: 0; background: none; padding: 6px 2px; min-height: 32px; font: 600 13px/1.2 var(--pex-sans); color: var(--pex-accent); cursor: pointer; white-space: nowrap; }
.pex-root .pex-go:hover { text-decoration: underline; text-underline-offset: 3px; }
.pex-root .pex-go:focus-visible { outline: 2px solid var(--pex-accent); outline-offset: 2px; border-radius: 2px; }

/* ── side list ───────────────────────────────────────────────────────── */
.pex-root .pex-side { grid-area: side; position: relative; border-left: 1px solid var(--pex-rule2); min-width: 0; min-height: 360px; }
.pex-root .pex-side-in { position: absolute; inset: 0; padding: 20px 16px 16px; display: flex; flex-direction: column; }
.pex-root .pex-side-h { font: 600 11.5px/1.3 var(--pex-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--pex-muted); margin: 0 0 10px; }
.pex-root .pex-find { position: relative; }
.pex-root .pex-find input { width: 100%; height: 36px; border: 1px solid var(--pex-rule); border-radius: 6px; padding: 0 10px 0 32px; font: 400 14px var(--pex-sans); color: var(--pex-ink); background: #fff; }
.pex-root .pex-find input:focus { outline: 2px solid var(--pex-accent); outline-offset: -1px; border-color: transparent; }
.pex-root .pex-find svg { position: absolute; left: 10px; top: 11px; color: var(--pex-muted-2); }
.pex-root .pex-list { list-style: none; margin: 10px 0 0; padding: 0; overflow: auto; border-top: 1px solid var(--pex-rule2); flex: 1 1 0; min-height: 0; }
.pex-root .pex-list li { border-bottom: 1px solid var(--pex-rule2); }
.pex-root .pex-list button { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 7px 8px;
  min-height: 34px; font: 400 13.5px/1.3 var(--pex-sans); color: var(--pex-ink); cursor: pointer; text-align: left; }
.pex-root .pex-list button > * { position: relative; z-index: 1; }
.pex-root .pex-list .bar { position: absolute; z-index: 0; left: 0; top: 0; bottom: 0; width: var(--w, 0%); background: #EDF1F7; }
.pex-root .pex-list b { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--pex-ink-2); white-space: nowrap; }
.pex-root .pex-list button.is-zero { color: var(--pex-muted-2); }
.pex-root .pex-list button.is-zero b { color: var(--pex-muted-2); }
.pex-root .pex-list button:hover, .pex-root .pex-list button.is-hov { background: #F7F9FC; }
.pex-root .pex-list button:hover .bar, .pex-root .pex-list button.is-hov .bar { background: #DCE5F3; }
.pex-root .pex-list button.is-sel { color: var(--pex-accent); font-weight: 600; }
.pex-root .pex-list button.is-sel .bar { background: #D3DEF2; }
.pex-root .pex-list button:focus-visible { outline: 2px solid var(--pex-accent); outline-offset: -2px; }
.pex-root .pex-list .pex-empty { padding: 10px 8px; color: var(--pex-muted-2); font-size: 13px; }

/* ── ranked chart ────────────────────────────────────────────────────── */
.pex-root .pex-ch-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px 16px; flex-wrap: wrap; margin: 2px 0 10px; }
.pex-root .pex-ch-t { font: 600 12.5px/1.3 var(--pex-sans); color: var(--pex-ink-2); margin: 4px 0 0; min-width: 0; flex: 1 1 260px; }
.pex-root .pex-seg { display: inline-flex; flex: none; border: 1px solid var(--pex-rule); border-radius: 6px; overflow: hidden; }
.pex-root .pex-seg button { border: 0; border-right: 1px solid var(--pex-rule2); background: #fff; padding: 6px 12px; min-height: 32px; font: 500 13px/1 var(--pex-sans); color: var(--pex-ink-2); cursor: pointer; }
.pex-root .pex-seg button:last-child { border-right: 0; }
.pex-root .pex-seg button:hover { background: var(--pex-paper-2); }
.pex-root .pex-seg button[aria-pressed="true"] { background: var(--pex-sel); color: var(--pex-accent); font-weight: 600; }
.pex-root .pex-seg button:focus-visible { outline: 2px solid var(--pex-accent); outline-offset: -2px; }
.pex-root .pex-ch-t small { display: block; font-weight: 400; color: var(--pex-muted-2); margin-top: 2px; font-size: 12px; }
.pex-root .pex-key { display: flex; gap: 6px 16px; font-size: 12.5px; color: var(--pex-muted); margin: 0 0 10px; flex-wrap: wrap; }
.pex-root .pex-key span { display: inline-flex; align-items: center; white-space: nowrap; }
.pex-root .pex-key i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; flex: none; }
.pex-root .pex-key em { font-style: normal; color: var(--pex-muted-2); margin-left: 5px; font-variant-numeric: tabular-nums; }
.pex-root .pex-key span.is-dim { opacity: 0.5; }
.pex-root .pex-rk { --lab: 172px; --val: 64px; position: relative; padding-bottom: 22px; }
.pex-root .pex-rk-grid { position: absolute; top: 0; bottom: 22px; left: var(--lab); right: var(--val); pointer-events: none; }
.pex-root .pex-rk-grid span { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid rgba(11, 27, 51, 0.08); }
.pex-root .pex-rk-grid span.is-0 { border-left-color: rgba(11, 27, 51, 0.4); }
.pex-root .pex-rk-grid em { position: absolute; bottom: -19px; transform: translateX(-50%); font: 500 11px/1 var(--pex-sans); font-style: normal; color: var(--pex-muted-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pex-root .pex-rk-grid span.is-0 em { transform: none; }
.pex-root .pex-rk-row { position: relative; display: grid; grid-template-columns: var(--lab) minmax(0, 1fr); align-items: center; width: 100%; min-height: 32px; padding: 0; border: 0;
  background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; border-radius: 3px; }
.pex-root .pex-rk-n { padding-right: 10px; text-align: right; font: 400 13px/1.2 var(--pex-sans); color: var(--pex-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pex-root .pex-rk-tr { position: relative; display: flex; align-items: center; height: 32px; padding-right: 0; min-width: 0; }
.pex-root .pex-rk-fill { display: flex; height: 18px; width: calc((100% - var(--val)) * var(--w, 0)); min-width: 1px; }
.pex-root .pex-rk-fill i { display: block; height: 100%; min-width: 0; }
.pex-root .pex-rk-fill i + i { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.85); }
.pex-root .pex-rk-fill i.is-dim { opacity: 0.38; }
/* GPC's unassigned remainder (Mali) stays visible as a hatch at any width */
.pex-root .pex-rk-fill i.is-rest { min-width: 4px; }
.pex-root .pex-rk-v { padding-left: 7px; font: 600 12.5px/1 var(--pex-sans); color: var(--pex-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pex-root .pex-rk-row:hover, .pex-root .pex-rk-row.is-hov { background: #F4F7FC; }
.pex-root .pex-rk-row:hover .pex-rk-n, .pex-root .pex-rk-row.is-hov .pex-rk-n { color: var(--pex-accent); }
.pex-root .pex-rk-row.is-sel .pex-rk-n { color: var(--pex-accent); font-weight: 600; }
.pex-root .pex-rk-row.is-sel .pex-rk-fill { outline: 1.5px solid var(--pex-navy); outline-offset: 1px; }
.pex-root .pex-rk-row:focus-visible { outline: 2px solid var(--pex-accent); outline-offset: -1px; }
.pex-root .pex-hint { font-size: 13px; color: var(--pex-muted-2); margin: 12px 0 0; line-height: 1.45; }

/* ── table ───────────────────────────────────────────────────────────── */
.pex-root .pex-tbl-tools { display: flex; gap: 10px 12px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.pex-root .pex-tbl-tools .pex-find { width: 260px; max-width: 100%; }
.pex-root .pex-tbl-n { font-size: 12.5px; color: var(--pex-muted-2); flex: 1 1 200px; min-width: 0; }
.pex-root .pex-btn, .pex-root .pex-btn-o { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; min-height: 36px; border-radius: 6px; font: 600 13.5px/1.2 var(--pex-sans);
  text-decoration: none; white-space: nowrap; cursor: pointer; border: 1px solid var(--pex-accent); transition: background .15s, color .15s; }
.pex-root .pex-btn { background: var(--pex-accent); color: #fff; }
.pex-root .pex-btn:hover { background: var(--pex-accent-h); border-color: var(--pex-accent-h); color: #fff; }
.pex-root .pex-btn-o { background: #fff; color: var(--pex-accent); }
.pex-root .pex-btn-o:hover { background: var(--pex-accent); color: #fff; }
.pex-root .pex-btn:focus-visible, .pex-root .pex-btn-o:focus-visible { outline: 2px solid var(--pex-accent); outline-offset: 2px; }
.pex-root .pex-tbl-wrap { overflow: auto; max-height: 560px; border: 1px solid var(--pex-rule2); border-radius: 6px; -webkit-overflow-scrolling: touch; }
.pex-root .pex-tbl-wrap:focus-visible { outline: 2px solid var(--pex-accent); outline-offset: 2px; }
.pex-root .pex-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 820px; }
.pex-root .pex-tbl.is-tot { min-width: 0; }
.pex-root .pex-tbl th { position: sticky; top: 0; background: #fff; text-align: left; padding: 0; border-bottom: 1px solid var(--pex-rule); z-index: 1; vertical-align: bottom; }
.pex-root .pex-tbl th.n { text-align: right; }
.pex-root .pex-tbl th button, .pex-root .pex-tbl th > span { display: inline-flex; align-items: center; gap: 5px; width: 100%; min-height: 36px; padding: 9px 12px; border: 0; background: none;
  font: 600 11.5px/1.2 var(--pex-sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--pex-muted); cursor: pointer; text-align: inherit; white-space: nowrap; }
.pex-root .pex-tbl th > span { cursor: default; }
.pex-root .pex-tbl th.n button { justify-content: flex-end; }
.pex-root .pex-tbl th button:hover { color: var(--pex-accent); }
.pex-root .pex-tbl th button:focus-visible { outline: 2px solid var(--pex-accent); outline-offset: -2px; }
.pex-root .pex-tbl th button svg { flex: none; opacity: 0.35; }
.pex-root .pex-tbl th[aria-sort] button { color: var(--pex-accent); }
.pex-root .pex-tbl th[aria-sort] button svg { opacity: 1; }
.pex-root .pex-tbl th i.sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex: none; }
.pex-root .pex-tbl td { padding: 3px 12px; height: 40px; border-bottom: 1px solid var(--pex-rule2); color: var(--pex-ink-2); vertical-align: middle; background: #fff; }
.pex-root .pex-tbl td.c { white-space: nowrap; }
.pex-root .pex-tbl th.c, .pex-root .pex-tbl td.c { position: sticky; left: 0; z-index: 1; box-shadow: inset -1px 0 0 var(--pex-rule2); }
.pex-root .pex-tbl th.c { z-index: 2; }
.pex-root .pex-tbl td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pex-root .pex-tbl td.z { color: var(--pex-muted-2); }
.pex-root .pex-tbl td.rk { color: var(--pex-muted-2); width: 52px; font-variant-numeric: tabular-nums; }
.pex-root .pex-tbl .is-cur { background: #F4F7FC; }
.pex-root .pex-tbl th.is-cur { background: #F4F7FC; }
.pex-root .pex-tbl td .pex-cn { border: 0; background: none; padding: 4px 0; min-height: 32px; font: 500 13.5px/1.2 var(--pex-sans); color: var(--pex-ink); cursor: pointer; text-align: left;
  text-decoration: underline; text-decoration-color: var(--pex-rule); text-underline-offset: 4px; }
.pex-root .pex-tbl td .pex-cn:hover { color: var(--pex-accent); text-decoration-color: var(--pex-accent); }
.pex-root .pex-tbl td .pex-cn:focus-visible { outline: 2px solid var(--pex-accent); outline-offset: 2px; border-radius: 2px; }
.pex-root .pex-tbl td i.sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 8px; vertical-align: 0; }
.pex-root .pex-tbl tbody td.is-cur { background: #F4F7FC; }
.pex-root .pex-tbl tbody tr:hover td { background: #EEF3FB; }
.pex-root .pex-tbl tfoot td { position: sticky; bottom: 0; background: #F4F6F8; height: 38px; border-top: 1px solid var(--pex-rule); border-bottom: 0; font-weight: 600; color: var(--pex-ink); }
.pex-root .pex-tbl tfoot td.lbl { font-weight: 500; color: var(--pex-muted); font-size: 12.5px; }
.pex-root .pex-tbl-note { font-size: 12.5px; color: var(--pex-muted-2); margin: 8px 0 0; line-height: 1.45; }

/* ── footer ──────────────────────────────────────────────────────────── */
.pex-root .pex-f { grid-area: foot; margin: 18px 24px 0; padding: 12px 0 18px; border-top: 1px solid var(--pex-rule2); display: flex; justify-content: space-between;
  gap: 12px 20px; align-items: flex-end; flex-wrap: wrap; min-width: 0; }
.pex-root .pex-src { font-size: 12.5px; color: var(--pex-muted); line-height: 1.5; max-width: 720px; flex: 1 1 360px; min-width: 0; }
.pex-root .pex-src a { color: var(--pex-ink-2); text-decoration: underline; text-underline-offset: 2px; }
.pex-root .pex-src a:hover { color: var(--pex-accent); }
.pex-root .pex-src b { font-weight: 600; color: var(--pex-ink-2); }
.pex-root .pex-act { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── tooltip ─────────────────────────────────────────────────────────── */
.pex-root .pex-tip { position: fixed; z-index: 2000; left: 0; top: 0; pointer-events: none; background: #fff; border: 1px solid var(--pex-rule-strong); border-radius: 6px;
  padding: 10px 12px 9px; width: max-content; max-width: 270px; font-size: 13px; line-height: 1.35; color: var(--pex-ink); box-shadow: 0 6px 18px -10px rgba(11, 27, 51, 0.35); }
.pex-root .pex-tip[hidden] { display: none; }
.pex-root .pex-tip p { margin: 0; }
.pex-root .pex-tip-n { font-weight: 700; font-size: 14px; margin-bottom: 3px !important; }
.pex-root .pex-tip-v b { font-family: var(--pex-serif); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pex-root .pex-tip-v span { color: var(--pex-muted); font-size: 12px; margin-left: 4px; }
.pex-root .pex-tip-rk { font-size: 12px; color: var(--pex-muted); margin-top: 2px !important; }
.pex-root .pex-tip-nd { color: var(--pex-muted-2); font-style: italic; }
.pex-root .pex-tip-bar { display: flex; height: 8px; margin: 8px 0 6px; border-radius: 1px; overflow: hidden; background: #EEF1F5; }
.pex-root .pex-tip-bar i { display: block; height: 100%; }
.pex-root .pex-tip-bar i + i { box-shadow: inset 1px 0 0 #fff; }
.pex-root .pex-tip-bar i.is-dim { opacity: 0.35; }
.pex-root .pex-tip-l { list-style: none; margin: 0 !important; padding: 0 !important; font-size: 12px; color: var(--pex-ink-2); }
.pex-root .pex-tip-l li { display: flex; justify-content: space-between; gap: 14px; padding: 1px 0; }
.pex-root .pex-tip-l li span { display: inline-flex; align-items: center; gap: 6px; }
.pex-root .pex-tip-l li i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
.pex-root .pex-tip-l li b { font-weight: 500; font-variant-numeric: tabular-nums; }
.pex-root .pex-tip-l li b em { font-style: normal; font-weight: 500; color: var(--pex-muted-2); margin-left: 4px; }
.pex-root .pex-tip-l li.is-on { font-weight: 600; color: var(--pex-ink); }
.pex-root .pex-tip-l li.is-on b { font-weight: 600; }
.pex-root .pex-tip-vin { font-size: 12px; line-height: 1.4; color: var(--pex-muted-2); border-top: 1px solid var(--pex-rule2); margin-top: 7px !important; padding-top: 6px; }

/* ── responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1240px) {
  .pex-root .pex-gr { grid-template-columns: minmax(0, 1fr) 260px; }
}
@media (max-width: 900px) {
  .pex-root .pex-gr, .pex-root .pex-gr.is-wide { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "side" "foot"; }
  .pex-root .pex-side { border-left: 0; min-height: 0; margin: 0 24px; }
  .pex-root .pex-side-in { position: static; padding: 16px 0 0; }
  .pex-root .pex-list { flex: none; max-height: 306px; }
}
@media (max-width: 767.98px) {
  .pex-root .pex-main { padding: 16px 14px 0; }
  .pex-root .pex-f { margin: 16px 14px 0; padding-bottom: 14px; }
  .pex-root .pex-side { margin: 0 14px; }
  .pex-root .pex-t { font-size: 22px; }
  .pex-root .pex-sum { font-size: 15.5px; margin-bottom: 14px; }
  .pex-root .pex-body { min-height: 0; }
  .pex-root .pex-skel { height: 220px; }
  .pex-root .pex-rk { --lab: 128px; --val: 52px; }
  .pex-root .pex-rk-n { font-size: 12.5px; }
  /* the six group chips become a grid of three columns, each sum under its label */
  .pex-root .pex-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .pex-root .pex-chip { display: grid; grid-template-columns: 10px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 7px; row-gap: 3px; align-items: center;
    min-height: 48px; padding: 7px 10px; white-space: normal; text-align: left; }
  .pex-root .pex-chip i { grid-row: 1; grid-column: 1; }
  .pex-root .pex-chip-l { grid-row: 1; grid-column: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pex-root .pex-chip small { grid-row: 2; grid-column: 2; font-size: 13px; font-weight: 600; color: var(--pex-ink); }
  /* legend: the scale on its own line, the two grey keys under it */
  .pex-root .pex-leg { flex-wrap: wrap; gap: 8px 16px; }
  .pex-root .pex-leg-sc { order: -1; flex: 1 1 100%; }
  .pex-root .pex-leg-nd { flex-direction: row; align-items: center; gap: 6px; }
  .pex-root .pex-read { margin-top: 10px; }
}
@media (max-width: 480px) {
  .pex-root .pex-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pex-root .pex-tabs { display: flex; width: 100%; }
  .pex-root .pex-co { font-size: 10.5px; padding: 4px 6px; }
  .pex-root .pex-tabs button { flex: 1; padding: 9px 8px; }
  .pex-root .pex-leg { font-size: 11px; }
  .pex-root .pex-leg-nd svg, .pex-root .pex-leg-out, .pex-root .pex-leg-nod { width: 22px; height: 10px; }
  .pex-root .pex-rk { --lab: 104px; --val: 46px; }
  .pex-root .pex-rk-n { font-size: 12px; line-height: 1.15; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .pex-root .pex-rk-v { font-size: 12px; padding-left: 5px; }
  .pex-root .pex-f { flex-direction: column; align-items: flex-start; }
  .pex-root .pex-src { flex: none; }
  .pex-root .pex-tbl-tools .pex-find { width: 100%; }
  .pex-root .pex-tbl th.rk, .pex-root .pex-tbl td.rk { display: none; }
}
/* totals only: GPC's sub-population table did not arrive, so no group chips */
.pex-root.is-nosub .pex-chips { display: none; }
/* a failed or empty load: the message alone, at any width */
.pex-root.is-failed .pex-tabs, .pex-root.is-failed .pex-chips, .pex-root.is-failed .pex-side, .pex-root.is-failed .pex-f { display: none; }
.pex-root.is-failed .pex-gr { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main"; }
.pex-root.is-failed .pex-main { padding-bottom: 8px; }
@media (prefers-reduced-motion: reduce) {
  .pex-root * { transition: none !important; }
}