/*
 * TATRY PLANER — układ powłoki mobilnej
 * =====================================
 *
 * Ekran startowy aplikacji. NIE jest to drugi design system: kolory, kroje,
 * promienie i prymitywy przychodzą z tokens.css, marka.css i prymitywy.css,
 * tak samo jak w planerze. Tutaj jest wyłącznie układ — to, czego style.css
 * nie opisuje, bo opisuje mapę, panel boczny i arkusz.
 *
 * Plik jest osobny, żeby powłoka nie wciągała 72 kB układu planera po to,
 * by narysować cztery karty. To ta sama oszczędność, co przy modułach:
 * powłoka ściąga tyle, ile jej potrzeba, i ani bajta więcej.
 */

/* ---------------------------------------------------------------
   POWIERZCHNIA
   Ekran startowy jest ZAWSZE ciemny, niezależnie od wybranego motywu.
   To nie niedopatrzenie: interfejs leży tu na zdjęciu gór, a jasne
   karty na fotografii to albo mleczna zupa, albo walka o kontrast
   przegrana z góry. Motyw wraca do gry w planerze i w trybie
   wycieczki — czyli tam, gdzie tłem jest mapa albo papier.
   --------------------------------------------------------------- */

html, body {
  height: 100%;
}

/* `hidden` musi wygrywać z każdym `display` z tego arkusza — inaczej atrybut
   nic nie robi i element, który miał zniknąć, stoi dalej.

   Pułapka zadziałała tu DWA RAZY, więc reguła jest teraz jedna i szeroka.
   Pierwszy raz na przycisku „Wszystkie" (obejmowała tylko potomków `.start`),
   drugi przy przełączaniu ekranów: `.start` ma `display: flex`, więc
   `hidden` na nim samym nie robiło nic i ekran startowy malował się NA
   ekranie wycieczki. W obu przypadkach wyglądało to na niedziałający
   JavaScript, a to arkusz go przekrzykiwał. */
.apka [hidden],
.apka[hidden] { display: none !important; }

body.apka {
  margin: 0;
  overflow: hidden;
  background: var(--forest-deep);
  color: var(--sand);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------
   TŁO — trzy warstwy pod interfejsem

   1. apla marki (gradient grzbietu) — jest zawsze;
   2. zdjęcie gór — wchodzi, gdy `--tlo-zdjecie` wskaże plik;
   3. winieta, która przyciemnia górę i dół kadru pod tekst.

   Zdjęcia dziś nie ma i ekran ma bez niego wyglądać skończenie.
   Warstwa druga jest więc pusta, dopóki ktoś nie ustawi zmiennej —
   podmiana to jedna linijka, nie przebudowa ekranu.
   --------------------------------------------------------------- */

.tlo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.tlo-apla {
  position: absolute;
  inset: 0;
  background-image: var(--gradient-forest);
}

.tlo-zdjecie {
  position: absolute;
  inset: 0;
  background: var(--tlo-zdjecie, none) center / cover no-repeat;
  /* `luminosity` zdejmuje ze zdjęcia jego własne barwy i zostawia rzeźbę —
     dzięki temu dowolna fotografia wtapia się w zieleń marki, zamiast
     wnosić swoje niebo. Ten sam zabieg co w prototypie. */
  mix-blend-mode: luminosity;
  opacity: 0.4;
}

.tlo-winieta {
  position: absolute;
  inset: 0;
  /* Dolna połowa ciemnieje mocniej niż w prototypie i to jest poprawka
     z pomiaru na najjaśniejszym zdjęciu z zestawu (grań latem, białe niebo):
     przyciski i podpis pod nimi lądowały tam na rozświetlonej trawie
     i traciły kontrast. Górę trzyma karta pogody, która jest na szkle. */
  background:
    radial-gradient(120% 80% at 50% 0%, oklch(1 0 0 / 0.16), transparent 60%),
    linear-gradient(to bottom,
      color-mix(in oklab, var(--forest-deep) 58%, transparent) 0%,
      transparent 30%,
      transparent 48%,
      color-mix(in oklab, var(--forest-deep) 62%, transparent) 78%,
      color-mix(in oklab, var(--forest-deep) 90%, transparent) 100%);
}

/* ---------------------------------------------------------------
   UKŁAD EKRANU
   Kolumna z marginesami bezpiecznymi. Karty u góry i u dołu są
   przyklejone do krawędzi, środek (znak) rozpycha się tym, co
   zostanie — na małym telefonie skurczy się pierwszy, i słusznie.
   --------------------------------------------------------------- */

.start {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding:
    calc(12px + env(safe-area-inset-top, 0px))
    calc(16px + env(safe-area-inset-right, 0px))
    calc(12px + env(safe-area-inset-bottom, 0px))
    calc(16px + env(safe-area-inset-left, 0px));
  box-sizing: border-box;
}

/* ---------------------------------------------------------------
   KARTA „GDZIE JESTEŚ"
   Dwie natury na jednej karcie: lewa strona liczy się na miejscu
   i jest zawsze, prawa przychodzi z sieci i bywa pusta. Układ musi
   znieść jedno i drugie — stąd `min-width: 0` i brak sztywnych
   szerokości.
   --------------------------------------------------------------- */

.teren {
  padding: 14px 16px;
  flex-shrink: 0;
}

.teren-gora {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.teren-gdzie { min-width: 0; }

.etykieta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--sand) 60%, transparent);
}

.etykieta svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }

.teren-miejsce {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.teren-blizej {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: color-mix(in oklab, var(--sand) 72%, transparent);
}

.teren-pogoda {
  text-align: right;
  flex-shrink: 0;
}

.teren-stopnie {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  /* Wyzerowany margines akapitu — i to nie jest kosmetyka. Domyślny margines
     `<p>` to 1em LICZONE OD JEGO WŁASNEGO KROJU, więc przy trzydziestu
     pikselach temperatury robił trzydzieści pikseli powietrza nad i pod nią.
     Górny wiersz karty rósł przez to do dziewięćdziesięciu pikseli przy
     treści wysokiej na sześćdziesiąt trzy, a nadmiar lądował jako dziura
     między „gdzie jesteś" a paskiem pogody. */
  margin: 0;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
}

.teren-stopnie svg { width: 20px; height: 20px; }

/* Jeden wiersz na wszystko, co opisuje pogodę i porę: zjawisko, wiatr, opady,
   zmrok. Bez kreski nad nim i bez oddechu, który ta kreska wymuszała — karta
   ma tu być zwarta, a miejsce na ekranie startowym należy do zdjęcia
   i przycisków. Zawijanie zostaje: „Częściowe zachmurzenie" plus zmrok
   z zachodem w nawiasie nie zmieści się w jednej linii na wąskim telefonie,
   a wtedy lepiej złamać wiersz niż uciąć treść. */
.teren-dol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 8px;
  font-size: 11.5px;
  color: color-mix(in oklab, var(--sand) 78%, transparent);
}

/* Nagłówek wiersza — pełna jasność, tak jak liczby, bo to jest jedno
   z dwóch słów, po które sięga się wzrokiem najpierw (drugim jest temperatura). */
.teren-zjawisko { color: var(--sand); }

/* Zachód w nawiasie — dopisek do zmroku, nie druga liczba. Mniejszy i bledszy
   po to, żeby cały wiersz mieścił się w jednej linii na telefonie 375 px:
   przy dłuższych nazwach zjawisk („Częściowe zachmurzenie") wiersz i tak się
   złamie, ale przy krótkich stoi tak, jak ma stać. */
.teren-zachod {
  font-size: 10.5px;
  opacity: 0.6;
}

.teren-dol b {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--sand);
}

/* Wiek danych z sieci. Świeże milczy — mówi dopiero to, co się zestarzało,
   bo tylko wtedy jest to informacja, a nie szum. */
.teren-wiek {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: color-mix(in oklab, var(--sand) 55%, transparent);
}

/* Przycisk zgody na położenie — pytamy dopiero wtedy, gdy ekran ma
   z pozycji zrobić użytek, i wtedy widać, po co. */
.teren-pytanie {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 14px;
  border: 1px solid oklch(1 0 0 / 0.22);
  border-radius: var(--radius-pill);
  background: oklch(1 0 0 / 0.08);
  color: var(--sand);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.teren-pytanie:hover { background: oklch(1 0 0 / 0.14); }

/* Wejście w prognozę godzinową. Pastylka wyrównana do prawej, czyli pod
   temperaturą, do której się odnosi — po lewej stoi miejsce i to jego
   dotyczy przycisk „pokaż, gdzie jestem". Dwie prośby w jednym rogu karty
   kazałyby wybierać między nimi wzrokiem. */
.teren-prognoza {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 8px 0 0 auto;
  padding: 7px 10px 7px 12px;
  border: 1px solid oklch(1 0 0 / 0.18);
  border-radius: var(--radius-pill);
  background: oklch(1 0 0 / 0.07);
  color: var(--sand);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.teren-prognoza:hover { background: oklch(1 0 0 / 0.13); }

.teren-prognoza svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
}

.teren-prognoza-strzalka {
  width: 13px; height: 13px;
  opacity: 0.55;
}

/* ---------------------------------------------------------------
   EKRAN PROGNOZY
   Układ z aplikacji Pogoda na iPhonie, bo ten porządek — duża
   temperatura, pas godzin, kafle — ludzie mają już w głowie.
   Wszystko poza pasem stoi w kolumnie; pas jeździ w bok i jest
   jedynym miejscem w tej aplikacji, gdzie to jest w porządku:
   oś czasu naprawdę biegnie w prawo.
   --------------------------------------------------------------- */

.pg-tresc {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

.pg-tresc::-webkit-scrollbar { display: none; }

.pg-teraz {
  padding: 4px 2px 16px;
  text-align: center;
}

.pg-teraz .etykieta { justify-content: center; }

.pg-stopnie {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 10px 0 0;
  font-family: var(--font-display);
  /* Duża, ale nie tak duża, żeby zepchnąć pas godzin poniżej krawędzi
     ekranu — na telefonie o wysokości 667 px to jest realna granica. */
  font-size: clamp(46px, 15vw, 62px);
  font-weight: 600;
  line-height: 1;
}

.pg-stopnie svg {
  width: clamp(30px, 9vw, 38px);
  height: clamp(30px, 9vw, 38px);
  fill: none; stroke: currentColor; stroke-width: 1.6;
}

.pg-opis {
  margin: 8px 0 0;
  font-size: 15px;
  color: color-mix(in oklab, var(--sand) 86%, transparent);
}

.pg-pod {
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: color-mix(in oklab, var(--sand) 62%, transparent);
}

/* Dwa zdania, które czyta się naprawdę. Stoją nad pasem, bo są jego
   streszczeniem — kto przeczyta tylko je, wie już, czy wychodzić. */
.pg-podsumowanie {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: var(--radius-2xl);
  background: oklch(1 0 0 / 0.06);
  font-size: 14px;
  line-height: 1.45;
}

.pg-pas {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 12px 6px;
  border-radius: var(--radius-2xl);
  background: oklch(1 0 0 / 0.06);
}

.pg-pas::-webkit-scrollbar { display: none; }

.pg-kolumna {
  flex: 0 0 auto;
  width: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.pg-h {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: color-mix(in oklab, var(--sand) 68%, transparent);
  white-space: nowrap;
}

.pg-ikona {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
}

/* Godziny nocne przygaszone — pas ma się czytać jak doba, a nie jak
   dwadzieścia cztery równorzędne słupki. */
.pg-ikona.noc { opacity: 0.55; }

/* Szansa opadu. PIASKOWA, nie niebieska, i to jest decyzja, nie
   przeoczenie: jedyny błękit w tej palecie należy do kropki „jesteś
   tutaj". Deszcz na niebiesko zabrałby jej znak rozpoznawczy. */
/* Wysokość trzymana nawet wtedy, gdy nic nie pisze — inaczej kolumny bez
   opadu podciągałyby temperaturę wyżej niż sąsiednie i pas przestałby się
   czytać jednym spojrzeniem wzdłuż linii. */
.pg-opad {
  min-height: 13px;
  line-height: 13px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: color-mix(in oklab, var(--sunrise) 78%, var(--sand));
  white-space: nowrap;
}

.pg-t {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
}

/* Zachód i wschód wpisane między godziny. Wyróżnione ciepłym akcentem,
   bo to jedyne kolumny, które nie są prognozą, tylko pewnikiem. */
.pg-slonce .pg-ikona { stroke: var(--sunrise); opacity: 1; }
.pg-slonce .pg-h { color: var(--sunrise); }
.pg-slonce .pg-t { font-family: var(--font-mono); font-size: 12.5px; }

/* Granica doby. Wąska kolumna z kreską — bez niej „02:00" po „23:00"
   czyta się jak błąd sortowania. */
.pg-podzial {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 8px;
  border-left: 1px solid oklch(1 0 0 / 0.18);
  margin-left: 6px;
}

.pg-podzial span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--sand) 55%, transparent);
}

.pg-kafle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.pg-kafel { padding: 12px 14px; }

.pg-kafel-wartosc {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
}

.pg-kafel-wartosc span {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  color: color-mix(in oklab, var(--sand) 62%, transparent);
}

.pg-kafel-opis {
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.35;
  color: color-mix(in oklab, var(--sand) 70%, transparent);
}

.pg-kafel-opis:empty { display: none; }

.pg-stopka { margin-top: 16px; }

.pg-zrodlo {
  margin: 0 0 10px;
  font-size: 11.5px;
  line-height: 1.45;
  color: color-mix(in oklab, var(--sand) 58%, transparent);
}

.pg-blad {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--sunrise);
}

/* ---------------------------------------------------------------
   ZNAK
   Środek kadru. Hasła pod logo NIE MA — w prototypie zajmowało
   największą strefę ekranu i niosło najmniej treści, a miejsce
   przydaje się liście ostatnich tras.
   --------------------------------------------------------------- */

