/* ═══════════════════════════════════════════════════════════════════════
   NYXIUM · DOTYKOVÁ VRSTVA                                     mobil.css
   ═══════════════════════════════════════════════════════════════════════
   Společný mobilní a tabletový základ pro celý web. Připojuje se na každé
   stránce JAKO POSLEDNÍ, aby přebil to, co si stránka nastaví sama.

   Dělí se podle VSTUPNÍHO ZAŘÍZENÍ, ne podle šířky okna. `pointer:coarse`
   platí na telefonu i na tabletu na šířku — kde by breakpoint podle šířky
   neplatil, protože 1024 px je pořád „desktop“ — a naopak netrefí myš ve
   zmenšeném okně na monitoru, kde jsou drobné ovládací prvky v pořádku.

   Proč to vzniklo: změřeno na 375×812 mělo devatenáct z dvaceti stránek
   ovládací prvky pod 36 px (nejmenší 16×19) a text až 7,7 px. Rozvržení
   se přitom lámalo správně — chyběla jen vrstva pro prst.
   ═══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════
   1 · ZÁKLAD
   ══════════════════════════════════════════════════════════════════ */

html{
  /* Safari na šířku samo nafukuje písmo, což rozhází každé rozvržení,
     které počítá s tím, že 14 px je 14 px. */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

@media (pointer:coarse){
  /* Šedý obdélník, který Android bliká přes každý klik. Vlastní :active
     stavy stránky vypadají líp a tenhle je jen překrývá. */
  *{ -webkit-tap-highlight-color:transparent; }

  /* Bez tohohle čeká prohlížeč po klepnutí ~300 ms, jestli nepřijde
     druhé klepnutí (dvojklik na zoom). Na tlačítku to je znát. */
  a, button, [role="button"], summary,
  input, select, textarea, label{ touch-action:manipulation; }
}


/* ══════════════════════════════════════════════════════════════════
   2 · NIC NESMÍ PŘETÉCT DO STRANY

   Vodorovné posouvání je na telefonu nejhorší možná chyba: stránka
   se rozjíždí pod prstem při běžném scrollování a text uteče z obrazu.
   Řeší se u zdroje (široké prvky), ne přes overflow-x:hidden na body —
   to by rozbilo position:sticky a jen schovalo příznak.
   ══════════════════════════════════════════════════════════════════ */

img, video, canvas, iframe, embed, object{
  max-width:100%;
  height:auto;
}

/* SVG dostane jen strop na šířku. `height:auto` se mu ZÁMĚRNĚ nedává:
   ikony a grafy mají výšku často zadanou natvrdo a dopočítaná výška by
   je zdeformovala. (První verze to řešila přes `revert-layer`, jenže
   mimo @layer se chová jako `revert` a zahodila by autorský styl úplně.) */
svg{ max-width:100%; }

/* explorer.css dává hlavičce, patičce i <main> šířku 100 % a k tomu
   vodorovný padding. Bez border-box se padding přičte NAVÍC k šířce
   rodiče — v Builderu z toho bylo 375 + 8 + 8 = 391 px a stránka se
   rozjížděla do strany, u hlavičky přesně to samé.
   Nikde v projektu není globální reset box-sizingu, tak je aspoň tady
   pro tři prvky, kterých se to týká. */
main, header, footer{ box-sizing:border-box; }

pre, code, kbd, samp{
  max-width:100%;
  overflow-x:auto;
  overflow-wrap:break-word;
}

/* Dlouhá adresa nebo hash je jediná věc, která pravidelně roztáhne
   sloupec, i když je všechno ostatní v pořádku. */
@media (max-width:768px){
  a[href], .mono, [class*="hash"], [class*="url"]{ overflow-wrap:anywhere; }
}


/* ══════════════════════════════════════════════════════════════════
   3 · DOTYKOVÉ CÍLE

   Prst má na displeji kontaktní plochu kolem 9 mm, což je na běžném
   telefonu ~44 px. Menší cíl se dá trefit, ale ne spolehlivě a ne
   poprvé — a u ovládání světel nebo mazání souboru to vadí.
   ══════════════════════════════════════════════════════════════════ */

@media (pointer:coarse){

  /* `!important` tu neni lenost. explorer.css ma `.btn, button.btn {
     height:32px; min-height:32px }` — selektor `button.btn` ma vyssi
     specificitu nez cokoli, co sem muzu napsat bez zbytecne dlouheho
     retezce. Tahle vrstva je zamerne posledni slovo pro dotyk. */
  button, [role="button"], summary,
  input[type="button"], input[type="submit"], input[type="reset"],
  select, .btn, .preset, .nyxsel-trigger, .chip, .tab{
    min-height:44px !important;
  }

  /* Tlačítko jen s ikonou musí být čtvercové, jinak vznikne úzký vysoký
     obdélník, na který se míří hůř než na původní malé tlačítko. */
  .btn-icon, .icon-btn, .icon, [class*="-icon-btn"],
  /* Krizky na zavreni a kopirovaci tlacitka mely 30 az 36 px sirky —
     vyska uz sedela, ale trefit se do uzkeho pruhu je stejne tezke. */
  .fsb-x, .settings-close, .modal-close, .cpy, .close-btn{
    min-width:44px !important;
  }

  /* Zaškrtávátka chodila 18×18. Systémový ovládací prvek se zvětšit
     nedá jinak než rozměrem. */
  input[type="checkbox"], input[type="radio"]{
    width:22px !important; height:22px !important;
    flex:0 0 auto;
  }

  /* Popisek u zaškrtávátka má být součástí cíle — kdo míří na text,
     trefí se, i když mine samotný čtvereček. */
  label:has(> input[type="checkbox"]),
  label:has(> input[type="radio"]){
    display:inline-flex; align-items:center; gap:10px;
    min-height:44px;
  }

  /* Ikonová tlačítka v hlavičce zvětšit nejde — lišta má 40 px a vyšší
     tlačítko by ji rozbilo. Zvětší se tedy jen PLOCHA, na kterou se dá
     klepnout; vzhled zůstává. */
  .nyx-launch-btn, .sidebar-toggle, .header-top button,
  .toolbar > button, .toolbar button.icon{
    position:relative;
  }
  .nyx-launch-btn::after, .sidebar-toggle::after,
  .header-top button::after, .toolbar > button::after,
  .toolbar button.icon::after{
    content:"";
    position:absolute; top:50%; left:50%;
    translate:-50% -50%;
    width:max(100%, 44px); height:max(100%, 44px);
  }

  /* Hlavičku i tak o kus zvýšíme — 40 px je na palec málo i s trikem výš. */
  .header-top{ height:48px !important; }
  .exp-shell .header-top{ height:48px !important; }

  /* Odkazy uvnitř věty se nezvětšují — rozhodily by řádkování. Odkaz,
     který stojí sám (obsah stránky, patička, navigace), ano. Řeší se
     odsazením, ne změnou `display`: u blokového odkazu odsazení zvýší
     celý rámeček, u řádkového aspoň plochu, na kterou jde klepnout,
     a ani v jednom případě to nepřeskládá rozvržení. */
  li > a:only-child, footer a, nav a, a.back{
    padding-block:12px !important;
  }

  /* Přepínač „ukaž heslo“ a podobná tlačítka jen s ikonou bez třídy. */
  .brow button, .row > button:not([class]){ min-width:44px !important; }
}


/* ══════════════════════════════════════════════════════════════════
   4 · FORMULÁŘE

   Safari na iPhonu automaticky přiblíží stránku, když uživatel klepne
   do pole s písmem menším než 16 px — a po odklepnutí ji nevrátí zpět.
   Stránka pak zůstane useknutá. Jediná obrana je psát do polí 16 px.
   ══════════════════════════════════════════════════════════════════ */

@media (pointer:coarse){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select, textarea{
    font-size:16px !important;
    min-height:44px;
  }

  textarea{ min-height:88px; }

  /* Posuvník se ovládá prstem hůř než myší, tak si zaslouží víc místa. */
  input[type="range"]{ height:32px; }

  /* Výběr barvy je na dotyku k nezaplacení, ale výchozí velikost je
     drobná. */
  input[type="color"]{ min-width:44px; min-height:44px; }
}


/* ══════════════════════════════════════════════════════════════════
   5 · ČITELNOST

   Nejmenší text na webu byl 7,7 px. To není malý text, to je textura.
   Zvedá se jen na úzkých displejích — na monitoru je 9px popisek pod
   nadpisem záměr, na telefonu je to chyba.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width:768px){
  .brand-sub, .sub, .dz-sub, .dz-formats, .cat-list, .ctrl-label,
  .sec-h, .sec-title, .crack-h, .batch-h, .str-meta, .mc-h,
  .label, .lbl, .muted, .note, .ai-hint, .comp,
  .cn, .cv, .cd,
  small, figcaption,
  /* Cloud na hlavni strance — popisky v nastaveni, sdileni a prohlizeci. */
  .settings-user div, .settings-section-title, .share-protect-title,
  #shareOverlay .modal div, #pvSubtitle,
  .auth-apps-label, .stats-bar, .stat, .hint, .hintbar,
  /* Filmy — popisky u karet filmů. */
  .kicker, .chip, .cta, .runtime, .foot-note, .keys, kbd, .back{
    font-size:12px !important;
    line-height:1.45;
  }

  button, .btn, .preset, label{
    font-size:13.5px !important;
  }

  /* Stavový řádek Exploreru je jediné místo, kde 11 px dává smysl —
     je to doplňková informace, ne obsah. */
  .exp-statusbar, .exp-statusbar *{ font-size:11.5px !important; }
}


