/* 8. Zmiana biura (runda „miks”): dwie strony księgi (KPiR) na siatce, jak plansza sceny miesiąca. Ładowane po telefon.css.
   Papier, granat, czerwień druku, Bricolage (tytuły) i Geist Mono (kwoty) z tokenów strony; żadnych nowych kolorów ani krojów.
   HTML stoi w stanie końcowym (obie strony, zgodne kwoty): tak widać go bez JavaScriptu i przy ograniczonym ruchu. Ruch dokłada zmiana.js.
   Rozmiary tekstu: --t (opis, nagłówki kolumn) ≥ 14 px, --k (kwoty) ≥ 16 px także na telefonie. */

.zmb-gora { margin-bottom: 0; }                                       /* odstęp pod nagłówkiem robi plansza */
.zmb-formy { grid-column: 1 / -1; margin-top: 6px; border-top: 1px solid var(--linia); max-width: 560px; }
.zmb-formy > div { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); column-gap: 12px; padding: 8px 0 9px; border-bottom: 1px solid var(--linia); font-size: 15px; line-height: 1.4; }
.zmb-formy dt { font-weight: 700; font-stretch: 85%; color: var(--tx); }
.zmb-formy dd { color: var(--tx-2); }

/* plansza: siatka milimetrowa jak w scenie miesiąca, dwie strony papieru ułożone schodkowo */
.zmb-ksiega { --t: 15px; --k: 16px; --h: clamp(34px, 10vw, 44px);
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 18px; align-items: start;
  margin: clamp(20px, 3.4svh, 40px) calc(var(--m) * -1) 0; padding: clamp(16px, 2.8svh, 36px) var(--m);
  border-block: 1px solid var(--linia);
  background-image: linear-gradient(90deg, rgba(38, 64, 90, .5) 1px, transparent 1px), linear-gradient(rgba(38, 64, 90, .5) 1px, transparent 1px); background-size: 56px 56px; }
.zmb-strona { position: relative; z-index: 1; padding: 14px 16px 12px; background: var(--papier); color: var(--tusz); border-radius: 2px; box-shadow: var(--cien-papieru); }
.zmb-stara { z-index: 2; rotate: -.5deg; }
.zmb-nowa { rotate: .45deg; }
.zmb-s-gora { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 12px; padding-bottom: 8px; border-bottom: 1.5px solid var(--druk-l); }
.zmb-s-gora h3 { font: 800 var(--h)/.95 var(--sans); font-stretch: 75%; font-variation-settings: "opsz" 84; letter-spacing: .012em; color: var(--tusz); }
.zmb-nowa .zmb-s-gora h3 { color: var(--druk); }
.zmb-okres { font: 500 var(--t)/1 var(--mono); color: var(--tusz-2); white-space: nowrap; }
.zmb-form { grid-column: 1 / -1; font-size: var(--t); line-height: 1.3; color: var(--tusz-2); }

.zmb-tab { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--t); }
.zmb-tab th, .zmb-tab td { padding: .34em 0 .3em; text-align: right; vertical-align: baseline; border-bottom: 1px solid var(--papier-2); font-weight: 400; line-height: 1.25; }
.zmb-tab thead th { padding-top: .6em; font-weight: 600; color: var(--tusz-2); border-bottom: 1.5px solid var(--tusz); }
.zmb-tab .zmb-lp { width: 10%; text-align: left; font-family: var(--mono); color: var(--tusz-2); }
.zmb-tab thead .zmb-lp { font-family: var(--sans); }
.zmb-tab .zmb-dow { width: 38%; text-align: left; }                    /* Lp. + numer dowodu (48%) mieszczą „Przeniesienie z poprzedniej strony” w jednym wierszu */
.zmb-kw { display: inline-block; font: 500 var(--k)/1.25 var(--mono); font-variant-numeric: tabular-nums; white-space: pre; }
.zmb-tab tfoot th { padding-right: 10px; text-align: left; font-weight: 600; color: var(--tusz); }
.zmb-suma > * { border-top: 1.5px solid var(--tusz); }
.zmb-razem > * { border-bottom: 0; padding-top: .5em; padding-bottom: .3em; }
.zmb-razem th { font-weight: 700; }
.zmb-razem .zmb-kw { padding-bottom: 3px; font-size: calc(var(--k) * 1.1); border-bottom: 3px double currentColor; }   /* podwójna kreska pod sumą, jak w księdze */
.zmb-nowa .zmb-razem .zmb-kw { color: var(--druk); }
.zmb-nowa .zmb-przen > * { background: rgba(181, 50, 31, .09); }          /* pole, w które ląduje kwota, jest zaznaczone od początku */
/* MIKS-8: przy włączonym ruchu (klasa zmb-ruch nadaje zmiana.js) zaznaczenia sterują się zmienną --hl (0–1, animuje ją zmiana.js): wiersz źródłowy „Razem od początku roku” zaznacza się przed oderwaniem kwot,
   wiersz docelowy od lądowania pierwszej kwoty; stan końcowy (--hl: 1 w celu) wygląda jak statyczny stan powyżej */
