/* Hustleye - motyw liquid glass przeniesiony z panelu.
 *
 * Definicja wiazaca, wedlug ktorej to jest napisane:
 *   tafla = WYLACZNIE biel o kryciu .05-.12 (moze byc gradient-refleks
 *   .12 -> .05), stos blur(4-8px) saturate(1.8-2.0) brightness(1.05-1.1),
 *   1px gradientowa krawedz (swiatlo gora-lewo, cien dol-prawo),
 *   inset highlight u gory .3-.45, subtelny cien wewnetrzny dolem.
 *
 * ZAKAZ: nakladki rgba(0,0,0,x) w wypelnieniu, biel > .12, brightness < 1,
 * mleczne plyty, ciemny tint w wypelnieniu. Ciemny tint w wypelnieniu to
 * glassmorphism, czyli dziura wycieta w szkle, a nie szklo.
 *
 * Kolor daje DYM stojacy POD tafla, nigdy wypelnienie. Stad `.dym`:
 * bez niego biel .05-.12 nie ma czego przepuscic i wychodzi mleczna plyta.
 *
 * Uklad to PASY na cala szerokosc, nie karty z zaokraglonym rogiem.
 * Etykiety skladane krojem tekstu, wielkoscia zdaniowa, bez trackingu -
 * mono w etykiecie jest najczystsza sygnatura strony z generatora.
 */

:root {
  /* JEDNA zmienna akcentu. Zmiana tej linii przemalowuje cala apke. */
  --akcent: #2fd4c6;

  --atrament: #0b0d12;
  --kosc: #f2efe6;
  --kosc-przygasla: #b9b6ae;
  --tekst: var(--kosc);

  /* Tafla: biel w widelkach .05-.12, gradient-refleks od gory. */
  --tafla-gora: rgba(255, 255, 255, .12);
  --tafla-dol: rgba(255, 255, 255, .05);
  --tafla-blur: 7px;
  --krawedz-swiatlo: rgba(255, 255, 255, .38);
  --krawedz-cien: rgba(255, 255, 255, .08);

  --r: 18px;
  --luk: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--atrament);
  color: var(--tekst);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
        "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── DYM: kolor stoi POD tafla, nie w niej ─────────────────────────────── */
.dym {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Kolor pod tafla ZOSTAJE, bo bez niego biel .05-.12 nie ma czego
     przepuscic i wychodzi mleczna plyta. Ale dwie JASNE plamy to
     gradient-blob, czyli anty-tell z kanonu ("gradient-blob hero").
     Projektant nazwal to wprost w turnieju 02.09: "akcent jest
     jednoczesnie tapeta, wiec przestaje byc akcentem", plus fiolet
     "za kazdym razem w innym miejscu, nigdy nic nie znaczy".
     Krycie zbite trzykrotnie: dym dalej jest, ale juz nie krzyczy. */
  background:
    radial-gradient(70% 46% at 14% 2%,
      color-mix(in oklab, var(--akcent) 14%, transparent), transparent 72%),
    radial-gradient(62% 42% at 94% 30%, rgba(123, 45, 255, .10), transparent 70%),
    var(--atrament);
}

/* ── PAS: tafla na cala szerokosc, rozdzielona wlosowa kreska ──────────── */
.pas {
  position: relative;
  background: linear-gradient(180deg, var(--tafla-gora), var(--tafla-dol));
  -webkit-backdrop-filter: blur(var(--tafla-blur)) saturate(1.9) brightness(1.07);
  backdrop-filter: blur(var(--tafla-blur)) saturate(1.9) brightness(1.07);
  box-shadow:
    inset 0 1px 0 var(--krawedz-swiatlo),
    inset 1px 0 0 var(--krawedz-swiatlo),
    inset -1px 0 0 var(--krawedz-cien),
    inset 0 -1px 0 rgba(255, 255, 255, .06),
    inset 0 -14px 22px -18px rgba(0, 0, 0, .55);
  padding: 1.6rem max(1.15rem, env(safe-area-inset-left))
           1.8rem max(1.15rem, env(safe-area-inset-right));
}

.pas + .pas { margin-top: 1px; }

