/**
 * Komponenty bazowe — SamoWolność / „Mózg w formie".
 * Zestaw startowy z Etapu 0.5, sekcja 14 dokumentu wsadowego.
 * Referencja wizualna wszystkich stanów: /styleguide.
 *
 * Zasada: efekt szkła (.glass, z base.css) stosujemy punktowo — nawigacja,
 * karta, modal — nie na każdym elemencie.
 */

/* ============================================================
   PRZYCISK
   ============================================================ */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--touch-target-min);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--duration-fast) var(--ease-standard),
        border-color var(--duration-fast) var(--ease-standard),
        color var(--duration-fast) var(--ease-standard),
        transform var(--duration-fast) var(--ease-standard);
}

.btn:active {
    transform: scale(0.98);
}

.btn--primary {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
}

/* Hover/active zamieniają tło na limonkę zamiast przyciemniać fiolet —
   mocniejszy, bardziej charakterystyczny efekt, bez dokładania osobnych
   odcieni fioletu jako kolejnych tokenów (decyzja z Etapu 0.5). Tekst
   musi przejść na ciemny — limonka jako tło pod ciemnym tekstem, zgodnie
   z zasadą kontrastu z sekcji 14 dokumentu wsadowego. */
.btn--primary:hover {
    background: var(--color-accent);
    color: var(--color-accent-text);
}

.btn--primary:active {
    background: var(--color-accent-hover);
    color: var(--color-accent-text);
}

.btn--secondary {
    background: transparent;
    border-color: var(--color-border-strong);
    color: var(--color-text-primary);
}

.btn--secondary:hover {
    background: var(--color-bg-sunken);
}

.btn--text {
    background: transparent;
    padding-inline: var(--space-2);
    color: var(--color-text-link);
}

.btn--text:hover {
    text-decoration: underline;
}

.btn--block {
    display: flex;
    width: 100%;
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn.is-loading {
    color: transparent;
    pointer-events: none;
}

.btn__spinner {
    display: none;
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1.1em;
    height: 1.1em;
}

.btn.is-loading .btn__spinner {
    display: block;
}

/* ============================================================
   SPINNER — samodzielny wskaźnik ładowania i wewnątrz przycisku
   ============================================================ */
.spinner {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--radius-full);
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================================
   SZKIELET ŁADOWANIA (skeleton)
   ============================================================ */
.skeleton {
    background: linear-gradient(90deg, var(--color-bg-sunken) 25%, var(--color-border) 37%, var(--color-bg-sunken) 63%);
    background-size: 400% 100%;
    animation: skeleton-loading 1.4s ease infinite;
    border-radius: var(--radius-sm);
}

.skeleton--text {
    height: 1em;
    width: 100%;
    margin-block: var(--space-1);
}

@keyframes skeleton-loading {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ============================================================
   POLE FORMULARZA
   ============================================================ */
.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.field__label {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.field__input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-strong);
    background: var(--color-bg-surface);
    font-size: var(--text-base);
    transition:
        border-color var(--duration-fast) var(--ease-standard),
        box-shadow var(--duration-fast) var(--ease-standard);
}

/* Pola liczbowe krótkie z natury (numer, tydzień, minuty) — nie mają
   powodu rozciągać się na całą szerokość formularza. */
.field__input--short {
    width: 8rem;
}

.field__input:hover {
    border-color: var(--color-text-muted);
}

.field__input:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.field__input:disabled {
    background: var(--color-bg-sunken);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.field__hint {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.field__error {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-error);
}

.field--error .field__input {
    border-color: var(--color-error);
}

.field--error .field__input:focus-visible {
    box-shadow: 0 0 0 3px var(--color-error-bg);
}

.checkbox-field {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    cursor: pointer;
}

/* ============================================================
   KARTA
   ============================================================ */
.card {
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

/* Warianty tła — cztery, do doboru wg kontekstu */
.card--solid {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
}

.card--sunken {
    background: var(--color-bg-sunken);
    border: 1px solid var(--color-border);
}

.card--tinted {
    background: var(--color-primary-soft);
    border: 1px solid rgba(112, 0, 255, 0.14);
}

.card--inverse {
    background: var(--color-bg-inverse);
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-lg);
}

.card--inverse .card__body {
    color: var(--color-text-inverse-muted);
}

/* Karta szklana — samodzielna definicja, nie polega na osobnej klasie
   .glass. Świadomie ciemno-tłumiona (nie jasna) — jasne szkło + jasny
   tekst było błędem: tekst stawał się nieczytelny niezależnie od tła
   pod spodem. Ciemne szkło + jasny tekst to spójna, zawsze czytelna
   para, a przy okazji lepiej sprzedaje kolor tła pod spodem. */
.card.glass {
    background: var(--glass-fallback-bg-inverse);
    border: 1px solid var(--color-border-on-inverse);
    border-top-color: rgba(255, 255, 255, 0.55);
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-glass);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .card.glass {
        background: var(--glass-bg-inverse);
        border-color: var(--glass-border-inverse);
        border-top-color: rgba(255, 255, 255, 0.55);
        backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    }
}

.card.glass .card__body {
    color: var(--color-text-inverse-muted);
}

/* Dopełnienie karty szklanej o formularze (rewizja platformy, 23
   sierpnia 2026 — warstwa tła na ekranach logowania). Wcześniejsze
   .card.glass .card__body zakładało proste karty (tytuł + treść) —
   .field__label, .text-muted i domyślny kolor linku mają własny,
   jasny kolor tekstu i bez tego byłyby nieczytelne na ciemnym szkle. */
.card.glass .field__label {
    color: var(--color-text-inverse);
}

.card.glass .text-muted,
.card.glass .field__hint {
    color: var(--color-text-inverse-muted);
}

.card.glass a {
    color: var(--color-accent);
}

/* Tło pod kartą szklaną — ekrany logowania/rejestracji (rewizja
   platformy, 23 sierpnia 2026). Konkretny fluid-bg-N.png dobiera każdy
   widok osobno przez style="background-image" (ten sam wzorzec co
   .sg-logo-tile w styleguide.css) — na stałe przypisany do ekranu, nie
   losowy, żeby powtarzalność budowała orientację (patrz opis assetów). */
.auth-backdrop {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-5);
    border-radius: var(--radius-lg);
    background-size: cover;
    background-position: center;
}

