/* Tulsy Design System 1.0 — dist/tulsy.css = tokeny + komponenty. Czysty CSS, bez frameworka. */
:root, [data-theme="light"] {
  --tl-neutral-50: #f9fafb;
  --tl-neutral-100: #f1f2f5;
  --tl-neutral-200: #e4e6ea;
  --tl-neutral-300: #d1d4da;
  --tl-neutral-400: #a0a5ac;
  --tl-neutral-500: #737880;
  --tl-neutral-600: #595e66;
  --tl-neutral-700: #434850;
  --tl-neutral-800: #2c3138;
  --tl-neutral-900: #1b1e24;
  --tl-neutral-950: #0f1216;
  --tl-bg: #f4f6f8;
  --tl-surface: #ffffff;
  --tl-surface-strong: var(--tl-neutral-100);
  --tl-surface-raised: #ffffff;
  --tl-text: var(--tl-neutral-900);
  --tl-muted: var(--tl-neutral-600);
  --tl-border: var(--tl-neutral-200);
  --tl-border-strong: #82868e;
  --tl-accent: #2563eb;
  --tl-ink-inverse: #ffffff;
  --tl-success: #2c7f44;
  --tl-on-success: #ffffff;
  --tl-success-text: #0f6a31;
  --tl-success-bg: #e6fae9;
  --tl-success-border: #b3d9b9;
  --tl-warning: #faab3f;
  --tl-on-warning: #0f1216;
  --tl-warning-text: #7b4c00;
  --tl-warning-bg: #fff1e2;
  --tl-warning-border: #eec698;
  --tl-danger: #c22826;
  --tl-on-danger: #ffffff;
  --tl-danger-text: #a8000f;
  --tl-danger-bg: #ffefed;
  --tl-danger-border: #ffbab1;
  --tl-info: #00769f;
  --tl-on-info: #ffffff;
  --tl-info-text: #006083;
  --tl-info-bg: #e7f6ff;
  --tl-info-border: #aad5ec;
  --tl-overlay: rgba(15, 18, 22, 0.48);
  --tl-skeleton: var(--tl-neutral-100);
  --tl-shadow-sm: 0 1px 2px rgba(15, 18, 22, 0.06);
  --tl-shadow: 0 1px 2px rgba(15, 18, 22, 0.05), 0 2px 8px rgba(15, 18, 22, 0.06);
  --tl-shadow-md: 0 4px 12px rgba(15, 18, 22, 0.08), 0 1px 3px rgba(15, 18, 22, 0.06);
  --tl-shadow-lg: 0 16px 40px rgba(15, 18, 22, 0.16), 0 2px 6px rgba(15, 18, 22, 0.08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tl-bg: #0f1216;
    --tl-surface: #1b1e24;
    --tl-surface-strong: var(--tl-neutral-800);
    --tl-surface-raised: #2c3138;
    --tl-text: var(--tl-neutral-100);
    --tl-muted: var(--tl-neutral-400);
    --tl-border: #2f343b;
    --tl-border-strong: #70757c;
    --tl-ink-inverse: #0f1216;
    --tl-success: #69ba7c;
    --tl-on-success: #0f1216;
    --tl-success-text: #89da9b;
    --tl-success-bg: #192f1e;
    --tl-success-border: #34563b;
    --tl-warning: #df911a;
    --tl-warning-text: #ffb24f;
    --tl-warning-bg: #392407;
    --tl-warning-border: #674519;
    --tl-danger: #ff7266;
    --tl-on-danger: #0f1216;
    --tl-danger-text: #ffaba1;
    --tl-danger-bg: #441a16;
    --tl-danger-border: #793630;
    --tl-info: #53b0de;
    --tl-on-info: #0f1216;
    --tl-info-text: #74d1ff;
    --tl-info-bg: #132c39;
    --tl-info-border: #2b5266;
    --tl-overlay: rgba(0, 0, 0, 0.64);
    --tl-skeleton: var(--tl-neutral-800);
    --tl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --tl-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);
    --tl-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.5);
    --tl-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.5);
  }
}
[data-theme="dark"] {
  --tl-bg: #0f1216;
  --tl-surface: #1b1e24;
  --tl-surface-strong: var(--tl-neutral-800);
  --tl-surface-raised: #2c3138;
  --tl-text: var(--tl-neutral-100);
  --tl-muted: var(--tl-neutral-400);
  --tl-border: #2f343b;
  --tl-border-strong: #70757c;
  --tl-ink-inverse: #0f1216;
  --tl-success: #69ba7c;
  --tl-on-success: #0f1216;
  --tl-success-text: #89da9b;
  --tl-success-bg: #192f1e;
  --tl-success-border: #34563b;
  --tl-warning: #df911a;
  --tl-warning-text: #ffb24f;
  --tl-warning-bg: #392407;
  --tl-warning-border: #674519;
  --tl-danger: #ff7266;
  --tl-on-danger: #0f1216;
  --tl-danger-text: #ffaba1;
  --tl-danger-bg: #441a16;
  --tl-danger-border: #793630;
  --tl-info: #53b0de;
  --tl-on-info: #0f1216;
  --tl-info-text: #74d1ff;
  --tl-info-bg: #132c39;
  --tl-info-border: #2b5266;
  --tl-overlay: rgba(0, 0, 0, 0.64);
  --tl-skeleton: var(--tl-neutral-800);
  --tl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --tl-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);
  --tl-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.5);
  --tl-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.5);
}
:root {
  --tl-space-0: 0px;
  --tl-space-1: 4px;
  --tl-space-2: 8px;
  --tl-space-3: 12px;
  --tl-space-4: 16px;
  --tl-space-5: 20px;
  --tl-space-6: 24px;
  --tl-space-8: 32px;
  --tl-space-10: 40px;
  --tl-space-12: 48px;
  --tl-space-16: 64px;
  --tl-space-24: 96px;
  --tl-radius-xs: 4px;
  --tl-radius-sm: 6px;
  --tl-radius: 10px;
  --tl-radius-lg: 14px;
  --tl-radius-xl: 20px;
  --tl-radius-pill: 999px;
  --tl-z-base: 0;
  --tl-z-sticky: 100;
  --tl-z-topbar: 200;
  --tl-z-dropdown: 300;
  --tl-z-drawer: 400;
  --tl-z-modal: 500;
  --tl-z-toast: 600;
  --tl-z-consent: 700;
  --tl-z-splash: 800;
  --tl-z-tooltip: 900;
  --tl-dur-instant: 80ms;
  --tl-dur-fast: 140ms;
  --tl-dur-base: 220ms;
  --tl-dur-slow: 360ms;
  --tl-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --tl-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --tl-touch: 44px;
  --tl-control-h: 44px;
  --tl-control-h-sm: 36px;
  --tl-topbar-h: 56px;
  --tl-bottomnav-h: 64px;
  --tl-sidebar-w: 248px;
  --tl-sidebar-w-collapsed: 64px;
  --tl-content-max: 1200px;
  --tl-form-max: 440px;
  --tl-prose-max: 68ch;
  --tl-icon: 24px;
  --tl-icon-sm: 20px;
  --tl-icon-xs: 16px;
  --font-sans: Figtree, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
@font-face { font-family: "Figtree"; src: url("/_content/Tulsy.DesignSystem/fonts/Figtree-Variable.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }

/* ==========================================================================
   Tulsy — komponenty i reguły (bundle.css)
   Wartości bazowe (kolory, odstępy, promienie, cienie…) pochodzą z tokens.json
   (→ tokens.css). Tu: reguły motywu, wyprowadzanie akcentu, komponenty, powłoka.
   Bez frameworka. Wszystko działa bez JavaScriptu; JS (bundle.js) tylko ulepsza.
   ========================================================================== */

/* ---------- 1. Motyw: parametry reguł akcentu (jasny / ciemny) ---------- */
/* Reguły jasności w OKLCH. `l` to jasność koloru bazowego (0–1).            */
:root, [data-theme="light"] {
  color-scheme: light;
  --tl-r-fill: l;                 /* wypełnienie = akcent                        */
  --tl-r-text: min(l, .48);       /* tekst/linki: nie jaśniej niż L .48 → ≥4.7:1 */
  --tl-r-ui: min(l, .58);         /* focus, obramowania, wskaźniki → ≥3.2:1      */
  --tl-tint-pct: 10%;             /* delikatne tło                               */
  --tl-logo-light: block; --tl-logo-dark: none;
}
[data-theme="dark"] {
  color-scheme: dark;
  --tl-r-fill: max(l, .48);       /* bardzo ciemny akcent podniesiony do L .48   */
  --tl-r-text: max(l, .81);       /* tekst/linki: nie ciemniej niż L .81         */
  --tl-r-ui: max(l, .70);
  --tl-tint-pct: 18%;
  --tl-logo-light: none; --tl-logo-dark: block;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --tl-r-fill: max(l, .48);
    --tl-r-text: max(l, .81);
    --tl-r-ui: max(l, .70);
    --tl-tint-pct: 18%;
    --tl-logo-light: none; --tl-logo-dark: block;
  }
}

/* ---------- 2. Rodzina akcentu wyprowadzana z --tl-accent ---------- */
/* Deklarowana na :root, na każdym elemencie z motywem i na każdym, który
   nadpisuje --tl-accent w atrybucie style (np. kafelek aplikacji), bo zmienne
   CSS liczą się tam, gdzie są zadeklarowane.                                 */
:root, [data-theme], [style*="--tl-accent"], .tl-accent-scope {
  /* Wypełnienie: unika „martwej strefy” L .52–.72, w której ani biały, ani
     ciemny tekst nie daje pewnych 4.5:1. Poniżej progu .62 → maks. .52,
     powyżej → min. .72.                                                    */
  --tl-accent-fill: oklch(from var(--tl-accent)
      calc((1 - clamp(0, (var(--tl-r-fill) - .62) * 1000, 1)) * min(var(--tl-r-fill), .52)
         + clamp(0, (var(--tl-r-fill) - .62) * 1000, 1) * max(var(--tl-r-fill), .72)) c h);
  /* Tekst na akcencie: biały, gdy L wypełnienia < .62; inaczej prawie czarny. */
  --tl-on-accent: oklch(from var(--tl-accent-fill)
      calc(1 - clamp(0, (l - .62) * 1000, 1) * .82) calc(clamp(0, (l - .62) * 1000, 1) * .01) 260);
  /* Hover/active odsuwają wypełnienie OD koloru tekstu (kontrast rośnie).   */
  --tl-accent-fill-hover: oklch(from var(--tl-accent-fill) calc(l - .06 + .12 * clamp(0, (l - .62) * 1000, 1)) c h);
  --tl-accent-fill-active: oklch(from var(--tl-accent-fill) calc(l - .10 + .20 * clamp(0, (l - .62) * 1000, 1)) c h);
  --tl-accent-text: oklch(from var(--tl-accent) var(--tl-r-text) c h);
  --tl-accent-ui: oklch(from var(--tl-accent) var(--tl-r-ui) c h);
  --tl-accent-tint: color-mix(in oklab, var(--tl-accent) var(--tl-tint-pct), var(--tl-surface));
  --tl-accent-tint-strong: color-mix(in oklab, var(--tl-accent) calc(var(--tl-tint-pct) * 1.8), var(--tl-surface));
  --tl-accent-border: color-mix(in oklab, var(--tl-accent) 45%, var(--tl-surface));
  --tl-focus-ring: var(--tl-accent-ui);
}
/* Starsze przeglądarki bez składni względnej (przed 2024): bezpieczny zapas. */
@supports not (color: oklch(from red l c h)) {
  :root, [data-theme], [style*="--tl-accent"], .tl-accent-scope {
    --tl-accent-fill: var(--tl-accent);
    --tl-on-accent: #ffffff;
    --tl-accent-fill-hover: color-mix(in srgb, var(--tl-accent) 85%, #000);
    --tl-accent-fill-active: color-mix(in srgb, var(--tl-accent) 75%, #000);
    --tl-accent-text: color-mix(in srgb, var(--tl-accent) 80%, var(--tl-text));
    --tl-accent-ui: var(--tl-accent-text);
  }
}

/* ---------- 3. Ruch ---------- */
@media (prefers-reduced-motion: reduce) {
  :root { --tl-dur-instant: .01ms; --tl-dur-fast: .01ms; --tl-dur-base: .01ms; --tl-dur-slow: .01ms; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- 4. Baza ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, .tl-base {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px; line-height: 24px;
  color: var(--tl-text);
  background: var(--tl-bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01" 0;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:where(a) { color: var(--tl-accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
:where(a):hover { text-decoration-thickness: 2px; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--tl-focus-ring); outline-offset: 2px; border-radius: var(--tl-radius-xs); }
::selection { background: var(--tl-accent-tint-strong); color: var(--tl-text); }
.tl-num { font-variant-numeric: tabular-nums; }
.tl-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tl-skip { position: absolute; left: var(--tl-space-2); top: -100px; z-index: var(--tl-z-tooltip); background: var(--tl-surface); color: var(--tl-text); padding: var(--tl-space-2) var(--tl-space-4); border-radius: var(--tl-radius); box-shadow: var(--tl-shadow-md); }
.tl-skip:focus { top: var(--tl-space-2); }

/* Typografia (klasy z tokens.json; tu wersje płynne dla dużych stopni) */
.tl-display { font-size: clamp(32px, 2.2vw + 22px, 44px); line-height: 1.1; font-weight: 750; letter-spacing: -.02em; text-wrap: balance; }
.tl-h1 { font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -.015em; text-wrap: balance; }
.tl-h2 { font-size: 20px; line-height: 26px; font-weight: 650; letter-spacing: -.01em; }
.tl-h3 { font-size: 18px; line-height: 24px; font-weight: 650; }
.tl-h4 { font-size: 16px; line-height: 22px; font-weight: 650; }
.tl-body-lg { font-size: 18px; line-height: 28px; }
.tl-body { font-size: 16px; line-height: 24px; }
.tl-body-sm { font-size: 14px; line-height: 20px; }
.tl-label { font-size: 14px; line-height: 20px; font-weight: 600; }
.tl-caption { font-size: 13px; line-height: 18px; font-weight: 500; }
.tl-overline { font-size: 12px; line-height: 16px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--tl-muted); }
.tl-muted { color: var(--tl-muted); }
.tl-prose { max-width: var(--tl-prose-max); }
.tl-prose > * + * { margin-top: var(--tl-space-4); }
.tl-prose h2 { font-size: 20px; line-height: 26px; font-weight: 650; letter-spacing: -.01em; margin-top: var(--tl-space-8); scroll-margin-top: var(--tl-space-6); }
.tl-prose h3 { font-size: 18px; line-height: 24px; font-weight: 650; margin-top: var(--tl-space-6); }
.tl-prose ul, .tl-prose ol { padding-left: var(--tl-space-6); display: flex; flex-direction: column; gap: var(--tl-space-2); }
.tl-prose a { color: var(--tl-accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.tl-prose a:hover { text-decoration-thickness: 2px; }
.tl-prose blockquote { border-left: 3px solid var(--tl-border-strong); padding-left: var(--tl-space-4); color: var(--tl-muted); }
.tl-prose code { font-size: .92em; background: var(--tl-surface-strong); padding: 1px 6px; border-radius: 4px; }
.tl-prose .tl-table-wrap { max-width: none; }
.tl-prose caption { text-align: left; padding: var(--tl-space-3) var(--tl-space-4); font-size: 13px; color: var(--tl-muted); }
.tl-note { border: 1px solid var(--tl-info-border); background: var(--tl-info-bg); color: var(--tl-text); border-radius: var(--tl-radius); padding: var(--tl-space-4); font-size: 15px; line-height: 22px; }
.tl-note a { color: var(--tl-info-text); }
.tl-article__meta { display: flex; flex-wrap: wrap; gap: var(--tl-space-2) var(--tl-space-4); color: var(--tl-muted); font-size: 14px; line-height: 20px; }

/* ---------- 5. Breakpointy: 480 / 760 / 1100 ---------- */
/* Źródło pisze je jako @media (…), żeby podglądy telefonu i desktopu
   działały obok siebie. dist/tulsy.css (produkcja) zamienia je 1:1 na
   @media (…) i usuwa kontener — w aplikacji liczy się okno przeglądarki.    */
.tl-root { min-height: 100%; background: var(--tl-bg); color: var(--tl-text); font-family: var(--font-sans); font-size: 16px; line-height: 24px; }
@media (min-width: 760px) {
  .tl-h1 { font-size: 30px; line-height: 36px; }
  .tl-h2 { font-size: 22px; line-height: 28px; }
}

/* ---------- 6. Ikony ---------- */
.tl-icon { width: var(--tl-icon); height: var(--tl-icon); flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.tl-icon--sm { width: var(--tl-icon-sm); height: var(--tl-icon-sm); }
.tl-icon--xs { width: var(--tl-icon-xs); height: var(--tl-icon-xs); stroke-width: 2; }

/* ---------- 7. Układ: stos, klaster, siatka ---------- */
.tl-stack { display: flex; flex-direction: column; gap: var(--tl-gap, var(--tl-space-4)); }
.tl-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tl-gap, var(--tl-space-2)); }
.tl-spread { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tl-space-3); }
.tl-grid { display: grid; gap: var(--tl-gap, var(--tl-space-4)); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--tl-min, 260px)), 1fr)); }

/* ---------- 8. Przyciski ---------- */
.tl-btn {
  --_bg: var(--tl-surface); --_fg: var(--tl-text); --_bd: var(--tl-border-strong);
  --_bg-h: var(--tl-surface-strong); --_bg-a: color-mix(in oklab, var(--tl-surface-strong), var(--tl-text) 8%);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--tl-space-2);
  min-height: var(--tl-control-h); padding: 0 var(--tl-space-4);
  border: 1px solid var(--_bd); border-radius: var(--tl-radius);
  background: var(--_bg); color: var(--_fg);
  font-size: 15px; line-height: 20px; font-weight: 600; text-decoration: none; white-space: nowrap;
  cursor: pointer; user-select: none;
  transition: background-color var(--tl-dur-instant) var(--tl-ease-standard), border-color var(--tl-dur-instant), box-shadow var(--tl-dur-fast);
}
.tl-btn:hover { background: var(--_bg-h); text-decoration: none; }
.tl-btn:active { background: var(--_bg-a); }
.tl-btn:focus-visible { outline: 2px solid var(--tl-focus-ring); outline-offset: 2px; }
.tl-btn .tl-icon { width: var(--tl-icon-sm); height: var(--tl-icon-sm); }
.tl-btn--primary { --_bg: var(--tl-accent-fill); --_fg: var(--tl-on-accent); --_bd: transparent; --_bg-h: var(--tl-accent-fill-hover); --_bg-a: var(--tl-accent-fill-active); }
.tl-btn--secondary { /* domyślny wygląd */ }
.tl-btn--ghost { --_bg: transparent; --_bd: transparent; --_fg: var(--tl-text); }
.tl-btn--ghost.tl-btn--accent { --_fg: var(--tl-accent-text); --_bg-h: var(--tl-accent-tint); --_bg-a: var(--tl-accent-tint-strong); }
.tl-btn--danger { --_bg: var(--tl-danger); --_fg: var(--tl-on-danger); --_bd: transparent; --_bg-h: color-mix(in oklab, var(--tl-danger), #000 12%); --_bg-a: color-mix(in oklab, var(--tl-danger), #000 20%); }
.tl-btn--danger-ghost { --_bg: transparent; --_bd: transparent; --_fg: var(--tl-danger-text); --_bg-h: var(--tl-danger-bg); --_bg-a: var(--tl-danger-bg); }
.tl-btn--sm { min-height: var(--tl-control-h-sm); padding: 0 var(--tl-space-3); font-size: 14px; }
.tl-btn--sm::after { content: ""; position: absolute; inset: -4px 0; } /* cel dotyku 44 px */
.tl-btn--lg { min-height: 52px; padding: 0 var(--tl-space-6); font-size: 16px; }
.tl-btn--block { display: flex; width: 100%; }
.tl-btn--icon { width: var(--tl-control-h); padding: 0; }
.tl-btn--icon.tl-btn--sm { width: var(--tl-control-h-sm); }
/* Ikona instalacji w nagłówku: znika, gdy aplikacja działa jako zainstalowana (bez JS też). */
.tl-install[hidden] { display: none; }
@media (display-mode: standalone) { .tl-install { display: none; } }
.tl-btn:disabled, .tl-btn[aria-disabled="true"] {
  --_bg: var(--tl-surface-strong); --_fg: var(--tl-muted); --_bd: var(--tl-border); --_bg-h: var(--_bg); --_bg-a: var(--_bg);
  cursor: not-allowed;
}
.tl-btn--ghost:disabled { --_bg: transparent; --_bd: transparent; }
.tl-btn[aria-busy="true"] { color: transparent; pointer-events: none; }
.tl-btn[aria-busy="true"] > * { visibility: hidden; }
.tl-btn[aria-busy="true"]::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--_fg); border-right-color: transparent; animation: tl-spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .tl-btn[aria-busy="true"]::before { animation: none; border-right-color: var(--_fg); opacity: .6; } }
.tl-btn-group { display: flex; flex-wrap: wrap; gap: var(--tl-space-2); }
@keyframes tl-spin { to { transform: rotate(360deg); } }

/* ---------- 9. Linki ---------- */
.tl-link { color: var(--tl-accent-text); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.tl-link:hover { text-decoration-thickness: 2px; }
.tl-link--quiet { color: inherit; text-decoration-color: var(--tl-border-strong); }
.tl-link--quiet:hover { color: var(--tl-accent-text); text-decoration-color: currentColor; }
.tl-link--nav { text-decoration: none; display: inline-flex; align-items: center; gap: var(--tl-space-1); }
.tl-link--nav:hover { text-decoration: underline; }
.tl-link .tl-icon { display: inline; width: 1em; height: 1em; vertical-align: -.125em; margin-left: .15em; }
/* Przycisk (button, summary) w wyglądzie linku, z ikoną przed tekstem: akcja w formularzu, która nie jest główną akcją. */
.tl-link--button { display: inline-flex; align-items: center; gap: var(--tl-space-1); padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; }
.tl-link--button:hover { text-decoration: none; }
.tl-link--button .tl-icon { margin-left: 0; }

/* ---------- 10. Formularze ---------- */
.tl-form { display: flex; flex-direction: column; gap: var(--tl-space-5); }
.tl-field { display: flex; flex-direction: column; gap: var(--tl-space-1); min-width: 0; }
.tl-field__label { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--tl-text); }
.tl-field__opt { font-weight: 400; color: var(--tl-muted); }
.tl-field__hint { font-size: 14px; line-height: 20px; color: var(--tl-muted); }
.tl-field__error { display: flex; gap: var(--tl-space-1); align-items: flex-start; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--tl-danger-text); }
.tl-field__error .tl-icon { width: 18px; height: 18px; margin-top: 1px; }
.tl-field__row { display: grid; gap: var(--tl-space-4); grid-template-columns: 1fr; }
@media (min-width: 480px) { .tl-field__row { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }

.tl-input, .tl-select, .tl-textarea {
  display: block; width: 100%; min-height: var(--tl-control-h);
  padding: 9px var(--tl-space-3);
  border: 1px solid var(--tl-border-strong); border-radius: var(--tl-radius);
  background: var(--tl-surface); color: var(--tl-text);
  font-size: 16px; line-height: 24px;
  box-shadow: var(--tl-shadow-sm);
  transition: border-color var(--tl-dur-fast), box-shadow var(--tl-dur-fast);
}
.tl-input::placeholder, .tl-textarea::placeholder { color: var(--tl-muted); opacity: 1; }
.tl-input:hover, .tl-select:hover, .tl-textarea:hover { border-color: var(--tl-muted); }
.tl-input:focus-visible, .tl-select:focus-visible, .tl-textarea:focus-visible,
.tl-input:focus, .tl-select:focus, .tl-textarea:focus {
  outline: none; border-color: var(--tl-accent-ui); box-shadow: 0 0 0 1px var(--tl-accent-ui), 0 0 0 4px var(--tl-accent-tint-strong);
}
.tl-input[aria-invalid="true"], .tl-select[aria-invalid="true"], .tl-textarea[aria-invalid="true"] { border-color: var(--tl-danger); box-shadow: 0 0 0 1px var(--tl-danger); }
.tl-input:disabled, .tl-select:disabled, .tl-textarea:disabled { background: var(--tl-surface-strong); color: var(--tl-muted); border-color: var(--tl-border); box-shadow: none; cursor: not-allowed; }
.tl-input[readonly] { background: var(--tl-surface-strong); box-shadow: none; }
.tl-textarea { min-height: 112px; resize: vertical; }
.tl-select {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
}
.tl-input[type="date"], .tl-input[type="time"], .tl-input[type="datetime-local"] { font-variant-numeric: tabular-nums; }
.tl-input[type="date"]::-webkit-calendar-picker-indicator, .tl-input[type="time"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .7; }
[data-theme="dark"] .tl-input::-webkit-calendar-picker-indicator { filter: invert(1); }
/* Pole z ikoną / przyciskiem */
.tl-input-wrap { position: relative; display: flex; align-items: center; }
.tl-input-wrap > .tl-icon { position: absolute; left: 12px; width: 20px; height: 20px; color: var(--tl-muted); pointer-events: none; }
.tl-input-wrap > .tl-icon + .tl-input { padding-left: 42px; }
.tl-input-wrap > .tl-input-wrap__btn { position: absolute; right: 2px; top: 2px; bottom: 2px; min-height: 0; width: 40px; border-radius: calc(var(--tl-radius) - 2px); }
.tl-input-wrap > .tl-input-wrap__btn + .tl-input, .tl-input-wrap:has(.tl-input-wrap__btn) > .tl-input { padding-right: 46px; }
/* Pole liczbowe z przyciskami − i + (TlStepper): przyciski po bokach pola; w arkuszu (--compact) dwie małe strzałki wewnątrz pola, widoczne po najechaniu i na ekranach dotykowych. */
.tl-stepper { display: flex; align-items: stretch; min-width: 0; width: 100%; }
.tl-stepper > .tl-input { flex: 1 1 auto; min-width: 0; border-radius: 0; text-align: center; }
.tl-stepper > .tl-input:focus, .tl-stepper > .tl-input:focus-visible { position: relative; z-index: 1; }
.tl-stepper__btn { display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 0; border: 1px solid var(--tl-border-strong); background: var(--tl-surface-strong); color: var(--tl-text); cursor: pointer; transition: background var(--tl-dur-fast); }
.tl-stepper__btn:hover:not(:disabled) { background: color-mix(in oklab, var(--tl-surface-strong), #000 7%); }
.tl-stepper__btn:disabled { color: var(--tl-muted); cursor: not-allowed; opacity: .6; }
.tl-stepper__btn .tl-icon { width: 18px; height: 18px; }
.tl-stepper > .tl-stepper__btn { width: var(--tl-control-h); min-height: var(--tl-control-h); }
.tl-stepper__btn--start { border-radius: var(--tl-radius) 0 0 var(--tl-radius); border-right-width: 0; }
.tl-stepper__btn--end { border-radius: 0 var(--tl-radius) var(--tl-radius) 0; border-left-width: 0; }
.tl-stepper--compact { position: relative; }
.tl-stepper--compact > .tl-sheet__field { flex: 1 1 auto; min-width: 0; padding-right: 18px; }
.tl-stepper__spin { position: absolute; top: 1px; right: 1px; bottom: 1px; width: 16px; display: flex; flex-direction: column; opacity: 0; transition: opacity var(--tl-dur-fast); }
.tl-stepper--compact:hover .tl-stepper__spin, .tl-stepper--compact:focus-within .tl-stepper__spin { opacity: 1; }
.tl-stepper--compact .tl-stepper__btn { flex: 1 1 0; min-height: 0; width: 100%; border: 0; border-radius: 3px; background: transparent; color: var(--tl-muted); }
.tl-stepper--compact .tl-stepper__btn:hover:not(:disabled) { background: var(--tl-surface-strong); color: var(--tl-text); }
.tl-stepper--compact .tl-stepper__btn .tl-icon { width: 12px; height: 12px; }
@media (hover: none) { .tl-stepper--compact .tl-stepper__spin { opacity: 1; } }
@media (pointer: coarse) { .tl-stepper--compact > .tl-sheet__field { padding-right: 30px; } .tl-stepper__spin { width: 28px; } .tl-stepper--compact .tl-stepper__btn .tl-icon { width: 16px; height: 16px; } }

/* Checkbox / radio */
.tl-check { display: flex; gap: var(--tl-space-3); align-items: flex-start; min-height: var(--tl-touch); padding: 10px 0; cursor: pointer; font-size: 16px; line-height: 24px; }
.tl-check input {
  appearance: none; -webkit-appearance: none; flex: none; margin: 2px 0 0; width: 20px; height: 20px;
  border: 1.5px solid var(--tl-border-strong); border-radius: var(--tl-radius-xs); background: var(--tl-surface);
  display: grid; place-content: center; cursor: pointer; transition: background-color var(--tl-dur-fast), border-color var(--tl-dur-fast);
}
.tl-check input[type="radio"] { border-radius: 50%; }
.tl-check input::before { content: ""; width: 12px; height: 12px; transform: scale(0); transition: transform var(--tl-dur-fast) var(--tl-ease-standard); background: var(--tl-on-accent);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.tl-check input[type="radio"]::before { width: 8px; height: 8px; border-radius: 50%; clip-path: none; }
.tl-check input:checked { background: var(--tl-accent-fill); border-color: var(--tl-accent-fill); }
.tl-check input:checked::before { transform: scale(1); }
.tl-check input:focus-visible { outline: 2px solid var(--tl-focus-ring); outline-offset: 2px; }
.tl-check input:disabled { background: var(--tl-surface-strong); border-color: var(--tl-border); cursor: not-allowed; }
.tl-check:has(input:disabled) { color: var(--tl-muted); cursor: not-allowed; }
.tl-check input[aria-invalid="true"] { border-color: var(--tl-danger); }
.tl-check__text { display: flex; flex-direction: column; }
.tl-check__text small { font-size: 14px; line-height: 20px; color: var(--tl-muted); }
.tl-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.tl-fieldset > legend { padding: 0; margin-bottom: var(--tl-space-1); font-size: 14px; line-height: 20px; font-weight: 600; }

/* Przełącznik (checkbox role="switch") */
.tl-switch { display: flex; align-items: center; justify-content: space-between; gap: var(--tl-space-4); min-height: var(--tl-touch); cursor: pointer; }
.tl-switch input {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; margin: 0; width: 44px; height: 26px; border-radius: var(--tl-radius-pill);
  background: var(--tl-surface-strong); border: 1.5px solid var(--tl-border-strong); cursor: pointer;
  transition: background-color var(--tl-dur-fast), border-color var(--tl-dur-fast);
}
.tl-switch input::before { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: var(--tl-muted); transition: transform var(--tl-dur-fast) var(--tl-ease-standard), background-color var(--tl-dur-fast); }
.tl-switch input:checked { background: var(--tl-accent-fill); border-color: var(--tl-accent-fill); }
.tl-switch input:checked::before { transform: translateX(18px); background: var(--tl-on-accent); }
.tl-switch input:focus-visible { outline: 2px solid var(--tl-focus-ring); outline-offset: 2px; }
.tl-switch input:disabled { opacity: 1; background: var(--tl-surface-strong); border-color: var(--tl-border); cursor: not-allowed; }
.tl-switch input:disabled::before { background: var(--tl-border-strong); }
.tl-switch:has(input:disabled) { color: var(--tl-muted); cursor: not-allowed; }
.tl-switch--danger input:checked { background: var(--tl-danger); border-color: var(--tl-danger); }
.tl-switch--danger input:checked::before { background: var(--tl-on-danger); }
.tl-switch--start { justify-content: flex-start; }

/* Wybór segmentowy (radio jako przyciski) */
.tl-segment { display: inline-flex; padding: 3px; gap: 2px; background: var(--tl-surface-strong); border-radius: var(--tl-radius); border: 1px solid var(--tl-border); }
.tl-segment label { position: relative; display: inline-flex; align-items: center; gap: var(--tl-space-1); min-height: 36px; padding: 0 var(--tl-space-3); border-radius: calc(var(--tl-radius) - 3px); font-size: 14px; font-weight: 600; color: var(--tl-muted); cursor: pointer; }
.tl-segment input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tl-segment label:has(input:checked) { background: var(--tl-surface); color: var(--tl-text); box-shadow: var(--tl-shadow-sm); }
.tl-segment label:has(input:focus-visible) { outline: 2px solid var(--tl-focus-ring); outline-offset: 1px; }

/* ---------- 11. Komunikaty: alert, banner, toast ---------- */
.tl-alert {
  --_c: var(--tl-info-text); --_bg: var(--tl-info-bg); --_bd: var(--tl-info-border); --_i: var(--tl-info);
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--tl-space-3); align-items: start;
  padding: var(--tl-space-3) var(--tl-space-4); border: 1px solid var(--_bd); border-radius: var(--tl-radius);
  background: var(--_bg); color: var(--tl-text); font-size: 15px; line-height: 22px;
}
.tl-alert > .tl-icon { color: var(--_c); margin-top: -1px; }
.tl-alert__title { font-weight: 650; color: var(--_c); }
.tl-alert__body { display: flex; flex-direction: column; gap: var(--tl-space-1); min-width: 0; }
.tl-alert__actions { display: flex; flex-wrap: wrap; gap: var(--tl-space-3); margin-top: var(--tl-space-1); }
.tl-alert--success { --_c: var(--tl-success-text); --_bg: var(--tl-success-bg); --_bd: var(--tl-success-border); }
.tl-alert--warning { --_c: var(--tl-warning-text); --_bg: var(--tl-warning-bg); --_bd: var(--tl-warning-border); }
.tl-alert--danger { --_c: var(--tl-danger-text); --_bg: var(--tl-danger-bg); --_bd: var(--tl-danger-border); }
.tl-alert .tl-btn--icon { margin: -8px -10px -8px 0; }
.tl-alert--inline { padding: 0; border: 0; background: none; grid-template-columns: auto 1fr; gap: var(--tl-space-2); font-size: 14px; line-height: 20px; }
.tl-alert--inline > .tl-icon { width: 18px; height: 18px; margin-top: 1px; }

.tl-banner { display: flex; align-items: center; gap: var(--tl-space-3); padding: var(--tl-space-2) var(--tl-space-4); min-height: 44px; font-size: 14px; line-height: 20px; border-bottom: 1px solid var(--tl-warning-border); background: var(--tl-warning-bg); color: var(--tl-text); }
.tl-banner > .tl-icon { color: var(--tl-warning-text); width: 20px; height: 20px; }
.tl-banner__text { flex: 1; min-width: 0; }
.tl-banner--info { background: var(--tl-info-bg); border-color: var(--tl-info-border); }
.tl-banner--info > .tl-icon { color: var(--tl-info-text); }
.tl-banner--danger { background: var(--tl-danger-bg); border-color: var(--tl-danger-border); }
.tl-banner--danger > .tl-icon { color: var(--tl-danger-text); }

.tl-toast-region { position: fixed; z-index: var(--tl-z-toast); inset: auto 0 calc(var(--tl-bottomnav-h) + 12px) 0; display: flex; flex-direction: column; align-items: center; gap: var(--tl-space-2); padding: 0 var(--tl-space-4); pointer-events: none; }
@media (min-width: 760px) { .tl-toast-region { inset: auto var(--tl-space-6) var(--tl-space-6) auto; align-items: flex-end; } }
.tl-toast {
  pointer-events: auto; display: flex; align-items: center; gap: var(--tl-space-3); width: min(100%, 420px);
  padding: var(--tl-space-3) var(--tl-space-2) var(--tl-space-3) var(--tl-space-4); border-radius: var(--tl-radius);
  background: var(--tl-surface-raised); color: var(--tl-text); border: 1px solid var(--tl-border); box-shadow: var(--tl-shadow-md);
  font-size: 15px; line-height: 22px; animation: tl-toast-in var(--tl-dur-base) var(--tl-ease-standard);
}
.tl-toast > .tl-icon { color: var(--tl-success); }
.tl-toast--danger > .tl-icon { color: var(--tl-danger-text); }
.tl-toast__text { flex: 1; }
.tl-toast__action { font-weight: 650; color: var(--tl-accent-text); background: none; border: 0; min-height: 44px; padding: 0 var(--tl-space-2); cursor: pointer; border-radius: var(--tl-radius-sm); }
.tl-toast__action:hover { background: var(--tl-accent-tint); }
@keyframes tl-toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- 12. Karty ---------- */
.tl-card { background: var(--tl-surface); border: 1px solid var(--tl-border); border-radius: var(--tl-radius); padding: var(--tl-space-4); box-shadow: var(--tl-shadow-sm); min-width: 0; }
@media (min-width: 760px) { .tl-card { padding: var(--tl-space-5); } }
.tl-card--flat { box-shadow: none; }
.tl-card--flush { padding: 0; overflow: hidden; }
.tl-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--tl-space-3); margin-bottom: var(--tl-space-3); }
.tl-card__title { font-size: 18px; line-height: 24px; font-weight: 650; }
.tl-card__sub { font-size: 14px; line-height: 20px; color: var(--tl-muted); }
.tl-card__foot { display: flex; flex-wrap: wrap; gap: var(--tl-space-2); margin-top: var(--tl-space-4); padding-top: var(--tl-space-4); border-top: 1px solid var(--tl-border); }
.tl-card--link { position: relative; transition: box-shadow var(--tl-dur-fast), border-color var(--tl-dur-fast); }
.tl-card--link:hover { box-shadow: var(--tl-shadow-md); border-color: var(--tl-border-strong); }
.tl-card--link a.tl-card__cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tl-card--link a.tl-card__cover { color: inherit; text-decoration: none; }
.tl-card--link a.tl-card__cover:focus-visible { outline: none; }
.tl-card--link:has(a.tl-card__cover:focus-visible) { outline: 2px solid var(--tl-focus-ring); outline-offset: 2px; }

/* Karta aplikacji: górna krawędź i znacznik w kolorze akcentu */
.tl-app-card { position: relative; display: flex; flex-direction: column; gap: var(--tl-space-3); padding: var(--tl-space-5); padding-top: calc(var(--tl-space-5) + 4px); background: var(--tl-surface); border: 1px solid var(--tl-border); border-radius: var(--tl-radius-lg); box-shadow: var(--tl-shadow-sm); overflow: hidden; }
.tl-app-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--tl-accent-fill); }
.tl-app-card__head { display: flex; align-items: center; gap: var(--tl-space-3); }
.tl-app-card__name { font-size: 18px; line-height: 24px; font-weight: 700; }
.tl-app-card__desc { color: var(--tl-muted); font-size: 15px; line-height: 22px; flex: 1; }
.tl-app-card__actions { display: flex; flex-wrap: wrap; gap: var(--tl-space-2); margin-top: var(--tl-space-1); }
.tl-app-card__meta { font-size: 13px; line-height: 18px; color: var(--tl-muted); display: flex; gap: var(--tl-space-3); flex-wrap: wrap; }
.tl-app-card--disabled { background: var(--tl-surface-strong); }
.tl-app-card--disabled::before { background: var(--tl-border-strong); }
/* Ikona aplikacji: kafelek w akcencie z ikoną z rodziny Tulsy */
.tl-app-icon { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--tl-accent-fill); color: var(--tl-on-accent); }
.tl-app-icon .tl-icon { width: 24px; height: 24px; }
.tl-app-icon--sm { width: 28px; height: 28px; border-radius: 8px; }
.tl-app-icon--sm .tl-icon { width: 18px; height: 18px; }
.tl-app-card--link { color: inherit; text-decoration: none; min-height: 96px; }
.tl-app-card--link:hover { box-shadow: var(--tl-shadow-md); border-color: var(--tl-border-strong); }
.tl-app-card--link:focus-visible { border-radius: var(--tl-radius-lg); }
.tl-app-card--link .tl-app-icon { width: 56px; height: 56px; border-radius: 14px; }
.tl-app-card--link .tl-app-icon .tl-icon { width: 28px; height: 28px; }
.tl-app-dot { width: 10px; height: 10px; flex: none; border-radius: 3px; background: var(--tl-accent-fill); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); }

