/* ============================================================
   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 {
  --bg-canvas:      #0a0a0a;
  --bg-panel:       #0f0f0f;
  --bg-elevated:    #141414;
  --bg-interactive: #1a1a1a;

  --fg-primary:     #fafafa;
  --fg-secondary:   #a1a1a1;
  --fg-tertiary:    #6b6b6b;
  --fg-dimmed:      #3f3f3f;

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

  --accent-ratio:    #388BFD;
  --accent-animus:   #F85149;
  --accent-fatum:    #BC8CFF;
  --accent-live:     #3fb950;
  --accent-warning:  #f0b429;
  --accent-high:     #f97316;
  --accent-critical: #ef4444;
  /* FORUM (F4) — głos operatora. Ciepły bursztyn = głos ludzki, komplementarny
     do RATIO/ANIMUS/FATUM/live. Floating button + roadmap akcenty. */
  --accent-forum:    #f0b67f;

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

  --ls-brand:   0.22em;
  --ls-label:   0.24em;
  --ls-heading: 0.20em;
  --ls-nav:     0.14em;

  --page-max:   clamp(1680px, 95vw, 3200px);
  /* PIXEL PARITY z kokpit-v5.css linia 68: body { padding: 0 clamp(24px,3vw,64px); }
     Kokpit body ma HARDCODED literal padding 3vw/64, NIE --kk-pad-x token
     (mimo że token tam też istnieje na 4vw/120). Source-of-truth dla body
     padding to ten literal. Wszystkie inne strony muszą mieć IDENTYCZNĄ
     wartość żeby mens-bar miał tę samą szerokość. */
  --page-pad-x: clamp(24px, 3vw, 64px);

  --font-microlabel: clamp(9px, 0.7vw, 11px);
  --font-body-small: clamp(10px, 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%;
}

/* ════════════════════════════════════════════════════════════════
   GLOBAL SCROLLBAR CANON — slim, dark, woven into the page
   ────────────────────────────────────────────────────────────────
   Default browser scrollbars (16-17px, light gray on dark theme)
   break the sticky-footer canon and feel like an unfinished tool.
   This block ships a single uniform scrollbar across every page +
   every scrollable container: 6px wide, transparent track, thumb
   tinted with --border-strong, ramps to --fg-tertiary on hover.

   Firefox uses scrollbar-width/scrollbar-color (no pseudo-element
   support). WebKit/Blink use ::-webkit-scrollbar pseudo-elements.
   Both engines get the same visual.

   Scoped at root so EVERY scrollable element inherits the canon.
   Pages that need an OPT-OUT (.nav-mid, .col-scroll, .tab-bar
   already scope `scrollbar-width: none` on themselves) keep working.
   ════════════════════════════════════════════════════════════════ */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 3px;
  transition: background 200ms ease;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--fg-tertiary);
}
*::-webkit-scrollbar-corner {
  background: transparent;
}

