/* REAKCJE HELL YEAH! / FUCK NO! / WTF?!: trzy warianty kazdego przycisku (CEO 16.10.2026).
   Wariant zalezy od szerokosci zestawu, a nie okna (container query), bo ta sama karta ma 200 px
   w kolumnie siatki i 430 px w szerokiej. Kolejnosc: najpierw A, wieksze nadpisuja.
     A mala   - ikona w kolorze reakcji i liczba (waskie karty, telefon)
     C srednia - sam napis w kolorze i stylu ikony, liczba obok
     B duza   - ikona i napis-tasma z brand boardu
   Bezpiecznik: przycisk nie kurczy sie ponizej tresci (min-width:max-content), wiec gdy nawet A sie
   nie miesci, zestaw zawija sie do drugiego rzedu zamiast wychodzic poza karte albo ucinac napis.
   Rolki (.nk) maja wlasny pionowy uklad w kolaz.css i tu nie wchodza. */

.rxs.rxa{container:rx / inline-size;display:flex;flex-wrap:wrap;gap:5px;min-width:0;
  --rx-f:13px;--rx-ic:16px;--rx-nf:12px;--rx-h:30px}
.rxs.rxa.lg{container-name:rxlg;--rx-f:24px;--rx-ic:24px;--rx-nf:15px;--rx-h:44px;gap:12px}
/* Zestaw w siatce nosi klase "chip", ktora jest tez klasa przyciskow kategorii (app.css .chip): bez tego
   dostawal ich padding 16 px z kazdej strony, ramke, tlo i inline-flex, czyli ponad 30 px mniej na reakcje
   (to wypychalo WTF?! poza waskie karty SLOPIT). */
