/* FRAME: prompty i checklisty w Bazie wiedzy (projekt zaakceptowany przez Mirka 14.11.2026,
   DO_OCENY/AIBIZNESLAB/2026-11-13_biblioteka-promptow). Jeden arkusz dla strony głównej bazy,
   listy, 107 stron pozycji i bloku w artykułach; tokeny i ramy z frame.css i baza-wiedzy-frame.css. */

.kb-page {
    --kbp-lawenda: color-mix(in oklch, var(--frame-violet) 10%, var(--frame-canvas));
    --kbp-szary: color-mix(in oklch, var(--frame-ink) 72%, transparent);
    --kbp-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
}

/* ---------- pierwszy ekran: tekst po lewej, rycina po prawej (zasada 0D) ---------- */

.kbp-hero .kb-container,
.kb-shell-home .kbp-hero .kb-container {
    padding-block: 0; /* WHY: pionowy oddech daje kolumna tekstu, rycina dochodzi do ramy (projekt 01 i 03) */
}

.kbp-hero-uklad {
    display: grid;
}

.kbp-hero-tekst {
    min-width: 0;
    padding-block: clamp(2rem, 4.5vw, 3.75rem) clamp(2rem, 3.5vw, 3rem); /* WHY: hero bazy ma pod tekstem pole wyszukiwania i zakładki, więc niższe niż dawny hero samego tytułu */
}

.kbp-hero-lead {
    margin: clamp(1.25rem, 3vw, 2rem) 0 0; /* WHY: odstęp leadu od tytułu jak w projekcie 01 */
    font-size: clamp(1.1rem, 1.6vw, 1.35rem); /* WHY: lead w jednej linii obok ryciny na 1440, jak w projekcie 01 */
    line-height: 1.3;
    text-wrap: pretty;
}

.kbp-linia {
    display: inline;
}

.kbp-hero-art {
    margin: 0 calc(-1 * var(--frame-gutter));
    border-top: var(--kb-rule);
}

.kbp-hero-art img {
    display: block;
    width: 100%;
    height: auto;
    mix-blend-mode: multiply;
}

.kbp-hero .kb-breadcrumbs {
    margin-bottom: clamp(1.25rem, 3vw, 2rem); /* WHY: okruszki nad tytułem listy jak w projekcie 03 */
}

/* ---------- wyszukiwarka i zakładki ---------- */

.kbp-szukaj {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-top: clamp(1.5rem, 3vw, 2.25rem); /* WHY: pole wyszukiwania pod leadem jak w projekcie 01 */
    border: var(--kb-rule);
}

.kbp-szukaj input {
    min-width: 0;
    min-height: 3.25rem;
    padding: 0.75rem 1rem; /* WHY: wysokość pola równa przyciskowi frame-button */
    border: 0;
    border-radius: 0;
    background: var(--frame-canvas);
    color: var(--frame-ink);
    font: inherit;
    font-size: 1.05rem; /* WHY: czytelny tekst w polu na telefonie bez powiększania strony przez Safari */
}

.kbp-szukaj input:focus-visible {
    outline: 2px solid var(--frame-violet);
    outline-offset: -2px;
}

.kbp-szukaj-przycisk {
    justify-content: center;
    border-width: 1px 0 0;
}

.kbp-zakladki {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: clamp(1.25rem, 3vw, 2rem); /* WHY: zakładki rodzaju pod polem wyszukiwania jak w projekcie 01 */
}

.kbp-zakladki--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0;
}

.kbp-zakladka {
    min-height: 2.75rem;
    padding: 0.5rem 0.25rem; /* WHY: cztery zakładki mieszczą się w jednym rzędzie na 390 */
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--frame-ink);
    font: inherit;
    font-size: clamp(0.85rem, 1.6vw, 1.1rem); /* WHY: zakładki w skali projektu 01, na telefonie bez zawijania */
    cursor: pointer;
}

.kbp-zakladka[aria-pressed='true'] {
    border-bottom-color: var(--frame-violet);
    font-weight: 700;
}

.kbp-zakladka:focus-visible {
    outline: 2px solid var(--frame-violet);
    outline-offset: -2px;
}

.kbp-pasek {
    display: grid;
    border-bottom: var(--kb-rule);
}

