/* Góra ekranu na diecie. Nad wynikiem stało 177 px, zanim padł pierwszy wiersz: pasek aplikacji,
   odstęp strony, odstęp powłoki i pasek tytułu — każdy z osobna rozsądny, razem dwa wiersze wyniku.
   Ramki i marginesy zostają (to one robią porządek), schodzi POWIETRZE między nimi. */
.content:has(.query-editor-shell) {
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
}

/* Edytor jest WIDOKIEM NA CAŁY EKRAN, nie stroną do przewijania: po lewej pytanie, po prawej
   odpowiedź, a pasek pod odpowiedzią zawsze widoczny. Wysokość bierze z układu aplikacji
   (MainLayout: `.app-shell` ma wysokość okna), więc nie ma tu ani jednej magicznej liczby
   „ile stoi nad panelem". Przewija się to, co w środku — każda kolumna osobno. */
.query-editor-shell {
    --qe-control-h: 1.8rem;
    --qe-control-fs: 0.82rem;
    --qe-gap: 0.75rem;

    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 0.45rem 0.65rem 0.5rem;
}

/* ---------- pasek nagłówka ---------- */

.qe-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    position: sticky;
    top: 0.4rem;
    z-index: 900;
    margin-bottom: 0.45rem;
    padding: 0.34rem 0.7rem;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    background: rgba(11, 18, 28, 0.92);
    backdrop-filter: blur(8px);
}

.qe-bar-id {
    display: flex;
    /* Środek, nie linia bazowa: obok tytułu i nazwy indeksu stoi teraz plakietka archiwum, a ta ma
       własną wysokość — przy `baseline` wisiałaby nad wierszem. */
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    flex-wrap: wrap;
}

.qe-title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--app-text);
    white-space: nowrap;
}

/* Nazwa indeksu to dana, nie ozdoba — czyta się ją znak po znaku, więc idzie krojem o stałej
   szerokości. Bez podpisu „Aktywny indeks:”: podpis powtarzał to, co widać z samej nazwy. */
.qe-index {
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--picker-rule);
    border-radius: 6px;
    background: var(--picker-bar);
    color: var(--picker-label);
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qe-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* Przyciski paska (Anuluj / Udostępnij / Zapisz) noszą wspólne klasy systemu przycisków (`act-btn`, S5/A70):
   Anuluj to nawigacja, Udostępnij rodzina „udostępnij”, Zapisz pełny tylko przy zmianach. Tu zostaje wyłącznie układ
   paska (`.qe-actions`) — wygląd przycisków jest w app.css. */

.qe-notice {
    margin-bottom: 0.45rem;
    padding: 0.34rem 0.7rem;
    font-size: 0.82rem;
}

/* Scena widoku: odpowiedź u góry na całą szerokość, dok pod nią. Wysokość doku jest UŁAMKIEM OKNA,
   a nie sumą tego, co w nim stoi — inaczej rosnące pytanie zjadałoby tabelę wiersz po wierszu, a to
   właśnie tabela jest tu odpowiedzią. Przewija się zawartość doku, nie strona. */
.qe-stage {
    display: flex;
    flex-direction: column;
    gap: var(--qe-gap);
    flex: 1 1 auto;
    min-height: 0;
}

.qe-dock {
    --qe-dock-height: 40vh;

    flex: 0 0 var(--qe-dock-height);
    /* Wysokość jest UŁAMKIEM OKNA i zmienia ją człowiek — trzy stany, nie płynne ciągnięcie.
       Sufitem być nie może: przy wysokości z treści szuflada zwijała się do wysokości PYTANIA,
       bo formatka ma własne przewijanie i do rachunku nie wchodzi. */
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--app-border-strong);
    border-radius: 13px;
    background: var(--app-bg-soft);
    /* Zakładka wysokości wystaje ponad krawędź, więc przycinanie robi `.qe-dock-inner`. */
    overflow: visible;
    /* Cień odcina dok od tabeli: to są dwie różne rzeczy, a nie dalszy ciąg listy wyników. */
    box-shadow: 0 -14px 34px rgba(2, 10, 18, 0.45);
}

.qe-dock-body {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.qe-dock-question {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.6rem;
    border-right: 1px solid var(--app-border);
}

/* Kolumna warsztatu ROZCIĄGA SIĘ na całą wysokość doku. Bez tego warsztat dostawał tyle miejsca,
   ile akurat zajmowała jego treść — a wtedy edytor ucinał się na własnej krawędzi i nie było po nim
   widać, że coś zostało poniżej. Przewija się wnętrze warsztatu, nie kolumna. */
.qe-dock-build {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.6rem;
}

/* Zdanie wypełnia swoją kolumnę doku. Ramki wokół niego nie ma: kolumna doku JEST jego ramką,
   a druga obwódka w środku obwódki tylko zabierała szerokość tekstowi, który ma się czytać. */
.qe-question-summary {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.qe-question-summary > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.1rem 0.1rem 0.4rem;
}

.qe-question-summary > header span {
    color: #8acfeb;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.qe-question-summary > header small { color: var(--picker-desc); font-size: 0.68rem; }
.qe-question-summary-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0.1rem 0.1rem 0.3rem; }
/* Celem kliknięcia jest FRAGMENT zdania, a nie pojedynczy warunek w jego środku — style stoją przy
   samym zdaniu (QueryDescription.razor.css, .qd-pick). Tutaj zostaje tylko gęstość. */

.qe-result {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    border: 1px solid var(--app-border);
    border-radius: 13px;
    background: rgba(13, 23, 34, 0.6);
    overflow: hidden;
}

.qe-result-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 0.6rem 0.7rem 0.7rem;
}

