/* Plansza XI — Złożoność prawa. Linter dla ustaw w skórce cyjanotypii (atlas.css). */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.canvas [hidden] { display: none !important; }

/* pasek widoków u góry płótna */
.viewbar {
  position: absolute; left: 24px; right: 24px; top: 12px; z-index: 6;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.viewbar .find { margin-left: auto; }
.viewbar .find input { width: min(260px, 60vw); }
@media (max-width: 1200px) { .viewbar .find input { width: 190px; } }

/* ---------- mapa ustaw (scatter) ---------- */
#scatter { cursor: crosshair; }
#scatter .dot { stroke: var(--ground); stroke-width: 0.6; }
#scatter .dot.dim { opacity: 0.25; }
#scatter .dot.hover { stroke: var(--paper); stroke-width: 1.5; }
#scatter .dot.sel { stroke: var(--brass); stroke-width: 2.5; }
#scatter .lbl { fill: var(--ink-muted); font-family: var(--serif); font-size: 12px; pointer-events: none; paint-order: stroke; stroke: var(--ground); stroke-width: 3px; stroke-linejoin: round; }
#scatter .lbl.sel { fill: var(--brass); font-size: 14px; }
#scatter .axis-title { fill: var(--ink-muted); font-family: var(--serif); font-size: 13px; }
#scatter .median line { stroke: var(--ink-faint); stroke-dasharray: 2 4; }
#scatter .median text { fill: var(--ink-faint); font-family: var(--serif); font-size: 11px; font-style: italic; }
#scatter .ring { fill: none; stroke: var(--brass); stroke-width: 1; stroke-dasharray: 3 3; }

.controls { bottom: 18px; row-gap: 10px; }
.controls .pick { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--ink-muted); }
.controls .pick select { max-width: 280px; }
.ramp { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--ink-muted); }
.ramp i { display: inline-block; width: 110px; height: 8px; border-radius: 2px; }
.seg.wrap { flex-wrap: wrap; }
.seg.wrap button { margin-top: -1px; }

/* ---------- widoki tekstowe na płótnie ---------- */
.view { position: absolute; left: 24px; right: 24px; top: calc(var(--vb, 40px) + 26px); bottom: calc(var(--ctrl, 0px) + 36px); overflow-y: auto; padding-right: 8px; }
.view h2 { font-size: var(--t-xl); margin: 0 0 4px; }
.view .lede { color: var(--ink-muted); font-size: var(--t-sm); max-width: 70ch; margin-bottom: 18px; }

