/* ===== Mobilní doladění =====
 * PC se odsud nesmí hnout: všechna pravidla, která mění rozvržení, jsou uvnitř
 * @media (max-width: 819px) – tedy pod hranicí desktopového bloku ve screens.css.
 * Tenhle soubor patří v index.html AŽ ZA css/screens.css (selektory níž mají
 * pro jistotu vyšší specificitu, ale pořadí je čitelnější). */

/* Výchozí hodnota, aby var(--kbd) resolvovalo i bez JS. Přepisuje ji
 * js/klavesnice.js podle window.visualViewport; na PC vyjde vždycky 0px. */
:root { --kbd: 0px; }

@media (max-width: 819px) {

  /* ── Vrstvy nad softwarovou klávesnicí ──────────────────────────────────
   * Fixní vrstvy se drží LAYOUTOVÉHO viewportu, který o klávesnici neví –
   * spodní sheet i vystředěný modal proto skončí pod ní a do pole, do kterého
   * se zrovna píše, není vidět. Zkrácením spodní hrany o --kbd se vrstva vejde
   * do viditelné části: sheet dosedne nad klávesnici, modal se vystředí do
   * zbylého místa.
   *
   * Obě rodiny tříd musí být ošetřené: sheety cvičební části jsou `.overlay`,
   * ale Jídlo a knihovna používají `.modal-overlay` (`.jidlo-sheet-overlay` má
   * OBĚ třídy naráz). Proto se posun dělá jedinou vlastností `bottom` – ta se
   * v kaskádě přebije, nesečte. S transformem nebo marginem by se u
   * `.jidlo-sheet-overlay` odsazení uplatnilo dvakrát. */
  html .overlay,
  html .modal-overlay { bottom: var(--kbd, 0px); }

  /* Panely mají výšku stropovanou v `vh`, což je pořád layoutový viewport.
   * Bez tohohle by vyšší sheet po zvednutí přetekl nahoru mimo obrazovku
   * (100 % = výška zkrácené vrstvy výše, takže bez klávesnice = neutrální). */
  .overlay > .overlay-panel,
  .jidlo-sheet-overlay > .jidlo-sheet { max-height: min(88vh, 100%); }

  /* Modal roste podle obsahu a strop neměl žádný – když ho klávesnice stlačí,
   * musí jít aspoň odrolovat, ne uříznout tlačítka. `min(100%, 88vh)` je bez
   * klávesnice nulová změna: 100 % je výška vrstvy bez jejího paddingu (2×24 px),
   * což je na jakémkoli telefonu víc než 88vh – vyhraje tedy 88vh, přesně to,
   * co si `.analyza-modal` nastavuje samo. */
  .modal-overlay > .modal { max-height: min(100%, 88vh); overflow-y: auto; overscroll-behavior: contain; }
}