/* Pasek pod wynikami ma być WIDOCZNY ZAWSZE, a nie na dole przewiniętej listy — i przy tym własny
   dla kolumny odpowiedzi, żeby nie ciągnąć tła pod panelem budowania pytania. Robi to układ: kolumna
   ma wysokość ekranu, przewija się w niej sama lista trafień, a pasek stoi pod nią jako ostatni
   wiersz kolumny.

   Bez `:has()` świadomie: reguła warunkowa („zrób z ciała kolumnę, GDY stoi w niej podgląd") cicho
   przestawała działać tam, gdzie przeglądarka `:has()` nie zna — a wtedy pasek wracał na koniec
   przewijanej treści i nie było tego widać po niczym innym. Ciało kolumny jest kolumną zawsze;
   pusty stan i ostrzeżenia wyglądają w niej tak samo. */
.qe-result-body {
    display: flex;
    flex-direction: column;
}

.query-preview-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.query-preview-body > .query-results-scroll-area,
.query-preview-body > .query-results-mobile-list {
    flex: 1 1 auto;
    min-height: 0;
}

.query-preview-body > .query-results-inline-paginator {
    flex: 0 0 auto;
}

/* Wynik bierze całą wysokość, jaka zostaje nad dokiem — także wtedy, gdy nie ma czego pokazać:
   pusty podgląd skurczony do paska nad pustką wygląda jak coś, co się nie wczytało. */
.qe-result { flex: 1 1 auto; min-height: 0; }

.qe-empty {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0.3rem;
    min-height: 14rem;
    padding: 1rem;
    text-align: center;
}

.qe-empty-lead {
    margin: 0;
    color: var(--picker-item-text);
    font-size: 0.94rem;
    font-weight: 650;
}

.qe-empty-note {
    margin: 0;
    max-width: 26rem;
    color: var(--picker-desc);
    font-size: 0.8rem;
    line-height: 1.5;
}

/* Wąski ekran: kolumny wracają jedna pod drugą, a widok przestaje być na cały ekran — na telefonie
   dwie osobno przewijane połowy są gorsze niż jedna zwyczajna strona. */
@media (max-width: 1180px) {
    .query-editor-shell {
        display: block;
        overflow: visible;
    }

    .qe-stage {
        display: block;
        min-height: auto;
    }

    /* Poniżej progu dok przestaje być dokiem: nie ma czego przyklejać do krawędzi, gdy strona
       i tak przewija się w całości. Zostaje kolejność czytania — wynik, potem pytanie. */
    .qe-dock {
        flex: none;
        height: auto;
        overflow: visible;
        box-shadow: none;
        /* Zakładka wystaje ponad dok, więc odstęp nie może być mniejszy niż jej wysięg. */
        margin-top: max(var(--qe-gap), calc(var(--qe-dock-tab-rise) + 0.25rem));
    }

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

    .qe-dock-question {
        border-right: 0;
        border-bottom: 1px solid var(--app-border);
    }

    .qe-dock-build {
        overflow: visible;
        padding-right: 0.6rem;
    }

    .qe-question-summary { max-height: 45vh; }

    .qe-result {
        height: auto;
        max-height: none;
    }

    .qe-result-body { overflow: visible; }

    /* Kolumn nie ma, więc pasek wraca do wzorca ze strony wyników: przyklejony do okna na całej
       szerokości. Inaczej wylądowałby na końcu długiej listy — czyli tam, gdzie go nie widać. */
    .query-results-inline-paginator {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 0;
        padding: 0.5rem max(0.9rem, calc((100% - 1320px) / 2)) calc(0.5rem + env(safe-area-inset-bottom));
    }

    .query-editor-shell { padding-bottom: 4.5rem; }
}
.query-preview-body { flex: 0 0 auto; }

/* Przełącznik archiwum stoi w nagłówku, przy nazwie indeksu — bo rozstrzyga o tym, GDZIE szukamy,
   a nie o tym, czego. Stąd kształt plakietki, a nie kartki z akapitem: całe wyjaśnienie („logi
   archiwalne bywają bez granic komend") siedzi pod kursorem, bo jest zastrzeżeniem, nie instrukcją. */
.qe-archive {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.5rem 0.15rem 0.4rem;
    border: 1px solid var(--app-border);
    border-radius: 999px;
    background: rgba(13, 23, 34, 0.6);
    cursor: pointer;
    white-space: nowrap;
}

.qe-archive:hover { border-color: var(--app-accent); }

.qe-archive .form-check-input {
    margin: 0;
    width: 0.9rem;
    height: 0.9rem;
    flex: 0 0 auto;
}

.qe-archive-text {
    font-size: 0.73rem;
    font-weight: 650;
    color: var(--picker-desc);
}

/* Zaznaczone archiwum zmienia zbiór, w którym szukamy — i ma to być widać bez czytania. */
.qe-archive:has(.form-check-input:checked) {
    border-color: var(--app-accent);
}

.qe-archive:has(.form-check-input:checked) .qe-archive-text {
    color: var(--app-accent);
}

/* Kontrolki filtrów są wspólne z innymi widokami, więc zwężamy je TYLKO tutaj — zejście z wysokości
   globalnie zmieniłoby wygląd „Szukaj unikalnych" i tabeli wyników, których nikt o to nie prosił. */
.qe-dock-build .form-control,
.qe-dock-build .form-select {
    min-height: var(--qe-control-h);
    height: auto;
    padding: 0.18rem 0.5rem;
    border-radius: 8px;
    font-size: var(--qe-control-fs);
    line-height: 1.35;
}

/* Tylko NATYWNA lista — ona jedna rysuje własną strzałkę i musi zostawić jej miejsce. Kontrolka
   wyboru z panelu (`.fvp-summary`) strzałkę rysuje osobnym elementem, więc rezerwacja liczyłaby się
   drugi raz i zjadała 25,6 px z każdego napisu. */
.qe-dock-build select.form-select {
    background-position: right 0.4rem center;
    padding-right: 1.6rem;
}

