/* ==========================================================================
   Farmersi 2.0 — arkusz.css
   Arkusz rozgrywki: nagłówek, dwie grupy zakładek, tabele, oferty,
   pływający panel limitu.

   Zasady: mobile-first (375 px), bez poziomego przewijania, cele dotykowe
   od 44 px. Wyjątkiem są szerokie tabele wyników — te mają własne
   przewijanie poziome w kontenerze, ale sama strona się nie przewija.
   ========================================================================== */

/* ==========================================================================
   NAGŁÓWEK ARKUSZA
   ========================================================================== */

.arkusz-naglowek {
  margin-bottom: var(--odst-5);
  padding-bottom: var(--odst-4);
  border-bottom: 3px double var(--linia-mocna);
}

.arkusz-tytul {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--odst-2);
}

.arkusz-tytul h1 {
  margin: 0;
  font-size: var(--rozmiar-2xl);
}

.arkusz-miesiac {
  margin: 0;
  font-family: var(--font-naglowek);
  font-size: var(--rozmiar-m);
  font-weight: 700;
  color: var(--akcent);
}

.arkusz-tura {
  color: var(--tekst-mutowany);
  font-weight: 400;
}

/* --- Wybór roku --------------------------------------------------------- */

.arkusz-lata {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--odst-1);
  margin-top: var(--odst-2);
}

.arkusz-lata .rok {
  padding: var(--odst-2) var(--odst-3);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-liczby);
  font-size: var(--rozmiar-s);
  color: var(--tekst-mutowany);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--promien-s);
}

.arkusz-lata .rok:hover {
  background: var(--tlo-papier-ciemny);
  color: var(--tekst);
}

.arkusz-lata .rok[aria-current='page'] {
  color: var(--akcent-czerwony);
  font-weight: 700;
  border-color: var(--akcent-czerwony);
  background: var(--tlo-papier);
}

.arkusz-lata .rok[aria-disabled='true'] {
  opacity: 0.45;
}

/* --- Metadane i opis ---------------------------------------------------- */

.arkusz-meta {
  margin-top: var(--odst-3);
  font-size: var(--rozmiar-s);
}

.arkusz-meta p {
  margin: 0 0 var(--odst-1);
}

.arkusz-etykieta {
  color: var(--tekst-mutowany);
}

.arkusz-opis {
  margin: var(--odst-3) 0 0;
  padding: var(--odst-3);
  font-size: var(--rozmiar-s);
  font-style: italic;
  line-height: 1.55;
  color: var(--tekst);
  background: var(--tlo-papier-ciemny);
  border-left: 4px solid var(--linia-mocna);
  border-radius: 0 var(--promien-s) var(--promien-s) 0;
}

/* Pasek zobowiązań — widoczny zawsze, aktualizowany na żywo. */
.arkusz-zobowiazania {
  margin: var(--odst-3) 0 0;
  font-family: var(--font-liczby);
  font-size: var(--rozmiar-m);
  font-weight: 700;
  color: var(--akcent-zielony);
}

.arkusz-zobowiazania.jest-przekroczenie {
  color: var(--akcent-czerwony);
}

/* ==========================================================================
   DWIE GRUPY ZAKŁADEK
   Rozliczenie (co było) i plan (decyzje) wyglądają inaczej, żeby gracz
   od razu wiedział, gdzie przegląda, a gdzie decyduje.
   ========================================================================== */

.arkusz-grupa {
  margin-bottom: var(--odst-4);
  padding: var(--odst-3);
  border-radius: var(--promien-m);
  border: 1px solid var(--linia);
}

.arkusz-grupa--rozliczenie {
  background: rgba(139, 111, 69, 0.09);
}

.arkusz-grupa--plan {
  background: rgba(92, 122, 74, 0.1);
  border-color: rgba(92, 122, 74, 0.4);
}

.arkusz-grupa-naglowek {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--odst-2);
  margin-bottom: var(--odst-2);
}

