/* F1-a: istniejące okruszki nawigacji. Kolory dziedziczone z motywu strony. */
/* Karty sprzedaży używają dwukolumnowego main. Powłoka zajmuje cały wiersz,
   tak jak nagłówek umieszczony wcześniej przed main; treść karty zachowuje grid. */
main#main > .naglowek,
main#main > .tekst-naglowka,
main#main > .okruszki {
  grid-column: 1 / -1;
  min-width: 0;
}

.okruszki {
  max-width: 100%;
  margin-block: 1rem;
  color: inherit;
  font: inherit;
}

.okruszki ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.okruszki li {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.okruszki li + li::before {
  content: "";
  display: inline-block;
  width: .4rem;
  height: .4rem;
  margin-inline-end: .75rem;
  border-block-start: 1px solid currentColor;
  border-inline-end: 1px solid currentColor;
  transform: rotate(45deg);
  vertical-align: .1em;
}

.okruszki a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
  padding: .25rem .125rem;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .2em;
  overflow-wrap: anywhere;
}

.okruszki a:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

@media print {
  .okruszki { display: none; }
}

/* C4 (audyt 9.10): pasek „Sekcje ustawień” na telefonie.
   Zmierzone przy 390 px: 19 pozycji zawijało się w 8 wierszy (421 px) przed treścią ekranu. Dawna
   reguła telefonu (jeden przewijany wiersz, `ogniwo_components.css.j2`) przegrywała z późniejszą
   regułą Obwodu `flex-wrap:wrap` o tej samej specyficzności. Ten arkusz ładuje się PO bloku <style>
   powłoki i poza warstwami arkusza v2, więc wygrywa w obu wariantach wyglądu.
   Selektor po etykiecie paska: paski kosztów i dashboardów mają mało pozycji i zostają bez zmian.
   Bez zmiany kolorów i nazw — to wyłącznie układ. Grupowanie sekcji należy do pakietu U1. */
@media (max-width: 768px) {
  nav.pod-nawigacja[aria-label="Sekcje ustawień"] {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    max-width: 100%;
    /* Zanikająca prawa krawędź mówi, że lista ciągnie się dalej; odstęp pozwala dojechać ostatniej pozycji. */
    padding-inline-end: 32px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  }
  nav.pod-nawigacja[aria-label="Sekcje ustawień"] a {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}
/* Bez JavaScriptu nikt nie przewinie paska do bieżącej sekcji — wtedy stoi ona pierwsza od lewej. */
@media (max-width: 768px) and (scripting: none) {
  nav.pod-nawigacja[aria-label="Sekcje ustawień"] a[aria-current="page"] { order: -1; }
}

/* F1-d: drugi poziom menu. Pozycje obszaru stoją pod jego nazwą, cofnięte o szerokość strzałki;
   nazwa obszaru ma kolor pozycji, nie przygaszony kolor nagłówka grupy. Bez nowych kolorów. */
.sidebar .sb-obszar > a.sb-poz,
.sidebar .sb-konto > a.sb-poz {
  margin-inline-start: 22px;
}
.sidebar .sb-obszar > summary.sb-poz {
  color: inherit;
  font-weight: 600;
}
.sidebar details > summary:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}