/* Dostepnosc panelu i Dzwonka: ograniczony ruch, wysoki kontrast, tryb duzej czcionki, okno "Ustawienia konta".
   Atrybuty na <html> ustawia dostepnosc.js z preferencji urzadzenia (data-kontrast, data-tryb-czcionki, data-ruch).
   Bez stylow inline (CSP panelu). Plik laduje sie po panel.css i dzwonek.css, wiec wygrywa z nimi kolejnoscia. */

/* ---------- 811: redukcja animacji (systemowa preferencja albo reczny wybor) ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

:root[data-ruch="ograniczony"] *,
:root[data-ruch="ograniczony"] *::before,
:root[data-ruch="ograniczony"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0s !important;
  transition-duration: 0.01ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}

/* ---------- 810: tryb duzej czcionki ---------- */
/* Panel skaluje tekst zmienna --skala (panel.css); selektor z dwoma atrybutami wygrywa z ręcznym A-/A+. */
:root[data-tryb-czcionki="duza"]:not([data-x]) {
  --skala: 1.3;
}

:root[data-tryb-czcionki="bardzo-duza"]:not([data-x]) {
  --skala: 1.6;
}

:root[data-tryb-czcionki="duza"] .przycisk,
:root[data-tryb-czcionki="bardzo-duza"] .przycisk {
  min-height: 44px;
}

