/* #2309 przewijanie pionowe zadeklarowane od pierwszej klatki + gutter dla
   nowszych silnikow, zeby strony (i przejscie z /login) nie przeskakiwaly
   w bok. Od #2659 pasek ma zerowa szerokosc, wiec rezerwacja gutter wynosi
   zero i kadr zostaje symetryczny. */
html { overflow-y: scroll; scrollbar-gutter: stable; }

/* ============================================================
   CYRBER GUI v5 - shared base layer
   Design tokens + page chrome (nav, statusbar, agent bar)
   used by every v5 tab (kokpit excluded - uses kokpit-v5.css
   for historical reasons + tighter viewport grid).
   ============================================================ */

:root {
  /* #3204: kroje aplikacji = kanon stron publicznych (#2451). Unbounded dla
     marki i etykiet (pelne polskie znaki; Unbounded gubil Ż/Ś/Ć), Inter dla
     tresci i liczb, JetBrains Mono tylko dla hashy, kodu i skrotow. */
  --font-brand: 'Unbounded', 'Inter', system-ui, sans-serif;
  --font-data:  'Inter', system-ui, sans-serif;
  --font-code:  'JetBrains Mono', ui-monospace, monospace;

  --bg-canvas:      #0a0a0a;
  --bg-panel:       #0f0f0f;
  --bg-elevated:    #141414;
  --bg-interactive: #1a1a1a;

  --fg-primary:     #fafafa;
  --fg-secondary:   #A7B2BD;   /* G-P3: chłodny ink, 8.9:1 na --bg-panel */
  --fg-tertiary:    #8593A0;   /* G-P3: AA body 6.1:1 (było #6b6b6b = 3.6:1, poniżej AA) */
  --fg-dimmed:      #3f3f3f;   /* G-P3: TYLKO nie-tekst (hairline/disabled), nie na treści */

  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.08);
  --border-strong:  rgba(255, 255, 255, 0.12);

  /* G-P3 palette-trim: 8 neonów → 3 znaczące akcenty. Głowy zdemowane do cichych
     markerów (identyfikacja etykietą, nie wypełnieniem). Stare nazwy = aliasy,
     żeby 77 stron zaktualizowało się przez token bez przepisywania. */
  --accent-ratio:    #5b7fa6;  /* muted steel-blue - marker głowy RATIO */
  --accent-animus:   #c76b62;  /* muted brick - marker głowy ANIMUS */
  --accent-fatum:    #9a86c4;  /* muted lavender - marker głowy FATUM */

  /* #3204: sygnal organizmu = srebro wilka z logo (bylo teal #33b8a6,
     generyczny akcent). Kolor niesie stan (zyje / krytyczne / pieczec),
     glowny przycisk to jasna plyta z ciemnym tekstem (--on-signal). */
  --accent-signal:   #e4e8e9;
  --on-signal:       #0d1011;
  /* #3213: kanaly RGB do nakladek i ramek; w jasnym odwracaja sie na
     atrament. W ciemnym te same wartosci co dawne literaly = zero zmian. */
  --ink-rgb:         255, 255, 255;
  --signal-rgb:      228, 232, 233;
  --signal-hover:    #ffffff;
  --shade-rgb:       0, 0, 0; /* kolor cieni; w jasnym = papier, wiec cienie znikaja */
  --accent-live:     var(--accent-signal);   /* alias: zieleń → teal-puls */
  /* #3244: aliasy dawnych nazw. Czesc stron definiowala je u siebie, reszta
     brala ciemny kolor zapasowy (np. var(--card-bg, #111)), ktory w jasnym
     motywie sie nie odwracal. Tu wskazuja tokeny motywu, wiec odwracaja sie same. */
  --accent:          var(--accent-signal);
  --card-bg:         var(--bg-panel);
  --bg-elev-1:       var(--bg-elevated);
  --text-primary:    var(--fg-primary);
  --text-secondary:  var(--fg-secondary);
  --text-muted:      var(--fg-tertiary);
  --muted:           var(--fg-tertiary);
  --bg-primary:      var(--bg-panel);

  --sev-critical:    #d16565;  /* wąska stonowana skala severity - TYLKO realne dane */
  --sev-high:        #d1a15a;
  --sev-ok:          #5fa07f;
  --accent-critical: var(--sev-critical);
  --accent-high:     var(--sev-high);
  --accent-warning:  var(--sev-high);        /* alias: warning zwinięty w high */

  /* #3218 lak TESTIMONIUM: tylko dowod, pieczec i werdykt. Ten sam w obu motywach. */
  --seal-wax:        #8a2a1c;
  --seal-wax-deep:   #5c1a12;
  --seal-wax-light:  #b04a32;
  --seal-wax-field:  #6b1e15;
  --seal-wax-relief: #a8412c;
  --seal-empty:      #8a9294;
  --seal-wax-text:   #d0674f;  /* lak jako tekst na ciemnym, 5.4:1 */
  --accent-seal:     var(--seal-wax);

  /* FORUM (F4) - głos operatora, zdemowany do ciepłego markera (G-P3). */
  --accent-forum:    #c99e6a;

  /* G-P3 legacy-compat aliasy (#1801) - stare nazwy tokenów używane w
     nav-v5.css/verify-v5.css/komponentach JS. Bez tych definicji var() gubił
     się do starej palety (navy #2a3a4f/#1e293b, blue, green #5fa07f) lub -
     bez fallbacku - porzucał deklarację. Mapowane na kanon G-P3. */
  --text-primary:    var(--fg-primary);
  --text-secondary:  var(--fg-secondary);
  --text-muted:      var(--fg-tertiary);
  --border:          var(--border-default);
  --bg-raised:       var(--bg-elevated);
  --accent-blue:     var(--accent-signal);   /* blue → teal-puls */
  --accent-gold:     #c9a23f;  /* zloto: koszt (AURUM), nawigacja Compliance, admin (#3218) */
  --accent-ok:       var(--sev-ok);
  --accent-red:      var(--sev-critical);    /* realny danger; nawigacja→signal */

  /* Chrome-surface tokeny (#1947) - używane globalnie w nav-v5.css/cyrber-shell.css
     (.cyrber-nav tło, nav-dropdown, karty), ale definiowane dotąd tylko page-local
     (theatrum/awareness/ludus). Bez tego var() na .cyrber-nav gubił deklarację tła →
     pasek przezroczysty na wszystkich pozostałych stronach. Mapowane na kanon G-P3;
     strony z lokalnym :root nadpisują specyficznością. */
  --nav-bg:          var(--bg-panel);         /* #0f0f0f - pasek nawigacji nad canvasem */
  --panel:           var(--bg-elevated);      /* #141414 - panele/dropdown menu */
  --bg-overlay:      var(--bg-interactive);   /* #1a1a1a - tło segmentów/hover */
  --card-border:     var(--border-default);   /* kolor obramowania kart (rgba white 0.08) */

  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  10px;
  --radius-lg:  12px;

  /* ── System głębi i światła (#2176 PR1) ──────────────────────────
     Dwuwarstwowa skala cieni + poświaty + ognisko focusu, przeniesione
     do base-v5 jako JEDNO źródło dla wszystkich 77 stron. Dotąd żyły
     tylko w cyrber-shell.css (62 strony) i były praktycznie martwe
     (--shadow-sm/md/lg po 1 użyciu, --shadow-glow-* zero). Wartości
     identyczne z cyrber-shell - czysto addytywne, ZERO zmiany wizualnej.
     Zastosowanie na powierzchniach: PR2+. */
  --shadow-sm:  0 1px 2px rgba(var(--shade-rgb, 0, 0, 0), .18), 0 1px 3px rgba(var(--shade-rgb, 0, 0, 0), .10);
  --shadow-md:  0 4px 8px rgba(var(--shade-rgb, 0, 0, 0), .20), 0 2px 4px rgba(var(--shade-rgb, 0, 0, 0), .12);
  --shadow-lg:  0 12px 28px rgba(var(--shade-rgb, 0, 0, 0), .30), 0 6px 12px rgba(var(--shade-rgb, 0, 0, 0), .16);
  /* #2176: kanoniczny cień KARTY - stokenizowany de-facto standard z ~6 domen
     (ar/bs/report/in/dw/cp-card). Miękki głęboki cień + górny highlight.
     Jeden cień na wszystkich kartach; --shadow-md zostaje dla nav/chrome. */
  --shadow-card: inset 0 1px 0 rgba(255,255,255,.03), 0 10px 30px -22px rgba(var(--shade-rgb, 0, 0, 0), .75);

  --shadow-glow-live:     0 0 18px rgba(228, 232, 233,.30);  /* teal-puls, TYLKO żywe */
  --shadow-glow-ratio:    0 0 24px rgba(91,127,166,.25);
  --shadow-glow-animus:   0 0 24px rgba(199,107,98,.25);
  --shadow-glow-fatum:    0 0 24px rgba(154,134,196,.25);
  --shadow-glow-critical: 0 0 24px rgba(209,101,101,.40);
  --glow-live:      var(--shadow-glow-live);              /* alias krótki (proof/PR2) */

  --focus-glow:     0 0 0 3px rgba(228, 232, 233,.14);       /* ognisko na kontrolkach */
  --hairline-live:  linear-gradient(90deg, rgba(228, 232, 233,.40), rgba(255,255,255,0));

  --ls-brand:   0.14em;
  --ls-label:   0.1em;
  --ls-heading: 0.1em;
  --ls-nav:     0.06em;

  /* ─────────────────────────────────────────────────────────────────
     JEDYNE ŹRÓDŁO szerokości kadru i rynnika. Te dwie linie to cały
     kanon; nigdzie indziej nie wolno powtórzyć wartości.

     `--kk-max` i `--kk-pad-x` to aliasy tych tokenów (app-shell-v5.css,
     kokpit-v5.css, admin-v5.css, testimonium-v5.css) i wolno ich używać
     zamiennie. Zostały pod starą nazwą, bo pięć arkuszy i pięć bloków
     <style> w HTML na nich stoi, a `trust.html` celowo nadpisuje
     `--kk-max` węższą wartością i ten wyjątek ma przeżyć.

     Do 2026-09-02 ta sama wartość leżała w pięciu definicjach pod
     dwiema nazwami i piętnaście razy wklejona wprost. Skutkiem były
     wiersze siadające na trzech różnych krawędziach (#2646). Pilnuje
     tego `scripts/check_layout_tokens.sh`.
     ───────────────────────────────────────────────────────────────── */
  --page-max:   clamp(1680px, 95vw, 3200px);
  --page-pad-x: clamp(24px, 3vw, 64px);

  --font-microlabel: clamp(11px, 0.7vw, 11px);
  --font-body-small: clamp(11px, 0.82vw, 12px);
  --font-body:       clamp(11px, 0.9vw, 13px);
  --font-body-plus:  clamp(12px, 0.95vw, 14px);
  --font-number:     clamp(18px, 1.6vw, 26px);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--fg-primary);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
}

/* #2309 delikatna poswiata jak na /play i login: trzy ciche radialne blaski
   w barwach glow (RATIO niebieski, ANIMUS czerwony, teal sygnal). Zabija plaska
   czern, dodaje glebi. z-index:-1 = za trescia (panele #0f0f0f i tak ja zaslaniaja,
   wiec na gestych dashboardach widac ja tylko w tle miedzy panelami). */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: none; /* #3204: plaskie tlo, bez poswiat */
}

