/* ============================================================================= Walk-Check konzola: jeden stylesheet pre index.html, prirucky/, app/, annotate/dataset/nakrucanie/mapa. ============================================================================= ZDROJ PRAVDY PRE FARBY A SKALU je packages/design-tokens/tokens.ts. Blok `:root` nizsie je jeho DOSLOVNY OPIS, nie druha paleta: kazda hodnota ma pri sebe napisane, z ktoreho tokenu pochadza. Preco opis a nie `` na packages/design-tokens/theme.css: 1. console/deploy.sh kopiruje na Vercel VYMENOVANE subory z console/ (app.js, auth.js, config.js, logika.js, meranie.js, index.html, styles.css). Cesta ../packages/... na prode neexistuje, takze @import aj by tam skoncili 404 a konzola by ostala bez farieb. 2. theme.css ma svetlu temu pod triedou `.theme-light`; zapnut ju znamena pridat class na , a index.html patri druhemu baliku. Az bude oboje hotove (link v + class="theme-light"), tento blok sa zmaze a nic ine sa menit nemusi: nazvy premennych su zhodne s theme.css. Rozdiely oproti theme.css, ktore su ZAMER a nie drift (viac v reporte): --line = ink[200] #C4D3E5, nie tokens.light.border rgba(11,26,47,.10). Ram panela musi byt na obrazovke pri dennom svetle vidno. --shadow ostava. tokens.ts predpisuje "ziadne tiene" pre TMAVU appku, kde sa hlbka robi vrstvami povrchov; svetly dashboard ma biele karty na skoro bielom pozadi a bez tienov splynu. ============================================================================= */ :root{ /* ── Paleta (tokens.ts → palette) ───────────────────────────────────────── */ --wc-brand-100:#CFE3FF; --wc-brand-200:#A6CCFB; --wc-brand-400:#4593EC; --wc-brand-500:#2F84E4; --wc-brand-600:#1F6BC4; --wc-brand-700:#18539A; --wc-brand-900:#15314F; --wc-ink-50:#F4F8FD; --wc-ink-100:#E7EEF7; --wc-ink-200:#C4D3E5; --wc-ink-500:#52688A; --wc-ink-900:#0B1A2F; --wc-teal-50:#E3F6EF; --wc-teal-500:#149B6B; --wc-teal-600:#0F7E58; --wc-teal-700:#0C6147; --wc-amber-50:#FBF0DD; --wc-amber-300:#E0A33A; --wc-amber-500:#A66B12; --wc-amber-600:#8F5B0F; --wc-red-50:#FCEBEB; --wc-red-500:#C5302F; --wc-red-600:#9E2322; /* ── Semantika (tokens.ts → theme.light) ────────────────────────────────── */ --wc-bg:var(--wc-ink-50); /* plocha za panelmi */ --wc-surface:#FFFFFF; /* panel, karta */ --wc-surface-2:var(--wc-ink-50); /* zebra, jemne podfarbenie */ --wc-surface-3:var(--wc-ink-100); /* treti stupen hlbky */ --wc-text-primary:var(--wc-ink-900); --wc-text-muted:var(--wc-ink-500); /* accent = FARBA TEXTU a ramov; accentFill = VYPLN pod bielym textom. Su to dva tokeny zamerne: biela na brand[500] ma 3,79:1 (pod AA), na brand[600] 5,31:1 (tokens.ts:71-77). */ --wc-accent:var(--wc-brand-600); --wc-accent-hover:var(--wc-brand-700); --wc-accent-fill:var(--wc-brand-600); --wc-accent-fill-pressed:var(--wc-brand-700); --wc-on-accent:#FFFFFF; --wc-verified:var(--wc-teal-600); /* text a vypln pod bielym textom */ --wc-verified-ink:var(--wc-teal-700); /* text na teal[50] podklade */ --wc-review:var(--wc-amber-600); --wc-review-ink:#7E4F0C; --wc-fail:var(--wc-red-500); --wc-fail-ink:var(--wc-red-600); /* ── Skala rozostupov (tokens.ts → space, 4px krok) ─────────────────────── */ --sp-05:2px; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-16:64px; /* ── Skala pisma: SEDEM stupnov (tokens.ts → typography.scale) ──────────── */ /* 11 px je jediny stupen navyse oproti tokenom (tam konci na 12): nesu ho verzalkove mikropopisky tabuliek a stitkov, ktore v mobilnej appke nie su. */ --fs-2xs:11px; --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-lg:16px; --fs-xl:20px; --fs-2xl:28px; /* ── Polomery (tokens.ts → radius) ──────────────────────────────────────── */ --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-full:9999px; /* ── Jeden obsahovy stlpec ──────────────────────────────────────────────── */ /* Hlavicka je cez celu sirku okna, obsah je stlpec 1200 px v strede. Do 28.08. mala hlavicka pevny padding 20 px, takze logo stalo na x=20 a nadpis stranky na 380 pri sirke 1920. --wc-bleed je to iste odsadenie, ktore ma .page: pri sirke pod 1200 px je to gutter, nad nou polovica zvysku + gutter. Vdaka tomu sedi logo, prva polozka navigacie a nadpis stranky na JEDNEJ osi pri kazdej sirke, a ziadny obal v HTML na to netreba. */ --wc-page-max:1200px; --wc-gutter:var(--sp-5); --wc-bleed:max(var(--wc-gutter), calc((100% - var(--wc-page-max)) / 2 + var(--wc-gutter))); /* Uzsi obsah NEcentruje stranku: sedi na tej istej osi a len skor konci (pravidlo JEDNEJ OSI, 30.08.2026: kontajnery boli chaos, plna sirka / polovica vlavo / stred podla stranky). Centrovany ostava LEN login. */ --wc-page-uzka:760px; /* ── Vyska hlavicky: JEDNA hodnota ──────────────────────────────────────── */ /* Cita ju .topbar, sticky offset .navrow aj vyska prihlasovacej steny. Do 28.08. si ich kazda drzala vlastnu (62 / 62 / 54) a prihlasovacia stena preto rolovala o 8 px, hoci nemala co. */ --wc-topbar-h:62px; /* Detekcna paleta (tokens.ts -> detection). Je nezavisla od temy: kresli sa nad obrazom kamery, nie nad UI plochou. */ --wc-det-present:#2FE08A; --wc-det-missing:#FFB84D; --wc-det-chip-ink:#06261A; /* Modra na tmavom bare (stitok skupiny, CONSOLE v lockupe) a amber text Dielne. #F0C879 je tokens.dark.soft.review.text; #9CC2EF v tokenoch NIE JE (lezi medzi brand[200] a brand[300]) a je to jediny odtien, ktory tu nema svoj token: viac v reporte. */ --wc-on-deep:#9CC2EF; --wc-on-deep-warn:#F0C879; --wc-shadow:0 1px 2px rgba(11,26,47,.06),0 8px 24px rgba(11,26,47,.06); /* ── Spatne kompatibilne nazvy ──────────────────────────────────────────── */ /* Pouzivaju ich annotate.html, nakrucanie.html, dataset.html, mapa.html a prirucky/. Nie su to nove farby, len stare mena tych istych tokenov. */ --brand:var(--wc-brand-500); /* Display rez ako token (audit 31.08.: .lb-veta referencovala neexistujuci token a padala na systemove pismo). Obrys poli: --line (ink-200, 1.5:1) je na deliace ciary, na 3:1 obrys ovladaca je ink-400. */ --wc-font-display:"Saira",system-ui,sans-serif; --wc-ink-400:#8296AD; --brand-deep:var(--wc-brand-900); --ink:var(--wc-ink-900); --muted:var(--wc-ink-500); --line:var(--wc-ink-200); --zebra:var(--wc-ink-50); /* --teal a --amber su o stupen tmavsie nez do 28.08. (teal[500] -> teal[600], amber[500] -> amber[600]). Nie je to kozmetika: app.js:2286 z nich sklada vypln farebnej dlazdice pod BIELYM textom (`resultColor`) a rovnako to robia prirucky/test.css a annotate.html. Biela na teal[500] mala 3,54:1 a na amber[500] 3,92:1, teda pod AA; na 600 ma 5,09:1 a 5,77:1. Tie iste premenne sluzia inde ako farba TEXTU na bielej, kde tmavsi odtien tiez len pomaha. Svetlejsie odtiene ostavaju k dispozicii ako --wc-teal-500 a --wc-amber-500 pre dekorativne bodky, ktore vyznam nenesu samy o sebe. */ --teal:var(--wc-teal-600); --amber:var(--wc-amber-600); --red:var(--wc-red-500); --bg:var(--wc-bg); --card:var(--wc-surface); --shadow:var(--wc-shadow); --radius:var(--r-lg); } /* ============================================================================= Zaklad ============================================================================= */ *{box-sizing:border-box} /* MIESTO PRE SCROLLBAR SA REZERVUJE VZDY. Bez tohto sa pri objaveni scrollbaru zuzi viewport (zmerane: 1200 -> 1185 px) a cely obsah vratane hlavicky sa posunie o 15 px dolava. Konzola meni vysku stranky pri kazdom prepnuti pohladu, takze scrollbar sa objavuje a mizne a hlavicka pri tom vidielne skace. `stable` necha pruh rezervovany aj na kratkej stranke, co je presne ta vymena, ktora skakanie odstrani. Norbert to nahlasil 28.08.2026. */ html{scrollbar-gutter:stable} html,body{margin:0} body{ font:var(--fs-md)/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--wc-text-primary); background:var(--wc-bg); -webkit-font-smoothing:antialiased; } .tnum{font-variant-numeric:tabular-nums} a{color:var(--wc-accent); text-decoration:none} /* PODCIARKUJU SA LEN ODKAZY V TEXTE, nie prvky, ktore su odkazom len technicky (29.08.2026). Karta, tlacidlo, chip ani zalozka nie su veta: podciarknutie na nich vyzera ako chyba a `text-decoration:none` v ich ZAKLADNOM pravidle to neprebije, lebo `a:hover` ma vyssiu specificitu (0,1,1 proti 0,1,0). Afordancia tychto prvkov je ram, tien a farba, nie ciara. */ a:hover{text-decoration:underline} a.wscard:hover, a.btn:hover, a.chip:hover, a.card:hover, a.topbar-link:hover, a.dalej:hover, a.navtab:hover, a.brand:hover{text-decoration:none} /* [hidden] musi vyhrat nad triedami s explicitnym display (flex/grid): inak atribut hidden NIC nespravi (UA stylesheet ma nizsiu specificitu). */ [hidden]{display:none!important} /* SELECT: vlastna sipka s odstupom od okraja (Norbert 30.08.: nativna sedela nalepena na hrane). appearance:none zhodi nativny vzhlad, chevron je SVG na pozicii right 12px; padding-right drzia KONKRETNE pravidla selectov (.rolepick/.rolesel tu, Dielna vo svojich