/* Statystyka w karcie */
.tl-stat { display: flex; flex-direction: column; gap: 2px; }
.tl-stat__value { font-size: 28px; line-height: 34px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tl-stat__label { font-size: 14px; line-height: 20px; color: var(--tl-muted); }

/* ---------- 13. Tabele ---------- */
.tl-table-wrap { overflow-x: auto; border: 1px solid var(--tl-border); border-radius: var(--tl-radius); background: var(--tl-surface); }
/* Otwarte menu wiersza (details.tl-menu) wychodzi poza tabelę zamiast ją przewijać. */
.tl-table-wrap:has(.tl-menu[open]) { overflow: visible; }
.tl-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; font-variant-numeric: tabular-nums; }
.tl-table th { position: sticky; top: 0; z-index: 1; text-align: left; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--tl-muted); background: var(--tl-surface-strong); padding: 10px var(--tl-space-4); border-bottom: 1px solid var(--tl-border); white-space: nowrap; }
.tl-table td { padding: var(--tl-space-3) var(--tl-space-4); border-bottom: 1px solid var(--tl-border); vertical-align: middle; }
.tl-table tr:last-child td { border-bottom: 0; }
.tl-table tbody tr:hover { background: color-mix(in oklab, var(--tl-surface-strong) 60%, var(--tl-surface)); }
.tl-table tbody tr[aria-selected="true"] { background: var(--tl-accent-tint); }
.tl-table--dense td { padding: 6px var(--tl-space-3); font-size: 14px; line-height: 20px; }
.tl-table--dense th { padding: 8px var(--tl-space-3); }
.tl-table .tl-col-actions { width: 1%; white-space: nowrap; text-align: right; }
.tl-table .tl-col-actions .tl-btn-group { flex-wrap: nowrap; justify-content: flex-end; align-items: center; } /* button and row menu stay on one line */
.tl-table .tl-col-num { text-align: right; }
.tl-table .tl-col-fit { width: 1%; white-space: nowrap; }
.tl-table__primary { font-weight: 600; color: var(--tl-text); }
.tl-table__primary a { color: inherit; text-decoration: none; }
.tl-table__primary a:hover { text-decoration: underline; color: var(--tl-accent-text); }
.tl-table__secondary { display: block; font-size: 13px; line-height: 18px; color: var(--tl-muted); }
.tl-table__small { font-size: 13px; line-height: 18px; }
.tl-table th a { color: inherit; text-decoration: none; display: inline-flex; gap: 4px; align-items: center; }
.tl-table th[aria-sort] { color: var(--tl-text); }
.tl-table-empty { padding: var(--tl-space-10) var(--tl-space-4); text-align: center; }
/* Wersja mobilna: wiersze jako karty (etykiety z data-label) */
@media (max-width: 759.98px) {
  .tl-table--stack, .tl-table--stack tbody, .tl-table--stack tr, .tl-table--stack td { display: block; }
  .tl-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tl-table-wrap:has(.tl-table--stack) { border: 0; background: none; overflow: visible; }
  .tl-table--stack tbody { display: flex; flex-direction: column; gap: var(--tl-space-2); }
  .tl-table--stack tr { position: relative; background: var(--tl-surface); border: 1px solid var(--tl-border); border-radius: var(--tl-radius); padding: var(--tl-space-3) var(--tl-space-4); }
  .tl-table--stack tbody tr:hover { background: var(--tl-surface); }
  .tl-table--stack td { padding: 2px 0; border: 0; display: flex; gap: var(--tl-space-3); justify-content: space-between; align-items: baseline; font-size: 15px; }
  .tl-table--stack td[data-label]::before { content: attr(data-label); font-size: 13px; color: var(--tl-muted); font-weight: 500; }
  .tl-table--stack td.tl-cell-main { display: block; padding: 0 48px var(--tl-space-1) 0; font-size: 16px; }
  .tl-table--stack td.tl-col-actions { position: absolute; top: 6px; right: 6px; padding: 0; width: auto; }
  .tl-table--stack td.tl-col-actions--wide { position: static; display: flex; justify-content: flex-end; padding-top: var(--tl-space-2); margin-top: var(--tl-space-2); border-top: 1px solid var(--tl-border); }
}