.start-znak {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  /* Kolumna, nie rząd — od czasu, gdy pod znakiem stanęło wejście do
     „O aplikacji" (M7.8). W rzędzie napis usiadł OBOK logo, w połowie
     wysokości zdjęcia, i wyglądał jak podpis do góry. */
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.start-znak svg {
  width: min(52vw, 190px);
  height: auto;
  min-height: 0;
  max-height: 100%;
}

.start-znak .logo-tatry { fill: var(--sand); }
.start-znak .logo-planer { fill: color-mix(in oklab, var(--sand) 78%, transparent); }

/* ---------------------------------------------------------------
   AKCJE
   Dwa przyciski, nie trzy. Pełna szerokość, strzałka po prawej.
   --------------------------------------------------------------- */

.start-akcje {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.start-akcje .btn {
  width: 100%;
  justify-content: space-between;
  height: 52px;
  font-size: 15px;
}

.start-akcje .btn svg { width: 18px; height: 18px; }

/* Wyłączony przycisk na ciemnym tle.

   Design system wygasza wyłączone przyciski kryciem 45% — i na jasnym
   papierze to działa. Na ciemnej zieleni pomarańczowy gradient przepuszczony
   przez 45% robi się błotnisty brąz, czyli kolor, którego w marce nie ma.
   Tutaj wyłączony przycisk ma po prostu przestać być pomarańczowy. */
.start-akcje .btn:disabled {
  opacity: 1;
  background-image: none;
  background-color: oklch(1 0 0 / 0.09);
  border-color: oklch(1 0 0 / 0.16);
  color: color-mix(in oklab, var(--sand) 55%, transparent);
  box-shadow: none;
}

.start-akcje .btn:disabled::before { display: none; }

/* KARTA WYCIECZKI WSTRZYMANEJ (M12.1).

   Stoi tuż nad przyciskami, bo razem z nimi tworzy jedno zdanie: „tyle
   zostało — wracasz czy kończysz?". Szkło jak karta terenu, a nie płachta
   monitu: pauza jest stanem, w którym nic złego się nie dzieje. */
.wstrzymana {
  padding: 16px 18px;
  border-radius: var(--radius-3xl);
  flex-shrink: 0;
}

.wstrzymana-nazwa {
  margin: 4px 0 12px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
}

/* Liczby przyszły z ekranu wycieczki (`.wyc-liczby`) razem z paskiem —
   to celowo ta sama karta, tylko w innym miejscu. Bez tego człowiek musiałby
   przy każdej pauzie na nowo szukać wzrokiem, gdzie stoi „zostało". */
.wstrzymana .wyc-pasek { margin-top: 12px; }

.wstrzymana-uwaga {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: color-mix(in oklab, var(--sand) 66%, transparent);
}

/* Powód, dla którego przycisk jest wyłączony, stoi pod nim. Wyłączony
   przycisk bez wyjaśnienia to zagadka, nie interfejs. */
.start-czemu {
  margin: -4px 0 0;
  text-align: center;
  font-size: 11.5px;
  color: color-mix(in oklab, var(--sand) 62%, transparent);
}

/* ---------------------------------------------------------------
   OSTATNIO PLANOWANE
   Poziomy pas kafli. Rysuje się z samego magazynu — `serializeRoute()`
   zapisuje migawkę `stats`, więc czas i dystans są znane bez grafu
   i bez sieci. To dlatego ta lista pojawia się natychmiast.
   --------------------------------------------------------------- */

.ostatnie {
  flex-shrink: 0;
}

.ostatnie-glowa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.ostatnie-wszystkie {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: color-mix(in oklab, var(--sand) 74%, transparent);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.ostatnie-wszystkie:hover { color: var(--sand); }
.ostatnie-wszystkie svg { width: 13px; height: 13px; }

.ostatnie-pas {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Kafle mają dochodzić do krawędzi ekranu przy przewijaniu, a nie
     zatrzymywać się na marginesie kolumny. */
  margin: 0 calc(-1 * (16px + env(safe-area-inset-left, 0px)))
          0 calc(-1 * (16px + env(safe-area-inset-left, 0px)));
  padding: 2px calc(16px + env(safe-area-inset-right, 0px))
           4px calc(16px + env(safe-area-inset-left, 0px));
}

.ostatnie-pas::-webkit-scrollbar { display: none; }

.kafel {
  flex: 0 0 auto;
  width: 190px;
  scroll-snap-align: start;
  padding: 12px 14px;
  text-align: left;
  font: inherit;
  color: var(--sand);
  cursor: pointer;
}

.kafel:hover { background-color: oklch(1 0 0 / 0.14); }

.kafel-nazwa {
  display: block;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kafel-dane {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: color-mix(in oklab, var(--sand) 76%, transparent);
}

.kafel-stopka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid oklch(1 0 0 / 0.15);
}

.kafel-kiedy {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--sand) 52%, transparent);
}

.kafel-znacznik {
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: oklch(1 0 0 / 0.15);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Zmrok. Jedyny znacznik, który krzyczy — bo jedyny mówi o bezpieczeństwie. */
.kafel-znacznik.po-zmroku {
  background: var(--trail-hard);
  color: var(--trail-hard-foreground);
}

/* Stan pusty listy: nie chowamy pasa, tylko tłumaczymy, czego brakuje. */
.ostatnie-pusto {
  padding: 14px 16px;
  font-size: 12.5px;
  color: color-mix(in oklab, var(--sand) 74%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .kafel, .teren-pytanie { transition: none; }
}

/* ---------------------------------------------------------------
   EKRAN WYCIECZKI

   Ekran startowy jest zdjęciem i nastrojem. Ten jest jego
   przeciwieństwem z rozmysłu: **nudny, płaski i czytelny
   w rękawicach**, oglądany przez dziesięć sekund w deszczu.

   Dwie reguły, obie z pomiaru, nie z gustu:

   1. ŻADNEGO `backdrop-filter`. Reguła z M4.4 obowiązuje tu bez
      wyjątku — ten ekran świeci przez sześć godzin marszu, a każda
      warstwa szkła to osobna warstwa kompozytora z odczytem tła.
      Panele biorą `szklo-kryjace`: wygląda tak samo, nic nie
      kosztuje i czyta się w pełnym słońcu.
   2. Zdjęcie tła znika. Rzeźba pod liczbami to strata kontrastu
      tam, gdzie kontrast jest wszystkim.
   --------------------------------------------------------------- */

body.wycieczka .tlo-zdjecie { display: none; }
body.wycieczka .tlo-apla { background-image: none; background: var(--forest-deep); }
body.wycieczka .tlo-winieta { display: none; }

.wyc {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding:
    calc(10px + env(safe-area-inset-top, 0px))
    calc(14px + env(safe-area-inset-right, 0px))
    calc(10px + env(safe-area-inset-bottom, 0px))
    calc(14px + env(safe-area-inset-left, 0px));
  box-sizing: border-box;
}

.wyc [hidden] { display: none !important; }

/* Pasek stanu wycieczki */
.wyc-glowa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
}

.wyc-stan {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: oklch(1 0 0 / 0.1);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.wyc-kropka {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sunrise);
}

/* „Wstrzymana" nie ma prawa wyglądać jak „idziesz" — to jedyny stan,
   w którym postęp nie rośnie, a użytkownik musi to widzieć od razu. */
.wyc-stan.pauza .wyc-kropka { background: var(--stone); }

/* „Przed rozpoczęciem" — kropka pusta, bo nic jeszcze nie tyka. Obwódka
   zamiast wypełnienia: stan istnieje, ale się nie dzieje. */
.wyc-stan.przed .wyc-kropka {
  background: transparent;
  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--sand) 60%, transparent);
}

