/* ═══════════════════════════════════════════════════════════════════════════
   Kreator doboru urządzeń — kaskada filtrów (/dobierz/…)
   Implementacja makiety „Kreator doboru IDMAG.dc.html" (Claude Design).
   Wartości (odstępy, rozmiary, kolory, stany) przepisane z artboardów 1a/1b/1c.
   ═══════════════════════════════════════════════════════════════════════════ */

.fnd { background: #fff; }

/* ─────────── hero (artboard 1a) ─────────── */
.fnd-hero {
  position: relative; overflow: visible;
  background: var(--pt-blue-700); color: #fff;
  padding: 44px 72px 48px;
}
.fnd-hero-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pt-blue-200); margin-bottom: 14px;
}
.fnd-hero h1 {
  font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1;
  color: #fff; margin: 0 0 12px;
}
.fnd-hero-lead { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.82); max-width: 560px; margin: 0; }
/* przesunięte kwadraty — cytat z logo */
.fnd-hero-sq-a { position: absolute; right: 120px; bottom: -26px; width: 52px; height: 52px; background: var(--pt-blue-400); }
.fnd-hero-sq-b { position: absolute; right: 78px; bottom: -8px; width: 52px; height: 52px; border: 1px solid rgba(255,255,255,.45); }

/* ─────────── ścieżka okruszkowa w hero ─────────── */
/* Widoczny odpowiednik BreadcrumbList z JSON-LD — bez tego dane strukturalne
   deklarowałyby ścieżkę, której użytkownik nie widzi. */
.fnd-crumbs { margin-bottom: 26px; }
.fnd-crumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
}
.fnd-crumbs li {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.fnd-crumbs li + li::before { content: "/"; color: rgba(255,255,255,.35); }
.fnd-crumbs a { color: rgba(255,255,255,.55); border: 0; text-decoration: none; }
.fnd-crumbs a:hover { color: #fff; }
.fnd-crumbs [aria-current="page"] { color: #fff; }

/* ─────────── pasek adresu stanu ─────────── */
.fnd-url {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 72px; background: #fff; border-bottom: 1px solid var(--pt-ink-100);
}
.fnd-url-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--pt-ink-400);
}
.fnd-url-path { font-family: var(--font-mono); font-size: 11px; color: var(--pt-ink-600); overflow-wrap: anywhere; }

/* ─────────── wiersz kaskady ─────────── */
.fnd-row {
  display: grid; grid-template-columns: 72px 1fr;
  background: #fff; border-bottom: 1px solid var(--pt-ink-100);
}
.fnd-row.is-collapsed { background: var(--pt-ink-050); }

/* oś z kwadratowymi węzłami */
.fnd-axis { position: relative; }
.fnd-axis-line { position: absolute; left: 35px; top: 22px; bottom: 0; width: 1px; background: var(--pt-ink-300); }
.fnd-axis-line.is-end { bottom: auto; height: 22px; }
.fnd-axis-node { position: absolute; left: 31px; top: 17px; width: 9px; height: 9px; background: var(--pt-blue-700); }

/* ─────────── stan S3: wiersz zwinięty do paska 44 px ─────────── */
.fnd-bar {
  display: flex; align-items: center; gap: 16px;
  height: 44px; padding-right: 72px;
  text-decoration: none; color: inherit; cursor: pointer;
}
.fnd-bar:hover { background: var(--pt-blue-050); }
.fnd-bar:focus-visible { outline: 2px solid var(--pt-blue-400); outline-offset: -2px; }
.fnd-bar-label {
  width: 210px; flex: 0 0 auto;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pt-ink-500);
}
/* w zwiniętym pasku kwadratowy znacznik zastąpiła ikona wybranej opcji */
.fnd-bar-dot { display: flex; flex: 0 0 auto; color: var(--pt-blue-700); }
.fnd-bar-name { font-size: 14px; font-weight: 600; color: var(--pt-ink-1000); }
.fnd-bar-count {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--pt-ink-400);
}
.fnd-bar-change {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pt-blue-700); border-bottom: 1px solid var(--pt-blue-700); padding-bottom: 1px;
}

/* ─────────── wiersz rozwinięty ─────────── */
.fnd-body { padding: 28px 72px 28px 0; }
.fnd-level {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pt-blue-700); margin: 0 0 4px;
}
.fnd-question {
  font-size: 19px; font-weight: 700; letter-spacing: -.03em;
  color: var(--pt-ink-1000); margin: 0 0 16px;
}