.arkusz-grupa-tytul {
  font-family: var(--font-naglowek);
  font-size: var(--rozmiar-s);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tekst-mutowany);
}

.arkusz-grupa--plan .arkusz-grupa-tytul {
  color: #3f6b2f;
}

.arkusz-grupa-opis {
  font-size: var(--rozmiar-xs);
  color: var(--tekst-mutowany);
}

/* Pasek zakładek w grupie — bez marginesu, bo grupa ma własne tło. */
.arkusz-grupa .zakladki {
  margin-bottom: var(--odst-3);
  border-bottom: 1px solid var(--linia);
  padding-bottom: var(--odst-2);
}

/* Treść zakładek leży WEWNĄTRZ ramki grupy — dzięki temu widać, że
   „podsumowanie" i „finanse" należą do rozliczenia, a pozostałe cztery
   do planu na następny rok (uwaga właściciela). */
.arkusz-grupa-tresc > [data-zakladka-tresc] > .arkusz-karta:last-child,
.arkusz-grupa-tresc > [data-zakladka-tresc] > .arkusz-siatka:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   KARTY I SIATKI ARKUSZA
   ========================================================================== */

.arkusz-siatka {
  display: grid;
  gap: var(--odst-4);
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: var(--odst-4);
}

.arkusz-siatka > * {
  min-width: 0;
}

