/* ==========================================================================
   KONTROLKA: WYBOR
   Typ Choice. Zmierzone uzycie: 564.
   Dwa uklady tej samej kontrolki: lista rozwijana i przyciski do czterech
   opcji. Powyzej czterech przyciski zamieniaja sie w plot, wiec wymuszam liste.
   ========================================================================== */
.k-wybor{
  inline-size: 100%;
  block-size: var(--wys-aktualna);
  padding-inline: var(--odstep-3);
  font: var(--tekst-wartosc);
  color: var(--atrament);
  background: var(--pole-tlo);
  border: 1px solid var(--pole-kreska);
  border-radius: var(--promien-1);
  transition: border-color var(--czas-1) var(--wyjscie);
}
.k-wybor:hover:not(:disabled){ border-color: var(--pole-kreska-mocna); }
.k-wybor:focus-visible{
  outline: var(--pierscien) solid var(--marka);
  outline-offset: var(--pierscien-odstep);
  border-color: var(--marka);
}
.k-wybor:active{ transform: var(--wcisniecie); }
.k-wybor:disabled{
  background: var(--pole-tlo-wylaczone);
  border-color: var(--kreska);
  color: var(--atrament-3);
  cursor: not-allowed;
}
.k-wybor[readonly]{
  background: var(--plyta-2);
  border-color: transparent;
  pointer-events: none;
}
.k-wybor[aria-busy="true"]{ opacity: .6; }
.k-wybor[aria-invalid="true"]{ border-color: var(--alarm); background: var(--pole-tlo-blad); }
.k-wybor[data-stan="powodzenie"]{ border-color: var(--powodzenie); }

/* --- uklad przyciskowy: prawdziwe pola radio schowane pod etykietami ---- */
.k-wybor-przyciski{ display: flex; gap: var(--odstep-1); flex-wrap: wrap; }
.k-wybor-radio{
  position: absolute;
  inline-size: 1px; block-size: 1px;
  opacity: 0;
  pointer-events: none;
}
.k-wybor-przycisk{
  display: inline-flex; align-items: center;
  block-size: var(--wys-aktualna);
  padding-inline: var(--odstep-4);
  font: var(--tekst-wartosc);
  color: var(--atrament-2);
  background: var(--plyta-2);
  border: 1px solid var(--kreska);
  border-radius: var(--promien-1);
  cursor: pointer;
  transition: background-color var(--czas-1) var(--wyjscie),
              color var(--czas-1) var(--wyjscie);
}
.k-wybor-przycisk:hover{ border-color: var(--pole-kreska-mocna); }
.k-wybor-radio:checked + .k-wybor-przycisk{
  background: var(--marka-mgla);
  border-color: var(--marka);
  color: var(--atrament);
}
.k-wybor-radio:focus-visible + .k-wybor-przycisk{
  outline: var(--pierscien) solid var(--marka);
  outline-offset: var(--pierscien-odstep);
}
.k-wybor-radio:disabled + .k-wybor-przycisk{
  color: var(--atrament-3);
  cursor: not-allowed;
  background: var(--pole-tlo-wylaczone);
}
@media (prefers-reduced-motion: reduce){
  .k-wybor, .k-wybor-przycisk{ transition: none; }
  .k-wybor:active{ transform: none; }
}

/* --- wybor wielokrotny: plakietki i pole filtru w JEDNYM obrysie,
       lista zawezana w trakcie pisania. Natywna lista z klawiszem Ctrl
       jest nieobslugiwalna. ---------------------------------------------- */
.k-wybor-wiele {
  position: relative;
  inline-size: 100%;
}

.k-wybor-plakietki {
  display: flex;
  gap: var(--odstep-1);
  flex-wrap: wrap;
  align-items: center;
  min-block-size: var(--wys-aktualna);
  padding: var(--odstep-1) var(--odstep-2);
  background: var(--pole-tlo);
  border: 1px solid var(--pole-kreska);
  border-radius: var(--promien-1);
  transition: border-color var(--czas-1) var(--wyjscie);
}

.k-wybor-wiele:hover .k-wybor-plakietki {
  border-color: var(--pole-kreska-mocna);
}

.k-wybor-wiele:has(.k-wybor-wpis:focus-visible) .k-wybor-plakietki {
  outline: var(--pierscien) solid var(--marka);
  outline-offset: var(--pierscien-odstep);
  border-color: var(--marka);
}

.k-wybor-wiele.jest-do-odczytu .k-wybor-plakietki {
  background: var(--plyta-2);
  border-color: transparent;
}

.k-wybor-wpis {
  flex: 1;
  min-inline-size: calc(var(--u) * 20);
  block-size: calc(var(--u) * 6);
  font: var(--tekst-wartosc);
  color: var(--atrament);
  background: none;
  border: none;
  outline: none;              /* pierscien nosi caly obrys, patrz :has wyzej */
  padding-inline: var(--odstep-1);
}

.k-wybor-wpis::placeholder { color: var(--atrament-3); }

.k-wybor-pusto {
  font: var(--tekst-pomoc);
  color: var(--atrament-3);
  font-style: italic;
}

.k-plakietka {
  display: inline-flex;
  align-items: center;
  gap: var(--odstep-1);
  padding-inline: var(--odstep-2);
  block-size: calc(var(--u) * 6);
  font: var(--tekst-pomoc);
  color: var(--marka-ciemna);
  background: var(--marka-mgla);
  border: 1px solid var(--kreska);
  border-radius: var(--promien-pelny);
}

.k-plakietka-usun {
  display: grid;
  place-items: center;
  inline-size: calc(var(--u) * 4);
  block-size: calc(var(--u) * 4);
  color: var(--atrament-2);
  background: none;
  border: none;
  border-radius: var(--promien-pelny);
  cursor: pointer;
  padding: 0;
  transition: background-color var(--czas-1) var(--wyjscie);
}

.k-plakietka-usun .k-ikona {
  inline-size: calc(var(--u) * 3);
  block-size: calc(var(--u) * 3);
}

.k-plakietka-usun:hover {
  background: var(--alarm-mgla);
  color: var(--alarm);
}

.k-plakietka-usun:focus-visible {
  outline: var(--pierscien) solid var(--marka);
  outline-offset: var(--pierscien-odstep);
}

.k-plakietka-usun:active { transform: var(--wcisniecie); }

/* lista pod obrysem, ta sama warstwa co podpowiedzi wskazania */
.k-wybor-lista {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  z-index: var(--warstwa-lista);
  margin-block-start: var(--odstep-1);
  max-block-size: calc(var(--u) * 60);
  overflow-y: auto;
  background: var(--plyta);
  border: 1px solid var(--kreska);
  border-radius: var(--promien-2);
  box-shadow: var(--cien-lista);
}

@media (prefers-reduced-motion: reduce) {
  .k-wybor-plakietki, .k-plakietka-usun { transition: none; }
  .k-plakietka-usun:active { transform: none; }
}