/* Karta klikalna — realny hover i stan naciśnięcia, feedback natychmiast
   po najechaniu, nie tylko po puszczeniu (patrz apple-design: response). */
.card--interactive {
    cursor: pointer;
    transition:
        transform var(--duration-fast) var(--ease-standard),
        box-shadow var(--duration-fast) var(--ease-standard);
}

.card--interactive:hover {
    transform: translateY(-0.25rem);
    box-shadow: var(--shadow-lg);
}

.card--interactive:active {
    transform: translateY(-0.0625rem) scale(0.99);
}

.card__title {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-2);
}

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

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: rgba(28, 28, 30, 0.45);
    animation: modal-fade-in var(--duration-base) var(--ease-standard);
}

.modal-overlay[hidden] {
    display: none;
}

.modal {
    width: 100%;
    max-width: 28rem;
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-lg);
    animation: modal-in var(--duration-base) var(--ease-emphasized);
}

.modal__title {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-3);
}

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

.modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

@keyframes modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modal-in {
    from {
        opacity: 0;
        transform: translateY(var(--space-3)) scale(0.98);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ============================================================
   NAWIGACJA MOBILNA — dolny pasek
   ============================================================ */
.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: var(--space-2) var(--space-2) max(var(--space-2), env(safe-area-inset-bottom));
    border-top: 1px solid var(--color-border);
}

.bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-height: var(--touch-target-min);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard);
}

.bottom-nav__item.is-active {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.bottom-nav__icon {
    width: 1.5rem;
    height: 1.5rem;
}

/* ============================================================
   NAGŁÓWEK STRONY
   ============================================================ */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-4);
}

/* Sam plik logo to pionowy, czteroliniowy lockup ("MÓZG / W / FORM /
   IE"), 1080×1350 px — nie pozioma plakietka. Wcześniej atrybuty w
   znaczniku <img> (140×35) kłamały o proporcjach pliku, więc
   przeglądarka i tak liczyła szerokość z rzeczywistego pliku: wychodziło
   nieczytelne ~26×32 px. Złapane w rewizji platformy (23 sierpnia 2026).
   Ten blok naprawia kod (atrybuty zgodne z plikiem, obszar dotykowy
   44×44) — czy sam plik źródłowy warto przyciąć albo zastąpić poziomym
   wariantem, to osobna decyzja właściciela, patrz docs/STATUS.md, D7. */
