/* Recepcja Zgody (logowanie, app.html, reset.html). Tablet ma własny arkusz: /tablet/tablet.css. */

/* --- Tokeny --- */
:root {
  /* neutralne tonowane w stronę złota (hue 80) */
  --tlo: oklch(0.962 0.014 82);
  --powierzchnia: oklch(0.99 0.005 85);
  --powierzchnia-2: oklch(0.945 0.016 82);
  --linia: oklch(0.885 0.02 82);
  --linia-mocna: oklch(0.8 0.025 82);
  --tekst: oklch(0.22 0.012 70);
  --tekst-2: oklch(0.46 0.018 70);
  --tekst-3: oklch(0.55 0.02 75);
  /* marka */
  --zloto: oklch(0.7 0.095 80);
  --zloto-mocne: oklch(0.62 0.1 78);
  --zloto-tekst: oklch(0.47 0.09 76);
  --zloto-tlo: oklch(0.93 0.045 85);
  --czern: oklch(0.22 0.012 70);
  --czern-hover: oklch(0.3 0.015 70);
  --na-czerni: oklch(0.97 0.012 85);
  /* stany */
  --ok: oklch(0.5 0.12 150);
  --ok-tlo: oklch(0.94 0.05 150);
  --uwaga: oklch(0.5 0.13 60);
  --uwaga-tlo: oklch(0.94 0.06 75);
  --blad: oklch(0.5 0.17 28);
  --blad-tlo: oklch(0.95 0.04 28);
  --focus: oklch(0.62 0.1 78);
  /* geometria */
  --r-s: 6px; --r-m: 10px; --r-l: 14px; --radius: var(--r-m);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;
  --cien-1: 0 1px 2px oklch(0.3 0.02 70 / 0.06), 0 1px 3px oklch(0.3 0.02 70 / 0.04);
  --cien-2: 0 8px 24px oklch(0.3 0.03 70 / 0.1), 0 2px 6px oklch(0.3 0.02 70 / 0.06);
  --ruch: 180ms cubic-bezier(0.22, 1, 0.36, 1);
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Jost", system-ui, -apple-system, sans-serif;
  /* aliasy zgodności (stare nazwy) */
  --akcent: var(--zloto);
}

* { box-sizing: border-box; }
/* atrybut hidden musi wygrywać z display z klas (np. .overlay) */
[hidden] { display: none !important; }
html { scrollbar-color: var(--linia-mocna) var(--tlo); }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tlo);
  color: var(--tekst);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--zloto-tlo); color: var(--tekst); }
h1, h2, h3 { line-height: 1.15; text-wrap: balance; }
h1 { font-family: var(--serif); font-weight: 600; font-size: 2.25rem; letter-spacing: -0.01em; margin: 0 0 var(--s-4); }
h2 { font-size: 1.125rem; font-weight: 600; margin: 0 0 var(--s-4); }
h3 { font-size: 1rem; font-weight: 600; margin: 0 0 var(--s-2); }
a { color: var(--zloto-tekst); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--ruch); }
a:hover { color: var(--tekst); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-s); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }

/* --- Logowanie / nowe hasło --- */
.login__card {
  width: min(400px, 92vw);
  background: var(--powierzchnia);
  border: 1px solid var(--linia);
  border-radius: var(--r-l);
  padding: var(--s-6);
  box-shadow: var(--cien-2);
}
.login__card h1 { margin: 0; font-size: 2rem; }
.login__marka { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-2); }
.login__marka img { height: 44px; width: auto; }
.login__lead { color: var(--tekst-2); margin: 0 0 var(--s-5); }
.login__reset { margin: var(--s-4) 0 0; text-align: center; font-size: 0.9rem; }
form div { margin-bottom: var(--s-4); }
label { display: block; margin-bottom: var(--s-1); font-size: 0.875rem; color: var(--tekst-2); }
label > input, label > select { margin-top: var(--s-1); color: var(--tekst); }
input, select {
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--linia-mocna);
  border-radius: var(--r-s);
  background: var(--powierzchnia);
  transition: border-color var(--ruch), box-shadow var(--ruch);
}
input:hover, select:hover { border-color: var(--tekst-3); }
input:focus-visible, select:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--zloto-tlo); }
input::placeholder { color: var(--tekst-3); }
select { appearance: none; -webkit-appearance: none; padding-right: 2.2rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.7rem center; background-size: 16px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 1.25rem;
  border: 1px solid var(--czern);
  border-radius: var(--r-s);
  background: var(--czern);
  color: var(--na-czerni);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--ruch), border-color var(--ruch), color var(--ruch), transform var(--ruch), box-shadow var(--ruch);
}
.btn:hover { background: var(--czern-hover); border-color: var(--czern-hover); color: var(--na-czerni); transform: translateY(-1px); box-shadow: var(--cien-1); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn--ghost { background: transparent; color: var(--tekst); border-color: var(--linia-mocna); }
.btn--ghost:hover { background: var(--powierzchnia); color: var(--tekst); border-color: var(--tekst-3); }
.btn--uwaga { color: var(--blad); }
.btn--uwaga:hover { color: var(--blad); border-color: var(--blad); background: var(--blad-tlo); }
.btn--maly { min-height: 36px; padding: 0.3rem 0.8rem; font-size: 0.875rem; }
.err { color: var(--blad); min-height: 1.2em; margin: var(--s-2) 0; font-size: 0.9rem; }
.err.ok { color: var(--ok); }

/* --- Ekran aplikacji (app.html) --- */
body.app { display: block; }
.app .btn { width: auto; }
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); justify-content: space-between;
  padding: var(--s-2) var(--s-5); min-height: 60px;
  background: var(--powierzchnia); border-bottom: 1px solid var(--linia);
}
/* pasek ładowania: widoczny tylko podczas route(), animowany transformem */
.topbar::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: var(--zloto); transform: scaleX(0); transform-origin: left; opacity: 0;
  transition: opacity 150ms;
}
body.laduje .topbar::after { opacity: 1; animation: ladowanie 1.2s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
@keyframes ladowanie { 0% { transform: scaleX(0); transform-origin: left; } 60% { transform: scaleX(1); transform-origin: left; } 61% { transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }
.topbar__logo { font-weight: 600; display: flex; align-items: center; gap: var(--s-3); letter-spacing: 0.01em; }
.topbar__logo img { height: 36px; width: auto; display: block; }
.topbar nav { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.topbar nav a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s-3);
  color: var(--tekst-2); text-decoration: none; border-radius: var(--r-s); font-weight: 500;
  transition: color var(--ruch), background var(--ruch);
}
.topbar nav a:hover { color: var(--tekst); background: var(--powierzchnia-2); }
.topbar nav a[aria-current="page"] { color: var(--tekst); box-shadow: inset 0 -2px 0 var(--zloto); border-radius: var(--r-s) var(--r-s) 0 0; }
.topbar__user { display: flex; align-items: center; gap: var(--s-3); color: var(--tekst-2); }
.topbar__user .btn { min-height: 38px; padding: 0.3rem 0.9rem; }
#widok { max-width: 960px; margin: 0 auto; padding: var(--s-6) var(--s-5) var(--s-7); }
#widok:has(.wizyta) { max-width: 1200px; }

/* nagłówek widoku: tytuł + główna akcja w jednej linii */
.naglowek { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); }
.naglowek h1 { margin: 0; }
.naglowek__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); color: var(--tekst-2); margin-top: var(--s-2); }
/* długi tag w nagłówku łamie się na wąskim ekranie; jedna linia ma tę samą wysokość co zwykły tag (1.3em + 2×0.2em = 1em + 2×0.35em) */
.naglowek__meta .tag { white-space: normal; line-height: 1.3; padding-block: 0.2em; }
.naglowek__akcje { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.naglowek--sekcja { margin-top: var(--s-6); }
.wstecz { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--tekst-2); text-decoration: none; font-size: 0.9rem; margin-bottom: var(--s-4); min-height: 32px; }
.wstecz:hover { color: var(--tekst); }
.wstecz::before { content: "←"; }
.sekcja { margin-top: var(--s-6); }
.sekcja h2 { display: flex; align-items: baseline; gap: var(--s-3); }
.sekcja h2 .muted { font-weight: 400; font-size: 0.9rem; }

