/* /story — zakładki "mapa dostępu" / "rejestr portów" (na razie placeholdery,
   patrz js/story.js: tylko przełączanie). Wzorzec zakładek wzięty z .mode-btn/
   .topic-btn (czysty kontur, bez wypełnienia poza stanem aktywnym/hover). */
.story-tabs { display:flex; gap:8px; margin:4px 0 14px; flex-wrap:wrap; }
.story-tab {
  background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius);
  padding:7px 14px; font-family:var(--mono); font-size:clamp(12px,1.4vw,13px); font-weight:600;
  color:var(--muted); cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background 0.12s, color 0.12s, border-color 0.12s;
}
.story-tab.active { color:var(--accent); border-color:var(--accent); }
@media (hover:hover) { .story-tab:not(.active):hover { border-color:var(--accent); color:var(--accent); } }
.story-tab:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.story-panel[hidden] { display:none; }
.story-placeholder { font-family:var(--mono); font-size:12px; color:var(--muted); line-height:1.6; padding:10px 0; }

/* ── Rejestr portów — paski/filtry/siatka kart/panel szczegółów. ETAP 8: tabela
   zamieniona na siatkę kart auto-fill/minmax (na szerokim kontenerze więcej
   kolumn — wygląda jak tabela; na wąskim jedna kolumna), filtry to jeden rząd
   chipów przewijany TYLKO w obrębie paska, a panel szczegółów jest bottom
   sheetem na wąskim kontenerze i stałym panelem obok siatki na szerokim
   (@container na #registry-layout, patrz niżej). ── */
#story-registry-bars { margin-bottom:var(--space-3); }
.story-registry-line { font-family:var(--mono); font-size:var(--font-xs); color:var(--text); margin-bottom:var(--space-1); }
.story-registry-line.muted { color:var(--muted); }

.story-registry-filters { display:flex; gap:var(--space-2); flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:var(--space-3) 0; padding-bottom:2px; }
.story-filter { font-size:var(--font-xs); padding:var(--space-1) var(--space-2); min-height:var(--tap); flex:0 0 auto; white-space:nowrap; }
.story-filter.active { color:var(--accent); border-color:var(--accent); }

.story-dots { display:inline-flex; gap:3px; vertical-align:middle; }
.story-dot { width:8px; height:8px; border-radius:50%; border:1px solid var(--border); background:transparent; }
.story-dot.filled { background:var(--accent); border-color:var(--accent); }

.registry-layout { container: registry-layout / inline-size; display:flex; flex-direction:column; gap:var(--space-3); }
.registry-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(11rem, 1fr)); gap:var(--space-2); flex:1 1 auto; min-width:0; }
.registry-grid .score-empty { grid-column:1 / -1; }

.registry-card {
  display:flex; flex-direction:column; gap:var(--space-1); text-align:left; min-height:var(--tap);
  background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius);
  padding:var(--space-2) var(--space-3); font-family:var(--mono); color:var(--text);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.registry-card:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
@media (hover:hover) { .registry-card:hover { border-color:var(--accent); } }
.registry-card-head { display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-2); font-weight:700; font-size:var(--font-sm); }
.registry-card-meta { font-size:var(--font-xs); color:var(--muted); }

/* Panel szczegółów — domyślnie (wąski kontener) bottom sheet: przyklejony do
   dołu, zasuwany/wysuwany transformem, zamykany dotykiem w tło albo Esc (JS
   bez zmian — przełącza tylko klasę .show, tu decyduje CSS co ona znaczy). */
.registry-detail {
  position:fixed; inset:auto 0 0 0; z-index:9998; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(8,8,12,0.78); opacity:0; visibility:hidden; transition:opacity 0.15s;
  padding:0; padding-bottom:var(--safe-bottom);
}
.registry-detail.show { opacity:1; visibility:visible; }
.registry-detail .story-detail-card {
  width:100%; max-width:min(100%,32rem); max-height:80dvh; overflow-y:auto;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0; transform:translateY(100%); transition:transform 0.2s;
}
.registry-detail.show .story-detail-card { transform:translateY(0); }

/* Próg wybrany po treści: karta szczegółów (min. ok. 14rem) obok siatki kart
   (min. 11rem na kartę) potrzebuje ok. 36em, żeby obie strony miały sensowną
   szerokość — nie odpowiada żadnemu konkretnemu urządzeniu. */