/* ---------- 14. Listy ---------- */
.tl-list { list-style: none; margin: 0; padding: 0; background: var(--tl-surface); border: 1px solid var(--tl-border); border-radius: var(--tl-radius); }
.tl-list__item { display: flex; align-items: center; gap: var(--tl-space-3); min-height: 56px; padding: var(--tl-space-3) var(--tl-space-4); border-bottom: 1px solid var(--tl-border); position: relative; }
.tl-list__item:last-child { border-bottom: 0; }
.tl-list__lead { flex: none; width: 40px; height: 40px; border-radius: var(--tl-radius); display: grid; place-items: center; background: var(--tl-surface-strong); color: var(--tl-muted); }
.tl-list__lead .tl-icon { width: 22px; height: 22px; }
.tl-list__body { flex: 1; min-width: 0; }
.tl-list__title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.tl-list__title a { color: inherit; text-decoration: none; }
.tl-list__title a::after { content: ""; position: absolute; inset: 0; }
.tl-list__title a:hover { text-decoration: underline; }
.tl-list__meta { font-size: 14px; line-height: 20px; color: var(--tl-muted); display: flex; flex-wrap: wrap; gap: 0 var(--tl-space-3); }
.tl-list__end { flex: none; display: flex; align-items: center; gap: var(--tl-space-2); position: relative; z-index: 1; }
.tl-list__item--rows { flex-direction: column; align-items: stretch; gap: var(--tl-space-2); }
.tl-list__row { display: flex; align-items: center; gap: var(--tl-space-3); min-width: 0; }
.tl-list__row--between { justify-content: space-between; flex-wrap: wrap; position: relative; z-index: 1; }
.tl-list--plain { border: 0; background: none; }
.tl-list--plain .tl-list__item { padding-left: 0; padding-right: 0; }
.tl-list__item:has(.tl-list__title a):hover { background: color-mix(in oklab, var(--tl-surface-strong) 60%, var(--tl-surface)); }

