/* ══════════════ STRONY W NAGŁÓWKU (17.10.2026), opis w z36-strony-naglowek.js ══════════════
   Najpierw złota (Konrad: „bardzo widoczne, na złoto”), potem cała granatowa: „zbyt bije
   w oczy” (17.10). Granat z logo (marka/ikona/studnia-ikona.svg, #253E4E → #142632),
   złote zostaje tylko kółko z plusem i „Dokup”. Złota obwódka dopiero przy kończących się
   stronach, żeby kolor coś znaczył. Liczba z jednostką jako jedna całość. */

.top-strony{display:inline-flex;align-items:center;gap:10px;height:38px;flex:0 0 auto;padding:0 4px 0 14px;
  border-radius:999px;background:linear-gradient(180deg,#253E4E,#142632);color:#EDEFF2;text-decoration:none;
  white-space:nowrap;-webkit-tap-highlight-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 6px 14px -8px rgba(20,38,50,.55);
  transition:box-shadow .15s var(--ease),transform .12s var(--ease),filter .15s var(--ease);}
.top-strony:active{transform:scale(.96);}
@media(hover:hover){ .top-strony:hover{filter:brightness(1.18);} }
.top-strony:focus-visible{outline:2px solid #EDB43D;outline-offset:2px;}
.ts-w{display:inline-flex;align-items:baseline;gap:5px;}
.ts-n{font-family:var(--f-serif);font-weight:700;font-size:15.5px;letter-spacing:-.01em;font-variant-numeric:tabular-nums;}
.ts-j{font-size:12.5px;font-weight:500;color:rgba(237,239,242,.66);}
/* „+ Dokup” w tej samej granatowej pigułce, oddzielone cienką kreską */
.ts-d{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px 0 11px;
  border-left:1px solid rgba(255,255,255,.16);color:#F8D57E;font-size:13px;font-weight:600;}
.ts-plus{flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F8D57E'/%3E%3Cstop offset='1' stop-color='%23EDB43D'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='12' fill='url(%23g)'/%3E%3Cpath d='M12 7.25v9.5M7.25 12h9.5' stroke='%23142632' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;}
/* Kółko i krzyżyk w jednym SVG: zawsze współśrodkowe. Dwie kreski z ::before/::after
   na ułamkowych pozycjach wychodziły do pół piksela obok środka (pomiar 17.10). */

/* mało stron (poniżej 15%) i zero: dopiero wtedy złota obwódka i złota liczba */
.top-strony.malo,.top-strony.zero{box-shadow:inset 0 0 0 1.5px rgba(242,193,78,.85),0 6px 16px -8px rgba(237,180,61,.7);}
.top-strony.malo .ts-n,.top-strony.zero .ts-n{color:#F8D57E;}
/* ciemny motyw: granat pigułki blisko tła paska, więc cienka jasna obwódka */
[data-theme="dark"] .top-strony{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 6px 14px -8px rgba(0,0,0,.6);}
[data-theme="dark"] .top-strony.malo,[data-theme="dark"] .top-strony.zero{box-shadow:inset 0 0 0 1.5px rgba(242,193,78,.85);}

/* Do 1365 px i na telefonie: zwarta granatowa pigułka. Liczba nad jednostką, złote kółko
   z plusem w środku pigułki, na jednej osi z liczbą (jak w aplikacji iOS). Znaczek wiszący
   w rogu wyglądał krzywo (Konrad 17.10). Pełna pigułka z „Dokup” (ok. 200 px) łamała tu tytuły. */
@media(max-width:1365px){
  .top-strony{height:36px;gap:7px;padding:0 5px 0 11px;}
  .ts-w{flex-direction:column;align-items:center;gap:0;line-height:1;}
  .ts-n{font-size:14px;}
  .ts-j{font-size:10px;margin-top:2px;}
  .ts-d{width:24px;height:24px;padding:0;border:0;border-radius:50%;}
  .ts-dt{display:none;}
  .ts-plus{width:24px;height:24px;}
}
/* Między 701 a 1365 px zwarta pigułka zajmuje miejsce przycisku duszka, który jest też
   w Konto → Wygląd (jak na telefonie od 9.10). Bez tego część tytułów schodziła do dwóch linii. */
@media(min-width:701px) and (max-width:1365px){
  .top-r:has(#topStrony) .dz-btn{display:none;}
}
/* przy 1024 px wyszukiwarka ściskała przełącznik PL/EN do pionu: małe przyciski się nie kurczą */
.top-r:has(#topStrony) > :not(.srch){flex-shrink:0;}
/* Telefon: tytuł potrzebuje 129 px na najdłuższe słowo („przypominanie”), przy 360 px
   miał 150, więc pigułka staje w miejscu słoneczka. Motyw jest w Konto → Wygląd
   (wiersz dokłada z36-strony-naglowek.js), tak jak język i duszek od 9.10. */
@media(max-width:700px){
  .top-r:has(#topStrony) #motyw{display:none;}
}
/* Do 380 px: pigułka z kółkiem w środku potrzebuje ok. 15 px więcej, niż było. Bierzemy je
   z marginesów paska (24 → 16 px) i z mniejszego kółka; „przypominanie” w tytule ma 129 px. */
@media(max-width:380px){
  .top{padding-left:var(--s4);padding-right:var(--s4);}
  .top-strony{gap:4px;padding:0 4px 0 9px;}
  .ts-n{font-size:13px;letter-spacing:-.02em;}
  .ts-d,.ts-plus{width:18px;height:18px;}
}
@media(prefers-reduced-motion:reduce){ .top-strony{transition:none;} .top-strony:active{transform:none;} }