.wyc-cel {
  font-size: 12px;
  color: color-mix(in oklab, var(--sand) 70%, transparent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Karta „najbliższy punkt" — największa rzecz na ekranie, bo to jest
   pytanie, które zadaje się w marszu. */
.wyc-karta {
  padding: 14px 16px;
  flex-shrink: 0;
}

.wyc-punkt-nazwa {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

/* „Jestem na miejscu" — na całą szerokość karty, bo naciska się go w marszu,
   często w rękawiczce. Wygląd spokojnego przycisku pobrania przewodnika. */
.wyc-punkt-jestem {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  margin-top: 12px;
  padding: 0 14px;
  box-sizing: border-box;
  border: 1px solid color-mix(in oklab, var(--moss) 55%, transparent);
  border-radius: var(--radius-2xl);
  background: color-mix(in oklab, var(--moss) 18%, transparent);
  color: var(--sand);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

/* Trzy liczby w rzędzie muszą się zmieścić na najwęższym telefonie bez
   zawijania: „1 h 10 min" złamane na dwie linijki przestaje być liczbą,
   którą da się odczytać jednym spojrzeniem. Stąd `nowrap` i skala, która
   ustępuje, gdy brakuje miejsca. */
.wyc-liczby {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid oklch(1 0 0 / 0.15);
}

.wyc-liczba { min-width: 0; }

.wyc-liczba b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(19px, 6.2vw, 26px);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.wyc-liczba span {
  display: block;
  margin-top: 4px;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--sand) 58%, transparent);
}

.wyc-liczba.prawa { margin-left: auto; text-align: right; }
.wyc-liczba.prawa b { font-size: clamp(16px, 5vw, 19px); }
/* „W górę" i „w dół" — jedno pudełko, więc przy braku miejsca schodzą do
   drugiej linii razem (uwaga użytkownika, 2026-09-29). Po prawej stawia je
   NIE własny margines, tylko `margin-right: auto` na liczbie przed nimi:
   w jednym rzędzie wolne miejsce ląduje między czasem a przewyższeniami,
   a w drugiej linii pudełko jest samo i zaczyna od lewego brzegu —
   tak, jak chciał użytkownik. */
.wyc-przewyzszenia {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}
/* Do lewej jak dystans i czas: w drugiej linii podpisy wyrównane do prawej
   stały krzywo pod „DYSTANS", a w jednym rzędzie różnicy prawie nie widać. */
.wyc-przewyzszenia .wyc-liczba.prawa { margin-left: 0; text-align: left; }
.wyc-liczba:has(+ .wyc-przewyzszenia) { margin-right: auto; }
/* Cztery liczby w jednym rzędzie („1 h 10 min" i dwa przewyższenia) na
   wąskim telefonie wchodziły na siebie (uwaga użytkownika, 2026-09-29).
   Ustępują przewyższenia — dystans i czas czyta się w marszu pierwsze. */
#wyc-punkt .wyc-liczby { gap: 8px 10px; flex-wrap: wrap; }
/* Pudełka NIE ściskają się poniżej treści (`min-width: 0` pozwalało im na
   to i tekst wychodził na sąsiada) — całość mieści się dzięki skali, która
   idzie za szerokością ekranu. Zmierzone: typowe wartości („1 h 16 min",
   „+445 m") mają zapas 16 px na 375 i 24 px na 390. Gdy wyjątkowo długie
   się nie zmieszczą (4 h do punktu, 1200 m podejścia), przewyższenia
   schodzą do drugiej linii (`flex-wrap`) — obie naraz, bo stoją w jednym
   pudełku `.wyc-przewyzszenia` — zamiast wejść na czas dojścia. */
#wyc-punkt .wyc-liczba { flex: 0 0 auto; }
#wyc-punkt .wyc-liczba b { font-size: clamp(16px, 5.2vw, 22px); }
#wyc-punkt .wyc-liczba.prawa b { font-size: clamp(12px, 3.7vw, 15px); }

/* Nazwa punktu ze znakami szlaku po prawej. */
.wyc-nazwa-wiersz {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}
.wyc-nazwa-wiersz .wyc-punkt-nazwa { margin: 0; min-width: 0; }
.wyc-znaki { display: flex; gap: 4px; flex: none; }
.wyc-znaki:empty { display: none; }

/* Znak szlaku — trzy poziome pasy: biały, kolor, biały. Ten sam układ co
   `.mark` w planerze (style.css), którego powłoka nie wczytuje. Na ciemnym
   szkle karty biel stoi sama, więc obwódka jest cienka i jasna. */
.znak-szlaku {
  display: inline-block;
  flex: none;
  width: 15px;
  height: 10px;
  border: 1px solid oklch(1 0 0 / 0.35);
  border-radius: 2px;
  background: linear-gradient(to bottom,
    #fff 0 30%, var(--c, #868e96) 30% 70%, #fff 70% 100%);
}
.znak-szlaku.duzy { width: 22px; height: 15px; border-radius: 3px; }
.wyc-lista .znaki { display: flex; gap: 3px; flex: none; }

/* Postęp trasy */
.wyc-pasek {
  height: 6px;
  margin-top: 12px;
  border-radius: var(--radius-pill);
  background: oklch(1 0 0 / 0.14);
  overflow: hidden;
}

.wyc-pasek i {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background-image: var(--gradient-sunrise);
}

/* Profil wysokości (2026-09-10). Linia w piasku, bo jest tłem tej karty,
   a nie jej treścią — treścią jest pomarańczowa kropka w marszu, w tym samym
   `--sunrise`, którym mapa maluje przebyty odcinek i którym idzie pasek
   postępu tuż nad nią. Wymiary rysunku ustala `profil-wycieczki.js`. */
.wyc-profil-svg {
  display: block;
  width: 100%;
  margin-top: 10px;
  overflow: visible;
}

.wp-linia {
  fill: none;
  stroke: color-mix(in oklab, var(--sand) 82%, transparent);
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.wp-pole { fill: url(#wp-cien); }
.wp-cien-gora { stop-color: var(--sand); stop-opacity: 0.22; }
.wp-cien-dol { stop-color: var(--sand); stop-opacity: 0.02; }

.wp-siatka { stroke: oklch(1 0 0 / 0.12); stroke-width: 1; }

.wp-os {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
  fill: color-mix(in oklab, var(--sand) 58%, transparent);
}

.wp-poz-linia {
  stroke: var(--sunrise);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}

.wp-poz-halo { fill: var(--sunrise); opacity: 0.28; }

.wp-poz-kropka {
  fill: var(--sunrise);
  stroke: var(--forest-deep);
  stroke-width: 2;
}

/* MONITY nad zakładkami — jedyne elementy tego ekranu, którym wolno krzyczeć.
   Wspólny szkielet, bo to jedna klasa wiadomości; różni je wyłącznie kolor. */
.wyc-monity {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.wyc-monity:empty { display: none; }

.wyc-monit {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 16px;
  border-radius: var(--radius-3xl);
  flex-shrink: 0;
}

.wyc-monit-tresc { flex: 1 1 auto; min-width: 0; }

/* Zejście ze szlaku: pełny alarm. */
.wyc-poza {
  background: var(--trail-hard);
  color: var(--trail-hard-foreground);
}

/* Przewodnik (G5) — ten sam pas, INNA klasa wiadomości.

   Ostrzeżenia krzyczą pełnym kolorem (`--trail-hard`), bo mówią „coś przestało
   się zgadzać z planem". To mówi „jest tu coś do posłuchania" i ma wyglądać
   jak zaproszenie: spokojna zieleń marki, obwódka zamiast płachty. Gdyby
   wyglądało jak alarm, po trzeciej opowieści człowiek przestałby czytać
   ostrzeżenia — a to jedyne dwa zdania na tym ekranie, które muszą być
   przeczytane. */
.wyc-przewodnik {
  /* Dwa wiersze: treść i przycisk. Stąd kolumna zamiast rzędu, którym jest
     `.wyc-monit` — ostrzeżenia mieszczą się w jednej linii, zaproszenie nie. */
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  background: color-mix(in oklab, var(--moss) 22%, oklch(0.22 0.02 150));
  border: 1px solid color-mix(in oklab, var(--moss) 45%, transparent);
  color: var(--sand);
}

.wyc-przewodnik-gora {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Sygnet przewodnika: postać z dymkiem w kółku. Kółko robi z ikony ZNAK
   NADAWCY — jak awatar przy wiadomości — zamiast piktogramu obok tekstu. */
.wyc-przewodnik-ikona {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  padding: 7px;
  box-sizing: border-box;
  border-radius: 50%;
  background: color-mix(in oklab, var(--moss) 40%, transparent);
  color: color-mix(in oklab, var(--sand) 90%, var(--moss));
}

.wyc-przewodnik .etykieta {
  color: color-mix(in oklab, var(--moss) 55%, var(--sand));
}

.wyc-przewodnik h2 {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}

.wyc-przewodnik p {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.35;
  color: color-mix(in oklab, var(--sand) 70%, transparent);
}

/* Przycisk na całą szerokość monitu i wysoki na 46 px — naciska się go
   w rękawicy, przy wietrze, patrząc jednocześnie pod nogi. Napis mówi o obu
   drogach, bo nagranie bywa niepobrane, a tekst jest zawsze. */
/* Ciepły gradient — ten sam, co „Rozpocznij wycieczkę" na ekranie startowym.
   Zasada z brand booka mówi „jedno główne CTA na widok" i jest tu spełniona:
   stopka wycieczki chodzi na `.btn-primary` (zieleń), więc ciepły akcent na
   tym ekranie nie ma z czym konkurować. */
.wyc-przewodnik-sluchaj,
.wyc-przewodnik-karta .prz-pobierz {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--radius-2xl);
  background-image: var(--gradient-sunrise);
  color: var(--forest-deep);
  box-shadow: var(--shadow-raised);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

/* Ikona na ciepłym tle musi być ciemna jak napis — dziedziczy `currentColor`,
   więc wystarczy nie nadpisywać jej koloru gdzie indziej. */
.wyc-przewodnik-sluchaj svg { color: currentColor; }

.wyc-przewodnik-sluchaj svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
}

.wyc-przewodnik-sluchaj:disabled {
  opacity: 0.45;
  cursor: default;
}

/* Dwa miejsca, w których przycisk pobrania zostaje SPOKOJNY, a nie ciepły:

   1. Ekran trasy — tam nie namawiamy, tylko podajemy listę miejsc, a nad nią
      stoi już „Rozpocznij wycieczkę" w tym samym gradiencie. Dwa summit obok
      siebie to według brand booka błąd, nie decyzja.
   2. Karta w marszu, DOPÓKI widać monit o przybyciu — wtedy ciepły akcent
      należy do monitu, bo dotyczy miejsca, w którym człowiek właśnie stoi.
      Przycisk zostaje klikalny; gaśnie tylko na czas, gdy ma komu ustąpić. */
.trasa-przewodnik .prz-pobierz,
.wyc-przewodnik-karta.prz-ustepuje .prz-pobierz {
  background-image: none;
  background: color-mix(in oklab, var(--moss) 18%, transparent);
  border: 1px solid color-mix(in oklab, var(--moss) 55%, transparent);
  color: var(--sand);
  box-shadow: none;
}

.wyc-przewodnik-karta .prz-pobierz {
  transition: background-image 180ms ease, background-color 180ms ease,
              color 180ms ease, box-shadow 180ms ease;
}

/* Krzyżyk monitu. Wtopiony w tło monitu, a nie obwiedziony: ma dać się
   znaleźć, gdy się go szuka, i nie konkurować wzrokiem z ostrzeżeniem,
   przy którym stoi. Pole dotyku 36 px przy rysunku 16 px. */
.wyc-monit-zamknij {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin: -8px -8px 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
}

.wyc-monit-zamknij svg {
  width: 16px; height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.75;
}

.wyc-monit-zamknij:hover { background: oklch(1 0 0 / 0.15); }

.wyc-monit h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
}

.wyc-monit p { margin: 6px 0 0; font-size: 13.5px; }
.wyc-monit p:first-child { margin-top: 0; }

.wyc-strzalka {
  display: inline-block;
  font-size: 26px;
  line-height: 1;
  transform-origin: 50% 50%;
}

/* Ostrzeżenie o zmroku. Ten sam szkielet co zejście ze szlaku, inny kolor:
   światła ubywa, ale nic złego jeszcze się nie stało — to jest ostrzeżenie,
   a nie alarm, i kolor ma o tym mówić, zanim ktokolwiek przeczyta tekst. */
/* Monit burzowy w marszu (B7). Dwa stopnie intensywności, bo dwa czerwone
   monity obok siebie zlewają się w jeden alarm i przestają cokolwiek znaczyć:
   żółty, gdy tylko uprzedzamy o burzy, której zdążysz uniknąć; czerwony, gdy
   zastanie cię na trasie albo już trwa. */
.wyc-burza {
  background: var(--trail-medium);
  color: var(--trail-medium-foreground);
  font-size: 13.5px;
}

.wyc-burza-pilna {
  background: var(--trail-hard);
  color: var(--trail-hard-foreground);
}

/* Wiek prognozy w monicie — cichszy niż treść, ale w tym samym pudełku:
   „bez łączności od trzech godzin" jest częścią ostrzeżenia, nie przypisem. */
.wyc-burza-wiek {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.75;
}

.wyc-zmrok {
  background: var(--trail-medium);
  color: var(--trail-medium-foreground);
  font-size: 13.5px;
}

.wyc-zmrok .wyc-monit-tresc { line-height: 1.45; }

/* Karta „Uwaga" przed startem (2026-09-10). Czerwień zejścia ze szlaku, ale
   bez krzyżyka i poza pasem monitów: to nie jest wiadomość o chwili, tylko
   o trasie, i stoi tak długo, jak długo trasa się nie zmieni. */
.wyc-uwaga {
  flex-shrink: 0;
  padding: 12px 16px 14px;
  border-radius: var(--radius-3xl);
  background: var(--trail-hard);
  color: var(--trail-hard-foreground);
}

.wyc-uwaga-tytul {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Wykrzyknik z tarczy ekspozycji na mapie, obwiedziony kołem. */
.wyc-uwaga-tytul svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 1px;
  border: 1.6px solid currentColor;
  border-radius: 50%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
}

.wyc-uwaga-tekst {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
}

/* Dalej na szlaku. Własnego przewijania już nie ma — przewija się kolumna,
   a zagnieżdżony drugi obszar przewijany znaczyłby, że kciuk trafia raz w tę
   listę, a raz w słupek pod nią, zależnie od pikseli. */
.wyc-dalej { flex: 0 0 auto; }

.wyc-lista { list-style: none; margin: 8px 0 0; padding: 0; }

.wyc-lista li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid oklch(1 0 0 / 0.08);
  font-size: 13.5px;
}

.wyc-lista li:last-child { border-bottom: 0; }
.wyc-lista .nazwa { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wyc-lista .km, .wyc-lista .eta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: color-mix(in oklab, var(--sand) 74%, transparent);
}
.wyc-lista .eta { color: color-mix(in oklab, var(--sand) 50%, transparent); }

/* Akcje */
.wyc-akcje { display: flex; gap: 10px; flex-shrink: 0; }
.wyc-akcje .btn { flex: 1 1 0; height: 52px; justify-content: center; font-size: 15px; }

.wyc-akcje .btn-cichy {
  background: oklch(1 0 0 / 0.1);
  border-color: oklch(1 0 0 / 0.2);
  color: var(--sand);
  background-image: none;
}

/* Panel symulatora — powierzchnia deweloperska, nie produkt. Widać go
   w przeglądarce i po dopisaniu `?sym=1` do adresu. */
.wyc-sym {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border: 1px dashed oklch(1 0 0 / 0.25);
  border-radius: var(--radius-xl);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--sand) 65%, transparent);
  flex-shrink: 0;
}

.wyc-sym button {
  padding: 5px 10px;
  border: 1px solid oklch(1 0 0 / 0.22);
  border-radius: var(--radius-pill);
  background: oklch(1 0 0 / 0.06);
  color: var(--sand);
  font: inherit;
  cursor: pointer;
}

.wyc-sym button[aria-pressed="true"] { background: var(--sunrise); color: var(--forest-deep); border-color: transparent; }

/* Rozdroże — zapowiedź, nie ostrzeżenie. Ciepły akcent marki, nie czerwień:
   czerwony ma w tej aplikacji jedno znaczenie i jest nim „coś jest nie tak". */
.wyc-rozdroze {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-3xl);
  border: 1px solid color-mix(in oklab, var(--sunrise) 55%, transparent);
  background: color-mix(in oklab, var(--sunrise) 16%, transparent);
  flex-shrink: 0;
}

.wyc-rozdroze p { margin: 0; font-size: 14px; line-height: 1.4; }

.wyc-rozdroze-strzalka {
  flex-shrink: 0;
  font-size: 26px;
  line-height: 1;
  color: var(--sunrise);
}

/* Zakładki trybu wycieczki. Pastylka, nie podkreślenie: w rękawicach trafia
   się w plamę, a nie w linię. */
/* Kolumny liczone z LICZBY DZIECI, nie wpisane na sztywno. Do 2026-09-06 stało
   tu `1fr 1fr` i trzecia zakładka („Przewodnik") łamała pasek na dwa wiersze,
   rozrywając pastylkę tła. `auto-fit` znosi ten problem raz na zawsze —
   czwarta zakładka, gdyby kiedyś doszła, ustawi się sama. */
.wyc-zakladki {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: oklch(1 0 0 / 0.08);
  flex-shrink: 0;
}

.wyc-zakladki button {
  /* Wcięcie poziome schodzi z 12 na 6 px: przy trzech zakładkach „Przewodnik"
     nie mieści się na wąskim telefonie i łamie się w środku wyrazu. Pionowe
     zostaje — to ono daje pastylce wysokość dotykową. */
  padding: 10px 6px;
  white-space: nowrap;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: color-mix(in oklab, var(--sand) 70%, transparent);
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.wyc-zakladki button[aria-selected="true"] {
  background: var(--sand);
  color: var(--forest-deep);
}

/* Podsumowanie zajmuje resztę ekranu i przewija się w środku — lista „dalej
   na szlaku" bywa długa, a przyciski mają zostać na miejscu. */
/* Kolumna podsumowania PRZEWIJA SIĘ W CAŁOŚCI i to jest zmiana z M12.1.

   Do tej pory jedynym elementem, który ustępował, była lista „Dalej na
   szlaku"; reszta kart miała `flex-shrink: 0`. Przy komplecie treści —
   rozdroże, oba monity, dwie karty i ślad — lista kurczyła się do zera,
   a nadmiar i tak wychodził poza kolumnę i kładł się na przyciskach.
   Jeden przewijany słupek zamiast jednego kurczącego się elementu:
   nic nie znika i nic nie nachodzi. */
.wyc-podsumowanie {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.wyc-podsumowanie::-webkit-scrollbar { display: none; }

/* Mapa zajmuje całą resztę ekranu — w marszu to ona jest treścią,
   a nie ozdobą pod liczbami. */
.wyc-mapa-box {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: var(--radius-3xl);
  overflow: hidden;
  background: var(--forest);
}

#wyc-mapa { position: absolute; inset: 0; }

/* Podkład wymaga sieci do fazy M6. Ekran ma to POWIEDZIEĆ, a nie pokazywać
   szarą płachtę — ta sama zasada, co w planerze od M1.6. */
.wyc-mapa-uwaga {
  position: absolute;
  left: 10px; right: 10px; bottom: 10px;
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--radius-2xl);
  background: color-mix(in oklab, var(--forest-deep) 88%, transparent);
  border: 1px solid oklch(1 0 0 / 0.16);
  color: var(--sand);
  font-size: 12.5px;
}

/* „Wróć do mnie" — pastylka, która pojawia się PO ręcznym przewinięciu mapy.

   Stoi u dołu, wyśrodkowana, nad `.wyc-mapa-uwaga` nie jest — bo tamta niesie
   komunikat o braku podkładu i obie naraz zdarzają się rzadko, a gdy się
   zdarzą, uwaga jest ważniejsza i ma leżeć niżej, przy krawędzi. Cel dotknięcia
   ma 44 px wysokości: to jest przycisk naciskany w rękawicy, w ruchu. */
.wyc-mapa-wroc {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  border: 1px solid oklch(1 0 0 / 0.18);
  background: color-mix(in oklab, var(--forest-deep) 92%, transparent);
  color: var(--sand);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.wyc-mapa-wroc[hidden] { display: none; }

.wyc-mapa-wroc svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
}

/* Uwaga o podkładzie i pastylka mogą wypaść razem — wtedy pastylka idzie
   wyżej, zamiast na nią wejść. */
.wyc-mapa-box:has(.wyc-mapa-uwaga:not([hidden])) .wyc-mapa-wroc {
  bottom: 62px;
}

/* Pasek opadu pod mapą — jedyna kontrolka mapy w trybie wycieczki.

   Siostra `.wyc-mapa-box`, nie element w niej: `.wyc-mapa-uwaga` zajmuje już
   dolną krawędź mapy, a suwak wpadłby dokładnie na nią. `#wyc-mapa-box` jest
   `flex: 1 1 auto` w kolumnie, więc pasek zabiera swoje kilkadziesiąt pikseli,
   a mapa się o tyle kurczy — bez `z-index`-u i bez nachodzenia.

   Przy wyłączonej warstwie pasek zawiera sam włącznik; suwak dochodzi w tym
   samym pasku dopiero po włączeniu. */
.wyc-pogoda-pasek {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-top: 8px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: oklch(1 0 0 / 0.08);
}

.wyc-pogoda-pasek[hidden] { display: none; }

/* Pastylka jak zakładki obok — w rękawicach trafia się w plamę, nie w linię.

   Przy WYŁĄCZONEJ warstwie rozciąga się na cały pasek, bo niesie wtedy zdanie
   („W ciągu najbliższych 3 h opady 2,0 mm"), a nie etykietę. Po włączeniu
   kurczy się z powrotem do samego „Opad" i oddaje miejsce suwakowi — pasek ma
   jedną wysokość i jedną linię, więc zdanie i sterowanie czasem nie mogą stać
   w nim obok siebie. */
.wyc-opad-wlacznik {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: color-mix(in oklab, var(--sand) 70%, transparent);
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.wyc-opad-wlacznik svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Przy prognozie bez opadów pasek nie jest przełącznikiem, tylko zdaniem.
   NIE przygaszamy go jednak jak wyłączonego przycisku: treść ma się dalej
   czytać, bo „bez opadów" to informacja, po którą się tu przyszło. Znika sam
   kursor i możliwość naciśnięcia. */
.wyc-opad-wlacznik:disabled {
  cursor: default;
  opacity: 1;
}

.wyc-opad-wlacznik[aria-checked="true"] {
  flex: 0 0 auto;
  background: var(--sand);
  color: var(--forest-deep);
}

/* Zdanie prognozy. Mniejsze od etykiety pastylki i z interlinią, bo na
   najwęższym telefonie łamie się na dwie linie — a łamać się MA, zamiast
   uciekać wielokropkiem: liczba milimetrów jest na jego końcu. */
.wyc-opad-tresc {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.3;
}

.wyc-opad-wlacznik[aria-checked="false"] .wyc-opad-tresc {
  font-size: 12.5px;
  font-weight: 500;
}

/* „zobacz" — pełną siłą piasku przy tekście przygaszonym do 70%. Podkreślenie,
   bo bez niego to jest ostatnie słowo zdania, a nie obietnica. */
.wyc-opad-cta {
  flex-shrink: 0;
  color: var(--sand);
  font-size: 12.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wyc-opad-cta[hidden] { display: none; }

.opad-slot { flex: 1 1 auto; min-width: 0; padding-right: 6px; }
.opad-slot[hidden] { display: none; }

/* Sterowanie czasem. Ten sam układ co w planerze — buduje go ten sam kod —
   ale w barwach ekranu marszu: piasek na ciemnej zieleni, bez legendy.
   Cztery stopnie skali zjadłyby drugie tyle wysokości na ekranie, na którym
   liczy się trasa; w marszu wystarczy, że mocniejszy opad jest ciemniejszy. */
.opad-sterowanie {
  display: flex;
  align-items: center;
  gap: 8px;
}

.opad-graj {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid oklch(1 0 0 / 0.2);
  border-radius: 50%;
  background: none;
  color: var(--sand);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

.opad-suwak {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--sand);
}

.opad-czas {
  flex: 0 0 auto;
  min-width: 92px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: color-mix(in oklab, var(--sand) 72%, transparent);
}

/* Bez zasięgu i bez zapisu warstwa nie ma czego pokazać — i ekran ma
   POWIEDZIEĆ dlaczego, zamiast milczeć. Ta sama zasada, co przy pustym
   podkładzie w `.wyc-mapa-uwaga`. */
.opad-uwaga {
  margin: 0;
  padding: 0 6px;
  font-size: 11.5px;
  line-height: 1.35;
  color: color-mix(in oklab, var(--sand) 70%, transparent);
}

.opad-uwaga[hidden] { display: none; }

/* ---------------------------------------------------------------
   EKRAN WYBORU WYCIECZKI (przebudowa 2026-09-11)

   Układ Map Google: mapa na cały ekran, pole celu pływa nad nią,
   trzy zakładki pod nią. CIEMNY, jak cała powłoka — pierwsza wersja była
   jasna (tokeny planera) i użytkownik ją cofnął tego samego dnia: ekran
   stoi między ciemnym startem a ciemnym ekranem wycieczki i jasny wyglądał
   jak wizyta w innej aplikacji. Jasna jest tylko mapa.

   Rzeczy pływające nad mapą (krążek, pole celu, dymki z czasem, komunikat)
   mają kryjące ciemne tło z jasnym obrysem — to ten sam przepis co pastylka
   „Wróć do mnie" na mapie wycieczki, bo mapa bywa i śnieżnobiała,
   i ciemnozielona.

   Klasy `.wybor-karta`, `.wybor-lista`, `.wybor-wstecz` i pokrewne niżej
   należą dziś do dziennika i ekranów list — zostały po starym układzie
   wyboru i noszą jego nazwę.
   --------------------------------------------------------------- */

.wybor {
  /* Odcienie tego jednego ekranu — wszystkie z piasku i lasu marki. */
  --w-cichy: color-mix(in oklab, var(--sand) 64%, transparent);
  --w-kreska: oklch(1 0 0 / 0.12);
  --w-powierzchnia: oklch(1 0 0 / 0.08);
  --w-plywak: color-mix(in oklab, var(--forest-deep) 92%, transparent);
  --w-plywak-obrys: oklch(1 0 0 / 0.18);
  --w-cien: 0 6px 18px -6px oklch(0.12 0.02 160 / 0.55);

  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: var(--forest-deep);
  color: var(--sand);
}

.wybor-widok {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

/* Mapa bez marginesów — cała powierzchnia nad zakładkami. Selektor z rodzicem
   nie jest ozdobnikiem: `maplibre-gl.css` wchodzi PO tym arkuszu i jego
   `.maplibregl-map { position: relative }` przebijało samą klasę — pojemnik
   bez treści miał wtedy zero pikseli wysokości i mapa była niewidoczna. */
.wybor-widok > .wybor-mapa {
  position: absolute;
  inset: 0;
  background: var(--forest-deep);
}

/* Pasek nad mapą: krążek „wstecz" i pole celu w jednym rzędzie. Pojemnik
   nie łapie dotknięć, dzieci tak — reszta paska należy do mapy (ta sama
   reguła co `.head` nad mapą planera). */
.wybor-gora {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding:
    calc(12px + env(safe-area-inset-top, 0px))
    calc(14px + env(safe-area-inset-right, 0px))
    0
    calc(14px + env(safe-area-inset-left, 0px));
  pointer-events: none;
}

.wybor-gora > * { pointer-events: auto; }

.wybor-krazek {
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--w-plywak-obrys);
  border-radius: 50%;
  background: var(--w-plywak);
  color: var(--sand);
  box-shadow: var(--w-cien);
  cursor: pointer;
}

.wybor-krazek svg { width: 22px; height: 22px; }

/* W nagłówku listy krążek stoi na ciemnym tle, nie na mapie — obrys i cień
   byłyby tam dekoracją bez zadania. */
.wybor-naglowek .wybor-krazek {
  border-color: transparent;
  background: var(--w-powierzchnia);
  box-shadow: none;
}

.wybor-pole {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  display: flex;
  align-items: center;
  border: 1px solid var(--w-plywak-obrys);
  border-radius: var(--radius-pill);
  background: var(--w-plywak);
  box-shadow: var(--w-cien);
}

.wybor-pole-przycisk {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 0 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  font: inherit;
  font-size: 15px;
  color: var(--w-cichy);
  text-align: left;
  cursor: text;
}

.wybor-pole-przycisk svg { flex: none; width: 20px; height: 20px; }

.wybor-pole-tekst {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wybor-pole.ma-cel .wybor-pole-przycisk {
  color: var(--sand);
  font-weight: 600;
}

/* Krzyżyk czyszczący cel — i ten sam kształt zamyka arkusz wariantu. */
.wybor-pole-x {
  flex: none;
  width: var(--tap-min);
  height: var(--tap-min);
  margin-right: 2px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--w-cichy);
  cursor: pointer;
}

.wybor-pole-x svg { width: 18px; height: 18px; }

/* Jedno zdanie o stanie („Szukamy dróg…", „Stąd nie prowadzi…") pod
   paskiem, nad mapą. */
.wybor-komunikat {
  position: absolute;
  z-index: 2;
  top: calc(72px + env(safe-area-inset-top, 0px));
  left: calc(14px + env(safe-area-inset-left, 0px));
  right: calc(14px + env(safe-area-inset-right, 0px));
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--w-plywak-obrys);
  border-radius: var(--radius-2xl);
  background: var(--w-plywak);
  box-shadow: var(--w-cien);
  font-size: 13.5px;
  line-height: 1.4;
}

/* Dymek z czasem przejścia przy linii wariantu. Ciemny, jak dymek z nazwą
   miejsca (`.mp-dymek`); wariant pełny dostaje kolor trasy i leży nad
   pozostałymi — to jego czas czyta się pierwszy. */
.mc-czas {
  padding: 4px 9px;
  border: 1px solid var(--w-plywak-obrys);
  border-radius: var(--radius-pill);
  background: var(--w-plywak);
  color: var(--sand);
  box-shadow: var(--w-cien);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
}

.mc-czas.aktywny {
  z-index: 2;
  border-color: color-mix(in oklab, var(--sand) 70%, transparent);
  background: var(--trasa);
}

/* ---------- arkusz wariantu ---------- */

.wybor-arkusz {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  max-height: min(66%, 560px);
  border: 1px solid oklch(1 0 0 / 0.14);
  border-bottom: 0;
  border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;
  background: var(--forest-deep);
  box-shadow: 0 -14px 36px -12px oklch(0.12 0.02 160 / 0.6);
  animation: wybor-arkusz-wjazd var(--dur-base) var(--ease-out);
}

@keyframes wybor-arkusz-wjazd {
  from { transform: translateY(32px); opacity: 0; }
}

/* Uchwyt: kreska do przeciągnięcia w dół. Warstwa dotykowa wyższa niż
   kreska i z `touch-action: none` — inaczej gest należałby do przeglądarki. */
.wybor-arkusz-uchwyt {
  flex: none;
  position: relative;
  height: 22px;
  touch-action: none;
  cursor: grab;
}

.wybor-arkusz-uchwyt::before {
  content: '';
  position: absolute;
  top: 9px;
  left: 50%;
  width: 40px;
  height: 4px;
  margin-left: -20px;
  border-radius: 2px;
  background: oklch(1 0 0 / 0.28);
}

.wybor-arkusz-glowa {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px 4px 18px;
}

.wybor-arkusz-etykieta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--w-cichy);
}

/* Nazwa celu i trudność w jednym wierszu; dłuższa nazwa spycha pastylkę
   pod siebie zamiast ją ściskać. */
.wybor-arkusz-nazwa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 3px;
}

.wybor-arkusz-glowa h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

.wybor-arkusz-tresc {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 18px 12px;
}

/* Ciepły przycisk główny, jak „Rozpocznij wycieczkę" na starcie — brand
   book: jedno takie CTA na widok, a tu jest nim akceptacja. Bez wcięcia
   ekranu: arkusz stoi na pasku zakładek, a to on je odlicza. */
.wybor-akceptuj {
  flex: none;
  margin: 4px 18px 14px;
  min-height: var(--tap-min);
}

.wybor-przez {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--w-cichy);
}