/* rekordziści */
.rec-grid { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(320px, 1.2fr); gap: 28px 40px; align-items: start; }
.rec-list { list-style: none; margin: 0; padding: 0; font-size: var(--t-sm); counter-reset: rec; }
.rec-list li { display: grid; grid-template-columns: 2.2ch 1fr auto; gap: 3px 10px; padding: 7px 4px; border-bottom: 1px solid rgba(36, 45, 61, 0.6); cursor: pointer; align-items: baseline; border-radius: 2px; }
.rec-list li:hover, .rec-list li:focus-visible { background: var(--ground-lift); }
.rec-list li.on { background: var(--brass-soft); }
.rec-list li .no { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.rec-list li .who { min-width: 0; }
.rec-list li .who b { font-family: var(--serif); font-weight: 500; font-size: var(--t-md); }
.rec-list li .who small { color: var(--ink-muted); display: block; font-size: var(--t-xs); line-height: 1.3; }
.rec-list li .v { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.rec-list li .v small { color: var(--ink-muted); display: block; font-size: var(--t-xs); }
.rec-list li .bar { grid-column: 2 / -1; height: 3px; background: var(--ground-lift); }
.rec-list li .bar i { display: block; height: 100%; background: var(--ink-muted); }
.rec-list li.on .bar i { background: var(--brass); }

.rec-detail { padding-bottom: 12px; }
.rec-detail .hero { font-family: var(--serif); font-size: var(--t-3xl); line-height: 0.95; color: var(--brass); }
.rec-detail .hero-unit { color: var(--ink-muted); font-size: var(--t-sm); margin: 4px 0 14px; }
.rec-detail .where { font-size: var(--t-sm); color: var(--ink-muted); margin-bottom: 14px; }
.rec-detail .where b { color: var(--paper); font-family: var(--serif); font-weight: 500; font-size: var(--t-lg); }
.sentence {
  font-family: var(--serif); font-size: var(--t-md); line-height: 1.55; color: var(--paper);
  border-left: 2px solid var(--brass); padding: 4px 0 4px 16px; margin: 0 0 12px;
  hyphens: auto;
}
.sentence::first-letter { font-size: 1.6em; line-height: 0.8; color: var(--brass); }
.rec-detail .open { font-size: var(--t-sm); }
.rec-detail .open button { margin-right: 8px; }
.rec-detail .note { font-size: var(--t-xs); color: var(--ink-faint); margin-top: 10px; line-height: 1.45; }

/* kodeksy pod lupą — tabela cieplna */
.heat { border-collapse: collapse; font-size: var(--t-sm); width: 100%; max-width: 1100px; }
.heat th { font-weight: 400; color: var(--ink-muted); text-align: left; padding: 6px 8px; vertical-align: bottom; font-size: var(--t-xs); line-height: 1.3; border-bottom: 1px solid var(--rule); }
.heat th.m { cursor: pointer; }
.heat th.m:hover { color: var(--paper); }
.heat th.m.on { color: var(--brass); }
.heat td { padding: 0; }
.heat td .cell { display: block; margin: 2px; padding: 7px 8px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ground); border-radius: 2px; min-width: 64px; }
.heat td .cell.light { color: var(--paper); }
.heat tr.act th { font-family: var(--serif); font-size: var(--t-md); color: var(--paper); border-bottom: 0; white-space: nowrap; cursor: pointer; }
.heat tr.act th small { display: block; font-family: var(--sans); color: var(--ink-faint); font-size: var(--t-xs); font-weight: 400; max-width: 26ch; white-space: normal; }
.heat tr.act:hover th { color: var(--brass); }
.heat tr.act.sel th { color: var(--brass); }
.heat-legend { display: flex; align-items: center; gap: 8px; font-size: var(--t-xs); color: var(--ink-muted); margin-top: 12px; }
.heat-legend i { display: inline-block; width: 140px; height: 8px; border-radius: 2px; }
.heat-foot { font-size: var(--t-xs); color: var(--ink-faint); margin-top: 14px; max-width: 80ch; line-height: 1.45; }

/* co czytają sądy — korelacje */
.corr svg { width: 100%; max-width: 760px; height: auto; display: block; overflow: visible; }
.corr .lbl { fill: var(--paper); font-family: var(--serif); font-size: 14px; }
.corr .sub { fill: var(--ink-muted); font-family: var(--sans); font-size: 11px; }
.corr .val { fill: var(--ink-muted); font-family: var(--sans); font-size: 12px; font-variant-numeric: tabular-nums; }
.corr .zero { stroke: var(--ink-faint); }
.corr .bar { fill: var(--a-administracyjne); }
.corr .bar.neg { fill: var(--ink-faint); }
.corr .bar.top { fill: var(--brass); }
.corr-note { max-width: 70ch; font-size: var(--t-sm); color: var(--ink-muted); margin-top: 16px; line-height: 1.5; }
.corr-note b { color: var(--paper); font-weight: 500; }

/* ---------- panel: tablica metryk ---------- */
.panel .intro { margin-top: 6px; }
.metric-table { list-style: none; margin: 14px 0 0; padding: 0; font-size: var(--t-sm); }
.metric-table li { border-top: 1px solid rgba(36, 45, 61, 0.6); }
.metric-table summary { cursor: pointer; display: grid; grid-template-columns: 1fr; gap: 1px; padding: 7px 0; list-style: none; }
.metric-table summary::-webkit-details-marker { display: none; }
.metric-table summary .code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--t-xs); color: var(--ink-faint); letter-spacing: 0.02em; }
.metric-table summary .law { font-family: var(--serif); font-size: var(--t-md); }
.metric-table summary:hover .law { color: var(--brass); }
.metric-table details[open] summary .law { color: var(--brass); }
.metric-table .def { color: var(--ink-muted); padding: 0 0 10px; line-height: 1.45; }
.metric-table .def b { color: var(--paper); font-weight: 500; }
.panel .hint { font-size: var(--t-xs); color: var(--ink-faint); margin-top: 10px; line-height: 1.45; }
.panel .kv { display: grid; grid-template-columns: 1fr auto; gap: 5px 16px; font-size: var(--t-sm); margin: 14px 0 0; }
.panel .kv dt { color: var(--ink-muted); margin: 0; }
.panel .kv dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- panel: raport lintera ---------- */
.panel .back {
  background: none; border: 0; padding: 0; margin: 0 0 14px;
  color: var(--ink-muted); font-size: var(--t-sm);
  text-decoration: underline; text-decoration-color: var(--ink-faint); text-underline-offset: 3px;
}
.panel .back:hover { color: var(--brass); text-decoration-color: var(--brass); }
.panel h2 .abbr { color: var(--brass); }
.panel .sub { color: var(--ink-muted); font-size: var(--t-sm); margin: 2px 0 14px; line-height: 1.4; }
.panel .sub a { color: var(--paper); }
.stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 14px; margin: 14px 0 6px; }
.stats b { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.4rem; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats span { display: block; font-size: var(--t-xs); color: var(--ink-muted); margin-top: 3px; line-height: 1.3; }

.lint { list-style: none; margin: 8px 0 0; padding: 0; font-size: var(--t-sm); }
.lint li { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 7px 0 7px 10px; border-left: 2px solid var(--rule); margin-bottom: 6px; line-height: 1.4; }
.lint li .tag { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--t-xs); letter-spacing: 0.03em; padding-top: 2px; }
.lint li.warn { border-left-color: var(--a-ubezpieczenia); }
.lint li.warn .tag { color: var(--a-ubezpieczenia); }
.lint li.err { border-left-color: var(--a-cywilne); }
.lint li.err .tag { color: var(--a-cywilne); }
.lint li.info { border-left-color: var(--a-administracyjne); }
.lint li.info .tag { color: var(--a-administracyjne); }
.lint li.ok { border-left-color: var(--a-budowlane); }
.lint li.ok .tag { color: var(--a-budowlane); }
.lint li .rule { grid-column: 2; color: var(--ink-faint); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--t-xs); }