/* ════════════════════════════════════════════════════════════════
   KANON PASKA PRZEWIJANIA (#2659) - pasek niewidoczny, przewijanie żywe
   ────────────────────────────────────────────────────────────────
   Powłoka (app-shell-v5.css) przewija `<main>`, a `body` trzyma boczny
   margines kadru. Widoczny pasek rysował się WEWNĄTRZ kadru i odbierał
   prawej stronie kilka pikseli, których lewa nie miała: kadr przestawał
   być symetryczny, a sam pasek nie niósł treści.

   Firefox czyta `scrollbar-width`, WebKit i Blink pseudo-element
   `::-webkit-scrollbar`. Oba silniki dostają zero pikseli, więc gutter
   rezerwuje zero i strony nie skaczą.

   Przewijanie zostaje nietknięte: kółko, klawiatura, dotyk i
   `scrollIntoView` działają jak dotąd. Kontener, w którym przewijanie
   jest jedynym dostępem do treści, sygnalizuje to sam (gradient,
   licznik, strzałka), nie paskiem.

   Brama `scripts/check_scrollbar_canon.py` odrzuca powrót widocznego
   paska w `static/`.
   ════════════════════════════════════════════════════════════════ */
* {
  scrollbar-width: none;
}
*::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

button, input, textarea, select { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
button { cursor: pointer; }

/* Native date/time fields: match G-P3 instead of OS chrome. color-scheme:dark
   also renders the native picker popup dark (Chromium/Firefox honor it), and
   the calendar indicator is tinted teal. */
input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"] {
  background: var(--bg-raised, #141414);
  border: 1px solid var(--border-default, rgba(var(--ink-rgb, 255, 255, 255), .08));
  border-radius: var(--radius-xs, 4px);
  padding: 7px 10px;
  font-family: var(--font-data);
  font-size: 13px;
  color: var(--fg-primary, #fafafa);
  color-scheme: dark;
}
input[type="date"]:focus, input[type="datetime-local"]:focus, input[type="time"]:focus,
input[type="month"]:focus, input[type="week"]:focus {
  outline: none;
  border-color: var(--accent-signal, #e4e8e9);
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(64%) sepia(46%) saturate(460%) hue-rotate(126deg);
  cursor: pointer;
  opacity: .85;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
a { color: inherit; text-decoration: none; }
code, kbd { font-family: var(--font-code); }

@keyframes v5-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes v5-pulse {
  /* #2176 PR3: żywe teal-kropki (.sb-live-dot, .mission-card-dot.running,
     .mc-live) oddychały samą przezroczystością. Dokładamy subtelną
     teal-poświatę, która pulsuje razem z opacity - puls świeci światłem. */
  0%, 100% { opacity: 0.9; box-shadow: 0 0 5px rgba(var(--signal-rgb, 228, 232, 233), .28); }
  50%      { opacity: 0.5; box-shadow: 0 0 10px rgba(var(--signal-rgb, 228, 232, 233), .50); }
}

/* ============================================================
   NAV (top navigation)
   Structure:
     <header class="nav">
       <div class="nav-section nav-left">  brand
       <nav class="nav-section nav-mid">    tabs (KOKPIT · MISJE · …)
       <div class="nav-section nav-right"> search, lang, user
   ============================================================ */

.nav {
  display: grid;
  /* #2653: boczne tory NIE kurczą się poniżej swojej zawartości. Przy
     `1fr auto 1fr` oba tory były z definicji równe, więc tor prawy dostawał
     (nav - środek)/2. Grupa narzędzi potrzebuje ~258px, a przy oknie 1440
     tor dawał 216px, więc wychodziła poza tor i dociskała ostatnią pozycję
     paska do zera na całym paśmie 1241-1560. Ta sama usterka co #1362, tylko
     przy 9 pozycjach zamiast 7; tamten fix zwęził odstępy w 901-1366 i pasmo
     wyżej zostawił. `minmax(max-content, 1fr)` domyka to strukturalnie:
     przy zapasie oba tory dostają równy udział i środek jest wyśrodkowany
     dokładnie jak dotąd (1600 i 1920 zmierzone bez zmian co do piksela),
     a przy ciasnocie kurczy się tor lewy. column-gap gwarantuje prześwit. */
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  column-gap: clamp(16px, 1.5vw, 32px);
  align-items: center;
  height: clamp(48px, 5vh, 64px);
  padding: 0 var(--page-pad-x);
  max-width: var(--page-max);
  width: 100%;
  margin: 0 auto;
  /* #2176 fix: prawdziwy nav to header.nav (.nav), NIE .cyrber-nav (martwy).
     Neutralna głębia na granicy nav/treść, spójna z unoszącymi się kartami.
     ZERO teal - nav współdzielony ze stronami ofensywnymi (design #1932).
     Tło przezroczyste: nieprzezroczyste --bg-canvas zabijało poświatę
     body::before (#2309) dokładnie pod paskiem, przez co nav czytał się
     jako czarna płyta doklejona nad stroną. Granicę niesie sam włos. */
  box-shadow: var(--border-subtle) 0 -1px 0 0 inset;
  background: transparent;
  animation: v5-fade-in 240ms ease both;
  position: relative;
  z-index: 10;
}
.nav-section { display: flex; align-items: center; }
.nav-left  { justify-content: flex-start; gap: 12px; }
.nav-mid   { gap: 32px; justify-self: center; }

/* Onboarding modal (injected by nav.js) - G-P3 hover polish (#1384 intro-modal). */
.cy-onboard-step:hover { background: rgba(var(--signal-rgb, 228, 232, 233), 0.06); box-shadow: inset 0 0 0 1px rgba(var(--signal-rgb, 228, 232, 233), 0.20); }
#onboardDismiss:hover { box-shadow: 0 0 22px rgba(var(--signal-rgb, 228, 232, 233), 0.40); transform: translateY(-1px); }
#onboardDismiss:active { transform: translateY(0) scale(0.98); }
.nav-right { justify-content: flex-end; gap: 12px; }

.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-wm {
  font-family: var(--font-brand);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: var(--ls-brand);
  color: var(--fg-primary);
}
.brand-dots { display: inline-flex; gap: 3px; }
.bd { width: 5px; height: 5px; border-radius: 50%; display: inline-block; opacity: 0.9; }
.bd-ratio  { background: var(--accent-ratio); }
.bd-animus { background: var(--accent-animus); }
.bd-fatum  { background: var(--accent-fatum); }

/* Cross-link back to marketing site (cyrber.com) - nav-left aux */
.nv-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--fg-tertiary);
  text-decoration: none;
  padding: 6px 8px;
  border-radius: var(--radius-xs);
  margin-right: 14px;
  transition: color 160ms cubic-bezier(0.2, 0, 0, 1),
              background 160ms cubic-bezier(0.2, 0, 0, 1);
}
.nv-back:hover {
  color: var(--fg-secondary);
  background: var(--bg-elevated);
}
.nv-back:focus-visible {
  outline: 2px solid var(--accent-warning);
  outline-offset: 2px;
}
/* #1384: chowaj redundantny back-link do cyrber.com poniżej 1440 - pełny app-nav
   (9 grup + brand + narzędzia) nie mieści się na typowych laptopach (1280/1366),
   nav-right wychodził poza viewport. Marka CYRBER i tak linkuje. */
@media (max-width: 1440px) {
  .nv-back { display: none; }
}

/* #2653: zwężenie odstępów w pasku na ciasnych oknach. Ten sam blok co
   cyrber-shell.css (tam od #1362), powielony tutaj dla stron ładujących
   base-v5.css bez shella. Dziewięć pozycji przy odstępie 32px potrzebuje
   997px i przy oknie 1440-1560 nie zostawiało prześwitu na grupę narzędzi.
   Powyżej 1560 odstęp zostaje 32px i układ jest nietknięty. */
@media (min-width: 901px) and (max-width: 1560px) {
  header.nav .nav-mid   { gap: 16px; }
  header.nav .nav-left  { gap: 8px; }
  header.nav .nav-right { gap: 8px; }
}
/* #3924: na https pasek dostaje dzwonek powiadomień (28px + odstęp), więc
   przy oknie 1280 prawa grupa kończyła się na 1284px, a przy 1241 na 1282px.
   Odstęp 10px między dziewięcioma pozycjami oddaje 48px (pomiar na prodzie:
   1241 → 1234, 1280 → 1242, 1366 bez zmian). Selektor `nav.nav-mid` przebija
   ten sam blok w cyrber-shell.css, który ładuje się po tym pliku. */
@media (min-width: 901px) and (max-width: 1366px) {
  header.nav nav.nav-mid { gap: 10px; }
}

.nv {
  white-space: nowrap;
  font-family: var(--font-brand);
  font-size: 11px;
  letter-spacing: var(--ls-nav);
  color: var(--fg-tertiary);
  padding: 14px 2px;
  position: relative;
  transition: color 200ms ease;
}
.nv:hover { color: var(--fg-primary); }
.nv.active { color: var(--fg-primary); }
.nv.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent-live);
}

/* ─── Baked-nav dropdown groups (injected by nav.js into pages with <nav.nav-mid>).
   Renders as flat .nv triggers with hover-revealed panel. Apple-style: open on
   hover (desktop), tap (mobile), ↓↑ navigate, Esc close. Symmetric 8px chevron,
   pixel-aligned panel underneath the trigger, single accent border at top. ─── */