/* ══════════════════════════════════════════════════════════════════
   6 · BEZPEČNÉ ZÓNY

   iPhone má nahoře výřez a dole systémovou lištu. Bez tohohle skončí
   spodní tlačítko pod lištou, kde ho nejde stisknout — potáhne se za
   něj systémové gesto místo kliknutí.
   ══════════════════════════════════════════════════════════════════ */

@supports (padding:max(0px)){
  @media (pointer:coarse){
    body{
      padding-left:env(safe-area-inset-left);
      padding-right:env(safe-area-inset-right);
    }
    main{
      padding-bottom:max(40px, calc(24px + env(safe-area-inset-bottom))) !important;
    }
    footer, .exp-statusbar, .select-bar, .bottom-bar, [class*="-footer"]{
      padding-bottom:max(8px, env(safe-area-inset-bottom));
    }
    /* Zásuvka jde přes celou výšku, tak si výřez musí ohlídat sama. */
    #folderSidebar, .drawer, .settings-panel{
      padding-top:env(safe-area-inset-top);
      padding-bottom:env(safe-area-inset-bottom);
    }
  }
}


/* ══════════════════════════════════════════════════════════════════
   7 · TABULKY A ŠIROKÝ OBSAH

   Tabulku nemá smysl na telefonu lámat do sloupečku — čísla vedle sebe
   jsou celý smysl tabulky. Dostane vlastní vodorovné posouvání, takže
   se posouvá tabulka a ne stránka.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width:768px){
  table{
    display:block;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
  }
  /* Tabulka použitá na rozvržení (jedna buňka, žádná hlavička) se
     posouvat nemá — jen by se rozbila. */
  table:not(:has(th)):not(:has(td + td)){
    display:table; white-space:normal;
  }
}