/* Kolumna podglądu jest węższa niż pełna strona wyników, więc tabela dostaje podłogę szerokości,
   a nie zgodę na ściśnięcie kolumn do jednej litery. Poniżej tej podłogi przewija się w poziomie
   — wewnątrz swojego panelu, nie całą stroną.

   Podłoga zeszła z 52 na 42 rem razem z podniesieniem sufitu kolumny budowania: te dziesięć rem
   przeszło na drugą stronę ekranu. Nie odbywa się to kosztem czytelności kolumn, tylko kosztem
   ODSTĘPÓW — patrz gęstość niżej. Pełne wiersze z powietrzem są na stronie wyników, dokąd prowadzi
   każdy wynik z podglądu. */
.qe-result table {
    min-width: 42rem;
}

/* Gęstość podglądu. Trzy człony w selektorze celowo: arkusz tabeli jest zakresowy (`.razor.css`)
   i przy równej wadze wygrałby ten wczytany później — trzeci człon rozstrzyga to raz, zamiast
   sięgać po `!important`. */
.qe-result .query-results-table thead th {
    padding: 0.24rem 0.45rem;
    font-size: 0.64rem;
    letter-spacing: 0.08em;
}

.qe-result .query-results-table tbody td {
    padding: 0.18rem 0.45rem;
    font-size: 0.77rem;
}

/* Ścieżka programu jest najdłuższą daną w wierszu i to ona decyduje o szerokości tabeli. W podglądzie
   dostaje dwie linie zamiast trzech — do rozpoznania marki i modelu tyle wystarczy, a pełna stoi
   w rozwiniętym wierszu i na stronie wyników. */
.qe-result .query-results-path-clamp {
    -webkit-line-clamp: 2;
}

/* Ścieżka programu bywa dłuższa niż cały wiersz. Trzy linie i wielokropek: tyle wystarczy, żeby
   rozpoznać markę i model, a pełną ścieżkę pokazuje rozwinięty wiersz. Bez tego jeden wpis
   rozpychał wiersz na pięć linii i z ekranu schodziły trzy wyniki zamiast dziewięciu. */
.qe-result .query-results-path-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Każda lista w doku jest TĄ SAMĄ szufladą, co podpowiedzi omniboksa: wyjeżdża od dołu nad kolumnę
   warsztatu, ma jej szerokość i własne przewijanie. Dotąd te reguły celowały w `.qp` — klasę panelu,
   którego już nie ma — więc dla doku nie obowiązywały wcale: lista pól otwierała się w dół, na pełną
   szerokość i ucinała się na krawędzi doku. Po drugie miała inny wygląd niż wszystko obok, bo była
   ostatnim miejscem z dawnym chromem. */
#query-workshop .field-picker,
#query-workshop .operator-picker { position: static; }

/* Lista WARTOŚCI (`.fvp-pop`) jest tu wyjątkiem i musi nim zostać: jej położenie i wysokość liczy
   `dp4FilterValue.place` w oknie przeglądarki (`position: fixed`), bo tylko tak wychodzi poza
   przewijaną kolumnę na każdym ekranie. Gdy dołożyliśmy jej dokowe `absolute` + `bottom`, skrypt
   wciąż wpisywał `top` w pikselach okna — pudełko dostawało oba brzegi naraz i zostawały z niego
   dwa piksele obramowania. Lista komend była wtedy nie do wybrania. Stąd niżej sam WYGLĄD. */
#query-workshop .field-picker-pop,
#query-workshop .operator-picker-pop {
    position: absolute;
    left: 50%;
    right: auto;
    top: auto;
    bottom: 2.9rem;
    transform: translateX(-50%);
    z-index: 1200;
    width: min(46rem, calc(100% - 0.6rem));
    max-width: none;
    max-height: calc(100% - 3.6rem);
    overflow-y: auto;
    border: 1px solid var(--app-border);
    border-radius: 11px;
    background: var(--app-surface);
    box-shadow: 0 -18px 40px rgba(2, 10, 18, 0.5);
}

/* Ta sama szuflada dla oka, bez dotykania geometrii, którą ustawia skrypt. */
#query-workshop .fvp-pop {
    border: 1px solid var(--app-border);
    border-radius: 11px;
    background: var(--app-surface);
    box-shadow: 0 18px 44px rgba(2, 10, 18, 0.55);
}

/* Wnętrze listy tym samym pismem, co reszta doku: podpis rozdziału cicho i drobno, pozycja czytelnie,
   zaznaczona akcentem. */
#query-workshop .field-picker-bar,
#query-workshop .fvp-bar {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--app-border);
    background: transparent;
}

#query-workshop .field-picker-group,
#query-workshop .fvp-group {
    padding: 0.3rem 0.6rem 0.1rem;
    color: #7f9ab4;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    background: transparent;
    border: 0;
}

#query-workshop .field-picker-option,
#query-workshop .fvp-option-row,
#query-workshop .operator-picker-option {
    padding: 0.3rem 0.6rem;
    border-radius: 0;
    font-size: 0.82rem;
}

#query-workshop .field-picker-option.is-active,
#query-workshop .field-picker-option[aria-selected="true"],
#query-workshop .fvp-option-row.is-active {
    background: var(--mode-accent-soft);
    color: #eaf6ff;
}

/* Prawa kolumna doku. Ma własne przewijanie i stałą ramę: to, co się w niej pokazuje, zmienia się
   z każdym wskazaniem, a układ strony nie ma prawa się przy tym ruszać. */
.qw {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    gap: 0.4rem;
}

