/* ══════════════════════════════════════════════════════════════════════
   TOKENY DOTYKOVÉHO ZOBRAZENÍ — jeden zdroj pro modul i pro přihlášení
   ══════════════════════════════════════════════════════════════════════

   PROČ TENHLE SOUBOR VZNIKL (2026-08-23)
   Tokeny žily uvnitř `templates/shell_tablet.html`. Dokud je používala
   jediná skořápka, bylo to v pořádku. Přihlašovací obrazovka ale dědí
   `base.html` (Tailwind + `sfqa.css`) a modul do ní přepnout nejde —
   skořápka `sfqa.css` ZÁMĚRNĚ nenačítá, protože by jí přebila pravidla
   shodnou specificitou. Aby login vypadal jako modul, musí mít odkud
   vzít jeho tokeny; kopie by se rozešla při první změně barvy.

   ⚠ POŘADÍ V HLAVIČCE: tenhle soubor musí být PŘED `<style>` skořápky
   i před `utility-tablet.css`. Definice proměnných nekolidují, ale
   držet je první je jediné pořadí, které dává smysl číst.

   ⚠ TMAVÝ BLOK MUSÍ ZŮSTAT ZA SVĚTLÝM. Obojí má shodnou specificitu,
   takže při remíze vyhraje pozdější — prohození by tmavý motiv vyplo
   a nikdo by nepoznal proč.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --tap-56:56px;   /* podlaha pro rukavice */
  --tap-64:64px;
  --tap-72:72px;
  --tap-76:76px;   /* řádek dílny — z návrhu */
  --tap-80:80px;   /* položka levého pruhu — z návrhu Kvality */
  --tap-88:88px;
  --tap-96:96px;   /* největší cíl v návrhu */

  /* ── POLOMĚRY PODLE MOCKUPU MODULU, NE PODLE BRANDU ─────────────────
     ⚠ OPRAVA MÉ VLASTNÍ CHYBY Z 2026-08-24.

     Včera jsem sem opsal škálu z `Flexcon Design System/colors_and_type.css`
     (md 12 / lg 18 / xl 24 px) s odůvodněním, že design systém je zdroj
     pravdy. To platí pro BRANDOVÉ plochy — web, prezentace, dashboardy
     v Saiře. Dílenský tablet má vlastní, skoro hranatý jazyk a ten je
     v mockupu modulu.

     ZMĚŘENO v `mockups/modul-mistr.dc.html`:
         tlačítka   3px ×90,  4px ×7
         celkem     3px ×128, 4px ×106, 50% ×18, nad 4px jen 3 výskyty
     Totéž v `mockups/modul-kvalita.dc.html` (tlačítka 3px ×32).

     Tom, 2026-08-25: „ve vizuálu máš stále starý tvar tlačítek — mají
     zaoblené rohy." Popsal přesně to, co jsem způsobil: posunul jsem
     `rounded-md` z 6 px na 12 px, tedy DÁL od mockupu, ne blíž.

     Pravidlo z CLAUDE.md („mockup je zdroj pravdy pro rozvržení stránky")
     má tady přednost před brandovou škálou. Hlídá to
     `test_polomery_odpovidaji_mockupu`, které čte OBA soubory a porovnává
     je — konstanta v testu by byla třetí místo, kde ta čísla žijí. */
  --radius-xs:3px;
  --radius-sm:3px;
  --radius-md:3px;   /* tlačítka, vstupy — 90 z 97 v mockupu */
  --radius-lg:4px;   /* karty a panely */
  --radius-xl:4px;   /* největší plochy; mockup nad 4px prakticky nejde */
  --radius-2xl:4px;
  --radius-pill:999px;
}

/* ══════════════════════════════════════════════════════════════════════
   RUČNÍ TERMINÁL (Keyence DX-A600) — 6", 720 × 1440 fyzicky
   ══════════════════════════════════════════════════════════════════════
   Tom, 2026-08-26: „potřeboval bych umožnit menší ikony […] vím že je to
   v rozporu — tyto zařízení mají mistrové."

   Je to v rozporu a nezmizí to: podlaha 56 px je kvůli RUKAVICÍM a ty na
   handheldu nezmizí. 48 px má reálnou cenu — občasný překlep prstem. Stojí
   to za to jen proto, že alternativa je obrazovka, na kterou se nevejde nic.

   ⚠ 48 px NENÍ NAŠE USTOUPENÍ, je to VLASTNÍ MINIMUM ANDROIDU (Material:
   48 dp). Pod tím bychom šli pod podlahu platformy, ne jen pod naši — a to
   se nedělá ani na handheldu.

   ⚠ ŠÍŘKA JE ODVOZENÁ, NE ZMĚŘENÁ. 720 × 1440 na 6" mapuje Android při
   obvyklé hustotě na CSS 360 × 720 (poměr 2). Breakpoint 480 px tedy chytí
   360 s rezervou a tabletu (768+) se nedotkne. Kdyby zařízení hlásilo něco
   jiného, změní se JEDNO ČÍSLO tady — proto to jde přes tokeny a ne přes
   pevné hodnoty v šablonách.

   ⚠ TOHLE NEŘEŠÍ HORNÍ LIŠTU. Ta si podle měření z 2026-08-21 nárokuje
   646 px napevno (iPad mini 768). Na 360 px se nevejde a menší cíle jí
   nepomůžou — je to samostatná práce, ne důsledek téhle změny.
   ══════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════
   VELIKOST TEXTU — volba obsluhy, ne přepis návrhu.

   Tom, 2026-08-26: „umožni změnu velikosti textu na menší, jsou tam
   problémy s přetoky."

   ⚠ ZMENŠUJE SE OBSAH, NE SKOŘÁPKA. `zoom` sedí na `.sh-obsah`; horní
   lišta a navigace zůstávají — jsou to dotykové cíle, ne text ke čtení.

   ⚠ DOTYKOVÝ CÍL SE DĚLÍ TOUTÉŽ HODNOTOU (viz `uplatniSkalu()` ve
   skořápce), takže po zmenšení zůstane fyzicky stejně velký. Bez toho by
   menší písmo znamenalo hůř trefitelnou obrazovku — přesně naopak, než
   k čemu to je.

   ⚠ NENÍ TO NÁHRADA ZA OPRAVU PŘETOKU. Přetok se opravuje zalomením tam,
   kde vznikne; tohle je pohodlí, ne obchvat vady.
   ══════════════════════════════════════════════════════════════════════ */
:root{ --textova-skala:1; }
.sh-obsah{ zoom: var(--textova-skala, 1); }

/* ══════════════════════════════════════════════════════════════════════
   KEYENCE DX-A600 — 6", 720x1440, tedy ÚZKO A VYSOKO.

   Tom, 2026-08-26: „uprav vizuál na ten tablet Keyence — možnost zmenšit
   písmo, kdy se nám komponenty rovnají pod sebe — počet sloupců."

   Vícesloupcové mřížky se na 480 px nevejdou: `minmax(240px,1fr)` dá dva
   sloupce po 240 px a k tomu mezery, tedy přes 500 px. Auto-fit to sám
   nezachrání, protože 240 px je PODLAHA, ne přání. Na tomhle displeji se
   proto vynucuje JEDEN sloupec.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px){
  :root{
    --tap-56:48px;   /* podlaha platformy, ne podlaha pro rukavice */
    --tap-64:52px;
    --tap-72:56px;
    --tap-76:60px;
    --tap-80:64px;
    --tap-88:68px;
    --tap-96:72px;
  }
}

/* ⚠ SAMOSTATNÝ BLOK, ne přidáno k tomu výše — a je to nutné, ne úhledné.
   `test_handheld_nejde_pod_podlahu_platformy` hledá podlahu 48 px výrazem
   `@media(...){:root{...}}`, který počítá s tím, že v bloku NENÍ NIC JINÉHO
   — ani komentář. Cokoli vsunutého dovnitř mu ten výraz rozbije a zeď
   přestane měřit MLČKY. Dva `@media` se stejnou podmínkou jsou platné CSS,
   takže tohle nic nestojí.

   Vícesloupcové mřížky se na 480 px nevejdou: `minmax(240px,1fr)` dá dva
   sloupce po 240 px a k tomu mezery, tedy přes 500 px. Auto-fit to sám
   nezachrání — 240 px je PODLAHA, ne přání. */
@media (max-width: 480px){
  [style*="repeat(auto-fit"], [style*="repeat(auto-fill"]{
    grid-template-columns:1fr !important;
  }
}

:root,[data-theme="light"],html[data-theme="light"]{
  --page:#DFE4E9; --s1:#ffffff; --s2:#EFF2F5; --sel:#E2EDF4;
  --t1:#0B1219; --t2:#4E5964; --t3:#7C8794;
  --bd:#C9D1D9; --dv:#E3E8ED;
  --chrome:#1A2229; --chrome2:#111820;
  --blue:#0098D8; --blue-deep:#006FA0; --red:#C8402E; --amber:#D89A2B;
  --green:#3E9B4F; --purple:#7A5EA8;
  /* VÝPLŇOVÉ varianty — pro plochy s BÍLÝM textem. Doplněno 2026-08-23
     z návrhu „Login moduly". Nejsou to duplikáty: `--blue` je značková
     modrá pro čáry, ikony a stavy, kde nese barvu text sám. Na plné ploše
     pod bílým písmem má nedostatečný kontrast, proto je výplň o stupeň
     tmavší. Používat tam, kde je text `#fff`, jinde `--blue`. */
  --blue-fill:#0086C0; --red-fill:#B83826; --amber-fill:#A8721B; --green-fill:#2F7A3C;
  --tint-red:#FBEBE8; --tint-amber:#FDF3E3; --tint-green:#EAF5EC; --tint-blue:#E6F4FB;
  --copper:#C86B3C; --tint-copper:#F5E6DC;
  --bd-red:#E8B4AB; --bd-amber:#EFD9AC; --bd-green:#BCDEC3; --bd-blue:#B3DFF3;
}
html[data-theme="dark"],[data-theme="dark"]{
  --page:#05080B; --s1:#131A21; --s2:#0D131A; --sel:#1D2A35;
  --t1:#F4F7FA; --t2:#9FAAB6; --t3:#6B7683;
  --bd:#2C3742; --dv:#232C35;
  --chrome:#0D131A; --chrome2:#05080B;
  --blue:#3BB4E8; --blue-deep:#8FD3F0; --red:#F0705C; --amber:#F0B254;
  --green:#5FC073; --purple:#A88FD0;
  /* V tmavém motivu jde výplň naopak DOLŮ pod text: svítivá modrá by na
     ploše zářila a bílý text by na ní plaval. */
  --blue-fill:#0D6B9C; --red-fill:#A83022; --amber-fill:#8A5A12; --green-fill:#256B31;
  --tint-red:#2A1714; --tint-amber:#2A2113; --tint-green:#132318; --tint-blue:#0F2530;
  --copper:#D98A5C; --tint-copper:#2E1E15;
  --bd-red:#5C2A22; --bd-amber:#5C4620; --bd-green:#1F4A2C; --bd-blue:#1B4356;
}