/* BGW Charts. Roles are declared locally so light/dark swap in one place, and the chart body
   is written against roles rather than raw hex. Dark values are declared under BOTH the OS
   media query and the [data-theme] scope so the site's own toggle wins in either direction.
   Series steps were validated against this site's surfaces, not flipped. */
.bgwch{
	--viz-s1:#9b2f2c;          /* accent / women / the emphasised bar */
	--viz-s2:#1a6aa8;          /* men */
	--viz-s0:#a89f94;          /* neutral context */
	--viz-grid:rgba(26,23,20,.10);
	--viz-base:rgba(26,23,20,.22);
	--viz-surface:#f3efe7;     /* the colour the 2px separating gaps are painted in */
	--viz-chip:rgba(26,23,20,.05);
	margin:34px 0;padding:0;font-family:'Inter',system-ui,-apple-system,sans-serif}
@media(prefers-color-scheme:dark){
	:root:where(:not([data-theme="light"])) .bgwch{
		--viz-s1:#c25b57;--viz-s2:#4a90d9;--viz-s0:#55504c;
		--viz-grid:rgba(244,239,230,.10);--viz-base:rgba(244,239,230,.20);
		--viz-surface:#0e0b0b;--viz-chip:rgba(244,239,230,.06)}
}
:root[data-theme="dark"] .bgwch{
	--viz-s1:#c25b57;--viz-s2:#4a90d9;--viz-s0:#55504c;
	--viz-grid:rgba(244,239,230,.10);--viz-base:rgba(244,239,230,.20);
	--viz-surface:#0e0b0b;--viz-chip:rgba(244,239,230,.06)}

/* Tabs. A view switcher, in one row above everything it scopes. */
.bgwch-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;padding:0 0 14px;border-bottom:1px solid var(--viz-grid)}
.bgwch-tab{
	appearance:none;border:1px solid transparent;background:var(--viz-chip);color:var(--muted);
	font:600 12px/1 'Inter',system-ui,sans-serif;letter-spacing:.02em;
	padding:8px 12px;border-radius:8px;cursor:pointer;transition:color .15s,background .15s,border-color .15s}
.bgwch-tab:hover{color:var(--text2)}
.bgwch-tab.is-on{background:transparent;border-color:var(--viz-base);color:var(--text)}
.bgwch-tab:focus-visible{outline:2px solid var(--viz-s1);outline-offset:2px}

.bgwch-head{margin:0 0 4px}
.bgwch-title{margin:0;font:600 15px/1.4 'Inter',system-ui,sans-serif;color:var(--text)}
.bgwch-sub{margin:5px 0 0;font:400 13px/1.55 'Inter',system-ui,sans-serif;color:var(--muted);max-width:62ch}

/* Legend: identity never rests on colour alone. */
.bgwch-legend{display:flex;flex-wrap:wrap;gap:16px;margin:14px 0 0}
.bgwch-legend span{display:inline-flex;align-items:center;gap:7px;font:400 12px/1 'Inter',system-ui,sans-serif;color:var(--text2)}
.bgwch-legend i{width:11px;height:11px;border-radius:2px;flex:0 0 auto}

.bgwch-plot{margin:8px 0 0;position:relative}
.bgwch-plot svg{display:block;width:100%;height:auto;overflow:visible}
.bgwch-bar{transition:opacity .15s}
.bgwch-hit{fill:transparent;cursor:default}
.bgwch-plot.is-hovering .bgwch-bar{opacity:.55}
.bgwch-plot.is-hovering .bgwch-bar.is-on{opacity:1}
.bgwch-cat{font:400 12.5px/1 'Inter',system-ui,sans-serif;fill:var(--text2)}
.bgwch-note{font:400 11px/1 'Inter',system-ui,sans-serif;fill:var(--muted)}
.bgwch-val{font:600 13px/1 'Inter',system-ui,sans-serif;fill:var(--text)}
.bgwch-tick{font:400 11px/1 'Inter',system-ui,sans-serif;fill:var(--muted);font-variant-numeric:tabular-nums}
.bgwch-grid line{stroke:var(--viz-grid);stroke-width:1;shape-rendering:crispEdges}
.bgwch-axis{stroke:var(--viz-base);stroke-width:1;shape-rendering:crispEdges}
.bgwch-hitlayer rect:focus-visible{outline:2px solid var(--viz-s1);outline-offset:1px}

/* Tooltip: value leads, label follows. */
.bgwch-tip{
	position:absolute;z-index:5;pointer-events:none;opacity:0;transform:translate(-50%,-100%);
	background:var(--bg);border:1px solid var(--viz-base);border-radius:8px;padding:8px 11px;
	box-shadow:0 6px 20px rgba(0,0,0,.14);transition:opacity .12s;min-width:96px}
.bgwch-tip.is-on{opacity:1}
.bgwch-tip b{display:block;font:600 16px/1.1 'Inter',system-ui,sans-serif;color:var(--text)}
.bgwch-tip span{display:flex;align-items:center;gap:6px;margin-top:4px;font:400 12px/1.3 'Inter',system-ui,sans-serif;color:var(--muted)}
.bgwch-tip span::before{content:"";width:12px;height:2px;border-radius:1px;background:var(--k,var(--viz-s1));flex:0 0 auto}

.bgwch-foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 16px;margin:18px 0 0;padding:13px 0 0;border-top:1px solid var(--viz-grid)}
.bgwch-toggle{
	appearance:none;background:none;border:0;padding:0;cursor:pointer;
	font:600 11px/1 'Inter',system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;
	color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.bgwch-toggle:hover{color:var(--accent)}
.bgwch-source{margin:0;font:400 11.5px/1.5 'Inter',system-ui,sans-serif;color:var(--muted);flex:1 1 240px}

/* The table is the value-without-hover path and the no-JS fallback: visible until JS hides it. */
.bgwch-tables{margin:16px 0 0;overflow-x:auto}
.bgwch.is-js .bgwch-tables{display:none}
.bgwch.is-js.is-open .bgwch-tables{display:block}
.bgwch.is-js .bgwch-table{display:none}
.bgwch.is-js .bgwch-table.is-on{display:table}
.bgwch-table{width:100%;border-collapse:collapse;font:400 13px/1.5 'Inter',system-ui,sans-serif;color:var(--text2)}
.bgwch-table caption{text-align:left;padding:0 0 8px;font-weight:600;color:var(--text)}
.bgwch-table th,.bgwch-table td{text-align:left;padding:7px 12px 7px 0;border-bottom:1px solid var(--viz-grid)}
.bgwch-table thead th{font:600 11px/1 'Inter',system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.bgwch-table td{font-variant-numeric:tabular-nums;color:var(--text);font-weight:600}

@media(max-width:600px){
	.bgwch-tab{font-size:11px;padding:7px 10px}
	.bgwch-sub{font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){
	.bgwch-tab,.bgwch-bar,.bgwch-tip{transition:none}
}