.qw-head {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.qw-head-verb {
    color: #7f9ab4;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.qw-head-what {
    color: #7fd4f5;
    font-size: 0.82rem;
    font-weight: 700;
}

/* Miejsce nowego warunku: najwyżej trzy pozycje — na początku, za którymś, na końcu. Wygląd jak
   segment z AppSegment (tamte reguły są w arkuszu zakresu komponentu i tu nie dosięgają). */
.qw-place {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.qw-place-label {
    color: #7f9ab4;
    font-size: var(--ui-fs-note);
    font-weight: 700;
}

.qw-place-seg {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    padding: 2px;
    border: 1px solid var(--app-border);
    border-radius: 16px;
    background: var(--app-field-bg);
}

.qw-place-seg button,
.qw-place-pick select {
    height: var(--ui-h-chip);
    padding: 0 0.7rem;
    border: 0;
    border-radius: var(--ui-radius-pill);
    background: transparent;
    color: var(--app-text-muted);
    font: inherit;
    font-size: var(--ui-fs-note);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.qw-place-pick { display: inline-flex; border-radius: var(--ui-radius-pill); }
.qw-place-pick option { color: var(--app-text); background: var(--app-field-bg); }

.qw-place-seg button:hover,
.qw-place-pick select:hover { color: var(--app-text); }

.qw-place-seg button.on,
.qw-place-pick.on {
    background: color-mix(in srgb, var(--app-text) 9%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-text) 22%, transparent);
}

.qw-place-seg button.on,
.qw-place-pick.on select { color: var(--app-text); }

.qw-place-seg button:focus-visible,
.qw-place-pick select:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 0 1px var(--app-accent);
}

/* Formatka ma szerokość policzoną z tego, co w niej stoi, i nie rośnie z szufladą: kolumna
   pytania jest tym, co się czyta, więc każdy piksel ponad tę szerokość należy do niej. */
.qw-body {
    max-width: 38rem;
    margin-inline: auto;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding-right: 0.3rem;
}

.qw-note { margin: 0.35rem 0 0; color: #ffca97; font-size: 0.75rem; }

/* Stan wyjściowy nie jest komunikatem o braku — mówi, co zrobić, i tyle. */
.qw-idle {
    display: grid;
    align-content: center;
    gap: 0.25rem;
    height: 100%;
    padding: 0.8rem 0.4rem;
}

.qw-idle-lead { margin: 0; color: var(--picker-item-text); font-size: 0.88rem; font-weight: 650; }

/* Znacznik przy fragmencie, który przesądził o poziomie wyniku. */
.qd-marker { margin-left: 0.4rem; color: var(--app-warning); font-size: 0.72rem; white-space: nowrap; }

/* ---------- trzy wysokości doku ---------- */

.qe-dock-full { --qe-dock-height: 40vh; }

/* Na niskim ekranie szuflada dostaje większy ułamek okna — bo ułamek jest ten sam, a pikseli mniej.
   Zmierzone: formatka zdarzenia potrzebuje 243 px, przy 768 px wysokości okna dostawała 168.
   Wyniki tracą wtedy miejsce, ale w chwili, gdy poprawia się pytanie, to pytanie jest robotą. */
@media (max-height: 900px) {
    .qe-dock-full { --qe-dock-height: 54vh; }
    .qe-dock-half { --qe-dock-height: 32vh; }
}
.qe-dock-half { --qe-dock-height: 25vh; }

/* Zwinięty dok nie znika — zostawia linijkę ze streszczeniem pytania. Zniknięcie kazałoby szukać,
   gdzie się podziało pytanie; linijka mówi, o co się pyta, i wraca jednym kliknięciem. */
.qe-dock-collapsed { flex: 0 0 auto; min-height: 0; }.qe-dock-collapsed .qe-dock-body{ display: none; }

/* Zakładka wysokości stoi na górnej krawędzi doku, wyśrodkowana, i wystaje ponad nią w większej części. Wysokości doku nie
   zmienia (jest poza przepływem), a żeby nie nachodziła na dolny pasek wyników, dok odsuwa się od niego o tyle, o ile
   zakładka wystaje ponad przerwę sceny. Zakładka wystaje w połowie (zwinięty dok: w 85%), bo pod jej
   dolną częścią stoi pasek „Gdzie szukamy” albo streszczenie pytania. */
.qe-dock {
    --qe-dock-tab-h: 2rem;
    --qe-dock-tab-rise: calc(var(--qe-dock-tab-h) * 0.5);

    position: relative;
}

@media (min-width: 1181px) {
    .qe-dock { margin-top: max(0rem, calc(var(--qe-dock-tab-rise) - var(--qe-gap))); }
}

.qe-dock-collapsed { --qe-dock-tab-rise: calc(var(--qe-dock-tab-h) * 0.85); }

.qe-dock-grip {
    position: absolute;
    top: calc(var(--qe-dock-tab-rise) * -1);
    left: 50%;
    z-index: 3;
    transform: translateX(-50%);
}

/* Środek doku przycina treść do zaokrąglonych rogów — sam dok nie może, bo zakładka wystaje poza niego. */
.qe-dock-inner {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: inherit;
    /* Dolna część zakładki wchodzi w dok; ten pas (z wnętrza doku, nie z jego wysokości) trzyma pod nią pusto. */
    padding-top: max(0rem, calc(var(--qe-dock-tab-h) - var(--qe-dock-tab-rise) - 0.15rem));
}

/* Zwinięty dok: jedna linijka, w której widać, CO TU DZIAŁA. Stało w niej dotąd całe zdanie opisu
   sklejone średnikami — czterysta znaków urwanych w połowie ostatniego warunku. Teraz każdy warunek
   jest osobnym faktem: cichy podpis, jasna wartość. */
.qe-dock-line {
    display: flex;
    align-items: center;
    gap: var(--ui-sp-3);
    width: 100%;
    padding: 0.35rem 0.8rem 0.45rem;
    border: 0;
    background: transparent;
    color: var(--app-text);
    font: inherit;
    font-size: var(--ui-fs-note);
    text-align: left;
    cursor: pointer;
}

.qe-dock-line-facts {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    gap: 0.3rem;
    min-width: 0;
    overflow: hidden;
}

.qe-dock-fact {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    flex: 0 1 auto;
    min-width: 0;
    padding: 0.14rem 0.5rem;
    border: 1px solid var(--app-border);
    border-radius: var(--ui-radius-pill);
    background: color-mix(in srgb, var(--app-text) 5%, transparent);
    white-space: nowrap;
}

.qe-dock-fact-label { color: var(--app-text-dim); }

.qe-dock-fact-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

/* Pierwszy fakt mówi, czym odpowie pytanie — stoi w barwie trybu, jak znacznik w pasku zakresu. */
.qe-dock-fact:first-child {
    border-color: var(--mode-accent-border);
    background: var(--mode-accent-soft);
}

.qe-dock-fact.is-more { color: var(--app-text-dim); }

.qe-dock-fact.is-empty { border-style: dashed; color: var(--app-text-dim); }

/* Wyjście z czytania ma wyglądać na przycisk, a nie na szept w rogu: zwinięty dok jest jedynym
   miejscem, z którego wraca się do pytania. */
/* Wezwanie do rozwinięcia: sam wyraźny tekst w barwie czynności „edytuj” (`--act-edit` z systemu przycisków), pośrodku wolnego
   miejsca linijki — bez obrysu i tła, bo klikalna jest cała linijka. Pod kursorem i przy fokusie podświetla się cała linijka,
   a tekst jaśnieje. Tylko tokeny. */
.qe-dock-line-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-sp-2);
    flex: 0 0 auto;
    margin: 0 auto;
    color: color-mix(in srgb, var(--act-edit) 85%, var(--act-light));
    font-size: var(--ui-fs-body);
    font-weight: 700;
    white-space: nowrap;
}