.nv-group {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}
.nv-group > .nv {
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nv-group > .nv .nv-chev {
  width: 8px; height: 8px;
  display: inline-block;
  margin-left: 2px;
  opacity: 0.55;
  transition: transform 140ms ease-out, opacity 140ms ease-out;
}
.nv-group:hover > .nv .nv-chev,
.nv-group.open > .nv .nv-chev {
  transform: rotate(180deg);
  opacity: 1;
}
/* #427: dropdown panels removed in favor of persistent sub-nav strip.
   Kept rule for any DOM that still contains .nv-panel (graceful fallback) - display:none. */
.nv-group > .nv-panel { display: none !important; }
.nv-group > .nv .nv-chev { display: none; }
.nv-panel a {
  display: block;
  padding: 10px 14px;
  color: var(--fg-secondary, rgba(var(--ink-rgb, 255, 255, 255), 0.72));
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: background 140ms ease, color 140ms ease;
}
.nv-panel a:hover { background: rgba(56,139,253,0.08); color: var(--fg-primary); }
.nv-panel a.active { color: var(--fg-primary); background: rgba(var(--ink-rgb, 255, 255, 255), 0.04); }

/* #427: persistent horizontal sub-tabs strip below header.nav.
   Replaces dropdown panels - always visible when current section has children. */
.cyrber-subnav {
  display: block;
  width: 100%;
  border-bottom: 1px solid var(--border-subtle, rgba(var(--ink-rgb, 255, 255, 255), 0.06));
  /* Tło przezroczyste z tego samego powodu co header.nav: nieprzezroczyste
     --bg-canvas gasiło poświatę body::before (#2309) na wysokości paska, a
     ciężki cień (#2176) domykał obraz dwóch czarnych płyt doklejonych nad
     treścią. Granicę niesie sam włos border-bottom. */
  background: transparent;
}
.cyrber-subnav-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: var(--kk-max, 1400px);
  margin: 0 auto;
  padding: 8px 24px;
  flex-wrap: wrap;
}
.cyrber-subnav-crumb {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-tertiary, rgba(var(--ink-rgb, 255, 255, 255), 0.4));
}
.cyrber-subnav-chev {
  color: var(--fg-tertiary, rgba(var(--ink-rgb, 255, 255, 255), 0.35));
  font-size: 12px;
}
.cyrber-subnav-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.cyrber-subnav-tab {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 4px;
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fg-secondary, rgba(var(--ink-rgb, 255, 255, 255), 0.72));
  text-decoration: none;
  transition: color 140ms ease, background 140ms ease;
}
.cyrber-subnav-tab:hover {
  color: var(--fg-primary, #fff);
  background: rgba(var(--ink-rgb, 255, 255, 255), 0.04);
}
html[data-theme="light"] .cyrber-subnav-tab:hover { background: rgba(0,0,0,0.04); }
.cyrber-subnav-tab.active {
  color: var(--fg-primary, #fff);
  background: rgba(56,139,253,0.08);
}
/* #3809: etykieta zakładki zawsze w jednej linii; na wąskim ekranie pasek
   przewija się poziomo zamiast łamać „GDPR Art. 30” na 2-3 linie. */
.cyrber-subnav-tab-label { white-space: nowrap; }
.cyrber-subnav-tab-count {
  color: var(--fg-tertiary, rgba(var(--ink-rgb, 255, 255, 255), 0.4));
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.cyrber-subnav-tab:hover .cyrber-subnav-tab-count,
.cyrber-subnav-tab.active .cyrber-subnav-tab-count {
  color: var(--fg-secondary, rgba(var(--ink-rgb, 255, 255, 255), 0.72));
}

/* Per-group accent - left border on active tab matches section identity. */
nav.cyrber-subnav[data-group="missions"]   .cyrber-subnav-tab.active { box-shadow: inset 2px 0 0 var(--accent-ratio,  #5b7fa6); }
nav.cyrber-subnav[data-group="findings"]   .cyrber-subnav-tab.active { box-shadow: inset 2px 0 0 var(--accent-animus, #c76b62); }
nav.cyrber-subnav[data-group="operations"] .cyrber-subnav-tab.active { box-shadow: inset 2px 0 0 var(--accent-high,   #d1a15a); }
nav.cyrber-subnav[data-group="compliance"] .cyrber-subnav-tab.active { box-shadow: inset 2px 0 0 var(--accent-fatum,  #9a86c4); }
nav.cyrber-subnav[data-group="organism"]   .cyrber-subnav-tab.active { box-shadow: inset 2px 0 0 var(--accent-live,   var(--accent-signal, #e4e8e9)); }

/* #3924: podmenu Operacji ma 14 zakładek i przy 1280 potrzebowało 1245 px
   na pasie 1203 px, więc „Suasor” spadał do drugiej linii. Padding 8px
   oddaje 112 px i mieści pas w jednej linii od 1241 px. */
@media (min-width: 761px) and (max-width: 1366px) {
  .cyrber-subnav-tab { padding: 6px 8px; }
}
@media (max-width: 760px) {
  .cyrber-subnav-inner { padding: 6px 12px; gap: 10px; }
  .cyrber-subnav-tabs { overflow-x: auto; flex-wrap: nowrap; min-width: 0; max-width: 100%; }
  /* Cel dotyku: zakladki podmenu mialy 30 px, prog z #3629 PR2 to 32 px. */
  .cyrber-subnav-tab { padding: 6px 8px; flex-shrink: 0; min-height: 32px; align-items: center; }
}

.nv-btn {
  display: inline-flex; align-items: center; gap: 4px;
  height: 28px; padding: 0 10px;
  border-radius: var(--radius-xs);
  box-shadow: var(--border-subtle) 0 0 0 1px inset;
  background: transparent;
  font-family: var(--font-data);
  font-size: 12px;
  color: var(--fg-secondary);
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.nv-btn:hover {
  background: var(--bg-elevated);
  box-shadow: var(--border-default) 0 0 0 1px inset;
  color: var(--fg-primary);
}
.nv-icon { width: 28px; padding: 0; justify-content: center; font-size: 14px; }
.cmd-g { font-family: 'Inter', sans-serif; font-size: 13px; }

.nv-user-wrap { position: relative; display: inline-flex; }
.nv-user {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px 0 12px;
  border-radius: var(--radius-xs);
  font-family: var(--font-brand);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--fg-secondary);
  background: transparent; cursor: pointer;
  transition: color 200ms ease, background 160ms;
}
.nv-user:hover,
.nv-user[aria-expanded="true"] {
  color: var(--fg-primary);
  background: var(--bg-elevated);
}
.chev {
  font-size: 11px; color: var(--fg-tertiary); margin-top: 1px;
  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.nv-user[aria-expanded="true"] .chev { transform: rotate(180deg); color: var(--fg-primary); }

/* ── Avatar user dropdown - CANON (single source of truth)
     Wszystkie inne pliki CSS (cyrber-shell, admin-v5, kokpit-v5, nav-kokpit-canon)
     mają puste sekcje .nvu-* - base-v5.css jest jedynym definitorem. Zmiana
     stylu robiona TYLKO tutaj. Apple-grade: matematyczna symetria, spójny
     język typograficzny (Inter dla tekstu, monospace tylko dla labels). ── */
.nv-user-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 240px;
  padding: 4px 0;
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow:
    0 1px 0 0 rgba(var(--ink-rgb, 255, 255, 255), 0.04) inset,
    0 12px 32px -8px rgba(0, 0, 0, 0.6),
    0 4px 12px -4px rgba(0, 0, 0, 0.4);
  z-index: 80;
  animation: v5-nvu-in 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
.nv-user-menu[hidden] { display: none; }
@keyframes v5-nvu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nvu-head {
  padding: 12px 14px 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.nvu-name {
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 500;
  color: var(--fg-primary);
  line-height: 1.25;
  letter-spacing: 0;
}
.nvu-sub {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-data);
  font-size: 11px; letter-spacing: 0.08em;
  color: var(--fg-tertiary);
}
.nvu-sub .role-badge {
  display: inline-block;
  padding: 1px 6px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--bg-elevated);
  color: var(--fg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 2px;
}
.nvu-sub .role-badge.admin,
.nvu-sub .role-badge.superadmin,
.nvu-sub .role-badge.owner { color: var(--accent-ratio); border-color: rgba(56, 139, 253, 0.3); }
.nvu-sub .role-badge.operator { color: var(--fg-secondary); }

.nvu-sep,
.nvu-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 4px 0;
  border: 0;
}
.nvu-section-label {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  padding: 8px 14px 4px;
  opacity: 0.85;
}

.nvu-links { padding: 0; display: flex; flex-direction: column; }
/* #3634: .nv-user-menu .nvu-logout też jest wierszem menu. 17 stron miało sam
   nvu-logout bez nvu-item i reset `button { padding: 0 }` robił z Wyloguj
   wąski, wyśrodkowany napis przy lewej krawędzi. */
.nvu-item,
.nv-user-menu .nvu-logout {
  display: flex;
  align-items: center;
  width: 100%;
  height: 32px;
  padding: 0 14px;
  background: transparent;
  border: 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 400;
  color: var(--fg-secondary);
  text-align: left;
  text-decoration: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, padding-left 160ms ease;
}
.nvu-item:hover,
.nvu-item:focus-visible {
  background: var(--bg-elevated);
  color: var(--fg-primary);
  outline: none;
  padding-left: 16px;  /* subtle nudge - Apple-style affordance */
}
.nvu-item.is-current {
  background: var(--bg-elevated);
  color: var(--fg-primary);
  box-shadow: var(--accent-ratio) 2px 0 0 inset;
}
/* Drop the › arrow on every row - Apple-style menus don't need it.
   Keep for backwards-compat with content but visually mute. */
.nvu-item .nvu-arrow {
  margin-left: auto;
  color: var(--fg-tertiary);
  font-size: 11px;
  opacity: 0;
  transition: opacity 160ms ease;
}
.nvu-item:hover .nvu-arrow { opacity: 0.6; }

.nvu-logout,
.nv-user-menu .nvu-logout {
  color: var(--accent-animus);
  margin-top: 2px;
}
.nvu-logout:hover,
.nv-user-menu .nvu-logout:hover {
  color: var(--accent-animus);
  background: color-mix(in oklab, var(--accent-animus) 8%, transparent);
}

/* ============================================================
   STATUSBAR (bottom - kontekstowe liczniki + MENS peek + actions)
   ============================================================ */

/* ============================================================
   ADR-001 Capability Bus - consent modal (confirm + MFA TOTP)
   Apple-grade: matematyczna symetria, jeden język stylistyczny.
   ============================================================ */
.cap-consent-scrim {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  animation: v5-fade-in 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
.cap-consent-modal {
  /* #201 #200 root cause: modal was position:static and rendered below
     the scrim (z-index 1100), so operators saw only the dimmed backdrop
     and assumed the confirm/TOTP step never opened. Center via fixed
     positioning, lift above the scrim. */
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1101;
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 28px 32px;
  min-width: 380px; max-width: 480px;
  box-shadow:
    0 1px 0 0 rgba(var(--ink-rgb, 255, 255, 255), 0.04) inset,
    0 24px 48px -12px rgba(0, 0, 0, 0.7),
    0 8px 16px -4px rgba(0, 0, 0, 0.5);
  animation: v5-fade-in 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.cap-consent-title {
  font-family: var(--font-brand);
  font-size: 14px; font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--fg-primary);
  margin-bottom: 6px;
}
.cap-consent-sub {
  font-family: var(--font-data);
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--fg-tertiary);
  margin-bottom: 20px;
  word-break: break-all;
  opacity: 0.8;
}
.cap-consent-confirm-text,
.cap-consent-mfa-label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--fg-secondary);
  line-height: 1.5;
  margin-bottom: 16px;
}
.cap-consent-mfa-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-canvas);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  color: var(--fg-primary);
  font-family: 'JetBrains Mono', monospace;
  font-size: 24px;
  letter-spacing: 0.1em;
  text-align: center;
  margin-bottom: 20px;
  transition: border-color 160ms;
}
.cap-consent-mfa-input:focus {
  outline: none;
  border-color: var(--accent-ratio);
}
.cap-consent-mfa-input.cap-consent-input-error {
  border-color: var(--accent-animus);
  animation: shake 200ms;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}
.cap-consent-btns {
  display: flex; gap: 10px; justify-content: flex-end;
}
.cap-consent-cancel,
.cap-consent-ok {
  padding: 9px 18px;
  border-radius: 4px;
  font-family: var(--font-data);
  font-size: 11px; letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 160ms, color 160ms, border-color 160ms;
}
.cap-consent-cancel {
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--fg-secondary);
}
.cap-consent-cancel:hover {
  background: var(--bg-elevated);
  color: var(--fg-primary);
}
.cap-consent-ok {
  background: var(--accent-signal);
  border: 1px solid var(--accent-ratio);
  color: var(--on-signal, #0d1011);
}
.cap-consent-ok:hover {
  background: var(--signal-hover, #ffffff);
  border-color: var(--signal-hover, #ffffff);
}
.cap-consent-ok.cap-consent-input-error { animation: shake 200ms; }

/* ABM Intensify - mode-escalation option list inside the consent modal.
   Accent is ANIMUS-red: escalation is an offensive act, not a neutral one. */
.abm-inten-opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 16px;
}
.abm-inten-opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-canvas);
  border: 1px solid var(--border-default);
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  transition: border-color 140ms ease, background 140ms ease;
}
.abm-inten-opt:hover { border-color: var(--border-strong); background: var(--bg-elevated); }
.abm-inten-opt.selected {
  border-color: var(--accent-animus);
  background: rgba(248, 81, 73, 0.08);
}
.abm-inten-mode {
  font-family: var(--font-data);
  font-size: 13px; letter-spacing: 0.12em;
  color: var(--fg-primary);
}
.abm-inten-opt.selected .abm-inten-mode { color: var(--accent-animus); }
.abm-inten-desc {
  font-family: var(--font-data);
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--fg-tertiary);
}

/* ============================================================
   F5 Capability Catalog - dropdown + form modal + toast
   Reuses base-v5 tokens; aesthetics aligned with kokpit canon.
   ============================================================ */
.cap-cat-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; height: 30px;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  color: var(--fg-secondary);
  font-family: var(--font-data);
  font-size: 11px; letter-spacing: 0.12em;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.cap-cat-btn:hover,
.cap-cat-btn.is-open {
  background: var(--bg-elevated);
  color: var(--fg-primary);
  border-color: var(--accent-ratio);
}
.cap-cat-btn--empty { opacity: 0.5; cursor: default; }
.cap-cat-btn--empty:hover { background: transparent; border-color: var(--border-default); }
.cap-cat-btn-icon { display: inline-block; transform: rotate(90deg); font-size: 11px; }
.cap-cat-btn.is-open .cap-cat-btn-icon { transform: rotate(-90deg); }
/* Upward-opening variants: caret points up (closed) → down (open) */
.statusbar > .cap-cat-btn--inline .cap-cat-btn-icon,
.cap-cat-btn--float .cap-cat-btn-icon { transform: rotate(-90deg); }
.statusbar > .cap-cat-btn--inline.is-open .cap-cat-btn-icon,
.cap-cat-btn--float.is-open .cap-cat-btn-icon { transform: rotate(90deg); }
.cap-cat-btn-count { color: var(--fg-tertiary); font-size: 11px; }

/* Inline variant - mounted inside .statusbar, mirrors glass house gh--inline.
   Same font language as GLASS HOUSE (Unbounded 10px) + subtle interactive tint. */
.statusbar > .cap-cat-btn--inline {
  height: auto;
  padding: 0 6px 0 6px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  font-family: var(--font-brand);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--fg-tertiary, #6b6b6b);
  opacity: 0.85;
  margin-left: 14px;
  box-shadow: -1px 0 0 0 var(--border-subtle, rgba(var(--ink-rgb, 255, 255, 255), 0.06));
}
.statusbar > .cap-cat-btn--inline:hover,
.statusbar > .cap-cat-btn--inline.is-open {
  background: var(--bg-elevated, rgba(var(--ink-rgb, 255, 255, 255), 0.05));
  color: var(--fg-primary, #fafafa);
  opacity: 1;
}
.statusbar > .cap-cat-btn--inline .cap-cat-btn-count {
  font-family: var(--font-brand);
  font-size: 11px;
}

/* Float variant - legacy pages without statusbar; sits above the floating
   glass house chip (which is bottom:60px) in the same corner. */
.cap-cat-btn--float {
  position: fixed;
  right: 16px;
  bottom: 96px;
  z-index: 30;
  background: rgba(10,10,10,0.55);
  border: 1px solid rgba(95, 160, 127,0.2);
  border-radius: 100px;
  font-family: var(--font-brand);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--fg-tertiary, #6b6b6b);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0.7;
}
.cap-cat-btn--float:hover,
.cap-cat-btn--float.is-open {
  opacity: 1;
  border-color: rgba(95, 160, 127,0.6);
  color: var(--fg-primary, #fafafa);
}
@media (max-width: 640px) {
  .statusbar > .cap-cat-btn--inline { margin-left: 8px; padding-left: 4px; }
  .statusbar > .cap-cat-btn--inline .cap-cat-btn-label { display: none; }
  .cap-cat-btn--float { right: 8px; bottom: 52px; font-size: 11px; }
}

.cap-cat-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 10px;
  min-width: 380px; max-width: 520px;
  max-height: 70vh; overflow-y: auto;
  z-index: 1090;
  box-shadow: 0 16px 32px -8px rgba(var(--shade-rgb, 0, 0, 0), 0.6),
              0 4px 12px -2px rgba(0,0,0,0.4);
  animation: v5-fade-in 160ms cubic-bezier(0.4,0,0.2,1);
}
.cap-cat-empty { padding: 20px; color: var(--fg-tertiary); text-align: center;
  font-family: 'Inter', sans-serif; font-size: 13px; }

/* F5.1.D - search box (only renders when caps > threshold) */
.cap-cat-search {
  width: 100%;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: var(--bg-canvas);
  border: 1px solid var(--border-default);
  border-radius: 4px;
  color: var(--fg-primary);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  transition: border-color 140ms;
  -webkit-appearance: none;
  appearance: none;
}
.cap-cat-search:focus {
  outline: none;
  border-color: var(--accent-ratio);
}
.cap-cat-search::placeholder {
  color: var(--fg-tertiary);
  font-style: italic;
}
.cap-cat-rows-host { display: flex; flex-direction: column; gap: 0; }
.cap-cat-section { margin-bottom: 8px; }
.cap-cat-section-title {
  font-family: var(--font-brand);
  font-size: 11px; letter-spacing: 0.1em;
  color: var(--fg-tertiary);
  padding: 6px 8px 3px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 4px;
}
.cap-cat-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.cap-cat-row:hover,
.cap-cat-row.is-active {
  background: var(--bg-elevated);
  border-color: var(--border-default);
}
.cap-cat-row.is-active {
  /* F5.1.E keyboard nav - accent border-left żeby wyróżnić od mouse hover */
  border-left: 2px solid var(--accent-ratio);
  padding-left: 8px;
}
.cap-cat-row-left { flex: 1; min-width: 0; }
.cap-cat-row-title {
  font-family: 'Inter', sans-serif;
  font-size: 13px; color: var(--fg-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cap-cat-row-id {
  font-family: var(--font-data);
  font-size: 11px; color: var(--fg-tertiary);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.cap-cat-row-badges {
  display: flex; gap: 4px; flex-shrink: 0;
}
.cap-cat-badge {
  font-family: var(--font-data);
  font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--border-subtle);
  color: var(--fg-tertiary);
}
.cap-cat-badge--read         { color: var(--accent-live); border-color: var(--accent-live); opacity: 0.85; }
.cap-cat-badge--mutate       { color: var(--accent-ratio); border-color: var(--accent-ratio); opacity: 0.9; }
.cap-cat-badge--destructive  { color: var(--accent-animus); border-color: var(--accent-animus); }
.cap-cat-badge--external     { color: var(--accent-fatum); border-color: var(--accent-fatum); }
.cap-cat-badge--consent-mfa  { color: var(--accent-animus); border-color: var(--accent-animus); font-weight: 600; }
.cap-cat-badge--consent-confirm { color: var(--fg-secondary); border-color: var(--border-default); }
.cap-cat-badge--scope-owner  { color: var(--accent-warning); border-color: var(--accent-warning); }
.cap-cat-badge--scope-admin  { color: var(--accent-ratio); border-color: var(--accent-ratio); opacity: 0.7; }
.cap-cat-badge--scope-operator { color: var(--fg-secondary); border-color: var(--border-default); }
.cap-cat-badge--scope-client { color: var(--fg-tertiary); border-color: var(--border-subtle); }
/* F6.2 - deprecated badge */
.cap-cat-badge--deprecated {
  color: var(--accent-animus);
  border-color: var(--accent-animus);
  font-weight: 700;
  letter-spacing: 0.10em;
  background: rgba(248, 81, 73, 0.06);
}
/* F7.2 - composite badge */
.cap-cat-badge--composite {
  color: var(--accent-fatum);
  border-color: var(--accent-fatum);
  font-weight: 600;
  letter-spacing: 0.10em;
  background: rgba(188, 140, 255, 0.06);
}
.cap-cat-row.is-deprecated {
  opacity: 0.7;
  background: rgba(248, 81, 73, 0.03);
}
.cap-cat-row.is-deprecated:hover,
.cap-cat-row.is-deprecated.is-active {
  opacity: 1;
  background: rgba(248, 81, 73, 0.10);
  border-color: var(--accent-animus);
}
.cap-cat-row.is-deprecated .cap-cat-row-title {
  text-decoration: line-through;
  text-decoration-color: var(--accent-animus);
  text-decoration-thickness: 1px;
}
/* Toggle row above search */
.cap-cat-dep-toggle {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  margin-bottom: 6px;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  font-family: var(--font-data);
  font-size: 11px; letter-spacing: 0.10em;
  color: var(--fg-tertiary);
  cursor: pointer;
  user-select: none;
}
.cap-cat-dep-toggle input { cursor: pointer; }
.cap-cat-dep-toggle:hover { color: var(--fg-secondary); border-color: var(--border-default); }

/* Form modal - same canvas as cap-consent-modal */
.cap-cat-form-scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(6px);
  z-index: 1100;
  animation: v5-fade-in 160ms cubic-bezier(0.4,0,0.2,1);
}
.cap-cat-form-modal {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%);
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 28px 32px;
  min-width: 440px; max-width: 560px;
  max-height: 80vh; overflow-y: auto;
  z-index: 1110;
  box-shadow: 0 1px 0 0 rgba(var(--ink-rgb, 255, 255, 255), 0.04) inset,
              0 24px 48px -12px rgba(0,0,0,0.7),
              0 8px 16px -4px rgba(0,0,0,0.5);
  animation: v5-fade-in 200ms cubic-bezier(0.4,0,0.2,1);
}
.cap-cat-form-title {
  font-family: var(--font-brand);
  font-size: 14px; font-weight: 500; letter-spacing: 0.06em;
  color: var(--fg-primary);
  margin-bottom: 4px;
}
.cap-cat-form-id {
  font-family: var(--font-data);
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--fg-tertiary);
  margin-bottom: 12px;
}
.cap-cat-form-summary {
  font-family: 'Inter', sans-serif;
  font-size: 12px; color: var(--fg-secondary);
  line-height: 1.55;
  padding: 10px 12px;
  background: var(--bg-canvas);
  border-left: 2px solid var(--border-default);
  border-radius: 3px;
  margin-bottom: 18px;
}
.cap-cat-form-empty {
  font-family: 'Inter', sans-serif;
  font-size: 12px; color: var(--fg-tertiary); font-style: italic;
  padding: 12px 0;
}
.cap-cat-form-label {
  display: block;
  font-family: var(--font-data);
  font-size: 11px; letter-spacing: 0.1em;
  color: var(--fg-tertiary);
  text-transform: uppercase;
  margin: 12px 0 4px;
}
.cap-cat-form-input {
  width: 100%;
  padding: 8px 10px;
  background: var(--bg-canvas);
  border: 1px solid var(--border-default);
  border-radius: 4px;
  color: var(--fg-primary);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  transition: border-color 140ms;
}
.cap-cat-form-input:focus {
  outline: none;
  border-color: var(--accent-ratio);
}
.cap-cat-form-error {
  margin-top: 14px;
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--accent-animus);
  min-height: 16px;
}
.cap-cat-form-btns {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 18px;
}
.cap-cat-form-cancel,
.cap-cat-form-submit {
  padding: 9px 18px;
  border-radius: 4px;
  font-family: var(--font-data);
  font-size: 11px; letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 160ms, color 160ms, border-color 160ms;
  color: var(--on-signal, #0d1011);
}
.cap-cat-form-cancel {
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--fg-secondary);
}
.cap-cat-form-cancel:hover { background: var(--bg-elevated); color: var(--fg-primary); }
.cap-cat-form-submit {
  background: var(--accent-signal);
  border: 1px solid var(--accent-signal);
  color: var(--on-signal, #0d1011);
}
.cap-cat-form-submit:hover { background: #2c7be5; border-color: #2c7be5; }
.cap-cat-form-submit:disabled { opacity: 0.6; cursor: wait; }

/* Toast */
.cap-cat-toast {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  z-index: 1200;
  display: flex; flex-direction: column; gap: 6px;
  pointer-events: none;
}
.cap-cat-toast-line {
  font-family: var(--font-data);
  font-size: 12px; letter-spacing: 0.04em;
  padding: 10px 16px;
  background: var(--bg-panel);
  border: 1px solid var(--border-default);
  border-radius: 4px;
  color: var(--fg-primary);
  box-shadow: 0 8px 16px -4px rgba(var(--shade-rgb, 0, 0, 0), 0.5);
  animation: v5-fade-in 200ms ease;
  max-width: 560px;
}
.cap-cat-toast--success { border-left: 3px solid var(--sev-ok, #5fa07f); }
.cap-cat-toast--error   { border-left: 3px solid var(--accent-animus); }

.statusbar {
  padding: clamp(11px, 1vh, 14px) var(--page-pad-x);
  max-width: var(--page-max);
  width: 100%;
  margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  box-shadow: var(--border-subtle) 0 1px 0 0 inset;
  font-family: var(--font-data);
  font-size: var(--font-body-small);
  color: var(--fg-tertiary);
  animation: v5-fade-in 300ms 500ms ease both;
}
.sb-live {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--accent-live);
}
.sb-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-live);
  animation: v5-pulse 2s ease-in-out infinite;
}
.sb-sep { color: var(--fg-tertiary); margin: 0 4px; }
.sb-counter { color: var(--fg-secondary); }
.sb-counter strong { color: var(--fg-primary); font-weight: 500; }
.sb-counter.critical { color: var(--accent-critical); }
.sb-counter.critical strong { color: var(--accent-critical); }

.sb-peek {
  flex: 1;
  text-align: center;
  color: var(--fg-tertiary);
  font-style: italic;
  opacity: 0;
  transition: opacity 240ms ease;
}
.sb-peek.active { opacity: 1; }
.sb-peek.critical { color: var(--accent-animus); font-style: normal; }

.sb-actions {
  display: inline-flex; gap: 8px; margin-left: auto;
}
.sb-action {
  font-family: var(--font-data);
  font-size: 11px; letter-spacing: 0.08em;
  color: var(--fg-secondary);
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  box-shadow: var(--border-subtle) 0 0 0 1px inset;
  transition: color 160ms, background 160ms, box-shadow 160ms;
}
.sb-action:hover {
  color: var(--fg-primary);
  background: var(--bg-elevated);
  box-shadow: var(--border-default) 0 0 0 1px inset;
}

/* ============================================================
   AGENT BAR (bottom - persistent MENS input, glassmorphism)
   Placeholder varies per tab - JS sets it on boot.
   ============================================================ */

.agent-bar {
  max-width: var(--page-max);
  width: 100%;
  margin: 0 auto;
  padding: clamp(11px, 1vh, 14px) var(--page-pad-x);
  animation: v5-fade-in 300ms 400ms ease both;
  position: relative;
}
.agent-bar-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  height: clamp(44px, 5vh, 56px);
  padding: 0 clamp(12px, 1vw, 18px);
  border-radius: var(--radius-md);
  background: rgba(var(--ink-rgb, 255, 255, 255), 0.025);
  backdrop-filter: blur(8px);
  box-shadow: var(--border-default) 0 0 0 1px inset;
}
.agent-bar-icon {
  color: var(--accent-ratio);
  font-family: var(--font-data);
  font-size: 13px;
}
.agent-bar-input {
  flex: 1;
  outline: none;
  font-family: 'Inter', sans-serif;
  font-size: var(--font-body);
  color: var(--fg-primary);
}
.agent-bar-input::placeholder {
  color: var(--fg-tertiary);
}
.agent-bar-send {
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--fg-tertiary);
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  transition: color 160ms, background 160ms;
}
.agent-bar-send:hover { color: var(--accent-ratio); background: rgba(86, 194, 255, 0.08); }

/* ============================================================
   SHARED UTILITIES
   ============================================================ */

.mono { font-family: var(--font-data); }
.orbitron { font-family: var(--font-brand); }
.microlabel {
  font-family: var(--font-data);
  font-size: var(--font-microlabel);
  letter-spacing: 0.1em;
  color: var(--fg-tertiary);
  text-transform: uppercase;
}

/* ============================================================
   Scroll-to-top button - injected by utils.js into every page
   except kokpit (fixed-viewport grid). Without explicit styling
   it renders as a naked "↑" in body flow; v5 tabs don't load
   theme.css so we restyle it here.
   ============================================================ */
#cyrberScrollTop {
  position: fixed;
  right: 20px;
  bottom: 92px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(15, 15, 15, 0.8);
  color: var(--fg-tertiary);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--border-default) 0 0 0 1px inset,
              rgba(0, 0, 0, 0.35) 0 4px 12px -2px;
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 180ms ease, transform 180ms ease,
              color 160ms ease, box-shadow 160ms ease;
  z-index: 60;
  cursor: pointer;
}
#cyrberScrollTop.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
#cyrberScrollTop:hover {
  color: var(--fg-primary);
  box-shadow: var(--border-strong) 0 0 0 1px inset,
              rgba(0, 0, 0, 0.4) 0 6px 16px -2px;
}

/* Loading bar - also injected by utils.js. */
#cyrberLoadingBar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--accent-live);
  box-shadow: 0 0 8px rgba(95, 160, 127, 0.4);
  transition: width 300ms ease, opacity 200ms ease;
  opacity: 0;
  z-index: 200;
  pointer-events: none;
}
#cyrberLoadingBar.active { opacity: 1; }

/* ============================================================
   Mobile nav - hamburger collapse below 900px.
   Hides the inline 7-group bar, swaps in a touch-target burger
   that opens a fixed slide-down panel listing every group +
   children stacked vertically. Tap-friendly: 44px min targets
   (Apple HIG), tap-to-expand on group, body scroll lock while
   open. nav.js _ensureMobileNavToggle injects the button.
   ============================================================ */
.nv-mobile-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border-subtle, rgba(var(--ink-rgb, 255, 255, 255), 0.08));
  border-radius: var(--radius-xs, 6px);
  cursor: pointer;
  padding: 0;
  width: 44px;
  height: 44px;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0 8px;
  transition: border-color 140ms ease, background 140ms ease;
}
.nv-mobile-toggle:hover {
  border-color: var(--accent-live);
  background: rgba(95, 160, 127, 0.04);
}
.nv-burger-bar {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--fg-secondary, rgba(var(--ink-rgb, 255, 255, 255), 0.72));
  transition: transform 200ms ease, opacity 200ms ease;
  border-radius: 1px;
}
body.cyrber-nav-open .nv-burger-bar:nth-child(1) {
  transform: translateY(3.25px) rotate(45deg);
}
body.cyrber-nav-open .nv-burger-bar:nth-child(2) {
  transform: translateY(-3.25px) rotate(-45deg);
}