@container registry-layout (min-width: 36em) {
  .registry-layout { flex-direction:row; align-items:flex-start; }
  .registry-detail {
    position:static; inset:auto; display:block; background:none; z-index:auto;
    opacity:1; visibility:visible; width:16rem; flex:0 0 auto; padding:0;
  }
  .registry-detail .story-detail-card { width:100%; max-height:none; border-radius:var(--radius); transform:none; }
}

.story-detail-card { max-width:min(100%,28rem); }
.story-detail-line { font-family:var(--mono); font-size:var(--font-xs); color:var(--text); line-height:1.6; margin-bottom:var(--space-2); }
.story-detail-line b { color:var(--muted); font-weight:600; }
.story-detail-perk { border-top:1px solid var(--border); padding-top:var(--space-2); margin-top:var(--space-1); }
.story-detail-perk.active b { color:var(--accent); }
.story-detail-perk:not(.active) { color:var(--muted); }

/* ── Silnik scen (ETAP 3 fabuły, js/scenes.js) — nakładka modalna, ASCII w ramce
   box-drawing (patrz js/story-data.js), bez emoji/gradientów. ── */
.scene-card { max-width:min(100%,30rem); width:100%; }
/* container-type na ramce: kadr ma stałą liczbę kolumn (maks. 40, patrz
   js/story-data.js), więc rozmiar czcionki wynika z szerokości KONTENERA
   (cqw), nie viewportu (vw) — ETAP 8. Wzór: 100cqw/40 znaków/0.6 (szerokość
   znaku monospace względem jego wysokości, zweryfikowane dla JetBrains Mono —
   advance width ok. 0.6em) = 100cqw/24. Jeśli przy minimalnym rozmiarze kadr
   się nie mieści, .scene-ascii i tak przewija się wewnątrz siebie (overflow-x). */
