/*
  Formularz konfiguracyjny — style.

  Wszystkie kolory pochodzą z theme.css; tutaj są tylko wyliczane rgba()
  na cienie, poświaty i przezroczystości. Wygląd celowo kopiuje środowisko
  testowe: belka z okrągłymi kropkami, okno z błękitną ramką, białe karty
  na jasnym tle, Inter.

  Układ ekranu:
    belka (logo · kropki części · zapis + menu)
    scena = okno (start | nawigacja kroków + karta kroku | podsumowanie)
*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
  `hidden` ma znaczyć „nie ma tego na ekranie”, kropka — nasze deklaracje
  `display: grid/flex` na widokach inaczej by go przegłosowały.
*/
[hidden] {
  display: none !important;
}

/*
  Wysokość belki jedną liczbą — od niej zależy odstęp treści od góry
  i pozycja elementów przyklejonych (pasek kroków, akcje podsumowania).
  Wartości zmierzone: 73 px na desktopie, 65 px na telefonie.
*/
:root {
  --belka-h: 73px;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

p {
  margin: 0;
}

button {
  font: inherit;
  cursor: pointer;
}

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

/* ---------------------------------------------------------------- logo -- */

.logo {
  display: inline-flex;
  align-items: flex-end;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--color-text);
  text-decoration: none;
  flex-shrink: 0;
}

.logo__dot {
  width: 0.22em;
  height: 0.22em;
  margin-left: 0.08em;
  margin-bottom: 0.03em;
  border-radius: 999px;
  background: var(--color-primary);
  flex-shrink: 0;
}

/* ---------------------------------------------- okno: sidebar + robocza -- */

/*
  Jedno okno w stylu aplikacji (wzór: panel ARKANIP Workspace): ciemny
  sidebar po lewej i jasna część robocza po prawej dzielą JEDNĄ ramkę,
  jedno zaokrąglenie i jeden cień. Wcześniejsze dwie osobne karty z przerwą
  między nimi — nie przywracać.

  `overflow: clip` zamiast `hidden`: przycina rogi, ale NIE robi z okna
  kontenera przewijania, więc sidebar i belka mogą być `position: sticky`
  względem okna przeglądarki.
*/
.okno {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  width: calc(100% - 2 * var(--space-4));
  min-height: calc(100vh - 2 * var(--space-4));
  margin: var(--space-4) auto;
  border: 1px solid var(--ramka-okna);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: var(--shadow-lg);
  overflow: clip;
}

/*
  Sidebar: granat ze środowiska testowego, gwiazdy na canvasie (gwiazdy.js)
  i dwie błękitne poświaty. Sam .panel rozciąga się na CAŁĄ wysokość okna
  (tło i gwiazdy sięgają od góry do dołu, nic jasnego nie prześwituje),
  a przyklejona do ekranu jest tylko jego treść (.panel__tresc).
  Wcześniejszy wariant „sticky na całym panelu o wysokości ekranu”
  zostawiał jasne paski nad i pod panelem — nie przywracać.
*/
.panel {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(420px 260px at 110% -10%, rgba(39, 99, 197, 0.55), transparent 65%),
    radial-gradient(360px 240px at -20% 110%, rgba(14, 165, 183, 0.32), transparent 65%),
    linear-gradient(165deg, var(--color-ink-soft), var(--color-ink));
  color: var(--color-text-inverse);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06);
}

.panel__gwiazdy {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.panel__tresc {
  position: sticky;
  top: var(--space-4);
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 2 * var(--space-4));
  padding: 22px 16px 16px;
  overflow-y: auto;
  /* Bez widocznego paska przewijania: jego tor rysował jasną smugę przy
     krawędzi sidebaru. Kółko myszy i dotyk przewijają dalej. */
  scrollbar-width: none;
}

.panel__tresc::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.logo--jasne {
  padding: 4px 8px 20px;
  font-size: 24px;
  color: var(--color-text-inverse);
}

