/* LOV³ runda 2 - dwa przyciski. Wymaga lov3-tokeny.css i fonts/lov3-kroje.css.
   Jeden .tecza na ekranie; każdy inny przycisk to .ramka o tym samym wymiarze.
   Wyłączony: aria-disabled="true" (przycisk zostaje w kolejności fokusu). Działa na <a> i <button>. */
.tecza,.ramka{
  --wew:0 0 0 0 transparent;              /* obrys wewnętrzny (dzień tęczy, wciśnięcie) */
  --pierscien:0 0 0 0 transparent;        /* odstęp fokusu w kolorze tła */
  box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:var(--przycisk-h); min-height:var(--cel-min); padding:0 24px; margin:0;
  border:0; border-radius:var(--promien);
  font:600 16px/24px var(--f-interfejs); text-decoration:none; white-space:nowrap; cursor:pointer;
  box-shadow:var(--pierscien),var(--wew);
  transition:transform var(--t-wcisniecie) var(--krzywa-odpowiedz);
  -webkit-tap-highlight-color:transparent;
}
.tecza{ background:var(--tecza); color:var(--tecza-tekst); text-shadow:none; }
[data-skorka="dzien"] .tecza{ --wew:inset 0 0 0 1px var(--tecza-obrys); }
.ramka{ background:transparent; color:var(--papier); --wew:inset 0 0 0 1px var(--linia); }

/* fokus z rundy 1: 2 px w kolorze tekstu, odstęp 2 px w kolorze tła */
.tecza:focus-visible,.ramka:focus-visible{
  outline:var(--fokus-grubosc) solid var(--fokus); outline-offset:var(--fokus-odstep-px);
  --pierscien:0 0 0 var(--fokus-odstep-px) var(--fokus-odstep);
}
.tecza:focus:not(:focus-visible),.ramka:focus:not(:focus-visible){ outline:none; }

/* wciśnięty: 1 px w dół, obrys wewnętrzny 2 px; gradientu się nie przyciemnia */
.tecza:active:not([aria-disabled="true"]){ transform:translateY(1px); --wew:inset 0 0 0 2px var(--tecza-tekst); }
.ramka:active:not([aria-disabled="true"]){ transform:translateY(1px); background:var(--hair); --wew:inset 0 0 0 2px var(--papier); }

/* wyłączony: wypełnienie, nie obrys; bez tęczy */
.tecza[aria-disabled="true"],.ramka[aria-disabled="true"]{
  background:var(--hair); color:var(--papier2); --wew:0 0 0 0 transparent; cursor:not-allowed; transform:none;
}

/* szerokość: telefon pełna szerokość treści; komputer z treści, co najmniej 280 px */
.przyciski{ display:flex; flex-direction:column; gap:12px; }
.przyciski > *{ width:100%; }
.przyciski--rzad{ flex-direction:row; gap:16px; }
.przyciski--rzad > *{ width:auto; min-width:280px; }

@media (prefers-reduced-motion: reduce){
  .tecza,.ramka{ transition:none; }
  .tecza:active,.ramka:active{ transform:none; }
}