/* ---------- pasek poziomu: informuje, nie pyta ---------- */

.qp-level {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    background: var(--picker-bar);
}

.qp-level-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--picker-label);
}

.qp-level-out {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    border: 1px solid rgba(71, 209, 140, 0.5);
    background: rgba(71, 209, 140, 0.1);
    color: #cfeede;
    font-size: 0.78rem;
    font-weight: 750;
}

.qp-level-note {
    flex: 1 1 16rem;
    min-width: 0;
    color: var(--picker-desc);
    font-size: 0.76rem;
}

/* ---------- strefy ---------- */

.qp-zone {
    border: 1px solid var(--app-border);
    border-radius: 13px;
    background: rgba(13, 23, 34, 0.6);
}

.qp-zone-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--picker-rule);
}

.qp-zone-name {
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #8acfeb;
}

.qp-zone-count {
    font-size: 0.72rem;
    color: var(--picker-desc);
    font-variant-numeric: tabular-nums;
}

.qp-zone-body {
    padding: 0.55rem 0.6rem;
    display: grid;
    gap: 0.45rem;
}

/* ---------- kontekst: cztery ramki ---------- */

.qp-frames {
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: 0.4rem 0.55rem;
    align-items: start;
}

.qp-frame-label {
    padding: 0.35rem 0.6rem 0 0;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--picker-label);
    text-align: right;
    border-right: 2px solid rgba(120, 180, 215, 0.22);
}

.qp-frame-body {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
}

@media (max-width: 42rem) {
    .qp-frames { grid-template-columns: minmax(0, 1fr); }

    .qp-frame-label {
        text-align: left;
        border-right: 0;
        border-left: 2px solid rgba(120, 180, 215, 0.22);
        padding: 0 0 0 0.5rem;
    }
}

.qp-cond {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
    padding: 0.2rem 0.3rem;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    background: rgba(21, 31, 44, 0.7);
}

.qp-cond-noted {
    border-color: rgba(240, 182, 76, 0.45);
    background: rgba(36, 30, 18, 0.5);
}

.qp-cond-note {
    flex: 1 1 100%;
    margin: 0.15rem 0 0;
    padding: 0.35rem 0.55rem;
    border-left: 2px solid rgba(240, 182, 76, 0.6);
    border-radius: 0 6px 6px 0;
    background: rgba(9, 17, 27, 0.45);
    color: var(--picker-desc);
    font-size: 0.73rem;
    line-height: 1.45;
}

/* Skreślenie bloku (`qp-cmd-drop`) jest odwracalnym zabieraniem: wygląd niesie system przycisków (`act-btn is-nav
   is-revoke is-sm is-icon`, app.css); tu tylko miejsce w wierszu. */
.qp-cmd-drop { margin-left: auto; align-self: center; }

/* ---------- dokładanie ---------- */

/* „+ zdarzenie w tej komendzie” to zwykły przycisk systemu (`act-btn act-edit is-sm`); tu tylko miejsce w siatce. */
.qp-add {
    justify-self: start;
}

/* Ramka bloku NIE przycina zawartości. Przycinała, bo tak najtaniej dostaje się zaokrąglone rogi —
   ale razem z rogami obcinała szuflady wyboru, które są od niej szersze i mają prawo z niej wystawać.
   Rogi robią więc nagłówek i stopka własnym zaokrągleniem, a szuflada wychodzi tam, gdzie musi. */
.qp-cmd {
    border: 1px solid rgba(127, 196, 230, 0.34);
    border-left: 3px solid var(--qp-cmd, rgba(127, 196, 230, 0.34));
    border-radius: 12px;
    background: rgba(18, 30, 43, 0.9);
}

/* Pasek „jest / NIE MA takiej komendy" — stoi NAD blokiem, bo mówi o całym bloku, a nie o jego polu.
   Zaprzeczony blok jest przy tym zamalowany w całości: zasięg przeczenia ma być widoczny jako OBSZAR,
   a nie do wyczytania z etykiety. Przy osi maluje się jedna część, tutaj cały blok. */

.qp-cmd-absent {
    border-color: rgba(240, 111, 127, 0.5);
    border-left-color: var(--app-danger);
    background: rgba(52, 24, 32, 0.72);
}

/* Podpowiedź o wyborze kilku komend dzieli wiersz z polem, dopóki się mieści — własny wiersz robiła
   z niej szerokość, nie ważność. Przy ciasnocie schodzi niżej sama. */

.qp-cmd-warning {
    margin: 0;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--picker-rule);
    background: rgba(36, 30, 18, 0.5);
    color: #f3d79a;
    font-size: 0.74rem;
}

/* Notka mówi, PO CZYM szukamy, a nie że coś jest nie tak — więc w tonie treści, nie ostrzeżenia. */

.qp-cmd-inner { padding: 0.4rem 0.45rem; display: grid; gap: 0.15rem; justify-items: stretch; }

/* Podpis strefy i nagłówki kolumn stoją w jednym rzędzie: to jeden nagłówek tabeli, a nie dwa
   piętra podpisów nad tym samym wierszem. */
