/* Karta audytu sklepu - według materialy/karta-audytu01.png i 02.png.
   Dokłada do styl.css: ciemną nawigację, okruszki, wskaźnik punktów,
   zwijane ustalenia, boczną kolumnę z podsumowaniem, tabelę źródeł
   i formularze w treści raportu. */

/* ------------------------------------------------- ciemna nawigacja raportu */
.ss-nav--ciemna { background: var(--ss-navy); }
.ss-nav--ciemna .ss-nav { padding-block: 16px; }
.ss-nav--ciemna .ss-logo,
.ss-nav--ciemna .ss-nav-lista a { color: var(--ss-white); }
.ss-nav--ciemna .ss-nav-lista a:hover { color: #9FD4D9; }
.ss-nav--ciemna .ss-nav-lista a[aria-current="page"] { color: var(--ss-white); text-decoration: underline; text-underline-offset: 6px; }
/* Przycisk z obrysem jest granatowy - na granatowym pasmie znikal calkowicie.
   W ciemnej nawigacji obrys i napis musza byc biale. */
.ss-nav--ciemna .ss-button--outline { color: var(--ss-white); border-color: rgba(255,255,255,.55); }
.ss-nav--ciemna .ss-menu-przycisk { color: var(--ss-white); border-color: rgba(255,255,255,.4); }
.ss-nav--ciemna .ss-menu-panel .ss-nav-lista li { border-top-color: rgba(255,255,255,.18); }
.ss-nav--ciemna .ss-button--outline:hover { color: var(--ss-navy); background: var(--ss-white); border-color: var(--ss-white); }

.ss-okruszki { padding-block: 14px; font-size: var(--ss-meta-size); color: var(--ss-muted); }
.ss-okruszki ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.ss-okruszki li + li::before { content: "›"; margin-right: 6px; color: var(--ss-line); }
.ss-okruszki a { text-decoration: none; }
.ss-okruszki a:hover { text-decoration: underline; }
.ss-okruszki [aria-current="page"] { color: var(--ss-navy); font-weight: 600; }

/* ---------------------------------------------------------- głowka raportu */
.ss-glowka { display: grid; gap: 28px; padding: 0 0 28px; overflow: hidden; }
.ss-glowka > * { min-width: 0; }
.ss-glowka-lewa, .ss-glowka-prawa { padding-inline: 28px; }
@media (min-width: 900px) {
  /* "start", nie domyslne "stretch": bez tego nizsza kolumna rozciaga sie na
     wysokosc wyzszej i jej tresc lapie sie na srodku, zostawiajac wielka biala
     dziure pod pasmem alarmu. */
  .ss-glowka { grid-template-columns: 1.35fr 1fr; gap: 40px; align-items: start; }
  /* Pasmo alarmu ma isc przez cala szerokosc karty, nad obiema kolumnami. */
  .ss-glowka > .ss-alarm { grid-column: 1 / -1; }
  .ss-glowka-lewa { padding-inline: 28px 0; }
  .ss-glowka-prawa { padding-inline: 0 28px; }
}

/* ---------------------------------------------------------- pasmo alarmu */
.ss-alarm {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 28px; color: var(--ss-white); background: var(--ss-risk);
}
/* Pas ostrzegawczy na gornej krawedzi - ten sam jezyk co tasma na budowie.
   Czysta dekoracja, znaczenie niosa ikona i slowo obok. */
.ss-alarm::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: repeating-linear-gradient(135deg, rgba(0,0,0,.28) 0 10px, transparent 10px 20px);
}
.ss-alarm { position: relative; }
.ss-alarm--high { background: #C2410C; }
.ss-alarm--elevated { background: #8A6100; }
.ss-alarm--low { background: var(--ss-petrol); }
.ss-alarm-ikona {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35);
}
.ss-alarm-tresc { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.ss-alarm-tresc strong {
  font-family: var(--ss-heading); font-size: 24px; line-height: 1.1;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.ss-alarm-tresc span { font-size: var(--ss-small-size); line-height: var(--ss-small-line); }
/* Po prawej stronie pasma stoi DATA, a nie powtorzony wynik. Wynik jest
   w kolowym wskazniku dwiescie pikseli nizej - dwa razy "82/100" na jednym
   ekranie czyta sie jak blad, a data mowi cos, czego nigdzie indziej nie ma
   w tym miejscu: kiedy to sprawdzenie w ogole mialo miejsce. */
.ss-alarm-data {
  flex: 0 0 auto; text-align: right; font-size: 13px; line-height: 17px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  .ss-alarm { gap: 12px; padding: 16px 20px; flex-wrap: wrap; }
  .ss-alarm-tresc strong { font-size: 20px; }
  /* Data schodzi do wlasnego wiersza - ma sie wyrownac do tekstu obok ikony,
     a nie wisiec pod sama ikona. 46 px ikony + 12 px odstepu. */
  .ss-alarm-data { flex-basis: 100%; text-align: left; padding-left: 58px; }
  .ss-glowka-lewa, .ss-glowka-prawa { padding-inline: 20px; }
}

/* Nazwa sklepu w naglowku karty.
   Byla ustawiona na stalej skali naglowkow (do 64 px) i lamala sie w polowie
   slowa - "byjefferso" w jednej linii, "n.com" w drugiej. Adres przelamany
   miedzy literami przestaje byc adresem; czytelnik ma go rozpoznac jednym
   spojrzeniem, bo po to tu przyszedl.

   Rozmiar skaluje sie teraz z szerokoscia ekranu, wiec dlugie domeny same
   sie zmniejszaja zamiast zawijac. `break-word` zamiast `anywhere` sprawia,
   ze gdyby mimo wszystko zabraklo miejsca, lamanie jest ostatecznoscia,
   a nie pierwszym wyborem. */
.ss-glowka h1 {
  margin: 14px 0 12px;
  font-family: var(--ss-mono);
  font-weight: 500;
  font-size: clamp(24px, 5.6vw, 48px);
  line-height: 1.12;
  letter-spacing: -.02em;
  overflow-wrap: break-word;
  hyphens: none;
}
.ss-pasmo-ryzyka {
  display: inline-block; padding: 8px 16px; border-radius: 999px;
  font-weight: 700; font-size: var(--ss-small-size); letter-spacing: .02em;
}
.ss-pasmo-ryzyka--risk { background: #FCECEC; color: #922727; }
.ss-pasmo-ryzyka--high { background: #FFF0E6; color: #9A3412; }
.ss-pasmo-ryzyka--elevated { background: #FFF4DA; color: #714800; }
.ss-pasmo-ryzyka--low { background: #E4F2F1; color: #0F5359; }
.ss-glowka-meta { margin-top: 14px; font-size: var(--ss-small-size); }
.ss-glowka-meta span { display: block; }

.ss-glowka-lewa { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.ss-glowka-lewa > div:first-child { flex: 1 1 260px; min-width: 0; }
/* Rada schodzi do wlasnego wiersza pod tytulem i wskaznikiem. Stoi w lewej
   kolumnie, bo prawa (ocena zewnetrzna plus zrzut) jest i tak wyzsza -
   inaczej pod nazwa sklepu zostawala pusta polowa karty. */
.ss-glowka-lewa > .ss-rekomendacja { flex: 1 1 100%; }

/* wskaźnik punktów - rysowany SVG, bez wykresu z biblioteki */
.ss-wskaznik { flex: 0 0 auto; position: relative; width: 160px; height: 160px; }
.ss-wskaznik svg { transform: rotate(-90deg); display: block; }
.ss-wskaznik-tresc {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
}
.ss-wskaznik-liczba { font-family: var(--ss-heading); font-size: 42px; line-height: 1; font-weight: 700; }
.ss-wskaznik-liczba small { font-family: var(--ss-body); font-size: 17px; font-weight: 400; color: var(--ss-muted); }
.ss-wskaznik-opis { font-size: 13px; color: var(--ss-muted); margin-top: 4px; }

/* prawa kolumna główki: ocena zewnętrzna i rekomendacja */
/* Na telefonie zdjecie sklepu wskakuje NAD ocene i porade. Czytelnik przyszedl
   z reklamy i rozpoznaje sklep po wygladzie, nie po domenie - a bez tego zrzut
   ladowal na samym koncu glowki, kilka przewiniec nizej. */
.ss-glowka-prawa { display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 899px) { .ss-glowka-prawa .ss-widok-sklepu { order: -1; margin-top: 0; } }

.ss-ocena-zew { display: grid; gap: 4px; }
.ss-gwiazdki { display: inline-flex; gap: 2px; }
.ss-ocena-liczba { font-family: var(--ss-heading); font-size: 22px; font-weight: 700; }
.ss-ocena-liczba small { font-family: var(--ss-body); font-size: 15px; font-weight: 400; color: var(--ss-muted); }

.ss-rekomendacja {
  display: flex; gap: 12px; padding: 16px 18px;
  background: #FCECEC; border: 1px solid #F3D3D3; border-radius: var(--ss-radius);
}
.ss-rekomendacja--high { background: #FFF0E6; border-color: #F6DCC8; }
.ss-rekomendacja--elevated { background: #FFF4DA; border-color: #F0E1BC; }
.ss-rekomendacja--low { background: #E4F2F1; border-color: #C9E3E2; }
.ss-rekomendacja h2 { font-family: var(--ss-heading); font-size: 18px; line-height: 25px; font-weight: 700; margin-bottom: 4px; letter-spacing: 0; }
.ss-rekomendacja p { font-size: var(--ss-small-size); line-height: var(--ss-small-line); }
.ss-rekomendacja svg { flex: 0 0 auto; color: var(--ss-risk); }

/* ------------------------------------------------------------- zakładki */
.ss-zakladki { border-bottom: 1px solid var(--ss-line); margin: 28px 0 24px; }
.ss-zakladki ul { display: flex; flex-wrap: wrap; gap: 4px 26px; list-style: none; margin: 0; padding: 0; }
.ss-zakladki a {
  display: inline-block; padding: 12px 2px; text-decoration: none;
  font-weight: 600; font-size: var(--ss-small-size); color: var(--ss-muted);
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.ss-zakladki a:hover { color: var(--ss-navy); }
/* Podkreslenie nalezy sie TYLKO pierwszej zakladce. Selektor "a:first-child"
   trafialby w kazdy odsylacz, bo kazdy jest pierwszym dzieckiem swojego li. */
.ss-zakladki li:first-child a { color: var(--ss-navy); border-bottom-color: var(--ss-navy); }

/* ------------------------------------------------------------- układ */
/* Kolumna siatki domyslnie nie kurczy sie ponizej szerokosci swojej
   najszerszej tresci - dlugi adres albo mono-naglowek rozpychal wtedy
   cala strone i na telefonie pojawial sie poziomy suwak. */
.ss-uklad { display: grid; gap: 24px; align-items: start; }
.ss-uklad > * { min-width: 0; }
@media (min-width: 1000px) { .ss-uklad { grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; } }

/* --------------------------------------------------------- kategorie */
.ss-kat { background: var(--ss-white); border: 1px solid var(--ss-line); border-radius: var(--ss-radius); padding: 22px; margin-bottom: 20px; }
.ss-kat-glowa { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ss-kat-glowa h2 { flex: 1 1 auto; font-size: var(--ss-h3-size); line-height: var(--ss-h3-line); font-weight: 700; letter-spacing: -.02em; }
.ss-kat-glowa svg { color: var(--ss-navy); flex: 0 0 auto; }
.ss-pkt-plakietka { flex: 0 0 auto; background: #FCECEC; color: #922727; font-weight: 700; font-size: 14px; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }

/* zwijane ustalenie - <details>, wiec dziala bez javascriptu */
.ss-ustal { border: 1px solid var(--ss-line); border-radius: var(--ss-radius); margin: 8px 0; background: var(--ss-white); }
.ss-ustal > summary {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  cursor: pointer; list-style: none; font-weight: 600; font-size: var(--ss-small-size);
}
.ss-ustal > summary::-webkit-details-marker { display: none; }
.ss-ustal > summary::after {
  content: ""; flex: 0 0 auto; margin-left: auto; width: 10px; height: 10px;
  border-right: 2px solid var(--ss-muted); border-bottom: 2px solid var(--ss-muted);
  transform: rotate(45deg); transition: transform .15s;
}
.ss-ustal[open] > summary::after { transform: rotate(-135deg); }
.ss-ustal[open] { border-color: var(--ss-navy); }
.ss-ustal-waga {
  flex: 0 0 auto; min-width: 36px; height: 30px; padding: 0 8px;
  background: #FCECEC; color: #922727; border-radius: 6px;
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
}
.ss-ustal-tytul { min-width: 0; }
.ss-ustal-tresc { padding: 0 14px 16px 64px; }
@media (max-width: 560px) { .ss-ustal-tresc { padding-left: 14px; } }
.ss-ustal-tresc > p { font-size: var(--ss-small-size); line-height: var(--ss-small-line); }
.ss-ustal-podstawa { margin-top: 10px; font-size: var(--ss-meta-size); color: var(--ss-muted); font-style: italic; }

.ss-skad { margin-top: 14px; background: var(--ss-ice); border-radius: var(--ss-radius); padding: 14px 16px; }
.ss-skad h4 { font-size: var(--ss-small-size); margin-bottom: 10px; }
.ss-skad-w { display: flex; gap: 14px; padding: 6px 0; font-size: var(--ss-small-size); }
.ss-skad-w > span { flex: 0 0 150px; color: var(--ss-muted); }
.ss-skad-w > div { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .ss-skad-w { flex-direction: column; gap: 2px; } .ss-skad-w > span { flex: none; } }

/* ------------------------------------------------------------- zrzuty */
.ss-zrzut { margin: 14px 0 0; }
.ss-zrzut img { max-width: 100%; height: auto; display: block; border: 1px solid var(--ss-line); border-radius: var(--ss-radius); }
.ss-zrzut figcaption { font-size: var(--ss-meta-size); color: var(--ss-muted); margin-top: 8px; }
.ss-zrzut-podglad { margin-top: 12px; }
.ss-zrzut-podglad > summary { cursor: pointer; font-size: var(--ss-meta-size); font-weight: 600; color: var(--ss-petrol); text-decoration: underline; text-underline-offset: 4px; }

/* miniatura strony sklepu w głowce */
.ss-widok-sklepu { margin: 0; }
.ss-widok-sklepu img { width: 100%; height: auto; display: block; border: 1px solid var(--ss-line); border-radius: var(--ss-radius); }
.ss-widok-sklepu figcaption { font-size: var(--ss-meta-size); color: var(--ss-muted); margin-top: 8px; }

/* ------------------------------------------------------ boczna kolumna */
.ss-bok { display: grid; gap: 16px; }
.ss-bok-karta { background: var(--ss-white); border: 1px solid var(--ss-line); border-radius: var(--ss-radius); padding: 20px; }
.ss-bok-karta h2 { font-size: var(--ss-h4-size); line-height: var(--ss-h4-line); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; letter-spacing: -.02em; }
.ss-bok-lista { list-style: none; margin: 0; padding: 0; }
.ss-bok-lista li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ss-line); font-size: var(--ss-small-size); }
.ss-bok-lista li:last-child { border-bottom: 0; }
/* Rosnie TYLKO nazwa kategorii. Plakietka z punktami trzyma szerokosc
   swojej tresci - przy "flex: 1 1 auto" rozciagala sie w prostokat. */
.ss-bok-lista .ss-bok-nazwa { flex: 1 1 auto; min-width: 0; }
.ss-bok-lista .ss-pkt-plakietka { flex: 0 0 auto; align-self: center; }
.ss-bok-uwaga { background: var(--ss-ice); border: 1px solid var(--ss-line); }
.ss-bok-uwaga p { font-size: var(--ss-meta-size); line-height: var(--ss-meta-line); color: var(--ss-muted); }

/* -------------------------------------------------------- adresy i źródła */
/* Kreska idzie MIEDZY wierszami, a nie pod kazdym. Wersja z border-bottom
   zostawiala wiszaca kreske, gdy po ostatnim wierszu szla jeszcze notka. */
.ss-wiersz { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; justify-content: space-between; padding: 16px 0; }
.ss-wiersz + .ss-wiersz { border-top: 1px solid var(--ss-line); }
.ss-wiersz-dane { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; font-size: var(--ss-small-size); min-width: 0; }
.ss-wiersz-dane dt { color: var(--ss-muted); }
.ss-wiersz-dane dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.ss-wiersz-akcje { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-maly-przycisk {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px; border: 1px solid var(--ss-line); border-radius: var(--ss-radius);
  background: var(--ss-white); font-size: var(--ss-meta-size); font-weight: 600;
  text-decoration: none; color: var(--ss-navy); white-space: nowrap; cursor: pointer;
}
.ss-maly-przycisk:hover { border-color: var(--ss-petrol); color: var(--ss-petrol); }

.ss-sv { flex: 1 1 100%; margin-top: 4px; }
.ss-sv > summary { cursor: pointer; font-size: var(--ss-meta-size); color: var(--ss-muted); font-weight: 600; }
.ss-sv iframe { width: 100%; height: 340px; border: 1px solid var(--ss-line); border-radius: var(--ss-radius); margin-top: 12px; display: block; }
@media (max-width: 560px) { .ss-sv iframe { height: 230px; } }

.ss-zrodlo-w { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; padding: 14px 0; }
.ss-zrodlo-w + .ss-zrodlo-w { border-top: 1px solid var(--ss-line); }
.ss-zrodlo-ikona { flex: 0 0 34px; height: 34px; display: grid; place-items: center; }
.ss-zrodlo-nazwa { flex: 1 1 200px; font-weight: 600; font-size: var(--ss-small-size); min-width: 0; }
.ss-zrodlo-opis { flex: 2 1 260px; font-size: var(--ss-small-size); color: var(--ss-muted); min-width: 0; }
.ss-zrodlo-opis b { display: block; color: var(--ss-navy); font-weight: 600; }
.ss-zrodlo-w > a { flex: 0 0 auto; margin-left: auto; }

.ss-notka { display: flex; gap: 10px; align-items: flex-start; background: var(--ss-ice); border-radius: var(--ss-radius); padding: 14px 16px; margin-top: 16px; font-size: var(--ss-meta-size); line-height: var(--ss-meta-line); color: var(--ss-muted); }
.ss-notka svg { flex: 0 0 auto; color: var(--ss-petrol); }
.ss-notka b { color: var(--ss-navy); }

/* ------------------------------------------------------------ pytania */
.ss-pyt { border: 1px solid var(--ss-line); border-radius: var(--ss-radius); margin: 8px 0; background: var(--ss-white); }
.ss-pyt > summary { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; font-weight: 600; font-size: var(--ss-small-size); }
.ss-pyt > summary::-webkit-details-marker { display: none; }
.ss-pyt > summary::after { content: ""; margin-left: auto; width: 10px; height: 10px; border-right: 2px solid var(--ss-muted); border-bottom: 2px solid var(--ss-muted); transform: rotate(45deg); transition: transform .15s; }
.ss-pyt[open] > summary::after { transform: rotate(-135deg); }
.ss-pyt p { padding: 0 16px 16px; font-size: var(--ss-small-size); line-height: var(--ss-small-line); }

/* --------------------------------------------- formularze w treści raportu */
.ss-form-raport { display: grid; gap: 16px; }
@media (min-width: 760px) { .ss-form-raport--dwie { grid-template-columns: 1fr 1fr; } .ss-form-raport--trzy { grid-template-columns: repeat(3, 1fr); } }
.ss-form-raport label { display: grid; gap: 6px; font-size: var(--ss-meta-size); font-weight: 600; }
.ss-form-raport input, .ss-form-raport textarea, .ss-form-raport select {
  width: 100%; padding: 11px 14px; min-height: 46px;
  font-family: var(--ss-body); font-size: var(--ss-small-size); font-weight: 400;
  background: var(--ss-white); border: 1px solid var(--ss-line); border-radius: var(--ss-radius); color: var(--ss-navy);
}
.ss-form-raport textarea { resize: vertical; min-height: 92px; }
.ss-form-stopka { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.ss-form-stopka .ss-button { flex: 0 0 auto; }
.ss-form-stopka p { flex: 1 1 260px; font-size: var(--ss-meta-size); color: var(--ss-muted); }
.ss-pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ss-plywajacy {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ss-navy); color: var(--ss-white); text-decoration: none;
  font-weight: 600; font-size: 15px; padding: 14px 20px; border-radius: 999px;
  box-shadow: 0 8px 24px rgba(21,42,58,.3);
}
.ss-plywajacy:hover { background: var(--ss-navy-jasny); }
@media (max-width: 560px) { .ss-plywajacy { right: 12px; bottom: 12px; padding: 12px 16px; font-size: 14px; } }
@media print { .ss-plywajacy, .ss-zakladki { display: none; } }

/* Cudzy cytat musi wygladac jak cudzy cytat, nie jak nasze zdanie -
   stad kreska z boku i podpis ze zrodlem. */
.ss-zrodlo-opis blockquote {
  margin: 8px 0 0; padding: 4px 0 4px 14px;
  border-left: 3px solid var(--ss-line); color: var(--ss-navy);
  font-size: var(--ss-meta-size); line-height: var(--ss-meta-line);
}
.ss-zrodlo-opis blockquote cite { display: block; margin-top: 4px; color: var(--ss-muted); font-style: normal; font-size: 13px; }

/* Na waskim ekranie dluga plakietka ("nie wpływa na wynik") nie miesci sie
   obok naglowka kategorii - niech zejdzie do wlasnej linii zamiast rozpychac
   strone poziomym suwakiem. */
@media (max-width: 560px) {
  .ss-kat-glowa { flex-wrap: wrap; }
  .ss-kat-glowa h2 { flex: 1 1 auto; }
  .ss-kat-glowa .ss-pkt-plakietka { white-space: normal; }
}

/* Boczna kolumna jedzie z trescia. Lista kategorii jest mapa calego raportu -
   przy dwudziestu ustaleniach czytelnik inaczej traci ja z oczu po pierwszym
   przewinieciu. Tylko na szerokim ekranie, bo na telefonie kolumna jest
   zwyczajnie pod trescia. */
@media (min-width: 1000px) {
  .ss-bok { position: sticky; top: 16px; }
}

/* Raport nie ma hero, wiec karta ma stac tuz pod okruszkami. Domyslne
   96 px odstepu sekcji zostawialo na gorze pusty ekran. */
main > .ss-section:first-child { padding-block-start: 20px; }

/* Zaden dlugi adres nie ma prawa rozepchnac strony. Adres bez spacji jest dla
   przegladarki JEDNYM slowem - bez tej reguly rozsuwa kolumne i na telefonie
   pojawia sie poziomy suwak przez cala dlugosc raportu. Skracamy adresy
   w podpisach, ale dowody potrafia zawierac dowolny ciag, wiec zostaje
   jeszcze ta siatka bezpieczenstwa. */
.ss-zrzut figcaption, .ss-zrzut figcaption a,
.ss-skad-w a, .ss-skad-w div,
.ss-zrodlo-opis, .ss-zrodlo-nazwa,
.ss-wiersz-dane dd { overflow-wrap: anywhere; }

/* Zastrzezenie przy adresie w panelu "Skad to wiemy". Suchy adres czyta sie
   jak fakt potwierdzony w rejestrze, a to tylko to, co sklep o sobie napisal. */
.ss-ustal-adres {
  display: flex; gap: 8px; align-items: flex-start;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ss-line);
  font-size: var(--ss-meta-size); line-height: var(--ss-meta-line); color: var(--ss-muted);
}
.ss-ustal-adres svg { flex: 0 0 auto; color: var(--ss-petrol); margin-top: 2px; }
.ss-ustal-adres strong { color: var(--ss-navy); }

/* Slowny opis oceny obok liczby. Kolor nie moze byc jedynym nosnikiem
   znaczenia - osoba, ktora nie rozroznia czerwieni i zieleni, ma dostac
   te sama informacje slowem. */
.ss-ocena-slowo { font-weight: 700; font-size: var(--ss-small-size); text-transform: lowercase; }

/* Znak Trustpilota stoi przy NAZWIE serwisu, a nie przy ocenie.
   Zielona gwiazdka obok czerwonych kwadratow mieszala dwie rzeczy:
   logo serwisu i wynik sklepu. Teraz u gory jest sam wynik, a nizej
   logo z nazwa - czyli to, czym ta zielona gwiazdka naprawde jest. */
.ss-tp-zrodlo { display: flex; align-items: center; gap: 7px; }
.ss-tp-zrodlo svg { flex: 0 0 auto; }
.ss-tp-zrodlo strong { color: var(--ss-navy); font-weight: 700; }

/* Formularz sprostowania pod kliknieciem.
   Otwarte pole tekstowe pod raportem o oszukanczym sklepie zaprasza do
   wpisania emocji, a potrzebujemy konkretu: ktory zapis i jak jest naprawde.
   Jedno klikniecie odsiewa pisanie "na goraco", a nikomu, kto naprawde ma
   sprostowanie, nie przeszkodzi. Dziala bez javascriptu. */
.ss-sprostowanie { margin-top: 18px; }
.ss-sprostowanie > summary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; min-height: 48px;
  border: 1px solid var(--ss-navy); border-radius: var(--ss-radius);
  font-weight: 600; font-size: var(--ss-small-size); color: var(--ss-navy);
  cursor: pointer; list-style: none;
}
.ss-sprostowanie > summary::-webkit-details-marker { display: none; }
.ss-sprostowanie > summary:hover { background: #DEE8EE; }
.ss-sprostowanie[open] > summary { margin-bottom: 20px; }
.ss-sprostowanie > form { animation: none; }

/* Odsylacze do innych sprawdzonych sklepow.
   Tekstem odsylacza jest nazwa sklepu i to, czym ta strona jest - a nie
   fraza, ktorej ludzie szukaja. Kotwica "czy ktos mial problem ze zwrotem"
   twierdzilaby cos o sklepie docelowym, czego przy nim nie sprawdzalismy.
   Opis zdjecia mowi, co jest na zdjeciu, bo czyta go czytnik ekranu. */
.ss-inne { display: grid; gap: 16px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 620px) { .ss-inne { grid-template-columns: repeat(3, 1fr); } }
.ss-inne-kafel {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--ss-line); border-radius: var(--ss-radius);
  overflow: hidden; text-decoration: none; color: var(--ss-navy); background: var(--ss-white);
}
.ss-inne-kafel:hover { border-color: var(--ss-petrol); }
.ss-inne-kafel img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top center; display: block; background: var(--ss-ice); }
.ss-inne-tresc { display: block; padding: 12px 14px 14px; }
.ss-inne-tresc .ss-domain { display: block; margin: 8px 0 4px; font-size: 17px; line-height: 24px; }
.ss-inne-tresc .ss-meta { display: block; }

/* ------------------------------------------------- licznik odwiedzin strony
   Stał wcześniej przy "Sygnały w N z 6 kategorii" i czytało się to jak część
   wyniku audytu - czytelnik szukał go wzrokiem i nie znajdował, patrząc wprost
   na niego. W lewym dolnym rogu karty widać, że to osobna, drobna informacja
   o samej stronie, a nie kolejna liczba o sklepie.

   Główka jest siatką, więc licznik jako ostatnie dziecko schodzi do nowego
   wiersza; "1 / -1" każe mu zająć całą szerokość, żeby nie ściskał kolumn. */
.ss-odslony {
  grid-column: 1 / -1;
  padding-inline: 28px;
  margin-top: -12px;
  font-size: var(--ss-meta-size);
  line-height: var(--ss-meta-line);
  color: var(--ss-muted);
}
/* Pusty (nikt jeszcze nie wszedł) nie ma zostawiać dziury pod kartą. */
.ss-odslony:empty { display: none; }

@media (max-width: 560px) {
  .ss-odslony { padding-inline: 20px; }
}

/* ------------------------------------- boczna lista jako spis treści
   Wiersz kategorii, która coś zapaliła, jest odsyłaczem do swojej sekcji.
   Klikalne ma być CAŁE pole wiersza, a nie sama nazwa - w tym miejscu
   czytelnik celuje palcem w liczbę punktów równie często co w napis. */
.ss-bok-odsylacz {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-decoration: none; color: inherit;
  border-radius: 6px;
}
.ss-bok-odsylacz:hover .ss-bok-nazwa { color: var(--ss-petrol); text-decoration: underline; text-underline-offset: 3px; }
/* Ognisko obrysowuje cały wiersz - bez tego przy chodzeniu tabulatorem
   widać tylko wąski pasek wokół tekstu. */
.ss-bok-odsylacz:focus-visible { outline: 3px solid var(--ss-petrol); outline-offset: 3px; }

/* Skok kotwicą nie ma przyklejać nagłówka do samej krawędzi okna. */
.ss-kat[id] { scroll-margin-top: 16px; }