/* Kropki — design zgodny z platformą porobi.one (tokeny per-motyw: light/dark/dracula/glass).
   Kolory typów węzłów i poziomów ryzyka pozostają semantyczne (kodują DANE, czytane przez app.js). */
:root{
  /* kolory typów węzłów (DANE — czytane przez app.js getComputedStyle, NIE themować).
     Wartości ocieplone/przygaszone pod tożsamość Platformy (2026-07-21) —
     semantyka i rozróżnialność 9 typów zachowane (inst/regional/municipal
     rozsunięte barwą i jasnością). */
  --c-city:#d9a13a;        /* miasto / terytorium */
  --c-voiv:#ae87e2;        /* województwo */
  --c-district:#9aa73b;    /* dzielnice (jednostki pomocnicze miasta) */
  --c-inst:#4e8ed3;        /* urzędy / rady */
  --c-gov:#4f9c5e;         /* administracja rządowa */
  --c-municipal:#2f9e81;   /* spółki komunalne */
  --c-regional:#7583d8;    /* spółki wojewódzkie */
  --c-private:#e8854f;     /* spółki prywatne */
  --c-person:#a39c90;      /* osoby (ciepły szary — najliczniejszy typ ustawia temperaturę grafu) */
  /* poziomy ryzyka (DANE) */
  --sev-high:#e5636f;
  --sev-medium:#f0a63f;
  --sev-low:#97a5b1;
  --sev-info:#4e8ed3;

  /* Warianty TEKSTOWE semantycznych kolorów — czytelne na jasnym tle (WCAG).
     Używać TYLKO jako color: tekstu. Dekoracyjne (swatche, tinty, obrysy, fille
     węzłów) zostają na surowych tokenach semantycznych (czytane przez app.js). */
  --sev-high-fg:#b73a4e;
  --sev-medium-fg:#8a5f15;
  --sev-low-fg:#5a636c;
  --sev-info-fg:#2f6cae;
  --c-city-fg:#7f5c12;
  --c-municipal-fg:#1f7a63;
  /* Bursztyn baniek cross-region: na light przyciemniony (białe etykiety na
     oryginalnym #c9803a miały ~3.2:1), na ciemnych motywach oryginał. */
  --xr-accent:#a8672a;
  /* Pozostałe barwy baniek jako tokeny; warianty -ink = TEKST na tle strony
     (na light przyciemnione do progu czytelności, dekoracje zostają jasne). */
  --xr-inst-accent:#7fb0c8;
  --xr-person-accent:#e6ad72;
  --xr-person-ink:#8a5c20;
  --xr-review-muted:#8b95a6;
  --xr-review-ink:#8a6a1a;
  /* Tło pigułki km na krawędzi „do kontroli" — ciemniejsze od review-muted,
     bo nosi BIAŁY tekst; ta sama wartość na obu motywach (celowo). */
  --xr-review-km:#6b7482;
  --xr-spouse-accent:#b98cc9;
  --xr-spouse-bg:#7a5a8c;
}
/* Na ciemnych motywach jasne semantyczne kolory czytają się dobrze także jako tekst. */
:root[data-theme="dark"],
:root[data-theme="dracula"],
:root[data-theme="glass"]{
  --sev-high-fg:var(--sev-high);
  --sev-medium-fg:var(--sev-medium);
  --sev-low-fg:var(--sev-low);
  --sev-info-fg:var(--sev-info);
  --c-city-fg:var(--c-city);
  --c-municipal-fg:var(--c-municipal);
  --xr-accent:#c9803a;
  --xr-person-ink:var(--xr-person-accent);
  --xr-review-ink:#d9a441;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--platform-font-family);
  background:var(--bg);
  color:var(--text);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
svg{display:block}
button{font-family:inherit;cursor:pointer}

/* ── pasek demo (ostrzeżenie: dane demonstracyjne) ─────────────── */
.demo-banner{
  display:flex;align-items:center;gap:10px;
  background:var(--warn-bg);color:var(--warn-fg);
  border-bottom:1px solid color-mix(in srgb,var(--warn-fg) 28%,transparent);
  padding:8px 16px;font-size:var(--text-xs);line-height:1.35;
}
.demo-banner svg{fill:var(--warn-fg);flex:0 0 auto}
.demo-banner span{flex:1}
.demo-banner strong{color:var(--warn-fg);font-weight:var(--platform-weight-bold)}
.demo-banner button{
  background:transparent;border:none;color:var(--warn-fg);font-size:var(--text-base);
  padding:2px 6px;border-radius:var(--radius-sm);opacity:.75;
}
.demo-banner button:hover{background:color-mix(in srgb,var(--warn-fg) 14%,transparent);opacity:1}
/* wariant dla danych RZECZYWISTYCH (nie demo) — info */
.demo-banner.data-real{background:var(--info-bg);color:var(--info-fg);border-bottom-color:color-mix(in srgb,var(--info-fg) 28%,transparent)}
.demo-banner.data-real svg{fill:var(--info-fg)}
.demo-banner.data-real strong{color:var(--info-fg)}
.demo-banner.data-real button{color:var(--info-fg)}

/* ── pasek miasto + statystyki ─────────────────────────────────── */
/* Wewnętrzne szwy chrome zmiękczone — bez drabiny 4 równoległych kresek
   (header/banner/app-header/toolbar); twarda zostaje tylko granica nad grafem. */
.app-header{
  display:flex;align-items:center;gap:20px;
  padding:10px 16px;background:var(--surface);
  border-bottom:1px solid var(--platform-hairline);
}
/* Glass: backdrop-filter panelu tworzy stacking context — bez własnego
   z-index dropdown miast malował się POD grafem. */
:root[data-theme="glass"] .app-header{position:relative;z-index:6}

/* Wspólny header platformy: pełna szerokość, flush, stała wysokość w flex-kolumnie. */
.kropki-platform-header{
  width:100%;margin:0;
  border-left:0;border-right:0;border-top:0;border-radius:0;
  flex:0 0 auto;
}

.city-select{position:relative}
.city-pill{
  display:flex;align-items:center;gap:8px;
  background:var(--panel-soft);border:1px solid var(--border);
  padding:6px 12px;border-radius:var(--radius-pill);
  font:inherit;color:var(--text);cursor:pointer;box-shadow:var(--shadow);
}
.city-pill:hover{border-color:var(--brand)}
.city-pill .city-home{fill:var(--c-city)}
.city-pill .chevron{fill:var(--muted);margin-left:1px}
.year-badge{
  background:var(--c-city);color:#241a05;font-size:var(--text-2xs);font-weight:600;
  padding:2px 7px;border-radius:var(--radius-pill);
}
.city-dropdown{
  position:absolute;top:calc(100% + 7px);left:0;z-index:60;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:6px;min-width:320px;max-height:64vh;overflow-y:auto;
}
.city-dd-head{
  font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  padding:6px 10px 8px;display:flex;justify-content:space-between;
}
.city-dd-head span{color:var(--text-light)}
.city-item{
  display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:var(--radius-sm);
  cursor:pointer;font-size:var(--text-sm);
}
.city-item .ci-name{font-weight:600;color:var(--text)}
.city-item .ci-voiv{font-size:var(--text-2xs);color:var(--muted);margin-left:auto}
.city-item:not(.locked):hover{background:var(--surface-2)}
.city-item.current{background:var(--brand-soft)}
.city-item .ci-badge{
  font-size:var(--text-2xs);font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  background:var(--c-city);color:#241a05;padding:2px 7px;border-radius:var(--radius-pill);margin-left:8px;
}
.city-item.locked{opacity:.5;cursor:not-allowed}
.city-item.locked .ci-name{color:var(--muted);font-weight:500}
.city-item.locked .ci-voiv{margin-left:auto}
.city-item .lock{fill:var(--muted);margin-left:8px;flex:0 0 auto}

.stat-bar{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
/* KPI: kolor niesie ZNACZENIE — tinty sev tylko na statach ryzyka (danger/warn
   niżej), zwykłe liczniki neutralne; 6 kolorowych boxów naraz krzyczało jednym
   głosem i rozmywało sygnał ryzyka. */
.stat{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:5px 11px;min-width:54px;text-align:center;
}
.stat .num{font-size:var(--text-lg);font-weight:700;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
.stat .lbl{font-size:var(--text-2xs);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.stat.danger{border-color:color-mix(in srgb,var(--sev-high) var(--tint-border-mix,30%),transparent);background:color-mix(in srgb,var(--sev-high) var(--tint-bg-mix,7%),var(--surface))}
.stat.warn{border-color:color-mix(in srgb,var(--sev-medium) var(--tint-border-mix,30%),transparent);background:color-mix(in srgb,var(--sev-medium) var(--tint-bg-mix,8%),var(--surface))}
.stat.danger .num{color:var(--sev-high-fg)}
.stat.warn .num{color:var(--sev-medium-fg)}

/* ── pasek narzędzi ────────────────────────────────────────────── */
.toolbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:8px 16px;background:var(--surface);border-bottom:1px solid var(--border);
}
.search-wrap{
  display:flex;align-items:center;gap:7px;
  background:var(--field);border:1px solid var(--input-border);border-radius:var(--radius-sm);
  padding:6px 10px;min-width:260px;
}
.search-wrap:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.search-wrap svg{fill:var(--muted)}
.search-wrap input{
  background:transparent;border:none;outline:none;color:var(--text);
  font-size:var(--text-sm);width:100%;
}
/* Licznik trafień wyszukiwarki („2 / 12", „5 ukr. filtrami"). */
.search-count{
  flex:0 0 auto;color:var(--muted);font-size:var(--text-2xs);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  position:relative;
  display:inline-flex;align-items:center;gap:6px;
  /* Ramka transparent (szerokość zostaje — hover jej nie przesuwa): włączony
     chip czyta się samym wypełnieniem, wyłączony to prawdziwy ghost. */
  background:var(--panel-soft);border:1px solid transparent;border-radius:var(--radius-pill);
  padding:5px 11px;font-size:var(--text-xs);color:var(--text-light);user-select:none;
  font-weight:600;
}
.chip input{display:none}
.chip .dot{width:9px;height:9px;border-radius:50%}
/* Stan wyłączony = ghost (pusty środek + wyciszona kropka), nie przekreślony
   watermark, który czyta się jak "usunięte". */
.chip.off{opacity:1;text-decoration:none;background:transparent;color:var(--muted)}
.chip.off .dot{opacity:.3}
.chip.off:hover{color:var(--text-light)}
.chip:hover{border-color:var(--brand);color:var(--text)}
.filter-label{font-size:var(--text-2xs);color:var(--muted);align-self:center;text-transform:uppercase;letter-spacing:.06em;margin:0 2px 0 6px}
.party-chip b{color:var(--text);font-variant-numeric:tabular-nums;font-weight:600;margin-left:2px}

.toggle{display:flex;align-items:center;gap:7px;font-size:var(--text-xs);color:var(--text-light);user-select:none;cursor:pointer}
.toggle input{accent-color:var(--brand);width:15px;height:15px}
#riskOnly{accent-color:var(--sev-high)}
.select-toggle select{
  background:var(--field);border:1px solid var(--input-border);color:var(--text);
  border-radius:var(--radius-sm);padding:7px 10px;min-height:34px;font-size:var(--text-xs);font-family:inherit;cursor:pointer;
}
.select-toggle select:hover{border-color:var(--brand)}
.select-toggle select:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.toolbar-spacer{flex:1}
.btn{
  background:var(--panel-soft);border:1px solid var(--border);color:var(--text-light);
  border-radius:var(--radius-sm);padding:7px 12px;font-size:var(--text-xs);min-height:34px;
}
.btn:hover{border-color:var(--brand);color:var(--text);background:var(--surface-2)}

/* ── układ główny ──────────────────────────────────────────────── */
.layout{flex:1;display:flex;min-height:0}
.graph-pane{flex:1;position:relative;min-width:0;overflow:hidden;
  background:radial-gradient(120% 120% at 50% 38%, color-mix(in srgb, var(--surface) 55%, var(--bg)) 0%, var(--bg) 68%)}
#graph{width:100%;height:100%}
/* Zasłona „wczytywanie" nad panelem grafu — ukrywa niewyśrodkowane pierwsze klatki / błysk
   starej treści przy przeładowaniu; zdejmowana przez app.js po 1. dopasowanym renderze. */
.graph-loading{
  position:absolute;inset:0;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:var(--bg);color:var(--muted);font-size:var(--text-sm);
  transition:opacity .35s ease;
}
.graph-loading.hide{opacity:0;pointer-events:none}
.graph-loading__spinner{
  width:26px;height:26px;border-radius:50%;
  border:3px solid var(--border);border-top-color:var(--brand);
  animation:graph-spin .8s linear infinite;
}
@keyframes graph-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.graph-loading__spinner{animation:none}}
.graph-hint{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  font-size:var(--text-2xs);color:var(--muted);background:color-mix(in srgb,var(--surface) 82%, transparent);
  padding:4px 12px;border-radius:var(--radius-pill);border:1px solid var(--border);
  box-shadow:var(--shadow);backdrop-filter:blur(6px);pointer-events:none;
}

/* Graf obsługuje pan/zoom/drag SAM (pointer events) — bez touch-action przeglądarka
   na dotyku przejmowała gest jako scroll i słała pointercancel, przez co click po tapie
   na węźle NIGDY nie strzelał (zaznaczanie osób martwe na mobile). Pinch-zoom grafu
   obsługuje JS (dwa pointery), więc natywny nie jest potrzebny. */
#graph{touch-action:none}

/* legenda */
.legend{
  position:absolute;top:12px;left:12px;
  background:color-mix(in srgb,var(--surface) 92%, transparent);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:10px 12px;font-size:var(--text-2xs);max-width:230px;backdrop-filter:blur(8px);box-shadow:var(--shadow);
  /* Legenda scrolluje się w panelu grafu — nie zasłania stopki z klauzulą prawną. */
  max-height:calc(100% - 24px);overflow-y:auto;overscroll-behavior:contain;
  transition:transform .25s ease, opacity .25s ease, visibility 0s linear .25s;
}
/* Zwinięta: wyjeżdża za lewą krawędź; visibility po transition (fokus nie wpada do ukrytej). */
.legend.collapsed{transform:translateX(calc(-100% - 20px));opacity:0;visibility:hidden}
.legend .legend-hide{
  position:absolute;top:6px;right:6px;width:24px;height:24px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:var(--radius-sm);color:var(--muted);cursor:pointer;font-size:14px;line-height:1;
}
.legend .legend-hide:hover{background:color-mix(in srgb,var(--text) 10%, transparent);color:var(--text)}
/* Uchwyt przy lewej krawędzi — widoczny tylko gdy legenda zwinięta. */
.legend-tab{
  position:absolute;top:12px;left:0;z-index:3;
  display:none;align-items:center;gap:6px;padding:10px 7px;
  background:color-mix(in srgb,var(--surface) 92%, transparent);border:1px solid var(--border);border-left:0;
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;box-shadow:var(--shadow);backdrop-filter:blur(8px);
  color:var(--muted);cursor:pointer;font-size:var(--text-2xs);
  writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:.08em;text-transform:uppercase;
}
.legend-tab.visible{display:inline-flex}
.legend-tab:hover{color:var(--text)}
@media (prefers-reduced-motion: reduce){
  .legend{transition:none}
}
.legend h4{margin:0 0 7px;font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.legend .row{display:flex;align-items:center;gap:8px;margin:4px 0;color:var(--text-light)}
.legend .swatch{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.legend .party-swatch{width:16px;height:16px;border-radius:50%;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.legend .edge-key{display:flex;align-items:center;gap:8px;margin:4px 0;color:var(--text-light)}
.legend .edge-key i{width:22px;height:0;border-top-width:2px;border-top-style:solid;display:inline-block}
.legend hr{border:none;border-top:1px solid var(--line);margin:8px 0}

/* ── panel boczny ──────────────────────────────────────────────── */
.side-pane{
  width:380px;flex:0 0 380px;background:var(--bg);border-left:1px solid var(--border);
  overflow-y:auto;padding:14px 14px 24px;
  /* Panel to JEDYNY scroller apki (body ma overflow:hidden) i on obsługuje pull-to-refresh
     z shared. contain = brak łańcuchowania overscrollu do dokumentu, więc system nie przerywa
     gestu własnym „gumkowaniem" w połowie ciągnięcia. */
  overscroll-behavior-y:contain;
}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.panel-head h2{font-size:var(--text-lg);margin:0;color:var(--text)}
.panel-sub{font-size:var(--text-xs);color:var(--muted)}
.panel-note{font-size:var(--text-xs);color:var(--text-light);margin:8px 0 14px;line-height:1.45}
.panel-note strong{color:var(--text)}

.flags-list{display:flex;flex-direction:column;gap:9px}
.flag-card{
  border:1px solid var(--border);border-left-width:3px;border-radius:var(--radius);
  /* Spoczynek płaski — dziesiątki kart w przewijanej liście sumowały cienie
     w szum; cień wraca na hover jako sygnał interaktywności. */
  background:var(--surface);padding:10px 12px;cursor:pointer;transition:.12s;
}
.flag-card:hover{border-color:var(--brand);box-shadow:var(--shadow)}
.flag-card.sev-high{border-left-color:var(--sev-high)}
.flag-card.sev-medium{border-left-color:var(--sev-medium)}
.flag-card.sev-low{border-left-color:var(--sev-low)}
.flag-card.sev-info{border-left-color:var(--sev-info)}
.flag-top{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.sev-badge{
  font-size:var(--text-2xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  padding:2px 7px;border-radius:var(--radius-pill);flex:0 0 auto;
}
.sev-badge.sev-high{background:color-mix(in srgb,var(--sev-high) 16%,transparent);color:var(--sev-high-fg)}
.sev-badge.sev-medium{background:color-mix(in srgb,var(--sev-medium) 18%,transparent);color:var(--sev-medium-fg)}
.sev-badge.sev-low{background:color-mix(in srgb,var(--sev-low) 20%,transparent);color:var(--sev-low-fg)}
.sev-badge.sev-info{background:color-mix(in srgb,var(--sev-info) 16%,transparent);color:var(--sev-info-fg)}
.flag-title{font-weight:600;font-size:var(--text-sm);color:var(--text)}
.flag-desc{font-size:var(--text-xs);color:var(--text-light);line-height:1.45}
.flag-legal{font-size:var(--text-2xs);color:var(--muted);margin-top:6px;font-style:italic}

/* ── zakładki panelu: Sygnały | Przewodniki ────────────────────── */
.side-tabs{display:flex;gap:4px;background:var(--panel-soft);border:1px solid var(--border);border-radius:var(--radius-pill);padding:3px;margin-bottom:14px}
.side-tabs button{position:relative;flex:1;background:transparent;border:none;color:var(--muted);padding:7px 10px;border-radius:var(--radius-pill);font-size:var(--text-sm);font-weight:var(--platform-weight-medium)}
/* Aktywna zakładka = tint + sygnatura akcentu (reguła 6). Pasek jako
   pseudo-element — inset shadow ginął w łuku pigułki (artefakt sierpa). */
.side-tabs button.on{
  background:color-mix(in srgb,var(--brand) 10%,var(--surface));
  color:var(--text);
}
.side-tabs button.on::before{
  content:"";position:absolute;left:9px;top:8px;bottom:8px;
  width:3px;border-radius:2px;background:var(--brand);
}
.side-tabs button:not(.on):hover{color:var(--text)}

/* przewodniki: lista + „nowy" */
.guide-new-btn{width:100%;margin:0 0 12px;border-style:dashed;color:var(--text-light)}
.guide-new-btn:hover{border-color:var(--brand);color:var(--text)}
.guide-card:hover{border-left-color:var(--brand)}
.guide-card{border-left-color:var(--brand-soft)}

/* przewodnik: walkthrough (krok po kroku) */
.gw-story-title{font-size:var(--text-lg);font-weight:var(--platform-weight-bold);color:var(--text);margin:2px 0 12px}
.gw-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.gw-nav .btn{padding:6px 10px;font-size:var(--text-xs)}
.gw-count{font-size:var(--text-xs);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.gw-dots{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.gw-dot{width:8px;height:8px;border-radius:50%;background:var(--border)}
.gw-dot.on{background:var(--brand)}
.gw-head{font-size:var(--text-lg);font-weight:var(--platform-weight-semibold);color:var(--text);margin-bottom:7px;line-height:1.3}
.gw-body{font-size:var(--text-sm);color:var(--text-light);line-height:1.55;white-space:pre-wrap}
.gw-src{display:inline-block;margin-top:12px;font-size:var(--text-xs);color:var(--brand)}
.gw-src:hover{text-decoration:underline}

/* przyciski właściciela na karcie historii */
.guide-own{display:flex;gap:12px;margin-top:8px}
.guide-own button{background:transparent;border:none;color:var(--muted);font-size:var(--text-2xs);padding:0;cursor:pointer}
.guide-own button:hover{color:var(--brand)}
.guide-own button[data-del]:hover{color:var(--sev-high-fg)}

/* ── edytor historii ───────────────────────────────────────────── */
.ed-head{font-size:var(--text-lg);font-weight:var(--platform-weight-bold);color:var(--text);margin:2px 0 10px}
.ed-err{color:var(--sev-high-fg);font-size:var(--text-xs);min-height:0}
.ed-err:not(:empty){margin-bottom:8px}
.ed-input,.ed-textarea{width:100%;background:var(--field);border:1px solid var(--input-border);color:var(--text);border-radius:var(--radius-sm);padding:8px 10px;font-size:var(--text-sm);font-family:inherit;margin-bottom:8px}
.ed-textarea{resize:vertical;min-height:66px;line-height:1.5}
.ed-textarea.ed-sm{min-height:44px}
.ed-input:focus-visible,.ed-textarea:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
/* Etykiety pól edytora zdaniowe (reguła 3) — wersaliki tylko dla eyebrow sekcji. */
.ed-slabel{font-size:var(--text-sm);text-transform:none;letter-spacing:0;font-weight:var(--platform-weight-semibold);color:color-mix(in srgb,var(--text) 62%,var(--muted));margin:8px 0 5px}
.ed-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.ed-tab{width:30px;height:30px;border:1px solid var(--border);background:var(--panel-soft);color:var(--text-light);border-radius:var(--radius-sm);font-size:var(--text-xs);cursor:pointer}
.ed-tab.on{background:var(--brand);border-color:var(--brand);color:var(--platform-button-ink,#fff);font-weight:600}
.ed-tab.ed-add{color:var(--muted);font-size:var(--text-md);line-height:1}
.ed-pick{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:2px 0 4px}
.ed-pick-count{font-size:var(--text-xs);color:var(--muted);font-variant-numeric:tabular-nums}
.ed-hint{font-size:var(--text-2xs);color:var(--brand-strong);background:var(--brand-soft);border-radius:var(--radius-sm);padding:6px 9px;margin:6px 0}
.ed-remove{display:block;background:transparent;border:none;color:var(--muted);font-size:var(--text-2xs);margin:10px 0 0;padding:0;cursor:pointer}
.ed-remove:hover{color:var(--sev-high-fg)}
.ed-actions{margin-top:14px}
.ed-actions .btn{width:100%}

/* węzeł zaznaczony w edytorze (bieżący krok) */
.node.pick-sel .node-body{stroke:var(--brand);stroke-width:4px}

/* karta szczegółów węzła */
.back-btn{
  background:transparent;border:none;color:var(--brand);font-size:var(--text-xs);
  padding:0;margin-bottom:10px;
}
.back-btn:hover{text-decoration:underline}
.detail-head{display:flex;align-items:center;gap:11px;margin-bottom:6px}
.detail-avatar{
  width:42px;height:42px;border-radius:var(--radius);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
}
.detail-avatar svg{width:24px;height:24px;fill:var(--surface)}
.detail-name{font-size:var(--text-md);font-weight:700;line-height:1.15;color:var(--text)}
.detail-role{font-size:var(--text-xs);color:var(--text-light)}
.detail-type-pill{
  display:inline-block;font-size:var(--text-2xs);font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;padding:2px 9px;border-radius:var(--radius-pill);margin-top:8px;
}
/* Kolor typu ustawiany inline (app.js) bywa nieczytelny na jasnym tle dla jasnych
   kolorów grup → w motywie jasnym wymuszamy --text (tint tła zostaje). W ciemnych
   motywach kolorowa etykieta jest czytelna i zostaje. */
:root:not([data-theme]) .detail-type-pill{color:var(--text)!important}
/* „Kopiuj link" — permalink węzła; dyskretny ghost obok pigułki typu. */
.copy-node-link{
  display:inline-block;margin:8px 0 0 8px;padding:2px 9px;
  background:transparent;border:1px solid var(--border);border-radius:var(--radius-pill);
  color:var(--muted);font:inherit;font-size:var(--text-2xs);font-weight:600;cursor:pointer;
  white-space:nowrap;
}
.copy-node-link:hover{border-color:var(--brand);color:var(--brand)}
.party-line{display:flex;align-items:center;gap:7px;font-size:var(--text-xs);color:var(--text-light);margin-top:10px}
.party-line .dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.party-line strong{color:var(--text)}
.region-line .pin-i{fill:var(--c-city-fg);flex:0 0 auto}
.region-line strong{color:var(--c-city-fg)}

/* Tytuł sekcji karty z krótkim akcentem zamiast pełnej kreski (reguła 1). */
.section-title{
  position:relative;
  font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
  margin:16px 0 7px;padding-bottom:9px;
}
.section-title::after{
  content:"";position:absolute;left:0;bottom:0;
  width:32px;height:2px;border-radius:2px;
  background:color-mix(in srgb,var(--brand) 70%,transparent);
}
.kv{display:flex;justify-content:space-between;gap:12px;font-size:var(--text-xs);padding:3px 0}
.kv .k{color:var(--text-light)}
.kv .v{text-align:right;font-variant-numeric:tabular-nums;color:var(--text)}

.source-box{
  background:var(--panel-soft);border:1px solid var(--border);border-radius:var(--radius);
  padding:9px 11px;font-size:var(--text-xs);margin-top:4px;
}
.source-method{display:flex;align-items:center;gap:7px;font-weight:600;color:var(--text)}
/* Miernik pewności wg standardu (8px, pigułka, tor tintowany); kolor
   wypełnienia ustawia app.js (semantyka pewności — nie ruszać). */
.conf-bar{height:8px;border-radius:var(--radius-pill,999px);background:color-mix(in srgb,var(--brand) 9%,var(--panel-soft));margin:8px 0 4px;overflow:hidden}
.conf-fill{height:100%;border-radius:inherit}
.review-flag{
  display:inline-flex;align-items:center;gap:5px;font-size:var(--text-2xs);font-weight:600;
  color:var(--sev-medium-fg);margin-top:3px;
}
.review-flag svg{fill:var(--sev-medium-fg)}

.asset-row{
  display:flex;justify-content:space-between;gap:10px;font-size:var(--text-xs);
  padding:5px 0;border-bottom:1px dashed var(--line);
}
.asset-row:last-child{border-bottom:none}
.asset-row .desc{color:var(--text)}
.asset-row .meta{color:var(--muted);font-size:var(--text-2xs)}
.asset-row .val{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--text-light)}
.muted{color:var(--muted);font-style:italic}

.conn-row{
  display:flex;align-items:center;gap:8px;font-size:var(--text-xs);padding:5px 0;cursor:pointer;
  border-bottom:1px dashed var(--line);
}
.conn-row:last-child{border-bottom:none}
.conn-row:hover .conn-name{color:var(--brand)}
.conn-row .conn-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.conn-rel{color:var(--muted);font-size:var(--text-2xs);margin-left:auto;text-align:right}

.detail-flags .flag-card{cursor:default}
.detail-flags .flag-card:hover{box-shadow:none;border-color:var(--border)}

.notes-box{
  background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 25%,transparent);
  border-radius:var(--radius);padding:8px 10px;font-size:var(--text-xs);color:var(--text-light);margin-top:6px;line-height:1.45;
}
.pdf-link{
  display:inline-block;margin-top:8px;font-size:var(--text-xs);color:var(--brand);
  text-decoration:none;border:1px solid var(--border);border-radius:var(--radius);padding:6px 11px;
}
.pdf-link:hover{border-color:var(--brand);background:var(--brand-soft)}
.cross-region{margin-top:10px;border:1px solid color-mix(in srgb,var(--c-city) 30%,transparent);border-radius:var(--radius);padding:8px 11px;background:color-mix(in srgb,var(--c-city) 6%,transparent)}
.cr-head{font-size:var(--text-2xs);color:var(--c-city-fg);font-weight:600;margin-bottom:6px;line-height:1.35}
.cr-link{display:block;font-size:var(--text-xs);color:var(--brand);text-decoration:none;padding:3px 0}
.cr-link:hover{text-decoration:underline}

/* ── stopka ────────────────────────────────────────────────────── */
.app-footer{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:7px 16px;background:var(--surface);border-top:1px solid var(--border);
  font-size:var(--text-2xs);color:var(--muted);
}
.app-footer strong{color:var(--text-light)}
.footer-sep{color:var(--line)}

/* ── elementy grafu (SVG) — theme-aware ────────────────────────── */
.edge{stroke-opacity:.55;fill:none}
.edge.flagged{stroke:var(--sev-high);stroke-opacity:.9}
.edge.dim{stroke-opacity:.07}
.edge-label{fill:var(--muted);font-size:10px;pointer-events:none}
.edge-label.hidden{display:none}

.node{cursor:pointer}
/* obrys „wycina" węzeł z tła sceny — kolor sceny (--surface) w każdym motywie */
.node .node-body{stroke:var(--surface);stroke-width:1.5}
.node .node-ring{fill:none;stroke-width:2.5;opacity:0}
.node.flagged .node-ring{opacity:1}
.node .node-label{
  fill:var(--text);font-size:10.5px;text-anchor:middle;pointer-events:none;
  paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round;
}
.node .node-icon{pointer-events:none}
.node .node-party-code{pointer-events:none;user-select:none;font-family:inherit;letter-spacing:-.3px}
.node .node-party-logo{pointer-events:none}
.node.dim{opacity:.18}
.node.selected .node-body{stroke:var(--text);stroke-width:2.5}
.node.search-hit .node-body{stroke:var(--brand);stroke-width:3}
/* osoby powiązane rodzinnie (krewni) — obrys przerywany, róż (semantyczny) */
.node.kin .node-body{stroke:#ff7aa8;stroke-width:1.6;stroke-dasharray:3 2.5}
.node.kin .node-icon{opacity:.6}
.node .region-pin{fill:var(--c-city);stroke:var(--surface);stroke-width:.7}
.node.dim .region-pin{opacity:.18}

/* Glass: tło-obraz jest jasne+overlay — halo/obrys w --surface (translucent) za słabe.
   Mocniejszy kontrast: biała etykieta z ciemnym halo, ciemny obrys węzła, przezroczysta scena. */
:root[data-theme="glass"] .graph-pane{background:transparent}
:root[data-theme="glass"] .node .node-label{fill:#fff;stroke:rgba(0,0,0,.6)}
:root[data-theme="glass"] .node .node-body{stroke:rgba(0,0,0,.45)}

/* Fokus klawiaturowy: miękki ring akcentu (reguła 10) — JEDNA receptura
   dla kontrolek klikalnych (pola tekstowe mają border+ring 3px 18%). */
.btn:focus-visible,
.chip:focus-visible,
.copy-node-link:focus-visible,
.city-pill:focus-visible,
.side-tabs button:focus-visible,
.flag-card:focus-visible,
.conn-row:focus-visible,
.back-btn:focus-visible,
.guide-own button:focus-visible,
.pdf-link:focus-visible{
  outline:2px solid color-mix(in srgb,var(--brand) 40%,transparent);
  outline-offset:2px;
}

@media (max-width:920px){
  .side-pane{width:320px;flex-basis:320px}
  /* KPI śledcze zostają — kompaktowy, przewijany pasek zamiast display:none. */
  .app-header{flex-wrap:wrap;gap:10px}
  .stat-bar{display:flex;width:100%;margin-left:0;flex-wrap:nowrap;overflow-x:auto;gap:6px;scrollbar-width:thin}
  .stat{flex:0 0 auto;padding:4px 9px;min-width:0}
  .stat .num{font-size:var(--text-md)}
}

/* Mobile: stack — graf pełną szerokością na górze, panel sygnałów pod nim
   (dwukolumnowy flex zgniatał graf do paska, a nakładki lądowały na panelu). */
@media (max-width:720px){
  .layout{flex-direction:column}
  .graph-pane{flex:0 0 52vh;min-height:300px}
  .side-pane{width:100%;flex:1 1 auto;border-left:0;border-top:1px solid var(--border)}
  .legend{max-width:46%;font-size:var(--text-2xs)}
  .toolbar{flex-wrap:nowrap;overflow-x:auto;gap:10px;padding:8px 12px;scrollbar-width:thin}
  .toolbar>*{flex:0 0 auto}
  .filters{flex-wrap:nowrap}
  .search-wrap{min-width:180px}
  .toggle span{white-space:nowrap}
  .demo-banner{font-size:var(--text-2xs);padding:6px 12px}
  /* Klamra 2 linii + rozwinięcie tapnięciem — klauzula prawna nie może być
     ucięta bez dostępu do pełnej treści. */
  .demo-banner span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
  .demo-banner span.expanded{display:block;-webkit-line-clamp:unset;overflow:visible}
}

/* Dymek o myszy nie ma sensu na dotyku i wąskich ekranach. */
@media (hover:none), (max-width:720px){
  .graph-hint{display:none}
}

/* ── otwartość: wspólni ludzie / zgłoszenia / otwarte dane ─────────── */
.footer-link{color:var(--brand);text-decoration:none}
.footer-link:hover{text-decoration:underline}
.il-names{font-size:var(--text-2xs);color:var(--muted);margin:-2px 0 7px 21px;line-height:1.45}
.flag-report{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
.fr-btn{background:none;border:1px solid var(--border);border-radius:var(--radius);padding:7px 12px;font:inherit;font-size:var(--text-xs);color:var(--text-light);cursor:pointer}
.fr-btn:hover{border-color:var(--sev-medium);color:var(--text)}
.fr-form{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.fr-form textarea{min-height:84px;resize:vertical}
.fr-form textarea,.fr-form input{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:8px 10px;font:inherit;font-size:var(--text-xs);color:var(--text)}
.fr-row{display:flex;align-items:center;gap:10px}
/* CTA „Wyślij zgłoszenie" = kanon .platform-button--primary (kit); klasa
   .fr-send zostaje w markupie WYŁĄCZNIE jako hak JS (querySelector). */
.fr-note{font-size:var(--text-2xs);color:var(--muted)}
.fr-done{margin-top:10px;font-size:var(--text-xs);color:var(--c-municipal-fg)}
/* Modal = kanon .platform-modal (kit): overlay/panel/close ze shared.
   .od-box zostaje dla styli TREŚCI (h3/h4) i haka JS zamykania (.od-close). */
.od-box h3{margin:0 56px 10px 0}   /* prawy margines pod close 38px z kitu */
.od-box h4{margin:18px 0 8px;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.od-lic{font-size:var(--text-sm);color:var(--text-light);line-height:1.5}
.od-lic a{color:var(--brand)}
.od-dl{margin-right:12px}   /* wygląd = .platform-button--primary; tu tylko odstęp od statystyki */
.od-stat{font-size:var(--text-xs);color:var(--muted)}
.od-log{display:flex;flex-direction:column;gap:10px}
.od-entry{font-size:var(--text-xs);color:var(--text-light);border-left:3px solid var(--line);padding-left:10px}
.od-diff{font-size:var(--text-2xs);color:var(--muted);margin-top:2px}
.od-rm{opacity:.8}

/* ── „Do przeglądu”: przycisk z licznikiem + modal listy oświadczeń ─────── */
.btn-review{display:inline-flex;align-items:center;gap:6px}
.btn-review svg{fill:currentColor;flex:0 0 auto;opacity:.85}
.btn-review .review-count{background:var(--surface-2);color:var(--muted);border-radius:999px;
  padding:1px 7px;font-size:var(--text-2xs);font-weight:600;min-width:19px;text-align:center;line-height:1.5}
.btn-review.has-review{border-color:color-mix(in srgb,var(--sev-medium-fg) 55%,var(--border))}
.btn-review.has-review .review-count{background:var(--sev-medium);color:#241a05}
.rev-box{width:min(640px,100%)}
.rev-search{width:100%;box-sizing:border-box;background:var(--panel-soft);border:1px solid var(--border);
  color:var(--text);border-radius:var(--radius-sm);padding:7px 10px;font-size:var(--text-sm);margin:2px 0 6px}
.rev-search:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.rev-list{display:flex;flex-direction:column;gap:1px;margin:4px 0 2px;max-height:38vh;overflow:auto}
.rev-item{display:flex;align-items:center;gap:10px;justify-content:space-between;
  padding:7px 9px;border-radius:8px;border:1px solid transparent}
.rev-item:hover{background:var(--surface-2);border-color:var(--border)}
.rev-main{display:flex;flex-direction:column;gap:1px;min-width:0}
.rev-name{font-weight:700;font-size:var(--text-sm);color:var(--text)}
.rev-role{font-size:var(--text-2xs);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rev-reason{font-size:var(--text-2xs);color:var(--sev-medium-fg);margin-top:1px}
.rev-open{flex:0 0 auto;font-size:var(--text-xs);color:var(--brand);text-decoration:none;white-space:nowrap;font-weight:600}
.rev-open:hover{text-decoration:underline}
.rev-nopdf{flex:0 0 auto;font-size:var(--text-2xs);color:var(--muted)}
/* „Kontrola" = kanon .platform-button--primary; .rev-control zostaje jako hak JS. */
.rev-control{flex:0 0 auto}
.btn-review.admin-mode .review-count::after{content:" ●";color:var(--sev-medium-fg);font-size:var(--text-2xs)}

/* ── Popup KONTROLI: split PDF | edytowalne sekcje ─────────────────────── */
/* Overlay/panel/close z kitu (.platform-modal*); tu tylko geometria splitu. */
.ctrl-overlay{padding:14px}
.ctrl-box{width:min(1180px,100%);height:92vh;max-height:none;display:flex;flex-direction:column;
  padding:0;overflow:hidden}
.ctrl-head{display:flex;align-items:baseline;gap:14px;padding:14px 60px 10px 18px;border-bottom:1px solid var(--border)}   /* prawy padding pod close 38px z kitu */
.ctrl-head h3{margin:0;font-size:var(--text-md)}
.ctrl-status{font-size:var(--text-xs);color:var(--muted)}
.ctrl-status b{color:var(--text)}
.ctrl-corr{color:var(--sev-medium-fg)}
.ctrl-split{flex:1;display:grid;grid-template-columns:1fr 1fr;min-height:0}
@media(max-width:820px){.ctrl-split{grid-template-columns:1fr;overflow:auto}}
.ctrl-pdf{border-right:1px solid var(--border);background:var(--surface-2);min-height:0}
.ctrl-pdf iframe{width:100%;height:100%;border:0;display:block}
@media(max-width:820px){.ctrl-pdf{height:46vh}}
.ctrl-form{overflow:auto;padding:14px 18px 20px}
.ctrl-form h4{margin:16px 0 7px;font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  display:flex;align-items:center;gap:10px}
.ctrl-form h4:first-of-type{margin-top:4px}
.ctrl-hint{font-size:var(--text-xs);color:var(--text-light);line-height:1.5;margin:0 0 4px}
.uncertain-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--sev-medium);
  vertical-align:middle;box-shadow:0 0 0 2px color-mix(in srgb,var(--sev-medium) 30%,transparent)}
.ctrl-field{display:flex;flex-direction:column;gap:3px;margin-bottom:8px}
.ctrl-field>span{font-size:var(--text-2xs);color:var(--muted)}
.ctrl-field input,.ctrl-field textarea,.ctrl-row input{background:var(--panel-soft);border:1px solid var(--border);
  color:var(--text);border-radius:var(--radius-sm);padding:6px 9px;font-size:var(--text-sm);font-family:inherit;width:100%;box-sizing:border-box}
.ctrl-field textarea{resize:vertical;min-height:36px}
.ctrl-field.uncertain input{border-color:var(--sev-medium);background:color-mix(in srgb,var(--sev-medium) 8%,var(--panel-soft))}
.ctrl-field input:focus-visible,.ctrl-field textarea:focus-visible,.ctrl-row input:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.ctrl-row{display:flex;gap:6px;align-items:center;margin-bottom:5px}
.ctrl-row.uncertain{padding:4px;border-radius:8px;background:color-mix(in srgb,var(--sev-medium) 8%,transparent)}
.ctrl-row .cp-org,.ctrl-row .cs-comp{flex:2}
.ctrl-row .cp-role,.ctrl-row .cs-count,.ctrl-row .cs-val{flex:1}
.cp-paid{flex:0 0 auto;display:flex;align-items:center;gap:3px;font-size:var(--text-2xs);color:var(--muted);white-space:nowrap}
/* Kasowanie pozycji = kanon .icon-button--sm (kit 30×30); tu tylko kolor+hak JS. */
.ctrl-del{flex:0 0 auto;color:var(--muted);font-size:var(--text-md);line-height:1}
.ctrl-del:hover{border-color:var(--sev-high-fg);color:var(--sev-high-fg)}
.ctrl-add{background:var(--surface-2);border:1px solid var(--border);color:var(--brand);border-radius:6px;
  padding:2px 9px;font-size:var(--text-2xs);cursor:pointer;font-weight:600;text-transform:none;letter-spacing:0}
.ctrl-actions{display:flex;align-items:center;gap:12px;margin-top:16px;position:sticky;bottom:0;
  background:var(--surface);padding:10px 0 2px;border-top:1px solid var(--border)}
/* Zapis kontroli = kanon .platform-button--primary (kit). */
.ctrl-msg{font-size:var(--text-xs);color:var(--text-light)}

/* ── historie: wyróżnienie / embed / karta relacji ─────────────────── */
.guide-star{color:var(--c-city);font-size:var(--text-sm)}
#graph .edge{cursor:pointer}
.gw-full{margin-left:10px;font-weight:600}
.embed-mode .demo-banner,.embed-mode .app-header,.embed-mode .toolbar,
.embed-mode .app-footer,.embed-mode #sideTabs,.embed-mode .kropki-platform-header,
.embed-mode #legend,.embed-mode #guideNew,.embed-mode #guideBack{display:none!important}

/* ── wymiar czasu na krawędzi ─────────────────────────────────────── */
.edge-period{display:flex;align-items:center;gap:6px;font-size:var(--text-xs);color:var(--text-light);margin-top:8px}
.edge-period svg{fill:var(--muted);flex:0 0 auto}
.conn-now{color:var(--c-municipal-fg);font-weight:900;margin-right:3px}

/* ── posady na odległość (cross-region) ───────────────────────────── */
.xregion{margin:14px 0;border:1px solid color-mix(in srgb,var(--sev-medium) 45%,transparent);border-radius:var(--radius);background:color-mix(in srgb,var(--sev-medium) 8%,transparent);padding:11px 12px}
.xregion-head{font-size:var(--text-sm);font-weight:600;color:var(--sev-medium-fg);margin-bottom:5px}
.xregion-sub{font-size:var(--text-2xs);color:var(--text-light);line-height:1.5;margin-bottom:9px}
.xregion-link{display:block;text-decoration:none;border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 10px;margin-top:6px;background:var(--surface)}
.xregion-link:hover{border-color:var(--brand)}
.xregion-city{font-weight:600;color:var(--text)}
.xregion-voiv{font-size:var(--text-2xs);color:var(--muted);margin-left:6px}
.xregion-role{font-size:var(--text-2xs);color:var(--text-light);margin-top:2px}

/* ── potwierdzenie posady na odległość z oświadczenia (Etap 3) ────── */
.xregion-confirm{margin:6px 0 4px;padding:8px 10px;border-left:3px solid var(--c-municipal);background:color-mix(in srgb,var(--c-municipal) 7%,transparent);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.xc-head{font-size:var(--text-2xs);font-weight:600;color:var(--c-municipal-fg);margin-bottom:5px}
.xc-seat{font-size:var(--text-2xs);color:var(--text-light);padding:2px 0;line-height:1.4}
.xc-co{font-weight:600;color:var(--text)}
.xc-role{color:var(--muted);margin-left:5px}
.xc-serial{font-size:var(--text-2xs);color:var(--sev-medium-fg);margin-top:6px;font-weight:600}
/* karta węzła: cross-region POTWIERDZONY (korroboracja lub kontrola admina) = zielono, nie amber */
.xregion.confirmed{border-color:color-mix(in srgb,var(--c-municipal) 45%,transparent);background:color-mix(in srgb,var(--c-municipal) 8%,transparent)}
.xregion.confirmed .xregion-head{color:var(--c-municipal-fg)}
/* reguła BAZY: prawdopodobne miejsce zamieszkania (baza = codzienna praca/mandat, nie fotel-Rada) */
.xregion-home{margin:9px 0 2px;padding:8px 10px;border-left:3px solid var(--c-voiv);background:color-mix(in srgb,var(--c-voiv) 7%,transparent);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:var(--text-2xs);color:var(--text-light);line-height:1.5}
.xregion-home strong{color:var(--text)}
.xregion-home em{color:var(--muted);font-style:italic}
/* fotele w organach spółek publicznych (rejestr.io, de-mask KRS) — interlock/patronaż + czas */
.rejestr-seats{margin:14px 0;border:1px solid color-mix(in srgb,var(--c-municipal) 40%,transparent);border-radius:var(--radius);background:color-mix(in srgb,var(--c-municipal) 6%,transparent);padding:10px 12px}
.rs-head{font-size:var(--text-sm);font-weight:600;color:var(--c-municipal-fg);margin-bottom:6px}
.rs-src{font-size:var(--text-2xs);font-weight:600;background:color-mix(in srgb,var(--c-municipal) 18%,transparent);color:var(--c-municipal-fg);border-radius:10px;padding:1px 7px;margin-left:6px;vertical-align:middle;cursor:help}
.rs-grp{font-size:var(--text-2xs);font-weight:600;color:var(--text-light);text-transform:uppercase;letter-spacing:.03em;margin:8px 0 3px}
.rs-grp-ex{color:var(--muted)}
.rs-seat{padding:5px 0;border-top:1px solid var(--border);font-size:var(--text-xs)}
.rs-seat:first-of-type{border-top:none}
.rs-seat.ex{opacity:.72}
.rs-org{font-weight:600;color:var(--text)}
.rs-meta{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin-top:1px}
.rs-role{font-size:var(--text-2xs);color:var(--text-light)}
.rs-ex{font-size:var(--text-2xs);font-weight:600;color:var(--sev-medium-fg);background:color-mix(in srgb,var(--sev-medium) 16%,transparent);border-radius:8px;padding:0 6px}
.rs-when{font-size:var(--text-2xs);color:var(--muted);margin-left:auto}
.rs-note{margin-top:8px;font-size:var(--text-2xs);color:var(--muted);line-height:1.45}
.rs-note em{font-style:italic}

/* ── Kolejka kontroli cross-region (panel „Do przeglądu", tryb admina) ── */
.xr-review-section{margin:8px 0 4px;border-top:1px solid var(--border);padding-top:12px}
.xrq-item{border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 11px;margin:8px 0;background:var(--surface)}
.xrq-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.xrq-name{font-weight:600;color:var(--text);font-size:var(--text-sm)}
.xrq-src{font-size:var(--text-2xs);color:var(--muted)}
.xrq-common{font-size:var(--text-2xs);font-weight:600;color:var(--sev-high-fg);background:color-mix(in srgb,var(--sev-high) 14%,transparent);padding:1px 6px;border-radius:8px}
.xrq-reason{font-size:var(--text-2xs);color:var(--text-light);line-height:1.45;margin:5px 0 3px}
.xrq-link{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap;border-top:1px dashed var(--border);padding:7px 0 3px;margin-top:6px}
.xrq-link-main{flex:1 1 200px;min-width:0}
.xrq-city{font-weight:600;color:var(--text);font-size:var(--text-xs)}
.xrq-voiv{font-size:var(--text-2xs);color:var(--muted);margin-left:5px}
.xrq-bip{font-size:var(--text-2xs);color:var(--brand);text-decoration:none;margin-left:6px;white-space:nowrap}
.xrq-bip:hover{text-decoration:underline}
.xrq-role{font-size:var(--text-2xs);color:var(--text-light);margin-top:2px}
.xrq-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto;flex-wrap:wrap}
.xrq-badge{font-size:var(--text-2xs);font-weight:600;padding:2px 7px;border-radius:8px}
.xrq-badge.ok{color:var(--c-municipal-fg);background:color-mix(in srgb,var(--c-municipal) 14%,transparent)}
.xrq-badge.no{color:var(--sev-high-fg);background:color-mix(in srgb,var(--sev-high) 14%,transparent)}
.xrq-badge.pend{color:var(--sev-medium-fg);background:color-mix(in srgb,var(--sev-medium) 16%,transparent)}
.xrq-btn{font-size:var(--text-2xs);font-weight:600;border:1px solid var(--border);background:var(--surface-2);color:var(--text);border-radius:var(--radius-sm);padding:4px 10px;cursor:pointer}
.xrq-btn.ok:hover{border-color:var(--c-municipal);color:var(--c-municipal-fg)}
.xrq-btn.no:hover{border-color:var(--sev-high);color:var(--sev-high-fg)}
.xrq-btn.undo{color:var(--muted);padding:4px 8px}
.xrq-btn:disabled{opacity:.5;cursor:default}
.xrq-saving{font-size:var(--text-2xs);color:var(--text-light)}
.xrq-err{font-size:var(--text-2xs);color:var(--sev-high-fg)}

/* ── Cross-region: satelitarne bańki innych województw (mleczna krawędź + akcent bursztynowy) ── */
.xr-bg{fill:rgba(196,210,238,.085);filter:blur(9px)}
.xr-ring{fill:rgba(196,210,238,.025);stroke:color-mix(in srgb,var(--xr-accent) 42%,transparent);stroke-width:1.3}
.xr-label-bg{fill:var(--xr-accent)}
.xr-label{fill:#fff;font-size:12px;font-weight:700;letter-spacing:.02em}
.xr-worklink{stroke:rgba(150,170,200,.55);stroke-width:1.4;stroke-dasharray:2 3}   /* „pracuje w" */
/* tożsamość NIEpotwierdzona (needsReview) → styl wyciszony na REALNYM markupie
   baniek (g.node.xr-node z paintNodeCore); stare selektory .xr-person*/.xr-inst*
   celowały w markup sprzed przejścia baniek na paintNodeCore — usunięte. */
.xr-node.review .node-body{stroke:var(--xr-review-muted);stroke-dasharray:3 2.6;stroke-width:1.6}
.xr-review-tag{fill:var(--xr-review-ink);font-size:10px;font-weight:700;letter-spacing:.02em}
.xr-edge.review{stroke:var(--xr-review-muted);opacity:.42;stroke-dasharray:2 4}
.xr-km-bg.review{fill:var(--xr-review-km)}
.xr-name{fill:var(--text,#e7ebf1);font-size:11px;font-weight:600}
.xr-name.a{fill:var(--xr-person-ink)}
.xr-ent{fill:var(--text,#cfd6e0);font-size:10px;font-weight:500}
.xr-edge{fill:none;stroke:var(--xr-accent);stroke-width:1.5;stroke-dasharray:5 4;opacity:.72}
.xr-km-bg{fill:var(--xr-accent)}
/* link rodzinny/małżeński bańka↔bańka (Madziarowie) — fioletowy, odróżnia od bursztynowych strzałek do encji */
.xr-spouse{fill:none;stroke:var(--xr-spouse-accent);stroke-width:1.6;stroke-dasharray:1 4;stroke-linecap:round;opacity:.8}
.xr-spouse-bg{fill:var(--xr-spouse-bg)}
.xr-spouse-lbl{fill:#fff;font-size:10px;font-weight:700;letter-spacing:.02em}
/* zaznaczanie ujednolicone z grafem: wyciszenie elementów bańki spoza ego wybranego węzła */
.xr-layer .dim{opacity:.16;transition:opacity .15s}
.xr-node{transition:opacity .15s}
.xr-km{fill:#fff;font-size:10px;font-weight:700}