/* PROTOTYP — style paska prototypu i przewodnika komponentów. Katalog wwwroot/prototyp/ nie trafia do Release. */

.ksz-pasek-prototypu {
  position: relative; /* B2: nie przykleja się — nagłówki panelu i portalu są przyklejone (sticky) */
  z-index: 1035;
  background: #3D2C00;
  color: #FFF8E1;
  font-size: .875rem;
  border-bottom: 2px solid #FFD60A;
}
.ksz-pasek-prototypu summary {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .75rem;
  align-items: center;
  min-height: 2.5rem;
  padding: .375rem 1rem;
  cursor: pointer;
  list-style: none;
}
.ksz-pasek-prototypu summary::-webkit-details-marker { display: none; }
.ksz-pasek-prototypu summary:focus-visible { outline: 2px solid #FFD60A; outline-offset: -4px; }
.ksz-pasek-prototypu-znak {
  padding: .05rem .5rem;
  border-radius: 50rem;
  background: #FFD60A;
  color: #111418;
  font-weight: 600;
  letter-spacing: .04em;
}
.ksz-pasek-prototypu-rozwin { margin-left: auto; text-decoration: underline; }
.ksz-pasek-prototypu details[open] .ksz-pasek-prototypu-rozwin .ksz-ikona { transform: rotate(180deg); }
.ksz-pasek-prototypu-formularz {
  max-height: 70vh;
  overflow-y: auto;
  padding: .75rem 1rem 1rem;
  background: var(--ksz-powierzchnia);
  color: var(--ksz-tekst);
  border-top: 1px solid var(--ksz-ramka);
}
.ksz-pasek-prototypu-siatka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: .75rem 1rem;
}
.ksz-pasek-prototypu-siatka fieldset { min-width: 0; }
.ksz-pasek-prototypu-przelaczniki .form-check { margin-bottom: .25rem; }
.ksz-pasek-prototypu-stany { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--ksz-ramka); }
.ksz-pasek-prototypu-odnosniki { margin: 0 0 .5rem; padding-left: 1.25rem; }
.ksz-pasek-prototypu-odnosniki li { margin-bottom: .125rem; }
.ksz-pasek-prototypu-akcje {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin-top: .75rem;
  color: var(--ksz-tekst-2);
}

/* ---------- Przewodnik komponentów ---------- */
.ksz-spis-tresci { columns: 2 12rem; column-gap: 1.5rem; padding-left: 1.25rem; }
.ksz-przewodnik-sekcja { scroll-margin-top: 4rem; }
.ksz-przewodnik-sekcja + .ksz-przewodnik-sekcja { margin-top: 2.5rem; }
.ksz-przyklad {
  padding: 1rem;
  background: var(--ksz-powierzchnia);
  border: 1px solid var(--ksz-ramka);
  border-radius: var(--bs-border-radius-lg);
}
.ksz-przyklad + .ksz-przyklad { margin-top: 1rem; }
.ksz-probki { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .5rem; }
.ksz-probka { display: flex; gap: .5rem; align-items: center; min-width: 0; font-size: .8125rem; }
.ksz-probka-kolor {
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: var(--bs-border-radius);
  border: 1px solid var(--ksz-ramka-pola);
}
.ksz-probka code { color: var(--ksz-tekst-2); font-size: .75rem; }
.ksz-probka-tlo { background: var(--ksz-tlo); }
.ksz-probka-powierzchnia { background: var(--ksz-powierzchnia); }
.ksz-probka-powierzchnia-2 { background: var(--ksz-powierzchnia-2); }
.ksz-probka-ramka { background: var(--ksz-ramka); }
.ksz-probka-ramka-pola { background: var(--ksz-ramka-pola); }
.ksz-probka-tekst { background: var(--ksz-tekst); }
.ksz-probka-tekst-2 { background: var(--ksz-tekst-2); }
.ksz-probka-sukces { background: var(--ksz-sukces); }
.ksz-probka-sukces-tlo { background: var(--ksz-sukces-tlo); }
.ksz-probka-ostrzezenie { background: var(--ksz-ostrzezenie); }
.ksz-probka-ostrzezenie-tlo { background: var(--ksz-ostrzezenie-tlo); }
.ksz-probka-blad { background: var(--ksz-blad); }
.ksz-probka-blad-tlo { background: var(--ksz-blad-tlo); }
.ksz-probka-info { background: var(--ksz-info); }
.ksz-probka-info-tlo { background: var(--ksz-info-tlo); }
.ksz-probka-akcent { background: var(--ksz-akcent); }
.ksz-probka-akcent-tlo { background: var(--ksz-akcent-tlo); }
.ksz-probka-na-akcencie { background: var(--ksz-na-akcencie); }
.ksz-probka-akcent-tekst { background: var(--ksz-akcent-tekst); }
.ksz-probka-akcent-subtelny { background: var(--ksz-akcent-subtelny); }
.ksz-probka-akcent-hover { background: var(--ksz-akcent-hover); }
.ksz-probka-akcent-active { background: var(--ksz-akcent-active); }
.ksz-probka-fokus { background: var(--ksz-fokus); }
.ksz-probka-akcent-kontrolka { background: var(--ksz-akcent-kontrolka); }

.ksz-typografia-probka { border-bottom: 1px dashed var(--ksz-ramka); padding: .25rem 0; }
.ksz-kod-przykladu { font-size: .8125rem; background: var(--ksz-powierzchnia-2); border-radius: var(--bs-border-radius); padding: .5rem .75rem; margin: .75rem 0 0; white-space: pre-wrap; }
.ksz-demo-dlugosc { min-height: 10rem; }