/* ══════════════════════════════════════════════════════════════════════
   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;

  /* ── DÍLENSKÁ TYPOGRAFIE — TÁŽ ÚVAHA JAKO U POLOMĚRŮ ────────────────
     Rozhodnutí Toma 12. 9. 2026, varianta (C) k otevřené otázce §9.2
     doporučení z 21. 8. („Písmo, velikosti, rádiusy: kdo je kánon?"):
     *dílenská sada tokenů s DNEŠNÍMI hodnotami návrhů.* Vizuálně se tedy
     nemění nic — mění se jen to, že čísla přestávají být mrtvá.

     ⚠ PROČ TO NENÍ ŠKÁLA Z DESIGN SYSTÉMU. `Flexcon Design System` má
     16/18/20/24 (Saira). Dílenský tablet je kreslený na 17 px a ta
     sedmnáctka není překlep — je to nejčastější velikost ve VŠECH TŘECH
     mockupech modulů. Změřeno 12. 9. 2026:

         17px   mistr 289× · kvalita 167× · operátor 198×  = 654×
         19px          67× ·          37× ·          75×  = 179×
         16px          86× ·          30× ·          38×  = 154×
         15px          59× ·          25× ·          26×  = 110×
         21px          13× ·           7× ·          28×  =  48×
         22px          11× ·           7× ·           7×  =  25×
         13px           5× ·           5× ·           7×  =  17×

     Žebřík je proto tenhle, ne brandový. Platí tu totéž pravidlo, kterým
     se 24. 8. opravily poloměry: mockup je zdroj pravdy pro rozvržení
     dílenské obrazovky, brandová škála pro brandové plochy.

     ⚠ A TEĎ TO, CO SE SNADNO „OPRAVÍ" ŠPATNĚ: tyhle tokeny se na rozdíl
     od `--tap-*` NEDĚLÍ `--textova-skalou`. Dotykové příčky se dělit MUSÍ,
     protože `zoom` na `.sh-obsah` by fyzický cíl zmenšil pod podlahu pro
     rukavice. U písma je to obráceně — `zoom` je přesně to, co má text
     zvětšit, a dělení by uživatelské zvětšení vyrušilo. Kdo sem dopíše
     `calc(… / var(--textova-skala))`, vypne tím celé nastavení velikosti
     písma a nikdo nepozná proč.

     Pojmenováno podle VELIKOSTI, ne podle role (`--text-17`, ne
     `--text-body`): role se u téže velikosti liší obrazovku od obrazovky
     a jméno podle role by lhalo. Stejná volba jako u `--tap-56`.        */
  /* Žebřík je CELÝ měřený rozsah mockupů, ne jen jeho špičky. Příčka, která
     v návrhu je a v tokenech ne, vrací příštího autora k mrtvému číslu —
     proto jsou tu i ty se čtyřmi výskyty (doplněno 12. 9. po přeměření). */
  --text-11:11px;   /*   4× */
  --text-12:12px;   /*   6× */
  --text-13:13px;   /*  17× */
  --text-14:14px;   /*  12× */
  --text-15:15px;   /* 110× */
  --text-16:16px;   /* 154× */
  --text-17:17px;   /* 654× — základ dílenské obrazovky */
  --text-18:18px;   /*  20× */
  --text-19:19px;   /* 179× */
  --text-20:20px;   /*   3× */
  --text-21:21px;   /*  48× */
  --text-22:22px;   /*  25× */
  --text-24:24px;
  --text-26:26px;   /*   6× */
  --text-30:30px;
  --text-32:32px;
  --text-34:34px;   /*   4× */
}

