/* Broniarz - reset, typografia, układ: telefon = nagłówek + dolny pasek,
   komputer (>= 1024 px) = menu z boku. Kolejność: fonty, motyw, baza, ... */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font: 16px/1.5 var(--font);
  min-height: 100dvh;
  padding-bottom: calc(var(--nav-wys) + env(safe-area-inset-bottom));
}
a { color: var(--akcent-jasny); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--akcent); outline-offset: 2px; }

/* Nagłówki: wąski krój, wielkie litery - jak na projekcie */
h1, h2, h3 { font-family: var(--font-naglowek); font-weight: 700; line-height: 1.05; margin: 0 0 .5em; }
h1 { font-size: 2rem; letter-spacing: .02em; }
h2 { font-size: 1.25rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tekst-2); }
h3 { font-size: 1.15rem; }
.karta > h2:first-child { color: var(--tekst); }

/* Liczby: krój o stałej szerokości cyfr - liczniki nie skaczą */
.liczba, .licznik, .duza-liczba, .kody, .sekret { font-family: var(--font-liczby); font-variant-numeric: tabular-nums; }

/* --- Układ ---------------------------------------------------------------- */
/* Stopka zawsze na dole ekranu (Seba 10.10): kolumna = nagłówek, treść, stopka; treść rośnie i spycha
   stopkę na dół, gdy jest krótka. Na telefonie ekran to 100dvh MINUS dolny pasek (body ma pod niego
   padding) - inaczej strona zawsze dawała się przewinąć o wysokość paska, a stopka chowała się pod nim. */
.kolumna { display: flex; flex-direction: column; min-height: calc(100dvh - var(--nav-wys) - env(safe-area-inset-bottom)); }
.tresc { max-width: 1240px; width: 100%; margin: 0 auto; padding: 12px var(--odstep) 32px; flex: 1 0 auto; }
.stopka { flex: none; }
/* Bez zalogowania nie ma dolnego paska - stopka na samym dole ekranu. */
body:has(.bez-menu) { padding-bottom: 0; }
.bez-menu .kolumna { min-height: 100dvh; }

/* Nagłówek na telefonie: logo, przełącznik strzelca, motyw */
.naglowek {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 10px;
  padding: 10px var(--odstep);
  padding-top: calc(10px + env(safe-area-inset-top));
  background: color-mix(in srgb, var(--tlo) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ramka);
}
.logo {
  display: inline-flex; align-items: center; gap: 10px; margin-right: auto;
  font-family: var(--font-naglowek); font-weight: 700; font-size: 1.6rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--tekst); text-decoration: none;
}
.logo:hover { text-decoration: none; }
.logo svg { flex: none; }
.przycisk-ikona {
  width: var(--dotyk-maly); height: var(--dotyk-maly); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; border: 1.5px solid var(--ramka); background: var(--tlo-2); color: var(--tekst); cursor: pointer;
}

.stopka { color: var(--tekst-3); font-size: .85rem; text-align: center; padding: 24px var(--odstep) 32px; }
.stopka-wyloguj { margin-top: 12px; }

/* Komputer: menu po lewej, nagłówek telefonu znika */
@media (min-width: 1024px) {
  body { padding-bottom: 0; }
  .uklad { display: grid; grid-template-columns: var(--menu-szer) minmax(0, 1fr); }
  .kolumna { min-height: 100dvh; }
  .naglowek { display: none; }
  .tresc { padding: 32px 40px 48px; margin: 0; width: 100%; }
  h1 { font-size: 2.75rem; }
  .stopka { text-align: left; padding: 0 40px 32px; }
  /* Seba 10.10.2026: na szerokim monitorze wszystko było przyklejone do lewej - menu z treścią
     tworzą jedną kolumnę na środku ekranu (jak na Militarii), tło po bokach. */
  .uklad { max-width: calc(var(--menu-szer) + 1160px); margin: 0 auto; }
}
@media (min-width: 1424px) {
  .uklad:not(.bez-menu) .nawigacja { border-left: 1px solid var(--ramka); }
}

/* Komputer, ekrany bez menu (logowanie, rejestracja, kod z aplikacji): bez siatki z kolumną menu -
   wcześniej cała treść wpadała w wąską kolumnę menu (~170 px). Nagłówek z logo zostaje, karta na środku. */
@media (min-width: 1024px) {
  .uklad.bez-menu { display: block; }
  .bez-menu .naglowek { display: flex; position: static; padding: 18px 40px; background: transparent; border-bottom: 0; }
  .bez-menu .tresc { margin: 0 auto; max-width: 520px; padding: 6vh 24px 32px; }
  .bez-menu .tresc h1 { font-size: 2.25rem; }
  .bez-menu .stopka { text-align: center; padding: 0 24px 32px; }
}

/* Karta zwijana (Konto: hasło i kody zapasowe) - nagłówek jest przyciskiem, treść po kliknięciu */
.zwijana > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.zwijana > summary::-webkit-details-marker { display: none; }
.zwijana > summary h2 { margin: 0; }
.zwijana > summary::after { content: '▾'; color: var(--tekst-3); transition: transform .15s; }
.zwijana[open] > summary::after { transform: rotate(180deg); }
.zwijana[open] > summary { margin-bottom: 12px; }