/* BLEYO — panel klienta.
   ⛔ Kontrast: firmowy #EA580C na jasnym tle daje tylko 3,56:1.
      Do tekstu na jasnym: #9A3412. Pod bialy tekst: #C2410C. */

:root {
  --tlo: #0B0C0E;
  --tlo-karta: #141619;
  --tlo-pole: #1B1E22;
  --kreska: #262A30;
  --tekst: #ECEDEE;
  --tekst-cichy: #9BA1A8;
  --marka: #EA580C;
  --marka-tlo: #C2410C;
  --blad: #FCA5A5;
  --blad-tlo: #3F1D1D;
  --r: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--marka); }

/* ── znak marki ─────────────────────────────────────────── */
.znak { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.02em; }
.znak i {
  width: 22px; height: 22px; border-radius: 6px; background: var(--marka);
  display: grid; place-items: center; font-style: normal;
}
.znak i::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #0B0C0E; }

/* ── ekran logowania ────────────────────────────────────── */
.wejscie {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.karta {
  width: 100%; max-width: 400px;
  background: var(--tlo-karta);
  border: 1px solid var(--kreska);
  border-radius: 14px;
  padding: 28px;
}
.karta h1 { margin: 18px 0 4px; font-size: 20px; letter-spacing: -.02em; }
.karta p.pod { margin: 0 0 22px; color: var(--tekst-cichy); font-size: 14px; }

label { display: block; font-size: 13px; color: var(--tekst-cichy); margin: 14px 0 6px; }

input[type="email"], input[type="password"], input[type="text"] {
  width: 100%; padding: 11px 12px;
  background: var(--tlo-pole);
  border: 1px solid var(--kreska);
  border-radius: var(--r);
  color: var(--tekst);
  font-size: 15px;
}
input:focus { outline: 2px solid var(--marka); outline-offset: 1px; border-color: transparent; }

button {
  width: 100%; margin-top: 20px; padding: 12px 16px;
  background: var(--marka-tlo); color: #fff;
  border: 0; border-radius: var(--r);
  font-size: 15px; font-weight: 600; cursor: pointer;
}
button:hover { background: var(--marka); }

.blad {
  margin: 16px 0 0; padding: 10px 12px;
  background: var(--blad-tlo); color: var(--blad);
  border-radius: var(--r); font-size: 14px;
}

/* ── pulpit ─────────────────────────────────────────────── */
.pasek {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 22px;
  border-bottom: 1px solid var(--kreska);
  background: var(--tlo-karta);
}
.pasek form { margin: 0; }
.pasek button { width: auto; margin: 0; padding: 8px 14px; background: transparent; border: 1px solid var(--kreska); color: var(--tekst-cichy); font-weight: 500; }
.pasek button:hover { background: var(--tlo-pole); color: var(--tekst); }

main { padding: 28px 22px; max-width: 1100px; margin: 0 auto; }
h2 { font-size: 18px; letter-spacing: -.01em; margin: 0 0 14px; }

.kafle { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.kafel {
  background: var(--tlo-karta); border: 1px solid var(--kreska);
  border-radius: 12px; padding: 18px;
}
.kafel .liczba { font-size: 30px; font-weight: 700; letter-spacing: -.03em; }
.kafel .opis { color: var(--tekst-cichy); font-size: 13px; margin-top: 4px; }

.pusto {
  margin-top: 22px; padding: 22px;
  border: 1px dashed var(--kreska); border-radius: 12px;
  color: var(--tekst-cichy); font-size: 14px;
}

table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--kreska); }
th { color: var(--tekst-cichy); font-weight: 500; font-size: 13px; }

.stopka { color: var(--tekst-cichy); font-size: 12px; padding: 22px; text-align: center; }

@media (max-width: 520px) {
  .karta { padding: 22px; }
  main { padding: 20px 16px; }
}

/* adres e-mail pokazywany zamiast mailto: */
.adres {
  margin: 18px 0 0; padding: 11px 12px;
  background: var(--tlo-pole); border: 1px solid var(--kreska);
  border-radius: var(--r); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px; text-align: center; user-select: all;
}