.wybor-liczby {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--w-kreska);
  border-bottom: 1px solid var(--w-kreska);
}

/* Same wartości, bez podpisów — patrz `arkuszHtml()` w wybor-cel.js. */
.wybor-liczba {
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wybor-uwagi { margin-top: 14px; }

.wybor-uwagi h3 {
  margin: 0 0 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Utrudnienia — ta sama czerwień co karta „Uwaga" w stanie przed
   rozpoczęciem: to jest rzecz, którą trzeba przeczytać przed decyzją. */
.wybor-uwagi {
  padding: 10px 12px;
  border-radius: var(--radius-xl);
  background: var(--trail-hard);
  color: var(--trail-hard-foreground);
}

.wybor-uwagi p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
}

.wybor-uwagi ul {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.4;
}

.wybor-uwagi li span { display: block; }
.wybor-uwagi-zrodlo { font-size: 11.5px; opacity: 0.8; }

/* Pastylki danych — liczby miejsca i trudność trasy. Trudność w barwach
   skali szlaków (warianty *-soft, sprawdzone na 4,5:1 przy 11 px) — na
   ciemnym tle to jedyne jasne plamy w wierszu i tak ma być. */
.wybor-dana {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--w-powierzchnia);
  color: var(--sand);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.wybor-dana.trudnosc-0 { background: var(--trail-easy-soft); color: var(--trail-easy-soft-foreground); }
.wybor-dana.trudnosc-1 { background: var(--trail-medium-soft); color: var(--trail-medium-soft-foreground); }
.wybor-dana.trudnosc-2 { background: var(--trail-hard-soft); color: var(--trail-hard-soft-foreground); }
.wybor-dana.trudnosc-3 { background: var(--trail-expert-soft); color: var(--trail-expert-soft-foreground); }

/* ---------- zakładki ----------

   Dokładnie pasek zakładek planera na telefonie (`.tabs` / `.tab` w style.css,
   blok `max-width: 780px`): te same reguły na tych samych tokenach, sam
   podpis bez ikon. Pierwsza wersja miała ikony i akcent wschodu słońca —
   użytkownik chciał tego samego paska co w planerze (2026-09-11).

   Tokeny idą z motywu ciemnego planera: pasek ma w HTML klasę `dark`, więc
   `--background`, `--primary` i reszta biorą wartości z `.dark` w tokens.css.
   To jest wygląd planera nocą — a jasny pasek pod ciemnym ekranem wyglądałby
   jak przyklejony z innej aplikacji. */
.wybor-zakladki {
  flex: none;
  position: relative;
  z-index: 4;
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0 0 env(safe-area-inset-bottom, 0px);
  background: var(--background);
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow-ridge);
}

.wybor-zakladka {
  flex: 1;
  min-height: 56px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  color: var(--muted-foreground);
  cursor: pointer;
}

.wybor-zakladka[aria-selected="true"] {
  color: var(--foreground);
  font-weight: 600;
  box-shadow: inset 0 2px 0 var(--primary);
}

/* Dymek z nazwą pod pinezką celu (`pokazPodpis()` w mapa-celu.js). Cały jest
   przyciskiem: dotknięcie wybiera cel, strzałka mówi, że to przejście dalej. */
.mc-dymek .maplibregl-popup-content {
  padding: 0;
  border-radius: var(--radius-pill);
  background: none;
  box-shadow: none;
}

.mc-dymek.maplibregl-popup-anchor-top .maplibregl-popup-tip {
  border-bottom-color: var(--forest-deep);
}

.mc-podpis {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap-min);
  padding: 0 10px 0 14px;
  border: 1px solid oklch(1 0 0 / 0.18);
  border-radius: var(--radius-pill);
  background: var(--forest-deep);
  color: var(--sand);
  box-shadow: 0 6px 18px -6px oklch(0.12 0.02 160 / 0.55);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.mc-podpis-czas {
  font-weight: 500;
  color: color-mix(in oklab, var(--sand) 64%, transparent);
}

.mc-podpis svg { flex: none; width: 16px; height: 16px; }

/* ---------- zakładki z listą ---------- */

.wybor-widok-lista {
  display: flex;
  flex-direction: column;
}

.wybor-naglowek {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding:
    calc(12px + env(safe-area-inset-top, 0px))
    calc(16px + env(safe-area-inset-right, 0px))
    12px
    calc(14px + env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--w-kreska);
}

.wybor-naglowek h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
}

.wybor-naglowek p {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--w-cichy);
}

.wybor-naglowek p:empty { display: none; }

.wybor-rzedy {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 16px;
}

.wybor-trasa,
.wybor-miejsce {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--w-kreska);
  background: none;
  font: inherit;
  color: var(--sand);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.wybor-trasa:active,
.wybor-miejsce:active { background: oklch(1 0 0 / 0.06); }

.wybor-trasa {
  display: block;
  padding: 14px calc(18px + env(safe-area-inset-right, 0px)) 14px
    calc(18px + env(safe-area-inset-left, 0px));
}

.wybor-trasa-glowa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.wybor-trasa-nazwa {
  min-width: 0;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.3;
}

.wybor-trasa-dane {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--w-cichy);
}

/* Zmrok — jedyna liczba w wierszu, która krzyczy, bo jedyna mówi
   o bezpieczeństwie. Ciepła, jasna, żeby na lesie było ją widać. */
.wybor-zmrok.po-zmroku {
  color: var(--sunrise);
  font-weight: 600;
}

/* „Moja trasa" ciepłym akcentem marki, „Rekomendowana" mchem — dwa źródła,
   dwie barwy. Propozycja generatora nie ma pastylki. */
.wybor-pastylka {
  flex: none;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.wybor-pastylka.moja { background: var(--sunrise); color: var(--forest-deep); }
.wybor-pastylka.rekomendowana { background: var(--moss); color: var(--sand); }

/* „Idę bez trasy" — przerywana ramka, bo to nie trasa, tylko decyzja,
   żeby żadnej nie brać. */
.wybor-trasa.wybor-wolna {
  width: calc(100% - 28px);
  margin: 14px 14px 0;
  border: 1px dashed oklch(1 0 0 / 0.34);
  border-radius: var(--radius-2xl);
  background: oklch(1 0 0 / 0.04);
}

.wybor-pusto {
  margin: 0;
  padding: 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--w-cichy);
}

.wybor-miejsce {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px calc(16px + env(safe-area-inset-right, 0px)) 12px
    calc(14px + env(safe-area-inset-left, 0px));
}

.wybor-miejsce-foto {
  flex: none;
  width: 96px;
  height: 80px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--w-powierzchnia);
}

.wybor-miejsce-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.foto-zastepnik.wybor-miejsce-foto {
  display: grid;
  place-items: center;
  color: var(--w-cichy);
}

.foto-zastepnik.wybor-miejsce-foto svg { width: 30px; height: 30px; opacity: 0.6; }

.wybor-miejsce-tekst {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.wybor-miejsce-rodzaj {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--w-cichy);
}

.wybor-miejsce-nazwa {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
}

