/*
 * TATRY PLANER — prymitywy interfejsu
 * ==================================
 *
 * Elementy sterujące: przyciski, pola, przełączniki, pastylki filtrów.
 * Wszystko na tokenach z tokens.css — ani jednej wartości koloru wprost.
 *
 * Nazwy prymitywów są angielskie (.btn-summit, .btn-subtle), bo takimi
 * nazwami opisuje je brand book. Klasy dziedzinowe zostają polskie
 * (.kr-* dla kreatora) — to dwa różne słowniki i nie mieszamy ich.
 *
 * Ładowane PRZED style.css, żeby układ mógł dociągnąć szczegóły
 * (szerokość, marginesy) bez walki o specyficzność.
 */

/* ---------------------------------------------------------------
   FOCUS — widoczny zawsze, 2 px obramowania + 2 px odstępu.
   Brand book s. 6: to warunek, nie ozdoba.
   --------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------
   PRZYCISKI
   Pełne pill-e, wysokość z tokenu gęstości, uniesienie 2 px przy
   hoverze, cień press przy wciśnięciu. Wariant domyślny jest
   drugoplanowy — główny akcent dostaje .btn-primary, a jedyne
   główne CTA na widok dostaje .btn-summit.
   --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-h);
  padding: 0 var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

/* SVG bez atrybutów rozmiaru ma domyślne 300 × 150 i rozpycha przycisk.
   Ikona w przycisku ma stały rozmiar i nie kurczy się przy długim tekście. */
.btn svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.btn:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  background: var(--accent);
  color: var(--accent-foreground);
  box-shadow: var(--shadow-raised);
}

.btn:active {
  transform: none;
  box-shadow: var(--shadow-press);
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.btn:disabled:hover,
.btn[disabled]:hover {
  transform: none;
  background: var(--card);
  color: var(--foreground);
  border-color: var(--border-strong);
  box-shadow: none;
}

/* Wariant główny — gradient „grzbietu górskiego". */
.btn-primary {
  border-color: transparent;
  background-image: var(--gradient-forest);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-raised);
}

.btn-primary:hover {
  border-color: transparent;
  background-image: var(--gradient-forest);
  /* `.btn:hover` ustawia tło skrótem i zeruje te trzy — a na ekranie
     dotykowym :hover zostaje po dotknięciu. Patrz „Gradient ma sięgać pod
     ramkę" niżej. */
  background-color: var(--forest);
  background-origin: border-box;
  background-repeat: no-repeat;
  color: var(--primary-foreground);
  filter: brightness(1.06);
  box-shadow: var(--shadow-ridge);
}

/* Wariant szczytowy — ciepły gradient. Brand book: jedyne główne CTA
   na widok. Dwa summit obok siebie to błąd, nie decyzja. */
.btn-summit {
  border-color: transparent;
  background-image: var(--gradient-sunrise);
  color: var(--forest-deep);
  font-weight: 600;
  box-shadow: var(--shadow-raised);
}

.btn-summit:hover {
  border-color: transparent;
  background-image: var(--gradient-sunrise);
  /* `.btn:hover` ustawia tło skrótem i zeruje te trzy — a na ekranie
     dotykowym :hover zostaje po dotknięciu. Patrz „Gradient ma sięgać pod
     ramkę" niżej. */
  background-color: var(--sunrise);
  background-origin: border-box;
  background-repeat: no-repeat;
  color: var(--forest-deep);
  filter: brightness(1.05);
  box-shadow: var(--shadow-ridge);
}

/* Wariant cichy — akcje poboczne, bez ramki i cienia. */
.btn-subtle {
  border-color: transparent;
  background: var(--muted);
  box-shadow: none;
}

.btn-subtle:hover {
  border-color: transparent;
  box-shadow: none;
}

.btn-ghost {
  border-color: transparent;
  background: none;
  box-shadow: none;
}

.btn-ghost:hover {
  border-color: transparent;
  box-shadow: none;
}

/* Stan włączony — dla przycisków-przełączników (ulubione, zapis trasy). */
.btn.on {
  border-color: transparent;
  background: var(--primary);
  color: var(--primary-foreground);
}

.btn.on:hover {
  background: var(--primary);
  color: var(--primary-foreground);
  filter: brightness(1.08);
}

.btn-sm {
  height: calc(var(--control-h) - 6px);
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
}

