/* ===== Teksty SEO: klocki aplikacji ponad makietę v4 (makieta.css bez zmian). Te same tokeny, oba motywy. ===== */
@font-face {
  font-family: "DM Sans";
  src: url("/fonts/DMSans-Variable.ttf") format("truetype");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
:root {
  --logowanie: 400px; --logo-logowanie: 36px; --menu-osoby: 248px; --okno: 480px; --pusta-ikona: 48px; --pusta-ikona-znak: 22px;
  --k-osoba-rola: 184px; --k-osoba-stan: 132px; --k-osoba-logowanie: 156px; --k-osoba-akcje: 264px;
  --k-klient-osoba: 208px; --k-klient-narzedzie: 120px;
}

/* przed odpowiedzią GET /api/ja nic nie migocze */
:root[data-stan="laduje"] body > * { visibility: hidden; }

/* ===== logowanie ===== */
.ts-logowanie { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: var(--s-6) var(--gutter-telefon); }
.ts-logowanie-kolumna { display: grid; justify-items: center; gap: var(--s-6); width: min(var(--logowanie), 100%); }
.ts-logowanie-logo { height: var(--logo-logowanie); }
.ts-logowanie-karta { display: grid; gap: var(--s-4); width: 100%; padding: var(--s-6); }
.ts-logowanie-glowa { display: grid; gap: var(--s-1); }
.ts-logowanie-tytul { margin: 0; font-size: var(--t-22); font-weight: 600; letter-spacing: -.01em; color: var(--tekst); }
.ts-logowanie-opis { margin: 0; font-size: var(--t-14); color: var(--tekst-2); }
.ts-guzik-google { gap: var(--s-3); }
.ts-ikona-google { width: var(--s-4); height: var(--s-4); flex: none; }
.ts-logowanie-stopka { margin: 0; font-size: var(--t-12); color: var(--tekst-3); text-align: center; }
.ts-logowanie-dev { display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: var(--b) solid var(--linia); }
.ts-logowanie-dev .ts-nadtytul { margin-bottom: 0; }
.ts-logowanie-wiersz { display: flex; gap: var(--s-2); min-width: 0; }
.ts-logowanie-wiersz .ts-wybor { flex: 1 1 auto; }
.ts-logowanie-wiersz select { width: 100%; }
@media (max-width: 480px) { .ts-logowanie-karta { padding: var(--s-6) var(--s-4); } }

/* komunikat w treści (błąd albo informacja) */
.ts-komunikat { display: flex; align-items: flex-start; gap: var(--s-2); padding: var(--s-3) var(--s-4); border: var(--b) solid var(--linia-mocna); border-radius: var(--r); background: var(--pow-2); font-size: var(--t-14); font-weight: 500; line-height: var(--lh); color: var(--tekst); }
.ts-komunikat .ts-ikona { width: var(--ikona-mala); height: var(--ikona-mala); margin-top: var(--b-3); }
.ts-komunikat[data-ton="blad"] { border-color: color-mix(in srgb, var(--stan-blad) 35%, transparent); background: var(--stan-blad-tlo); }
.ts-komunikat[data-ton="blad"] .ts-ikona { color: var(--stan-blad); }
.ts-komunikat[data-ton="info"] { border-color: color-mix(in srgb, var(--stan-w-toku) 35%, transparent); background: var(--stan-w-toku-tlo); }
.ts-komunikat[data-ton="info"] .ts-ikona { color: var(--stan-w-toku); }

/* ===== belka: osoba jako przycisk z menu (makieta: wybór osoby do podglądu ról) ===== */
.ts-osoba-blok { position: relative; }
button.ts-osoba { border: 0; background: transparent; color: inherit; text-align: left; }
.ts-menu-osoby { position: absolute; z-index: 50; right: 0; top: calc(100% + var(--s-2)); display: grid; gap: var(--s-1); width: var(--menu-osoby); max-width: calc(100vw - var(--s-8)); padding: var(--s-2); border: var(--b) solid var(--linia-mocna); border-radius: var(--r-tabela); background: var(--pow); box-shadow: var(--cien-unos); }
.ts-menu-osoby-glowa { display: grid; gap: var(--b-2); padding: var(--s-2) var(--s-3) var(--s-3); border-bottom: var(--b) solid var(--linia); line-height: var(--lh-ciasna); }
.ts-menu-osoby-glowa b { font-size: var(--t-14); }
.ts-menu-osoby-glowa span { font-size: var(--t-12); font-weight: 500; color: var(--tekst-2); overflow-wrap: anywhere; }
.ts-pozycja-menu { display: flex; align-items: center; gap: var(--s-3); height: var(--h-menu); padding: 0 var(--s-3); border: 0; border-radius: var(--r); background: transparent; color: var(--tekst-2); font-size: var(--t-14); font-weight: 500; text-align: left; }
.ts-pozycja-menu .ts-ikona { width: var(--ikona-menu); height: var(--ikona-menu); color: var(--tekst-3); }
.ts-pozycja-menu:hover { background: var(--menu-najechane); color: var(--tekst); }

/* ===== pusty stan ekranu ===== */
.ts-pusta-karta { padding: var(--s-8) var(--s-6); }
.ts-pusty-stan { display: grid; justify-items: center; gap: var(--s-3); max-width: 60ch; margin: 0 auto; padding: var(--s-6) 0; text-align: center; }
.ts-pusty-ikona { display: inline-flex; align-items: center; justify-content: center; width: var(--pusta-ikona); height: var(--pusta-ikona); border-radius: 50%; background: var(--menu-aktywne); color: var(--marka); }
.ts-pusty-ikona .ts-ikona { width: var(--pusta-ikona-znak); height: var(--pusta-ikona-znak); }
.ts-pusty-stan strong { font-size: var(--t-18); font-weight: 600; line-height: var(--lh-ciasna); }
.ts-pusty-stan p { font-size: var(--t-14); font-weight: 500; color: var(--tekst-2); }

/* ===== formularze ===== */
.ts-blok-odstep { margin-bottom: var(--s-4); }
.ts-siatka-pol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); }
.ts-blad-pola { font-size: var(--t-12); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--stan-blad); }
.ts-wejscie[aria-invalid="true"], .ts-wybor select[aria-invalid="true"] { border-color: var(--stan-blad); }
.ts-akcje-lewo { justify-content: flex-start; }
.ts-tresc-zaproszenia { padding-top: 0; }
.ts-tekst-zaproszenia { background: var(--pow-2); font-size: var(--t-14); line-height: var(--lh); white-space: pre-wrap; }
.ts-wybor-maly select { height: var(--h-maly); padding-left: var(--s-2); padding-right: var(--s-6); border-radius: var(--r-maly); font-size: var(--t-14); }
.ts-wybor-maly .ts-ikona { right: var(--s-2); }