/* ---------- 15. Etykiety statusu (badge) ---------- */
.tl-badge {
  --_c: var(--tl-muted); --_bg: var(--tl-surface-strong); --_bd: var(--tl-border);
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 7px; border-radius: var(--tl-radius-pill);
  font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums;
  color: var(--_c); background: var(--_bg); border: 1px solid var(--_bd);
}
.tl-badge .tl-icon { width: 14px; height: 14px; stroke-width: 2.25; }
.tl-badge--neutral { --_c: var(--tl-text); }
.tl-badge--success { --_c: var(--tl-success-text); --_bg: var(--tl-success-bg); --_bd: var(--tl-success-border); }
.tl-badge--warning { --_c: var(--tl-warning-text); --_bg: var(--tl-warning-bg); --_bd: var(--tl-warning-border); }
.tl-badge--danger { --_c: var(--tl-danger-text); --_bg: var(--tl-danger-bg); --_bd: var(--tl-danger-border); }
.tl-badge--info { --_c: var(--tl-info-text); --_bg: var(--tl-info-bg); --_bd: var(--tl-info-border); }
.tl-badge--accent { --_c: var(--tl-accent-text); --_bg: var(--tl-accent-tint); --_bd: var(--tl-accent-border); }
.tl-badge--strong.tl-badge--danger { --_c: var(--tl-on-danger); --_bg: var(--tl-danger); --_bd: var(--tl-danger); }
.tl-badge--square { border-radius: var(--tl-radius-sm); }
.tl-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--tl-radius-pill); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--tl-surface-strong); color: var(--tl-text); }
.tl-count--danger { background: var(--tl-danger); color: var(--tl-on-danger); }
.tl-count--accent { background: var(--tl-accent-fill); color: var(--tl-on-accent); }

/* ---------- 16. Zakładki ---------- */
.tl-tabs { display: flex; gap: var(--tl-space-1); border-bottom: 1px solid var(--tl-border); overflow-x: auto; scrollbar-width: none; }
.tl-tabs a, .tl-tabs button {
  position: relative; display: inline-flex; align-items: center; gap: var(--tl-space-2); min-height: 44px; padding: 0 var(--tl-space-3);
  font-size: 15px; font-weight: 600; color: var(--tl-muted); text-decoration: none; white-space: nowrap; background: none; border: 0; cursor: pointer; border-radius: var(--tl-radius-sm) var(--tl-radius-sm) 0 0;
}
.tl-tabs a:hover, .tl-tabs button:hover { color: var(--tl-text); background: var(--tl-surface-strong); }
.tl-tabs [aria-current="page"], .tl-tabs [aria-selected="true"] { color: var(--tl-accent-text); }
.tl-tabs [aria-current="page"]::after, .tl-tabs [aria-selected="true"]::after { content: ""; position: absolute; left: var(--tl-space-2); right: var(--tl-space-2); bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--tl-accent-ui); }

/* ---------- 17. Okruszki i paginacja ---------- */
.tl-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--tl-space-1); font-size: 14px; line-height: 20px; color: var(--tl-muted); }
.tl-breadcrumbs li { display: inline-flex; align-items: center; gap: var(--tl-space-1); }
.tl-breadcrumbs li + li::before { content: ""; width: 6px; height: 6px; border: solid var(--tl-border-strong); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); margin: 0 6px 0 2px; }
.tl-breadcrumbs a { color: var(--tl-muted); text-decoration: none; padding: 4px 0; }
.tl-breadcrumbs a:hover { color: var(--tl-accent-text); text-decoration: underline; }
.tl-breadcrumbs [aria-current="page"] { color: var(--tl-text); font-weight: 500; }
@media (max-width: 479.98px) { .tl-breadcrumbs li:not(:nth-last-child(2)) { display: none; } .tl-breadcrumbs li:nth-last-child(2)::before { display: none; } .tl-breadcrumbs li:nth-last-child(2) a::before { content: "‹ "; } }

.tl-pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--tl-space-3); flex-wrap: wrap; font-size: 14px; color: var(--tl-muted); }
.tl-pagination ol { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.tl-pagination a, .tl-pagination span[aria-current] { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 var(--tl-space-2); border-radius: var(--tl-radius); color: var(--tl-text); text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.tl-pagination a:hover { background: var(--tl-surface-strong); }
.tl-pagination [aria-current="page"] { background: var(--tl-accent-tint); color: var(--tl-accent-text); box-shadow: inset 0 0 0 1px var(--tl-accent-border); }
.tl-pagination [aria-disabled="true"] { color: var(--tl-muted); pointer-events: none; opacity: .6; }
@media (max-width: 479.98px) { .tl-pagination li.tl-page-num { display: none; } }

/* ---------- 18. Modal (dialog) ---------- */
.tl-modal { width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 64px); padding: 0; border: 1px solid var(--tl-border); border-radius: var(--tl-radius-lg); background: var(--tl-surface); color: var(--tl-text); box-shadow: var(--tl-shadow-lg); }
.tl-modal::backdrop { background: var(--tl-overlay); }
.tl-modal[open] { animation: tl-modal-in var(--tl-dur-base) var(--tl-ease-standard); }
@keyframes tl-modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.tl-modal__inner { display: flex; flex-direction: column; gap: var(--tl-space-4); padding: var(--tl-space-6); }
.tl-modal__head { display: flex; gap: var(--tl-space-3); align-items: flex-start; justify-content: space-between; }
.tl-modal__title { font-size: 20px; line-height: 26px; font-weight: 650; }
.tl-modal__icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--tl-danger-bg); color: var(--tl-danger-text); flex: none; }
.tl-modal__foot { display: flex; flex-direction: column-reverse; gap: var(--tl-space-2); }
@media (min-width: 480px) { .tl-modal__foot { flex-direction: row; justify-content: flex-end; } }
.tl-modal__scroll { overflow-y: auto; max-height: 45dvh; }
.tl-modal--wide { width: min(820px, calc(100% - 32px)); }
.tl-prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.tl-modal--static { display: block; position: static; margin: 0 auto; } /* do podglądu i strony potwierdzenia bez JS */
.tl-confirm-page { max-width: 560px; margin: 0 auto; }

/* ---------- 19. Menu rozwijane (<details>) ---------- */
.tl-menu { position: relative; display: inline-block; }
.tl-menu > summary { list-style: none; cursor: pointer; }
.tl-menu > summary::-webkit-details-marker { display: none; }
.tl-menu__panel {
  position: absolute; z-index: var(--tl-z-dropdown); top: calc(100% + 6px); right: 0; min-width: 220px; max-width: min(340px, 90vw);
  padding: var(--tl-space-1); background: var(--tl-surface-raised); border: 1px solid var(--tl-border); border-radius: var(--tl-radius); box-shadow: var(--tl-shadow-md);
  animation: tl-menu-in var(--tl-dur-fast) var(--tl-ease-standard);
}
.tl-menu--start .tl-menu__panel { left: 0; right: auto; }
@keyframes tl-menu-in { from { opacity: 0; transform: translateY(-4px); } }
.tl-menu__item { display: flex; align-items: center; gap: var(--tl-space-3); width: 100%; min-height: 44px; padding: 0 var(--tl-space-3); border: 0; border-radius: var(--tl-radius-sm); background: none; color: var(--tl-text); font-size: 15px; font-weight: 500; text-decoration: none; text-align: left; cursor: pointer; }
.tl-menu__item:hover, .tl-menu__item:focus-visible { background: var(--tl-surface-strong); outline-offset: -2px; }
.tl-menu__item .tl-icon { width: 20px; height: 20px; color: var(--tl-muted); }
.tl-menu__item .tl-app-icon .tl-icon, .tl-nav a .tl-app-icon .tl-icon { color: inherit; width: 18px; height: 18px; }
.tl-menu__item--danger { color: var(--tl-danger-text); }
.tl-menu__item--danger .tl-icon { color: currentColor; }
.tl-menu__item[aria-current="true"] { background: var(--tl-accent-tint); }
.tl-menu__sep { height: 1px; margin: var(--tl-space-1) 0; background: var(--tl-border); border: 0; }
.tl-menu__head { padding: var(--tl-space-2) var(--tl-space-3); }
.tl-menu form { margin: 0; }