/* ══════════════════════════════════════════════════════════════════════
   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, 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.

   ⚠ DĚLENÍ SEDÍ TAM, KDE SEDÍ `zoom` — TEDY NA `.sh-obsah`, NE NA `<html>`.
   OPRAVA 2026-08-29. Tom: „pokud dáš nejmenší písmo, velikost písma se
   zmenší, ale elementy se zvětší."

   Do té doby dělil `flxUplatniSkalu()` tokeny INLINE STYLEM NA `<html>`,
   tedy pro celý dokument. Kompenzace tím platila i tam, kam `zoom` nesahá:
   horní lišta, levý pruh, spodní lišta. Ty prvky dostaly dělenou hodnotu
   a nic ji nevrátilo zpátky, takže se o `1/skála` NAFOUKLY. Změřeno
   v Chromiu na `/mistr/mj/fronta` (`tests/test_velikost_textu_rozmery.py`):

       škála   horní lišta „Odhlásit"   spodní lišta   text v obsahu
       1        56 px                    72 px          22 px
       0,9      62,2 px                  80 px          20 px
       0,8      70 px                    90 px          18 px
       1,25     44,8 px                  57,6 px        28 px

   Při 0,8 tedy uživatel dostal menší text A O ČTVRTINU VĚTŠÍ LIŠTU; při
   1,25 spadl dotykový cíl na 44,8 px, tedy POD podlahu pro rukavice.
   Deklarace je proto v CSS na `.sh-obsah`, kam `zoom` sedí — mimo ni si
   žebřík drží své hodnoty z návrhu. `flx-nastaveni.js` dnes zapisuje JEN
   `--textova-skala`, přesně jak slibuje jeho vlastní dokumentace.

   ⚠ DĚLÍ SE CELÝ ŽEBŘÍK, ne jen dvě příčky. Do opravy se dělily jen
   `--tap-56` a `--tap-72`; zbylých pět příček se `zoom`em zmenšovalo, takže
   při 0,8 vycházel cíl z `--tap-64` na 51,2 px — pod podlahou pro rukavice,
   jen jinou cestou. Podlaha je fyzická vlastnost, ne vlastnost příčky.

   ⚠ ZRCADLO `--tap-zaklad-*` NENÍ DRUHÝ ZDROJ ČÍSEL. Vlastní vlastnost na
   sebe odkazovat nesmí (`--tap-56: calc(var(--tap-56)/…)` je cyklus a celá
   deklarace se zahodí), a přepsat sem 56/64/72… natvrdo by znamenalo třetí
   místo, kde ta čísla žijí — a hlavně by to utnulo handheldovou podlahu
   48 px o pár řádků níž. Zrcadlo hodnotu jen PŘEČTE z kaskády `:root`,
   takže na Keyence nese 48 px samo od sebe.

   ⚠ 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;
  --tap-zaklad-56:var(--tap-56); --tap-zaklad-64:var(--tap-64);
  --tap-zaklad-72:var(--tap-72); --tap-zaklad-76:var(--tap-76);
  --tap-zaklad-80:var(--tap-80); --tap-zaklad-88:var(--tap-88);
  --tap-zaklad-96:var(--tap-96);
}
.sh-obsah{
  zoom: var(--textova-skala, 1);
  --tap-56:calc(var(--tap-zaklad-56) / var(--textova-skala, 1));
  --tap-64:calc(var(--tap-zaklad-64) / var(--textova-skala, 1));
  --tap-72:calc(var(--tap-zaklad-72) / var(--textova-skala, 1));
  --tap-76:calc(var(--tap-zaklad-76) / var(--textova-skala, 1));
  --tap-80:calc(var(--tap-zaklad-80) / var(--textova-skala, 1));
  --tap-88:calc(var(--tap-zaklad-88) / var(--textova-skala, 1));
  --tap-96:calc(var(--tap-zaklad-96) / 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;
  /* ── SÉMANTICKÉ BARVY: DVĚ ROLE, OBĚ ZMĚŘENÉ ────────────────────────
     Základní token = TEXT (na kartě `--s1` i na tintu `--tint-*`).
     `*-fill`        = PLNÁ PLOCHA pod BÍLÝM textem.

     ⚠ PŘEPOČÍTÁNO 2026-08-30. Předchozí znění pojmenovávalo správnou osu
     (výplň vs. text), ale hodnotu na textové straně jen předpokládalo:
     „`--blue` … pro stavy, kde nese barvu text sám". Zrovna ten případ
     propadal. Naměřeno podle WCAG proti kartě #FFFFFF:

         --amber #D89A2B  2,45:1     --green #3E9B4F  3,50:1
         --blue  #0098D8  3,24:1     --red   #C8402E  4,97:1

     a proti vlastnímu tintu 2,23 / 3,13 / 2,88 / 4,29 : 1. Tedy VŠECHNY
     ČTYŘI rodiny pod AA ve světlém motivu — a všechny čtyři nad AA
     v tmavém, protože tam musí být akcent světlý, aby byl vidět, a
     kontrast vyšel sám. Nebyly to čtyři vady, ale jedna: hodnoty byly
     vybrány jako VÝPLŇ a použity jako TEXT (72× `color:var(--*)` proti
     9× `background:`).

     Nejhorší projev: odznak „Stará data · čas" ve `shell_tablet.html`
     měl 2,23:1. Jediná věc, která MUSÍ být čitelná, když spadne Helios,
     byla ve světlém motivu nečitelná.

     Dvě z výplní propadaly taky (`--blue-fill` 4,06, `--amber-fill` 4,13).
     Hlídá `tests/test_kontrast_tokenu.py` — počítá kontrast ze samotného
     CSS, takže nová hodnota pod prahem shodí zeď, ne až obsluhu. */
  --blue:#005983;    /* 7,62:1 na kartě · 6,78:1 na tintu */
  --blue-deep:#003E5C;
  /* ⚠ AKCENT NA CHROMU JE JINÝ TOKEN NEŽ `--blue`, A TO JE POINTA.
     `--blue` je změřená proti SVĚTLÝM podkladům (karta, tint) — viz čísla
     v komentáři o řádek výš. Spodní lišta a levý pruh mají ale podklad
     `--chrome2`, tedy TMAVÝ v obou motivech, a tam `#005983` padá na
     2,35:1 — HŮŘ než neaktivní položka (0,62 bílé = 7,42:1). Aktivní
     položka tak byla nejhůř čitelná ze všech. Změřeno 12. 9. 2026 ze
     snímků všech 26 obrazovek; potvrzeno na pěti nezávisle.

     ⚠ TENTO TOKEN NENÍ BARVA TEXTU. Text aktivní položky je BÍLÝ
     (17,9:1). Výměna jedné modré za druhou totiž vadu neřeší: kanonická
     logová modrá dá 5,52:1, norma projde, ale neaktivní sousedé mají
     7,41:1, takže zvýrazněná položka by pod nimi zůstala. Modrá se proto
     posunula do 3px pruhu nad aktivní položkou, kde je NOSIČEM VÝZNAMU,
     ne textem — a platí pro ni nižší práh netextových prvků (3:1).

     Hodnota je kanonická logová modrá `--flx-blue` (#0098D8): 5,52:1 nad
     `--chrome2` světlého motivu a 6,20:1 nad tmavého, obojí nad 3:1
     s rezervou. Deklaruje se JEN TADY a do tmavého motivu se dědí —
     chrom je tmavý v obou, takže se akcent na něm nemá co převracet
     (táž úvaha jako u `.sh-odznak` v `shell_tablet.html`, kde neutrál
     je průhledná bílá, ne token).
     Hlídá `tests/test_kontrast_tokenu.py`, oddíl chromu. */
  --blue-na-chrome:#0098D8;
  --red:#A83022;     /* 6,75 · 5,83 */
  --amber:#8A5A12;   /* 5,91 · 5,38 */
  --green:#256B31;   /* 6,51 · 5,82 */
  --purple:#5B4483;
  --blue-fill:#0070A3;  /* bílý text 5,46:1 */
  --red-fill:#A83022;   /* 6,75 */
  --amber-fill:#8A5A12; /* 5,91 */
  --green-fill:#256B31; /* 6,51 */
  --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;
}