.qe-dock-line:hover,
.qe-dock-line:focus-visible {
    background: color-mix(in srgb, var(--act-edit) 12%, transparent);
}

.qe-dock-line:hover .qe-dock-line-cta,
.qe-dock-line:focus-visible .qe-dock-line-cta {
    color: var(--act-light);
}

.qe-dock-line:focus-visible {
    outline: 2px solid var(--act-edit);
    outline-offset: -2px;
}

/* Podpowiedzi i krok relacji WYJEŻDŻAJĄ OD DOŁU nad kolumnę warsztatu, zamiast rozpychać ją w dół.
   Powód jest mierzalny: dok ma ułamek ekranu, a lista podpowiedzi bywa wyższa niż on cały — rozpychana
   w układzie ucinała się na krawędzi strefy przewijania, a wypychana w dół spychała edytor poza widok.
   Szuflada zasłania edytor na czas wyboru i znika Escapem, więc poprzedni warunek zostaje tam, gdzie był. */
.qw { position: relative; }

/* Kotwicą szuflady jest KOLUMNA WARSZTATU, nie pole wejściowe. Domyślnie okno podpowiedzi wisi na
   `.qsa-field` (kilkadziesiąt pikseli wysokości), więc `max-height: 100%` liczone od niego dawało
   listę wysoką na dwa piksele — technicznie obecną, a na ekranie niewidoczną. */
#query-workshop .qsa,
#query-workshop .qsa-field { position: static; }

/* Omnibox stoi ZAWSZE w tym samym miejscu — tuż pod nagłówkiem, na szerokości formatki.
   Wyśrodkowany w wolnym miejscu przenosił się przy każdej innej wysokości tego, co pod nim,
   więc oko szukało go za każdym razem od nowa. */
.qw-hero {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: var(--ui-sp-2);
    padding: 0 0.4rem;
}

.qw-hero > .qsa { width: min(38rem, 100%); }

.qw-hero .qsa-input {
    height: auto;
    padding: 0.42rem 0.7rem;
    border-radius: 10px;
    border-color: var(--app-border-strong);
    background: var(--app-field-bg);
    font-size: var(--ui-fs-body);
}

/* Lista podpowiedzi jest tu ZWYKŁĄ treścią pod polem, a nie warstwą nad nim: w trybie dopisywania
   pod spodem i tak nic nie stoi. Nakładka wyrastająca od dołu w górę zasłaniała pole razem z tym,
   co człowiek właśnie napisał — a to jedyna rzecz, którą musi w tej chwili widzieć. */
.qw-hero .qsa-pop {
    position: static;
    max-height: none;
    margin-top: var(--ui-sp-2);
    box-shadow: none;
    transform: none;
}

.qw-hero .qsa-input:focus {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px var(--mode-accent-soft);
}

/* Dwie drogi dalej dzielą szerokość kolumny po połowie: to są DWA równorzędne wyjścia z warunku,
   a nie przycisk i jego mniejszy sąsiad. Usuwanie zostaje z boku, bo nie jest wyjściem. */
.qw-next {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: var(--ui-sp-2);
    padding-top: var(--ui-sp-2);
    border-top: 1px solid rgba(42, 60, 82, 0.8);
}

/* Poprzedni / następny krok (A93) — przyciski noszą klasy systemu (`act-btn is-nav is-sm`), tu tylko układ: strzałka, numer
   sąsiada i słowo w jednym rzędzie, licznik „N z M" między nimi. Grupa stoi po lewej, zanim pojawią się wyjścia. */
.qw-steps {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-sp-2);
}

.qw-step {
    gap: var(--ui-sp-1);
}

.qw-step-count {
    min-width: 3.2rem;
    text-align: center;
    color: var(--picker-desc);
    font-size: var(--ui-fs-note);
    white-space: nowrap;
}

/* Przy kolumnie, w której kroki, „Dodaj" i „Zamknij" ledwo się mieszczą, zdanie „Zmiany są już w pytaniu" znika całe — ucięte do
   „Zmiany s…" tylko szumiałoby. Wraca na szerokim ekranie. */
@media (max-width: 1279px) {
    .qw-steps ~ .qw-next-says { display: none; }
}

/* Jeden niski wiersz: przyciski nie łamią podpisów ani się nie zwijają — ustępuje zdanie o zmianach. */
.qw-next .act-btn,
.qw-steps { flex: 0 0 auto; white-space: nowrap; }

/* Awaryjnie, przy bardzo wąskiej kolumnie, wiersz może się zawinąć zamiast uciąć przyciski. */
@media (max-width: 899px) {
    .qw-next { flex-wrap: wrap; }
}

