/* Vizuální jazyk je stejný jako u protokolu (tools/report_html.py): papír, monospace na čísla, tlumené barvy z ocelových konstrukcí. Aplikace kolem protokolu nemá vypadat jako jiný program. Rozvržení stránek s pravidly: karty jsou SBALENÉ a rozbalují se kliknutím. Rozbalené zabíraly 17 materiálů přes 12 000 px a stránka vypadala jako nedodělaný formulář. Sbalení řeší i to, že klient bude mít ~50 pravidel. Sbalení dělá JavaScript (třída `js` na ), bez něj zůstane všechno otevřené a editovatelné — nikdy se nesmí stát, že se pravidla nedají uložit. */ :root{ --paper:#FBFAF8; --list:#fff; --ink:#191C1F; --ink-soft:#5A6068; --ink-faint:#8B9199; --rule:#DDD8D0; --rule-soft:#EDE9E3; --wash:#F4F1EB; /* Hrana karty musí být vidět i na papírovém pozadí. --rule na něm splývá, takže pravidla vypadala jako plovoucí obdélníky bez začátku a konce. */ --rule-strong:#CBC3B6; --oxide:#B03A1E; --ochre:#8A6714; --slate:#59646F; --pine:#2E6A4E; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; --r:8px; --r-s:5px; /* Výšky přilepených lišt. Skript v base.html je přeměří podle skutečnosti, tyhle hodnoty platí, dokud nedoběhne, a bez JavaScriptu natrvalo. */ --h-nav:75px; --h-lista:0px; /* Vnitřní odsazení stránky. Přilepená lišta si podle něj dokreslí pozadí až k okrajům, aby pod ní nic neprosvítalo. */ --pad:32px; --stin:0 1px 2px rgba(25,28,31,.05); --stin-v:0 1px 2px rgba(25,28,31,.06),0 10px 30px rgba(25,28,31,.07); --prech:.15s cubic-bezier(.4,0,.2,1); } *{box-sizing:border-box} /* Atribut `hidden` skrývá jen tehdy, když mu to CSS nepřebije. Prvky jako .drop nebo .karty-odkazy mají vlastní display, a ten selektor třídy je silnější než [hidden] v prohlížeči — schované pak nezmizely. */ [hidden]{display:none!important} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans); font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased; display:flex;flex-direction:column;min-height:100vh} a{color:var(--ink)} :focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:2px} .pole input:focus-visible,.hledat input:focus-visible, .login-box input:focus-visible{outline:none} /* ── navigace ── */ .app-nav{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--rule); background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(10px)} .app-nav-in{max-width:1000px;margin:0 auto;padding:0 32px;display:flex; align-items:center;gap:6px;min-height:74px;flex-wrap:wrap} .app-brand{display:flex;align-items:center;gap:10px;text-decoration:none; color:var(--ink);font-weight:600;font-size:16px;letter-spacing:-.005em; margin-right:20px;white-space:nowrap} .app-brand svg{display:block;flex:none} .app-nav a.app-link{align-self:stretch;display:flex;align-items:center; color:var(--ink-soft);text-decoration:none;font-size:15.5px; padding:0 11px;border-bottom:2px solid transparent; margin-bottom:-1px; transition:color var(--prech),background var(--prech), border-color var(--prech)} .app-nav a.app-link:hover{color:var(--ink);background:var(--wash)} .app-nav a.app-link.on{color:var(--ink);font-weight:550;border-bottom-color:var(--ink)} .app-nav .app-right{margin-left:auto;color:var(--ink-faint)} /* ── stránka ── */ .app-wrap{max-width:1000px;margin:0 auto;padding:64px var(--pad) 112px;width:100%;flex:1} .app-hlava{margin:0 0 48px} h1.app-h1{margin:0 0 14px;font-size:34px;font-weight:660;letter-spacing:-.02em; line-height:1.18} p.app-sub{margin:0;color:var(--ink-soft);max-width:60ch;font-size:18px} .app-eyebrow{display:block;margin:0 0 10px;font-family:var(--mono);font-size:12.5px; font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:var(--ink-faint)} /* ── patička ── */ .app-pata{border-top:1px solid var(--rule-soft);margin-top:auto} .app-pata-in{max-width:1000px;margin:0 auto;padding:32px 32px 40px;display:flex; gap:8px 20px;flex-wrap:wrap;font-size:14px;color:var(--ink-faint)} .app-pata-in .app-right{margin-left:auto} /* ── hlášky ── */ .app-flash{border:1px solid var(--rule-strong);border-left:3px solid var(--slate); background:var(--list);padding:15px 19px;margin:0 0 26px;font-size:15.5px; border-radius:var(--r-s);box-shadow:var(--stin);display:flex;gap:9px; align-items:flex-start} .app-flash::before{content:"";flex:none;width:16px;height:16px;margin-top:3px; border-radius:50%;background:var(--slate)} .app-flash.chyba{border-left-color:var(--oxide)} .app-flash.chyba::before{background:var(--oxide)} .app-flash.ok{border-left-color:var(--pine)} .app-flash.ok::before{background:var(--pine)} .app-flash code{font-family:var(--mono);font-size:14px;background:var(--wash); padding:1px 5px;border-radius:var(--r-s)} /* ── tlačítka ── */ .btn{font:inherit;font-size:15.5px;font-weight:500;padding:12px 24px; border:1px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer; border-radius:var(--r);transition:background var(--prech), border-color var(--prech),color var(--prech),transform var(--prech); display:inline-flex;align-items:center;gap:8px;line-height:1.35} .btn:hover{background:#000;border-color:#000} .btn:active{transform:translateY(1px)} .btn[disabled]{background:var(--wash);border-color:var(--rule); color:var(--ink-faint);cursor:not-allowed;transform:none} .btn-l{background:var(--list);color:var(--ink);border-color:var(--rule); box-shadow:var(--stin)} .btn-l:hover{background:var(--wash);border-color:var(--ink-faint);color:var(--ink)} .btn-x{font:inherit;font-size:14.5px;padding:8px 15px;cursor:pointer; background:var(--list);color:var(--ink-soft);border:1px solid var(--rule); border-radius:var(--r-s);transition:all var(--prech)} .btn-x:hover{color:var(--oxide);border-color:var(--oxide);background:#fff} .btn-s{font:inherit;font-size:14.5px;line-height:1;padding:0;width:30px;height:30px; cursor:pointer;background:var(--list);color:var(--ink-soft); border:1px solid var(--rule);border-radius:var(--r-s); display:inline-flex;align-items:center;justify-content:center; transition:all var(--prech)} .btn-s:hover:not([disabled]){background:var(--wash);color:var(--ink); border-color:var(--ink-faint)} .btn-s[disabled]{opacity:.3;cursor:not-allowed} .app-akce{margin-top:28px;display:flex;gap:18px;align-items:center;flex-wrap:wrap} .app-pozn{color:var(--ink-soft);font-size:14.5px} /* ── nahrání souboru ── */ .drop{display:flex;flex-direction:column;align-items:center;gap:7px; border:1.5px dashed var(--rule-strong);background:var(--list);padding:64px 32px; cursor:pointer;text-align:center;border-radius:8px; transition:border-color var(--prech),background var(--prech), box-shadow var(--prech)} .drop:hover{border-color:var(--ink-faint);box-shadow:var(--stin)} .drop.pretahuje{border-color:var(--ink);border-style:solid;background:var(--wash); box-shadow:var(--stin-v)} .drop-ikona{color:var(--ink-faint);margin-bottom:18px;transition:color var(--prech)} .drop:hover .drop-ikona,.drop.pretahuje .drop-ikona{color:var(--ink-soft)} .drop-hd{font-size:20.5px;font-weight:600;letter-spacing:-.01em} .drop-sub{color:var(--ink-soft);font-size:15px} .drop-soubor{display:none;align-items:center;gap:12px;margin-top:8px; border:1px solid var(--rule);border-radius:var(--r); background:var(--wash);padding:10px 16px;max-width:100%} .drop-soubor b{font-family:var(--mono);font-size:14.5px;font-weight:600; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .drop-soubor span{font-family:var(--mono);font-size:13.5px;color:var(--ink-soft); flex:none} .drop.ma-soubor{border-style:solid;border-color:var(--rule)} .drop.ma-soubor .drop-vyzva{display:none} .drop.ma-soubor .drop-soubor{display:flex} input[type=file]{display:none} /* ── průběh kontroly ── Bar je NEURČITÝ schválně. Kontrola běží 6 až 12 s a je celá na serveru, ten ale neumí říct, jak daleko je. Procenta by se musela vymyslet, a to by byla lež na stejné úrovni jako věty, které tvrdí, co číslo znamená. Místo nich běží počítadlo sekund, které je pravdivé. */ .prubeh{border:1px solid var(--rule-strong);background:var(--list);border-radius:10px; padding:30px 32px;box-shadow:var(--stin)} .prubeh-hd{display:flex;align-items:baseline;gap:16px;margin-bottom:20px} .prubeh-jmeno{font-family:var(--mono);font-size:14.5px;font-weight:600; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .prubeh-cas{margin-left:auto;font-family:var(--mono);font-size:14px; color:var(--ink-faint);flex:none;font-variant-numeric:tabular-nums} .prubeh-bar{height:6px;background:var(--wash);border-radius:99px; overflow:hidden;position:relative} .prubeh-bar span{position:absolute;top:0;bottom:0;width:38%;border-radius:99px; background:var(--ink);animation:posun 1.2s ease-in-out infinite} @keyframes posun{from{left:-38%}to{left:100%}} .prubeh-stav{margin:18px 0 0;font-size:14.5px;color:var(--ink-soft)} /* Bez animace by zůstal prázdný proužek a vypadalo by to jako zaseknuté. */ @media(prefers-reduced-motion:reduce){ .prubeh-bar span{animation:none;left:0;width:100%;opacity:.3} } /* ── dlaždice: co se kontroluje, kolik je pravidel ── */ .karty-odkazy{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px;margin:48px 0 0} .odkaz{position:relative;display:block;text-decoration:none;color:inherit; background:var(--list);border:1px solid var(--rule-strong); border-radius:10px;padding:26px 28px; box-shadow:var(--stin);transition:border-color var(--prech), box-shadow var(--prech),transform var(--prech)} .odkaz:hover{border-color:var(--ink-faint);box-shadow:var(--stin-v); transform:translateY(-1px)} /* Dlaždice vede na stránku s pravidly. Bez šipky to vypadalo jako statistika, na kterou se nedá kliknout. */ .odkaz::after{content:"→";position:absolute;top:24px;right:26px; font-family:var(--mono);font-size:17px;color:var(--ink-faint); transition:transform var(--prech),color var(--prech)} .odkaz:hover::after{transform:translateX(3px);color:var(--ink)} .odkaz-n{font-family:var(--mono);font-size:28px;font-weight:600;line-height:1; letter-spacing:-.02em;display:block;font-variant-numeric:tabular-nums} .odkaz-l{display:block;margin-top:14px;font-size:15px;color:var(--ink-soft); padding-right:24px} .odkaz-l b{color:var(--ink);font-weight:600} .sekce-nadpis{margin:76px 0 8px;font-size:12.5px;font-family:var(--mono); font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:var(--ink-faint); padding-bottom:16px;border-bottom:1px solid var(--rule)} .kontroly{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:0 48px;margin:0;padding:0;list-style:none} .kontroly li{display:grid;grid-template-columns:2.4em 1fr;gap:7px 12px; padding:22px 0;border-bottom:1px solid var(--rule-soft); /* Buňka se roztáhne na výšku nejvyšší v řádku. Bez align-content se ta výška rozpustí mezi řádky uvnitř a mezi nadpisem a popisem zůstala díra. */ align-content:start} .kontroly .k-no{font-family:var(--mono);font-size:13.5px;font-weight:600; color:var(--ink-faint);padding-top:2px} .kontroly .k-nazev{font-size:16px;font-weight:600} .kontroly .k-popis{grid-column:2;font-size:14.5px;color:var(--ink-soft); line-height:1.5} /* ── lišta nad seznamem pravidel ── Přilepená pod navigací. Klient bude mít ~50 pravidel a hledání i počítadlo musí být po ruce i po dvou obrazovkách scrollování, ne jen úplně nahoře. */ .lista-hd{position:sticky;top:var(--h-nav);z-index:30; display:flex;gap:16px;align-items:center;flex-wrap:wrap; padding:16px 0;margin:0 0 20px;border-bottom:1px solid var(--rule)} /* Pozadí se dokresluje přes okraje stránky: karty mají stín, který jinak vykoukne v odsazení vedle lišty a vypadá to jako smítko. Linka zůstává na samotné liště, aby lícovala s hranou karet — dokreslené pozadí je širší a čára z něj vyčnívala do prázdna. */ .lista-hd::before{content:"";position:absolute;z-index:-1;top:0;bottom:0; left:calc(-1 * var(--pad));right:calc(-1 * var(--pad)); background:var(--paper)} .hledat{position:relative;flex:1 1 240px;max-width:340px;display:flex; align-items:center} .hledat svg{position:absolute;left:15px;color:var(--ink-faint);pointer-events:none} .hledat input{font:inherit;font-size:15.5px;width:100%;padding:12px 15px 12px 42px; border:1px solid var(--rule);background:var(--list); border-radius:var(--r);box-shadow:var(--stin)} .hledat input:focus{outline:none;border-color:var(--slate); box-shadow:0 0 0 3px rgba(89,100,111,.18)} .lista-pocet{font-family:var(--mono);font-size:14px;color:var(--ink-faint)} .lista-hd .btn{margin-left:auto} /* ── karta pravidla ── Levá hrana je silná schválně: je to zároveň předěl mezi pravidly a stavová kontrolka. Šedá = kontroluje se, černá = právě otevřené, čárkovaná = vypnuté. Řešeno `border-left-width`, ne pruhem navrch — přilepená hlavička karty by se přes takový pruh při scrollování překreslila. */ .karta{position:relative;border:1px solid var(--rule-strong);border-left-width:3px; background:var(--list);margin:0 0 14px;border-radius:10px; box-shadow:var(--stin); scroll-margin-top:calc(var(--h-nav) + var(--h-lista) + 18px); transition:border-color var(--prech),box-shadow var(--prech)} .karta:hover{border-color:var(--ink-faint)} .karta.je-otevreno{border-color:var(--slate);border-left-color:var(--ink); box-shadow:var(--stin-v)} .karta.vyp{background:var(--paper);border-style:dashed;box-shadow:none} .karta.vyp .karta-nazev{color:var(--ink-soft)} .karta.je-skryto{display:none} .karta-hd{position:relative;z-index:20;display:flex;align-items:center;gap:14px; padding:15px 18px;flex-wrap:wrap} /* Otevřená karta je vysoká přes celou obrazovku. Bez přilepené hlavičky klient uprostřed formuláře nevidí, které pravidlo vlastně upravuje. Krycí pozadí patří JEN sem. Na sbalené kartě je hlavička jediný viditelný potomek, takže vyplní celý rám — a neprůhledný obdélník s hranatými rohy přebil zaoblení i spodní hranu karty. Rohy vypadaly ulomené. Pozadí je přitom stejné jako pozadí karty, takže sbalená hlavička ho nepotřebuje; potřebuje ho až přilepená hlavička, pod kterou roluje obsah formuláře. */ .karta.je-otevreno .karta-hd{position:sticky; top:calc(var(--h-nav) + var(--h-lista)); background:var(--list);border-radius:8px 8px 0 0; border-bottom:1px solid var(--rule)} .karta.vyp.je-otevreno .karta-hd{background:var(--paper)} .karta-toggle{position:static;flex:1 1 300px;min-width:0;display:flex; align-items:center;gap:13px;background:none;border:0;padding:0; font:inherit;color:inherit;text-align:left;cursor:pointer} /* Klikací je celý řádek, ne jen text — nástroje vpravo si kliknutí uzmou samy. */ .karta-toggle::before{content:"";position:absolute;inset:0;border-radius:8px} .karta-sipka{flex:none;color:var(--ink-faint);transition:transform var(--prech)} .karta.je-otevreno .karta-sipka{transform:rotate(90deg)} /* Pořadí není ozdoba: položka se zařadí do PRVNÍHO pravidla odshora, které sedí. Číslo proto dostalo vlastní pole, ať se dá počítat očima. */ .karta-poradi{flex:none;display:inline-flex;align-items:center; justify-content:center;min-width:30px;height:28px;padding:0 7px; font-family:var(--mono);font-size:13px;font-weight:600; font-variant-numeric:tabular-nums;color:var(--ink-soft); background:var(--wash);border:1px solid var(--rule-soft); border-radius:7px; transition:background var(--prech),color var(--prech), border-color var(--prech)} .karta.je-otevreno .karta-poradi{background:var(--ink);color:#fff; border-color:var(--ink)} .karta-text{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1 1 auto} .karta-nazev{font-weight:600;font-size:17px;letter-spacing:-.012em;line-height:1.32; overflow-wrap:anywhere} /* Klíčová slova stojí pod názvem jako štítky. Slepený řetězec `vata|vln[aěy]|minerál` se nedal číst a stejně se ořezal. */ .karta-shrnuti{display:flex;align-items:center;gap:5px;min-width:0; flex-wrap:nowrap;overflow:hidden; -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent)} .karta.je-otevreno .karta-shrnuti{display:none} .klic{flex:none;font-family:var(--mono);font-size:12.5px;line-height:1.75; color:var(--ink-soft);background:var(--wash); border:1px solid var(--rule-soft);border-radius:5px;padding:1px 7px; max-width:24ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .klic.vic{background:transparent;border-style:dashed;color:var(--ink-faint)} .klic-sip{flex:none;font-family:var(--mono);font-size:13px;color:var(--ink-faint); padding:0 3px} .karta.vyp .klic{background:transparent} /* Na vypnuté kartě by bílý rám procent svítil víc než samotné pravidlo. */ .karta.vyp .karta-znacka{background:transparent;color:var(--ink-faint)} .karta.vyp .karta-znacka.pct{border-color:var(--rule);color:var(--ink-soft)} .karta-znacky{display:flex;gap:8px;align-items:center;position:relative; pointer-events:none;flex:none} .karta-znacka{font-family:var(--mono);font-size:12.5px;font-weight:600; letter-spacing:.06em; text-transform:uppercase;padding:5px 11px;border-radius:6px; background:var(--wash);border:1px solid var(--rule-soft); color:var(--ink-soft);white-space:nowrap} /* Procenta jsou hodnota, ne štítek. Proto tmavší text a vlastní rám. */ .karta-znacka.pct{background:var(--list);border-color:var(--rule-strong); color:var(--ink);font-size:14px;letter-spacing:0; font-variant-numeric:tabular-nums;text-transform:none} .karta-znacka.vypnuto{background:transparent;border:1px dashed var(--rule); color:var(--ink-faint)} .karta-nastroje{display:flex;gap:8px;align-items:center;position:relative;flex:none} .karta-telo{padding:24px 22px 26px} .js .karta [data-sbalit]{display:none} .js .karta.je-otevreno [data-sbalit]{display:block} /* ── prázdný seznam a „filtr nic nenašel" ── */ .prazdno{border:1px dashed var(--rule-strong);border-radius:10px; background:var(--list);padding:44px 32px;text-align:center; color:var(--ink-soft);font-size:15.5px;margin:0 0 14px} .prazdno b{display:block;color:var(--ink);font-size:17.5px;font-weight:600; letter-spacing:-.012em;margin-bottom:6px} /* ── formulářová pole ── */ .pole{display:grid;grid-template-columns:200px 1fr;gap:18px 24px;align-items:start} .pole label{font-size:14.5px;color:var(--ink-soft);padding-top:13px} .pole input[type=text]{font:inherit;font-family:var(--mono);font-size:14.5px; width:100%;padding:12px 14px;border:1px solid var(--rule);background:var(--paper); border-radius:var(--r-s);transition:border-color var(--prech), box-shadow var(--prech),background var(--prech)} .pole input[type=text]:hover{border-color:var(--ink-faint)} .pole input[type=text]:focus{outline:none;border-color:var(--slate);background:#fff; box-shadow:0 0 0 3px rgba(89,100,111,.18)} .pole .napoveda{grid-column:2;font-size:13.5px;color:var(--ink-faint);margin:-11px 0 0} /* ── slova pravidla jako štítky ── Do 28. 8. 2026 tu byl jeden textový řádek a klient v něm viděl `vata|vln[aěy]|minerál`. Rozpočtář s tím nemá co dělat, takže je z toho seznam štítků: jeden štítek = jedno slovo nebo sousloví. Textarea pod tím zůstává (bez JavaScriptu je to jediné, co pravidlo umí uložit). */ .slova{display:block} .slova-zdroj{font:inherit;font-family:var(--mono);font-size:14.5px;width:100%; padding:12px 14px;border:1px solid var(--rule);background:var(--paper); border-radius:var(--r-s);resize:vertical} .slova-pas{display:flex;flex-wrap:wrap;gap:7px;align-items:center; padding:8px 9px;min-height:46px;cursor:text; border:1px solid var(--rule);background:var(--paper);border-radius:var(--r-s); transition:border-color var(--prech),box-shadow var(--prech),background var(--prech)} .slova-pas:hover{border-color:var(--ink-faint)} .slova-pas:focus-within{border-color:var(--slate);background:#fff; box-shadow:0 0 0 3px rgba(89,100,111,.18)} .stitek{display:inline-flex;align-items:center;gap:6px; padding:5px 6px 5px 11px;border-radius:99px; background:#fff;border:1px solid var(--rule); font-size:14px;line-height:1.3;color:var(--ink);white-space:nowrap} .stitek-x{border:0;background:none;cursor:pointer;padding:0; width:19px;height:19px;border-radius:50%;line-height:1; font-size:15px;color:var(--ink-faint); display:inline-flex;align-items:center;justify-content:center; transition:background var(--prech),color var(--prech)} .stitek-x:hover{background:var(--wash);color:var(--oxide)} /* Selektor musí přebít `.pole input[type=text]`, jinak psané slovo dostane vlastní rámeček a je z toho pole v poli. Pozor: `[type=text]` váží jako třída, takže dvě třídy nestačí — proto `.pole` i `input` navíc. Bezpatkové písmo schválně: ať vypadá stejně jako štítek vedle. */ .pole .slova-pas input.slova-vstup{flex:1 1 130px;width:auto;min-width:110px; border:0;outline:none;box-shadow:none;background:none;border-radius:0; font-family:var(--sans);font-size:14.5px;padding:5px 4px;color:var(--ink)} .pole .slova-pas input.slova-vstup:hover, .pole .slova-pas input.slova-vstup:focus{ border:0;box-shadow:none;background:none} /* Nápověda, že se štítek přidá Enterem. Věta by pole přeplácala, tak jen klávesa — a v klidovém stavu není vidět vůbec, ukáže se až po kliknutí do pole, tedy přesně když to klient potřebuje vědět. */ .slova-enter{display:none;flex:0 0 auto;margin-left:auto;align-self:center; padding:3px 8px;border:1px solid var(--rule);border-bottom-width:2px; border-radius:5px;background:#fff; font-family:var(--sans);font-size:12px;line-height:1.5; color:var(--ink-faint);white-space:nowrap;user-select:none} .slova-pas:focus-within .slova-enter{display:block} .slova-napoveda{grid-column:2;font-size:13.5px;color:var(--ink-faint);margin:7px 0 0} .pole-radek{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:6px} .pole-radek label{padding-top:0} .pole-radek .btn{margin-left:auto} .zaskrt{display:flex;align-items:center;gap:8px;font-size:15.5px;color:var(--ink); cursor:pointer;user-select:none} .zaskrt input{width:18px;height:18px;accent-color:var(--ink);cursor:pointer} /* ── panel „přidat" ── */ .pridat{border:1px solid var(--rule-strong);background:var(--list);border-radius:10px; box-shadow:var(--stin);padding:28px 30px 30px;margin:0 0 26px} .pridat h2{margin:0 0 24px;font-size:19px;font-weight:650} .js .pridat{display:none} .js .pridat.je-otevreno{display:block} /* ── nápověda k psaní pravidel ── */ details.napoveda-blok{margin:0 0 34px;max-width:66ch} details.napoveda-blok>summary{cursor:pointer;list-style:none;font-size:15px; color:var(--ink-soft);padding:2px 0; display:inline-flex;align-items:center;gap:7px} details.napoveda-blok>summary::-webkit-details-marker{display:none} details.napoveda-blok>summary::before{content:"?";font-family:var(--mono); font-size:13px;font-weight:600;width:20px;height:20px;flex:none;border-radius:50%; border:1px solid var(--rule);color:var(--slate);display:inline-flex; align-items:center;justify-content:center} details.napoveda-blok>summary:hover{color:var(--ink)} details.napoveda-blok[open]>summary{color:var(--ink);margin-bottom:2px} .napoveda-telo{border-left:2px solid var(--rule);padding:4px 0 4px 22px; margin:16px 0 0;color:var(--ink-soft);font-size:15px} .napoveda-telo p{margin:0 0 14px} .napoveda-telo p:last-child{margin-bottom:0} .napoveda-telo code{font-family:var(--mono);font-size:14px;background:var(--wash); padding:1px 5px;border-radius:var(--r-s);color:var(--ink)} /* ── protokol: lišta nad vygenerovaným reportem ── */ /* Pozadí bylo na 86 % a rozostření samo nestačilo: pod lištou prosvítaly rozscrollované řádky protokolu (na mobilu čitelně, „nesoudržných pod násypy" přes spodní okraj). Teď kryje, rozostření zůstává kvůli hraně. */ .app-lista{position:sticky;top:var(--h-nav);z-index:40;border-bottom:1px solid var(--rule); background:rgba(255,255,255,.985);backdrop-filter:saturate(180%) blur(10px)} .app-lista-in{max-width:1000px;margin:0 auto;padding:14px 32px;display:flex; gap:10px 24px;align-items:center;flex-wrap:wrap; font-family:var(--mono);font-size:14px;color:var(--ink-soft)} .app-lista b{color:var(--ink);font-weight:600} .app-lista .app-right{margin-left:auto;display:flex;gap:8px;align-items:center} .app-lista .btn-x{font-family:var(--sans)} a.btn-x{text-decoration:none;display:inline-flex;align-items:center} /* ── přihlášení ── */ .login{flex:1;display:flex;align-items:center;justify-content:center; padding:6vh 24px 12vh} .login-karta{width:100%;max-width:380px} .login-znak{display:flex;justify-content:center;margin-bottom:26px} .login-karta h1{font-size:24px;font-weight:650;margin:0 0 5px;text-align:center; letter-spacing:-.015em} .login-karta p.app-sub{margin:0 0 32px;font-size:16px;text-align:center} .login-box{background:var(--list);border:1px solid var(--rule);border-radius:10px; box-shadow:var(--stin-v);padding:32px} .login-box label{display:block;font-size:14.5px;color:var(--ink-soft);margin:0 0 10px} .login-box input[type=password]{font:inherit;width:100%;padding:13px 16px; border:1px solid var(--rule);background:var(--paper);border-radius:var(--r); margin-bottom:20px;transition:border-color var(--prech),box-shadow var(--prech)} .login-box input[type=password]:focus{outline:none;border-color:var(--slate); background:#fff;box-shadow:0 0 0 3px rgba(89,100,111,.18)} .login-box .btn{width:100%;justify-content:center} .login .app-flash{margin-bottom:16px} @media(max-width:680px){ :root{--pad:20px;--h-nav:63px} /* Záložky se na úzkém displeji nezalamují do druhého řádku, ale posouvají — zalomená navigace vypadala rozbitě a odsouvala obsah dolů. */ .app-nav-in{padding:0 20px;gap:0;min-height:62px;flex-wrap:nowrap; overflow-x:auto;scrollbar-width:none} .app-nav-in::-webkit-scrollbar{display:none} .app-brand{margin-right:10px;font-size:0;gap:0} .app-nav a.app-link{white-space:nowrap;padding:0 9px} /* Navigace se posouvá, ale „Odhlásit" musí zůstat vidět, ne utéct za okraj. Proto je na mobilu lišta neprůhledná a odkaz se lepí k pravé hraně. */ .app-nav{background:#fff;backdrop-filter:none} /* z-index musí být výslovně: bez něj se konec sousední záložky vykreslil přes bílé pozadí „Odhlásit" a vypadalo to jako rozbitý text. */ /* right:-20px, ne 0: sticky se měří od vnitřní hrany, a lišta má odsazení 20 px. S nulou zůstal vpravo pruh, kterým prosvítal konec sousední záložky. Změřeno: odkaz končil na 370, navigace je široká 390. */ .app-nav .app-right{position:sticky;right:-20px;z-index:2;margin-left:auto; flex:none;background:#fff;padding-left:18px; padding-right:20px; box-shadow:-16px 0 14px -12px rgba(25,28,31,.16)} .app-wrap{padding:40px var(--pad) 72px} h1.app-h1{font-size:27px} .pole{grid-template-columns:1fr;gap:8px} .pole label{padding-top:6px} .pole .napoveda{grid-column:1} .pole-radek .btn{margin-left:0;width:100%;justify-content:center} /* Lišta s hledáním má na mobilu tlačítko přes celou šířku. Přilepená by ukrojila třetinu displeje, tak se scrolluje pryč jako zbytek stránky. Skript v base.html si toho všimne a hlavičky karet pak neodsazuje. */ .lista-hd{position:static;padding:0;margin:0 0 18px} .lista-hd::before{display:none} .lista-hd .btn{width:100%;justify-content:center} /* Hlavička otevřené karty se na mobilu nelepí. Název se zalomí do dvou řádků a s nástroji pod ním je vysoká přes 120 px — s navigací by to byla čtvrtina displeje a na formulář by zbyla polovina. Stejný důvod jako u lišty s hledáním výš. */ .karta.je-otevreno .karta-hd{position:static} .karta-hd{padding:14px 14px;gap:11px} .karta-toggle{flex:1 1 100%;gap:10px} .karta-nastroje{margin-left:auto} .karta-telo{padding:20px 15px 22px} .prazdno{padding:34px 22px} } @media print{ .app-nav,.app-lista,.app-pata{display:none} body{background:#fff} } @media(prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }