/* Sprawdź sklep - kierunek "Pod lupą".
   Tokeny i skala typograficzna pochodzą z design-tokens.css z pakietu
   wdrożeniowego; dołożone są komponenty, których ten plik nie obejmował
   (nawigacja, kroki, pasmo CTA, stopka, raport sklepu).
   Zero JavaScriptu - człowiek, który właśnie stracił pieniądze, często
   otwiera to na telefonie w słabym zasięgu. */

:root {
  --ss-navy: #152A3A;
  --ss-navy-jasny: #213E50;
  --ss-petrol: #146C74;
  --ss-ice: #EDF3F7;
  --ss-white: #FFFFFF;
  --ss-warning: #F1B544;
  --ss-risk: #B83232;
  --ss-muted: #526779;
  --ss-line: #B8CAD5;

  --ss-heading: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --ss-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --ss-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  --ss-radius: 8px;
  --ss-container: 1200px;
  --ss-gutter: 20px;

  --ss-h1-size: 36px; --ss-h1-line: 41px;
  --ss-h2-size: 28px; --ss-h2-line: 34px;
  --ss-h3-size: 23px; --ss-h3-line: 30px;
  --ss-h4-size: 20px; --ss-h4-line: 27px;
  --ss-lead-size: 18px; --ss-lead-line: 27px;
  --ss-body-size: 17px; --ss-body-line: 26px;
  --ss-small-size: 16px; --ss-small-line: 24px;
  --ss-meta-size: 14px; --ss-meta-line: 20px;
  --ss-menu-size: 18px; --ss-menu-line: 27px;
  --ss-input-size: 16px; --ss-input-line: 24px;
  --ss-domain-size: 18px; --ss-domain-line: 26px;
}

@media (min-width: 768px) {
  :root {
    --ss-h1-size: 48px; --ss-h1-line: 54px;
    --ss-h2-size: 34px; --ss-h2-line: 40px;
    --ss-h3-size: 26px; --ss-h3-line: 33px;
    --ss-h4-size: 22px; --ss-h4-line: 29px;
    --ss-lead-size: 20px; --ss-lead-line: 29px;
    --ss-body-size: 18px; --ss-body-line: 28px;
    --ss-menu-size: 16px; --ss-menu-line: 24px;
    --ss-input-size: 18px; --ss-input-line: 26px;
    --ss-domain-size: 22px; --ss-domain-line: 30px;
  }
}

@media (min-width: 1200px) {
  :root {
    --ss-h1-size: 64px; --ss-h1-line: 68px;
    --ss-h2-size: 40px; --ss-h2-line: 46px;
    --ss-h3-size: 28px; --ss-h3-line: 35px;
    --ss-lead-size: 22px; --ss-lead-line: 32px;
    --ss-domain-size: 24px; --ss-domain-line: 32px;
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ss-ice);
  color: var(--ss-navy);
  font-family: var(--ss-body);
  font-size: var(--ss-body-size);
  line-height: var(--ss-body-line);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }

h1 { font-family: var(--ss-heading); font-size: var(--ss-h1-size); line-height: var(--ss-h1-line); font-weight: 700; letter-spacing: -.03em; }
h2 { font-family: var(--ss-heading); font-size: var(--ss-h2-size); line-height: var(--ss-h2-line); font-weight: 700; letter-spacing: -.03em; }
h3 { font-family: var(--ss-heading); font-size: var(--ss-h3-size); line-height: var(--ss-h3-line); font-weight: 600; letter-spacing: -.02em; }
h4 { font-family: var(--ss-heading); font-size: var(--ss-h4-size); line-height: var(--ss-h4-line); font-weight: 600; letter-spacing: -.02em; }

a { color: inherit; }
.ss-link { color: var(--ss-petrol); text-decoration: underline; text-underline-offset: 4px; font-weight: 600; }

/* Fokus musi byc widoczny. Nigdy outline:none bez zamiennika. */
:where(a, button, input, select, textarea, summary, details):focus-visible {
  outline: 3px solid var(--ss-petrol);
  outline-offset: 3px;
  border-radius: 2px;
}

.ss-container { width: min(calc(100% - var(--ss-gutter) * 2), var(--ss-container)); margin-inline: auto; }
.ss-section { padding-block: 48px; }
.ss-prose { max-width: 68ch; }
.ss-prose p + p { margin-top: 16px; }
.ss-lead { font-size: var(--ss-lead-size); line-height: var(--ss-lead-line); font-weight: 400; color: var(--ss-muted); }
.ss-meta { font-size: var(--ss-meta-size); line-height: var(--ss-meta-line); color: var(--ss-muted); }
.ss-small { font-size: var(--ss-small-size); line-height: var(--ss-small-line); }
.ss-muted { color: var(--ss-muted); }
.ss-accent { color: var(--ss-petrol); }
.ss-domain { font-family: var(--ss-mono); font-size: var(--ss-domain-size); line-height: var(--ss-domain-line); font-weight: 500; overflow-wrap: anywhere; }
.ss-eyebrow { font: 600 12px/18px var(--ss-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ss-petrol); margin-bottom: 12px; }

@media (min-width: 768px) {
  :root { --ss-gutter: 32px; }
  .ss-section { padding-block: 64px; }
  .ss-eyebrow { margin-bottom: 16px; }
}
@media (min-width: 1200px) {
  .ss-section { padding-block: 96px; }
}

/* ----------------------------------------------------------- nawigacja */
.ss-nav {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px;
  padding-block: 20px;
}
.ss-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ss-navy); }
.ss-logo-tekst { font-family: var(--ss-heading); font-weight: 700; font-size: 22px; letter-spacing: -.02em; }
.ss-nav-lista { display: flex; flex-wrap: wrap; gap: 8px 28px; list-style: none; margin: 0; padding: 0; margin-inline-start: auto; }
.ss-nav-lista a { font-size: var(--ss-menu-size); line-height: var(--ss-menu-line); font-weight: 600; text-decoration: none; color: var(--ss-navy); }
.ss-nav-lista a:hover { color: var(--ss-petrol); }
.ss-nav-lista a[aria-current="page"] { color: var(--ss-petrol); text-decoration: underline; text-underline-offset: 6px; }

/* --------------------------------------------- hamburger (bez javascriptu)
   Stan menu trzyma pole wyboru schowane przed okiem. Zostaje przezroczyste,
   a nie `hidden`, zeby dalo sie je zlapac tabulatorem - obrys ogniskowej
   rysujemy wtedy na etykiecie, bo samego pola nie widac. */
