/* Farby a typografia prichádzajú z tokenov v geo.css; vlastná paleta tu už
   nie je. Dve premenné, ktoré stránka mala navyše, sú nahradené priamo
   v použitiach (žiadny tieňový slovník):
     --panel2 (#1f2530) → var(--surface-alt)  vyvýšená plocha: polia, tlačidlá, hover riadku
     --bd     (#2b3140) → var(--border)       jednotný okraj
   Zvyšok (rail, mapa, drop zóna, CRS zoznam) je vlastná vec tejto stránky
   a ostáva vlastným CSS — len postaveným na premenných. */
* { box-sizing:border-box; }
/* line-height explicitne: preflight v geo.css nastavuje html na 1.5, kým
   doteraz platilo `normal` (~1.2). Bez tohto narastie každý riadok textu
   a obsah railu sa posunie o desiatky pixelov nadol. */
html,body { margin:0; height:100%; font-family:var(--font-sans); line-height:normal; background:var(--bg); color:var(--fg); overflow:hidden; }
#app { display:flex; height:100%; }
#side { width:340px; min-width:340px; height:100%; overflow-y:auto; background:var(--panel); border-right:1px solid var(--border); }
#map { flex:1; height:100%; background:var(--bg); }
.brand { padding:12px 14px; font-weight:700; letter-spacing:.3px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.brand small { color:var(--muted); font-weight:400; font-size:12px; }
.brandgroup { display:flex; align-items:center; gap:8px; }
.mark { display:block; flex:none; }
.sec { border-bottom:1px solid var(--border); }
/* font-weight explicitne: preflight v geo.css nastavuje h1–h6 na
   `font-weight: inherit`, takže bez tohto by nadpisy sekcií stratili tučnosť. */
.sec > h3 { margin:0; padding:11px 14px; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); cursor:pointer; display:flex; justify-content:space-between; user-select:none; }
.sec > h3:hover { color:var(--fg); }
.sec .body { padding:4px 14px 14px; display:none; }
.sec.open .body { display:block; }
.sec h3 .chev::after { content:"▸"; }
.sec.open h3 .chev::after { content:"▾"; }
/* Pozn.: meno `.field` má aj komponentová vrstva, kde označuje flexboxový
   OBAL poľa. Tu ide o samotný <label> — `display:block` nižšie komponent
   prebíja (nevrstvené pravidlo poráža vrstvené) a jeho medzery medzi
   položkami sú na blokovom prvku bez účinku. Komponentové `.field input`
   sa neuplatní, tieto labely žiadny input neobsahujú.
   (Bez bare slova „f-l-e-x" v komentári zámerne — skener Tailwindu ho
   vyzbiera ako kandidáta a do geo.css pribudne utilita, ktorú nik nepoužíva.) */
label.field { display:block; font-size:12px; color:var(--muted); margin:9px 0 3px; }
input[type=text], input[type=search], select { width:100%; background:var(--surface-alt); border:1px solid var(--border); color:var(--fg); border-radius:7px; padding:7px 9px; font-family:var(--font-sans); font-size:13px; }
input:focus, select:focus { outline:none; border-color:var(--accent); }
/* `.btn` je tu LOKÁLNY variant (nízky, panelový, rádius 7px), nie tlačidlo
   z komponentovej vrstvy — to má iný rádius, odsadenie aj farbu. Vlastnosti,
   ktoré komponent deklaruje navyše (display, line-height, font-weight,
   font-family, hover pozadie), sú preto vypísané aj tu; inak by z
   components.css presiakli a tlačidlo by zmenilo výšku aj rez písma.
   `.btn.primary` stojí ZA `.btn:hover` zámerne — pri rovnakej špecificite
   vyhráva neskoršie pravidlo, takže primárne tlačidlo drží akcentové pozadie
   aj počas prejdenia myšou (tak ako doteraz). */
.btn { cursor:pointer; display:inline-block; border:1px solid var(--border); background:var(--surface-alt); color:var(--fg);
       padding:7px 11px; border-radius:7px; font-family:var(--font-sans); font-size:13px; font-weight:400; line-height:normal; }
.btn:hover { background:var(--surface-alt); border-color:var(--accent); }
.btn.primary { background:var(--accent); border-color:var(--accent); color:var(--bg); font-weight:600; }
.btn.wide { width:100%; }
.row { display:flex; gap:8px; align-items:center; }
.muted { color:var(--muted); font-size:12px; }
.crslist { max-height:230px; overflow-y:auto; margin-top:6px; border:1px solid var(--border); border-radius:7px; }
/* Deliaca linka vnútri zoznamu je zámerne tlmenejšia než --border (inak by
   stovky riadkov vytvorili mriežku) — preto plošný token, nie okrajový. */
.crsrow { padding:6px 9px; font-size:12.5px; cursor:pointer; border-bottom:1px solid var(--surface-alt); }
.crsrow:hover { background:var(--surface-alt); }
.crsrow.sel { background:rgb(from var(--accent) r g b / .16); }
.crsrow b { color:var(--accent); font-weight:600; }
.crsrow .nm { color:var(--fg); }
.crsrow .ar { color:var(--muted); font-size:11px; }
.attr { display:flex; align-items:center; gap:7px; margin:5px 0; }
.attr input[type=text] { flex:1; padding:4px 7px; font-size:12px; }
.attr input[type=checkbox] { accent-color:var(--accent); }
.drop { border:1.5px dashed var(--border); border-radius:9px; padding:16px; text-align:center; color:var(--muted); font-size:13px; cursor:pointer; }
.drop:hover, .drop.hot { border-color:var(--accent); color:var(--fg); }
.stat { font-size:12px; color:var(--muted); }
.stat b { color:var(--fg); }
.banner { margin:8px 0 0; padding:7px 10px; border-radius:8px; font-size:12.5px; display:none; }
/* Podklad a okraj sú odvodené z tokenu; farba TEXTU je svetlejší odtieň toho
   istého signálu, pre ktorý token neexistuje (tokeny nesú jednu hodnotu na
   signál) — preto ostáva doslovná. */
.banner.warn { display:block; background:rgb(from var(--warn) r g b / .14); border:1px solid var(--warn); color:#f2c877; }
.banner.ok { display:block; background:rgb(from var(--ok) r g b / .12); border:1px solid var(--ok); color:#a6e8c6; }
input[type=range] { width:100%; accent-color:var(--accent); }
.toolbar { position:absolute; top:10px; right:12px; z-index:3; display:flex; gap:8px; }
.pill { position:absolute; top:10px; left:352px; z-index:3; background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:6px 11px; font-size:12.5px; }
.pill b { color:var(--fg); }
/* Atribúcia. `right:52px` obchádza NavigationControl (bottom-right) — atribúcia,
   ktorú nie je celú vidieť, licenčnú podmienku nespĺňa. `max-width` počíta so
   340px railom vľavo, nie s celou šírkou okna. */
.attribution { position:absolute; bottom:6px; right:52px; z-index:3; font-size:11px; color:var(--muted);
               display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; justify-content:flex-end;
               max-width:calc(100vw - 400px); text-align:right; }
.attribution #attr-osm:empty { display:none; }

/* Presunuté z `style=` atribútov v markupe (2026-08-19) — viď preview.css.
   Tri odsadenia sa líšia o pixel; hodnoty sú prenesené doslova, aby presun
   nebol zároveň tichou zmenou rozloženia. */
.is-hidden { display:none; }
.mt-7 { margin-top:7px; }
.mt-8 { margin-top:8px; }
.mt-9 { margin-top:9px; }
.gap-8 { gap:8px; }
.pad-8 { padding:8px; }