/* Wspólny język wizualny: formularz, oferta, strona pracownika i panel (4.3).
   „Premium” = spokój, porządek, pewność: jeden akcent, ciepłe neutralne, kolory stanów osobno, bez gradientów i cieni.
   Czcionka systemowa (najszybsza na słabym telefonie, pełne polskie znaki), dwie grubości: 400 i 700. */
:root {
  color-scheme: light dark;
  /* neutralne z lekkim ciepłym odcieniem (jak formularz) */
  --bg:#f5f3ef; --card:#ffffff; --ink:#1c1f23; --muted:#5a6370; --line:#dcd7cf;
  /* jeden akcent */
  --accent:#1d4ed8; --accent-ink:#ffffff; --accent-bg:#e8eefc; --link:#1d4ed8;
  /* stany – osobno od akcentu; --ok/--err/--warn to wypełnienia (biały tekst), *-text to kolor tekstu */
  --ok:#15803d; --ok-text:#15803d; --ok-bg:#e3f4e8;
  --warn:#a15c07; --warn-text:#8a4b04; --warn-bg:#fdf3dc; --warn-line:#ecd08a;
  --err:#b91c1c; --err-text:#b91c1c; --err-bg:#fbe5e5;
  --fill-ink:#1c1f23;
  /* skala odstępów (wielokrotności 4 px), typografii, jeden promień */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;
  --t-small:16px; --t-base:17px; --t-lead:19px; --t-h2:20px; --t-h1:26px; --t-kwota:32px;
  --r:12px; --dotyk:48px;
  --ruch:160ms;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#131517; --card:#1d2023; --ink:#eceef0; --muted:#a4acb5; --line:#353a40;
    --accent:#2f62e6; --accent-ink:#ffffff; --accent-bg:#1c2a4d; --link:#8fb0ff;
    --ok:#15803d; --ok-text:#5fd88a; --ok-bg:#12301d;
    --warn:#a15c07; --warn-text:#f2bb55; --warn-bg:#33270c; --warn-line:#6b5216;
    --err:#c62828; --err-text:#ff8a8a; --err-bg:#3a1717;
    --fill-ink:#3b4148;
  }
}
[hidden] { display:none !important; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:400 var(--t-base)/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif; }
main { max-width:760px; margin:0 auto; padding:var(--s4) var(--s4) 96px; }
h1 { font-size:var(--t-h1); line-height:1.2; font-weight:700; }
h2, h3 { font-weight:700; }
b, strong, th { font-weight:700; }
a { color:var(--link); }
input, select, textarea, button { font:inherit; color:inherit; }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea {
  min-height:var(--dotyk); background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:var(--r); }
input[type=checkbox], input[type=radio] { width:22px; height:22px; accent-color:var(--accent); vertical-align:middle; }
button { min-height:var(--dotyk); border-radius:var(--r); }
:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
small, .meta, .info, .lead, .hint, .podpowiedz, .status { font-size:var(--t-small); }
/* przejścia 150–200 ms, wyłączone przy „ogranicz animacje” */
a, button, summary, input, select, textarea { transition:background-color var(--ruch), border-color var(--ruch), color var(--ruch), opacity var(--ruch); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition:none !important; animation:none !important; } }

/* --- nawigacja panelu: na telefonie dolny pasek (kciuk), na laptopie górny --- */
.nav-panel { position:fixed; left:0; right:0; bottom:0; z-index:20; display:grid; grid-template-columns:repeat(5, 1fr);
  background:var(--card); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); }
.nav-panel a, .nav-panel button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:60px;
  padding:6px 2px; color:var(--muted); text-decoration:none; font-size:13px; font-weight:700; background:none; border:0; border-radius:0; position:relative; cursor:pointer; }
.nav-panel a[aria-current=page] { color:var(--accent); }
.nav-panel a[aria-current=page]::before { content:""; position:absolute; top:0; left:20%; right:20%; height:3px; background:var(--accent); border-radius:0 0 3px 3px; }
.nav-panel .ikona { width:24px; height:24px; }
.nav-panel .licznik { position:absolute; top:4px; left:calc(50% + 6px); margin:0 !important; }
.nav-wiecej { position:fixed; left:0; right:0; bottom:60px; z-index:21; background:var(--card); border-top:1px solid var(--line); padding:var(--s2) var(--s4) var(--s4); display:grid; gap:var(--s2); }
.nav-wiecej[hidden] { display:none; }
.nav-wiecej a { display:flex; align-items:center; gap:var(--s3); min-height:var(--dotyk); padding:0 var(--s3); border-radius:var(--r); color:var(--ink); text-decoration:none; font-weight:700; }
.nav-wiecej a:hover { background:var(--accent-bg); }
@media (min-width:900px) {
  main { padding-bottom:var(--s8); }
  .nav-panel { position:sticky; top:0; bottom:auto; display:flex; flex-wrap:wrap; justify-content:center; gap:0 var(--s1); border-top:0; border-bottom:1px solid var(--line); padding:0 var(--s4); }
  .nav-panel a, .nav-panel button { flex:none; flex-direction:row; gap:var(--s2); min-height:56px; padding:0 var(--s2); font-size:var(--t-small); white-space:nowrap; }
  .nav-panel a[aria-current=page]::before { top:auto; bottom:0; left:var(--s3); right:var(--s3); border-radius:3px 3px 0 0; }
  .nav-panel .licznik { position:static; }
  .nav-panel .tylko-telefon, .nav-wiecej .tylko-telefon, .nav-wiecej hr { display:none; }
  /* „Więcej” na laptopie: lista rozwijana pod paskiem */
  .nav-wiecej { position:fixed; top:57px; bottom:auto; left:auto; right:max(var(--s4), calc(50% - 560px)); width:260px; border:1px solid var(--line); border-radius:var(--r); z-index:30; }
}
.nav-wiecej hr { border:0; border-top:1px solid var(--line); margin:var(--s1) 0; width:100%; }
.nav-panel .wiecej-btn[aria-current=page] { color:var(--accent); }
@media (max-width:899px) { .nav-panel .tylko-laptop { display:none; } }