.scene-frame { container-type: inline-size; min-height:clamp(140px,32dvh,220px); display:flex; flex-direction:column; justify-content:center; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.scene-ascii {
  font-family:var(--mono); font-size:clamp(12px, calc(100cqw / 40 / 0.6), 20px); line-height:1.5; color:var(--text);
  white-space:pre; overflow-x:auto; margin:0;
}
.scene-log { font-family:var(--mono); font-size:clamp(12px,1.6vw,13px); padding:2px 0; }
.scene-log-muted { color:var(--muted); }
.scene-log-warn { color:var(--warn-t); }
.scene-log-correct { color:var(--correct-t); }
.scene-log-wrong { color:var(--wrong-t); }
.scene-msg { font-family:var(--mono); font-size:clamp(12px,1.7vw,14px); color:var(--text); line-height:1.6; }
.scene-msg::first-line { color:var(--accent); }
.scene-end { font-family:var(--mono); font-size:12px; color:var(--muted); text-align:center; letter-spacing:1px; }

.scene-controls { display:flex; flex-direction:column; gap:10px; margin-top:16px; border-top:1px solid var(--border); padding-top:14px; }
.scene-skip-anim { display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12px; color:var(--muted); cursor:pointer; }
.scene-controls-btns { display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }

/* ── Hub /story: "mapa dostępu" (js/story-hub.js). ETAP 8 — dwa widoki na tych
   samych danych, oba zawsze w DOM: ".hub-list-view" (akordeon per akt, zawsze
   działa) i ".hub-graph-view" (SVG + węzły w %, tylko gdy kontener jest dość
   szeroki na czytelny graf). Przełącza @container na #hub-layout — bez
   wsparcia container queries ten blok jest po prostu pomijany przez
   przeglądarkę, a domyślne display: niżej (graf schowany, lista widoczna)
   zostają — to jest cała "degradacja", nic nie trzeba wykrywać w JS. ── */
.hub-layout { container: hub-layout / inline-size; display:flex; flex-direction:column; gap:var(--space-4); }
.hub-main { display:flex; flex-direction:column; gap:var(--space-3); flex:1 1 auto; min-width:0; }

.hub-graph-view { display:none; }
.hub-list-view { display:block; }

/* Próg wybrany po treści: dwa węzły grafu (ok. 7rem każdy + odstęp + margines
   panelu detali) potrzebują ok. 30em, żeby nie być ściśnięte — nie odpowiada
   żadnemu konkretnemu urządzeniu. */
@container hub-layout (min-width: 30em) {
  .hub-graph-view { display:flex; flex-direction:column; gap:var(--space-3); }
  .hub-list-view { display:none; }
}

.hub-graph-canvas { position:relative; width:100%; aspect-ratio:16/9; min-height:14rem; }
.hub-graph-svg { position:absolute; inset:0; width:100%; height:100%; }
.hub-graph-edge { stroke:var(--border); stroke-width:1.5; }
.hub-graph-nodes { position:absolute; inset:0; }
.hub-graph-node {
  position:absolute; transform:translate(-50%,-50%); min-width:var(--tap); min-height:var(--tap);
  padding:var(--space-1) var(--space-2); border-radius:999px; border:1px solid var(--border);
  background:var(--bg3); color:var(--muted); font-family:var(--mono); font-size:var(--font-xs);
  font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.hub-graph-node.unlocked { border-color:var(--accent); color:var(--text); }
.hub-graph-node.locked { opacity:0.65; }
.hub-graph-node.special { border-width:2px; }
.hub-graph-node.selected { background:var(--bg2); color:var(--accent); box-shadow:0 0 0 2px var(--accent) inset; }
.hub-graph-node:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (hover:hover) { .hub-graph-node:not(.selected):hover { background:var(--bg2); } }
.hub-graph-detail { min-height:6rem; }

/* Akordeon — jeden <details> per akt (natywny, dostępny klawiaturą i dotykiem
   bez żadnego JS), otwarty domyślnie na akcie, w którym gracz realnie jest. */
.hub-act-accordion { border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-2) var(--space-3); }
.hub-act-accordion + .hub-act-accordion { margin-top:var(--space-2); }
.hub-act-accordion summary { font-family:var(--mono); font-size:var(--font-sm); font-weight:700; color:var(--muted); cursor:pointer; min-height:var(--tap); display:flex; align-items:center; -webkit-tap-highlight-color:transparent; }
.hub-act-accordion[open] summary { color:var(--accent); }
.hub-act-list { display:flex; flex-direction:column; gap:var(--space-2); margin-top:var(--space-2); }

.hub-node {
  border:1px solid var(--border); border-radius:var(--radius); background:var(--bg3);
  padding:var(--space-2) var(--space-3);
}
.hub-node.unlocked { border-color:var(--accent); }
.hub-node.locked { opacity:0.75; }
.hub-node.special { border-width:2px; }
.hub-node-head { display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-2); flex-wrap:wrap; }
.hub-node-label { font-family:var(--mono); font-size:var(--font-sm); font-weight:700; color:var(--text); }
.hub-node.locked .hub-node-label { color:var(--muted); }
.hub-node-act { font-family:var(--mono); font-size:var(--font-xs); color:var(--muted); white-space:nowrap; }
.hub-node-status { font-family:var(--mono); font-size:var(--font-xs); margin-top:var(--space-1); line-height:1.4; }
.hub-node.unlocked .hub-node-status { color:var(--accent); }
.hub-node.locked .hub-node-status { color:var(--muted); }
.hub-node-scene-btn { margin-top:var(--space-2); min-height:var(--tap); }

/* Panel gracza — <details> (patrz story.html): na wąskim kontenerze to prawdziwy
   zwijany pasek, na szerokim wymuszamy "zawsze otwarty" wyglądem (strzałka i
   kursor summary schowane, treść zawsze widoczna) i stoi obok grafu/listy. */
.hub-panel-wrap { flex:0 0 auto; width:100%; border:1px solid var(--border); border-radius:var(--radius); padding:0 var(--space-3); }
.hub-panel-summary { font-family:var(--mono); font-size:var(--font-sm); font-weight:700; color:var(--accent); cursor:pointer; min-height:var(--tap); display:flex; align-items:center; -webkit-tap-highlight-color:transparent; margin:0 calc(-1 * var(--space-3)); padding:0 var(--space-3); }
@container hub-layout (min-width: 30em) {
  .hub-layout { flex-direction:row; align-items:flex-start; }
  .hub-panel-wrap { width:16rem; padding:var(--space-3); }
  .hub-panel-summary { display:none; }
}
.hub-panel-line { font-family:var(--mono); font-size:var(--font-xs); color:var(--text); line-height:1.6; margin-bottom:var(--space-1); }
.hub-panel-line.muted { color:var(--muted); }
.hub-panel-finished { color:var(--accent); font-weight:700; }
.hub-panel-title { font-weight:700; margin-top:var(--space-2); }