/* ===== tabela zespołu ===== */
.ts-wiersz-osoby { --kolumny: minmax(0, 1fr) var(--k-osoba-rola) var(--k-osoba-stan) var(--k-osoba-logowanie) var(--k-osoba-akcje); }
.ts-wiersz-osoby[data-wygaszony] .c-osoba, .ts-wiersz-osoby[data-wygaszony] .c-rola, .ts-wiersz-osoby[data-wygaszony] .c-logowanie { opacity: .6; }
.c-osoba { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.ts-osoba-nazwy { display: grid; gap: var(--b-2); min-width: 0; line-height: var(--lh-ciasna); }
.ts-osoba-nazwy b { display: flex; align-items: center; gap: var(--s-2); min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-osoba-nazwy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-12); font-weight: 500; color: var(--tekst-2); }
.ts-osoba-nazwy .ts-aliasy { color: var(--tekst-3); }
.c-rola, .c-logowanie { min-width: 0; color: var(--tekst-2); font-weight: 500; white-space: nowrap; }
.ts-rola-tekst { color: var(--tekst); font-weight: 500; }
.ts-wiersz-osoby .ts-wybor, .ts-wiersz-osoby .ts-wybor select,
.ts-wiersz-klienta .ts-wybor, .ts-wiersz-klienta .ts-wybor select { width: 100%; }
.c-akcje { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); }
.c-akcje-naglowek { text-align: right; }
.ts-guzik-kwadrat { width: var(--h-maly); padding: 0; }
.ts-glowa-listy { min-height: var(--h); }
.c-akcje .ts-guzik .ts-ikona { width: var(--ikona-mala); height: var(--ikona-mala); }
.ts-stan-karty[data-stan="dezakt"] { color: var(--tekst-2); }