.btn-block {
  display: flex;
  width: 100%;
}

/* Przycisk-ikona: kwadrat, nie pill — pill przy jednym znaku wygląda
   jak literówka. */
.btn-icon {
  width: var(--control-h);
  min-width: var(--control-h);
  padding: 0;
  border-radius: var(--radius-md);
}

/* GRADIENT MA SIĘGAĆ POD RAMKĘ, a nie zaczynać się za nią.

   Przycisk ma ramkę 1 px (po `.btn`), tu przezroczystą. Tło domyślnie
   liczy się od WNĘTRZA ramki (`background-origin: padding-box`), ale maluje
   także pod nią (`background-clip: border-box`) — więc pod ramkę trafia
   POWTÓRZENIE gradientu, czyli kolor z jego przeciwnego końca. Przy skosie
   150° dawało to jasną kreskę 1 px wzdłuż lewej krawędzi i ciemną wzdłuż
   prawej; na ekranie telefonu wyglądało jak poszarpany brzeg (zgłoszone
   z iPhone'a, 2026-10-02).

   Kolor tła pod spodem też musi być z tej samej rodziny: po `.btn` zostaje
   tam jasna karta, która prześwituje na wygładzanym łuku pigułki. */
.btn-primary,
.btn-summit {
  background-origin: border-box;
  background-repeat: no-repeat;
}

.btn-primary { background-color: var(--forest); }
.btn-summit { background-color: var(--sunrise); }

/* Smuga światła na wariantach z gradientem (brand book s. 6:
   10% krycia, wygaszana przy prefers-reduced-motion). */