/* ---------- 20. Tooltip (CSS, hover + focus) ---------- */
.tl-tip { position: relative; display: inline-flex; }
.tl-tip__bubble {
  position: absolute; z-index: var(--tl-z-tooltip); bottom: calc(100% + 8px); left: 50%; translate: -50% 4px; width: max-content; max-width: 240px;
  padding: 6px 10px; border-radius: var(--tl-radius-sm); background: var(--tl-text); color: var(--tl-ink-inverse);
  font-size: 13px; line-height: 18px; font-weight: 500; text-align: center; pointer-events: none; opacity: 0; visibility: hidden;
  transition: opacity var(--tl-dur-fast), translate var(--tl-dur-fast), visibility var(--tl-dur-fast);
}
.tl-tip:hover .tl-tip__bubble, .tl-tip:focus-within .tl-tip__bubble { opacity: 1; visibility: visible; translate: -50% 0; transition-delay: 300ms; }
.tl-tip__bubble--bottom { bottom: auto; top: calc(100% + 8px); }
.tl-tip__bubble--start { left: 0; translate: 0 4px; text-align: left; max-width: min(320px, calc(100vw - 2 * var(--tl-space-4))); }
.tl-tip:hover .tl-tip__bubble--start, .tl-tip:focus-within .tl-tip__bubble--start { translate: 0 0; }

/* ---------- 21. Avatar ---------- */
.tl-avatar { --_s: 32px; width: var(--_s); height: var(--_s); flex: none; border-radius: 50%; display: inline-grid; place-items: center; overflow: hidden;
  font-size: calc(var(--_s) * .4); font-weight: 650; letter-spacing: .01em; background: var(--tl-surface-strong); color: var(--tl-text); box-shadow: inset 0 0 0 1px var(--tl-border); }
.tl-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tl-avatar--sm { --_s: 24px; font-size: 10px; }
.tl-avatar--lg { --_s: 48px; }
.tl-avatar--xl { --_s: 72px; }
.tl-avatar-group { display: inline-flex; }
.tl-avatar-group .tl-avatar { box-shadow: 0 0 0 2px var(--tl-surface); }
.tl-avatar-group .tl-avatar + .tl-avatar { margin-left: -6px; }

/* ---------- 22. Postęp, szkielet, spinner ---------- */
.tl-progress { display: flex; flex-direction: column; gap: var(--tl-space-1); }
.tl-progress__label { display: flex; justify-content: space-between; font-size: 14px; line-height: 20px; }
.tl-progress__label span:last-child { color: var(--tl-muted); font-variant-numeric: tabular-nums; }
.tl-progress__track { height: 8px; border-radius: var(--tl-radius-pill); background: var(--tl-surface-strong); box-shadow: inset 0 0 0 1px var(--tl-border); overflow: hidden; }
.tl-progress__bar { height: 100%; width: var(--value, 0%); border-radius: inherit; background: var(--tl-accent-ui); transition: width var(--tl-dur-slow) var(--tl-ease-standard); }
.tl-progress--indeterminate .tl-progress__bar { width: 35%; animation: tl-indet 1.4s var(--tl-ease-standard) infinite; }
@keyframes tl-indet { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) { .tl-progress--indeterminate .tl-progress__bar { width: 100%; opacity: .5; animation: none; } }
progress.tl-progress__native { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tl-spinner { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--tl-border-strong); border-top-color: var(--tl-accent-ui); animation: tl-spin .8s linear infinite; }
.tl-skeleton { display: block; border-radius: var(--tl-radius-sm); background: var(--tl-skeleton); position: relative; overflow: hidden; height: 14px; }
.tl-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--tl-surface) 60%, transparent), transparent); animation: tl-shimmer 1.4s infinite; }
@keyframes tl-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .tl-skeleton::after { display: none; } }
.tl-skeleton--title { height: 22px; width: 50%; }
.tl-skeleton--circle { border-radius: 50%; width: 40px; height: 40px; }

/* ---------- 23. Pusty stan ---------- */
.tl-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--tl-space-3); padding: var(--tl-space-10) var(--tl-space-4); max-width: 440px; margin: 0 auto; }
.tl-empty__art { width: 120px; height: 96px; color: var(--tl-accent-ui); margin-bottom: var(--tl-space-2); }
.tl-empty__art .a { fill: var(--tl-accent-tint); stroke: none; }
.tl-empty__art .b { fill: var(--tl-surface); stroke: var(--tl-border-strong); stroke-width: 1.5; }
.tl-empty__art .c { fill: none; stroke: var(--tl-accent-ui); stroke-width: 2; stroke-linecap: round; }
.tl-empty__art .d { fill: var(--tl-surface-strong); stroke: none; }
.tl-empty__title { font-size: 18px; line-height: 24px; font-weight: 650; }
.tl-empty__text { color: var(--tl-muted); }

/* ---------- 24. Kroki (stepper) ---------- */
.tl-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--tl-space-2); counter-reset: tl-step; }
.tl-steps li { flex: 1; display: flex; flex-direction: column; gap: var(--tl-space-2); counter-increment: tl-step; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--tl-muted); }
.tl-steps li::before { content: ""; height: 4px; border-radius: var(--tl-radius-pill); background: var(--tl-surface-strong); box-shadow: inset 0 0 0 1px var(--tl-border); }
.tl-steps li[data-state="done"]::before, .tl-steps li[aria-current="step"]::before { background: var(--tl-accent-ui); box-shadow: none; }
.tl-steps li[aria-current="step"] { color: var(--tl-text); }
.tl-steps li[data-state="done"] { color: var(--tl-text); }
.tl-steps__n::before { content: "Krok " counter(tl-step) " · "; font-weight: 500; color: var(--tl-muted); }
@media (max-width: 479.98px) { .tl-steps li:not([aria-current="step"]) .tl-steps__t { display: none; } }

/* ---------- 25. Powłoka: górny pasek ---------- */
.tl-shell { display: flex; flex-direction: column; min-height: 100%; }
.tl-shell > .tl-layout, .tl-shell > main { flex: 1 0 auto; }
.tl-topbar {
  position: sticky; top: 0; z-index: var(--tl-z-topbar);
  display: flex; align-items: center; gap: var(--tl-space-2); height: var(--tl-topbar-h); padding: 0 var(--tl-space-2) 0 var(--tl-space-2);
  background: var(--tl-surface); border-bottom: 1px solid var(--tl-border);
}
@media (min-width: 760px) { .tl-topbar { padding: 0 var(--tl-space-4); gap: var(--tl-space-3); } }
.tl-topbar__logo { display: inline-flex; align-items: center; height: 44px; padding: 0 var(--tl-space-1); border-radius: var(--tl-radius-sm); }
.tl-topbar__logo img { height: 26px; width: auto; }
.tl-topbar__logo .tl-logo-mark { height: 28px; }
.tl-topbar__divider { width: 1px; height: 24px; background: var(--tl-border); }
.tl-topbar__spacer { flex: 1; }
.tl-topbar__burger { display: inline-flex; }
@media (min-width: 1100px) { .tl-topbar__burger { display: none; } }
@media (max-width: 759.98px) {
  .tl-topbar__divider { display: none; }
  .tl-topbar__hide-sm { display: none !important; }
}
/* logo jasne/ciemne: przełączane zmienną z najbliższego motywu */
.tl-logo-light { display: var(--tl-logo-light, block); }
.tl-logo-dark { display: var(--tl-logo-dark, none); }
@media (max-width: 759.98px) { .tl-logo-full.tl-logo-light, .tl-logo-full.tl-logo-dark { display: none; } }
@media (min-width: 760px) { .tl-logo-mark.tl-logo-light, .tl-logo-mark.tl-logo-dark { display: none; } }
/* logo z landingu (SVG, nazwa w kolorze tekstu): pełne od 760 px, sam znak poniżej */
.tl-logo-brand { display: block; }
@media (max-width: 759.98px) { .tl-logo-brand.tl-logo-full { display: none; } }
@media (min-width: 760px) { .tl-logo-brand.tl-logo-mark { display: none; } }

/* Przełącznik aplikacji */
.tl-switcher > summary { display: inline-flex; align-items: center; gap: var(--tl-space-2); min-height: 40px; padding: 0 var(--tl-space-2) 0 var(--tl-space-3); border-radius: var(--tl-radius); font-weight: 650; font-size: 15px; border: 1px solid transparent; }
.tl-switcher > summary:hover { background: var(--tl-surface-strong); }
.tl-switcher[open] > summary { background: var(--tl-surface-strong); border-color: var(--tl-border); }
.tl-switcher > summary .tl-icon { width: 18px; height: 18px; color: var(--tl-muted); transition: transform var(--tl-dur-fast); }
.tl-switcher[open] > summary .tl-icon { transform: rotate(180deg); }
.tl-switcher .tl-menu__panel { left: 0; right: auto; width: 320px; }
.tl-switcher .tl-menu__item { min-height: 56px; align-items: center; }
.tl-switcher__text { display: flex; flex-direction: column; line-height: 18px; }
.tl-switcher__text small { font-size: 13px; color: var(--tl-muted); font-weight: 400; }
.tl-switcher .tl-menu__item[aria-current="true"]::after { content: ""; margin-left: auto; width: 8px; height: 14px; border: solid var(--tl-accent-text); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-2px, -2px); }

/* Menu użytkownika */
.tl-usermenu > summary { display: inline-flex; align-items: center; gap: var(--tl-space-2); min-height: 44px; padding: 0 var(--tl-space-2) 0 6px; border-radius: var(--tl-radius-pill); }
.tl-usermenu > summary:hover { background: var(--tl-surface-strong); }
.tl-usermenu__name { font-size: 14px; font-weight: 600; line-height: 18px; display: flex; flex-direction: column; text-align: left; }
.tl-usermenu__name small { font-weight: 400; color: var(--tl-muted); font-size: 12px; }
@media (max-width: 759.98px) { .tl-usermenu__name, .tl-usermenu > summary > .tl-icon { display: none; } .tl-usermenu > summary { padding: 0 6px; } }

/* ---------- 26. Powłoka: układ z menu bocznym ---------- */
.tl-layout { display: grid; grid-template-columns: 1fr; min-height: 0; }
@media (min-width: 1100px) {
  .tl-layout--sidebar { grid-template-columns: var(--tl-sidebar-w) minmax(0, 1fr); }
  .tl-layout--sidebar.is-collapsed { grid-template-columns: var(--tl-sidebar-w-collapsed) minmax(0, 1fr); }
}
.tl-sidebar { display: none; flex-direction: column; gap: var(--tl-space-1); padding: var(--tl-space-4) var(--tl-space-3); border-right: 1px solid var(--tl-border); background: var(--tl-surface); position: sticky; top: var(--tl-topbar-h); align-self: start; height: calc(var(--tl-vh, 100dvh) - var(--tl-topbar-h)); overflow: auto; }
@media (min-width: 1100px) { .tl-sidebar { display: flex; } }
.tl-sidebar__app { display: flex; align-items: center; gap: var(--tl-space-3); padding: var(--tl-space-1) var(--tl-space-2) var(--tl-space-4); font-weight: 700; font-size: 16px; }
.tl-sidebar__group { margin: var(--tl-space-4) var(--tl-space-3) var(--tl-space-1); }
.tl-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.tl-nav a { display: flex; align-items: center; gap: var(--tl-space-3); min-height: 44px; padding: 0 var(--tl-space-3); border-radius: var(--tl-radius); color: var(--tl-text); font-size: 15px; font-weight: 500; text-decoration: none; }
.tl-nav a .tl-icon { width: 20px; height: 20px; color: var(--tl-muted); }
.tl-nav a:hover { background: var(--tl-surface-strong); }
.tl-nav a[aria-current="page"] { background: var(--tl-accent-tint); color: var(--tl-accent-text); font-weight: 650; }
.tl-nav a[aria-current="page"] .tl-icon { color: var(--tl-accent-text); }
.tl-nav .tl-count { margin-left: auto; }
.tl-sidebar__foot { margin-top: auto; padding-top: var(--tl-space-3); border-top: 1px solid var(--tl-border); }
.tl-layout--sidebar.is-collapsed .tl-sidebar { padding-left: var(--tl-space-2); padding-right: var(--tl-space-2); }
.tl-layout--sidebar.is-collapsed .tl-nav__label, .tl-layout--sidebar.is-collapsed .tl-sidebar__group, .tl-layout--sidebar.is-collapsed .tl-sidebar__app span, .tl-layout--sidebar.is-collapsed .tl-nav .tl-count { display: none; }
.tl-layout--sidebar.is-collapsed .tl-nav a { justify-content: center; padding: 0; }