.page-header__logo {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target-min);
}

.page-header__logo img {
    display: block;
    height: var(--touch-target-min);
    width: auto;
    /* Globalny reset "img { max-width: 100% }" (base.css) liczy się
       względem szerokości .page-header__logo — a ta jest sama
       wyliczana z zawartości (inline-flex, brak zdefiniowanej
       szerokości). W tym sprzężeniu zwrotnym niektóre przeglądarki
       zerują szerokość obrazka zamiast policzyć ją z proporcji.
       Zmierzone bezpośrednio na platforma-test po wdrożeniu tej
       poprawki (23 sierpnia 2026). To jedyne miejsce w interfejsie,
       gdzie logo jest jedynym dzieckiem elastycznego kontenera bez
       szerokości — stąd wyłączenie punktowe, nie globalne. */
    max-width: none;
}

.page-header__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-display);
}

/* ============================================================
   KOMUNIKAT SYSTEMOWY (alert)
   ============================================================ */
/* Bez paska border-left — sygnał niesie ikona + tło, nie kolorowa
   kreska z boku. */
.alert {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
}

.alert__icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
}

.alert__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.alert__title {
    font-weight: var(--font-weight-semibold);
}

.alert--success {
    background: var(--color-success-bg);
}

.alert--success .alert__icon,
.alert--success .alert__title {
    color: var(--color-success);
}

.alert--error {
    background: var(--color-error-bg);
}

.alert--error .alert__icon,
.alert--error .alert__title {
    color: var(--color-error);
}

.alert--warning {
    background: var(--color-warning-bg);
}

.alert--warning .alert__icon,
.alert--warning .alert__title {
    color: var(--color-warning);
}

.alert--info {
    background: var(--color-info-bg);
}

.alert--info .alert__icon,
.alert--info .alert__title {
    color: var(--color-info);
}

/* Przycisk zamknięcia — używany m.in. przez podpowiedź instalacji PWA
   (dashboard.php). Osobny element, nie wariant .btn — to gest zamknięcia
   komunikatu, nie akcja. */
.alert__dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: auto;
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    padding: var(--space-1);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--text-lg);
    line-height: 1;
    cursor: pointer;
}

.alert__dismiss:hover,
.alert__dismiss:focus-visible {
    background: var(--color-border);
    color: var(--color-text-primary);
}

/* Lista kroków z ikoną — używana przez podpowiedź instalacji PWA
   (dashboard.php), żeby pokazać dokładnie który przycisk przeglądarki
   dotknąć, zamiast samego tekstu „Udostępnij". */
.install-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

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

.install-steps__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm);
    background: var(--color-bg-surface);
    color: var(--color-primary);
}

.install-steps__icon svg {
    width: 1.1rem;
    height: 1.1rem;
}

.install-steps__text {
    font-size: var(--text-sm);
}

/* ============================================================
   WSKAŹNIK POSTĘPU
   ============================================================ */
.progress {
    width: 100%;
    height: var(--space-2);
    border-radius: var(--radius-full);
    background: var(--color-bg-sunken);
    overflow: hidden;
}

.progress__bar {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary);
    transform: scaleX(var(--progress, 0));
    transform-origin: left;
    transition: transform var(--duration-slow) var(--ease-standard);
}

.progress-steps {
    display: flex;
    gap: var(--space-2);
}

.progress-steps__step {
    flex: 1;
    height: 0.375rem;
    border-radius: var(--radius-full);
    background: var(--color-bg-sunken);
}

.progress-steps__step.is-complete {
    background: var(--color-primary);
}

.progress-steps__step.is-current {
    background: var(--color-accent);
}

/* Pasek nieokreślony — czas trwania nieznany (np. oczekiwanie na
   odpowiedź serwera), segment przesuwa się w nieskończoność. */
.progress--indeterminate .progress__bar {
    width: 40%;
    animation: progress-indeterminate 1.2s var(--ease-standard) infinite;
}

@keyframes progress-indeterminate {
    from { transform: translateX(-100%); }
    to { transform: translateX(350%); }
}

/* Pasek warstwowy — kilka wartości w jednym pasku zamiast osobnych
   bloków (np. rozkład trudności ruchu / trudności poznawczej w jednej
   sesji, albo zrobione / w trakcie / pozostałe naraz). */