.qp-cmd-inner-label {
    font-size: 0.66rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--picker-desc);
    padding-bottom: 0.35rem;
}

/* przełącznik „jest / nie ma" — jeden na CZĘŚĆ osi (N2), stoi nad nią zamiast dawnego podpisu */

.qp-neg {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    padding: 0.1rem 0 0.35rem;
}

.qp-neg-label {
    font-size: 0.66rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--picker-desc);
}

.qp-neg-seg { display: flex; gap: 0.25rem; }

.qp-neg-seg button {
    font: inherit;
    font-size: 0.73rem;
    font-weight: 700;
    padding: 0.1rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--app-border-strong);
    background: transparent;
    color: var(--picker-item-text);
    cursor: pointer;
}

/* Wybrany stan twierdzący jest akcentem, zaprzeczony ostrzeżeniem: „nie ma" zmienia znaczenie
   całej części osi, więc ma być widać z drugiego końca ekranu, a nie po przeczytaniu etykiety. */
.qp-neg-seg button.on-yes {
    border-color: var(--app-accent);
    background: rgba(55, 182, 232, 0.14);
    color: #dcf1fb;
    box-shadow: 0 0 0 1px rgba(55, 182, 232, 0.7) inset;
}

.qp-neg-seg button.on-no {
    border-color: var(--app-danger);
    background: rgba(240, 111, 127, 0.16);
    color: #fbdde2;
    box-shadow: 0 0 0 1px rgba(240, 111, 127, 0.75) inset;
}

.qp-neg-echo { color: var(--picker-desc); font-size: 0.72rem; }

/* zakończenie — stopka bloku, domknięcie osi (D10) */

.qp-cmd-end {
    display: grid;
    gap: 0.28rem;
    padding: 0.4rem 0.45rem;
    border-top: 1px solid var(--picker-rule);
    background: linear-gradient(180deg, rgba(19, 33, 47, 0.25) 0%, rgba(25, 44, 62, 0.6) 100%);
    border-radius: 0 0 11px 11px;
}

/* Stoi pod segmentami werdyktu i pokazuje się dopiero przy werdykcie, który powód dopuszcza —
   „zakończona" i „urwana" żadnego nie mają, a puste pole uczyłoby, że mają. */
.qp-cmd-reason {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.3rem;
    padding-top: 0.3rem;
    border-top: 1px dashed var(--picker-rule);
}

.qp-cmd-reason .qp-editor { flex: 1 1 12rem; }

/* Kliknięcie fragmentu w „Twoim pytaniu” kończy się na konkretnym warunku. Krótki błysk pokazuje
   cel także wtedy, gdy pole było już blisko środka ekranu i samo przewinięcie jest ledwo widoczne. */
.qp-summary-target { animation: qp-summary-target 1.25s ease-out; }
@keyframes qp-summary-target {
    0%, 28% { outline: 2px solid #64d9ef; outline-offset: 3px; background-color: rgba(80, 205, 232, .16); }
    100% { outline: 2px solid transparent; outline-offset: 3px; background-color: transparent; }
}

/* Wysuwana lista bierze TOKENY PICKERA, a nie własne kolory. Ten sam błąd popełniła kiedyś
   powierzchnia podpowiedzi z indeksu: w jednym wierszu edytora sąsiadowały ze sobą trzy różne
   szuflady, każda z innym tłem i promieniem. */

.qsa { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }

.qsa-help kbd, .qsa-link-key kbd { padding: 0.06rem 0.28rem; border: 1px solid currentColor; border-radius: 4px; background: transparent; color: color-mix(in srgb, var(--app-accent) 45%, var(--act-light)); font: 700 0.62rem/1.2 inherit; }

[data-query-nav]:focus-visible { outline: 2px solid #a0eaff; outline-offset: 2px; }

.qsa-field { position: relative; min-width: 0; }
.qsa-label { display: block; margin: 0 0 0.35rem; color: var(--app-text-muted); font-size: 0.78rem; font-weight: 600; }

.qsa-input {
    width: 100%;
    font-size: 0.82rem;
    border-color: rgba(127, 196, 230, 0.55);
}

.qsa-pop {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 0.35rem);
    z-index: 1200;
    max-height: var(--picker-max-height);
    overflow-y: auto;
    background: var(--picker-surface);
    border: 1px solid var(--picker-border);
    border-radius: var(--picker-radius);
    box-shadow: var(--picker-shadow);
}

.qsa-pop-hint,
.qsa-pop-foot {
    margin: 0;
    padding: 0.35rem 0.6rem;
    color: var(--picker-desc);
    font-size: 0.71rem;
}

.qsa-pop-hint { background: var(--picker-bar-soft); border-bottom: 1px solid var(--picker-rule); }
.qsa-pop-foot { border-top: 1px solid var(--picker-rule); }

/* Ściąga klawiszowa — cichsza od wszystkiego innego w liście, bo mówi o narzędziu, nie o pytaniu. */
.qsa-pop-keys {
    margin: 0;
    padding: 0.3rem 0.6rem;
    border-top: 1px solid var(--picker-rule);
    color: var(--picker-label);
    font-size: 0.66rem;
    letter-spacing: 0.02em;
}

.qsa-opt {
    display: grid;
    grid-template-columns: 5.6rem minmax(0, 1fr);
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.3rem 0.6rem;
    border-left: 3px solid transparent;
    border-radius: var(--picker-item-radius);
    color: var(--picker-item-text);
    cursor: pointer;
}

.qsa-opt:hover { background: var(--picker-item-hover); color: var(--picker-item-text-hover); }

.qsa-opt.on {
    background: var(--picker-item-selected);
    border-left-color: var(--picker-tick);
    color: var(--picker-item-text-selected);
}

/* Pozycja, która niczego nie wstawia (przekazanie do asystenta) — wygląda inaczej, bo robi
   co innego. */
.qsa-opt.inert { color: var(--picker-desc); }

/* Lista wartości jednego pola nie ma czym wypełnić kolumny nagłówka — i nie ma potrzeby. */
.qsa-opt.bare { grid-template-columns: minmax(0, 1fr); }

.qsa-opt-sec {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--picker-label);
}

