/* Plansza IX — Genealogia ustaw (prawo kopiuj-wklej) */

/* płótno przewija się w pionie: rodzin jest więcej, niż mieści ekran; oś czasu zostaje przyklejona u góry */
.scroller { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
.scroller:focus { outline: none; }
.axis-svg { position: sticky; top: 0; z-index: 2; display: block; width: 100%; height: 34px; background: var(--ground); }
.axis-svg .tick text { fill: var(--ink-muted); font-family: var(--sans); font-size: 11px; }
.axis-svg .tick line { stroke: var(--rule); }
.axis-svg .cap { fill: var(--ink-faint); font-family: var(--sans); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; }
#river { display: block; width: 100%; }

/* siatka dekad i pasy rodzin */
#river .decade line { stroke: rgba(36, 45, 61, 0.5); }
#river .band rect.bg { fill: transparent; transition: fill 0.2s; }
#river .band:hover rect.bg, #river .band.hot rect.bg { fill: rgba(20, 26, 38, 0.6); }
#river .band.sel rect.bg { fill: var(--brass-soft); }
#river .band line.sep { stroke: var(--rule); stroke-opacity: 0.7; }
#river .band .name { font-family: var(--serif); font-size: 12.5px; fill: var(--paper); cursor: pointer; }
#river .band .sub { font-family: var(--sans); font-size: 10px; fill: var(--ink-muted); }
#river .band.sel .name { fill: var(--brass); }
#river .band .hit-label { fill: transparent; cursor: pointer; }
#river .band .hit-label:focus-visible { outline: none; stroke: var(--brass); stroke-width: 1.5; }
#river .band.dim { opacity: 0.22; }
#river .band { transition: opacity 0.25s; }

/* łuki */
#river .edge path.line { fill: none; stroke: var(--paper); stroke-opacity: 0.42; stroke-linecap: round; transition: stroke-opacity 0.2s; }
#river .edge path.hit { fill: none; stroke: transparent; stroke-width: 12px; cursor: pointer; }
#river .edge path.hit:focus-visible { outline: none; stroke: var(--brass-soft); }
#river .edge.lit path.line, #river .edge:hover path.line { stroke: var(--brass); stroke-opacity: 1; }
#river .edge.sel path.line { stroke: var(--brass); stroke-opacity: 1; }
#river .edge.off path.line { stroke-opacity: 0.12; }

/* ustawy */
#river .node circle.core { fill: var(--ground-lift); stroke: var(--paper); stroke-width: 1.2; cursor: pointer; transition: fill 0.2s, stroke 0.2s; }
#river .node.lit circle.core, #river .node:hover circle.core { stroke: var(--brass); fill: var(--brass-soft); }
#river .node.sel circle.core { fill: var(--brass); stroke: var(--brass); }
#river .node circle.core:focus-visible { outline: none; stroke: var(--brass); stroke-width: 2.4; }
#river .node text {
  font-family: var(--serif); font-size: 11px; fill: var(--ink-muted); pointer-events: none;
  paint-order: stroke; stroke: var(--ground); stroke-width: 3px; stroke-linejoin: round;
}
#river .node.lit text, #river .node.sel text { fill: var(--brass); }
#river .node.off { opacity: 0.35; }
#river .node.off text { opacity: 0; }