.pas--glowa {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-top: max(1.6rem, calc(env(safe-area-inset-top) + .75rem));
}
.pas--glowa > div { min-width: 0; }

.pas--stopka {
  color: var(--kosc-przygasla);
  font-size: .875rem;
  padding-bottom: max(1.8rem, calc(env(safe-area-inset-bottom) + 1rem));
}

/* ── typografia: trzy poziomy wielkoscia i waga, nie trzecim krojem ────── */
h1 {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0;
}

h2 {
  font-size: 1.125rem;
  font-weight: 650;
  letter-spacing: -.01em;
  margin: 0 0 .3rem;
}

h3 { font-size: 1rem; font-weight: 600; margin: 0; }

.podtytul { margin: .25rem 0 0; color: var(--kosc-przygasla); font-size: .9375rem; }

.dzis {
  flex: 0 0 auto;
  margin: 0;
  color: var(--kosc-przygasla);
  font-size: .875rem;
  text-align: right;
  line-height: 1.25;
}
.dzis strong {
  display: block;
  color: var(--kosc);
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.objasnienie { color: var(--kosc-przygasla); font-size: .9375rem; margin: 0 0 1rem; }
.pod-polem { display: block; color: var(--kosc-przygasla); font-size: .875rem; margin-top: .4rem; }
.kredyt { margin: .75rem 0 0; color: var(--kosc-przygasla); font-size: .8125rem; }

/* ── pola ──────────────────────────────────────────────────────────────── */
.pole { display: block; margin-bottom: .9rem; }
/* Etykieta ma byc czytelniejsza niz tresc, ktora opisuje, a nie bledsza.
   Zarzut z turnieju 02.09: "tresc w polach jest ladna i duza, ale podpis
   mowiacy CO TO ZA POLE jest dwa razy bledszy. Odwrotnie niz powinno". */
.pole > span {
  display: block;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--kosc);
  margin-bottom: .35rem;
}

.dwa { display: grid; grid-template-columns: 1fr; gap: 0 .75rem; }
@media (min-width: 30rem) { .dwa { grid-template-columns: 1fr 1fr; } }

input, textarea, select {
  width: 100%;
  font: inherit;
  color: var(--tekst);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  padding: .65rem .75rem;
  /* Jedna wysokosc dla wszystkiego, co stoi obok siebie. Pomiar
     projektanta 02.09: przyciski 36, select 38, input 39 px - oko tego
     nie nazwie, ale zobaczy, ze "cos tu drga". */
  min-height: 44px;
}

/* Uchwyt rozciagania textarea jest na iOS bezuzyteczny (nie da sie go
   zlapac palcem), a recenzent App Store wskazal go jako pierwszy dowod,
   ze to nietknieta strona w opakowaniu. */
textarea { resize: none; }

/* Natywny wyglad listy w WebKicie ignoruje min-height i zostawia pole
   23 px wysokosci - pomiar z biegu e2e 01.09, nie domysl. Zdejmujemy
   wyglad systemowy i rysujemy strzalke sami, zeby cel dotykowy mial
   naprawde 44 px na kazdym silniku. */
select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23b9b6ae' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
}
/* Placeholder byl jedynym elementem apki PONIZEJ progu AA: zmierzone
   3,68:1 przy wymaganym 4,5:1. Bramka kontrastu tego nie widziala, bo
   placeholder nie jest wezlem tekstowym - dopisany osobny test. */
input::placeholder, textarea::placeholder { color: rgba(242, 239, 230, .72); }

input:focus-visible, textarea:focus-visible, select:focus-visible,
button:focus-visible, summary:focus-visible, a:focus-visible {
  outline: 2px solid var(--akcent);
  outline-offset: 2px;
}

/* ── przyciski ─────────────────────────────────────────────────────────── */
button {
  font: inherit;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  min-height: 44px;
  padding: .6rem 1.1rem;
  transition: background .18s var(--luk), border-color .18s var(--luk);
}

button.glowny {
  color: var(--atrament);
  background: var(--akcent);
  border: 1px solid transparent;
}
button.glowny:hover { background: color-mix(in oklab, var(--akcent) 88%, white); }