.ss-menu-stan { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.ss-menu-przycisk {
  display: inline-flex; align-items: center; gap: 10px;
  margin-inline-start: auto; padding: 10px 14px; min-height: 48px;
  border: 1px solid var(--ss-line); border-radius: var(--ss-radius);
  font-weight: 600; font-size: 16px; color: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ss-menu-stan:focus-visible + .ss-menu-przycisk { outline: 3px solid var(--ss-petrol); outline-offset: 2px; }
.ss-burger { display: block; width: 20px; height: 14px; position: relative; }
.ss-burger i {
  position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform .18s, opacity .18s;
}
.ss-burger i:nth-child(1) { top: 0; }
.ss-burger i:nth-child(2) { top: 6px; }
.ss-burger i:nth-child(3) { top: 12px; }
/* Otwarte menu: trzy kreski skladaja sie w krzyzyk, zeby bylo widac,
   ze ten sam przycisk zamyka. */
.ss-menu-stan:checked + .ss-menu-przycisk .ss-burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ss-menu-stan:checked + .ss-menu-przycisk .ss-burger i:nth-child(2) { opacity: 0; }
.ss-menu-stan:checked + .ss-menu-przycisk .ss-burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.ss-menu-panel { display: none; flex-basis: 100%; padding-bottom: 8px; }
.ss-menu-stan:checked ~ .ss-menu-panel { display: block; }
.ss-menu-panel .ss-nav-lista { flex-direction: column; gap: 0; margin-inline-start: 0; }
.ss-menu-panel .ss-nav-lista li { border-top: 1px solid var(--ss-line); }
.ss-menu-panel .ss-nav-lista a { display: block; padding: 14px 2px; }
.ss-menu-panel .ss-button { width: 100%; margin-top: 14px; }

@media (min-width: 900px) {
  /* Szeroki ekran: hamburger znika, pozycje wracaja do jednego rzedu. */
  .ss-menu-przycisk { display: none; }
  .ss-menu-panel {
    display: flex; align-items: center; gap: 12px 28px;
    flex-basis: auto; margin-inline-start: auto; padding-bottom: 0;
  }
  .ss-menu-panel .ss-nav-lista { flex-direction: row; gap: 8px 28px; }
  .ss-menu-panel .ss-nav-lista li { border-top: 0; }
  .ss-menu-panel .ss-nav-lista a { display: inline; padding: 0; }
  .ss-menu-panel .ss-button { width: auto; margin-top: 0; }
}

/* --------------------------------------------------------- przyciski */
.ss-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px;
  font-family: var(--ss-body); font-size: 16px; line-height: 24px; font-weight: 600;
  border: 1px solid var(--ss-navy); border-radius: var(--ss-radius);
  background: var(--ss-navy); color: var(--ss-white);
  text-decoration: none; cursor: pointer;
}
.ss-button:hover { background: var(--ss-navy-jasny); border-color: var(--ss-navy-jasny); }
.ss-button--outline { background: transparent; color: var(--ss-navy); }
.ss-button--outline:hover { background: #DEE8EE; border-color: var(--ss-navy); }
.ss-button--jasny { background: transparent; color: var(--ss-white); border-color: rgba(255,255,255,.55); }
.ss-button--jasny:hover { background: rgba(255,255,255,.12); border-color: var(--ss-white); }
.ss-button:disabled { opacity: .5; cursor: not-allowed; }

/* ------------------------------------------------------------- hero */
.ss-hero { position: relative; background: var(--ss-ice); padding-block: 48px; overflow: hidden; }
/* Wszystko, co jest trescia hero, musi stac NAD dekoracyjnym tlem.
   Bez tego napisy spoza .ss-hero-copy znikaly pod obrazkiem na desktopie. */
.ss-hero > .ss-container { position: relative; z-index: 1; }
.ss-hero-copy { max-width: 600px; }
.ss-hero h1 span { color: var(--ss-petrol); }
.ss-hero-uwaga { margin-top: 16px; font-size: var(--ss-meta-size); color: var(--ss-muted); }

.ss-search { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.ss-search-pole { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-width: 0; }
.ss-label { font-size: var(--ss-meta-size); line-height: var(--ss-meta-line); font-weight: 600; }
.ss-input {
  width: 100%; min-width: 0; min-height: 52px; padding: 12px 16px;
  font-family: var(--ss-body); font-size: var(--ss-input-size); line-height: var(--ss-input-line);
  background: var(--ss-white); border: 1px solid var(--ss-muted);
  border-radius: var(--ss-radius); color: var(--ss-navy);
}
.ss-input::placeholder { color: var(--ss-muted); opacity: 1; }
.ss-input:disabled { background: #F4F7F9; }

@media (min-width: 768px) {
  .ss-hero { padding-block: 64px; }
  .ss-search { flex-direction: row; align-items: flex-end; margin-top: 32px; }
  .ss-search .ss-button { flex-shrink: 0; min-height: 52px; }
}
@media (min-width: 1200px) {
  .ss-hero { padding-block: 88px; }
  .ss-hero::after {
    content: ""; position: absolute; inset: 0 0 0 46%;
    background-image: image-set(url('assets/hero-1862.webp') type('image/webp'), url('assets/hero-1862.jpg') type('image/jpeg'));
    background-image: -webkit-image-set(url('assets/hero-1862.webp') type('image/webp'), url('assets/hero-1862.jpg') type('image/jpeg'));
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%);
    mask-image: linear-gradient(to right, transparent 0, #000 12%);
  }
  .ss-hero-copy { max-width: 48%; }
}

/* Zdjecie w hero na telefonie i tablecie.
   Do 1199 px hero nie mial ZADNEGO obrazu - sama plaska plama lodowego tla.
   Od 1200 px zdjecie wchodzi jako tlo z prawej (::after nizej).

   Na waskim ekranie zdjecie jest TLEM CALEGO HERO, a haslo lezy na nim -
   tak samo jak na szerokim, tylko obrocone o cwierc obrotu: tam tekst jest
   po lewej, a zdjecie po prawej, tutaj tekst jest u gory, a zdjecie pod nim.
   Osobny kafel pod tekstem wygladal jak doklejony obrazek, a nie jak hero.

   Czytelnosc: nad zdjeciem lezy zasnuwka w kolorze tla, mocna tam, gdzie
   stoi tekst, i schodzaca do zera nizej - inaczej granatowe litery siadaja
   na jasnych kartkach ze zdjecia i robi sie kasza. Zadnej litery nie ma
   ponizej 62% wysokosci hero, wiec dol zostaje czystym zdjeciem.

   Dlaczego tlo, a nie <img>: obraz podany w regule wewnatrz zapytania
   medialnego NIE jest pobierany, gdy zapytanie nie pasuje - czyli szeroki
   ekran nie sciaga go po raz drugi. */
@media (max-width: 1199px) {
  /* Na grafice ma lezec SAMO HASLO. Lead, wyszukiwarka i przypis ida pod
     spod, na plaskie tlo - inaczej drobny tekst siada na kartkach ze zdjecia
     i cala sekcja wyglada na sklejona z przypadkowych kawalkow.
     Stad zdjecie jest tlem naglowka, a nie calej sekcji. */
  .ss-hero { padding-block: 32px 0; }

  /* Kolumna tekstu ma 600 px, ale pasmo ze zdjeciem ma isc przez caly ekran -
     wiec ograniczenie szerokosci schodzi z kolumny na sam tekst. Bez tego
     pasmo koncilo sie w polowie tabletu i wygladalo jak ucieta naklejka. */
  .ss-hero-copy { max-width: none; }
  .ss-hero-naglowek > *, .ss-hero-reszta { max-width: 600px; }

  .ss-hero-naglowek {
    /* Pasmo idzie przez cala szerokosc ekranu, wiec wychodzi poza kontener
       o dokladnie tyle, ile wynosi jego odstep boczny - obie wartosci biora
       sie z tej samej zmiennej i nie moga sie rozjechac. */
    margin-inline: calc(var(--ss-gutter) * -1);
    padding: 20px var(--ss-gutter) 200px;
    background-image:
      linear-gradient(180deg,
        rgba(237,243,247,.97) 0%,
        rgba(237,243,247,.93) 34%,
        rgba(237,243,247,.55) 56%,
        rgba(237,243,247,.12) 80%,
        rgba(237,243,247,0) 100%),
      image-set(url('assets/hero-1400.webp') type('image/webp'), url('assets/hero-1400.jpg') type('image/jpeg'));
    background-image:
      linear-gradient(180deg,
        rgba(237,243,247,.97) 0%,
        rgba(237,243,247,.93) 34%,
        rgba(237,243,247,.55) 56%,
        rgba(237,243,247,.12) 80%,
        rgba(237,243,247,0) 100%),
      -webkit-image-set(url('assets/hero-1400.webp') type('image/webp'), url('assets/hero-1400.jpg') type('image/jpeg'));
    /* WYSOKOSC, nie "cover". Zdjecie jest szerokim pasem 1400x635 - "cover"
       na wysokim ekranie telefonu powieksza je trzykrotnie i z calej sceny
       zostaje kawalek pustej kartki. Kadr przesuniety w prawo lapie to,
       o co w tym zdjeciu chodzi: regulamin, paczke i potwierdzenie nadania. */
    background-size: cover, auto 300px;
    background-position: center, 58% bottom;
    background-repeat: no-repeat, no-repeat;
  }

  .ss-hero-reszta { padding-block: 24px 40px; }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .ss-hero { padding-block: 44px 0; }
  .ss-hero-naglowek {
    padding-bottom: 300px;
    background-size: cover, auto 420px;
  }
  .ss-hero-reszta { padding-block: 32px 56px; }
}

/* ------------------------------------------------------------ kroki */
.ss-kroki { display: grid; gap: 24px; border-top: 1px solid var(--ss-line); padding-top: 32px; }
.ss-krok { display: flex; gap: 16px; align-items: baseline; }
.ss-krok b { font-family: var(--ss-heading); font-size: 28px; font-weight: 700; color: var(--ss-navy); letter-spacing: -.02em; }
/* Naglowek kroku jest znacznikiem h2 (kolejnosc poziomow dla czytnika
   ekranu), ale ma wygladac jak h3 - stad jawna grubosc i swiatlo. */
.ss-krok h3, .ss-krok-tytul { font-size: var(--ss-h4-size); line-height: var(--ss-h4-line); font-weight: 600; letter-spacing: -.02em; }
.ss-krok p { margin-top: 8px; font-size: var(--ss-small-size); line-height: var(--ss-small-line); color: var(--ss-muted); }
@media (min-width: 768px) {
  .ss-kroki { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .ss-krok + .ss-krok { border-left: 1px solid var(--ss-line); padding-left: 32px; }
}

/* ------------------------------------------------------------ karty */
.ss-card { padding: 24px; border: 1px solid var(--ss-line); border-radius: var(--ss-radius); background: var(--ss-white); }
/* ---------------------------------------------- kafle sprawdzonych sklepow
   Wczesniej byl to pasek przez cala szerokosc: plakietka, domena, wynik
   i 900 pikseli pustki obok. Teraz kazdy sklep ma kafel ze zrzutem swojej
   strony - czytelnik przychodzi po zobaczeniu reklamy i rozpoznaje WYGLAD,
   a nie domene. */
.ss-lista-sklepow {
  display: grid; gap: 20px; margin-top: 28px; list-style: none; padding: 0;
  grid-template-columns: 1fr;
}
@media (min-width: 680px) { .ss-lista-sklepow { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ss-lista-sklepow { grid-template-columns: repeat(3, 1fr); } }

.ss-sklep {
  display: flex; flex-direction: column; height: 100%;
  background: var(--ss-white); border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius); overflow: hidden;
  text-decoration: none; color: var(--ss-navy);
  transition: border-color .15s, transform .15s;
}
.ss-sklep:hover { border-color: var(--ss-petrol); transform: translateY(-2px); }

/* Zrzut strony sklepu. Sciete 16:9 z gory, bo w tym kadrze siedzi logo
   i glowna grafika - czyli to, po czym sklep sie rozpoznaje. */
.ss-sklep-zrzut { display: block; aspect-ratio: 16 / 9; background: var(--ss-ice); overflow: hidden; }
.ss-sklep-zrzut img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.ss-sklep-zrzut--brak {
  background: repeating-linear-gradient(135deg, var(--ss-ice) 0 12px, #E4EDF3 12px 24px);
}

.ss-sklep-tresc { display: block; padding: 16px 18px 12px; min-width: 0; flex: 1 1 auto; }
/* Na kaflu adres tez ma sie nie lamac miedzy literami - "byjefferso" w jednej
   linii i "n.com" w drugiej przestaje byc adresem. `break-word` lamie dopiero
   wtedy, gdy nie ma innego wyjscia. */
.ss-sklep .ss-domain { display: block; margin: 10px 0 6px; font-size: 19px; line-height: 26px; overflow-wrap: break-word; }
.ss-sklep .ss-meta { display: block; }

/* Znacznik pasma ryzyka: wypelniony kolorem, nie obrys z szara ikona.
   Obrys na bialym tle czytal sie jak ozdobnik, a nie jak ocena. */
.ss-znacznik {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; line-height: 18px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ss-white); background: var(--ss-risk);
}
.ss-znacznik--high { background: #C2410C; }
.ss-znacznik--elevated { background: #8A6100; }
.ss-znacznik--low { background: var(--ss-petrol); }
.ss-znacznik svg { flex: 0 0 auto; }

/* Wynik na dole kafla, na pasku w kolorze pasma - zeby przy przegladaniu
   listy dalo sie porownac sklepy jednym spojrzeniem. */
.ss-sklep-wynik {
  display: flex; align-items: baseline; gap: 6px;
  padding: 12px 18px; border-top: 1px solid var(--ss-line);
  background: #FCECEC;
}
.ss-sklep--high .ss-sklep-wynik { background: #FFF0E6; }
.ss-sklep--elevated .ss-sklep-wynik { background: #FFF4DA; }
.ss-sklep--low .ss-sklep-wynik { background: #E4F2F1; }
.ss-sklep-wynik b { font-family: var(--ss-heading); font-size: 26px; line-height: 1; font-weight: 700; }
.ss-sklep-wynik small { font-size: 14px; color: var(--ss-muted); }
.ss-sklep-wynik span { margin-left: auto; font-size: var(--ss-meta-size); color: var(--ss-muted); }

/* ramka z naroznikami - motyw przewodni marki */
.ss-kadr-blok { position: relative; padding: 14px; }
.ss-kadr { position: absolute; inset: 0; pointer-events: none; }
.ss-kadr i { position: absolute; width: 28px; height: 28px; border: 3px solid var(--ss-petrol); }
.ss-kadr i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.ss-kadr i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.ss-kadr i:nth-child(3) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.ss-kadr i:nth-child(4) { bottom: 0; left: 0; border-right: 0; border-top: 0; }

/* --------------------------------------------------------- obszary */
.ss-obszary { display: grid; gap: 28px; margin-top: 28px; }
.ss-obszar h3 { margin-top: 14px; }
.ss-obszar p.ss-podtytul { margin-top: 4px; font-size: var(--ss-small-size); font-weight: 600; }
.ss-obszar p.ss-opis { margin-top: 10px; font-size: var(--ss-small-size); line-height: var(--ss-small-line); color: var(--ss-muted); }
/* Ikona bierze kolor OTOCZENIA, a nie swoj wlasny.
   Rysunki uzywaja stroke="currentColor", ale ta regula ustawiala kolor
   na samym SVG, wiec dziedziczenie sie urywalo: na czerwonym znaczniku
   "BARDZO WYSOKIE RYZYKO" trojkat ostrzegawczy wychodzil granatowy.
   `inherit` jest tu wlasciwa wartoscia - ikona ma wygladac jak napis,
   przy ktorym stoi, w kazdym miejscu serwisu. */
.ss-ikona { color: inherit; }
@media (min-width: 768px) {
  .ss-obszary { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .ss-obszar + .ss-obszar { border-left: 1px solid var(--ss-line); padding-left: 32px; }
}

/* --------------------------------------------------------- statusy */
.ss-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 4px; border: 1px solid currentColor;
  font-size: 14px; line-height: 20px; font-weight: 600;
}
.ss-status--pending { color: var(--ss-navy); background: var(--ss-ice); }
.ss-status--warning { color: #714800; background: #FFF4DA; }
.ss-status--risk { color: #922727; background: #FCECEC; }
.ss-status svg { flex: 0 0 auto; }

/* ------------------------------------------------------ pasmo CTA */
.ss-pasmo { background: var(--ss-navy); color: var(--ss-white); }
.ss-pasmo-tresc { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; padding-block: 36px; }
.ss-pasmo h2 { flex: 0 1 auto; }
.ss-pasmo p { flex: 1 1 240px; color: rgba(255,255,255,.82); font-size: var(--ss-small-size); }
@media (min-width: 768px) {
  .ss-pasmo h2 { border-right: 1px solid rgba(255,255,255,.28); padding-right: 32px; }
  .ss-pasmo-tresc { padding-block: 44px; }
}

/* ---------------------------------------------------------- stopka */
.ss-stopka { background: var(--ss-white); border-top: 1px solid var(--ss-line); }
.ss-stopka-gora { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: flex-start; padding-block: 32px; }
.ss-stopka-gora .ss-logo-tekst { font-size: 19px; }
.ss-stopka-haslo { font-size: var(--ss-meta-size); color: var(--ss-muted); margin-top: 2px; }
.ss-stopka-linki { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 0; padding: 0; margin-inline-start: auto; font-size: var(--ss-small-size); }
.ss-zastrzezenie { border-top: 1px solid var(--ss-line); padding-block: 20px; font-size: var(--ss-meta-size); line-height: var(--ss-meta-line); color: var(--ss-muted); }

/* -------------------------------------------------------- formularze */
.ss-form { display: grid; gap: 20px; max-width: 640px; margin-top: 24px; }
.ss-form label { display: grid; gap: 8px; font-size: var(--ss-meta-size); line-height: var(--ss-meta-line); font-weight: 600; }
.ss-form textarea, .ss-form select {
  width: 100%; padding: 12px 16px; min-height: 52px;
  font-family: var(--ss-body); font-size: var(--ss-input-size); line-height: var(--ss-input-line); font-weight: 400;
  background: var(--ss-white); border: 1px solid var(--ss-muted); border-radius: var(--ss-radius); color: var(--ss-navy);
}
.ss-form textarea { resize: vertical; }
.ss-form .ss-button { justify-self: start; }
.ss-opcjonalne { font-weight: 400; color: var(--ss-muted); }
.ss-pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------ pomoc */
.ss-krok-karta { margin-top: 12px; }
.ss-krok-karta h3 { margin-bottom: 8px; }
.ss-instytucje { display: grid; gap: 10px; list-style: none; margin: 16px 0 0; padding: 0; }
/* Wpis instytucji moze miec zdanie wyjasniajace, po co tam isc - samo
   "UOKiK" nie mowi czlowiekowi, ktory wlasnie stracil pieniadze, czy to
   jest miejsce dla NIEGO. Stad ramka wokol calego wpisu, a nie samego
   odsylacza. */
.ss-instytucje li { padding: 14px 16px; background: var(--ss-white); border: 1px solid var(--ss-line); border-radius: var(--ss-radius); }
.ss-instytucje li:hover { border-color: var(--ss-petrol); }
.ss-instytucje a { display: block; text-decoration: none; }
.ss-instytucje a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ss-instytucje .ss-meta { margin-top: 6px; }
.ss-wzor { white-space: pre-wrap; font-family: var(--ss-mono); font-size: 15px; line-height: 24px; margin: 0; }

@media print { .ss-nav, .ss-pasmo, .ss-form { display: none; } }

/* Kontakt w stopce. Adres jest rozbity celowo - patrz komentarz w szablonie. */
.ss-stopka-kontakt { margin-top: 20px; font-size: var(--ss-small-size); }
.ss-stopka-kontakt strong { font-weight: 600; }
.ss-stopka-kontakt .ss-meta { display: block; margin-top: 4px; }
/* Odstepy wokol "(małpa)" rysujemy stylem, zeby po skopiowaniu tekstu
   czlowiek dostal czytelna calosc, a nie sklejone slowa. */
/* Doklejka w adresie kontaktowym: "display: none" znaczy, ze przegladarka
   nie kopiuje jej z zaznaczeniem i czytnik ekranu jej nie czyta. Sama
   przezroczystosc albo wyniesienie za ekran tego NIE daja. */
.ss-doklejka { display: none; }

/* ------------------------------------------------------------ wzory pism
   Cztery pisma naraz to sciana tekstu, a czytelnik potrzebuje jednego -
   tego, ktory pasuje do jego sytuacji. Stad <details>: dziala bez javascriptu,
   a tresc pozostaje w HTML, wiec da sie ja znalezc wyszukiwaniem na stronie
   i wydrukowac. */
.ss-wzor-blok {
  background: var(--ss-white);
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius);
  margin-top: 12px;
}
.ss-wzor-blok > summary {
  cursor: pointer;
  padding: 16px 20px;
  font-weight: 600;
  font-size: var(--ss-small-size);
  line-height: var(--ss-small-line);
  list-style-position: inside;
}
.ss-wzor-blok > summary:hover { color: var(--ss-petrol); }
.ss-wzor-blok[open] > summary { border-bottom: 1px solid var(--ss-line); }
.ss-wzor-tresc { padding: 16px 20px 20px; }
.ss-wzor-tresc .ss-meta { max-width: 68ch; }

/* Pismo idzie do przepisania albo skopiowania, wiec tlo ma je oddzielic
   od objasnienia nad nim. Na waskim ekranie dluga linia moze wyjechac
   poza karte - stad wlasny suwak poziomy TYLKO na tym bloku, zamiast
   poziomego suwaka na calej stronie. */
.ss-wzor-tresc .ss-wzor {
  margin-top: 14px;
  padding: 16px;
  background: var(--ss-ice);
  border-radius: var(--ss-radius);
  overflow-x: auto;
}
.ss-wzor-tresc .ss-wzor + .ss-meta { margin-top: 14px; }

@media print {
  /* Na wydruku nie ma jak nic rozwinac - wszystkie pisma maja byc widoczne. */
  .ss-wzor-blok > summary { display: none; }
  .ss-wzor-tresc { display: block !important; }
}