.wybor-dane-rzad {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

/* ---------- szukanie celu ----------

   Ekran i wiersze wyników są wspólne z planerem (css/szukaj.css) i tam
   stoją na jasnych tokenach. Tutaj ten sam układ przechodzi na barwy
   powłoki — nadpisujemy wyłącznie kolory, nie kształt. */
.wybor .szukaj {
  background: var(--forest-deep);
  color: var(--sand);
}

.wybor .szukaj .wp-etykieta { color: var(--w-cichy); }

.wybor .szukaj .pole {
  border-color: oklch(1 0 0 / 0.22);
  background: var(--w-powierzchnia);
  color: var(--sand);
}

.wybor .szukaj .pole::placeholder { color: color-mix(in oklab, var(--sand) 50%, transparent); }
.wybor .szukaj .pole:focus { border-color: var(--sand); }
.wybor .szukaj .btn-ghost { color: var(--sand); }

.wybor .hit {
  border-bottom-color: var(--w-kreska);
  color: var(--sand);
}

.wybor .hit:hover,
.wybor .hit.on { background: oklch(1 0 0 / 0.06); }
.wybor .hit .kind,
.wybor .hit .tez,
.wybor .hit-none { color: var(--w-cichy); }
.wybor .hit mark { color: var(--sunrise); }

@media (prefers-reduced-motion: reduce) {
  .wybor-arkusz { animation: none; }
}

/* ---------------------------------------------------------------
   LISTY I PRZYCISKI PO STARYM EKRANIE WYBORU — dziś dziennik i ekrany list
   --------------------------------------------------------------- */

body.wybor-tla .tlo-zdjecie { display: none; }
body.wybor-tla .tlo-apla { background-image: none; background: var(--forest-deep); }
body.wybor-tla .tlo-winieta { display: none; }

.wybor-wstecz {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  border: 1px solid oklch(1 0 0 / 0.18);
  border-radius: var(--radius-pill);
  background: oklch(1 0 0 / 0.07);
  color: var(--sand);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

/* Lista rośnie do dołu ekranu — tak zachowuje się w dzienniku, gdzie jest
   jedyną treścią. */
.wybor-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

.wybor-lista::-webkit-scrollbar { display: none; }

/* Wiersz dziennika: karta i kosz obok siebie. Karta bierze całą szerokość,
   kosz stoi po prawej — nie NA karcie, bo przycisk w przycisku nie istnieje,
   a nakładka nad rogiem karty łapałaby dotknięcia przeznaczone dla niej. */
.wybor-wiersz {
  display: flex;
  /* Kosz na środku wysokości karty, nie rozciągnięty na całą: jest ikoną
     wielkości celu dotykowego, a nie drugą kolumną wiersza. */
  align-items: center;
  gap: 8px;
}

.wybor-wiersz .wybor-karta { flex: 1 1 auto; min-width: 0; }

/* Kosz jest CICHY z rozmysłu: kasowanie to najrzadsza rzecz, jaką się na tej
   liście robi, a zarazem jedyna nieodwracalna. Ma być dostępny, a nie kusić.
   Dotknięcie otwiera pytanie (`#usun-pytanie` w apka.html) — dopiero „Tak"
   kasuje. */
.wybor-kosz {
  flex: none;
  width: var(--tap-min);
  height: var(--tap-min);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid oklch(1 0 0 / 0.14);
  border-radius: var(--radius-2xl);
  background: oklch(1 0 0 / 0.06);
  color: color-mix(in oklab, var(--sand) 66%, transparent);
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.wybor-karta {
  display: block;
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  font: inherit;
  color: var(--sand);
  cursor: pointer;
}

.wybor-skad {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--sand) 52%, transparent);
}

.wybor-nazwa {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
}

.wybor-dane {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: color-mix(in oklab, var(--sand) 78%, transparent);
}

.wybor-czekaj {
  margin: 0;
  padding: 16px;
  border-radius: var(--radius-2xl);
  background: oklch(1 0 0 / 0.06);
  font-size: 13.5px;
  color: color-mix(in oklab, var(--sand) 78%, transparent);
}

/* ---------------------------------------------------------------
   PANEL RATUNKOWY (M7)

   Ekran oglądany w najgorszych warunkach, jakie ta aplikacja
   przewiduje: w deszczu, w rękawicach, z telefonem przy uchu,
   przez kogoś, kto właśnie się przestraszył. Stąd trzy reguły:

   1. WSPÓŁRZĘDNE SĄ NAJWIĘKSZĄ RZECZĄ NA EKRANIE. Dyktuje się je
      obcemu człowiekowi przez telefon; jedna pomylona cyfra to
      kilometr w bok.
   2. Cel dotknięcia nigdy poniżej 56 px. Palec w rękawicy nie
      trafia w listę odnośników z serwisu internetowego.
   3. Żadnego `backdrop-filter` i żadnej czerwieni na tle. Szkło
      kosztuje klatki (reguła z M4.4), a czerwony ekran w panice
      nie pomaga — kolor uwagi bierzemy z `--sunrise`.
   --------------------------------------------------------------- */

/* Wejście: pastylka, nie alarm. Dopóki nikomu nic nie jest, ma nie
   zabierać uwagi ekranowi, na którym planuje się przyjemny dzień. */
/* Dwie pastylki w jednym rzędzie. Kolumna drugorzędnych przycisków pod dwoma
   pierwszorzędnymi rosła z każdą nową funkcją, a im była dłuższa, tym mniej
   znaczył każdy jej element. `wrap` zostaje na wypadek dużej czcionki
   systemowej: wtedy wolimy dwa wiersze niż ucięty podpis. */
.start-pastylki {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.ratunek-wejscie {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: center;
  padding: 8px 14px;
  border: 1px solid color-mix(in oklab, var(--sunrise) 45%, transparent);
  border-radius: var(--radius-pill);
  background: oklch(1 0 0 / 0.05);
  color: color-mix(in oklab, var(--sand) 88%, transparent);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

/* Znak SOS zamiast ikony kreskowej — ten sam przedmiot co na ekranie
   wycieczki, tylko mniejszy. Nie dziedziczy po `.ratunek-sos`, bo tamten jest
   samodzielnym przyciskiem (34 px, własne pole dotyku), a ten jest znakiem
   WEWNĄTRZ przycisku i musi zmieścić się w pastylce. */
.ratunek-znak {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin: -4px 0 -4px -6px;
  border-radius: 50%;
  background: oklch(0.53 0.2 27);
  color: oklch(0.99 0.01 86);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.ratunek-wejscie:hover { background: oklch(1 0 0 / 0.12); }

/* Znak ratunku na ekranie wycieczki: czerwone koło z napisem SOS.

   Wcześniej stał tu krzyż w kole na przezroczystej pastylce — znak na tyle
   niejednoznaczny, że musiała go tłumaczyć druga, podpisana pastylka na dole
   ekranu. „SOS" tłumaczy się samo, więc tamta mogła zniknąć.

   Kolor jest wpisany na sztywno, a nie wzięty z tokenów, i to jest wybór:
   `--trail-expert` w motywie ciemnym jaśnieje, a przycisk wzywania pomocy ma
   być tym samym czerwonym kołem o każdej porze i przy każdym motywie.
   Czerwień jest z tej samej rodziny (oklch, hue 27), tylko nieruchoma.

   **Rysunek zmniejszony, pole dotyku nie.** Koło 44 px przytłaczało nagłówek —
   wyglądało jak główna akcja tego ekranu, a jest wyjściem awaryjnym. Rysunek
   ma więc 34 px, a `::before` rozciąga obszar klikalny z powrotem do 44:
   mniejszego celu nie trafia się w rękawicy, a to jest jedyny przycisk na tym
   ekranie, przy którym pudło naprawdę kosztuje. Zmniejszenie samego pola
   dotyku byłoby oszczędnością na złej rzeczy. */
.ratunek-sos {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: oklch(0.53 0.2 27);
  color: oklch(0.99 0.01 86);
  font: inherit;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.ratunek-sos::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
}

.ratunek-sos:hover { background: oklch(0.58 0.21 27); }

.ratunek {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--forest-deep);
  padding:
    calc(10px + env(safe-area-inset-top, 0px))
    calc(16px + env(safe-area-inset-right, 0px))
    calc(20px + env(safe-area-inset-bottom, 0px))
    calc(16px + env(safe-area-inset-left, 0px));
  box-sizing: border-box;
}

.rat-glowa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.rat-glowa h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
}

.rat-zamknij {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid oklch(1 0 0 / 0.18);
  border-radius: 50%;
  background: oklch(1 0 0 / 0.06);
  color: var(--sand);
  cursor: pointer;
}

.rat-zamknij svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; }

.rat-tresc {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* --- pozycja --- */

.rat-pozycja {
  padding: 14px 16px;
  border-radius: var(--radius-2xl);
  background: oklch(1 0 0 / 0.07);
  border: 1px solid oklch(1 0 0 / 0.12);
}

/* Stary odczyt i brak odczytu wyglądają INACZEJ niż świeży — ale nie
   mniej ważnie. Ramka mówi „uwaga", rozmiar cyfr zostaje ten sam, bo
   ostatnie znane miejsce to dokładnie to, o co zapyta dyżurny. */
.rat-pozycja.stara { border-color: color-mix(in oklab, var(--sunrise) 55%, transparent); }
.rat-pozycja.brak { border-style: dashed; }

/* Współrzędne MUSZĄ dać się zaznaczyć i skopiować palcem — przycisk
   „Kopiuj" jest wygodą, a nie jedyną drogą. */
.rat-dd, .rat-dms {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  user-select: text;
  -webkit-user-select: text;
}

.rat-dd {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.15;
}

.rat-dms {
  font-size: 14px;
  color: color-mix(in oklab, var(--sand) 82%, transparent);
}

.rat-meta {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: color-mix(in oklab, var(--sand) 68%, transparent);
}

.rat-brak {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
}

.rat-ostrzezenie {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--sunrise);
}

.rat-akcje {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.rat-akcja {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid oklch(1 0 0 / 0.18);
  border-radius: var(--radius-pill);
  background: oklch(1 0 0 / 0.07);
  color: var(--sand);
  font: inherit;
  font-size: 13.5px;
  text-decoration: none;
  cursor: pointer;
}

.rat-akcja.szeroka { width: 100%; }
.rat-akcja svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* --- numery --- */

.rat-numery { display: flex; flex-direction: column; gap: 8px; }

.rat-numer {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 16px;
  border-radius: var(--radius-2xl);
  background: oklch(1 0 0 / 0.07);
  color: var(--sand);
  text-decoration: none;
}

/* 112 jako jedyny numer działa bez karty SIM i po obu stronach granicy,
   więc jako jedyny jest odpowiedzią także wtedy, gdy nie wiemy, gdzie
   stoi dzwoniący. Ciepłe tło z ciemnym tekstem czyta się w pełnym
   słońcu lepiej niż cokolwiek jasnego na ciemnym. */
.rat-numer.glowny {
  background: var(--sunrise);
  color: var(--forest-deep);
}

/* Numer nad opisem, nie obok. Przy „+421 52 442 28 20" układ obok siebie
   zostawiał opisowi trzy słowa na trzy linijki, a cyfry i tak są tym, co
   człowiek czyta pierwsze — mają zaczynać się w tym samym miejscu w każdym
   wierszu listy. */
.rat-numer-tekst {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.rat-numer-cyfry {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  white-space: nowrap;
}

.rat-numer-opis {
  font-size: 12.5px;
  line-height: 1.35;
  color: color-mix(in oklab, currentColor 72%, transparent);
}

.rat-numer-ikona { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; }

.rat-sluzba {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rat-sluzba-glowa {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 2px;
  font-size: 12px;
}

.rat-sluzba-glowa b { font-family: var(--font-display); font-size: 14px; }
.rat-sluzba-glowa span { color: color-mix(in oklab, var(--sand) 62%, transparent); }
.rat-sluzba.tutaj .rat-sluzba-glowa span { color: var(--sunrise); }

/* --- co powiedzieć, aplikacje, źródła --- */

.rat-mowa-lista {
  margin: 8px 0 0;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.55;
}

.rat-mowa-lista li { margin-bottom: 4px; }

.rat-apka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  margin-top: 8px;
  padding: 10px 14px;
  border: 1px solid oklch(1 0 0 / 0.14);
  border-radius: var(--radius-2xl);
  color: var(--sand);
  font-size: 13.5px;
  text-decoration: none;
}

.rat-apka svg { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.9; }

.rat-zrodla {
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: color-mix(in oklab, var(--sand) 55%, transparent);
}

/* ---------------------------------------------------------------
   NOTA I „O APLIKACJI" (M7.7, M7.8)

   Nota jest jedyną rzeczą w tej aplikacji, która ZATRZYMUJE —
   i dlatego ma wyglądać na kartę położoną na ekranie, a nie na
   kolejny ekran. Człowiek ma widzieć, że stoi w miejscu, do
   którego zaraz wróci.
   --------------------------------------------------------------- */

.start-oapl {
  margin-top: 10px;
  padding: 4px 10px;
  border: 0;
  background: none;
  color: color-mix(in oklab, var(--sand) 50%, transparent);
  font: inherit;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.start-oapl:hover { color: var(--sand); }

.nota {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding:
    calc(16px + env(safe-area-inset-top, 0px))
    calc(14px + env(safe-area-inset-right, 0px))
    calc(16px + env(safe-area-inset-bottom, 0px))
    calc(14px + env(safe-area-inset-left, 0px));
  /* Przyciemnienie zamiast szkła: ekran pod spodem ma być widoczny, ale
     nieczytelny — to karta na wierzchu, nie nowy ekran. `backdrop-filter`
     zostaje poza grą tak samo jak wszędzie w powłoce (M4.4). */
  background: oklch(0.12 0.02 160 / 0.72);
  box-sizing: border-box;
}

.nota-karta {
  width: 100%;
  max-width: 460px;
  max-height: 100%;
  overflow-y: auto;
  padding: 20px 18px 18px;
  border-radius: var(--radius-2xl);
  background: var(--forest-deep);
  border: 1px solid oklch(1 0 0 / 0.14);
  box-sizing: border-box;
}

.nota-karta h2 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
}

.nota-punkt { margin-top: 14px; }

.nota-punkt h3 {
  margin: 0 0 3px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sunrise);
}

.nota-punkt p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: color-mix(in oklab, var(--sand) 86%, transparent);
}

.nota-akcje {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}

.nota-akcje .btn { flex: 1 1 0; justify-content: center; }

/* „Tak" w pytaniu o usunięcie — barwą alarmu, nie ciepłym CTA: to czynność
   nieodwracalna, a nie dalszy ciąg drogi. */
.nota-akcje .usun-tak {
  border: 1px solid var(--alert-border);
  background: var(--alert);
  color: var(--alert-foreground);
}

/* „Jeszcze nie" musi być widoczne. Wyjście, którego nie widać, zamienia notę
   w bramkę — a tego ekranu bramką z rozmysłu nie robimy. */
.nota-akcje .btn-cichy {
  border: 1px solid oklch(1 0 0 / 0.2);
  background: oklch(1 0 0 / 0.06);
  color: var(--sand);
}

.nota-wiecej {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  border: 0;
  background: none;
  color: color-mix(in oklab, var(--sand) 60%, transparent);
  font: inherit;
  font-size: 12.5px;
  text-decoration: underline;
  cursor: pointer;
}

/* Ekran „O aplikacji" dzieli powierzchnię z panelem ratunkowym — ta sama
   głowa, ta sama siatka treści. Osobna klasa tylko po to, żeby leżał NAD
   panelem: wchodzi się tu z niego i ma być dokąd wrócić. */
.oapl {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--forest-deep);
  padding:
    calc(10px + env(safe-area-inset-top, 0px))
    calc(16px + env(safe-area-inset-right, 0px))
    calc(20px + env(safe-area-inset-bottom, 0px))
    calc(16px + env(safe-area-inset-left, 0px));
  box-sizing: border-box;
}

.oapl-wersja {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: color-mix(in oklab, var(--sand) 70%, transparent);
}

.oapl-lista {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.oapl-lista li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}

.oapl-lista b { font-weight: 600; }

.oapl-lista span {
  font-size: 12.5px;
  line-height: 1.4;
  color: color-mix(in oklab, var(--sand) 68%, transparent);
}

/* --- „Pomóż nam rozwijać aplikację" i formularz kontaktowy (2026-09-11) ---
   Karta w materiale pozycji z panelu ratunkowego — jaśniejsza warstwa na
   ciemnym tle — bo to jedyna rzecz na tym ekranie, którą się ROBI, a nie
   czyta. */
.oapl-kontakt {
  margin-top: 6px;
  padding: 16px;
  border-radius: var(--radius-2xl);
  background: oklch(1 0 0 / 0.07);
  border: 1px solid oklch(1 0 0 / 0.12);
}

.oapl-kontakt h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
}

.oapl-kontakt p {
  margin: 6px 0 14px;
  font-size: 14px;
  line-height: 1.45;
  color: color-mix(in oklab, var(--sand) 78%, transparent);
}

.oapl-kontakt .btn { width: 100%; }

/* Nad „O aplikacji", z którego się tu wchodzi. `color-scheme` daje ciemną
   listę opcji w selekcie i ciemny kursor tekstu — systemowe kontrolki
   inaczej rysują się jasno na ciemnym ekranie. */
.kontakt { z-index: 61; color-scheme: dark; }

/* Formularz i podziękowanie mają `.rat-tresc` (flex), a klasa z wyświetlaniem
   przebija atrybut `hidden`. */
.kontakt-formularz[hidden],
.kontakt-dzieki[hidden] { display: none; }

.kontakt-formularz { gap: 0; }

.kontakt-pole {
  display: block;
  margin: 16px 0 6px;
  font-size: 13px;
  font-weight: 600;
}

.kontakt-formularz > .kontakt-pole:first-child { margin-top: 0; }

.kontakt-input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  border: 1px solid oklch(1 0 0 / 0.18);
  border-radius: var(--radius-lg);
  background-color: oklch(1 0 0 / 0.06);
  color: var(--sand);
  font: inherit;
  /* 16 px to próg, poniżej którego Safari na iOS samo przybliża stronę przy
     wejściu w pole — a przybliżona apka zostaje przybliżona. */
  font-size: 16px;
  line-height: 1.4;
}

.kontakt-input:focus {
  outline: 2px solid color-mix(in oklab, var(--moss) 60%, transparent);
  outline-offset: 1px;
}

textarea.kontakt-input { min-height: 150px; resize: vertical; }

/* Własna strzałka zamiast systemowej: WebKit rysuje natywny select jako
   jasną pigułkę, której nie da się przemalować. Barwa w obrazku jest
   wpisana na sztywno — to `--sand`. */
select.kontakt-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7F3EA' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
}

/* Pułapka na roboty — poza ekranem, a nie `display: none`: część automatów
   pomija pola, których nie ma w układzie. */
.kontakt-pulapka {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.kontakt-stan {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
}

.kontakt-stan:empty { display: none; }
.kontakt-stan.blad { color: var(--sunrise); }

#kontakt-wyslij { width: 100%; margin-top: 18px; }

.kontakt-dzieki h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
}

.kontakt-dzieki p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: color-mix(in oklab, var(--sand) 82%, transparent);
}

/* ---------------------------------------------------------------
   DZIENNIK PRZEJŚĆ (M8)

   Jedyny ekran w tej aplikacji, na którym nic nie trzeba
   zdecydować i nikt się nie spieszy. Wraca więc to, czego
   ekran wycieczki nie ma prawa mieć: powietrze, tabela liczb
   i tekst dłuższy niż trzy słowa.
   --------------------------------------------------------------- */

/* Znaczniki rodzaju w dzienniku: plan, przejście, przejście niezamknięte.
   Trzy stany jednej listy — więc różnią się nasyceniem, a nie krzykiem.
   Krzyczy tylko zmrok, bo tylko on mówi o bezpieczeństwie. */
.kafel-znacznik.plan,
.wybor-karta .kafel-znacznik.plan {
  background: oklch(1 0 0 / 0.1);
  color: color-mix(in oklab, var(--sand) 78%, transparent);
}

.kafel-znacznik.ukonczona,
.wybor-karta .kafel-znacznik.ukonczona {
  background: color-mix(in oklab, var(--moss) 55%, transparent);
  color: var(--sand);
}

/* Ostrzeżenie o zmroku stoi NAD stopką, a nie w niej: na kaflu szerokim
   na 190 px dwa znaczniki w jednym rzędzie nie mieszczą się bez ucinania,
   a ucięte ostrzeżenie jest gorsze niż żadne. */
.kafel-alarm {
  display: inline-block;
  margin-top: 8px;
}

/* Lista i wpis dzielą układ z ekranem wyboru trasy — ta sama kolumna z głową
   u góry i przewijaną treścią pod spodem. Osobne klasy, wspólne wnętrze. */
.lista-ekran,
.wpis-ekran,
.pg-ekran {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding:
    calc(10px + env(safe-area-inset-top, 0px))
    calc(14px + env(safe-area-inset-right, 0px))
    calc(10px + env(safe-area-inset-bottom, 0px))
    calc(14px + env(safe-area-inset-left, 0px));
  box-sizing: border-box;
}

.wpis-tresc {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

.wpis-tresc::-webkit-scrollbar { display: none; }

.wpis-nazwa {
  margin: 4px 0 2px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
}

.wpis-kiedy {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: color-mix(in oklab, var(--sand) 68%, transparent);
}

/* Wpis, którego nikt nie zamknął. Kolor uwagi, nie błędu — nic złego się nie
   stało, aplikacja po prostu nie wie, jak to się skończyło. */
.wpis-znacznik {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--sunrise);
}

/* Przejście obok planu. Dwie kolumny liczb to jedyny powód, dla którego ten
   ekran w ogóle istnieje: „plan mówił cztery godziny, wyszło pięć". */
.wpis-liczby {
  width: 100%;
  margin: 14px 0 0;
  border-collapse: collapse;
  font-size: 14px;
}

.wpis-liczby th,
.wpis-liczby td {
  padding: 9px 0;
  text-align: right;
  border-bottom: 1px solid oklch(1 0 0 / 0.1);
}

.wpis-liczby thead th {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--sand) 52%, transparent);
}

.wpis-liczby tbody th {
  text-align: left;
  font-weight: 500;
  color: color-mix(in oklab, var(--sand) 78%, transparent);
}

.wpis-liczby tbody td {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  width: 28%;
}

/* Kolumna planu jest tłem dla kolumny przejścia, nie jej rywalem. */
.wpis-liczby tbody td.plan {
  font-weight: 400;
  color: color-mix(in oklab, var(--sand) 58%, transparent);
}

.wpis-mapa {
  height: 46vh;
  min-height: 220px;
  margin: 14px 0 0;
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

.wpis-brak-sladu {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: var(--radius-2xl);
  background: oklch(1 0 0 / 0.06);
  font-size: 13px;
  line-height: 1.5;
  color: color-mix(in oklab, var(--sand) 74%, transparent);
}

.wpis-akcje {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.wpis-akcje .rat-akcja { flex: 1 1 0; }

/* Kasowanie stoi osobno i nisko: to jedyna nieodwracalna rzecz na tym
   ekranie, więc nie ma prawa sąsiadować z przyciskiem, który się naciska. */
.wpis-usun {
  display: block;
  width: 100%;
  margin: 20px 0 4px;
  padding: 10px;
  border: 0;
  background: none;
  color: color-mix(in oklab, var(--sand) 55%, transparent);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

.wpis-usun[data-pewny="1"] {
  color: var(--sunrise);
  text-decoration: none;
  font-weight: 600;
}

/* ---------- trener przejścia: podsumowanie na ekranie wpisu ---------- */

/* Jedno zdanie, które mówi coś o tym, kto szedł. Stoi nad liczbami, bo jest
   ich wnioskiem — liczby pod spodem są dla tych, którzy chcą sprawdzić. */
.pods-teza {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  text-wrap: pretty;
}

/* Kafle po dwa w rzędzie na telefonie: przy trzech czwarty („najdłuższy")
   zostawał sam w drugim rzędzie i wyglądał na pomyłkę układu. */
.pods-czasy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin: 12px 0 0;
}

.pods-czasy div {
  padding: 9px 12px 10px;
  border-radius: var(--radius-xl, 14px);
  background: oklch(1 0 0 / 0.06);
}

.pods-czasy dt {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--sand) 52%, transparent);
}

.pods-czasy dd {
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pods-uwaga {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: color-mix(in oklab, var(--sand) 62%, transparent);
}

.pods-sekcja { margin-top: 22px; }

.pods-tytul {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--sand) 52%, transparent);
}

.pods-zdanie {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}

/* Tabela klas dziedziczy wygląd tabeli wobec planu — pięć kolumn zamiast
   trzech, więc bez sztywnej szerokości komórek. */
.pods-klasy { margin-top: 6px; }
.pods-klasy tbody td { width: auto; font-size: 14px; }

