/*
  Motyw narzędzia Nitpix (decyzja użytkownika 2026-10-29, skąd paleta – KOLORYSTYKA.md): ciemne tło, grafitowe panele,
  biały tekst, fioletowy akcent #BA81EA (decyzja użytkownika 2026-10-29). Tylko narzędzie – strona w podglądzie (osobny dokument) i tokeny marki
  w katalogu / Figmie bez zmian. Kształty bez zmian; kolory tagów (role, statusy, Najnowsza, W archiwum) bez zmian.
  Ładowany po app.css: nadpisuje semantykę tokenów, z której korzystają app.css i komponenty katalogu (tm/).

  Paleta Nitpix: tło #0A0A0A · panele #171717 · pola/hover #242424 · wyżej #2E2E2E · obrysy #292929 / #525252 ·
  tekst #FAFAFA · wyciszony #A1A1A1 · akcent #BA81EA (hover #C99BF0) · usuwanie #FF2056.
  Kontrast (AA): #FAFAFA/#171717 17,2 · #A1A1A1/#171717 6,9 · #0A0A0A/#BA81EA 7,0 (biały tylko 2,8 – na akcencie zawsze czarny) · #BA81EA/#171717 6,3 ·
  #FF2056/#171717 4,9 · #FAFAFA/#2E2E2E 13,3.
*/
/* font narzędzia: Red Hat Display (decyzja użytkownika 2026-10-29), wersja zmienna 300–900, licencja SIL OFL 1.1
   (fonty/RedHatDisplay-OFL.txt). Tylko narzędzie – strona w podglądzie zostaje na TeleNeo. */
@font-face {
  font-family: "Red Hat Display";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonty/RedHatDisplay-VariableFont_wght.ttf") format("truetype");
}

:root {
  color-scheme: dark;
  --font-sans: "Red Hat Display", system-ui, sans-serif;
  /* grubości Red Hat Display – trzy poziomy (decyzja użytkownika 2026-10-29): 400 treść i opisy, 500 kontrolki
     i drobna meta, 600 nagłówki, imiona i znaczniki. 700/800 w Red Hat wyglądały za ciężko. */
  --font-weight-bold: 600;
  --font-weight-extrabold: 600;
  /* ruch w narzędziu (audyt animacji 2026-10-30): hover 150 ms – narzędzie dzienne, nie strona marketingowa
     (T-Mobile ma 0,4 s); mocny ease-out na wejścia (okna, menu, karty, toast) */
  --duration-hover: 150ms;
  --ease-wejscie: cubic-bezier(0.23, 1, 0.32, 1);
  --nitpix-tlo: #0A0A0A;
  --nitpix-panel: #171717;
  --nitpix-pole: #242424;
  --nitpix-wyzej: #2E2E2E;
  --nitpix-obrys: #292929;
  --nitpix-obrys-mocny: #525252;
  --nitpix-tekst: #FAFAFA;
  --nitpix-tekst-wyciszony: #A1A1A1;
  --nitpix-akcent: #BA81EA;
  --nitpix-akcent-hover: #C99BF0;
  --nitpix-usun: #FF2056;

  /* tło */
  --color-surface: var(--nitpix-panel);
  --color-surface-hover: var(--nitpix-pole);
  --color-surface-subtle: var(--nitpix-pole);
  --color-surface-segment-hover: var(--nitpix-wyzej);
  --color-surface-disabled: var(--nitpix-obrys-mocny);
  --color-surface-accent: var(--nitpix-akcent);
  --color-surface-accent-hover: var(--nitpix-akcent-hover);
  --color-surface-accent-subtle: #BA81EA1A;
  --color-overlay: #000000B3;
  --color-scrollbar-track: #FFFFFF1A;

  /* tekst */
  --color-fg: var(--nitpix-tekst);
  --color-fg-muted: var(--nitpix-tekst-wyciszony);
  --color-fg-accent: var(--nitpix-akcent);
  --color-fg-accent-on-subtle: var(--nitpix-akcent);
  --color-fg-on-accent: var(--nitpix-tlo);

  /* obrys – fokus: fioletowy 2 px + ciemny pierścień zewnętrzny (komponenty rysują go z obrys/na-ciemnym) */
  --color-line: var(--nitpix-obrys-mocny);
  --color-line-subtle: var(--nitpix-obrys);
  --color-line-faint: var(--nitpix-obrys);
  --color-line-strong: var(--nitpix-tekst);
  --color-line-focus: var(--nitpix-akcent);
  --color-line-on-dark: var(--nitpix-tlo);
  --color-line-accent: var(--nitpix-akcent);
  --color-line-error: var(--nitpix-usun);

  /* ikona */
  --color-icon: var(--nitpix-tekst);
  --color-icon-muted: var(--nitpix-tekst-wyciszony);
  --color-icon-disabled: var(--nitpix-obrys-mocny);
  --color-icon-accent: var(--nitpix-akcent);
  --color-icon-accent-on-subtle: var(--nitpix-akcent);

  /* tekst na kolorach ról – stałe wartości w kolory-rol.css (nie odwraca się z motywem) */
}