button.cichy {
  background: rgba(255, 255, 255, .08);
  color: var(--tekst);
  border: 1px solid rgba(255, 255, 255, .18);
  font-weight: 500;
  padding: .5rem .85rem;
  font-size: .875rem;
}
button.cichy:hover { background: rgba(255, 255, 255, .12); }
button.niebezpieczny { color: #ffb4a8; border-color: rgba(255, 180, 168, .35); }

/* Kasowanie stoi osobno i cicho. Nie ma prawa wygladac jak przycisk,
   ktorego uzywa sie codziennie, ani stac w jednym rzedzie z takimi.
   Blizna 02.09: "Usun" wedrowal o 33 punkty w lewo, gdy sasiad zmienial
   etykiete, wiec to samo miejsce na szkle bylo raz planem, a raz
   skasowaniem kontaktu. */
.lead-stopka {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.5rem;
}
.usun {
  background: transparent;
  border: 1px solid transparent;
  color: var(--kosc-przygasla);
  font-weight: 500;
  font-size: .875rem;
  padding: .5rem .75rem;
}
.usun:hover { color: #ffb4a8; }
.usun--pyta {
  color: var(--atrament);
  background: #ffb4a8;
  border-color: #ffb4a8;
  font-weight: 700;
}

.potwierdzenie { margin-left: .6rem; color: var(--akcent); font-size: .875rem; }

/* ── lista rozmow: wiersze rozdzielone kreska, nie kafle ───────────────── */
.lista { list-style: none; margin: 0; padding: 0; }

.lead { border-top: 1px solid rgba(255, 255, 255, .12); padding: 1rem 0; }
.lista .lead:first-child { border-top: 0; padding-top: .25rem; }

.lead-gora {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem .75rem;
  /* Zawijanie jest tu OBOWIAZKOWE, nie kosmetyczne: przy powiekszonym
     tekscie iOS (Dynamic Type) tytul i lista statusu nie mieszcza sie
     obok siebie. Zmierzone 02.09 przy tekscie 200 procent: lista miala
     272 px i wychodzila 110 px poza ekran 390 px. */
  flex-wrap: wrap;
}
.lead-gora h3 { flex: 1 1 10rem; min-width: 0; }
.lead-gora select {
  width: auto;
  /* Sufit z `min()`, a nie stala: przy zwyklym tekscie lista ma wygodne
     8,5 rem, przy powiekszonym oddaje szerokosc ekranowi zamiast go
     rozpychac. */
  min-width: min(8.5rem, 100%);
  max-width: 100%;
}

.lead-meta { color: var(--kosc-przygasla); font-size: .875rem; margin: .3rem 0 .7rem; }
.lead-meta a { color: var(--akcent); }
.zrodlo { color: var(--kosc-przygasla); }

/* Trzy rowne kolumny, jedna prawa krawedz. Wczesniej `flex-wrap`
   z przyciskami o szerokosci tresci dawal w jednej karcie CZTERY rozne
   prawe krawedzie (pomiar 02.09: 226, 308, 235, 412 px). */
.akcje {
  display: grid;
  /* Prog w `rem` rosnie razem z tekstem, wiec siatka SAMA zwija sie do
     dwoch i do jednej kolumny, gdy czlowiek podniesie Dynamic Type.
     Sztywne `repeat(3, 1fr)` rozpychalo ekran o 151 px przy tekscie
     200 procent (zmierzone 02.09). */
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: .75rem;
  margin: .9rem 0 1.1rem;
}
.akcje button {
  width: 100%;
  min-width: 0;
  padding-inline: .4rem;
  /* Bez tego dluga etykieta wymusza szerokosc min-content i wychodzi
     poza kolumne zamiast sie zawinac. */
  overflow-wrap: anywhere;
}

.panel {
  margin-top: .75rem;
  padding: .85rem .9rem;
  border-radius: var(--r);
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
.panel h4 { margin: 0 0 .6rem; font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; }
.panel h5 { margin: 1.1rem 0 .45rem; font-size: .9375rem; font-weight: 650; color: var(--kosc); }
.panel h6 { margin: .9rem 0 .35rem; font-size: .875rem; font-weight: 600; color: var(--kosc-przygasla); }
.panel .plan-naglowek { margin: 0 0 .6rem; font-weight: 600; }
/* Puste kolka `o` to domyslny marker zagniezdzonego `<ul>`. Nikt tego nie
   wybiera swiadomie, wiec czyta sie jako "nieostylowane wcale". */
.panel ul { margin: 0; padding: 0; list-style: none; }
.panel li {
  margin-bottom: .55rem;
  padding-left: .85rem;
  border-left: 2px solid rgba(255, 255, 255, .14);
}
/* "Na początek" (etykieta sekcji) i "Nie mam czasu" (kwestia klienta)
   mialy identyczny stopien i identyczny kolor, wiec dwa rozne poziomy
   struktury czytaly sie jako jeden. Kwestia klienta dostaje kursywe
   i wlasny stopien. */
.panel .obiekcja {
  display: block;
  color: var(--kosc-przygasla);
  font-size: .8125rem;
  font-style: italic;
}
.panel .riposta { display: block; margin-top: .15rem; }
.panel p { margin: .3rem 0; }
.panel .kopiowanie { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.panel pre {
  margin: 0;
  white-space: pre-wrap;
  font: inherit;
  color: var(--tekst);
}

.uwaga {
  margin: .6rem 0 0;
  padding: .6rem .7rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 180, 168, .35);
  color: #ffd2c9;
  font-size: .875rem;
}
.brak {
  margin: .5rem 0 0;
  color: var(--kosc-przygasla);
  font-size: .875rem;
}

.historia { margin-top: .7rem; font-size: .875rem; color: var(--kosc-przygasla); }
.historia summary { cursor: pointer; }
.historia ol { margin: .5rem 0 0; padding-left: 1.1rem; }

/* Domyslny trojkat `<summary>` to jeden z sygnalow "to jest nietknieta
   strona w opakowaniu" (zarzut recenzenta 02.09: natywny iOS stawia
   chevron po prawej, nie wypelniony trojkat po lewej). */
details > summary {
  cursor: pointer;
  padding: .6rem 0;
  font-weight: 600;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  list-style: none;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::after {
  content: "";
  width: .55rem;
  height: .55rem;
  border-right: 2px solid var(--kosc-przygasla);
  border-bottom: 2px solid var(--kosc-przygasla);
  transform: rotate(45deg);
  transition: transform .18s var(--luk);
  flex: 0 0 auto;
}
details[open] > summary::after { transform: rotate(-135deg); }
details + details { margin-top: .6rem; }

@media (min-width: 46rem) {
  main, header, footer { max-width: 46rem; margin-inline: auto; }
}

/* ── fallbacki: brak wsparcia szkla albo prosba o nieprzezroczystosc ───── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pas { background: #171a21; }
}

@media (prefers-reduced-transparency: reduce) {
  .pas {
    background: #171a21;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .dym { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Dzwonienie: cel dotykowy, nie napis. Link, a nie przycisk, bo dla
   czytnika ekranu i dla systemu to jest przejscie do dialera. */
.dzwon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin: .2rem 0 0;
  padding: .55rem 1rem;
  border-radius: 10px;
  background: var(--akcent);
  color: var(--atrament);
  font-weight: 600;
  text-decoration: none;
}
.dzwon:hover { background: color-mix(in oklab, var(--akcent) 88%, white); }

.lead input[type="tel"] { margin-bottom: .5rem; }

/* Linki w tresci: kolor akcentu, zeby link nie wygladal jak zwykly napis.
   `:not(.dzwon)` jest tu OBOWIAZKOWE. Bez tego regula dopisana pozniej
   bije `.dzwon` samym miejscem w arkuszu i przycisk dzwonienia dostaje
   turkusowy tekst na turkusowym tle, czyli znika. Zlapane na zrzucie
   z produkcji 02.09, nie w kodzie. */
.pas a:not(.dzwon) { color: var(--akcent); }
.pas--stopka a { color: var(--kosc-przygasla); }
.pas--stopka a:hover { color: var(--tekst); }
main ul { margin: 0 0 1rem; padding-left: 1.15rem; }
main li { margin-bottom: .4rem; }