/* Zdanie, nie przycisk: mówi, że nic nie trzeba zatwierdzać. Stoi po lewej, bo to stan, a nie droga. */
.qw-next-says {
    /* Ustępuje miejsca przyciskom: przy wąskiej kolumnie zdanie się ucina, a przyciski zostają w jednym rzędzie. */
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 0 0 var(--ui-sp-3);
    color: var(--picker-desc);
    font-size: var(--ui-fs-note);
}

/* Wyjścia z warsztatu („Dodaj kolejny warunek”, „Zamknij”) noszą wspólne klasy systemu przycisków (`act-btn`, A71) —
   wygląd jest w app.css. `.qw-next-btn` zostaje hakiem dla skryptów i testów, bez własnych reguł wyglądu. */

/* Wybór trwa: edytor wyżej przygasa, a oba wyjścia stają się jedyną jasną rzeczą w kolumnie. */
.qw.is-choosing .qw-body,
.qw.is-choosing .qw-head { opacity: 0.4; transition: opacity 140ms ease; }

/* Wyjście z dopisywania stoi w nagłówku warsztatu, bo to jego stan — a nie czynność przy warunku. */
.qw-head-back {
    margin-left: auto;
}

/* Wszystko w warsztacie stoi w JEDNEJ kolumnie, wyśrodkowanej i zajmującej PRAWIE CAŁĄ szerokość
   doku: miejsca jest tu dużo i pusta prawa połowa nie ma co z nim zrobić. Sufit (74 rem) zostaje
   tylko na ultraszerokie ekrany, gdzie wiersz tekstu przestaje się czytać od lewej do prawej.
   Miarę trzyma zmienna, więc nagłówek, edytor, szuflada i pasek wyjść są zawsze tej samej szerokości. */

.qw-head,
.qw-next {
    width: var(--qw-column);
    margin-inline: auto;
    /* Pas wyjść nie jest treścią formatki, tylko jej brzegiem — im niższy, tym więcej zostaje dla
       pytania. Czterdzieści cztery piksele na dwa przyciski i jedno zdanie to była jedna trzecia
       tego, czego formatce brakowało, żeby zmieścić się na ekranie 1366×768. */
    padding-block: var(--ui-sp-1);
    gap: var(--ui-sp-2);
}

.qw-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.qw-body > * { width: var(--qw-column); }

/* Edytory przestają być kartami. W panelu były wierszami listy i obwódka odgradzała jeden warunek od
   drugiego; w warsztacie jest jeden i obwódka odgradza go już tylko od pustego miejsca. */

#query-workshop .qp-cmd,
#query-workshop .qp-cond {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
}#query-workshop .qp-cmd-end{
    border: 0;
    background: transparent;
}
#query-workshop .qp-cmd-end { padding: 0.3rem 0 0; }

/* Wszystkie panele warsztatu — relacja, odstęp, podpowiedzi — mają teraz TEN SAM kształt: jedna
   obwódka na całość, nic w środku nie dostaje własnej. Wcześniej każdy z nich był kartą, w której
   siedziały kolejne karty: ściąga klawiszy w ramce, pola OD/DO w ramkach, przykład w ramce. Przy
   czterech poziomach obwódek nie widać już, co jest pytaniem, a co odpowiedzią.

   Przestrzeni jest więcej, nie mniej: panel jest szerszy i luźniejszy, bo w doku stoi jedna rzecz
   na raz. Chudnie DEKORACJA, nie odstępy. */
#query-workshop {
    --qw-column: min(74rem, 100%);
    --qw-panel: min(70rem, calc(100% - 0.6rem));
}

/* Łącznik, odstęp i przełączniki bloku były wierszami listy — wyrównanie do lewej miało tam sens,
   bo obok stały następne wiersze. W warsztacie stoi JEDNA rzecz na szerokiej kolumnie, więc
   przyklejona do lewej wygląda jak wyrwany kawałek czegoś większego. Wszystko idzie na środek,
   w jednej mierze odstępów. */

#query-workshop .qp-cmd-end {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

/* Wybór rodzaju łącznika to ten sam wybór, co kafelki relacji — więc wygląda tak samo: cicha
   obwódka, akcent tylko na wybranym. Dotąd te same dwie rzeczy miały dwa różne wyglądy. */

#query-workshop .qp-neg-seg button {
    padding: 0.24rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
}#query-workshop .qp-neg-seg{
    border: 1px solid var(--app-border);
    border-radius: 999px;
    background: rgba(9, 16, 25, 0.5);
    overflow: hidden;
}#query-workshop .qp-neg-seg button.on-yes,
#query-workshop .qp-neg-seg button.on-no{
    background: var(--mode-accent-soft);
    color: #eaf6ff;
    font-weight: 650;
}

#query-workshop .qp-neg-seg button.on-no { background: rgba(240, 111, 127, 0.16); }

/* ---- pola ----

   Skórka pól stoi na KLASIE warsztatu, nie na jego identyfikatorze, i to jest różnica, która
   coś znaczy: widok przeniesiony na prymityw `AppField` ubiera swoje kontrolki sam, a arkusz
   zakresowy prymitywu nie ma jak przebić wagi identyfikatora. Zamiast dokładać trzecią warstwę,
   która tamtą odkręca, schodzi waga tej. Widoki jeszcze nieprzeniesione biorą stąd wygląd bez
   zmian — `.qw` i `#query-workshop` to ten sam element. */

.qw .form-control,
.qw .form-select,
.qw .fvp-summary {
    min-height: 0;
    height: auto;
    padding: 0.32rem 0.55rem;
    border: 1px solid var(--app-border);
    border-radius: 9px;
    background: #0d1722;
    box-shadow: none;
    color: var(--app-text);
    font-size: 0.85rem;
    line-height: 1.4;
}

.qw .form-control:focus,
.qw .form-select:focus,
.qw .fvp-summary:focus {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 2px var(--mode-accent-soft);
    outline: 0;
}