/* Misje przypisane do węzła — lista pod statusem/przyciskiem notatki. */
.hub-node-missions { margin-top:var(--space-2); padding-top:var(--space-2); border-top:1px solid var(--border); display:flex; flex-direction:column; gap:var(--space-2); }
.hub-mission-row { font-family:var(--mono); font-size:var(--font-xs); }
.hub-mission-done { color:var(--correct-t); }
.hub-mission-locked { color:var(--muted); opacity:0.7; }
.hub-mission-btn { min-height:var(--tap); width:100%; text-align:left; }

/* ── Runner misji (ETAP 4, js/missions.js) — nakładka modalna wokół trybu. ── */
.mission-card { max-width:min(100%,34rem); width:100%; max-height:90dvh; overflow-y:auto; }
.mission-card-top { display:flex; justify-content:flex-end; margin-bottom:10px; }

/* ── Tryb "diagnoza" (js/modes/diagnoza.js) — okno terminala jak resztka strony
   (.term-win/.term-bar/.term-dot z css/tables.css), tylko treść jest inna. ── */
.diag-win { margin:0; }
.diag-ticket { font-family:var(--mono); font-size:12px; color:var(--text); line-height:1.6; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.diag-cmds { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px; }
.diag-cmd-btn { font-size:12px; padding:6px 10px; }
.diag-output { display:flex; flex-direction:column; gap:8px; max-height:34dvh; overflow-y:auto; margin-bottom:12px; }
.diag-cmd-block { border-bottom:1px solid var(--border); padding-bottom:8px; }
.diag-cmd-text { color:var(--accent); font-weight:700; }
.diag-cmd-output { font-family:var(--mono); font-size:12px; color:var(--text); white-space:pre-wrap; margin:4px 0 0; line-height:1.5; }
.diag-diagnosis-label { font-family:var(--mono); font-size:12px; font-weight:700; color:var(--muted); margin-bottom:6px; }
.diag-diagnosis-opts { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px; }
.diag-diag-btn { font-size:12px; padding:6px 10px; }
.diag-result { font-family:var(--mono); font-size:12px; line-height:1.6; min-height:1.2em; margin-bottom:10px; }
.diag-result-ok, .diag-result-grade { color:var(--correct-t); }
.diag-result-wrong { color:var(--wrong-t); }

/* ── Tryb "firewall" (js/modes/firewall.js) — gracz układa własne reguły (sloty)
   i testuje je na pakietach; okno terminala z css/tables.css. ETAP 8: sloty jako
   karty w siatce auto-fit/minmax, lista/log/wynik obok edytora na szerokim
   kontenerze (@container na .fw-layout), pod spodem na wąskim. ── */
.fw-win { margin:0; }
.fw-brief { font-family:var(--mono); font-size:var(--font-xs); color:var(--text); line-height:1.6; margin-bottom:var(--space-2); }
.fw-policy { font-family:var(--mono); font-size:var(--font-xs); color:var(--muted); margin-bottom:var(--space-3); padding-bottom:var(--space-2); border-bottom:1px solid var(--border); }
.fw-policy b { color:var(--text); }

.fw-layout { container: fw-layout / inline-size; display:flex; flex-direction:column; gap:var(--space-3); }
.fw-editor { flex:1 1 auto; min-width:0; }
.fw-outcome { flex:1 1 auto; min-width:0; }
/* Próg po treści: edytor reguł i log/wynik obok siebie potrzebują ok. 40em,
   żeby obie kolumny miały sensowną szerokość — nie konkretne urządzenie. */
@container fw-layout (min-width: 40em) { .fw-layout { flex-direction:row; align-items:flex-start; } }

.fw-rules { display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr)); gap:var(--space-2); margin-bottom:var(--space-3); }
.fw-rule-row { display:flex; align-items:center; gap:var(--space-1); flex-wrap:wrap; padding:var(--space-2); border:1px solid var(--border); border-radius:var(--radius); }
.fw-rule-row.free { opacity:0.6; }
.fw-rule-num { font-family:var(--mono); font-size:var(--font-xs); color:var(--muted); min-width:1.8em; }
.fw-field-btn { font-size:var(--font-xs); padding:var(--space-1) var(--space-2); min-height:var(--tap); }
/* Strzałki przesuwania — odróżnialne od innych pól NIE tylko kolorem (ETAP 8):
   obrys przerywany + pogrubiona czcionka, patrz ":not(:disabled)". */