@media (min-width: 60rem) {
  .arkusz-siatka {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.arkusz-karta {
  margin-bottom: var(--odst-4);
  padding: var(--odst-4);
  background: var(--tlo-papier);
  border: 1px solid var(--linia);
  border-radius: var(--promien-m);
  box-shadow: var(--cien-1);
  min-width: 0;
}

.arkusz-karta > h2 {
  margin: 0 0 var(--odst-3);
  padding-bottom: var(--odst-2);
  border-bottom: 1px solid var(--linia-slaba);
  font-size: var(--rozmiar-m);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--odst-2);
}

.arkusz-karta > h3 {
  margin: 0 0 var(--odst-2);
  font-size: var(--rozmiar-s);
  color: var(--akcent);
}

.arkusz-karta--boczna {
  margin-bottom: 0;
}

/* Wykresy finansowe: oba w prawej kolumnie, jeden pod drugim —
   wcześniej wykres przychodów zostawiał dużo pustego miejsca w karcie
   (uwaga właściciela). */
.arkusz-siatka--finanse {
  align-items: start;
}

.arkusz-siatka--finanse .stos {
  display: flex;
  flex-direction: column;
  gap: var(--odst-4);
  min-width: 0;
}

.arkusz-siatka--finanse .stos > .arkusz-karta {
  margin-bottom: 0;
}

.arkusz-komentarz {
  margin: var(--odst-3) 0;
  font-size: var(--rozmiar-s);
  line-height: 1.5;
  color: var(--tekst-mutowany);
}

.arkusz-przypis {
  margin: var(--odst-2) 0 0;
  font-size: var(--rozmiar-xs);
  color: var(--tekst-mutowany);
}

/* ==========================================================================
   TABELE ARKUSZA
   ========================================================================== */

.tabela--arkusz {
  width: 100%;
  font-size: var(--rozmiar-s);
}

.tabela--arkusz caption {
  text-align: left;
  font-family: var(--font-naglowek);
  font-weight: 700;
  padding-bottom: var(--odst-2);
  color: var(--akcent);
}

.tabela--arkusz th,
.tabela--arkusz td {
  padding: var(--odst-2) var(--odst-2);
  border-bottom: 1px solid var(--linia-slaba);
  text-align: left;
  vertical-align: top;
}

.tabela--arkusz th {
  font-size: var(--rozmiar-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tekst-mutowany);
  border-bottom: 2px solid var(--linia-mocna);
  background: rgba(139, 90, 43, 0.07);
  white-space: nowrap;
}

.tabela--arkusz .liczby {
  text-align: right;
  white-space: nowrap;
}

.tabela--arkusz tr.wiersz--ja {
  background: rgba(201, 162, 39, 0.16);
  font-weight: 700;
}

/* Wiersz będący śródtytułem wewnątrz tabeli (np. „mieszkańcy posiadają"). */
.tabela--arkusz tr.wiersz--srodtytul td {
  padding-top: var(--odst-3);
  font-family: var(--font-naglowek);
  font-weight: 700;
  color: var(--akcent);
  border-bottom-color: var(--linia-mocna);
}

.gracz-druzyna {
  font-size: var(--rozmiar-xs);
  font-weight: 400;
  color: var(--tekst-mutowany);
}

/* Zmiany — zieleń dla wzrostu, czerwień dla spadku. */
.zmiana {
  font-size: var(--rozmiar-xs);
  font-family: var(--font-liczby);
  white-space: nowrap;
}

.zmiana--wzrost {
  color: #2f6b2f;
}

.zmiana--spadek {
  color: var(--akcent-czerwony);
}

.zmiana--brak {
  color: var(--tekst-mutowany);
}

/* ==========================================================================
   WYKRESY I WIZUALIZACJA WSI
   ========================================================================== */

.wykres,
.wioska {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.wioska-ikona {
  transform-box: fill-box;
}

/* ==========================================================================
   UKŁAD RYNKU — na desktopie dwie kolumny
   Właściciel: „poszczególne rynki - może mógłbyś zrobić bardziej
   kompaktowo na desktopie: z lewej wykres popyt-podaż, niżej tabelka
   z danymi, a ustawianie oferty z prawej strony?"
   ========================================================================== */

.rynek-uklad {
  display: grid;
  gap: var(--odst-4);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 60rem) {
  /* Lewa kolumna (wykres + tabela) WĘŻSZA niż prawa (oferta) — w ofercie
     muszą zmieścić się trzy przyciski, pole liczbowe i suwak w jednej
     linii (uwaga właściciela). */
  .rynek-uklad {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
}

/* Na wąskim ekranie oferta stoi pierwsza — to ona jest do klikania. */
@media (max-width: 59.99rem) {
  .rynek-prawa {
    order: -1;
  }
}

.rynek-lewa,
.rynek-prawa {
  min-width: 0;
}

.rynek-wykres {
  min-width: 0;
}

.wykres--maly {
  max-width: 22rem;
}

/* Legenda POZA obszarem rysowania — osobny wiersz HTML, nie w SVG. */
.rynek-legenda {
  display: flex;
  align-items: center;
  gap: var(--odst-3);
  margin: var(--odst-1) 0 0;
  padding-left: var(--odst-4);
  font-size: var(--rozmiar-xs);
  color: var(--tekst-mutowany);
}

.legenda-kropka {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
  margin-right: var(--odst-1);
  vertical-align: middle;
}

.rynek-dane {
  min-width: 0;
}

/* ==========================================================================
   PASTWISKA — ustawienie działek przeznaczonych na wypas
   Właściciel: „na rynku ziemi brakuje ustawienia ile ziemi przeznaczone
   jest na pastwiska — to bardzo ważna informacja — reszta ziemi idzie na
   uprawy. jeśli za mało pastwisk to zwierzęta mogą umrzeć z powodu tłoku".
   ========================================================================== */

.pole-pastwisk {
  margin-top: var(--odst-4);
  padding: var(--odst-3);
  background: rgba(92, 122, 74, 0.1);
  border: 1px solid rgba(92, 122, 74, 0.4);
  border-radius: var(--promien-s);
}

.pole-pastwisk-naglowek {
  display: flex;
  align-items: center;
  gap: var(--odst-2);
  margin-bottom: var(--odst-2);
}

.pole-pastwisk-tytul {
  font-family: var(--font-naglowek);
  font-size: var(--rozmiar-s);
  font-weight: 700;
  color: #3f6b2f;
}

.pole-pastwisk-sterowanie {
  display: flex;
  align-items: center;
  gap: var(--odst-3);
}

.pole-pastwisk-sterowanie input[type='range'] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  accent-color: #5c7a4a;
}

.pole-pastwisk-sterowanie output {
  flex: 0 0 auto;
  min-width: 7rem;
  padding: var(--odst-1) var(--odst-2);
  text-align: center;
  font-family: var(--font-liczby);
  font-size: var(--rozmiar-s);
  font-weight: 700;
  background: #fffdf7;
  border: 1px solid var(--linia-mocna);
  border-radius: var(--promien-s);
}

.pole-pastwisk-info {
  margin: var(--odst-2) 0 0;
  font-size: var(--rozmiar-xs);
  color: var(--tekst-mutowany);
}

.pole-pastwisk-info[data-ocena='slabe'] {
  color: #8a5a10;
  font-weight: 700;
}

.pole-pastwisk-info[data-ocena='zle'] {
  color: var(--akcent-czerwony);
  font-weight: 700;
}

/* Zboże bez spichlerza — przycisk „sprzedaj wszystko".
   Etykieta łamie się na dwie linijki przez jawny <br> w HTML, a nie przez
   zawijanie: `white-space` ustawione na przycisku nie działało (dziedziczył
   `nowrap` z `.przycisk-mini`), a `max-width` tylko ucinał tekst.
   Zmierzone: `wrap=nowrap`, `maxW=57,6 px`, `scrollW` dwa razy większy
   od szerokości. Jawne `<br>` jest pewne i czytelne w kodzie. */
.przycisk-mini--sprzedaj {
  font-size: 0.52rem;
  padding: 3px 4px;
  letter-spacing: 0;
  line-height: 1.15;
  text-align: center;
  /* Dwie linijki mieszczą się tylko w wyższym przycisku. */
  min-height: 40px;
}

.przycisk-mini--sprzedaj.jest-wcisniety {
  background: var(--akcent-czerwony);
  border-color: var(--akcent-czerwony);
  color: #fff8e6;
}

.przycisk-mini:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.oferta input[readonly] {
  background: #efe6d2;
  color: var(--tekst-mutowany);
}

.oferta-suwak:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.oferta[data-zablokowane='tak'] {
  background: rgba(139, 111, 69, 0.07);
}

/* ==========================================================================
   OFERTY — suwak + pole liczbowe + przyciski 0/max
   ========================================================================== */

.oferty-naglowek {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--odst-2);
  margin-bottom: var(--odst-3);
  font-size: var(--rozmiar-xs);
  color: var(--tekst-mutowany);
}

.oferty {
  display: flex;
  flex-direction: column;
  gap: var(--odst-2);
}

/* --- Wiersz oferty ------------------------------------------------------
   Każde dziecko ma NAZWANY obszar siatki. Bez tego pole liczbowe trafiało
   do przypadkowej komórki (auto-placement) i wyglądało, jakby go nie było
   (błąd znaleziony pomiarem — pole lądowało w kolumnie ceny).

   Mobilnie (375 px) trzy przyciski i pole NIE mieszczą się w jednej linii —
   dlatego cena i przyciski to jedna linia, a pole liczbowe dostaje własny
   wiersz. Wcześniej tekst przycisku nachodził na sąsiedni przycisk.
   Desktop: wszystko w JEDNYM wierszu. */

.oferta {
  display: grid;
  gap: var(--odst-1) var(--odst-2);
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    'cena sterowanie'
    'pole pole'
    'suwak suwak'
    'status status';
  align-items: center;
  padding: var(--odst-2);
  border: 1px solid var(--linia-slaba);
  border-radius: var(--promien-s);
  background: var(--tlo-papier-ciemny);
  transition: border-color var(--czas-szybki) var(--krzywa);
}

@media (min-width: 48rem) {
  .oferta {
    /* Właściciel: „na wszystkich 3 rynkach ucina się tekst z prawej strony
       przy większych liczbach… może należy powiększyć całą prawą kolumnę,
       albo trochę skrócić suwaki, by było więcej miejsca na te teksty."
       Status dostał 8 rem, suwak oddaje miejsce (min 2,5 rem). */
    grid-template-columns: 2.6rem max-content max-content minmax(2.5rem, 1fr) 8rem;
    grid-template-areas: 'cena sterowanie pole suwak status';
    gap: 0.25rem;
    padding: var(--odst-1) var(--odst-2);
  }
}

.oferta > input[type='number'],
.oferta > input[type='text'] {
  grid-area: pole;
  justify-self: start;
}

/* Pole w trybie „sprzedaj wszystko" — pokazuje słowo, nie liczbę, bo
   gracz nie zna jeszcze wielkości produkcji. */
.oferta > input.oferta-wszystko {
  width: 5.4rem;
  min-height: 34px;
  padding: 2px var(--odst-1);
  text-align: center;
  font-family: var(--font-naglowek);
  font-size: var(--rozmiar-xs);
  font-weight: 700;
  font-style: italic;
  color: var(--akcent-czerwony);
  background: #f6e7e4;
  border: 1px solid #cf8177;
  border-radius: var(--promien-s);
}

.oferta--kupno {
  border-color: #5b9b7e;
  background: rgba(91, 155, 126, 0.12);
}

.oferta--sprzedaz {
  border-color: #cf8177;
  background: rgba(207, 129, 119, 0.12);
}

.oferta-cena {
  grid-area: cena;
  font-weight: 700;
  font-size: var(--rozmiar-s);
  white-space: nowrap;
}

.oferta-sterowanie {
  grid-area: sterowanie;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex-wrap: nowrap;
}

.oferta-sterowanie input[type='number'] {
  width: 3rem;
  min-height: 34px;
  padding: 2px 2px;
  text-align: center;
  font-family: var(--font-liczby);
  font-size: var(--rozmiar-s);
  font-weight: 700;
  background: #fffdf7;
  border: 1px solid var(--linia-mocna);
  border-radius: var(--promien-s);
}

/* Małe przyciski oferty — mieszczą się po trzy w wierszu, więc suwak
   ma miejsce. Cele dotykowe nadal ≥ 32 px, a na mobile rosną. */
.przycisk-mini {
  min-height: 34px;
  min-width: 28px;
  padding: 2px 5px;
  font-family: var(--font-naglowek);
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--tekst);
  background: var(--tlo-papier);
  border: 1px solid var(--linia-mocna);
  border-radius: var(--promien-s);
  cursor: pointer;
  transition: background-color var(--czas-szybki) var(--krzywa);
}