/* ===== tabele klientów ===== */
.ts-wiersz-klienta { --kolumny: minmax(0, 1fr) var(--k-klient-osoba) var(--k-klient-osoba) var(--k-klient-narzedzie) var(--k-klient-narzedzie) var(--k-stan-karty); }
.c-folder { white-space: nowrap; }
.ts-wiersz-karty-klienta { --kolumny: minmax(0, 1fr) var(--k-klient-osoba) var(--k-klient-osoba) var(--k-stan-karty); }
.c-klient-karty { min-width: 0; }
.c-w-narzedziu { white-space: nowrap; }
.ts-przelacznik-tak { border-color: var(--linia-mocna); background: var(--pow); }
.ts-przelacznik-tak .ts-ikona { width: var(--ikona-mala); height: var(--ikona-mala); }
.ts-przelacznik-tak[aria-pressed="true"] { border-color: var(--stan-ok-ramka); background: var(--stan-ok-tlo); color: var(--stan-ok); }

/* ===== okno potwierdzenia ===== */
.ts-okno { width: min(var(--okno), calc(100vw - var(--s-8))); max-height: calc(100vh - var(--s-8)); padding: 0; border: var(--b) solid var(--linia-mocna); border-radius: var(--r-karta); background: var(--pow); color: var(--tekst); box-shadow: var(--cien-unos); }
.ts-okno::backdrop { background: var(--zaslona); }
.ts-okno-forma { display: grid; gap: var(--s-4); padding: var(--s-6); }
.ts-okno-tytul { font-size: var(--t-18); font-weight: 700; line-height: var(--lh-ciasna); }
.ts-okno-tresc { display: grid; gap: var(--s-3); font-size: var(--t-14); font-weight: 500; line-height: var(--lh); color: var(--tekst-2); }
.ts-okno-tresc b { color: var(--tekst); }
.ts-okno-tresc .ts-etykieta-pola { color: var(--tekst-2); }
.ts-okno-pola { display: grid; gap: var(--s-3); }
.ts-okno .ts-guzik[data-wariant="usun"] { border-color: transparent; background: var(--stan-blad); color: var(--na-glownym); }
.ts-okno .ts-guzik[data-wariant="usun"]:hover { filter: brightness(1.06); background: var(--stan-blad); }
.ts-okno .ts-guzik:disabled { opacity: .6; cursor: progress; }