/* ─────────── opcje ─────────── */
.fnd-opts { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; flex-wrap: wrap; }
.fnd-opt {
  position: relative; display: block; box-sizing: border-box;
  width: 280px; padding: 16px 18px;
  background: #fff; border: 1px solid var(--pt-ink-200);
  text-decoration: none; color: inherit; cursor: pointer;
  transition: border-color .12s ease-out, box-shadow .12s ease-out;
}
/* S5 — hover i focus klawiatury */
a.fnd-opt:hover { border-color: var(--pt-blue-400); box-shadow: var(--shadow-2); }
a.fnd-opt:focus-visible { outline: 2px solid var(--pt-blue-400); outline-offset: 2px; }

/* S2 — opcja wybrana */
.fnd-opt.is-chosen {
  background: var(--pt-blue-050);
  border-color: var(--pt-blue-700);
  box-shadow: inset 0 0 0 1px var(--pt-blue-700);
}
.fnd-opt-sq-a { position: absolute; top: -5px; right: -5px; width: 10px; height: 10px; background: var(--pt-blue-700); }
.fnd-opt-sq-b { position: absolute; top: -1px; right: -9px; width: 10px; height: 10px; border: 1px solid var(--pt-blue-400); }

/* S4 — opcja niedostępna */
.fnd-opt.is-soon { background: var(--pt-ink-050); border: 1px dashed var(--pt-ink-300); cursor: not-allowed; }
.fnd-opt.is-soon .fnd-opt-name { color: var(--pt-ink-600); }

/* Ikona filtru — kwadratowy kafelek nad nazwą; podąża za stanem opcji */
.fnd-opt-icon {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-bottom: 12px;
  background: var(--pt-blue-050); color: var(--pt-blue-700);
  transition: background-color .12s ease-out, color .12s ease-out;
}
.fnd-opt.is-chosen .fnd-opt-icon { background: var(--pt-blue-700); color: #fff; }
.fnd-opt.is-soon .fnd-opt-icon { background: var(--pt-ink-100); color: var(--pt-ink-400); }
a.fnd-opt:hover .fnd-opt-icon { background: var(--pt-blue-100); }
a.fnd-opt.is-chosen:hover .fnd-opt-icon { background: var(--pt-blue-800); }

/* Desktop: nazwa → opis → licznik, jeden pod drugim (artboard 1a) */
.fnd-opt-name { display: block; font-size: 15px; font-weight: 600; color: var(--pt-ink-1000); margin-bottom: 6px; }
.fnd-opt-desc { display: block; font-size: 12px; color: var(--pt-ink-500); line-height: 1.5; margin-bottom: 8px; }
.fnd-opt-count {
  display: block;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--pt-ink-400); white-space: nowrap;
}
.fnd-opt.is-chosen .fnd-opt-count { color: var(--pt-blue-700); }
.fnd-opt-badge {
  display: inline-block;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pt-ink-400); border: 1px solid var(--pt-ink-200); background: #fff; padding: 1px 6px;
  white-space: nowrap;
}

/* S6 — wejście nowego wiersza: rozwinięcie + fade, 180 ms ease-out */
@media (prefers-reduced-motion: no-preference) {
  .fnd-row:not(.is-collapsed):last-of-type .fnd-body,
  .fnd-res .fnd-body { animation: fnd-in 360ms ease-out both; }
}
@keyframes fnd-in {
  from { opacity: 0; transform: translateY(-6px); }
  50%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}

/* ─────────── wyniki ─────────── */
.fnd-res {
  display: grid; grid-template-columns: 72px 1fr;
  background: var(--pt-ink-050); border-top: 1px solid var(--pt-ink-200);
}
.fnd-res-eyebrow {
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 4px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pt-blue-700);
}
.fnd-res-eyebrow span { letter-spacing: .1em; }
.fnd-res-title { font-size: 24px; font-weight: 700; letter-spacing: -.03em; color: var(--pt-ink-1000); margin: 0 0 4px; }
.fnd-res-path {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pt-ink-400); margin: 0 0 24px;
}