/* wyszukiwarka */
.szukaj { position: relative; margin-bottom: var(--s-4); }
.szukaj input { min-height: 56px; padding-left: 3rem; font-size: 1.125rem; border-radius: var(--r-m); box-shadow: var(--cien-1); }
.szukaj input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.szukaj svg { position: absolute; left: 1rem; top: 50%; translate: 0 -50%; width: 22px; height: 22px; color: var(--tekst-3); pointer-events: none; }
.podpowiedz { color: var(--tekst-2); font-size: 0.9rem; margin: 0; padding: var(--s-3) var(--s-1); }
.podpowiedz kbd { font: inherit; font-size: 0.8em; padding: 0 0.4em; border: 1px solid var(--linia-mocna); border-bottom-width: 2px; border-radius: 4px; background: var(--powierzchnia); }
.pusto { text-align: center; padding: var(--s-6) var(--s-4); color: var(--tekst-2); display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }
.pusto b { color: var(--tekst); }

/* listy wyników / stanowisk: wiersze z hoverem */
.lista { list-style: none; padding: 0; margin: 0; background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: var(--r-m); overflow: hidden; }
.lista:empty { display: none; }
.lista li { border-bottom: 1px solid var(--linia); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-4); }
.lista li:last-child { border-bottom: none; }
.lista li > a:not(.btn) { flex: 1; }
.lista li > .btn { margin-left: auto; }
.lista li > .btn + .btn { margin-left: 0; }
.lista a:not(.btn) {
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); align-items: baseline;
  color: var(--tekst); text-decoration: none; min-height: 44px; margin: calc(-1 * var(--s-3)) calc(-1 * var(--s-4)); padding: var(--s-3) var(--s-4);
  transition: background var(--ruch);
}
.lista li:has(> a:not(.btn):only-child) { padding: 0; }
.lista li:has(> a:not(.btn):only-child) a { margin: 0; width: 100%; }
.lista a:not(.btn):hover { background: var(--powierzchnia-2); }
.lista a:not(.btn)::after { content: "→"; margin-left: auto; color: var(--tekst-3); transition: transform var(--ruch), color var(--ruch); }
.lista a:not(.btn):hover::after { transform: translateX(3px); color: var(--tekst); }
.lista b { font-weight: 600; }
/* wynik wybrany strzałkami — ten sam wyróżnik co hover, plus złota krawędź, żeby dało się odróżnić od kursora myszy */
.lista li.aktywny > a:not(.btn) { background: var(--zloto-tlo); box-shadow: inset 3px 0 0 var(--zloto-mocne); }
.lista li.aktywny > a:not(.btn)::after { transform: translateX(3px); color: var(--tekst); }
.lista .muted { font-size: 0.875rem; }
.lista li.muted, .lista li.pusto { padding: var(--s-5) var(--s-4); justify-content: center; }
.muted { color: var(--tekst-2); font-size: 0.9rem; }

/* tagi stanu */
.tag {
  display: inline-flex; align-items: center; gap: 0.4em; vertical-align: middle;
  background: var(--zloto-tlo); color: var(--zloto-tekst); font-size: 0.8rem; font-weight: 500; line-height: 1;
  padding: 0.35em 0.7em; border-radius: 999px; white-space: nowrap;
}
.tag::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; flex: none; }
.tag--ok { background: var(--ok-tlo); color: var(--ok); }
.tag--uwaga { background: var(--uwaga-tlo); color: var(--uwaga); }
.tag--blad { background: var(--blad-tlo); color: var(--blad); }
.tag--cichy { background: var(--powierzchnia-2); color: var(--tekst-2); }
.tag--toku::before { animation: puls 1.6s ease-in-out infinite; }
.tag--duzy { font-size: 0.95rem; padding: 0.5em 0.9em; }
@keyframes puls { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.75); } }

/* tabele */
.tab { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tab-scroll { overflow-x: auto; background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: var(--r-m); }
.tab th, .tab td { text-align: left; padding: 0.7rem var(--s-4); border-bottom: 1px solid var(--linia); vertical-align: top; }
.tab th { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tekst-2); background: var(--powierzchnia-2); }
.tab tr:last-child td { border-bottom: none; }
.tab tbody tr:hover td, .tab tr:has(td):hover td { background: oklch(0.975 0.008 85); }
.tab td.pusto { text-align: center; color: var(--tekst-2); padding: var(--s-6) var(--s-4); }
.nr { white-space: nowrap; }
.tab .akcje { display: flex; gap: var(--s-1); margin-top: var(--s-2); }
.tab .akcje .btn { white-space: nowrap; }