/* ── menu w pasku ───────────────────────────────────────── */
.menu { display: flex; gap: 4px; margin-right: auto; margin-left: 18px; flex-wrap: wrap; }
.menu a {
  padding: 7px 12px; border-radius: 8px; text-decoration: none;
  color: var(--tekst-cichy); font-size: 14px;
}
.menu a:hover { background: var(--tlo-pole); color: var(--tekst); }
.menu a.tu { background: var(--tlo-pole); color: var(--tekst); }

/* ── pasek okresu próbnego ──────────────────────────────── */
.probny {
  padding: 10px 22px; font-size: 14px;
  background: #1C1408; color: #FBBF77;
  border-bottom: 1px solid var(--kreska);
}
.probny.pilne { background: var(--blad-tlo); color: var(--blad); }

/* ── zgoda i pole-pułapka ───────────────────────────────── */
.zgoda { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; font-size: 13px; color: var(--tekst-cichy); }
.zgoda input { margin-top: 2px; width: auto; }
/* ⛔ Pułapka na roboty: `display:none` część botów rozpoznaje i pomija.
   Wyprowadzenie poza ekran działa lepiej, a czytnik ekranu i tak ją pomija
   dzięki `aria-hidden` na rodzicu. */
.pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── integracje ─────────────────────────────────────────── */
.kategoria { margin-top: 26px; }
.kategoria h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--tekst-cichy); margin: 0 0 10px; font-weight: 600; }
.integracja {
  background: var(--tlo-karta); border: 1px solid var(--kreska); border-radius: 12px;
  padding: 16px 18px; margin-bottom: 10px;
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start;
}
.integracja .nazwa { font-weight: 600; }
.integracja .opis { color: var(--tekst-cichy); font-size: 13px; margin-top: 3px; }
.integracja form { display: flex; gap: 8px; align-items: center; margin-top: 12px; grid-column: 1 / -1; flex-wrap: wrap; }
.integracja input[type="text"] { width: auto; flex: 1 1 240px; }
.integracja button { width: auto; margin: 0; padding: 10px 14px; }