/* Dolna nawigacja (telefon/tablet, < 1100) */
.tl-bottomnav { position: sticky; bottom: 0; z-index: var(--tl-z-topbar); display: flex; justify-content: space-around; height: calc(var(--tl-bottomnav-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--tl-surface); border-top: 1px solid var(--tl-border); }
@media (min-width: 1100px) { .tl-bottomnav { display: none; } }
.tl-bottomnav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--tl-muted); text-decoration: none; }
.tl-bottomnav a .tl-icon { width: 22px; height: 22px; }
.tl-bottomnav a > span:first-child { display: grid; place-items: center; width: 56px; height: 30px; border-radius: var(--tl-radius-pill); position: relative; }
.tl-bottomnav a[aria-current="page"] { color: var(--tl-accent-text); }
.tl-bottomnav a[aria-current="page"] > span:first-child { background: var(--tl-accent-tint-strong); }
.tl-bottomnav .tl-count { position: absolute; top: -4px; right: 6px; }

/* Wysuwane menu (telefon/tablet) — <details> bez JS */
.tl-drawer > summary { list-style: none; }
.tl-drawer > summary::-webkit-details-marker { display: none; }
.tl-drawer__panel { position: fixed; z-index: var(--tl-z-drawer); inset: 0 auto 0 0; width: min(320px, 86vw); display: flex; flex-direction: column; gap: var(--tl-space-1); padding: var(--tl-space-3); background: var(--tl-surface); box-shadow: var(--tl-shadow-lg); overflow: auto; animation: tl-drawer-in var(--tl-dur-base) var(--tl-ease-standard); }
.tl-drawer[open] > summary::before { content: ""; position: fixed; inset: 0; z-index: var(--tl-z-drawer); background: var(--tl-overlay); cursor: default; }
.tl-drawer__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--tl-space-2); margin-bottom: var(--tl-space-2); border-bottom: 1px solid var(--tl-border); }
@keyframes tl-drawer-in { from { transform: translateX(-100%); } }
.tl-drawer__apps { display: flex; flex-direction: column; gap: 2px; }
.tl-drawer__apps a { display: flex; align-items: center; gap: var(--tl-space-3); min-height: 44px; padding: 0 var(--tl-space-3); border-radius: var(--tl-radius); color: var(--tl-text); text-decoration: none; font-weight: 500; }
.tl-drawer__apps a:hover { background: var(--tl-surface-strong); }
.tl-drawer__apps a[aria-current="true"] { font-weight: 650; background: var(--tl-surface-strong); }

/* Treść */
.tl-main { min-width: 0; padding: var(--tl-space-4) var(--tl-space-4) var(--tl-space-12); }
@media (min-width: 760px) { .tl-main { padding: var(--tl-space-6) var(--tl-space-6) var(--tl-space-16); } }
@media (min-width: 1100px) { .tl-main { padding: var(--tl-space-8) var(--tl-space-10) var(--tl-space-16); } }
.tl-main__inner { max-width: var(--tl-content-max); margin: 0 auto; display: flex; flex-direction: column; gap: var(--tl-space-6); }
.tl-pagehead { display: flex; flex-direction: column; gap: var(--tl-space-2); }
.tl-pagehead__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--tl-space-3); }
.tl-pagehead__row > .tl-btn-group { margin-left: auto; justify-content: flex-end; } /* buttons stay on the right, also when the row wraps */
.tl-pagehead__sub { color: var(--tl-muted); }
@media (max-width: 759.98px) { .tl-pagehead__row > .tl-btn-group .tl-btn--primary { display: none; } }
/* Pływający przycisk główny na telefonie (np. „Dodaj termin”) */
.tl-fab { display: none; }
@media (max-width: 759.98px) {
  .tl-fab { display: inline-flex; position: sticky; bottom: calc(var(--tl-bottomnav-h) + 16px); margin: 0 0 0 auto; z-index: var(--tl-z-sticky); box-shadow: var(--tl-shadow-lg); border-radius: var(--tl-radius-pill); min-height: 52px; padding: 0 var(--tl-space-5); width: max-content; }
}
/* Pasek akcji formularza */
.tl-actionbar { display: flex; flex-wrap: wrap; gap: var(--tl-space-2); padding-top: var(--tl-space-4); border-top: 1px solid var(--tl-border); }
@media (max-width: 479.98px) { .tl-actionbar { flex-direction: column-reverse; } .tl-actionbar .tl-btn { width: 100%; } }
/* Pasek bez własnej linii nad sobą (linię daje następny blok, np. pasek z notatką pod przyciskami) */
.tl-actionbar--bare { border-top: 0; padding-top: 0; }
/* Pasek akcji ekranu edycji: pierwszy przycisk („Anuluj”) po lewej, reszta po prawej; na telefonie przyklejony nad dolną nawigacją */
@media (min-width: 480px) { .tl-actionbar--form > :first-child:not(:only-child) { margin-right: auto; } }
@media (max-width: 759.98px) { .tl-actionbar--form { position: sticky; bottom: calc(var(--tl-bottomnav-h) + env(safe-area-inset-bottom, 0px)); z-index: var(--tl-z-sticky); background: var(--tl-surface); padding-bottom: var(--tl-space-3); } }
/* Pasek akcji długiego edytora: przyklejony u dołu na każdej szerokości (nad dolną nawigacją do 1100 px) */
.tl-actionbar--pinned { position: sticky; bottom: calc(var(--tl-bottomnav-h) + env(safe-area-inset-bottom, 0px)); z-index: var(--tl-z-sticky); background: var(--tl-surface); padding-bottom: var(--tl-space-3); }
@media (min-width: 1100px) { .tl-actionbar--pinned { bottom: 0; } }
/* Pasek karty procesu: pierwszy element po lewej, reszta po prawej, nigdy przyklejony */
@media (min-width: 480px) { .tl-actionbar--split > :first-child:not(:only-child) { margin-right: auto; } }
@media (max-width: 479.98px) { .tl-actionbar--split { flex-direction: column; } .tl-actionbar--split > :first-child:not(:only-child) { order: 1; } }

/* ---------- 27. Stopka ---------- */
.tl-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tl-space-3) var(--tl-space-6); padding: var(--tl-space-6) var(--tl-space-4); border-top: 1px solid var(--tl-border); font-size: 14px; line-height: 20px; color: var(--tl-muted); background: var(--tl-surface); }
@media (min-width: 760px) { .tl-footer { padding: var(--tl-space-6) var(--tl-space-10); } }
.tl-footer nav { display: flex; flex-wrap: wrap; gap: var(--tl-space-1) var(--tl-space-5); }
.tl-footer a { color: var(--tl-muted); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; gap: 6px; }
.tl-footer a:hover { color: var(--tl-text); text-decoration: underline; }
.tl-footer .tl-icon { width: 16px; height: 16px; }

/* ---------- 28. Układ jednej kolumny (logowanie, rejestracja) ---------- */
.tl-auth { min-height: 100%; display: flex; flex-direction: column; background: var(--tl-bg); }
.tl-auth__top { display: flex; align-items: center; justify-content: space-between; padding: var(--tl-space-4); }
.tl-auth__top img { height: 26px; width: auto; }
.tl-auth__main { flex: 1; display: flex; justify-content: center; padding: var(--tl-space-4) var(--tl-space-4) var(--tl-space-12); }
@media (min-width: 760px) { .tl-auth__main { align-items: flex-start; padding-top: var(--tl-space-12); } }
.tl-auth__card { width: 100%; max-width: var(--tl-form-max); display: flex; flex-direction: column; gap: var(--tl-space-6); }
@media (min-width: 480px) { .tl-auth__card { background: var(--tl-surface); border: 1px solid var(--tl-border); border-radius: var(--tl-radius-lg); padding: var(--tl-space-8); box-shadow: var(--tl-shadow); } }
.tl-auth__head { display: flex; flex-direction: column; gap: var(--tl-space-2); }
.tl-auth__alt { text-align: center; font-size: 15px; color: var(--tl-muted); }
.tl-context { display: flex; align-items: center; gap: var(--tl-space-3); padding: var(--tl-space-3); border-radius: var(--tl-radius); background: var(--tl-accent-tint); border: 1px solid var(--tl-accent-border); font-size: 14px; line-height: 20px; }
.tl-context strong { color: var(--tl-text); }
.tl-pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.tl-pw-meter span { height: 4px; border-radius: 2px; background: var(--tl-surface-strong); }
.tl-pw-meter[data-score="1"] span:nth-child(-n+1) { background: var(--tl-danger); }
.tl-pw-meter[data-score="2"] span:nth-child(-n+2) { background: var(--tl-warning); }
.tl-pw-meter[data-score="3"] span:nth-child(-n+3), .tl-pw-meter[data-score="4"] span { background: var(--tl-success); }

/* ---------- 29. Strony statusowe (404, brak dostępu) ---------- */
.tl-status-page { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--tl-space-4); padding: var(--tl-space-16) var(--tl-space-4); max-width: 520px; margin: 0 auto; }
.tl-status-page__code { font-size: 72px; line-height: 1; font-weight: 800; letter-spacing: -.04em; color: var(--tl-accent-ui); font-variant-numeric: tabular-nums; }
.tl-status-page__icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--tl-surface-strong); color: var(--tl-muted); }
.tl-status-page__icon .tl-icon { width: 30px; height: 30px; }

/* ---------- 30. Zgody cookies ---------- */
.tl-consent { position: fixed; z-index: var(--tl-z-consent); inset: auto 0 0 0; padding: var(--tl-space-3); }
.tl-consent__box { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--tl-space-4); padding: var(--tl-space-5); background: var(--tl-surface-raised); color: var(--tl-text); border: 1px solid var(--tl-border); border-radius: var(--tl-radius-lg); box-shadow: var(--tl-shadow-lg); }
.tl-consent__title { font-size: 17px; line-height: 24px; font-weight: 650; display: flex; align-items: center; gap: var(--tl-space-2); }
.tl-consent__text { font-size: 15px; line-height: 22px; color: var(--tl-muted); }
.tl-consent__actions { display: flex; flex-direction: column-reverse; gap: var(--tl-space-2); }
.tl-consent__actions form { display: contents; }
@media (min-width: 760px) { .tl-consent__box { flex-direction: row; align-items: center; } .tl-consent__actions { flex-direction: row; flex: none; } }
.tl-consent--inline { position: static; padding: 0; }
.tl-cookie-cat { display: flex; flex-direction: column; gap: var(--tl-space-2); padding: var(--tl-space-4) 0; border-bottom: 1px solid var(--tl-border); }
.tl-cookie-cat:last-of-type { border-bottom: 0; }
.tl-cookie-cat .tl-switch { font-weight: 650; font-size: 16px; }
.tl-cookie-cat details summary { cursor: pointer; font-size: 14px; color: var(--tl-accent-text); font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }

/* ---------- 31. Splash ładowania aplikacji ---------- */
.tl-splash { position: fixed; inset: 0; z-index: var(--tl-z-splash); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--tl-space-6); background: var(--tl-bg); color: var(--tl-text); text-align: center; padding: var(--tl-space-6); }
.tl-splash[hidden] { display: none; }
.tl-splash--static { position: relative; inset: auto; min-height: 100%; }
.tl-splash__logo { width: 64px; height: 64px; animation: tl-breathe 2.4s var(--tl-ease-standard) infinite; }
@keyframes tl-breathe { 50% { transform: scale(.94); } }
.tl-splash__app { display: flex; align-items: center; gap: var(--tl-space-2); font-weight: 650; font-size: 15px; color: var(--tl-muted); }
.tl-splash__bar { width: 160px; }
.tl-splash__msg { min-height: 24px; font-size: 16px; color: var(--tl-muted); }
.tl-splash__msgs { display: grid; }
.tl-splash__msgs > span { grid-area: 1 / 1; opacity: 0; animation: tl-msgs 12s infinite; }
.tl-splash__msgs > span:nth-child(2) { animation-delay: 3s; }
.tl-splash__msgs > span:nth-child(3) { animation-delay: 6s; }
.tl-splash__msgs > span:nth-child(4) { animation-delay: 9s; }
@keyframes tl-msgs { 0%, 2% { opacity: 0; transform: translateY(6px); } 5%, 22% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tl-splash__logo { animation: none; }
  .tl-splash__msgs > span { animation: none; opacity: 0; }
  .tl-splash__msgs > span:first-child { opacity: 1; }
}

