/* landings/domeny/style.css — style WŁASNE landingu Domeny (wyszukiwarka wolnych domen).
   Wspólny arkusz /landings/_shared/landing.css zostaje nietknięty: pięć landingów powstaje
   równolegle i każdy dopisek tam to konflikt. Ładowany PO wspólnym (landing_head opts['css']),
   więc nadpisuje go bez !important. Zmienne (--lp, --green, --r*, --shadow*) pochodzą stamtąd;
   akcent landingu to cyjan z body.theme-domeny. */

/* ── Sekcja wyszukiwarki ────────────────────────────────────────────────────── */
/* Hero jest białe, a sekcja stoi w kolorze tła strony — gradient prowadzi z bieli do tła,
   zgodnie z zasadą z landing.css („gradient jest PRZEJŚCIEM do koloru, który następna sekcja
   naprawdę ma"). */
/* PIERWSZY ELEMENT STRONY NA BIAŁYM TLE (Oskar 23.10.2026: „landingi wyglądają lepiej,
   jak pierwszy element jest na białym tle").
   ⚠️ BIEL DAJE KLASA `alt` NA SEKCJI, NIE TA REGUŁA. Własne `background` na `.ds-sec`
   (0,1,0) przegrywało z `.alt + section:not(.alt):not(.wu-sec):not([data-tlo])`
   z `landing.css` (0,4,1), która dokłada gradient do każdej sekcji po białej — i robiła
   to NIEZALEŻNIE od kolejności plików. Zmierzone: sekcja miała dalej
   `linear-gradient(#fff 0%, #F1F5FB 20%)`. `alt` wyłącza tamtą regułę przez `:not(.alt)`
   i ustawia `--surface`, więc problem znika u źródła zamiast być przykrywany. */
/* ⚠️ Z RAMKĄ ORGANIZACJI NAD SOBĄ SEKCJA ZOSTAJE W KOLORZE TŁA (Oskar 22.10.2026: „jak jest
   UTM, to to »wolne domeny« zrób chyba na białym tle albo jakoś sensowniej, żeby nie było
   takiej ostrej zmiany między nimi").
   Wejście z `?d=` wstawia nad wyszukiwarką `org_personalizacja('domeny')`, czyli sekcję
   `.org-ramka` w kolorze TŁA strony. Biały wierzch gradientu dawał wtedy w połowie ekranu
   sekwencję szare → białe → szare, czyli dokładnie tę twardą krawędź. Bez gradientu przejście
   z ramki jest niewidoczne, a wejście w biały cennik niżej robi wspólna reguła
   `section:not(.alt) + .alt` z `landing.css`.
   Pole wyszukiwania ma własne białe tło (`.ds-box`), więc sekcja na szarym nie traci czytelności.
   Wariant „całe na biało" odpada: wtedy twarda krawędź tylko przeniosłaby się o jedną sekcję
   niżej, na styk z cennikiem. */
.org-ramka + .ds-sec,
.org-ramka + script + .ds-sec { background:var(--bg); }

/* wejście do wyszukiwarki z hero — świadomie NIE przycisk, żeby nie konkurować z „Przenieś domenę" */
.ds-herolink { display:inline-flex; align-items:center; gap:7px; margin-top:16px;
  color:var(--lp); font-weight:600; font-size:.95rem; text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--lp) 35%, transparent); padding-bottom:2px; }
.ds-herolink:hover { border-bottom-color:var(--lp); }

/* ── Pole wyszukiwania ──────────────────────────────────────────────────────── */
.ds-box { max-width:720px; margin:28px auto 0; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); box-shadow:var(--shadow-lg); padding:22px 22px 18px; }
.ds-label { display:block; font-size:.78rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.09em; color:var(--fg-muted); margin-bottom:9px; }
.ds-row { display:flex; gap:10px; align-items:stretch; }
.ds-field { flex:1 1 auto; min-width:0; position:relative; display:flex; }
.ds-input { flex:1 1 auto; min-width:0; width:100%; font:inherit; font-size:1.05rem; font-weight:600;
  color:var(--fg); background:var(--bg); border:1px solid var(--border-strong); border-radius:var(--r);
  padding:14px 16px; transition:border-color .15s, box-shadow .15s; }