.kbp-pasek .kbp-zakladka {
    min-height: 3.5rem;
    font-size: clamp(0.8rem, 1.6vw, 1.1rem); /* WHY: trzy zakładki z licznikiem w jednej linii na 390 */
    white-space: nowrap;
    text-align: left;
    padding-inline: var(--frame-gutter); /* WHY: zakładki listy jako pełne komórki paska, tekst w osi ramy */
}

.kbp-pasek .kbp-zakladka + .kbp-zakladka {
    border-left: var(--kb-rule);
}

.kbp-pasek .kbp-zakladki {
    margin-inline: calc(-1 * var(--frame-gutter));
}

/* ---------- pasek tematów pod pierwszym ekranem ---------- */

.kbp-baza-tematy {
    display: grid;
    border-bottom: var(--kb-rule);
}

.kbp-baza-tematy .kb-topic-nav {
    margin-top: 0; /* WHY: pasek tematów stoi tuż pod pierwszym ekranem, jak w projekcie 01 */
    border-top: 0;
}

.kbp-baza-tematy .kb-topic-nav a:last-child {
    border-bottom: 0;
}

@media (max-width: 47.99rem) {
    .kbp-baza-tematy .kb-topic-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* WHY: na telefonie tematy w dwóch kolumnach, jak w projekcie 01 mobile */
    }

    .kbp-baza-tematy .kb-topic-nav a:nth-child(odd) {
        border-right: var(--kb-rule);
    }

    .kbp-baza-tematy .kb-topic-nav a:nth-last-child(-n + 2) {
        border-bottom: 0;
    }
}

.kbp-baza-tematy .kb-topic-nav a {
    min-height: 3.5rem;
    padding-inline: 0.9rem; /* WHY: sześć tematów w jednym rzędzie bez zawijania nazw na 1440 (projekt 01) */
    font-size: 0.98rem; /* WHY: nazwa tematu w jednej linii w komórce 1/6 szerokości */
}


.kbp-lista-strona .kb-hero-title {
    font-size: clamp(2.4rem, 4.2vw, 3.8rem); /* WHY: tytuł listy w jednej linii obok ryciny, jak w projekcie 03 */
}

.kbp-sekcja-lead {
    margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); /* WHY: lead sekcji polecanych pod nagłówkiem jak w projekcie 01 */
    font-size: clamp(1.05rem, 1.8vw, 1.35rem); /* WHY: lead sekcji w skali projektu 01 */
    line-height: 1.35;
    text-wrap: pretty;
}

#prompty-na-start {
    margin-top: 0; /* WHY: sekcja polecanych otwiera pierwszą sekcję bazy, bez pustego pasa nad nagłówkiem */
}

/* ---------- karty pozycji ---------- */

.kbp-karty {
    display: grid;
    margin: 0 calc(-1 * var(--frame-gutter));
    padding: 0;
    border-top: var(--kb-rule);
    list-style: none;
}

.kbp-karty > li {
    display: grid;
    min-width: 0;
    border-bottom: var(--kb-rule);
}

.kbp-karty > li > a {
    min-width: 0;
}

.kbp-karta {
    min-height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: start;
    column-gap: 1rem;
    padding: clamp(1.1rem, 2.4vw, 1.6rem) var(--frame-gutter); /* WHY: karta w skali kart artykułów bazy */
    text-decoration: none;
}

.kbp-karta::after {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    content: '→';
    font-size: 1.35rem; /* WHY: strzałka w skali tytułu karty, jak w projekcie */
    font-weight: 700;
}

.kbp-karta--opis {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
}

.kbp-karta--opis::after {
    grid-column: 1;
    grid-row: 4;
    justify-self: end;
    margin-top: 0.75rem; /* WHY: strzałka w prawym dolnym rogu karty polecanej, jak w projekcie 01 */
}