/* nakładka blokady + okna dialogowe */
.overlay { position: fixed; inset: 0; background: oklch(0.2 0.01 70 / 0.55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 10; }
.overlay__card { width: min(340px, 90vw); background: var(--powierzchnia); border-radius: var(--r-l); padding: var(--s-5); box-shadow: var(--cien-2); }
.overlay__card h2 { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; }
.overlay__card .btn { width: 100%; }
dialog { width: min(440px, 92vw); border: none; border-radius: var(--r-l); padding: var(--s-5); color: var(--tekst); font-family: inherit; background: var(--powierzchnia); box-shadow: var(--cien-2); }
dialog::backdrop { background: oklch(0.2 0.01 70 / 0.55); }
dialog h2 { margin: 0 0 var(--s-4); font-size: 1.17rem; font-weight: 600; }
dialog p { margin: 0 0 var(--s-4); text-wrap: pretty; }
dialog label { margin-bottom: var(--s-3); }
.dlg__akcje { display: flex; gap: var(--s-2); margin: var(--s-5) 0 0; }
.dlg__akcje .btn { flex: 1 1 0; }
dialog .err:empty { display: none; }
dialog .pole-plec { margin-bottom: var(--s-3); }
/* Skan telefonem: kod QR duży i kontrastowy — telefon ma go złapać z pół metra */
.qr { width: min(280px, 70vw); margin: var(--s-4) auto; padding: var(--s-3); background: #fff; border: 1px solid var(--linia); border-radius: var(--r-m); }
.qr svg { display: block; width: 100%; height: auto; }
.dlg__stan { margin: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-s); background: var(--powierzchnia-2); color: var(--tekst-2); font-size: 0.9rem; }
.dlg__stan--ok { background: var(--ok-tlo); color: var(--ok); font-weight: 500; }

/* --- Formularze --- */
.karta { background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: var(--r-m); padding: var(--s-5); }
.karta h2 { margin: 0 0 var(--s-4); }
.karta--waska { max-width: 520px; }
.karta form > label, .karta > label { margin-bottom: var(--s-3); }
.karta .btn { margin-top: var(--s-2); }
.formularz-akcje { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-4); }
.chk { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; margin-bottom: var(--s-1); color: var(--tekst); font-size: 1rem; cursor: pointer; }
.chk input { width: auto; min-width: 20px; min-height: 20px; }
/* Kółka z ptaszkiem — ten sam znacznik zaznaczenia co na tablecie, mniejszy, bo tu klika mysz.
   Checkbox jest kwadratowy (zaokrąglony), radio okrągłe — recepcja odróżnia wielokrotny wybór od jednego. */
input[type="radio"], input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; position: relative; flex: none;
  width: 22px; height: 22px; min-width: 22px; min-height: 22px; margin: 0; padding: 0;
  border: 2px solid var(--linia-mocna); border-radius: 50%; background: var(--powierzchnia); cursor: pointer;
  transition: background var(--ruch), border-color var(--ruch), box-shadow var(--ruch);
}
input[type="checkbox"] { border-radius: 6px; }
input[type="radio"]:hover, input[type="checkbox"]:hover { border-color: var(--zloto-mocne); }
input[type="radio"]:focus-visible, input[type="checkbox"]:focus-visible { box-shadow: 0 0 0 3px var(--zloto-tlo); border-color: var(--focus); }
input[type="radio"]::after, input[type="checkbox"]::after {
  content: ""; position: absolute; inset: 0; background: var(--powierzchnia);
  --ptaszek: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='19 7.25 9.5 16.75 5 12.25'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--ptaszek); mask-image: var(--ptaszek);
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: 65%; mask-size: 65%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transform: scale(0); transition: transform var(--ruch);
}
input[type="radio"]:checked, input[type="checkbox"]:checked { background: var(--zloto-mocne); border-color: var(--zloto-mocne); }
input[type="radio"]:checked::after, input[type="checkbox"]:checked::after { transform: scale(1); }
.pyt { border: none; border-bottom: 1px solid var(--linia); padding: var(--s-3) 0; margin: 0; }
.pyt:last-of-type { border-bottom: none; }
.pyt legend { padding: 0; font-size: 0.95rem; color: var(--tekst); margin-bottom: var(--s-1); }
.pyt input[name^="dop:"] { margin-top: var(--s-2); }
.tn { display: flex; gap: var(--s-2); }
.tn .chk { min-height: 40px; margin: 0; }
/* pigułki Tak/Nie w ankiecie — ten sam język co tablet */
.app .tn .chk { flex: 0 1 140px; justify-content: center; border: 1px solid var(--linia-mocna); border-radius: 999px; padding: 0.25rem 1.25rem; transition: background var(--ruch), border-color var(--ruch), color var(--ruch); }
.app .tn .chk:hover { border-color: var(--zloto-mocne); }
.app .tn .chk:has(input:checked) { background: var(--czern); border-color: var(--czern); color: var(--na-czerni); }
.app .tn .chk:has(input:checked) input:checked { background: var(--na-czerni); border-color: var(--na-czerni); }
.app .tn .chk:has(input:checked) input:checked::after { background: var(--czern); }
/* Płeć: fieldset ma wyglądać jak zwykłe pole formularza, a trzy nazwy nie zmieszczą się w pigułce szerokiej jak "Tak" */
.pole-plec { border: none; padding: 0; margin: 0 0 var(--s-4); }
.pole-plec legend { padding: 0; margin-bottom: var(--s-1); font-size: 0.875rem; color: var(--tekst-2); }
.app .tn--plec { flex-wrap: wrap; gap: var(--s-2); }
.app .tn--plec .chk { flex: 0 1 auto; }