.qsa-opt-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.qsa-opt-label { font-size: 0.8rem; }
.qsa-opt-label mark { background: transparent; color: var(--app-accent); font-weight: 700; }
.qsa-opt-desc { font-size: 0.7rem; color: var(--picker-desc); line-height: 1.4; }
.qsa-opt-dest { font-size: 0.7rem; color: var(--picker-label); }

.qsa-tag { margin-left: 0.35rem; font-size: 0.67rem; white-space: nowrap; }
.qsa-tag.yes { color: #7fd2a8; }
.qsa-tag.no { color: var(--picker-empty); }
.qsa-tag.wait { color: var(--picker-desc); }

/* Łącznik — skala odległości, od najciaśniejszego związku do najluźniejszego. */
.qsa-link { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; padding: 0.28rem 0.4rem; border-left: 3px solid var(--app-accent); border-radius: 6px; background: rgba(55, 182, 232, 0.07); font-size: 0.72rem; }
.qsa-link-note { color: #c7dce7; }
.qsa-link-key { display: inline-flex; gap: 0.18rem; }
.qsa-gap-label { color: #d9edf5; font-size: 0.74rem; font-weight: 700; }
.qsa-gap-note { color: var(--picker-desc); font-size: 0.68rem; }

.qsa-seg { display: inline-flex; border: 1px solid var(--picker-border); border-radius: 999px; overflow: hidden; }

.qsa-seg button {
    border: 0;
    padding: 0.12rem 0.5rem;
    background: transparent;
    color: var(--picker-desc);
    font: inherit;
    font-size: 0.7rem;
    cursor: pointer;
}

.qsa-seg button + button { border-left: 1px solid var(--picker-rule); }
.qsa-seg button.on { background: var(--picker-item-selected); color: var(--picker-item-text-selected); font-weight: 700; }

.qsa-place { margin: 0.25rem 0 0; padding: 0 0.4rem; color: var(--picker-label); font-size: var(--ui-fs-note); }
.qsa-help { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; min-height: 1.55rem; padding: 0.2rem 0.4rem; color: var(--picker-label); font-size: 0.66rem; }
.qsa-help span { display: inline-flex; align-items: center; gap: 0.22rem; }

/* Warunek, który przed chwilą powstał. Podświetlenie jest potrzebne dlatego, że pozycja potrafi
   wylądować w innym miejscu ekranu, niż stał kursor — bez śladu widać tylko, że lista znikła. */
.qp-cond-placed { animation: qp-placed 1.6s ease-out; }

@keyframes qp-placed {
    0%, 45% { border-color: var(--app-accent); background: rgba(127, 196, 230, 0.14); }
    100% { }
}

@media (prefers-reduced-motion: reduce) {
    .qp-cond-placed { animation: none; border-color: var(--app-accent); }
    .qp-summary-target { animation: none; outline: 2px solid var(--app-accent); outline-offset: 3px; }
}

.qe-build .qp-level { padding: .3rem .5rem; gap: .35rem .5rem; border-radius: 7px; }
.qe-build .qp-zone-head { padding: .3rem .5rem; }
.qe-build .qp-zone-body { padding: .4rem .5rem; }
.qe-build .qp-frame-body { min-width: 0; }
/* Pola i zwykłe przyciski; przyciski systemu (`act-btn`, `app-seg-btn`, `app-toggle`) mają własny obrys fokusu w app.css. */
.qe-build .qp :is(button, input, select):not(.act-btn, .app-seg-btn, .app-toggle):focus-visible { outline: 2px solid color-mix(in srgb, var(--app-accent) 55%, var(--act-light)); outline-offset: 2px; }

/* Otwieranie ustawień nie może przesuwać bieżącego zdarzenia w przewijanym panelu. */
.occurrence-settings { overflow-anchor: none; }
.qsa-pop { scroll-behavior: auto; }