.progress-stacked {
    display: flex;
    width: 100%;
    height: var(--space-2);
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--color-bg-sunken);
}

.progress-stacked__segment {
    height: 100%;
}

.progress-stacked__segment--primary {
    background: var(--color-primary);
}

.progress-stacked__segment--accent {
    background: var(--color-accent);
}

/* ============================================================
   STEPPER — etapy połączone linią (np. zakup → test → program → koniec)
   ============================================================ */
.stepper {
    display: flex;
    align-items: flex-start;
}

.stepper__step {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.stepper__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 1rem;
    left: 50%;
    z-index: 0;
    width: 100%;
    height: 2px;
    background: var(--color-border);
}

.stepper__node {
    z-index: 1;
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: var(--radius-full);
    background: var(--color-bg-sunken);
    border: 2px solid var(--color-border);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
}

.stepper__label {
    max-width: 6rem;
    text-align: center;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.stepper__step.is-done .stepper__node {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-on-primary);
}

.stepper__step.is-done:not(:last-child)::after {
    background: var(--color-primary);
}

.stepper__step.is-current .stepper__node {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-accent-text);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.stepper__step.is-current .stepper__label {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}

/* ============================================================
   STAN PUSTY
   ============================================================ */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-8) var(--space-4);
    text-align: center;
    color: var(--color-text-muted);
}

.empty-state__icon {
    width: 3rem;
    height: 3rem;
    opacity: 0.6;
}

.empty-state__title {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

/* ============================================================
   SUWAK — ciągły (np. formularz po sesji, 0–100) i skokowy
   ============================================================
   Oparty na natywnym <input type="range"> — przeglądarka daje z góry
   śledzenie 1:1 podczas przeciągania i natychmiastową reakcję na dotyk,
   zgodnie z zasadami płynnych interfejsów (patrz apple-design). Stylujemy
   tylko wygląd, nie zachowanie. */
.range-slider {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.range-slider__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.range-slider__label {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
}

.range-slider__value {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--color-primary);
}

/* Uwaga techniczna: wysokość toru ustawiamy WYŁĄCZNIE przez
   ::-webkit-slider-runnable-track / ::-moz-range-track, nigdy przez
   background bezpośrednio na <input>. Bez jawnego zdefiniowania toru
   WebKit i tak renderuje swój domyślny, niewidoczny tor o innej
   wysokości — a kciuk centruje się względem NIEGO, nie względem naszego
   tła. To był realny błąd (kciuk „uciekał" do góry), nie tylko kwestia
   gustu. Sam <input> ma wysokość kciuka, żeby było miejsce na jego
   pełny rozmiar i strefę dotyku. */
.range-slider__input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 1.25rem;
    margin: 0;
    padding: 0;
    background: transparent;
    outline: none;
    cursor: pointer;
}

.range-slider__input::-webkit-slider-runnable-track {
    width: 100%;
    height: 0.25rem;
    border-radius: var(--radius-full);
    background: linear-gradient(
        to right,
        var(--color-primary) 0%,
        var(--color-primary) var(--range-progress, 50%),
        var(--color-bg-sunken) var(--range-progress, 50%),
        var(--color-bg-sunken) 100%
    );
}

.range-slider__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: calc((0.25rem - 1.125rem) / 2);
    border-radius: var(--radius-full);
    background: var(--color-bg-surface);
    border: 2px solid var(--color-primary);
    box-shadow: var(--shadow-sm);
    cursor: grab;
    transition:
        transform var(--duration-fast) var(--ease-standard),
        box-shadow var(--duration-fast) var(--ease-standard);
}

.range-slider__input:hover::-webkit-slider-thumb {
    box-shadow: var(--shadow-md);
}

.range-slider__input:active::-webkit-slider-thumb {
    transform: scale(1.25);
    cursor: grabbing;
}

.range-slider__input:focus-visible::-webkit-slider-thumb {
    box-shadow: var(--shadow-sm), var(--shadow-focus);
}

.range-slider__input::-moz-range-track {
    height: 0.25rem;
    border-radius: var(--radius-full);
    background: var(--color-bg-sunken);
}

.range-slider__input::-moz-range-progress {
    height: 0.25rem;
    border-radius: var(--radius-full);
    background: var(--color-primary);
}

