/*
 * Style rankingu na wyglądzie Biura dla MiŚa (decyzja Artema 2026-11-07, docs/zapozyczenia-z-biurodlamisia.md §5).
 * Kolory, kroje, odstępy i nagłówek/stopka przychodzą z kopii tokens/base/layout/components.css
 * (script/sync-z-biurodlamisia) – tutaj tylko to, czego aplikacja MiŚa nie ma: pasek rankingu i długi artykuł.
 * Wyłącznie tokeny (var(--color-…)), żadnych własnych kolorów – wtedy ciemny motyw działa sam.
 */

:root {
  --szeroko: 46rem;  /* szerokość czytania artykułu */
  --pasek-wysokosc: 3.1rem; /* pasek rankingu – do przewijania do kotwic pod oboma przyklejonymi paskami */
}

/* Nagłówek MiŚa (position: sticky, --header-height) i pasek rankingu są przyklejone – kotwica nie może wpaść pod nie. */
html { scroll-padding-top: calc(var(--header-height) + var(--pasek-wysokosc) + var(--space-md)); }

.ramka { max-width: var(--szeroko); margin: 0 auto; padding: 0 var(--container-px); }

.pomin {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-surface-deep); color: var(--color-white); padding: var(--space-xs) var(--space-md);
}
.pomin:focus { left: 0; }

/* Pasek rankingu pod nagłówkiem MiŚa – nawigacja po samym rankingu. Przyklejony tuż pod nagłówkiem (Artem, 2026-11-08):
   logo w nagłówku prowadzi na biurodlamisia.pl, więc to jedyna stała droga do stron rankingu. */

.pasek-rankingu {
  position: sticky; top: var(--header-height); z-index: 99;
  background: var(--color-bg-alt); border-bottom: 1px solid var(--color-border);
}
.pasek-rankingu__wnetrze {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-xs) var(--space-xl); min-height: var(--pasek-wysokosc);
}
.pasek-rankingu__nazwa {
  font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; white-space: nowrap;
  letter-spacing: var(--tracking-caps); color: var(--color-ink);
}
.pasek-rankingu__nazwa:hover { color: var(--color-green); }
.pasek-rankingu__linki { display: flex; gap: var(--space-xs) var(--space-lg); font-size: var(--font-size-sm); font-weight: 500; }
.pasek-rankingu__linki a { color: var(--color-text); white-space: nowrap; }
.pasek-rankingu__linki a:hover,
.pasek-rankingu__linki a[aria-current="page"] { color: var(--color-green); }

.pasek-rankingu .krotkie { display: none; }
.pasek-rankingu__nazwa[aria-current="page"] { color: var(--color-ink); }

/* Telefon i tablet: zamiast pełnej nazwy krótkie etykiety w jednym wierszu – wszystkie mieszczą się na 360 px bez przewijania.
   „Ranking” (strona główna rankingu) wygląda jak pozostałe linki; bieżąca strona na zielono. */
@media (max-width: 64rem) {
  .pasek-rankingu .dlugie { display: none; }
  .pasek-rankingu .krotkie { display: inline; }
  .pasek-rankingu__wnetrze { justify-content: flex-start; gap: var(--space-md); overflow-x: auto; scrollbar-width: none; }
  .pasek-rankingu__wnetrze::-webkit-scrollbar { display: none; }
  .pasek-rankingu__nazwa {
    font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: 700;
    text-transform: none; letter-spacing: 0; color: var(--color-text);
  }
  .pasek-rankingu__nazwa[aria-current="page"] { color: var(--color-green); }
  .pasek-rankingu__linki { gap: var(--space-md); }
}
@media (max-width: 380px) {
  .pasek-rankingu__wnetrze, .pasek-rankingu__linki { gap: var(--space-sm); }
  .pasek-rankingu__nazwa, .pasek-rankingu__linki { font-size: 0.8125rem; }
}

/* Treść */

.tresc { padding-top: var(--space-2xl); padding-bottom: var(--space-3xl); }

.artykul h1 { font-size: clamp(1.85rem, 1.35rem + 2.2vw, 2.6rem); margin: 0 0 var(--space-lg); }
.artykul .podtytul { color: var(--color-text-muted); margin: calc(-1 * var(--space-md)) 0 var(--space-xl); }

.artykul h2 {
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem);
  margin: var(--space-2xl) 0 var(--space-md); padding-top: var(--space-xl); border-top: 1px solid var(--color-border);
}
.artykul h2 strong, .artykul h3 strong { font-weight: inherit; }

.artykul h3 {
  font-size: var(--font-size-xl); margin: var(--space-2xl) 0 var(--space-md);
  padding: 0.2rem 0 0.2rem var(--space-sm); border-left: 4px solid var(--color-green);
}

.artykul h4 {
  font-family: var(--font-body); font-size: var(--font-size-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-caps-wide); color: var(--color-text-muted);
  margin: var(--space-lg) 0 var(--space-xs);
}

/* base.css zeruje marginesy i kropki list (aplikacja nie ma długich tekstów) – w artykule wracają. */
.artykul p, .artykul ul, .artykul ol { margin: 0 0 var(--space-md); }
.artykul ul { list-style: disc; padding-left: var(--space-lg); }
.artykul ol { list-style: decimal; padding-left: var(--space-lg); }
.artykul li { margin-bottom: 0.45rem; }
.artykul li::marker { color: var(--color-text-muted); }
.artykul li a, .artykul td a { text-decoration: underline; }

.artykul figure { margin: var(--space-md) 0 var(--space-lg); }
.artykul figure img {
  display: block; width: 100%; max-width: 22rem; height: auto;
  background: var(--color-bg-alt); border: 1px solid var(--color-border);
}

/* Wstęp: kto prowadzi ranking i dlaczego siebie w nim nie ocenia. */

/* Jak .home-callout na biurodlamisia.pl („A dla kogo nie jesteśmy?”): .notch z cienką ramką i tłem karty, bez zielonego wypełnienia
   (Artem, 2026-11-11 – w ciemnym motywie zielona plama z zielonym linkiem była nieczytelna). */
.wstep { padding: var(--space-xl); margin: 0 0 var(--space-xl); line-height: 1.65; }
.wstep p { margin: 0 0 var(--space-sm); }
.wstep p:last-child { margin-bottom: 0; }

/* Tabele pakietów */

.tabela { overflow-x: auto; margin: var(--space-xs) 0 var(--space-md); border: 1px solid var(--color-border); background: var(--color-bg-alt); }
.tabela table { width: 100%; border-collapse: collapse; font-size: 0.92rem; line-height: 1.4; }
.tabela th, .tabela td { padding: 0.6rem 0.75rem; text-align: center; vertical-align: top; border-bottom: 1px solid var(--color-border); min-width: 8.5rem; }
.tabela th + th, .tabela td + td { border-left: 1px solid var(--color-border); }
.tabela thead th { background: var(--color-green-soft); color: var(--color-ink); font-weight: 700; }
.tabela tbody tr:first-child td { font-size: var(--font-size-base); font-weight: 600; color: var(--color-ink); }
.tabela tbody tr:last-child td { border-bottom: 0; }

/* Tabela pakietów z bazy (sekcja „Ranking” na stronie głównej) – szersza niż artykuł, przewijana w bok na telefonie. */

.artykul--szeroki { max-width: none; }
.artykul--szeroki > :not(.pakiety, .dopasuj) { max-width: var(--szeroko); margin-left: auto; margin-right: auto; }
.ramka:has(.artykul--szeroki) { max-width: var(--max-width); }