@media (max-width: 47.99rem) {
  .przycisk-mini {
    min-height: 44px;
    min-width: 44px;
    font-size: var(--rozmiar-xs);
  }
}

.przycisk-mini:hover {
  background: #e7d9ba;
  border-color: var(--akcent);
}

.przycisk-mini--max {
  background: #e9dcbe;
}

.oferta-suwak {
  grid-area: suwak;
  width: 100%;
  min-width: 0;
  min-height: 34px;
  margin: 0;
  accent-color: var(--akcent-zielony);
  cursor: ew-resize;
}

.oferta--sprzedaz .oferta-suwak {
  accent-color: var(--accent-czerwony, var(--akcent-czerwony));
}

.oferta-status {
  grid-area: status;
  font-size: var(--rozmiar-xs);
  font-family: var(--font-liczby);
  color: var(--tekst-mutowany);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Status jest najdłuższy („sprzedaż: 969 worków"), więc na węższych
   ekranach skracamy go do samej liczby — szczegół i tak widać w polu. */
@media (max-width: 74.99rem) {
  .oferta-status {
    font-size: 0.65rem;
  }
}

.oferta-status[data-kierunek='kupno'] {
  color: #2f6b2f;
  font-weight: 700;
}

.oferta-status[data-kierunek='sprzedaz'] {
  color: var(--akcent-czerwony);
  font-weight: 700;
}

.oferty-dodatkowe {
  margin-top: var(--odst-3);
  display: flex;
  flex-direction: column;
  gap: var(--odst-3);
}

/* Przyciski rynku — „zeruj rynek" obok „maksymalizuj" (uwaga właściciela). */
.oferty-przyciski {
  display: flex;
  flex-wrap: wrap;
  gap: var(--odst-2);
  margin-top: var(--odst-3);
}

.oferty-przyciski .przycisk-mini {
  padding-inline: var(--odst-4);
}

.pole-arkusza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--odst-2);
  font-size: var(--rozmiar-s);
  border: none;
  margin: 0;
  padding: 0;
}