.pods-wykres {
  display: block;
  width: 100%;
  margin-top: 8px;
  overflow: visible;
}

.pw-postoj { fill: oklch(1 0 0 / 0.07); }
.pw-kreska { stroke: oklch(1 0 0 / 0.22); stroke-width: 1; }

.pw-model {
  fill: none;
  stroke: color-mix(in oklab, var(--sand) 60%, transparent);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}

.pw-ty {
  fill: none;
  stroke: var(--sunrise);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.pw-meta { fill: var(--sunrise); stroke: var(--forest-deep); stroke-width: 1.5; }

.pods-legenda {
  display: flex;
  gap: 16px;
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: color-mix(in oklab, var(--sand) 62%, transparent);
}

.pods-legenda span::before {
  content: "";
  display: inline-block;
  width: 14px;
  margin-right: 6px;
  vertical-align: middle;
  border-top: 2px solid var(--sunrise);
}

.pods-legenda .pl-model::before {
  border-top: 2px dashed color-mix(in oklab, var(--sand) 60%, transparent);
}

.pods-legenda .pl-postoj::before {
  width: 10px;
  height: 10px;
  border: 0;
  background: oklch(1 0 0 / 0.16);
}

.pods-powtorka {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.45;
}

/* Znacznik na karcie listy — ten sam kształt co znacznik zmroku na kaflach
   tras, bo to ta sama klasa informacji: jedno słowo, które zmienia czytanie
   całej karty. */
.kafel-znacznik.niepewny {
  display: inline-block;
  margin-top: 8px;
  color: var(--sunrise);
}

/* Przełącznik śladu (M8.3/M8.4). Nie systemowy „switch", bo ten ekran nie ma
   ani jednego innego — pastylka z napisem mówi to samo i czyta się ją bez
   uczenia się, co znaczy przechylony suwak. */
.wyc-slad-przycisk {
  padding: 6px 14px;
  border: 1px solid oklch(1 0 0 / 0.2);
  border-radius: var(--radius-pill);
  background: oklch(1 0 0 / 0.06);
  color: color-mix(in oklab, var(--sand) 80%, transparent);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
}

.wyc-slad-przycisk.wlaczony {
  border-color: transparent;
  background: var(--sunrise);
  color: var(--forest-deep);
  font-weight: 600;
}

.wyc-slad-opis {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: color-mix(in oklab, var(--sand) 70%, transparent);
}

/* ---------- karta burzowa (B4) ---------- */

/* Stoi nad przyciskiem startu i ma być czytana PRZED nim, ale nie zamiast
   niego: to jest wiedza do decyzji, a nie blokada. Stąd ramka, a nie płachta
   koloru — czerwone tło na całą kartę czyta się jako awaria aplikacji, nie
   jako pogoda. Kolory z tokenów ostrzegawczych, te same co reszta ostrzeżeń
   w aplikacji; żadnej nowej palety. */
.trasa-burza {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid oklch(1 0 0 / 0.1);
}

.bu-tytul {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.bu-tytul svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  color: color-mix(in oklab, var(--sand) 60%, transparent);
}

.bu-glowne {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.5;
}

/* Zdanie główne w stanie „burza cię zastanie" i w komunikacie dla wycieczki
   bez trasy. Sam tekst zmienia kolor, bez tła — czyta się jak wyróżnienie
   w zdaniu, a nie jak alarm systemowy. */
.bu-alarm {
  color: var(--warn-foreground);
  font-weight: 600;
}

.bu-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  line-height: 1.5;
}

.bu-lista li {
  padding: 7px 0;
  border-bottom: 1px solid oklch(1 0 0 / 0.05);
}

.bu-lista li:last-child { border-bottom: 0; }

/* Wiersze, które mówią o czymś, czego nie da się naprawić tempem: ekspozycja,
   brak schronienia, spóźnione wyjście.

   **Sam kolor, bez `display: flex`** — i to jest poprawka po obejrzeniu zrzutu,
   nie kosmetyka. Flex robi z KAŻDEGO dziecka osobne pudełko, więc zdanie
   zawierające `<b>14:51</b>` rozpadało się na trzy kolumny ustawione obok
   siebie. Układ w kolumnach dostaje tylko wiersz, który naprawdę ma dwie
   części: ikonę i tekst. */
.bu-uwaga {
  color: var(--warn-foreground);
}

.bu-z-ikona {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.bu-uwaga svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  align-self: center;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.bu-drobne {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: color-mix(in oklab, var(--sand) 62%, transparent);
}

/* Głos służby stoi OBOK naszego rachunku i ma wyglądać na cytat, a nie na
   nasze zdanie — stąd listwa z boku zamiast ramki dookoła. */
.bu-sluzby {
  margin-top: 12px;
  padding-left: 12px;
  border-left: 2px solid var(--warn-border);
}

.bu-sluzba {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.45;
}

.bu-sluzba:last-child { margin-bottom: 0; }

.bu-zrodlo {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: color-mix(in oklab, var(--warn) 70%, transparent);
  color: var(--warn-foreground);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: 1px;
}

.bu-tresc {
  display: block;
  margin-top: 3px;
  color: color-mix(in oklab, var(--sand) 70%, transparent);
}

/* Wiek danych jest częścią danych — ta sama zasada co na ekranie prognozy. */
.bu-wiek {
  margin: 12px 0 0;
  font-size: 12px;
  color: color-mix(in oklab, var(--sand) 50%, transparent);
  font-variant-numeric: tabular-nums;
}

/* Dane starsze niż półtorej godziny przestają być tłem i wchodzą w oko:
   cisza z braku łączności nie może wyglądać jak cisza z braku burz. */
.bu-stare {
  color: var(--warn-foreground);
}

/* Blok startu na ekranie trasy. Jedyne miejsce w aplikacji, które blokuje
   działanie z powodu położenia — więc zawsze mówi, czego mu brakuje. */
.trasa-start {
  margin-top: 18px;
}

.trasa-start .btn {
  width: 100%;
  justify-content: center;
}

.trasa-start .btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.trasa-powod {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: color-mix(in oklab, var(--sand) 74%, transparent);
}

.trasa-start .rat-akcja { margin-top: 10px; }

/* Dojście do startu (M13): jedno zdanie o kierunku, nic więcej. Mapa jest
   pod zakładką obok i to tam stoi znacznik startu. */
/* Zdanie pod liczbami dojścia: powód, ostrzeżenie albo „to osobny etap
   wyprawy". Mniejsze od liczb i wyraźnie ciszej — jest przypisem do decyzji,
   a nie decyzją. */
.wyc-przed-opis {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: color-mix(in oklab, var(--sand) 72%, transparent);
}

.wyc-przed-opis.ostrzega { color: var(--sunrise); }

.wyc-dojscie-tekst {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

/* ---------------------------------------------------------------
   ZNACZNIKI NA MAPACH (mobile/znacznik-miejsca.js, mobile/znacznik-pozycji.js)

   Dwa znaczniki i dwie różne role, więc dwa różne kształty. Miejsce jest
   PINEZKĄ: stoi na ziemi, ma czubek wskazujący konkretny punkt i nie rusza
   się. Ty jesteś KROPKĄ: nie masz czubka, bo pozycja jest przybliżeniem,
   za to oddychasz i wiesz, w którą stronę patrzysz.
   --------------------------------------------------------------- */

.mp-mapa {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--forest-deep);
}

/* ---------- znacznik miejsca ---------- */

/* Rysunek przyszedł do DOM-u z `ui/znaczniki.js` (M14) i to jest cała zmiana
   w tym miejscu: kropla z `border-radius` zamieniła się w kadr sygnetu, a CSS
   przestał być drugim miejscem, w którym opisujemy kształt znacznika. Planer
   i apka rysują teraz to samo z jednego pliku.

   Zostaje tu wyłącznie ROZMIAR i zachowanie — czyli to, co należy do
   powłoki, a nie do rysunku.

   Wysokości NIE PODAJEMY i to jest zabezpieczenie, nie skrót: element bierze
   ją z proporcji siatki SVG. Wpisana na sztywno rozjeżdża się przy pierwszej
   zmianie rysunku, a skutek jest podstępny — nadmiar wysokości wygląda jak
   pusty margines pod znacznikiem, a znaczy, że czubek stoi kilka pikseli nad
   swoim miejscem. Zakotwiczenie idzie po dolnej krawędzi ELEMENTU
   (`anchor: 'bottom'` w JS), więc to ona musi kończyć się dokładnie tam,
   gdzie kończy się czubek. */
.mp-znacznik {
  position: relative;
  width: 30px;
  cursor: pointer;
  line-height: 0;
}

.mp-znacznik svg {
  width: 100%;
  height: auto;
  display: block;
  /* Cień pod znacznikiem robi filtr, a nie rysunek: w SVG musiałby zmieścić
     się w siatce nad czubkiem, tutaj wolno mu wyjść poza element. Delikatny,
     bo obwódka piaskowa i tak odkleja znacznik od stoku — ten cień dokłada
     tylko głębi na jasnym śniegu. */
  filter: drop-shadow(0 1px 2px oklch(0.24 0.028 160 / 0.3));
}

/* Punkt pośredni jest PIERŚCIENIEM, nie pinezką: jego miejscem jest środek
   kółka, więc zakotwiczenie idzie na środek (JS) i element musi być kwadratem.
   Mniejszy od reszty, bo przystanek po drodze nie jest celem. */
.mp-znacznik.posredni {
  width: 20px;
}

/* ---------- kropka pozycji ---------- */

/* Zieleń zamiast błękitu (decyzja z 30.08.2026) — powód i cena stoją przy
   tokenie `--pozycja` w tokens.css. Tutaj zostaje to, czym kropka się broni:
   piaskowy pierścień i ciemny włos na jego zewnętrznej krawędzi. Bez nich
   jasna zieleń na jasnym stoku nie ma się o co oprzeć. */
.zp {
  position: relative;
  width: 18px;
  height: 18px;
}

.zp-rdzen,
.zp-tetno,
.zp-tetno-2 {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.zp-rdzen {
  border: 2.5px solid var(--sand);
  background: var(--pozycja);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--forest) 45%, transparent),
              0 1px 5px oklch(0 0 0 / 0.4);
}

/* Tętno leży POD rdzeniem i tylko ono się rusza. Animowanie całego znacznika
   przesuwałoby też punkt zaczepienia MapLibre, czyli kropka odjeżdżałaby
   od swojego miejsca na mapie w rytm animacji.

   Puls jest teraz ROZCHODZĄCĄ SIĘ POZIOMICĄ, a nie rozmywającą się plamą:
   dwa pierścienie w przesuniętych fazach. To ta sama rodzina rysunku, co
   punkt pośredni i krańce śladu — kropka pozycji przestała być na mapie
   jedynym obcym ciałem. */
.zp-tetno,
.zp-tetno-2 {
  border: 2px solid var(--pozycja);
  animation: zp-puls 2.6s ease-out infinite;
}

.zp-tetno-2 {
  border-width: 1.4px;
  animation-delay: -1.3s;
}

@keyframes zp-puls {
  0%   { transform: scale(0.9); opacity: 0.55; }
  70%  { transform: scale(2.7); opacity: 0; }
  100% { transform: scale(2.7); opacity: 0; }
}

/* Stożek patrzenia. Trójkąt wycięty z kwadratu, rozmyty przy krawędziach
   i przygaszony ku wierzchołkowi — ma sugerować pole widzenia, a nie
   wskazywać jak strzałka. Obrót idzie ze zmiennej `--kat`, którą ustawia
   `znacznik-pozycji.js`; punkt obrotu leży w środku kropki. */
.zp-stozek {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 46px;
  height: 40px;
  margin-left: -23px;
  display: none;
  transform-origin: 50% 100%;
  transform: rotate(var(--kat, 0deg));
  background: linear-gradient(
    to top,
    color-mix(in oklab, var(--pozycja-stozek) 62%, transparent),
    transparent);
  clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
  filter: blur(1px);
  pointer-events: none;
}

.zp.ma-kierunek .zp-stozek { display: block; }

@media (prefers-reduced-motion: reduce) {
  .zp-tetno { animation: none; opacity: 0.3; transform: scale(1.9); }
  .zp-tetno-2 { animation: none; opacity: 0; }
}

/* Dymek z nazwą punktu startowego. MapLibre daje własne style dla popupu,
   więc nadpisujemy je w jednym miejscu — mapka jest ciemna i biała chmurka
   z cienkim ogonkiem wygląda na niej jak element cudzej aplikacji. */
.mp-dymek .maplibregl-popup-content {
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  background: var(--forest-deep);
  box-shadow: 0 2px 10px oklch(0 0 0 / 0.4);
  color: var(--sand);
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.3;
  white-space: nowrap;
}

.mp-dymek .maplibregl-popup-tip { display: none; }

/* Dymek zamknięcia albo utrudnienia (`ui/warstwy-ograniczen.js`). Ten sam
   ciemny kolor co `.mp-dymek`, ale karta zamiast pastylki: niesie kilka
   linijek — co, gdzie, dlaczego i skąd wiadomo, z datą. */
.ogr-dymek .maplibregl-popup-content {
  padding: 10px 30px 10px 12px;
  border-radius: var(--radius-xl);
  background: var(--forest-deep);
  box-shadow: 0 6px 18px -6px oklch(0.12 0.02 160 / 0.55);
  color: var(--sand);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
}

.ogr-dymek .maplibregl-popup-tip { display: none; }

.ogr-dymek .maplibregl-popup-close-button {
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  color: var(--sand);
  font-size: 20px;
}

.ogr-dymek .ogr-wpis + .ogr-wpis {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid oklch(1 0 0 / 0.15);
}

.ogr-dymek .np-name { font-weight: 600; }
.ogr-dymek .np-sub,
.ogr-dymek .ogr-okres { opacity: 0.85; }
.ogr-dymek .ogr-powod { margin: 4px 0 0; }
.ogr-dymek .ogr-zrodlo { margin-top: 4px; font-size: 11.5px; opacity: 0.7; }

/* --- przewodnik na ekranie trasy (G4) ------------------------------------
   Sekcja stoi POD blokiem startu, a nad akcjami: „co jest po drodze" jest
   informacją do przejrzenia przed wyjściem, a nie decyzją konkurującą
   z „Rozpocznij". Gdy trasa nie mija żadnego opisanego miejsca, sekcji nie ma
   wcale — nagłówek nad pustką wyglądałby na usterkę. */
.trasa-przewodnik {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid oklch(1 0 0 / 0.1);
}

/* Sygnet przy tytule — ten sam znak, co w monicie o przybyciu i tam, gdzie
   opowieść się odtwarza. Trzy różne miejsca, jedna twarz: człowiek ma poznać
   przewodnika po znaku, zanim przeczyta nagłówek. */
.prz-tytul {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.prz-tytul svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  color: color-mix(in oklab, var(--moss) 55%, var(--sand));
}

.prz-podsumowanie {
  margin: 6px 0 12px;
  font-size: 13px;
  line-height: 1.45;
  color: color-mix(in oklab, var(--sand) 70%, transparent);
}