.fw-move-btn { font-size:var(--font-xs); padding:var(--space-1); min-width:var(--tap); min-height:var(--tap); font-weight:800; }
.fw-move-btn:not(:disabled) { border-style:dashed; }
.fw-actions { display:flex; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-3); }
.fw-log { display:flex; flex-direction:column; gap:var(--space-1); max-height:30dvh; overflow-y:auto; margin-bottom:var(--space-2); font-family:var(--mono); font-size:var(--font-xs); color:var(--muted); }
.fw-log-row { line-height:1.5; }
.fw-log-row.ok { color:var(--correct-t); }
.fw-log-row.wrong { color:var(--wrong-t); }
.fw-result { font-family:var(--mono); font-size:var(--font-xs); line-height:1.6; min-height:1.2em; margin-bottom:var(--space-2); }
.fw-result-ok, .fw-result-grade { color:var(--correct-t); }
.fw-reset-btn, .fr-reset-btn { display:block; margin-top:var(--space-2); font-size:var(--font-xs); min-height:var(--tap); padding:0 var(--space-3); }

/* ── Tryb "składanie ramki" (js/modes/ramka.js) — pola każdej warstwy
   przełączane kliknięciem, werdykt zatrzymuje się na pierwszej złej warstwie.
   ETAP 8: zagnieżdżenie warstw pokazane paskiem po lewej + wcięciem w em
   (:nth-child, bez zmian w JS — warstwy renderują się w tej samej kolejności),
   nie zagnieżdżonymi ramkami; wynik pod edytorem na wąskim kontenerze, obok na
   szerokim (@container na .fr-layout). ── */
.fr-win { margin:0; }
.fr-brief { font-family:var(--mono); font-size:var(--font-xs); color:var(--text); line-height:1.6; margin-bottom:var(--space-3); padding-bottom:var(--space-2); border-bottom:1px solid var(--border); }

.fr-layout { container: fr-layout / inline-size; display:flex; flex-direction:column; gap:var(--space-3); }
.fr-editor { flex:1 1 auto; min-width:0; }
/* Próg po treści: edytor warstw i panel wyniku obok siebie potrzebują ok. 38em. */
@container fr-layout (min-width: 38em) {
  .fr-layout { flex-direction:row; align-items:flex-start; }
  #fr-result { width:16rem; flex:0 0 auto; }
}

.fr-layers { display:flex; flex-direction:column; gap:var(--space-2); margin-bottom:var(--space-3); }
.fr-layer { border-left:3px solid var(--accent); padding:var(--space-2) var(--space-3); }
.fr-layer:nth-child(2) { margin-left:1em; }
.fr-layer:nth-child(3) { margin-left:2em; }
.fr-layer:nth-child(4) { margin-left:3em; }
.fr-layer-head { font-family:var(--mono); font-size:var(--font-xs); font-weight:700; color:var(--accent); margin-bottom:var(--space-1); }
.fr-field-row { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-1); }
.fr-field-label { font-family:var(--mono); font-size:var(--font-xs); color:var(--muted); min-width:7rem; }
.fr-field-btn { font-size:var(--font-xs); padding:var(--space-1) var(--space-2); text-align:left; min-height:var(--tap); }
.fr-actions { margin-bottom:var(--space-2); }
.fr-result { font-family:var(--mono); font-size:var(--font-xs); line-height:1.6; min-height:1.2em; }
.fr-result-ok, .fr-result-grade { color:var(--correct-t); }
.fr-result-wrong { color:var(--wrong-t); font-weight:700; margin-bottom:var(--space-2); }
.fr-errors { display:flex; flex-direction:column; gap:var(--space-1); }
.fr-error-row { font-size:var(--font-xs); color:var(--text); line-height:1.5; }
.fr-error-row b { color:var(--wrong-t); }

/* ── Tryb "routing" (js/modes/routing.js) — ETAP 8: mapa jako SVG ze
   skalowanym viewBox (linie) + węzły-przyciski pozycjonowane w % w TEJ SAMEJ
   przestrzeni 0-100 (patrz computeMapLayout() w JS) — płynnie skaluje się z
   kontenerem. Płótno ma minimalną szerokość w rem (żeby węzły o stałym
   --tap nigdy się nie zlały na bardzo wąskim kontenerze) i przewija się w bok
   własnym scrollem, z widoczną podpowiedzią, gdy tak się stanie. Możliwe
   skręty odróżnione stylem obrysu (przerywany), nie tylko kolorem. ── */