.bars { list-style: none; margin: 6px 0 0; padding: 0; font-size: var(--t-sm); }
.bars li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 6px 0; align-items: baseline; }
.bars li .name { color: var(--ink-muted); }
.bars li .name b { color: var(--paper); font-weight: 400; }
.bars li .v { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bars li .v small { color: var(--ink-faint); margin-left: 6px; }
.bars li .track { grid-column: 1 / -1; height: 6px; background: var(--ground-lift); position: relative; border-radius: 1px; }
.bars li .track .med { position: absolute; top: -2px; bottom: -2px; width: 1px; background: var(--ink-faint); }
.bars li .track .pos { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--paper); border-radius: 1px; }
.bars li.hot .track .pos { background: var(--a-ubezpieczenia); }
.bars li .track .fill { position: absolute; inset: 0 auto 0 0; background: rgba(160, 169, 184, 0.35); }
.bars-hint { display: flex; justify-content: space-between; font-size: var(--t-xs); color: var(--ink-faint); margin-top: 2px; }

.kinds { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--t-xs); color: var(--ink-muted); margin-top: 8px; }
.kinds b { color: var(--paper); font-weight: 400; font-variant-numeric: tabular-nums; }

.panel .links { margin-top: 18px; font-size: var(--t-sm); }
.panel .links a { display: inline-block; margin-right: 12px; }

@media (max-width: 1250px) {
  .heat tr.act th small { display: none; }
  .heat td .cell { min-width: 48px; padding: 6px 6px; }
  .heat th { padding: 6px 4px; }
}
@media (max-width: 1100px) {
  .rec-grid { grid-template-columns: 1fr; }
  .rec-detail { position: static; }
  .sentence { max-height: none; }
}
@media (max-width: 900px) {
  .view { left: 16px; right: 16px; }
  .viewbar { left: 16px; right: 16px; }
  .viewbar .find { margin-left: 0; }
  .controls { left: 16px; right: 16px; }
  .heat tr.act th small { display: none; }
}

/* znak Lexedit: pod wyszukiwarką */
.atlas-mark { top: 66px; right: 24px; }