.prz-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.prz-poz {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid oklch(1 0 0 / 0.05);
  background: none;
  color: inherit;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.prz-lista li:last-child .prz-poz { border-bottom: 0; }

.prz-nazwa { flex: 1 1 auto; }

.prz-czas {
  flex: 0 0 auto;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: color-mix(in oklab, var(--sand) 55%, transparent);
}

/* Pobrane poznaje się po znaczniku, nie po kolorze samego wiersza: lista ma
   być czytelna jako całość, a nie rozpadać się na dwie grupy o różnej jasności. */
.prz-poz-jest .prz-nazwa::after {
  content: '↓';
  margin-left: 7px;
  font-size: 11px;
  color: var(--moss);
}

.prz-akcja { margin-top: 14px; }

.prz-pobierz {
  display: block;
  width: 100%;
  padding: 12px;
  border: 1px solid color-mix(in oklab, var(--moss) 55%, transparent);
  border-radius: var(--radius-2xl);
  background: color-mix(in oklab, var(--moss) 18%, transparent);
  color: var(--sand);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.prz-postep,
.prz-gotowe,
.prz-bezsieci,
.prz-blad {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: color-mix(in oklab, var(--sand) 74%, transparent);
}

.prz-gotowe { color: color-mix(in oklab, var(--moss) 80%, var(--sand)); }

/* Błąd pobierania NIE jest czerwony: częściowe pobranie zostawia działające
   nagrania, więc to jest informacja, a nie awaria. */
.prz-blad { color: color-mix(in oklab, var(--sunrise) 70%, var(--sand)); }

.prz-usun {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  border: 0;
  background: none;
  color: color-mix(in oklab, var(--sand) 55%, transparent);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}


/* --- ekran przewodnika (G6) ---------------------------------------------- */

/* Nakładka, a nie kolejny ekran w toku dokumentu — i to jest różnica wobec
   `.wpis-ekran`. Tamte otwiera się z JEDNEGO miejsca, więc każdy sam chowa to,
   co pod nim leżało. Przewodnik wchodzi z dwóch (z monitu w marszu i z listy
   na ekranie trasy), a przy trzech wejściach chowanie „tego, co pod spodem"
   zamienia się w listę wyjątków. Nakładka nie musi nic wiedzieć o tle. */
.prz-ekran {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--forest-deep);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding:
    calc(10px + env(safe-area-inset-top, 0px))
    calc(14px + env(safe-area-inset-right, 0px))
    calc(10px + env(safe-area-inset-bottom, 0px))
    calc(14px + env(safe-area-inset-left, 0px));
}

.prz-ekran-tresc {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 6px calc(32px + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
}

.prz-ekran-tytul {
  margin: 4px 0 14px;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 600;
}

/* Odtwarzacz przyklejony pod nagłówkiem: tekst przewija się pod nim, a kciuk
   trafia w zatrzymanie bez szukania. Szuka się w rękawicy i przy wietrze. */
.prz-odtwarzacz {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 -6px 18px;
  padding: 12px 6px;
  /* KRYJĄCE, nie półprzezroczyste. Przy przezroczystości tytuł przewijany pod
     paskiem prześwitywał przez niego i wyglądało to na usterkę rysowania,
     a nie na warstwę. Rozmycie tła nie ma tu czego pokazywać, więc odpada
     razem z kosztem, który na Androidzie płaci się przy każdej klatce. */
  background: var(--forest-deep);
  border-bottom: 1px solid oklch(1 0 0 / 0.08);
}

/* 52 px, czyli więcej niż wymagane minimum dotyku: to jest przycisk naciskany
   w ruchu, jedną ręką, bez patrzenia. */
.prz-graj {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid color-mix(in oklab, var(--moss) 55%, transparent);
  border-radius: 50%;
  background: color-mix(in oklab, var(--moss) 30%, transparent);
  color: var(--sand);
  cursor: pointer;
}

.prz-graj-ikona { width: 22px; height: 22px; }

.prz-pasek-box { flex: 1 1 auto; min-width: 0; }

.prz-pasek-tor {
  height: 4px;
  border-radius: 2px;
  background: oklch(1 0 0 / 0.14);
  overflow: hidden;
}

.prz-pasek {
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: var(--moss);
}

.prz-czas {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: color-mix(in oklab, var(--sand) 55%, transparent);
}

.prz-bez-audio {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: var(--radius-2xl);
  background: oklch(1 0 0 / 0.06);
  font-size: 13px;
  line-height: 1.5;
  color: color-mix(in oklab, var(--sand) 74%, transparent);
}

/* Tekst do czytania w terenie: większy interlinia i miara niż w kartach.
   To jest jedyne miejsce w aplikacji, gdzie czyta się kilka minut z rzędu. */
.prz-tekst p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.65;
}

/* Czytane zdanie. Podkreślenie tłem, nie kolorem tekstu: kolorowany tekst
   przy czytaniu w słońcu traci kontrast, a tło zostaje widoczne. */
.prz-zdanie-teraz {
  background: color-mix(in oklab, var(--moss) 30%, transparent);
  border-radius: 4px;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--moss) 30%, transparent);
}

.prz-zrodla {
  margin: 24px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: color-mix(in oklab, var(--sand) 45%, transparent);
}

/* --- tryb testowy w „O aplikacji" ---------------------------------------- */

.oapl-test {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid oklch(1 0 0 / 0.1);
}

.oapl-test-pole {
  display: block;
  margin: 14px 0 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--sand) 55%, transparent);
}

.oapl-test-input {
  width: 100%;
  /* Bez tego `width: 100%` liczy się DO padding, a pole wystaje poza ekran
     i przesuwa w bok całą stronę — widać to dopiero na telefonie, bo tam nie
     ma paska przewijania, tylko nagle ucięta prawa krawędź wszystkiego. */
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid oklch(1 0 0 / 0.18);
  border-radius: var(--radius-2xl);
  background: oklch(1 0 0 / 0.06);
  color: var(--sand);
  font-family: var(--font-mono);
  font-size: 12px;
  /* 16 px na iOS to próg, poniżej którego Safari SAMO przybliża stronę przy
     wejściu w pole — a przybliżona apka zostaje przybliżona. Krój monospace
     w 12 px czyta się tu dobrze, więc zamiast powiększać czcionkę wyłączamy
     powiększanie na poziomie pola. */
  -webkit-text-size-adjust: 100%;
}

.oapl-test-input:focus {
  outline: 2px solid color-mix(in oklab, var(--moss) 60%, transparent);
  outline-offset: 1px;
}

/* Brak nagrania na ekranie przewodnika: zdanie plus mały przycisk pobrania.
   Przycisk jest CICHY, nie ciepły — główną rzeczą na tym ekranie jest tekst,
   który człowiek właśnie czyta, a nie namawianie go na plik. */
.prz-bez-audio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.prz-bez-audio-tekst {
  margin: 0;
}

.prz-bez-audio-pobierz {
  padding: 8px 16px;
  border: 1px solid color-mix(in oklab, var(--moss) 55%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--moss) 22%, transparent);
  color: var(--sand);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.prz-bez-audio-pobierz:disabled {
  opacity: 0.55;
  cursor: default;
}


/* ==========================================================================
   SKANER KODU QR (M-QR) — trasa z komputera do telefonu
   ========================================================================== */

/* Pastylka na ekranie startowym. Wygląda jak wejście do panelu ratunkowego,
   bo jest tym samym rodzajem rzeczy: dyskretne wejście do czegoś, po co sięga
   się rzadko. Różni się kolorem obwódki — czerwień zostaje przy ratunku. */
