/* Krój całej strony — także okien dialogowych, powiadomień i list rozwijanych, które MudBlazor stawia poza układem strony:
   IBM Plex Sans z motywu (Theming/BarwyMarki.cs). Do zlecenia U1b (28 września 2026 r.) stał tu Roboto, który jako trzeci
   krój wygrywał wszędzie poza treścią panelu i stron publicznych. */
html, body {
    font-family: var(--mud-typography-default-family, 'IBM Plex Sans', Helvetica, Arial, sans-serif);
}

.ocp-staff-context {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--mud-palette-warning, #E69F00);
    border-radius: var(--mud-default-borderradius, 4px);
    background: var(--mud-palette-surface, #FFFFFF);
    color: var(--mud-palette-text-primary, #000000);
}

.ocp-staff-context-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.ocp-staff-context-form-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.ocp-tenant-select {
    min-width: 16rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius, 4px);
    background: var(--mud-palette-surface, #FFFFFF);
    color: var(--mud-palette-text-primary, #000000);
}

.ocp-visually-hidden {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Panel „Leady” (24 września 2026 r.): adres poczty łamie się w dowolnym miejscu, żeby jeden długi adres nie
   rozpychał tabeli, a kolumna „Wiadomości” ma szerokość, przy której plakietka nie łamie się w pół słowa. */
.ocp-leady-adres {
    overflow-wrap: anywhere;
}

.ocp-leady-wiadomosci {
    min-width: 13rem;
}

.ocp-leady-wiadomosc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.25rem;
}

/* RAMKA KOMUNIKATU STRON KONTA (StatusMessage i ramki wpisane w strony konta) — ta sama postać co ramka MudAlert
   z obrysem w reszcie panelu (poprawki U1c, 28 września 2026 r.): zaokrąglenie z motywu (4 px zamiast 8 px), wcięcie
   13 px × 16 px, obrys i ikona w barwie rodzaju, tekst w barwie tekstu, a zamiast znaków tekstowych ⚠ ✓ • — te same
   ikony co w ramkach MudBlazor (Error, CheckCircle i Info w wersji „outlined”, obrys konturu jako maska). Znak tekstowy
   zostaje w znaczniku przezroczysty: klasy alert i alert-danger oraz treść ramki czyta próba bezpieczeństwa
   LoginAndRegistrationTests (ten sam komunikat dla konta nieaktywnego i nieznanego). O rodzaju mówią ikona i słowo
   w etykiecie, nie sama barwa (zasada K7). */
.ocp-status-message {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.8125rem 1rem;
    margin-bottom: 1rem;
    border-radius: var(--mud-default-borderradius, 4px);
    border: 1px solid var(--mud-palette-text-primary, #000000);
    background: var(--mud-palette-surface, #FFFFFF);
    color: var(--mud-palette-text-primary, #000000);
    --ocp-status-barwa: var(--mud-palette-text-secondary, #6D6D6D);
    --ocp-status-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/%3E%3C/svg%3E");
}

.ocp-status-message .ocp-status-icon {
    flex: 0 0 1.375rem;
    width: 1.375rem;
    height: 1.375rem;
    overflow: hidden;
    color: transparent;
    background-color: var(--ocp-status-barwa);
    -webkit-mask: var(--ocp-status-ikona) center / contain no-repeat;
    mask: var(--ocp-status-ikona) center / contain no-repeat;
}

.ocp-status-message-blad {
    border-color: var(--mud-palette-error, #0072B2);
    --ocp-status-barwa: var(--mud-palette-error, #0072B2);
    --ocp-status-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3C/svg%3E");
}

.ocp-status-message-wykonano,
.ocp-status-message-powodzenie {
    border-color: var(--mud-palette-success, #0072B2);
    --ocp-status-barwa: var(--mud-palette-success, #0072B2);
    --ocp-status-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4C12.76,4 13.5,4.11 14.2,4.31L15.77,2.74C14.61,2.26 13.34,2 12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z'/%3E%3C/svg%3E");
}

.ocp-status-message-bez-zmian {
    border-color: var(--mud-palette-text-secondary, #6D6D6D);
}

.ocp-status-message .ocp-status-label {
    color: var(--ocp-status-barwa);
}

.ocp-status-label {
    font-weight: 700;
    display: block;
}

.ocp-hp {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

a {
    color: #0072B2;
}

/* POLA I PRZYCISKI FORMULARZY STRON PUBLICZNYCH (kontakt, karta produktu i zamówienie w sklepie) — poprawki U1c,
   28 września 2026 r. Formularze tych stron są zwykłymi formularzami HTML (bez obwodu) na klasach form-floating,
   form-control i btn. Do tej zmiany miały obramowanie #c5cdd3 o kontraście 1,61∶1 wobec bieli (próg 3∶1 z WCAG 2.1,
   kryterium 1.4.11 — po wpisaniu tekstu obramowanie jest jedynym znakiem pola), zaokrąglenie 8 px, etykietę zmniejszaną
   do 12 px i przycisk w błękicie #0072B2 zamiast granatu marki, więc wyglądały inaczej niż pola panelu i przyciski
   MudBlazor tej samej strony. Teraz mają postać pola MudBlazor z obramowaniem i przycisku wypełnionego w barwie głównej —
   te same wymiary i zmienne motywu co pola stron konta (blok panelu, „POLE STRONY KONTA”). */
.form-floating {
    position: relative;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.form-control {
    box-sizing: border-box;
    width: 100%;
    min-height: 3.5rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius, 4px);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.1876;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
}

textarea.form-control {
    padding-top: 1.15625rem;
    line-height: 1.5;
}

.form-control:hover:not(:disabled):not(:focus) {
    border-color: var(--mud-palette-text-primary);
}

.form-control:focus,
.form-control:focus-visible {
    outline: none;
    border-color: var(--mud-palette-primary);
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
}

.form-floating > label {
    position: absolute;
    top: 0;
    left: 0;
    max-width: calc(100% - 2.5rem);
    padding: 0 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 1rem;
    line-height: 1.15rem;
    color: var(--mud-palette-text-secondary);
    pointer-events: none;
    transform: translate(14px, 20px) scale(1);
    transform-origin: top left;
    transition: transform 200ms cubic-bezier(0, 0, 0.2, 1), color 200ms cubic-bezier(0, 0, 0.2, 1);
}

/* Etykieta plywajaca: podpowiedz w polu jest niewidoczna (etykieta ja zastepuje), a gdy pole
   ma tresc albo jest aktywne, etykieta unosi sie na krawedz ramki i maleje do 14 px (0,875 — jak w panelu),
   zeby nie nakladac sie na wpisany tekst. Bez tych regul etykieta i podpowiedz lezaly na sobie (strona
   przyjecia zaproszenia, 9 wrzesnia 2026 r.). */
.form-floating > .form-control::placeholder {
    color: transparent;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    transform: translate(14px, -8px) scale(0.875);
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
}

.form-floating > .form-control:focus ~ label {
    color: var(--mud-palette-primary);
}

.form-floating > .form-control:autofill ~ label {
    transform: translate(14px, -8px) scale(0.875);
    background: var(--mud-palette-surface);
}

.form-floating > .form-control:-webkit-autofill ~ label {
    transform: translate(14px, -8px) scale(0.875);
    background: var(--mud-palette-surface);
}

.form-floating > .form-control.invalid {
    border-color: var(--mud-palette-error);
}

/* FORMULARZ KONTAKTOWY — część „Dane przedsiębiorcy” (13 października 2026 r.): firma, NIP i telefon w jednej ramce
   z podpisem, a nad nimi pole wyboru dla osoby, która nie prowadzi działalności gospodarczej albo nie ma polskiego
   numeru NIP. Ramka w barwie obramowania pól (zmienna motywu), bez domyślnego żłobionego obramowania przeglądarki.
   Pole wyboru ma bok 24 px — najmniejszy cel dotyku z WCAG 2.2, kryterium 2.5.8 — i stoi obok zdania, które łamie się
   na telefonie; całe zdanie jest etykietą, więc kliknięcie w tekst też zaznacza pole. */
.ocp-kontakt-przedsiebiorca {
    min-width: 0;
    margin: 1.5rem 0 1rem;
    padding: 0.25rem 1rem 0.5rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius, 4px);
}

.ocp-kontakt-przedsiebiorca > legend {
    padding: 0 0.375rem;
}

.ocp-pole-wyboru {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0.5rem 0;
    cursor: pointer;
}

.ocp-pole-wyboru > input[type=checkbox] {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    accent-color: var(--mud-palette-primary);
}

/* Słowo o obowiązkowości w etykietach firmy, NIP i telefonu (poprawka po recenzji z 13 października 2026 r.). Każda
   z tych etykiet niesie oba słowa — „(obowiązkowa)” i „(nieobowiązkowa)” — a widać jedno, zgodne ze stanem pola wyboru
   „Nie prowadzę działalności gospodarczej albo nie mam polskiego numeru NIP”. Formularz działa bez skryptów, więc stan
   czyta sam arkusz: najpierw z klasy, którą ramce nadaje serwer po odesłaniu formularza (działa w każdej przeglądarce),
   a w przeglądarce znającej selektor :has — wprost z pola wyboru, od razu po zaznaczeniu (reguły z identyfikatorem pola
   mają wyższą szczegółowość, więc wygrywają z klasą). Słowa ukrytego przez „display: none” czytnik ekranu nie czyta
   i nie wchodzi ono do nazwy pola. */
.ocp-kontakt-przedsiebiorca .ocp-gdy-bez-firmy {
    display: none;
}

.ocp-kontakt-przedsiebiorca.ocp-po-oswiadczeniu .ocp-gdy-przedsiebiorca {
    display: none;
}

.ocp-kontakt-przedsiebiorca.ocp-po-oswiadczeniu .ocp-gdy-bez-firmy {
    display: inline;
}

.ocp-kontakt-przedsiebiorca:has(#kontakt-bez-dzialalnosci:checked) .ocp-gdy-przedsiebiorca {
    display: none;
}

.ocp-kontakt-przedsiebiorca:has(#kontakt-bez-dzialalnosci:checked) .ocp-gdy-bez-firmy {
    display: inline;
}

.ocp-kontakt-przedsiebiorca:has(#kontakt-bez-dzialalnosci:not(:checked)) .ocp-gdy-przedsiebiorca {
    display: inline;
}

.ocp-kontakt-przedsiebiorca:has(#kontakt-bez-dzialalnosci:not(:checked)) .ocp-gdy-bez-firmy {
    display: none;
}

/* Formularz kontaktowy na ekranie węższym niż 360 px (poprawka po recenzji z 13 października 2026 r.). Etykieta pola
   jest jednowierszowa i ucinana wielokropkiem, a przy 320 px ucinała właśnie słowo o obowiązkowości („Imię i nazwisko
   (obowiąz…”). Węższe odstępy karty i ramki oraz szersza etykieta mieszczą najdłuższą etykietę formularza. */
@media (max-width: 359.98px) {
    .ocp-publiczny .ocp-formularz-kontaktu.mud-paper {
        padding: 12px !important;
    }

    .ocp-formularz-kontaktu .ocp-kontakt-przedsiebiorca {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .ocp-formularz-kontaktu .form-floating > label {
        max-width: calc(100% - 1.25rem);
    }
}

/* Przycisk formularza strony publicznej = MudButton wypełniony w barwie głównej: te same zmienne typografii przycisku
   z motywu (krój, wielkość, grubość, pisownia), granat marki i zaokrąglenie z motywu. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    border: 0;
    border-radius: var(--mud-default-borderradius, 4px);
    padding: 6px 16px;
    font-family: var(--mud-typography-button-family, inherit);
    font-size: var(--mud-typography-button-size, 0.9375rem);
    font-weight: var(--mud-typography-button-weight, 600);
    line-height: var(--mud-typography-button-lineheight, 1.75);
    letter-spacing: var(--mud-typography-button-letterspacing, normal);
    text-transform: var(--mud-typography-button-text-transform, none);
    cursor: pointer;
}

.btn-primary {
    background: var(--mud-palette-primary, #0072B2);
    color: var(--mud-palette-primary-text, #fff);
    box-shadow: var(--mud-elevation-2);
}

.btn-primary:hover {
    background: var(--mud-palette-primary-darken, #0072B2);
}

.btn-lg {
    padding: 8px 22px;
}

.w-100 {
    width: 100%;
}

.text-danger {
    color: var(--mud-palette-error, #0072B2);
}

.text-success {
    color: var(--mud-palette-success, #0072B2);
}

/* Pasek nieobsłużonego błędu w barwach motywu (poprawki U1c): tło karty, tekst w barwie tekstu, kreska w barwie odmowy
   u góry — zamiast szablonowego „lightyellow” spoza palety. Treść mówi słowami, co się stało (zasada K7). */
#blazor-error-ui {
    background: var(--mud-palette-surface, #FFFFFF);
    color: var(--mud-palette-text-primary, #000000);
    border-top: 3px solid var(--mud-palette-error, #D55E00);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ============================================================================
   ETAP P10 PROGRAMU ROZWOJU (9 wrzesnia 2026 r.): dostepnosc, baner systemowy,
   stany puste i pulpit w dwoch strefach. Barwy wylacznie z palety Okabe-Ito
   albo ze zmiennych motywu (kontrola K5 bramki commitu).
   ============================================================================ */

/* Odnosnik „Przejdz do tresci" — poza ekranem, dopoki nie dostanie fokusu z klawiatury
   (WCAG 2.1, kryterium 2.4.1). Po fokusie staje w lewym gornym rogu nad paskiem. */
.ocp-przejdz-do-tresci {
    position: absolute;
    left: -10000px;
    top: 0.5rem;
    z-index: 2000;
    padding: 0.5rem 1rem;
    border: 2px solid var(--mud-palette-primary, #0072B2);
    border-radius: var(--mud-default-borderradius, 4px);
    background: var(--mud-palette-surface, #FFFFFF);
    color: var(--mud-palette-primary, #0072B2);
    font-weight: 700;
    text-decoration: none;
}

.ocp-przejdz-do-tresci:focus,
.ocp-przejdz-do-tresci:focus-visible {
    left: 0.5rem;
}

/* Wyrazny obrys fokusu z klawiatury (WCAG 2.1, kryterium 2.4.7); mysz go nie wyzwala (:focus-visible).

   SELEKTORY (poprawki po przegladzie etapu P10): sam „:focus-visible" ma swoistosc (0,1,0) i przegrywal
   z regulami arkusza MudBlazor 8.13.0 „a:focus-visible{outline:none}" oraz „button:focus{outline:none}"
   o swoistosci (0,1,1) — obrys nie rysowal sie na zadnym odnosniku nawigacji (MudNavLink, MudLink) ani
   przycisku (MudButton, MudIconButton). Selektory nizej maja swoistosc rowna albo wyzsza, a app.css laduje
   sie PO MudBlazor.min.css (Components/App.razor), wiec przy rownej swoistosci wygrywa ten arkusz.

   BARWA: kontrast obrysu wobec tla ma wynosic co najmniej 3:1 (WCAG 2.1, kryterium 1.4.11). Pomarancz palety
   #E69F00 daje na bieli 2,25:1 i na tle tresci #F4F6F7 2,08:1 — za malo. Barwa tekstu motywu przechodzi prog
   na kazdej jasnej i ciemnej powierzchni: #1C2833 na bieli 14,99:1, na #F4F6F7 13,83:1; w motywie ciemnym
   #F4F6F7 na powierzchni #16202A 15,20:1, na tle #0B1116 17,52:1, na szufladzie #121A21 16,20:1. */
a:focus-visible,
button:focus-visible,
.mud-button-root:focus-visible,
[tabindex]:focus-visible,
:focus-visible {
    outline: 3px solid var(--mud-palette-text-primary, #000000);
    outline-offset: 2px;
}

/* Wyjatek dla granatowego paska aplikacji: barwa tekstu motywu (#1C2833) na #1B3563 ma 1,24:1, wiec tam
   obrys jest pomaranczowy — #E69F00 na #1B3563 daje 5,37:1, a na ciemnym pasku #121A21 7,80:1. Odnosnik
   „Przejdz do tresci" po fokusie stoi NAD paskiem (lewy gorny rog), wiec w PANELU (MainLayout, granatowy pasek
   aplikacji) dostaje ten sam wyjatek. Na stronach publicznych pasek z data i winieta sa od 9 pazdziernika 2026 r.
   biale, a pomarancz na bieli ma 2,25:1 — tam odnosnik dostaje obrys w atramencie (14,99:1) z bloku „NOWY WYGLAD
   STRON PUBLICZNYCH” (regula z :has(+ .ocp-publiczny), bo odnosnik stoi przed elementem .ocp-publiczny).
   Od 20 pazdziernika 2026 r. pasek panelu jest granatowy WYLACZNIE w motywie ciemnym — regula wyjatku stoi nizej,
   za krawedzia swietlna, i obejmuje tylko ten motyw. */
/* ═══ PASEK GORNY — GLEBIA I KRAWEDZ (10 wrzesnia 2026 r.) ═══════════════════════════════
   Wlasciciel: pasek ma byc "bardziej przejrzysty i mniej plaski", z glebia, ale bez
   przezroczystosci — nic pod nim nie przeswituje.

   GLEBIA PRZEZ PRZYCIEMNIENIE DOLU, NIE ROZJASNIENIE GORY. Swiatlo padajace z gory da sie
   pokazac dwoma sposobami i oko odczyta oba tak samo, ale rozjasnienie gornej krawedzi obniza
   najgorszy punkt kontrastu napisu (w motywie jasnym z 12,10:1 do 8,99:1). Przyciemnienie dolu
   robi to samo wrazenie, a kontrast napisu WSZEDZIE rosnie albo zostaje bez zmiany:
     motyw jasny:  gora 12,10:1  ->  dol 13,48:1
     motyw ciemny: gora 13,76:1  ->  dol 14,80:1
   Nakladka jest czernia o przezroczystosci 14 procent, wiec dziala na kazdej barwie paska
   i nie wymaga zadnej wartosci barwy wpisanej wprost.

   Roznica jasnosci gora-dol wynosi ok. 3 jednostki L*. Wlasciciel nie rozroznia barw, wiec
   glebia MUSI byc roznica jasnosci — roznica odcienia byla by dla niego niewidoczna.

   OD 20 PAZDZIERNIKA 2026 R. WYLACZNIE W MOTYWIE CIEMNYM. Polecenie wlasciciela: pasek po zalogowaniu
   „jak w portalu — lzejszy”, wiec w motywie jasnym pasek ma tlo i kreske naglowka strony publicznej
   (blok panelu, „PASEK GORNY”), a naglowek strony publicznej nie ma przyciemnienia — na bialym pasku
   nakladka dawala szary pas u dolu. Selektory jak przy krawedzi swietlnej nizej: motyw ciemny ustalony
   albo jeszcze nieustalony z atrybutem data-ocp-motyw="ciemny" (pierwsza klatka z serwera, strony konta). */
.ocp-motyw-ciemny .mud-appbar,
html[data-ocp-motyw="ciemny"] .ocp-motyw-nieustalony .mud-appbar {
    background-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 0) 55%,
        rgba(0, 0, 0, 0.14) 100%);
}

/* KRAWEDZ SWIETLNA — WYLACZNIE W MOTYWIE CIEMNYM.
   Pasek #1C2837 ma wobec tla strony #0B1116 kontrast 1,27:1, czyli krawedzi praktycznie nie
   widac. W ciemnych ukladach cien nie pomoze: czarny cien na prawie czarnym tle jest
   niewidzialny. Krawedz robi sie SWIATLEM — cienka linia jasniejsza od paska i od tla.
   Wartosc powstaje ze zmiennej motywu, wiec nie ma tu zadnego heksu spoza palety i regula
   dziala takze po zmianie barwy paska w Theming/AppTheme.cs.
   Zmierzone: linia #606973 — 2,88:1 wobec dolu paska, 3,40:1 wobec tla strony.

   W motywie jasnym tej linii NIE MA celowo. Do 20 pazdziernika 2026 r. granatowy pasek odcinal sie od tla
   sila 11,16:1; od tego dnia pasek jest bialy i zamyka go cienka kreska w atramencie, ta sama co pod
   naglowkiem strony publicznej (blok panelu, „PASEK GORNY”). */
.ocp-motyw-ciemny .mud-appbar {
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-appbar-background) 70%, #FFFFFF);
}

/* Obrys fokusu na granatowym pasku — WYLACZNIE w motywie ciemnym (od 20 pazdziernika 2026 r.). W motywie jasnym pasek
   jest bialy jak naglowek strony publicznej, a pomarancz na bieli ma 2,25:1 — tam zostaje obrys ogolny wyzej (atrament,
   14,99:1). Wyjatek obejmuje motyw ciemny ustalony (klasa ocp-motyw-ciemny ukladu) albo jeszcze nieustalony z atrybutem
   data-ocp-motyw="ciemny" (pierwsza klatka z serwera, strony konta). Odnosnik „Przejdz do tresci" stoi tuz PRZED
   elementem ukladu panelu (MainLayout), stad :has(+ ...). */
.ocp-motyw-ciemny .mud-appbar :focus-visible,
html[data-ocp-motyw="ciemny"] .ocp-motyw-nieustalony .mud-appbar :focus-visible,
.ocp-przejdz-do-tresci:has(+ .ocp-motyw-ciemny):focus-visible,
html[data-ocp-motyw="ciemny"] .ocp-przejdz-do-tresci:has(+ .ocp-motyw-nieustalony):focus-visible {
    outline-color: #E69F00;
}

/* Cel odnosnika „Przejdz do tresci": fokus programowy bez wlasnego obrysu, zeby nie rysowac
   ramki wokol calej strony. */
main#tresc:focus {
    outline: none;
}

/* Baner systemowy — najwyzej jeden, nad tytulem strony (Components/Shared/BanerSystemowy.razor). */
.ocp-baner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--mud-palette-primary, #0072B2);
    border-radius: var(--mud-default-borderradius, 4px);
    background: var(--mud-palette-surface, #FFFFFF);
    color: var(--mud-palette-text-primary, #000000);
}

/* Baner informacyjny w barwie „informacja” motywu (błękit palety Okabe-Ito), a nie w barwie głównej: od zlecenia U1b
   (28 września 2026 r.) barwą główną panelu jest granat marki, a baner jest stanem, więc zostaje w palecie stanów. */
.ocp-baner-informacja {
    border-color: var(--mud-palette-info, #0072B2);
}

.ocp-baner-informacja .ocp-baner-ikona {
    color: var(--mud-palette-info, #0072B2);
}

.ocp-baner-ostrzezenie {
    border-color: var(--mud-palette-error, #D55E00);
}

.ocp-baner-ostrzezenie .ocp-baner-ikona {
    color: var(--mud-palette-error, #D55E00);
}

.ocp-baner-ikona {
    flex: 0 0 auto;
    margin-top: 0.1rem;
}

.ocp-baner-etykieta {
    margin-right: 0.25rem;
}

/* Stan pusty listy (Components/Shared/StanPusty.razor): ikona, naglowek, zdanie, nastepny krok. */
.ocp-stan-pusty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    text-align: center;
}

.ocp-stan-pusty-ikona {
    width: 3rem;
    height: 3rem;
    color: var(--mud-palette-text-secondary, #6D6D6D);
}

.ocp-stan-pusty-naglowek {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500;
}

.ocp-stan-pusty-zdanie {
    margin: 0;
    max-width: 40rem;
}

.ocp-stan-pusty-dodatek {
    margin-top: 0.5rem;
}

/* Pulpit klienta: „Twoje sprawy" jako lista jednokolumnowa — od telefonu; na komputerze ta sama
   kolumna, szersza. Kazda pozycja: znacznik stanu, jedno zdanie, odnosnik. */
.ocp-sprawy {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ocp-sprawy-pozycja {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--mud-palette-lines-default, #c5cdd3);
    border-radius: var(--mud-default-borderradius, 4px);
    background: var(--mud-palette-surface, #FFFFFF);
}

.ocp-sprawy-zdanie {
    flex: 1 1 18rem;
    margin: 0;
}

.ocp-sprawy-stan {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Pulpit klienta: rozwiniecie kafla „Pakiet" — z czego sklada sie liczba Zapisow (16 IX 2026).
   Jedna kolumna od szerokosci telefonu, jak reszta pulpitu. Rozbicie dokumentow na ewidencje jest
   wcieciem, a nie inna barwa: informacja nie moze zalezec od barwy (zasada K7). Pozycje zerowe nie
   trafiaja na liste juz w warstwie Application, wiec tu nie ma czego ukrywac stylem. */
.ocp-licznik-skladowe {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ocp-licznik-skladowa-wciecie {
    padding-left: 1.5rem;
}

/* ─── TABLICA INFORMACYJNA — strona wpisu ────────────────────────────────────────────────
   Ilustracja wpisu przychodzi w rozmiarze własnym: portal nie skaluje obrazów, a biuro wgrywa
   zwykłe zdjęcia (1600 px i szersze). Bez ograniczenia szerokości strona wpisu dostawała na
   telefonie poziomy przewijak, a tekst uciekał poza ekran. MudBlazor nie ustawia żadnej reguły
   dla znacznika obrazu, więc musi ona stać tutaj. */
.ocp-wpis-obraz {
    margin: 1.5rem 0;
}

.ocp-wpis-obraz img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.ocp-wpis-obraz figcaption {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary, #555555);
}

/* Adnotacja o pochodzeniu tekstu: oddzielona od treści kreską i drobniejszym pismem, ale bez
   wyszarzenia poniżej progu czytelności — to jest oświadczenie, nie przypis ozdobny. */
.ocp-wpis-adnotacja {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--mud-palette-lines-default, #c5cdd3);
}

/* Treść wpisu: obrazy i tabele wklejone w tekst też muszą mieścić się w kolumnie. */
.ocp-wpis-tresc img {
    max-width: 100%;
    height: auto;
}

.ocp-wpis-tresc pre {
    overflow-x: auto;
}

/* ─── TABLICA INFORMACYJNA — karta W skrócie (24 września 2026 r.) ───────────────────────
   Punkty bloku „W skrócie” z początku treści wpisu (Components/Shared/KartaWSkrocie.razor).
   Bez skryptu: rozwijanie i zwijanie daje element <details>, układ daje ten arkusz.

   TRZY POSTACIE TEJ SAMEJ KARTY:
   - szeroki pojemnik wpisu (co najmniej 56rem, czyli 896 px): kolumna boczna obok tekstu,
     przyklejona pod górnym paskiem przy przewijaniu (position: sticky);
   - wąski pojemnik (telefon, okno zwężone menu bocznym): karta pod tytułem, rozwinięta, do zwinięcia;
   - druk: zwykły blok przed treścią, bez przyklejania i bez znaku rozwijania.

   SZEROKOŚĆ MIERZY POJEMNIK, NIE OKNO (@container zamiast @media). Na stronie publicznej menu boczne
   zabiera 280 px, więc okno szerokie na 1100 px daje kolumnę wpisu węższą niż 800 px — przy podziale
   według okna tekst obok karty miałby niewiele ponad 400 px. Ten sam składnik stoi w podglądzie
   panelu redakcyjnego, gdzie pojemnik jest jeszcze węższy. Próg 56rem: kolumna tekstu obok karty ma
   wtedy co najmniej 36rem (ok. 580 px), czyli wygodną długość wiersza.

   BARWY wyłącznie ze zmiennych motywu. Kreska z lewej to granat marki (tło górnego paska) w motywie
   jasnym i barwa główna w ciemnym, bo ciemny pasek ma na ciemnej karcie kontrast bliski 1:1. Kreska
   jest ozdobą, a nie nośnikiem informacji — kartę wyróżnia nagłówek słowny „W skrócie” (zasada K7).
   Tekst ma barwę tekstu motywu: #1C2833 na bieli 14,99:1, #F4F6F7 na #16202A 15,20:1 (WCAG 2.1,
   kryterium 1.4.3). Animacji nie ma żadnej, więc przy prefers-reduced-motion nie ma czego wyłączać. */
.ocp-wpis-uklad {
    container-type: inline-size;
}

.ocp-wskrocie {
    margin: 0.5rem 0 1.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--mud-palette-lines-default, #c5cdd3);
    border-left: 4px solid var(--mud-palette-appbar-background, #0072B2);
    border-radius: 8px;
    background: var(--mud-palette-surface, #FFFFFF);
    color: var(--mud-palette-text-primary, #000000);
}

.ocp-motyw-ciemny .ocp-wskrocie {
    border-left-color: var(--mud-palette-primary, #56B4E9);
}

.ocp-wskrocie-naglowek {
    cursor: pointer;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
    border-radius: 4px;
}

/* Obrys fokusu z klawiatury podany wprost przy nagłówku karty, a nie tylko w regule ogólnej wyżej:
   element <summary> dostaje fokus z przeglądarki, a nie z MudBlazor, więc nie ma tu reguły biblioteki,
   która obrys by zdejmowała — ale jawna reguła nie zależy od kolejności arkuszy (WCAG 2.1, kryterium 2.4.7). */
.ocp-wskrocie-naglowek:focus-visible {
    outline: 3px solid var(--mud-palette-text-primary, #000000);
    outline-offset: 2px;
}

.ocp-wskrocie-punkty {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
    line-height: 1.5;
}

.ocp-wskrocie-punkty li + li {
    margin-top: 0.5rem;
}

@container (min-width: 56rem) {
    .ocp-wpis--z-wskrocie {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 17rem;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "naglowek bok"
            "glowna bok";
        column-gap: 2.5rem;
    }

    .ocp-wpis--z-wskrocie > .ocp-wpis-naglowek {
        grid-area: naglowek;
    }

    .ocp-wpis--z-wskrocie > .ocp-wpis-glowna {
        grid-area: glowna;
    }

    /* Karta zajmuje całą wysokość kolumny bocznej, ale sama ma wysokość swojej treści (align-self),
       więc przy przewijaniu ma w czym się przesuwać i trzyma się pod górnym paskiem aż do końca wpisu. */
    .ocp-wpis--z-wskrocie > .ocp-wskrocie {
        grid-area: bok;
        align-self: start;
        position: sticky;
        top: calc(var(--mud-appbar-height, 64px) + 1rem);
        margin: 1rem 0 0;
    }
}

@media print {
    .ocp-wpis--z-wskrocie {
        display: block;
    }

    .ocp-wpis--z-wskrocie > .ocp-wskrocie {
        position: static;
        margin: 0.5rem 0 1.5rem;
    }

    .ocp-wskrocie {
        break-inside: avoid;
    }

    .ocp-wskrocie-naglowek {
        list-style: none;
        cursor: auto;
    }

    .ocp-wskrocie-naglowek::-webkit-details-marker {
        display: none;
    }
}

/* Osobna reguła, bo przeglądarka, która nie zna pseudoelementu ::details-content, odrzuca CAŁĄ regułę,
   w której on stoi. W przeglądarce, która go zna, karta zwinięta przez czytelnika drukuje się rozwinięta. */
@media print {
    .ocp-wskrocie-rozwijane::details-content {
        content-visibility: visible;
        display: block;
    }
}

/* ─── PULPIT — sekcja „Aktualności" ──────────────────────────────────────────────────────
   Zapowiedzi wpisów tablicy. Wykaz bez punktorów, bo każda pozycja ma własny nagłówek i sama
   się wyodrębnia; kreska między pozycjami zamiast kropki. */
.ocp-aktualnosci {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ocp-aktualnosci-pozycja + .ocp-aktualnosci-pozycja {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--mud-palette-lines-default, #c5cdd3);
}

/* Adnotacja o pochodzeniu tekstu — drobniejsza od zapowiedzi, ale NIE wyszarzona poniżej progu
   czytelności: to jest informacja wymagana przepisem, a nie przypis ozdobny. */
.ocp-aktualnosci-adnotacja {
    display: block;
    margin-top: 0.35rem;
}

/* Dosłowna treść oświadczenia klienta o fakturze zakupowej (etap 4 rozbudowy, 12 IX 2026).
   Wyróżniona kreską z boku, bo to TEKST, który klient przyjmuje ze skutkiem — ma się odcinać
   od objaśnień wokół. Barwa kreski z tokenu motywu, więc czytelna w obu motywach. */
.ocp-tresc-oswiadczenia {
    border-left: 3px solid var(--mud-palette-lines-default, #c5cdd3);
    padding-left: 12px;
}

/* Ekran „Wybierz firmę” (krok 2 ETAPU 1 sprawy „Jedno konto dla klienta z kilkoma firmami”, 1 X 2026): lista firm jako
   karty jedna pod drugą, bez punktorów listy — znacznik listy zostaje dla czytnika ekranu (liczba firm). Nazwa firmy
   w nagłówku panelu nie zawija się pod znak marki, tylko skraca wielokropkiem. */
.ocp-lista-firm-sesji {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 6 X 2026: pole firmy ustępuje miejsca marce (flex-shrink), a nie odwrotnie — wcześniej ściskało
   „Twoje Księgi Pro” do dwóch linii obciętych przez pasek 64 px. */
.ocp-firma-sesji {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 24rem;
    overflow: hidden;
    white-space: nowrap;
}

.ocp-firma-sesji .mud-typography {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Obraz faktury (etap 1 rozbudowy, 11 IX 2026): ramka z pełnym odcięciem, w której arkusz
   Ministerstwa Finansów rysuje fakturę. Tło białe celowo i w obu motywach — to jest obraz
   dokumentu, nie element interfejsu, i ma wyglądać tak samo jak u kontrolującego. Szeroka
   tabela pozycji przewija się WEWNĄTRZ ramki, więc strona nie rozjeżdża się na telefonie. */
.ocp-obraz-faktury {
    display: block;
    width: 100%;
    min-height: 70vh;
    border: 1px solid var(--mud-palette-lines-default, #c5cdd3);
    border-radius: 4px;
    background: #FFFFFF;
}

/* Podgląd dokumentu do akceptacji (14 IX 2026): ramka, w której przeglądarka rysuje plik PDF z paczki od biura
   trasą pobrania — ten sam plik, którego skrót klient akceptuje. Tło białe celowo w obu motywach (obraz dokumentu). */
.ocp-podglad-dokumentu {
    display: block;
    width: 100%;
    min-height: 70vh;
    border: 1px solid var(--mud-palette-lines-default, #c5cdd3);
    border-radius: 4px;
    background: #FFFFFF;
}

/* ═══ ETAP „PORTAL SPRZEDAJE” (24 wrzesnia 2026 r.) — cennik, pas oferty, listy ═══════════════
   Strona glowna, strona „Oferta” i pas „Oferta kancelarii” pod wpisami dzialu „Wiedza”. Barwy wylacznie
   ze zmiennych motywu (kontrola K5). Pas oferty ma lewa krawedz w barwie glownej motywu — rozpoznanie
   reklamy nie opiera sie na samej barwie, bo pas ma tez wlasny naglowek „Oferta kancelarii” i wiersz
   „Reklama uslug wlasnych. Zleceniodawca: …” (26 wrzesnia 2026 r., art. 9 ustawy o swiadczeniu uslug
   droga elektroniczna). */
.ocp-lista {
    margin: 0;
    padding-left: 1.25rem;
}

.ocp-lista li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.ocp-karta-ceny {
    height: 100%;
}

.ocp-pas-oferty .mud-paper {
    border-left: 4px solid var(--mud-palette-primary);
}

/* Karta „Energia Optima” pod wpisem o energii (26 września 2026 r.) — ten sam kształt co blok „Oferta kancelarii”,
   bo stoi w tym samym miejscu, zamiast niego. Barwy wyłącznie z motywu (kontrola K5); barwy marki są tylko w logo. */
.ocp-karta-eo .mud-paper {
    border-left: 4px solid var(--mud-palette-primary);
}

/* Naglowek „Oferta kancelarii” pasa pod wpisami — bez odstepu pod spodem, bo zaraz pod nim stoi wiersz oznaczenia
   reklamy, i pogrubiony, zeby oznaczenie nie opieralo sie na samej barwie. */
.ocp-pas-oferty-naglowek {
    margin: 0;
    font-weight: 600;
}

/* Wiersz oznaczenia reklamy uslug wlasnych — drobniejszy od tresci, ale zwyklym tekstem (nie sama barwa).
   Adres poczty jest dlugim ciagiem bez spacji, wiec na waskim ekranie wolno go zlamac w dowolnym miejscu,
   zamiast poszerzac strone. W jasnym pasie oferty na stronie glownej (od 9 pazdziernika 2026 r.) wiersz stoi
   nad tytulem pasa, w lupku na bieli — regula w bloku „NOWY WYGLAD STRON PUBLICZNYCH”. Rozmiar 13 px dotyczy
   wylacznie stron publicznych; w panelu (karta oferty na pulpicie, PORTAL-RAPORT-3) rozmiar daje skala panelu
   w bloku PANEL nizej (najmniejszy tekst 14 px). */
.ocp-oznaczenie-reklamy {
    margin: 0.125rem 0 0;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.ocp-publiczny .ocp-oznaczenie-reklamy {
    font-size: 0.8125rem;
}

/* Karta „Energia Optima” (scalenie z etapem 1, 26 września 2026 r.): ten sam wiersz oznaczenia co w blokach „Oferta
   biura”, z odstępem przed treścią karty — pod wierszem nie stoi śródtytuł, tylko akapit. */
.ocp-karta-eo .ocp-oznaczenie-reklamy {
    margin: 0 0 0.75rem;
}

/* ═══ PEŁNY CENNIK NA STRONIE „OFERTA” (24 wrzesnia 2026 r.) ═══════════════════════════════════════════════
   Kazda tabela stoi we wlasnym okienku (.ocp-cennik-okno), ktore przewija sie w poziomie — na telefonie
   przesuwa sie tabela, a nie cala strona. Tabele z dluzszymi opisami maja najmniejsza szerokosc, ponizej
   ktorej kolumny sie nie sciskaja (czytelnosc wazniejsza niz brak przewijania); dwie krotkie tabele (oplata
   stala i stawka za Zapis) dopasowuja sie do ekranu. Barwy wylacznie ze zmiennych motywu (kontrola K5),
   wiec tabele sa czytelne w obu motywach; zadna informacja nie jest niesiona sama barwa. */
.ocp-cennik-okno {
    overflow-x: auto;
    max-width: 100%;
    margin-bottom: 1rem;
    border: 1px solid var(--mud-palette-lines-default, #c5cdd3);
    border-radius: 4px;
    background: var(--mud-palette-surface);
}

.ocp-cennik-okno:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.ocp-cennik-tabela {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--mud-palette-text-primary);
}

.ocp-cennik-tabela--waska {
    min-width: 0;
}

.ocp-cennik-tabela--szeroka {
    min-width: 46rem;
}

.ocp-cennik-tabela th,
.ocp-cennik-tabela td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--mud-palette-lines-default, #c5cdd3);
}

.ocp-cennik-tabela tbody tr:last-child th,
.ocp-cennik-tabela tbody tr:last-child td {
    border-bottom: none;
}

.ocp-cennik-tabela thead th {
    font-weight: 600;
    background: var(--mud-palette-background-gray, #f5f5f5);
}

.ocp-cennik-tabela tbody th {
    font-weight: 500;
}

.ocp-cennik-kwota {
    white-space: nowrap;
    font-weight: 600;
}

.ocp-cennik-stawka {
    display: block;
}

.ocp-cennik-stawka + .ocp-cennik-stawka {
    margin-top: 0.25rem;
}

.ocp-cennik-cena {
    min-width: 9rem;
}

/* Szerokosc kolumn tabel czesci D i E: nazwa czynnosci jest najwazniejsza, wiec dostaje najwiecej miejsca;
   uwagi biora reszte. Przy automatycznym ukladzie tabeli to wskazowka, a nie sztywna szerokosc. */
.ocp-cennik-kol-nazwa {
    width: 38%;
}

.ocp-cennik-kol-cena {
    width: 20%;
}

.ocp-cennik-numer {
    width: 3rem;
    white-space: nowrap;
}

.ocp-cennik-liczba {
    white-space: nowrap;
}

.ocp-cennik-punkty {
    margin-bottom: 1rem;
}

.ocp-cennik-zapis,
.ocp-cennik-przyklad {
    border-left: 4px solid var(--mud-palette-primary);
}

.ocp-cennik-dzialanie {
    font-variant-numeric: tabular-nums;
}

.ocp-cennik-spis {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
}

.ocp-cennik-spis a {
    color: var(--mud-palette-primary);
}

.ocp-cennik-podpowiedz {
    display: none;
    margin-top: 0.5rem;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 47.99rem) {
    .ocp-cennik-podpowiedz {
        display: block;
    }
}

/* Telefon (ponizej 480 px): ciasniejsze komorki i odrobine mniejsze pismo, zeby dwie krotkie tabele (oplata stala
   i stawka za Zapis) miescily sie w szerokosci ekranu bez przewijania — zmierzone na 375 px: bez tej reguly tabela
   oplat stalych wystawala o 32 px poza swoje okienko i kolumna czynnego podatnika VAT byla ucieta. */
@media (max-width: 29.99rem) {
    .ocp-cennik-tabela {
        font-size: 0.8125rem;
    }

    .ocp-cennik-tabela th,
    .ocp-cennik-tabela td {
        padding: 0.4rem 0.5rem;
    }
}

.ocp-cennik section {
    scroll-margin-top: calc(var(--mud-appbar-height, 64px) + 1rem);
}

/* ═══ STRONY PUBLICZNE — SERWIS BRANŻOWY (24 września 2026 r.) ═══════════════════════════════════════════════
   Układ Components/Layout/PublicLayout.razor i strony, które go używają: strona główna, oferta, dział Wiedza
   (wykaz, wpis, wyszukiwarka), kontakt, redakcja, regulamin, polityka prywatności i sklep. Wzór wyglądu: makiety
   „Strona główna”, „Wpis” i „Barwy i pismo” z Claude Design.

   BARWY WYŁĄCZNIE ZE ZMIENNYCH MOTYWU (kontrola K5). Barwy marki — granat, zieleń księgi, atrament, łupek, papier
   i kreski — definiuje Theming/MotywPubliczny.cs, a tu stoją tylko jako var(--mud-palette-…). Wprost wolno jedynie
   pomarańcz palety Okabe-Ito (#E69F00, obrys fokusu na granacie) i biel. Mieszanki color-mix() powstają ze
   zmiennych, więc nie wprowadzają żadnej barwy spoza motywu.

   KOLOR NIGDY NIE JEST JEDYNYM NOŚNIKIEM: bieżący dział ma kreskę pod napisem i aria-current, termin pilny —
   ikonę i napis „Termin pilny”, etykiety działów — słowo. Zestawień czerwieni z zielenią nie ma.

   TELEFON 375 px: nic nie wystaje w poziomie — pasek działów przewija się we własnym pojemniku („Oferta” przyklejona
   do prawej krawędzi, działy Wiedzy przesuwają się pod nią), winieta i stopka zawijają się, kolumna boczna strony
   głównej schodzi pod treść. Na stronie wpisu kolejność na ekranie jest kolejnością kodu strony: karta „W skrócie”
   i spis pod tytułem, powiązane wpisy pod treścią.

   ODNOŚNIKI W TEKŚCIE SĄ PODKREŚLONE (niżej, przy regule barwy odnośników), bo granat marki ma wobec atramentu
   tekstu tylko 1,24∶1.

   Motyw stron publicznych jest świadomie wyłącznie jasny (uzasadnienie: Theming/MotywPubliczny.cs), stąd
   color-scheme: light — pola formularzy i paski przewijania nie przyjmują ciemnych barw systemu. */

.ocp-publiczny {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--mud-typography-default-family);
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-background);
    color-scheme: light;
}

/* Odnośniki stron publicznych w granacie marki zamiast błękitu portalu. Selektor o swoistości zwykłego „a”
   (:where), żeby wygrywały z nim reguły pasków i przyciski MudBlazor. */
:where(.ocp-publiczny) a {
    color: var(--mud-palette-primary);
}

/* ODNOŚNIK W TEKŚCIE JEST PODKREŚLONY (kontrola z 24 września 2026 r.). Arkusz MudBlazor zdejmuje podkreślenie
   wszystkim odnośnikom (a { text-decoration: none }), a granat #1B3563 ma wobec atramentu tekstu #1C2833 tylko
   1,24∶1 — odnośnik w zdaniu nie różnił się od tekstu ani barwą, ani kształtem (WCAG 2.1, kryterium 1.4.1 wymaga
   podkreślenia albo co najmniej 3∶1). Reguła obejmuje odnośniki w akapitach, pozycjach list, opisach, treści wpisu
   i tekstach MudText oraz każdy MudLink poza jawnie wyłączonym. Swoistość zostaje niska (:where + a), więc bez
   podkreślenia zostają odnośniki nawigacyjne, które mają własną regułę: paski, działy, tytuły kart, etykiety
   działów, powiązane wpisy i przyciski (.mud-button-root). */
:where(.ocp-publiczny) :where(p, li, dd, .ocp-wpis-tresc, .mud-typography-body1, .mud-typography-body2) a,
.ocp-publiczny .mud-link:not(.mud-link-underline-none) {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* Nagłówki stron publicznych w granacie marki — z tą samą najniższą swoistością, więc barwa ustawiona jawnie
   na składniku (np. Color.Secondary przy MudText) nadal wygrywa. */
:where(.ocp-publiczny) :where(h1, h2, h3, h4, h5, h6) {
    color: var(--mud-palette-primary);
}

.ocp-publiczny img {
    max-width: 100%;
}

.ocp-pub-szerokosc {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}

@media (min-width: 600px) {
    .ocp-pub-szerokosc {
        padding-left: 24px;
        padding-right: 24px;
    }
}

.ocp-pub-waska {
    max-width: 52rem;
    padding-top: 1.75rem;
}

/* ─── Pasek z datą ─────────────────────────────────────────────────────────────────────────────────── */
.ocp-pub-pasek {
    background: var(--mud-palette-appbar-background);
    color: var(--mud-palette-appbar-text);
    font-size: 0.875rem;
}

.ocp-pub-pasek-wnetrze {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 1.5rem;
    min-height: 2.5rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.ocp-pub-data {
    color: var(--mud-palette-appbar-text);
    color: color-mix(in srgb, var(--mud-palette-appbar-text) 85%, var(--mud-palette-appbar-background));
}

/* Na telefonie pasek zawija się w dwa wiersze, więc odnośniki leżą jeden nad drugim: każdy ma co najmniej 24 px
   wysokości, a wiersze dzieli 0,5 rem — pole dotyku 24 × 24 px (WCAG 2.2, kryterium 2.5.8). */
.ocp-pub-skroty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
}

.ocp-pub-skroty a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 1.5rem;
    color: var(--mud-palette-appbar-text);
    text-decoration: none;
}

.ocp-pub-skroty a:hover {
    text-decoration: underline;
}

.ocp-pub-klodka {
    color: var(--mud-palette-tertiary);
    flex: 0 0 auto;
}

/* Ikona „Kontaktu” (29 września 2026 r., IkonaNawigacji): w barwie napisu, obok słowa — odstęp daje gap odnośnika. */
.ocp-pub-skrot-ikona {
    flex: 0 0 auto;
}

.ocp-pub-wyloguj {
    display: inline;
    margin: 0;
}

.ocp-pub-wyloguj button {
    min-height: 1.5rem;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--mud-palette-appbar-text);
    text-decoration: underline;
    cursor: pointer;
}

/* ─── Wejścia paska górnego: „Energia Optima” i „Budownictwo” (26 września 2026 r.) ───────────────────────────────
   Składnik Components/Shared/WejsciaNaPasku.razor. Na pasku stron publicznych odnośnik bierze wygląd z reguły
   .ocp-pub-skroty a wyżej: ikona obok etykiety, barwa tekstu paska, a pasek zawija się do nowego wiersza, więc etykieta
   zostaje na każdej szerokości. Ikona jest rysunkiem w barwie tekstu (currentColor) — wejścia odróżnia kształt
   i słowo, nie odcień (zasada K7). */
.ocp-wejscie-ikona {
    flex: 0 0 auto;
}

/* Pasek aplikacji strefy zalogowanej (MainLayout, MudAppBar): odnośniki przed przełącznikiem motywu. Ten pasek się
   NIE zawija — poniżej 600 px etykieta schodzi pod ikonę drobniejszym pismem (reguła telefonu niżej). */
.ocp-pasek-wejscia {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-right: 0.5rem;
}

.ocp-pasek-wejscia:empty {
    display: none;
}

.ocp-pasek-wejscia a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2rem;
    color: inherit;
    font-size: 0.875rem;
    text-decoration: none;
    white-space: nowrap;
}

.ocp-pasek-wejscia a:hover {
    text-decoration: underline;
}

@media (max-width: 599.98px) {
    .ocp-pasek-wejscia {
        gap: 0.25rem;
        margin-right: 0;
    }

    /* Ikona nad podpisem (uwaga grok-p5-2): na telefonie dymek z atrybutu title nie pokazuje się przed dotknięciem,
       a dotknięcie od razu otwiera odnośnik — bez widocznego słowa „Energia Optima” (logowanie poza portalem)
       i „Budownictwo” (moduł portalu) różniłby tylko kształt ikony. Pole dotyku co najmniej 32 × 32 px (WCAG 2.2,
       kryterium 2.5.8, wymaga 24 px). */
    /* Pismo podpisu 14 px (29 września 2026 r., przeniesienie na pasek U1b): do tego dnia 11 px, co łamało skalę
       panelu (najmniejsze pismo 14 px, SkalaTypograficznaPaneluTests). Miejsce na większy podpis daje nazwa marki,
       która na telefonie chowa się, gdy pasek ma wejścia (blok panelu, „PASEK GÓRNY”). */
    .ocp-pasek-wejscia a {
        flex-direction: column;
        justify-content: center;
        gap: 0.125rem;
        min-width: 2rem;
        font-size: 0.875rem;
        line-height: 1.1;
        text-align: center;
        white-space: normal;
    }

    /* Podpis tak wąski jak jego najdłuższe słowo: „Energia Optima” w dwóch wierszach, „Budownictwo” w jednym — inaczej
       pasek, który się nie zawija, nie zmieściłby się na telefonie 375 px. */
    .ocp-pasek-wejscia .ocp-wejscie-paska-etykieta {
        width: min-content;
    }

    .ocp-pasek-wejscia .ocp-wejscie-ikona {
        width: 18px;
        height: 18px;
    }
}

/* Obrys fokusu na granacie: barwa tekstu motywu miałaby tam 1,24∶1, pomarańcz palety ma 5,37∶1
   (WCAG 2.1, kryterium 1.4.11) — ten sam wyjątek co w pasku portalu. Od 9 października 2026 r. granatowa jest
   już tylko stopka: pasek z datą jest jasny i blok „NOWY WYGLĄD STRON PUBLICZNYCH” daje mu obrys w atramencie
   (reguła o wyższej swoistości), a granatowe czoło pasa oferty zniknęło razem z jego regułami. */
.ocp-pub-pasek :focus-visible,
.ocp-pub-stopka :focus-visible {
    outline-color: #E69F00;
}

/* ─── Winieta z logo i wyszukiwarką ────────────────────────────────────────────────────────────────── */
.ocp-pub-winieta {
    background: var(--mud-palette-surface);
}

.ocp-pub-winieta-wnetrze {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.ocp-pub-marka {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.ocp-pub-znak {
    flex: 0 0 auto;
    width: 81px;
    height: 76px;
}

.ocp-pub-marka-tekst {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

.ocp-pub-marka-nazwa {
    font-family: var(--mud-typography-h1-family);
    font-size: 2.5rem;
    line-height: 1;
    font-weight: 700;
    color: var(--mud-palette-primary);
}

/* „Pro” nie odrywa się od kroju nazwy, a „Twoje Księgi” łączy odstęp nierozdzielający (PublicLayout.razor):
   na bardzo wąskim ekranie łamie się najwyżej przed „Pro”, a strona nie wystaje w poziomie. */
.ocp-pub-marka-pro {
    white-space: nowrap;
    margin-left: 0.3rem;
    font-family: var(--mud-typography-default-family);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mud-palette-secondary);
}

.ocp-pub-marka-podpis {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.ocp-pub-szukaj,
.ocp-szukaj-wiersz {
    display: flex;
    align-items: stretch;
    min-width: 0;
}

.ocp-pub-szukaj {
    flex: 0 1 26rem;
}

/* ZNAK, PODPIS I WYSZUKIWARKA W JEDNYM WIERSZU OD 960 PX (9 października 2026 r.). Znak z podpisem „Prowadzenie ksiąg,
   rozliczeń podatkowych, kadr i płac” ma ok. 600 px, wyszukiwarka 26rem, odstęp 2rem — razem z marginesami mieszczą się
   od ok. 1100 px. Od 960 px wyszukiwarka zaczyna od 16rem i rośnie najwyżej do 26rem, więc wiersz mieści się także
   przy 1024 i 960 px; między 960 a 1100 px odstęp kolumn jest dodatkowo węższy. O przejściu do drugiego wiersza
   przeglądarka rozstrzyga po szerokości wyjściowej (16rem), nie po szerokości, do której pole potem rośnie.
   Recenzja z 9 października 2026 r.: (1) reguła szerokości wyszukiwarki obejmuje cały zakres od 960 px, a nie tylko pas
   do 1100 px — zapytanie o szerokość okna liczy pasek przewijania, więc w przeglądarce z paskiem (15–17 px) tuż powyżej
   1100 px wnętrze jest węższe niż przy 1100 px bez paska i przy wyszukiwarce o stałych 26rem wiersz znów by się łamał;
   (2) przy 960 px zapas wiersza ma być co najmniej 20 px (próba przeglądarkowa winiety), czego szerokość wyjściowa
   17rem nie dawała (14 px). Przy szerokim oknie wygląd się nie zmienia: wyszukiwarka i tak dochodzi do 26rem. Poniżej
   960 px strona i tak przechodzi w układ węższy (strona główna traci kolumnę boczną) i tam wyszukiwarka schodzi do
   osobnego wiersza pod znakiem, jak dotąd. */
@media (min-width: 960px) {
    .ocp-pub-szukaj {
        flex: 1 1 16rem;
        max-width: 26rem;
    }
}

@media (min-width: 960px) and (max-width: 1099.98px) {
    .ocp-pub-winieta-wnetrze {
        column-gap: 1.5rem;
    }
}

.ocp-pub-szukaj input,
.ocp-szukaj-wiersz input {
    flex: 1 1 auto;
    min-width: 0;
    height: 3rem;
    box-sizing: border-box;
    padding: 0 1rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-right: none;
    border-radius: 0;
    font: inherit;
    font-size: 1rem;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
}

.ocp-pub-szukaj input::placeholder {
    color: var(--mud-palette-text-secondary);
    opacity: 1;
}

.ocp-pub-szukaj button,
.ocp-szukaj-wiersz button {
    flex: 0 0 auto;
    height: 3rem;
    padding: 0 1.4rem;
    border: 0;
    font: inherit;
    font-weight: 600;
    color: var(--mud-palette-primary-text);
    background: var(--mud-palette-primary);
    cursor: pointer;
}

.ocp-pub-szukaj button:hover,
.ocp-szukaj-wiersz button:hover {
    background: var(--mud-palette-primary-darken);
}

/* ─── Pasek działów ────────────────────────────────────────────────────────────────────────────────── */
.ocp-pub-dzialy {
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    border-bottom: 3px solid var(--mud-palette-primary);
}

/* Na telefonie pasek PRZEWIJA SIĘ w poziomie wewnątrz tego pojemnika — nie poszerza strony i nie chowa
   żadnego odnośnika za przyciskiem, który wymagałby skryptu. Od szerokości 600 px pasek się nie przewija, tylko
   ZAWIJA do drugiego wiersza (reguła przy końcu tej sekcji).

   JEDNA LISTA ZAMIAST DWÓCH (poprawka z 24 września 2026 r.). Do tego dnia działy Wiedzy oraz „Sklep” i „Oferta” stały
   w dwóch listach obok siebie. Lista jest dla układu jednym elementem, więc przy zawijaniu cała lista działów łamała się
   jako blok, a „Oferta” spadała do trzeciego wiersza. Teraz każdy dział jest osobną pozycją jednej listy i zawija się
   osobno, a „Sklep” i „Oferta” tworzą jej OSTATNIĄ pozycję (ocp-pub-dzialy-prawe) z własną, zagnieżdżoną listą — dzięki
   temu przechodzą do nowego wiersza razem, dosunięte do prawej, i „Oferta” nigdy nie zostaje sama przy lewej krawędzi. */
.ocp-pub-dzialy-wnetrze {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    scrollbar-width: thin;
}

.ocp-pub-dzialy-lista,
.ocp-pub-dzialy-grupa {
    display: flex;
    gap: 0 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ocp-pub-dzialy-lista {
    flex: 1 0 auto;
}

.ocp-pub-dzialy-prawe {
    position: relative;
    margin-left: auto;
    padding-left: 2rem;
}

.ocp-pub-dzialy-prawe::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    height: 1.6rem;
    transform: translateY(-50%);
    border-left: 1px solid var(--mud-palette-lines-default);
}

.ocp-pub-dzialy a {
    display: block;
    padding: 1rem 0 0.85rem;
    border-bottom: 3px solid transparent;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.ocp-pub-dzialy a:hover {
    color: var(--mud-palette-primary);
    border-bottom-color: var(--mud-palette-lines-inputs);
}

.ocp-pub-dzialy a[aria-current="page"] {
    color: var(--mud-palette-primary);
    border-bottom-color: var(--mud-palette-secondary);
}

.ocp-pub-dzialy a.ocp-pub-dzial-oferta {
    color: var(--mud-palette-secondary);
}

/* Pojemnik przewijany przycina to, co wystaje poza niego — obrys fokusu rysujemy więc do środka. */
.ocp-pub-dzialy a:focus-visible {
    outline-offset: -3px;
}

/* TABLET I KOMPUTER: ZAWIJANIE ZAMIAST PRZEWIJANIA (poprawka z 24 września 2026 r.). Na szerokości od ok. 600 do ok. 980 px
   (przy włączonym sklepie; bez sklepu do ok. 890 px) sześć odnośników pełnym krojem się nie mieściło: przeglądarka
   komputera pokazywała pod paskiem pasek przewijania, a „Oferta” chowała się za prawą krawędzią. Od 600 px pasek nie jest
   już pojemnikiem przewijanym — odnośniki, które się nie mieszczą, schodzą do drugiego wiersza, więc żaden nie znika
   i nie ma paska przewijania. Kolejność odnośników i przechodzenie klawiszem Tab się nie zmieniają. */
@media (min-width: 600px) {
    .ocp-pub-dzialy-wnetrze {
        overflow-x: visible;
    }

    .ocp-pub-dzialy-lista {
        flex-wrap: wrap;
        flex-shrink: 1;
        min-width: 0;
    }
}

/* Między 600 a 1100 px krój jest o jeden stopień mniejszy, a odstępy węższe, żeby pasek bez sklepu mieścił się w jednym
   wierszu już od szerokości tabletu trzymanego pionowo (768 px). Zawijanie z reguły wyżej zostaje zabezpieczeniem:
   przy włączonym sklepie, przy powiększeniu strony i przy dłuższych nazwach działów. Od 1100 px wygląd bez zmian. */
@media (min-width: 600px) and (max-width: 1099.98px) {
    .ocp-pub-dzialy-lista,
    .ocp-pub-dzialy-grupa {
        column-gap: 1.25rem;
    }

    .ocp-pub-dzialy-prawe {
        padding-left: 1.25rem;
    }

    .ocp-pub-dzialy a {
        font-size: 0.875rem;
        letter-spacing: 0.05em;
    }
}

/* IKONY DZIAŁÓW (29 września 2026 r., polecenie właściciela: przejrzystość strony biura). Ikona przed nazwą działu
   od 1100 px — tam, gdzie pasek ma pełny krój i odstępy. Węższy pasek jest ściśnięty regułą wyżej tak, żeby na
   tablecie trzymanym pionowo mieścił się w jednym wierszu; pięć ikon po ok. 22 px łamałoby go do dwóch wierszy,
   a na telefonie wydłużałoby pasek przewijany. Ikona jest ozdobą (aria-hidden) — nazwę działu niesie napis. */
.ocp-pub-dzial-ikona {
    display: none;
    flex: 0 0 auto;
}

@media (min-width: 1100px) {
    .ocp-pub-dzialy a {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
    }

    .ocp-pub-dzial-ikona {
        display: inline-block;
    }
}

.ocp-pub-tresc {
    flex: 1 0 auto;
    padding-bottom: 3rem;
}

/* ─── Stopka ───────────────────────────────────────────────────────────────────────────────────────── */
/* Barwa tekstu dwa razy: najpierw biel z motywu, potem mieszanka. Przeglądarka, która nie zna color-mix()
   (Safari przed 16.2, Chrome przed 111, Firefox przed 113), odrzuca całą deklarację — bez pierwszego wiersza stopka
   dziedziczyłaby atrament tekstu, który na granacie ma 1,24∶1 (kontrola z 24 września 2026 r.). */
.ocp-pub-stopka {
    padding: 2.25rem 0 1.75rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--mud-palette-appbar-text);
    color: color-mix(in srgb, var(--mud-palette-appbar-text) 85%, var(--mud-palette-appbar-background));
    background: var(--mud-palette-appbar-background);
}

.ocp-pub-stopka-kolumny {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.5rem 2.5rem;
}

.ocp-pub-stopka-naglowek {
    margin: 0 0 0.5rem;
    font-family: var(--mud-typography-default-family);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mud-palette-tertiary);
}

.ocp-pub-stopka p,
.ocp-pub-stopka ul {
    margin: 0;
}

.ocp-pub-stopka ul {
    padding: 0;
    list-style: none;
}

.ocp-pub-stopka a {
    color: var(--mud-palette-appbar-text);
}

.ocp-pub-stopka .ocp-pub-stopka-identyfikacja {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--mud-palette-lines-inputs);
    border-top: 1px solid color-mix(in srgb, var(--mud-palette-appbar-text) 25%, var(--mud-palette-appbar-background));
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

.ocp-pub-stopka .ocp-pub-stopka-zastrzezenie {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
}

/* Oznaczenie „Reklama usług własnych. Zleceniodawca: …” pod kolumną „Marki kancelarii” (26 września 2026 r.) — od
   scalenia z etapem 1 ten sam składnik i ta sama klasa co w blokach „Oferta kancelarii” (.ocp-oznaczenie-reklamy: drobny
   krój, adres poczty łamany w dowolnym miejscu, żeby stopka nie poszerzała strony na telefonie). Stopka ma tło
   granatowe, więc wiersz dziedziczy barwę napisu stopki zamiast barwy tekstu pomocniczego z jasnego tła. */
.ocp-pub-stopka .ocp-oznaczenie-reklamy {
    margin-top: 0.5rem;
    color: inherit;
}

/* ─── Elementy wspólne stron publicznych ──────────────────────────────────────────────────────────── */
.ocp-etykieta {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mud-palette-secondary);
}

.ocp-etykieta a {
    color: inherit;
    text-decoration: none;
}

.ocp-metryka {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    margin: 0;
    font-size: 0.9375rem;
    color: var(--mud-palette-text-secondary);
}

/* Odnośnik w metryce ma barwę sąsiedniego tekstu, więc od tekstu odróżnia go wyłącznie podkreślenie. */
.ocp-metryka a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.ocp-strona-tytul {
    margin: 0 0 1.25rem;
    font-family: var(--mud-typography-h1-family);
    font-size: clamp(1.75rem, 1.3rem + 2vw, 2.6rem);
    line-height: 1.15;
    font-weight: 700;
    color: var(--mud-palette-primary);
}

/* ─── Strona marki „Energia Optima” (26 września 2026 r.) ──────────────────────────────────────────────────────
   Logo nad nagłówkiem strony, na każdej szerokości ekranu. Obok siebie logo i nagłówek powtarzały ten sam napis
   w jednym wierszu (obejrzane na zrzucie z próby przeglądarkowej, 26 września 2026 r.). Plik logo ma stałe proporcje
   (884 × 126, atrybuty width i height w znaczniku), więc szerokość wyznacza wysokość; na telefonie logo zwęża się
   do szerokości kolumny i nie poszerza strony. */
.ocp-eo-strona {
    padding-bottom: 2.5rem;
}

.ocp-eo-naglowek {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.ocp-eo-naglowek .ocp-strona-tytul {
    margin: 0;
}

.ocp-eo-logo {
    display: block;
    width: 21rem;
    max-width: 100%;
    height: auto;
}

/* Odstęp między akapitami — układ stron publicznych zeruje marginesy akapitów, a ta strona jest ciągłym tekstem. */
.ocp-eo-strona p {
    margin: 0 0 0.75rem;
    line-height: 1.6;
}

.ocp-eo-lista {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

.ocp-eo-lista li {
    margin-bottom: 0.4rem;
    line-height: 1.6;
}

/* Skok z odnośnika /energia-optima#agenci zostawia nad śródtytułem sekcji odrobinę miejsca (jak skok ze spisu
   „W tym wpisie”). Pasek stron publicznych nie jest przyklejony, więc nie trzeba doliczać jego wysokości. */
.ocp-eo-strona section[id] {
    scroll-margin-top: 1rem;
}

.ocp-okruszki {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.ocp-publiczny .ocp-okruszki a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.ocp-sekcja-tytul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.ocp-sekcja-tytul h2 {
    margin: 0;
    font-family: var(--mud-typography-h2-family);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--mud-palette-primary);
}

.ocp-sekcja-tytul a {
    font-weight: 600;
}

.ocp-karta-wpisu {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.ocp-karta-wpisu-obraz {
    display: block;
    width: 100%;
    height: 11rem;
    object-fit: cover;
}

.ocp-karta-wpisu h2,
.ocp-karta-wpisu h3 {
    margin: 0;
    font-family: var(--mud-typography-h3-family);
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 700;
    overflow-wrap: break-word;
}

.ocp-karta-wpisu h2 a,
.ocp-karta-wpisu h3 a {
    color: var(--mud-palette-primary);
    text-decoration: none;
}

.ocp-karta-wpisu h2 a:hover,
.ocp-karta-wpisu h3 a:hover,
.ocp-czolowka-tytul a:hover {
    text-decoration: underline;
}

.ocp-karta-wpisu > p:not([class]) {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.5;
}

.ocp-karta-wpisu .ocp-metryka {
    font-size: 0.875rem;
}

/* ─── Strona główna ────────────────────────────────────────────────────────────────────────────────── */
.ocp-glowna {
    padding-top: 2.5rem;
}

.ocp-glowna-uklad {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
}

@media (min-width: 960px) {
    .ocp-glowna-uklad {
        grid-template-columns: minmax(0, 1fr) 22rem;
        gap: 3rem;
    }
}

.ocp-glowna-kolumna {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    min-width: 0;
}

.ocp-glowna-bok {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    min-width: 0;
}

.ocp-czolowka {
    background: var(--mud-palette-surface);
    border-top: 3px solid var(--mud-palette-primary);
}

.ocp-czolowka-obraz {
    display: block;
    width: 100%;
    height: clamp(12rem, 30vw, 20rem);
    object-fit: cover;
}

.ocp-czolowka-tresc {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem 1.25rem 1.75rem;
}

@media (min-width: 600px) {
    .ocp-czolowka-tresc {
        padding: 1.75rem 2.25rem 2rem;
    }
}

.ocp-czolowka-tytul {
    margin: 0;
    font-family: var(--mud-typography-h1-family);
    font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3.1rem);
    line-height: 1.1;
    font-weight: 700;
    color: var(--mud-palette-primary);
    overflow-wrap: break-word;
}

.ocp-czolowka-tytul a {
    color: inherit;
    text-decoration: none;
}

.ocp-czolowka-wprowadzenie {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.55;
}

.ocp-czolowka .ocp-metryka {
    padding-top: 0.85rem;
    border-top: 1px solid var(--mud-palette-divider);
}

.ocp-czolowka-adnotacja {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.ocp-wpisy-siatka {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem 2.5rem;
}

@media (min-width: 700px) {
    .ocp-wpisy-siatka {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Bloki kolumny bocznej: kreska na górze w granacie (terminy) albo w zieleni (wskaźniki); blok w samej ramce
   (ocp-blok--obrys) to od 9 października 2026 r. „Zasady redakcyjne” i tekst „Kto prowadzi kancelarię” na końcu strony.
   Kreska jest ozdobą — każdy blok ma własny nagłówek słowny. */
.ocp-blok {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.4rem 1.5rem;
    background: var(--mud-palette-surface);
    border-top: 3px solid var(--mud-palette-primary);
}

.ocp-blok--zielony {
    border-top-color: var(--mud-palette-secondary);
}

.ocp-blok--obrys {
    background: transparent;
    border: 1px solid var(--mud-palette-lines-default);
}

.ocp-blok p {
    margin: 0;
}

.ocp-blok-naglowek {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    font-family: var(--mud-typography-default-family);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
}

.ocp-blok--zielony .ocp-blok-naglowek {
    color: var(--mud-palette-secondary);
}

.ocp-blok--obrys .ocp-blok-naglowek {
    color: var(--mud-palette-text-secondary);
}

.ocp-blok .ocp-blok-przypis {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.ocp-blok .ocp-blok-odnosniki {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.9375rem;
    font-weight: 600;
}

.ocp-terminy {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ocp-termin {
    display: flex;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.ocp-termin:first-child {
    padding-top: 0;
}

.ocp-termin-data {
    flex: 0 0 4.25rem;
    font-family: var(--mud-typography-h1-family);
    font-size: 1.5rem;
    line-height: 1.1;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-primary);
}

.ocp-termin-opis {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
    font-size: 0.9375rem;
    line-height: 1.45;
}

.ocp-blok .ocp-termin-podstawa {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

/* Termin pilny: kreska z lewej i trójkąt ostrzegawczy w pomarańczu palety, ZAWSZE z napisem „Termin pilny”.
   Trójkąt ma obrys w barwie tekstu, bo sam pomarańcz na bieli ma 2,25∶1 — mniej niż 3∶1 wymagane dla grafiki
   niosącej znaczenie (WCAG 2.1, kryterium 1.4.11). */
.ocp-termin--pilny {
    padding-left: 0.75rem;
    border-left: 4px solid var(--mud-palette-warning);
}

.ocp-blok .ocp-termin-pilny {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 700;
}

.ocp-ikona-pilny {
    flex: 0 0 auto;
}

.ocp-ikona-pilny-tlo {
    fill: var(--mud-palette-warning);
    stroke: var(--mud-palette-text-primary);
    stroke-width: 1.5;
}

.ocp-ikona-pilny-znak {
    fill: none;
    stroke: var(--mud-palette-text-primary);
    stroke-width: 2.2;
}

.ocp-wskazniki {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.ocp-wskaznik {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.15rem 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.ocp-wskaznik:first-child {
    padding-top: 0;
}

.ocp-wskaznik dt {
    font-size: 1rem;
}

.ocp-wskaznik-wartosc {
    margin: 0;
    font-family: var(--mud-typography-h1-family);
    font-size: 1.35rem;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
    color: var(--mud-palette-primary);
}

.ocp-wskaznik-objasnienie {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

/* Pas oferty na stronie głównej: od 9 października 2026 r. jasny pas na całą szerokość okna — układ, tło i kreski
   ustala blok „NOWY WYGLĄD STRON PUBLICZNYCH” niżej. Dawne granatowe czoło pasa (.ocp-oferta-pas-czolo) i kolumna
   treści (.ocp-oferta-pas-tresc) zniknęły z kodu strony, więc ich reguły usunięto (recenzja nowego wyglądu). */
.ocp-oferta-pas-etykieta {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mud-palette-tertiary);
}

.ocp-oferta-formy {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1.25rem 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ocp-oferta-formy h3 {
    margin: 0 0 0.35rem;
    font-family: var(--mud-typography-h3-family);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--mud-palette-primary);
}

.ocp-oferta-formy p {
    font-size: 0.9375rem;
}

.ocp-oferta-formy .ocp-oferta-cena {
    margin-top: 0.5rem;
    font-size: 1.0625rem;
}

.ocp-oferta-pas-akcje {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    gap: 0.75rem;
    padding: 1.75rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

@media (min-width: 960px) {
    .ocp-oferta-pas-akcje {
        flex-direction: column;
        align-items: stretch;
        border-top: 0;
        border-left: 1px solid var(--mud-palette-lines-default);
    }
}

.ocp-glowna > .ocp-sekcja {
    margin-top: 3rem;
}

.ocp-kroki {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.5rem 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ocp-kroki li {
    padding: 1.25rem 1.5rem;
    background: var(--mud-palette-surface);
    border-top: 3px solid var(--mud-palette-secondary);
}

.ocp-kroki .ocp-krok-numer {
    margin: 0 0 0.35rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.ocp-kroki h3 {
    margin: 0 0 0.4rem;
    font-family: var(--mud-typography-h3-family);
    font-size: 1.3rem;
    color: var(--mud-palette-primary);
}

.ocp-kroki p {
    margin: 0;
    line-height: 1.55;
}

/* Zdanie z odnosnikiem pod krokami „Rozpoczęcie obsługi księgowej” (do 9 października 2026 r. „Jak zaczynamy”; proba
   pomyslu Z4-L01, 1 pazdziernika 2026 r.): odstep od kart krokow,
   bez wlasnych barw (kontrola K5). */
.ocp-kroki-dopisek {
    margin: 1.25rem 0 0;
    line-height: 1.55;
}

/* ─── Strona wpisu ─────────────────────────────────────────────────────────────────────────────────── */
.ocp-wpis-strona {
    padding-top: 1.75rem;
}

.ocp-publiczny .ocp-wpis-naglowek {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.ocp-wpis-tytul {
    margin: 0;
    font-family: var(--mud-typography-h1-family);
    font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.25rem);
    line-height: 1.08;
    font-weight: 700;
    color: var(--mud-palette-primary);
    overflow-wrap: break-word;
}

.ocp-wpis-wprowadzenie {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.55;
    font-weight: 500;
}

.ocp-wpis-metryka {
    padding: 0.75rem 0;
    border-top: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.ocp-publiczny .ocp-wpis-tresc {
    font-family: var(--mud-typography-h1-family);
    font-size: 1.2rem;
    line-height: 1.7;
    overflow-wrap: break-word;
}

.ocp-publiczny .ocp-wpis-tresc h2 {
    margin: 2rem 0 0.75rem;
    font-size: 1.75rem;
    line-height: 1.25;
    color: var(--mud-palette-primary);
}

/* Skok ze spisu „W tym wpisie” zostawia nad śródtytułem odrobinę miejsca. Pasek stron publicznych nie jest
   przyklejony, więc nie trzeba doliczać jego wysokości. */
.ocp-publiczny .ocp-wpis-tresc h2[id] {
    scroll-margin-top: 1rem;
}

.ocp-publiczny .ocp-wpis-tresc h3,
.ocp-publiczny .ocp-wpis-tresc h4 {
    margin: 1.5rem 0 0.5rem;
    font-size: 1.35rem;
    line-height: 1.3;
    color: var(--mud-palette-primary);
}

.ocp-publiczny .ocp-wpis-tresc p,
.ocp-publiczny .ocp-wpis-tresc ul,
.ocp-publiczny .ocp-wpis-tresc ol,
.ocp-publiczny .ocp-wpis-tresc blockquote {
    margin: 0 0 1rem;
}

.ocp-publiczny .ocp-wpis-tresc blockquote {
    padding-left: 1rem;
    border-left: 4px solid var(--mud-palette-lines-inputs);
}

.ocp-publiczny .ocp-wpis-tresc code {
    font-size: 0.9em;
}

.ocp-wpis-podstawa {
    margin: 0 0 1.25rem;
    padding: 0.75rem 1rem;
    background: var(--mud-palette-surface);
    border-left: 4px solid var(--mud-palette-secondary);
}

.ocp-publiczny .ocp-wpis-adnotacja p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
}

.ocp-wpis-kontakt {
    margin-top: 1.5rem;
}

/* Wpis bez kolumny bocznej: jedna kolumna tekstu o wygodnej długości wiersza. */
.ocp-wpis--bez-boku {
    max-width: 48rem;
}

.ocp-bok-naglowek {
    margin: 0 0 0.75rem;
    font-family: var(--mud-typography-default-family);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
}

.ocp-wpis-spis,
.ocp-wpis-powiazane {
    padding: 1.25rem 1.4rem;
}

.ocp-wpis-spis {
    background: var(--mud-palette-surface);
    border-top: 3px solid var(--mud-palette-primary);
}

.ocp-wpis-spis ol {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding-left: 1.25rem;
    line-height: 1.4;
}

.ocp-wpis-powiazane {
    border: 1px solid var(--mud-palette-lines-default);
}

.ocp-wpis-powiazane .ocp-bok-naglowek {
    color: var(--mud-palette-text-secondary);
}

.ocp-wpis-powiazane ul {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ocp-wpis-powiazane a {
    display: block;
    font-family: var(--mud-typography-h3-family);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}

.ocp-wpis-powiazane a:hover {
    text-decoration: underline;
}

.ocp-wpis-powiazane .ocp-metryka {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.8125rem;
}

/* CYKL LEKCJI (29 września 2026 r., CykleWpisow): blok nad listą Wiedzy i spis pod tekstem lekcji — ta sama ramka co
   spis „W tym wpisie” (tło powierzchni, kreska u góry w barwie głównej), lekcje po kolei w jednej kolumnie. Lista bez
   numerów przeglądarki: numer lekcji stoi w napisie („Lekcja 3: …”), więc numer listy byłby drugi raz. */
.ocp-cykle {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ocp-cykle-naglowek {
    margin: 0;
    font-family: var(--mud-typography-default-family);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
}

.ocp-cykl,
.ocp-wpis-cykl {
    padding: 1.25rem 1.4rem;
    background: var(--mud-palette-surface);
    border-top: 3px solid var(--mud-palette-primary);
}

.ocp-wpis-cykl {
    margin: 2rem 0 1.5rem;
}

.ocp-cykl-lekcje {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1.4;
}

.ocp-cykl-kolejne {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 0 0;
}

/* KOLUMNA BOCZNA WPISU — wąski pojemnik (telefon): części stoją jedna pod drugą W KOLEJNOŚCI KODU STRONY —
   tytuł, karta „W skrócie”, spis „W tym wpisie”, treść, a po treści powiązane wpisy. Arkusz niczego nie
   przestawia: do kontroli z 24 września 2026 r. reguły order przenosiły spis i powiązane wpisy pod treść, choć
   w kodzie stały przed nią, więc klawisz Tab skakał z karty pod artykuł i z powrotem do treści (WCAG 2.1,
   kryteria 2.4.3 i 1.3.2). Powiązane wpisy stoją teraz w kodzie strony za treścią. */
.ocp-wpis--z-bokiem > .ocp-wpis-bok {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.ocp-wpis-bok > .ocp-wskrocie {
    margin: 0;
}

.ocp-wpis--z-bokiem > .ocp-wpis-powiazane {
    margin-top: 2rem;
}

/* Szeroki pojemnik (co najmniej 56rem): kolumna boczna obok tekstu, przyklejona przy przewijaniu; gdy jest wyższa
   niż okno, przewija się we własnym obszarze. Reguły stoją PO regułach karty „W skrócie” wyżej, więc przy wpisie,
   który ma obie klasy, wygrywa ta siatka (szersza kolumna boczna, bo mieści spis i powiązane wpisy).
   Powiązane wpisy (w kodzie strony za treścią) stają na dole kolumny bocznej, przy końcu tekstu: obszar „bok”
   sięga do ostatniego wiersza siatki z wyjątkiem ostatniego, więc karta ze spisem trzyma się ekranu przez cały
   tekst, a powiązane wpisy pojawiają się, gdy czytelnik dochodzi do końca. Wpis, którego kolumna boczna ma TYLKO
   powiązane wpisy (klasa ocp-wpis--tylko-powiazane), stawia je na górze kolumny. */
@container (min-width: 56rem) {
    .ocp-wpis--z-bokiem {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 20rem;
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "naglowek bok"
            "glowna bok"
            "glowna powiazane";
        column-gap: 3rem;
    }

    .ocp-wpis--z-bokiem > .ocp-wpis-powiazane {
        grid-area: powiazane;
        align-self: end;
        margin-top: 1.5rem;
    }

    .ocp-wpis--tylko-powiazane > .ocp-wpis-powiazane {
        grid-area: bok;
        align-self: start;
        margin-top: 0;
    }

    .ocp-wpis--z-bokiem > .ocp-wpis-naglowek {
        grid-area: naglowek;
    }

    .ocp-wpis--z-bokiem > .ocp-wpis-glowna {
        grid-area: glowna;
    }

    .ocp-wpis--z-bokiem > .ocp-wpis-bok {
        grid-area: bok;
        align-self: start;
        position: sticky;
        top: 1rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
        margin-bottom: 0;
    }
}

/* ─── Wyszukiwarka działu Wiedza ──────────────────────────────────────────────────────────────────── */
.ocp-szukaj-formularz label {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 600;
}

/* Fraza wraca na stronę w zdaniu i może mieć do 100 znaków bez spacji (wklejony adres, identyfikator) — bez
   łamania wystawałaby na telefonie poza ekran (WCAG 2.1, kryterium 1.4.10; kontrola z 24 września 2026 r.). */
.ocp-szukaj-zacheta,
.ocp-szukaj-wynik {
    margin: 1.25rem 0;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.ocp-wyniki {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ocp-stronicowanie {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
    font-size: 0.9375rem;
}

/* ─── Telefon ──────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 599.98px) {
    .ocp-pub-znak {
        width: 48px;
        height: 45px;
    }

    .ocp-pub-marka {
        gap: 0.75rem;
    }

    .ocp-pub-marka-nazwa {
        font-size: clamp(1.25rem, 7vw, 1.75rem);
    }

    .ocp-pub-marka-pro {
        font-size: 0.875rem;
    }

    .ocp-pub-marka-podpis {
        font-size: 0.6875rem;
        letter-spacing: 0.08em;
    }

    .ocp-pub-szukaj {
        flex-basis: 100%;
    }

    .ocp-pub-dzialy-lista,
    .ocp-pub-dzialy-grupa {
        gap: 0 1.25rem;
    }

    /* „OFERTA” WIDAĆ NA TELEFONIE OD RAZU (1 października 2026 r., polecenie Z3-004). Gość z mediów społecznościowych
       wchodzi zwykle z telefonu. Do tego dnia pasek przewijał się w poziomie, a „Pytania i odpowiedzi”, „Sklep”
       i „Oferta” leżały za prawą krawędzią ekranu; zanikanie (maska) przy tej krawędzi mówiło tylko, że pasek ciągnie się
       dalej. Teraz ostatnia pozycja listy (ocp-pub-dzialy-prawe: „Sklep”, gdy sklep jest włączony, i „Oferta”) jest
       przyklejona do prawej krawędzi pojemnika, a działy Wiedzy przesuwają się pod nią. Pasek nadal jest pojemnikiem
       przewijanym, strona nie przewija się w poziomie, a kolejność odnośników na ekranie i przy klawiszu Tab się nie
       zmienia. Od 600 px nic się nie zmienia — tam pasek zawija się do drugiego wiersza (sekcja „Pasek działów”).

       SZEROKOŚĆ PRZYKLEJONEJ CZĘŚCI jest znana z góry: każdy jej odnośnik ma 6em (78 px przy piśmie 13 px), do tego
       odstęp z lewej 1,25rem i z prawej 1rem — razem 7,125rem (114 px), a przy włączonym sklepie z drugim odnośnikiem
       i odstępem między nimi 13,25rem (212 px). Tę liczbę bierze scroll-padding-right: dział, do którego przeglądarka
       przewija pasek przy fokusie z klawiatury, staje przed przyklejoną częścią i jej cieniem (WCAG 2.2, kryterium
       2.4.11). Przy 375 px zostaje na działy Wiedzy 221 px bez sklepu i 123 px ze sklepem. Uwaga: Chromium przy fokusie
       nie przewija paska, gdy dział jest już częściowo widoczny (sprawdzone 1 października 2026 r. przy 375 px:
       „Kalendarz terminów” tuż po wejściu zostaje w większości pod przyklejoną częścią). Dział nigdy nie znika w całości
       — tyle wymaga kryterium 2.4.11; pełnej widoczności (kryterium 2.4.12, poziom AAA) bez skryptu nie zapewnimy.

       Odstęp 16 px od krawędzi ekranu (ocp-pub-szerokosc) przechodzi z pojemnika na listę (z lewej) i na przyklejoną
       część (z prawej) — inaczej przyklejona część stałaby 16 px przed krawędzią, a Wiedza prześwitywałaby za nią.
       Przewijanie bez animacji: odnośnik z fokusem ma od razu stać na swoim miejscu, a nie przesuwać się przez chwilę. */
    .ocp-pub-dzialy-wnetrze {
        --ocp-dzialy-prawe-szerokosc: 7.125rem;
        min-width: 0;
        max-width: 100%;
        padding: 0;
        overflow-x: auto;
        scroll-behavior: auto;
        scroll-padding-left: 1.25rem;
        scroll-padding-right: calc(var(--ocp-dzialy-prawe-szerokosc) + 1.25rem);
    }

    /* Druga pozycja zagnieżdżonej listy oznacza włączony sklep: dwa odnośniki i odstęp między nimi. Przeglądarka
       bez :has() (np. Firefox przed wersją 121) zostaje przy mniejszej liczbie — przyklejona część i tak ma szerokość
       swoich odnośników (min-width, nie width), więc „Oferta” nie wystaje; za mała jest wtedy tylko rezerwa przewijania. */
    .ocp-pub-dzialy-wnetrze:has(.ocp-pub-dzialy-grupa > li:nth-child(2)) {
        --ocp-dzialy-prawe-szerokosc: 13.25rem;
    }

    .ocp-pub-dzialy-lista {
        box-sizing: border-box;
        padding-left: 1rem;
    }

    /* Przyklejona jest pozycja listy głównej, nie sama „Oferta”: element przyklejony nie wychodzi poza swojego
       rodzica, a „Oferta” stoi w zagnieżdżonej liście tak wąskiej jak ona sama. Tło ze zmiennej motywu zakrywa działy
       Wiedzy, które przesuwają się pod spodem; kreska oddzielająca (::before) zostaje na lewej krawędzi. */
    .ocp-pub-dzialy-prawe {
        position: sticky;
        right: 0;
        z-index: 1;
        box-sizing: border-box;
        flex: none;
        min-width: var(--ocp-dzialy-prawe-szerokosc);
        padding: 0 1rem 0 1.25rem;
        background: var(--mud-palette-surface);
        /* Cień w barwie tła zastępuje dawne zanikanie: przygasza dział Wiedzy, który chowa się pod przyklejoną częścią,
           a nie „Sklep” i „Ofertę”. Maska na całym pojemniku przygasiłaby też je. */
        box-shadow: -0.5rem 0 0.5rem var(--mud-palette-surface);
    }

    /* Stała szerokość 6em odnośników przyklejonej części — z niej policzona jest szerokość wyżej. Napis wyśrodkowany. */
    .ocp-pub-dzialy-grupa > li {
        flex-shrink: 0;
    }

    .ocp-pub-dzialy-grupa a {
        width: 6em;
        box-sizing: border-box;
        text-align: center;
    }

    /* Pole dotyku odnośnika co najmniej 24 × 24 px (WCAG 2.2, kryterium 2.5.8). */
    .ocp-pub-dzialy a {
        font-size: 0.8125rem;
        letter-spacing: 0.06em;
        min-width: 24px;
        min-height: 24px;
    }

    /* Dział Wiedzy o długiej nazwie („Pytania i odpowiedzi”, „Kalendarz terminów”) przy włączonym sklepie łamie napis
       do drugiego wiersza, żeby po dojściu klawiszem Tab mieścił się w całości między rezerwą z lewej (1,25rem)
       a przyklejoną częścią z jej cieniem (1,25rem). Bez sklepu przy 375 px żadna nazwa się nie łamie. Łamie się tylko
       między wyrazami: min-width: min-content (najdłuższy wyraz) wygrywa z max-width, więc na wąskim telefonie
       „Aktualności” nie rozpada się na „Aktualn” i „ości”. */
    .ocp-pub-dzialy-lista > li:not(.ocp-pub-dzialy-prawe) > a {
        min-width: min-content;
        max-width: calc(100vw - 2.5rem - var(--ocp-dzialy-prawe-szerokosc));
        white-space: normal;
    }

    .ocp-glowna,
    .ocp-wpis-strona {
        padding-top: 1.5rem;
    }
}

/* ─── Druk ─────────────────────────────────────────────────────────────────────────────────────────── */
@media print {
    .ocp-pub-pasek,
    .ocp-pub-szukaj,
    .ocp-pub-dzialy,
    .ocp-wpis-spis,
    .ocp-wpis-powiazane {
        display: none;
    }

    .ocp-wpis--z-bokiem {
        display: block;
    }

    .ocp-wpis--z-bokiem > .ocp-wpis-bok {
        display: block;
        position: static;
        max-height: none;
        overflow: visible;
    }
}

/* ═══ NOWY WYGLĄD STRON PUBLICZNYCH (9 października 2026 r.) ═══════════════════════════════════════════════════════════
   Polecenie właściciela: „nowoczesny krój jak najlepsze marki księgowe i prawne świata”. Wzór: powściągliwa typografia
   renomowanych kancelarii i firm audytorskich — duże tytuły krojem Source Serif 4, dużo światła, cienkie kreski zamiast
   ramek i teł w kartach i sekcjach, ceny dużymi liczbami, równy rytm odstępów. Plan sprawdzili przed budową trzej
   recenzenci; ich uwagi są tu wpisane jako reguły:
   - nagłówek jest jasny, bo reguły paska z datą i jego części przepięto na zmienne surface, text-primary i primary —
     BEZ zmiany AppbarBackground i AppbarText w Theming/MotywPubliczny.cs, bo z tej samej pary bierze barwy stopka,
     która zostaje granatowa (biały napis stopki na białym tle i nagłówki stopki w jasnej zieleni 1,72∶1);
   - pasek z datą nie ma już pomarańczowego obrysu fokusu (2,25∶1 na bieli), tylko obrys ogólny w atramencie (15∶1);
     pomarańcz zostaje stopce; kłódka „Strefy klienta” ma barwę napisu przycisku (currentColor), bo jasnej zieleni wolno
     używać wyłącznie na granacie (Theming/BarwyMarki.cs);
   - pas oferty na stronie głównej jest jasny; etykieta „Oferta kancelarii” w zieleni księgi (4,99∶1 na bieli),
     pogrubiona i z kreską pod oznaczeniem — barwa nie jest jedynym znakiem bloku reklamy;
   - pola formularzy i wyszukiwarki zostają przy var(--mud-palette-lines-inputs) (3,99∶1 na bieli) — cienka kreska
     ozdobna (1,48∶1) jest tylko w kartach, sekcjach i pasie oferty (WCAG 2.1, kryterium 1.4.11);
   - na telefonie pasek działów zostaje osobnym, przewijanym pojemnikiem z obrysem fokusu do środka (reguły wyżej,
     sekcje „Pasek działów” i „Telefon” — ten blok ich nie zmienia);
   - stopnie pisma funkcją clamp() z dolną granicą 2–2,25 rem na telefonie; kwoty bez overflow-wrap: anywhere, żeby
     „od 299 zł” się nie rozpadło.
   Każda reguła zaczyna się od .ocp-publiczny: blok dotyczy wyłącznie stron układu PublicLayout, wygrywa swoistością
   z regułami wyżej i nie wchodzi w skalę panelu (SkalaTypograficznaPaneluTests). Barwy wyłącznie ze zmiennych motywu
   (kontrola K5), także w rysunku księgi. Zrzuty „przed” i „po” leżą w notatce roboczej na komputerze biura (poza
   repozytoriami); kontrasty nowych par, liczone według WCAG 2.1 z barw Theming/BarwyMarki.cs, są tutaj:
     data i wiersz zleceniodawcy — łupek na bieli .................................. 5,31∶1
     odnośniki paska i obrys fokusu — atrament na bieli / na papierze ............... 14,99∶1 / 13,76∶1
     „Strefa klienta” i „Zapytaj o wycenę” — biel na granacie; granat na bieli ........ 12,10∶1
     „Cennik” — granatowy napis i obrys na bieli ..................................... 12,10∶1
     etykieta „Oferta kancelarii” — zieleń księgi na bieli (pogrubiona, kapitaliki) .. 4,99∶1
     tytuł pasa i kwoty — granat na bieli ............................................ 12,10∶1
     tytuł czołówki — granat na papierze ............................................. 11,10∶1
     etykiety działów i „Krok n” — zieleń księgi na papierze ......................... 4,58∶1
     metryka — łupek na papierze ..................................................... 4,87∶1
     kreska pól formularzy i wyszukiwarki ............................................ 3,99∶1
     kreska ozdobna (wyłącznie podziały, nigdy obramowanie pola) ..................... 1,48∶1
     obrys fokusu w stopce — pomarańcz na granacie ................................... 5,37∶1
   Poprawki po recenzji zbudowanego wyglądu (9 października 2026 r.) są opisane przy regułach, których dotyczą. */

/* ─── Nagłówek: jasny pasek z datą i „Strefa klienta” jako przycisk ──────────────────────────────────────────────── */
.ocp-publiczny .ocp-pub-pasek {
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.ocp-publiczny .ocp-pub-pasek-wnetrze {
    min-height: 2.75rem;
}

/* Data w łupku: 5,31∶1 na bieli. */
.ocp-publiczny .ocp-pub-data {
    color: var(--mud-palette-text-secondary);
}

.ocp-publiczny .ocp-pub-skroty a,
.ocp-publiczny .ocp-pub-wyloguj button {
    color: var(--mud-palette-text-primary);
}

/* „Strefa klienta”: wypełniony granatem (biel na granacie 12,1∶1), kłódka w barwie napisu. Obrys fokusu z reguły
   ogólnej (atrament, odsunięty o 2 px) leży na bieli paska — 15∶1. */
.ocp-publiczny .ocp-pub-skroty a.ocp-pub-strefa {
    padding: 0.3rem 0.9rem;
    border-radius: 4px;
    font-weight: 600;
    color: var(--mud-palette-primary-text);
    background: var(--mud-palette-primary);
}

.ocp-publiczny .ocp-pub-skroty a.ocp-pub-strefa:hover {
    background: var(--mud-palette-primary-darken);
}

.ocp-publiczny .ocp-pub-klodka {
    color: currentColor;
}

/* Swoistość wyższa niż „.ocp-pub-pasek :focus-visible” (pomarańcz) wyżej — na jasnym pasku obrys w atramencie. */
.ocp-publiczny .ocp-pub-pasek :focus-visible {
    outline-color: var(--mud-palette-text-primary);
}

/* „Przejdź do treści” na stronach publicznych (recenzja, uwaga 12): po fokusie staje w lewym górnym rogu, na białym
   pasku z datą, a pomarańczowy wyjątek z reguły ogólnej miał tam 2,25∶1. Odnośnik stoi PRZED elementem .ocp-publiczny
   (PublicLayout.razor), więc selektor z .ocp-publiczny na początku go nie obejmuje — stąd :has(+ .ocp-publiczny).
   Obrys w atramencie: 14,99∶1 na bieli. W panelu (MainLayout, granatowy pasek aplikacji) pomarańcz zostaje. */
.ocp-przejdz-do-tresci:has(+ .ocp-publiczny):focus-visible {
    outline-color: var(--mud-palette-text-primary);
}

.ocp-publiczny .ocp-pub-winieta-wnetrze {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

/* Pasek działów zamyka nagłówek cienką kreską w atramencie zamiast grubej granatowej. Kreska bieżącego działu
   (3 px, zieleń księgi) i aria-current zostają bez zmian. */
.ocp-publiczny .ocp-pub-dzialy {
    border-bottom: 1px solid var(--mud-palette-text-primary);
}

.ocp-publiczny .ocp-pub-tresc {
    padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
}

/* ─── Tytuły sekcji: kreska w atramencie pod tytułem ─────────────────────────────────────────────────────────────── */
.ocp-publiczny .ocp-sekcja-tytul {
    margin-bottom: 1.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--mud-palette-text-primary);
}

.ocp-publiczny .ocp-sekcja-tytul h2 {
    font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

/* ─── Strona główna: czołówka ────────────────────────────────────────────────────────────────────────────────────── */
.ocp-publiczny .ocp-glowna {
    padding-top: clamp(2rem, 1rem + 3vw, 4rem);
}

.ocp-publiczny .ocp-czolowka {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
    background: transparent;
    border-top: 0;
}

.ocp-publiczny .ocp-czolowka-tresc {
    gap: 1.25rem;
    padding: 0;
}

/* Ilustracja stoi w kodzie za wprowadzeniem (Home.razor; recenzja, uwaga 10). Na telefonie leży więc między
   wprowadzeniem a metryką. Od 960 px pojemnik tekstu znika z układu (display: contents), jego części stają w lewej
   kolumnie siatki czołówki, a ilustracja — w prawej, od pierwszego wiersza. Pięć wierszy tekstu ma wysokość treści;
   nadmiar wysokości ilustracji bierze szósty, elastyczny wiersz, więc odstępy między tytułem, wprowadzeniem
   i metryką się nie rozciągają. */
@media (min-width: 960px) {
    .ocp-publiczny .ocp-czolowka--z-obrazem {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        grid-template-rows: repeat(5, auto) 1fr;
        column-gap: 4rem;
        row-gap: 1.25rem;
        align-items: start;
    }

    .ocp-publiczny .ocp-czolowka--z-obrazem .ocp-czolowka-tresc {
        display: contents;
    }

    .ocp-publiczny .ocp-czolowka--z-obrazem .ocp-czolowka-tresc > * {
        grid-column: 1;
    }

    .ocp-publiczny .ocp-czolowka--z-obrazem .ocp-czolowka-tresc > .ocp-czolowka-obraz {
        grid-column: 2;
        grid-row: 1 / span 6;
        align-self: start;
    }
}

/* Czołówka bez ilustracji (tak wyglądają dziś wpisy na produkcji; recenzja, uwaga 2): tytuł, wprowadzenie, kreska nad
   metryką i adnotacja mają jedną szerokość, zamiast biec przez całą stronę w trzech różnych szerokościach. Szerokość
   50 rem (zamiast 56 rem z recenzji) daje wprowadzeniu ok. 75 znaków w wierszu, więc może ono zająć całą kolumnę. */
.ocp-publiczny .ocp-czolowka:not(.ocp-czolowka--z-obrazem) .ocp-czolowka-tresc {
    max-width: 50rem;
}

.ocp-publiczny .ocp-czolowka:not(.ocp-czolowka--z-obrazem) .ocp-czolowka-wprowadzenie {
    max-width: none;
}

/* Jedyny nagłówek pierwszego stopnia strony i największe pismo na niej: od 34 px na telefonie 375 px do 60 px
   (kwoty w pasie oferty mają najwyżej 28–40 px — recenzja, uwagi 7 i 15). */
.ocp-publiczny .ocp-czolowka-tytul {
    font-size: clamp(2.125rem, 1.25rem + 3.2vw, 3.75rem);
    line-height: 1.06;
    font-weight: 600;
    letter-spacing: -0.015em;
    max-width: 22em;
}

.ocp-publiczny .ocp-czolowka-wprowadzenie {
    max-width: 38em;
    font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3rem);
    line-height: 1.6;
}

/* Skład tytułów po polsku (recenzja, uwaga 3): przeglądarka wyrównuje długość wierszy tytułu (balance), więc spójnik
   „w” nie zostaje sam na końcu wiersza („Kancelaria księgowa / w jednym portalu”), a w tekście ciągłym unika
   pojedynczego słowa w ostatnim wierszu (pretty). Brzmienie tytułów się nie zmienia — PortalSprzedajeTests sprawdza
   je dosłownie. Przeglądarka bez tych wartości łamie wiersze jak dotąd. */
.ocp-publiczny .ocp-czolowka-tytul,
.ocp-publiczny .ocp-oferta-pas-glowa h2,
.ocp-publiczny .ocp-sekcja-tytul h2,
.ocp-publiczny .ocp-karta-wpisu h3,
.ocp-publiczny .ocp-wpis-tytul {
    text-wrap: balance;
}

.ocp-publiczny .ocp-czolowka-wprowadzenie,
.ocp-publiczny .ocp-oferta-pas-wstep {
    text-wrap: pretty;
}

/* Wyraz z łącznikiem w tytule („e-Faktur”, „e-Doręczeń”, „Księgowo-Prawna”) nie łamie się w miejscu łącznika
   (9 października 2026 r.): sam balance łamał czołówkę „Krajowy System e- / Faktur”. Element z tą klasą wstawia
   SkladTytulow (Application/Tablica) w tytule czołówki, kart wpisów i kart cen na stronie głównej, wykazu Wiedzy,
   wpisu, „Powiązanych wpisów”, wyników wyszukiwania i pasa oferty; tam też twarde spacje po „w”, „z”, „i”, przy „r.”,
   „zł”, „art.” i między dniem a miesiącem. Niełamliwego łącznika U+2011 nie używamy — dołączony krój Source Serif 4
   nie ma tego znaku.
   Poprawka po recenzji kodu (9 października 2026 r.): zamiast white-space: nowrap element jest inline-block
   o szerokości najwyżej wiersza. Przechodzi do następnego wiersza w całości, a szerszy od wiersza łamie się wewnątrz —
   przy nowrap wyraz 16–18 znaków w tytule czołówki wychodził poza ekran przy 320 i 360 px (WCAG 2.1, kryterium
   1.4.10). Podkreślenie odnośnika nie przechodzi do elementu inline-block, więc element bierze je od rodzica
   (text-decoration: inherit) — tytuł karty podkreśla się przy najechaniu w całości. Próby: SkladTytulowTests
   i SkladTytulowE2ETests (320, 360 i 390 px). */
.ocp-publiczny .ocp-bez-lamania {
    display: inline-block;
    max-width: 100%;
    text-decoration: inherit;
}

/* Tytuł wpisu i tytuły kart w tej samej grubości co tytuł czołówki (recenzja, uwaga 8): zapowiedź na stronie głównej
   i artykuł mają jedną szatę. Grubości .ocp-strona-tytul (Wiedza, Oferta, Kontakt) NIE zmieniamy — SpojnoscSzatyE2ETests
   porównuje ją z tytułem panelu. */
.ocp-publiczny .ocp-wpis-tytul {
    font-weight: 600;
    letter-spacing: -0.015em;
}

.ocp-publiczny .ocp-karta-wpisu h3 {
    font-weight: 600;
}

.ocp-publiczny .ocp-czolowka .ocp-metryka {
    padding-top: 1rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* Wymiary obrazu znane przed wczytaniem: na telefonie wysokość, od 960 px proporcja 4 : 3 przy szerokości kolumny. */
.ocp-publiczny .ocp-czolowka-obraz {
    height: clamp(12rem, 52vw, 20rem);
}

@media (min-width: 960px) {
    .ocp-publiczny .ocp-czolowka-obraz {
        height: auto;
        aspect-ratio: 4 / 3;
    }
}

/* ─── Strona główna: pas oferty na całą szerokość okna ──────────────────────────────────────────────────────────── */
.ocp-publiczny .ocp-oferta-pas {
    display: block;
    margin-top: 0;
    background: var(--mud-palette-surface);
    border: 0;
    border-top: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.ocp-publiczny .ocp-oferta-pas p {
    margin: 0;
}

.ocp-publiczny .ocp-oferta-pas-wnetrze {
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 1.25rem + 2.5vw, 3.5rem);
    padding-top: clamp(2.5rem, 1.5rem + 4vw, 5rem);
    padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}

.ocp-publiczny .ocp-oferta-pas-glowa {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

/* Oznaczenie reklamy nad tytułem: nagłówek bloku kapitalikami w zieleni księgi, pod nim wiersz zleceniodawcy
   w łupku (5,31∶1 na bieli) i cienka kreska — tak samo w kodzie strony i na ekranie. Kreska obejmuje całą kolumnę
   tekstu pasa (bez ograniczenia szerokości — recenzja, uwaga 11: kończyła się ok. 40 px przed tytułem i wstępem). */
.ocp-publiczny .ocp-oferta-pas-oznaczenie {
    max-width: none;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.ocp-publiczny .ocp-oferta-pas-etykieta {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mud-palette-secondary);
}

.ocp-publiczny .ocp-oferta-pas .ocp-oznaczenie-reklamy {
    margin-top: 0.35rem;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

/* Tytuł pasa (h2) zawsze mniejszy od tytułu czołówki (h1) — od 30 px na telefonie do 48 px. */
.ocp-publiczny .ocp-oferta-pas-glowa h2 {
    margin: 0.5rem 0 0;
    font-family: var(--mud-typography-h2-family);
    font-size: clamp(1.875rem, 1.2rem + 2.4vw, 3rem);
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--mud-palette-primary);
}

.ocp-publiczny .ocp-oferta-pas-wstep {
    max-width: 36em;
    font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.2rem);
    line-height: 1.6;
}

.ocp-publiczny .ocp-oferta-pas-akcje {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-top: 0.5rem;
    padding: 0;
    border: 0;
}

.ocp-publiczny .ocp-oferta-pas-akcje .mud-button-root {
    min-height: 2.75rem;
    padding: 0.55rem 1.5rem;
    font-size: 1rem;
}

/* Obrys przycisku obrysowanego („Cennik”) pełnym granatem (12,10∶1 na bieli) zamiast półprzezroczystego z MudBlazor.
   Od recenzji (9 października 2026 r.) wypełniony granatem jest „Zapytaj o wycenę”, jak w nagłówku i pod wpisem. */
.ocp-publiczny .ocp-oferta-pas-akcje .mud-button-outlined {
    border-color: var(--mud-palette-primary);
}

/* Rysunek księgi: ozdoba, od 960 px w prawej kolumnie obok tytułu, poniżej 960 px ukryty, żeby nie spychał tytułu
   i przycisków pod pierwszy ekran. Kolumnę wskazuje siatka — w kodzie rysunek stoi na końcu i czytnik go pomija. */
.ocp-publiczny .ocp-oferta-pas-rysunek {
    display: none;
}

@media (min-width: 960px) {
    .ocp-publiczny .ocp-oferta-pas-glowa {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        column-gap: 4rem;
    }

    .ocp-publiczny .ocp-oferta-pas-glowa > * {
        grid-column: 1;
    }

    .ocp-publiczny .ocp-oferta-pas-glowa > .ocp-oferta-pas-rysunek {
        display: block;
        grid-column: 2;
        grid-row: 1 / span 4;
        align-self: center;
    }
}

.ocp-publiczny .ocp-ksiega {
    display: block;
    width: 100%;
    max-width: 26rem;
    height: auto;
    margin-left: auto;
}

.ocp-publiczny .ocp-ksiega-lewa {
    stroke: var(--mud-palette-primary);
}

.ocp-publiczny .ocp-ksiega-prawa {
    stroke: var(--mud-palette-secondary);
}

.ocp-publiczny .ocp-ksiega-lewa .ocp-ksiega-wierzch {
    fill: var(--mud-palette-primary);
}

.ocp-publiczny .ocp-ksiega-prawa .ocp-ksiega-wierzch {
    fill: var(--mud-palette-secondary);
}

/* Trzy formy ewidencji: kolumny rozdzielone kreską, cena dużą liczbą krojem szeryfowym. Na telefonie jedna pod drugą,
   rozdzielone kreską poziomą. Kwota nie łamie się (spacja nierozdzielająca z CennikPubliczny.Kwota i nowrap). */
.ocp-publiczny .ocp-oferta-formy {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    border-top: 1px solid var(--mud-palette-text-primary);
}

.ocp-publiczny .ocp-oferta-formy li {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

@media (min-width: 760px) {
    .ocp-publiczny .ocp-oferta-formy {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-bottom: 1px solid var(--mud-palette-lines-default);
    }

    .ocp-publiczny .ocp-oferta-formy li {
        padding: 1.75rem 2rem 2rem;
        border-bottom: 0;
        border-left: 1px solid var(--mud-palette-lines-default);
    }

    .ocp-publiczny .ocp-oferta-formy li:first-child {
        padding-left: 0;
        border-left: 0;
    }

    .ocp-publiczny .ocp-oferta-formy li:last-child {
        padding-right: 0;
    }

    /* Nazwa formy zajmuje zawsze dwa wiersze — ceny w trzech kolumnach stoją na jednej linii. */
    .ocp-publiczny .ocp-oferta-formy h3 {
        min-height: 2.5em;
    }
}

.ocp-publiczny .ocp-oferta-formy h3 {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.25;
}

.ocp-publiczny .ocp-oferta-formy .ocp-oferta-cena {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.5rem;
    margin: 0.25rem 0 0.25rem;
    font-size: 0.9375rem;
    color: var(--mud-palette-text-secondary);
}

.ocp-publiczny .ocp-oferta-cena-kwota {
    font-family: var(--mud-typography-h1-family);
    /* Kwota zawsze mniejsza od tytułu pasa i od tytułu czołówki (recenzja, uwagi 7 i 15): ok. 28 px na telefonie,
       ok. 40 px przy 1440 px — wyraźna liczba, ale pas czyta się jako oferta kancelarii, nie cennik sklepu. */
    font-size: clamp(1.75rem, 1.3rem + 1.3vw, 2.5rem);
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: lining-nums;
    white-space: nowrap;
    color: var(--mud-palette-primary);
}

.ocp-publiczny .ocp-oferta-formy p {
    font-size: 0.9375rem;
    line-height: 1.55;
}

.ocp-publiczny .ocp-oferta-formy .ocp-oferta-zapis {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

/* Zdania pod cenami. Od 960 px trzymają siatkę kolumn cen (recenzja, uwaga 6): trzy równe kolumny bez odstępu, wcięcia
   jak w kolumnach cen. Od przeglądu tekstów (9 października 2026 r., uwaga W2) są dwa akapity: warunek kwoty „od” ze
   zdaniem o VAT pod pierwszą kolumną i odnośniki do części B, F i D cennika z kwotami kadr i płac w kolumnach 2–3.
   Kolejność czytania bez zmian. */
.ocp-publiczny .ocp-oferta-pas-warunki {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    font-size: 0.9375rem;
    line-height: 1.6;
}

@media (min-width: 960px) {
    .ocp-publiczny .ocp-oferta-pas-warunki {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 0;
        row-gap: 1.25rem;
    }

    .ocp-publiczny .ocp-oferta-pas-warunki > p {
        padding: 0 2rem;
    }

    .ocp-publiczny .ocp-oferta-pas-warunki > p:first-child {
        padding-left: 0;
    }

    .ocp-publiczny .ocp-oferta-pas-warunki > p:nth-child(2) {
        grid-column: 2 / span 2;
        padding-right: 0;
    }
}

/* ─── Strona główna: „Rozpoczęcie obsługi księgowej”, najnowsze wpisy z kolumną boczną, „Kto prowadzi kancelarię” ─ */
.ocp-publiczny .ocp-glowna-uklad {
    margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

@media (min-width: 960px) {
    .ocp-publiczny .ocp-glowna-uklad {
        grid-template-columns: minmax(0, 1fr) 22rem;
        gap: 4rem;
    }

    /* Kreska nad kolumną boczną na wysokości kreski pod tytułem „Najnowsze wpisy” (recenzja, uwaga 11): odstęp to
       wysokość wiersza tytułu sekcji (rozmiar × interlinia 1,15) i jego dolne wcięcie 0,75 rem. */
    .ocp-publiczny .ocp-glowna-uklad > .ocp-glowna-bok {
        margin-top: calc(clamp(1.625rem, 1.3rem + 1vw, 2.125rem) * 1.15 + 0.75rem);
    }

    /* Bez kolejnych wpisów albo przy jednym do trzech (recenzja, uwaga 1): jedna kolumna — karty w jednym rzędzie na
       całą szerokość, a bloki terminów i wskaźników pod nimi obok siebie. Obok wysokiej kolumny bocznej zostawał
       inaczej pusty prostokąt papieru. */
    .ocp-publiczny .ocp-glowna-uklad--bez-wpisow,
    .ocp-publiczny .ocp-glowna-uklad--malo-wpisow {
        grid-template-columns: minmax(0, 1fr);
    }

    .ocp-publiczny .ocp-glowna-uklad--bez-wpisow > .ocp-glowna-bok,
    .ocp-publiczny .ocp-glowna-uklad--malo-wpisow > .ocp-glowna-bok {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 4rem;
        margin-top: 0;
    }

    .ocp-publiczny .ocp-glowna-uklad--malo-wpisow .ocp-wpisy-siatka {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.ocp-publiczny .ocp-glowna .ocp-pub-szerokosc > .ocp-sekcja {
    margin-top: clamp(3rem, 2rem + 3vw, 5rem);
}

/* Bloki kolumny bocznej bez tła karty: kreska u góry (granat — terminy, zieleń księgi — wskaźniki, cienka — zasady
   redakcyjne, od recenzji stojące przy „Kto prowadzi kancelarię”). Kreska jest ozdobą; każdy blok ma własny nagłówek
   słowny. */
.ocp-publiczny .ocp-blok {
    padding: 1.25rem 0 0;
    background: transparent;
    border: 0;
    border-top: 2px solid var(--mud-palette-primary);
}

.ocp-publiczny .ocp-blok--zielony {
    border-top-color: var(--mud-palette-secondary);
}

.ocp-publiczny .ocp-blok--obrys {
    border-top: 1px solid var(--mud-palette-text-primary);
}

/* „Kto prowadzi kancelarię”: tekst pod kreską tytułu sekcji, bez drugiej kreski i bez ramki, w wierszu ok. 70–75 znaków
   (recenzja, uwaga 4 — przy 52 rem było ok. 125 znaków pismem 14 px). Od 960 px obok tekstu stoją „Zasady redakcyjne”
   (recenzja, uwaga 1) z cienką kreską u góry. */
.ocp-publiczny .ocp-kto-prowadzi-uklad {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
}

@media (min-width: 960px) {
    .ocp-publiczny .ocp-kto-prowadzi-uklad {
        grid-template-columns: minmax(0, 40rem) 22rem;
        justify-content: space-between;
        column-gap: 4rem;
        align-items: start;
    }
}

.ocp-publiczny .ocp-kto-prowadzi-tekst {
    max-width: 40rem;
    padding-top: 0;
    border-top: 0;
}

/* Skala pisma strony głównej na trzech stopniach (recenzja, uwaga 4): wprowadzenia ok. 1,25 rem, tekst ciągły
   1,0625 rem, przypisy 0,875 rem. Do poprawki kroki „Jak zaczynamy” (od 9 października 2026 r. „Rozpoczęcie obsługi
   księgowej”) i tekst o kancelarii dziedziczyły 14 px
   z MudBlazor, czyli najważniejsze dla klienta zdania stały najmniejszym pismem na stronie. Etykieta „Krok n”
   zostaje kapitalikami w swojej wielkości. */
.ocp-publiczny .ocp-glowna .ocp-kroki p:not(.ocp-krok-numer),
.ocp-publiczny .ocp-glowna .ocp-kroki-dopisek,
.ocp-publiczny .ocp-kto-prowadzi-tekst,
.ocp-publiczny .ocp-zasady-redakcyjne p {
    font-size: 1.0625rem;
    line-height: 1.6;
}

.ocp-publiczny .ocp-wskaznik-wartosc {
    font-size: 1.5rem;
    font-weight: 600;
}

.ocp-publiczny .ocp-termin-data {
    font-weight: 600;
}

/* Kroki „Rozpoczęcie obsługi księgowej” na stronie głównej: kolumny rozdzielone kreską zamiast białych kart (strona „Przenosiny”
   ma własne kroki i tej reguły nie dostaje). */
.ocp-publiczny .ocp-glowna .ocp-kroki {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.ocp-publiczny .ocp-glowna .ocp-kroki li {
    padding: 1.5rem 0;
    background: transparent;
    border-top: 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

@media (min-width: 760px) {
    .ocp-publiczny .ocp-glowna .ocp-kroki {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ocp-publiczny .ocp-glowna .ocp-kroki li {
        padding: 0.25rem 2rem 0.5rem;
        border-bottom: 0;
        border-left: 1px solid var(--mud-palette-lines-default);
    }

    .ocp-publiczny .ocp-glowna .ocp-kroki li:first-child {
        padding-left: 0;
        border-left: 0;
    }

    .ocp-publiczny .ocp-glowna .ocp-kroki li:last-child {
        padding-right: 0;
    }
}

.ocp-publiczny .ocp-glowna .ocp-krok-numer {
    margin-bottom: 0.5rem;
    color: var(--mud-palette-secondary);
}

.ocp-publiczny .ocp-glowna .ocp-kroki h3 {
    margin-bottom: 0.6rem;
    font-size: 1.5rem;
    font-weight: 600;
}

.ocp-publiczny .ocp-glowna .ocp-kroki-dopisek {
    margin-top: 1.75rem;
}

/* ─── Pozostałe strony publiczne: bloki w tym samym języku kresek (recenzja, uwaga 5) ───────────────────────────────
   Strona główna mówi cienkimi kreskami, bez teł i cieni; do tej poprawki wpis, Oferta i Kontakt miały nadal białe karty
   z cieniem albo ramką i blok reklamy z grubą lewą belką, więc serwis wyglądał jak złożony z dwóch szat. Reguły stoją
   na WŁASNYCH klasach bloków, nigdy na samym .mud-paper: SpojnoscSzatyE2ETests porównuje cień i obramowanie pierwszej
   karty .mud-paper strony Wiedza („Do pobrania bezpłatnie”) z kartą panelu, więc tamta ramka zostaje wzorcem obu części
   portalu. Klasy pomocnicze MudBlazor (pa-4, pa-5) mają !important, stąd !important przy zerowaniu wcięć z boku —
   tekst bloku zaczyna się wtedy na tej samej linii co tekst strony. */
.ocp-publiczny .ocp-wpis-spis,
.ocp-publiczny .ocp-wpis-powiazane,
.ocp-publiczny .ocp-wskrocie {
    padding: 1rem 0 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    border-top: 2px solid var(--mud-palette-primary);
}

.ocp-publiczny .ocp-wpis-powiazane {
    border-top: 1px solid var(--mud-palette-text-primary);
}

/* Kolumna boczna wpisu przewija się we własnym obszarze (overflow-y: auto), który obcina wszystko poza swoją krawędzią.
   Wcięcie 6 px z boku zostawia miejsce na obrys fokusu (3 px, odsunięty o 2 px) przy nagłówku karty „W skrócie”
   i odnośnikach spisu. */
.ocp-publiczny .ocp-wpis-bok > .ocp-wskrocie,
.ocp-publiczny .ocp-wpis-bok > .ocp-wpis-spis {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
}

/* Blok reklamy pod wpisem i na liście Wiedzy oraz karta „Energia Optima” w tym samym miejscu: oznaczenie reklamy
   (nagłówek bloku i wiersz zleceniodawcy nad tytułem) zostaje bez zmian, zamiast lewej belki — kreska u góry. */
.ocp-publiczny .ocp-pas-oferty > .mud-paper,
.ocp-publiczny .ocp-karta-eo .mud-paper,
.ocp-publiczny .ocp-karta-uslugi,
.ocp-publiczny .ocp-cennik-zapis,
.ocp-publiczny .ocp-cennik-przyklad {
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: transparent;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    border-top: 2px solid var(--mud-palette-primary);
}

.ocp-publiczny .ocp-cennik-przyklad {
    border-top: 1px solid var(--mud-palette-text-primary);
}

/* Formularz kontaktowy: bez cienia i z kreską u góry, ale na białym arkuszu — kreska pól formularza ma 3,99∶1 wobec
   bieli, a na papierze strony byłaby słabsza (WCAG 2.1, kryterium 1.4.11). */
.ocp-publiczny .ocp-formularz-kontaktu {
    box-shadow: none;
    border: 0;
    border-radius: 0;
    border-top: 2px solid var(--mud-palette-primary);
}

/* ─── Stopka: granatowa jak dotąd, szersze odstępy ──────────────────────────────────────────────────────────────── */
.ocp-publiczny .ocp-pub-stopka {
    padding: clamp(2.75rem, 2rem + 2vw, 4rem) 0 2rem;
}

.ocp-publiczny .ocp-pub-stopka-kolumny {
    gap: 2rem 3rem;
}

.ocp-publiczny .ocp-pub-stopka .ocp-pub-stopka-identyfikacja {
    margin-top: 2.25rem;
    padding-top: 1.25rem;
}

/* ==== PANEL: POCZĄTEK — skala typograficzna, progi szerokości, menu, tabele i odstępy panelu biura i klienta ====
   Zlecenie U1 z 28 września 2026 r. Wszystko w tym bloku dotyczy WYŁĄCZNIE stron układu MainLayout (klasa
   ocp-panel na MudLayout); strony publiczne (PublicLayout, MotywPubliczny) mają własne reguły wyżej i się nie zmieniają.

   Pomiar produkcji z 28 września 2026 r.: w panelu 17–46% tekstu miało 12 px, pola formularzy miejscami 14 px
   (Safari na iPhonie powiększa wtedy stronę przy wpisywaniu), tabele wystawały poza ekran, a arkusz miał 22 różne
   rozmiary czcionki i 7 różnych progów szerokości. Od tej zmiany:

   SKALA (rozstrzygnięcie właściciela R1): treść i formularze 16 px, tabele i listy 15 px, najmniejszy tekst 14 px.
   W tym bloku rozmiar czcionki bierze się WYŁĄCZNIE ze zmiennych --ocp-* poniżej; pilnuje tego próba
   SkalaTypograficznaPaneluTests (projekt UnitTests), także mutacją. Ta sama skala stoi w motywie Theming/AppTheme.cs.

   PROGI (jedyne w panelu, takie jak w MudBlazor): xs < 600 px · sm 600–959 px · md 960–1279 px ·
   lg 1280–1919 px · xl ≥ 1920 px. Zapis w zapytaniach o media: max-width 599.98px, min-width 960px,
   min-width 1280px (od 29 września 2026 r. — menu rozwinięte bez wyboru), max-width 1919.98px — bez innych wartości. */

body:has(.ocp-panel),
.ocp-panel {
    --ocp-tekst-maly: 0.875rem;    /* 14 px — przypisy, podpowiedzi pól, plakietki, liczniki */
    --ocp-tekst-tabela: 0.9375rem; /* 15 px — komórki tabel i list (R1) */
    --ocp-tekst: 1rem;             /* 16 px — treść i pola formularzy */
    --ocp-tekst-duzy: 1.125rem;    /* 18 px — wyróżniona treść */
    --ocp-naglowek-3: 1.375rem;    /* 22 px */
    --ocp-naglowek-2: 1.625rem;    /* 26 px */
    --ocp-naglowek-1: 2.125rem;    /* 34 px */
    --ocp-odstep-1: 0.5rem;
    --ocp-odstep-2: 1rem;
    --ocp-odstep-3: 1.5rem;
    --ocp-odstep-4: 2rem;
}

.ocp-panel {
    font-family: var(--mud-typography-default-family);
    line-height: 1.5;
}

/* Elementy MudBlazor, które mają rozmiar wpisany w arkusz biblioteki (12–13 px), a nie ze zmiennych motywu. */
.ocp-panel .mud-input-helper-text,
.ocp-panel .mud-table-cell-footer,
.ocp-panel .mud-chip,
.ocp-panel .mud-chip.mud-chip-size-small,
.ocp-panel .mud-badge,
.ocp-panel .mud-button-text-size-small,
.ocp-panel .mud-button-outlined-size-small,
.ocp-panel .mud-button-filled-size-small,
.ocp-panel .mud-button-group-root .mud-button-root,
.ocp-panel .mud-switch-label-small,
.ocp-panel .mud-chat-header time,
body:has(.ocp-panel) .mud-tooltip {
    font-size: var(--ocp-tekst-maly);
}

/* Wiersz oznaczenia reklamy w karcie „Oferta kancelarii” na pulpicie klienta (PORTAL-RAPORT-3) — najmniejszy tekst
   panelu; na stronach publicznych zostaje 13 px z reguły poza blokiem. */
.ocp-panel .ocp-oznaczenie-reklamy {
    font-size: var(--ocp-tekst-maly);
}

/* Kod w podpowiedziach (np. zapis Markdown w edytorze wpisu): przeglądarka zmniejsza krój monospace do 13/16
   rozmiaru rodzica, więc przy przypisie 14 px wychodziło 12 px. */
.ocp-panel code,
.ocp-panel kbd,
.ocp-panel samp {
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: var(--ocp-tekst-maly);
}

/* Tabele i listy: 15 px (R1). */
.ocp-panel .mud-table-cell,
.ocp-panel .mud-simple-table table * tr > td,
.ocp-panel .mud-simple-table table * tr th,
.ocp-panel .mud-table-pagination {
    font-size: var(--ocp-tekst-tabela);
}

/* Pola formularzy zawsze 16 px — także w komórce tabeli, gdzie MudBlazor zmniejsza je do 14 px. */
.ocp-panel input:not([type=checkbox]):not([type=radio]):not([type=range]),
.ocp-panel textarea,
.ocp-panel select,
.ocp-panel .mud-input,
.ocp-panel .mud-table-cell > .mud-input-control > div.mud-input.mud-input-text,
.ocp-panel .mud-table-cell > .mud-select > .mud-input-control > div.mud-input.mud-input-text,
.ocp-panel .mud-table-pagination-select .mud-input .mud-input-root {
    font-size: var(--ocp-tekst);
}

/* Licznik przy pozycji menu (24 września 2026 r.). Liczba jest tekstem — barwa jej tylko towarzyszy (zasada K7);
   barwy wyłącznie ze zmiennych motywu. Od zlecenia U1 14 px zamiast 12 px. */
.ocp-licznik-menu {
    display: inline-block;
    min-width: 1.5rem;
    margin-left: 0.5rem;
    padding: 0 0.4rem;
    border-radius: 0.75rem;
    font-size: var(--ocp-tekst-maly);
    font-weight: 700;
    line-height: 1.5rem;
    text-align: center;
    color: var(--mud-palette-primary-text);
    background: var(--mud-palette-primary);
}

/* ── MENU BOCZNE ZWINIĘTE DO IKON (od md) ──
   MudBlazor chowa podpis zwiniętej pozycji przez display:none, co odbiera odnośnikowi nazwę dostępną dla czytnika
   ekranu. Tu podpis jest ukryty wyłącznie wzrokowo. Wejście klawiaturą (fokus wewnątrz menu) rozwija menu
   z podpisami tak samo jak najechanie myszą. */
.ocp-panel .mud-drawer--closed.mud-drawer-mini > .mud-drawer-content > .mud-navmenu .mud-nav-link .mud-icon-root:first-child + .mud-nav-link-text {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.ocp-panel .mud-drawer-mini.mud-drawer--closed:focus-within {
    width: var(--mud-drawer-width-left);
}

.ocp-panel .mud-drawer--closed.mud-drawer-mini:focus-within > .mud-drawer-content > .mud-navmenu .mud-nav-link .mud-icon-root:first-child + .mud-nav-link-text {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
}

.ocp-panel .mud-drawer--closed.mud-drawer-mini .ocp-licznik-menu {
    display: none;
}

/* Cele dotyku (WCAG 2.2, kryterium 2.5.8): pozycje menu i klikalne plakietki co najmniej 24 px wysokości. */
.ocp-panel .mud-nav-link {
    min-height: 2.5rem;
}

.ocp-panel .mud-chip {
    min-height: 1.5rem;
}

.ocp-panel .mud-icon-button {
    min-width: 1.5rem;
    min-height: 1.5rem;
}

/* Samodzielny odnośnik w komórce tabeli (tytuł wpisu, „Otwórz” na liście Tablicy) to akcja, nie odnośnik w toku
   zdania — też co najmniej 24 px wysokości (poprawka po recenzji U1: miał 20 px). */
.ocp-panel .mud-table-cell > a.mud-link {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
}

/* ── TABELE ──
   Tabela szersza od ramki przewija się W SWOJEJ ramce, nie całą stroną; cień przy krawędzi mówi, że jest dalej
   (cienie znikają, gdy tabela jest przewinięta do końca — technika tła przyczepionego do treści). Barwa cienia jest
   neutralna: kierunek niesie kształt, nie kolor (zasada K7). */
.ocp-panel .mud-table-container,
.ocp-panel .mud-simple-table .mud-table-container {
    overflow-x: auto;
    background:
        linear-gradient(to right, var(--mud-palette-surface) 30%, transparent) left center / 2.5rem 100% no-repeat local,
        linear-gradient(to left, var(--mud-palette-surface) 30%, transparent) right center / 2.5rem 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.22), transparent) left center / 0.875rem 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.22), transparent) right center / 0.875rem 100% no-repeat scroll;
}

.ocp-panel .mud-table-cell {
    overflow-wrap: break-word;
}

/* Tabela „klucz — wartość”: kolumna etykiet ma stałą szerokość od sm; na telefonie etykieta stoi nad wartością. */
@media (min-width: 600px) {
    .ocp-panel .ocp-kolumna-etykiety {
        width: 16rem;
    }
}

/* Kolumny drugorzędne ukryte na md i lg (960–1919 px), gdzie tabela o wielu kolumnach nie mieści się obok menu.
   Na xl (od 1920 px) są widoczne, a na telefonie tabela przechodzi w karty i pokazuje wszystkie pola. Lista
   ukrytych kolumn: raport zlecenia U1. */
@media (min-width: 960px) and (max-width: 1919.98px) {
    .ocp-panel .ocp-kol-poboczna {
        display: none;
    }
}

@media (max-width: 599.98px) {
    /* Karty tabel na telefonie: długie numery (KSeF, NIP, adres poczty) łamią się w dowolnym miejscu, zamiast
       rozpychać kartę poza ekran. */
    .ocp-panel .mud-xs-table .mud-table-cell,
    .ocp-panel .mud-sm-table .mud-table-cell {
        overflow-wrap: anywhere;
        min-width: 0;
    }

    /* Tabela prosta (MudSimpleTable) z klasą ocp-tabela-karty: na telefonie każdy wiersz jest kartą, a każda
       komórka ma przed sobą nazwę kolumny z atrybutu data-label. */
    .ocp-panel .ocp-tabela-karty table,
    .ocp-panel .ocp-tabela-karty tbody,
    .ocp-panel .ocp-tabela-karty tr,
    .ocp-panel .ocp-tabela-karty td {
        display: block;
        width: 100%;
    }

    .ocp-panel .ocp-tabela-karty thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .ocp-panel .ocp-tabela-karty tr {
        padding: var(--ocp-odstep-1) 0;
        border-bottom: 1px solid var(--mud-palette-lines-default);
    }

    .ocp-panel .ocp-tabela-karty td {
        border-bottom: none;
        overflow-wrap: anywhere;
    }

    .ocp-panel .ocp-tabela-karty td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-weight: 600;
        color: var(--mud-palette-text-secondary);
    }
}

/* ── EDYTOR WPISU TABLICY ── kolumna ok. 820 px (75–90 znaków w wierszu przy 16 px), wyśrodkowana. */
.ocp-panel .ocp-edytor-wpisu {
    max-width: 51.25rem;
    margin-inline: auto;
}

.ocp-panel .ocp-pole-tresci textarea {
    line-height: 1.6;
}

/* ── ODSTĘPY OKIENEK ── karty (MudCard) mają jednolite wcięcie ze zmiennych odstępu. */
.ocp-panel .mud-card-header,
.ocp-panel .mud-card-content {
    padding: var(--ocp-odstep-2);
}

.ocp-panel .mud-card-actions {
    padding: var(--ocp-odstep-1) var(--ocp-odstep-2);
}

/* ══ SZATA MARKI W PANELU (zlecenie U1b, 28 września 2026 r.) ═══════════════════════════════════════════════════════
   Zgłoszenie właściciela: panel i strona publiczna wyglądały „jakby portal powstał z dwóch części”, a strony panelu
   „jakby z innej wersji”. Barwy, kroje i zaokrąglenia przychodzą z motywu (Theming/AppTheme.cs), który bierze je z tego
   samego źródła co motyw strony publicznej (Theming/BarwyMarki.cs); tu stoją wyłącznie reguły, których motyw MudBlazor
   nie wyraża: pasek górny z nazwą marki, nagłówek strony, odnośniki w tekście, pozycja bieżąca menu, nagłówek tabeli,
   szerokość treści, stopka, ramki komunikatów i pola formularzy stron konta. Barwy WYŁĄCZNIE ze zmiennych motywu
   (kontrola K5); wprost tylko pomarańcz palety Okabe-Ito dla obrysu fokusu na granacie (5,37∶1). Rozmiary czcionek
   wyłącznie ze zmiennych skali U1 — tytuł strony ma rozmiar z reguły .ocp-strona-tytul, tej samej co na stronie
   publicznej, więc tytuł panelu i tytuł strony „Wiedza” są identyczne (SpojnoscSzatyE2ETests). */

/* ── PASEK GÓRNY: nazwa marki jak w winiecie strony publicznej ── */
/* JASNY PASEK W MOTYWIE JASNYM (20 października 2026 r., polecenie właściciela: „niebieski pasek górny po zalogowaniu
   też zrób jak w portalu – lżejszy”). Do tego dnia pasek panelu był granatowy w obu motywach. W motywie jasnym ma teraz
   tło nagłówka strony publicznej (powierzchnia motywu — biel, ta sama zmienna co pasek z datą i winieta w PublicLayout)
   i tę samą kreskę pod spodem (1 px w atramencie, jak pod paskiem działów strony publicznej); napis, ikony i przyciski
   paska w granacie marki, nazwa marki jak w winiecie strony publicznej: „Twoje Księgi” w granacie, „Pro” w zieleni
   księgi, podpis w łupku. Motyw ciemny (wybór użytkownika) zostaje bez zmian: granat marki z białym napisem, „Pro”
   w zieleni jasnej, kreska w barwie drugiej motywu, przyciemnienie dołu i krawędź świetlna (reguły na początku arkusza).
   ZMIENNE ZAMIAST BARW W REGUŁACH. Każda reguła paska bierze barwę ze zmiennej --ocp-pasek-*; zmienne mają wartość jasną
   na elemencie układu panelu i ciemną pod tymi samymi warunkami co reszta motywu ciemnego panelu: klasa ocp-motyw-ciemny
   (wybór odczytany w obwodzie) albo stan „przed odczytem” z atrybutem data-ocp-motyw="ciemny", który skrypt
   wwwroot/js/uklad-panelu.js stawia przed narysowaniem strony. Dzięki temu pierwsza klatka z serwera i strony konta bez
   obwodu mają od razu właściwy pasek — bez mignięcia granatu w motywie jasnym ani bieli w ciemnym. Barwy paska aplikacji
   w motywie (AppbarBackground, AppbarText w Theming/AppTheme.cs) się NIE zmieniły: z tej pary biorą barwy stopka panelu,
   która zostaje granatowa, i pasek w motywie ciemnym — ten sam wybór co na stronie publicznej 9 października 2026 r.
   Kontrasty na bieli paska (WCAG 2.1, liczone z barw Theming/BarwyMarki.cs w próbie SzataMarkiTests, a w przeglądarce
   w JasnyPasekPaneluE2ETests): napis i ikony w granacie 12,10∶1 (po najechaniu i przy fokusie na tle przycisku 10,59∶1),
   „Pro” w zieleni księgi 4,99∶1, podpis w łupku 5,31∶1, obrys fokusu w atramencie 14,99∶1, kreska pod paskiem 14,99∶1.
   ZNAK MARKI WEDŁUG TŁA PASKA (20 października 2026 r., decyzja właściciela po obejrzeniu zrzutów: na białych paskach
   „ciemniejsze” logo). Odnośnik marki niesie dwa obrazy: znak ciemny img/znak-winieta.png (granat i zieleń księgi, jak
   w winiecie strony publicznej) i znak jasny img/znak-160.png (do granatu). Widoczny jest jeden — zmienne
   --ocp-pasek-znak-ciemny i --ocp-pasek-znak-jasny (wartość display) przełączają się pod tymi samymi warunkami co barwa
   paska, więc znak nie miga ani w pierwszej klatce, ani po przełączeniu motywu. Znak jasny miał na bieli w głównych
   barwach 1,00–2,18∶1 (biała lewa strona księgi znikała). Oba obrazy są ozdobne (alt=""), nazwę marki niesie aria-label
   odnośnika, a ukryty obraz (display: none) nie trafia do drzewa dostępności. */
.ocp-panel {
    --ocp-pasek-tlo: var(--mud-palette-surface);
    --ocp-pasek-napis: var(--mud-palette-primary);
    --ocp-pasek-pro: var(--mud-palette-secondary);
    --ocp-pasek-podpis: var(--mud-palette-text-secondary);
    --ocp-pasek-kreska: inset 0 -1px 0 0 var(--mud-palette-text-primary);
    --ocp-pasek-znak-ciemny: block;
    --ocp-pasek-znak-jasny: none;
}

/* Motyw ciemny — pasek jak do 20 października 2026 r. Kreska w barwie drugiej motywu (w ciemnym: zieleń księgi
   rozjaśniona) — akcent WŁASNY panelu na granacie (sprostowanie przy poprawkach U1c: granatowa kreska pod granatowym
   paskiem byłaby niewidoczna; zieleń księgi to druga barwa znaku marki). Kreska jest ozdobą i niczego nie oznacza.
   Podpis: przeglądarka bez color-mix() uznaje zmienną za nieważną i podpis dziedziczy biel napisu paska (12,10∶1). */
.ocp-panel.ocp-motyw-ciemny,
html[data-ocp-motyw="ciemny"] .ocp-panel.ocp-motyw-nieustalony {
    --ocp-pasek-tlo: var(--mud-palette-appbar-background);
    --ocp-pasek-napis: var(--mud-palette-appbar-text);
    --ocp-pasek-pro: var(--mud-palette-tertiary);
    --ocp-pasek-podpis: color-mix(in srgb, var(--mud-palette-appbar-text) 85%, var(--mud-palette-appbar-background));
    --ocp-pasek-kreska: inset 0 -3px 0 0 var(--mud-palette-secondary);
    --ocp-pasek-znak-ciemny: none;
    --ocp-pasek-znak-jasny: block;
}

/* Kreska cieniem wewnętrznym, nie obramowaniem, żeby wysokość paska (i miejsce menu pod nim) się nie zmieniły. Przyciski
   i odnośniki paska mają barwę „dziedziczoną” (Color.Inherit, color: inherit), więc biorą napis paska z tej reguły. */
.ocp-panel .mud-appbar {
    background-color: var(--ocp-pasek-tlo);
    color: var(--ocp-pasek-napis);
    box-shadow: var(--ocp-pasek-kreska);
}

.ocp-panel .ocp-marka-panelu {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    white-space: nowrap;
    margin-left: var(--ocp-odstep-1);
    color: inherit;
    text-decoration: none;
}

.ocp-panel .ocp-marka-panelu-znak {
    display: block;
    flex: 0 0 auto;
}

/* Znak ciemny na białym pasku, znak jasny na granatowym — widoczny jeden (zmienne wyżej). Znak ciemny ma szerokość znaku
   jasnego (40 px, na telefonie 32 px), a wysokość z proporcji pliku 81∶76: nazwa marki obok stoi w obu motywach w tym samym
   miejscu, a obraz nie jest zniekształcony. */
.ocp-panel .ocp-marka-panelu-znak-ciemny {
    display: var(--ocp-pasek-znak-ciemny);
    width: 40px;
    height: auto;
}

.ocp-panel .ocp-marka-panelu-znak-jasny {
    display: var(--ocp-pasek-znak-jasny);
}

.ocp-panel .ocp-marka-panelu-tekst {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.1;
}

.ocp-panel .ocp-marka-panelu-nazwa {
    font-family: var(--mud-typography-h1-family);
    font-size: var(--ocp-naglowek-3);
    font-weight: 700;
    color: var(--ocp-pasek-napis);
}

/* „Pro” rozstrzelone wersalikami — jak „Pro” w winiecie strony publicznej: w motywie jasnym w zieleni księgi (4,99∶1 na
   bieli), w ciemnym w zieleni jasnej (7,04∶1 na granacie). */
.ocp-panel .ocp-marka-panelu-pro {
    margin-left: 0.2rem;
    white-space: nowrap;
    font-family: var(--mud-typography-default-family);
    font-size: var(--ocp-tekst-maly);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ocp-pasek-pro);
}

/* Podpis od 960 px: w motywie jasnym w łupku jak podpis winiety strony publicznej (5,31∶1 na bieli), w ciemnym mieszanka
   bieli z granatem (9,22∶1; przeglądarka bez color-mix() bierze biel napisu paska, 12,10∶1). */
.ocp-panel .ocp-marka-panelu-podpis {
    display: none;
    margin-top: 0.3rem;
    font-size: var(--ocp-tekst-maly);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ocp-pasek-podpis);
}

@media (min-width: 960px) {
    .ocp-panel .ocp-marka-panelu-podpis {
        display: block;
    }
}

@media (max-width: 599.98px) {
    .ocp-panel .ocp-marka-panelu {
        gap: 0.5rem;
        margin-left: 0;
    }

    .ocp-panel .ocp-marka-panelu-znak {
        width: 32px;
        height: 32px;
    }

    /* Znak ciemny: wysokość z proporcji pliku 81∶76, nie kwadrat (reguła wyżej obejmuje oba znaki). */
    .ocp-panel .ocp-marka-panelu-znak-ciemny {
        height: auto;
    }

    .ocp-panel .ocp-marka-panelu-nazwa {
        font-size: var(--ocp-tekst-duzy);
    }

    /* Na telefonie pasek się nie zawija. Gdy stoją w nim wejścia „Energia Optima” i „Budownictwo” (26 września 2026 r.),
       nazwa obok znaku chowa się, a znak zostaje — nazwę marki dla czytnika ekranu niesie aria-label odnośnika. Bez
       wejść pasek wygląda jak dotąd. (29 września 2026 r., przeniesienie wejść na pasek U1b.) */
    .ocp-panel .mud-appbar:has(.ocp-pasek-wejscia a) .ocp-marka-panelu-tekst {
        display: none;
    }
}

/* Obrys fokusu na pasku: w motywie jasnym obrys ogólny w atramencie (14,99∶1 na bieli), w ciemnym pomarańcz palety na
   granacie (5,37∶1) — reguła „.ocp-motyw-ciemny .mud-appbar :focus-visible” poza blokiem panelu (tu stała jej kopia,
   usunięta przy poprawkach U1c). */

/* ── MENU BOCZNE: sekcja „Strona biura” i pozycja bieżąca ── */
.ocp-panel .ocp-menu-sekcja-podpis {
    padding: var(--ocp-odstep-1) var(--ocp-odstep-2) 0.25rem;
    font-size: var(--ocp-tekst-maly);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
}

/* W trybie ikon podpis sekcji jest ukryty wzrokowo (nie display:none — czytnik ekranu dalej słyszy nazwę grupy), jak
   podpisy pozycji; po rozwinięciu menu najechaniem albo klawiaturą wraca. Dawny nagłówek „Nawigacja” tej reguły nie
   miał i w szufladzie 56 px był ucięty (zgłoszenie właściciela z 28 września 2026 r.). */
.ocp-panel .mud-drawer--closed.mud-drawer-mini:not(:focus-within) .ocp-menu-sekcja-podpis {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
}

/* Pozycja bieżąca: pogrubienie i kreska 3 px w zieleni księgi przy lewej krawędzi — sygnał kształtem i grubością, nie
   tylko barwą (zasada K7), odpowiednik kreski pod bieżącym działem strony publicznej. */
.ocp-panel .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) {
    font-weight: 600;
    box-shadow: inset 3px 0 0 0 var(--mud-palette-secondary);
}

/* ── TREŚĆ: jedna szerokość i jeden nagłówek strony ── */
.ocp-panel .ocp-panel-tresc {
    max-width: 1280px;
    margin-inline: auto;
}

.ocp-panel .ocp-naglowek-strony {
    margin-bottom: var(--ocp-odstep-3);
}

.ocp-panel .ocp-naglowek-powrot {
    margin-left: -0.5rem;
    margin-bottom: var(--ocp-odstep-1);
}

.ocp-panel .ocp-naglowek-wiersz {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ocp-odstep-1) var(--ocp-odstep-2);
}

.ocp-panel .ocp-naglowek-tytul {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.ocp-panel .ocp-naglowek-akcje {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ocp-odstep-1);
}

.ocp-panel .ocp-naglowek-opis {
    margin-top: var(--ocp-odstep-1);
    max-width: 52rem;
    font-size: var(--ocp-tekst);
}

/* Nagłówki sekcji w treści w granacie marki, jak na stronie publicznej — ta sama reguła o zerowej swoistości co
   „:where(.ocp-publiczny) :where(h1…h6)”, więc barwa ustawiona jawnie na składniku (klasa mud-…-text z !important)
   wygrywa. POPRAWKA U1c (28 września 2026 r.): reguła z U1b szukała klasy mud-inherit-text, której MudBlazor 8.13 nie
   nadaje nigdy (MudText dodaje mud-{barwa}-text wyłącznie dla barwy innej niż Default i Inherit, a domyślna to Inherit),
   a drugi jej selektor wykluczał nagłówki MudText — około 66 nagłówków sekcji panelu zostawało w barwie tekstu, choć na
   stronie publicznej są granatowe. Pilnuje SpojnoscSzatyE2ETests (barwa nagłówka sekcji równa barwie tytułu). */
:where(.ocp-panel main) :where(h1, h2, h3, h4, h5, h6) {
    color: var(--mud-palette-primary);
}

/* ODNOŚNIKI: barwa główna marki zamiast błękitu dawnego motywu; w tekście podkreślone. Granat ma wobec atramentu
   tekstu tylko 1,24∶1, więc odnośnik w zdaniu bez podkreślenia nie różniłby się od tekstu (WCAG 2.1, kryterium 1.4.1) —
   ta sama reguła co na stronie publicznej. Swoistość zwykłego „a” (:where), żeby przyciski i menu zostały przy swoich. */
:where(.ocp-panel) a {
    color: var(--mud-palette-primary);
}

.ocp-panel main :is(p, li, dd, .ocp-naglowek-opis, .mud-typography-body1, .mud-typography-body2, .mud-alert-message) a:not(.mud-button-root),
.ocp-panel main .mud-link:not(.mud-link-underline-none) {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* ── TABELE: nagłówek na tle papieru, grubość 600 (13,76∶1), jak nagłówki tabel cennika strony publicznej ── */
.ocp-panel .mud-table-head .mud-table-cell {
    background-color: var(--mud-palette-background);
    font-weight: 600;
}

/* Kolumna z długimi ciągami bez spacji (szczegóły audytu: suma kontrolna, identyfikator, adres). Wartość „anywhere”
   wlicza możliwe miejsca łamania do szerokości najmniejszej kolumny, więc tabela mieści się w ramce; „break-word” z reguły
   ogólnej tego nie robi — na produkcji tabela audytu miała 1764 px w ramce 1044 px przy 1366 px (U1b). */
.ocp-panel .mud-table-cell.ocp-kol-dluga {
    overflow-wrap: anywhere;
    min-width: 14rem;
}

/* Adres poczty w komórce tabeli panelu (kolumna „Konto” audytu, panel „Leady”): reguła ogólna komórek („break-word”)
   ma wyższą szczegółowość niż .ocp-leady-adres, więc adres bez miejsc łamania rozpychał tabelę audytu ponad ramkę
   (4 października 2026 r.: adres próby dwóch kart, 1080 px w ramce 1052 px przy 1366 px). */
.ocp-panel .mud-table-cell.ocp-leady-adres {
    overflow-wrap: anywhere;
}

/* Panel „Zapytania” (13 października 2026 r.): treść wiadomości w osobnym wierszu pod zapytaniem, zwinięta do podpisu
   „Treść wiadomości”. Do tego dnia panel treści nie pokazywał wcale. Podpis ma co najmniej 24 px wysokości (cel dotyku,
   WCAG 2.2, kryterium 2.5.8), a tekst zachowuje wiersze piszącego i łamie się w dowolnym miejscu, żeby długi ciąg bez
   odstępów nie rozpychał tabeli ani karty na telefonie. W układzie kart (do 960 px) komórka nie ma nazwy kolumny przed
   treścią — podpis jest już w samym polu. */
.ocp-panel .mud-table-cell.ocp-leady-tresc {
    overflow-wrap: anywhere;
}

.ocp-panel .mud-table-cell.ocp-leady-tresc::before {
    content: none;
}

.ocp-panel .ocp-leady-tresc > details {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

.ocp-panel .ocp-leady-tresc summary {
    min-height: 1.5rem;
    line-height: 1.5rem;
    cursor: pointer;
}

.ocp-panel .ocp-leady-tresc-tekst {
    margin-top: 0.5rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Karta zapytania na telefonie (układ kart, do 960 px): komórka „Wiadomości” łamie swoje części na osobne wiersze.
   Wada sprzed 13 października 2026 r., znaleziona przy oględzinach wiersza z treścią wiadomości: przy stanie wiadomości
   wymagającym uwagi (na przykład „Nie wyszła (tryb plikowy)”) dwie plakietki i dwa zdania wyjaśnienia stały w jednym
   wierszu elastycznym — karta wychodziła poza ekran (zrzut przy 375 px), a zdania ściskały się do kolumny szerokości
   jednej litery i rozciągały kartę na kilka ekranów. Wiersz z treścią wiadomości dziedziczył tę szerokość, więc treść
   trzeba było przewijać w bok. Zdanie wyjaśnienia zajmuje teraz cały wiersz pod swoją plakietką. */
@media (max-width: 960px) {
    .ocp-panel .mud-table-cell.ocp-leady-wiadomosci {
        flex-wrap: wrap;
        min-width: 0;
    }

    .ocp-panel .mud-table-cell.ocp-leady-wiadomosci > .mud-typography {
        flex: 0 0 100%;
    }
}

/* Data i godzina w jednym wierszu (audyt): bez tego wąska kolumna łamała „2026-09-28 17:38:20” na trzy wiersze. */
.ocp-panel .mud-table-cell.ocp-kol-czas {
    white-space: nowrap;
}

/* Lista faktur zakupu (30 IX 2026): sześć kolumn mieści się w ramce przy 1366 px bez przewijania w bok. Każda kwota
   i data stoi w jednym wierszu; numer faktury, numer KSeF i nazwa sprzedawcy łamią się w dowolnym miejscu („anywhere”
   obniża najmniejszą szerokość kolumny, „break-word” z reguły ogólnej — nie). Znaczki w ostatniej kolumnie mogą złamać
   etykietę, zamiast rozpychać tabelę. */
.ocp-panel .mud-table-cell.ocp-kol-numer,
.ocp-panel .mud-table-cell.ocp-kol-sprzedawca {
    overflow-wrap: anywhere;
    min-width: 0;
}

.ocp-panel .ocp-kol-kwoty [data-kwota],
.ocp-panel .ocp-bez-lamania {
    white-space: nowrap;
}

.ocp-panel .mud-table-cell.ocp-kol-stan .mud-chip,
.ocp-panel .mud-table-cell.ocp-kol-stan .mud-chip .mud-chip-content {
    white-space: normal;
    height: auto;
    max-width: 100%;
}

/* Kolumna widoczna wyłącznie w układzie kart: MudBlazor przechodzi w karty przy szerokości do 960 px włącznie
   (Breakpoint.Sm), więc od 960,02 px komórka jest ukryta. */
@media (min-width: 960.02px) {
    .ocp-panel .ocp-tylko-karta {
        display: none;
    }

    .ocp-panel .mud-table-cell.ocp-kol-kwoty {
        text-align: right;
    }

    /* Numer faktury i numer KSeF czyta się w całości; bez najmniejszej szerokości przeglądarka oddawała miejsce nazwie
       sprzedawcy, a numer KSeF łamał się co siedem znaków. */
    .ocp-panel .mud-table-cell.ocp-kol-numer {
        min-width: 11rem;
    }

    .ocp-panel .mud-table-cell.ocp-kol-zaznacz {
        width: 4.5rem;
    }
}

/* Karta faktury zakupu (do 960 px): etykieta pola zajmuje stałą część szerokości, a treść komórki — jeden pojemnik —
   resztę, wyrównana do prawej i łamana w dowolnym miejscu, żeby karta nie wychodziła za ekran. */
@media (max-width: 960px) {
    .ocp-panel .ocp-tabela-zakupow .mud-table-cell::before {
        flex: 0 0 38%;
    }

    .ocp-panel .ocp-tabela-zakupow .ocp-komorka {
        flex: 1 1 0;
        min-width: 0;
        text-align: right;
        overflow-wrap: anywhere;
    }

    .ocp-panel .ocp-tabela-zakupow .ocp-znaczki {
        align-items: flex-end !important;
    }
}

/* Samodzielny odnośnik „Rozstrzygnij” w pojemniku komórki to akcja — co najmniej 24 px wysokości. */
.ocp-panel .ocp-akcja-komorki {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
}

/* ── RAMKI KOMUNIKATÓW: jedna postać — obrys w barwie rodzaju, ikona w barwie rodzaju, tekst w barwie tekstu na
   powierzchni karty. MudBlazor pisze tekst ramki z obrysem ciemniejszym odcieniem barwy rodzaju; pomarańcz ostrzeżenia
   miałby wtedy na bieli mniej niż 4,5∶1. O rodzaju komunikatu mówią ikona i słowa (zasada K7). ── */
.ocp-panel .mud-alert[class*="mud-alert-outlined-"] {
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-surface);
}

/* ── STOPKA: granat marki w wersji zwartej — te same zmienne co stopka strony publicznej ── */
.ocp-panel .ocp-stopka-panelu {
    margin: var(--ocp-odstep-4) -16px -16px;
    padding: var(--ocp-odstep-3) 16px;
    font-size: var(--ocp-tekst-tabela);
    line-height: 1.6;
    color: var(--mud-palette-appbar-text);
    color: color-mix(in srgb, var(--mud-palette-appbar-text) 85%, var(--mud-palette-appbar-background));
    background: var(--mud-palette-appbar-background);
}

.ocp-panel .ocp-stopka-panelu > * {
    max-width: 1280px;
    margin-inline: auto;
}

.ocp-panel .ocp-stopka-panelu-odnosniki {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
}

.ocp-panel .ocp-stopka-panelu a {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    color: var(--mud-palette-appbar-text);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.ocp-panel .ocp-stopka-panelu .ocp-stopka-panelu-identyfikacja {
    margin-top: var(--ocp-odstep-2);
    margin-bottom: 0;
    padding-top: var(--ocp-odstep-2);
    border-top: 1px solid var(--mud-palette-appbar-text);
    border-top: 1px solid color-mix(in srgb, var(--mud-palette-appbar-text) 25%, var(--mud-palette-appbar-background));
    font-size: var(--ocp-tekst-maly);
    overflow-wrap: anywhere;
}

.ocp-panel .ocp-stopka-panelu :focus-visible {
    outline-color: #E69F00;
}

/* ── UNIESIONA ETYKIETA POLA: 14 px, nie 12 px ──
   MudBlazor zmniejsza etykietę pola po wpisaniu wartości albo przy fokusie przekształceniem scale(0.75): przy treści
   16 px to 12 px na ekranie (pomiar produkcji z 28 września 2026 r., edytor wpisu: ok. 2% tekstu). Skala 0,875 daje
   14 px — najmniejszy tekst panelu (U1). Wycięcie w ramce pola (legend) dostaje ten sam rozmiar, żeby kreska ramki nie
   przecinała napisu. Pilnuje próba WzorzecStronPaneluTests (także mutacją) i warunek (b) próby układu. */
.ocp-panel .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
.ocp-panel .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
    transform: translate(14px, -8px) scale(0.875);
    max-width: calc(114% - 32px);
}

.ocp-panel .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-text,
.ocp-panel .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-text {
    transform: translate(0, 1.5px) scale(0.875);
}

.ocp-panel .mud-input.mud-input-outlined > .mud-input-outlined-border legend {
    font-size: var(--ocp-tekst-maly);
}

/* ── STRONY KONTA I LOGOWANIA (renderowanie statyczne) ──
   Pola zostają zwykłymi polami formularza HTML (InputText), bo pola MudBlazor przy renderowaniu bez obwodu nie wysyłają
   wartości w formularzu. Do tej zmiany strony konta stały na klasach Bootstrapa (form-floating, btn, row, col-*,
   nav-pills), którego portal nie ładuje. */
.ocp-panel .ocp-formularz-konta {
    max-width: 35rem;
}

/* Karta stron konta z dłuższym tekstem (drugi składnik, poświadczenie KSeF): szerokość wygodnego wiersza, jak tekst
   strony publicznej. */
.ocp-panel .ocp-karta-konta {
    max-width: 52rem;
}

/* POLE STRONY KONTA = POLE MUDBLAZOR Z OBRAMOWANIEM (poprawki U1c, 28 września 2026 r.). W U1b etykieta stała nad polem,
   a w reszcie panelu — w ramce pola, więc strony konta wyglądały „jak z innej wersji” (kontrola nawigacji i marki).
   Teraz te same wymiary i zachowanie co MudTextField z obramowaniem: wysokość 56 px, wcięcie 14 px, etykieta w polu
   (16 px, barwa tekstu pomocniczego), a po wejściu w pole albo po wpisaniu wartości — na krawędzi ramki, zmniejszona tym
   samym przekształceniem co w reszcie panelu (0,875 → 14 px; reguła „UNIESIONA ETYKIETA POLA” wyżej). Podpowiedź
   w polu jest przezroczysta — jej rolę pełni etykieta, a przeglądarka potrzebuje jej do rozpoznania pustego pola
   (:placeholder-shown). Znacznik bez zmian: etykieta stoi PO polu, więc łączy ją z polem selektor „~”, a identyfikatory
   pól i powiązanie etykiety (for) zostają. Pilnuje SpojnoscSzatyE2ETests (pole konta = pole edytora wpisu). */
.ocp-panel .ocp-pole-formularza {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: var(--ocp-odstep-2);
    margin-bottom: var(--ocp-odstep-2);
}

.ocp-panel .ocp-pole-formularza > label {
    position: absolute;
    top: 0;
    left: 0;
    max-width: calc(100% - 2.5rem);
    padding: 0 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--ocp-tekst);
    font-weight: 400;
    line-height: 1.15rem;
    color: var(--mud-palette-text-secondary);
    pointer-events: none;
    transform: translate(14px, 20px) scale(1);
    transform-origin: top left;
    transition: transform 200ms cubic-bezier(0, 0, 0.2, 1), color 200ms cubic-bezier(0, 0, 0.2, 1);
}

.ocp-panel .ocp-pole:focus ~ label,
.ocp-panel .ocp-pole:not(:placeholder-shown) ~ label,
.ocp-panel select.ocp-pole ~ label {
    transform: translate(14px, -8px) scale(0.875);
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
}

/* Wartość wstawiona przez menedżera haseł przeglądarki — osobne reguły, bo nieznany przeglądarce selektor unieważnia
   całą listę selektorów. */
.ocp-panel .ocp-pole:autofill ~ label {
    transform: translate(14px, -8px) scale(0.875);
    background: var(--mud-palette-surface);
}

.ocp-panel .ocp-pole:-webkit-autofill ~ label {
    transform: translate(14px, -8px) scale(0.875);
    background: var(--mud-palette-surface);
}

.ocp-panel .ocp-pole:focus ~ label {
    color: var(--mud-palette-primary);
}

.ocp-panel .ocp-pole-formularza > button {
    align-self: flex-start;
    margin-top: var(--ocp-odstep-1);
}

.ocp-panel .ocp-pole {
    box-sizing: border-box;
    width: 100%;
    min-height: 3.5rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    font-family: inherit;
    font-size: var(--ocp-tekst);
    line-height: 1.1876;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
}

.ocp-panel .ocp-pole:hover:not(:disabled):not(:focus) {
    border-color: var(--mud-palette-text-primary);
}

/* Fokus jak w polu MudBlazor: obramowanie 2 px w barwie głównej (granat na bieli 12,10∶1 — WCAG 2.1, kryterium 2.4.7),
   bez dodatkowego obrysu z reguły ogólnej, którego pola MudBlazor nie mają. */
.ocp-panel .ocp-pole:focus,
.ocp-panel .ocp-pole:focus-visible {
    outline: none;
    border-color: var(--mud-palette-primary);
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
}

.ocp-panel .ocp-pole::placeholder {
    color: transparent;
    opacity: 1;
}

.ocp-panel .ocp-pole:disabled {
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background);
}

/* Pole nieaktywne ma tło strony, a etykieta na ramce przykrywa kreskę — górna połowa w barwie karty, dolna w barwie
   pola, żeby etykieta nie odcinała się plamą od wnętrza pola (widoczne na zrzucie strony konta). */
.ocp-panel .ocp-pole:disabled ~ label {
    background: linear-gradient(to bottom, var(--mud-palette-surface) 50%, var(--mud-palette-background) 50%);
}

/* Pole z błędem walidacji (klasa „invalid” nadawana przez formularz Blazora): obramowanie i etykieta w barwie odmowy;
   treść błędu stoi zdaniem pod polem (ocp-blad-pola), barwa jej tylko towarzyszy (zasada K7). */
.ocp-panel .ocp-pole.invalid {
    border-color: var(--mud-palette-error);
}

.ocp-panel .ocp-pole.invalid ~ label {
    color: var(--mud-palette-error);
}

.ocp-panel .ocp-pole-wyboru {
    display: inline-flex;
    align-items: center;
    gap: var(--ocp-odstep-1);
    min-height: 1.5rem;
    font-size: var(--ocp-tekst);
}

.ocp-panel .ocp-pole-wyboru input {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--mud-palette-primary);
}

/* Komunikat walidacji pola: zdanie po polsku; barwa odmowy tylko mu towarzyszy (zasada K7). */
.ocp-panel .ocp-blad-pola {
    margin: 0.25rem 0 0;
    font-size: var(--ocp-tekst-maly);
    color: var(--mud-palette-error);
}

.ocp-panel ul.ocp-blad-pola {
    padding-left: 1.25rem;
}

.ocp-panel .ocp-przyciski-formularza {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ocp-odstep-1);
    margin-top: var(--ocp-odstep-2);
}

/* Menu ustawień konta: od 960 px kolumna po lewej, jak menu boczne panelu; na węższym ekranie pozycje w wierszu nad
   treścią, zawijane. Pozycja bieżąca jak w menu bocznym (reguła „Pozycja bieżąca” wyżej). */
.ocp-panel .ocp-konto {
    display: grid;
    gap: var(--ocp-odstep-3);
}

.ocp-panel .ocp-konto-menu .mud-navmenu {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--ocp-odstep-1);
}

.ocp-panel .ocp-konto-menu {
    min-width: 0;
}

.ocp-panel .ocp-konto-menu .mud-nav-item {
    width: auto;
}

@media (min-width: 960px) {
    .ocp-panel .ocp-konto {
        grid-template-columns: 15rem minmax(0, 1fr);
        align-items: start;
    }

    .ocp-panel .ocp-konto-menu .mud-navmenu {
        display: block;
    }

    .ocp-panel .ocp-konto-menu .mud-nav-item {
        width: 100%;
    }
}

.ocp-panel .ocp-konto-tresc {
    min-width: 0;
}

/* Klucz aplikacji uwierzytelniającej do przepisania ręcznie — większym pismem, jak dotąd (dawna klasa fs-5). */
.ocp-panel kbd.ocp-klucz-aplikacji {
    font-size: var(--ocp-tekst-duzy);
    overflow-wrap: anywhere;
}

/* Kody zapasowe: stała szerokość znaków, żeby się ich nie pomylić przy przepisywaniu. */
.ocp-panel .ocp-kody-zapasowe {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: var(--ocp-odstep-1);
    margin: 0;
    padding: var(--ocp-odstep-2);
    list-style: none;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

/* Ramka rozmowy (strona klienta „Rozmowa z biurem” i skrzynka biura) — jedna klasa zamiast dwóch stylów wpisanych
   w stronę. */
.ocp-panel .ocp-ramka-rozmowy {
    height: 420px;
    overflow-y: auto;
    padding: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

/* ══ MENU I MOTYW PRZED ODCZYTEM WYBORU (poprawki U1c, 28 września 2026 r.) ════════════════════════════════════════════
   Zgłoszenie właściciela: „zakładki są niedopasowane — zdarzają się jakby z innej wersji”. Strony konta renderują się
   bez obwodu interaktywnego, a układ panelu znał szerokość ekranu, zwinięcie menu i motyw WYŁĄCZNIE z obwodu: menu
   konta miało 280 px, kiedy na pulpicie 56 px, motyw ciemny znikał, a przycisk menu nie działał (na telefonie nie było
   jak otworzyć menu). Na pozostałych stronach ten sam brak dawał przeskok przy każdym wczytaniu.

   Klasa ocp-menu-nieustalone (MainLayout) stoi na układzie, dopóki obwód nie zmierzy szerokości — na stronach konta
   zawsze. Szuflada jest wtedy w trybie ikon, a reguły niżej rozwijają ją i chowają TAK SAMO, jak zrobi to obwód:
   poniżej 960 px menu jest schowane i wysuwa się przyciskiem (atrybut data-ocp-menu-wysuniete), od 960 px jest zwinięte
   do ikon, a rozwinięte przy wyborze „rozwinięte” (data-ocp-menu) i — bez wyboru — od 1280 px (do 29 września 2026 r. od 1920 px). Atrybuty elementu html
   stawia skrypt wwwroot/js/uklad-panelu.js z tych samych wpisów w pamięci przeglądarki, które zapisuje obwód. Pilnuje
   tego SpojnoscSzatyE2ETests (strona konta ma to samo menu, motyw i stopkę co pulpit). */

/* Poniżej 960 px: menu schowane poza lewą krawędzią (visibility — jego odnośniki nie łapią tabulacji), treść na całej
   szerokości; po wysunięciu menu nad treścią, z przyciemnionym tłem (cień, nie barwa — kolor niczego tu nie niesie). */
@media (max-width: 959.98px) {
    .ocp-panel.ocp-menu-nieustalone .mud-drawer.mud-drawer-mini.mud-drawer-pos-left {
        left: calc(-1 * var(--mud-drawer-width-left));
        width: var(--mud-drawer-width-left);
        visibility: hidden;
        transition: left 225ms cubic-bezier(0, 0, 0.2, 1), visibility 225ms;
    }

    .ocp-panel.ocp-menu-nieustalone .mud-main-content {
        margin-left: 0;
    }

    html[data-ocp-menu-wysuniete] .ocp-panel.ocp-menu-nieustalone .mud-drawer.mud-drawer-mini.mud-drawer-pos-left {
        left: 0;
        width: var(--mud-drawer-width-left);
        visibility: visible;
        z-index: calc(var(--mud-zindex-appbar) + 2);
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.4);
    }
}

/* Od 960 px: rozwinięcie przy wyborze „rozwinięte”, a bez wyboru od 1280 px — szuflada 280 px, treść odsunięta. */
@media (min-width: 960px) {
    html[data-ocp-menu="rozwiniete"] .ocp-panel.ocp-menu-nieustalone .mud-drawer.mud-drawer-mini.mud-drawer-pos-left {
        width: var(--mud-drawer-width-left);
    }

    html[data-ocp-menu="rozwiniete"] .ocp-panel.ocp-menu-nieustalone .mud-main-content {
        margin-left: var(--mud-drawer-width-left);
    }

    /* Najechanie myszą rozwija menu w trybie ikon nad treścią — na stronach konta nie robi tego obwód. */
    .ocp-panel.ocp-bez-obwodu .mud-drawer.mud-drawer-mini.mud-drawer-pos-left:hover {
        width: var(--mud-drawer-width-left);
    }
}

@media (min-width: 1280px) {
    html:not([data-ocp-menu]) .ocp-panel.ocp-menu-nieustalone .mud-drawer.mud-drawer-mini.mud-drawer-pos-left {
        width: var(--mud-drawer-width-left);
    }

    html:not([data-ocp-menu]) .ocp-panel.ocp-menu-nieustalone .mud-main-content {
        margin-left: var(--mud-drawer-width-left);
    }
}

/* Menu rozwinięte przez arkusz pokazuje podpisy pozycji, podpis sekcji „Strona biura” i liczniki — jak menu otwarte
   w obwodzie. Reguły niżej cofają ukrycie wzrokowe z trybu ikon (reguły „MENU BOCZNE ZWINIĘTE DO IKON” wyżej). */
@media (max-width: 959.98px) {
    html[data-ocp-menu-wysuniete] .ocp-panel.ocp-menu-nieustalone .mud-drawer--closed.mud-drawer-mini > .mud-drawer-content > .mud-navmenu .mud-nav-link .mud-icon-root:first-child + .mud-nav-link-text {
        position: static;
        width: auto;
        height: auto;
        clip-path: none;
    }

    html[data-ocp-menu-wysuniete] .ocp-panel.ocp-menu-nieustalone .mud-drawer--closed.mud-drawer-mini .ocp-menu-sekcja-podpis {
        position: static;
        width: auto;
        height: auto;
        padding: var(--ocp-odstep-1) var(--ocp-odstep-2) 0.25rem;
        clip-path: none;
    }

    html[data-ocp-menu-wysuniete] .ocp-panel.ocp-menu-nieustalone .mud-drawer--closed.mud-drawer-mini .ocp-licznik-menu {
        display: inline-block;
    }
}

@media (min-width: 960px) {
    html[data-ocp-menu="rozwiniete"] .ocp-panel.ocp-menu-nieustalone .mud-drawer--closed.mud-drawer-mini > .mud-drawer-content > .mud-navmenu .mud-nav-link .mud-icon-root:first-child + .mud-nav-link-text,
    .ocp-panel.ocp-bez-obwodu .mud-drawer--closed.mud-drawer-mini:hover > .mud-drawer-content > .mud-navmenu .mud-nav-link .mud-icon-root:first-child + .mud-nav-link-text {
        position: static;
        width: auto;
        height: auto;
        clip-path: none;
    }

    html[data-ocp-menu="rozwiniete"] .ocp-panel.ocp-menu-nieustalone .mud-drawer--closed.mud-drawer-mini .ocp-menu-sekcja-podpis,
    .ocp-panel.ocp-bez-obwodu .mud-drawer--closed.mud-drawer-mini:hover .ocp-menu-sekcja-podpis {
        position: static;
        width: auto;
        height: auto;
        padding: var(--ocp-odstep-1) var(--ocp-odstep-2) 0.25rem;
        clip-path: none;
    }

    html[data-ocp-menu="rozwiniete"] .ocp-panel.ocp-menu-nieustalone .mud-drawer--closed.mud-drawer-mini .ocp-licznik-menu,
    .ocp-panel.ocp-bez-obwodu .mud-drawer--closed.mud-drawer-mini:hover .ocp-licznik-menu {
        display: inline-block;
    }
}

@media (min-width: 1280px) {
    html:not([data-ocp-menu]) .ocp-panel.ocp-menu-nieustalone .mud-drawer--closed.mud-drawer-mini > .mud-drawer-content > .mud-navmenu .mud-nav-link .mud-icon-root:first-child + .mud-nav-link-text {
        position: static;
        width: auto;
        height: auto;
        clip-path: none;
    }

    html:not([data-ocp-menu]) .ocp-panel.ocp-menu-nieustalone .mud-drawer--closed.mud-drawer-mini .ocp-menu-sekcja-podpis {
        position: static;
        width: auto;
        height: auto;
        padding: var(--ocp-odstep-1) var(--ocp-odstep-2) 0.25rem;
        clip-path: none;
    }

    html:not([data-ocp-menu]) .ocp-panel.ocp-menu-nieustalone .mud-drawer--closed.mud-drawer-mini .ocp-licznik-menu {
        display: inline-block;
    }
}

/* Przełącznik motywu przed odczytem wyboru: stoją dwa przyciski, widoczny jest ten, który pasuje do atrybutu
   data-ocp-motyw — każdy z właściwą ikoną i nazwą dla czytnika ekranu (drugi jest ukryty także przed czytnikiem). */
.ocp-panel.ocp-motyw-nieustalony .ocp-przelacznik-na-jasny,
html[data-ocp-motyw="ciemny"] .ocp-panel.ocp-motyw-nieustalony .ocp-przelacznik-na-ciemny {
    display: none;
}

html[data-ocp-motyw="ciemny"] .ocp-panel.ocp-motyw-nieustalony .ocp-przelacznik-na-jasny {
    display: inline-flex;
}

/* Krawędź świetlna paska w motywie ciemnym także przed odczytem wyboru (reguła .ocp-motyw-ciemny .mud-appbar wyżej). */
html[data-ocp-motyw="ciemny"] .ocp-panel.ocp-motyw-nieustalony .mud-appbar {
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-appbar-background) 70%, #FFFFFF);
}

/* ── KARTY: jeden wzór z działem Wiedza (poprawki U1c) ──
   Karty panelu miały cień bez obramowania, a karty działu Wiedza — obramowanie w barwie kreski bez cienia (pomiar
   pikseli przy kontroli U1b: krawędź karty panelu #A2A09E, publicznej #D9D4C7). Panel przyjmuje wzór Wiedzy, do której
   prowadzi sekcja „Strona biura” w menu: biała karta z kreską 1 px na tle papieru. Dotyczy wyłącznie kart, tabel
   i paneli rozwijanych w treści strony z cieniem (mud-elevation-1 i wyżej; tabela MudBlazor nie ma klasy mud-paper, stąd
   osobna nazwa) — okna, listy rozwijane i podpowiedzi stoją poza treścią i zachowują cień, bo unoszą się nad stroną. */
.ocp-panel main :is(.mud-paper, .mud-table, .mud-expand-panel)[class*="mud-elevation-"]:not(.mud-elevation-0):not(.mud-paper-outlined):not(.mud-table-outlined) {
    box-shadow: none;
    border: 1px solid var(--mud-palette-lines-default);
}

/* Tabela albo karta wewnątrz karty (np. lista wpisów Tablicy w karcie) — bez drugiej ramki w ramce. */
.ocp-panel main :is(.mud-paper, .mud-table)[class*="mud-elevation-"]:not(.mud-elevation-0) :is(.mud-paper, .mud-table)[class*="mud-elevation-"]:not(.mud-elevation-0):not(.mud-paper-outlined):not(.mud-table-outlined) {
    border: none;
}

/* ── STOPKA PRZY DOLNEJ KRAWĘDZI EKRANU (poprawki U1c) ──
   Na krótkich stronach (logowanie, konto, „nie znaleziono”, „brak dostępu”) stopka wisiała w połowie ekranu, a pod nią
   był pusty pas tła (pomiar zrzutu konta: y 700–890 px). Strona publiczna dociąga stopkę do dołu (.ocp-publiczny
   i .ocp-pub-tresc) — panel robi to samo: obszar treści ma co najmniej wysokość ekranu, a treść strony wypełnia to,
   co zostaje nad stopką. */
.ocp-panel .mud-main-content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.ocp-panel .mud-main-content > main {
    flex: 1 0 auto;
    width: 100%;
}

/* ---- Analizy (1 października 2026 r., zakładka „Analizy”, specyfikacja część 6.4) ----
   Barwy WYŁĄCZNIE z palety Okabe-Ito przez zmienne tego bloku: przychód #0072B2 (w motywie ciemnym #56B4E9),
   koszty #E69F00 z ukośnym kreskowaniem, wynik czerń (w ciemnym biel) z rombami. Barwa nigdy nie jest jedynym
   nośnikiem: wzór (pełny / kreskowany / linia z rombem), słowa w legendzie, kwoty nad słupkami i tabela pod wykresem.
   Żadnej pary czerwień–zieleń i żadnej barwy jako oceny. Wielkość czcionki wyłącznie ze zmiennych skali panelu
   (najmniej 14 px — próba SkalaTypograficznaPaneluTests), także w podpisach wykresu SVG. */
.ocp-panel {
    --ocp-analiza-przychod: #0072B2;
    --ocp-analiza-koszty: #E69F00;
    --ocp-analiza-wynik: #000000;
    --ocp-analiza-tlo-kresek: #ffffff;
}

.ocp-panel.ocp-motyw-ciemny,
html[data-ocp-motyw="ciemny"] .ocp-panel.ocp-motyw-nieustalony {
    --ocp-analiza-przychod: #56B4E9;
    --ocp-analiza-wynik: #ffffff;
    --ocp-analiza-tlo-kresek: #000000;
}

/* Wykres przewija się poziomo WEWNĄTRZ ramki (telefon 360 px); strona nie przewija się w bok. */
.ocp-analiza-wykres-ramka {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.ocp-analiza-wykres-ramka:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.ocp-analiza-wykres {
    display: block;
    font-family: inherit;
}

.ocp-analiza-wykres text {
    fill: var(--mud-palette-text-primary);
}

.ocp-analiza-os,
.ocp-analiza-os-opis,
.ocp-analiza-rok {
    font-size: var(--ocp-tekst-maly);
}

.ocp-analiza-miesiac {
    font-size: var(--ocp-tekst-maly);
    font-weight: 600;
}

.ocp-analiza-etykieta {
    font-size: var(--ocp-tekst-maly);
}

.ocp-analiza-brak,
.ocp-analiza-slowo-wstepne {
    font-size: var(--ocp-tekst-maly);
    font-style: italic;
}

.ocp-analiza-podzialka {
    stroke: var(--mud-palette-lines-default);
    stroke-width: 1;
}

.ocp-analiza-podzialka.ocp-analiza-zero {
    stroke: var(--mud-palette-text-primary);
    stroke-width: 1.5;
}

.ocp-analiza-przychod {
    fill: var(--ocp-analiza-przychod);
}

/* Obrys słupka kosztów jest CIEMNY w motywie jasnym (jasny w ciemnym) — barwą wyniku, a nie pomarańczową: #E69F00
   na białym tle ma kontrast około 2,2:1, mniej niż 3:1 wymagane dla elementów graficznych (WCAG 1.4.11), więc krawędź
   niskiego słupka zlewała się z tłem (recenzja z 1 października 2026 r.). Kreski wewnątrz zostają w #E69F00. */
.ocp-analiza-koszty {
    stroke: var(--ocp-analiza-wynik);
    stroke-width: 1;
}

.ocp-analiza-koszty-tlo {
    fill: var(--ocp-analiza-tlo-kresek);
}

.ocp-analiza-koszty-kreska {
    stroke: var(--ocp-analiza-koszty);
    stroke-width: 4;
}

.ocp-analiza-wstepne .ocp-analiza-przychod,
.ocp-analiza-wstepne .ocp-analiza-koszty {
    fill-opacity: 0.55;
}

.ocp-analiza-wynik-linia {
    fill: none;
    stroke: var(--ocp-analiza-wynik);
    stroke-width: 2;
}

.ocp-analiza-wynik-romb {
    fill: var(--ocp-analiza-wynik);
    stroke: var(--mud-palette-surface);
    stroke-width: 1;
}

.ocp-analiza-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}

.ocp-analiza-legenda li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ocp-analiza-kafelki {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 1rem;
}

.ocp-analiza-kafel {
    border-top: 4px solid var(--mud-palette-primary);
}

.ocp-analiza-za-okres {
    font-weight: 400;
    white-space: nowrap;
}

.ocp-analiza-kwota-kafla {
    font-variant-numeric: tabular-nums;
}

.ocp-analiza-tabela-ramka {
    max-width: 100%;
    overflow-x: auto;
}

.ocp-analiza-tabela {
    border-collapse: collapse;
    width: 100%;
    font-variant-numeric: tabular-nums;
}

.ocp-analiza-tabela th,
.ocp-analiza-tabela td {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding: 0.35rem 0.6rem;
    text-align: left;
    vertical-align: top;
}

.ocp-analiza-tabela .ocp-kwota {
    text-align: right;
    white-space: nowrap;
}

.ocp-analiza-struktura {
    list-style: none;
    margin: 0.25rem 0 0.75rem;
    padding: 0;
}

.ocp-analiza-struktura li {
    margin-bottom: 0.6rem;
}

.ocp-analiza-struktura-opis {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 1rem;
}

.ocp-analiza-struktura-opis .ocp-kwota {
    font-variant-numeric: tabular-nums;
}

.ocp-analiza-struktura-pasek {
    background: var(--mud-palette-lines-default);
    height: 10px;
    margin-top: 0.2rem;
}

.ocp-analiza-struktura-wypelnienie {
    background: var(--ocp-analiza-przychod);
    height: 100%;
}

/* Struktura kosztów: ten sam wzór co słupek kosztów na wykresie — kreskowanie, nie sama barwa. */
.ocp-analiza-struktura-koszty {
    background: repeating-linear-gradient(45deg, var(--ocp-analiza-koszty) 0 4px, var(--ocp-analiza-tlo-kresek) 4px 7px);
    box-shadow: inset 0 0 0 1px var(--ocp-analiza-wynik);
}

.ocp-analiza-definicje {
    margin: 0;
    padding-left: 1.25rem;
}

.ocp-analiza-zastrzezenie {
    border-top: 1px solid var(--mud-palette-lines-default);
    padding-top: 0.75rem;
}

/* ---- Analizy: koniec ---- */

/* ==== PANEL: KONIEC ==== */

/* Moduł budowlany (etap 1, 26 września 2026 r.): kalendarz pobytu osoby — jedna litera na dzień (P, N, I, D, ?).
   Litera, a nie barwa, niesie stan dnia (zasada K7); ramki w barwie linii motywu. Cytat stanowiska partnera
   wyróżniony wcięciem i linią, bez barwy spoza motywu. */
.ocp-kalendarz-pobytu {
    border-collapse: collapse;
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 12px;
}

.ocp-kalendarz-pobytu th,
.ocp-kalendarz-pobytu td {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 1px 3px;
    text-align: center;
    min-width: 1.4em;
}

.ocp-cytat-partnera {
    margin: 4px 0 4px 12px;
    padding-left: 10px;
    border-left: 3px solid var(--mud-palette-lines-default);
    font-style: italic;
}

/* Treść pakietu danych dla partnera — tekst z odciskiem pokazany tak, jak zostanie przekazany (łamanie wierszy
   zachowane, bez przewijania poziomego na telefonie). */
.ocp-pakiet-partnera {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: inherit;
    font-size: 0.875rem;
    margin: 0;
}