/* wyszukiwarka u góry płótna (jak na planszy I) */
.search { position: absolute; left: 14px; top: 2px; z-index: 6; width: 164px; }
.search input { width: 100%; background: rgba(8, 11, 17, 0.9); padding: 5px 10px; }
.sugg { width: 360px; }
.sugg {
  list-style: none; margin: 4px 0 0; padding: 4px 0; max-height: 320px; overflow-y: auto;
  background: var(--ground-deep); border: 1px solid var(--rule); border-radius: 3px;
}
.sugg li { padding: 6px 12px; cursor: pointer; font-size: var(--t-sm); display: flex; gap: 10px; align-items: baseline; }
.sugg li b { font-family: var(--serif); font-weight: 500; white-space: nowrap; }
.sugg li span { color: var(--ink-muted); font-size: var(--t-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sugg li[aria-selected="true"], .sugg li:hover { background: var(--ground-lift); }
.sugg li[aria-selected="true"] b { color: var(--brass); }

/* sterowanie u dołu: żetony wybranych rodzin + legenda; tło, żeby nie zlewało się z przewijaną treścią */
.controls { flex-direction: column; align-items: flex-start; gap: 8px; left: 0; right: 0; bottom: 0; padding: 12px 24px 14px; background: linear-gradient(rgba(11, 15, 23, 0), var(--ground) 38%); }
.controls .row { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.chips button { font-size: var(--t-xs); padding: 4px 10px; border-radius: 999px; background: rgba(20, 26, 38, 0.9); }
.chips button b { font-family: var(--serif); font-weight: 500; font-size: var(--t-sm); }
.chips button span { color: var(--ink-muted); margin-left: 6px; }
.chips button[aria-pressed="true"] span { color: var(--ground); }
.chips .lbl { font-size: var(--t-xs); color: var(--ink-faint); margin-right: 2px; }
.key i.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ground-lift); border: 1px solid var(--paper); }
.key i.arc { width: 16px; height: 7px; border-radius: 0 0 0 0; border-top: 2px solid var(--paper); border-radius: 8px 8px 0 0; background: none; opacity: 0.8; }
button.ghost { background: transparent; color: var(--ink-muted); }
button.ghost:hover { color: var(--paper); }

/* panel */
.panel .back { background: none; border: 0; padding: 0; color: var(--ink-muted); text-decoration: underline; text-underline-offset: 3px; font-size: var(--t-sm); margin-bottom: 14px; }
.panel .back:hover { color: var(--brass); }
.panel h2.long { font-size: var(--t-lg); line-height: 1.25; }
.panel .sub { color: var(--ink-muted); font-size: var(--t-sm); margin: 4px 0 0; line-height: 1.4; }
.panel .hero { display: flex; gap: 10px; align-items: baseline; margin: 14px 0 4px; flex-wrap: wrap; }
.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 .stats { display: grid; grid-template-columns: repeat(3, auto); gap: 4px 18px; margin: 18px 0 4px; }
.panel .stats b { font-family: var(--serif); font-size: var(--t-xl); font-weight: 500; display: block; line-height: 1.1; }
.panel .stats span { font-size: var(--t-xs); color: var(--ink-muted); }
.panel .rows li .k { display: flex; align-items: baseline; gap: 8px; min-width: 0; line-height: 1.3; }
.panel .rows li .k small { color: var(--ink-faint); font-size: var(--t-xs); white-space: nowrap; }
.panel .rows li .k .y { color: var(--ink-muted); font-variant-numeric: tabular-nums; flex: 0 0 2.6em; }
.panel .rows li .k b { font-weight: 500; }
.panel .rows li.hot, .panel .rows li.hot .k .y { color: var(--brass); }
.panel .rows li .arrow { color: var(--ink-faint); margin: 0 4px; }
.panel .note { font-size: var(--t-xs); color: var(--ink-faint); margin-top: 8px; line-height: 1.45; }
.panel .same { font-size: var(--t-xs); color: var(--ink-faint); font-style: italic; }

/* porównanie tekstów: dwie kolumny, różnice słowo po słowie */
.pair { margin-top: 18px; border-top: 1px solid var(--rule); padding-top: 10px; }
.pair-h { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; font-family: var(--serif); font-size: var(--t-md); }
.pair-h > span:first-child { white-space: nowrap; }
.pair-h .v { color: var(--ink-muted); font-family: var(--sans); font-size: var(--t-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pair-h .v em { color: var(--brass); font-style: normal; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.col h5 { margin: 0 0 4px; font-family: var(--sans); font-weight: 400; font-size: var(--t-xs); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.col p { font-size: 12px; line-height: 1.45; color: var(--paper); margin: 0; hyphens: auto; overflow-wrap: anywhere; }
.col .del { background: rgba(248, 113, 113, 0.22); color: #fca5a5; text-decoration: line-through; text-decoration-color: rgba(252, 165, 165, 0.7); border-radius: 2px; padding: 0 1px; }
.col .ins { background: var(--brass-soft); color: var(--brass); border-radius: 2px; padding: 0 1px; }
.diff-key { display: flex; gap: 14px; font-size: var(--t-xs); color: var(--ink-muted); margin-top: 10px; }
.diff-key .del, .diff-key .ins { padding: 0 4px; border-radius: 2px; }
.diff-key .del { background: rgba(248, 113, 113, 0.22); color: #fca5a5; text-decoration: line-through; }
.diff-key .ins { background: var(--brass-soft); color: var(--brass); }

@media (max-width: 1200px) {
  .key span:last-child { display: none; }
}
@media (max-width: 900px) {
  .sugg { width: calc(100vw - 40px); }
  .controls { padding: 10px 16px 12px; }
}

/* znak Lexedit: prawy górny róg zajęty — na dół */
.atlas-mark { top: auto; bottom: 14px; z-index: 30; }