.skaner-wejscie {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: center;
  padding: 8px 14px;
  border: 1px solid oklch(1 0 0 / 0.18);
  border-radius: var(--radius-pill);
  background: oklch(1 0 0 / 0.05);
  color: color-mix(in oklab, var(--sand) 88%, transparent);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.skaner-wejscie[hidden] { display: none; }

.skaner-wejscie svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.skaner-wejscie:hover { background: oklch(1 0 0 / 0.12); }

.sk-ekran {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding:
    calc(10px + env(safe-area-inset-top, 0px))
    calc(14px + env(safe-area-inset-right, 0px))
    calc(14px + env(safe-area-inset-bottom, 0px))
    calc(14px + env(safe-area-inset-left, 0px));
  box-sizing: border-box;
}

/* Podgląd bierze tyle wysokości, ile zostanie — kadr aparatu jest tu treścią,
   a nie ilustracją. Kwadratowy sufit, bo kod QR jest kwadratem i pionowy
   pas obrazu niczego by nie dołożył. */
.sk-podglad {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(64vh, 520px);
  border-radius: 18px;
  overflow: hidden;
  background: oklch(0 0 0 / 0.45);
}

.sk-podglad[hidden] { display: none; }

.sk-podglad video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Celownik nie kadruje odczytu — dekoder czyta całą klatkę. Mówi tylko,
   gdzie trzymać telefon, i to wystarczający powód, żeby go mieć. */
.sk-celownik {
  position: absolute;
  inset: 50% 50%;
  width: min(62%, 260px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 2px solid oklch(1 0 0 / 0.85);
  border-radius: 16px;
  box-shadow: 0 0 0 100vmax oklch(0 0 0 / 0.28);
}

.sk-stan {
  margin: 0;
  flex-shrink: 0;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.5;
  color: color-mix(in oklab, var(--sand) 82%, transparent);
}

 /* Biel, nie `--sunrise`. Złoto marki jest kolorem akcentu na jasnym tle;
   na ciemnej zieleni tego ekranu spada kontrastem do poziomu, na którym
   komunikat o odmowie zgody trzeba doczytywać, a nie przeczytać. */
.sk-stan.zle { color: oklch(0.99 0.01 86); }

/* Bez podglądu (brak zgody, brak aparatu) na ekranie zostaje samo zdanie.
   Wtedy należy mu się środek, a nie górna krawędź nad połacią pustego tła —
   komunikat wciśnięty pod nagłówek wygląda jak reszta ekranu, która się nie
   wczytała. */
.sk-podglad[hidden] ~ .sk-stan { margin: auto 0; }
.sk-stan.ok { color: color-mix(in oklab, var(--sand) 100%, transparent); font-weight: 600; }

/* Pola na wklejenie linku tu nie ma i to jest decyzja, nie brak: adres trasy
   ma kilkadziesiąt znaków, więc nikt go nie przepisze, a wklejenie zakłada, że
   link już jest w telefonie — czyli że sprawa, po którą się tu przyszło, jest
   już załatwiona. Kod czyta aparat, a wszystko inne wchodzi plikiem. */

/* Druga droga: plik GPX. Pełnowymiarowy przycisk, a nie odnośnik pod spodem —
   dla kogoś, kto przyszedł tu ze śladem z zegarka, to jest droga JEDYNA,
   a nie zapasowa. */
.sk-stopa {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.sk-plik {
  width: 100%;
  height: 48px;
  justify-content: center;
  gap: 10px;
  font-size: 15px;
}

.sk-plik svg { width: 18px; height: 18px; flex-shrink: 0; }

.sk-plik-opis {
  margin: 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: color-mix(in oklab, var(--sand) 70%, transparent);
}

/* ---------------------------------------------------------------
   PANORAMA SZCZYTÓW
   Nakładka na cały ekran, nad startem i nad wycieczką. Obraz z aparatu
   (`<video>`) i płótno leżą na sobie; pasek u góry i stopka są nad płótnem,
   ale przepuszczają gesty wszędzie poza własnymi przyciskami — przeciąganie
   grani ma działać także przy krawędziach ekranu.
   --------------------------------------------------------------- */

.pano {
  --w-cichy: color-mix(in oklab, var(--sand) 64%, transparent);
  position: fixed;
  inset: 0;
  z-index: 70;
  overflow: hidden;
  background: var(--forest-deep);
  color: var(--sand);
  -webkit-user-select: none;
  user-select: none;
}

.pano[hidden] { display: none; }

.pano-obraz,
.pano-plotno {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pano-obraz { object-fit: cover; background: #000; }
.pano-obraz[hidden] { display: none; }
.pano-plotno { display: block; touch-action: none; }

.pano-glowa {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding:
    calc(10px + env(safe-area-inset-top, 0px))
    calc(14px + env(safe-area-inset-right, 0px))
    16px
    calc(14px + env(safe-area-inset-left, 0px));
  background: linear-gradient(to bottom, oklch(0.2 0.03 160 / 0.8), oklch(0.2 0.03 160 / 0));
  pointer-events: none;
}

.pano-glowa > button { pointer-events: auto; flex: none; }

.pano-tytul { flex: 1 1 auto; min-width: 0; text-align: center; }

.pano-miejsce {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pano-zrodlo {
  margin: 1px 0 0;
  font-size: 11px;
  color: var(--w-cichy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pano-zrodlo:empty { display: none; }

/* Przełącznik aparatu — wciśnięty świeci piaskiem. Okrągły jak kompas na
   mapie: to jest przełącznik stanu, a nie przejście dokądkolwiek. */
.pano-aparat {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid oklch(1 0 0 / 0.2);
  border-radius: 50%;
  background: oklch(1 0 0 / 0.08);
  color: var(--sand);
  cursor: pointer;
}

.pano-aparat[aria-pressed="true"] {
  background: var(--sand);
  border-color: transparent;
  color: var(--forest-deep);
}

.pano-aparat svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
}

.pano-stopka {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding:
    22px
    calc(14px + env(safe-area-inset-right, 0px))
    calc(6px + env(safe-area-inset-bottom, 0px))
    calc(14px + env(safe-area-inset-left, 0px));
  /* Bez tła: ciemny spód rysuje płótno (`pasek()` w panorama.js). Tło tutaj
     leżałoby NAD płótnem i przykrywało pasek azymutu. */
  pointer-events: none;
}

.pano-stopka > button { pointer-events: auto; }

/* Telefon bokiem przy blokadzie obrotu: szerokość i obrót ustawia
   `obrocStopke()` w panorama.js. Wcięcia ekranu leżą wtedy po bokach
   stopki, nie pod nią, a dolny zapas musi się zgadzać z tym, gdzie płótno
   rysuje pasek azymutu (`STOPKA_BOKIEM_DOL`). */
.pano-stopka.bokiem {
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  box-sizing: border-box;
  padding: 22px 14px 12px;
}

.pano-stan {
  margin: 0;
  max-width: 32em;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.45;
  color: color-mix(in oklab, var(--sand) 88%, transparent);
  text-shadow: 0 1px 3px oklch(0 0 0 / 0.5);
}

.pano-stan:empty { display: none; }

.pano-pasek { align-self: stretch; height: 34px; }

.pano-gran {
  padding: 6px 14px;
  border: 1px solid oklch(1 0 0 / 0.24);
  border-radius: var(--radius-pill);
  background: oklch(0.2 0.03 160 / 0.6);
  color: var(--sand);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.pano-gran[hidden] { display: none; }

/* Karta szczytu — arkusz wariantu z ekranu wyboru (`.wybor-arkusz`) nad
   stopką. Treść to `placeHtml()` z planera; jego klasy mają tam style jasnego
   dymka, więc tutaj dostają ciemne odpowiedniki. */
.pano-arkusz { z-index: 4; max-height: min(70%, 600px); }
.pano-arkusz[hidden] { display: none; }
.pano-arkusz .wybor-arkusz-tresc { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }

.pano-arkusz-brak {
  margin: 2px 0 6px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--w-cichy);
}

.pano-arkusz .pl { margin: 2px 0 0; }
.pano-arkusz .pl-kat { display: none; }   /* rodzaj stoi już w etykiecie nad tytułem */
.pano-arkusz .foto-pl { margin: 2px 0 12px; }

.pano-arkusz .foto-pl img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
  background: oklch(1 0 0 / 0.06);
}

.pano-arkusz .foto-pl figcaption {
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--w-cichy);
}

.pano-arkusz .foto-pl figcaption a { color: inherit; }

.pano-arkusz .pl-status {
  display: inline-block;
  margin-bottom: 8px;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--destructive);
  color: var(--destructive-foreground);
  font-size: 11px;
}

.pano-arkusz .pl-opis { font-size: 14px; line-height: 1.55; }
.pano-arkusz .pl-fakty { margin-top: 8px; font-size: 12.5px; color: var(--w-cichy); }
.pano-arkusz .pl-www { display: inline-block; margin-top: 8px; color: var(--sunrise); font-size: 13px; }
.pano-arkusz .pl-more { margin-top: 12px; }

.pano-arkusz .pl-more summary {
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 600;
}

.pano-arkusz .pl-more summary::-webkit-details-marker { display: none; }
.pano-arkusz .pl-more summary::before { content: '▸ '; }
.pano-arkusz .pl-more[open] summary::before { content: '▾ '; }

.pano-arkusz .pl-more ul,
.pano-arkusz .pl-more p {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: color-mix(in oklab, var(--sand) 88%, transparent);
}

.pano-arkusz .pl-more ul { padding-left: 18px; }

/* Wejścia w panoramę. W karcie terenu — pastylka obok prognozy, tego samego
   kroju, bo to ten sam rodzaj rzeczy: dyskretne wejście w szczegół miejsca.
   Rząd znika w całości, gdy żadne z wejść się nie pokazuje (brak pozycji) —
   pusty rząd zostawiałby w karcie osiem pikseli niczego. */
/* Dwie pastylki mają razem 321 px naturalnej szerokości, a karta na iPhonie
   daje 309 — przy 12,5 px i dotychczasowych wcięciach napisy łamały się na
   dwie linie i obie pastylki puchły do połowy karty. Stąd 12 px, ciaśniejsze
   wcięcia i zakaz łamania; zawijanie rzędu zostaje na telefony węższe niż
   375 px — wtedy prognoza schodzi pod spód i dalej trzyma się prawej. */
.teren-przyciski {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.teren-przyciski:not(:has(> :not([hidden]))) { display: none; }

.teren-przyciski .teren-prognoza {
  margin: 0 0 0 auto;
  padding: 7px 8px 7px 11px;
  gap: 6px;
}

.teren-przyciski > button { font-size: 12px; white-space: nowrap; }
.teren-prognoza[hidden],
.teren-szczyty[hidden] { display: none; }

.teren-szczyty {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px 7px 9px;
  border: 1px solid oklch(1 0 0 / 0.18);
  border-radius: var(--radius-pill);
  background: oklch(1 0 0 / 0.07);
  color: var(--sand);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.teren-szczyty:hover { background: oklch(1 0 0 / 0.13); }

.teren-szczyty svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
}

/* Na ekranie wycieczki — trzeci przycisk w rzędzie marszu. */
.wyc-szczyty { gap: 7px; }
.wyc-szczyty[hidden] { display: none; }

.wyc-szczyty svg {
  width: 18px; height: 18px;
  flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.8;
}

/* ---------------------------------------------------------------
   DROGA POWROTNA
   Pytanie po zakończonej wycieczce. Pudełko jest zwykłą kartą trasy,
   więc styl niesie `.wyc-karta` — tutaj tylko dwa własne wiersze.
   --------------------------------------------------------------- */

.wyc-powrot-pytanie {
  margin: 6px 0 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

/* Nazwa i liczby powrotu. Muszą tu być, bo „tą samą drogą" nie znaczy „tyle
   samo czasu": zejście liczy się inaczej niż podejście i człowiek ma prawo
   zobaczyć nową godzinę, zanim się zgodzi. */
.wyc-powrot-opis {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: color-mix(in oklab, var(--sand) 62%, transparent);
}

#wyc-powrot .wyc-akcje { margin-top: 14px; }

/* ---------------------------------------------------------------
   WIDOK PRZEWODNIKA — trzecia zakładka ekranu wycieczki

   Zachowuje się jak podsumowanie, nie jak mapa: to treść do przewinięcia,
   a nie płótno na całą resztę ekranu. Stąd te same reguły przewijania,
   łącznie ze schowanym paskiem — na telefonie i tak go nie ma, a w panelu
   przeglądarki rysowałby się nad listą.
   --------------------------------------------------------------- */

.wyc-przewodnik-box {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.wyc-przewodnik-box::-webkit-scrollbar { display: none; }

/* Nagłówek sekcji jest tu zbędny: nazwę widoku niesie zakładka, a „Przewodnik
   wycieczki" pod przyciskiem „Przewodnik" byłby echem. W karcie
   w podsumowaniu zostaje — tam nikt tej sekcji nie zapowiada. */
.wyc-przewodnik-box .prz-tytul { display: none; }

/* Odpowiedź na naciśniętą zakładkę, gdy nie ma czego pokazać. Cisza, którą
   `pokazPrzewodnik()` stosuje w karcie, jest tu niewłaściwa: kartę widać
   mimochodem, a zakładkę otwiera się z pytaniem. */
.prz-pusto {
  margin: 0;
  padding: 18px 4px;
  font-size: 13px;
  line-height: 1.5;
  color: color-mix(in oklab, var(--sand) 62%, transparent);
}

/* ---------------------------------------------------------------
   ONBOARDING (O1)
   Kilka kroków na zamykanym panelu, przeniesionych z makiety
   `design/onboarding/makieta.html`. Panel zajmuje cały ekran, bo
   ilustracja ma być dużym przykładem, a nie miniaturą; ciemny jak
   reszta powłoki. Leży nad „O aplikacji" (60) i formularzem (61):
   wchodzi się tu także stamtąd.
   --------------------------------------------------------------- */
.onb {
  position: fixed;
  inset: 0;
  z-index: 62;
  display: flex;
  flex-direction: column;
  background: var(--forest-deep);
  color: var(--sand);
  padding:
    calc(10px + env(safe-area-inset-top, 0px))
    env(safe-area-inset-right, 0px)
    calc(16px + env(safe-area-inset-bottom, 0px))
    env(safe-area-inset-left, 0px);
  box-sizing: border-box;
  overscroll-behavior: contain;
}

.onb-glowa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 0 16px;
  margin-bottom: 12px;
}

/* Rozdział i numer w jednej etykiecie; kropka między nimi w ciepłym akcencie,
   żeby „Planuj · 1/3" czytało się jako dwie informacje, a nie jedno słowo. */
.onb-glowa .etykieta b { color: var(--sunrise); font-weight: 500; }

.onb-okno { flex: 1 1 auto; min-height: 0; overflow: hidden; touch-action: pan-y; }

.onb-tor {
  display: flex;
  height: 100%;
  transition: transform 360ms cubic-bezier(.2, .8, .2, 1);
}

.onb-krok {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 16px;
  box-sizing: border-box;
}

/* Ilustracja bierze to, co zostaje po tekście — na małym telefonie kurczy się
   pierwsza, i słusznie: tekst musi się zmieścić cały. */
.onb-scena {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 24px;
  overflow: hidden;
  background: oklch(1 0 0 / 0.05);
  border: 1px solid oklch(1 0 0 / 0.1);
}

.onb-tekst { flex: none; padding: 22px 4px 0; }

.onb-tekst h2 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Fokus trafia na nagłówek kroku dla czytnika ekranu; to nie jest kontrolka,
   więc obwódka (iOS rysuje ją przy fokusie z kodu) tylko by myliła. */
.onb-tekst h2:focus { outline: none; }

.onb-tekst p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: color-mix(in oklab, var(--sand) 82%, transparent);
}

.onb-stopka { flex: none; padding: 16px 16px 0; }

.onb-kropki { display: flex; justify-content: center; gap: 6px; margin-bottom: 16px; }

.onb-kropki i {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: oklch(1 0 0 / 0.22);
  transition: width 240ms, background-color 240ms;
}

.onb-kropki i.tu { width: 20px; background: var(--sunrise); }

.onb-akcje { display: flex; gap: 8px; }
.onb-akcje .btn { flex: 1 1 0; justify-content: center; }

/* „Nie teraz" i „Wstecz" muszą być widoczne — wyjście, którego nie widać,
   robi z przewodnika bramkę. Ten sam styl co „Jeszcze nie" w nocie. */
.onb-akcje .btn-cichy {
  border: 1px solid oklch(1 0 0 / 0.2);
  background: oklch(1 0 0 / 0.06);
  color: var(--sand);
}

/* Zaślepka ilustracji do czasu O2: apla marki ze znakiem, nie pusta ramka. */
.onb-zaslepka {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: var(--gradient-forest);
}

.onb-zaslepka svg { width: 72px; height: 72px; opacity: 0.5; }

/* Ostatni krok: te same dwa wejścia co na ekranie startowym. */
.onb-koniec-akcje {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.onb-koniec-akcje .btn { justify-content: space-between; }

/* Wejście z „O aplikacji". */
.oapl-onb { width: 100%; justify-content: space-between; }

@media (prefers-reduced-motion: reduce) {
  .onb-tor, .onb-kropki i { transition: none; }
}

/* ---------------------------------------------------------------
   ONBOARDING — ILUSTRACJE (O2)
   Przeniesione z makiety `design/onboarding/makieta.html`, wszystko pod
   `.onb`, żeby nazwy scen (`.sc`, `.znak`, `.foto`) nie sięgały reszty
   powłoki. Animacje wejścia odpalają się tylko w aktywnym kroku.
   --------------------------------------------------------------- */
  /* ---------- sceny: wspólne ---------- */
  .onb .sc { position: absolute; inset: 0; }
  .onb .sc-papier { background: var(--background); color: var(--foreground); }
  .onb .sc-marsz { background: var(--forest-deep); padding: 16px 14px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
  .onb .wchodzi { opacity: 0; transform: translateY(10px); }
  .onb .onb-krok.aktywny .wchodzi { animation: onb-wejdz 480ms cubic-bezier(.2,.8,.2,1) var(--d, 0ms) forwards !important; }
  @keyframes onb-wejdz { to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) {
    .onb .onb-krok.aktywny .wchodzi { animation: none !important; opacity: 1; transform: none; }
    .onb .onb-tor { transition: none; }
  }

  /* 1 — powitanie */
  .onb .sc-powitanie .tlo { position: absolute; }
  .onb .sc-powitanie .tlo-zdjecie { --tlo-zdjecie: url(../img/tlo/grania-latem.webp); opacity: 0.55; }
  .onb .sc-powitanie .znak { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
  .onb .sc-powitanie .znak svg { width: 200px; }


  /* 2 — własny plan: wyszukiwarka i punkty na mapie */
  .onb .sc-plan { background: #2b3326; }
  .onb .sc-plan svg.mapa { position: absolute; inset: 0; width: 100%; height: 100%; }
  .onb .pl-szukaj { position: absolute; top: 12px; left: 12px; right: 12px; }
  .onb .pl-pole {
    display: flex; align-items: center; gap: 8px; padding: 9px 12px;
    background: var(--card); color: var(--foreground);
    border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-raised); font-size: 13.5px;
  }
  .onb .pl-pole small { display: block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); }
  .onb .pl-pole .kursor { display: inline-block; width: 1.5px; height: 1em; background: var(--forest); vertical-align: -2px; margin-left: 1px; }
  .onb .pl-wyniki {
    margin-top: 4px; background: var(--card); color: var(--foreground);
    border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised);
    font-size: 13px; overflow: hidden;
  }
  .onb .pl-wyniki div { display: flex; justify-content: space-between; padding: 8px 12px; }
  .onb .pl-wyniki div + div { border-top: 1px solid var(--border); }
  .onb .pl-wyniki div:first-child { background: var(--accent-soft); }
  .onb .pl-wyniki span { color: var(--muted-foreground); font-size: 11.5px; }
  /* Pole i podpowiedzi: wchodzą, a po wyborze znikają — wybrane miejsce
     ląduje na liście punktów, a mapa zostaje odsłonięta pod stuknięcia. */
  .onb .pl-szukaj { opacity: 0; }
  .onb .onb-krok.aktywny .pl-szukaj { animation: onb-szukanie 2300ms ease 150ms both; }
  @keyframes onb-szukanie { 0% { opacity: 0; transform: translateY(8px); } 15%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
  .onb .pl-wyniki { opacity: 0; }
  .onb .onb-krok.aktywny .pl-wyniki { animation: onb-pojaw 300ms ease 700ms forwards; }
  @keyframes onb-pojaw { to { opacity: 1; } }
  .onb .pl-lista {
    position: absolute; left: 12px; right: 12px; bottom: 12px;
    background: var(--card); color: var(--foreground);
    border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-raised);
    padding: 6px 12px; font-size: 13px;
  }
  .onb .pl-lista .wp { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
  .onb .pl-lista .wp + .wp { border-top: 1px solid var(--border); }
  .onb .pl-lista .pin {
    width: 21px; height: 21px; border-radius: 50%; flex: none; display: grid; place-items: center;
    font-family: var(--font-mono); font-size: 11px; font-weight: 500;
    box-shadow: inset 0 0 0 2px var(--border-strong);
  }
  .onb .pl-lista .val { flex: 1; }
  .onb .pl-lista .leg { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted-foreground); }
  .onb .onb-krok.aktywny .stukniecie { animation: onb-stuk 900ms ease-out var(--d) both; transform-origin: center; transform-box: fill-box; }
  @keyframes onb-stuk { 0% { opacity: .6; transform: scale(.3); } 100% { opacity: 0; transform: scale(2.4); } }

  /* 3 — kreator */
  .onb .sc-kreator { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
  .onb .kr-pytania { display: flex; flex-direction: column; gap: 6px; }
  .onb .kr-odp {
    display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
    padding: 8px 12px; border-radius: var(--radius-lg);
    background: var(--card); border: 1px solid var(--border); font-size: 13px;
  }
  .onb .kr-odp span { color: var(--muted-foreground); font-size: 11.5px; }
  .onb .kr-odp b { font-weight: 500; }
  .onb .kr-odp.wyb { border-color: var(--moss); background: var(--accent-soft); }
  .onb .kr-strzalka { text-align: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-foreground); }
  .onb .trasa-karta {
    border-radius: var(--radius-xl); overflow: hidden; background: var(--card);
    border: 1px solid var(--border); box-shadow: var(--shadow-raised);
  }
  .onb .trasa-karta img { display: block; width: 100%; height: 92px; object-fit: cover; }
  .onb .trasa-karta .tk-tresc { padding: 10px 12px 12px; }
  .onb .trasa-karta h3 { margin: 0 0 6px; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
  .onb .tk-liczby { display: flex; gap: 12px; font-family: var(--font-mono); font-size: 12px; color: var(--muted-foreground); }
  .onb .tk-plakietki { display: flex; gap: 6px; margin-top: 8px; }
  .onb .plak { font-size: 11px; padding: 2px 8px; border-radius: var(--radius-pill); }
  .onb .plak-sred { background: var(--trail-medium-soft, oklch(0.95 0.04 80)); color: var(--trail-medium-soft-foreground, oklch(0.48 0.1 70)); }
  .onb .plak-uwaga { background: var(--warn); color: var(--warn-foreground); border: 1px solid var(--warn-border); }

  /* 3 — szczegóły trasy */
  .onb .sc-szczegoly { padding: 16px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
  .onb .sz-liczby { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .onb .sz-liczby div { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 8px 10px; }
  .onb .sz-liczby b { display: block; font-family: var(--font-display); font-size: 19px; font-weight: 600; }
  .onb .sz-liczby span { font-size: 11px; color: var(--muted-foreground); }
  .onb .sz-profil { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 10px 10px 6px; }
  .onb .sz-profil .etykieta { color: var(--muted-foreground); }
  .onb .sz-profil svg { display: block; width: 100%; height: 118px; margin-top: 4px; overflow: visible; }
  .onb .sz-uwagi { display: flex; flex-direction: column; gap: 6px; }
  .onb .sz-uwaga { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.4; padding: 8px 10px; border-radius: var(--radius-lg); }
  .onb .sz-uwaga.warn { background: var(--warn); color: var(--warn-foreground); border: 1px solid var(--warn-border); }
  .onb .sz-uwaga.notice { background: var(--notice); color: var(--notice-foreground); border: 1px solid var(--notice-border); }

  /* 4 — mapa bez sieci */
  .onb .sc-mapa { background: oklch(0.955 0.018 95); }
  .onb .sc-mapa svg.mapa { position: absolute; inset: 0; width: 100%; height: 100%; }
  .onb .bez-sieci {
    position: absolute; top: 12px; right: 12px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px; border-radius: var(--radius-pill);
    background: color-mix(in oklab, var(--forest-deep) 88%, transparent); color: var(--sand);
    font-size: 12px;
  }
  .onb .bez-sieci svg { width: 14px; height: 14px; }
  .onb .sc-mapa .skaner-wejscie { position: absolute; left: 0; right: 0; margin: 0 auto; width: max-content; bottom: 14px; background: color-mix(in oklab, var(--forest-deep) 88%, transparent); white-space: nowrap; }
  .onb .sc-mapa .skaner-wejscie svg { width: 16px; height: 16px; }
  .onb .onb-krok.aktywny .kropka-poz { animation: onb-puls 2s ease-out infinite; transform-origin: center; transform-box: fill-box; }
  @keyframes onb-puls { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(3); } }

  /* 7 — ratunek w miniaturze */
  .onb .sc-ratunek { background: var(--forest-deep); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
  .onb .sc-ratunek .rat-glowa { margin-bottom: 0; }
  .onb .sc-ratunek .rat-glowa h1 { font-size: 20px; }
  .onb .sc-ratunek .rat-zamknij { width: 34px; height: 34px; }

  /* 8 — przewodnik */
  .onb .sc-przewodnik { background: var(--forest-deep); }
  .onb .sc-przewodnik .foto { position: absolute; inset: 0 0 38% 0; background: url(../img/onboarding/schronisko-pttk-kondratowa.webp) center / cover; }
  .onb .sc-przewodnik .foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, var(--forest-deep)); }
  .onb .sc-przewodnik .wyc-monit { position: absolute; left: 12px; right: 12px; bottom: 14px; }

  /* 9 — panorama */
  .onb .sc-panorama { background: #20282a; }
  .onb .sc-panorama svg.onb-pano { position: absolute; inset: 0; width: 100%; height: 100%; }
  .onb .onb-pano-pasek {
    position: absolute; top: 0; left: 0; right: 0; padding: 10px 12px 14px;
    background: linear-gradient(to bottom, oklch(0.15 0.02 160 / 0.8), transparent);
  }
  .onb .onb-pano-pasek b { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 600; }
  .onb .onb-pano-pasek span { font-size: 11.5px; opacity: 0.75; }
  .onb .foto-podpis {
    position: absolute; right: 8px; bottom: 6px; font-size: 9.5px;
    color: oklch(1 0 0 / 0.72); text-shadow: 0 1px 2px oklch(0 0 0 / 0.6);
  }

  /* 10 — koniec */
  .onb .sc-koniec .tlo { position: absolute; }
  .onb .sc-koniec .tlo-zdjecie { --tlo-zdjecie: url(../img/tlo/brzeg-stawu.webp); opacity: 0.5; }
  .onb .sc-koniec .znak { position: absolute; left: 0; right: 0; top: 18%; display: flex; justify-content: center; }
  .onb .sc-koniec .znak svg { width: 170px; }

/* Karta najbliższego punktu w ilustracji: te same poprawki co prawdziwej
   (`#wyc-punkt`), bez jej id — prawdziwa karta mieszka w tym samym dokumencie. */
.onb .onb-punkt .wyc-liczby { gap: 8px 10px; flex-wrap: wrap; }
.onb .onb-punkt .wyc-liczba { flex: 0 0 auto; }
.onb .onb-punkt .wyc-liczba b { font-size: clamp(16px, 5.2vw, 22px); }
.onb .onb-punkt .wyc-liczba.prawa b { font-size: clamp(12px, 3.7vw, 15px); }

/* Znak marki w ilustracjach to kopia tego ze startu — i tak jak tam napis
   jest piaskowy, a nie w kolorze z pliku znaku (reguła startu sięga tylko
   `.start-znak`). */
.onb .znak .logo-tatry { fill: var(--sand); }
/* Zdjęcie na karcie trasy niesie podpis autora, jak każde zdjęcie w apce. */
.onb .trasa-karta .tk-foto { position: relative; }
.onb .znak .logo-planer { fill: color-mix(in oklab, var(--sand) 78%, transparent); }

/* Karty w ilustracjach nie ściskają się, gdy brakuje wysokości — wtedy
   `dopasujSceny()` w onboarding.js zmniejsza całą scenę. Bez tego flex
   zgniatał kartę trasy do połowy i ucinał jej treść (375×667, test O4). */
.onb .sc-papier > *, .onb .sc-marsz > *, .onb .sc-ratunek > * { flex-shrink: 0; }