.znacznik { font-size: 12px; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.znacznik.podpieta { background: #0F2A17; color: #86EFAC; }
.znacznik.blad { background: var(--blad-tlo); color: var(--blad); }
.znacznik.niepodpieta { background: var(--tlo-pole); color: var(--tekst-cichy); }
.znacznik.przygotowanie { background: #1C1408; color: #FBBF77; }

/* ── pomoc ──────────────────────────────────────────────── */
.pyt { border: 1px solid var(--kreska); border-radius: 12px; margin-bottom: 8px; background: var(--tlo-karta); }
.pyt summary { padding: 14px 18px; cursor: pointer; font-weight: 500; list-style: none; }
.pyt summary::-webkit-details-marker { display: none; }
.pyt summary::before { content: "+ "; color: var(--marka); font-weight: 700; }
.pyt[open] summary::before { content: "– "; }
.pyt .odp { padding: 0 18px 16px; color: var(--tekst-cichy); font-size: 14px; }
textarea {
  width: 100%; min-height: 120px; padding: 11px 12px;
  background: var(--tlo-pole); border: 1px solid var(--kreska);
  border-radius: var(--r); color: var(--tekst); font: inherit; resize: vertical;
}
textarea:focus { outline: 2px solid var(--marka); outline-offset: 1px; border-color: transparent; }

.udane { margin: 16px 0 0; padding: 10px 12px; background: #0F2A17; color: #86EFAC; border-radius: var(--r); font-size: 14px; }

.odstep { margin-top: 28px; }
.odstep-m { margin-top: 18px; }

/* etykieta widoczna tylko dla czytnika ekranu — pole i tak ma czytelny placeholder,
   ale pole bez etykiety jest niedostępne dla osób korzystających z czytnika */
.ukryta-etykieta {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── dokumenty prawne (regulamin) ───────────────────────────
   Strona publiczna (bez zalogowania), czytana na telefonie: wąska kolumna,
   numerowane ustępy, spis treści z kotwicami. `overflow-wrap:anywhere` na
   każdym tekście — długie adresy i numery nie mogą wywołać poziomego przewijania. */
.dokument { max-width: 760px; padding: 28px 18px 48px; }
.dokument h1 { font-size: 24px; letter-spacing: -.02em; margin: 0 0 6px; }
.dokument .meta { color: var(--tekst-cichy); font-size: 13px; margin: 0 0 22px; }
.dokument h2 {
  font-size: 17px; margin: 36px 0 12px; padding-top: 14px;
  border-top: 1px solid var(--kreska); scroll-margin-top: 16px;
}
.dokument p, .dokument li, .dokument dt, .dokument dd { overflow-wrap: anywhere; }
.dokument p { margin: 0 0 12px; }
.dokument sup { font-size: .7em; line-height: 0; }

.spis {
  background: var(--tlo-karta); border: 1px solid var(--kreska);
  border-radius: 12px; padding: 16px 18px; margin: 0 0 8px;
}
.spis h2 {
  margin: 0 0 10px; padding: 0; border: 0;
  font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--tekst-cichy);
}
.spis ol { margin: 0; padding-left: 1.5em; font-size: 14px; line-height: 1.7; }
.spis a { text-decoration: none; }
.spis a:hover, .spis a:focus-visible { text-decoration: underline; }

/* ustępy: własny licznik, żeby numer stał w marginesie i nie łamał się z tekstem */
ol.ust { margin: 0 0 12px; padding-left: 1.7em; list-style: none; counter-reset: ust; }
ol.ust > li { counter-increment: ust; position: relative; margin-bottom: 8px; }
ol.ust > li::before {
  content: counter(ust) "."; position: absolute; left: -1.7em; width: 1.4em;
  text-align: right; color: var(--tekst-cichy); font-variant-numeric: tabular-nums;
}
ol.lit { margin: 6px 0 0; padding-left: 1.6em; list-style: lower-latin; }
ol.lit > li { margin-bottom: 4px; }
ol.lit > li::marker { color: var(--tekst-cichy); }

.dokument dl.dane {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 16px; margin: 6px 0 4px; font-size: 14px;
}
.dokument dl.dane dt { color: var(--tekst-cichy); }
.dokument dl.dane dd { margin: 0; }

.definicje { margin: 0 0 12px; }
.definicje dt { font-weight: 600; margin-top: 10px; }
.definicje dd { margin: 2px 0 0; }

.wazne {
  margin: 12px 0; padding: 12px 14px;
  border-left: 3px solid var(--marka); background: var(--tlo-karta);
  border-radius: 0 var(--r) var(--r) 0;
}
.wazne p:last-child { margin-bottom: 0; }

.dokument p.pod { color: var(--tekst-cichy); font-size: 14px; }
.dokument p.odstep-m { margin-top: 18px; }
.do-spisu { display: inline-block; margin-top: 28px; font-size: 13px; }

@media (max-width: 520px) {
  .dokument { padding: 20px 14px 40px; }
  .dokument dl.dane { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dokument dl.dane dt { margin-top: 8px; }
}

/* ── POPRAWKI PO POMIARZE NA TELEFONIE (14.09) ──────────────────────────────
   ⛔ Waga selektorow: `.karta p.pod` (0,1,2) bije samo `.odstep-m` (0,1,0),
      wiec `margin: 0 0 22px` z `.pod` kasowalo gorny odstep i tekst przyklejal
      sie do przycisku. Podnosimy wage zamiast dokladac `!important`. */
.karta p.pod.odstep-m { margin-top: 18px; }

/* ⛔ Pasek nawigacji przy 393 px lamal sie w PIONOWA KOLUMNE wcisnieta miedzy
   logo a „Wyloguj" — zjadalo to pol ekranu. Na waskich ekranach menu schodzi
   do wlasnego wiersza pod logo. */
@media (max-width: 620px) {
  .pasek {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "znak wyloguj"
      "menu menu";
    gap: 10px 12px;
    padding: 12px 16px;
  }
  .pasek > .znak { grid-area: znak; align-self: center; }
  .pasek > form  { grid-area: wyloguj; }
  .menu {
    grid-area: menu;
    margin: 0;
    gap: 6px;
    /* ⛔ `min-width:0` na elemencie siatki — bez tego element rozdyma kontener
       do szerokosci tresci, a klasyczny test rozjazdu tego NIE widzi. */
    min-width: 0;
    width: 100%;
  }
  .menu a { flex: 1 1 auto; text-align: center; }
  .probny { padding: 10px 16px; }
}