.range-slider__input::-moz-range-thumb {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: var(--radius-full);
    background: var(--color-bg-surface);
    border: 2px solid var(--color-primary);
    box-shadow: var(--shadow-sm);
    cursor: grab;
    transition:
        transform var(--duration-fast) var(--ease-standard),
        box-shadow var(--duration-fast) var(--ease-standard);
}

.range-slider__input:hover::-moz-range-thumb {
    box-shadow: var(--shadow-md);
}

.range-slider__input:active::-moz-range-thumb {
    transform: scale(1.25);
}

/* ============================================================
   PRZEŁĄCZNIK SEGMENTOWY — kilka nazwanych opcji zamiast pełnego
   zakresu (np. testy, check-iny: „źle / średnio / dobrze"). Zaznaczenie
   płynnie przesuwa się między opcjami zamiast suwaka z natywnym kciukiem
   — mniej pułapek międzyprzeglądarkowych, bardziej satysfakcjonujące.
   ============================================================ */
.segmented {
    position: relative;
    display: flex;
    gap: var(--space-1);
    padding: var(--space-1);
    border-radius: var(--radius-full);
    background: var(--color-bg-sunken);
}

.segmented__indicator {
    position: absolute;
    top: var(--space-1);
    bottom: var(--space-1);
    left: var(--space-1);
    width: calc((100% - 2 * var(--space-1)) / var(--segmented-count, 3));
    border-radius: var(--radius-full);
    background: var(--color-bg-surface);
    box-shadow: var(--shadow-sm);
    transform: translateX(calc(var(--segmented-index, 0) * 100%));
    transition: transform var(--duration-base) var(--ease-emphasized);
}

.segmented__option {
    position: relative;
    z-index: 1;
    flex: 1;
    padding: var(--space-2) var(--space-3);
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    text-align: center;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-standard);
}

.segmented__option.is-active {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}

.segmented__option:active {
    transform: scale(0.97);
}

/* ============================================================
   WSKAŹNIK KOŁOWY
   ============================================================ */
.radial-progress {
    --radial-value: 0;
    flex-shrink: 0;
    width: 6rem;
    height: 6rem;
    border-radius: var(--radius-full);
    display: grid;
    place-items: center;
    background: conic-gradient(
        var(--color-primary) calc(var(--radial-value) * 1%),
        var(--color-bg-sunken) 0
    );
}

.radial-progress__inner {
    width: 78%;
    height: 78%;
    border-radius: var(--radius-full);
    background: var(--color-bg-surface);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--color-text-primary);
}

/* ============================================================
   TRACKER SESJI TYGODNIA — dni A/B/C, zrobione / dziś / czeka
   ============================================================ */
.session-dots {
    display: flex;
    gap: var(--space-4);
}

.session-dots__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.session-dots__marker {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    display: grid;
    place-items: center;
    background: var(--color-bg-sunken);
    border: 2px solid var(--color-border);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
}

.session-dots__day.is-done .session-dots__marker {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-on-primary);
}

.session-dots__day.is-current .session-dots__marker {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-accent-text);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.session-dots__label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* ============================================================
   PANEL ADMINA — gęstszy informacyjnie, bez animacji ozdobnych
   (sekcja 14 dokumentu wsadowego: „projektowany, nie surowy")
   ============================================================ */
.admin-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

@media (min-width: 60rem) {
    .admin-shell {
        flex-direction: row;
    }
}

.admin-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    background: var(--color-bg-sunken);
    border-bottom: 1px solid var(--color-border);
}

@media (min-width: 60rem) {
    .admin-sidebar {
        width: 16rem;
        flex-shrink: 0;
        border-bottom: none;
        border-right: 1px solid var(--color-border);
        min-height: 100vh;
    }
}

.admin-sidebar__brand {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-4);
}

.admin-sidebar__brand img {
    height: 1.75rem;
    width: auto;
}

.admin-sidebar__link {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
}

.admin-sidebar__link:hover {
    background: var(--color-bg-surface);
}

.admin-sidebar__link.is-active {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
}

.admin-content {
    flex: 1;
    min-width: 0;
    padding: var(--space-6) var(--space-4);
}

@media (min-width: 60rem) {
    .admin-content {
        padding: var(--space-8);
    }
}

.admin-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.admin-header--tight {
    margin-bottom: var(--space-3);
}

.admin-header__title {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-display);
    font-size: var(--text-2xl);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.admin-table th,
