/* Plansza II — Sejsmograf kodeksów. Dziedziczy skórkę z atlas.css. */

.canvas > canvas, .canvas > svg.axes { position: absolute; inset: 0; width: 100%; height: 100%; }
.canvas > svg.axes { pointer-events: none; overflow: visible; }
.axes .brush { pointer-events: all; }
.axes .lbl { fill: var(--ink-muted); font-family: var(--sans); font-size: 11px; }
.axes .faint { fill: var(--ink-faint); }
.axes .title { fill: var(--paper); font-family: var(--serif); font-size: 14px; }
.axes .art-axis text { fill: var(--ink-muted); font-family: var(--sans); font-size: 11px; }
.axes .art-axis line { stroke: var(--rule); }
.axes .lbl.brass { fill: var(--brass); font-family: var(--serif); font-size: 12px; }

/* brush na minimapie — mosiądz tylko jako zaznaczenie */
.brush .selection { fill: var(--brass); fill-opacity: 0.14; stroke: var(--brass); stroke-opacity: 0.85; stroke-width: 1; shape-rendering: crispEdges; }
.brush .overlay { cursor: ns-resize; }
.brush .handle { fill: var(--brass); fill-opacity: 0; }

.controls [hidden] { display: none; }

/* wybór kodeksu */
.code-picker {
  position: absolute; left: 24px; right: 24px; top: 12px; z-index: 5;
  display: flex; flex-wrap: wrap; gap: 3px;
}
.code-picker button { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 8px 4px; line-height: 1.2; }
.code-picker button .l { font-family: var(--serif); font-size: var(--t-md); }
.code-picker button .n { font-size: var(--t-xs); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.code-picker button[aria-pressed="true"] .n { color: var(--ground); opacity: 0.8; }

/* panel: szczegóły artykułu */
.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 .code { color: var(--ink-muted); font-size: var(--t-lg); }
.panel h2 .artno { color: var(--brass); }
.stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 14px; margin: 16px 0 4px; }
.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; }

.timeline { list-style: none; margin: 0 0 0 4px; padding: 0; font-size: var(--t-sm); border-left: 1px solid var(--rule); max-height: 38vh; overflow-y: auto; }
.timeline li { display: flex; gap: 10px; padding: 3px 0 3px 14px; position: relative; }
.timeline li::before { content: ""; position: absolute; left: -3px; top: 11px; width: 5px; height: 5px; background: var(--paper); border-radius: 50%; }
.timeline li.change::before { width: 2px; height: 10px; top: 8px; left: -1.5px; border-radius: 0; }
.timeline li.planned { color: var(--ink-faint); font-style: italic; }
.timeline li.planned::before { background: transparent; border: 1px solid var(--ink-faint); width: 2px; height: 10px; top: 8px; left: -2px; border-radius: 0; }
.timeline li.repeal::before { width: 7px; height: 3px; top: 12px; left: -4px; border-radius: 0; }
.timeline li.unknown { color: var(--ink-faint); font-style: italic; }
.timeline li.unknown::before { background: transparent; border: 1px dashed var(--ink-faint); }
.timeline .d { color: var(--ink-muted); min-width: 11.5ch; font-variant-numeric: tabular-nums; white-space: nowrap; }

.cites svg { width: 100%; height: 140px; display: block; margin-top: 10px; overflow: visible; }
.cites text { fill: var(--ink-muted); font-family: var(--sans); font-size: 11px; }
.hint { font-size: var(--t-xs); color: var(--ink-faint); margin-top: 8px; line-height: 1.45; }
.rows li.click:focus-visible { color: var(--brass); outline-offset: 0; }
.panel .intro { margin-top: 10px; }

@media (max-width: 900px) {
  .timeline { max-height: none; }
}

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