.tablet-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.tablet-row select { min-height: 44px; }

/* --- Nowa wizyta: siatka zabiegów + przyklejony pasek akcji --- */
.zabiegi { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-2); margin: 0 0 var(--s-5); }
.zabiegi .chk {
  margin: 0; padding: var(--s-2) var(--s-3); border: 1px solid var(--linia); border-radius: var(--r-s); background: var(--powierzchnia);
  min-height: 52px; line-height: 1.3; transition: border-color var(--ruch), background var(--ruch), box-shadow var(--ruch);
}
.zabiegi .chk:hover { border-color: var(--zloto-mocne); }
.zabiegi .chk:has(input:checked) { border-color: var(--zloto-mocne); background: var(--zloto-tlo); box-shadow: inset 0 0 0 1px var(--zloto-mocne); }
.wariant-zalecen { min-width: 0; padding: 0; border: 0; margin: 0 0 var(--s-5); }
.wariant-zalecen legend { padding: 0; font-weight: 600; line-height: 1.4; }
.wariant-zalecen .muted { font-size: .875rem; margin: 4px 0 12px; }
.wariant-zalecen .zabiegi { margin-bottom: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.wariant-zalecen .chk > span { min-width: 0; }
.wariant-zalecen .err:empty { display: none; }
.pasek-akcji {
  position: sticky; bottom: 0; z-index: 3;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4);
  padding: var(--s-3) var(--s-4); margin: 0 calc(-1 * var(--s-2));
  background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: var(--r-m); box-shadow: var(--cien-2);
}
.pasek-akcji .licznik { font-weight: 500; }
.pasek-akcji .licznik b { color: var(--zloto-tekst); font-size: 1.25rem; font-weight: 600; margin-right: 0.2em; }
.pasek-akcji label { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 0 auto; }
.pasek-akcji label select { width: auto; min-width: 120px; margin: 0; }
.pasek-akcji .btn { min-width: 120px; }
.pasek-akcji .err { flex-basis: 100%; margin: 0; min-height: 0; }
.pasek-akcji .err:empty { display: none; }

/* --- Wizyta: dwie kolumny, formularz w kartach, akcje w bocznej kolumnie --- */
.wizyta { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-6); align-items: start; margin-top: var(--s-3); }
.wizyta__glowna { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.wizyta__glowna h1 { margin-bottom: var(--s-1); }
/* „Wypełnij tutaj” przy kartce na tablecie: ankieta czeka na zgodę zdrowotną (fieldset bez własnej ramki) */
.blok-ankiety { border: 0; padding: 0; margin: 0; min-width: 0; }
.blok-ankiety[disabled] { opacity: 0.55; }
.wizyta__bok { position: sticky; top: calc(60px + var(--s-4)); display: flex; flex-direction: column; gap: var(--s-4); }
.wizyta__bok .karta { padding: var(--s-4) var(--s-5); }
.wizyta__bok h2 { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tekst-2); margin-bottom: var(--s-3); }
.wizyta__bok .btn { margin: 0; }
.wizyta__bok .muted { margin: var(--s-3) 0 0; }
.wizyta__bok .muted:empty { display: none; }
#stan-wizyty { margin-bottom: var(--s-3); }
.karta__naglowek { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.karta__naglowek h2 { margin: 0; }
.postep { height: 6px; background: var(--powierzchnia-2); border-radius: 999px; overflow: hidden; margin: var(--s-3) 0 var(--s-4); }
.postep div { height: 100%; width: 100%; background: var(--zloto); border-radius: 999px; transform: scaleX(0); transform-origin: left; transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1); }
.pion { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; }
.pion .btn, .pion select { width: 100%; text-align: center; }
.app a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
#wynik .lista, #wynik h2 { margin-top: var(--s-4); }
#wynik .lista li b { min-width: 6rem; }
.kod-parowania { text-align: center; background: var(--powierzchnia); border: 1px dashed var(--linia-mocna); border-radius: var(--r-m); padding: var(--s-5); margin: var(--s-4) 0; }
.kod-parowania .kod { font-size: 3rem; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0.3em; text-indent: 0.3em; margin: var(--s-2) 0; color: var(--tekst); }
.kod-parowania p { margin: 0; }
.stan-kropka { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--tekst-3); flex: none; }
.stan-kropka--online { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-tlo); }