/* ===== szerokości ===== */
@container rama (max-width: 1000px) {
  .ts-wiersz.ts-wiersz-osoby { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ts-wiersz.ts-wiersz-osoby > span.c-osoba { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .ts-wiersz.ts-wiersz-osoby > span.c-akcje { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
  .ts-wiersz.ts-wiersz-osoby > span.c-rola { align-items: stretch; }
  .ts-wiersz.ts-wiersz-klienta, .ts-wiersz.ts-wiersz-karty-klienta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ts-wiersz.ts-wiersz-klienta > span.c-klient-karty, .ts-wiersz.ts-wiersz-karty-klienta > span.c-klient-karty { grid-column: 1 / -1; flex-direction: row; }
  .ts-wiersz.ts-wiersz-klienta > span.c-kto { align-items: stretch; }
  .ts-osoba-nazwy b, .ts-osoba-nazwy small { white-space: normal; overflow-wrap: anywhere; }
}
@container rama (max-width: 700px) {
  #stany-osob { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; height: auto; border-radius: var(--r-karta); }
  #stany-osob > button { min-height: var(--h-maly); }
  .ts-siatka-pol { grid-template-columns: minmax(0, 1fr); }
  .ts-glowa-listy .ts-guzik[data-wariant="glowny"] { margin-left: auto; }
  .ts-pusta-karta { padding: var(--s-4); }
  .ts-kblok-tresc { padding-left: var(--s-4); padding-right: var(--s-4); }
  .ts-kblok-glowa h2 { flex-wrap: wrap; }
}
@container rama (max-width: 380px) {
  .ts-wiersz.ts-wiersz-osoby, .ts-wiersz.ts-wiersz-klienta { grid-template-columns: minmax(0, 1fr); }
}
/* wiersze bez przejścia do szczegółów (karta klienta dochodzi w fazie D): bez podkreślenia nazwy przy najechaniu */
.ts-wiersz-klienta:hover .ts-klient-nazwy b, .ts-wiersz-karty-klienta:hover .ts-klient-nazwy b { text-decoration: none; }
.ts-wiersz-osoby:hover, .ts-wiersz-klienta:hover, .ts-wiersz-karty-klienta:hover { background: transparent; }

/* ===== lista tekstów (faza B) ===== */
#lista-analiz .ts-wiersz { cursor: pointer; }
.ts-link-wiersza { min-width: 0; max-width: 100%; padding: 0; border: 0; background: transparent; color: var(--tekst); text-align: left; }
.ts-link-wiersza:focus-visible { border-radius: var(--r-maly); }
.c-fraza:has(.ts-blad-wiersza) { flex-wrap: wrap; row-gap: var(--s-1); }
.ts-blad-wiersza { flex-basis: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-12); font-weight: 600; color: var(--stan-blad); }
.ts-znaczek-zmiana { background: var(--stan-w-toku-tlo); color: var(--stan-w-toku); }
.c-slowa .ts-guzik-maly .ts-ikona { width: var(--ikona-mala); height: var(--ikona-mala); }
.ts-podglad { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-14); font-weight: 600; color: var(--tekst-2); }
.ts-podglad .ts-wybor select { max-width: 220px; }
#lista-analiz .c-termin { flex-wrap: wrap; row-gap: var(--s-1); }
@container rama (max-width: 1000px) {
  .ts-blad-wiersza { white-space: normal; }
}
@container rama (max-width: 700px) {
  .ts-podglad { width: 100%; }
  .ts-podglad .ts-wybor { flex: 1 1 auto; }
  .ts-podglad .ts-wybor select { width: 100%; max-width: none; }
}

/* ===== faza C: ekran pisania (makieta v4 „B”, edytor ProseMirror zamiast contenteditable) ===== */
/* style wymagane przez ProseMirror (prosemirror-view/style/prosemirror.css) */
.ProseMirror { position: relative; word-wrap: break-word; white-space: pre-wrap; white-space: break-spaces; font-variant-ligatures: none; font-feature-settings: "liga" 0; }
.ProseMirror li { position: relative; }
.ProseMirror-hideselection *::selection { background: transparent; }
.ProseMirror-hideselection { caret-color: transparent; }
.ProseMirror [draggable][contenteditable=false] { user-select: text; }
.ProseMirror-selectednode { outline: var(--b-2) solid var(--akcent); }
img.ProseMirror-separator { display: inline !important; border: none !important; margin: 0 !important; }
/* H1 w treści dokumentu (w makiecie osobne pole nad treścią), H4 z wklejki */
.ts-tresc > h1:first-child { margin-top: 0; }
.ts-tresc > h1:first-child + * { margin-top: var(--s-4); }
.ts-tresc h1:not(.ts-h1) { font-size: var(--t-28); font-weight: 700; line-height: var(--lh-ciasna); }
.ts-tresc h4 { position: relative; margin-top: var(--s-4); font-size: var(--t-16); line-height: var(--lh-ciasna); font-weight: 700; }
.ts-tresc h4::before { position: absolute; right: 100%; margin-right: var(--s-3); font-size: var(--t-12); font-weight: 700; color: var(--tekst-3); letter-spacing: .02em; content: "H4"; user-select: none; pointer-events: none; }
.ts-tresc table { width: 100%; border-collapse: collapse; font-size: var(--t-14); }
.ts-tresc td, .ts-tresc th { padding: var(--s-2) var(--s-3); border: var(--b) solid var(--linia); vertical-align: top; text-align: left; }
.ts-tresc th { font-weight: 700; background: var(--pow-2); }
.ts-tresc mark[data-odeslane] { text-decoration-style: solid; }
#miejsce-edytora[hidden] { display: none; }
/* podświetlenie słów jako dekoracje edytora (te same kolory co ::highlight w makiecie) */
.ts-hl-slowo-ok { background-color: color-mix(in oklch, var(--sl-ok) var(--tint-tekst), transparent); }
.ts-hl-slowo-malo { background-color: color-mix(in oklch, var(--sl-malo) var(--tint-tekst), transparent); }
.ts-hl-slowo-duzo { background-color: color-mix(in oklch, var(--sl-duzo) var(--tint-tekst), transparent); }
.ts-hl-fraza-ok, .ts-hl-fraza-malo, .ts-hl-fraza-duzo { text-decoration-line: underline; text-decoration-style: dotted; text-decoration-thickness: var(--b-2); text-underline-offset: var(--s-1); }
.ts-hl-fraza-ok { text-decoration-color: var(--sl-ok); }
.ts-hl-fraza-malo { text-decoration-color: var(--sl-malo); }
.ts-hl-fraza-duzo { text-decoration-color: var(--sl-duzo); }
.ts-hl-wybrane { background-color: color-mix(in oklch, var(--akcent) 28%, transparent); text-decoration-line: underline; text-decoration-color: var(--akcent); text-decoration-thickness: var(--b-2); text-underline-offset: var(--s-1); }
.ts-hl-znalezione { background-color: color-mix(in oklch, var(--st-termin) 40%, transparent); }
/* wskaźnik oceny bez stylów w atrybutach (CSP style-src 'self') */
#wskaznik-svg .ts-luk-tor { stroke: color-mix(in oklch, var(--kolor) var(--tor), var(--pow)); }
#wskaznik-svg .ts-luk-wartosc { stroke: var(--kolor); }
#wskaznik-svg .ts-luk-cel { stroke: var(--tekst-2); }
/* paski nad tekstem: prośba o cel i zmiany z arkusza (niebieskie), konflikt zapisu (czerwony) */
.ts-uwagi-pasek[data-ton="info"] { background: var(--stan-w-toku-tlo); box-shadow: inset var(--b-3) 0 0 var(--stan-w-toku); }
.ts-uwagi-pasek[data-ton="info"] > .ts-ikona { color: var(--stan-w-toku); }
.ts-uwagi-pasek[data-ton="blad"] { background: var(--stan-blad-tlo); box-shadow: inset var(--b-3) 0 0 var(--stan-blad); }
.ts-uwagi-pasek[data-ton="blad"] > .ts-ikona { color: var(--stan-blad); }
.ts-uwagi-pasek + .ts-uwagi-pasek { border-radius: 0; }
.ts-uwagi-pasek .ts-guzik-maly { margin-top: var(--s-2); }
.ts-pasek-tresc { display: grid; gap: var(--s-1); min-width: 0; flex: 1 1 auto; }
.ts-pasek-tresc > .ts-akcje { margin-top: var(--s-1); }
.ts-pasek-tresc > .ts-akcje[hidden] { display: none; }
.ts-roznice { display: grid; gap: var(--s-1); margin-top: var(--s-1); font-size: var(--t-14); }
.ts-roznice > div { display: grid; grid-template-columns: var(--kolumna-zam) minmax(0, 1fr); gap: var(--s-3); }
.ts-roznice dt { font-weight: 600; color: var(--tekst-2); }
.ts-roznice dd { display: grid; font-weight: 500; overflow-wrap: anywhere; }
.ts-roznice .ts-bylo { color: var(--tekst-2); text-decoration: line-through; }
/* menu linków przy pasku narzędzi */
.ts-menu-linkow { position: absolute; right: auto; display: grid; gap: var(--s-2); }
.ts-menu-linkow .ts-guzik { justify-content: flex-start; }
.ts-menu-linkow-wiersz { display: flex; gap: var(--s-2); }
.ts-menu-linkow-wiersz .ts-wejscie { flex: 1 1 auto; min-width: 0; }
.ts-powtorz .ts-siatka-pol { margin-top: var(--s-1); }
[data-margines] { margin-top: var(--s-3); }
.ts-kontrolna-tresc .ts-znaczek { justify-self: start; margin-top: var(--s-1); }

/* =====================================================================================================================
   Faza E: dzwonek, podpowiedzi, wysyłka na ekranie pisania, Miara, Koszty, Stan, Ustawienia, Pomoc, przewodnik.
   ===================================================================================================================== */
:root { --dzwonek-panel: 360px; --kafel-min: 200px; --przewodnik-karta: 380px; --k-miara-data: 108px; --k-miara-osoba: 168px;
  --k-koszt-model: 220px; --k-koszt-liczba: 104px; --k-koszt-tokeny: 200px; --k-koszt-klient: 200px; --k-pasek-miary: 160px; }

/* ----- belka: podpowiedzi i dzwonek ----- */
.ts-kompas { height: var(--h-maly); padding: 0 var(--s-3); color: var(--tekst-2); font-weight: 600; }
.ts-kompas .ts-ikona { width: var(--ikona-mala); height: var(--ikona-mala); }
.ts-dzwonek-blok { position: relative; }
.ts-dzwonek { position: relative; }
.ts-dzwonek-licznik { position: absolute; top: calc(var(--b-2) * -1); right: calc(var(--b-2) * -1); display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 var(--s-1); border-radius: var(--r-pelny); background: var(--marka); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
.ts-dzwonek-panel { position: absolute; z-index: 50; right: 0; top: calc(100% + var(--s-2)); display: grid; width: var(--dzwonek-panel); max-width: calc(100vw - var(--s-8)); max-height: min(70vh, 520px); border: var(--b) solid var(--linia-mocna); border-radius: var(--r-tabela); background: var(--pow); box-shadow: var(--cien-unos); overflow: hidden; grid-template-rows: auto minmax(0, 1fr); }
.ts-dzwonek-glowa { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-bottom: var(--b) solid var(--linia); font-size: var(--t-14); }
.ts-dzwonek-lista { margin: 0; padding: var(--s-1); list-style: none; overflow-y: auto; }
.ts-dzwonek-lista a, .ts-dzwonek-lista .ts-dzwonek-pusto { display: grid; gap: var(--b-2); padding: var(--s-2) var(--s-3); border-radius: var(--r); color: var(--tekst); text-decoration: none; font-size: var(--t-14); line-height: var(--lh-ciasna); }
.ts-dzwonek-lista a:hover { background: var(--menu-najechane); }
.ts-dzwonek-lista a[data-nowe] { font-weight: 600; }
.ts-dzwonek-lista a[data-nowe]::before { content: ""; justify-self: start; width: 6px; height: 6px; margin-bottom: var(--b-2); border-radius: 50%; background: var(--marka); }
.ts-dzwonek-lista small { font-size: var(--t-12); font-weight: 500; color: var(--tekst-3); }
.ts-dzwonek-pusto { color: var(--tekst-2); }
@container rama (max-width: 700px) { .ts-kompas span { display: none; } .ts-kompas { width: var(--h-maly); padding: 0; justify-content: center; } }

/* ----- lista: nowe zamówienie ----- */
.ts-akcje-listy { flex: 0 1 auto; }
.ts-pole-szerokie { width: 100%; }
.ts-siatka-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container rama (max-width: 1000px) { .ts-siatka-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container rama (max-width: 700px) { .ts-siatka-3 { grid-template-columns: minmax(0, 1fr); } }

/* ----- ekran pisania: plik, publikacja ----- */
.ts-publikacja .ts-wejscie { width: 100%; }
#eksport-pasek .ts-uwagi-tresc a { color: var(--akcent); font-weight: 600; }
.ts-uwagi-pasek[data-ton="blad"] .ts-uwagi-glowa { color: var(--stan-blad); }

/* ----- kafle liczb (Miara, Koszty, Stan) ----- */
.ts-kafle { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--kafel-min), 1fr)); gap: var(--s-4); margin-bottom: var(--s-4); }
.ts-kafel { display: grid; align-content: start; gap: var(--s-1); min-width: 0; padding: var(--s-4) var(--s-6); }
.ts-kafel-etykieta { font-size: var(--t-12); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tekst-3); }
.ts-kafel-liczba { font-size: var(--t-28); font-weight: 700; line-height: 1.1; color: var(--tekst); }
.ts-kafel-liczba small { margin-left: var(--s-1); font-size: var(--t-14); font-weight: 600; color: var(--tekst-2); }
.ts-kafel-opis { font-size: var(--t-14); font-weight: 500; color: var(--tekst-2); }
.ts-kafel[data-ton="ok"] .ts-kafel-liczba { color: var(--stan-ok); }
.ts-kafel[data-ton="uwaga"] .ts-kafel-liczba { color: var(--stan-uwaga); }
.ts-kafel[data-ton="blad"] .ts-kafel-liczba { color: var(--stan-blad); }
.ts-dwie-karty { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-bottom: var(--s-4); }
@container rama (max-width: 1000px) { .ts-dwie-karty { grid-template-columns: minmax(0, 1fr); } }
.ts-miesiac { display: inline-flex; }