.ds-input::placeholder { color:var(--fg-muted); font-weight:400; }
.ds-input:focus { outline:none; border-color:var(--lp); background:var(--surface);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--lp) 18%, transparent); }
.ds-go { flex:0 0 auto; white-space:nowrap; }
.ds-go[disabled] { opacity:.62; cursor:progress; box-shadow:none; }
.ds-hint { margin:11px 2px 0; font-size:.82rem; color:var(--fg-muted); line-height:1.5; }

/* widoczny focus z klawiatury — bez tego tabowanie po wynikach jest niewidoczne */
.ds-box :focus-visible, .ds-out :focus-visible, .ds-herolink:focus-visible {
  outline:2px solid var(--lp); outline-offset:2px; border-radius:var(--r-sm); }

/* ── Wyniki ─────────────────────────────────────────────────────────────────── */
.ds-out { max-width:720px; margin:18px auto 0; }
.ds-out:empty { display:none; }

.ds-msg { background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:var(--r); padding:14px 16px; font-size:.92rem; color:var(--fg-secondary); }
.ds-msg a { color:var(--accent-fg); font-weight:600; }

.ds-list { display:flex; flex-direction:column; gap:8px; }   /* już tylko szkielet ładowania */

/* ── WYNIKI JAKO TABELA NA BIAŁYM TLE (Oskar 23.10.2026: „daj po prostu tabelę z białym
   tłem i przyciskiem zamawiam / poproś o wycenę"). Wcześniej każda końcówka była osobnym
   kolorowym kaflem z ramką, podpisem pod nazwą i dopiskiem pod ceną — przy siedmiu
   końcówkach robiło to ścianę pudełek zamiast listy do przebiegnięcia wzrokiem.
   Trzy kolumny i nic więcej: domena · cena albo stan · jedna akcja. */
.ds-tab { width:100%; border-collapse:collapse; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.ds-tab td { padding:11px 14px; border-top:1px solid var(--border-soft); vertical-align:middle; }
.ds-tab tr:first-child td { border-top:0; }
.ds-c-dom { font-size:1rem; font-weight:700; color:var(--navy); overflow-wrap:anywhere; }
.ds-c-cena { white-space:nowrap; font-size:.95rem; font-weight:800; color:var(--green); text-align:right; }
/* `width:1%` + `nowrap` = kolumna akcji zwęża się do szerokości przycisku, a cała reszta
   miejsca zostaje dla nazwy domeny. */
.ds-c-akcja { width:1%; white-space:nowrap; text-align:right; }
.ds-tab tr.taken .ds-c-dom, .ds-tab tr.unknown .ds-c-dom { color:var(--fg-muted); font-weight:600; }
.ds-stan { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  color:var(--fg-muted); }

/* Nagłówek grupy: która to nazwa i ile z końcówek jest wolnych. Przy kilku sprawdzanych
   nazwach bez tego nie dałoby się powiedzieć, czyj jest który wiersz. */
.ds-group + .ds-group { margin-top:22px; }
.ds-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  margin:0 4px 8px; font-size:.86rem; color:var(--fg-secondary); }
.ds-head b { color:var(--fg); }
.ds-h-name { font-size:1rem; font-weight:800; color:var(--navy); overflow-wrap:anywhere; }
.ds-h-stan { flex:0 0 auto; font-size:.8rem; color:var(--fg-muted); }
.ds-h-stan.free { color:var(--green); font-weight:700; }

/* Przycisk akcji w wierszu tabeli — „Zamawiam" przy końcówce z naszą ceną, „Poproś o wycenę"
   przy takiej, której w cenniku nie ma. */
.ds-cta { display:inline-flex; align-items:center; gap:6px; background:var(--accent); color:#fff;
  border:none; border-radius:var(--r); padding:9px 15px; font:inherit; font-size:.86rem; font-weight:700;
  cursor:pointer; text-decoration:none; white-space:nowrap; box-shadow:0 3px 10px rgba(255,111,0,.24); }