.panel__dol {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Część robocza: belka tytułowa u góry, pod nią scena z widokami. */
.robocza {
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* Błękitna poświata z prawej — kolor kropki ARKANIP (#2763c5), nie turkus. */
  background:
    radial-gradient(1100px 560px at 100% 0%, rgba(39, 99, 197, 0.16), transparent 62%),
    radial-gradient(700px 900px at 102% 60%, rgba(39, 99, 197, 0.08), transparent 60%),
    var(--color-bg);
}

/* --------------------------------------------------------------- belka -- */

.belka {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  min-height: var(--belka-h);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.belka__tytul {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.belka__eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.belka__nazwa {
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
  Mleczna belka jak w środowisku. Rozmycie jest tu dozwolone: pod belką
  przewija się statyczny formularz, nie animowana treść.
*/
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .belka {
    background: color-mix(in srgb, var(--color-surface) 82%, transparent);
    backdrop-filter: blur(14px);
  }
}

.belka__akcje {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  position: relative;
}

.zapis {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.zapis:empty {
  display: none;
}

.belka__menu {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text-muted);
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.belka__menu:hover,
.belka__menu[aria-expanded="true"] {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Dymek menu — wisi pod kropkami, przy prawej krawędzi belki. */
.menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  border-radius: var(--radius);
  border: 1px solid rgba(39, 99, 197, 0.35);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.menu__pozycja {
  text-align: left;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.menu__pozycja:hover {
  background: var(--color-surface-alt);
  color: var(--color-primary);
}

.menu__pozycja--ostrozna {
  color: var(--color-danger);
}

.menu__pozycja--ostrozna:hover {
  color: var(--color-danger);
}

/* ----------------------------------------------------- postęp w belce -- */

/*
  Środek belki: sam pasek postępu całości (procent wypełnionych pól),
  wyśrodkowany. Wcześniejsze warianty — pigułki „Część 1 / Część 2 / …”
  oraz trzy segmenty części pod paskiem — usunięte na życzenie
  właściciela, nie przywracać.
*/
.postep-belka {
  justify-self: center;
  width: clamp(200px, 30vw, 460px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.postep-belka__gora {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.postep-belka__tytul {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.postep-belka__procent {
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
}

.postep-belka__tor {
  height: 7px;
  border-radius: 999px;
  background: var(--color-border);
  overflow: hidden;
}

.postep-belka__wypelnienie {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transition: width 0.4s var(--ease);
}

/* Przycisk podsumowania przy menu — zaznaczony, gdy jesteśmy na podsumowaniu. */
.belka__menu[aria-selected="true"] {
  color: var(--color-text-inverse);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* --------------------------------------------------- paski przewijania -- */

/* Firefox — właściwości standardowe TYLKO tutaj (Chromium po nich ignoruje
   style ::-webkit-scrollbar-*). */
@supports (-moz-appearance: none) {
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(39, 99, 197, 0.3) transparent;
  }
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(39, 99, 197, 0.3);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(39, 99, 197, 0.55);
}

::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

/* ---------------------------------------------------------------- scena -- */

/*
  Okno z błękitną ramką — ten sam element, co w środowisku testowym.
  W odróżnieniu od środowiska okno rośnie z treścią, a przewija się cała
  strona: formularz ma być wygodny także na laptopie i telefonie, a sztywna
  wysokość z wewnętrznym przewijaniem gubiłaby pola pod krawędzią.
*/
/*
  Scena — treść części roboczej pod belką. Nie ma własnej ramki: ramkę
  ma całe okno (.okno), a scena jest jego jasnym wnętrzem.
*/
.scena {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  padding: var(--space-5) var(--space-6) var(--space-6);
}

.widok {
  width: 100%;
}

.nadtytul {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

/* ------------------------------------------------------------- przyciski -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-weight: 650;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.18s var(--ease), transform 0.12s var(--ease),
    border-color 0.18s var(--ease), color 0.18s var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: linear-gradient(145deg, var(--color-primary), var(--color-primary-dark));
  color: var(--color-text-inverse);
  box-shadow: 0 6px 18px rgba(39, 99, 197, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn--primary:hover {
  background: var(--color-primary-dark);
  box-shadow: 0 8px 22px rgba(39, 99, 197, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn--cichy {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.btn--cichy:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn--duzy {
  padding: 13px 26px;
  font-size: 15px;
}

.btn--maly {
  padding: 6px 12px;
  font-size: 12.5px;
}

.btn--dodaj {
  background: var(--color-surface-alt);
  border: 1px dashed var(--color-border-strong);
  color: var(--color-primary);
}

.btn--dodaj:hover {
  border-color: var(--color-primary);
  background: rgba(39, 99, 197, 0.06);
}

.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ----------------------------------------------------------------- start -- */

.widok--start {
  display: flex;
}

.start {
  max-width: 880px;
  margin: auto;
  padding: var(--space-6) var(--space-4);
  text-align: center;
}

.start__tytul {
  margin-top: var(--space-4);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.start__lead {
  max-width: 640px;
  margin: var(--space-4) auto 0;
  color: var(--color-text-muted);
  font-size: 16px;
}

.start__czesci {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
  text-align: left;
}

.kafel {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  color: inherit;
  text-align: left;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
    border-color 0.2s var(--ease);
}

.kafel:hover {
  transform: translateY(-3px);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
}

.kafel:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(39, 99, 197, 0.2), var(--shadow-lg);
}

.kafel__gora {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.kafel__numer {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
}

.kafel__rola {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.kafel__tytul {
  margin-top: var(--space-4);
  font-size: 19px;
  font-weight: 750;
}

.kafel__opis {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: 13.5px;
}

.kafel__stopka {
  margin-top: auto;
  padding-top: var(--space-4);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-primary);
}

.start__akcje {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-6);
}

.start__info {
  max-width: 560px;
  margin: var(--space-4) auto 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* ------------------------------------------------------- widok kroku -- */

.widok--krok {
  display: block;
}

/* --- nawigacja kroków (w sidebarze) --- */

/*
  Lista części i kroków przewija się WEWNĄTRZ sidebaru (bez widocznego
  paska), a podsumowanie na dole stoi zawsze w miejscu. Bez `min-height: 0`
  flex nie pozwoliłby liście się skurczyć i kroki nachodziłyby na dół.
*/
.nawigacja {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  margin: 0 -4px;
  padding: 0 4px;
}

.nawigacja::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.nawigacja__tresc {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/*
  Część formularza w sidebarze: tytuł-przycisk (numer, nazwa, licznik,
  pasek postępu, procent), a pod nim kroki — tylko w części bieżącej.
*/
.nawigacja__czesc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 12px;
}

/* Otwarta część — tafla szkła (patrz tokeny --szklo-* w theme.css). */
.nawigacja__czesc[data-otwarta="tak"] {
  padding-bottom: 6px;
  background: var(--szklo-tlo-cichy);
  border: 1px solid var(--szklo-krawedz);
  box-shadow: var(--szklo-polysk), var(--szklo-cien);
}

.nawigacja__tytul {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: none;
  text-align: left;
  color: rgba(255, 255, 255, 0.75);
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.nawigacja__tytul:hover {
  background: var(--szklo-tlo-cichy);
  border-color: var(--szklo-krawedz);
  color: var(--color-text-inverse);
}

.nawigacja__czesc[data-otwarta="tak"] .nawigacja__tytul {
  color: var(--color-text-inverse);
}

.nawigacja__tytul-numer {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 12px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.7);
}

.nawigacja__czesc[data-otwarta="tak"] .nawigacja__tytul-numer {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: 0 4px 12px rgba(39, 99, 197, 0.45);
}

.nawigacja__tytul-teksty {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.nawigacja__tytul-nazwa {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nawigacja__licznik {
  margin-top: 1px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}

.nawigacja__procent {
  font-size: 11.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary-bright);
}

/* Postęp części — cienki tor pod licznikiem. */
.nawigacja__tor {
  display: block;
  margin-top: 6px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

/* Kroki otwartej części — na całą szerokość tafli, bez wcięcia i kreski
   (kreska po lewej ścinała miejsce na nazwy — nie przywracać). */
.nawigacja__kroki {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 4px 0;
}

.nawigacja__wypelnienie {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-primary-bright), var(--color-accent));
  transition: width 0.4s var(--ease);
}

/* Przejścia między częściami — na dole panelu, oddzielone kreską. */
.nawigacja__czesc--dalej {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.nawigacja__krok--koncowy .nawigacja__nazwa {
  white-space: normal;
  line-height: 1.3;
}

.nawigacja__krok--wstecz,
.nawigacja__krok--wstecz .nawigacja__nazwa small {
  color: rgba(255, 255, 255, 0.55);
}

.nawigacja__krok--koncowy .nawigacja__nazwa small {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.nawigacja__krok {
  display: grid;
  grid-template-columns: 18px 20px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 9px 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: none;
  text-align: left;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  transition: background 0.15s var(--ease), color 0.15s var(--ease),
    border-color 0.15s var(--ease);
}

.nawigacja__krok:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--color-text-inverse);
}

/* Bieżący krok — jaśniejsza pigułka szkła z połyskiem u góry. */
.nawigacja__krok[aria-current="step"] {
  background: var(--szklo-tlo);
  border-color: var(--szklo-krawedz);
  color: var(--color-text-inverse);
  box-shadow: var(--szklo-polysk), 0 6px 18px rgba(0, 0, 0, 0.3);
}

/* Podsumowanie na dole sidebaru — ta sama tafla, co bieżący krok. */
#panel-podsumowanie {
  background: var(--szklo-tlo-cichy);
  border-color: var(--szklo-krawedz);
  box-shadow: var(--szklo-polysk);
}

#panel-podsumowanie:hover,
#panel-podsumowanie[aria-current="step"] {
  background: var(--szklo-tlo);
}

.nawigacja__krok--koncowy {
  grid-template-columns: 20px minmax(0, 1fr);
}

.nawigacja__numer {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.45);
}

.nawigacja__krok[aria-current="step"] .nawigacja__numer {
  color: var(--color-primary-bright);
}

/* Pełna nazwa kroku — dłuższe łamią się na dwie linie zamiast ucinać się „…”. */
.nawigacja__nazwa {
  line-height: 1.25;
}

/* Znacznik statusu: pusty pierścień, ostrzegawczy z kropką, pełny z ptaszkiem. */
.nawigacja__ikona {
  position: relative;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  color: var(--color-ink);
  flex-shrink: 0;
}

.nawigacja__krok[data-status="czesciowo"] .nawigacja__ikona {
  border-color: var(--color-warning);
}

.nawigacja__krok[data-status="czesciowo"] .nawigacja__ikona::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-warning);
}

.nawigacja__krok[data-status="gotowy"] .nawigacja__ikona {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-ink);
}

.nawigacja__ikona--dokument {
  border: 0;
  color: var(--color-accent);
}

.nawigacja__ikona--dokument svg {
  width: 18px;
  height: 18px;
}

/* Cichy pasek przewijania na granacie. */
.nawigacja__tresc::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
}

/* --- postęp --- */

.postep {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.postep__pasek {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--color-border);
  overflow: hidden;
}

.postep__wypelnienie {
  height: 100%;
  border-radius: 999px;
  background: var(--color-primary);
  transition: width 0.35s var(--ease);
}

/* --- karta kroku --- */

.krok {
  padding: 0 var(--space-6) var(--space-6);
  overflow: hidden;
}

/*
  Nagłówek kroku na własnym, jaśniejszym pasie — od pól oddziela go kreska,
  więc oko od razu wie, gdzie kończy się „o czym” a zaczyna „wpisz”.
*/
.krok__naglowek {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  margin: 0 calc(-1 * var(--space-6));
  padding: var(--space-6) var(--space-6) var(--space-5);
  background:
    radial-gradient(520px 200px at 0% 0%, rgba(39, 99, 197, 0.08), transparent 70%),
    linear-gradient(180deg, var(--color-surface-alt), var(--color-surface));
  border-bottom: 1px solid var(--color-border);
}

.krok__numer {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(145deg, var(--color-primary), var(--color-primary-dark));
  color: var(--color-text-inverse);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  box-shadow: 0 8px 20px rgba(39, 99, 197, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* „Po co to pytanie” — turkusowa ramka pod nagłówkiem. */
.krok__wskazowka {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: var(--space-5);
  padding: 12px 16px;
  border-radius: var(--radius);
  background: rgba(14, 165, 183, 0.07);
  border: 1px solid rgba(14, 165, 183, 0.3);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text);
}

.krok__wskazowka-ikona {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--color-surface);
  border: 1px solid rgba(14, 165, 183, 0.35);
  color: var(--color-accent);
}

.krok__wskazowka-tresc b {
  display: block;
  margin-bottom: 2px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.krok__czesc {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.krok__tytul {
  margin-top: 4px;
  font-size: 24px;
  font-weight: 800;
}

.krok__opis {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: 14.5px;
  max-width: 62ch;
}

.krok__akcje {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* ------------------------------------------------------------- pola -- */

/*
  Siatka sześciu kolumn: pole domyślnie bierze całość, `pole--polowa` trzy,
  `pole--tercja` dwie, `pole--dwie-tercje` cztery. Na wąskim ekranie
  wszystko spada do pełnej szerokości.
*/
.pola {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-5) var(--space-4);
  margin-top: var(--space-5);
}

.pole {
  grid-column: span 6;
  min-width: 0;
}

.pole--polowa {
  grid-column: span 3;
}

.pole--tercja {
  grid-column: span 2;
}

.pole--dwie-tercje {
  grid-column: span 4;
}

.pole--naglowek {
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.pole--naglowek:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.pole__label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: 14px;
  font-weight: 650;
  margin-bottom: var(--space-2);
}

.pole__req {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: rgba(39, 99, 197, 0.1);
  border-radius: 999px;
  padding: 2px 8px;
}

.pole__input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.5;
  box-shadow: inset 0 1px 2px rgba(16, 35, 66, 0.05);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.pole__input:hover:not(:focus):not(:disabled) {
  border-color: rgba(39, 99, 197, 0.5);
}

.pole__input::placeholder {
  color: rgba(91, 107, 133, 0.7);
}

.pole__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(39, 99, 197, 0.16);
}

.pole__input:disabled {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
}

.pole__input--kompakt {
  padding: 8px 10px;
  font-size: 13.5px;
}

.pole__textarea {
  resize: vertical;
  min-height: 64px;
}

/* Dopisek przed polem: „ul.”, „https://”. */
.pole__wejscie {
  display: flex;
  align-items: stretch;
}

.pole__prefiks {
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--color-border-strong);
  border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}

.pole__wejscie .pole__input {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.pole__hint {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

/* Zalecana wartość ARKANIP — zielony pasek pod polem z przyciskiem „Wstaw”. */
.pole__zalecane {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 8px;
  padding: 4px 6px 4px 12px;
  border-radius: 999px;
  background: rgba(46, 158, 91, 0.1);
  color: var(--color-success);
  font-size: 12.5px;
  font-weight: 600;
}

.pole__zalecane b {
  color: var(--color-text);
  font-weight: 700;
}

.pole__uzyj {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(46, 158, 91, 0.45);
  background: var(--color-surface);
  color: var(--color-success);
  font-size: 12px;
  font-weight: 700;
}

.pole__uzyj:hover {
  background: var(--color-success);
  color: var(--color-text-inverse);
}

/* --- śródtytuły i ramka informacyjna --- */

/* Śródtytuł z błękitną kreską po lewej — wyraźny podział na podsekcje (5.1, 5.2…). */
.podtytul {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 750;
}

.podtytul::before {
  content: "";
  flex-shrink: 0;
  width: 4px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--color-primary), var(--color-accent));
}

.podtytul__opis {
  padding-left: 14px;
}

.podtytul__opis {
  margin-top: 6px;
  max-width: 70ch;
  font-size: 13.5px;
  color: var(--color-text-muted);
}

.info {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  background: var(--blok-tlo);
  border: 1px solid var(--blok-krawedz);
}

.info__tytul {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.info__punkty {
  margin: var(--space-2) 0 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  font-size: 13.5px;
  color: var(--color-text-muted);
}

/* --- przełącznik TAK / NIE --- */

.segment {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface-alt);
}

.segment__opcja {
  padding: 7px 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.06em;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.segment__opcja:hover {
  color: var(--color-text);
}

.segment__opcja[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: 0 2px 8px rgba(39, 99, 197, 0.3);
}

.segment--kompakt .segment__opcja {
  padding: 5px 13px;
  font-size: 11.5px;
}

/* --- opcje: karty i pigułki --- */

.opcje {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.opcje--karty {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-3);
}

.opcja {
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  text-align: left;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease),
    background 0.15s var(--ease), color 0.15s var(--ease);
}

.opcja:hover {
  border-color: var(--color-primary);
}

.opcja:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(39, 99, 197, 0.2);
}

.opcja--karta {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius);
}

.opcja--karta[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: rgba(39, 99, 197, 0.045);
  box-shadow: 0 0 0 3px rgba(39, 99, 197, 0.14);
}

.opcja__radio {
  flex-shrink: 0;
  margin-top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid var(--color-border-strong);
  background: var(--color-surface);
  transition: border-color 0.15s var(--ease);
}

.opcja--karta[aria-pressed="true"] .opcja__radio {
  border-color: var(--color-primary);
  background: radial-gradient(var(--color-primary) 42%, transparent 48%);
}

.opcja__tresc {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.opcja__tytul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
}

/* Litera modelu (A / B / C) — kwadracik jak numer kroku. */
.opcja__litera {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(39, 99, 197, 0.1);
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 800;
}

.opcja--karta[aria-pressed="true"] .opcja__litera {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.opcja__opis {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.opcja__znacznik {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

/*
  Modele (5.1) obok siebie — po jednym na kolumnę, gdy okno jest szerokie
  (formularz zajmuje całą szerokość strony, więc jest na to miejsce).
  Wewnątrz karty: radio + tytuł i opis u góry, schemat przepływu pod nimi.
  Poniżej 1100 px karty spadają jedna pod drugą. Wcześniejszy wariant
  „opis po lewej, schemat po prawej, karty pod sobą” — nie przywracać.
*/
.opcje--szerokie {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (max-width: 1100px) {
  .opcje--szerokie {
    grid-template-columns: minmax(0, 1fr);
  }
}

.opcja--szeroka {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 12px var(--space-3);
  align-items: start;
  padding: 18px 20px;
}

.opcja--szeroka .opcja__radio {
  margin-top: 4px;
}

/* Schemat pod opisem, dosunięty do dołu — trzy karty kończą się równo. */
.opcja--szeroka .przebieg {
  grid-column: 2 / -1;
  align-self: end;
  padding-left: 0;
  padding-top: 12px;
  border-left: 0;
  border-top: 1px solid var(--color-border);
}

/*
  Schemat przepływu stoi PIONOWO: trzy kroki jeden pod drugim, strzałka
  między nimi. Wariant poziomy łamał się na dwie linie przy trzech
  krokach z dopiskami i każda karta wyglądała inaczej — nie przywracać.
*/
.przebieg {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding-left: var(--space-4);
  border-left: 1px solid var(--color-border);
}

.przebieg__krok {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 10px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}

.przebieg__krok--akcent {
  border-color: rgba(39, 99, 197, 0.4);
  background: rgba(39, 99, 197, 0.08);
  color: var(--color-primary);
}

.opcja--karta[aria-pressed="true"] .przebieg__krok--akcent {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.przebieg__ikona {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.przebieg__ikona svg {
  width: 18px;
  height: 18px;
}

.przebieg__tekst {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.przebieg__tekst small {
  font-size: 10.5px;
  font-weight: 600;
  opacity: 0.75;
}

/* Strzałka „→” obrócona w dół — jeden znak w schemacie, kierunek z CSS. */
.przebieg__strzalka {
  display: block;
  width: 18px;
  margin-left: 10px;
  text-align: center;
  transform: rotate(90deg);
  color: var(--color-border-strong);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.opcja--karta[aria-pressed="true"] .przebieg__strzalka {
  color: var(--color-primary);
}

/* --- loga platform --- */

.loga {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.logo-marki {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
}

.logo-marki svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Na wypełnionej (niebieskiej) pigułce logo dostaje białą podkładkę. */
.opcja--pigulka[aria-pressed="true"] .logo-marki {
  background: var(--color-surface);
  border-radius: 6px;
}

.opcja--pigulka[aria-pressed="true"] .logo-marki svg {
  width: 15px;
  height: 15px;
}

.opcja__znacznik[data-znacznik="rekomendowany"] {
  background: rgba(46, 158, 91, 0.12);
  border-color: rgba(46, 158, 91, 0.35);
  color: var(--color-success);
}

.opcja--pigulka {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 650;
}

.opcja--pigulka[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: 0 3px 10px rgba(39, 99, 197, 0.3);
}

/* Ptaszek w pigułce wielokrotnego wyboru — pusty kwadracik, gdy niezaznaczona. */
.opcja__ptaszek {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1.5px solid var(--color-border-strong);
  color: transparent;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.opcja--pigulka[aria-pressed="true"] .opcja__ptaszek {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.18);
  color: var(--color-text-inverse);
}

/* --- tydzień --- */

.tydzien {
  border: 1px solid var(--blok-krawedz);
  border-radius: var(--radius);
  background: var(--blok-tlo);
  overflow: hidden;
}

/*
  Wiersz dnia: nazwa · godziny od–do · oś czasu 6:00–22:00 z paskiem
  otwarcia. Oś wypełnia prawą część wiersza, która wcześniej stała pusta,
  i pokazuje grafik „na oko” — klinika widzi od razu, czy sobota jest
  krótsza niż wtorek. Na telefonie oś znika (patrz media query).
*/
.tydzien__dzien,
.tydzien__os {
  display: grid;
  grid-template-columns: 160px 236px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  padding: 7px 14px;
  border-top: 1px solid var(--color-border);
}

.tydzien__os {
  padding: 6px 14px 4px;
  border-top: 0;
  background: rgba(39, 99, 197, 0.05);
}

.tydzien__os-tor {
  position: relative;
  height: 14px;
}

.tydzien__os-godzina {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.tydzien__os-godzina:first-child {
  transform: none;
}

.tydzien__os-godzina:last-child {
  transform: translateX(-100%);
}

/* Tor osi: kreski co 2 godziny (8 odcinków), pasek otwarcia nad nimi. */
.tydzien__linia {
  position: relative;
  height: 28px;
  border-radius: 8px;
  background-color: rgba(39, 99, 197, 0.04);
  background-image: repeating-linear-gradient(
    90deg,
    rgba(39, 99, 197, 0.14) 0 1px,
    transparent 1px calc(100% / 8)
  );
  display: flex;
  align-items: center;
}

.tydzien__pasek {
  position: absolute;
  top: 5px;
  bottom: 5px;
  min-width: 8px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  box-shadow: 0 3px 10px rgba(39, 99, 197, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  overflow: hidden;
  transition: left 0.25s var(--ease), width 0.25s var(--ease);
}

.tydzien__pasek i {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--color-text-inverse);
  white-space: nowrap;
}

.tydzien__linia .tydzien__wolne {
  padding-left: 10px;
}

.tydzien__akcje-etykieta {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-right: 4px;
}

.tydzien__dzien[data-otwarte="nie"] {
  background: rgba(39, 99, 197, 0.03);
}

.tydzien__dzien[data-otwarte="tak"] {
  background: var(--color-surface);
}

.tydzien__nazwa {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}

.tydzien__ptaszek {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.tydzien__krotka {
  display: none;
}

.tydzien__dzien[data-otwarte="nie"] .tydzien__nazwa {
  color: var(--color-text-muted);
}

.tydzien__godziny {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tydzien__dzien[data-otwarte="nie"] .tydzien__godziny {
  display: none;
}

.tydzien__dzien[data-otwarte="tak"] .tydzien__wolne {
  display: none;
}

.pole__input--czas {
  width: 118px;
  padding: 6px 10px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.tydzien__do {
  color: var(--color-text-muted);
}

.tydzien__wolne {
  font-size: 13px;
  font-style: italic;
  color: var(--color-text-muted);
}

.tydzien__akcje {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 14px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}

/* --- listy --- */

.lista__akcje {
  margin-top: var(--space-3);
}

.usun {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid transparent;
  background: none;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}

.usun:hover {
  color: var(--color-danger);
  background: rgba(192, 67, 47, 0.08);
}

/* karty: lekarz, pytanie */
.karta-wiersza {
  padding: var(--space-4) var(--space-5) var(--space-5);
  border: 1px solid var(--blok-krawedz);
  border-radius: var(--radius);
  background: var(--blok-tlo);
}

.karta-wiersza + .karta-wiersza {
  margin-top: var(--space-3);
}

.karta-wiersza__belka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.karta-wiersza__tytul {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.karta-wiersza .pola {
  margin-top: var(--space-3);
  gap: var(--space-4);
}

.karta-wiersza .pole__input:not(.pole__input--czas) {
  background: var(--color-surface);
}

/* wiersze: numery telefonów, usługi + czasy */
.wiersze {
  display: grid;
  gap: 8px;
}

.wiersze__wiersz {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wiersze__numer {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  font-size: 12px;
  font-weight: 800;
  color: var(--color-text-muted);
}

.wiersze__pole {
  flex: 1 1 0;
  min-width: 0;
}

/* tabela: cennik */
.tabela {
  border: 1px solid var(--blok-krawedz);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--blok-tlo);
}

.tabela__naglowek,
.tabela__wiersz {
  display: grid;
  grid-template-columns: repeat(var(--kolumny, 6), minmax(0, 1fr)) 34px;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
}

/*
  Szerokości kolumn cennika — jedyne miejsce, gdzie CSS zna nazwę listy.
  Nazwa usługi i konsultacja są opisowe, cena i czas krótkie; równy podział
  zostawiał w polach z tekstem ledwie kilkanaście znaków.
*/
/*
  Kolumna przełącznika ma szerokość STAŁĄ, nie `auto`: przy `auto` nagłówek
  mierzył ją długim napisem „Rezerwacja u asystenta?”, a wiersze krótkim
  przełącznikiem TAK/NIE — i etykiety rozjeżdżały się z polami.
*/
.tabela[data-lista="cennik.uslugi"] .tabela__naglowek,
.tabela[data-lista="cennik.uslugi"] .tabela__wiersz {
  grid-template-columns:
    minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 1.4fr) 136px
    minmax(0, 1.6fr) 34px;
}

.tabela__naglowek {
  align-items: end;
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Tekst nagłówka zaczyna się tam, gdzie tekst w polu (obramowanie + padding). */
.tabela__kolumna {
  padding-left: 11px;
}

.tabela__wiersz + .tabela__wiersz {
  border-top: 1px solid var(--color-border);
}

.tabela__komorka {
  min-width: 0;
}

.tabela__komorka--akcje {
  display: flex;
  justify-content: flex-end;
}

.tabela__etykieta {
  display: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.tabela__brak {
  display: block;
  padding: 8px 10px;
  color: var(--color-border-strong);
}

/* --- podpis --- */

.podpis {
  border: 1px dashed rgba(39, 99, 197, 0.35);
  border-radius: var(--radius);
  background: var(--color-surface);
  overflow: hidden;
}

/* Linia pod podpisem — jak na papierze. */
.podpis__plotno {
  display: block;
  width: 100%;
  cursor: crosshair;
  touch-action: none;
  background-image: linear-gradient(
    to top,
    transparent 38px,
    var(--color-border-strong) 38px,
    var(--color-border-strong) 39px,
    transparent 39px
  );
}

.podpis[data-pusty="tak"] .podpis__plotno {
  background-image: linear-gradient(
      to top,
      transparent 38px,
      var(--color-border-strong) 38px,
      var(--color-border-strong) 39px,
      transparent 39px
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(39, 99, 197, 0.06),
      transparent 60%
    );
}

.podpis__stopka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 8px 8px 8px 14px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  font-size: 12.5px;
  color: var(--color-text-muted);
}

/* ----------------------------------------------------- podsumowanie -- */

.pods {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.pods__naglowek {
  padding: var(--space-3) 0 var(--space-5);
}

.pods__tytul {
  margin-top: var(--space-2);
  font-size: 30px;
  font-weight: 800;
}

.pods__lead {
  margin-top: var(--space-2);
  max-width: 70ch;
  color: var(--color-text-muted);
  font-size: 14.5px;
}

.pods__druk {
  display: none;
}

.pods__akcje {
  position: sticky;
  top: calc(var(--belka-h) + var(--space-3));
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.pods__wroc {
  margin-left: auto;
}

.pods__status {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.pods__status[data-typ="ok"] {
  color: var(--color-success);
}

.pods__status[data-typ="blad"] {
  color: var(--color-danger);
}

.pods__braki,
.pods__komplet {
  margin-top: var(--space-4);
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 13.5px;
  line-height: 1.7;
}

.pods__braki {
  background: rgba(208, 138, 44, 0.1);
  border: 1px solid rgba(208, 138, 44, 0.35);
  color: var(--color-text);
}

.pods__komplet {
  background: rgba(46, 158, 91, 0.1);
  border: 1px solid rgba(46, 158, 91, 0.35);
  color: var(--color-success);
  font-weight: 650;
}

.pods__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pods__czesc {
  margin-top: var(--space-6);
}

.pods__czesc-tytul {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  padding-bottom: var(--space-3);
}

.pods__krok {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.pods__krok + .pods__krok {
  margin-top: var(--space-3);
}

.pods__krok-belka {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.pods__krok-numer {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(39, 99, 197, 0.1);
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 800;
}

.pods__krok-tytul {
  flex: 1;
  font-size: 17px;
  font-weight: 750;
}

.pods__lista {
  margin: var(--space-3) 0 0;
}

.pods__podtytul {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.pods__wiersz {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--space-4);
  padding: 9px 0;
  border-top: 1px solid var(--color-border);
  font-size: 14px;
}

.pods__wiersz dt {
  color: var(--color-text-muted);
  font-weight: 600;
}

.pods__wiersz dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.pods__wiersz--puste dd {
  color: var(--color-text-muted);
}

.pods__brak {
  color: var(--color-danger);
  font-weight: 700;
}

.pods__pusto {
  color: var(--color-border-strong);
}

.pods__taknie {
  display: inline-block;
  padding: 1px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.06em;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-strong);
}

.pods__taknie[data-wartosc="tak"] {
  background: rgba(46, 158, 91, 0.12);
  border-color: rgba(46, 158, 91, 0.35);
  color: var(--color-success);
}

.pods__wielowiersz {
  white-space: pre-wrap;
}

.pods__opcja {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 8px 2px 0;
  padding: 2px 10px 2px 6px;
  border-radius: 999px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  font-size: 13px;
  font-weight: 600;
}

.pods__opcja .logo-marki {
  width: 16px;
  height: 16px;
}

.pods__opcja .logo-marki svg {
  width: 15px;
  height: 15px;
}

.pods__tydzien {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}

.pods__tydzien li {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.pods__tydzien-wolne {
  color: var(--color-text-muted);
  font-style: italic;
}

.pods__pozycje {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
}

.pods__podpole {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 8px;
  font-size: 13.5px;
}

.pods__podetykieta {
  color: var(--color-text-muted);
}

.pods__przewijanie {
  overflow-x: auto;
}

.pods__tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.pods__tabela th,
.pods__tabela td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.pods__tabela th {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
}

.pods__podpis {
  display: block;
  max-width: 320px;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

/* ---------------------------------------------------------- responsywność -- */

@media (max-width: 1020px) {
  .widok--krok {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Okno w jednej kolumnie: sidebar staje się ciemnym pasem nad treścią. */
  .okno {
    grid-template-columns: minmax(0, 1fr);
  }

  .panel {
    position: static;
    height: auto;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  }

  .panel__tresc {
    position: static;
    height: auto;
    padding: 14px 16px 12px;
    overflow: visible;
  }

  .logo--jasne {
    padding: 0 4px 12px;
    font-size: 20px;
  }

  .panel__dol {
    display: none;
  }

  /* Części i kroki w jednym przewijanym poziomo rzędzie. */
  .nawigacja__tresc {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
  }

  .nawigacja__czesc {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding-bottom: 0;
  }

  .nawigacja__czesc[data-otwarta="tak"] {
    background: none;
    padding-bottom: 0;
  }

  .nawigacja__tytul {
    width: auto;
    grid-template-columns: 22px auto;
    gap: 6px;
    padding: 6px 10px 6px 6px;
    border-radius: 999px;
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    white-space: nowrap;
  }

  .nawigacja__tytul-numer {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    font-size: 11px;
  }

  .nawigacja__licznik,
  .nawigacja__tor,
  .nawigacja__procent {
    display: none;
  }

  .nawigacja__kroki {
    flex-direction: row;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .nawigacja__krok--koncowy .nawigacja__nazwa {
    white-space: nowrap;
  }

  .nawigacja__krok--koncowy .nawigacja__nazwa small {
    display: none;
  }

  .nawigacja__krok {
    width: auto;
    grid-template-columns: 18px auto;
    padding: 7px 12px;
    border-radius: 999px;
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    white-space: nowrap;
  }

  .nawigacja__krok--koncowy {
    grid-template-columns: 18px auto;
  }

  .nawigacja__nazwa {
    display: none;
  }

  .nawigacja__krok[aria-current="step"] .nawigacja__nazwa {
    display: inline;
  }

  .nawigacja__krok[aria-current="step"] {
    grid-template-columns: 18px auto auto;
  }

  .nawigacja__krok--koncowy .nawigacja__nazwa {
    display: inline;
  }

  .nawigacja__krok--koncowy[aria-current="step"] {
    grid-template-columns: 18px auto;
  }
}

@media (max-width: 760px) {
  :root {
    --belka-h: 92px;
  }

  /* Belka w dwóch wierszach: tytuł + akcje, pod nimi pasek postępu na całą szerokość. */
  .belka {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "tytul akcje"
      "postep postep";
    gap: 6px var(--space-3);
    padding: var(--space-3) var(--space-4);
  }

  .belka__tytul {
    grid-area: tytul;
  }

  .belka__akcje {
    grid-area: akcje;
  }

  .postep-belka {
    grid-area: postep;
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }

  .postep-belka__tor {
    flex: 1 1 auto;
  }

  .postep-belka__tytul {
    display: none;
  }

  .postep-belka__gora {
    order: 2;
  }

  .belka__menu--podsumowanie {
    display: none;
  }

  .zapis {
    display: none;
  }

  .okno {
    width: calc(100% - 2 * var(--space-2));
    min-height: calc(100vh - 2 * var(--space-2));
    margin: var(--space-2) auto;
    border-radius: var(--radius);
  }

  .scena {
    padding: var(--space-3);
  }

  .belka__nazwa {
    font-size: 15px;
  }

  .start {
    padding: var(--space-4) 0;
  }

  .start__tytul {
    font-size: 30px;
  }

  .start__czesci {
    grid-template-columns: minmax(0, 1fr);
  }

  .krok {
    padding: 0 var(--space-4) var(--space-4);
  }

  .krok__naglowek {
    margin: 0 calc(-1 * var(--space-4));
    padding: var(--space-4) var(--space-4) var(--space-4);
  }

  .krok__numer {
    width: 44px;
    height: 44px;
    font-size: 17px;
  }

  .krok__tytul {
    font-size: 20px;
  }

  .pole--polowa,
  .pole--tercja,
  .pole--dwie-tercje {
    grid-column: span 6;
  }

  .tydzien__dzien {
    grid-template-columns: 64px minmax(0, 1fr);
    padding: 7px 10px;
  }

  /* Na telefonie oś czasu znika — zostaje nazwa dnia i godziny. */
  .tydzien__os,
  .tydzien__linia {
    display: none;
  }

  .tydzien__dzien[data-otwarte="nie"] .tydzien__godziny {
    display: none;
  }

  .tydzien__dzien[data-otwarte="nie"]::after {
    content: attr(data-wolne);
    font-size: 13px;
    font-style: italic;
    color: var(--color-text-muted);
  }

  .tydzien__krotka {
    display: inline;
  }

  .tydzien__pelna {
    display: none;
  }

  .pole__input--czas {
    width: 100px;
  }

  .wiersze__wiersz {
    flex-wrap: wrap;
  }

  .wiersze__pole {
    flex-basis: calc(100% - 80px);
  }

  /* Tabela rozpada się na karty — po jednej na usługę. */
  .tabela__naglowek {
    display: none;
  }

  .tabela__wiersz,
  .tabela[data-lista="cennik.uslugi"] .tabela__wiersz {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
  }

  .tabela__komorka:first-child {
    grid-column: span 2;
  }

  .tabela__etykieta {
    display: block;
  }

  .tabela__komorka--akcje {
    grid-column: span 2;
  }

  .tabela__brak {
    padding: 0;
  }

  /* Karta modelu na telefonie: treść u góry, schemat przepływu pod nią. */
  .opcja--szeroka {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 12px;
    align-items: flex-start;
  }

  .opcja--szeroka .opcja__radio {
    margin-top: 4px;
  }

  .opcja--szeroka .przebieg {
    grid-column: 2 / -1;
    padding-left: 0;
    padding-top: 12px;
    border-left: 0;
    border-top: 1px solid var(--color-border);
  }

  .krok__akcje {
    flex-direction: column-reverse;
  }

  .krok__akcje .btn {
    width: 100%;
  }

  .pods__akcje {
    position: static;
  }

  .pods__wroc {
    margin-left: 0;
  }

  .pods__wiersz {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .pods__podpole {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

/* -------------------------------------------------------------- wydruk -- */

/*
  „Pobierz PDF” = okno drukowania przeglądarki („Zapisz jako PDF”). Na papier
  idzie wyłącznie podsumowanie: bez belki, nawigacji, przycisków i ramki.
*/
@media print {
  @page {
    size: A4;
    margin: 16mm 14mm;
  }

  body {
    padding: 0;
    background: #fff;
    font-size: 12px;
  }

  .belka,
  .panel,
  .pods__akcje,
  .pods__krok-belka .btn,
  .pods__link,
  #widok-start,
  #widok-krok {
    display: none !important;
  }

  #widok-podsumowanie {
    display: block !important;
  }

  .okno {
    display: block;
    width: auto;
    min-height: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #fff;
  }

  .scena {
    min-height: 0;
    padding: 0;
    display: block;
  }

  .pods {
    max-width: none;
  }

  .pods__druk {
    display: block;
    margin-top: 6px;
    font-size: 10px;
    color: var(--color-text-muted);
  }

  .pods__braki {
    background: none;
  }

  .pods__krok {
    box-shadow: none;
    break-inside: avoid;
    padding: 10px 14px 12px;
  }

  .pods__czesc {
    margin-top: 18px;
  }

  .pods__wiersz {
    grid-template-columns: 200px minmax(0, 1fr);
    padding: 5px 0;
    font-size: 11.5px;
  }

  .pods__podpis {
    max-width: 240px;
  }
}