.rt-win { margin:0; }
.rt-brief { font-family:var(--mono); font-size:var(--font-xs); color:var(--text); line-height:1.6; margin-bottom:var(--space-2); }
.rt-packet-label { font-family:var(--mono); font-size:var(--font-xs); color:var(--muted); margin-bottom:var(--space-2); }
.rt-packet-label b { color:var(--text); }
.rt-acl-note { font-family:var(--mono); font-size:var(--font-xs); color:var(--warn-t); margin-bottom:var(--space-2); }
.rt-sabotage { font-family:var(--mono); font-size:var(--font-xs); color:var(--wrong-t); font-weight:700; line-height:1.5; margin-bottom:var(--space-3); padding:var(--space-2); border:1px solid var(--wrong-t); border-radius:var(--radius); }

.rt-layout { container: rt-layout / inline-size; display:flex; flex-direction:column; gap:var(--space-3); margin-bottom:var(--space-3); }
/* Próg po treści: mapa (min. 26rem, patrz .rt-map-canvas) i tablica tras obok
   siebie potrzebują ok. 46em — nie konkretne urządzenie. */
@container rt-layout (min-width: 46em) { .rt-layout { flex-direction:row; } }

.rt-map-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); flex:1 1 auto; min-width:0; }
.rt-map-hint { font-family:var(--mono); font-size:var(--font-xs); color:var(--muted); padding:var(--space-1) var(--space-2) 0; }
.rt-map-canvas { position:relative; min-width:26rem; aspect-ratio:4/3; }
.rt-map-svg { position:absolute; inset:0; width:100%; height:100%; }
.rt-edge { stroke:var(--border); stroke-width:1.5; }
.rt-map-nodes { position:absolute; inset:0; }
.rt-node {
  position:absolute; transform:translate(-50%,-50%); min-width:var(--tap); min-height:var(--tap); padding:var(--space-1) var(--space-2);
  font-family:var(--mono); font-size:var(--font-xs); text-align:center; border-radius:var(--radius);
  background:var(--bg3); border:1px solid var(--border); color:var(--muted); white-space:nowrap;
  display:flex; align-items:center; justify-content:center;
}
.rt-node-network { border-radius:999px; }
.rt-node.visited { border-color:var(--accent); color:var(--text); }
.rt-node.current { border-color:var(--accent); border-width:2px; color:var(--accent); font-weight:700; background:var(--bg2); }
.rt-node.option {
  border-style:dashed; border-color:var(--warn-t); color:var(--warn-t); cursor:pointer;
  font-family:var(--mono); -webkit-tap-highlight-color:transparent;
}
.rt-node.option:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (hover:hover) { .rt-node.option:hover { background:var(--bg2); } }

.rt-table-panel { flex:0 0 auto; min-width:10rem; }
@container rt-layout (min-width: 46em) { .rt-table-panel { width:13rem; border-left:1px solid var(--border); padding-left:var(--space-3); } }
.rt-table-label { font-family:var(--mono); font-size:12px; font-weight:700; color:var(--muted); margin-bottom:6px; }
.rt-table-rows { display:flex; flex-direction:column; gap:3px; }
.rt-table-row { font-family:var(--mono); font-size:12px; color:var(--text); line-height:1.5; }
.rt-table-row.hinted { color:var(--accent); font-weight:700; }

.rt-actions { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.rt-log { display:flex; flex-direction:column; gap:3px; max-height:22dvh; overflow-y:auto; margin-bottom:10px; font-family:var(--mono); font-size:12px; }
.rt-log-row.ok { color:var(--correct-t); }
.rt-log-row.wrong { color:var(--wrong-t); }
.rt-result { font-family:var(--mono); font-size:12px; line-height:1.6; }
.rt-result-ok { color:var(--correct-t); }
.rt-result-wrong { color:var(--wrong-t); }
.rt-reset-btn { display:block; margin-top:8px; font-size:12px; padding:6px 12px; }

/* ── Zakładka "trening" ── */
.training-list { display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.training-row { display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--border); padding-bottom:8px; }
.training-row-label { font-family:var(--mono); font-size:12px; color:var(--text); }