.pole-arkusza label,
.pole-arkusza > span {
  color: var(--tekst-mutowany);
}

.pole-arkusza input[type='number'] {
  width: 5rem;
  min-height: 44px;
  padding: var(--odst-1) var(--odst-2);
  text-align: center;
  font-family: var(--font-liczby);
  background: #fffdf7;
  border: 1px solid var(--linia-mocna);
  border-radius: var(--promien-s);
}

.pole-arkusza--checkbox {
  cursor: pointer;
}

.pole-arkusza fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--odst-1);
}

/* ==========================================================================
   INWESTYCJE
   ========================================================================== */

.lista-inwestycji {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--odst-2);
}

.inwestycja {
  padding: var(--odst-3);
  border: 1px solid var(--linia-slaba);
  border-radius: var(--promien-s);
  background: var(--tlo-papier-ciemny);
}

.inwestycja--wybrana {
  border-color: var(--akcent-zielony);
  background: rgba(92, 122, 74, 0.12);
}

.inwestycja-glowna {
  display: flex;
  align-items: center;
  gap: var(--odst-2);
  min-height: 44px;
  cursor: pointer;
  font-weight: 700;
}

.inwestycja-szczegoly {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--odst-1);
  font-size: var(--rozmiar-xs);
  color: var(--tekst-mutowany);
}