.kbp-rodzaj {
    display: block;
    grid-column: 1;
    margin-bottom: 0.4rem; /* WHY: etykieta rodzaju nad tytułem jak w projekcie */
    font-size: 0.75rem; /* WHY: etykieta rodzaju mniejsza niż tytuł, jak kb-eyebrow */
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.kbp-wiersz-tytul {
    display: block;
    grid-column: 1;
    font-size: clamp(1.1rem, 1.7vw, 1.35rem); /* WHY: tytuł karty w skali tytułów kart artykułów */
    font-weight: 700;
    line-height: 1.18;
    text-wrap: pretty;
}

.kbp-wiersz-opis {
    display: block;
    grid-column: 1;
    margin-top: 0.6rem; /* WHY: opis pod tytułem karty jak w kartach artykułów */
    color: var(--kbp-szary);
    line-height: 1.45;
    text-wrap: pretty;
}

.kbp-wiersz-tekst {
    min-width: 0;
}

.kbp-link {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    margin-top: 1.25rem; /* WHY: link pod listą kart jak w projekcie 01 i 02 */
    border-bottom: 2px solid var(--frame-violet);
    font-weight: 650;
    text-decoration: none;
}

.kbp-karty--4 > li:nth-child(n + 3) {
    display: none; /* WHY: na telefonie 2 z 4 polecanych, pozostałe pod linkiem Wszystkie (TEKSTY.md) */
}

/* ---------- wiersze listy ---------- */

.kbp-wiersze > li {
    display: grid;
}

.kbp-wiersze {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kbp-wiersz {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1rem;
    align-items: center;
    padding: 1rem var(--frame-gutter); /* WHY: wiersz w skali projektu 02 i 03 */
    text-decoration: none;
}

.kbp-wiersz::after {
    content: '→';
    font-size: 1.3rem; /* WHY: strzałka w skali tytułu wiersza */
    font-weight: 700;
}

.kbp-wiersz .kbp-rodzaj {
    grid-column: 1;
}

.kbp-wiersz .kbp-wiersz-tytul,
.kbp-wiersz .kbp-wiersz-tekst {
    grid-column: 1;
}

.kbp-wiersz::after {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.kbp-wiersze--lista {
    margin-inline: calc(-1 * var(--frame-gutter));
    border-top: var(--kb-rule);
}

.kbp-wiersze--lista > li {
    border-bottom: var(--kb-rule);
}

.kbp-wiersz--opis .kbp-wiersz-opis {
    margin-top: 0.4rem; /* WHY: opis tuż pod tytułem wiersza listy jak w projekcie 03, nie mniej niż 6px odstępu */
    font-size: 0.95rem; /* WHY: opis wiersza mniejszy niż tytuł, jak w projekcie 03 */
}

.kbp-pusto {
    margin: 1.5rem 0 0;
    padding: 1.25rem var(--frame-gutter);
    border: var(--kb-rule);
    font-size: 1.15rem; /* WHY: komunikat pustego wyniku w skali projektu 07 */
}

.kbp-tematy {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 calc(-1 * var(--frame-gutter)) clamp(2.5rem, 5vw, 4rem); /* WHY: tematy listy nad sekcją Od tych zacznij jak w projekcie 03 */
    border-top: var(--kb-rule);
    border-left: var(--kb-rule);
}

.kbp-tematy a:last-child:nth-child(odd) {
    grid-column: 1 / -1; /* WHY: nieparzysta liczba tematów, ostatni na całą szerokość zamiast sieroty (projekt 03 mobile) */
}

.kbp-tematy a {
    min-height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 0.75rem; /* WHY: dwa tematy w rzędzie na telefonie bez zawijania nazw */
    border-right: var(--kb-rule);
    border-bottom: var(--kb-rule);
    font-size: 0.92rem; /* WHY: tematy w skali projektu 03 */
    font-weight: 650;
    text-align: center;
    text-decoration: none;
}

.kbp-grupa + .kbp-grupa .kb-section-title,
.kbp-grupa .kb-section-title {
    margin-top: clamp(2.5rem, 5vw, 4rem); /* WHY: nagłówki tematów listy bliżej siebie niż sekcje strony głównej bazy */
}

#od-tych-zacznij .kb-section-title {
    margin-top: 0; /* WHY: pierwsza sekcja listy zaczyna się pod paskiem tematów */
}

.kbp-lista-tresc > .kb-container {
    padding-top: clamp(2rem, 4vw, 3rem); /* WHY: tematy listy stoją tuż pod zakładkami rodzaju */
}

.kbp-wyniki > .kb-container {
    padding-block: clamp(2rem, 4vw, 3.5rem); /* WHY: wyniki wyszukiwania tuż pod pierwszym ekranem jak w projekcie 07 */
}

.kbp-wyniki .kb-section-title {
    margin-top: 0; /* WHY: nagłówek wyników otwiera sekcję */
}

[hidden] {
    display: none !important; /* WHY: ukryte wiersze filtra i wyniki nie mogą wrócić przez display:grid komponentu */
}

/* ---------- ramka tematu na stronie głównej bazy i w artykule ---------- */

.kbp-temat {
    display: grid;
    margin: clamp(2rem, 4vw, 3rem) calc(-1 * var(--frame-gutter)) 0; /* WHY: ramka tematu pod kartami artykułów tematu jak w projekcie 02 */
    border-block: var(--kb-rule);
}

.kbp-temat--baza {
    margin-top: 0; /* WHY: na telefonie ramka tematu dochodzi do siatki artykułów jak w projekcie 02 mobile, bez pustego paska w obramowaniu */
    border-top: 0; /* WHY: górną linię daje dolna krawędź ostatniej karty artykułu */
}

.kbp-temat-art {
    margin: 0;
    padding: clamp(1rem, 3vw, 2rem); /* WHY: rycina w lawendowym polu z oddechem jak w projekcie 02 */
    background: var(--kbp-lawenda);
    border-bottom: var(--kb-rule);
}

.kbp-temat-art img {
    display: block;
    width: 100%;
    max-width: 28rem; /* WHY: rycina tematu nie rośnie ponad pole z projektu 02 na szerokim ekranie */
    height: auto;
    margin-inline: auto;
    mix-blend-mode: multiply;
}

.kbp-temat-lista {
    display: grid;
    align-content: start;
    min-width: 0;
}

.kbp-etykieta {
    margin: 0;
    padding: 1rem var(--frame-gutter); /* WHY: pasek etykiety ramki jak w projekcie 02 */
    background: var(--kbp-lawenda);
    border-bottom: var(--kb-rule);
    font-size: 0.8rem; /* WHY: etykieta ramki w skali kb-eyebrow */
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.kbp-temat .kbp-wiersze > li {
    border-bottom: var(--kb-rule);
}

.kbp-temat .kbp-link {
    margin: 0;
    padding: 1rem var(--frame-gutter); /* WHY: link ramki w lawendowym pasku pod wierszami jak w projekcie 02 */
    border-bottom: 0;
    background: var(--kbp-lawenda);
    text-decoration: underline;
    text-decoration-color: var(--frame-violet);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.35rem;
}

.kbp-temat--artykul {
    background: var(--kbp-lawenda);
    border: var(--kb-rule);
}

.kbp-temat--artykul .kbp-temat-art,
.kbp-temat--artykul .kbp-etykieta,
.kbp-temat--artykul .kbp-link {
    background: transparent;
}

.kbp-temat--artykul .kbp-etykieta {
    border-bottom: 0;
    font-size: clamp(0.95rem, 1.6vw, 1.2rem); /* WHY: nagłówek bloku w artykule większy, jak w projekcie 06 */
}

.kbp-temat--artykul .kbp-wiersze {
    margin-inline: var(--frame-gutter);
    background: var(--frame-canvas);
    border: var(--kb-rule);
}

.kbp-temat--artykul .kbp-wiersze > li:last-child {
    border-bottom: 0;
}

.kbp-temat--artykul .kbp-temat-art {
    border-bottom: 0;
}

.kb-article-page > .kbp-temat-wrap {
    grid-column: 1 / -1;
    min-width: 0;
}

.kb-article-page > .kbp-temat-wrap .kbp-temat {
    margin: clamp(2rem, 4vw, 3rem) 0; /* WHY: blok promptów w artykule między treścią a Czytaj dalej, w szerokości ramy artykułu */
}

.kbp-na-start {
    display: grid; /* WHY: jak pasek tematów (.kbp-baza-tematy): sekcja jest ramą jednego kontenera, a rama biegnie bez przerwy do Najpierw przeczytaj */
}

.kbp-na-start > .kb-container {
    padding-bottom: 0; /* WHY: sekcja polecanych i dalsze sekcje bazy czytają się jak jedna kolumna, bez podwójnego oddechu */
}

.kbp-na-start + .kb-section > .kb-container {
    display: flow-root; /* WHY: margines nagłówka zostaje w ramie kontenera, linie boczne nie urywają się nad Najpierw przeczytaj */
    padding-top: 0; /* WHY: odstęp do Najpierw przeczytaj daje margines nagłówka, jak między pozostałymi sekcjami bazy */
}

/* ---------- strona promptu i checklisty ---------- */

.kbp-strona > * {
    grid-column: 1 / -1;
    min-width: 0;
}

.kbp-naglowek {
    padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(1.5rem, 3vw, 2rem); /* WHY: nagłówek pozycji niższy niż artykułu, prompt widać od razu (projekt 04) */
}

.kbp-opis {
    margin: 0.75rem 0 0; /* WHY: krótki opis tuż pod tytułem jak w projekcie 04 */
    font-size: clamp(1.1rem, 1.8vw, 1.35rem); /* WHY: opis pozycji w skali projektu 04 */
    line-height: 1.35;
    text-wrap: pretty;
}

.kbp-meta {
    display: grid;
    gap: 0.4rem;
    margin: 1rem 0 0; /* WHY: rodzaj i kategoria pod opisem jak w projekcie 04 */
    font-size: 0.8rem; /* WHY: metadane w skali okruszków */
    font-weight: 700;
    text-transform: uppercase;
}

.kbp-kopiuj-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-top: 1.25rem; /* WHY: przycisk kopiowania pod metadanymi jak w projekcie 04 */
}

.kbp-status,
.kbp-blad {
    margin: 0;
    font-weight: 650;
}

.kbp-blad {
    color: var(--frame-error);
}

.kbp-status {
    /* WHY: komunikat „Skopiowano” dla czytnika ekranu; wzrokowo pokazuje go już sam przycisk */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.kbp-uklad {
    display: grid;
    gap: clamp(1rem, 2vw, 1.75rem);
}

.kbp-ramka {
    position: relative;
    min-width: 0;
    padding: clamp(1.25rem, 3vw, 2rem); /* WHY: wnętrze ramki promptu i ramki Jak użyć jak w projekcie 04 */
    border: var(--kb-rule);
}

.kbp-ramka--jak {
    display: flex;
    flex-direction: column;
    background: var(--kbp-lawenda);
}

.kbp-ramka--jak h2 {
    margin: 0 0 0.75rem; /* WHY: nagłówek Jak użyć przy tekście jak w projekcie 04 */
    font-size: clamp(1.6rem, 2.6vw, 2.2rem); /* WHY: nagłówek ramki w skali projektu 04 */
    font-weight: 650;
    letter-spacing: -0.02em;
}

.kbp-jak-tekst :where(p) {
    margin: 0 0 0.75rem;
    line-height: 1.45;
    text-wrap: pretty;
}

.kbp-jak-art {
    margin: auto 0 0;
    padding-top: 1rem; /* WHY: rycina na dole ramki Jak użyć jak w projekcie 04 */
}

.kbp-jak-art img {
    display: block;
    width: min(100%, 26rem); /* WHY: rycina w ramce Jak użyć nie rośnie ponad skalę projektu 04 */
    height: auto;
    margin-left: auto;
    mix-blend-mode: multiply;
}

.kbp-pre {
    margin: 0;
    font-family: var(--kbp-mono);
    font-size: 0.92rem; /* WHY: tekst promptu w kroju stałej szerokości jak w projekcie 04 */
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.kbp-lista-kontrolna :where(h3) {
    margin: 1.5rem 0 0.75rem; /* WHY: grupy checklisty oddzielone jak w projekcie 05 */
    font-size: clamp(1.3rem, 2.2vw, 1.8rem); /* WHY: nazwa grupy checklisty w skali projektu 05 */
    font-weight: 650;
    line-height: 1.15;
}

.kbp-lista-kontrolna :where(h3:first-child) {
    margin-top: 0;
}

.kbp-lista-kontrolna :where(p) {
    margin: 0 0 0.6rem;
    line-height: 1.45;
}

.kbp-lista-kontrolna :where(ul) {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

.kbp-odhacz {
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.kbp-lista-kontrolna .kbp-odhacz {
    padding-left: 0; /* WHY: pola do odhaczenia zastępują wypunktowanie listy */
}

.kbp-odhacz li {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    gap: 0.85rem;
    align-items: start;
    padding: 0.45rem 0; /* WHY: odstęp punktów checklisty jak w projekcie 05 */
    line-height: 1.45;
}

.kbp-odhacz input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0.15rem 0 0;
    accent-color: var(--frame-violet);
}

.kbp-ramka--tresc {
    display: flex;
    flex-direction: column;
}

.kbp-ramka--tresc .kbp-rozwin {
    margin-top: auto;
}

.kbp-ramka.is-zwiniete :is(.kbp-tresc, .kbp-lista-kontrolna) {
    margin-bottom: 1rem; /* WHY: przycisk rozwinięcia odsunięty od zwiniętej treści także na telefonie */
}

.kbp-ramka.is-zwiniete .kbp-tresc,
.kbp-ramka.is-zwiniete .kbp-lista-kontrolna,
.kbp-jak-tekst.is-zwiniete {
    max-height: 26rem; /* WHY: w ramce widać początek treści, reszta po kliknięciu (TEKSTY.md sekcja 5) */
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent);
    mask-image: linear-gradient(to bottom, #000 75%, transparent);
}

.kbp-jak-tekst.is-zwiniete {
    max-height: 9.5rem; /* WHY: w ramce Jak użyć widać początek tekstu i Czytaj dalej (projekt 05) */
}

.kbp-rozwin {
    display: flex;
    width: 100%;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    margin-top: 1rem; /* WHY: przycisk rozwinięcia pod treścią w ramce jak w projekcie 04 */
    border: var(--kb-rule);
    background: var(--frame-canvas);
    color: var(--frame-ink);
    font: inherit;
    font-weight: 650;
    cursor: pointer;
}

.kbp-czytaj {
    align-self: flex-start;
    margin-top: 0.5rem; /* WHY: link Czytaj dalej odsunięty od zwiniętego tekstu */
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    border-bottom: 2px solid var(--frame-violet);
    background: transparent;
    color: var(--frame-ink);
    font: inherit;
    font-weight: 650;
    cursor: pointer;
}

.kbp-wiecej {
    margin-top: clamp(1rem, 2vw, 1.75rem); /* WHY: zwinięty blok pod ramkami jak w projekcie 04 */
    border: var(--kb-rule);
}

.kbp-wiecej summary {
    display: flex;
    min-height: 3.25rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem clamp(1.25rem, 3vw, 2rem); /* WHY: pasek zwiniętego bloku w osi ramek powyżej */
    font-size: clamp(1.1rem, 1.8vw, 1.35rem); /* WHY: tytuł zwiniętego bloku w skali projektu 04 */
    font-weight: 650;
    cursor: pointer;
    list-style: none;
}

.kbp-wiecej summary::-webkit-details-marker {
    display: none;
}

.kbp-wiecej summary::after {
    content: '+';
    font-size: 1.6rem; /* WHY: znak rozwinięcia jak w projekcie 04 */
    font-weight: 500;
}

.kbp-wiecej[open] summary::after {
    content: '−';
}

.kbp-wiecej-tresc {
    padding: 0 clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem); /* WHY: treść bloku w osi paska */
    border-top: var(--kb-rule);
}

.kbp-wiecej-tresc :where(h2) {
    margin: 1.75rem 0 0.75rem;
    font-size: 1.35rem; /* WHY: nazwy sekcji archiwum w zwiniętym bloku mniejsze niż tytuł strony */
}

.kbp-wiecej-tresc :where(h3) {
    margin: 1.25rem 0 0.5rem;
    font-size: 1.1rem; /* WHY: pytania w najczęstszych pytaniach mniejsze niż nazwy sekcji */
}

.kbp-wiecej-tresc :where(p, li) {
    line-height: 1.5;
}

.kbp-wiecej-tresc :where(a) {
    overflow-wrap: anywhere;
}

.kbp-powiazane {
    padding-block: clamp(2rem, 4vw, 3rem); /* WHY: sekcja powiązanych pod zwiniętym blokiem jak w projekcie 04 */
}

.kbp-powiazane-tytul {
    margin: 0 0 1rem; /* WHY: nagłówek nad kartami powiązanych */
    font-size: clamp(1.6rem, 3vw, 2.4rem); /* WHY: nagłówek powiązanych w skali projektu 04 */
    font-weight: 650;
    letter-spacing: -0.03em;
}

.kbp-powiazane .kbp-karty {
    margin-inline: 0;
    border-left: var(--kb-rule);
}

.kbp-powiazane .kbp-karty > li {
    border-right: var(--kb-rule);
}

.kbp-produkt {
    margin-top: 1.5rem; /* WHY: link do programu pod treścią przewodnika */
}

/* ---------- komputer ---------- */

@media (hover: hover) {
    .kbp-karta:hover,
    .kbp-wiersz:hover,
    .kbp-tematy a:hover {
        background: var(--frame-violet);
    }
}

@media (min-width: 48rem) {
    .kbp-karty,
    .kbp-wiersze--lista,
    .kbp-tematy,
    .kbp-temat {
        margin-inline: 0;
    }

    .kbp-pasek .kbp-zakladki {
        margin-inline: calc(-1 * var(--frame-gutter));
    }

    .kbp-karty {
        border-left: var(--kb-rule);
    }

    .kbp-karty > li {
        border-right: var(--kb-rule);
    }

    .kbp-karty--4 > li:nth-child(n + 3) {
        display: block;
    }

    .kbp-karty--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kbp-karty--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .kbp-wiersze--lista {
        border-inline: var(--kb-rule);
    }

    .kbp-wiersz--opis {
        grid-template-columns: 11rem minmax(0, 1fr) auto; /* WHY: kolumna rodzaju po lewej jak w projekcie 03 */
        padding: 0;
    }

    .kbp-wiersz--opis .kbp-rodzaj {
        align-self: stretch;
        display: flex;
        align-items: center;
        margin: 0;
        padding: 1rem var(--frame-gutter); /* WHY: komórka rodzaju w osi ramy jak w projekcie 03 */
        border-right: var(--kb-rule);
    }

    .kbp-wiersz--opis .kbp-wiersz-tekst {
        grid-column: 2;
        padding: 0.85rem var(--frame-gutter); /* WHY: komórka tytułu i opisu jak w projekcie 03 */
    }

    .kbp-wiersz--opis::after {
        grid-column: 3;
        grid-row: 1;
        padding-right: var(--frame-gutter);
    }

    .kbp-tematy {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .kbp-tematy a:last-child:nth-child(odd) {
        grid-column: auto;
    }

    .kbp-linia {
        display: block; /* WHY: lead listy łamany na granicy zdania, bez ogona (frontend-aibl-design zasada 13) */
    }

    .kbp-szukaj {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .kbp-szukaj-przycisk {
        min-width: 7.5rem;
        border-width: 0 0 0 1px;
    }

    .kbp-temat {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        border-inline: var(--kb-rule);
    }

    .kbp-temat-art {
        display: flex;
        align-items: center;
        border-bottom: 0;
        border-right: var(--kb-rule);
    }

    .kbp-temat--artykul .kbp-temat-art {
        border-right: 0;
    }

    .kbp-temat--artykul .kbp-temat-lista {
        align-content: center;
        padding-block: clamp(1.5rem, 3vw, 2.5rem); /* WHY: lista bloku w artykule wyśrodkowana obok ryciny jak w projekcie 06 */
    }

    .kbp-temat .kbp-temat-lista {
        grid-template-rows: auto auto 1fr;
    }

    /* Ramka tematu na stronie głównej bazy: wysokość wyznacza lista, rycina wpisuje się w tę wysokość,
       link „Wszystkie w temacie” stoi tuż pod listą jak w projekcie 02 (ocena wyglądu 14.11.2026). */
    .kbp-temat--baza {
        margin-top: clamp(2rem, 4vw, 3rem); /* WHY: odstęp ramki od siatki artykułów tematu jak w projekcie 02 na komputerze */
        border-top: var(--kb-rule);
    }

    .kbp-temat--baza .kbp-temat-lista {
        grid-template-rows: none;
    }

    .kbp-temat--baza .kbp-temat-art {
        position: relative;
        min-height: 15rem; /* WHY: rycina czytelna także obok krótkiej listy */
    }

    .kbp-temat--baza .kbp-temat-art img {
        position: absolute;
        inset: clamp(1rem, 2vw, 1.5rem);
        width: calc(100% - 2 * clamp(1rem, 2vw, 1.5rem));
        max-width: none;
        height: calc(100% - 2 * clamp(1rem, 2vw, 1.5rem));
        object-fit: contain;
    }

    .kbp-temat--baza .kbp-link {
        display: block;
        flex: 1 1 auto;
    }

    .kbp-temat--jedna {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Pasek tematów od krawędzi do krawędzi jak w projekcie 01, bez pustych skrajnych komórek przy marginesach. */
    .kbp-baza-tematy .kb-topic-nav.kbp-baza-nav {
        margin-inline: calc(-1 * var(--frame-gutter));
        border-left: 0;
    }

    .kbp-baza-tematy .kb-topic-nav a {
        border-bottom: var(--kb-rule);
    }

    .kbp-baza-tematy .kb-topic-nav a:nth-child(3n + 1) {
        padding-left: var(--frame-gutter); /* WHY: nazwa pierwszego tematu w rzędzie w osi tekstu strony */
    }

    .kbp-baza-tematy .kb-topic-nav a:nth-child(3n) {
        border-right: 0;
    }

    .kbp-baza-tematy .kb-topic-nav a:nth-last-child(-n + 3) {
        border-bottom: 0;
    }

}

@media (min-width: 80rem) {
    .kbp-baza-tematy .kb-topic-nav a:nth-child(3n + 1) {
        padding-left: 0.9rem;
    }

    .kbp-baza-tematy .kb-topic-nav a:nth-child(3n) {
        border-right: var(--kb-rule);
    }

    .kbp-baza-tematy .kb-topic-nav a:first-child {
        padding-left: var(--frame-gutter); /* WHY: nazwa pierwszego tematu w osi tekstu strony, jak w projekcie 01 */
    }

    .kbp-baza-tematy .kb-topic-nav a:last-child {
        border-right: 0;
    }

    .kbp-baza-tematy .kb-topic-nav a {
        border-bottom: 0;
    }
}

@media (min-width: 64rem) {
    .kbp-hero-uklad {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    }

    .kbp-hero-tekst {
        padding-right: clamp(2rem, 4vw, 4rem); /* WHY: odstęp tekstu od pionowej linii ryciny */
    }

    .kbp-hero-art {
        display: flex;
        align-items: end;
        margin: 0 calc(-1 * var(--frame-gutter)) 0 0;
        border-top: 0;
        border-left: var(--kb-rule);
    }

    .kbp-karty--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .kbp-uklad {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    }

    .kbp-jak-tekst.is-zwiniete {
        max-height: 14rem; /* WHY: na komputerze ramka Jak użyć pokazuje więcej tekstu jak w projekcie 04, bez pustego pola */
    }

    .kbp-jak-art {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding-top: 0.5rem; /* WHY: rycina tuż pod Czytaj dalej, wolne miejsce ramki wypełnia rycina, nie pusty pas (projekt 04) */
    }

    .kbp-jak-art img {
        width: min(100%, 22rem); /* WHY: rycina nie wydłuża ramki Jak użyć ponad ramkę promptu (projekt 04) */
        margin-inline: auto;
    }
}

.kbp-schowek {
    position: fixed;
    top: 0;
    left: -9999px;
}

/* Tryb wyszukiwania na stronie głównej bazy (projekt 07): pierwszy ekran zwija się do tytułu, pola i zakładek,
   wyniki stoją tuż pod nim. */
.kbp-szuka .kbp-hero--baza .kbp-hero-art,
.kbp-szuka .kbp-hero--baza .kbp-hero-lead {
    display: none;
}

.kbp-szuka .kbp-hero--baza .kbp-hero-uklad {
    grid-template-columns: minmax(0, 1fr);
}

.kbp-szuka .kbp-hero--baza .kbp-hero-tekst {
    padding-right: 0;
}

@media (max-width: 47.99rem) {
    .kbp-kopiuj {
        flex: 1 1 100%;
        justify-content: center; /* WHY: na telefonie przycisk kopiowania na całą szerokość, jak w projekcie 04 i 05 mobile */
    }

    .kbp-jak-art img {
        width: min(70%, 18rem); /* WHY: rycina w ramce Jak użyć mniejsza na telefonie, ramka nie rośnie ponad tekst (projekt 05 mobile) */
    }

    .kbp-page-pozycja .kbp-rozwin {
        width: calc(100% - 2.75rem); /* WHY: pływający przycisk opinii (feedback-widget.css, prawy dolny róg) nie zasłania Pokaż cały prompt przy żadnym przewinięciu */
    }
}

.kbp-pozycja-wrap,
.kbp-temat-wrap {
    display: grid;
}