body { background: var(--nitpix-tlo); }

/* scena: czerń tła + siatka w tonach paneli (wcześniej #2B2B2B / #424242 / #797979) – dekoracja */
.scena {
  background: var(--nitpix-tlo) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='112' height='112' fill='none'><path d='M0 56.5H112M56.5 0V112' stroke='%23171717'/><path d='M50 56.5H63M56.5 50V63' stroke='%23525252' stroke-width='2'/></svg>") center top / 7rem 7rem;
}
.scena::-webkit-scrollbar-track { background-color: #FFFFFF1A; }
.scena::-webkit-scrollbar-thumb { background-color: var(--nitpix-obrys-mocny); }
@supports (-moz-appearance: none) { .scena { scrollbar-color: var(--nitpix-obrys-mocny) #FFFFFF1A; } }
.ramka-podgladu { box-shadow: 0 0 0 1px var(--nitpix-obrys), var(--shadow-floating); }
.pusto { color: var(--nitpix-tekst-wyciszony); }
.pusto h2 { color: var(--nitpix-tekst); }

/* wybrana uwaga: o stopień jaśniejsze tło + fioletowa kreska z lewej (kreska z obrys/akcent) */
/* karty uwag: karta #242424 (hover #2E2E2E), odpowiedzi #1F1F1F, warstwy stosu #202020 / #1B1B1B z obrysem #333333 (hover karty #525252) */
.lista { --karta-tlo: var(--nitpix-pole); --karta-tlo-hover: var(--nitpix-wyzej); --odpowiedz-tlo: #1F1F1F; --stos-1: #202020; --stos-2: #1B1B1B; }
.uwaga__warstwa { box-shadow: inset 0 0 0 1px #333333; }
.uwaga__karta:has(> .uwaga__glowa:hover) ~ .uwaga__stos .uwaga__warstwa { box-shadow: inset 0 0 0 1px var(--nitpix-obrys-mocny); }
.nowa { --karta-tlo: var(--nitpix-pole); }
/* tło na zaokrąglonej kontrolce, nie na kwadratowym wrapperze – inaczej przy odpowiedzi wystawały rogi (2026-10-30) */
.nowa .tm-textarea__control, .odpowiedz-pole .tm-textarea__control { background: var(--nitpix-pole); }

/* elementy, które na jasnym tle były „ciemną plamą” (tło/ciemne) – na ciemnym podniesione albo odwrócone */
.numer:not([class*="rola-kolor-"]) { background: var(--nitpix-wyzej); }
.znacznik--admin { background: var(--nitpix-tekst); color: var(--nitpix-tlo); }
/* znaczniki informacyjne (W archiwum, Tylko zespół) – ciemne z obrysem, jak chipy miejsca; jasny zostaje tylko
   „Admin” (uprawnienie), żeby biel znaczyła wyjątek, a nie każdy znacznik. Dawniej biel/czerń T-Mobile. */
.znacznik:not([class*="znacznik--"]):not(.w_trakcie):not(.rozwiazana):not(.ostrzezenie),
.znacznik.wewnetrzna { background: var(--nitpix-wyzej); color: var(--nitpix-tekst); box-shadow: inset 0 0 0 1px var(--nitpix-obrys-mocny); }
/* przycisk Dark (Kopiuj, „Wskaż miejsce na stronie”): #060606 znikał na panelu – pole z obrysem, hover wyżej */
.tm-button-small--dark { --_bg: var(--nitpix-pole); --_bg-hover: var(--nitpix-wyzej); --_fg: var(--nitpix-tekst); box-shadow: inset 0 0 0 1px var(--nitpix-obrys-mocny); }
/* ostrzeżenie o elemencie (nie znaleziono / zmienił się): wypełniony kolor usuwania z czarnym tekstem (5,3) –
   sam czerwony tekst na karcie miałby 4,1 (na hoverze 3,6). Dawniej magenta T-Mobile – spoza palety narzędzia. */
.znacznik.ostrzezenie { background: var(--nitpix-usun); color: var(--nitpix-tlo); box-shadow: none; }
/* tekst błędu (formularze, strefa wgrywania) – jaśniejsza czerwień usuwania: 5,7 na polu #242424, 5,0 na #2E2E2E,
   6,6 na panelu (sam #FF2056 miałby na polu 4,1). Nie akcent – fiolet znaczy „działaj”, nie „błąd”. */
.blad-tekst, .okno .strefa__uwaga--blad { color: #FF6B8E; }
/* zamknięcie okna: kółko 44 px jak przełącznik panelu (pole + obrys), nie szary BUTTON ICON T-Mobile 56 px */
.okno__glowa .tm-button-icon {
  --_bg: var(--nitpix-pole); --_bg-hover: var(--nitpix-wyzej); --_fg: var(--nitpix-tekst);
  width: 2.75rem; height: 2.75rem; box-shadow: inset 0 0 0 1px var(--nitpix-obrys);
}
.okno__glowa .tm-button-icon svg { width: 1.25rem; height: 1.25rem; }
.komunikat { background: var(--nitpix-tekst); color: var(--nitpix-tlo); }
.komunikat.blad { background: var(--nitpix-usun); color: var(--nitpix-tlo); }
.plik__typ { background: var(--nitpix-tekst); color: var(--nitpix-tlo); }
.plik__gotowe { background: var(--nitpix-akcent); color: var(--nitpix-tlo); }
button.status:hover, button.status[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--nitpix-tekst); }

/* TOOLTIP domyślny (ciemny) – na grafitowym panelu podniesiony do #2E2E2E z obrysem; dymki ról zostają w kolorze roli */
.tm-tooltip:not([class*="dymek-rola-"]) { --_bg: var(--nitpix-wyzej); --_fg: var(--nitpix-tekst); }

/* usuwanie: czerwień usuwania */
.menu__pozycja--usun, .przycisk-ikona--usun:hover { color: var(--nitpix-usun); }
/* przycisk potwierdzenia usunięcia: czerwień usuwania, czarny tekst (5,3; biały miałby 3,8), hover jaśniej (6,2) */
.tm-button-small--usun { --_bg: var(--nitpix-usun); --_bg-hover: #FF4D78; --_fg: var(--nitpix-tlo); }

/* okna i menu: panel #171717 z obrysem (cień na czerni prawie niewidoczny) */
.okno { background: var(--nitpix-panel); color: var(--nitpix-tekst); box-shadow: 0 0 0 1px var(--nitpix-obrys), var(--shadow-floating); }
.menu__lista { box-shadow: inset 0 0 0 1px var(--nitpix-obrys-mocny), var(--shadow-floating); }

/* PRZEŁĄCZNIK wyłączony: tor z obrysem #525252, kulka #A1A1A1 (6,0 na torze #242424; domyślny grafit dawałby 3,2) */
.tm-toggle__track { box-shadow: inset 0 0 0 1px var(--nitpix-obrys-mocny); }
.tm-toggle__input:not(:checked) + .tm-toggle__track .tm-toggle__drop { background: var(--nitpix-tekst-wyciszony); }
.tm-toggle:hover .tm-toggle__input:not(:checked) + .tm-toggle__track .tm-toggle__drop { background: var(--nitpix-tekst); }

/* strona z komunikatem (brak sesji, zły link): w tle szklany sygnet Nitpix 3D na cały ekran (narzedzie/sygnet/,
   zamiast ampersandu od 2026-11-01), karta na środku – półprzezroczysta z rozmyciem tła (szkło/duże, blur 20)
   i obrysem jak okna narzędzia */
.komunikat-strony__karta {
  position: relative; z-index: 1;
  /* 90 % panelu: za kartą bywa czysta biel refleksów sygnetu – przy 80 % opis #A1A1A1 spadał do 4,1;
     przy 90 % nawet nad bielą ≥ 5,2 (2026-11-01) */
  background: color-mix(in srgb, var(--nitpix-panel) 90%, transparent);
  backdrop-filter: blur(var(--blur-glass-lg)); -webkit-backdrop-filter: blur(var(--blur-glass-lg));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--nitpix-tekst) 12%, transparent), var(--shadow-floating);
}
/* pauza animacji tła (WCAG 2.2.2) – kółko jak przełącznik panelu: rozmyte tło, obrys, prawy dolny róg */
.pauza-tla {
  position: fixed; right: var(--spacing-20); bottom: var(--spacing-20); z-index: 2;
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--nitpix-panel) 70%, transparent); color: var(--nitpix-tekst); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--nitpix-obrys); backdrop-filter: blur(var(--blur-glass-sm)); -webkit-backdrop-filter: blur(var(--blur-glass-sm));
}
.pauza-tla:hover { background: color-mix(in srgb, var(--nitpix-pole) 85%, transparent); }
.pauza-tla[hidden] { display: none; }
/* podpis narzędzia w lewym dolnym rogu: „[sygnet Nitpix] [BETA] by Piotr Kamiński [visionpeople.agency]” – nawiasy jako
   pigułki (BETA w kolorze akcentu, domena – obrysowana pigułka-link) */
.stopka-narzedzia {
  position: fixed; left: var(--spacing-20); bottom: var(--spacing-20); z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-6); max-width: calc(100vw - 6rem);
  color: var(--nitpix-tekst-wyciszony); font-size: var(--text-t1); line-height: var(--text-t1--line-height);
}
.pigulka {
  display: inline-flex; align-items: center; min-height: 1.5rem; padding: 0 var(--spacing-8); border-radius: var(--radius-100);
  font-size: var(--text-s1); line-height: var(--text-s1--line-height); font-weight: var(--font-weight-bold);
  color: var(--nitpix-tekst); text-decoration: none; box-shadow: inset 0 0 0 1px var(--nitpix-obrys-mocny);
  background: color-mix(in srgb, var(--nitpix-panel) 70%, transparent); backdrop-filter: blur(var(--blur-glass-sm)); -webkit-backdrop-filter: blur(var(--blur-glass-sm));
}
.pigulka--akcent { background: var(--nitpix-akcent); color: var(--nitpix-tlo); box-shadow: none; }
a.pigulka:hover { box-shadow: inset 0 0 0 1px var(--nitpix-tekst); }
/* nagłówek z nazwą narzędzia: pigułka BETA na linii tekstu; „T-Mobile” nigdy nie łamie się na dywizie */
.komunikat-strony__karta h1 { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--spacing-10); }
.komunikat-strony__karta h1 .pigulka { backdrop-filter: none; -webkit-backdrop-filter: none; }
/* logo Nitpix w nagłówku karty: 36 px wysokości – małe litery logo ok. 21 px, jak wersaliki H4 obok („for T-Mobile”);
   na mobile (H4 24 px) 28 px. W stopce sam sygnet 12 px – jak wersaliki tekstu T1 podpisu. */