:root[data-tryb-czcionki] .gora .tytul,
:root[data-tryb-czcionki] .gora .tytul * {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Dzwonek ma rozmiary w px bez zmiennej skali: powiekszamy cala strone. */
:root[data-tryb-czcionki="duza"] body.dzwonek-strona {
  zoom: 1.2;
}

:root[data-tryb-czcionki="bardzo-duza"] body.dzwonek-strona {
  zoom: 1.4;
}

/* ---------- 808: link "Przejdz do tresci" i widoczny fokus ---------- */
.pomin-nawigacje {
  position: fixed;
  left: 8px;
  top: -64px;
  z-index: 10000;
  padding: 10px 14px;
  border-radius: var(--r-2);
  background: var(--akcent-tlo, #0b5cad);
  color: var(--akcent-tekst, #ffffff);
  font-weight: 600;
  text-decoration: none;
}

.pomin-nawigacje:focus {
  top: 8px;
  outline: 3px solid var(--tekst, #ffffff);
  outline-offset: 2px;
}

[role="dialog"]:focus,
[role="dialog"] [tabindex="-1"]:focus {
  outline: none;
}

/* ---------- 812: wysoki kontrast: jasny ---------- */
:root[data-kontrast="wysoki"] {
  color-scheme: light;
  --tlo: #ffffff;
  --panel: #ffffff;
  --panel-2: #eeeeee;
  --tekst: #000000;
  --przygaszony: #1f2933;
  --ramka: #000000;
  --ramka-pola: #000000;
  --akcent: #00298a;
  --akcent-tlo: #00298a;
  --akcent-tekst: #ffffff;
  --ostrzezenie: #5c3000;
  --sukces: #0b4a1a;
  --blad: #8a0f06;
  --wygrane-tlo: #e0f5e5;
  --przegrane-tlo: #eeeeee;
  --ostrzezenie-tlo: #fff1d6;
  --blad-tlo: #fde7e5;
  --dymek-my: #d5e6fa;
  --dymek-my-ramka: #000000;
  --dymek-klient: #ffffff;
  --ramka-karty: #000000;
  --ramka-mocna: #000000;
  --kolumna-tlo: #eeeeee;
  --akcent-miekki: #e3ebff;
  --prio-niski: #4a5560;
  --prio-sredni: #00298a;
  --prio-wysoki: #7a3d00;
  --prio-pilny: #8a0f06;
}

/* wysoki kontrast: ciemny (wybrany recznie) */
:root[data-kontrast="wysoki"][data-theme="dark"] {
  color-scheme: dark;
  --tlo: #000000;
  --panel: #000000;
  --panel-2: #1a1a1a;
  --tekst: #ffffff;
  --przygaszony: #e3e3e3;
  --ramka: #ffffff;
  --ramka-pola: #ffffff;
  --akcent: #8fd0ff;
  --akcent-tlo: #8fd0ff;
  --akcent-tekst: #000000;
  --ostrzezenie: #ffd27a;
  --sukces: #7dff9a;
  --blad: #ff9a92;
  --wygrane-tlo: #0a2a14;
  --przegrane-tlo: #1a1a1a;
  --ostrzezenie-tlo: #332400;
  --blad-tlo: #3a0d0a;
  --dymek-my: #0a2540;
  --dymek-my-ramka: #ffffff;
  --dymek-klient: #1a1a1a;
  --ramka-karty: #ffffff;
  --ramka-mocna: #ffffff;
  --kolumna-tlo: #0d0d0d;
  --akcent-miekki: #0a2540;
  --prio-niski: #c9c9c9;
  --prio-sredni: #8fd0ff;
  --prio-wysoki: #ffd27a;
  --prio-pilny: #ff9a92;
}

/* wysoki kontrast: ciemny wg systemu (bez recznego motywu jasnego) */
@media (prefers-color-scheme: dark) {
  :root[data-kontrast="wysoki"]:not([data-theme="light"]) {
    color-scheme: dark;
    --tlo: #000000;
    --panel: #000000;
    --panel-2: #1a1a1a;
    --tekst: #ffffff;
    --przygaszony: #e3e3e3;
    --ramka: #ffffff;
    --ramka-pola: #ffffff;
    --akcent: #8fd0ff;
    --akcent-tlo: #8fd0ff;
    --akcent-tekst: #000000;
    --ostrzezenie: #ffd27a;
    --sukces: #7dff9a;
    --blad: #ff9a92;
    --wygrane-tlo: #0a2a14;
    --przegrane-tlo: #1a1a1a;
    --ostrzezenie-tlo: #332400;
    --blad-tlo: #3a0d0a;
    --dymek-my: #0a2540;
    --dymek-my-ramka: #ffffff;
    --dymek-klient: #1a1a1a;
    --ramka-karty: #ffffff;
    --ramka-mocna: #ffffff;
    --kolumna-tlo: #0d0d0d;
    --akcent-miekki: #0a2540;
    --prio-niski: #c9c9c9;
    --prio-sredni: #8fd0ff;
    --prio-wysoki: #ffd27a;
    --prio-pilny: #ff9a92;
  }
}

/* Dzwonek (zawsze ciemny): jasniejsze barwy i rozjasnione tla; zmienne dz- czyta tests/kontrast_css.py (>= 7:1). */
:root[data-kontrast="wysoki"] {
  --dz-tlo-gora: #000000;
  --dz-tlo-srodek: #000000;
  --dz-tlo-dol: #000000;
  --dz-tekst: #ffffff;
  --dz-tekst-2: #f0f0f0;
  --dz-tekst-3: #dcdcdc;
  --dz-fiolet-jasny: #e2deff;
  --dz-zielony: #6dffbb;
  --dz-czerwony: #ff9bad;
  --dz-niebieski: #9bd8ff;
  --dz-bursztyn: #ffd37a;
  --dz-lawenda: #dccfff;
}

:root[data-kontrast="wysoki"] body.dzwonek-strona {
  --tlo-gora: var(--dz-tlo-gora);
  --tlo-srodek: var(--dz-tlo-srodek);
  --tlo-dol: var(--dz-tlo-dol);
  --powierzchnia: #111111;
  --powierzchnia-2: #1c1c1c;
  --krawedz: #ffffff;
  --tekst: var(--dz-tekst);
  --tekst-2: var(--dz-tekst-2);
  --tekst-3: var(--dz-tekst-3);
  --fiolet-jasny: var(--dz-fiolet-jasny);
  --zielony: var(--dz-zielony);
  --czerwony: var(--dz-czerwony);
  --niebieski: var(--dz-niebieski);
  --bursztyn: var(--dz-bursztyn);
  --lawenda: var(--dz-lawenda);
}

:root[data-kontrast="wysoki"] body.dzwonek-strona .tlo {
  background: #000000;
}

/* Struktura trybu wysokiego kontrastu: grube obramowania, podkreslone linki, mocniejszy fokus. */
:root[data-kontrast="wysoki"] a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

:root[data-kontrast="wysoki"] .przycisk,
:root[data-kontrast="wysoki"] input,
:root[data-kontrast="wysoki"] select,
:root[data-kontrast="wysoki"] textarea {
  border-width: 2px;
  border-style: solid;
  border-color: var(--ramka-pola, #ffffff);
}

:root[data-kontrast="wysoki"] a:focus-visible,
:root[data-kontrast="wysoki"] button:focus-visible,
:root[data-kontrast="wysoki"] summary:focus-visible,
:root[data-kontrast="wysoki"] input:focus-visible,
:root[data-kontrast="wysoki"] select:focus-visible,
:root[data-kontrast="wysoki"] textarea:focus-visible,
:root[data-kontrast="wysoki"] [tabindex]:focus-visible {
  outline: 4px solid var(--tekst, #ffffff);
  outline-offset: 2px;
  box-shadow: 0 0 0 7px var(--tlo, #000000);
}

/* Windows "Kontrast systemowy": kolory zostaja systemowe, dokladamy tylko obramowanie i fokus. */
@media (forced-colors: active) {
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }

  button,
  .przycisk {
    border: 1px solid ButtonText;
  }
}

/* ---------- okno "Ustawienia konta" (dostepnosc.js) ---------- */
/* Kolory okna z zestawu --uk-*: w panelu z jego zmiennych, na stronie Dzwonka (zawsze ciemnej) z wlasnych. */
.ustawienia-konta-tlo {
  --uk-tlo: var(--panel, #ffffff);
  --uk-pole: var(--panel-2, #e6eaf0);
  --uk-tekst: var(--tekst, #1b1f24);
  --uk-przygaszony: var(--przygaszony, #566070);
  --uk-ramka: var(--ramka-pola, #737d8a);
  --uk-akcent: var(--akcent-tlo, #0b5cad);
  --uk-akcent-tekst: var(--akcent-tekst, #ffffff);
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.55);
}

body.dzwonek-strona .ustawienia-konta-tlo {
  --uk-tlo: #14153a;
  --uk-pole: #23244f;
  --uk-tekst: #f4f3ff;
  --uk-przygaszony: #c4c1e8;
  --uk-ramka: #adaad6;
  --uk-akcent: #5b49e0;
  --uk-akcent-tekst: #ffffff;
}

:root[data-kontrast="wysoki"] body.dzwonek-strona .ustawienia-konta-tlo {
  --uk-tlo: #000000;
  --uk-pole: #1c1c1c;
  --uk-tekst: #ffffff;
  --uk-przygaszony: #f0f0f0;
  --uk-ramka: #ffffff;
  --uk-akcent: #ffffff;
  --uk-akcent-tekst: #000000;
}

.ustawienia-konta-okno {
  width: min(480px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 20px;
  border-radius: var(--r-3);
  border: 1px solid var(--uk-ramka);
  background: var(--uk-tlo);
  color: var(--uk-tekst);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.ustawienia-konta-okno h2 {
  margin: 0 0 6px;
  font-size: 1.25em;
  color: var(--uk-tekst);
}

.ustawienia-konta-opis {
  margin: 0 0 14px;
  color: var(--uk-przygaszony);
  font-size: var(--fs-1);
}

.ustawienia-konta-pole {
  display: grid;
  gap: 4px;
  margin: 0 0 14px;
}

.ustawienia-konta-pole label {
  font-weight: 600;
}

.ustawienia-konta-pole select {
  min-height: 44px;
  padding: 8px 10px;
  border-radius: var(--r-2);
  border: 1px solid var(--uk-ramka);
  background: var(--uk-pole);
  color: var(--uk-tekst);
  font: inherit;
}

.ustawienia-konta-podpowiedz {
  margin: 0;
  color: var(--uk-przygaszony);
  font-size: var(--fs-1);
}

.ustawienia-konta-przyciski {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.ustawienia-konta-przyciski button {
  min-height: 44px;
  padding: 8px 18px;
  border-radius: var(--r-2);
  border: 1px solid var(--uk-ramka);
  background: var(--uk-akcent);
  color: var(--uk-akcent-tekst);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Przetlumaczona wiadomosc klienta (przycisk "Przetlumacz" w karcie). */
.wiadomosc-tlumaczenie {
  margin: 6px 0 0;
  padding: 8px 10px;
  border-left: 3px solid var(--akcent, #0b5cad);
  border-radius: var(--r-1);
  background: var(--panel-2, #e6eaf0);
  white-space: pre-wrap;
}

.wiadomosc-tlumaczenie-opis {
  display: block;
  margin-bottom: 4px;
  font-size: var(--fs-1);
  color: var(--przygaszony, #566070);
}

/* Strona informacji o dostepnosci (dostepnosc.html). */
.dostepnosc-strona {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px 48px;
  line-height: 1.55;
}

.dostepnosc-strona h2 {
  margin: 24px 0 8px;
}

.dostepnosc-strona li {
  margin: 0 0 8px;
}

.dostepnosc-strona a {
  color: var(--akcent);
}

/* ---------- 817: duze ikony i przyciski (panel w em, Dzwonek w px) ---------- */
:root[data-ikony="duze"] .ikona {
  width: 1.7em;
  height: 1.7em;
}

:root[data-ikony="bardzo-duze"] .ikona {
  width: 2.3em;
  height: 2.3em;
}

:root[data-ikony="duze"] .przycisk,
:root[data-ikony="duze"] .dolny-pasek button {
  min-height: 52px;
}

:root[data-ikony="bardzo-duze"] .przycisk,
:root[data-ikony="bardzo-duze"] .dolny-pasek button {
  min-height: 64px;
}

:root[data-ikony="duze"] .dzwonek-przycisk,
:root[data-ikony="duze"] .menu-wiecej-przycisk,
:root[data-ikony="duze"] .dolny-pasek button {
  min-width: 52px;
}

:root[data-ikony="bardzo-duze"] .dzwonek-przycisk,
:root[data-ikony="bardzo-duze"] .menu-wiecej-przycisk,
:root[data-ikony="bardzo-duze"] .dolny-pasek button {
  min-width: 64px;
}

:root[data-ikony="duze"] body.dzwonek-strona .ikona {
  width: 34px;
  height: 34px;
}

:root[data-ikony="bardzo-duze"] body.dzwonek-strona .ikona {
  width: 46px;
  height: 46px;
}

:root[data-ikony="duze"] body.dzwonek-strona .ikona.duza {
  width: 84px;
  height: 84px;
}

:root[data-ikony="bardzo-duze"] body.dzwonek-strona .ikona.duza {
  width: 108px;
  height: 108px;
}

:root[data-ikony="duze"] .dolny-pasek .ikona {
  width: 34px;
  height: 34px;
}

:root[data-ikony="bardzo-duze"] .dolny-pasek .ikona {
  width: 44px;
  height: 44px;
}

:root[data-ikony="duze"] body.dzwonek-strona button:not(.przelacznik),
:root[data-ikony="duze"] body.dzwonek-strona .akcja {
  min-height: 56px;
}

:root[data-ikony="bardzo-duze"] body.dzwonek-strona button:not(.przelacznik),
:root[data-ikony="bardzo-duze"] body.dzwonek-strona .akcja {
  min-height: 68px;
}

/* Formularz Nowa szansa na telefonie: jedna kolumna, pola min. 44 px (bez przewijania poziomego). */
@media (max-width: 699px) {
  .nowa-szansa {
    grid-template-columns: minmax(0, 1fr);
  }
  .nowa-szansa input,
  .nowa-szansa select,
  .nowa-szansa .przycisk {
    min-height: 44px;
    font-size: var(--fs-3);
  }
  .nowa-szansa textarea {
    min-height: 88px;
    font-size: var(--fs-3);
  }
  .nowa-szansa button[type="submit"] {
    margin-bottom: 64px;
  }
  .pole-fokus .dolny-pasek {
    display: none;
  }
  body .toasty {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
  /* Toast obok przycisku "+" (nie na nim): z boku pływającego przycisku, wyrównany do jego dołu. */
  body:not(.karta-otwarta) .toasty {
    right: calc(16px + 56px + 8px);
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
  :root[data-reka] body:not(.karta-otwarta) .toasty {
    right: calc(16px + 64px + 8px);
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }
  :root[data-reka="lewa"] body:not(.karta-otwarta) .toasty {
    right: 8px;
    left: calc(16px + 64px + 8px);
  }
}
/* Telefon: dotyk i czytelność (cele min. 44 px, tekst 15-16 px, zakładki etapów, Kolejka nad paskiem). */
@media (max-width: 699px) {
  :root {
    --fs-1: calc(15px * var(--skala));
    --fs-2: calc(16px * var(--skala));
  }

  body {
    font-size: calc(16px * var(--skala));
  }

  .pomin-nawigacje,
  #dzwonek-powiadomien {
    min-height: 44px;
    min-width: 44px;
  }

  /* Etapy jako zakładki z licznikiem nad listą, zamiast jednej kolumny ze wszystkimi kartami. */
  .kanban.telefon {
    min-width: 0;
  }

  .kanban-zakladki {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100vw;
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    gap: var(--s-2);
    margin: 0 calc(-1 * var(--s-3)) var(--s-2);
    padding: var(--s-2) var(--s-3);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    background: var(--tlo);
    border-bottom: 1px solid var(--ramka);
  }

  .kanban-zakladki::-webkit-scrollbar {
    display: none;
  }

  .kanban-zakladki {
    scroll-snap-type: x proximity;
    scroll-padding: 0 var(--s-3);
  }

  .kanban-zakladka {
    scroll-snap-align: start;
  }

  body > .karta-leada.duch-przeciagania.nad-zakladkami {
    opacity: 0.18;
  }

  .kanban.przeciaganie .kanban-zakladki {
    scroll-snap-type: none;
    margin-inline: calc(-1 * var(--s-3) - 76px);
    scroll-padding-inline: 0;
  }

  .kanban-zakladka.cel-upuszczenia {
    background: var(--akcent-miekki);
    outline: 2px solid var(--akcent);
    outline-offset: -2px;
    border-radius: var(--r-2);
  }

  .kanban-zakladka {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 44px;
  }

  /* Zakładki etapów: puste (poza aktywną) zwinięte do skrótu i odsunięte na koniec, w trakcie przeciągania
     rozwinięte w kolejności lejka, żeby każdy etap był celem upuszczenia. */
  .kanban-zakladki > .kanban-zakladka[role="tab"] {
    padding-inline: 4px;
    gap: var(--s-1);
    font-size: var(--fs-1);
  }

  .kanban-zakladka .zak-skrot {
    display: none;
  }

  .kanban:not(.przeciaganie) .kanban-zakladka-pusta {
    order: 1;
    color: var(--przygaszony);
  }

  .kanban:not(.przeciaganie) .kanban-zakladka-pusta .zak-pelny {
    display: none;
  }

  .kanban:not(.przeciaganie) .kanban-zakladka-pusta .zak-skrot {
    display: inline;
    font-size: var(--fs-1);
  }

  /* Wygaszenie na krawędzi przewijanego paska zakładek pokazuje, w którą stronę da się jeszcze przewinąć
     (klasy ma-lewo / ma-prawo z panel.js; maska stoi w miejscu, nie przewija się z zawartością). */
  .kanban-zakladki.ma-prawo {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }

  .kanban-zakladki.ma-lewo {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 28px);
    mask-image: linear-gradient(to right, transparent, #000 28px);
  }

  .kanban-zakladki.ma-lewo.ma-prawo {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  }

  .kanban-zakladka .licznik {
    min-width: 20px;
    padding: 0 4px;
    font-size: var(--fs-1);
    line-height: 22px;
    text-align: center;
    color: var(--przygaszony);
    background: var(--panel-2);
    border-radius: var(--r-pelny);
  }

  .kanban.telefon .kolumna:not(.kolumna-czekajacych) > .kolumna-naglowek,
  .kanban.telefon .kolumna-poza-zakladka {
    display: none;
  }

  /* Karta: tytuł w dwóch liniach, "o co chodzi" czytelne, wybór etapu z etykietą. */
  .karta-lead-nazwa {
    font-size: var(--fs-3);
  }

  .karta-leada-tresc > .karta-lead-o-co {
    display: -webkit-box;
    white-space: normal;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .karta-leada .etap-wybor {
    min-height: 44px;
    font-size: var(--fs-2);
  }

  /* Ekran Dziś: nazwa w dwóch liniach zamiast uciętej wielokropkiem. */
  .sd-nazwa {
    display: -webkit-box;
    white-space: normal;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
  }

  .sd-wiersz {
    min-height: 48px;
    align-items: center;
  }

  .sd-meta {
    flex: none;
    align-self: start;
    line-height: 1.3;
    padding-top: 1px;
  }

  /* Kolejka: panel stoi nad dolnym paskiem, wiersz zadania jest całym celem dotyku. */
  .panel-zadan {
    bottom: calc(64px + env(safe-area-inset-bottom));
    z-index: 10;
    padding-bottom: var(--s-4);
    border-radius: var(--r-3) var(--r-3) 0 0;
    overscroll-behavior: contain;
    transition: transform var(--ruch-1) linear;
  }

  .zadanie-kolejki {
    position: relative;
    min-height: 56px;
    padding: var(--s-1) var(--s-2);
    touch-action: pan-y;
  }

  .zadanie-kolejki.gest-zrobione {
    background: var(--wygrane-tlo);
    border-color: var(--sukces);
  }

  .zadanie-kolejki-gora input {
    width: 44px;
    height: 44px;
    margin: 0;
    flex: none;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
  }

  .zadanie-kolejki-gora input::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    margin: 10px;
    box-sizing: border-box;
    border: 2px solid var(--ramka-pola);
    border-radius: 6px;
    background: var(--panel);
  }

  .zadanie-kolejki-gora input:checked::before {
    background: var(--akcent-tlo);
    border-color: var(--akcent-tlo);
  }

  .zadanie-kolejki-gora .odnosnik {
    min-height: 44px;
    text-align: left;
    font-size: var(--fs-2);
  }

  .przesun-termin .przycisk.maly {
    min-height: 44px;
  }

  /* Klawiatura na ekranie: "+" i "Dyktuj" nie zasłaniają pola. */
  .pole-fokus .fab-szansa,
  .pole-fokus .dyktuj-do-pola {
    display: none;
  }
}

@media (max-width: 699px) {
  .zadanie-kolejki.gest-w-toku {
    transform: translateX(24px);
  }

  .zadanie-kolejki.gest-zrobione::after {
    content: "Puść: zrobione";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 600;
    color: var(--sukces);
  }

  .panel-zadan.gest-zamykanie {
    opacity: 0.6;
  }
}

/* Telefon: znaczek importow tylko przy problemie, inaczej sciska naglowek. */
@media (max-width: 699px) {
  #stan-importow.sukces {
    display: none;
  }
}

.kotwica-tresci {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ustawienia-konta-podpowiedz a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}