.btn-primary,
.btn-summit {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn-primary::before,
.btn-summit::before {
  content: '';
  position: absolute;
  /* Minus jeden piksel: połysk ma przykryć także pas pod ramką, inaczej
     wzdłuż krawędzi zostaje obwódka bez połysku. */
  inset: -1px;
  border-radius: inherit;
  background-image: linear-gradient(
    to bottom,
    oklch(1 0 0 / 0.13) 0%,
    oklch(1 0 0 / 0.02) 45%,
    transparent 60%
  );
  pointer-events: none;
}

.btn-primary::after,
.btn-summit::after {
  content: '';
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -40%;
  width: 55%;
  transform: translateX(-140%) rotate(12deg);
  background-image: linear-gradient(
    to right,
    transparent,
    oklch(1 0 0 / 0.1),
    transparent
  );
  opacity: 0;
  transition:
    transform 1100ms var(--ease-out),
    opacity 320ms ease-out;
  pointer-events: none;
}

.btn-primary:hover::after,
.btn-summit:hover::after {
  opacity: 1;
  transform: translateX(300%) rotate(12deg);
}

/* ---------------------------------------------------------------
   POLA TEKSTOWE
   --------------------------------------------------------------- */
.pole {
  width: 100%;
  height: var(--control-h);
  padding: 0 var(--space-3);
  /* Kontrolka, nie separator: pole rozpoznaje się po obrysie, bo jego
     wypełnienie różni się od tła strony o 1.12:1. Stąd --border-strong. */
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--muted);
  color: var(--foreground);
  font: inherit;
  font-size: var(--text-base);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

/* SZESNAŚCIE PIKSELI NA DOTYKU — i to nie jest kwestia gustu.

   Safari na iOS powiększa CAŁĄ STRONĘ w chwili, w której dotknięte pole ma
   tekst mniejszy niż 16 px. Wygląda to jak usterka aplikacji: po stuknięciu
   w „Skąd wychodzisz" widok skacze, interfejs robi się za szeroki i zostaje
   taki po schowaniu klawiatury. Naszym `--text-base` w gęstości compact jest
   13,5 px, więc trafiało to w każde pole w panelu.

   Powiększenie strony zostaje możliwe — blokada `maximum-scale` w metatagu
   zabrałaby je człowiekowi, który naprawdę chce przybliżyć mapę albo tekst.
   Odbieramy przeglądarce tylko POWÓD, dla którego robiła to sama. */
@media (pointer: coarse) {
  .pole,
  input,
  select,
  textarea {
    font-size: max(16px, var(--text-base));
  }
}

.pole::placeholder {
  color: var(--muted-foreground);
}

.pole:hover {
  border-color: var(--primary);
}

.pole:focus {
  background: var(--card);
  border-color: var(--ring);
}

/* ---------------------------------------------------------------
   PRZEŁĄCZNIK SEGMENTOWY — tempo marszu, podkład mapy
   --------------------------------------------------------------- */
/* Promienie wprost z referencji DS: pojemnik rounded-lg, segment rounded-md.
   Pill był tu błędem — przełącznik segmentowy ma czytać się jak jedna płyta
   podzielona na pola, a nie jak rząd pigułek. */
.seg {
  display: flex;
  padding: var(--space-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--muted);
}

.seg button {
  flex: 1;
  height: calc(var(--control-h) - 10px);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--muted-foreground);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.seg button:hover {
  color: var(--foreground);
}

/* Zakładki oznaczają wybór przez aria-selected, przełącznik przez
   aria-pressed — ten sam stan wizualny, dwa poprawne atrybuty ARIA. */
.seg button[aria-pressed='true'],
.seg button[aria-selected='true'] {
  background: var(--background);
  color: var(--foreground);
  font-weight: 600;
  box-shadow: var(--shadow-soft);
}

/* Gdy etykieta nie mieści się w jednym wierszu, przełącznik segmentowy
   przestaje działać: pola rozjeżdżają się na różne wysokości i przestaje być
   widać, że to jeden wybór. Wtedy zamiast niego lista opcji jedna pod drugą.

   Bez kółek radia: wybraną opcję niesie obrys i tło, tak samo jak w karcie
   odpowiedzi w kreatorze. Dwa sposoby pokazywania tego samego stanu obok
   siebie byłyby szumem.

   Reguła praktyczna: segment do etykiet jednowyrazowych, lista do zdań. */
.opcje {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ---------- przełącznik on/off ---------- */

/* Różni się od `.seg` i `.opcje` w rzeczy zasadniczej: nie wybiera jednej
   z kilku możliwości, tylko włącza albo wyłącza jedną. To znaczy, że jego stan
   musi być czytelny sam z siebie — bez porównania z sąsiadem, bo sąsiada nie
   ma. Stąd tor i suwak zamiast obrysu: kształt niesie stan nawet wtedy, gdy
   kolor przepadnie (druk, tryb wysokiego kontrastu, monochromatyczny ekran).

   `role="switch"` z `aria-checked` zamiast `aria-pressed`: czytnik ekranu ma
   powiedzieć „włączone", a nie „wciśnięte" — to trwały stan, nie akcja. */
.przelacznik {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  cursor: pointer;
}

.przelacznik:hover { color: var(--foreground); }
.przelacznik[aria-checked='true'] { color: var(--foreground); font-weight: 500; }

.pr-tor {
  position: relative;
  flex: none;
  width: 34px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.przelacznik[aria-checked='true'] .pr-tor { background: var(--primary); }

.pr-suwak {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--background);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-fast) var(--ease-out);
}

.przelacznik[aria-checked='true'] .pr-suwak { transform: translateX(14px); }

.przelacznik:focus-visible { outline: none; }
.przelacznik:focus-visible .pr-tor {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.opcje button {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--control-h);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-size: var(--text-base);
  text-align: left;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.opcje button:hover {
  border-color: var(--primary);
  background: var(--accent-soft);
}

.opcje button[aria-pressed='true'] {
  border-color: var(--primary);
  background: var(--accent-soft);
}

/* ---------------------------------------------------------------
   PASTYLKI FILTRÓW — katalog tras
   Nie unoszą się przy hoverze: to nie akcje, to stany.
   --------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 5px var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.pill:hover {
  border-color: var(--primary);
  background: var(--accent-soft);
}

.pill.on {
  border-color: transparent;
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 600;
}

/* Treść wyłącznie dla czytników ekranu — etykiety przy ikonach danych. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   LINIA POZIOMICOWA — przerywany rozdzielacz z motywu mapy
   --------------------------------------------------------------- */
.topo-rule {
  height: 1px;
  border: 0;
  background-image: repeating-linear-gradient(
    to right,
    var(--border) 0 10px,
    transparent 10px 16px
  );
}

/* ---------------------------------------------------------------
   CEL DOTYKOWY
   Sam token --control-h nie wystarcza: warianty i kontrolki z własną
   wysokością (mały przycisk, zakładka, przełącznik segmentowy) potrafią
   zejść poniżej progu mimo poprawnego tokenu. Brand book stawia twarde
   44 × 44 px i to jest warunek, nie sugestia — w rękawiczkach różnica
   między 36 a 44 px decyduje o tym, czy trafisz.
   --------------------------------------------------------------- */
@media (pointer: coarse) {
  .btn-sm {
    height: var(--control-h);
  }

  /* Segment traci wewnętrzny margines, żeby przyciski dostały pełną
     wysokość zamiast tracić ją na obudowę. */
  .seg {
    padding: 0;
  }

  .seg button {
    height: var(--control-h);
  }

  .tab {
    min-height: var(--tap-min);
  }

  /* Pastylki filtrów są wyjątkiem od celu 44 px. Jest ich osiem i zawijają
     się w trzy rzędy — przy pełnej wysokości zjadały pół ekranu telefonu,
     zanim pokazała się pierwsza trasa. 34 px to nadal wygodny cel, bo
     pastylka jest szeroka: palec trafia w nią bokiem, nie w punkt. */
  .pill {
    min-height: 34px;
    padding: 4px var(--space-3);
    font-size: 12.5px;
  }
}

/* ---------------------------------------------------------------
   SZKŁO — panele nad tłem obrazkowym
   Powierzchnia, której design system nie miał do fazy M4: karta
   półprzezroczysta, leżąca na zdjęciu albo na apli marki, nie na
   płaskim tle dokumentu.

   BUDŻET, i to nie jest ostrożność na wyrost. `backdrop-filter`
   zakłada osobną warstwę kompozytora i odczyt tego, co jest pod
   spodem. W prototypie naliczyliśmy ~54 takie warstwy na jednym
   ekranie telefonu. Na ekranie oglądanym dziesięć sekund — proszę
   bardzo. Na ekranie świecącym przez sześć godzin marszu — nie.

   Reguła: `.szklo` wolno na ekranie startowym, NIE WOLNO w trybie
   wycieczki. Tam panele dostają kryjące tło (`.szklo-kryjace`),
   które wygląda tak samo, a nic nie kosztuje — i przy okazji jest
   czytelne w pełnym słońcu, co w górach bije każdy efekt.
   --------------------------------------------------------------- */

.szklo {
  background-color: color-mix(in oklab, var(--forest-deep) 62%, transparent);
  border: 1px solid oklch(1 0 0 / 0.14);
  border-radius: var(--radius-3xl);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.1),
    0 18px 44px -22px oklch(0.12 0.02 160 / 0.8);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}

/* Drugi plan: lżejsze, bez własnego cienia — do kafli i pastylek,
   których na ekranie jest kilka naraz. */
.szklo-lekkie {
  background-color: oklch(1 0 0 / 0.08);
  border: 1px solid oklch(1 0 0 / 0.12);
  border-radius: var(--radius-2xl);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Ten sam rysunek bez rozmycia. Dla trybu wycieczki i dla przeglądarek
   bez `backdrop-filter` — patrz zapasowa reguła niżej. */
.szklo-kryjace {
  background-color: color-mix(in oklab, var(--forest-deep) 92%, transparent);
  border: 1px solid oklch(1 0 0 / 0.14);
  border-radius: var(--radius-3xl);
  box-shadow: 0 18px 44px -22px oklch(0.12 0.02 160 / 0.8);
}

/* Bez obsługi rozmycia półprzezroczysty panel na zdjęciu robi się
   nieczytelny. Wtedy szkło przestaje być szkłem i po prostu kryje. */
@supports not (backdrop-filter: blur(1px)) {
  .szklo { background-color: color-mix(in oklab, var(--forest-deep) 92%, transparent); }
  .szklo-lekkie { background-color: color-mix(in oklab, var(--forest-deep) 78%, transparent); }
}

/* Tekst na szkle leży zawsze na ciemnym, także w motywie jasnym —
   to jest powierzchnia „na zdjęciu", a nie „na tle dokumentu". */
.szklo, .szklo-lekkie, .szklo-kryjace { color: var(--sand); }

@media (prefers-reduced-motion: reduce) {
  .btn,
  .pole,
  .seg button,
  .pill {
    transition: none;
  }

  .btn:hover {
    transform: none;
  }

  .btn-primary::after,
  .btn-summit::after {
    transition: none;
    opacity: 0;
  }
}