/* Burger collapse breakpoint raised 900→1240 (#1384 PR-B): the full 9-group
   nav-mid overflows below ~1240px (burger previously only kicked in ≤900,
   leaving a 901-1240 dead zone where the inline bar overlapped brand/controls).
   Only the burger show + nav-mid collapse + full-screen menu live here; the
   aggressive ≤900 mobile trims (hiding cmdK/lang/dots) stay in their own block below. */
@media (max-width: 1240px) {
  .nv-mobile-toggle { display: inline-flex; }
  /* Inline group bar hidden by default; only the open class shows it. */
  nav.nav-section.nav-mid {
    display: none;
  }
  body.cyrber-nav-open nav.nav-section.nav-mid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    max-width: 100vw;
    background: var(--bg-canvas);
    z-index: 998;
    padding: 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
    border-top: 1px solid var(--border-subtle, rgba(var(--ink-rgb, 255, 255, 255), 0.06));
    animation: v5-fade-in 200ms ease both;
    box-sizing: border-box;
  }
  /* Lock the document scroll while overlay is open so the page behind
     does not bounce-scroll when finger drags within the menu. */
  body.cyrber-nav-open { overflow: hidden; }

  body.cyrber-nav-open .nv-group {
    display: block;
    width: 100%;
    border-bottom: 1px solid var(--border-subtle, rgba(var(--ink-rgb, 255, 255, 255), 0.05));
  }
  body.cyrber-nav-open .nv-group > .nv {
    width: 100%;
    padding: 16px 8px;
    min-height: 44px;
    font-size: 13px;
    letter-spacing: 0.1em;
    justify-content: space-between;
  }
  body.cyrber-nav-open .nv-group > .nv .nv-chev {
    width: 12px;
    height: 12px;
    opacity: 0.8;
  }
  /* On mobile, every group's panel is always expanded - single scroll, no
     accordion gymnastics. Hover/focus rules stay desktop-only. */
  body.cyrber-nav-open .nv-group > .nv-panel {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 4px 0 12px 16px;
    min-width: 0;
  }
  body.cyrber-nav-open .nv-panel a {
    padding: 12px 14px;
    font-size: 12px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* Genuine mobile (≤900px): trim the right cluster + logo dots so the header
   fits down to 375px. NOT applied in 901-1240 - there the burger shows but
   cmdK/lang/user stay visible (plenty of room once nav-mid collapses). */
@media (max-width: 900px) {
  /* Right-side cluster: keep only the user dropdown on mobile. The other
     controls (fullscreen toggle, ⌘K palette, lang switcher) live inside
     /ustawienia or duplicate functionality the burger menu provides
     (search ≈ agent-bar). Trimming here is what stops nav from
     overflowing 375px viewports. */
  .nav-right #fsToggle,
  .nav-right #openCmdK,
  .nav-right #langToggle,
  .nav-right .nav-lang,
  .nav-right .nav-theme,
  .nav-right .nav-silence,
  .nav-right .nav-sound,
  .nav-right .nav-raw { display: none; }

  /* Header total width must equal viewport - at 375px the colored health
     dots after the logo (.nv-pulse-dots / equivalent) push nav-left
     to 166px which spills nav-right past the right edge. Shrink left
     cluster: hide the dots, tighten logo gap. */
  header.nav { box-sizing: border-box; max-width: 100vw; padding-left: 10px; padding-right: 10px; gap: 6px; }
  .nav-left .nv-pulse-dots,
  .nav-left .nav-status-dots,
  .nav-left .nv-dots { display: none; }
  .nav-left { gap: 6px; min-width: 0; }
  .nv-mobile-toggle { margin: 0 4px; flex-shrink: 0; }
  .nav-right { flex-shrink: 0; min-width: 0; }

  /* #4134: tor prawy mial minmax(max-content, 1fr) i rosl z nazwa
     uzytkownika. Przy 390 px (org233-client) .nav-right konczyl sie na
     437 px, a dzwonek powiadomien lezal poza ekranem. Tor prawy kurczy sie
     do szerokosci ekranu, nazwa skraca sie wielokropkiem, ikony zostaja. */
  header.nav { grid-template-columns: max-content auto minmax(0, 1fr); }
  /* Bez stalej szerokosci siatka mierzy sekcje po tresci (min-content z
     pelna nazwa) i sekcja wychodzi poza tor mimo minmax(0, 1fr). */
  header.nav .nav-right { width: 100%; gap: 6px; }
  .nav-right > .nv-btn { flex-shrink: 0; }
  .nav-right .nv-user-wrap { min-width: 0; flex-shrink: 1; }
  .nav-right .nv-user { min-width: 0; max-width: 100%; }
  #navUserName { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ============================================================
   Mobile fallback - prevents horizontal body scroll on narrow
   viewports (≤720px). Legacy 720px rules still apply for
   pages that fall back to the old non-baked nav structure.
   ============================================================ */
@media (max-width: 720px) {
  /* clip zamiast hidden na body: hidden robi z body scroller (overflow-y:auto)
     i pasek toggluje bez rezerwacji -> skok w bok. #2309. */
  html { overflow-x: hidden; max-width: 100vw; }
  body { overflow-x: clip; max-width: 100vw; }

  .nav {
    padding: 8px 12px;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .nav-left  { flex-shrink: 0; }
  .nav-right { flex-shrink: 0; gap: 6px; }

  .nav-mid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    min-width: 0;
    justify-content: flex-start;
    gap: 6px;
    padding: 2px 4px;
  }
  .nav-mid::-webkit-scrollbar { display: none; }
  .nav-mid .nv {
    flex-shrink: 0;
    font-size: 11px;
    padding: 4px 8px;
    letter-spacing: 0.12em;
  }

  .statusbar {
    padding: 6px 12px;
    font-size: 11px;
    flex-wrap: wrap;
    gap: 6px;
  }
  .sb-left, .sb-right, .sb-mid { min-width: 0; }
  .sb-mid { flex: 1 1 100%; order: 3; font-size: 11px; }
}

/* ============================================================
   App footer - cross-link row injected by nav.js on every v5 page.
   Static-flow below statusbar. Minimal mono type, no background.
   ============================================================ */
.app-footer {
  max-width: var(--page-max);
  width: 100%;
  margin: 0 auto;
  padding: clamp(11px, 1.2vh, 18px) var(--page-pad-x) clamp(14px, 1.6vh, 24px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-data);
  font-size: var(--font-microlabel);
  color: var(--fg-tertiary);
  letter-spacing: 0.08em;
  box-shadow: inset 0 1px 0 var(--border-subtle);
  animation: v5-fade-in 300ms 700ms ease both;
}
.app-footer-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.af-copy { color: var(--fg-tertiary); }
.af-slogan {
  color: var(--fg-tertiary);
  font-style: italic;
}
.af-sep {
  color: var(--fg-tertiary);
  user-select: none;
  margin: 0 2px;
}
.app-footer-links {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}
.app-footer-links a {
  color: var(--fg-tertiary);
  text-decoration: none;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  transition: color 160ms cubic-bezier(0.2, 0, 0, 1),
              background 160ms cubic-bezier(0.2, 0, 0, 1);
}
.app-footer-links a:hover {
  color: var(--accent-warning);
  background: var(--bg-elevated);
}
.app-footer-links a:focus-visible {
  outline: 2px solid var(--accent-warning);
  outline-offset: 2px;
}
@media (max-width: 640px) {
  .app-footer { flex-direction: column; align-items: flex-start; }
  .af-slogan { display: none; }
}

/* ============================================================
   EKG heartbeat - kokpit-style sweep mask (comet effect)
   nav.js injects .cyrber-ekg > .ekg-wrapper > svg on any page that
   doesn't already have an inline .ekg-wrapper (e.g., kokpit has its
   own). Watermark (Orthrus img) was removed globally 2026-04-24 -
   Michał preference: "wywal watermark, EKG delikatne jak kokpit".
   ============================================================ */
.cyrber-ekg {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(56px, 6vh, 84px);
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  opacity: 0.35;
  mix-blend-mode: screen;
}
.cyrber-ekg .ekg-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  animation: v5-fade-in 600ms 500ms ease both;
}
.cyrber-ekg .ekg-svg {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}
.cyrber-ekg .ekg-waveform {
  stroke: var(--accent-signal, #e4e8e9);
  stroke-width: 1.5;
  fill: none;
  filter: drop-shadow(0 0 3px rgba(var(--signal-rgb, 228, 232, 233), 0.5));
  vector-effect: non-scaling-stroke;
  transition: stroke 1.2s ease, filter 1.2s ease;
}
.cyrber-ekg .ekg-mask-window {
  animation: ekg-sweep 4.5s linear infinite;
  will-change: transform;
}
.cyrber-ekg .ekg-wrapper.ekg-fast .ekg-mask-window { animation-duration: 2.4s; }
@keyframes ekg-sweep {
  from { transform: translateX(-600px); }
  to   { transform: translateX(1500px); }
}
/* #274 pseudo-fullscreen REMOVED 2026-05-19 (third iteration). Plain browser
   Fullscreen API on `⛶` is the chosen path - click toggles real fullscreen
   (browser chrome hides), ESC exits, nav clicks naturally drop out (browser
   security: no programmatic re-entry without user gesture). Operators who
   want fullscreen-that-persists-across-nav install CYRBER as a PWA
   (manifest + SW shipped 2026-05-19, dedicated app window from the OS). */

/* Visual state on the toggle so the operator can tell at a glance whether
   fullscreen is on without test-clicking. */
.nv-btn#fsToggle.is-active,
#navFullscreenBtn.is-active {
  background: rgba(56, 139, 253, 0.18);
  color: var(--accent-ratio);
}

@media (max-width: 640px) {
  .cyrber-ekg { display: none; }
}

/* ── MEDICUS learned-recipe panel (kk-learned-*) ── */
/* MEDICUS learned panel - v5 design system (was legacy blue/teal, off-system) */
.kk-learned { display:block; margin:16px 0; padding:18px 20px; border:1px solid var(--border-default); border-radius:var(--radius-lg); background:var(--bg-panel); }
.kk-learned-title { font-family:var(--font-brand); font-size:13px; font-weight:500; letter-spacing:var(--ls-heading); text-transform:uppercase; color:var(--fg-primary); margin-bottom:16px; }
.kk-learned-empty { color:var(--fg-tertiary); font-size:var(--font-body-small); }
.kk-learned-group { margin:18px 0 8px; font-family:var(--font-data); font-size:var(--font-microlabel); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--fg-tertiary); }
.kk-learned-arrow { color:var(--fg-tertiary); }
.kk-learned-card { border:1px solid var(--border-default); border-left:2px solid var(--fg-dimmed); border-radius:var(--radius-sm); padding:12px 14px; margin:8px 0; background:var(--bg-elevated); }
.kk-learned-proposed { border-left-color:var(--accent-warning); }
.kk-learned-active { border-left-color:var(--accent-live); }
.kk-learned-rejected { border-left-color:var(--fg-dimmed); opacity:.6; }
.kk-learned-finding { font-family:'Inter',sans-serif; font-weight:500; font-size:var(--font-body); color:var(--fg-primary); margin-bottom:8px; }
.kk-learned-lbl { display:block; font-family:var(--font-data); font-size:var(--font-microlabel); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--fg-tertiary); margin-top:8px; margin-bottom:4px; }
.kk-learned-cmd { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:var(--font-body-small); white-space:pre-wrap; background:var(--bg-canvas); border:1px solid var(--border-subtle); border-radius:var(--radius-xs); padding:7px 9px; margin:2px 0 0; color:var(--fg-secondary); }
.kk-learned-input { width:100%; box-sizing:border-box; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:var(--font-body-small); padding:7px 9px; background:var(--bg-canvas); color:var(--fg-primary); border:1px solid var(--border-default); border-radius:var(--radius-xs); margin:2px 0; }
.kk-learned-input:focus { outline:0; border-color:var(--border-strong); }
.kk-learned-preview { font-size:var(--font-body-small); color:var(--fg-secondary); margin:6px 0; min-height:16px; }
.kk-learned-btnbar { display:flex; gap:8px; margin-top:10px; }
.kk-learned-btn { padding:7px 16px; border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:var(--bg-interactive); color:var(--fg-primary); cursor:pointer; font-family:var(--font-data); font-size:var(--font-body-small); letter-spacing:0.08em; text-transform:uppercase; transition-property:background-color,border-color; transition-duration:.15s; }
.kk-learned-btn:hover { background:var(--bg-elevated); }
.kk-learned-btn:active { transform:scale(0.98); }
.kk-learned-approve { border-color:var(--accent-live); color:var(--accent-live); }
.kk-learned-reject { border-color:var(--accent-high); color:var(--accent-high); }
.kk-learned-meta { font-size:var(--font-body-small); color:var(--fg-tertiary); margin:6px 0; }
.kk-learned-actions-out { font-size:var(--font-body-small); color:var(--fg-secondary); margin-top:4px; min-height:14px; }
.kk-learned-triple { margin-top:8px; }
.kk-learned-proven { font-family:var(--font-data); font-size:var(--font-microlabel); font-weight:400; letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--fg-tertiary); margin:10px 0 4px; }