.admin-table td {
    padding: var(--space-3) var(--space-3);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.admin-table th {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
}

.admin-table tr:last-child td {
    border-bottom: none;
}

.admin-table__actions {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
}

.badge--draft {
    background: var(--color-bg-sunken);
    color: var(--color-text-muted);
}

.badge--published {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.admin-reorder {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.admin-reorder button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.25rem;
    padding: 0;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-bg-surface);
    color: var(--color-text-muted);
    cursor: pointer;
}

.admin-reorder button:hover {
    color: var(--color-text-primary);
}

.admin-empty {
    padding: var(--space-6);
    text-align: center;
    color: var(--color-text-muted);
    background: var(--color-bg-sunken);
    border-radius: var(--radius-md);
}

.admin-cover-preview {
    display: block;
    width: 100%;
    max-width: 20rem;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
    background: var(--color-bg-sunken);
}

/* Placeholder wideo — dopóki dostawca nie jest podłączony (Etap 2) */
.video-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
    background: var(--color-bg-inverse);
    color: var(--color-text-inverse-muted);
    text-align: center;
    padding: var(--space-4);
}

.video-placeholder__icon {
    width: 2.5rem;
    height: 2.5rem;
    opacity: 0.6;
}

/* ============================================================
   KAFELEK STATYSTYKI — mikro-dashboard użytkownika, dashboard
   zbiorczy i statystyki użytkownika w panelu admina (sekcja 13b
   dokumentu wsadowego)
   ============================================================ */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: var(--space-5);
}

/* Wiersz: grafika/wskaźnik obok bloku tekstu (np. .radial-progress +
   nazwa modułu na /program/moduly). Ogólny, do ponownego użycia —
   dodany zamiast zostawiać display:flex jako styl wpisany wprost. */
.media-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.stat-tile {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.stat-tile__value {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    line-height: 1;
    color: var(--color-primary);
}

.stat-tile__label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.stat-tile__trend {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
}

.stat-tile__trend--up {
    color: var(--color-success);
}

.stat-tile__trend--down {
    color: var(--color-error);
}

/* ============================================================
   KARTA MODUŁU — kształt szklany za numerem/nazwą, jeden kształt na
   moduł. Kierunek zatwierdzony przez właściciela projektu, do użycia
   w katalogu i na pulpicie od Etapu 2. Każdy moduł programu „Mózg w
   formie" ma przypisany na stałe jeden plik z rodziny glass_* —
   przypisanie i uzasadnienie: /styleguide, sekcja „Wykorzystanie
   assetów".
   ============================================================ */
.module-card {
    position: relative;
    overflow: hidden;
    display: flex;
    min-height: 12rem;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-md);
}

.module-card--dark {
    background: var(--color-bg-inverse);
}

.module-card--violet {
    background: var(--color-brand-violet);
}

.module-card__shape {
    position: absolute;
    top: -25%;
    left: -8%;
    width: 65%;
    opacity: 0.9;
    pointer-events: none;
}

.module-card__content {
    position: relative;
    z-index: 1;
}

.module-card__meta {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
    color: var(--color-text-inverse-muted);
    margin-bottom: var(--space-1);
}

.module-card__number {
    font-family: var(--font-display);
    font-size: var(--text-display-lg);
    line-height: 1;
    opacity: 0.4;
}

.module-card__title {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: var(--text-2xl);
    letter-spacing: var(--letter-spacing-display);
}

/* ============================================================
   SIATKA ZASOBÓW — pulpit, Etap 4
   Telefon: jedna kolumna. Komputer: dwie kolumny, kolejne rzędy w dół
   w miarę przybywania kart — patrz sekcja 1 dokumentu wsadowego.
   ============================================================ */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}

@media (min-width: 60rem) {
    .dashboard-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.dashboard-card {
    display: flex;
    flex-direction: column;
}

/* Karta „duża" — zajmuje całą szerokość siatki, do zasobów bardziej
   osobistych/wyjątkowych (np. Praca 1:1) — patrz admin.products.field_card_size. */
@media (min-width: 60rem) {
    .dashboard-card--large {
        grid-column: 1 / -1;
    }
}

.dashboard-card__cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    background: var(--color-bg-sunken);
}

.dashboard-card--large .dashboard-card__cover {
    aspect-ratio: 3 / 1;
}