/* Wspólny arkusz trzech powierzchni. Paleta nawigacji: teal, ink, bone i złoto (12.09.2026). */

.public-service-nav {
  --service-nav-ink: #123f3e;
  --service-nav-teal: #227f7c;
  --service-nav-logo-teal: #3499a8;
  --service-nav-paper: #f5f1e9;
  --sn-glass: rgba(247, 244, 236, .84);
  /* JEDEN KSZTAŁT (04.09, po ocenie klinicysty 2/10): każda kontrolka w belce — pozycja menu,
     „Bezpłatna rozmowa", „Polityka, zgody i RODO", link dodatkowy, przełącznik telefonu — ma tę
     samą wysokość i ten sam promień. Wcześniej w jednej linii były trzy wysokości (44/46/42)
     i dwa promienie (13/999). Wartość jest tokenem, nie liczbą w regule, żeby kolejna kontrolka
     nie mogła odstać po cichu; test pilnuje, że reguły kontrolek nie wpisują własnych liczb. */
  --sn-control-h: 44px;
  --sn-control-r: 999px;
  --sn-radius: 24px;
  --sn-bar-max: 1360px;
  --sn-bar-pad: clamp(16px, 2vw, 28px);
  /* Pięć tytułów w jednej linii między 1081 a 1440 px: padding pigułki i rozmiar pisma rosną
     liniowo z szerokością okna (10→14 px, 11→13 px), zamiast trzech progów, z których każdy
     zostawiał parę pikseli nadmiaru gdzieś pomiędzy. Zmierzone: przy 1280 px stałe 15 px/13 px
     wychodziło 102 px poza obszar pozycji. Padding jest tokenem, bo od niego liczy się też
     oś tekstu w panelu. */
  --sn-item-pad: clamp(10px, calc(-2.04px + 1.114vw), 14px);
  /* Wspólna krawędź belki i paneli: jedno odsunięcie od brzegu okna, z którego korzysta belka
     (margines), panel usługi (left/right) i panel zaufania (right). Panel wcięty na 160 px przy
     belce na 40 px wyglądał na zrzucie klinicysty jak dwa niepowiązane elementy. */
  --sn-inset: max(16px, calc((100% - var(--sn-bar-max)) / 2));
  position: sticky;
  top: 0;
  z-index: 60;
  width: 100%;
  padding-top: 10px;
  color: var(--service-nav-ink);
  background: transparent;
  transform: translateY(0);
  transition: transform 180ms cubic-bezier(.77, 0, .175, 1), opacity 160ms cubic-bezier(.23, 1, .32, 1);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .public-service-nav-bar { background: rgba(247, 244, 236, .96); }
}

.public-service-nav.is-hidden {
  pointer-events: none;
  opacity: 0;
  transform: translateY(-100%);
}

.public-service-nav *,
.public-service-nav *::before,
.public-service-nav *::after { box-sizing: border-box; }