/* ══════════════════════════════════════════════════════════════════
   8 · TABLET

   Mezi 769 a 1024 px byla díra: na tablet se pouštělo desktopové
   rozvržení počítané na myš. Dlaždice se zvětší, aby se daly trefit,
   a postranní panel zůstává zasunutý — na 768 px na výšku by ukrojil
   40 % obrazovky.
   ══════════════════════════════════════════════════════════════════ */

@media (min-width:769px) and (max-width:1024px) and (pointer:coarse){
  .grid{ grid-template-columns:repeat(auto-fill, minmax(168px, 1fr)) !important; }
  .card{ min-height:180px !important; }
  main{ padding:16px 20px 64px !important; }
  .sc-grid{ grid-template-columns:repeat(2, 1fr) !important; }
}

/* Tablet na výšku se chová blíž telefonu než monitoru. */
@media (min-width:769px) and (max-width:1024px) and (orientation:portrait){
  #folderSidebar{ width:min(320px, 60vw) !important; }
}


/* ══════════════════════════════════════════════════════════════════
   9 · POHYB

   Zvětšení dlaždice pod prstem nedává smysl — prst ji zakrývá — a na
   slabším telefonu stojí snímky. Hover efekty se na dotyku ruší úplně.
   ══════════════════════════════════════════════════════════════════ */

@media (hover:none){
  .card:hover, .tile:hover, .key:hover, .btn:hover, button:hover{
    transform:none !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   10 · CO SE SCHOVÁVÁ ZA :hover

   Nejzávažnější nález celého průchodu. Na dotykovém displeji žádný
   hover neexistuje — prst buď klepne, nebo ne. Všechno, co se ukazuje
   teprve po najetí myší, je na telefonu a tabletu NEDOSAŽITELNÉ.

   Konkrétně to znamenalo: v prohlížeči obrázků nebyl vidět křížek na
   zavření, šipky na další fotku ani spodní lišta; u dlaždice souboru
   nešly vyvolat akce; v paletě nešla zamknout barva. Nešlo o kosmetiku,
   ty funkce prostě nešly použít.
   ══════════════════════════════════════════════════════════════════ */

@media (hover:none){

  /* Prohlížeč obrázků. `:not(.ui-hidden)` je tam schválně — stránka má
     vlastní přepínač na skrytí ovládání (klepnutí na fotku) a ten musí
     dál fungovat. Tohle mění jen VÝCHOZÍ stav ze skrytého na viditelný. */
  .viewer:not(.ui-hidden) .viewer-topbar,
  .viewer:not(.ui-hidden) .viewer-nav,
  .viewer:not(.ui-hidden) .viewer-footer,
  .viewer:not(.ui-hidden) .viewer-toolbar,
  .viewer:not(.ui-hidden) .viewer-filmstrip{
    opacity:1 !important;
  }

  /* Akce u dlaždice souboru (přejmenovat, smazat, sdílet). */
  .card-actions{ opacity:1 !important; }

  /* Zámek barvy v paletě a mazání položky v editoru Builderu. */
  .pal .col .lock{ opacity:1 !important; }
  .ed-asset button{ opacity:1 !important; }

  /* Obecná pojistka: cokoli s třídou naznačující „ukáže se při najetí“. */
  [class*="hover-only"], [class*="on-hover"]{ opacity:1 !important; }
}