:root {
  /* kolory z barw miasta Białogard: koral, bordo, granat, błękit */
  --koral: #fc7067;
  --bordo: #7c2d42;
  --granat: #28245d;
  --blekit: #9dcbef;

  --tlo: #f3f5fa;
  --karta: #ffffff;
  --tekst: #17162e;
  --szary: #5a5d78;
  --slaby: #8b8ea8;
  --ramka: #dde1ee;
  --naglowek: var(--granat);
  --naglowek-tekst: #ffffff;
  --akcent: var(--koral);          /* na granatowym tle: podkreślenia, wyróżnienia */
  --akcent-tekst: var(--bordo);    /* akcent na jasnym tle (tekst, kropki na trasie) */
  --wcisniety: var(--granat);
  --zaraz: #fff0ee;
  --zaraz-tekst: #b8423a;
  --teraz-godz: #e3f0fb;
  --zolty: #ffeecc;
  --zolty-ramka: #8a6d1f;
  --fokus: var(--bordo);
  --l1: #cc4038;                   /* koral przyciemniony – biały numer musi być czytelny */
  --l2: var(--granat);
  --l3: var(--bordo);
  --l4: var(--blekit);
  --l4-tekst: var(--granat);
  --cien: 0 1px 2px rgba(40, 36, 93, .08);
}
@media (prefers-color-scheme: dark) {
  :root {
    --tlo: #12112a;
    --karta: #1f1d42;
    --tekst: #eceef6;
    --szary: #aeb2cf;
    --slaby: #7f83a3;
    --ramka: #34315e;
    --naglowek: #1c1947;
    --akcent-tekst: var(--koral);
    --wcisniety: var(--koral);
    --zaraz: #3a2230;
    --zaraz-tekst: #ff9b93;
    --teraz-godz: #26305a;
    --zolty: #5c4a1c;
    --zolty-ramka: #e0c070;
    --fokus: var(--blekit);
    --l1: #d9483f;
    --l2: #4a45a0;
    --l3: #a8455d;
    --cien: none;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font: 16px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
button { font: inherit; color: inherit; }
a { color: inherit; }

/* ---------- nagłówek ---------- */
.gora {
  position: sticky; top: 0; z-index: 5;
  background: var(--naglowek); color: var(--naglowek-tekst);
  padding: calc(8px + env(safe-area-inset-top)) 16px 0;
}
.gora-wiersz, .gora-info, .zakladki, main { max-width: 640px; margin: 0 auto; }
.gora-wiersz { display: flex; align-items: center; gap: 4px; }
.ikona-btn {
  flex: none; width: 44px; height: 44px; border: 0; border-radius: 10px;
  background: transparent; font-size: 1.4rem; cursor: pointer; color: inherit;
}
.ikona-btn:active { background: rgba(255, 255, 255, .15); }
.przystanek-btn {
  flex: 1; min-width: 0; text-align: left; border: 0; background: rgba(255, 255, 255, .14);
  border-radius: 10px; padding: 6px 12px; cursor: pointer; min-height: 48px;
}
.przystanek-btn .etykieta { display: block; font-size: .72rem; opacity: .85; text-transform: uppercase; letter-spacing: .04em; }
.przystanek-btn .nazwa {
  display: block; font-size: 1.15rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.przystanek-btn .nazwa::after { content: " ▾"; font-weight: 400; opacity: .8; }
.gora-info { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0 4px; font-size: .9rem; }
.pigulka {
  border: 1px solid currentColor; border-radius: 999px; background: transparent;
  padding: 4px 12px; min-height: 32px; font-size: .85rem; cursor: pointer; white-space: nowrap;
}
.panel-czasu { max-width: 640px; margin: 0 auto; display: flex; gap: 8px; padding: 4px 0 8px; }
.panel-czasu input {
  flex: 1; min-width: 0; font: inherit; padding: 8px 10px; border-radius: 8px; border: 0;
  background: var(--karta); color: var(--tekst);
}
.panel-czasu .pigulka { min-height: 40px; }
.zakladki { display: flex; }
.zakladki button {
  flex: 1; border: 0; background: transparent; padding: 10px 4px 12px; min-height: 44px;
  font-weight: 600; opacity: .75; cursor: pointer; border-bottom: 3px solid transparent;
}
.zakladki button[aria-selected="true"] { opacity: 1; border-bottom-color: var(--akcent); }

/* ---------- treść ---------- */
main { padding: 0 16px calc(24px + env(safe-area-inset-bottom)); }
.filtry { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0 4px; scrollbar-width: none; }
.filtry::-webkit-scrollbar { display: none; }
.filtry:empty { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--ramka); background: var(--karta); border-radius: 999px;
  padding: 6px 12px; min-height: 36px; font-size: .9rem; cursor: pointer; white-space: nowrap;
}
.chip[aria-pressed="true"] { background: var(--wcisniety); color: #fff; border-color: var(--wcisniety); }
/* odznaka linii w kolorze tła przycisku (np. granatowa „2”) musi być widoczna */
.chip[aria-pressed="true"] .linia { box-shadow: 0 0 0 1.5px #fff; }
.info { color: var(--szary); font-size: .85rem; margin: 8px 0; }
.info strong { color: var(--tekst); }

.lista { list-style: none; margin: 0; padding: 0; }
.kurs { background: var(--karta); border: 1px solid var(--ramka); border-radius: 12px; margin-bottom: 6px; box-shadow: var(--cien); }
.kurs.zaraz { border-color: var(--zaraz-tekst); }
.kurs > button {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  border: 0; background: transparent; padding: 8px 12px; min-height: 58px; cursor: pointer;
}
.linie { flex: none; display: flex; gap: 3px; }
.linia {
  display: inline-block; min-width: 34px; text-align: center; font-weight: 800; font-size: 1.05rem;
  color: #fff; background: var(--l1); border-radius: 7px; padding: 4px 6px; line-height: 1.2;
}
.linia.mala { min-width: 22px; font-size: .75rem; padding: 1px 4px; border-radius: 5px; }
.linia[data-l="2"] { background: var(--l2); }
.linia[data-l="3"] { background: var(--l3); }
.linia[data-l="4"] { background: var(--l4); color: var(--l4-tekst); }
.srodek { flex: 1; min-width: 0; }
.kierunek {
  font-weight: 650; overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pod { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; color: var(--szary); font-size: .8rem; margin-top: 2px; }
.znaczek {
  display: inline-block; min-width: 18px; height: 18px; line-height: 16px; padding: 0 4px; text-align: center;
  border: 1px solid var(--ramka); border-radius: 5px; font-weight: 700; font-size: .72rem; color: var(--tekst);
}
.znaczek.zolty { background: var(--zolty); border-color: var(--zolty-ramka); }
.tag { font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; }
.tag.ostatni { color: var(--akcent-tekst); }
.prawa { flex: none; text-align: right; min-width: 64px; }
.duzy { font-weight: 800; font-size: 1.35rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kurs.zaraz .duzy { color: var(--zaraz-tekst); }
.maly { color: var(--szary); font-size: .8rem; font-variant-numeric: tabular-nums; }

.szczegoly { border-top: 1px solid var(--ramka); padding: 10px 12px 12px; font-size: .88rem; }
.objasnienie { display: flex; gap: 8px; align-items: baseline; color: var(--szary); margin-bottom: 4px; }
.trasa { list-style: none; margin: 8px 0 0; padding: 0 0 0 4px; }
.trasa li { position: relative; display: flex; justify-content: space-between; gap: 8px; padding: 3px 0 3px 18px; }
.trasa li::before {
  content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 2px; background: var(--ramka);
}
.trasa li::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%; background: var(--karta); border: 2px solid var(--slaby);
}
.trasa li.tu::after, .trasa li.cel::after { background: var(--akcent-tekst); border-color: var(--akcent-tekst); }
.trasa li.tu, .trasa li.cel { font-weight: 700; }
.trasa .g { font-variant-numeric: tabular-nums; color: var(--szary); }
.linki { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.linki a, .linki button {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--ramka); background: var(--tlo); text-decoration: none; font-size: .85rem; cursor: pointer;
}
.pusto { text-align: center; color: var(--szary); padding: 24px 8px; }

/* ---------- tabliczka (pełny rozkład) ---------- */
.tabliczka h2 { font-size: 1rem; margin: 12px 0 8px; }
.dni { display: flex; gap: 8px; margin: 8px 0; }
.siatka { background: var(--karta); border: 1px solid var(--ramka); border-radius: 12px; overflow: hidden; }
.godz { display: flex; border-top: 1px solid var(--ramka); }
.godz:first-child { border-top: 0; }
.godz.teraz { background: var(--teraz-godz); }
.godz .h { flex: none; width: 44px; padding: 6px 0; text-align: center; font-weight: 800; color: var(--akcent-tekst); font-variant-numeric: tabular-nums; }
.godz .m { flex: 1; display: flex; flex-wrap: wrap; gap: 2px 14px; padding: 6px 8px; font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.godz .m span.minelo { color: var(--slaby); text-decoration: line-through; text-decoration-thickness: 1px; }
.godz .m sup { font-size: .65rem; color: var(--szary); margin-left: 1px; }
.godz .m span.zolty { background: var(--zolty); border-radius: 4px; padding: 0 3px; }
.legenda { margin-top: 10px; }

/* ---------- okno wyszukiwania ---------- */
.szukaj {
  width: 100%; max-width: 640px; height: 100%; max-height: 100%; margin: 0 auto; padding: 0; border: 0;
  background: var(--tlo); color: var(--tekst);
}
.szukaj::backdrop { background: rgba(0, 0, 0, .4); }
.szukaj-gora {
  position: sticky; top: 0; display: flex; gap: 8px; align-items: center;
  padding: calc(10px + env(safe-area-inset-top)) 12px 10px; background: var(--naglowek); color: #fff;
}
.szukaj-gora input {
  flex: 1; min-width: 0; font: inherit; font-size: 1.05rem; padding: 10px 12px; border: 0; border-radius: 10px;
  background: var(--karta); color: var(--tekst);
}
.szukaj-wyniki { padding: 4px 12px 24px; }
.szukaj-wyniki h3 { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--szary); margin: 14px 4px 6px; }
.pozycja {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left;
  border: 0; border-bottom: 1px solid var(--ramka); background: var(--karta); padding: 10px 12px; min-height: 52px; cursor: pointer;
}
.grupa { border: 1px solid var(--ramka); border-radius: 12px; overflow: hidden; }
.grupa .pozycja:last-child { border-bottom: 0; }
.pozycja .n { font-weight: 600; }
.pozycja .odleglosc { display: block; font-weight: 400; font-size: .8rem; color: var(--szary); }
.w-poblizu { margin-top: 12px; }
.w-poblizu .pusto { padding: 12px 4px; text-align: left; }
.lokalizuj { width: 100%; justify-content: center; min-height: 44px; font-weight: 600; }
.pozycja .linie { gap: 3px; }

footer { color: var(--szary); font-size: .78rem; margin-top: 24px; }
footer p { margin: 4px 0; }

:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.gora :focus-visible, .szukaj-gora :focus-visible { outline-color: var(--akcent); }


/* ---------- połączenia skąd → dokąd ---------- */
.wiersz-opcji { display: flex; align-items: center; gap: 10px; padding: 8px 12px; min-height: 58px; }
.ikona-pieszo { display: inline-block; min-width: 34px; text-align: center; font-size: 1.4rem; }
.opcja.pieszo { background: transparent; box-shadow: none; border-style: dashed; }
.opcja .prawa .maly { display: block; max-width: 7.5em; margin-left: auto; white-space: normal; }
.kroki li.posrednie { color: var(--szary); font-size: .85rem; }
.kroki .podpis { display: block; font-weight: 400; font-size: .78rem; color: var(--szary); }
.pozycja.adres .n { font-weight: 600; }

/* ---------- nagłówek: skąd / dokąd ---------- */
.gora-wiersz { align-items: stretch; }
.gora-wiersz > .ikona-btn { align-self: center; }
.wybory { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wybory .przystanek-btn { min-height: 44px; padding: 4px 12px; }
.przystanek-btn .opis-miejsca { display: block; font-size: .75rem; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cel-wiersz { display: flex; gap: 4px; }
.cel-wiersz .przystanek-btn { flex: 1; min-width: 0; background: rgba(255, 255, 255, .08); border: 1px dashed rgba(255, 255, 255, .45); }
.przystanek-btn .nazwa.pusta { font-size: .9rem; font-weight: 500; opacity: .85; }
.przystanek-btn .nazwa.pusta::after { content: ""; }
.usun-cel { width: 40px; height: auto; font-size: 1.1rem; }