/* ---------- 32. Wzorce aplikacji „terminy” ---------- */
.tl-filters { display: flex; flex-wrap: wrap; gap: var(--tl-space-2); align-items: center; }
.tl-filters .tl-input-wrap { flex: 1 1 240px; }
.tl-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--tl-space-3); border-radius: var(--tl-radius-pill); border: 1px solid var(--tl-border-strong); background: var(--tl-surface); font-size: 14px; font-weight: 600; color: var(--tl-text); text-decoration: none; cursor: pointer; position: relative; }
.tl-chip::after { content: ""; position: absolute; inset: -4px 0; }
.tl-chip:hover { background: var(--tl-surface-strong); }
.tl-chip[aria-pressed="true"], .tl-chip[aria-current="true"] { background: var(--tl-accent-tint); border-color: var(--tl-accent-ui); color: var(--tl-accent-text); }
.tl-chip .tl-count { height: 18px; min-width: 18px; font-size: 11px; }
.tl-due { display: flex; flex-direction: column; gap: var(--tl-space-3); }
.tl-due__head { display: flex; align-items: center; gap: var(--tl-space-2); }
.tl-due__head h2 { font-size: 17px; line-height: 24px; font-weight: 650; }
.tl-due-item { display: grid; grid-template-columns: auto 1fr; gap: var(--tl-space-1) var(--tl-space-3); align-items: start; padding: var(--tl-space-3) var(--tl-space-4); background: var(--tl-surface); border: 1px solid var(--tl-border); border-radius: var(--tl-radius); position: relative; }
.tl-due-item__icon { grid-row: span 2; width: 40px; height: 40px; border-radius: var(--tl-radius); display: grid; place-items: center; background: var(--tl-surface-strong); color: var(--tl-muted); }
.tl-due-item__icon .tl-icon { width: 22px; height: 22px; }
.tl-due-item__title { font-weight: 650; }
.tl-due-item__title a { color: inherit; text-decoration: none; }
.tl-due-item__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tl-due-item__title a:hover { text-decoration: underline; }
.tl-due-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tl-space-1) var(--tl-space-3); font-size: 14px; line-height: 20px; color: var(--tl-muted); }
.tl-due-item__end { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--tl-space-2); position: relative; z-index: 1; padding-top: var(--tl-space-1); }
@media (min-width: 760px) {
  .tl-due-item { grid-template-columns: auto 1fr auto; align-items: center; }
  .tl-due-item__icon { grid-row: span 2; }
  .tl-due-item__end { grid-column: 3; grid-row: 1 / span 2; padding: 0; justify-content: flex-end; }
}
.tl-due-item--overdue { border-color: var(--tl-danger-border); }
.tl-due-item--overdue .tl-due-item__icon { background: var(--tl-danger-bg); color: var(--tl-danger-text); }
.tl-due-item--soon .tl-due-item__icon { background: var(--tl-warning-bg); color: var(--tl-warning-text); }
.tl-due-item--done .tl-due-item__title { text-decoration: line-through; text-decoration-color: var(--tl-muted); color: var(--tl-muted); }
.tl-summary { display: grid; gap: var(--tl-space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .tl-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tl-summary a { text-decoration: none; color: inherit; }
.tl-summary .tl-card { height: 100%; }
.tl-summary .tl-card:hover { border-color: var(--tl-border-strong); }

/* ---------- 33. Strony publiczne ---------- */
.tl-pub-nav { display: flex; align-items: center; gap: var(--tl-space-3); height: 64px; padding: 0 var(--tl-space-4); max-width: 1200px; margin: 0 auto; }
@media (min-width: 760px) { .tl-pub-nav { padding: 0 var(--tl-space-6); } }
.tl-pub-nav img { height: 28px; width: auto; }
.tl-pub-nav__links { display: none; gap: var(--tl-space-1); margin-left: var(--tl-space-6); }
@media (min-width: 760px) { .tl-pub-nav__links { display: flex; } }
.tl-pub-nav__links a { color: var(--tl-text); text-decoration: none; font-weight: 500; font-size: 15px; padding: 10px var(--tl-space-3); border-radius: var(--tl-radius); }
.tl-pub-nav__links a:hover { background: var(--tl-surface-strong); }
.tl-pub-nav__links a[aria-current="page"] { color: var(--tl-accent-text); font-weight: 650; }
.tl-section { padding: var(--tl-space-12) var(--tl-space-4); }
@media (min-width: 760px) { .tl-section { padding: var(--tl-space-16) var(--tl-space-6); } }
.tl-section__inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--tl-space-8); }
.tl-section--surface { background: var(--tl-surface); border-block: 1px solid var(--tl-border); }
.tl-hero { display: grid; gap: var(--tl-space-8); align-items: center; }
@media (min-width: 1100px) { .tl-hero { grid-template-columns: 1.05fr 1fr; gap: var(--tl-space-12); } }
.tl-hero__copy { display: flex; flex-direction: column; gap: var(--tl-space-5); max-width: 600px; }
.tl-hero__lead { font-size: 18px; line-height: 28px; color: var(--tl-muted); }
@media (min-width: 760px) { .tl-hero__lead { font-size: 20px; line-height: 30px; } .tl-display { font-size: 52px; line-height: 56px; } }
.tl-hero__note { display: flex; flex-wrap: wrap; gap: var(--tl-space-1) var(--tl-space-4); font-size: 14px; color: var(--tl-muted); }
.tl-hero__note span { display: inline-flex; align-items: center; gap: 6px; }
.tl-hero__note .tl-icon { width: 16px; height: 16px; color: var(--tl-success); }
.tl-hero__visual { position: relative; }
.tl-mock { background: var(--tl-surface); border: 1px solid var(--tl-border); border-radius: var(--tl-radius-xl); box-shadow: var(--tl-shadow-lg); padding: var(--tl-space-4); display: flex; flex-direction: column; gap: var(--tl-space-2); }
.tl-steps-how { display: grid; gap: var(--tl-space-4); counter-reset: how; list-style: none; padding: 0; margin: 0; }
@media (min-width: 760px) { .tl-steps-how { grid-template-columns: repeat(3, 1fr); gap: var(--tl-space-6); } }
.tl-steps-how li { counter-increment: how; display: flex; flex-direction: column; gap: var(--tl-space-2); padding: var(--tl-space-5); background: var(--tl-surface); border: 1px solid var(--tl-border); border-radius: var(--tl-radius-lg); }
.tl-steps-how li::before { content: counter(how); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--tl-text); color: var(--tl-ink-inverse); font-weight: 700; margin-bottom: var(--tl-space-2); }
.tl-feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--tl-space-4); }
@media (min-width: 760px) { .tl-feature-list { grid-template-columns: repeat(2, 1fr); gap: var(--tl-space-5) var(--tl-space-8); } }
.tl-feature-list li { display: grid; grid-template-columns: auto 1fr; gap: var(--tl-space-3); }
.tl-feature-list li > span:first-child { width: 40px; height: 40px; border-radius: var(--tl-radius); display: grid; place-items: center; background: var(--tl-accent-tint); color: var(--tl-accent-text); }
.tl-feature-list strong { display: block; font-weight: 650; }
.tl-feature-list p { color: var(--tl-muted); font-size: 15px; line-height: 22px; }
.tl-price { display: flex; flex-direction: column; gap: var(--tl-space-3); }
.tl-price__value { font-size: 36px; line-height: 40px; font-weight: 750; font-variant-numeric: tabular-nums; }

/* ---------- 34. Panel operatora ---------- */
.tl-matrix th[scope="col"]:not(:first-child) { text-align: center; }
.tl-split { display: grid; gap: var(--tl-space-6); align-items: start; }
@media (min-width: 1100px) { .tl-split { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); } }
@media (max-width: 759.98px) {
  .tl-table--stack th[scope="row"] { display: block; padding: 0 0 var(--tl-space-1); border: 0 !important; }
  .tl-matrix .tl-switch { justify-content: flex-end; min-height: 32px; }
}
.tl-matrix td.tl-matrix__cell { text-align: center; }
.tl-matrix .tl-switch { justify-content: center; min-height: 36px; }
.tl-matrix .tl-switch input { width: 40px; height: 24px; }
.tl-matrix .tl-switch input::before { width: 17px; height: 17px; }
.tl-matrix .tl-switch input:checked::before { transform: translateX(16px); }
.tl-module-row { display: flex; align-items: center; gap: var(--tl-space-3); padding: var(--tl-space-3) 0; border-bottom: 1px solid var(--tl-border); }
.tl-module-row:last-child { border-bottom: 0; }

/* ---------- 35. Powiadomienie push (makieta systemowa) ---------- */
.tl-push { display: grid; grid-template-columns: auto 1fr auto; gap: 2px var(--tl-space-3); align-items: start; width: min(100%, 380px); padding: 12px 14px; border-radius: 22px; background: color-mix(in oklab, var(--tl-surface-raised) 88%, transparent); backdrop-filter: blur(16px); box-shadow: var(--tl-shadow-md); border: 1px solid var(--tl-border); font-size: 14px; line-height: 19px; }
.tl-push img { width: 38px; height: 38px; border-radius: 9px; grid-row: span 2; }
.tl-push__app { font-size: 12px; color: var(--tl-muted); grid-column: 2; }
.tl-push__time { font-size: 12px; color: var(--tl-muted); }
.tl-push__title { font-weight: 650; grid-column: 2 / -1; }
.tl-push__body { grid-column: 2 / -1; color: var(--tl-text); }


/* Blazor: komunikaty walidacji z <ValidationMessage> i <FieldErrors> (jak .tl-field__error). */
.validation-message { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--tl-danger-text); }

/* Nagłówek stron publicznych (w referencjach to inline style: tło powierzchni i dolna linia). */
.tl-pub-header { background: var(--tl-surface); border-bottom: 1px solid var(--tl-border); }
/* Public document page (OS-08): a reading column, and what is only for the screen disappears when printed. */
.tl-public { max-width: 760px; margin: 0 auto; padding: var(--tl-space-4); }
@media print { .tl-no-print { display: none !important; } }