.pakiety__opis { max-width: var(--szeroko); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.tabela--pakiety th, .tabela--pakiety td { text-align: left; min-width: 8.5rem; font-size: var(--font-size-sm); }
.tabela--pakiety tbody tr:first-child td { font-size: var(--font-size-sm); font-weight: 400; color: inherit; }
.tabela--pakiety tbody th { background: var(--color-bg-alt); position: sticky; left: 0; z-index: 1; min-width: 11rem; border-right: 1px solid var(--color-border); }
.tabela--pakiety tbody tr + tr th, .tabela--pakiety tbody tr + tr td { border-top: 1px solid var(--color-border); }
.pakiety__biuro { display: block; font-family: var(--font-heading); font-weight: 700; color: var(--color-ink); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.pakiety__nazwa { display: block; font-weight: 600; }
.pakiety__drobne { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: 400; }
.pakiety__drobne a { color: inherit; text-decoration: underline; }
.artykul .pakiety__ceny { list-style: none; padding: 0; margin: 0; }
.artykul .pakiety__ceny li { margin-bottom: 0.3rem; }
.pakiety__ceny .pakiety__drobne { display: inline; }
.pakiety__wiecej summary { cursor: pointer; color: var(--color-green); }
.pakiety__wiecej[open] { font-size: var(--font-size-xs); }
.nie-wiemy { color: var(--color-text-muted); font-style: italic; }
.artykul .pakiety__lista { list-style: none; padding: 0; columns: 2 16rem; column-gap: var(--space-xl); }
.artykul .pakiety__lista li { break-inside: avoid; margin-bottom: var(--space-sm); }
.artykul .wszystkie-biura { font-weight: 600; margin-top: calc(-1 * var(--space-sm)); margin-bottom: var(--space-xl); }

/* „Dopasuj do siebie” na stronie głównej (docs/filtry.md §6): profile, pięć ponumerowanych miejsc z wagami, kryteria do dodania,
   karty pakietów. Jedna kolumna na telefonie; na szerokim ekranie karty w siatce. */

.dopasuj { max-width: var(--max-width); margin: 0 auto; }
.filtry { max-width: 60rem; }
.filtry[aria-busy="true"] .filtry__wyniki { opacity: 0.55; transition: opacity 0.15s; }
.filtry__opis, .filtry__drobne { color: var(--color-text-muted); font-size: var(--font-size-sm); max-width: var(--szeroko); }
.filtry__drobne a, .filtry__opis a { text-decoration: underline; }
.artykul .filtry__tytul { border-left: 0; padding-left: 0; margin: var(--space-xl) 0 var(--space-sm); font-size: var(--font-size-lg); }
.artykul .filtry__podtytul { margin-top: var(--space-lg); }

.filtry__profile { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-md) 0; }
.filtry__profil {
  padding: 0.4rem 0.8rem; border: 1px solid var(--color-border-strong); background: var(--color-bg-alt);
  color: var(--color-text); font-size: var(--font-size-sm); font-weight: 500; text-decoration: none;
}
.filtry__profil:hover { border-color: var(--color-green); color: var(--color-green); }
/* Wybrany profil / okres: aria-current, nie aria-pressed – to linki, a aria-pressed wolno tylko przyciskom (PageSpeed, 2026-11-11). */
.filtry__profil[aria-current="true"] { background: var(--color-green); border-color: var(--color-green); color: var(--color-white); }

.artykul .filtry__miejsca { list-style: none; padding: 0; margin: 0 0 var(--space-xs); border: 1px solid var(--color-border); background: var(--color-bg-alt); }
.artykul .filtry__miejsce {
  display: grid; grid-template-columns: 1.6rem 1fr auto auto; align-items: center; gap: var(--space-sm);
  margin: 0; padding: 0.5rem 0.75rem; min-height: 2.9rem;
}
.filtry__miejsce + .filtry__miejsce { border-top: 1px solid var(--color-border); }
.filtry__numer { font-family: var(--font-heading); font-weight: 700; color: var(--color-green); }
.filtry__miejsce--puste .filtry__numer { color: var(--color-text-muted); }
.filtry__nazwa { font-weight: 600; color: var(--color-ink); }
.filtry__miejsce--puste .filtry__nazwa { font-weight: 400; grid-column: 2 / -1; }
.filtry__waga { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }
.filtry__waga meter { width: 5rem; height: 0.6rem; }
.filtry__akcje { display: inline-flex; gap: 0.15rem; }
.filtry__akcje a {
  display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem;
  border: 1px solid var(--color-border); color: var(--color-text); text-decoration: none;
}
.filtry__akcje a:hover { border-color: var(--color-green); color: var(--color-green); }

.artykul .filtry__kryteria { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); }
.artykul .filtry__kryteria li { margin: 0; display: inline-flex; align-items: center; gap: 0.2rem; }
.filtry__kryterium {
  padding: 0.35rem 0.7rem; border: 1px solid var(--color-border); color: var(--color-text);
  font-size: var(--font-size-sm); text-decoration: none;
}
a.filtry__kryterium:hover { border-color: var(--color-green); color: var(--color-green); }
.filtry__kryterium[aria-disabled="true"] { color: var(--color-text-muted); }