.qw .form-control::placeholder { color: #6f8ba3; }

/* ---- zdarzenie ----

   Wygląd zdarzenia stoi w jego własnym arkuszu zakresowym. Tu zostaje to, co robi z nim DOK:
   kółko z literą kroku schodzi z formatki, bo ten sam znak stoi już w zdaniu po lewej („1A")
   i w nagłówku warsztatu („1A · zdarzenie w komendzie 1"). */

.qw .qp-ev > .qp-ev-no { display: none; }

/* Przełącznik dwustanowy, lista trzech możliwości i przycisk „albo…" to jeden rodzaj rzeczy:
   WYBÓR. Miały dotąd trzy różne wyglądy — segment z wypełnieniem, pastylka z obwódką i przycisk
   z kreską — więc trzeba było się uczyć, że robią to samo. */

#query-workshop .qp-neg-seg button,
#query-workshop .fvp-option{
    padding: 0.24rem 0.65rem;
    border-radius: 999px;
    background: transparent;
    color: #c3d9ec;
    font-size: 0.78rem;
    font-weight: 500;
    box-shadow: none;
}#query-workshop .qp-neg-seg{
    border-color: var(--app-border);
    background: rgba(9, 16, 25, 0.5);
    box-shadow: none;
}

/* Zrzut i jego czynności należą do tabeli, nie do formularza: ta sama obwódka, ta sama waga. */
.query-detail-content pre { color: #c8d8e8; }

/* Każdy krok ma widoczne wyjście. Dopóki jedyną drogą był Escape, krok wyboru relacji był pułapką
   dla kogoś, kto nie trzyma ręki na klawiaturze — a to jest aplikacja webowa, nie edytor tekstu. */
.qsa-ways {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    padding: 0 0.95rem 0.7rem;
}

.qsa-way {
    padding: 0.26rem 0.8rem;
    border: 1px solid var(--app-border-strong);
    border-radius: 9px;
    background: transparent;
    color: #a9c2d8;
    font-size: 0.8rem;
}

.qsa-way:hover { border-color: var(--app-accent); color: #e6f6ff; }

/* Ściągi klawiszowe zniknęły z ekranu. Skróty zostały — ale to, co widać, mówi teraz o PYTANIU,
   a nie o tym, jak się nim steruje. Osiem linijek „↑↓ wybór · Enter zatwierdza" na jednym ekranie
   robiło z narzędzia instrukcję obsługi samego siebie. */
#query-workshop kbd { display: none; }

/* Koniec z wyszarzaniem. Przygaszanie edytora przy wyborze miało pokazać, gdzie jest uwaga —
   a pokazywało, że coś się właśnie zepsuło: pół kolumny bladło bez powodu widocznego na ekranie. */
.qw.is-choosing .qw-body,
.qw.is-choosing .qw-head { opacity: 1; }

/* =========================================================================================
   FORMATKI WARSZTATU — jedna wysokość, jeden podpis, jedna oś

   Edytory przyszły tu z panelu po lewej: wąska kolumna, wszystko dosunięte do lewej krawędzi,
   a podpisy kolumn ustawione na wcięciach liczonych dla tamtej szerokości. W doku kolumna jest
   szeroka i wyśrodkowana, więc te same reguły dawały formatkę przyklejoną do lewej, podpisy obok
   pól, do których nie należą, i po trzy różne wysokości kontrolek w jednym rzędzie.

   Trzy zasady na całą tę sekcję:
   1. każda kontrolka ma tę samą wysokość, ten sam promień i ten sam stopień pisma;
   2. formatka to siatka wyśrodkowana w kolumnie, a podpis stoi NAD swoim polem — jedna i ta sama
      siatka dla wiersza podpisów i dla wiersza pól, więc nie mają prawa się rozjechać;
   3. czynność niszcząca nie jest jednym z wyjść: stoi w nagłówku tego, co się edytuje.
   ========================================================================================= */

#query-workshop {
    --qw-field-h: 30px;
    --qw-field-r: 8px;
    --qw-caption: #7f9ab4;
}

/* ---- jedna wysokość dla wszystkiego, w co się klika i co się wpisuje ---- */

#query-workshop .form-control:not(.qsa-input),
#query-workshop .form-select,
#query-workshop .fvp-summary,
#query-workshop .field-picker-summary,
#query-workshop .operator-picker-summary {
    min-height: var(--qw-field-h);
    height: var(--qw-field-h);
    padding: 0 0.5rem;
    border-radius: var(--qw-field-r);
    font-size: 0.79rem;
}

/* Para „usługa + kod odmowy" mieszka w JEDNYM komponencie i to on ją łamał: dwa wybory w rzędzie
   z `flex-wrap`, więc dłuższa nazwa przerzucała drugi wybór do następnego wiersza i cała formatka
   podskakiwała. Zmierzone na ekranie: ten sam warunek raz w jednym wierszu, raz w dwóch. */
#query-workshop .dialog-refusal-input > div,
#query-workshop .dialog-outcome-input,
#query-workshop .dialog-outcome-service {
    flex-wrap: nowrap;
    min-width: 0;
}

#query-workshop .dialog-refusal-input .dialog-refusal-pick {
    flex: 1 1 0;
    min-width: 0;
}

/* ---- wyjścia i usuwanie ---- */

/* „usuń” przy rzeczy, której dotyczy, stoi w jej nagłówku jako przycisk niszczący systemu (`act-delete`): czerwony obrys
   i tekst już w spoczynku (A95 — neutralny, z czerwienią dopiero pod kursorem, nikt go nie widział). Wygląd niesie system
   przycisków; tu tylko miejsce. */
.qw-head-drop {
    margin-left: auto;
}

/* ---- dwa rozmiary i ani jednego więcej ----

   Pomiar na JEDNYM zdarzeniu dawał pięć różnych wysokości w jednej formatce: 22 (✕ przy wartości),
   23 („+ albo…"), 28 (czipy ustawień i przełącznik „jest / nie ma"), 30 (pola), 32 (belka ustawień
   treści). Każda z nich brała się z innego wcięcia liczonego w innym miejscu i w innym czasie.
   Zostają DWIE: pole ma 30 px, czip 26 px. */