/* --- wspólne elementy --- */
.ikona { width:1.15em; height:1.15em; vertical-align:-0.2em; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.szkielet { height:76px; border-radius:var(--r); margin-bottom:var(--s3); background:linear-gradient(90deg, var(--card), var(--line), var(--card)); background-size:200% 100%; animation:szkielet 1.2s infinite linear; opacity:.7; }
@keyframes szkielet { from { background-position:200% 0; } to { background-position:-200% 0; } }
.pusto { color:var(--muted); background:var(--card); border:1px dashed var(--line); border-radius:var(--r); padding:var(--s5); text-align:center; }
.pusto a { display:inline-flex; align-items:center; min-height:var(--dotyk); font-weight:700; }
.licznik { display:inline-block; min-width:20px; padding:0 6px; margin-left:5px; border-radius:99px; background:var(--err); color:#fff; font-size:12px; font-weight:700; text-align:center; line-height:20px; }
.pasek-demo { display:block; background:var(--err); color:#fff; text-align:center; font-weight:800; font-size:18px; padding:10px 12px; text-decoration:none; }
.pasek-test { background:var(--warn-bg); color:var(--warn-text); text-align:center; font-size:var(--t-small); padding:6px 12px; }
.offline { position:fixed; left:var(--s3); right:var(--s3); bottom:72px; z-index:30; background:var(--fill-ink); color:#fff; border-radius:var(--r); padding:var(--s3) var(--s4); font-size:var(--t-small); }
@media (min-width:900px) { .offline { bottom:var(--s4); left:auto; max-width:420px; } }
/* cele dotyku ≥ 48 px także dla linków w treści (telefon, Nawiguj, Kalendarz Google, powrót) */
.linki a, .dol a, .kto a, a.powrot, summary { display:inline-flex; align-items:center; gap:6px; min-height:var(--dotyk); }
.linki { gap:4px 16px !important; }
/* bardzo wąsko (360 px przy powiększeniu 200%): w pasku same ikony, napis zostaje dla czytnika ekranu */
@media (max-width:340px) {
  .nav-panel a span, .nav-panel button span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .nav-panel .ikona { width:28px; height:28px; }
  .typy { grid-template-columns:1fr !important; }
  main { padding-left:var(--s3); padding-right:var(--s3); }
}
.nav-panel a, .nav-panel button { min-width:0; }
main { overflow-wrap:anywhere; } .nowe-znak { white-space:normal; }
select { max-width:100%; } .rzad { flex-wrap:wrap; } .rzad button { min-width:0; }
input, textarea { max-width:100%; min-width:0; }

/* --- kalendarz zajętości (panel: Kalendarz i „Umów wizytę”) --- */
.kal-nag { display:flex; align-items:center; justify-content:space-between; gap:var(--s2); margin-bottom:var(--s2); font-size:var(--t-lead); }
.kal-strz { min-width:var(--dotyk); background:var(--card); border:1px solid var(--line); color:var(--ink); font-size:24px; line-height:1; cursor:pointer; }
.kal-siatka { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:4px; }
.kal-dt { text-align:center; font-size:13px; font-weight:700; color:var(--muted); padding:2px 0; }
.kal-dzien { display:flex; flex-direction:column; align-items:center; gap:2px; min-height:58px; padding:4px 2px; background:var(--card); border:1px solid var(--line); color:var(--ink); cursor:pointer; }
.kal-dzien.weekend { background:transparent; }
.kal-dzien.minal { opacity:.45; }
.kal-dzien.wolny { border-color:var(--ok); }
.kal-dzien.pelny { background:var(--err-bg); }
.kal-dzien.dzis .kal-nr { background:var(--accent); color:var(--accent-ink); border-radius:99px; padding:0 7px; }
.kal-dzien.wybrany { outline:3px solid var(--accent); outline-offset:-1px; }
.kal-nr { font-weight:700; white-space:nowrap; }
.kal-kropki { display:flex; flex-wrap:wrap; justify-content:center; gap:2px; max-width:40px; }
.kal-kropki i, .kal-legenda i { display:inline-block; width:8px; height:8px; border-radius:99px; background:var(--ok); }
.kal-kropki i.czesc, .kal-legenda i.czesc { background:#e0a106; }
.kal-kropki i.zajety, .kal-legenda i.zajety { background:var(--err); }
.kal-ile { font-size:12px; color:var(--muted); }
.kal-legenda { display:flex; flex-wrap:wrap; gap:var(--s3); font-size:14px; color:var(--muted); margin:var(--s2) 0; }