/* ---------- Arkusz pozycji (edycja pozycji oferty): jedna karta, jeden nagłówek kolumn, pola bez ramek ---------- */
.tl-sheet-card { padding: 0; }
.tl-sheet__title { margin: 0; padding: var(--tl-space-4) var(--tl-space-4) var(--tl-space-3); }
.tl-sheet__row { display: grid; grid-template-columns: 40px 20px minmax(0, 1fr) 76px 64px 104px 68px 136px 112px 44px; align-items: center; }
.tl-sheet__head { min-height: 36px; background: var(--tl-surface-strong); border-top: 1px solid var(--tl-border); border-bottom: 1px solid var(--tl-border); font-size: 13px; font-weight: 600; color: var(--tl-muted); }
.tl-sheet__head > span { padding: 0 10px; }
.tl-sheet__head .tl-sheet__num { text-align: right; }
.tl-sheet__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tl-space-3); min-height: 52px; padding: 6px var(--tl-space-3) 6px 0; background: var(--tl-accent-tint); border-top: 1px solid var(--tl-border); font-size: 14px; font-weight: 600; color: var(--tl-accent-text); }
.tl-sheet__bar label { display: flex; align-items: center; gap: var(--tl-space-2); font-weight: 400; color: var(--tl-text); }
.tl-sheet__bar-spacer { flex: 1; }
.tl-sheet__group { display: flex; align-items: center; gap: 20px; min-height: 40px; padding: 0 var(--tl-space-4) 0 0; background: var(--tl-surface-strong); border-bottom: 1px solid var(--tl-border); }
.tl-sheet__group .tl-sheet__field { width: 220px; max-width: 100%; font-weight: 650; font-size: 15px; }
.tl-sheet__group-sum { margin-left: auto; padding-right: 44px; font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.tl-sheet__tag { font-size: 12px; font-weight: 650; letter-spacing: .06em; color: var(--tl-muted); text-transform: uppercase; }
.tl-sheet__item { border-bottom: 1px solid var(--tl-border); background: var(--tl-surface); }
.tl-sheet__item[data-selected="true"] { background: var(--tl-accent-tint); }
.tl-sheet__item[data-over="true"], .tl-sheet__group[data-over="true"] { box-shadow: inset 0 2px 0 var(--tl-accent-ui); }
.tl-sheet__item[data-dragging="true"] { opacity: .5; }
.tl-sheet__c { box-sizing: border-box; min-height: 40px; display: flex; align-items: center; padding: 0 2px; border-left: 1px solid var(--tl-border); }
.tl-sheet__c::before { display: none; content: attr(data-label); }
.tl-sheet__c--first { border-left: 0; }
.tl-sheet__c--end { flex-direction: column; align-items: flex-end; justify-content: center; padding-right: 12px; border-left: 1px solid var(--tl-border); font-variant-numeric: tabular-nums; }
.tl-sheet__c--end b { font-size: 15px; font-weight: 600; line-height: 18px; }
.tl-sheet__c--end small { font-size: 11px; line-height: 14px; color: var(--tl-muted); }
.tl-sheet__check { display: flex; justify-content: center; }
.tl-sheet__check input, .tl-sheet__group > input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--tl-accent-ui); }
.tl-sheet__grip { display: flex; color: var(--tl-border-strong); opacity: .5; cursor: grab; }
.tl-sheet__item:hover .tl-sheet__grip, .tl-sheet__item:focus-within .tl-sheet__grip { opacity: 1; }
.tl-sheet__field { box-sizing: border-box; width: 100%; height: 34px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--tl-radius-sm); background: transparent; color: var(--tl-text); font: inherit; font-size: 15px; font-variant-numeric: tabular-nums; }
.tl-sheet__field:hover { border-color: var(--tl-border-strong); }
.tl-sheet__field:focus, .tl-sheet__field:focus-visible { outline: none; border-color: var(--tl-accent-ui); background: var(--tl-surface); box-shadow: 0 0 0 1px var(--tl-accent-ui), 0 0 0 4px var(--tl-accent-tint-strong); }
.tl-sheet__field[aria-invalid="true"] { border-color: var(--tl-danger); }
.tl-sheet__field--num { text-align: right; }
select.tl-sheet__field { padding: 0 4px; }
.tl-sheet__seg { display: flex; flex-shrink: 0; border: 1px solid var(--tl-border-strong); border-radius: var(--tl-radius-sm); overflow: hidden; }
.tl-sheet__seg button { width: 26px; height: 24px; padding: 0; border: 0; background: var(--tl-surface); color: var(--tl-muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.tl-sheet__seg button[aria-pressed="true"] { background: var(--tl-accent-tint-strong); color: var(--tl-accent-text); }
.tl-sheet__more { opacity: .6; }
.tl-sheet__item:hover .tl-sheet__more, .tl-sheet__item:focus-within .tl-sheet__more { opacity: 1; }
.tl-sheet__more-select { box-sizing: border-box; width: calc(100% - 2 * var(--tl-space-3)); min-width: 0; max-width: calc(100% - 2 * var(--tl-space-3)); margin: var(--tl-space-1) var(--tl-space-3); text-overflow: ellipsis; }
.tl-sheet__desc { grid-column: 3 / 10; padding: 0 var(--tl-space-3) 6px 2px; }
.tl-sheet__desc .tl-sheet__field { height: 28px; font-size: 13px; color: var(--tl-muted); }
.tl-sheet__add { display: flex; align-items: center; min-height: 40px; padding-left: 58px; border-bottom: 1px solid var(--tl-border); }
.tl-sheet__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tl-space-3); min-height: 52px; padding: 0 var(--tl-space-4); }
.tl-sheet__total { margin-left: auto; padding-right: 44px; display: flex; align-items: baseline; gap: var(--tl-space-3); font-size: 14px; color: var(--tl-muted); }
.tl-sheet__total b { font-size: 17px; font-weight: 700; color: var(--tl-text); font-variant-numeric: tabular-nums; }
.tl-sheet__hint { margin: 0; padding: 0 var(--tl-space-4) var(--tl-space-3); font-size: 13px; color: var(--tl-muted); }
.tl-sheet__desc[data-empty="true"] { display: none; }
.tl-sheet__item:focus-within .tl-sheet__desc { display: block; }
@media (max-width: 759px) {
  .tl-sheet__head { display: none; }
  .tl-sheet__item > .tl-sheet__row { grid-template-columns: 32px repeat(6, minmax(0, 1fr)) 44px; padding: var(--tl-space-2) 0; row-gap: 4px; }
  .tl-sheet__grip { display: none; }
  .tl-sheet__c { border-left: 0; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 0 2px; }
  .tl-sheet__c::before { display: block; padding: 0 8px; font-size: 11px; color: var(--tl-muted); }
  .tl-sheet__c[data-label="Pozycja"] { grid-column: 2 / 7; grid-row: 1; }
  .tl-sheet__c[data-label="Pozycja"]::before, .tl-sheet__c--end::before, .tl-sheet__c--more::before { display: none; }
  .tl-sheet__c--end { grid-column: 7; grid-row: 1; padding-right: 4px; border-left: 0; }
  .tl-sheet__c--more { grid-column: 8; grid-row: 1; justify-content: flex-start; }
  .tl-sheet__check { grid-column: 1; grid-row: 1; }
  /* Parametry pozycji jak na stronie oferty dla klienta: etykieta z lewej, wartość/pole z prawej */
  .tl-sheet__c[data-label="Ilość"], .tl-sheet__c[data-label="Jedn."], .tl-sheet__c[data-label="Cena netto"], .tl-sheet__c[data-label="VAT"], .tl-sheet__c[data-label="Rabat"] { grid-column: 2 / 9; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--tl-space-3); }
  .tl-sheet__c[data-label="Ilość"] { grid-row: 2; }
  .tl-sheet__c[data-label="Jedn."] { grid-row: 3; }
  .tl-sheet__c[data-label="Cena netto"] { grid-row: 4; }
  .tl-sheet__c[data-label="VAT"] { grid-row: 5; }
  .tl-sheet__c[data-label="Rabat"] { grid-row: 6; }
  .tl-sheet__c[data-label]:not([data-label="Pozycja"])::before { padding: 0; font-size: 13px; font-weight: 500; flex: none; }
  .tl-sheet__c[data-label]:not([data-label="Pozycja"]) > :not(.tl-sheet__seg) { flex: 0 1 160px; min-width: 0; width: auto; }
  .tl-sheet__c[data-label]:not([data-label="Pozycja"]) .tl-sheet__field { text-align: right; text-align-last: right; }
  .tl-sheet__c[data-label="Rabat"]::before { margin-right: auto; }
  .tl-sheet__desc { grid-column: 2 / -1; padding-left: 2px; }
  .tl-sheet__add { padding-left: var(--tl-space-3); }
  .tl-sheet__group { padding: 0 var(--tl-space-3) 0 0; gap: 12px; }
  .tl-sheet__group .tl-sheet__check, .tl-sheet__bar .tl-sheet__check { width: 32px; }
  .tl-sheet__group .tl-sheet__field { width: auto; flex: 1; }
  .tl-sheet__group-sum, .tl-sheet__total { padding-right: 0; }
}

/* ---------- Dodawanie pozycji do oferty: chipy grup i siatka 2×2 ---------- */
.tl-chip--lg { min-height: 40px; padding: 0 16px; font-size: 15px; }
.tl-chip--new { border-style: dashed; color: var(--tl-accent-text); }
.tl-chip--new[aria-pressed="true"] { border-style: solid; }
.tl-input--pill { width: 240px; max-width: 100%; min-height: 40px; height: 40px; border-radius: var(--tl-radius-pill); padding: 0 16px; }
.tl-input--lg { min-height: 44px; height: 44px; border-radius: 10px; }
.tl-addgrid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 12px; align-items: center; }
.tl-addgrid__btn { width: 100%; min-height: 44px; border-radius: 10px; }
.tl-addgrid__name, .tl-addgrid__search .tl-input { width: 100%; }
.tl-addgrid__label { box-sizing: border-box; display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 10px; background: var(--tl-surface-strong); font-size: 15px; font-weight: 600; color: var(--tl-text); }
.tl-addgrid__search { position: relative; }
.tl-addgrid__search .tl-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--tl-muted); pointer-events: none; }
.tl-addgrid__search .tl-input { padding-left: 42px; }
/* Pole z przyciskiem dodania z prawej (grupa pole + akcja) */
.tl-inputgroup { position: relative; }
.tl-inputgroup .tl-input { width: 100%; padding-right: 52px; }
.tl-inputgroup__action { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
@media (max-width: 759px) {
  .tl-addgrid { grid-template-columns: minmax(0, 1fr); }
}
.tl-sheet__group .tl-sheet__check, .tl-sheet__bar .tl-sheet__check { width: 40px; flex: none; }
@media (max-width: 759px) {
  .tl-sheet__group .tl-sheet__check, .tl-sheet__bar .tl-sheet__check { width: 32px; }
}

/* Podsumowanie wyliczeń oferty: etykiety w jednej kolumnie, kwoty po prawej */
.tl-sheet__alert { padding: 0 var(--tl-space-4) var(--tl-space-2); }
.tl-sheet__sumwrap { display: flex; justify-content: flex-end; padding: var(--tl-space-3) var(--tl-space-4) var(--tl-space-4); border-top: 1px solid var(--tl-border); }
.tl-sheet__sum { width: 100%; max-width: 520px; border-collapse: collapse; font-size: 15px; line-height: 22px; font-variant-numeric: tabular-nums; }
.tl-sheet__sum th, .tl-sheet__sum td { padding: 8px 0; vertical-align: middle; }
.tl-sheet__sum th { text-align: left; font-weight: 400; color: var(--tl-text); }
.tl-sheet__sum td { padding-left: var(--tl-space-4); text-align: right; white-space: nowrap; }
.tl-sheet__sum tr + tr th, .tl-sheet__sum tr + tr td { border-top: 1px solid var(--tl-border); }
.tl-sheet__sum-sub th, .tl-sheet__sum-sub td { font-weight: 600; }
.tl-sheet__sum-grand th { font-weight: 600; }
.tl-sheet__sum-grand td { font-size: 18px; font-weight: 700; }
.tl-sheet__sum-grand th, .tl-sheet__sum-grand td { border-top: 2px solid var(--tl-border-strong); }
.tl-sheet__sum-disc { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--tl-space-2); }
.tl-sheet__sum-disc .tl-sheet__field { width: 96px; }
/* Pole wartości rabatu i wybór % lub zł zawsze w jednej linii; przy wąskim ekranie przechodzą razem pod podpis */
.tl-sheet__sum-ctl { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: var(--tl-space-2); }
.tl-stack > .tl-sheet__sumwrap { padding: 0; border-top: 0; }

/* Tytuł sekcji ze statusem obok (edytor oferty) */
.tl-titlebar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tl-space-3); }
.tl-titlebar > .tl-h3 { margin: 0; }
.tl-titlebar__end { margin-left: auto; }

/* Wiersz grupy w tabeli pozycji do odczytu */
.tl-table__group th { background: var(--tl-surface-strong); font-size: 13px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--tl-muted); text-align: left; }

/* Pole z podpowiedziami (TlCombobox): input role=combobox + lista wyników pod nim */
.tl-combo { position: relative; }
.tl-combo__list { position: absolute; z-index: var(--tl-z-dropdown); top: calc(100% + 4px); left: 0; right: 0; max-height: 280px; overflow-y: auto; margin: 0; padding: var(--tl-space-1); list-style: none; background: var(--tl-surface-raised); border: 1px solid var(--tl-border); border-radius: var(--tl-radius); box-shadow: var(--tl-shadow-md); }
.tl-combo__option { display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 4px var(--tl-space-3); border-radius: var(--tl-radius-sm); color: var(--tl-text); font-size: 15px; font-weight: 500; cursor: pointer; }
.tl-combo__option small { color: var(--tl-muted); font-size: 13px; font-weight: 400; }
.tl-combo__option:hover, .tl-combo__option[aria-selected="true"] { background: var(--tl-surface-strong); }
.tl-combo__empty { padding: var(--tl-space-3); color: var(--tl-muted); font-size: 14px; }

/* Akordeon bez ramki (<details class="tl-disclosure">): podpis ze strzałką, treść pod nim */
.tl-disclosure > summary { display: flex; align-items: center; gap: var(--tl-space-2); min-height: 44px; cursor: pointer; list-style: none; font-weight: 600; }
.tl-disclosure > summary::-webkit-details-marker { display: none; }
.tl-disclosure > summary::before { content: ""; width: 7px; height: 7px; border: solid var(--tl-muted); border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform var(--tl-dur-fast) var(--tl-ease-standard); }
.tl-disclosure[open] > summary::before { transform: rotate(45deg); }
.tl-disclosure > summary:focus-visible { outline-offset: 2px; }
.tl-disclosure__body { padding-top: var(--tl-space-2); }
.tl-disclosure__aside { margin-left: auto; }
/* Akordeony jeden pod drugim to osobne pozycje: oddziela je pozioma linia. */
.tl-disclosure + .tl-disclosure { border-top: 1px solid var(--tl-border); padding-top: var(--tl-space-2); }

/* Shared assistant side panel: nonmodal desktop, full-width mobile overlay. */
.tl-assistant[hidden] { display: none; }
.tl-assistant { position: fixed; inset: 0 0 0 auto; z-index: 850; width: min(420px, 100vw); height: 100dvh; display: flex; flex-direction: column; color: var(--tl-text); background: var(--tl-surface); border-left: 1px solid var(--tl-border); box-shadow: var(--tl-shadow-lg); }
.tl-assistant__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--tl-border); flex-shrink: 0; }
.tl-assistant__head h2 { margin: 0; }
.tl-assistant__tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: start; padding: 12px 16px; border-bottom: 1px solid var(--tl-border); flex-shrink: 0; }
.tl-assistant__history { min-width: 0; }
.tl-assistant__history summary { list-style: none; }
.tl-assistant__conversations { position: absolute; z-index: 1; inset-inline: 16px; max-height: 40dvh; overflow: auto; padding: 8px; background: var(--tl-surface-raised); border: 1px solid var(--tl-border-strong); border-radius: 12px; box-shadow: var(--tl-shadow-md); }
.tl-assistant__conversations .tl-menu__item { white-space: normal; overflow-wrap: anywhere; width: 100%; }
.tl-assistant__messages { flex: 1; min-height: 80px; overflow: auto; overscroll-behavior: contain; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.tl-assistant__message { padding: 12px; border: 1px solid var(--tl-border); border-radius: 12px; background: var(--tl-surface); }
.tl-assistant__message--user { margin-left: 24px; background: var(--tl-surface-strong); }
.tl-assistant__text { white-space: pre-wrap; overflow-wrap: anywhere; }
.tl-assistant__empty { margin: auto 0; padding: 24px 8px; }
.tl-assistant__confirmation { padding: 16px; }
.tl-assistant__actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.tl-assistant__notice { padding: 12px 16px; flex-shrink: 0; }
.tl-assistant__composer { padding: 16px; border-top: 1px solid var(--tl-border); display: grid; gap: 8px; flex-shrink: 0; }
.tl-assistant__composer textarea { width: 100%; resize: vertical; max-height: 25dvh; }
@media (min-width: 1100px) { .tl-assistant-open .tl-shell { margin-right: 420px; } }
@media (max-width: 699px) { .tl-assistant { width: 100%; border-left: 0; } .tl-assistant__head { padding-top: max(12px, env(safe-area-inset-top)); } .tl-assistant__composer { padding-bottom: max(16px, env(safe-area-inset-bottom)); } .tl-assistant__tools { padding: 8px; gap: 4px; } }
/* Respect availability of account device controls. */
[data-push] [hidden], [data-install] [hidden] { display: none !important; }

.tl-device-status { display: block; color: var(--_c); }