/* mobil.css — PŘÍDAVEK pro práci z mobilu (úkol: chief 19. 8. 2026)
 *
 * Pravidlo: tenhle soubor SMÍ jen přidávat. Nesahá na tokens.css ani
 * components.css — ty zůstávají bit za bitem stejné, takže desktop
 * manažerek se nemění. Všechno je uzavřené v @media (max-width:640px),
 * takže nad 640 px se z tohoto souboru neuplatní ani jedno pravidlo.
 *
 * Co to řeší (změřeno na 390x844, mobile+touch):
 *  1) Rozcestník office přetékal o 43 px vpravo. Příčina ověřená pokusem:
 *     .office-tile a jeho .tl/.ts jsou grid items s výchozím min-width:auto,
 *     takže se nesmrští pod nejdelší slovo ("Vzdálená plocha", "TAS-COLL").
 *     Dvousloupcová mřížka se tím roztáhla nad šířku zařízení.
 *  2) Cílové plochy pod 44x44 px (přepínač jazyka 100x34, Přihlásit se 93x34,
 *     odkazy v patičce 170x15 a 46x12).
 *  3) Formulářová pole pod 16 px — iOS Safari při fokusu zoomuje stránku.
 */

/* Na šířkách telefonu jeden sloupec dlaždic.
 * Původní CSS přepíná na jeden sloupec až pod 380 px, jenže běžný telefon
 * má 390-430 px — spadl tedy do dvousloupcového režimu, kde se názvy
 * ("Vzdálená plocha", "TAS-COLL") nevešly. Lámat slova uprostřed by sice
 * srovnalo číslo přetečení na nulu, ale text by byl hůř čitelný než předtím
 * ("Agentí|k", "Vydán|í") — proto raději celá šířka na dlaždici. */
@media (max-width: 430px) {
  .office-tiles { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {

  /* 1) Přetečení: povol grid items smrštit se pod obsah.
   * Bez min-width:0 se .office-tile drží šířky nejdelšího slova a
   * dvousloupcová mřížka přeteče. */
  .office-tiles > * { min-width: 0; }
  .office-tile { min-width: 0; }
  .office-tile .tl,
  .office-tile .ts { min-width: 0; }

  /* 2) Cílové plochy min. 44x44 px.
   * Prefix `html` je tu schválně: inline <style> v index.html stojí AŽ ZA
   * tímhle souborem, takže při shodné specificitě by vyhrál on. `html`
   * zvedne specificitu o jeden element a spor rozhodne — bez !important
   * a bez sahání do cizího kódu. Změřeno, ne odhadnuto. */
  html select#ite-lang,
  html .ite-lang-wrap #ite-lang {
    min-height: 44px;
    min-width: 44px;
    height: auto;
  }

  html .ite-btn,
  html .ite-btn-login {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Stránka Úkoly (ukoly.html) má vlastní ID selektory. */
  html select#ukLang {
    min-height: 44px;
    min-width: 44px;
    font-size: 16px;
  }

  html a#ukBack {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 10px;
  }

  html a.regcta,
  html a#footInstall {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    padding-inline: 12px;
  }

  /* 3) Pole min. 16 px, jinak iOS Safari při fokusu zoomuje.
   * `.office-panel textarea` z components.css má specificitu 0-1-1,
   * proto i tady zvedáme přes `html`. */
  html input,
  html select,
  html textarea,
  html .office-panel textarea,
  html .ite-btn,
  html .ite-btn-login,
  html select#ite-lang {
    font-size: 16px;
  }

  /* ⛔ Záměrně tu NENÍ `html,body{overflow-x:hidden}`.
   * Skrylo by to přetečení místo opravy a hlavně by srovnalo
   * document.scrollWidth — měřidlo by pak už nikdy neumělo říct "ne"
   * a příští přetečení by nikdo nenašel. Necháváme vadu měřitelnou. */
}