@media (max-width: 900px) {
  .wizyta { grid-template-columns: minmax(0, 1fr); }
  .wizyta__bok { position: static; }
  h1 { font-size: 1.85rem; }
}
@media (max-width: 600px) {
  .topbar { padding: var(--s-2) var(--s-4); }
  #widok { padding: var(--s-5) var(--s-4) var(--s-7); }
  .karta { padding: var(--s-4); }
  .pasek-akcji label { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  body.laduje .topbar::after { opacity: 1; transform: scaleX(1); }
}

/* --- Scena przebiegu wizyty: stan widoczny z drugiego końca lady --- */
.scena {
  position: relative; background: var(--powierzchnia); border: 1px solid var(--linia); border-left: 5px solid var(--scena-kolor, var(--linia-mocna));
  border-radius: var(--r-m); padding: var(--s-5) var(--s-5) var(--s-4); box-shadow: var(--cien-1);
}
.scena--toku { --scena-kolor: var(--zloto-mocne); background: linear-gradient(90deg, var(--zloto-tlo), var(--powierzchnia) 55%); }
.scena--ok { --scena-kolor: var(--ok); background: linear-gradient(90deg, var(--ok-tlo), var(--powierzchnia) 55%); }
.scena--uwaga { --scena-kolor: var(--uwaga); background: linear-gradient(90deg, var(--uwaga-tlo), var(--powierzchnia) 55%); }
.scena--cichy { --scena-kolor: var(--linia-mocna); }
.scena__naglowek { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-2); }
.scena__tytul { font-size: 1.5rem; font-weight: 600; margin: 0; line-height: 1.2; letter-spacing: -0.005em; }
.scena--toku .scena__tytul::before, .scena--uwaga .scena__tytul::before {
  content: ""; display: inline-block; width: 0.55em; height: 0.55em; border-radius: 50%; margin-right: 0.45em; vertical-align: 0.05em;
  background: var(--scena-kolor); box-shadow: 0 0 0 0.25em color-mix(in oklab, var(--scena-kolor) 22%, transparent);
}
.scena--toku .scena__tytul::before { animation: puls 1.6s ease-in-out infinite; }
.scena__opis { margin: 0 0 var(--s-3); max-width: 62ch; text-wrap: pretty; }
.scena__meta { margin: 0 0 var(--s-3); color: var(--tekst-2); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.scena__meta [data-czas] { color: var(--tekst); font-weight: 500; }
.scena__krok { margin: var(--s-3) 0 var(--s-2); font-size: 0.95rem; }
.scena__krok b { font-weight: 600; }
.kroki-pc { display: flex; gap: var(--s-2); }
.kroki-pc span { flex: 1 1 0; font-size: 0.75rem; color: var(--tekst-3); text-align: center; }
.kroki-pc span::before { content: ""; display: block; height: 6px; border-radius: 999px; background: var(--linia); margin-bottom: 0.35rem; }
.kroki-pc span.zrobiony::before { background: var(--zloto-mocne); }
.kroki-pc span.aktywny::before { background: var(--zloto-mocne); animation: puls-pasek 1.6s ease-in-out infinite; }
.kroki-pc span.aktywny { color: var(--tekst); font-weight: 600; }
@keyframes puls-pasek { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.scena__offline { margin: var(--s-3) 0 0; padding: var(--s-2) var(--s-3); background: var(--blad-tlo); color: var(--blad); border-radius: var(--r-s); font-size: 0.9rem; }
.scena .lista--dokumenty { margin-top: var(--s-3); }

/* panel „Co teraz": jedna czarna akcja, reszta ghost */
.akcje-pion { display: flex; flex-direction: column; gap: var(--s-2); }
.akcje-pion .btn, .akcje-pion select { width: 100%; text-align: center; }
.akcje-pion .btn { margin: 0; }
.akcje-pion .btn:not(.btn--ghost) { min-height: 52px; font-size: 1.05rem; }
.akcje-pion select { margin: 0; }
.akcje-pion .btn--ghost + .btn--ghost { margin-top: 0; }
.akcje-pion .btn--uwaga { margin-top: var(--s-3); }

/* wynik wypełnienia */
.wynik h3 { margin: var(--s-4) 0 var(--s-2); font-size: 0.95rem; }
.wynik__liczby { margin: 0; color: var(--tekst-2); }
.wynik__liczby b { color: var(--tekst); font-weight: 600; }
.wynik__flagi-tytul { display: flex; align-items: center; gap: var(--s-2); }
.wynik__ile { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em; height: 1.6em; padding: 0 0.4em; border-radius: 999px; background: var(--powierzchnia-2); color: var(--tekst-2); font-size: 0.8rem; font-weight: 600; }
.wynik__ile--uwaga { background: var(--uwaga); color: var(--na-czerni); }
.flagi, .uwagi, .opcjonalne, .braki { margin: 0; padding: 0; list-style: none; }
.flagi li { position: relative; padding: var(--s-2) 0 var(--s-2) 1.4rem; border-bottom: 1px solid var(--linia); }
.flagi li:last-child { border-bottom: none; }
.flagi li::before { content: ""; position: absolute; left: 0.2rem; top: 0.95em; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--uwaga); }
.flagi i { color: var(--tekst-2); }
.uwagi li, .opcjonalne li { padding: var(--s-1) 0; font-size: 0.95rem; }
.opcjonalne { margin-top: var(--s-4); }
.opcjonalne summary { cursor: pointer; font-size: 0.95rem; font-weight: 600; }
.opcjonalne summary b { color: var(--tekst); }
.opcjonalne summary .muted { font-weight: 400; }
.opcjonalne ul { margin: var(--s-2) 0 0; padding: 0; list-style: none; }
.opcjonalne li { display: flex; gap: var(--s-2); align-items: flex-start; color: var(--tekst-2); font-size: 0.9rem; }
.opcjonalne .tag { flex: none; margin-top: 0.15em; }
.braki li { padding: var(--s-1) 0 var(--s-1) 1rem; border-left: 3px solid var(--uwaga); margin-bottom: var(--s-1); }
.wynik--blad h2 { color: var(--blad); }
.lista--dokumenty li b { min-width: 9rem; }
.lista--dokumenty li .muted { font-size: 0.85rem; }
#wynik > .karta { margin-top: 0; }
#wynik:empty, #wynik-wypelnienia:empty { display: none; }
#przebieg:empty { display: none; }

.lista--historia li { gap: var(--s-3); }

/* Zalecenia do wydruku (karta wizyty) */
.zalecenia-lista { display: grid; gap: var(--s-2); margin-bottom: var(--s-3); }
.tag--projekt { background: var(--uwaga-tlo); color: var(--uwaga); border: 1px dashed var(--uwaga); }

/* Zakładka Zalecenia + wizyty w karcie klienta */
.naglowek__lead { margin: var(--s-2) 0 0; max-width: 68ch; color: var(--tekst-2); text-wrap: pretty; }
.zalecenia-dla { max-width: 420px; margin-bottom: var(--s-5); }
.zalecenia-dla .muted { font-size: 0.8rem; }
.zabiegi .chk > span { display: flex; flex-direction: column; gap: 2px; }
.zabiegi .chk small { color: var(--tekst-2); font-size: 0.8rem; }
.lista--wizyty li { gap: var(--s-2) var(--s-3); }
.wizyta__data { flex: none; min-width: 6.2rem; font-variant-numeric: tabular-nums; font-weight: 600; }
.wizyta__zabiegi { flex: 1 1 14rem; min-width: 0; }
.lista--wizyty .btn { margin-left: 0; }
.lista--wizyty .btn:first-of-type { margin-left: auto; }
.zalecenia-lista .chk { flex-wrap: wrap; row-gap: var(--s-1); }