#query-workshop { --qw-chip-h: 26px; }#query-workshop .qp-neg-seg button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--qw-chip-h);
    min-height: var(--qw-chip-h);
    padding-block: 0;
    line-height: 1;
}

/* Komunikat o warunku, który nic nie zawęża, to zdanie do przeczytania — nie plakat. Bootstrapowy
   `alert` wchodził tu z własnym promieniem, obwódką i wagą pisma, przez co w oknie wyników zajmował
   więcej miejsca niż pierwsze trzy wiersze wyniku razem. */
.query-editor-shell .alert-warning {
    padding: 0.4rem 0.7rem;
    border-radius: 9px;
    border-color: rgba(240, 182, 76, 0.35);
    background: rgba(240, 182, 76, 0.07);
    color: #e8d3ac;
    font-size: 0.76rem;
    line-height: 1.45;
}

.query-editor-shell .alert-warning strong { color: #f6e0b6; font-weight: 650; }

/* ---- druga część tej samej formatki ----

   Komenda ma dwa pytania: KTÓRA (numer) i JAK SIĘ SKOŃCZYŁA. To jedna rozmowa o jednej komendzie,
   więc stoją pod sobą w jednej formatce, rozdzielone samą linią — nie dwiema kartami i nie dwoma
   wskazaniami w zdaniu. */
.qw-part {
    margin-top: var(--ui-sp-2);
    padding-top: var(--ui-sp-2);
    border-top: 1px solid rgba(42, 60, 82, 0.8);
}

/* Zakończenie jest drugą połową rozmowy o komendzie i ma stać w TEJ SAMEJ kolumnie, co jej numer.
   Wyśrodkowane w swojej oprawie zaczynało się o dwadzieścia pikseli dalej niż wiersze nad nim —
   dwie osie w jednej formatce widać od razu, choć trudno powiedzieć, co dokładnie jest nie tak. */
.qw .qp-cmd-end { align-items: stretch; }


/* ---------- układ dopasowany do miejsca pracy (U37) ----------
   Praca w szynie: szyna podsumowania bierze kolumnę od góry wyników do dołu sceny — także obok doku — a wyniki i dok
   zwężają się o jej szerokość. Dok nie zmienia wysokości. Praca w pytaniu (albo przełącznik „Auto” wyłączony):
   dok na całą szerokość, szyna stoi w ramce wyników, jak zawsze. Szyna wychodzi z ramki wyników (`position: absolute`
   względem sceny — przycinanie ramki dotyczy tylko potomków, których blok zawierający stoi w środku), a ramka
   i dok odsuwają się od niej marginesem. Szyna zwinięta i pełny widok nie dostają kolumny. Poniżej progu edytora
   (1180 px) układ się nie zmienia. Szerokość kolumny to `--ui-rail-w` (ui-scale.css): 19 rem do 1280 px, wyżej 25 rem. */
@media (min-width: 1181px) {
    .qe-stage { position: relative; }

    .qe-stage .qe-result,
    .qe-stage .qe-dock {
        transition: margin-right 0.22s ease;
    }

    .qe-stage[data-work-area="rail"]:has(.sr-layout.is-bounded > .sr-rail:not(.is-closed):not(.is-full)) .qe-result,
    .qe-stage[data-work-area="rail"]:has(.sr-layout.is-bounded > .sr-rail:not(.is-closed):not(.is-full)) .qe-dock {
        margin-right: calc(var(--sr-rail-width, var(--ui-rail-w)) + var(--ui-sp-3));
    }

    .qe-stage[data-work-area="rail"]:has(.sr-layout.is-bounded > .sr-rail:not(.is-closed):not(.is-full)) .sr-layout.is-bounded > .sr-rail:not(.is-closed):not(.is-full) {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 4;
        width: var(--sr-rail-width, var(--ui-rail-w));
        animation: qe-rail-grow 0.22s ease-out;
    }
}

@keyframes qe-rail-grow {
    from { clip-path: inset(0 0 55% 0); }
    to { clip-path: inset(0); }
}

@media (prefers-reduced-motion: reduce) {
    .qe-stage .qe-result,
    .qe-stage .qe-dock { transition: none; }

    .qe-stage[data-work-area="rail"] .sr-layout.is-bounded > .sr-rail { animation: none; }
}

/* Przełącznik „Komendy / Programy” stoi przy nazwie indeksu, bo o niej rozstrzyga — ten sam kształt plakietki co
   archiwum. Strona zaznaczona to poziom, na który leci pytanie; „automatycznie” mówi, czy wynika on z pytania. */
.qe-scope {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.qe-scope-label {
    font-size: 0.73rem;
    font-weight: 650;
    color: var(--picker-desc);
}

.qe-scope-opt {
    padding: 0.12rem 0.55rem;
    border: 1px solid var(--app-border);
    border-radius: 999px;
    background: rgba(13, 23, 34, 0.6);
    color: var(--picker-desc);
    font-size: 0.73rem;
    font-weight: 650;
    line-height: 1.3;
    cursor: pointer;
}

.qe-scope-opt:hover { border-color: var(--app-accent); }

.qe-scope-opt.is-on {
    border-color: var(--app-accent);
    color: var(--app-accent);
}

/* Strona niedostępna dla tego pytania: przygaszona, ale klikalna — kliknięcie pokazuje powód. */
.qe-scope-opt.is-blocked {
    opacity: 0.55;
    cursor: help;
}

.qe-scope-mode,
.qe-scope-auto {
    font-size: 0.7rem;
    color: var(--picker-label);
}

.qe-scope-auto {
    padding: 0.1rem 0.45rem;
    border: 1px dashed var(--app-border);
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
}

.qe-scope-auto:hover { border-color: var(--app-accent); color: var(--app-accent); }

.qe-scope-why {
    flex-basis: 100%;
    font-size: 0.72rem;
    color: var(--picker-desc);
}