/* Mesh jest statycznym światłem pod szkłem. Ruch odpowiada tylko na działanie człowieka. */
.public-service-nav-mesh {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 0;
  width: min(1360px, calc(100% - 32px));
  height: 72px;
  overflow: hidden;
  border-radius: 24px;
  pointer-events: none;
  transform: translateX(-50%);
}
.public-service-nav-mesh span {
  position: absolute;
  top: -170px;
  width: 480px;
  height: 380px;
  border-radius: 50%;
  opacity: .5;
}
.public-service-nav-mesh span:nth-child(1) { left: -4%; background: radial-gradient(closest-side, rgba(102, 210, 206, .55), transparent 70%); }
.public-service-nav-mesh span:nth-child(2) { left: 18%; background: radial-gradient(closest-side, rgba(224, 183, 113, .5), transparent 70%); }
.public-service-nav-mesh span:nth-child(3) { right: -4%; background: radial-gradient(closest-side, rgba(102, 210, 206, .4), transparent 70%); }

 .public-service-nav [data-service] {
  --path-rest: rgba(247, 244, 236, 0);
  --path-deep: #0f1a1a;
  --path-panel: linear-gradient(118deg, #0f1a1a, #123f3e);
  --path-accent: #3fb0bd;
  --path-mid: #146661;
  --path-tint: #f4f2ec;
  --path-wash: rgba(63, 176, 189, .1);
  --path-glow: rgba(184, 149, 90, .16);
}
/* 12.09.2026: decyzja klinicysty — paleta B Fable, grafit → mosiądz.
   Wartości dosłowne: docs/SPEC_FABLE_OSS_HERO.md, tabela 3.1. */
.public-service-nav [data-service="altered-states"],
.oss-page[data-service="altered-states"] {
  /* B · grafit → mosiądz (rozwinięcie obecnego złota OSS; 148–176° od pasma niebiesko-fioletowego) */
  --path-deep:#2a2823;
  --path-panel:linear-gradient(118deg,#27251f 0%,#332d22 46%,#4f3910 100%);
  --path-accent:#f7dd99;
  --path-mid:#7f5710;
  --path-tint:#f7efdc;
  --path-wash:rgba(127,87,16,.1);
  --path-glow:rgba(247,221,153,.2);
  --path-cta:linear-gradient(135deg,#2c2a24 0%,#4a3d22 44%,#7f5710 100%);
  --path-veil:rgba(42,40,35,.84);
  --path-shadow:rgba(36,28,12,.95);
  --path-mesh-1:rgba(247,221,153,.6);
  --path-mesh-2:rgba(184,138,42,.6);
  --path-mesh-3:rgba(102,210,206,.5);
  --path-mesh-4:rgba(240,180,162,.44);
  --path-mesh-5:rgba(224,183,113,.32);
}

.public-service-nav-bar {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 72px;
  margin: 0 var(--sn-inset);
  padding: 6px var(--sn-bar-pad);
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .64);
  border-radius: var(--sn-radius);
  background: var(--sn-glass);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    0 20px 48px -30px rgba(10, 44, 43, .52),
    0 7px 18px -15px rgba(10, 44, 43, .28);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(12px, 1.4vw, 20px);
}

/* Otwarty panel jest przedłużeniem belki, nie osobną kartą pod nią: belka prostuje dolne rogi
   tam, gdzie panel się z nią styka, a panel ma proste górne rogi i tę samą krawędź boczną.
   Jedna bryła zamiast dwóch. Panel zaufania wisi pod prawym końcem, więc prostuje się tylko
   prawy róg. Bez tweena promienia — kontrakt tego pliku (publicServiceNavArchitecture.test.js)
   dopuszcza animację wyłącznie transform/opacity; rogi przełączają się skokowo, tak jak
   wypełnienie pozycji, a panel wjeżdża pod nie w 170 ms. */
.public-service-nav[data-panel="service"] .public-service-nav-bar,
.public-service-nav[data-panel="mobile"] .public-service-nav-bar,
.public-service-nav:has(.public-service-nav-disclosure[open]) .public-service-nav-bar {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.public-service-nav[data-panel="trust"] .public-service-nav-bar { border-bottom-right-radius: 0; }

/* Pigułki dopasowane do treści, nie rozciągnięte w kolumnach siatki: pigułka szeroka na 140 px
   wokół ośmioliterowej „Diagnozy" pokazywała po najechaniu wielkie puste pole. */
.public-service-nav-desktop-items {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
}

.public-service-nav-item {
  position: relative;
  display: flex;
  min-width: 0;
  /* JEDNA LINIA (04.09): stała wysokość 44 px zamiast `min-height` rosnącego z treścią.
     Wcześniej pozycja rosła w dół razem z podpisem i odznaką, przez co „Kursy i warsztaty"
     odstawały od reszty i rozbijały linię bazową belki. Teraz w środku jest tylko tytuł
     (i przy jednej pozycji odznaka), więc wysokość jest niezależna od treści. */
  flex: 0 0 auto;
  height: var(--sn-control-h);
  padding: 0 var(--sn-item-pad);
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: var(--sn-control-r);
  color: var(--service-nav-ink);
  background: transparent;
  cursor: pointer;
  font: 800 clamp(11px, calc(4.98px + .557vw), 13px)/1.2 Manrope, sans-serif;
  letter-spacing: -.008em;
  text-align: center;
  text-decoration: none;
  transition: transform 140ms cubic-bezier(.23, 1, .32, 1);
}

/* Soczewka oznacza bieżącą stronę; łącznik wskazuje otwarty panel. Dwa różne stany,
   bez kreski pod napisem i bez animowania gradientu. Geometria kontrolek zostaje wspólna. */
.public-service-nav-item::before {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  left: 9px;
  top: calc(50% - 5.5px);
  border: 3px solid var(--path-mid);
  border-radius: 50%;
  box-shadow: none;
  opacity: 0;
}
.public-service-nav-item::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  left: calc(50% - 6px);
  bottom: -21px;
  border-radius: 3px;
  background: var(--path-deep);
  opacity: 0;
  transform: translateY(5px) rotate(45deg);
  transition: transform 190ms cubic-bezier(.23, 1, .32, 1), opacity 150ms cubic-bezier(.23, 1, .32, 1);
  pointer-events: none;
}
.public-service-nav-item > span { max-width: 100%; white-space: nowrap; }
.public-service-nav-item.is-primary { font-weight: 850; }
.public-service-nav-item.is-current {
  padding-left: 28px;
  border-color: transparent;
  color: var(--path-deep);
  background: var(--path-rest);
  box-shadow: none;
}
.public-service-nav-item.is-current::before { opacity: 1; }
.public-service-nav-item.is-current[data-service="diagnosis"] {
  color: var(--path-deep);
  background: var(--path-rest);
}
.public-service-nav-item[aria-expanded="true"][data-service],
.public-service-nav-static-group:is(:hover, :focus-within) > .public-service-nav-item {
  color: #fff;
  background: var(--path-deep);
  border-color: var(--path-deep);
}
.public-service-nav-item[aria-expanded="true"]::before,
.public-service-nav-static-group:is(:hover, :focus-within) > .public-service-nav-item::before {
  border-color: var(--path-accent);
  box-shadow: none;
}
.public-service-nav-item[aria-expanded="true"]::after,
.public-service-nav-static-group:is(:hover, :focus-within) > .public-service-nav-item::after {
  opacity: 1;
  transform: translateY(0) rotate(45deg);
}
/* Klawiatura ma natychmiastową informację. Ruch wyłącznie przy przełączeniu i najechaniu,
   nigdy w pętli: przyklejona belka pozostaje spokojna także w kryzysie. */
.public-service-nav-item:focus-visible::after { transition: none; }

/* `.public-service-nav-item-sub` i `.public-service-nav-item-chevron` usunięte 04.09:
   w pasku nie ma już ani podpisu, ani strzałki. Podpis ma własną regułę przy panelu
   (`.public-service-nav-panel-sub`), a rozwijanie sygnalizuje stan pozycji. */

.public-service-nav-item small {
  padding: 2px 6px;
  border-radius: 999px;
  color: #29504e;
  background: rgba(18, 63, 62, .1);
  font: 800 8.5px/1 Manrope, sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.public-service-nav-item.is-current small { color: #fff; background: #123f3e; }

.public-service-nav-item:active,
.public-service-nav-mobile-toggle:active,
.public-service-nav-free-talk:active,
.public-service-nav-mobile-free-talk:active,
.public-service-nav-trust-toggle:active,
.public-service-nav-cta:active,
.public-service-nav-trust-actions button:active { transform: scale(.97); }

.public-service-nav a:focus-visible,
.public-service-nav button:focus-visible {
  z-index: 2;
  outline: 3px solid #0d817d;
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .public-service-nav-item:not(.is-current):not([aria-expanded="true"]):hover { background: var(--path-tint); }
  .public-service-nav-free-talk:hover { background: linear-gradient(135deg, #0f1a1a, #123f3e); transform: translateY(-1px); }
  .public-service-nav-cta:hover { background: #fff; transform: translateY(-1px); }
  .public-service-nav-cta:hover > svg { transform: translateX(2px); }
  .public-service-nav-trust-actions button:hover { border-color: rgba(18, 63, 62, .22); background: rgba(18, 63, 62, .055); }
  .public-service-nav-mobile-item > :is(button, summary):hover { background: rgba(18, 63, 62, .035); }
}

.public-service-nav-mobile-toggle { display: none; }

.public-service-nav-actions {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.public-service-nav-free-talk {
  position: relative;
  display: inline-flex;
  height: var(--sn-control-h);
  padding: 0 18px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--sn-control-r);
  /* Pelny niebieski przycisk zamiast przeziernej pigulki: to jedyne darmowe wejscie na tej
     stronie i ma byc widoczne jako akcja, nie jako etykieta. Bialy tekst i biala ikona na
     #1d6fd0 daja 5,6:1, wiec kontrast jest zachowany bez wracania do ciemnego tealu. */
  color: #fff;
  background: linear-gradient(135deg, #123f3e, #146661);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 14px 26px -18px rgba(15, 26, 26, .5);
  cursor: pointer;
  font: 850 12px/1 Manrope, sans-serif;
  white-space: nowrap;
  transition: transform 140ms cubic-bezier(.23, 1, .32, 1);
}
.public-service-nav-free-talk svg { color: #fff; }

.public-service-nav-trust-toggle {
  display: inline-flex;
  height: var(--sn-control-h);
  padding: 0 14px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(18, 63, 62, .2);
  border-radius: var(--sn-control-r);
  color: #123f3e;
  background: rgba(255, 255, 255, .58);
  cursor: pointer;
  font: 800 11px/1 Manrope, sans-serif;
  white-space: nowrap;
  transition: transform 140ms cubic-bezier(.23, 1, .32, 1);
}
.public-service-nav-trust-toggle[aria-expanded="true"] { border-color: #227f7c; background: #e4f3ef; }
.public-service-nav-trust-toggle > svg:last-child { transition: transform 140ms cubic-bezier(.23, 1, .32, 1); }
.public-service-nav-trust-toggle[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }

.public-service-nav-trailing { display: inline-flex; align-items: center; }
.public-service-nav-trailing > a {
  display: inline-flex;
  height: var(--sn-control-h);
  padding: 0 16px;
  align-items: center;
  border-radius: var(--sn-control-r);
  color: #fff;
  background: #123f3e;
  font: 800 11px/1 Manrope, sans-serif;
  text-decoration: none;
}

.public-service-nav-mobile-free-talk { display: none; }

/* Do 1399 px przełącznik zaufania jest samą ikoną: etykieta „Polityka, zgody i RODO" zabierała
   ~190 px, których między 1081 a 1400 px brakuje pięciu tytułom w jednej linii. */
@media (min-width: 1081px) and (max-width: 1399px) {
  /* Sześć pełnych nazw (11.09): najwęższy desktop potrzebuje miejsca odzyskanego
     z odstępów. Padding pozycji rośnie od 2 px przy 1081 do 14 px przy 1340;
     pismo i wysokość kontrolek zachowują dotychczasowe rozmiary. */
  .public-service-nav {
    --sn-item-pad: clamp(2px, calc(-48.08px + 4.633vw), 14px);
    --sn-bar-pad: 16px;
  }
  .public-service-nav-bar { gap: 12px; }
  .public-service-nav-desktop-items { gap: 2px; }
  .public-service-nav-item { gap: 4px; }
  .public-service-nav-trust-toggle { width: var(--sn-control-h); padding: 0; }
  .public-service-nav-trust-toggle span,
  .public-service-nav-trust-toggle > svg:last-child { display: none; }
}

.public-service-nav-panel,
.public-service-nav-trust-panel {
  position: absolute;
  top: 100%;
  right: var(--sn-inset);
  left: var(--sn-inset);
  overflow: hidden;
  visibility: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-top: 0;
  border-radius: 0 0 var(--sn-radius) var(--sn-radius);
  color: #f5fbf9;
  background: var(--path-panel, #123f3e);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 30px 70px -32px rgba(10, 34, 33, .65);
  opacity: 0;
  pointer-events: none;
  transform: translateY(7px);
  transform-origin: top center;
  transition: opacity 170ms cubic-bezier(.23, 1, .32, 1), transform 170ms cubic-bezier(.23, 1, .32, 1);
}

.public-service-nav-panel[data-open="true"],
.public-service-nav-trust-panel[data-open="true"] {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.public-service-nav-panel[data-instant="true"] { transition-duration: 0s; }

.public-service-nav-panel-inner {
  position: relative;
  display: grid;
  min-height: 250px;
  /* Tekst panelu zaczyna się dokładnie tam, gdzie tekst pierwszej pozycji belki: obramowanie
     belki (1) + jej padding + obramowanie pigułki (1) + padding pigułki = padding panelu
     (za jego własnym obramowaniem 1). Jedna oś, nie dwie. */
  padding: clamp(28px, 3.4vw, 40px) calc(var(--sn-bar-pad) + var(--sn-item-pad) + 1px);
  /* 12.09: kolumna wyborów przejęła rolę nośną (kafelki zamiast listy punktów), a lewa została
     samym wprowadzeniem — przy dawnym podziale niemal pół panelu stało puste, a kafelki były
     ściśnięte. Proporcja przesunięta na korzyść wyborów; minimum 360 px zostaje, żeby na wąskim
     panelu kafelki nie zeszły poniżej czytelnej szerokości. */
  grid-template-columns: minmax(0, .62fr) minmax(360px, 1.38fr);
  gap: clamp(36px, 6vw, 80px);
}
.public-service-nav-panel-inner::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 42%;
  height: 100%;
  background: radial-gradient(circle at 100% 0%, var(--path-glow, rgba(58, 168, 163, .2)), transparent 68%);
  content: "";
  pointer-events: none;
}
.public-service-nav-intro,
.public-service-nav-decision { position: relative; z-index: 1; }
.public-service-nav-eyebrow {
  display: block;
  margin-bottom: 10px;
  color: var(--path-accent, #8ed8d2);
  font: 800 10px/1.2 Manrope, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}
/* Podpis ścieżki w panelu: między nazwą a zdaniem dla kogo. Mniejszy i jaśniejszy od nagłówka,
   ale wyraźniejszy od akapitu — to on odpowiada na „czym to w ogóle jest". */
/* KOLIZJA KASKADY, wpuszczona na produkcję 04.09: `.public-service-nav-intro p` (klasa +
   element = wyższa specyficzność) nadpisywało tę regułę w całości, więc podpis wyglądał
   DOKŁADNIE jak akapit pod nim i sklejał się z nim w jeden ciąg — zerowy odstęp, ten sam kolor,
   rozmiar i waga. Selektor musi być złożony, żeby wygrać. Zmierzone w przeglądarce; test
   sprawdzający samą OBECNOŚĆ tekstu tego nie widział. */
.public-service-nav-intro p.public-service-nav-panel-sub {
  max-width: 590px;
  margin: 0 0 14px;
  color: var(--path-accent, #8ed8d2);
  font: 700 15px/1.4 Manrope, sans-serif;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.public-service-nav-mobile-details .public-service-nav-intro p.public-service-nav-panel-sub {
  margin: 0 0 10px;
  font-size: 13.5px;
}

.public-service-nav-intro h2 {
  max-width: 620px;
  margin: 0 0 13px;
  color: #fff;
  font: 700 clamp(24px, 2.5vw, 34px)/1.05 Manrope, sans-serif;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.public-service-nav-intro p {
  max-width: 590px;
  margin: 0;
  color: rgba(244, 250, 248, .88);
  font: 550 14px/1.65 Manrope, sans-serif;
}
.public-service-nav-decision { display: flex; align-items: flex-start; flex-direction: column; }
.public-service-nav-decision ul { display: grid; width: 100%; margin: 0 0 20px; padding: 0; gap: 10px; list-style: none; }
.public-service-nav-decision li {
  position: relative;
  padding-left: 20px;
  color: #eef7f5;
  font: 650 13px/1.48 Manrope, sans-serif;
}
.public-service-nav-decision li::before {
  position: absolute;
  top: .55em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--path-accent, #63c9c2);
  box-shadow: 0 0 0 4px var(--path-glow, rgba(99, 201, 194, .12));
  content: "";
}
.public-service-nav-branch > a {
  display: flex;
  min-height: 44px;
  align-items: center;
  color: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.public-service-nav-branch > a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 4px;
}
.public-service-nav-decision .public-service-nav-branch-description {
  margin: 4px 0 0;
  gap: 6px;
}
.public-service-nav-branch-description li { padding-left: 0; }
.public-service-nav-branch-description li::before { content: none; }
.public-service-nav-decision .public-service-nav-branch::before { top: 19px; }
/* 17.09.2026, klinicysta prosil o poprawe „przycisku". Dotad: pigulka z tekstem 12,5 px i gola
   strzalka — czytala sie jak etykieta. Teraz: tekst 14 px, strzalka w dwutonowym dysku (atrament
   na kosci), swiatlo od gory i cien pod spodem. Ten sam raster co kontrolki belki (--sn-control-*). */
.public-service-nav-cta {
  display: inline-flex;
  min-height: var(--sn-control-h);
  margin-top: auto;
  padding: 6px 7px 6px 20px;
  align-items: center;
  gap: 12px;
  border-radius: var(--sn-control-r);
  color: var(--path-deep, #123f3e);
  background: var(--path-tint, #ecf7f4);
  box-shadow: inset 0 1px 0 #fff, 0 18px 34px -20px rgba(8, 20, 20, .8);
  font: 800 14px/1 Manrope, sans-serif;
  letter-spacing: -.01em;
  text-decoration: none;
  transition: transform 140ms cubic-bezier(.23, 1, .32, 1);
}
.public-service-nav-cta > svg {
  width: 30px;
  height: 30px;
  padding: 7px;
  border-radius: 50%;
  color: var(--path-tint, #ecf7f4);
  background: var(--path-deep, #123f3e);
  transition: transform 160ms cubic-bezier(.23, 1, .32, 1);
}

.public-service-nav-trust-panel {
  right: var(--sn-inset);
  left: auto;
  width: min(530px, calc(100% - 2 * var(--sn-inset)));
  padding: 18px;
  border: 1px solid rgba(18, 63, 62, .1);
  border-top: 0;
  border-radius: 0 0 var(--sn-radius) var(--sn-radius);
  color: #123f3e;
  background: #f8f5ee;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 24px 54px -30px rgba(18, 63, 62, .5);
  transform: translateY(7px);
}
.public-service-nav-trust-panel[data-open="true"] { transform: translateY(0); }
.public-service-nav-trust-panel > p {
  display: flex;
  margin: 0 0 12px;
  align-items: center;
  gap: 7px;
  color: #315250;
  font: 750 11.5px/1.3 Manrope, sans-serif;
}
.public-service-nav-trust-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.public-service-nav-trust-actions button {
  display: flex;
  min-height: 54px;
  padding: 8px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  border: 1px solid rgba(18, 63, 62, .12);
  border-radius: 12px;
  color: #244948;
  background: rgba(255, 255, 255, .5);
  cursor: pointer;
  font: 800 10px/1.2 Manrope, sans-serif;
  text-align: center;
  transition: transform 140ms cubic-bezier(.23, 1, .32, 1);
}

.public-service-nav-mobile-menu { display: none; }

@media (max-width: 1080px) {
  .public-service-nav {
    --sn-bar-max: 620px;
    --sn-inset: max(10px, calc((100% - var(--sn-bar-max)) / 2));
    --sn-radius: 22px;
  }
  .public-service-nav-mesh {
    width: min(620px, calc(100% - 20px));
    height: 62px;
    border-radius: 22px;
  }
  .public-service-nav-bar {
    min-height: 62px;
    padding: 8px 14px;
    grid-template-columns: minmax(0, 190px) minmax(0, 174px);
    justify-content: center;
    gap: 8px;
  }
  .public-service-nav-bar > .public-service-nav-lead { display: none; }
  .public-service-nav-desktop-items { display: none; }
  .public-service-nav-mobile-toggle {
    display: inline-flex;
    height: var(--sn-control-h);
    padding: 0 14px;
    align-items: center;
    justify-content: center;
    width: 100%;
    justify-self: stretch;
    gap: 7px;
    border: 0;
    border-radius: var(--sn-control-r);
    color: #fff;
    background: linear-gradient(118deg, #0f1a1a, #146661);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 14px 30px -18px rgba(15, 26, 26, .4);
    cursor: pointer;
    font: 850 11.5px/1 Manrope, sans-serif;
    white-space: nowrap;
    transition: transform 140ms cubic-bezier(.23, 1, .32, 1);
  }
  .public-service-nav-actions { width: 100%; gap: 0; }
  .public-service-nav-free-talk { width: 100%; }
  .public-service-nav-trust-toggle { display: none; }
  .public-service-nav-trailing { display: none; }
  .public-service-nav-panel { display: none; }
  .public-service-nav-trust-panel { top: 100%; }
  .public-service-nav-mobile-menu {
    position: absolute;
    top: 100%;
    right: var(--sn-inset);
    left: var(--sn-inset);
    display: block;
    /* --sn-menu-top = zmierzony spód belki (JSX, useLayoutEffect); 62px to tylko rezerwa
       na pierwsze malowanie. Bez pomiaru panel przy scrollu 0 wystawał poza dół ekranu. */
    max-height: calc(100dvh - var(--sn-menu-top, 62px) - 6px);
    padding: 12px 12px 14px;
    overflow-y: auto;
    border: 1px solid rgba(18, 63, 62, .12);
    border-top: 0;
    border-radius: 0 0 var(--sn-radius) var(--sn-radius);
    background: #f7f4ed;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .7),
      0 30px 60px -32px rgba(18, 63, 62, .55),
      0 10px 22px -16px rgba(18, 63, 62, .3);
    overscroll-behavior: contain;
    transform-origin: top center;
    animation: sn-mobile-menu-in 220ms cubic-bezier(.23, 1, .32, 1) both;
  }
  .public-service-nav-mobile-heading {
    margin: 2px 4px 12px;
    color: #123f3e;
    font: 800 15px/1.3 Manrope, sans-serif;
    letter-spacing: -.015em;
    text-wrap: balance;
  }
  /* KARTA ZAMIAST PASKA (08.09): lewa krecha 3 px i wash gasnący na 72 % szerokości dawały na
     każdym wierszu widoczny szew i dwie słabe plamy koloru. Kolor ścieżki niesie teraz jeden
     mocny element — kafelek z ikoną — a wiersz jest osobną, jasną kartą z własnym cieniem.
     Pięć akcentów (--path-mid) jest nietkniętych; zmienia się tylko to, GDZIE je widać. */
  .public-service-nav-mobile-item {
    overflow: hidden;
    border: 1px solid rgba(18, 63, 62, .09);
    border-radius: 16px;
    background: rgba(255, 255, 255, .62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 2px rgba(18, 63, 62, .04);
    animation: sn-mobile-item-in 260ms cubic-bezier(.23, 1, .32, 1) both;
  }
  .public-service-nav-mobile-item + .public-service-nav-mobile-item { margin-top: 8px; }
  .public-service-nav-mobile-item:nth-of-type(2) { animation-delay: 30ms; }
  .public-service-nav-mobile-item:nth-of-type(3) { animation-delay: 60ms; }
  .public-service-nav-mobile-item:nth-of-type(4) { animation-delay: 90ms; }
  .public-service-nav-mobile-item:nth-of-type(5) { animation-delay: 120ms; }
  .public-service-nav-mobile-item:has(> button[aria-expanded="true"]) {
    border-color: color-mix(in srgb, var(--path-mid) 40%, transparent);
    background: var(--path-tint);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 16px 30px -22px var(--path-mid);
  }
  .public-service-nav-mobile-item.is-current { border-color: var(--path-mid); }
  .public-service-nav-mobile-item > :is(button, summary) {
    display: grid;
    width: 100%;
    min-height: 56px;
    padding: 9px 10px 9px 9px;
    align-items: center;
    grid-template-columns: 36px minmax(0, 1fr) 28px;
    gap: 10px;
    border: 0;
    color: #123f3e;
    background: transparent;
    cursor: pointer;
    font: 800 14.5px/1.25 Manrope, sans-serif;
    letter-spacing: -.01em;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform 120ms cubic-bezier(.23, 1, .32, 1);
  }
  .public-service-nav-mobile-item > :is(button, summary):active { transform: scale(.985); }
  /* Ognisko do środka: sekcja ma overflow: hidden, więc pierścień na zewnątrz był ucinany. */
  .public-service-nav-mobile-item > :is(button, summary):focus-visible { outline-offset: -3px; }
  .public-service-nav-mobile-item.is-current > :is(button, summary) { color: var(--path-deep, #123f3e); }
  /* 14.09: zapowiedziana ścieżka jest wierszem-ODNOŚNIKIEM, nie akordeonem rozwijającym pustkę.
     Ten sam raster co przycisk rozwijający, żeby lista czytała się jednym rytmem. */
  .public-service-nav-mobile-item.is-link {
    display: grid;
    min-height: 56px;
    padding: 9px 10px 9px 9px;
    align-items: center;
    grid-template-columns: 36px minmax(0, 1fr) 28px;
    gap: 10px;
    color: #123f3e;
    font: 800 14.5px/1.25 Manrope, sans-serif;
    letter-spacing: -.01em;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform 120ms cubic-bezier(.23, 1, .32, 1);
  }
  .public-service-nav-mobile-item.is-link:active { transform: scale(.985); }
  .public-service-nav-mobile-item.is-link:focus-visible { outline-offset: -3px; }
  /* Odznaka „Wkrótce” siedzi w komórce etykiety, nie we własnej kolumnie: pusta kolumna
     `auto` i tak kosztowała odstęp siatki i przy 390 px łamała dwie nazwy na dwie linie. */
  .public-service-nav-mobile-label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    text-wrap: pretty;
  }
  .public-service-nav-mobile-glyph {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 12px;
    color: var(--path-mid, #007976);
    background: var(--path-tint, #e3f4f3);
    box-shadow: inset 0 0 0 1px var(--path-wash, rgba(0, 121, 118, .1));
  }
  .public-service-nav-mobile-item > :is(button, summary)[aria-expanded="true"] .public-service-nav-mobile-glyph {
    background: rgba(255, 255, 255, .72);
    box-shadow: inset 0 0 0 1.5px var(--path-mid, #007976);
  }
  /* Bieżąca ścieżka: wypełniony kafelek bije pierścień otwartej — kolejność i specyficzność
     są tu celowe, żeby „jesteś tutaj" wygrywało z „rozwinięte", gdy oba zachodzą naraz. */
  .public-service-nav-mobile-item.is-current > :is(button, summary) .public-service-nav-mobile-glyph {
    color: #fff;
    background: var(--path-mid, #007976);
    box-shadow: 0 8px 16px -10px var(--path-mid, #007976);
  }
  .public-service-nav-mobile-item > :is(button, summary) small,
  .public-service-nav-mobile-item.is-link small {
    flex: none;
    padding: 4px 7px;
    border-radius: 999px;
    color: #29504e;
    background: rgba(18, 63, 62, .09);
    font: 850 9px/1 Manrope, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .public-service-nav-mobile-chevron {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    color: #123f3e;
    background: rgba(18, 63, 62, .06);
    transition: transform 200ms cubic-bezier(.23, 1, .32, 1);
  }
  .public-service-nav-mobile-item > :is(button, summary)[aria-expanded="true"] .public-service-nav-mobile-chevron {
    color: var(--path-mid, #007976);
    background: var(--path-wash, rgba(0, 121, 118, .1));
    transform: rotate(180deg);
  }
  /* Rozwinięcie pozostaje lekkie: animujemy tylko warstwy kompozytowe, nigdy wysokość
     akordeonu, żeby kolejne pozycje nie „pływały" pod palcem. */
  .public-service-nav-mobile-details {
    margin: 0 10px;
    padding: 12px 0 14px;
    border-top: 1px solid var(--path-wash, rgba(0, 121, 118, .1));
    border-top-color: color-mix(in srgb, var(--path-mid) 22%, transparent);
    animation: public-service-nav-mobile-details-in 200ms cubic-bezier(.23, 1, .32, 1);
  }
  .public-service-nav-mobile-details .public-service-nav-eyebrow { margin-bottom: 6px; color: var(--path-mid, #187572); }
  /* Na jasnym tle telefonu pastelowy --path-accent (z ciemnego panelu desktopu) miał ~1,7:1.
     Podpis bierze tu --path-mid — najsłabsza z pięciu par daje ponad 4,5:1 na własnym tincie. */
  .public-service-nav-mobile-details .public-service-nav-intro p.public-service-nav-panel-sub { color: var(--path-mid, #187572); }
  .public-service-nav-mobile-details .public-service-nav-intro p { color: #3c5655; font-size: 13px; line-height: 1.55; }
  .public-service-nav-mobile-details .public-service-nav-decision ul { margin: 12px 0 14px; gap: 8px; }
  .public-service-nav-mobile-details .public-service-nav-decision li { color: #294745; font-size: 12.5px; }
  .public-service-nav-mobile-details .public-service-nav-decision li::before { background: var(--path-mid, #63c9c2); box-shadow: 0 0 0 4px var(--path-wash, rgba(99, 201, 194, .12)); }
  .public-service-nav-mobile-details .public-service-nav-cta {
    width: 100%;
    min-height: 46px;
    padding: 6px 14px 6px 20px;
    justify-content: center;
    color: #fff;
    background: var(--path-deep, #123f3e);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 12px 24px -16px var(--path-deep, #123f3e);
  }
  .public-service-nav-mobile-details .public-service-nav-cta > svg {
    color: #fff;
    background: rgba(255, 255, 255, .16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  }
  .public-service-nav-mobile-trust { padding-top: 14px; }
  .public-service-nav-mobile-trailing { display: flex; padding-top: 12px; }
  .public-service-nav-mobile-trailing > a { width: 100%; justify-content: center; }
  .public-service-nav-mobile-free-talk {
    display: grid;
    width: 100%;
    min-height: 64px;
    margin-top: 12px;
    padding: 12px 14px;
    align-items: center;
    grid-template-columns: 36px minmax(0, 1fr) 20px;
    gap: 12px;
    border: 0;
    border-radius: 16px;
    color: #fff;
    /* Ta sama akcja i paleta co w belce. */
    background: linear-gradient(135deg, #123f3e, #146661);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 18px 32px -20px rgba(15, 26, 26, .5);
    cursor: pointer;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform 140ms cubic-bezier(.23, 1, .32, 1);
    animation: sn-mobile-item-in 260ms cubic-bezier(.23, 1, .32, 1) 150ms both;
  }
  .public-service-nav-mobile-free-talk:active { transform: scale(.985); }
  .public-service-nav-mobile-free-talk-icon {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  }
  .public-service-nav-mobile-free-talk strong,
  .public-service-nav-mobile-free-talk small { display: block; }
  .public-service-nav-mobile-free-talk strong { font: 850 14px/1.2 Manrope, sans-serif; letter-spacing: -.01em; }
  .public-service-nav-mobile-free-talk small { margin-top: 3px; color: rgba(255, 255, 255, .92); font: 700 11.5px/1.3 Manrope, sans-serif; }
}

@keyframes public-service-nav-mobile-details-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes sn-mobile-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes sn-mobile-item-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 430px) {
  .public-service-nav-bar { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
  .public-service-nav-mobile-toggle { padding-inline: 12px; font-size: 11px; }
  .public-service-nav-trust-actions { grid-template-columns: 1fr; }
  .public-service-nav-trust-actions button { min-height: 44px; align-items: center; justify-content: flex-start; flex-direction: row; padding-inline: 12px; text-align: left; }
}

@media (max-width: 340px) {
  /* Sama ikona po prawej nie potrzebuje kolumny .92fr: przełącznik dostaje całą resztę. */
  .public-service-nav-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .public-service-nav-free-talk { width: var(--sn-control-h); padding: 0; }
  .public-service-nav-free-talk > span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .public-service-nav,
  .public-service-nav-item,
  .public-service-nav-item::after,
  .public-service-nav-mobile-toggle,
  .public-service-nav-free-talk,
  .public-service-nav-mobile-free-talk,
  .public-service-nav-trust-toggle,
  .public-service-nav-trust-toggle > svg:last-child,
  .public-service-nav-panel,
  .public-service-nav-trust-panel,
  .public-service-nav-cta,
  .public-service-nav-trust-actions button,
  .public-service-nav-mobile-item > :is(button, summary),
  .public-service-nav-mobile-glyph,
  .public-service-nav-mobile-chevron { transition: none; }
  /* !important, bo selektory plam z :nth-child sa bardziej specyficzne — gwarancja
     bezruchu nie moze zalezec od bramki w JS. Gradient zostaje, ruch znika. */
  .public-service-nav-mesh span,
  .public-service-nav-item.is-current[data-service="diagnosis"],
  .public-service-nav-mobile-menu,
  .public-service-nav-mobile-item,
  .public-service-nav-mobile-free-talk,
  .public-service-nav-mobile-details { animation: none !important; }
}

.public-service-nav-lead {
  display: flex;
  min-width: 0;
  align-items: center;
}
.public-service-nav-lead > .public-service-nav-desktop-items { flex: 1; min-width: 0; }

/* Kontakt i Zespół — drugorzędne działania paska, wizualnie równorzędne z „Polityka, zgody
   i RODO", żeby nie konkurowały z „Bezpłatną rozmową". Dodane 08.09.2026.
   Przejście obejmuje wyłącznie `transform` i `opacity` — kontrakt wizualny tego paska
   (src/test/publicServiceNavArchitecture.test.js) zabrania animowania koloru, tła i obramowania,
   bo te właściwości wymuszają malowanie przy każdej klatce. */
.public-service-nav-secondary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(15, 47, 51, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: #12333a;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .16s cubic-bezier(.23, 1, .32, 1);
}
.public-service-nav-secondary:hover { background: #fff; border-color: rgba(15, 47, 51, .28); }
.public-service-nav-secondary:active { transform: scale(.97); }
.public-service-nav-secondary:focus-visible { outline: 2px solid #12707a; outline-offset: 2px; }
@media (max-width: 1080px) {
  .public-service-nav-actions > .public-service-nav-secondary { display: none; }
  .public-service-nav-mobile-contact { width: 100%; display: flex; justify-content: center; margin-top: 10px; }

}
@media (prefers-reduced-motion: reduce) {
  .public-service-nav-secondary { transition: none; }
  .public-service-nav-secondary:active { transform: none; }
}

/* Izolacja od resetów strony gospodarza: ten sam kontrast, metryka i geometria HTML/React. */
.public-service-nav { font: 400 16px/1.5 Manrope, sans-serif; isolation: isolate; }
.public-service-nav, .public-service-nav * { box-sizing: border-box; }
.public-service-nav svg { display: inline-block; flex-shrink: 0; vertical-align: middle; }
.public-service-nav-mobile-free-talk { text-decoration: none; }
.public-service-nav-disclosure { display: none; }
.public-service-nav summary { list-style: none; cursor: pointer; }
.public-service-nav summary::-webkit-details-marker { display: none; }
.public-service-nav summary:focus-visible { outline: 3px solid #146661; outline-offset: 2px; }
.public-service-nav-static-group { display: contents; }

.public-service-nav-static-group .public-service-nav-panel { top: 100%; left: -1px; right: -1px; }
.public-service-nav-static-group:is(:hover, :focus-within) > .public-service-nav-panel {
  visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0);
}
.public-service-nav-disclosure:not([open]) > .public-service-nav-mobile-menu { display: none; }
@media (max-width: 1080px) {
  .public-service-nav-disclosure { display: block; }
  .public-service-nav-disclosure .public-service-nav-mobile-menu { left: -1px; right: -1px; max-height: calc(100dvh - 86px); }
  .public-service-nav-mobile-item[open] .public-service-nav-mobile-chevron { transform: rotate(180deg); }
}

.public-service-nav-disclosure:not([open]) .public-service-nav-icon-close,
.public-service-nav-disclosure[open] .public-service-nav-icon-menu { display: none; }

/* ── Palety kategorii ─────────────────────────────────────────────────────────────────────────
   12.09.2026, klinicysta: „czytelnia i o pracowni submenu ma taki sam kolor jak reszta chociaz
   prosilem cie o graficzne zadbanie o ui i ux". Zmierzone: własną paletę miała WYŁĄCZNIE ścieżka
   poszerzonych stanów; pozostałe pięć brało domyślny zestaw tokenów, więc panele różniły się
   tylko tekstem. Każda ścieżka dostaje teraz własne lico w obrębie marki (teal · ink · bone ·
   złoto), a nie losowy kolor — kontrast każdej pary liczy test, nie oko. */
/* 13.09.2026, klinicysta: „zmien ten ciemnozielony na cos co przypominac bedzie to co bylo
   wczesniej (we wczesniejszym menu)". Wracamy do atramentowo-tealowej rodziny sprzed 12.09:
   `#0f1a1a → #123f3e` z akcentem `#3fb0bd`. Zielen `#15544e` i jasny akcent `#7fd8d2` odchodza —
   panel ma znowu czytac sie jak atrament z tealem, nie jak butelkowa zielen. Lico karty jest
   o pol tonu jasniejsze od samej rodziny (`#164b49`, nie `#14403f`): przy atramentowym `#0f1a1a`
   pod spodem `#14403f` dawalo 1,55:1, czyli ponizej progu 1,6:1 pilnowanego przez
   `PublicServiceNavPremium` — karta znikala w tle panelu. 14.09: po przywroceniu gradientu pod
   kartami lico musi trzymac ten prog wobec OBU koncow, takze tealowego `#123f3e` — stad jasniejszy
   `#1f7a72` (2,26:1 przy tealowym koncu, 3,45:1 przy atramentowym, bialy tekst 5,14:1). Koniec
   gradientu ZOSTAJE na `#123f3e`: przy jasniejszym tealu akcent `#3fb0bd` spada do 3,53:1
   i lamie AA dla podpisu w kolumnie wprowadzenia. */
.public-service-nav [data-service="diagnosis"] {
  --path-card-base: #1f7a72;
  --path-deep: #0f1a1a;
  /* 16.09.2026, klinicysta: „obecna zielen jest za ciemna i przytlaczajaca" — prosi o jednolity
     `#123F3D`, czyli dokladnie te plaszczyzne, ktora menu mialo 12.09 rano, zanim kazda sciezka
     dostala wlasny gradient. Gradient od atramentu odchodzi: zaczynal sie od `#0f1a1a`, wiec
     lewa polowa panelu (ta z tytulem i opisem) czytala sie jak czern, a teal pokazywal sie
     dopiero pod kartami.
     Zmierzone progi na tej barwie: akcent `#3fb0bd` 4,52:1 (AA przechodzi, ale z zapasem 0,02 —
     nie przyciemniaj go dalej), tekst wprowadzenia 11,11:1, karta teal `#1f7a72` 2,26:1,
     `--path-mid` 1,72:1, karta jasna 10,40:1. */
  /* 17.09.2026, klinicysta: „czemu tego submenu nie zrobic zatem tak gradientowo zeby podkreslic
     te dwa wybory do klikniecia?" — wzorcem baner `/wsparcie-dla-bliskich` (`--supp-panel`, teal
     przechodzacy w indygo). ZASTEPUJE ustalenie z 16.09 o jednolitym `--path-panel: #123F3D`: ta barwa zostaje
     poczatkiem i cala lewa polowa panelu (tytul, opis, CTA), a w prawo — pod druga karta —
     przechodzi w indygo jej podstrony. Gradient wiaze dwie tozsamosci pakietu, nie dekoruje.
     Kazdy przystanek policzony wobec progow, nie oceniony okiem: wobec atramentu `#0f1a1a` >= 1,4
     (1,53 / 1,46 / 1,49); akcent `#3fb0bd` >= 4,5 (4,52 / 4,71 / 4,62); ciemna karta `#146661`
     >= 1,6 (1,72 / 1,79 / 1,76). Odrzucone `#2a2b66` z banera: 1,38 wobec atramentu — panel gasnie. */
  --path-panel: linear-gradient(116deg, #123f3d 0%, #123f3d 24%, #24345f 62%, #302f70 100%);
  --path-accent: #3fb0bd;
  --path-mid: #146661;
  --path-tint: #f4f2ec;
  --path-wash: rgba(63, 176, 189, .1);
  --path-glow: rgba(184, 149, 90, .16);
}
.public-service-nav [data-service="photobiomodulation"] {
  --path-deep: #2b1a1c;
  --path-panel: linear-gradient(118deg, #271719 0%, #3d2020 46%, #7d3428 100%);
  --path-accent: #f5b39f;
  --path-mid: #8f3f32;
  --path-tint: #fbeee9;
  --path-wash: rgba(143, 63, 50, .1);
  --path-glow: rgba(245, 179, 159, .2);
}
.public-service-nav [data-service="courses"] {
  --path-deep: #1a231b;
  --path-panel: linear-gradient(118deg, #182019 0%, #22301f 46%, #3f5c33 100%);
  --path-accent: #b7d99f;
  --path-mid: #45673a;
  --path-tint: #eef5e8;
  --path-wash: rgba(69, 103, 58, .1);
  --path-glow: rgba(183, 217, 159, .18);
}
.public-service-nav [data-service="czytelnia"] {
  --path-deep: #1d1b16;
  --path-panel: linear-gradient(118deg, #1b1915 0%, #2c2619 46%, #5f4f2f 100%);
  --path-accent: #e6d5ab;
  --path-mid: #6b5a36;
  --path-tint: #f7f2e6;
  --path-wash: rgba(107, 90, 54, .1);
  --path-glow: rgba(230, 213, 171, .2);
}
.public-service-nav [data-service="team"] {
  --path-deep: #141e22;
  --path-panel: linear-gradient(118deg, #121c20 0%, #1b2c31 46%, #33565c 100%);
  --path-accent: #9fd0d6;
  --path-mid: #375f66;
  --path-tint: #ecf4f5;
  --path-wash: rgba(55, 95, 102, .1);
  --path-glow: rgba(159, 208, 214, .18);
}

/* Dodatkowa powierzchnia tylko menu; 15 kanonicznych tokenów strony OSS pozostaje wspólne. */
.public-service-nav [data-service="altered-states"] { --path-card-base: #695025; }

/* Dwie drogi = skupienie na sobie / relacja. Cztery formy = wejście + trzy możliwości.
   Cała powierzchnia niesie różnicę; ikonki tylko ją dopowiadają (13.09.2026). */
.public-service-nav-panel-inner:has(.public-service-nav-choices) {
  grid-template-columns: minmax(220px, .52fr) minmax(0, 1.48fr);
  gap: clamp(24px, 3vw, 44px);
}
.public-service-nav-choices-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  /* 17.09.2026, klinicysta: „Dwie drogi — wybierz swoja to powinno byc chyba na bialo".
     Biel, nie akcent: ten naglowek nazywa AKCJE do wykonania, wiec ma gorowac nad eyebrow
     i podpisem sciezki, ktore zostaja w akcencie. W akordeonie telefonu tlo jest jasne —
     tam obowiazuje nadpisanie na `--path-mid` nizej, razem z pigulka. */
  color: #fff;
  font: 750 13px/1.3 Manrope, sans-serif;
}
.public-service-nav-choices-count {
  display: grid;
  place-items: center;
  min-width: 25px;
  height: 25px;
  padding: 0 6px;
  border-radius: 999px;
  background: #fff;
  color: var(--path-deep);
  font: 800 13px/1 Manrope, sans-serif;
  font-variant-numeric: tabular-nums;
}
.public-service-nav-choices {
  display: grid;
  width: 100%;
  gap: 20px;
  margin: 0;
}
.public-service-nav-choices[data-liczba="2"] { grid-template-columns: 1fr 1fr; }
.public-service-nav-choices[data-liczba="4"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 17.09.2026, klinicysta: „nie podoba mi sie wizualnie zrealizowanie tych boxow zwlaszcza
   tekstu". Dotad tytul 18 px i opis 13 px lezaly zbyt blisko siebie w skali, a opis w 46ch
   dominowal blok. Teraz: tytul 800/19–21 px/1,15, opis 500/14 px/1,5 w mierze 42ch, oddech 24/18/9.
   Kolory tekstu ida przez tokeny --choice-*, zeby jasna karta nadpisala je w jednym miejscu:
   na karcie ciemnej opis `#eef7f5` daje 4,71:1 na najjasniejszym koncu (`#1f7a72`), biel 5,14. */
.public-service-nav-choice {
  --choice-title: #fff;
  --choice-copy: #eef7f5;
  --choice-em: #fff;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: start;
  align-items: start;
  gap: 18px;
  min-width: 0;
  padding: 24px 24px 26px;
  border: 1px solid var(--path-glow);
  border-radius: 18px;
  background: linear-gradient(135deg, var(--path-mid), var(--path-card-base));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 26px 48px -30px rgba(8, 20, 20, .95);
  color: var(--path-tint);
  text-decoration: none;
  transition: transform 160ms cubic-bezier(.23, 1, .32, 1);
}
.public-service-nav-choice-glyph {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 0;
  background: transparent;
  color: var(--path-accent);
}
.public-service-nav-choice-glyph svg { position: relative; z-index: 1; width: 100%; height: 100%; }
.public-service-nav-choice-body { display: grid; grid-column: 1 / -1; gap: 9px; min-width: 0; }
.public-service-nav-choice-body > strong {
  color: var(--choice-title);
  font: 800 19px/1.15 Manrope, sans-serif;
  font-size: clamp(19px, 1.45vw, 21px);
  letter-spacing: -.028em;
  text-wrap: balance;
}
.public-service-nav-choice-note { max-width: 42ch; color: var(--choice-copy); font: 500 14px/1.5 Manrope, sans-serif; text-wrap: pretty; }
.public-service-nav-choice-note strong { font: inherit; font-weight: 800; color: var(--choice-em); }
/* 17.09.2026: „obecna strzalka to sam krazek z ikona". Dysk 36 px ze swiatlem od gory i cieniem,
   a pod spodem pierscien, ktory na hover rozchodzi sie od dysku (tylko transform/opacity). */
.public-service-nav-choice-arrow {
  position: relative;
  display: grid;
  grid-column: 2;
  grid-row: 1;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--path-accent);
  color: var(--path-deep);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 10px 20px -12px rgba(8, 20, 20, .8);
  transition: transform 160ms cubic-bezier(.23, 1, .32, 1);
}
.public-service-nav-choice-arrow svg { width: 16px; height: 16px; }
.public-service-nav-choice-arrow::after {
  position: absolute;
  inset: -5px;
  border: 1.5px solid var(--path-accent);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.82);
  transition: transform 180ms cubic-bezier(.23, 1, .32, 1), opacity 180ms cubic-bezier(.23, 1, .32, 1);
  content: "";
  pointer-events: none;
}
/* Jedno centrum: precyzja i skierowanie uwagi na własne funkcjonowanie. */
.public-service-nav-choices[data-liczba="2"] .public-service-nav-choice[data-wybor="1"] {
  background: radial-gradient(ellipse at 0% 0%, var(--path-mid), var(--path-card-base) 90%);
  border-color: color-mix(in srgb, var(--path-accent) 28%, transparent);
  border-radius: 18px;
  grid-template-columns: 1fr auto;
}
.public-service-nav-choices[data-liczba="2"] .public-service-nav-choice[data-wybor="1"] .public-service-nav-choice-glyph {
  width: 48px;
  height: 48px;
  margin: 0;
  background: transparent;
  color: var(--path-accent);
}
/* Dwa przecinające się pola: jest miejsce także dla osoby, która towarzyszy choremu.
   Jasna powierzchnia i otwarty prawy górny róg rozróżniają ją nawet bez znaków i tekstu. */
.public-service-nav-choices[data-liczba="2"] .public-service-nav-choice[data-wybor="2"] {
  --choice-title: var(--path-deep);
  --choice-copy: var(--path-deep);
  --choice-em: var(--path-mid);
  color: var(--path-deep);
  /* Polysk od gornego lewego rogu do lica; OBA konce musza trzymac 4,5:1 wobec karty tealowej. */
  background: linear-gradient(160deg, var(--choice-sheen, #ffffff) 0%, var(--path-tint) 100%);
  border: 1px solid color-mix(in srgb, var(--path-mid) 22%, transparent);
  border-radius: 18px 52px 18px 18px;
  box-shadow: inset 0 1px 0 #fff, 0 26px 48px -30px rgba(8, 20, 20, .95);
  grid-template-columns: 1fr 78px;
}
.public-service-nav-choices[data-liczba="2"] .public-service-nav-choice[data-wybor="2"] .public-service-nav-choice-glyph {
  grid-column: 2;
  justify-self: end;
  width: 72px;
  height: 48px;
  margin: 0;
  color: var(--path-mid);
}
.public-service-nav-choices[data-liczba="2"] .public-service-nav-choice[data-wybor="2"] .public-service-nav-choice-arrow {
  grid-column: 1;
  background: var(--path-mid);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 20px -12px var(--path-mid);
}
.public-service-nav-choices[data-liczba="2"] .public-service-nav-choice[data-wybor="2"] .public-service-nav-choice-arrow::after { border-color: var(--path-mid); }
/* 16.09.2026, klinicysta: „czemu box w submenu pomoc psychologiczna bliskim nie jest w kolorze
   typowym dla tej podstrony? zobacz jak wczesniej mielismy to w menu i zastosuj ten kolor".
   Karta dziedziczyla CALA palete diagnozy (`--path-tint` kosc, `--path-deep` atrament), wiec nie
   niosla zadnej wlasnej tozsamosci — a `/wsparcie-dla-bliskich` ma swoja od poczatku:
   `--supp-accent: #5b4bc4`, `--supp-accent-strong: #4a3aa8`. To samo rozroznienie mialo menu
   12.09 rano, gdy pomoc bliskim byla osobna pozycja z wlasna paleta indygo.
   Nadpisujemy TOKENY na samej karcie, wiec wszystkie jej elementy (lico, tekst, znak, strzalka)
   ida za nimi bez drugiej implementacji.
   Lico `#eff2fd`, nie ciemniejsze indygo: karta MUSI trzymac 4,5:1 wzgledem sasiedniej karty
   tealowej, inaczej dwa wybory przestaja sie odrozniac. `#eaeefb` ze starego menu daje 4,44 —
   za malo. `#eff2fd` daje 4,60, czyli dokladnie tyle, ile dawala dotychczasowa kosc (4,59). */
.public-service-nav [data-service="diagnosis"] .public-service-nav-choice[data-wybor="2"] {
  --path-tint: #eff2fd;
  --path-deep: #2b2560;
  --path-mid: #4a3aa8;
  /* 17.09: opis o stopien jasniejszy od tytulu (9,76:1 na `#eff2fd`), polysk `#f6f7ff` (4,81:1
     wobec `#1f7a72`). Blok stoi PO regule ogolnej karty 2, zeby wygrac rowna specyficznosc. */
  --choice-copy: #3a3378;
  --choice-sheen: #f6f7ff;
}

/* Screening poprzedza trzy równorzędne formy; nie jest czwartym identycznym kafelkiem. */
.public-service-nav-choices[data-liczba="4"] .public-service-nav-choice[data-wybor="1"] {
  grid-column: 1 / -1;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  --choice-title: var(--path-deep);
  --choice-copy: var(--path-deep);
  --choice-em: var(--path-mid);
  color: var(--path-deep);
  background: var(--path-tint);
  border-color: var(--path-tint);
}
.public-service-nav-choices[data-liczba="4"] .public-service-nav-choice[data-wybor="1"] .public-service-nav-choice-glyph { color: var(--path-mid); }
.public-service-nav-choices[data-liczba="4"] .public-service-nav-choice[data-wybor="1"] .public-service-nav-choice-body { grid-column: 2; }
.public-service-nav-choices[data-liczba="4"] .public-service-nav-choice[data-wybor="1"] .public-service-nav-choice-arrow { grid-column: 3; }
.public-service-nav-choices[data-liczba="4"] .public-service-nav-choice:not([data-wybor="1"]) { padding: 18px; }
.public-service-nav-choices[data-liczba="4"] .public-service-nav-choice-body > strong { font-size: 15px; }
.public-service-nav-choices[data-liczba="4"] .public-service-nav-choice[data-wybor="1"] .public-service-nav-choice-body > strong { font-size: 18px; }
.public-service-nav-choice:focus-visible { outline: 3px solid var(--path-accent); outline-offset: 4px; }
.public-service-nav-choice:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) {
  .public-service-nav-choice:hover { transform: translateY(-3px); }
  .public-service-nav-choice:hover .public-service-nav-choice-arrow { transform: rotate(-35deg); }
  .public-service-nav-choice:hover .public-service-nav-choice-arrow::after { opacity: .9; transform: scale(1); }
}
@media (max-width: 1080px) {
  .public-service-nav-mobile-details .public-service-nav-choices-head { margin-top: 14px; color: var(--path-mid); }
  .public-service-nav-mobile-details .public-service-nav-choices-count { background: var(--path-accent); }
  .public-service-nav-choice { padding: 20px; }
  .public-service-nav-choices[data-liczba="2"] .public-service-nav-choice[data-wybor="2"],
  .public-service-nav-choices[data-liczba="4"] .public-service-nav-choice[data-wybor="1"] { border-color: color-mix(in srgb, var(--path-mid) 45%, transparent); }
}
@media (max-width: 600px) {
  .public-service-nav-choices { gap: 14px; }
  .public-service-nav-choices[data-liczba="2"],
  .public-service-nav-choices[data-liczba="4"] { grid-template-columns: 1fr; }
  .public-service-nav-choice { padding: 18px; gap: 14px; }
  .public-service-nav-choice-body > strong { font-size: 18px; }
  .public-service-nav-choices[data-liczba="2"] .public-service-nav-choice[data-wybor="1"] { grid-template-columns: 56px 1fr; }
  .public-service-nav-choices[data-liczba="2"] .public-service-nav-choice[data-wybor="1"] .public-service-nav-choice-glyph {
    width: 42px; height: 42px; margin: 0;
  }
  .public-service-nav-choices[data-liczba="2"] .public-service-nav-choice[data-wybor="1"] .public-service-nav-choice-body { grid-column: 2; grid-row: 1 / 3; }
  .public-service-nav-choices[data-liczba="2"] .public-service-nav-choice[data-wybor="1"] .public-service-nav-choice-arrow { grid-column: 1; grid-row: 2; }
  .public-service-nav-choices[data-liczba="2"] .public-service-nav-choice[data-wybor="2"] { grid-template-columns: 1fr 66px; border-radius: 18px 48px 18px 18px; }
  .public-service-nav-choices[data-liczba="2"] .public-service-nav-choice[data-wybor="2"] .public-service-nav-choice-glyph { width: 66px; height: 44px; margin: 0; }

  .public-service-nav-choices[data-liczba="4"] .public-service-nav-choice { grid-template-columns: 32px 1fr auto; padding: 14px; gap: 10px; }
  .public-service-nav-choices[data-liczba="4"] .public-service-nav-choice-body { grid-column: 2; gap: 6px; }
  .public-service-nav-choices[data-liczba="4"] .public-service-nav-choice-arrow { grid-column: 3; width: 24px; height: 24px; }
  .public-service-nav-choices[data-liczba="4"] .public-service-nav-choice-glyph { width: 32px; height: 32px; }
  .public-service-nav-choices[data-liczba="4"] .public-service-nav-choice[data-wybor="1"] .public-service-nav-choice-body > strong { font-size: 16px; }
}
/* 14.09.2026, klinicysta: „diagnoza i wsparcie nie ma ladnego koloru submenu ktory byl
   wczesniej". Znaleziona przyczyna: to była TA reguła. Od 12.09 panel z kartami dostawał płaski
   `--path-deep`, czyli prawie czerń — gradient atrament→teal, który klinicysta pamiętał
   z wcześniejszego menu, w ogóle się nie rysował, i żadna zmiana palety nie mogła tego naprawić,
   bo `--path-panel` był tu odrzucany. Gradient wraca; „własna powierzchnia pod kartą" jest
   zapewniona przez lico karty, które musi trzymać 1,6:1 wobec KAŻDEGO końca gradientu
   (pilnuje tego `PublicServiceNavPremium`), a nie przez wygaszenie całej płachty.
   Zastępuje ustalenie z 12.09. */
.public-service-nav-panel:has(.public-service-nav-choices) { background: var(--path-panel); }
.public-service-nav-panel-inner:has(.public-service-nav-choices)::before {
  left: 0;
  right: auto;
  width: 23%;
  background: radial-gradient(ellipse at 0% 0%, var(--path-glow), transparent 75%);
}
.public-service-nav-panel-inner .public-service-nav-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.public-service-nav-panel-inner .public-service-nav-intro .public-service-nav-cta {
  margin-top: auto;
  max-width: 100%;
  min-height: var(--sn-control-h);
  line-height: 1.3;
  padding-block: 6px;
}
.public-service-nav-panel-inner .public-service-nav-intro > p:last-of-type { margin-bottom: 26px; }
.public-service-nav-panel-inner:not(:has(.public-service-nav-choices)) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 280px;
}
.public-service-nav-panel-inner:not(:has(.public-service-nav-choices)) .public-service-nav-decision {
  justify-content: center;
  border-left: 1px solid var(--path-glow);
  padding-left: clamp(28px, 4vw, 56px);
}
.public-service-nav-panel-inner:not(:has(.public-service-nav-choices)) .public-service-nav-decision ul {
  margin: 0;
  gap: 0;
}
.public-service-nav-panel-inner:not(:has(.public-service-nav-choices)) .public-service-nav-decision li {
  padding: 18px 0 18px 22px;
  border-bottom: 1px solid var(--path-glow);
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.55;
}
.public-service-nav-panel-inner:not(:has(.public-service-nav-choices)) .public-service-nav-decision li::before { top: calc(18px + .55em); }
/* Jedno wejście panelu, potem pola wyboru. Zamykanie i klawiatura bez opóźnień. */
.public-service-nav-panel[data-open="true"] .public-service-nav-choice,
.public-service-nav-static-group:is(:hover, :focus-within) .public-service-nav-choice,
.public-service-nav-mobile-details .public-service-nav-choice {
  animation: sn-mobile-item-in 190ms cubic-bezier(.23, 1, .32, 1) 35ms backwards;
}
.public-service-nav [data-service] .public-service-nav-choice[data-wybor="2"] { animation-delay: 65ms; }
.public-service-nav [data-service] .public-service-nav-choice[data-wybor="3"] { animation-delay: 95ms; }
.public-service-nav [data-service] .public-service-nav-choice[data-wybor="4"] { animation-delay: 125ms; }
.public-service-nav-panel[data-instant="true"] .public-service-nav-choice,
.public-service-nav-static-group:focus-within .public-service-nav-choice { animation: none; }
.public-service-nav-mobile-details .public-service-nav-cta { margin-top: 18px; }

@media (prefers-reduced-motion: reduce) {
  .public-service-nav *, .public-service-nav *::before, .public-service-nav *::after {
    transition: none !important;
    animation: none !important;
  }
  .public-service-nav-choice:hover, .public-service-nav-choice:active,
  .public-service-nav-choice:hover .public-service-nav-choice-arrow { transform: none; }
}