/* MEDICUS remediation-effectiveness table (was unstyled browser-default) */
.kk-rem-eff { margin:16px 0 4px; }
.kk-rem-eff h4 { font-family:var(--font-brand); font-size:12px; font-weight:500; letter-spacing:var(--ls-heading); text-transform:uppercase; color:var(--fg-secondary); margin:0 0 6px; }
.kk-rem-eff-sub { font-size:var(--font-body-small); color:var(--fg-tertiary); margin:0 0 12px; max-width:70ch; text-wrap:pretty; }
.kk-rem-eff-tbl { width:100%; border-collapse:collapse; font-size:var(--font-body-small); font-variant-numeric:tabular-nums; }
.kk-rem-eff-tbl th { font-family:var(--font-data); font-size:var(--font-microlabel); font-weight:400; letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--fg-tertiary); text-align:left; padding:0 16px 7px 0; border-bottom:1px solid var(--border-default); }
.kk-rem-eff-tbl td { padding:9px 16px 9px 0; color:var(--fg-secondary); border-bottom:1px solid var(--border-subtle); }
.kk-rem-eff-tbl tbody tr:last-child td { border-bottom:none; }
.kk-rem-eff-tbl td:first-child { color:var(--fg-primary); }
.kk-rem-eff-tbl th:not(:first-child), .kk-rem-eff-tbl td:not(:first-child) { text-align:right; }
.kk-rem-eff-tbl th:last-child, .kk-rem-eff-tbl td:last-child { padding-right:0; color:var(--fg-primary); }
/* === Karta napraw (kk-rem-*): wspolny widzet #657 === */
.kk-rem-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow:
    0 1px 0 0 rgba(var(--ink-rgb, 255, 255, 255), 0.04) inset,
    0 12px 28px -10px rgba(0, 0, 0, 0.55);
  font-family: 'Inter', sans-serif;
  color: var(--fg-secondary);
}
.kk-rem-card--exec  { border-top: 2px solid var(--accent-animus); }
.kk-rem-card--assign { border-top: 2px solid var(--accent-ratio); }