.ds-cta:hover { background:var(--accent-light); }
.ds-cta:active { background:var(--accent-hover); }
.ds-cta.ghost { background:transparent; color:var(--navy); border:1px solid var(--border-strong); box-shadow:none; }
.ds-cta.ghost:hover { background:var(--navy); border-color:var(--navy); color:#fff; }
.ds-swap { font-size:.8rem; font-weight:600; color:var(--accent-fg); text-decoration:none; white-space:nowrap; }
.ds-swap:hover { text-decoration:underline; }

.ds-foot { margin:14px 4px 0; font-size:.84rem; color:var(--fg-muted); line-height:1.55; }
.ds-foot a { color:var(--accent-fg); font-weight:600; }
.ds-idn { margin:8px 4px 0; font-size:.8rem; color:var(--fg-muted); line-height:1.5; }
/* Czego nie sprawdziliśmy i dlaczego — pod wynikami, nie zamiast nich: jedna literówka
   w liście pięciu nazw nie może kasować czterech dobrych wyników. */
.ds-skip { margin:12px 4px 0; padding:9px 12px; background:var(--bg); border:1px solid var(--border);
  border-radius:var(--r); font-size:.8rem; color:var(--fg-secondary); line-height:1.5; }

/* ── Stan ładowania ─────────────────────────────────────────────────────────── */
.ds-skel { height:46px; border-radius:var(--r-lg); border:1px solid var(--border); background:var(--surface);
  position:relative; overflow:hidden; }
.ds-skel::after { content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--lp) 10%, transparent), transparent);
  animation:ds-shine 1.15s infinite; }
@keyframes ds-shine { 100% { transform:translateX(100%); } }
@media (prefers-reduced-motion:reduce) { .ds-skel::after { animation:none; } }

/* ── Telefon ─────────────────────────────────────────────────────────────────
   Tabela o trzech kolumnach nie zmieści się w 342 px: sama domena potrafi mieć 22 znaki,
   a obok musi stanąć kwota i przycisk. Poprzednia wersja wyników (kafle) właśnie na tym
   się wywracała — przycisk „Poproś o wycenę" wychodził poza ekran, przez co dokument miał
   406 px przy oknie 390 px i stronę dało się przewijać w bok (zmierzone 23.10.2026).
   Dlatego na telefonie wiersz tabeli przestaje być wierszem: `display:block` układa
   domenę, kwotę i przycisk jeden pod drugim, każde na pełnej szerokości karty. */
@media (max-width:640px) {
  .ds-box { padding:18px 16px 15px; }
  .ds-row { flex-direction:column; }
  .ds-go { width:100%; justify-content:center; }
  .ds-head { flex-direction:column; align-items:flex-start; gap:2px; }

  /* ⚠️ NAZWA I KWOTA W LEWEJ KOLUMNIE, AKCJA PO PRAWEJ — NIE JEDNO POD DRUGIM.
     Pierwsza wersja na telefon układała wszystkie trzy komórki pionowo
     (`display:block`), przez co każdy wynik miał trzy linie, a przycisk stawał sam
     na pełnej szerokości. Przy dwóch nazwach po siedem końcówek dawało to czternaście
     pomarańczowych pasów jeden pod drugim — i to jest „za duże przyciski" z uwagi
     Oskara (23.10.2026), a nie sam rozmiar czcionki w przycisku.
     Siatka: nazwa domeny W POPRZEK OBU KOLUMN w pierwszym wierszu, pod nią kwota
     z lewej i akcja z prawej. Wynik ma dwie linie zamiast trzech, a pomarańcz jest
     akcentem przy krawędzi, nie pasem przez całą kartę.
     ⚠️ Nazwa MUSI dostać całą szerokość. Wersja, w której stała w jednej kolumnie
     obok przycisku, zostawiała jej ok. 200 px — a `overflow-wrap:anywhere` łamie
     wtedy w środku słowa: „fundacja-dlugonazwana.org.pl" schodziło na trzy linie,
     a nawet „dobrasprawa.com" pękało na „dobrasprawa.co" i „m" (zmierzone przy
     390 px). Na pełnej szerokości karty mieści się 28 znaków w jednej linii. */
  .ds-tab, .ds-tab tbody { display:block; }
  .ds-tab tr { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center;
    gap:4px 10px; border-top:1px solid var(--border-soft); padding:10px 14px; }
  .ds-tab tr:first-child { border-top:0; }
  .ds-tab td { display:block; border-top:0; padding:0; }
  .ds-c-dom   { grid-column:1 / -1; grid-row:1; }
  .ds-c-cena  { grid-column:1; grid-row:2; width:auto; text-align:left; }
  .ds-c-akcja { grid-column:2; grid-row:2; width:auto; text-align:right; }
  /* Przycisk mniejszy i bez pomarańczowego cienia — na liście siedmiu wyników
     pełnowymiarowy wyglądał jak główne CTA strony, a jest jedną z siedmiu akcji. */
  .ds-c-akcja .ds-cta { padding:7px 11px; font-size:.78rem; box-shadow:none; }
  .ds-c-akcja .ds-cta.ghost { padding:6px 10px; }
}