.inwestycja-szczegol {
  margin-top: var(--odst-1);
  font-size: var(--rozmiar-xs);
  font-family: var(--font-liczby);
  color: #2f6b2f;
}

/* Irygacja: suwak zamiast checkboxa — ustawiamy ILE działek ziryglować.
   Właściciel: „tu checkbox niepotrzebny… można dać suwak — min na zero,
   a max na wszystkie działki minus zirygowane, albo limit wydatków przez
   koszt irygacji — w zależności co mniejsze". */
.inwestycja-suwak {
  display: flex;
  align-items: center;
  gap: var(--odst-3);
  margin-top: var(--odst-2);
}

.inwestycja-suwak input[type='range'] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  accent-color: var(--akcent-zielony);
}

.inwestycja-suwak output {
  flex: 0 0 auto;
  min-width: 6rem;
  padding: var(--odst-1) var(--odst-2);
  text-align: center;
  font-family: var(--font-liczby);
  font-size: var(--rozmiar-s);
  font-weight: 700;
  background: #fffdf7;
  border: 1px solid var(--linia-mocna);
  border-radius: var(--promien-s);
}

/* ==========================================================================
   IKONA POMOCY „?"
   W 1.0 wyjaśnienia siedziały w title="" — niedostępne na dotyk
   i z klawiatury. Tutaj to element fokusowalny z pełnym opisem.
   ========================================================================== */

.pomoc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  font-family: var(--font-liczby);
  font-size: 0.7rem;
  font-weight: 700;
  color: #6b4a26;
  background: #e9dcbe;
  border: 1px solid var(--linia-mocna);
  border-radius: var(--promien-krag);
  cursor: help;
  vertical-align: middle;
}

.pomoc:hover,
.pomoc:focus-visible {
  background: var(--akcent-zloto);
  color: #241a10;
}