.kk-rem-steps {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin-bottom: 14px;
  font-family: var(--font-data);
  font-size: var(--font-microlabel);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
}
.kk-rem-step { color: var(--fg-tertiary); position: relative; }
.kk-rem-step.is-active { color: var(--fg-primary); }
.kk-rem-card--exec  .kk-rem-step.is-active { color: var(--accent-animus); }
.kk-rem-card--assign .kk-rem-step.is-active { color: var(--accent-ratio); }
.kk-rem-step.is-done { color: var(--fg-tertiary); }
.kk-rem-step.is-done::before { content: '\2713\00a0'; color: var(--sev-ok, #5fa07f); }

/* #3663: droga naprawy na starcie karty */
.kk-rem-path { margin: 6px 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--fg-secondary); }
.kk-rem-path li::marker { color: var(--fg-tertiary); }
.kk-rem-title {
  font-family: var(--font-brand);
  font-size: 13px; font-weight: 500;
  letter-spacing: var(--ls-heading);
  color: var(--fg-primary);
  margin-bottom: 14px;
}

.kk-rem-field { margin-bottom: 12px; }
.kk-rem-label {
  display: block;
  font-family: var(--font-data);
  font-size: var(--font-microlabel);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-tertiary);
  margin-bottom: 5px;
}
.kk-rem-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 11px;
  background: var(--bg-canvas);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xs);
  color: var(--fg-primary);
  font-family: var(--font-data);
  font-size: var(--font-body);
  transition: border-color 160ms;
}
.kk-rem-input:focus { outline: none; border-color: var(--accent-ratio); }
textarea.kk-rem-input { resize: vertical; min-height: 38px; }
select.kk-rem-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b6b6b' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
  color: var(--fg-primary);
  background-color: var(--bg-canvas);
  cursor: pointer;
}
select.kk-rem-select option {
  background: var(--bg-elevated);
  color: var(--fg-primary);
}
.kk-rem-date-display {
  margin-top: 4px;
  font-family: var(--font-data);
  font-size: var(--font-body-small);
  color: var(--fg-secondary);
}