button, input, textarea, select { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
code, kbd { font-family: 'Share Tech Mono', monospace; }

@keyframes v5-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes v5-pulse {
  0%, 100% { opacity: 0.9; }
  50%      { opacity: 0.5; }
}

/* ============================================================
   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;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: clamp(48px, 5vh, 64px);
  padding: 0 var(--page-pad-x);
  max-width: var(--page-max);
  width: 100%;
  margin: 0 auto;
  box-shadow: var(--border-subtle) 0 -1px 0 0 inset;
  background: var(--bg-canvas);
  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; }
.nav-right { justify-content: flex-end; gap: 12px; }

.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-wm {
  font-family: 'Orbitron', sans-serif;
  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: 'Share Tech Mono', monospace;
  font-size: 10px;
  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;
}
@media (max-width: 900px) {
  .nv-back { display: none; }
}

.nv {
  font-family: 'Orbitron', sans-serif;
  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;
}
.nv-group > .nv-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 220px;
  padding: 6px 0;
  background: var(--bg-canvas, #0d1117);
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  border-top-width: 2px;
  border-top-color: var(--accent-live);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease-out, transform 140ms ease-out;
  z-index: 1000;
}
.nv-group:hover > .nv-panel,
.nv-group.open > .nv-panel,
.nv-group:focus-within > .nv-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nv-panel a {
  display: block;
  padding: 10px 14px;
  color: var(--fg-secondary, rgba(255,255,255,0.72));
  font-family: 'Share Tech Mono', monospace;
  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(255,255,255,0.04); }

/* Per-group accent — keeps RATIO/ANIMUS/FATUM/live language visible in nav. */
.nv-group[data-group="missions"]   > .nv-panel { border-top-color: var(--accent-ratio,  #388BFD); }
.nv-group[data-group="findings"]   > .nv-panel { border-top-color: var(--accent-animus, #F85149); }
.nv-group[data-group="operations"] > .nv-panel { border-top-color: var(--accent-high,   #f97316); }
.nv-group[data-group="compliance"] > .nv-panel { border-top-color: var(--accent-fatum,  #BC8CFF); }
.nv-group[data-group="organism"]   > .nv-panel { border-top-color: var(--accent-live,   #3fb950); }

.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: 'Share Tech Mono', monospace;
  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: 'Orbitron', sans-serif;
  font-size: 10px;
  letter-spacing: 0.16em;
  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: 9px; 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(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: 'Share Tech Mono', monospace;
  font-size: 10px; letter-spacing: 0.08em;
  color: var(--fg-tertiary);
}
.nvu-sub .role-badge {
  display: inline-block;
  padding: 1px 6px;
  font-size: 9px;
  letter-spacing: 0.14em;
  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: 'Share Tech Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  padding: 8px 14px 4px;
  opacity: 0.85;
}

.nvu-links { padding: 0; display: flex; flex-direction: column; }
.nvu-item {
  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-dimmed);
  font-size: 10px;
  opacity: 0;
  transition: opacity 160ms ease;
}
.nvu-item:hover .nvu-arrow { opacity: 0.6; }

.nvu-logout {
  color: var(--accent-animus);
  margin-top: 2px;
}
.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 {
  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(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: 'Orbitron', sans-serif;
  font-size: 14px; font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--fg-primary);
  margin-bottom: 6px;
}
.cap-consent-sub {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px; 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.4em;
  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: 'Share Tech Mono', monospace;
  font-size: 11px; letter-spacing: 0.14em;
  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-ratio);
  border: 1px solid var(--accent-ratio);
  color: #fff;
}
.cap-consent-ok:hover {
  background: #2c7be5;
  border-color: #2c7be5;
}

/* ============================================================
   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: 'Share Tech Mono', monospace;
  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: 9px; }
.cap-cat-btn.is-open .cap-cat-btn-icon { transform: rotate(-90deg); }
.cap-cat-btn-count { color: var(--fg-tertiary); font-size: 10px; }

.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(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: 'Orbitron', sans-serif;
  font-size: 10px; letter-spacing: 0.16em;
  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: 'Share Tech Mono', monospace;
  font-size: 10px; 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: 'Share Tech Mono', monospace;
  font-size: 9px; 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: 'Share Tech Mono', monospace;
  font-size: 10px; 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(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: 'Orbitron', sans-serif;
  font-size: 14px; font-weight: 500; letter-spacing: 0.06em;
  color: var(--fg-primary);
  margin-bottom: 4px;
}
.cap-cat-form-id {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px; 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: 'Share Tech Mono', monospace;
  font-size: 10px; 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: 'Share Tech Mono', monospace;
  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: 'Share Tech Mono', monospace;
  font-size: 11px; letter-spacing: 0.14em;
  cursor: pointer;
  transition: background 160ms, color 160ms, border-color 160ms;
}
.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-ratio);
  border: 1px solid var(--accent-ratio);
  color: #fff;
}
.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: 'Share Tech Mono', monospace;
  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(0,0,0,0.5);
  animation: v5-fade-in 200ms ease;
  max-width: 560px;
}
.cap-cat-toast--success { border-left: 3px solid var(--accent-live); }
.cap-cat-toast--error   { border-left: 3px solid var(--accent-animus); }

.statusbar {
  padding: clamp(8px, 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: 'Share Tech Mono', monospace;
  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-dimmed); 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: 'Share Tech Mono', monospace;
  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(8px, 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(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: 'Share Tech Mono', monospace;
  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: 'Share Tech Mono', monospace;
  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: 'Share Tech Mono', monospace; }
.orbitron { font-family: 'Orbitron', sans-serif; }
.microlabel {
  font-family: 'Share Tech Mono', monospace;
  font-size: var(--font-microlabel);
  letter-spacing: 0.22em;
  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(63, 185, 80, 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(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, #3fb950);
  background: rgba(63, 185, 80, 0.04);
}
.nv-burger-bar {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--fg-secondary, rgba(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);
}

@media (max-width: 900px) {
  .nv-mobile-toggle { display: inline-flex; }
  /* Inline 7-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, #0d1117);
    z-index: 998;
    padding: 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
    border-top: 1px solid var(--border-subtle, rgba(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(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.14em;
    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;
  }
  /* 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; }
}

/* ============================================================
   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) {
  html, body { overflow-x: hidden; 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: 10px; }
}

/* ============================================================
   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(10px, 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: 'Share Tech Mono', monospace;
  font-size: var(--font-microlabel);
  color: var(--fg-dimmed);
  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-dimmed);
  font-style: italic;
}
.af-sep {
  color: var(--fg-dimmed);
  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: rgb(74, 222, 128);
  stroke-width: 1.5;
  fill: none;
  filter: drop-shadow(0 0 3px rgba(74, 222, 128, 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); }
}
@media (max-width: 640px) {
  .cyrber-ekg { display: none; }
}