/* ==========================================================================
   PŁYWAJĄCY PANEL LIMITU ZLECEŃ
   Właściciel: „na dole ekranu z prawej strony jest pływające okienko,
   niezależne od zakładek — pokazuje dostępny limit zleceń oraz wartość
   wszystkich zleceń zakupu. To można rozbudować."

   Na mobile i na średnich ekranach panel jest przyklejony do dołu.
   Na szerokich ekranach przechodzi do stałej kolumny po prawej —
   chowamy go wtedy do siatki, żeby NIE zasłaniał treści i nie wymuszał
   zwężania kontenera (uwagi właściciela z dwóch rund).
   ========================================================================== */

.limit-panel {
  grid-area: limit;
  position: sticky;
  /* NAD treścią, ale POD dolnym paskiem menu (z-index 39) — inaczej pasek
     zasłaniał prawą część panelu na wąskim ekranie. */
  bottom: 4.5rem;
  z-index: 30;
  align-self: start;
  margin-top: var(--odst-5);
  padding: var(--odst-3) var(--odst-4);
  display: grid;
  gap: var(--odst-2) var(--odst-5);
  grid-template-columns: minmax(0, 1fr);
  background: var(--tlo-papier);
  border: 2px solid var(--linia-mocna);
  border-radius: var(--promien-m);
  box-shadow: var(--cien-3);
  font-size: var(--rozmiar-xs);
}

@media (min-width: 48rem) {
  .limit-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    bottom: var(--odst-4);
  }
}

/* UWAGA O PANELU — wyjaśnienie właściciela:
   „menu ma z-index 40, a panel z-index 30, dlatego panel był z tyłu.
   wystarczy panel zrobić z-index 99 i będzie dobrze. on musi być ciągle
   widoczny, więc poprzednie rozwiązanie było dobre, tylko ten z-index."

   Miał rację — przyczyną był WYŁĄCZNIE z-index, nie sposób pozycjonowania.
   Panel wraca więc do `position: fixed` przy prawej krawędzi, a kontener
   główny zostaje pełnej szerokości. */

@media (min-width: 60rem) {
  body[data-strona='arkusz'] .glowna {
    display: block;
  }

  .limit-panel {
    position: fixed;
    right: var(--odst-4);
    top: 50%;
    transform: translateY(-50%);
    bottom: auto;
    width: 15.5rem;
    margin-top: 0;
    grid-template-columns: minmax(0, 1fr);
    max-height: calc(100vh - 2 * var(--odst-4));
    overflow-y: auto;
    /* 99 — NAD paskiem menu (40) i bannerem. Panel musi być zawsze widoczny. */
    z-index: 99;
  }

  .limit-panel::-webkit-scrollbar {
    width: 8px;
  }

  .limit-panel::-webkit-scrollbar-thumb {
    background: var(--linia-mocna);
    border-radius: 4px;
  }
}

/* Poniżej 60 rem panel wisi przyklejony do dołu, w trzech kolumnach. */
@media (max-width: 59.99rem) {
  .limit-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .limit-grupa--wynik {
    grid-column: 1 / -1;
  }
}

.limit-grupa {
  min-width: 0;
}

.limit-tytul {
  margin-bottom: var(--odst-1);
  font-family: var(--font-naglowek);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tekst-mutowany);
}

.limit-wiersz {
  display: flex;
  justify-content: space-between;
  gap: var(--odst-2);
  line-height: 1.5;
}

.limit-wiersz b {
  font-family: var(--font-liczby);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.limit-wiersz--suma {
  margin-top: var(--odst-1);
  padding-top: var(--odst-1);
  border-top: 1px solid var(--linia-slaba);
  font-weight: 700;
}

.limit-grupa--wynik {
  font-size: var(--rozmiar-s);
  color: #2f6b2f;
}

.limit-grupa--wynik.jest-przekroczenie {
  color: var(--akcent-czerwony);
}

/* Na małych ekranach panel jest nisko, ale nie zasłania dolnego paska
   menu — trzymamy dla niego odstęp. */
@media (max-width: 47.99rem) {
  .limit-panel {
    bottom: 4.5rem;
    padding: var(--odst-2) var(--odst-3);
  }
}