.kk-rem-channels { display: flex; flex-wrap: wrap; gap: 8px; }
.kk-rem-pill {
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background: transparent;
  color: var(--fg-tertiary);
  font-family: var(--font-data);
  font-size: var(--font-body-small);
  letter-spacing: var(--ls-nav);
  cursor: pointer;
  user-select: none;
  transition: background 140ms, color 140ms, border-color 140ms;
}
.kk-rem-pill:hover { color: var(--fg-primary); border-color: var(--border-strong); }
.kk-rem-pill.is-on {
  background: rgba(56, 139, 253, 0.14);
  border-color: var(--accent-ratio);
  color: var(--accent-ratio);
}

.kk-rem-out { margin: 14px 0 4px; }
.kk-rem-cmd-label {
  font-family: var(--font-data);
  font-size: var(--font-microlabel);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-tertiary);
  margin-bottom: 5px;
}
.kk-rem-cmd {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: var(--bg-canvas);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  color: var(--accent-live);
  font-family: 'JetBrains Mono', var(--font-data);
  font-size: var(--font-body-small);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}
/* #1640 break-glass justification input on the remediation card */
.kk-rem-justification {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 8px 0 10px;
  padding: 10px 12px;
  background: var(--bg-canvas);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  color: var(--fg-primary);
  font-family: 'Inter', sans-serif;
  font-size: var(--font-body-small);
  line-height: 1.5;
  resize: vertical;
}
.kk-rem-justification:focus {
  outline: none;
  border-color: var(--accent-critical);
}
.kk-rem-status {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: var(--font-body);
  margin: 8px 0;
}
.kk-rem-status .kk-rem-dot {
  width: 7px; height: 7px; border-radius: 50%;
  flex: 0 0 auto;
}
.kk-rem-status.is-ok  { color: var(--fg-secondary); }
.kk-rem-status.is-ok  .kk-rem-dot { background: var(--sev-ok, #5fa07f); box-shadow: 0 0 6px var(--sev-ok, #5fa07f); }
.kk-rem-status.is-err { color: var(--accent-critical); }
.kk-rem-status.is-err .kk-rem-dot { background: var(--accent-critical); }
/* #3519: powod braku automatycznego retestu po naprawie; zdanie, nie etykieta */
.kk-rem-retest-reason {
  font-family: 'Inter', sans-serif;
  font-size: var(--font-body);
  color: var(--fg-secondary);
  text-wrap: pretty;
  margin: 0 0 8px 15px;
}

/* Living remediation - live execution timeline (#1610). Each phase checks off
   green as the real patch runs; the current step pulses; finished rows show how
   long they took. The observer watches the machine work - trust by transparency. */
.kk-rem-timeline {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--border-default);
  display: flex; flex-direction: column; gap: 1px;
}
.kk-rem-timeline__title {
  font-family: var(--font-data);
  font-size: var(--font-microlabel);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-animus);
  margin-bottom: 6px;
}
.kk-rem-timeline__what {
  font-family: var(--font-data);
  font-size: var(--font-body-small);
  color: var(--fg-primary);
  margin: -2px 0 8px;
}
.kk-tl-row {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: baseline; column-gap: 9px;
  padding: 5px 6px; border-left: 2px solid transparent;
  font-family: var(--font-data);
  font-size: var(--font-body-small);
  color: var(--fg-tertiary);
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.kk-tl-icon { grid-row: 1; text-align: center; line-height: 1.3; }
.kk-tl-icon::before { content: '\25CB'; color: var(--fg-tertiary); }        /* ○ pending */
.kk-tl-label { grid-row: 1; }
.kk-tl-meta  { grid-row: 1; font-size: var(--font-microlabel); color: var(--fg-tertiary); white-space: nowrap; }
.kk-tl-row.is-running {
  color: var(--fg-primary);
  border-left-color: var(--accent-animus);
  background: var(--glass-bg-soft);
}
.kk-tl-row.is-running .kk-tl-icon::before {
  content: '\25C9'; color: var(--accent-animus);                          /* ◉ running */
  animation: kkTlPulse 1.1s ease-in-out infinite;
}
.kk-tl-row.is-ok { color: var(--fg-secondary); }
.kk-tl-row.is-ok .kk-tl-icon::before { content: '\2713'; color: var(--sev-ok, #5fa07f); }   /* ✓ done */
.kk-tl-row.is-failed { color: var(--fg-primary); border-left-color: var(--accent-critical); }
.kk-tl-row.is-skip { color: var(--fg-secondary); }
.kk-tl-row.is-skip .kk-tl-icon::before { content: '\2013'; color: var(--fg-tertiary); }   /* - nie dotyczy */
.kk-tl-row.is-failed .kk-tl-icon::before { content: '\2717'; color: var(--accent-critical); } /* ✗ fail */
@keyframes kkTlPulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) {
  .kk-tl-row.is-running .kk-tl-icon::before { animation: none; }
}
.kk-tl-toggle {
  grid-column: 2 / -1; grid-row: 2;
  cursor: pointer; user-select: none;
  font-size: var(--font-microlabel); color: var(--fg-tertiary);
  padding-top: 2px;
}
.kk-tl-toggle:hover { color: var(--fg-secondary); }
.kk-tl-cmd {
  grid-column: 2 / -1; grid-row: 3;
  margin-top: 3px; padding: 5px 8px;
  background: var(--bg-canvas); border: 1px solid var(--border-default);
  border-radius: var(--radius-xs);
  font-size: var(--font-microlabel); color: var(--fg-secondary);
  overflow-x: auto; white-space: pre;
}
.kk-rem-final {
  margin-top: 12px; padding: 10px 12px;
  border-radius: var(--radius-xs);
  background: var(--glass-bg-soft);
  border-left: 3px solid var(--fg-dimmed);
  font-family: var(--font-data);
  font-size: var(--font-body-small);
  letter-spacing: var(--ls-label);
}
.kk-rem-final.is-ok     { border-left-color: var(--sev-ok, #5fa07f); color: var(--sev-ok, #5fa07f); }
.kk-rem-final.is-failed { border-left-color: var(--accent-critical); color: var(--accent-critical); }
.kk-rem-final.is-na     { border-left-color: var(--border-strong, var(--border-default)); color: var(--fg-primary); font-weight: 400; line-height: 1.5; letter-spacing: normal; }
.kk-rem-chan-result {
  font-family: var(--font-data);
  font-size: var(--font-body-small);
  padding: 2px 0;
}
.kk-rem-chan-result.is-ok  { color: var(--sev-ok, #5fa07f); }
.kk-rem-chan-result.is-err { color: var(--accent-critical); }

/* Przyciski karty (scoped, niezalezne od legacy agent-box) */
.kk-rem-card .kk-conv-action-btn {
  font-family: var(--font-data);
  font-size: 11px; letter-spacing: var(--ls-nav);
  padding: 8px 18px;
  margin-top: 8px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  border: 1px solid var(--border-default);
  background: var(--bg-interactive);
  color: var(--fg-primary);
  transition: background 160ms, border-color 160ms, color 160ms;
}
.kk-rem-card .kk-conv-action-btn:hover {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
}
.kk-rem-card .kk-conv-action-btn.primary {
  background: var(--accent-signal);
  border-color: var(--accent-signal);
  color: var(--on-signal, #0d1011);
}
.kk-rem-card .kk-conv-action-btn.primary:hover { background: #2c7be5; border-color: #2c7be5; }
.kk-rem-card .kk-conv-action-btn.danger {
  background: var(--accent-animus);
  border-color: var(--accent-animus);
  color: #fff;
}
.kk-rem-card .kk-conv-action-btn.danger:hover { background: #d63d33; border-color: #d63d33; }
/* === Karta napraw: galaz AI (kk-rem-card--ai) #716 === */
.kk-rem-card--ai { border-top: 2px solid var(--accent-fatum); }
.kk-rem-card--ai .kk-rem-step.is-active { color: var(--accent-fatum); }
.kk-rem-step-list {
  margin: 10px 0; padding: 10px 12px;
  background: var(--bg-elevated, #11161d);
  border: 1px solid var(--border-subtle, #243140);
  border-radius: 6px;
  font-family: var(--font-mono, monospace);
  font-size: 12px; line-height: 1.5;
  color: var(--fg-secondary, #c5d0db);
  white-space: pre-wrap; word-break: break-word;
}
.kk-rem-tier {
  display: inline-block; margin: 4px 0 8px;
  padding: 2px 8px; border-radius: 4px;
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent-fatum);
  border: 1px solid var(--accent-fatum);
}
.kk-rem-warn {
  margin: 8px 0; padding: 8px 10px;
  border-left: 2px solid var(--accent-warning, #e0a83d);
  background: rgba(224, 168, 61, 0.08);
  color: var(--fg-secondary, #c5d0db);
  font-size: 12px; line-height: 1.45;
}

/* ── Ślad klawiatury (a11y, #1932) ───────────────────────────────────────────
   Rodzina OPERACJE, łącznie z wzorcowym SUASOR, nie miała ani jednego
   :focus-visible: nawigacja Tabem po kartach i przyciskach w treści stron była
   niewidoczna. Reguła jest globalna, bo luka nie dotyczyła jednej rodziny.

   :focus-visible (a nie :focus) celowo: przeglądarka zapala go przy klawiaturze,
   a nie po kliknięciu myszą, więc dla użytkownika myszy nic się nie zmienia.
   Kolor to kanoniczny sygnał organizmu; strony ofensywne zachowują własne
   kolory głów (ANIMUS/FATUM), bo to ślad systemowy, nie akcent semantyczny. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="link"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
input:not([type="hidden"]):focus-visible {
  outline: 2px solid var(--accent-signal, #e4e8e9);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 6px);
}

/* Pola tekstowe rysują własny pierścień zamiast obrysu, żeby nie dublować
   ramki inputa; szerokość obrysu i tak zostaje dla czytników i trybu kontrastu. */
input[type="text"]:focus-visible,
input[type="search"]:focus-visible,
input[type="number"]:focus-visible,
input[type="password"]:focus-visible,
input[type="email"]:focus-visible,
textarea:focus-visible {
  outline-offset: 0;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-signal, #e4e8e9) 22%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  a:focus-visible, button:focus-visible, [role="button"]:focus-visible {
    transition: outline-color .12s ease, box-shadow .12s ease;
  }
}

/* ── #2176 PR2b: elewacja płaskich kart domenowych ───────────────────────────
   base-v5 ładuje się PRZED CSS domenowym, a te powierzchnie nie mają własnego
   box-shadow → wspólny --shadow-md stosuje się bez konfliktu (domena może i tak
   nadpisać w :hover/.active). Curated: tylko realne karty/panele (padded surfaces
   z bg-panel/elevated), pominięto etykiety, <code>, list-itemy i toolbary.
   Znormalizowanie domen już-ocienionych (threats/missions/compliance) = osobny
   przebieg; brama-lint (PR6) dopilnuje reszty. */
.av-narrative, .bs-narrative, .dw-narrative,
.an-cee-wrap, .an-accuracy-wrap,
.ap-paths, .ap-detail,
.cp-timeline-card, .cp-phase-detail,
.rodo-cat-rec, .cerberus-voice,
.forum-pulse, .forum-comment,
.org-tile, .orgq-tile, .org-quality,
.sp-history-wrap,
.tmv6-timeline-wrap,
.td-control,
.pp-card, .action-box,
.kk-learned,
.ap-path-card, .hw-panel, .slide-panel, .kk-learned-card {
  box-shadow: var(--shadow-card);
}

/* Modale bez własnego cienia → warstwa lg (unoszą się nad całą stroną). */
.modal-box {
  box-shadow: var(--shadow-lg);
}

/* ── #2176 PR5: typografia precyzyjna ────────────────────────────────────────
   Nagłówki równoważą łamanie (koniec sierot na końcu wiersza), akapity unikają
   pojedynczej sieroty. Additive - starsze silniki ignorują bez skutku. */
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }


/* ── #2268: utility globalne ─────────────────────────────────────────────────
   Rodzina .u-* mieszkała w admin-v5.css, a używa jej 11 stron, które tego
   arkusza nie ładują (compliance, osint, phishing, verify, raporty...). Tam
   klasy nie robiły nic: kolory, marginesy i wyrównanie po cichu przepadały.
   Dołożone brakujące: u-text-primary, u-text-secondary, u-pointer, u-mb-8. */
.u-text-red       { color: var(--accent-animus) !important; }
.u-text-accent    { color: var(--accent-ratio) !important; }
.u-text-silver    { color: var(--fg-tertiary) !important; }
.u-text-green     { color: var(--sev-ok, #5fa07f) !important; }
.u-text-white     { color: var(--fg-primary) !important; }
.u-text-primary   { color: var(--fg-primary) !important; }
.u-text-secondary { color: var(--fg-secondary) !important; }
.u-text-muted     { color: var(--fg-tertiary) !important; }
.u-text-warning   { color: var(--accent-warning) !important; }

.u-w-full     { width: 100% !important; }
.u-text-right { text-align: right !important; }
.u-pointer    { cursor: pointer; }
.u-mt-8  { margin-top: 8px !important; }
.u-mt-12 { margin-top: 12px !important; }
.u-mt-16 { margin-top: 16px !important; }
.u-mb-8  { margin-bottom: 8px !important; }
.u-mb-12 { margin-bottom: 12px !important; }
.u-mb-16 { margin-bottom: 16px !important; }
.u-silver-chip {
  color: var(--fg-tertiary);
  box-shadow: var(--border-subtle) 0 0 0 1px inset;
}
.u-silver-chip:hover {
  color: var(--fg-primary);
  box-shadow: var(--border-default) 0 0 0 1px inset;
  background: var(--bg-elevated);
}

/* #2268: .form-hint mieszkało w admin-v5.css, a używa go też /theatrum.
   .cy-skeleton (placeholder ładowania) nie istniało nigdzie, więc miejsce
   po wczytywanej wartości było po prostu puste. */
.form-hint {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  line-height: 1.5;
  color: var(--fg-tertiary);
  margin: 8px 0 0;
}
.cy-skeleton {
  display: inline-block;
  border-radius: 4px;
  background: linear-gradient(90deg,
    rgba(var(--ink-rgb, 255, 255, 255), 0.04) 25%, rgba(var(--ink-rgb, 255, 255, 255), 0.09) 37%, rgba(var(--ink-rgb, 255, 255, 255), 0.04) 63%);
  background-size: 400% 100%;
  animation: cy-skeleton-shimmer 1.4s ease infinite;
}
@keyframes cy-skeleton-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .cy-skeleton { animation: none; }
}

/* #2307 scaling audit: horizontal-scroll frame for wide tables on narrow
   viewports. A table with many columns has a min-content width wider than the
   phone; body{overflow-x:hidden} would clip it silently, so give the table its
   own scrollable frame instead. */
.cy-twrap { overflow-x: auto; max-width: 100%; }

/* ===================================================================
   #2312 startup polish: a unified, gentle page entrance so content
   fades up instead of flashing/popping in. Opacity-only on <body>
   (does not create a containing block, so fixed nav/statusbar stay put);
   a small rise on <main>. Fully disabled under reduced-motion, and safe
   if the animation never runs (elements keep their normal visibility).
   =================================================================== */
@keyframes cy-page-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cy-page-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  body { animation: cy-page-fade 0.34s ease-out both; }
  body > main,
  main.v5-main,
  .v5-page > main { animation: cy-page-rise 0.46s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
}


/* ════════════════════════════════════════════════════════════════
   #3213 JASNY MOTYW - drugi stan tej samej palety, nie odwrocenie.
   Papier, biale panele, grafitowy atrament; glowny przycisk = grafitowa
   plyta z jasnym tekstem; statusy ciemniejsze (AA na bieli).
   :root[data-theme] ma wyzsza specyficznosc niz lokalne :root stron
   (kokpit-v5, admin-v5...), wiec jedna definicja obejmuje wszystkie.
   ════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] {
  /* #3548 Pergamin: papier kancelaryjny i brazowo-czarny atrament zamiast
     zimnej szarosci. Wszystkie pary tekst/tlo AA (prototyp z kontrastem:
     https://claude.ai/artifact/46SKmhsu81rooVaQH9tmYa). */
  color-scheme: light;
  --bg-canvas:      #ece2cf;
  --bg-panel:       #f7f0e3;
  --bg-elevated:    #efe5d2;
  --bg-interactive: #e6dac3;

  --fg-primary:     #2a2016;
  --fg-secondary:   #54442f;
  --fg-tertiary:    #6b5841;
  --fg-dimmed:      #c4b496;

  /* Ramki mocniejsze niz w #3548: panel rozni sie od papieru tylko 1,13:1,
     wiec granice kart niesie ramka. */
  --border-subtle:  rgba(42, 32, 22, 0.10);
  --border-default: rgba(42, 32, 22, 0.16);
  --border-strong:  rgba(42, 32, 22, 0.24);

  --ink-rgb:        42, 32, 22;
  --signal-rgb:     42, 32, 22;
  --accent-signal:  #2a2016;
  --accent-live:    #2a2016;
  --on-signal:      #f7f0e3;
  --signal-hover:   #120c06;
  --shade-rgb:      236, 226, 207;

  /* Wysokie/ostrzezenie: rdzawy pomarancz zamiast brazu. #7a4e0c mial odcien
     tekstu (dE 29,6 do --fg-secondary) i bursztynu FORUM (dE 6,8), wiec
     "28 wysokie" wygladalo jak zwykly opis. #9c4a00: 4,82:1 na papierze,
     dE 46 do tekstu, 23 do czerwieni krytycznych, 23,5 do FORUM. */
  --sev-critical:   #9e3226;
  --sev-high:       #9c4a00;
  --sev-ok:         #2f6646;
  --accent-critical: #9e3226;
  --accent-high:    #9c4a00;
  --accent-warning: #9c4a00;
  --accent-ok:      #2f6646;

  --accent-ratio:   #34557a;
  --accent-animus:  #93402f;
  --accent-fatum:   #5b4787;
  --accent-gold:    #7a5c14;
  --accent-forum:   #744917;
  --seal-wax-text:  #8a2a1c;
}

/* Drobne etykiety 11 px w jasnym: przezroczystosc 0,82-0,85 nakladana na
   --fg-tertiary spychala je do 3,5-3,9:1 (pasek stanu, przyciski kokpitu).
   Pulsowanie "ZYWY" schodzilo do 0,5 i 4,27:1; w jasnym min. 0,75. */
:root[data-theme="light"] .statusbar > .cap-cat-btn--inline,
:root[data-theme="light"] .statusbar > #cyrber-glasshouse-link.gh--inline,
:root[data-theme="light"] .prio2-act.degraded { opacity: 1; }
:root[data-theme="light"] #mensLiveBadge { animation-name: kk-livepulse-light; }
@keyframes kk-livepulse-light { 0%, 100% { opacity: 1; } 55% { opacity: .75; } }

/* #3548 faktura papieru: szum SVG w kolorze atramentu, bardzo slaby. */
:root[data-theme="light"] body {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.12  0 0 0 0 0.08  0 0 0 0.11 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* #3289: LIVE tylko przy świeżych danych; utils.js ustawia data-state. */
.statusbar .sb-live[data-state="wait"],
.statusbar .sb-live[data-state="wait"] .sb-live-dot { color: var(--fg-tertiary); background-color: transparent; }
.statusbar .sb-live[data-state="wait"] .sb-live-dot { background: var(--fg-tertiary); animation: none; opacity: .5; }
.statusbar .sb-live[data-state="nostream"] { color: var(--accent-warning); }
.statusbar .sb-live[data-state="nostream"] .sb-live-dot { background: var(--accent-warning); animation: none; box-shadow: none; }
.statusbar .sb-live[data-state="down"] { color: var(--accent-critical); }
.statusbar .sb-live[data-state="down"] .sb-live-dot { background: var(--accent-critical); animation: none; box-shadow: none; }