/* ─────────── karta urządzenia ─────────── */
.fnd-devs {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start;
}
.fnd-dev {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--pt-ink-200); box-shadow: var(--shadow-1);
}
.fnd-dev-shot {
  position: relative; height: 180px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border-bottom: 1px solid var(--pt-ink-100);
}
.fnd-dev-shot img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; padding: 14px; box-sizing: border-box; }
.fnd-dev-flag {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  background: var(--pt-ink-1000); color: #fff; padding: 3px 8px;
}
.fnd-dev-body { padding: 20px 20px 0; }
/* seria rodziny — tylko wyniki z katalogu (gałąź odczytu kodów) */
.fnd-dev-series {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pt-ink-400); margin: 0 0 6px;
}
.fnd-dev-name { font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--pt-ink-1000); margin: 0 0 8px; }
.fnd-dev-name a { color: inherit; text-decoration: none; border-bottom: 0; }
.fnd-dev-name a:hover { color: var(--pt-blue-700); }
a.fnd-dev-shot { display: flex; }
.fnd-dev-tagline { font-size: 13px; color: var(--pt-ink-600); line-height: 1.55; margin: 0 0 14px; }
.fnd-dev-chips { list-style: none; margin: 0 0 16px; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.fnd-dev-chips li {
  font-family: var(--font-mono); font-size: 10px; padding: 3px 8px;
  background: var(--pt-blue-050); color: var(--pt-blue-700);
}

.fnd-dev-spec { border-top: 1px solid var(--pt-ink-100); }
.fnd-dev-spec summary {
  list-style: none; cursor: pointer;
  padding: 12px 20px; background: var(--pt-ink-050);
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--pt-blue-700);
}
.fnd-dev-spec summary::-webkit-details-marker { display: none; }
.fnd-dev-spec summary:focus-visible { outline: 2px solid var(--pt-blue-400); outline-offset: -2px; }
.fnd-dev-spec summary svg { transition: transform .15s; }
.fnd-dev-spec[open] summary svg { transform: rotate(180deg); }
.fnd-dev-spec-body { padding: 12px 20px; border-top: 1px solid var(--pt-ink-100); }
.fnd-dev-spec-row {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 5px 0; border-bottom: 1px solid var(--pt-ink-050);
}
.fnd-dev-spec-row span { font-size: 12px; color: var(--pt-ink-500); }
.fnd-dev-spec-row b { font-size: 12px; font-weight: 600; color: var(--pt-ink-1000); text-align: right; }

.fnd-dev-cta { display: flex; gap: 8px; padding: 16px 20px 20px; margin-top: auto; }