.komunikat-strony__logo { display: block; width: auto; height: 2.25rem; }
@media (max-width: 47.99em) { .komunikat-strony__logo { height: 1.75rem; } }
.stopka-narzedzia__znak { display: block; width: auto; height: 0.75rem; }
.bez-lamania { white-space: nowrap; }

/* grubości: nagłówki i pogrubienia z przeglądarki (h3, strong – domyślnie 700) na 600; wszystkie znaczniki 600
   (dotąd 500 albo 700 obok siebie); meta 12 px (czas, miejsce, „Usuń uwagę”) 500 zamiast 400 */
h1, h2, h3, strong, b { font-weight: var(--font-weight-bold); }
.znacznik, .tm-select__option > .znacznik, .tm-select__value > .znacznik, .status, .pigulka { font-weight: var(--font-weight-bold); }
.uwaga__autor, .uwaga__meta { font-weight: var(--font-weight-medium); }

/* połysk pigułki BETA (inspiracja: tag PRO na morphin.dev, własna wersja w CSS) – na napisie i na obrysie, w pętli:
   jasny pas przechodzi przez pigułkę (45 % cyklu 4 s), potem przerwa. Napis: litery wypełnione tłem (kolor tekstu
   + pas). Obrys: ::after z tym samym pasem, wycięty maską do 1,5 px przy krawędzi.
   WCAG 2.2.2 (ruch dłuższy niż 5 s): pauza w menu konta („Zatrzymaj animacje”) i przyciskiem na ekranie wejścia –
   klasa html.animacje-stop (zapamiętana w przeglądarce); przy prefers-reduced-motion bez ruchu. */
