/* Plansza XVI — Wypadek i kara: rój wyroków z art. 177 k.k. per apelacja + mapa okręgów (skórka atlas.css). */

.canvas [hidden] { display: none !important; }
.small { font-size: var(--t-xs); }

.viewbar {
  position: absolute; left: 24px; right: 24px; top: 12px; z-index: 6;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.view { position: absolute; inset: 0; }
.view > svg { display: block; width: 100%; height: 100%; }
.controls { bottom: 18px; }

.canvas .caption { fill: var(--ink-faint); font-family: var(--sans); font-size: 11px; }
.canvas .chart-title { fill: var(--paper); font-family: var(--serif); font-size: 14px; }
.canvas .n-head { fill: var(--ink-faint); font-family: var(--sans); font-size: 11px; letter-spacing: 0.02em; }

/* ---------- rój ---------- */
#karySvg .row .bg { fill: transparent; }
#karySvg .row:hover .bg { fill: rgba(20, 26, 38, 0.7); }
#karySvg .row .lbl { fill: var(--paper); font-family: var(--serif); font-size: 14px; }
#karySvg .row .n { fill: var(--ink-faint); font-family: var(--sans); font-size: 10.5px; font-variant-numeric: tabular-nums; }
#karySvg .row .val { fill: var(--brass); font-family: var(--serif); font-size: 16px; font-variant-numeric: tabular-nums; }
#karySvg .dot { cursor: pointer; stroke-width: 1.2; }
#karySvg .dot.zaw { stroke-opacity: 0.75; }
#karySvg .dot.wu { fill-opacity: 0.8; }
#karySvg .dot:hover, #karySvg .dot.pin { stroke: var(--paper); stroke-width: 2; stroke-opacity: 1; }
#karySvg .dot.pin { r: 7; }
#karySvg .med { fill: var(--brass); }
#karySvg .med-line { stroke: var(--brass); stroke-width: 1; stroke-opacity: 0.5; pointer-events: none; }
#karySvg .floor { stroke: var(--ink-faint); stroke-dasharray: 3 4; }

/* ---------- mapa ---------- */
#mapa .land { fill: var(--ground-lift); stroke: var(--rule); stroke-width: 0.6; }
#mapa .okr circle { stroke: var(--ground); stroke-width: 1; cursor: default; }
#mapa .okr.thin circle { stroke: var(--ink-faint); stroke-dasharray: 2 2; }
#mapa .okr circle:hover { stroke: var(--paper); stroke-width: 2; }
#mapa .city { fill: var(--ink-muted); font-family: var(--sans); font-size: 10.5px; pointer-events: none; }
#mapa .mval { fill: var(--ground); font-family: var(--sans); font-size: 10px; font-weight: 600; pointer-events: none; font-variant-numeric: tabular-nums; }

/* ---------- panel ---------- */
.panel .sw { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 0; }
.panel .sw.zaw { border: 1.5px solid; }
.panel .quote { margin: 16px 0; padding: 10px 14px; border-left: 2px solid var(--brass); font-family: var(--serif); font-size: var(--t-sm); color: var(--paper); background: var(--ground-lift); }
.panel .rows li .v { text-align: right; white-space: normal; max-width: 58%; }

.panel table.sex { width: 100%; border-collapse: collapse; font-size: var(--t-xs); font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.panel table.sex th, .panel table.sex td { padding: 4px 4px; border-bottom: 1px solid rgba(36, 45, 61, 0.6); text-align: right; font-weight: 400; }
.panel table.sex th:first-child { text-align: left; color: var(--paper); }
.panel table.sex thead th { color: var(--ink-faint); }
.panel table.sex tr.grp th { text-align: left; color: var(--brass); font-family: var(--serif); font-size: var(--t-sm); padding-top: 10px; }