/* przyciski wg makiety — ostre krawędzie, bez zaokrągleń */
.fnd-btn-primary,
.fnd-btn-ghost {
  font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .02em;
  border-radius: 0; cursor: pointer; text-decoration: none; text-align: center;
  transition: background-color .12s, color .12s;
}
.fnd-btn-primary { flex: 1; background: var(--pt-blue-700); color: #fff; border: 1px solid var(--pt-blue-700); padding: 11px 0; }
.fnd-btn-primary:hover { background: var(--pt-blue-900); border-color: var(--pt-blue-900); }
.fnd-btn-ghost { background: #fff; color: var(--pt-blue-700); border: 1px solid var(--pt-blue-700); padding: 11px 16px; }
.fnd-btn-ghost:hover { background: var(--pt-blue-050); }
.fnd-btn-primary:focus-visible,
.fnd-btn-ghost:focus-visible { outline: 2px solid var(--pt-blue-400); outline-offset: 2px; }

/* ─────────── pasek pomocy ─────────── */
.fnd-help { background: var(--pt-ink-050); border-top: 1px solid var(--pt-ink-200); }
.fnd-help-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px;
  padding: 40px 72px;
}
.fnd-help h2 { font-size: 24px; font-weight: 700; letter-spacing: -.03em; color: var(--pt-ink-1000); margin: 0 0 8px; }
.fnd-help p { font-size: 13px; line-height: 1.6; color: var(--pt-ink-600); margin: 0; max-width: 62ch; }
.fnd-help-cta { display: flex; flex-wrap: wrap; gap: 8px; }
.fnd-help-cta .fnd-btn-primary { flex: 0 0 auto; padding: 11px 20px; }

/* przełączniki desktop/mobile dla przedostatniego poziomu (patrz artboard 1b) */
.fnd-bar.is-mobile-only { display: none; }

/* ═══════════ mobile 375 px (artboard 1b) ═══════════ */
@media (max-width: 900px) {
  .fnd-bar.is-mobile-only { display: flex; }
  .fnd-body.is-desktop-only { display: none; }
  /* na telefonie makieta nie pokazuje paska adresu — zjada całą szerokość */
  .fnd-url { display: none; }
  /* w zwiniętym pasku zostaje sam numer poziomu */
  .fnd-bar-labeltext { display: none; }

  .fnd-hero { padding: 24px 20px 28px; }
  .fnd-hero h1 { font-size: 26px; }
  .fnd-hero-lead { font-size: 14px; }
  .fnd-hero-sq-a { right: 24px; bottom: -18px; width: 36px; height: 36px; }
  .fnd-hero-sq-b { right: -4px; bottom: -4px; width: 36px; height: 36px; }

  .fnd-url { padding: 12px 16px; }
  .fnd-url-path { font-size: 10px; }

  /* na mobile oś znika — zwinięte poziomy stają się rzędami dotykowymi */
  .fnd-row, .fnd-res { grid-template-columns: 1fr; }
  .fnd-axis { display: none; }

  .fnd-bar { height: auto; gap: 10px; padding: 12px 16px; }
  .fnd-bar-label { width: auto; font-size: 9px; letter-spacing: .1em; color: var(--pt-ink-400); }
  .fnd-bar-name { flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* licznik ustępuje miejsca, ale ikona wybranej opcji zostaje — na wąskim ekranie
     to najszybszy wizualny ślad tego, co wybrano na danym poziomie */
  .fnd-bar-count { display: none; }

  .fnd-body { padding: 20px 16px; }
  .fnd-question { font-size: 17px; }

  /* opcje jako pełnej szerokości rzędy dotykowe (min. 44 px);
     na mobile nazwa i licznik stoją w jednym rzędzie, opis pod nimi (artboard 1b) */
  .fnd-opts { flex-direction: column; gap: 10px; }
  /* ikona wchodzi we własną kolumnę, żeby nie zjadać wysokości rzędu dotykowego */
  .fnd-opt {
    width: 100%; padding: 14px 16px; min-height: 44px;
    display: grid; grid-template-columns: 28px 1fr auto; column-gap: 10px; align-items: center;
  }
  .fnd-opt-icon { grid-column: 1; grid-row: 1; width: 28px; height: 28px; margin: 0; }
  .fnd-opt-name { grid-column: 2; grid-row: 1; font-size: 14px; margin-bottom: 0; }
  .fnd-opt-count,
  .fnd-opt-badge { grid-column: 3; grid-row: 1; justify-self: end; }
  .fnd-opt-desc { grid-column: 2 / -1; grid-row: 2; margin: 3px 0 0; }

  .fnd-res-title { font-size: 20px; }
  .fnd-res-path { white-space: normal; }

  /* karty urządzeń poziome: zdjęcie obok treści (artboard 1b) */
  .fnd-devs { grid-template-columns: 1fr; }
  .fnd-dev { flex-direction: row; flex-wrap: wrap; gap: 14px; padding: 16px; }
  .fnd-dev-shot {
    flex: 0 0 92px; width: 92px; height: 92px;
    border: 1px solid var(--pt-ink-100); border-bottom: 1px solid var(--pt-ink-100);
  }
  .fnd-dev-shot img { padding: 6px; }
  .fnd-dev-body { flex: 1; min-width: 0; padding: 0; }
  .fnd-dev-name { font-size: 16px; }
  .fnd-dev-tagline { font-size: 12.5px; margin-bottom: 10px; }
  .fnd-dev-chips { margin-bottom: 0; }
  .fnd-dev-spec { flex: 1 0 100%; margin: 0 -16px; }
  .fnd-dev-cta { flex: 1 0 100%; padding: 0; }

  .fnd-help-inner { padding: 28px 16px; }
  .fnd-help h2 { font-size: 20px; }
}

/* ─────────── pasek porównania wariantów (A/B) ─────────── */
/* Widoczny tylko w wariancie testowym — nie jest częścią docelowego interfejsu. */
.fnd-ab { background: var(--pt-ink-1000); color: #fff; }
.fnd-ab-inner {
  max-width: 1440px; margin: 0 auto; padding: 9px 72px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.fnd-ab-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
}
.fnd-ab-opt {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.7);
  padding: 4px 10px; border: 1px solid rgba(255,255,255,.25); text-decoration: none;
}
a.fnd-ab-opt:hover { color: #fff; border-color: rgba(255,255,255,.6); }
.fnd-ab-opt.is-active { background: var(--pt-blue-400); border-color: var(--pt-blue-400); color: #fff; }
@media (max-width: 900px) { .fnd-ab-inner { padding: 8px 16px; gap: 8px; } }