.rxs.rxa.chip{display:flex;flex:0 0 auto;padding:0;border:0;background:none;border-radius:0;min-height:0;font:inherit;letter-spacing:normal;color:inherit}
.wl-card .rxs.rxa.wl-rx{padding:8px 8px 0}
/* w rzedzie flex (karta feedu, widok posta) kontener musi dostac szerokosc z rodzica, nie z tresci */
.fc-r>.rxs.rxa,.react-row>.rxs.rxa{flex:1 1 0;min-width:min(100%,160px)}
.rxs.rxa .rx-hell{--rx-k:#FFD400}
.rxs.rxa .rx-fuck{--rx-k:#FF3B30}
.rxs.rxa .rx-wtf{--rx-k:#B48CFF}

/* ---- A: mala, ikona + liczba ---- */
.rxs.rxa .rx{flex:1 1 0;min-width:max-content;display:flex;flex-direction:row;align-items:center;justify-content:center;
  gap:4px;min-height:var(--rx-h);height:auto;padding:3px 6px;background:#111!important;color:var(--paper);
  border:2px solid var(--rx-k);border-radius:3px;box-shadow:2px 2px 0 #000;transform:none;line-height:1}
.rxs.rxa .rx-i{display:inline-grid;place-items:center;color:var(--rx-k)}
.rxs.rxa .rx-i .ic{width:var(--rx-ic);height:var(--rx-ic)}
.rxs.rxa .rx-l{display:none}
.rxs.rxa .rx-n{display:inline;font:700 var(--rx-nf)/1 var(--f-body);color:var(--paper)!important;opacity:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.rxs.rxa .rx:hover{transform:translateY(-1px);box-shadow:3px 3px 0 #000}
.rxs.rxa .rx.on{background:var(--rx-k)!important;outline:0;transform:none}
.rxs.rxa .rx.on .rx-i,.rxs.rxa .rx.on .rx-n{color:#000!important}
.rxs.rxa .rx.on::after{top:-8px;right:-6px}

/* ---- C: srednia, sam napis w kolorze ikony ---- */
@container rx (min-width:250px){
  .rxs.rxa .rx-i{display:none}
  .rxs.rxa .rx-l{display:block;background:none!important;outline:0;box-shadow:none;transform:none;padding:0;
    font:var(--rx-f)/1 var(--f-head);letter-spacing:.03em;white-space:nowrap;overflow:visible;text-overflow:clip;color:var(--rx-k)!important}
  .rxs.rxa .rx:hover .rx-l{transform:none}
  .rxs.rxa .rx.on .rx-l{color:#000!important;box-shadow:none}
}
/* ---- B: duza, ikona + napis-tasma ---- */
@container rx (min-width:350px){
  .rxs.rxa .rx{background:none!important;border:0;box-shadow:none;padding:2px 0}
  .rxs.rxa .rx-i{display:inline-grid}
  .rxs.rxa .rx-l{padding:5px 8px 4px;box-shadow:2px 3px 0 rgba(0,0,0,.6);transition:transform .15s}
  .rxs.rxa .rx-hell .rx-l{background:var(--acid) url(/img/tape-yellow.webp) center/100% 100%!important;color:#000!important;transform:rotate(-3deg)}
  .rxs.rxa .rx-fuck .rx-l{background:var(--paper) url(/img/tape-paper.webp) center/100% 100%!important;color:#000!important;outline:3px solid var(--alert);outline-offset:-3px;transform:rotate(2deg)}
  .rxs.rxa .rx-wtf .rx-l{background:var(--paper) url(/img/tape-paper.webp) center/100% 100%!important;color:#5b2bd6!important;outline:3px solid var(--blue);outline-offset:-3px;transform:rotate(-1.5deg)}
  .rxs.rxa .rx:hover{transform:none;box-shadow:none}
  .rxs.rxa .rx:hover .rx-l{transform:rotate(0) scale(1.06)}
  .rxs.rxa .rx.on{background:none!important}
  .rxs.rxa .rx.on .rx-i{color:var(--rx-k)!important}
  .rxs.rxa .rx.on .rx-n{color:var(--paper)!important}
  .rxs.rxa .rx.on .rx-l{box-shadow:0 0 0 3px #fff,3px 4px 0 3px #000}
}

/* Widok posta (lg): te same warianty, ale litery sa dwa razy wieksze, wiec wlasny kontener i wyzsze progi.
   Napis na gorze, ikona i liczba pod nim. */
.rxs.rxa.lg .rx{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;gap:6px;padding:6px 8px}
.rxs.rxa.lg .rx-l{grid-column:1 / -1;justify-self:center;order:-1}
.rxs.rxa.lg .rx-i{justify-self:end} .rxs.rxa.lg .rx-n{justify-self:start}
/* bez ikony (C) liczba stoi sama pod napisem, wiec na srodku */
.rxs.rxa.lg[data-tryb="C"] .rx-n{grid-column:1 / -1;justify-self:center}
@container rxlg (min-width:380px){
  .rxs.rxa .rx-i{display:none}
  .rxs.rxa .rx-l{display:block;background:none!important;outline:0;box-shadow:none;transform:none;padding:0;
    font:var(--rx-f)/1 var(--f-head);letter-spacing:.03em;white-space:nowrap;overflow:visible;text-overflow:clip;color:var(--rx-k)!important}
  .rxs.rxa .rx:hover .rx-l{transform:none}
  .rxs.rxa .rx.on .rx-l{color:#000!important;box-shadow:none}
  .rxs.rxa.lg .rx-n{grid-column:1 / -1;justify-self:center}
}
@container rxlg (min-width:520px){
  .rxs.rxa .rx{background:none!important;border:0;box-shadow:none;padding:2px 0}
  .rxs.rxa .rx-i{display:inline-grid}
  .rxs.rxa .rx-l{padding:5px 8px 4px;box-shadow:2px 3px 0 rgba(0,0,0,.6);transition:transform .15s}
  .rxs.rxa .rx-hell .rx-l{background:var(--acid) url(/img/tape-yellow.webp) center/100% 100%!important;color:#000!important;transform:rotate(-3deg)}
  .rxs.rxa .rx-fuck .rx-l{background:var(--paper) url(/img/tape-paper.webp) center/100% 100%!important;color:#000!important;outline:3px solid var(--alert);outline-offset:-3px;transform:rotate(2deg)}
  .rxs.rxa .rx-wtf .rx-l{background:var(--paper) url(/img/tape-paper.webp) center/100% 100%!important;color:#5b2bd6!important;outline:3px solid var(--blue);outline-offset:-3px;transform:rotate(-1.5deg)}
  .rxs.rxa .rx:hover{transform:none;box-shadow:none}
  .rxs.rxa .rx:hover .rx-l{transform:rotate(0) scale(1.06)}
  .rxs.rxa .rx.on{background:none!important}
  .rxs.rxa .rx.on .rx-i{color:var(--rx-k)!important}
  .rxs.rxa .rx.on .rx-n{color:var(--paper)!important}
  .rxs.rxa .rx.on .rx-l{box-shadow:0 0 0 3px #fff,3px 4px 0 3px #000}
  .rxs.rxa.lg .rx-n{grid-column:auto;justify-self:start}
}

/* Wymuszenie nizszego wariantu przez reakcje-dopasuj.js (dlugie liczby, zestaw by sie zawinal).
   Atrybut podnosi specyficznosc, wiec wygrywa z regulami z container query powyzej. */
.rxs.rxa[data-tryb] .rx{background:#111!important;border:2px solid var(--rx-k);box-shadow:2px 2px 0 #000;padding:3px 6px}
.rxs.rxa[data-tryb] .rx.on{background:var(--rx-k)!important}
.rxs.rxa[data-tryb] .rx.on .rx-i,.rxs.rxa[data-tryb] .rx.on .rx-n,.rxs.rxa[data-tryb] .rx.on .rx-l{color:#000!important}
.rxs.rxa[data-tryb] .rx.on .rx-l{box-shadow:none}
.rxs.rxa[data-tryb="A"] .rx-i{display:inline-grid}
.rxs.rxa[data-tryb="A"] .rx-l{display:none}
.rxs.rxa[data-tryb="C"] .rx-i{display:none}
.rxs.rxa[data-tryb="C"] .rx-l{display:block;background:none!important;outline:0;box-shadow:none;transform:none;padding:0;
  font:var(--rx-f)/1 var(--f-head);letter-spacing:.03em;white-space:nowrap;color:var(--rx-k)!important}
.rxs.rxa[data-tryb="A2"]{gap:3px}
.rxs.rxa[data-tryb="A2"] .rx{gap:3px;padding:2px 4px;min-height:26px}
.rxs.rxa[data-tryb="A2"] .rx-i{display:inline-grid}
.rxs.rxa[data-tryb="A2"] .rx-i .ic{width:13px;height:13px}
.rxs.rxa[data-tryb="A2"] .rx-l{display:none}
.rxs.rxa[data-tryb="A2"] .rx-n{font-size:11px;letter-spacing:-.02em}
.rxs.rxa[data-tryb="A2"] .rx-u{display:none}