.zmb-ruch .zmb-stara .zmb-razem > * { background: rgba(181, 50, 31, calc(.13 * var(--hl, 0))); }
.zmb-ruch .zmb-nowa .zmb-przen > * { background: rgba(181, 50, 31, calc(.09 * var(--hl, 0))); }
.zmb-przyklad { display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; margin-top: 14px; font-size: 14px; color: var(--tx-3); }
.zmb-przyklad a { color: var(--tx); font-size: 15px; text-decoration: underline; text-decoration-color: var(--druk-noc); text-underline-offset: 4px; }
.zmb-przyklad a:hover { color: #fff; }
@media (max-width: 1000px) { .zmb-przyklad a { display: inline-flex; align-items: center; min-height: 44px; } }
.zmb-przyklad + .zmb-dol { margin-top: clamp(18px, 2.4vh, 32px); }

/* kwota „Razem” poprzedniego biura w locie: ten sam tekst co w komórce, na kartce papieru (tworzy ją zmiana.js, dopiero gdy gra ruch) */
.zmb-lot { --tlo: 1; position: absolute; left: 0; top: 0; z-index: 6; visibility: hidden; pointer-events: none; font: 500 var(--k)/1.15 var(--mono); font-variant-numeric: tabular-nums; white-space: pre; color: var(--druk); will-change: transform; }   /* MIKS-9: pole kwoty 1,15 zamiast 1,25 wysokości pisma (tekst ten sam, środek ten sam): w ciasnych wierszach (ok. 1440 px) 12 px od liter także w komórce źródłowej */
.zmb-lot::before { --zv: -.35em; --zh: -.55em; content: ""; position: absolute; inset: calc(var(--tlo) * var(--zv)) calc(var(--tlo) * var(--zh)); z-index: -1; background: var(--papier); border-radius: 2px; box-shadow: 0 20px 34px -14px rgba(0, 0, 0, calc(.65 * var(--tlo))), 0 5px 12px -5px rgba(0, 0, 0, calc(.5 * var(--tlo))); }   /* kartka bez zmiany: pole niższe o 0,1 em, margines wyższy o 0,05 em z każdej strony */
/* Krzyż po MIKS-10: kartka zawsze nieprzezroczysta; --tlo (zmiana.js) to jej margines (0 = kartka na samym polu cyfr, 1 = pełna) i siła cienia: wyrasta i gaśnie wielkością, nie kryciem
   (przy kryciu czerwone cyfry na brzegu karty leżały na półprzezroczystej kartce nad granatem: 2,6:1, jak „duch” w scenie miesiąca, dol.css .mies-lot) */

/* tablet i telefon: strony jedna pod drugą, druga przesunięta w prawo */
@media (max-width: 1000px) {
  .zmb-strona { width: min(100%, 600px); }
  .zmb-nowa { justify-self: end; }
}
/* MIKS-8: wolny pas między stronami na tor kwoty (pole kwoty + 2 × 13 px od tekstu): odstęp tekst–tekst ok. 80 px (było ok. 32 px); bez ruchu układ jak dotąd */
@media (max-width: 1000px) {
  .zmb-ruch.zmb-ksiega { row-gap: 66px; }
}
@media (min-width: 1101px) {
  .zmb-formy { grid-column: 9 / -1; grid-row: 1 / span 2; align-self: end; margin-top: 0; max-width: none; }
}

/* telefon: tabela staje się siatką (kolumny z kwotami mają stałą szerokość z 10 znaków kwoty), Lp. znika, etykiety podsumowania stoją nad kwotami */
@media (max-width: 560px) {
  .zmb-strona { width: 100%; padding: 14px 14px 12px; }
  .zmb-tab, .zmb-tab thead, .zmb-tab tbody, .zmb-tab tfoot { display: block; }
  .zmb-tab tr { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--k) * 6.4) calc(var(--k) * 6.4); align-items: baseline; }
  .zmb-tab .zmb-lp { display: none; }
  .zmb-tab .zmb-dow { width: auto; }
  .zmb-tab thead th { padding-top: .7em; }
  .zmb-tab th, .zmb-tab td { padding-top: .45em; padding-bottom: .4em; }
  .zmb-tab tfoot th { grid-column: 1 / -1; padding-top: .4em; padding-bottom: 0; font-size: 14px; line-height: 1.2; }
  .zmb-tab tfoot td { border-top: 0; }
  .zmb-tab tfoot .zmb-p { grid-column: 2; }
  .zmb-tab tfoot .zmb-w { grid-column: 3; }
  .zmb-suma > td { border-top: 0; }
  .zmb-tab tfoot td { padding-top: .1em; padding-bottom: .24em; }
  .zmb-razem > td { padding-top: .1em; }
  .zmb-suma th { grid-column: 1; padding-top: .24em; padding-bottom: .24em; font-size: var(--t); line-height: 1.25; }   /* krótka etykieta stoi w jednym wierszu z kwotami */
  .zmb-razem .zmb-kw { font-size: var(--k); }                              /* kolumna kwot ma szerokość 10 znaków kwoty w rozmiarze --k */
  .zmb-ksiega { --h: clamp(30px, 8.6vw, 36px); margin-top: 18px; padding-block: 12px; row-gap: 10px; }
  .zmb-ruch.zmb-ksiega { row-gap: 30px; }                                 /* telefon: bazowy odstęp 10 px + 20 px pasa (pole kwoty 21 px + 2 × 13 px mieści się, bo tekst–tekst między kartkami ma ok. 60 px); MIKS-10: było 58 px, 28 px przeszło do dwóch wierszy kwot poniżej */
  .zmb-ruch .zmb-stara .zmb-razem td { padding-top: calc(.1em + 12px); }   /* MIKS-10: linia kwot „Razem od początku roku” (źródło) 12 px pod podpisem (było 2 px): pole kwoty zaczyna lot ≥ 12 px od liter */
  .zmb-ruch .zmb-nowa .zmb-przen td { padding-top: calc(.1em + 12px); padding-bottom: calc(.24em + 4px); }   /* MIKS-10: linia kwot wiersza przeniesienia 12 px pod podpisem (było 2 px) i 4 px nad podpisem „Razem od początku roku” (pole kwoty ≥ 12 px od liter także w komórce docelowej); tyle samo odjęte z pasa między kartkami: wysokość sekcji bez zmian */
  .zmb-strona { padding: 10px 14px 8px; }
  .zmb-s-gora { padding-bottom: 6px; }
  .zmb-tab tbody th, .zmb-tab tbody td { padding-top: .3em; padding-bottom: .26em; }
  .zmb-formy > div { padding: 7px 0 8px; }
  .zmb-nowa thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* nagłówki kolumn stoją na stronie powyżej; tabela strony Advertax zachowuje je dla czytników ekranu */
  .zmb-nowa .zmb-form { display: none; }                                   /* ten sam druk stoi tuż nad nią; na telefonie oszczędza wiersz */
  .zmb-lot::before { --zv: -.33em; --zh: -.3em; }                          /* kartka lecącej kwoty ciaśniej: dwie kwoty lecą obok siebie i nie zasłaniają sobie cyfr (pole 1,15 → margines 0,33 em daje ten sam rozmiar kartki co dotąd) */
}
/* MIKS-10: najwęższe telefony (≤ 359 px): podpis „Przeniesienie z poprzedniej strony” (233 px) zajmuje całą linię nad kwotami i nie zostawia pasa na lot kwoty. Ten sam tekst łamie się w drugim wierszu przed słowem „strony”
   (pierwszy wiersz 185 px), więc na prawo od niego jest wolny pas liczbowy, a linia kwot stoi 20 px pod pierwszym wierszem podpisu (wiersz „strony” kończy się w x ≈ 80, kwoty zaczynają się w x ≈ 157): dodatkowy odstęp nad kwotami niepotrzebny;
   wiersz podpisu rośnie o jeden wiersz (17 px), więc pas między kartkami ma o tyle mniej (30 → 26 px) i wysokość sekcji się nie zmienia */