.info { display: inline-block; position: relative; font-weight: 400; }
.info summary { list-style: none; cursor: pointer; color: var(--color-green); padding: 0 0.25rem; }
.info summary::-webkit-details-marker { display: none; }
.info__tresc {
  position: absolute; z-index: 5; left: 0; top: 100%; width: min(20rem, 80vw); padding: var(--space-sm);
  background: var(--color-bg-alt); border: 1px solid var(--color-border-strong); font-size: var(--font-size-xs);
  color: var(--color-text); line-height: 1.45;
}
.filtry__miejsce .info__tresc { left: auto; right: 0; }

.filtry__ustawienia { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-md) var(--space-xl); margin: var(--space-lg) 0; }
.filtry__okres { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin: var(--space-lg) 0 0; font-size: var(--font-size-sm); font-weight: 700; }
.filtry__okres .interval-toggle__btn { text-decoration: none; }
.filtry__okres .interval-toggle__btn[aria-current="true"] { background-color: var(--color-green); color: var(--color-white); }
.filtry__szukaj { display: grid; gap: var(--space-xs); font-size: var(--font-size-sm); font-weight: 700; }
.filtry__szukaj input {
  font: inherit; font-weight: 400; padding: 0.45rem 0.6rem; min-width: 16rem; max-width: 100%;
  border: 1px solid var(--color-border-strong); background: var(--color-bg-alt); color: var(--color-text);
}
.js .filtry__pokaz { display: none; }

.artykul .karty { list-style: none; padding: 0; display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.artykul .karty > li { margin: 0; }
/* Karta pakietu = .notch jak .package-card na biurodlamisia.pl; pierwsza – grubsza zielona ramka jak pakiet polecany. */
.karta { height: 100%; padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-md); font-size: var(--font-size-sm); }
.karty > li:first-child .karta { --notch-line: var(--color-green); --notch-line-width: 2px; }
.karty--za-malo .karta { --notch-fill: var(--color-bg); }
.karta__gora { display: flex; justify-content: space-between; gap: var(--space-md); }
.karta__pakiet { display: block; font-size: var(--font-size-base); font-weight: 700; color: var(--color-ink); }
.karta__pakiet a { color: inherit; text-decoration: underline; }
.karta__cena { display: block; margin-top: 0.2rem; }
.karta__wynik { text-align: center; flex: none; }
.karta__liczba { display: block; font-family: var(--font-heading); font-size: 2rem; font-weight: 700; line-height: 1; color: var(--color-green); }
.karty--za-malo .karta__liczba { color: var(--color-text-muted); }
.artykul .karta p { margin: var(--space-xs) 0; }
.artykul .karta__oceny { list-style: none; padding: 0; margin: var(--space-sm) 0; border-top: 1px solid var(--color-border); }
.artykul .karta__oceny > li { margin: 0; padding: 0.35rem 0; border-bottom: 1px solid var(--color-border); display: grid; grid-template-columns: 9rem 1fr; gap: var(--space-sm); }
.karta__kryterium { font-weight: 600; color: var(--color-ink); }
.artykul .karta__skladniki { list-style: none; padding: 0; margin: var(--space-xs) 0 0; }
.artykul .karta__skladniki li { margin: 0 0 0.15rem; }
.karta__inne summary { cursor: pointer; color: var(--color-green); }
.artykul .karta__inne ul { margin: var(--space-xs) 0 0; }
.filtry__wiecej { display: inline-block; margin-top: var(--space-md); font-weight: 600; text-decoration: underline; }
@media (max-width: 30rem) {
  .artykul .filtry__miejsce { grid-template-columns: 1.4rem 1fr auto auto; gap: var(--space-xs); padding: 0.45rem 0.5rem; }
  .filtry__waga meter { display: none; }
  .filtry__akcje a { width: 1.9rem; height: 1.9rem; }
  .artykul .karta__oceny > li { grid-template-columns: 6.5rem 1fr; }
}