/* Plansza VII — Ustawy i ich rozporządzenia (dmuchawce) */

#field .cell { cursor: pointer; }
#field .cell .live { stroke: var(--paper); stroke-opacity: 0.85; stroke-width: 0.9; fill: none; }
#field .cell .dead { stroke: var(--paper); stroke-opacity: 0.22; stroke-width: 0.9; fill: none; }
#field .cell .core { fill: var(--ground-lift); stroke: var(--ink-faint); stroke-width: 0.8; }
#field .cell .name { fill: var(--ink-muted); font-family: var(--serif); font-size: 12px; text-anchor: middle; }
#field .cell .count { fill: var(--ink-faint); font-family: var(--sans); font-size: 10px; text-anchor: middle; }
#field .cell:hover .live, #field .cell:focus-visible .live { stroke-opacity: 1; }
#field .cell:hover .name, #field .cell:focus-visible .name { fill: var(--brass); }
#field .cell:hover .core { stroke: var(--brass); }

#field .big .ring { fill: none; stroke: var(--rule); stroke-opacity: 0.9; }
#field .big .ring-label { fill: var(--ink-faint); font-family: var(--sans); font-size: 11px; text-anchor: middle; }
#field .big .ray { fill: none; stroke: var(--paper); stroke-width: 1.3; stroke-linecap: round; }
#field .big .ray.live { stroke-opacity: 0.9; }
#field .big .ray.dead { stroke-opacity: 0.28; }
#field .big .ray.hot { stroke: var(--brass); stroke-opacity: 1; stroke-width: 2.4; }
#field .big .ray.off { stroke-opacity: 0.12; }
#sort[hidden] { display: none; }
#field .big .seed { fill: var(--paper); stroke: none; }
#field .big .seed.hot { fill: var(--brass); }
#field .big .seed.off { fill-opacity: 0.1; }
#field .big .cut { stroke: var(--paper); stroke-opacity: 0.45; stroke-width: 1; }
#field .big .hit { stroke: transparent; stroke-width: 7; fill: none; cursor: pointer; }
#field .big .core { fill: var(--ground-deep); stroke: var(--brass); stroke-width: 1.2; }
#field .big .core-text { fill: var(--brass); font-family: var(--serif); text-anchor: middle; }
#field .big .group-arc { fill: none; stroke: var(--ink-faint); stroke-width: 1; }
#field .big .group-arc.hot { stroke: var(--brass); stroke-width: 2; }
#field .big .group-label { fill: var(--ink-muted); font-family: var(--serif); font-size: 13px; }
#field .big .group-label.hot { fill: var(--brass); }

.key i.live { width: 14px; height: 2px; border-radius: 0; background: var(--paper); }
.key i.dead { width: 14px; height: 2px; border-radius: 0; background: var(--paper); opacity: 0.28; }
.key i.ring { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--rule); background: none; }

/* panel */
.panel .sub { color: var(--ink-muted); font-size: var(--t-sm); margin-top: 2px; }
.panel .hero { display: flex; gap: 24px; align-items: baseline; margin: 14px 0 6px; }
.panel .hero b { font-family: var(--serif); font-size: var(--t-3xl); font-weight: 500; line-height: 1; color: var(--brass); }
.panel .hero span { color: var(--ink-muted); font-size: var(--t-sm); }
.panel .hero .live b { color: var(--paper); font-size: var(--t-2xl); }
.panel .tools { display: flex; gap: 8px; align-items: center; margin: 16px 0 6px; flex-wrap: wrap; }
.panel .tools input { flex: 1 1 140px; min-width: 0; }
.panel .grp { margin-top: 16px; }
.panel .grp h4 { font-family: var(--serif); font-weight: 500; font-size: var(--t-md); margin: 0 0 4px; display: flex; justify-content: space-between; gap: 12px; }
.panel .grp h4 .v { color: var(--ink-muted); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.panel .kid { display: grid; grid-template-columns: 3.2em 1fr; gap: 0 8px; padding: 4px 0; border-bottom: 1px solid rgba(36, 45, 61, 0.6); font-size: var(--t-sm); cursor: default; }
.panel .kid .y { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.panel .kid .t { line-height: 1.3; }
.panel .kid .t small { display: block; color: var(--ink-muted); font-size: var(--t-xs); }
.panel .kid.dead .t { color: var(--ink-muted); text-decoration: line-through; text-decoration-color: var(--ink-faint); }
.panel .kid.dead .t small { text-decoration: none; }
.panel .kid.hot { color: var(--brass); }
.panel .kid.hot .t, .panel .kid.hot .y { color: var(--brass); }
.panel .more { color: var(--ink-faint); font-size: var(--t-xs); padding: 6px 0; }
.panel .back { margin-bottom: 16px; }
.panel .rows li .t small { display: block; color: var(--ink-muted); font-size: var(--t-xs); line-height: 1.3; }

/* para opis–liczba w panelu (ta sama konwencja co w inflacja.css) */
.panel .kv { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; font-size: var(--t-sm); margin: 18px 0 0; }
.panel .kv dt { color: var(--ink-muted); margin: 0; }
.panel .kv dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }