/* Auditer — warstwa aplikacji nad Pico CSS v2 (static/vendor/pico.min.css).

   Pico stylizuje gołe elementy HTML (przyciski, formularze, tabele, <article>,
   <details>, <dialog>, <nav>), więc szablony używają semantycznego HTML-a bez
   klas frameworka. Ten plik dodaje: barwy marki i gęstszą typografię (zmienne
   --pico-*), tokeny statusów audytu (--auditer-*), kilka komponentów, których
   Pico nie ma (tag, notice, actions, toolbar), małe helpery oraz komponenty
   aplikacji (BEM) niżej. */

/* ---- Tokeny i motyw jasny/ciemny ----------------------------------------
   Selektory jak w samym Pico: jasny domyślnie, ciemny wg systemu
   (prefers-color-scheme) albo ręcznie przez [data-theme] z przełącznika
   w nawigacji (base.html). Ten plik jest wczytywany po Pico, więc przy tej
   samej specyficzności jego wartości wygrywają. */
:root {
  /* Skala typografii (12 / 13 / 14 / 16 / 18 / 22 / 28 px) — jedyne rozmiary w arkuszach
     aplikacji; wcześniej było ich ok. 40 (0,72…0,95 rem), co rozmywało hierarchię. */
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --pico-font-size: 100%;
  --pico-line-height: 1.55;
  --pico-border-radius: 0.375rem;
  --pico-typography-spacing-vertical: 0.75rem;
  --pico-form-element-spacing-vertical: 0.5rem;
  --pico-form-element-spacing-horizontal: 0.875rem;
  --pico-nav-element-spacing-vertical: 0.5rem;
  --pico-nav-link-spacing-vertical: 0.4rem;
  --pico-block-spacing-vertical: 1.25rem;
  --pico-block-spacing-horizontal: 1.25rem;
  --pico-form-label-font-weight: 600;
}
/* Pico powiększa czcionkę na szerokich ekranach (do 131%) — w narzędziu z gęstymi
   tabelami i panelami bocznymi zostajemy przy 16 px. */
@media (min-width: 576px) { :root { --pico-font-size: 100%; } }
@media (min-width: 1024px) { :root { --pico-font-size: 100%; } }
@media (min-width: 1536px) { :root { --pico-font-size: 106.25%; } }

h1 { --pico-font-size: var(--fs-2xl); --pico-typography-spacing-top: 2rem; }
h2 { --pico-font-size: var(--fs-xl); --pico-typography-spacing-top: 1.75rem; }
h3 { --pico-font-size: var(--fs-lg); --pico-typography-spacing-top: 1.5rem; }
h4 { --pico-font-size: var(--fs-base); --pico-typography-spacing-top: 1.25rem; }
h5 { --pico-font-size: var(--fs-base); --pico-typography-spacing-top: 1rem; }
h6 { --pico-font-size: var(--fs-md); --pico-typography-spacing-top: 1rem; }

[data-theme="light"],
:root:not([data-theme="dark"]) {
  color-scheme: light;

  --pico-primary: #3a4fc4;
  --pico-primary-background: #3a4fc4;
  --pico-primary-border: #3a4fc4;
  --pico-primary-underline: rgba(58, 79, 196, 0.45);
  --pico-primary-hover: #2a3a99;
  --pico-primary-hover-background: #2f41a8;
  --pico-primary-hover-border: #2f41a8;
  --pico-primary-hover-underline: #2a3a99;
  --pico-primary-focus: rgba(58, 79, 196, 0.35);
  --pico-primary-inverse: #fff;
  --pico-muted-color: #595f6b;
  --pico-card-box-shadow: 0 0 0 1px #dfe3ea, 0 1px 3px rgba(20, 30, 60, 0.06);
  --pico-card-sectioning-background-color: #f7f8fb;

  --auditer-card-bg: #ffffff;
  --pico-card-background-color: #ffffff;
  --auditer-card-border: #d9dde5;
  --auditer-hover-bg: #f6f7fa;
  --auditer-muted-border: #e9ecf1;
  --auditer-shadow: rgba(20, 30, 60, 0.07);
  --auditer-text-strong: #2b3038;
  --auditer-text-muted: #595f6b;
  --auditer-focus: #0b5bd3;

  --auditer-ok-bg: #effaf3;    --auditer-ok-text: #1f7a4d;   --auditer-ok-solid: #1f7a4d;
  --auditer-fail-bg: #feecf0;  --auditer-fail-text: #b42335; --auditer-fail-solid: #b42335;
  --auditer-partial-bg: #fff6dc; --auditer-partial-text: #7d5b00; --auditer-partial-solid: #ffd666;
  --auditer-na-bg: #f1f3f6;    --auditer-na-text: #454b55;
  --auditer-notchecked-bg: #eef2fb; --auditer-notchecked-text: #3454a0;
}

@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --pico-primary: #9fb0ff;
    --pico-primary-background: #4a62e0;
    --pico-primary-border: #4a62e0;
    --pico-primary-underline: rgba(159, 176, 255, 0.45);
    --pico-primary-hover: #c3ceff;
    --pico-primary-hover-background: #3a4fc4;
    --pico-primary-hover-border: #3a4fc4;
    --pico-primary-hover-underline: #c3ceff;
    --pico-primary-focus: rgba(159, 176, 255, 0.4);
    --pico-primary-inverse: #fff;
    --pico-muted-color: #a9b0bd;
    --pico-card-box-shadow: 0 0 0 1px #2e343e, 0 1px 3px rgba(0, 0, 0, 0.35);
    --pico-card-sectioning-background-color: #1f242c;

    --auditer-card-bg: #1a1e26;
    --pico-card-background-color: #1a1e26;
  --pico-card-background-color: #1a1e26;
    --auditer-card-border: #343a45;
    --auditer-hover-bg: #232933;
    --auditer-muted-border: #2a303a;
    --auditer-shadow: rgba(0, 0, 0, 0.4);
    --auditer-text-strong: #e6e8ec;
    --auditer-text-muted: #b0b6c1;
    --auditer-focus: #8ab4ff;

    --auditer-ok-bg: #173b2c;    --auditer-ok-text: #5fd79b;   --auditer-ok-solid: #1f7a4d;
    --auditer-fail-bg: #3e1620;  --auditer-fail-text: #ffb3c0; --auditer-fail-solid: #b42335;
    --auditer-partial-bg: #3a2f0d; --auditer-partial-text: #ffcf5c; --auditer-partial-solid: #ffd666;
    --auditer-na-bg: #2b2f36;    --auditer-na-text: #d0d4da;
    --auditer-notchecked-bg: #16233d; --auditer-notchecked-text: #9db8ff;
  }
}
[data-theme="dark"] {
  color-scheme: dark;

  --pico-primary: #9fb0ff;
  --pico-primary-background: #4a62e0;
  --pico-primary-border: #4a62e0;
  --pico-primary-underline: rgba(159, 176, 255, 0.45);
  --pico-primary-hover: #c3ceff;
  --pico-primary-hover-background: #3a4fc4;
  --pico-primary-hover-border: #3a4fc4;
  --pico-primary-hover-underline: #c3ceff;
  --pico-primary-focus: rgba(159, 176, 255, 0.4);
  --pico-primary-inverse: #fff;
  --pico-muted-color: #a9b0bd;
  --pico-card-box-shadow: 0 0 0 1px #2e343e, 0 1px 3px rgba(0, 0, 0, 0.35);
  --pico-card-sectioning-background-color: #1f242c;

  --auditer-card-bg: #1a1e26;
  --pico-card-background-color: #1a1e26;
  --auditer-card-border: #343a45;
  --auditer-hover-bg: #232933;
  --auditer-muted-border: #2a303a;
  --auditer-shadow: rgba(0, 0, 0, 0.4);
  --auditer-text-strong: #e6e8ec;
  --auditer-text-muted: #b0b6c1;
  --auditer-focus: #8ab4ff;

  --auditer-ok-bg: #173b2c;    --auditer-ok-text: #5fd79b;   --auditer-ok-solid: #1f7a4d;
  --auditer-fail-bg: #3e1620;  --auditer-fail-text: #ffb3c0; --auditer-fail-solid: #b42335;
  --auditer-partial-bg: #3a2f0d; --auditer-partial-text: #ffcf5c; --auditer-partial-solid: #ffd666;
  --auditer-na-bg: #2b2f36;    --auditer-na-text: #d0d4da;
  --auditer-notchecked-bg: #16233d; --auditer-notchecked-text: #9db8ff;
}

:focus-visible {
  outline: 3px solid var(--auditer-focus);
  outline-offset: 2px;
}

/* ---- Most: Pico a komponenty aplikacji ----------------------------------
   Pico nadaje wygląd gołym <nav>, <aside>, <details>, <ul>/<li> i [role=group].
   Własne komponenty (element z klasą) mają swój wygląd w tym pliku — tu
   cofamy domyślne style Pico tylko dla nich. :where() trzyma specyficzność
   na poziomie Pico, więc klasy komponentów dalej wygrywają. */
ul:where([class]), ol:where([class]) { padding-left: 0; list-style: none; }
ul:where([class]) li, ol:where([class]) li { list-style: inherit; margin-bottom: 0; }

details:where([class]) { margin-bottom: 0; }
details summary:where([class]), details:where([class]) > summary { line-height: inherit; }
/* Komponenty z własnym znacznikiem rozwinięcia (▸/▾) — bez strzałki Pico; pozostałe ją zachowują. */
:is(.check-item__summary, .rule-section__summary, .as-test__summary, .crit-switch__summary, .library-card__delete > summary, summary[role="button"])::after { display: none; }
details[open] > summary:where([class]), details:where([class])[open] > summary { margin-bottom: 0; }
details summary:where([class]):not([role]), details:where([class]) > summary:not([role]) { color: inherit; }

nav:where([class]:not(.app-nav)) { display: block; }
nav:where([class]:not(.app-nav)) ul, nav:where([class]:not(.app-nav)) ol { display: block; margin: 0; }
nav:where([class]:not(.app-nav)) ul:first-of-type, nav:where([class]:not(.app-nav)) ol:first-of-type,
nav:where([class]:not(.app-nav)) ul:last-of-type, nav:where([class]:not(.app-nav)) ol:last-of-type { margin: 0; }
nav:where([class]:not(.app-nav)) li { display: list-item; padding: 0; }
nav:where([class]:not(.app-nav)) li a, nav:where([class]:not(.app-nav)) li [role="link"] {
  display: revert; margin: 0; padding: 0; border-radius: 0;
}
:where(nav[class]:not(.app-nav) li)::before { content: none; }
aside:where([class]) li { padding: 0; }
aside:where([class]) li a { display: revert; }

/* Nagłówek/stopka komponentu wewnątrz <article> — bez sekcji karty Pico (tło, ujemne marginesy). */
article > header:where([class]), article > footer:where([class]) { margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; }

/* [role=group] bez klasy .group-joined to semantyczne grupowanie (filtry, przełączniki) —
   nie zlepiamy elementów w jeden przycisk jak domyślnie robi Pico. */
[role="group"]:where([class]:not(.group-joined)), [role="search"]:where([class]) { display: flex; width: auto; box-shadow: none; vertical-align: baseline; }
[role="group"]:where([class]:not(.group-joined)) > *, [role="search"]:where([class]) > * { flex: 0 1 auto; }
[role="group"]:where([class]:not(.group-joined)) > :not(:first-child), [role="search"]:where([class]) > :not(:first-child) { margin-left: 0; border-top-left-radius: var(--pico-border-radius); border-bottom-left-radius: var(--pico-border-radius); }
[role="group"]:where([class]:not(.group-joined)) > :not(:last-child), [role="search"]:where([class]) > :not(:last-child) { border-top-right-radius: var(--pico-border-radius); border-bottom-right-radius: var(--pico-border-radius); }
/* Zlepiona grupa przycisków Pico (np. powiększenie podglądu). */
[role="group"].group-joined { display: inline-flex; width: auto; margin-bottom: 0; }
[role="group"].group-joined > * { flex: 0 0 auto; }

/* Formularze: w wierszach (flex) pole nie ciągnie się na całą szerokość i nie ma marginesu. */
.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.inline-form > :is(input, select, textarea, button, [role="button"], label, small),
.inline-form > form { width: auto; margin-bottom: 0; }
.inline-form > input:not([type="checkbox"], [type="radio"]) { flex: 1 1 14rem; }
form:where(.inline) { display: inline; }
label:has(> [type="checkbox"], > [type="radio"]) { font-weight: var(--pico-font-weight); }
small.error, .error { color: var(--pico-del-color); }
small.error { display: block; }
/* Podpowiedź pod nagłówkiem/sekcją formularza (pod samym polem: <small> wg Pico). */
.hint { font-size: var(--fs-md); color: var(--pico-muted-color); }
.fw-normal { font-weight: 400 !important; }
textarea { min-height: 0; }
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]).small,
select.small, textarea.small {
  --pico-form-element-spacing-vertical: 0.3rem;
  --pico-form-element-spacing-horizontal: 0.6rem;
  font-size: var(--fs-md);
}
select.small { padding-right: 2rem; background-position: center right 0.5rem; }

/* ---- Przyciski — dopełnienie Pico ----------------------------------------
   Pico: domyślny = główna akcja, .secondary, .contrast, .outline. Dodajemy
   rozmiar .small, warianty .danger/.success/.warning, .ghost (bez ramki, na
   paskach narzędzi) i .wide (cała szerokość). */
:is(button, [type="submit"], [type="button"], [role="button"]) { margin-bottom: 0; }
/* Pico rozciąga button[type=submit] na całą szerokość — tu przyciski mają szerokość treści (.wide = pełna). */
button[type="submit"] { width: auto; }
details summary[role="button"]:where([class]) { width: auto; }
:is(button, [type="submit"], [type="button"], [role="button"]).small,
.actions.small :is(button, [type="submit"], [type="button"], [role="button"]) {
  --pico-form-element-spacing-vertical: 0.25rem;
  --pico-form-element-spacing-horizontal: 0.65rem;
  font-size: var(--fs-md);
}
:is(button, [type="submit"], [type="button"], [role="button"]).wide { width: 100%; }
:is(button, [type="submit"], [type="button"], [role="button"]).danger {
  --pico-background-color: var(--auditer-fail-solid); --pico-border-color: var(--auditer-fail-solid); --pico-color: #fff;
}
:is(button, [type="submit"], [type="button"], [role="button"]).success {
  --pico-background-color: var(--auditer-ok-solid); --pico-border-color: var(--auditer-ok-solid); --pico-color: #fff;
}
:is(button, [type="submit"], [type="button"], [role="button"]).warning {
  --pico-background-color: var(--auditer-partial-solid); --pico-border-color: var(--auditer-partial-solid); --pico-color: #2b2100;
}
:is(button, [type="submit"], [type="button"], [role="button"]):is(.danger, .success, .warning):is(:hover, :focus) { filter: brightness(0.92); }
:is(button, [type="submit"], [type="button"], [role="button"]).outline.danger { --pico-background-color: transparent; --pico-color: var(--auditer-fail-text); --pico-border-color: currentColor; }
:is(button, [type="submit"], [type="button"], [role="button"]).outline.success { --pico-background-color: transparent; --pico-color: var(--auditer-ok-text); --pico-border-color: currentColor; }
:is(button, [type="submit"], [type="button"], [role="button"]).outline.warning { --pico-background-color: transparent; --pico-color: var(--auditer-partial-text); --pico-border-color: currentColor; }
:is(button, [type="submit"], [type="button"], [role="button"]).outline:is(.danger, .success, .warning):is(:hover, :focus) { filter: none; --pico-background-color: var(--auditer-hover-bg); }
:is(button, [type="submit"], [type="button"], [role="button"]).ghost {
  --pico-background-color: transparent; --pico-border-color: transparent; --pico-color: var(--pico-primary);
}
:is(button, [type="submit"], [type="button"], [role="button"]).ghost:is(:hover, :focus) {
  --pico-background-color: var(--auditer-hover-bg); --pico-border-color: transparent;
}
:is(button, [type="submit"], [type="button"], [role="button"]).ghost.danger { --pico-color: var(--auditer-fail-text); }
:is(button, [type="submit"], [type="button"], [role="button"])[aria-pressed="true"]:is(.outline, .ghost) {
  --pico-background-color: var(--auditer-notchecked-bg); --pico-color: var(--auditer-notchecked-text); --pico-border-color: var(--auditer-focus);
}

/* Rząd przycisków/akcji z odstępami (zwykły flex — w odróżnieniu od zlepionego [role=group]). */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: var(--pico-spacing); }
.actions > *, .actions > form > * { margin-bottom: 0; }
.actions > form { margin: 0; }
.actions--end { justify-content: flex-end; }
.actions:last-child { margin-bottom: 0; }

/* Pasek: elementy po lewej i po prawej (nagłówek + akcje itp.). */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin-bottom: var(--pico-spacing); }
.toolbar > * { margin-bottom: 0; }
.toolbar > :is(h1, h2, h3, h4) { margin: 0; }

/* Siatka kolumn: Pico .grid (równe kolumny, od 768 px); .form-grid — pola formularza
   w dwóch kolumnach (.span-2 na całą szerokość); .cols — kolumny o swobodnej szerokości. */
.grid { margin-bottom: var(--pico-spacing); }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 1.5rem; }
@media (min-width: 768px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .form-grid > .span-2, .form-grid > .span-all { grid-column: 1 / -1; }
}
.cols { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-start; margin-bottom: var(--pico-spacing); }
.cols > * { flex: 1 1 18rem; min-width: 0; }
.cols > .col-narrow { flex: 0 1 auto; max-width: 100%; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem 1.5rem; margin-bottom: var(--pico-spacing); }
.cols > .col-third { flex: 1 1 16rem; max-width: 100%; }
@media (min-width: 900px) { .cols > .col-third { flex: 0 0 calc(33.333% - 1rem); } }

/* Karta dla elementów innych niż <article> (formularz, sekcja) — wygląd jak <article> w Pico. */
.card {
  margin-bottom: var(--pico-block-spacing-vertical);
  padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color);
  box-shadow: var(--pico-card-box-shadow);
}
article > :last-child, .card > :last-child { margin-bottom: 0; }
/* Próby wysłania formularza (test formularzy) — zrzut, komunikaty i ocena AI obok siebie. */
.form-attempts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1rem; }
.form-attempts__title { font-size: var(--fs-base); }
.form-attempt h3 { font-size: var(--fs-base); margin-bottom: 0.5rem; }
.form-attempt .tag { white-space: normal; }
.form-attempt pre { white-space: pre-wrap; max-height: 20rem; overflow: auto; }

/* ---- Tag (etykieta statusu) ---------------------------------------------- */
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-bottom: 0.5rem; }
.tag {
  display: inline-flex; align-items: center; gap: 0.25em; max-width: 100%; white-space: normal; overflow-wrap: anywhere; vertical-align: baseline;
  padding: 0.1em 0.6em; border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; line-height: 1.5;
  background: var(--auditer-na-bg); color: var(--auditer-na-text); text-decoration: none;
}
a.tag:hover { text-decoration: underline; }
.tag--info { background: var(--auditer-notchecked-bg); color: var(--auditer-notchecked-text); }
.tag--ok { background: var(--auditer-ok-bg); color: var(--auditer-ok-text); }
.tag--warn { background: var(--auditer-partial-bg); color: var(--auditer-partial-text); }
.tag--fail { background: var(--auditer-fail-bg); color: var(--auditer-fail-text); }

/* ---- Notice (komunikat) — role="status"/"alert" nadaje szablon ---------- */
.notice {
  margin-bottom: var(--pico-spacing); padding: 0.85rem 1.1rem; border-radius: var(--pico-border-radius);
  border: 1px solid var(--auditer-card-border); border-left: 5px solid var(--auditer-notchecked-text);
  background: var(--auditer-card-bg); color: var(--auditer-text-strong);
}
.notice > :last-child { margin-bottom: 0; }
.notice--compact { padding: 0.4rem 0.75rem; }
.notice--info { background: var(--auditer-notchecked-bg); color: var(--auditer-notchecked-text); border-color: transparent; border-left-color: currentColor; }
.notice--ok { background: var(--auditer-ok-bg); color: var(--auditer-ok-text); border-color: transparent; border-left-color: currentColor; }
.notice--warn { background: var(--auditer-partial-bg); color: var(--auditer-partial-text); border-color: transparent; border-left-color: currentColor; }
.notice--fail { background: var(--auditer-fail-bg); color: var(--auditer-fail-text); border-color: transparent; border-left-color: currentColor; }
.notice :is(p, li, strong, code) { color: inherit; }
.notice code { background: transparent; padding: 0; }
.notice a:not([role="button"]) { color: inherit; text-decoration: underline; }

/* Przycisk zamykania (×) poza modalem Pico. */
button.close {
  --pico-background-color: transparent; --pico-border-color: transparent; --pico-color: var(--auditer-text-muted);
  flex: 0 0 auto; width: 2.25rem; height: 2.25rem; padding: 0; font-size: var(--fs-xl); line-height: 1;
}
button.close:is(:hover, :focus) { --pico-background-color: var(--auditer-hover-bg); --pico-color: var(--auditer-text-strong); }

/* Tabele: Pico maluje komórki kolorem tła strony — w kartach i panelach (inne tło) zostają przezroczyste. */
td, th { background-color: transparent; }
table.compact :is(th, td) { padding: 0.35rem 0.6rem; }
table.hover tbody tr:hover :is(td, th) { background-color: var(--auditer-hover-bg); }
table tr.is-selected :is(td, th) { background-color: var(--auditer-notchecked-bg); }

/* Pasek postępu: warianty kolorystyczne. */
progress.ok { --pico-progress-color: var(--auditer-ok-text); }
progress.fail { --pico-progress-color: var(--auditer-fail-text); }
progress.small { height: 0.375rem; }

/* ---- Helpery ------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.muted { color: var(--auditer-text-muted) !important; }
.text-sm { font-size: var(--fs-md); }
.text-lg { font-size: var(--fs-lg); }
.text-xl { font-size: var(--fs-2xl); }
.semibold { font-weight: 600; }
.text-ok { color: var(--auditer-ok-text) !important; }
.text-warn { color: var(--auditer-partial-text) !important; }
.text-fail { color: var(--auditer-fail-text) !important; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.mono { font-family: var(--pico-font-family-monospace); }
.nowrap { white-space: nowrap; }
.inline { display: inline; }
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }      .mb-0 { margin-bottom: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; } .mb-1 { margin-bottom: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }  .mb-2 { margin-bottom: 0.5rem !important; }
.mt-3 { margin-top: 0.75rem !important; } .mb-3 { margin-bottom: 0.75rem !important; }
.mt-4 { margin-top: 1rem !important; }    .mb-4 { margin-bottom: 1rem !important; }
.mt-5 { margin-top: 1.5rem !important; }  .mb-5 { margin-bottom: 1.5rem !important; }
.ml-1 { margin-left: 0.25rem !important; } .ml-2 { margin-left: 0.5rem !important; }
.p-0 { padding: 0 !important; }

/* ---- Układ strony -------------------------------------------------------- */
body > main { padding-top: 1.75rem; padding-bottom: 3rem; }
/* Rytm strony: tytuł → wstęp → treść. Wstęp w wygodnej długości wiersza. */
body > main > :is(h1, hgroup) { margin-bottom: 1rem; }
body > main > .toolbar:has(> h1) { margin-bottom: 1.25rem; }
body > main > h1 + p, body > main > hgroup + p { margin-top: -0.25rem; }
body > main > p:not([class*="notice"]) { max-width: 80ch; }
body > main > .card, body > main > article, body > main > section.card { margin-bottom: 1.5rem; }
.card > :is(h2, h3):first-child, article > :is(h2, h3):first-child { margin-top: 0; }
.page-narrow { max-width: 26rem; margin: 2rem auto; }
.container--wide { max-width: 1760px; padding-inline: clamp(1rem, 2vw, 2rem); }
/* Linki-kafelki i pozycje nawigacji komponentów — bez podkreślenia (Pico podkreśla każdy link). */
:is(.results-tab, .results-criterion, .nav-criterion, .filter-link, .insp-cat, .insp-chip, .insp-item__link, .insp-box,
    .as-req, .as-rail__overview, .as-filter, .as-crit, .as-chip, .shot-thumb, .tag, .app-nav__user, .back-link) { text-decoration: none; }
:is(.results-tab, .results-criterion, .nav-criterion, .filter-link, .insp-cat, .as-req, .as-crit):hover :is(span, strong) { text-decoration: underline; }

/* ---- Menu górne (base.html) ---------------------------------------------
   Pico <nav> z listami; sekcje to rozwijane <details class="dropdown">.
   Granatowy pasek w obu motywach, panele w kolorach kart. Kontrast tekstu
   na pasku ≥ 7:1, opisów ≥ 4.5:1. */
.app-header {
  --nav-bg: #1d2741;
  --nav-border: #2c3961;
  --nav-text: #e9edf7;
  --nav-muted: #aeb8d0;
  --nav-hover: rgba(255, 255, 255, 0.08);
  --nav-accent: #7d95ff;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  box-shadow: 0 1px 8px rgba(10, 16, 35, 0.18);
  color: var(--nav-text);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app-header { --nav-bg: #12171f; --nav-border: #262d38; --nav-hover: rgba(255, 255, 255, 0.06); }
}
:root[data-theme="dark"] .app-header { --nav-bg: #12171f; --nav-border: #262d38; --nav-hover: rgba(255, 255, 255, 0.06); }

.app-nav { min-height: 3.75rem; align-items: center; flex-wrap: wrap; }
.app-nav :focus-visible { outline-color: #b9c7ff; }
.app-nav a, .app-nav summary, .app-nav button { color: var(--nav-text); }

.app-nav__brand { display: inline-flex !important; align-items: center; gap: 0.6rem; text-decoration: none; }
.app-nav__brand:hover { color: #fff; }
.app-nav__logo {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem;
  border-radius: 8px; color: #fff;
  background: linear-gradient(135deg, #5b74f5, #3a4fc4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.app-nav__name { font-weight: 700; font-size: var(--fs-lg); }
.app-nav__tagline {
  font-size: var(--fs-xs); font-weight: 600; color: var(--nav-muted);
  border: 1px solid var(--nav-border); border-radius: 999px; padding: 0.05rem 0.5rem;
}

.app-nav__burger {
  --pico-background-color: transparent; --pico-border-color: var(--nav-border); --pico-color: var(--nav-text);
  display: none; padding: 0.35rem 0.7rem; font-size: var(--fs-md);
}
.app-nav__menu { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.app-nav__menu > ul { gap: 0.15rem; }

/* Sekcje (Audyty / Narzędzia / System) */
.app-nav details.dropdown > summary {
  --pico-form-element-border-color: transparent;
  --pico-form-element-background-color: transparent;
  --pico-form-element-active-background-color: var(--nav-hover);
  --pico-form-element-active-border-color: transparent;
  --pico-form-element-focus-color: transparent;
  color: var(--nav-text); font-weight: 500; border-radius: 8px; background-color: transparent;
}
.app-nav details.dropdown > summary::after { filter: brightness(0) invert(0.85); }
.app-nav details.dropdown > summary:hover,
.app-nav details.dropdown[open] > summary { background-color: var(--nav-hover); color: #fff; }
.app-nav .is-current > details.dropdown > summary { color: #fff; font-weight: 600; box-shadow: inset 0 -2px 0 var(--nav-accent); }
/* Zwykły link w menu (Audyty) — wygląda jak sekcja rozwijana, bez strzałki. */
.app-nav .app-nav__link { display: inline-block; padding: .5rem .85rem; border-radius: 8px; color: var(--nav-text); font-weight: 500; text-decoration: none; }
.app-nav .app-nav__link:hover { background-color: var(--nav-hover); color: #fff; }
.app-nav .is-current > .app-nav__link { color: #fff; font-weight: 600; box-shadow: inset 0 -2px 0 var(--nav-accent); }

/* Rozwijany panel */
.app-nav details.dropdown > summary + ul {
  --pico-dropdown-background-color: var(--auditer-card-bg);
  --pico-dropdown-border-color: var(--auditer-card-border);
  --pico-dropdown-hover-background-color: var(--auditer-hover-bg);
  --pico-dropdown-color: var(--auditer-text-strong);
  min-width: 17rem; padding: 0.4rem; margin-top: 0.35rem; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(10, 16, 35, 0.18);
}
.app-nav details.dropdown > summary + ul li { padding: 0; margin: 0; }
.app-nav details.dropdown > summary + ul li:first-of-type,
.app-nav details.dropdown > summary + ul li:last-of-type { margin: 0; }
.app-nav details.dropdown > summary + ul li a {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem;
  margin: 0; padding: 0.55rem 0.85rem; border-radius: 6px; white-space: normal;
  color: var(--auditer-text-strong);
}
.app-nav details.dropdown > summary + ul li a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--auditer-focus); }
.app-nav details.dropdown > summary + ul li a[aria-current="page"] .app-nav__item-title { font-weight: 700; }
.app-nav details.dropdown > summary + ul li.app-nav__divider { height: 0; border-top: 1px solid var(--auditer-muted-border); margin: 0.3rem 0; }
.app-nav li.app-nav__divider::before { content: none; }
.app-nav__item-title { font-weight: 500; line-height: 1.3; }
.app-nav__item-desc { font-size: var(--fs-sm); color: var(--auditer-text-muted); line-height: 1.3; }

/* Prawa strona: motyw, użytkownik, wylogowanie */
.app-nav__end { gap: 0.35rem; }
.app-nav__end form { margin: 0; }
.app-nav__icon-btn,
.app-nav__logout {
  --pico-background-color: transparent; --pico-border-color: var(--nav-border); --pico-color: var(--nav-text);
  font-size: var(--fs-md); border-radius: 8px;
}
.app-nav__icon-btn:is(:hover, :focus),
.app-nav__logout:is(:hover, :focus) { --pico-background-color: var(--nav-hover); --pico-color: #fff; --pico-border-color: var(--nav-border); }
nav.app-nav li :is(.app-nav__icon-btn, .app-nav__logout) { padding: 0.35rem 0.9rem; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; }
.app-nav__user { display: inline-flex !important; align-items: center; gap: 0.55rem; font-weight: 500; }
.app-nav__user:hover { background: var(--nav-hover); color: #fff; }
.app-nav__avatar {
  display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  font-size: var(--fs-md); font-weight: 700; color: #fff; background: #3a4fc4;
  box-shadow: 0 0 0 2px var(--nav-border);
}

/* ---- Lista audytów roboczych: karta = audyt ze stanem skanu i checklisty ---- */
.work-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1rem; }
.work-header h1 { margin: 0; }
.work-header [role="button"] { margin: 0; white-space: nowrap; }
.work-search { display: block; }
.work-search__form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; max-width: 40rem; margin: 0 0 1.25rem; }
.work-search input { flex: 1 1 16rem; width: auto; min-width: 0; margin: 0; }
.work-search button { margin: 0; }
.work-search__form > a { font-size: var(--fs-md); }
.work-list { display: grid; gap: .6rem; margin: 0; }
.work-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem;
  padding: .9rem 1.1rem; border: 1px solid var(--auditer-card-border); border-radius: 8px; background: var(--auditer-card-bg);
}
.work-card--shared { grid-template-columns: minmax(0, 1fr) auto; }
.work-card:has(.work-card__select input:checked) { border-color: var(--pico-primary); box-shadow: 0 0 0 1px var(--pico-primary); }
.work-card__select input { margin: 0; }
.work-card__title { margin: 0; font-size: var(--fs-base); }
.work-card__title a { text-decoration: none; }
.work-card__title a:hover { text-decoration: underline; }
.work-card__url { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-md); color: var(--auditer-text-muted); }
.work-card__meta, .work-card__owner { margin: .3rem 0 0; color: var(--auditer-text-muted); font-size: var(--fs-md); }
.work-card__scan.is-busy { color: var(--pico-primary); font-weight: 600; }
.work-card__scan.is-fail { color: var(--auditer-fail-text); font-weight: 600; }
.work-card__progress { display: flex; align-items: center; gap: .6rem; margin-top: .4rem; color: var(--auditer-text-muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.work-card__progress progress { flex: 0 0 9rem; height: .4rem; margin: 0; }
.work-card__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.work-card__actions [role="button"] { margin: 0; white-space: nowrap; }
.work-bulk { align-items: center; padding-top: .75rem; }
.work-empty { margin: 0; padding: 1.25rem; border: 1px dashed var(--auditer-card-border); border-radius: 8px; }
.work-empty p { margin: 0 0 .75rem; }
.work-archive { margin-top: 1.75rem; }
.shared-work-section { margin-top: 2.25rem; }
.shared-work-section > h2 { margin: 0 0 .75rem; font-size: var(--fs-lg); }

/* ---- Pulpit audytu: ścieżka pracy, następny krok i sekcje ---- */
.audit-page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; margin: 0 0 1.25rem; }
.audit-page-heading h1 { margin: 0; }
.audit-page-heading__meta { margin: .25rem 0 0; color: var(--auditer-text-muted); font-size: var(--fs-md); }
.audit-page-heading__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.audit-page-heading__actions [role="button"] { margin: 0; }

/* Główna ścieżka pracy: cztery kroki z wyraźnie wskazanym bieżącym etapem. */
.audit-workflow { margin: 0 0 1rem; }
.audit-workflow ol {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--auditer-card-border); border-radius: 10px;
  overflow: hidden; background: var(--auditer-card-bg);
}
.audit-workflow li + li { border-left: 1px solid var(--auditer-muted-border); }
.audit-workflow__step {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr); grid-template-areas: "number label" "number detail";
  align-items: center; gap: .12rem .65rem; height: 100%; min-height: 4.5rem; padding: .65rem .8rem;
  color: var(--auditer-text-strong); text-decoration: none;
}
.audit-workflow__step:hover { background: var(--auditer-hover-bg); }
.audit-workflow__step:focus-visible { outline-offset: -3px; }
.audit-workflow__number {
  grid-area: number; display: grid; place-items: center; width: 1.8rem; height: 1.8rem;
  border: 1px solid var(--auditer-muted-border); border-radius: 50%; font-weight: 700;
}
.audit-workflow__label { grid-area: label; font-weight: 650; }
.audit-workflow__detail { grid-area: detail; color: var(--auditer-text-muted); font-size: var(--fs-sm); }
.audit-workflow__step[data-state="current"] { background: var(--auditer-hover-bg); }
.audit-workflow__step[data-state="current"] .audit-workflow__number,
.audit-workflow__step[data-state="busy"] .audit-workflow__number { border-color: var(--pico-primary); color: var(--pico-primary); }
.audit-workflow__step[data-state="done"] .audit-workflow__number { border-color: var(--auditer-ok-solid); color: var(--auditer-ok-text); }
.audit-next-step {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem;
  margin: 0 0 2rem; padding: 1rem 1.25rem;
  border: 1px solid var(--auditer-card-border); border-left: 4px solid var(--pico-primary);
  border-radius: 10px; background: var(--auditer-card-bg);
}
.audit-next-step h2 { margin: 0 0 .25rem; font-size: var(--fs-lg); }
.audit-next-step p { margin: 0; color: var(--auditer-text-muted); }
.audit-next-step__eyebrow { margin: 0 0 .2rem !important; font-size: var(--fs-sm); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.audit-next-step [role="button"] { flex: 0 0 auto; margin: 0; }
.audit-step-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.audit-step-card [role="button"] { flex: 0 0 auto; margin: 0; }

.audit-section { margin: 0 0 2rem; scroll-margin-top: 1rem; }
.audit-section > h2 { margin: 0 0 .6rem; font-size: var(--fs-lg); }
.audit-section > .card { margin-bottom: 0; }
.audit-section-pair { display: grid; gap: 0 1.5rem; }
@media (min-width: 900px) { .audit-section-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Narzędzia: wiersze z licznikiem po prawej zamiast kart z akapitem opisu. */
.tool-columns { display: grid; gap: 1.25rem 1.5rem; }
@media (min-width: 960px) { .tool-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tool-group-title { margin: 0 0 .5rem; font-size: var(--fs-base); }
.tool-list { margin: 0; border: 1px solid var(--auditer-card-border); border-radius: 10px; overflow: hidden; background: var(--auditer-card-bg); }
.tool-list li + li { border-top: 1px solid var(--auditer-muted-border); }
.tool-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name figure" "desc figure";
  align-items: center; gap: .1rem 1rem; padding: .65rem 1rem; color: inherit; text-decoration: none;
}
.tool-row:hover { background: var(--auditer-hover-bg); }
.tool-row:focus-visible { outline-offset: -3px; }
.tool-row__name { grid-area: name; font-weight: 650; color: var(--pico-primary); }
.tool-row:hover .tool-row__name { text-decoration: underline; }
.tool-row__desc { grid-area: desc; font-size: var(--fs-md); color: var(--auditer-text-muted); }
.tool-row__figure {
  grid-area: figure; padding: .1rem .55rem; border-radius: 999px; white-space: nowrap;
  font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--auditer-na-bg); color: var(--auditer-na-text);
}
.tool-row__figure.is-fail { background: var(--auditer-fail-bg); color: var(--auditer-fail-text); }
.tool-row__figure.is-attention { background: var(--auditer-partial-bg); color: var(--auditer-partial-text); }
.tool-row__figure.is-ok { background: var(--auditer-ok-bg); color: var(--auditer-ok-text); }

@media (max-width: 760px) {
  .work-card { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .work-card--shared { grid-template-columns: minmax(0, 1fr); }
  .work-card__actions { grid-column: -2 / -1; justify-content: flex-start; }
  .work-card__progress progress { flex-basis: 6rem; }
  .audit-workflow ol { grid-template-columns: minmax(0, 1fr); }
  .audit-workflow li + li { border-left: 0; border-top: 1px solid var(--auditer-muted-border); }
  .audit-next-step, .audit-step-card { align-items: flex-start; flex-direction: column; }
}

@media (min-width: 1024px) {
  .app-nav__menu > ul:first-child { margin-left: 0.5rem; }
  /* Na szerokim ekranie tylko ikona — etykieta zostaje dla czytników (nazwa przycisku). */
  nav.app-nav li .app-nav__icon-btn { width: 2.25rem; height: 2.25rem; padding: 0; }
  .theme-toggle__label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}

@media (max-width: 1023px) {
  .app-nav__burger { display: inline-block; margin-left: auto; }
  .app-nav__menu { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; padding: 0.25rem 0 1rem; border-top: 1px solid var(--nav-border); }
  .app-nav__menu.is-open { display: flex; }
  .app-nav__menu > ul { flex-direction: column; align-items: stretch; margin: 0 !important; }
  .app-nav__menu > ul > li { padding: 0.15rem 0; }
  /* Na telefonie panel rozwija się w miejscu, pod nagłówkiem sekcji. */
  .app-nav details.dropdown { display: block; margin: 0; }
  .app-nav details.dropdown > summary { height: auto; }
  .app-nav details.dropdown[open] > summary::before { display: none; }
  .app-nav details.dropdown > summary + ul { position: static; box-shadow: none; margin-top: 0.25rem; }
  .app-nav .is-current > details.dropdown > summary,
  .app-nav .is-current > .app-nav__link { box-shadow: inset 3px 0 0 var(--nav-accent); }
  .app-nav .app-nav__link { display: block; }
  .app-nav__end { flex-direction: row !important; flex-wrap: wrap; align-items: center !important; margin-top: 0.75rem !important; padding-top: 0.75rem; border-top: 1px solid var(--nav-border); }
  .app-nav__end > li:has(.app-nav__user) { order: -1; flex: 1 1 100%; }
}

.status-tag-ok { background-color: var(--auditer-ok-bg); color: var(--auditer-ok-text); }
.status-tag-fail { background-color: var(--auditer-fail-bg); color: var(--auditer-fail-text); }
.status-tag-na { background-color: var(--auditer-na-bg); color: var(--auditer-na-text); }
.status-tag-not-checked { background-color: var(--auditer-notchecked-bg); color: var(--auditer-notchecked-text); }

.finding-card { border-left: 4px solid #dbdbdb; }
.finding-card.impact-critical { border-left-color: #cc0f35; }
.finding-card.impact-serious { border-left-color: #ffa63f; }
.finding-card.impact-moderate { border-left-color: #ffdd57; }
.finding-card.impact-minor { border-left-color: #b5b5b5; }

/* Odnośnik powrotu na górze podstron ("wróć do audytu") — spójny w całej aplikacji,
   zamiast gołego linku tekstowego gubiącego się na stronie. */
.back-link {
  display: inline-flex; align-items: center; gap: 0.35em;
  margin-bottom: 0.4rem; font-size: var(--fs-md); font-weight: 600;
}
/* Link powrotu stoi nad tytułem strony — tytuł bez górnego marginesu, żeby trzymały się razem. */
.back-link + :is(h1, hgroup, .toolbar) { margin-top: 0; }

/* ---- Checklista manualna: karty kryteriów kolorowane wg statusu ---- */
.check-item {
  border: 1px solid var(--auditer-card-border); border-left-width: 5px; border-radius: 6px;
  margin-bottom: 0.75rem; background: var(--auditer-card-bg);
}
.check-item[data-status="compliant"] { border-left-color: var(--auditer-ok-text); }
.check-item[data-status="non_compliant"] { border-left-color: var(--auditer-fail-text); }
.check-item[data-status="partial"] { border-left-color: var(--auditer-partial-text); }
.check-item[data-status="not_applicable"] { border-left-color: var(--auditer-na-text); }
.check-item[data-status="not_checked"] { border-left-color: var(--auditer-notchecked-text); }

.check-item__summary {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.6em;
  padding: 0.85rem 1rem; cursor: pointer; list-style: none;
}
.check-item__summary::-webkit-details-marker { display: none; }
.check-item__summary::before {
  content: "▸"; display: inline-block; color: var(--auditer-text-muted); flex: 0 0 auto;
  transition: transform 0.15s ease;
}
.check-item[open] > .check-item__summary::before { transform: rotate(90deg); }
.check-item__summary:hover { background: var(--auditer-hover-bg); }
.check-item__number { font-weight: 700; color: var(--auditer-text-strong); flex: 0 0 auto; }
.check-item__title { font-weight: 600; flex: 1 1 260px; min-width: 0; }
.check-item__status-label {
  font-size: var(--fs-sm); font-weight: 700; padding: 0.15em 0.6em; border-radius: 999px;
  flex: 0 0 auto;
}
.check-item[data-status="compliant"] .check-item__status-label { background: var(--auditer-ok-bg); color: var(--auditer-ok-text); }
.check-item[data-status="non_compliant"] .check-item__status-label { background: var(--auditer-fail-bg); color: var(--auditer-fail-text); }
.check-item[data-status="partial"] .check-item__status-label { background: var(--auditer-partial-bg); color: var(--auditer-partial-text); }
.check-item[data-status="not_applicable"] .check-item__status-label { background: var(--auditer-na-bg); color: var(--auditer-na-text); }
.check-item[data-status="not_checked"] .check-item__status-label { background: var(--auditer-notchecked-bg); color: var(--auditer-notchecked-text); }
.check-item__body { padding: 0 1rem 1.1rem; border-top: 1px solid var(--auditer-muted-border); }
.check-item__body > *:first-child { margin-top: 0.9rem; }

/* Pasek postępu + filtry na górze checklisty — "przyklejony" do góry, żeby zawsze
   było widać, ile zostało, bez przewijania na sam początek strony. */
.checklist-toolbar {
  position: sticky; top: 0; z-index: 10; background: var(--auditer-card-bg);
  border: 1px solid var(--auditer-muted-border); border-radius: 6px; padding: 0.9rem 1.1rem;
  margin-bottom: 1.5rem; box-shadow: 0 2px 6px var(--auditer-shadow);
}
.checklist-toolbar__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
.checklist-toolbar__counts { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.checklist-toolbar__filters {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem;
  padding-top: 0.75rem; border-top: 1px solid var(--auditer-muted-border);
}
.checklist-toolbar__filters button[aria-pressed="true"] {
  background: #3273dc; color: #fff; border-color: #3273dc;
}
.checklist-toolbar__jump { font-size: var(--fs-md); }
.checklist-toolbar__jump a { margin-right: 0.75rem; }

/* Dashboard projektu: siatka jednolitych kart zamiast długiej kolumny pełnych
   pudełek — mniej przewijania, łatwiej znaleźć właściwe narzędzie. */
.tool-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem; margin-bottom: 1.5rem;
}
.tool-card { display: flex; flex-direction: column; height: 100%; margin-bottom: 0; }
.tool-card > :is(h2, h3) { font-size: var(--fs-base); margin-bottom: 0.5rem; }
.tool-card__stat, .tool-card__stat p { font-size: var(--fs-md); }
.tool-card__stat { flex-grow: 1; }
.tool-card [role="button"] { align-self: flex-start; margin-top: 0.75rem; }
.section-heading { margin-top: 2.25rem !important; margin-bottom: 0.75rem; }
.section-heading:first-of-type { margin-top: 1.5rem !important; }

/* ---- Naruszenia PDF/UA-1: karty w stylu check-item, ale zawsze "otwarte" —
   PdfFinding nie ma stanów compliant/partial jak ManualCheck, każdy wiersz to
   nieprzeszła reguła, więc kolorujemy jednolicie jak check-item[data-status=non_compliant]. */
.pdf-finding {
  border: 1px solid var(--auditer-card-border); border-left-width: 5px;
  border-left-color: var(--auditer-fail-text); border-radius: 6px;
  margin-bottom: 0.75rem; padding: 0.85rem 1rem; background: var(--auditer-card-bg);
}

/* ---- Wyniki "na podstronę" (klawiatura, kontrast, ruch, interakcje, drzewo, zoom) —
   przy kilkunastu podstronach w jednym audycie sama strona wynikowa robiła się
   nieczytelną ścianą w pełni rozwiniętych boksów. Każda podstrona to teraz <details>
   w tym samym stylu co check-item z checklisty: domyślnie otwarte tylko te z czymś
   do przejrzenia (o tym decyduje szablon przez atrybut open), reszta czeka złożona —
   audytor widzi od razu, gdzie jest problem, bez przewijania przez OK-i. Nad nimi kafelki
   podstron (.page-tiles, audits/_tool_page_tile.html) ze stanem każdej i skokiem do niej. */

/* Wiersz z problemem (test klawiaturowy): tło i tekst ze zmiennych statusu. */
table tr.stop-problem > td,
table tr.stop-problem > th {
  background-color: var(--auditer-fail-bg);
  color: var(--auditer-text-strong);
}
table tr.stop-problem a:not([role="button"]) { color: var(--auditer-focus); }

/* ---- Lightbox zrzutów ekranu (base.html, linki z [data-lightbox]) ---- */
.lightbox {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.lightbox::backdrop { background: rgba(0, 0, 0, 0.85); }
.lightbox[open] { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; backdrop-filter: none; }
.lightbox__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  background: var(--auditer-card-bg);
  color: var(--auditer-text-strong);
  border-bottom: 1px solid var(--auditer-card-border);
}
.lightbox__caption { flex: 1; min-width: 0; font-size: var(--fs-md); }
.lightbox__open { white-space: nowrap; font-size: var(--fs-md); }
.lightbox__close {
  font-size: var(--fs-2xl);
  line-height: 1;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: 1px solid var(--auditer-card-border);
  border-radius: 4px;
  color: inherit;
  cursor: pointer;
}
.lightbox__close:focus-visible,
.lightbox__open:focus-visible { outline: 3px solid var(--auditer-focus); outline-offset: 2px; }
.lightbox__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem;
}
.lightbox__body img { max-width: 100%; height: auto; background: #fff; }

/* ---- Checklista WCAG: czytelniejszy układ kryterium ------------------------
   Kryteria domyślnie zwinięte; w środku: treść kryterium -> wyniki automatu
   pogrupowane po regule (jeden problem = jedna zwijana sekcja) -> ocena audytora. */
.checklist-howto { max-width: 70rem; margin: 0.75rem 0 1rem; color: var(--auditer-text-muted); }
.checklist-toolbar__progress { min-width: 14rem; }
.checklist-toolbar__progress progress { max-width: 16rem; margin-top: 0.25rem; }
.checklist-toolbar__row--controls {
  margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--auditer-muted-border);
}
.checklist-toolbar__row--controls .checklist-toolbar__filters { margin-top: 0; padding-top: 0; border-top: 0; }
.checklist-toolbar__expand { display: flex; gap: 0.25rem; }
.checklist-toolbar__jump { font-size: var(--fs-md); margin-top: 0.5rem; }
.guideline-heading { font-weight: 600; color: var(--auditer-text-muted); margin: 1.25rem 0 0.5rem; }

.check-item--unmatched { border-left-color: var(--auditer-fail-text); margin-bottom: 1.5rem; }

/* Plakietka "automat: N problemów" w nagłówku kryterium — kolor wg najpoważniejszej wagi. */
.findings-badge {
  font-size: var(--fs-sm); padding: 0.15rem 0.55rem; border-radius: 999px; white-space: nowrap;
  background: var(--auditer-na-bg); color: var(--auditer-na-text);
}
.findings-badge--critical, .findings-badge--serious { background: var(--auditer-fail-bg); color: var(--auditer-fail-text); }
.findings-badge--moderate { background: var(--auditer-partial-bg); color: var(--auditer-partial-text); }

.criterion-text { font-size: var(--fs-md); color: var(--auditer-text-muted); margin-bottom: 1rem; }
.criterion-text p { margin-bottom: 0.25rem; }
.criterion-text details > summary { cursor: pointer; }
.criterion-text details[open] > summary { display: none; }
.criterion-text__label { font-weight: 600; color: var(--auditer-text-strong); }
.criterion-text__more { color: var(--auditer-focus); text-decoration: underline; white-space: nowrap; }
.criterion-text__link { font-size: var(--fs-sm); }

.block-heading {
  font-size: var(--fs-md); font-weight: 700; color: var(--auditer-text-strong);
  margin: 0 0 0.5rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem;
}
.block-heading__hint { font-size: var(--fs-sm); font-weight: 400; color: var(--auditer-text-muted); }

.auto-results { margin-bottom: 1.25rem; }
.auto-results--empty { font-size: var(--fs-md); color: var(--auditer-text-muted); }

/* Jeden problem (reguła) — zwijany wiersz z wagą, tytułem i liczbą wystąpień. */
.rule-section {
  border: 1px solid var(--auditer-card-border); border-left: 4px solid var(--auditer-na-text);
  border-radius: 6px; margin-bottom: 0.5rem; background: var(--auditer-card-bg);
}
.rule-section--critical, .rule-section--serious { border-left-color: var(--auditer-fail-text); }
.rule-section--moderate { border-left-color: var(--auditer-partial-text); }
.rule-section__summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem;
  padding: 0.6rem 0.85rem; cursor: pointer; list-style: none;
}
.rule-section__summary::-webkit-details-marker { display: none; }
.rule-section__summary::before { content: "▸"; color: var(--auditer-text-muted); }
.rule-section[open] > .rule-section__summary::before { content: "▾"; }
.rule-section__summary:hover { background: var(--auditer-hover-bg); }
.rule-section__title { flex: 1 1 18rem; min-width: 0; font-weight: 600; color: var(--auditer-text-strong); }
.rule-section__meta { font-size: var(--fs-sm); color: var(--auditer-text-muted); }
.rule-section__body { padding: 0 0.85rem 0.85rem; border-top: 1px solid var(--auditer-muted-border); }
.rule-section__ref { font-size: var(--fs-sm); color: var(--auditer-text-muted); margin: 0.6rem 0; }

.impact-pill { font-size: var(--fs-xs); font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.02em; }
.impact-pill--critical, .impact-pill--serious { background: var(--auditer-fail-bg); color: var(--auditer-fail-text); }
.impact-pill--moderate { background: var(--auditer-partial-bg); color: var(--auditer-partial-text); }
.impact-pill--minor, .impact-pill--unrated { background: var(--auditer-na-bg); color: var(--auditer-na-text); }

/* Wystąpienie: opis po lewej, miniatura zrzutu (lightbox) po prawej; na wąskim ekranie pod spodem. */
.occurrence {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 0.75rem 0; border-top: 1px dashed var(--auditer-muted-border);
}
.rule-section__ref + .occurrence { border-top: 0; }
.occurrence__main { flex: 1 1 auto; min-width: 0; }
.occurrence__where { margin-bottom: 0.25rem; }
.occurrence__page { font-weight: 600; word-break: break-all; }
.occurrence__desc { font-size: var(--fs-md); margin-bottom: 0.25rem; }
.occurrence__selector code {
  display: block; font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--auditer-hover-bg); color: var(--auditer-text-muted); padding: 0.2rem 0.4rem;
}
.occurrence__more { margin-top: 0.4rem; font-size: var(--fs-md); }
.occurrence__more > summary { cursor: pointer; color: var(--auditer-focus); width: fit-content; }
.occurrence__code { white-space: pre-wrap; font-size: var(--fs-xs); margin-top: 0.35rem; max-height: 16rem; overflow: auto; }
.occurrence__list { margin: 0.35rem 0 0 1rem; list-style: disc; font-size: var(--fs-sm); }
.occurrence__list code { font-size: var(--fs-xs); word-break: break-all; }
.occurrence__shot { flex: 0 0 auto; }
@media (max-width: 640px) {
  .occurrence { flex-direction: column; }
  .occurrence__shot { width: 10rem; }
}
.group-global { margin-top: 0.5rem; }

/* Odrzucanie wyników automatu jako fałszywych alarmów. */
.dismiss-form input { max-width: 32rem; display: block; }
.dismiss-form small { color: var(--auditer-text-muted); }
.dismissed-note { font-size: var(--fs-md); margin: 0.5rem 0 !important; }
.dismissed-note form { display: inline; }
.dismissed-list { margin-top: 0.75rem; font-size: var(--fs-md); }
.dismissed-list > summary { cursor: pointer; color: var(--auditer-text-muted); width: fit-content; }
.dismissed-list ul { margin: 0.35rem 0 0 1rem; padding-left: 0; }
.dismissed-list form { display: inline; }
.assessment__warning {
  display: block; margin-top: 0.35rem; padding: 0.3rem 0.6rem; border-radius: 4px; font-size: var(--fs-md);
  background: var(--auditer-partial-bg); color: var(--auditer-partial-text);
}
.check-item__conflict {
  font-size: var(--fs-xs); padding: 0.1rem 0.45rem; border-radius: 4px;
  background: var(--auditer-partial-bg); color: var(--auditer-partial-text);
}
.group-global--on { padding: 0.6rem 0.75rem; border-radius: 6px; background: var(--auditer-ok-bg); }

/* Ocena audytora — wyraźnie oddzielona od wyników automatu. */
.assessment {
  border: 1px solid var(--auditer-card-border); border-radius: 6px;
  padding: 0.9rem 1rem; background: var(--auditer-hover-bg);
}
.assessment__grid { display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); gap: 0.75rem 1rem; }
@media (max-width: 640px) { .assessment__grid { grid-template-columns: minmax(0, 1fr); } }
.assessment textarea { min-width: 0; }
.assessment__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.75rem; }
.rule-section__desc { font-size: var(--fs-md); margin: 0.6rem 0 0; }
/* Pola w checkliście mają box-sizing: content-box, więc padding wypychał je poza kartę. */
.check-item textarea, .check-item select { box-sizing: border-box; max-width: 100%; }
.check-item select { width: 100%; }
/* Na telefonie przyklejony pasek zajmowałby ~40% ekranu — tam przewija się z treścią. */
@media (max-width: 768px) { .checklist-toolbar { position: static; } }

/* ---- Miniatury zrzutów (templates/_shot_thumb.html): kwadrat + podpis, klik = lightbox ---- */
.shot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.9rem; }
.shot-grid .shot-thumb { width: auto; }
.shot-thumb {
  display: inline-flex; flex-direction: column; gap: 0.35rem; width: 10rem; max-width: 100%;
  color: var(--auditer-text-strong); text-decoration: none; vertical-align: top;
}
.shot-thumb--sm { width: 6.5rem; }
.shot-thumb__frame {
  display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 6px;
  border: 1px solid var(--auditer-card-border); background: var(--auditer-hover-bg);
  transition: box-shadow 0.15s, border-color 0.15s;
}
.shot-thumb__frame img {
  display: block; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: top center; cursor: zoom-in;
}
.shot-thumb--contain .shot-thumb__frame { background: #fff; }
.shot-thumb--contain .shot-thumb__frame img { object-fit: contain; object-position: center; padding: 0.25rem; }
.shot-thumb:hover .shot-thumb__frame { border-color: var(--auditer-focus); box-shadow: 0 2px 8px var(--auditer-shadow); }
.shot-thumb:focus-visible { outline: none; }
.shot-thumb:focus-visible .shot-thumb__frame { outline: 3px solid var(--auditer-focus); outline-offset: 2px; }
.shot-thumb__caption {
  font-size: var(--fs-sm); line-height: 1.3; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.shot-thumb:hover .shot-thumb__caption { text-decoration: underline; }
.shot-thumb--sm .shot-thumb__caption { font-size: var(--fs-xs); }

/* Prosty edytor z pogrubieniem (static/js/rich-text.js). */
.rich-text__toolbar { display: flex; gap: 0.25rem; margin-bottom: 0.25rem; }
.rich-text__btn {
  --pico-background-color: var(--auditer-card-bg); --pico-border-color: var(--auditer-card-border); --pico-color: var(--auditer-text-strong);
  min-width: 2rem; height: 1.8rem; padding: 0 0.5rem; font-size: var(--fs-md); line-height: 1;
}
.rich-text__btn:is(:hover, :focus) { --pico-background-color: var(--auditer-hover-bg); --pico-border-color: var(--auditer-card-border); --pico-color: var(--auditer-text-strong); }
.rich-text__btn.is-active { --pico-background-color: var(--auditer-notchecked-bg); --pico-border-color: var(--auditer-focus); }
.rich-text__btn:focus-visible { outline: 2px solid var(--auditer-focus); outline-offset: 2px; }
.rich-text__editor {
  height: auto; max-height: 24rem; overflow-y: auto; white-space: pre-wrap; word-break: break-word;
  margin-bottom: var(--pico-spacing); padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
  border: var(--pico-border-width) solid var(--pico-form-element-border-color); border-radius: var(--pico-border-radius);
  background: var(--pico-form-element-background-color); color: var(--pico-form-element-color);
}
.rich-text__editor:focus { border-color: var(--pico-form-element-active-border-color); box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color); outline: 0; }
.rich-text__editor:empty::before { content: attr(data-placeholder); color: var(--auditer-text-muted); }

/* Procedura testowa przy kryterium (wcag.procedures). */
.procedure {
  margin-bottom: 0.9rem; padding: 0.5rem 0.75rem; border-radius: 6px;
  background: var(--auditer-card-bg); border: 1px dashed var(--auditer-card-border);
}
.procedure__summary { cursor: pointer; font-weight: 600; font-size: var(--fs-md); }
.procedure__count { font-weight: 400; font-size: var(--fs-sm); margin-left: 0.4rem; color: var(--auditer-text-muted); }
.procedure__steps { margin: 0.5rem 0 0; }
.procedure__steps li { margin-bottom: 0.35rem; font-size: var(--fs-md); }
.procedure__steps label { display: flex; gap: 0.5rem; align-items: flex-start; }
.procedure__steps input { margin-top: 0.25rem; flex: 0 0 auto; }
.procedure__pitfalls-title { margin-top: 0.6rem; font-size: var(--fs-sm); font-weight: 600; color: var(--auditer-partial-text); }
.procedure__pitfalls { margin: 0.2rem 0 0 1.1rem; list-style: disc; font-size: var(--fs-md); }

.assessment__pages { border: 0; padding: 0; margin: 0; }
.assessment__pages label { display: inline-flex; gap: 0.35rem; margin-right: 1rem; font-size: var(--fs-md); }
.assessment__autosave-hint { font-size: var(--fs-sm); color: var(--auditer-text-muted); }
.assessment__saving { font-size: var(--fs-sm); color: var(--auditer-text-muted); }

/* Dowody audytora (zrzuty ekranu przy ocenie). */
.evidence { margin-top: 0.9rem; }
.evidence[aria-busy="true"] { opacity: 0.6; }
.evidence__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.75rem; margin-bottom: 0.75rem; }
.evidence__item { border: 1px solid var(--auditer-card-border); border-radius: 6px; padding: 0.5rem; background: var(--auditer-card-bg); }
.evidence__thumb img { display: block; width: 100%; max-height: 10rem; object-fit: contain; background: var(--auditer-hover-bg); }
.evidence__meta { margin-top: 0.4rem; display: grid; gap: 0.35rem; }
.evidence__meta label { margin-bottom: 0; font-weight: 400; }
.evidence__upload { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.evidence__upload > * { width: auto; margin-bottom: 0; }
.evidence__upload .evidence__caption { max-width: 20rem; }
.evidence__upload small { flex-basis: 100%; margin-top: 0; color: var(--auditer-text-muted); }

/* Porównanie skanów. */
.diff-stats { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.diff-stat { padding: 0.5rem 0.9rem; border-radius: 6px; background: var(--auditer-na-bg); color: var(--auditer-na-text); }
.diff-stat--fixed { background: var(--auditer-ok-bg); color: var(--auditer-ok-text); }
.diff-stat--new { background: var(--auditer-fail-bg); color: var(--auditer-fail-text); }
.rich-text__source { display: none !important; }
.rich-text { min-width: 0; width: 100%; }
.rich-text__editor { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; }

/* Biblioteka tekstów (TextSnippet). */
.field-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.field-head label { margin-bottom: 0.25rem !important; }
/* Modale w układzie Pico: <dialog><article><header>tytuł + .close</header>…</article></dialog>.
   Tło i wyśrodkowanie daje Pico; nagłówek przyklejony, żeby zamknięcie było zawsze pod ręką. */
dialog > article > header {
  position: sticky; top: calc(var(--pico-block-spacing-vertical) * -1); z-index: 1;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
}
dialog > article > header :is(h2, h3) { font-size: var(--fs-lg); }
dialog > article > header .close { flex: 0 0 auto; float: none; margin: 0.3rem 0 0; }
.library-dialog > article { max-width: 46rem; }
.library-dialog__subtitle { display: block; font-size: var(--fs-md); font-weight: 400; color: var(--auditer-text-muted); margin-top: 0.2rem; }
.library-dialog__section { font-size: var(--fs-md); font-weight: 600; margin: 0.6rem 0 0.4rem; }
.library-items { margin-bottom: 0.75rem; }
.library-item { padding: 0.6rem 0.75rem; border: 1px solid var(--auditer-card-border); border-radius: 6px; margin-bottom: 0.5rem; }
.library-item__title { font-weight: 600; margin-bottom: 0.25rem; }
.library-item__body { font-size: var(--fs-md); margin-bottom: 0.5rem; max-height: 9rem; overflow-y: auto; }
.library-save-wrap > summary { cursor: pointer; color: var(--auditer-focus); width: fit-content; font-size: var(--fs-md); }
.library-save { display: grid; gap: 0.5rem; margin-top: 0.5rem; max-width: 30rem; }
.library-save label { font-weight: 400; margin-bottom: 0; }
.library-save__scope { border: 0; padding: 0; margin: 0; }
.library-save__scope label { display: block; margin: 0.15rem 0 0 !important; font-size: var(--fs-md); }
.library-filter > input[type="search"] { flex: 1 1 20rem; }
.library-filter > select { flex: 0 1 14rem; }
.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.library-card { margin-bottom: 0 !important; }
.library-card__meta { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-bottom: 0.5rem; }
.library-card__delete > summary { list-style: none; }
.library-card__delete > summary::-webkit-details-marker { display: none; }

.check-item--highlight { box-shadow: 0 0 0 3px var(--auditer-focus); transition: box-shadow 0.3s; }
kbd {
  font-size: 0.75em; padding: 0.05rem 0.35rem; border-radius: 3px;
  border: 1px solid var(--auditer-card-border); background: var(--auditer-hover-bg); color: var(--auditer-text-strong);
}

/* Okno "Braki w raporcie" i pasek "następny brak". */
.readiness__summary { margin-bottom: 0.9rem; }
.readiness__ok { color: var(--auditer-ok-text); font-weight: 600; }
.readiness__section { border-left: 4px solid var(--auditer-card-border); padding: 0.4rem 0 0.4rem 0.8rem; margin-bottom: 0.9rem; }
.readiness__section--error { border-left-color: var(--auditer-fail-text); }
.readiness__section--warning { border-left-color: var(--auditer-partial-text); }
.readiness__title { font-size: var(--fs-md); font-weight: 600; margin-bottom: 0.2rem; }
.readiness__badge { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.03em; padding: 0.05rem 0.4rem; border-radius: 3px; margin-right: 0.3rem; vertical-align: middle; }
.readiness__section--error .readiness__badge { background: var(--auditer-fail-bg); color: var(--auditer-fail-text); }
.readiness__section--warning .readiness__badge { background: var(--auditer-partial-bg); color: var(--auditer-partial-text); }
.readiness__hint { font-size: var(--fs-md); color: var(--auditer-text-muted); margin-bottom: 0.35rem; }
.readiness__items { margin-left: 1.1rem; list-style: disc; font-size: var(--fs-md); }
.readiness__detail { color: var(--auditer-text-muted); font-size: var(--fs-md); }
.readiness__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 1.2rem; padding-top: 0.9rem; border-top: 1px solid var(--auditer-muted-border); }
.readiness__progress { font-size: var(--fs-md); color: var(--auditer-text-muted); }
.readiness-nav {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 30;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; max-width: calc(100vw - 2rem);
  padding: 0.6rem 0.9rem; border-radius: 8px; box-shadow: 0 4px 18px var(--auditer-shadow);
  background: var(--auditer-card-bg); border: 1px solid var(--auditer-card-border);
}
.readiness-nav__pos { font-size: var(--fs-md); max-width: 28rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Raporty PDF generowane w tle (reports/_jobs.html) — prawy dolny róg, na każdej stronie. */
.report-jobs { position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 40; width: min(22rem, calc(100vw - 2rem)); display: flex; flex-direction: column; gap: 0.5rem; }
.report-jobs:empty { display: none; }
.report-jobs__item { margin-bottom: 0 !important; padding: 0.75rem 2.25rem 0.75rem 1rem; box-shadow: 0 4px 18px var(--auditer-shadow); font-size: var(--fs-md); }
.report-jobs__item progress { margin: 0.5rem 0 0; }
.report-jobs__project { font-weight: 600; }

/* Strona dla klienta (reports/client_report.html). */
.client-header { padding-bottom: 0; }
.client-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; }
.client-summary__label { font-size: var(--fs-md); color: var(--auditer-text-muted); }
.client-summary__value { font-size: var(--fs-2xl); font-weight: 700; }
.client-filter { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; border: 0; padding: 0; }
.client-filter legend { float: left; margin-right: 0.5rem; }
.client-issue--fixed { border-left: 4px solid var(--auditer-ok-text); }
.client-issue__meta { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin-bottom: 0.75rem; }
.client-issue__meta dt { font-weight: 600; }
.client-issue__meta dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.client-issue__pages { margin: 0; list-style: none; }
.client-issue__code { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 20rem; overflow: auto; font-size: var(--fs-sm); }
.client-issue__shot { max-width: 100%; border: 1px solid var(--auditer-card-border); }
.client-issue__form { border-top: 1px solid var(--auditer-muted-border); padding-top: 0.75rem; margin-top: 0.75rem; }
.client-issue__saved { display: inline-block; margin-left: 0.5rem; }
@media (max-width: 30rem) { .client-issue__meta { grid-template-columns: 1fr; } }
.client-issue.is-filtered-out { display: none !important; }

/* Ramka "Dostęp do audytu" (audits/_members_box.html). */
.members-list { list-style: none; margin: 0; }
.members-list li { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding: 0.35rem 0; border-bottom: 1px solid var(--auditer-muted-border); }
.members-list li form { margin-left: auto; }
.members-add { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.members-add > label { margin-bottom: 0; }
.members-add :is(select, button) { margin: 0.25rem 0 0; }

/* ---- Checklista, wersja uproszczona: filtry = liczniki statusów, karta w 3 krokach,
   ocena jako przyciski ze słowami (zamiast selecta i symboli ✓ ✗ ½ obok karty). */
.checklist-toolbar__main-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.checklist-toolbar__main-actions kbd { margin-left: 0.4rem; }
.checklist-toolbar__label { font-size: var(--fs-md); color: var(--auditer-text-muted); }
.checklist-toolbar__filters { align-items: center; }
.filter-chip {
  font: inherit; font-size: var(--fs-md); cursor: pointer; padding: 0.25rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--auditer-card-border); background: var(--auditer-card-bg); color: var(--auditer-text-strong);
}
.filter-chip span { font-weight: 700; margin-left: 0.2rem; }
.filter-chip:hover { background: var(--auditer-hover-bg); }
.filter-chip:focus-visible { outline: 2px solid var(--auditer-focus); outline-offset: 2px; }
.filter-chip--compliant span { color: var(--auditer-ok-text); }
.filter-chip--non_compliant span { color: var(--auditer-fail-text); }
.filter-chip--not_applicable span { color: var(--auditer-na-text); }
.filter-chip--not_checked span { color: var(--auditer-notchecked-text); }
.filter-chip.is-active { background: #3273dc; border-color: #3273dc; color: #fff; }
.filter-chip.is-active span { color: #fff; }
.checklist-toolbar__more { margin-top: 0.5rem; font-size: var(--fs-md); }
.checklist-toolbar__more > summary { cursor: pointer; color: var(--auditer-text-muted); width: fit-content; }
.checklist-toolbar__more-body { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin-top: 0.4rem; }

.check-step { padding: 0.9rem 0; border-top: 1px solid var(--auditer-muted-border); }
.check-item__body > .check-step:first-child { border-top: 0; }
.check-step__title { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; margin-bottom: 0.6rem; color: var(--auditer-text-strong); }
.check-step__no {
  display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem;
  border-radius: 50%; background: #3273dc; color: #fff; font-size: var(--fs-sm); flex: 0 0 auto;
}
.check-step__hint { font-size: var(--fs-md); color: var(--auditer-text-muted); margin-bottom: 0.6rem; }
.criterion-text { color: var(--auditer-text-strong); font-size: var(--fs-md); margin-bottom: 0.75rem; }
.procedure__summary { margin-bottom: 0; }
.procedure__pitfalls-box { margin-top: 0.5rem; font-size: var(--fs-md); }
.procedure__pitfalls-box > summary { cursor: pointer; color: var(--auditer-partial-text); font-weight: 600; width: fit-content; }

.status-choice { display: flex; flex-wrap: wrap; gap: 0.4rem; border: 0; padding: 0; margin: 0 0 0.9rem; }
.status-choice__option {
  display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; font-weight: 600; font-size: var(--fs-md);
  padding: 0.4rem 0.85rem; border-radius: 6px; border: 2px solid var(--auditer-card-border);
  background: var(--auditer-card-bg); color: var(--auditer-text-strong);
}
.status-choice__option:hover { background: var(--auditer-hover-bg); }
.status-choice__option:has(input:focus-visible) { outline: 2px solid var(--auditer-focus); outline-offset: 2px; }
.status-choice__option--not_checked { order: 5; font-weight: 400; font-size: var(--fs-sm); border-style: dashed; color: var(--auditer-text-muted); }
.status-choice__option--compliant:has(input:checked) { background: var(--auditer-ok-bg); color: var(--auditer-ok-text); border-color: currentColor; }
.status-choice__option--non_compliant:has(input:checked) { background: var(--auditer-fail-bg); color: var(--auditer-fail-text); border-color: currentColor; }
.status-choice__option--not_applicable:has(input:checked) { background: var(--auditer-na-bg); color: var(--auditer-na-text); border-color: currentColor; }
.status-choice__option--not_checked:has(input:checked) { background: var(--auditer-notchecked-bg); color: var(--auditer-notchecked-text); border-color: currentColor; }
.field-head__tools { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.assessment__recommendation.is-collapsed { display: none !important; }
.assessment__pages > summary, .evidence-box > summary { cursor: pointer; font-size: var(--fs-md); font-weight: 600; width: fit-content; }
.assessment__pages label { margin-top: 0.4rem; }
.assessment__save { margin-left: auto; }
.evidence-box { margin-top: 0.75rem; }
.evidence-box > .evidence { margin-top: 0.5rem; }

/* Akcje przy wystąpieniu wyniku automatu — w jednym wierszu; rozwinięta zajmuje całą szerokość. */
.occurrence__actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 1.1rem; margin-top: 0.3rem; font-size: var(--fs-md); }
.occurrence__actions > .occurrence__more { margin-top: 0; }
.occurrence__actions > details[open], .occurrence__actions > .group-global--on { flex-basis: 100%; }
.occurrence__actions.rule-section__ref { margin: 0.6rem 0; }
.occurrence__link {
  font: inherit; font-size: var(--fs-md); padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--auditer-focus);
}
.occurrence__link:hover { text-decoration: underline; }
.occurrence__hint { font-size: var(--fs-md); color: var(--auditer-text-muted); }

/* ---- Podgląd czytnika ekranu (audits/accessibility_tree.html). */
.sr-tabs__list { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 1px solid var(--auditer-muted-border); margin-bottom: 0.75rem; }
.sr-tabs__list [role="tab"] {
  font: inherit; font-size: var(--fs-md); cursor: pointer; padding: 0.4rem 0.8rem; margin-bottom: -1px;
  border: 1px solid transparent; border-radius: 6px 6px 0 0; background: none; color: var(--auditer-text-muted);
}
.sr-tabs__list [role="tab"]:hover { color: var(--auditer-text-strong); background: var(--auditer-hover-bg); }
.sr-tabs__list [role="tab"][aria-selected="true"] {
  color: var(--auditer-text-strong); font-weight: 600; background: var(--auditer-card-bg);
  border-color: var(--auditer-muted-border); border-bottom-color: var(--auditer-card-bg);
}
.sr-tabs__list [role="tab"]:focus-visible { outline: 2px solid var(--auditer-focus); outline-offset: 2px; }
.sr-panel__hint { font-size: var(--fs-md); color: var(--auditer-text-muted); margin-bottom: 0.5rem; }
.sr-read { list-style: none; margin: 0; max-height: 36rem; overflow: auto; font-size: var(--fs-md); }
.sr-read__line, .sr-outline li {
  padding: 0.2rem 0.5rem 0.2rem calc(0.5rem + var(--sr-depth, 0) * 1.1rem); border-left: 3px solid transparent;
}
.sr-read__line--banner, .sr-read__line--navigation, .sr-read__line--main, .sr-read__line--contentinfo,
.sr-read__line--complementary, .sr-read__line--search, .sr-read__line--form, .sr-read__line--region {
  color: var(--auditer-text-muted); font-style: italic;
}
.sr-read__line--heading { font-weight: 700; color: var(--auditer-text-strong); }
.sr-read__line--link .sr-read__text, .sr-read__line--button .sr-read__text { color: var(--auditer-focus); }
.sr-read__line--error { border-left-color: var(--auditer-fail-text); background: var(--auditer-fail-bg); }
.sr-read__line--warning { border-left-color: var(--auditer-partial-text); background: var(--auditer-partial-bg); }
.sr-read__issue { display: block; font-size: var(--fs-sm); font-style: normal; font-weight: 400; color: var(--auditer-text-strong); }
.sr-outline { list-style: none; margin: 0; font-size: var(--fs-md); }
.sr-outline__level { display: inline-block; min-width: 2rem; font-weight: 700; font-size: var(--fs-sm); color: var(--auditer-text-muted); }
.sr-links { font-size: var(--fs-md); }
.sr-links__url { word-break: break-all; color: var(--auditer-text-muted); font-size: var(--fs-sm); }

/* ---- Koszyki wyników automatu i mapa pokrycia w checkliście. */
.auto-basket__title { font-weight: 700; font-size: var(--fs-md); margin: 0.9rem 0 0.25rem; }
.auto-basket__title--violations { color: var(--auditer-fail-text); }
.auto-basket__title--review { color: var(--auditer-partial-text); }
.findings-badge--review { background: var(--auditer-partial-bg); color: var(--auditer-partial-text); }
.filter-chip--review span { color: var(--auditer-partial-text); }
.confirm-form { display: inline; }
.check-item--review { border-left-color: var(--auditer-partial-text); }
.coverage { font-size: var(--fs-md); color: var(--auditer-text-muted); margin-bottom: 0.6rem; }
.coverage > summary { cursor: pointer; width: fit-content; }
.coverage--none { font-weight: 600; color: var(--auditer-text-strong); }
.coverage__body { margin-top: 0.4rem; padding-left: 0.8rem; border-left: 3px solid var(--auditer-muted-border); }
.coverage__engine { font-weight: 600; color: var(--auditer-text-strong); margin: 0.4rem 0 0.1rem; }
.coverage__body ul { margin: 0 0 0 1.1rem; padding-left: 0; }
.coverage__body code { font-size: var(--fs-xs); }

/* ---- Podpowiedź oceny (audits/suggestions.py). */
.suggestion {
  border: 1px solid var(--auditer-focus); border-left-width: 4px; border-radius: 6px;
  padding: 0.6rem 0.8rem; margin-bottom: 0.8rem; background: var(--auditer-card-bg); font-size: var(--fs-md);
}
.suggestion p { margin-bottom: 0.3rem; }
.suggestion__label { font-weight: 600; color: var(--auditer-focus); }
.suggestion__hint { font-size: var(--fs-sm); color: var(--auditer-text-muted); }
.findings-badge--suggestion { background: var(--auditer-hover-bg); color: var(--auditer-focus); border: 1px dashed var(--auditer-focus); }
.filter-chip--suggestion span { color: var(--auditer-focus); }

/* ---- Kolejka weryfikacji (audits/verify_queue.html). */
.vq-bar {
  position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: center;
  padding: 0.6rem 1rem; margin-bottom: 1rem; border: 1px solid var(--auditer-muted-border); border-radius: 6px;
  background: var(--auditer-card-bg); box-shadow: 0 2px 6px var(--auditer-shadow);
}
.vq-bar__keys { font-size: var(--fs-md); color: var(--auditer-text-muted); }
.vq-bar__toggle { display: inline-flex; gap: 0.4rem; align-items: center; margin: 0 0 0 auto; font-size: var(--fs-md); }
.vq-bar__toggle input { margin: 0; }
.vq-rule { margin-bottom: 1.5rem; }
.vq-rule__title { margin-bottom: 0.3rem !important; }
.vq-rule__count { font-size: var(--fs-md); font-weight: 400; color: var(--auditer-text-muted); }
.vq-rule__desc { font-size: var(--fs-md); color: var(--auditer-text-muted); margin-bottom: 0.4rem; }
.vq-rule__bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 0.6rem; font-size: var(--fs-md); }
.vq-rule__bulk form { margin: 0; }
.vq-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: 1rem; align-items: start;
  border: 1px solid var(--auditer-card-border); border-left: 5px solid var(--auditer-partial-text); border-radius: 6px;
  padding: 0.8rem 1rem; margin-bottom: 0.75rem; background: var(--auditer-card-bg); box-shadow: none;
}
.vq-card:focus { outline: 3px solid var(--auditer-focus); outline-offset: 2px; }
@media (max-width: 800px) { .vq-card { grid-template-columns: minmax(0, 1fr); } }
.vq-card__where { margin-bottom: 0.3rem; display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; align-items: center; }
.vq-card__desc { font-size: var(--fs-md); margin-bottom: 0.4rem; }
.vq-card__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; align-items: center; }
.vq-card__actions .vq-agree { margin-bottom: 0; }
.vq-dismiss { display: flex; gap: 0.4rem; align-items: center; }
.vq-dismiss input { width: 16rem; max-width: 100%; margin: 0; }
.vq-card__shot img { display: block; max-width: 100%; max-height: 16rem; border: 1px solid var(--auditer-muted-border); border-radius: 4px; background: #fff; }
.vq-card__noshot { font-size: var(--fs-md); color: var(--auditer-text-muted); }
.vq-ai { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
.vq-ai form { margin: 0; }
.vq-ai__note { font-size: var(--fs-md); color: var(--auditer-text-muted); }
.vq-verdict {
  font-size: var(--fs-md); margin-bottom: 0.4rem; padding: 0.35rem 0.6rem; border-radius: 4px;
  border-left: 4px solid var(--auditer-muted-border); background: var(--auditer-hover-bg);
}
.vq-verdict--violation { border-left-color: var(--auditer-fail-text); }
.vq-verdict--violation strong { color: var(--auditer-fail-text); }
.vq-verdict--false_positive { border-left-color: var(--auditer-ok-text); }
.vq-verdict--false_positive strong { color: var(--auditer-ok-text); }

/* ---- Ponowny audyt (audits/reaudit.py). */
.reaudit-banner {
  border: 1px solid var(--auditer-ok-text); border-left-width: 5px; border-radius: 6px;
  padding: 0.6rem 0.9rem; margin-bottom: 1.25rem; background: var(--auditer-card-bg); font-size: var(--fs-md);
}
.reaudit-banner p { margin-bottom: 0.2rem; }
.reaudit-banner__warn { color: var(--auditer-partial-text); font-size: var(--fs-md); }
.findings-badge--fixed { background: var(--auditer-ok-bg); color: var(--auditer-ok-text); }
.findings-badge--new { background: var(--auditer-fail-bg); color: var(--auditer-fail-text); }
.filter-chip--fixed span { color: var(--auditer-ok-text); }
.suggestion--recheck { border-color: var(--auditer-ok-text); }
.suggestion--recheck .suggestion__label { color: var(--auditer-ok-text); }
.suggestion__why { margin: 0.2rem 0 0.4rem; font-size: var(--fs-md); }
.suggestion__why summary { font-size: var(--fs-md); }
.suggestion--ai-other { border-style: dashed; background: transparent; }
.ai-draft-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 0.75rem; }
.ai-draft-bar__text { flex: 1 1 24rem; margin: 0; }
.ai-draft-bar__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ai-draft-bar__actions form { margin: 0; }
.ai-draft-bar__actions button { margin: 0; }
.changes-list { margin-top: 0.6rem; font-size: var(--fs-md); }
.changes-list > summary { cursor: pointer; width: fit-content; font-weight: 600; }
.changes-list--fixed > summary { color: var(--auditer-ok-text); }
.changes-list--new > summary { color: var(--auditer-fail-text); }
.changes-list ul { margin: 0.3rem 0 0 1.1rem; padding-left: 0; }

/* ---- Checklista: jedno kryterium na ekran (audits/checklist.html) ----
   Lista kryteriów z boku (przewijana niezależnie, przyklejona), obok panel kryterium:
   szeroka kolumna z opisem i wynikami automatu + przyklejona kolumna oceny, żeby formularz
   był pod ręką podczas przeglądania błędów. */
.checklist-main-section { padding-top: 1.25rem; }
.checklist-page { max-width: 1760px; }
.checklist-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.checklist-head .back-link { margin-bottom: 0.25rem; }
.checklist-head h1 { margin-bottom: 0 !important; }
.checklist-head__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.checklist-layout { display: grid; grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; }

.checklist-nav {
  position: sticky; top: 0.75rem; max-height: calc(100vh - 1.5rem); overflow-y: auto;
  border: 1px solid var(--auditer-card-border); border-radius: 8px; background: var(--auditer-card-bg);
  padding: 0.75rem 0.5rem 1rem; font-size: var(--fs-md);
}
.checklist-nav__progress { padding: 0 0.5rem 0.6rem; }
.checklist-nav__progress progress { margin: 0.3rem 0 0 !important; }
.checklist-nav__filters { padding: 0 0.5rem 0.5rem; border-bottom: 1px solid var(--auditer-muted-border); margin-bottom: 0.5rem; }
.checklist-nav__filters > summary { cursor: pointer; color: var(--auditer-text-muted); }
.checklist-nav__filters ul { margin: 0.4rem 0 0; }
.filter-link { display: flex; justify-content: space-between; padding: 0.15rem 0.4rem; border-radius: 4px; color: var(--auditer-text-strong); }
.filter-link:hover { background: var(--auditer-hover-bg); }
.filter-link.is-active { background: var(--auditer-notchecked-bg); color: var(--auditer-notchecked-text); font-weight: 700; }
.filter-link__count { color: var(--auditer-text-muted); font-variant-numeric: tabular-nums; }
.checklist-nav__scope { margin: 0.4rem 0 0; font-size: var(--fs-sm); }
.checklist-nav__principle { font-weight: 700; color: var(--auditer-text-strong); margin: 0.9rem 0.5rem 0.2rem; font-size: var(--fs-sm); }
.checklist-nav__guideline { color: var(--auditer-text-muted); margin: 0.5rem 0.5rem 0.15rem; font-size: var(--fs-sm); font-weight: 600; }
.checklist-nav__list { margin: 0; }
.checklist-nav__empty { padding: 0.5rem; color: var(--auditer-text-muted); }
.nav-criterion {
  display: flex; align-items: baseline; gap: 0.4rem; padding: 0.3rem 0.5rem; border-radius: 5px;
  color: var(--auditer-text-strong); line-height: 1.3; border-left: 3px solid transparent;
}
.nav-criterion:hover { background: var(--auditer-hover-bg); }
.nav-criterion.is-current { background: var(--auditer-notchecked-bg); border-left-color: var(--auditer-focus); font-weight: 600; }
.nav-criterion.is-out-of-scope { opacity: 0.7; }
.nav-criterion--unmatched { margin-bottom: 0.25rem; font-weight: 600; }
.nav-criterion__dot { flex: 0 0 auto; width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 2px solid var(--auditer-notchecked-text); align-self: center; }
.nav-criterion[data-status="compliant"] .nav-criterion__dot { background: var(--auditer-ok-text); border-color: var(--auditer-ok-text); }
.nav-criterion[data-status="non_compliant"] .nav-criterion__dot { background: var(--auditer-fail-text); border-color: var(--auditer-fail-text); }
.nav-criterion[data-status="not_applicable"] .nav-criterion__dot { background: var(--auditer-na-text); border-color: var(--auditer-na-text); border-radius: 2px; }
.nav-criterion__number { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 700; }
.nav-criterion__title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-criterion__badge { flex: 0 0 auto; font-size: var(--fs-xs); font-weight: 700; border-radius: 999px; padding: 0 0.4rem; }
.nav-criterion__badge--findings { background: var(--auditer-fail-bg); color: var(--auditer-fail-text); }
.nav-criterion__badge--review { background: var(--auditer-partial-bg); color: var(--auditer-partial-text); }
.nav-criterion__badge--conflict { background: var(--auditer-fail-text); color: #fff; }

.check-panel {
  border: 1px solid var(--auditer-card-border); border-top: 5px solid var(--auditer-notchecked-text); border-radius: 8px;
  background: var(--auditer-card-bg); padding: 1rem 1.25rem 1.25rem; min-width: 0; box-shadow: none; margin-bottom: 0;
}
.check-panel[data-status="compliant"] { border-top-color: var(--auditer-ok-text); }
.check-panel[data-status="non_compliant"] { border-top-color: var(--auditer-fail-text); }
.check-panel[data-status="not_applicable"] { border-top-color: var(--auditer-na-text); }
.check-panel__crumbs { font-size: var(--fs-sm); color: var(--auditer-text-muted); margin-bottom: 0.25rem; }
.check-panel__titlebar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; justify-content: space-between; }
.check-panel__title { font-size: var(--fs-xl); font-weight: 700; color: var(--auditer-text-strong); line-height: 1.25; margin: 0; }
.check-panel__number { font-variant-numeric: tabular-nums; margin-right: 0.25rem; }
.check-panel__status { font-weight: 700; border-radius: 999px; padding: 0.2rem 0.8rem; background: var(--auditer-notchecked-bg); color: var(--auditer-notchecked-text); }
.check-panel[data-status="compliant"] .check-panel__status { background: var(--auditer-ok-bg); color: var(--auditer-ok-text); }
.check-panel[data-status="non_compliant"] .check-panel__status { background: var(--auditer-fail-bg); color: var(--auditer-fail-text); }
.check-panel[data-status="not_applicable"] .check-panel__status { background: var(--auditer-na-bg); color: var(--auditer-na-text); }
.check-panel__badges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.5rem 0; }
.check-panel__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 27rem); gap: 1.5rem; align-items: start; margin-top: 0.5rem; }
.check-panel__side { position: sticky; top: 0.75rem; max-height: calc(100vh - 1.5rem); overflow-y: auto; padding-right: 0.25rem; }
.check-panel__side .check-step { border-top: 0; padding-top: 0.5rem; }
.check-panel__foot { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--auditer-muted-border); }
.criterion-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.5rem; }
.criterion-nav__pos { color: var(--auditer-text-muted); font-size: var(--fs-md); margin: 0 0.25rem; font-variant-numeric: tabular-nums; }
.criterion-nav--bottom { justify-content: flex-end; }

/* Wystąpienia problemu: duży zrzut (lightbox) po lewej, opis po prawej. */
.occurrences { display: grid; gap: 0.75rem; }
.rule-section .occurrence {
  border: 1px solid var(--auditer-muted-border); border-radius: 6px; padding: 0.75rem; background: var(--auditer-card-bg);
}
.rule-section .occurrence--with-shot { display: grid; grid-template-columns: minmax(12rem, 44%) minmax(0, 1fr); gap: 1rem; align-items: start; }
.occurrence__shot.shot-thumb { width: 100%; }
.occurrence__shot .shot-thumb__frame { aspect-ratio: auto; max-height: 22rem; }
.occurrence__shot .shot-thumb__frame img { height: auto; max-height: 22rem; padding: 0; }
.rule-section__desc { color: var(--auditer-text-muted); font-size: var(--fs-md); margin: 0.6rem 0 0.25rem; }
.rule-section__rules { margin-left: auto; font-size: var(--fs-xs); opacity: 0.8; }
.rule-section__rules code { font-size: var(--fs-xs); padding: 0.05rem 0.3rem; }
a.occurrence__page { color: var(--auditer-text-strong); text-decoration: underline; text-decoration-color: var(--auditer-card-border); }
a.occurrence__page:hover { text-decoration-color: currentColor; }

@media (max-width: 1280px) {
  .check-panel__grid { grid-template-columns: minmax(0, 1fr); }
  .check-panel__side { position: static; max-height: none; overflow: visible; }
}
@media (max-width: 900px) {
  .checklist-layout { grid-template-columns: minmax(0, 1fr); }
  .checklist-nav { position: static; max-height: 18rem; }
  .rule-section .occurrence--with-shot { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Kolorystyka serwisu (audits/_color_report.html) ---- */
.colors { margin-bottom: 1.5rem; }
.colors__lead { margin-bottom: 1rem; }
.colors__h { font-weight: 700; color: var(--auditer-text-strong); margin: 1.1rem 0 0.5rem; }
.colors__hint { font-size: var(--fs-md); color: var(--auditer-text-muted); margin-bottom: 0.4rem; }
.colors__palettes { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem 2rem; }
.palette { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.palette__item { display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid var(--auditer-card-border); border-radius: 6px; padding: 0.25rem 0.5rem; font-size: var(--fs-md); }
.palette__swatch { display: inline-block; width: 1.1rem; height: 1.1rem; border-radius: 3px; border: 1px solid #767676; vertical-align: middle; }
.palette__share { color: var(--auditer-text-muted); }
.contrast-matrix th, .contrast-matrix td { white-space: nowrap; font-size: var(--fs-md); vertical-align: middle; }
.contrast-matrix__sample { display: inline-block; padding: 0 0.35rem; border: 1px solid #b5b5b5; border-radius: 3px; font-weight: 700; margin-right: 0.25rem; }
.contrast-matrix__cell--fail { background: var(--auditer-fail-bg); color: var(--auditer-fail-text); }
.contrast-matrix__cell--large { background: var(--auditer-partial-bg); color: var(--auditer-partial-text); }
.color-pair { border-left: 5px solid var(--auditer-fail-text); }
.color-pair__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-bottom: 0.75rem; }
.color-pair__sample { display: inline-block; padding: 0.35rem 0.75rem; border: 1px solid #b5b5b5; border-radius: 4px; font-size: var(--fs-base); }
.color-pair__sample--sm { padding: 0 0.4rem; font-size: var(--fs-md); font-weight: 700; }
.color-pair__title { font-size: var(--fs-base); margin: 0; }
.color-pair__meta { font-size: var(--fs-md); color: var(--auditer-text-muted); margin: 0; }
.color-pair__fix { margin: 0 0 0 auto; font-size: var(--fs-md); }
.color-pair__body--shot { display: grid; grid-template-columns: minmax(12rem, 38%) minmax(0, 1fr); gap: 1rem; align-items: start; }
.color-pair__css dt { font-size: var(--fs-sm); font-weight: 700; color: var(--auditer-text-muted); margin-top: 0.4rem; }
.color-pair__css dd { margin: 0.1rem 0 0; font-size: var(--fs-md); overflow-wrap: anywhere; }
.css-decl { font-weight: 700; }
.css-src, .css-var { font-size: var(--fs-sm); color: var(--auditer-text-muted); }
@media (max-width: 900px) { .color-pair__body--shot { grid-template-columns: minmax(0, 1fr); } }
.contrast-matrix__cell--unused { color: var(--auditer-text-muted); opacity: 1; }

/* ---- Słownik ARIA (static/js/aria-glossary.js, audits/aria_glossary.html) ---- */
.aria-term {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: help;
  text-decoration: underline dotted var(--auditer-focus); text-underline-offset: 0.18em; text-decoration-thickness: 1.5px;
}
.aria-term:hover { color: var(--auditer-focus); }
.aria-dialog > article { max-width: 40rem; }
.aria-dialog__kind { font-size: var(--fs-sm); font-weight: 700; color: var(--auditer-text-muted); margin: 0; }
.aria-dialog > article > header .aria-dialog__title { font-family: var(--pico-font-family-monospace); font-size: var(--fs-xl); font-weight: 700; margin: 0.1rem 0 0; }
.aria-dialog__body p { margin-bottom: 0.6rem; }
.aria-dialog__summary { font-weight: 600; }
.aria-dialog__facts { display: grid; grid-template-columns: 9rem 1fr; gap: 0.3rem 0.75rem; margin: 0.5rem 0 0.75rem; font-size: var(--fs-md); }
.aria-dialog__facts dt { font-weight: 700; color: var(--auditer-text-muted); }
.aria-dialog__facts dd { margin: 0; }
.aria-dialog__label { font-size: var(--fs-sm); font-weight: 700; color: var(--auditer-fail-text); margin: 0.5rem 0 0.25rem !important; }
.aria-dialog__mistakes { list-style: disc; margin: 0 0 0.75rem 1.2rem; font-size: var(--fs-md); }
.aria-dialog__more { font-size: var(--fs-md); margin: 0; }
.aria-glossary { display: grid; grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr)); gap: 1rem; }
.aria-glossary__item { border: 1px solid var(--auditer-card-border); border-radius: 8px; padding: 0.9rem 1rem; background: var(--auditer-card-bg); box-shadow: none; margin: 0; }
.aria-glossary__name { font-size: var(--fs-base); font-weight: 700; margin-bottom: 0.4rem; }
.aria-glossary__body { font-size: var(--fs-md); }
@media (max-width: 640px) { .aria-dialog__facts { grid-template-columns: 1fr; } .aria-glossary { grid-template-columns: 1fr; } }
.aria-glossary__item[hidden] { display: none !important; }

/* ---- Checklista: problemy + ocena obok siebie (audits/checklist.html, _criterion_panel.html) ----
   Zamiast listy kryteriów z boku — przełącznik w pasku (panel z czterema kolumnami zasad).
   Po lewej zwarta lista problemów (szczegóły w wysuwanym panelu), po prawej ocena. */
.checklist-page { max-width: 1440px; }
.checklist-head { align-items: center; margin-bottom: 0.75rem; }
.checklist-head__title { font-size: var(--fs-md); color: var(--auditer-text-muted); margin: 0; }
.checklist-head__title .back-link { margin: 0; }
.checklist-head__sep { margin: 0 0.35rem; }
.checklist-head__progress { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-md); margin-right: 0.5rem; }
.checklist-head__progress progress { width: 7rem; margin: 0 !important; }
.reaudit-banner--compact { padding: 0.4rem 0.8rem; font-size: var(--fs-md); margin-bottom: 0.75rem; }

.crit-switch { position: relative; margin-bottom: 1rem; }
.crit-switch__summary {
  display: flex; align-items: center; gap: 0.75rem; cursor: pointer; list-style: none;
  border: 1px solid var(--auditer-card-border); border-radius: 8px; background: var(--auditer-card-bg);
  padding: 0.5rem 0.9rem; font-size: var(--fs-md);
}
.crit-switch__summary::-webkit-details-marker { display: none; }
.crit-switch__summary:hover { border-color: var(--auditer-focus); }
.crit-switch__label { font-weight: 700; color: var(--auditer-text-muted);font-size: var(--fs-sm); }
.crit-switch__current { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crit-switch__chevron { margin-left: auto; transition: transform 0.15s; }
.crit-switch[open] .crit-switch__chevron { transform: rotate(180deg); }
.crit-switch__panel.checklist-nav {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 0.35rem); max-height: min(75vh, 44rem);
  display: flex; flex-direction: column; padding: 0.75rem; box-shadow: 0 12px 32px var(--auditer-shadow), 0 2px 6px rgba(0,0,0,.08);
}
.crit-switch__filters { display: flex; flex-wrap: wrap; gap: 0.35rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--auditer-muted-border); }
.crit-switch__filters .filter-link { border: 1px solid var(--auditer-card-border); border-radius: 999px; padding: 0.15rem 0.7rem; gap: 0.35rem; }
.crit-switch__tree { overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0 1.25rem; padding-top: 0.25rem; }
.crit-switch__tree > .nav-criterion--unmatched { grid-column: 1 / -1; }

.check-panel { padding: 1rem 1.25rem 1.25rem; }
.check-panel__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 0.75rem 1.5rem;
  padding-bottom: 0.75rem; border-bottom: 1px solid var(--auditer-muted-border); margin-bottom: 1rem; }
.check-panel__heading { min-width: 0; flex: 1 1 28rem; }
.check-panel__headside { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; }
.check-panel__headside .criterion-nav { margin-top: 0; }
.cp-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(22rem, 1fr); gap: 2rem; align-items: start; }
.cp-assess { position: sticky; top: 0.75rem; }
.cp-h { font-size: var(--fs-sm); font-weight: 700; color: var(--auditer-text-muted); margin: 1.1rem 0 0.5rem; }
.cp-findings > .cp-h:first-of-type, .cp-assess > .cp-h:first-child { margin-top: 0; }
.cp-h--review { color: var(--auditer-partial-text); }
.cp-requirement { font-size: var(--fs-md); color: var(--auditer-text-muted); margin-bottom: 1.1rem; }
.cp-hint, .cp-empty { font-size: var(--fs-md); color: var(--auditer-text-muted); margin-bottom: 0.5rem; }
.cp-link { font: inherit; background: none; border: 0; padding: 0; color: var(--auditer-focus); cursor: pointer; text-decoration: underline; text-underline-offset: 0.15em; }
.cp-more { margin-top: 1.25rem; padding-top: 0.75rem; border-top: 1px solid var(--auditer-muted-border); display: grid; gap: 0.35rem; font-size: var(--fs-md); }
.cp-fold { margin-top: 0.75rem; }
.cp-fold > summary { cursor: pointer; font-weight: 600; font-size: var(--fs-md); color: var(--auditer-text-strong); }
.cp-fold[open] > summary { margin-bottom: 0.4rem; }
.cp-assess .suggestion { margin-bottom: 0.75rem; }
.cp-assess .check-item__conflict { display: inline-block; margin-bottom: 0.5rem; }
.cp-assess .check-item__conflict[hidden] { display: none; }

.problem-list { display: grid; gap: 0.4rem; }
.problem-row {
  width: 100%; display: flex; align-items: center; gap: 0.75rem; text-align: left; cursor: pointer; font: inherit; color: var(--auditer-text-strong);
  background: var(--auditer-card-bg); border: 1px solid var(--auditer-card-border); border-left: 4px solid var(--auditer-na-text); border-radius: 6px; padding: 0.6rem 0.75rem;
}
.problem-row:hover { border-color: var(--auditer-focus); background: var(--auditer-hover-bg); }
.problem-row--critical, .problem-row--serious { border-left-color: var(--auditer-fail-text); }
.problem-row--moderate { border-left-color: var(--auditer-partial-text); }
.problem-row--review { border-style: dashed; border-left-style: solid; }
.problem-row__title { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.problem-row__meta { flex: 0 0 auto; font-size: var(--fs-sm); color: var(--auditer-text-muted); white-space: nowrap; }
.problem-row__chevron { flex: 0 0 auto; font-size: var(--fs-xl); line-height: 1; color: var(--auditer-text-muted); }
.problem-row.is-changed { opacity: 0.7; }
.problem-row__changed { font-size: var(--fs-xs); font-weight: 700; border-radius: 999px; padding: 0 0.5rem; background: var(--auditer-notchecked-bg); color: var(--auditer-notchecked-text); }

/* Panel wysuwany z prawej — własny układ, bez nakładki Pico (Pico rozciąga <dialog> na cały ekran). */
dialog.drawer {
  left: auto; min-width: 0; min-height: 0; backdrop-filter: none; align-items: stretch; justify-content: flex-start;
  margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(58rem, 94vw); max-width: 94vw; padding: 0; border: 0;
  border-left: 1px solid var(--auditer-card-border); background: var(--auditer-card-bg); color: var(--auditer-text-strong);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.25);
}
dialog.drawer[open] { display: flex; flex-direction: column; animation: drawer-in 0.18s ease-out; }
dialog.drawer::backdrop { background: rgba(10, 20, 40, 0.4); }
@keyframes drawer-in { from { transform: translateX(2rem); opacity: 0.6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { dialog.drawer[open] { animation: none; } }
.drawer__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1rem 1.25rem 0.75rem; border-bottom: 1px solid var(--auditer-muted-border); }
.drawer__eyebrow { font-size: var(--fs-sm); color: var(--auditer-text-muted); margin: 0 0 0.15rem; }
.drawer__title { font-size: var(--fs-lg); font-weight: 700; margin: 0; }
.drawer__body { overflow-y: auto; padding: 1rem 1.25rem 1.5rem; }
.drawer .rule-section { border: 0; margin: 0; }
.drawer .rule-section__summary { pointer-events: none; padding-left: 0; }
.drawer .rule-section__summary::before, .drawer .rule-section__title { display: none; }
.drawer .rule-section__body { border-top: 0; padding: 0; }

@media (max-width: 1100px) {
  .cp-grid { grid-template-columns: minmax(0, 1fr); }
  .cp-assess { position: static; }
}

/* ---- Zakres skanu (audits/_scan_options.html) i błędy skanu ---------------- */
.scan-scope { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--auditer-muted-border); }
.scan-scope > summary { font-weight: 600; width: fit-content; }
.scan-scope[open] > summary { margin-bottom: 0.75rem; }
.scan-scope__presets { margin-bottom: 1rem; }
.scan-scope__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0.5rem 1.5rem; }
.scan-scope__group { margin-bottom: 0.75rem; }
.scan-scope__group legend { font-size: var(--fs-sm); font-weight: 700; color: var(--auditer-text-muted); }
.scan-scope__tool { display: flex; gap: 0.6rem; align-items: flex-start; margin-bottom: 0.55rem; width: auto; }
.scan-scope__tool input { margin-top: 0.2rem; flex: 0 0 auto; }
.scan-scope__name { display: block; font-weight: 600; line-height: 1.35; }
.scan-scope__tool small { display: block; color: var(--auditer-text-muted); font-size: var(--fs-sm); line-height: 1.35; }
.scan-scope__tool:has(input:disabled) { opacity: 0.55; }
.scan-errors { margin: 0.5rem 0 0.75rem; font-size: var(--fs-md); }
.scan-errors > summary { width: fit-content; }
.scan-errors ul { margin: 0.4rem 0 0; padding-left: 1.1rem; max-height: 16rem; overflow: auto; overflow-wrap: anywhere; }
.scan-errors li { margin-bottom: 0.25rem; }
.scan-failed .scan-errors { margin-bottom: 0; }
.scan-retry select { width: auto; margin: 0; }
.scan-scheduled .actions { margin-top: 0.5rem; }

/* ---- Postęp skanu (audits/_scan_status.html) -------------------------------- */
.scan-live__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem 1rem; margin-bottom: .5rem; }
.scan-live__title { font-weight: 600; color: var(--auditer-text-strong); }
.scan-live__time { font-size: var(--fs-md); color: var(--auditer-text-muted); font-variant-numeric: tabular-nums; }
.scan-live progress { margin-bottom: .5rem; }
.scan-live__url { font-size: var(--fs-sm); overflow-wrap: anywhere; margin-bottom: .25rem; }
.scan-live__now { font-size: var(--fs-md); color: var(--auditer-text-muted); margin-bottom: .75rem; }
.scan-steps { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .3rem .9rem; }
.scan-step { display: flex; align-items: center; gap: .45rem; font-size: var(--fs-md); color: var(--auditer-text-muted); padding: .15rem 0; }
.scan-step__icon { flex: 0 0 1.25rem; height: 1.25rem; display: inline-grid; place-items: center; border-radius: 50%; font-size: var(--fs-xs); font-weight: 700; border: 1.5px solid var(--auditer-card-border); }
.scan-step.is-done { color: var(--auditer-text-strong); }
.scan-step.is-done .scan-step__icon, .scan-stage.is-success .scan-step__icon { background: var(--auditer-ok-bg); color: var(--auditer-ok-text); border-color: var(--auditer-ok-text); }
.scan-step.is-current { color: var(--auditer-text-strong); font-weight: 650; }
.scan-step.is-current .scan-step__icon, .scan-stage.is-running .scan-step__icon { border-color: var(--auditer-focus); }
.scan-stage.is-failed .scan-step__icon { background: var(--auditer-fail-bg); color: var(--auditer-fail-text); border-color: var(--auditer-fail-text); }
.scan-step__label { flex: 1; min-width: 0; }
.scan-step__time { font-size: var(--fs-xs); color: var(--auditer-text-muted); font-variant-numeric: tabular-nums; }
.scan-spinner { width: .7rem; height: .7rem; border-radius: 50%; border: 2px solid var(--auditer-focus); border-right-color: transparent; animation: scan-spin .8s linear infinite; }
@keyframes scan-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .scan-spinner { animation: none; border-right-color: var(--auditer-focus); opacity: .6; } }
.scan-stages { margin: .25rem 0 1rem; padding: .7rem .9rem; border: 1px solid var(--auditer-card-border); border-radius: 8px; background: var(--auditer-hover-bg); }
.scan-stages__title { font-size: var(--fs-sm); font-weight: 700; color: var(--auditer-text-muted); margin-bottom: .35rem; }
.scan-stages ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.scan-stage { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: var(--fs-md); }
.scan-stage__state { color: var(--auditer-text-muted); font-size: var(--fs-md); overflow-wrap: anywhere; }

/* ---- Wygoda pracy: poprawki wspólne dla całej aplikacji ----------------- */
/* Link "Przejdź do treści" — pierwszy element na stronie, widoczny po fokusie. */
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: .6rem 1rem; border-radius: var(--pico-border-radius);
  background: var(--pico-primary-background); color: var(--pico-primary-inverse); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: .5rem; }
main:focus { outline: none; }
/* Pico dodaje <body > header> 20 px góra/dół — w narzędziu to 40 px mniej treści na każdym ekranie. */
body > header.app-header { padding-block: 0; }
.theme-toggle__icon { display: block; }
.theme-toggle:not(.is-dark) .theme-toggle__sun, .theme-toggle.is-dark .theme-toggle__moon { display: none; }
/* Pola wyszukiwania w tym samym kształcie co pozostałe pola (Pico robi z nich "pigułki"). */
input[type="search"], [role="search"] { --pico-border-radius: 0.375rem; }
/* Formularze: wygodna długość wiersza zamiast pól na całą szerokość ekranu. */
.form-narrow { max-width: 46rem; }
.report-style-picker { border: 0; padding: 0; margin: 0 0 1rem; }
.report-style-picker legend { margin-bottom: .5rem; }
.report-style-picker ul, .report-style-colors ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding: 0; margin: 0; }
.report-style-picker li, .report-style-colors li { margin: 0; }
.report-style-picker label, .report-style-colors li label { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.report-style-picker input[type="radio"], .report-style-colors input[type="radio"] { width: auto; margin: 0; }
.report-style-picker input[type="radio"] + label::before { content: ""; display: inline-block; width: 1.35rem; height: 1.35rem; border-radius: .25rem; border: 1px solid var(--pico-muted-border-color); background: #1f3d78; }
#id_visual_style_1 + label::before { background: #087e8b; }
#id_visual_style_2 + label::before { background: #246b50; }
#id_visual_style_3 + label::before { background: #a34e2b; }
#id_visual_style_4 + label::before { background: #6941a5; }
#id_visual_style_5 + label::before { background: #30343b; }
#id_visual_style_6 + label::before { background: #17202a; }
.report-style-colors { align-items: end; }
.report-style-colors input[type="color"] { width: 4rem; min-height: 2.5rem; padding: .2rem; }
@font-face { font-family: "Report Atkinson"; src: url("../fonts/atkinson-hyperlegible/AtkinsonHyperlegible-Regular.d49948a1804b.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Report Andika"; src: url("../fonts/report-options/andika/regular.9964eaa67f57.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Report Source Sans 3"; src: url("../fonts/report-options/source-sans-3/regular.d64d226c5845.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Report Noto Sans"; src: url("../fonts/report-options/noto-sans/regular.d36dcb78f876.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Report Open Sans"; src: url("../fonts/report-options/open-sans/regular.629a55a7e793.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Report Lato"; src: url("../fonts/report-options/lato/regular.3b9b99039cc0.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Report Carlito"; src: url("../fonts/report-options/carlito/regular.f474e3f5ae87.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Report DejaVu Sans"; src: url("../fonts/report-options/dejavu-sans/regular.94d8e21951bb.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Report Liberation Sans"; src: url("../fonts/report-options/liberation-sans/regular.dea13973ce7d.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Report Roboto"; src: url("../fonts/report-options/roboto/regular.86da78cb5957.ttf") format("truetype"); font-weight: 400; font-display: swap; }
.report-font-picker { border: 0; padding: 0; margin: 1.2rem 0; }
.report-font-picker legend { margin-bottom: .2rem; }
.report-font-picker > .hint { margin: 0 0 .7rem; font-size: var(--fs-md); }
.report-font-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .55rem; }
.report-font-option { min-width: 0; margin: 0; }
.report-font-option label { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; height: 100%; min-height: 6rem; padding: .65rem; border: 1px solid var(--auditer-card-border); border-radius: .5rem; background: var(--auditer-card-bg); cursor: pointer; }
.report-font-option label:focus-within { outline: 3px solid var(--pico-primary); outline-offset: 2px; }
.report-font-option:has(input:checked) label { border-color: var(--pico-primary); box-shadow: 0 0 0 1px var(--pico-primary); }
.report-font-option input[type="radio"] { width: 1rem; min-height: 1rem; margin: 0; }
.report-font-option__name { color: var(--auditer-text-strong); font-size: var(--fs-md); font-weight: 650; line-height: 1.25; }
.report-font-option__sample { font-size: var(--fs-xl); line-height: 1.25; }
.report-font-option__example { color: var(--auditer-text-muted); font-size: var(--fs-xs); line-height: 1.35; }
.report-font-option__sample[data-font="atkinson"], .report-font-option__example[data-font="atkinson"] { font-family: "Report Atkinson", sans-serif; }
.report-font-option__sample[data-font="andika"], .report-font-option__example[data-font="andika"] { font-family: "Report Andika", sans-serif; }
.report-font-option__sample[data-font="source_sans_3"], .report-font-option__example[data-font="source_sans_3"] { font-family: "Report Source Sans 3", sans-serif; }
.report-font-option__sample[data-font="noto_sans"], .report-font-option__example[data-font="noto_sans"] { font-family: "Report Noto Sans", sans-serif; }
.report-font-option__sample[data-font="open_sans"], .report-font-option__example[data-font="open_sans"] { font-family: "Report Open Sans", sans-serif; }
.report-font-option__sample[data-font="lato"], .report-font-option__example[data-font="lato"] { font-family: "Report Lato", sans-serif; }
.report-font-option__sample[data-font="carlito"], .report-font-option__example[data-font="carlito"] { font-family: "Report Carlito", sans-serif; }
.report-font-option__sample[data-font="dejavu_sans"], .report-font-option__example[data-font="dejavu_sans"] { font-family: "Report DejaVu Sans", sans-serif; }
.report-font-option__sample[data-font="liberation_sans"], .report-font-option__example[data-font="liberation_sans"] { font-family: "Report Liberation Sans", sans-serif; }
.report-font-option__sample[data-font="roboto"], .report-font-option__example[data-font="roboto"] { font-family: "Report Roboto", sans-serif; }
.report-settings-heading { margin-bottom: 1.25rem; }
.report-settings-heading > div > * { margin-bottom: .25rem; }
.report-settings-heading > div > p { max-width: none; color: var(--auditer-text-muted); margin-top: .35rem; }
.report-settings-form { width: 100%; max-width: none; }
.report-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; width: 100%; }
.report-settings-grid > .card { min-width: 0; margin: 0; padding: clamp(1rem, 1.5vw, 1.5rem); }
.report-settings-panel h2 { font-size: var(--fs-lg); margin: 0 0 .35rem; }
.report-settings-panel > p { margin: 0 0 1rem; }
.report-settings-panel > small { display: block; margin-top: -.35rem; margin-bottom: .8rem; }
.report-settings-panel--appearance, .report-settings-panel--summary, .report-settings-actions { grid-column: 1 / -1; }
.report-settings-panel__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.report-settings-panel__heading p { color: var(--auditer-text-muted); margin: .25rem 0 .9rem; }
.report-style-picker { border: 0; padding: 0; margin: 0 0 1rem; }
.report-style-picker legend, .report-density-picker legend { margin-bottom: .6rem; font-weight: 600; }
.report-style-picker #id_visual_style { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.report-style-picker #id_visual_style > div { display: flex; min-width: 0; margin: 0; }
.report-style-picker #id_visual_style label { min-width: 0; min-height: 2.75rem; height: 100%; padding: .55rem .6rem; display: flex; align-items: center; gap: .5rem; border: 1px solid var(--auditer-card-border); border-radius: .5rem; background: var(--auditer-card-bg); cursor: pointer; font-size: var(--fs-md); line-height: 1.25; white-space: normal; overflow-wrap: anywhere; }
.report-style-picker #id_visual_style label { flex: 1; }
.report-style-picker #id_visual_style label::before { content: ""; display: block; flex: 0 0 1rem; width: 1rem; height: 1rem; border-radius: .25rem; background: #1f3d78; }
.report-style-picker #id_visual_style > div:nth-child(2) label::before { background: #087e8b; }
.report-style-picker #id_visual_style > div:nth-child(3) label::before { background: #246b50; }
.report-style-picker #id_visual_style > div:nth-child(4) label::before { background: #a34e2b; }
.report-style-picker #id_visual_style > div:nth-child(5) label::before { background: #6941a5; }
.report-style-picker #id_visual_style > div:nth-child(6) label::before { background: #30343b; }
.report-style-picker #id_visual_style > div:nth-child(7) label::before { background: #17202a; }
.report-style-picker #id_visual_style > div:has(input:checked) label { border-color: var(--pico-primary); box-shadow: 0 0 0 1px var(--pico-primary); }
.report-style-picker input[type="radio"] { flex: 0 0 auto; width: 1rem; margin: 0; }
.report-style-picker input[type="radio"] + label::before { content: none; }
.report-style-customizer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: end; padding-top: .9rem; border-top: 1px solid var(--auditer-card-border); }
.report-style-customizer > div > label { margin-bottom: .35rem; }
.report-style-customizer input[type="color"] { width: 100%; height: 2.7rem; padding: .2rem; }
.report-density-picker { border: 0; padding: 0; margin: 0; }
.report-density-picker ul { display: flex; gap: .5rem 1rem; list-style: none; padding: .35rem 0; margin: 0; }
.report-density-picker li { margin: 0; }
.report-density-picker li label { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.report-density-picker input[type="radio"] { width: auto; margin: 0; }
.report-settings-inline-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem 1rem; }
.report-settings-inline-fields > div { min-width: 0; }
.report-settings-inline-fields label { margin-bottom: .35rem; }
.report-settings-inline-fields small { display: block; margin-top: .35rem; }
.report-settings-inline-fields--contact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.report-settings-inline-fields__wide { grid-column: 1 / -1; }
.report-client-logo img { display: block; max-width: min(100%, 14rem); max-height: 3.5rem; object-fit: contain; object-position: left center; }
.report-settings-panel--summary .notice { padding: .8rem 1rem; }
.report-settings-panel--summary .notice p + p { margin-top: .25rem; }
.report-settings-panel--summary textarea { min-height: 14rem; }
.report-settings-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .65rem; padding-top: .25rem; }
.report-settings-actions > * { margin: 0; }
@media (max-width: 1050px) {
  .report-style-picker #id_visual_style { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .report-font-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .report-settings-grid { grid-template-columns: minmax(0, 1fr); }
  .report-settings-panel--appearance, .report-settings-panel--summary, .report-settings-actions { grid-column: auto; }
  .report-style-picker #id_visual_style { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-font-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-style-customizer, .report-settings-inline-fields--contact { grid-template-columns: minmax(0, 1fr); }
  .report-settings-inline-fields__wide { grid-column: auto; }
  .report-settings-actions { justify-content: stretch; }
  .report-settings-actions > * { flex: 1 1 100%; }
}
/* Ukryty <caption class="visually-hidden"> (position:absolute) nie może wychodzić poza przewijany kontener tabeli. */
.overflow-auto { position: relative; }
.checklist-head__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; }
.checklist-head__h1 { display: inline; margin: 0; font-size: inherit; font-weight: 600; color: var(--auditer-text-strong); }
/* WCAG 2.5.8: tytuły-linki i małe przełączniki z celem co najmniej 24×24 px. */
.work-card__title a { display: inline-block; min-height: 24px; }
.as-chip { min-width: 24px; min-height: 24px; align-items: center; justify-content: center; }
.link-target { display: inline-block; min-height: 24px; padding-block: .1rem; }
[role="search"]:where([class]) > :is(button, input, select, [role="button"]), [role="search"]:where([class]) > div > :is(input, select) { border-radius: var(--pico-border-radius); }

/* ---- Fragmenty kodu: sekcja na regułę, w niej unikalne elementy ---- */
.snippet-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: .25rem; }
.snippet-toolbar input { flex: 1 1 20rem; margin: 0; }
.snippet-toolbar .actions { margin: 0; }
.snippet-rule { margin: 0 0 .6rem; border: 1px solid var(--auditer-card-border); border-radius: 8px; background: var(--auditer-card-bg); }
.snippet-rule > .snippet-rule__summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem 1rem; padding: .75rem 1rem; cursor: pointer; }
.snippet-rule[open] > .snippet-rule__summary { border-bottom: 1px solid var(--auditer-muted-border); }
.snippet-rule__title { flex: 1 1 18rem; font-weight: 650; color: var(--auditer-text-strong); }
.snippet-rule__meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: var(--fs-md); color: var(--auditer-text-muted); }
.snippet-rule__count { font-weight: 600; color: var(--pico-primary); }
.snippet-rule__body { padding: .75rem 1rem 1rem; }
.snippet-rule__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.snippet-rule__head p { margin: 0; }
.snippet-list { display: grid; gap: .75rem; margin: .75rem 0 0; }
.snippet-card { padding: .75rem; border: 1px solid var(--auditer-muted-border); border-radius: 6px; }
.snippet-card__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.snippet-card__head button { margin: 0; flex: 0 0 auto; }
.snippet-card__selector { overflow-wrap: anywhere; font-size: var(--fs-sm); }
.snippet-card__pages { margin: .35rem 0 .5rem; font-size: var(--fs-md); color: var(--auditer-text-muted); }
.snippet-code { margin: 0; padding: .5rem .65rem; font-size: var(--fs-sm); white-space: pre-wrap; word-break: break-all; }
.snippet-fix { margin-top: .5rem; }
.snippet-fix > summary { font-size: var(--fs-md); font-weight: 600; }

/* Wtyczka: „Otwórz z wtyczką” (audits/_extension_launch.html, js/extension-launch.js) */
.ext-launch { margin: .5rem 0 1rem; padding: .6rem .75rem; border: 1px solid var(--pico-muted-border-color); border-radius: .5rem; }
.ext-launch__label { display: block; margin: 0 0 .3rem; font-size: var(--fs-md); font-weight: 600; }
.ext-launch__row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ext-launch__row select { flex: 1 1 14rem; width: auto; margin: 0; padding-block: .3rem; font-size: var(--fs-md); }
.ext-launch__row button { margin: 0; }
.ext-launch__hint { margin: .35rem 0 0; }
.ext-launch__hint:empty { display: none; }
.occurrence__actions .ext-launch__hint { flex-basis: 100%; }

/* ---- Zakładki projektu (audits/_project_nav.html) — pod menu głównym na każdej stronie audytu. */
.project-nav { background: var(--auditer-card-bg); border-bottom: 1px solid var(--auditer-card-border); }
/* Pasek zostaje wyrównany do menu głównego także na szerokich stronach (checklista, testy) —
   inaczej nazwa projektu i zakładki przeskakują w bok przy przełączaniu zakładek. */
nav.project-nav { display: block; }
.project-nav__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.25rem; min-width: 0; padding-block: 0; }
.project-nav__name {
  max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding-block: .55rem; font-weight: 700; color: var(--auditer-text-strong); text-decoration: none;
}
.project-nav__name:hover { text-decoration: underline; }
nav.project-nav ul.project-nav__tabs {
  display: flex; flex-wrap: wrap; gap: 0 .25rem; margin: 0; padding: 0; list-style: none; align-items: stretch;
}
nav.project-nav ul.project-nav__tabs li { margin: 0; padding: 0; list-style: none; }
nav.project-nav ul.project-nav__tabs li::before { display: none; }
.project-nav__tab { position: relative;
  display: inline-flex; align-items: center; gap: .4rem; padding: .65rem .7rem .55rem;
  border-bottom: 3px solid transparent; color: var(--auditer-text-muted); text-decoration: none; font-weight: 600; font-size: var(--fs-md);
}
.project-nav__tab:hover { color: var(--auditer-text-strong); background: var(--auditer-hover-bg); }
.project-nav__tab:focus-visible { outline-offset: -3px; }
.project-nav__tab.is-current { color: var(--pico-primary); border-bottom-color: var(--pico-primary); }
.project-nav__badge {
  padding: 0 .45rem; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; line-height: 1.4rem;
  background: var(--auditer-partial-bg); color: var(--auditer-partial-text);
}
.project-nav__figure { font-size: var(--fs-sm); font-weight: 500; color: var(--auditer-text-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .project-nav__inner { flex-direction: column; align-items: stretch; }
  .project-nav__name { max-width: none; padding-bottom: 0; }
  /* Na telefonie zakładki przewijają się w poziomie zamiast łamać na kilka rzędów. */
  nav.project-nav ul.project-nav__tabs { position: relative; flex-wrap: nowrap; width: 100%; max-width: 100%; min-width: 0; margin: 0; overflow-x: auto; scrollbar-width: thin; }
  .project-nav__tab { white-space: nowrap; padding-inline: .55rem; }
}

/* Strona audytu: lista podstron i dodawanie podstrony w kroku 1. */
.audit-pages { margin: 1rem 0 0; padding-top: .75rem; border-top: 1px solid var(--auditer-muted-border); }
.audit-pages__list { margin: .5rem 0 .75rem; padding-left: 0; }
.audit-pages__list li { margin-bottom: .3rem; list-style: none; }
.audit-pages__list a { text-decoration: none; }
.audit-pages__list a:hover .page-chip__name, .audit-pages__list a:focus-visible .page-chip__name { text-decoration: underline; }
.audit-pages__add { display: grid; gap: .5rem 1rem; align-items: end; }
.audit-pages__add > * { margin: 0; }
.audit-pages__add input { margin-bottom: 0; }
@media (min-width: 760px) { .audit-pages__add { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; } }
.audit-next-step__jump { flex: 0 0 auto; font-weight: 600; }

/* Formularz nowego audytu: usuwanie wiersza podstrony. */
.page-row__remove { margin-top: .25rem; }

/* Zakładka „Raport”: generowanie nad ustawieniami. */
.report-generate { margin-bottom: 1.5rem; }
.report-generate form { margin: 0; }
.report-settings-subtitle { margin: 0 0 .75rem; font-size: var(--fs-lg); }

/* Zakładka „Wyniki”: przełącznik widoku wg kryteriów / kolejka (audits/_results_modes.html). */

/* Linki do narzędzi przy kryterium (checklista) i teście (ocena wspomagana) — audits.tools_catalog. */
.cp-tools { margin: .75rem 0; font-size: var(--fs-md); }
.cp-tools__label { font-weight: 600; color: var(--auditer-text-muted); margin-right: .25rem; }

/* ---- Recenzja raportu przez AI (reports/_ai_review.html). */
.ai-review__title { font-size: var(--fs-base); margin: 0; }
.ai-review .toolbar { margin-bottom: 0.5rem; }
.ai-review__list { list-style: none; padding: 0; margin: 0; }
.ai-review__item { list-style: none; border-top: 1px solid var(--pico-muted-border-color); padding: 0.6rem 0; }
.ai-review__item p { margin-bottom: 0.3rem; }
.ai-review__item details { margin: 0.2rem 0 0.4rem; font-size: var(--fs-md); }
.ai-review__item .actions { gap: 0.4rem; }
.ai-review__item .actions button { margin: 0; }

/* ---- Znaczek podstrony (audits.page_identity, {% page_chip %}) ------------
   Numer P1…Pn + krótka nazwa; kolor przypisany do numeru — ten sam w aplikacji
   i we wtyczce (browser-extension/sidepanel.css). Kolor tylko pomaga: numer
   jest zawsze w tekście. --page-color mogą użyć inne komponenty (pasek z boku). */
.page-chip--1 { --page-color: #3a4fc4; }
.page-chip--2 { --page-color: #0f7b6c; }
.page-chip--3 { --page-color: #b4441b; }
.page-chip--4 { --page-color: #7a3fb0; }
.page-chip--5 { --page-color: #2c6e1f; }
.page-chip--6 { --page-color: #a8326e; }
.page-chip--7 { --page-color: #1f5f8b; }
.page-chip--8 { --page-color: #7a5a00; }
.page-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  max-width: 100%;
  vertical-align: baseline;
  line-height: 1.3;
}
.page-chip__code {
  flex: none;
  padding: 0.05em 0.45em;
  border-radius: 0.3em;
  background: var(--page-color, #595f6b);
  color: #fff;
  font-size: 0.8em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.page-chip__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--auditer-text-strong);
}
.page-chip__path {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--auditer-text-muted);
  font-size: 0.85em;
}
/* W linku nazwa przejmuje kolor linku (podkreślenie zostaje na linku). */
a .page-chip__name { color: inherit; }
.page-chip + .page-chip { margin-left: 0.15em; }
/* Ścieżka zawija się pod nazwą na wąskim ekranie zamiast rozpychać wiersz. */
.page-chip:has(.page-chip__path) { flex-wrap: wrap; row-gap: 0; }
/* Sekcja/wiersz należący do podstrony: kolorowy pasek z lewej. */
.page-band { border-left: 4px solid var(--page-color, var(--auditer-card-border)); padding-left: 0.6rem; }
.rule-section .occurrence.page-band { border-left: 4px solid var(--page-color, var(--auditer-muted-border)); }
.problem-row__meta .page-chip { font-size: 0.95em; }
.problem-row__meta .page-chip--code + .page-chip--code { margin-left: 0.2em; }
.result-evidence.page-band { padding-left: 0; }
/* „Badana podstrona: P2 …” pod nagłówkiem narzędzia pracującego na jednej podstronie. */
.current-page { display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; align-items: baseline; margin: 0.25rem 0 0.75rem; font-weight: 600; }
.current-page .page-chip { font-size: 1.05em; }
.page-filter-note { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline; }
.as-current-page { margin: 0; font-weight: 400; font-size: var(--fs-md); }

/* ---- Zakres oceny przy wielu podstronach (checklista) ------------------- */
/* Lekka linia zamiast ramki — powtarza się na każdej stronie oceny, więc nie może zabierać miejsca. */
.scope-banner { margin: 0 0 0.9rem; font-size: var(--fs-md); }
.scope-banner[open] {
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--auditer-card-border);
  border-radius: var(--pico-border-radius);
  background: var(--auditer-card-bg);
}
.scope-banner > summary.scope-banner__summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.75rem;
  cursor: pointer; line-height: 1.5; list-style: none;
}
.scope-banner > summary.scope-banner__summary::after { display: none; }
.scope-banner > summary::-webkit-details-marker { display: none; }
.scope-banner__pages { display: inline-flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; font-size: var(--fs-md); }
.scope-banner__pages .page-chip__name { max-width: 16rem; font-weight: 500; }
.scope-banner__more { font-size: var(--fs-md); color: var(--pico-primary); text-decoration: underline; }
.scope-banner[open] .scope-banner__more { visibility: hidden; }
.scope-banner__rules { margin: 0.6rem 0 0; padding-left: 1.2rem; font-size: var(--fs-md); }
.scope-banner__rules li { list-style: disc; margin-bottom: 0.2rem; }
/* Deklaracja z audytu: próba podstron i niespełnione kryteria z podstronami (reports/declaration.html). */
.declaration-scope { margin-bottom: 1.5rem; }
.declaration-scope > summary { margin-bottom: 0; }
.declaration-scope__table { margin: 0.5rem 0 0; }
.declaration-scope__table caption { text-align: left; caption-side: top; padding-bottom: 0.3rem; }
.declaration-scope__table th[scope="row"] { font-weight: 500; }
.declaration-scope__table td .page-chip { margin: 0 0.3rem 0.2rem 0; }
.declaration-scope__table th[scope="row"] { width: 28%; }
.declaration-scope__table td:last-child { width: 32%; }
.declaration-scope__count { display: inline-block; white-space: nowrap; margin-right: 0.5rem; font-size: var(--fs-md); }

.check-panel__scope { font-size: var(--fs-md); color: var(--auditer-text-muted); }
.check-panel__scope strong { color: var(--auditer-text-strong); }

.page-scope {
  margin: 0.75rem 0 0.9rem;
  padding: 0.6rem 0.75rem 0.4rem;
  border: 1px solid var(--auditer-card-border);
  border-radius: var(--pico-border-radius);
}
.page-scope__legend { padding: 0 0.3rem; font-size: var(--fs-md); font-weight: 700; color: var(--auditer-text-strong); }
.page-scope__q--fail { display: none; }
.check-panel[data-status="non_compliant"] .page-scope__q--fail { display: inline; }
.check-panel[data-status="non_compliant"] .page-scope__q--other { display: none; }
.check-panel[data-status="non_compliant"] .page-scope { border-color: var(--auditer-fail-solid); }
.page-scope__options { display: flex; flex-direction: column; gap: 0.15rem; }
.page-scope .page-scope__option {
  display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0.2rem 0.3rem;
  font-size: var(--fs-md); border-radius: 0.25rem; cursor: pointer;
}
.page-scope .page-scope__option:hover { background: var(--auditer-hover-bg); }
.page-scope__option input { flex: none; margin: 0; }
.page-scope__option .page-chip { min-width: 0; flex: 1 1 auto; }
.page-scope__option .page-chip__name { font-weight: 500; }
.page-scope__auto { flex: none; margin-left: auto; font-size: var(--fs-sm); color: var(--auditer-text-muted); }
.page-scope__option.has-auto .page-scope__auto { color: var(--auditer-fail-text); font-weight: 600; }
.page-scope__summary { margin: 0.35rem 0 0.2rem; font-size: var(--fs-sm); color: var(--auditer-text-muted); }
.page-scope__summary.is-warn { color: var(--auditer-partial-text); font-weight: 600; }
.page-scope__tools { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0; }
.page-scope__mode { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0.15rem 0 0.4rem; }
.page-scope__mode label { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-weight: 500; }
.page-scope__mode input { margin: 0; }
.page-scope.is-whole :is(.page-scope__options, .page-scope__tools) { display: none; }

/* Kafelki podstron (ocena wspomagana, wyniki): filtr + stan każdej podstrony naraz. */
.page-tiles { flex: 1 1 100%; }
.page-tiles__title { margin: 0 0 .3rem; font-size: var(--fs-sm); font-weight: 700; color: var(--auditer-text-strong); }
.page-tiles__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); align-items: stretch; gap: .4rem; margin: 0; padding: 0; }
.page-tiles__list > li { list-style: none; margin: 0; }
.page-tiles .page-tiles__item {
  display: flex; flex-direction: column; gap: .15rem; height: 100%;
  padding: .4rem .6rem; border: 1px solid var(--auditer-card-border);
  border-left: 4px solid var(--page-color, var(--auditer-card-border));
  border-radius: var(--pico-border-radius); background: var(--auditer-card-bg);
  color: inherit; text-decoration: none; font-size: var(--fs-md);
}
.page-tiles .page-tiles__item:hover { background: var(--auditer-hover-bg); }
.page-tiles .page-tiles__item.is-current { border-color: var(--pico-primary); border-left-color: var(--page-color, var(--pico-primary)); box-shadow: 0 0 0 1px var(--pico-primary); }
.page-tiles .page-tiles__item.has-fail { background: var(--auditer-fail-bg); }
.page-tiles__item .page-chip { font-size: var(--fs-md); }
.page-tiles__name { font-weight: 600; color: var(--auditer-text-strong); }
.page-tiles__counts { font-size: var(--fs-sm); }
.page-tiles__fail { color: var(--auditer-fail-text); font-weight: 600; }
.page-tiles__review { color: var(--auditer-partial-text); font-weight: 600; }
.page-tiles__muted { color: var(--auditer-text-muted); }
/* Rozkład wyników jednego kryterium na podstrony (wyniki). */
.page-spread { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem; margin: .4rem 0 0; font-size: var(--fs-md); }
.page-spread__label { font-weight: 650; }
.page-spread a { display: inline-flex; align-items: baseline; gap: .3rem; text-decoration: none; color: inherit; }
.page-spread a:hover .page-chip__code { outline: 2px solid var(--pico-primary); outline-offset: 1px; }
.page-spread a[aria-current] { font-weight: 700; text-decoration: underline; }

/* ---- Ocena: wspólna nawigacja trybów (audits/_ocena_nav.html) --------------
   Projekt ma trzy zakładki (Przegląd, Ocena, Raport). Wewnątrz Oceny te cztery
   linki prowadzą do wyników, checklisty, testów tematycznych i narzędzi. */
/* Drugi poziom nawigacji ma inny kształt niż zakładki projektu (podkreślenie) — przełącznik
   segmentowy, żeby było jasne, że to tryby wewnątrz „Oceny”, a nie kolejne zakładki. */
.ocena-nav {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .4rem 1rem; margin: 0 0 1rem;
}
.ocena-nav__modes {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px;
  background: var(--auditer-na-bg); border: 1px solid var(--auditer-muted-border); border-radius: 8px;
}
.ocena-nav__item,
.ocena-nav__tools {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 2rem;
  padding: .3rem .85rem; border-radius: 6px;
  color: var(--auditer-text-muted); font-weight: 600; font-size: var(--fs-md); text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.ocena-nav__item:hover { color: var(--auditer-text-strong); background: var(--auditer-hover-bg); }
.ocena-nav__item.is-current {
  color: var(--pico-primary); background: var(--auditer-card-bg);
  box-shadow: 0 0 0 1px var(--auditer-card-border), 0 1px 2px var(--auditer-shadow);
}
.ocena-nav__tools { margin-left: auto; border: 1px solid transparent; }
.ocena-nav__tools:hover { color: var(--auditer-text-strong); border-color: var(--auditer-card-border); }
.ocena-nav__tools.is-current { color: var(--pico-primary); border-color: var(--pico-primary); }
/* Strony wewnątrz „Oceny”: tytuł niższego rzędu niż na Przeglądzie — miejsce wskazuje już nawigacja. */
main:has(.ocena-nav) h1 {
  font-size: var(--fs-xl); margin-top: 0; margin-bottom: .5rem; font-weight: 700; color: var(--auditer-text-strong);
}
/* …a sekcje pod nim o stopień niżej (h1 22 px → h2 18 px), poza tytułem kryterium w panelu. */
main:has(.ocena-nav) h2:not(.check-panel__title) { font-size: var(--fs-lg); }
/* Liczniki i postęp: cyfry o stałej szerokości, żeby nie skakały przy zmianie wartości. */
table, progress, .tag, .project-nav__badge, .project-nav__figure, .vq-bar, .tool-row__figure,
.audit-workflow__detail, .checklist-head__progress, .nav-criterion__badge, .page-tiles__counts {
  font-variant-numeric: tabular-nums;
}

/* Szczegóły audytu na Przeglądzie — domyślnie zwinięte, żeby główna akcja była na górze. */
.audit-details { margin: 0 0 1.5rem; border: 1px solid var(--auditer-card-border); border-radius: var(--pico-border-radius); background: var(--pico-card-background-color); }
.audit-details > summary { padding: .85rem 1.1rem; cursor: pointer; font-weight: 650; color: var(--auditer-text-strong); }
.audit-details[open] > summary { border-bottom: 1px solid var(--auditer-muted-border); }
.audit-details__body { padding: 1rem 1.1rem; }
.audit-details__body > :last-child { margin-bottom: 0; }
.audit-details__grid { display: grid; gap: 1rem; }
@media (min-width: 900px) { .audit-details__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.audit-summary { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin: .35rem 0 .9rem; padding: 0; list-style: none; color: var(--auditer-text-muted); font-size: var(--fs-md); }
.audit-summary li { margin: 0; }
.audit-summary strong { color: var(--auditer-text-strong); }

/* Ustawienia raportu: opcjonalny, długi formularz schowany pod jednym podsumowaniem. */
.report-settings-details {
  margin: 0 0 1.5rem; border: 1px solid var(--auditer-card-border); border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color);
}
.report-settings-details > summary { padding: .9rem 1.1rem; cursor: pointer; font-weight: 650; color: var(--auditer-text-strong); }
.report-settings-details[open] > summary { border-bottom: 1px solid var(--auditer-muted-border); }
.report-settings-details > #report-settings-form { padding: 0 1.1rem 1.1rem; }
.report-settings-details > #report-settings-form > :first-child { margin-top: 1rem; }

/* ---- Odporne zawijanie długich nazw podstron i formularzy na wąskich ekranach ----
   Długie nazwy (np. „P3 «Z myślą o Niepodległej» – audycje…”) rozpychały panel oceny,
   kolejkę weryfikacji i select „Sprawdź ręcznie na podstronie” poza ekran. */
.page-scope { min-width: 0; }
.page-scope__options { min-width: 0; }
.page-scope__option { flex-wrap: wrap; min-width: 0; }
.page-scope__auto { margin-left: auto; }
.ext-launch__row select { min-width: 0; max-width: 100%; flex: 1 1 12rem; }
.page-chip { max-width: 100%; }
.page-chip__name { max-width: 100%; }
.vq-card__where { min-width: 0; }
.vq-card__where > strong { min-width: 0; }
.vq-dismiss { flex-wrap: wrap; }
.vq-dismiss input { flex: 1 1 10rem; width: auto; min-width: 0; }

/* Pico ustawia label z checkboxem na „fit-content”; w wąskim panelu oceny przez to
   długi chip podstrony rozpychał fieldset. Wymuszamy pełną szerokość wiersza. */
.page-scope .page-scope__option { width: auto; }
.evidence__upload select { min-width: 0; max-width: 100%; }

/* Wiersz problemu w checkliście: na telefonie metadane z chipami schodzą do drugiej linii. */
@media (max-width: 700px) {
  .problem-row { flex-wrap: wrap; }
  .problem-row__meta { flex: 1 1 100%; order: 4; white-space: normal; }
  .problem-row__chevron { order: 3; }
}

/* Kolejka „Do decyzji”: domyślnie jedna karta naraz — bez 24 tys. pikseli przewijania.
   Wyłączenie przełącznika pokazuje wszystkie karty i notki z „Cofnij”. */
#vq-list.vq-focus-mode .vq-rule { display: none; }
#vq-list.vq-focus-mode .vq-rule.is-current-section { display: block; }
#vq-list.vq-focus-mode .vq-card:not(.is-review-current) { display: none; }
#vq-list.vq-focus-mode .vq-card.is-review-current { box-shadow: 0 0 0 2px var(--auditer-focus); }

/* Na wąskim ekranie baner zakresu pokazuje najpierw jedno zdanie; pełna lista podstron
   pojawia się po rozwinięciu. Mniej przewijania przed właściwą oceną/wynikami. */
@media (max-width: 640px) {
  .scope-banner__pages { display: none; }
  .scope-banner[open] .scope-banner__pages { display: inline-flex; }
}

/* Telefon: nawigacja Oceny bez „Narzędzia” (są linkowane kontekstowo i w szczegółach
   audytu), a panel oceny jest przed listą problemów, żeby status był od razu pod ręką. */
@media (max-width: 640px) {
  .ocena-nav__tools { display: none; }
}
@media (max-width: 900px) {
  .cp-grid { display: flex; flex-direction: column; align-items: stretch; }
  .cp-assess { order: -1; }
}

/* Flex-kolumna checklisty na telefonie: elementy nie mogą rosnąć do min-content
   długich nazw podstron/opcji — inaczej cała strona przewija się w poziomie. */
.cp-grid > *, .cp-findings, .cp-assess, .ext-launch, .ext-launch__row { min-width: 0; }
label.page-scope__option { width: 100%; }

/* Cztery statusy oceny mieszczą się w dwóch rzędach na telefonie zamiast czterech. */
@media (max-width: 640px) {
  .status-choice__option { padding: .35rem .6rem; font-size: var(--fs-md); }
}

/* ---- Zakładka „Raport”: braki widoczne od razu (reports/settings.html). */
.report-ready { margin-bottom: 1rem; }
.report-ready__summary { margin-bottom: 0.5rem; }
.report-ready__list { list-style: none; padding: 0; margin: 0 0 0.25rem; display: grid; gap: 0.35rem; }
.report-ready__list li { list-style: none; display: flex; align-items: baseline; gap: 0.5rem; font-size: var(--fs-md); }

/* ---- Test klawiatury: filtr „tylko przystanki z problemem” (audits/keyboard_test.html). */
.kbd-filter { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 1rem; font-size: var(--fs-md); }
.kbd-problems-only table[data-has-problems] tbody tr:not(.stop-problem) { display: none; }

/* ---- Objaśnienie AI przy wyniku skanu w panelu kryterium (audits/_ai_guidance.html). */
.ai-guidance { margin: 0.4rem 0; font-size: var(--fs-md); }
.ai-guidance > summary { font-weight: 600; }
.ai-guidance__body { padding: 0.5rem 0.75rem; border-left: 3px solid var(--pico-primary-background); background: var(--auditer-notchecked-bg); border-radius: 0 6px 6px 0; }
.ai-guidance__body h4 { font-size: var(--fs-md); margin: 0.5rem 0 0.15rem; }
.ai-guidance__body p { margin-bottom: 0.3rem; }