/* wiersze z paskiem (osoby, etapy, kolejka) */
.ts-paski-listy { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.ts-pasek-listy { display: grid; grid-template-columns: minmax(0, 1fr) var(--k-pasek-miary) auto; align-items: center; gap: var(--s-3); font-size: var(--t-14); }
.ts-pasek-listy > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.ts-pasek-listy > b { min-width: 7ch; text-align: right; font-weight: 700; }
.ts-pasek-listy small { font-weight: 500; color: var(--tekst-3); }
.ts-pusto-maly { font-size: var(--t-14); font-weight: 500; color: var(--tekst-2); }
@container rama (max-width: 700px) { .ts-pasek-listy { grid-template-columns: minmax(0, 1fr) auto; } .ts-pasek-listy > .ts-postep { grid-column: 1 / -1; order: 3; } }

/* tabele ekranów administratora */
.ts-wiersz-miary { --kolumny: minmax(0, 1fr) var(--k-miara-osoba) var(--k-miara-data) var(--k-miara-data) var(--k-miara-data) var(--k-miara-data); }
.ts-wiersz-kosztu { --kolumny: minmax(0, 1fr) var(--k-koszt-model) var(--k-koszt-liczba) var(--k-koszt-tokeny) var(--k-koszt-liczba); }
.ts-wiersz-kosztu-tekstu { --kolumny: minmax(0, 1fr) var(--k-koszt-klient) var(--k-koszt-liczba) var(--k-koszt-tokeny); }
.ts-wiersz-miary, .ts-wiersz-kosztu, .ts-wiersz-kosztu-tekstu { font-variant-numeric: tabular-nums; }
@container rama (min-width: 1001px) {
  .ts-wiersz-miary > span, .ts-wiersz-kosztu > span, .ts-wiersz-kosztu-tekstu > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@container rama (max-width: 1000px) {
  .ts-wiersz-miary > span, .ts-wiersz-kosztu > span, .ts-wiersz-kosztu-tekstu > span { overflow-wrap: anywhere; }
  .ts-wiersz-kosztu > span:nth-child(2), .ts-wiersz-kosztu > span:nth-child(4) { grid-column: span 2; }
}
.ts-wiersz-miary a, .ts-wiersz-kosztu-tekstu a { color: var(--tekst); font-weight: 600; text-decoration: none; }
.ts-wiersz-miary a:hover, .ts-wiersz-kosztu-tekstu a:hover { text-decoration: underline; }
.ts-wiersz-miary small, .ts-wiersz-kosztu-tekstu small { display: block; font-size: var(--t-12); font-weight: 500; color: var(--tekst-3); }
.ts-lista > .ts-lista-tytul { padding: var(--s-4) var(--s-6) 0; font-size: var(--t-16); font-weight: 600; }
#miara-wiersze > .ts-wiersz:last-child, #koszty-kroki > .ts-wiersz:last-child, #koszty-teksty > .ts-wiersz:last-child { border-bottom: 0; }
#miara-lista .ts-wiersz:hover, #koszty-kroki-blok .ts-wiersz:hover, #koszty-teksty-blok .ts-wiersz:hover { background: transparent; }
.ts-tak { color: var(--stan-uwaga); font-weight: 600; }

/* stan: listy zdarzeń */
.ts-lista-stanu { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; font-size: var(--t-14); }
.ts-lista-stanu li { display: grid; gap: var(--b-2); padding-bottom: var(--s-2); border-bottom: var(--b) solid var(--linia); }
.ts-lista-stanu li:last-child { padding-bottom: 0; border-bottom: 0; }
.ts-lista-stanu small { font-size: var(--t-12); font-weight: 500; color: var(--tekst-2); overflow-wrap: anywhere; }
.ts-lista-stanu a { color: var(--tekst); font-weight: 600; }

/* ----- Pomoc ----- */
.ts-pomoc { display: grid; gap: var(--s-3); max-width: 900px; padding: var(--s-6) var(--s-8) var(--s-8); font-size: var(--t-14); font-weight: 500; line-height: var(--lh); color: var(--tekst-2); }
.ts-pomoc h2 { margin-top: var(--s-4); font-size: var(--t-18); font-weight: 700; line-height: var(--lh-ciasna); color: var(--tekst); }
.ts-pomoc h2:first-child { margin-top: 0; }
.ts-pomoc b { color: var(--tekst); }
.ts-pomoc-tabela { overflow-x: auto; border: var(--b) solid var(--linia); border-radius: var(--r-tabela); }
.ts-pomoc table { width: 100%; border-collapse: collapse; }
.ts-pomoc th, .ts-pomoc td { padding: var(--s-2) var(--s-3); border-bottom: var(--b) solid var(--linia); text-align: left; vertical-align: top; }
.ts-pomoc tr:last-child td { border-bottom: 0; }
.ts-pomoc th { background: var(--pow-2); font-size: var(--t-12); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tekst-3); }
.ts-pomoc td:first-child { font-weight: 600; color: var(--tekst); white-space: nowrap; }
@container rama (max-width: 700px) {
  .ts-pomoc { padding: var(--s-4); }
  .ts-pomoc td:first-child { white-space: normal; }
  .ts-pomoc table, .ts-pomoc tbody, .ts-pomoc tr, .ts-pomoc td { display: block; }
  .ts-pomoc thead { display: none; }
  .ts-pomoc tr { padding: var(--s-2) 0; border-bottom: var(--b) solid var(--linia); }
  .ts-pomoc tr:last-child { border-bottom: 0; }
  .ts-pomoc td { padding: var(--b-2) var(--s-3); border-bottom: 0; }
  .ts-kafel { padding: var(--s-3) var(--s-4); }
  .ts-kafel-liczba { font-size: var(--t-22); }
  .ts-glowa-listy > .ts-akcje { width: 100%; justify-content: flex-start; }
}

/* ----- przewodnik (port SpotlightTour z Huba) ----- */
.ts-przewodnik { position: fixed; inset: 0; z-index: 90; }
.ts-przewodnik-blokada { position: fixed; inset: 0; }
.ts-przewodnik-zaslona { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); }
.ts-przewodnik-wyciecie { position: fixed; border-radius: 14px; border: var(--b) solid color-mix(in srgb, var(--akcent) 60%, transparent); box-shadow: 0 0 0 200vmax rgba(0, 0, 0, .45), 0 0 20px 0 color-mix(in srgb, var(--akcent) 25%, transparent); pointer-events: none; transition: left .3s ease-out, top .3s ease-out, width .3s ease-out, height .3s ease-out; }
.ts-przewodnik-karta { position: fixed; z-index: 95; display: grid; gap: var(--s-3); width: var(--przewodnik-karta); max-width: calc(100vw - 32px); padding: var(--s-6) var(--s-6) var(--s-4); border: var(--b) solid var(--linia-mocna); border-radius: var(--r-karta); background: var(--pow); box-shadow: var(--cien-unos); color: var(--tekst); }
.ts-przewodnik-karta[data-srodek] { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.ts-przewodnik-glowa { display: flex; align-items: center; gap: var(--s-3); }
.ts-przewodnik-ikona { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r); background: var(--pow-3); color: var(--tekst); flex: none; }
.ts-przewodnik-ikona .ts-ikona { width: var(--ikona); height: var(--ikona); }
.ts-przewodnik-licznik { margin-left: auto; margin-right: var(--s-6); font-size: var(--t-12); font-weight: 600; color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.ts-przewodnik-zamknij { position: absolute; top: var(--s-3); right: var(--s-3); }
.ts-przewodnik-karta h2 { font-size: var(--t-18); font-weight: 700; line-height: var(--lh-ciasna); }
.ts-przewodnik-karta p { font-size: var(--t-14); font-weight: 500; line-height: var(--lh); color: var(--tekst-2); }
.ts-przewodnik-stopka { display: flex; align-items: center; gap: var(--s-2); }
.ts-przewodnik-kropki { display: flex; align-items: center; gap: 6px; margin-right: auto; }
.ts-przewodnik-kropki i { width: 6px; height: 6px; border-radius: var(--r-pelny); background: var(--linia-mocna); transition: width .3s ease; }
.ts-przewodnik-kropki i[data-biezaca] { width: 16px; background: var(--tekst); }
.ts-przewodnik-wylacz { justify-self: start; padding: 0; border: 0; background: none; color: var(--tekst-3); font-size: var(--t-12); font-weight: 500; }
.ts-przewodnik-wylacz:hover { color: var(--tekst-2); text-decoration: underline; }
@media (max-width: 640px) {
  .ts-przewodnik-karta, .ts-przewodnik-karta[data-srodek] { left: 0 !important; right: 0; top: auto !important; bottom: 0; transform: none; width: 100%; max-width: none; padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom)); border-radius: var(--r-karta) var(--r-karta) 0 0; }
}
@media (prefers-reduced-motion: reduce) { .ts-przewodnik-wyciecie, .ts-przewodnik-kropki i { transition: none; } }