@media (max-width: 359px) {
  .zmb-ruch .zmb-nowa .zmb-przen th { max-width: 14.3em; }
  .zmb-ruch .zmb-nowa .zmb-przen td { padding-top: .1em; }
  .zmb-ruch.zmb-ksiega { row-gap: 26px; }
}
@media (max-width: 349px) {
  .zmb-strona { padding: 12px 12px 10px; }
  .zmb-tab tbody .zmb-dow { grid-column: 1 / -1; padding-bottom: 0; border-bottom: 0; }
  .zmb-tab tbody .zmb-p { grid-column: 2; }
  .zmb-tab tbody .zmb-w { grid-column: 3; }
  .zmb-tab thead .zmb-dow { display: none; }
  .zmb-tab thead .zmb-p { grid-column: 2; }
  .zmb-tab thead .zmb-w { grid-column: 3; }
}

/* komputer: skala okna z wysoki.css (--u, --p); strony obok siebie, Advertax o pół wiersza niżej, między nimi wolny pas na lot kwoty */
@media (min-width: 1001px) {
  .zmb-formy > div { font-size: calc(15 * var(--p)); }
  .zmb-ksiega { --t: calc(15.5 * var(--p)); --k: calc(17 * var(--p)); --h: calc(44 * var(--p));
    grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(88px, calc(6 * var(--u)), 160px); row-gap: 0;   /* MIKS-8: wolny pas między stronami min. 80 px (było 48 px); MIKS-9: 88 px, żeby kwota w pasie była ≥ 12 px od liter obu stron także w oknach ok. 1024 px */
    margin-top: clamp(16px, 2svh, 28px); padding-block: clamp(12px, 1.6svh, 22px); }
  .zmb-strona { width: auto; padding: calc(16 * var(--p)) calc(24 * var(--p)) calc(12 * var(--p)); }
  .zmb-nowa { justify-self: stretch; margin-top: calc(24 * var(--p)); }
  .zmb-s-gora { gap: calc(8 * var(--p)) 12px; padding-bottom: calc(9 * var(--p)); }
  .zmb-przyklad { margin-top: calc(6 * var(--p) + 12px); font-size: calc(14 * var(--p)); }   /* MIKS-9: +12 px: pod stroną Advertax biegnie tor kwoty (pole ≥ 12 px od linii „Przykładowe kwoty”) */
  .hist.hist-ruch + .zmb { padding-top: calc(.8 * var(--u)); margin-top: calc(-.2 * var(--u)); }       /* pole tekstu nagłówka (h2 = 5,4 u) sięga 0,14 jego wysokości ponad ramkę wiersza: odstęp 0,8 u mieści je w sekcji (było 0: 11–15 px poza krawędzią); lekkie wsunięcie pod granatowy luz historii trzyma pusty pas na styku ≤ 15% okna */
}