.polysk {
  --_blysk: color-mix(in srgb, currentColor 20%, white);
  background-image:
    linear-gradient(90deg, transparent calc(50% - 0.5rem), var(--_blysk), transparent calc(50% + 0.5rem)),
    linear-gradient(currentColor, currentColor);
  background-size: 250% 100%, auto;
  background-repeat: no-repeat;
  background-position: 100% 50%, 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: polysk 4s ease-in-out 0.6s infinite both;
}
.pigulka--akcent { position: relative; }
.pigulka--akcent::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(90deg, transparent calc(50% - 0.75rem), rgb(255 255 255 / 0.9), transparent calc(50% + 0.75rem))
    100% 50% / 250% 100% no-repeat;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: polysk-obrys 4s ease-in-out 0.6s infinite both;
}
@keyframes polysk { from { background-position: 100% 50%, 0 0; } 45%, to { background-position: 0% 50%, 0 0; } }
@keyframes polysk-obrys { from { background-position: 100% 50%; } 45%, to { background-position: 0% 50%; } }
html.animacje-stop .polysk, html.animacje-stop .pigulka--akcent::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .polysk, .pigulka--akcent::after { animation: none; } }

/* poświata fioletowych przycisków po najechaniu (inspiracja: uiverse.io „galaxy button” zaby_4213 – sama mechanika,
   kolory nasze; decyzja użytkownika 2026-10-30, poprawka tego samego dnia: „drobne światło wokół, jak obrys BETA”,
   bez szerokiego blasku na zewnątrz): po obwodzie pigułki krąży cienkie światło 1,5 px – biel i jaśniejszy fiolet
   (#E4CCF9). ::before wycięty maską do pierścienia przy krawędzi (jak obrys BETA), kąt gradientu z zarejestrowanej
   właściwości --_kat (obraca się sam gradient, pigułka stoi). ::after zostaje na pierścień fokusu. Tylko po
   najechaniu myszą (na dotyku :hover się „przykleja”); obrót wstrzymany poza hoverem, więc po zjechaniu światło
   gaśnie w miejscu, bez skoku. Ograniczony ruch / „Zatrzymaj animacje” – pierścień bez obrotu. Koszt: odmalowanie
   jednego małego elementu, tylko w trakcie hovera. */
@property --_kat { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@media (hover: hover) and (pointer: fine) {
  .tm-button-small--magenta:not([aria-disabled="true"]) {
    transition: background-color var(--duration-hover) ease, transform var(--duration-press) var(--ease-brand);
  }
  .tm-button-small--magenta:not([aria-disabled="true"])::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
    background: conic-gradient(from var(--_kat),
      transparent 0deg, #FFFFFF 60deg, #E4CCF9 110deg, transparent 170deg,
      transparent 190deg, #E4CCF9 250deg, transparent 310deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 200ms ease;
    animation: poswiata-obrot 2.4s linear infinite paused;
  }
  .tm-button-small--magenta:not([aria-disabled="true"]):hover::before { opacity: 1; animation-play-state: running; }
  html.animacje-stop .tm-button-small--magenta::before { animation: none; }
}
@keyframes poswiata-obrot { to { --_kat: 360deg; } }
@media (prefers-reduced-motion: reduce) { .tm-button-small--magenta::before { animation: none; } }