/* ===========================================================================
   Meteostanice — vizuální systém
   ---------------------------------------------------------------------------
   Displej 1280×720, na šířku, dotykový, visí na zdi a čte se z několika metrů.
   Žádná responzivita na mobil: je to jedno zařízení s jedním rozlišením.
   Všechny rozměry jsou ale v proměnných, takže změna displeje znamená úpravu
   na jednom místě.

   Pravidla, která drží celý vzhled pohromadě:

   1. BARVA NESE INFORMACI, NEDEKORUJE. Teplotní škála je jedna a platí pro
      venkovní i vnitřní číslo, aby porovnání zůstalo poctivé. Barva nikdy
      není jediným nositelem informace — vždy je u ní i číslo nebo slovo.
   2. NIKDY SE NESCROLLUJE. Každý blok má pevnou výšku nebo 1fr, dlouhé texty
      se zkracují (text-overflow, line-clamp), nikdy nepřetečou.
   3. HIERARCHIE. Obě teploty jsou hlavní údaj a čtou se přes místnost.
      Všechno ostatní je jim podřízené.
   =========================================================================== */

/* --- Písma ---------------------------------------------------------------- */

/* Digital-7 Mono na všechny číselné hodnoty.
   POZOR na volbu řezu: běžný Digital-7 Italic NEMÁ konstantní šířku číslic —
   jednička je v něm 180 jednotek proti 520 u ostatních, takže by hodnota při
   každé změně cukala. Mono řez má všech deset číslic i tečku a dvojtečku
   stejně široké (520), a právě proto je tady on.
   Původní .woff soubory ze starého webu byly ve skutečnosti TrueType jen
   s příponou .woff; převedené na woff2 mají čtvrtinovou velikost. */
@font-face {
  font-family: "Digital";
  src: url("../fonts/digital7-mono.woff2") format("woff2");
  font-display: block;
  font-style: italic;
}

/* Inter na popisky a texty. Nahrazuje dekorativní Smoolthan ze starého webu,
   který vedle segmentových číslic opticky nesedí a z dálky se hůř čte.
   latin-ext kvůli české diakritice. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-400.woff2") format("woff2");
  font-weight: 400; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2212;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-ext-400.woff2") format("woff2");
  font-weight: 400; font-display: swap;
  unicode-range: U+0100-02AF, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; src: url("../fonts/inter-latin-500.woff2") format("woff2");
  font-weight: 500; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2212;
}
@font-face {
  font-family: "Inter"; src: url("../fonts/inter-latin-ext-500.woff2") format("woff2");
  font-weight: 500; font-display: swap;
  unicode-range: U+0100-02AF, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; src: url("../fonts/inter-latin-600.woff2") format("woff2");
  font-weight: 600; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2212;
}
@font-face {
  font-family: "Inter"; src: url("../fonts/inter-latin-ext-600.woff2") format("woff2");
  font-weight: 600; font-display: swap;
  unicode-range: U+0100-02AF, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; src: url("../fonts/inter-latin-700.woff2") format("woff2");
  font-weight: 700; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2212;
}
@font-face {
  font-family: "Inter"; src: url("../fonts/inter-latin-ext-700.woff2") format("woff2");
  font-weight: 700; font-display: swap;
  unicode-range: U+0100-02AF, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Paleta a rozměry ----------------------------------------------------- */

:root {
  /* Sedm hodnot palety. Černé pozadí je nutnost — displej visí v místnosti
     a večer nesmí svítit. */
  --bg:        #04070b;
  --surface:   #0b1119;
  --surface-2: #131c27;
  --line:      #1f2b39;
  --fg:        #e9f0f7;
  /* Tlumená barva popisků.
     Cesta sem: #7b8b9b (kontrast 5,6:1) → #a7b6c4 → #c8d4e0 → tohle (16,3:1).
     Na 8" panelu se 188 PPI neuspělo ani jedno z předchozích. Závěr: na tak
     malém fyzickém písmu je šedá nečitelná dřív, než stihne cokoli ztlumit.
     Popisky jsou proto prakticky bílé a hierarchii nese VÝHRADNĚ velikost
     a tučnost. Kdo chce něco potlačit, zmenší to nebo odlehčí — nešedne. */
  --fg-dim:    #dfe8f1;
  --accent:    #7cc2ff;

  /* Sémantické barvy verdiktů a stavů. */
  --good: #35d39a;
  --warn: #f5b93b;
  --bad:  #ff6161;
  --cool: #5aa9ff;

  /* Rozměry displeje. Změna rozlišení = úprava tady a nikde jinde. */
  --screen-w: 1280px;
  --screen-h: 720px;
  --pad: 12px;
  --gap: 10px;
  --radius: 14px;

  --row-top:    76px;
  --row-alert:  0px;      /* přepíná se na 52px, když nějaká výstraha platí */
  --row-fc:     200px;
  --row-astro:  94px;
  --row-status: 32px;

  /* Velikosti textu.
   *
   * Displej má 1280 px na osmi palcích, tedy zhruba 188 PPI — třikrát víc než
   * běžný monitor. Text, který na monitoru vypadá normálně, je tady fyzicky
   * dvoumilimetrový a z metru se nepřečte. Celá škála je proto posunutá nahoru
   * a velikosti se nikde nepíšou natvrdo, ať se dá doladit na jednom místě.
   *
   * Orientačně: --fs-sm vychází na panelu asi 2,6 mm výšky verzálek, což je
   * spodní hranice čitelnosti z natažené ruky. Menší než --fs-xs nejít. */
  --fs-xs:  21px;
  --fs-sm:  23px;
  --fs-md:  26px;
  --fs-lg:  29px;
  --fs-xl:  33px;
  --fs-2xl: 38px;

  /* Typografie čísel. Venkovní teplota je o stupeň větší než vnitřní —
     je to hodnota, kvůli které se na displej člověk dívá. Ne dvojnásobně,
     to by porovnatelnost rozbilo. */
  --temp-out:  92px;
  --temp-in:   86px;
  --clock:    44px;

  /* Dotykové plochy. Ovládá se to prstem zpovzdálí, ne stylusem. */
  --tap-min: 48px;
}

/* --- Základ --------------------------------------------------------------- */

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  /* Okno, ne návrh. Stránka vyplní, co dostane — vlastní plátno 1280×720
     se do něj napasuje transformací níž. */
  width: 100%; height: 100%;
  overflow: hidden;                    /* nikdy se nescrolluje */
  background: var(--bg);
  color: var(--fg);
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;  /* aby čísla necukala i mimo Digital */
  /* Žádné -webkit-font-smoothing: antialiased. Na světlém textu na tmavém
     pozadí ztenčuje tahy — přesně to, co tady nechceme. Výchozí vyhlazování
     nechá písmo plnější a na dálku čitelnější. */
  font-weight: 450;
}

body {
  /* Dotykové ovládání: žádný dvojtapový zoom, žádný výběr textu. */
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: none;                        /* kurzor v kiosku schová i unclutter */
}

/* Číselné hodnoty. Digital nemá znak ° ani typografické minus, ty se proto
   sázejí zvlášť v Interu (.unit, .sign). */
.num {
  font-family: Digital, Inter, system-ui, sans-serif;
  font-style: italic;
  letter-spacing: 0.01em;
  line-height: 1;
}
.unit { font-family: Inter, sans-serif; font-style: normal; font-weight: 500; }
.sign { font-family: Inter, sans-serif; font-style: normal; font-weight: 600; }

.dim { color: var(--fg-dim); font-weight: 500; }
.hidden { display: none !important; }

/* --- Systém obrazovek ----------------------------------------------------- */

/* Plátno má pevných 1280×720 a celý návrh je na ně stavěný. Skutečné okno
   ale nemusí mít přesně tolik: jiný režim displeje, okrasný panel, okno menší
   než obrazovka. Bez tohohle se návrh vpravo ořízne a dole zbude prázdno —
   přesně to se na Pi stalo.

   Plátno se proto vystředí a zmenší/zvětší na největší měřítko, které se do
   okna vejde v obou rozměrech. --fit dopočítá JS při startu a při resize;
   když JS neběží, zůstane 1 a chová se to jako dřív. */
#app {
  position: absolute; top: 50%; left: 50%;
  width: var(--screen-w); height: var(--screen-h);
  transform: translate(-50%, -50%) scale(var(--fit, 1));
  transform-origin: center center;
}

.screen {
  position: absolute; inset: 0;
  padding: var(--pad);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
}
.screen.is-active {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s;
}

/* Odpočet do automatického návratu — tenká lišta u horního okraje.
   Je tam proto, aby bylo zřejmé, že obrazovka zmizí sama. */
.timeout-bar {
  position: absolute; top: 0; left: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--cool));
  width: 100%;
  transform-origin: left center;
  z-index: 50;
  opacity: .75;
}
#screen-main .timeout-bar { display: none; }

/* Kulaté tlačítko v horní liště. Plocha je záměrně --tap-min, i když ikona
   je menší — prstem zpovzdálí se do 26px nikdo netrefí. */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap-min); height: var(--tap-min);
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--fg-dim);
  font-size: 26px; line-height: 0;
  flex: 0 0 auto;
}
.icon-btn.is-tapped { background: var(--surface-2); color: var(--fg); }

/* --- Hlavní obrazovka ----------------------------------------------------- */

#screen-main {
  display: grid;
  grid-template-rows:
    var(--row-top)
    var(--row-alert)
    minmax(0, 1fr)
    var(--row-fc)
    var(--row-astro)
    var(--row-status);
  gap: var(--gap);
}
body.has-alert { --row-alert: 52px; }

/* Každý blok má explicitní řádek.
   Bez toho by skrytý pruh s výstrahou (display:none) posunul všechny další
   bloky o řádek výš a rozvržení by se rozpadlo pokaždé, když žádná výstraha
   neplatí — tedy skoro vždycky. */
#screen-main > .topbar      { grid-row: 1; }
#screen-main > .alert-strip { grid-row: 2; }
#screen-main > .hero        { grid-row: 3; }
#screen-main > .fc3         { grid-row: 4; }
#screen-main > .astrobar    { grid-row: 5; }
#screen-main > .statusbar   { grid-row: 6; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}

/* Dotyková odezva je povinná: bez ní člověk nepozná, že dotyk zabral,
   a mačká znovu. Hover stavy naopak nikde nejsou — na dotyku by po tapnutí
   zůstaly „zaseknuté". */
.tappable { cursor: pointer; }
.tappable::after {
  content: ""; position: absolute; inset: 0;
  background: #fff; opacity: 0; pointer-events: none;
  transition: opacity 260ms ease;
}
.tappable.is-tapped::after { opacity: .10; transition: opacity 0ms; }

/* --- Horní lišta ---------------------------------------------------------- */

.topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
}
.topbar .clock {
  font-size: var(--clock);
  color: var(--fg);
}
.topbar .clock .sec { font-size: .62em; color: var(--fg-dim); }
.topbar .date {
  font-size: var(--fs-lg); font-weight: 500; color: var(--fg-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar .date b { color: var(--fg); font-weight: 600; }
.topbar .right { display: flex; align-items: center; gap: 14px; }
.topbar .pressure { font-size: var(--fs-2xl); white-space: nowrap; }
.topbar .pressure .unit { font-size: var(--fs-sm); color: var(--fg-dim); margin-left: 3px; }
.topbar .trend { font-size: var(--fs-sm); font-weight: 600; margin-left: 8px; }
.topbar .trend.up { color: var(--good); }
.topbar .trend.down { color: var(--warn); }
.topbar .trend.flat { color: var(--fg-dim); }

.alert-badge {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: var(--fs-xl); font-weight: 700;
  background: var(--surface-2);
  color: var(--fg-dim);
}
.alert-badge.lvl1 { background: rgba(245,197,24,.18); color: #F5C518; }
.alert-badge.lvl2 { background: rgba(245,124,0,.20);  color: #FF9A3C; }
.alert-badge.lvl3 { background: rgba(211,47,47,.22);  color: #FF6B6B; }

/* --- Pruh s výstrahou ----------------------------------------------------- */

.alert-strip {
  display: flex; align-items: center; gap: 14px;
  padding: 0 18px;
  border-left: 5px solid var(--alert-color, var(--warn));
  background: color-mix(in srgb, var(--alert-color, var(--warn)) 12%, var(--surface));
}
.alert-strip .a-event { font-weight: 700; font-size: var(--fs-md); white-space: nowrap; }
.alert-strip .a-level { font-size: var(--fs-xs); color: var(--fg-dim); white-space: nowrap; }
.alert-strip .a-text {
  font-size: var(--fs-sm); color: var(--fg-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- Hero: obě teploty vedle sebe ----------------------------------------- */

/* Tohle je jádro celého návrhu. Hlavní hodnotou stanice není venkovní teplota
   samotná, ale ROZDÍL mezi venkem a domovem — z něj vyplývá, jestli větrat,
   jestli topit, co si vzít na sebe. Obě čísla proto leží na jednom řádku na
   společném účaří a dělí je jen tenký šev. Nikdy je nerozdělovat. */

.hero {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  /* Tři řádky: popisek poloviny, samotný údaj, verdikt.
     Popisky u teploty byly dřív vlastním řádkem pod ní; teď leží vedle čísla,
     takže prostřední řádek dostane všechnu zbylou výšku a číslo může růst. */
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 6px 0 0;
}
.hero-label {
  grid-row: 1;
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .16em;
  color: var(--fg-dim);
  padding: 0 24px;
  line-height: 1;
}
.hero-label.out { grid-column: 1; }
.hero-label.in  { grid-column: 3; }

/* Teplota a její popisky vedle sebe.
   Venkovní polovina je zarovnaná doprava, vnitřní doleva — obě čísla tím
   sedí co nejblíž u dělicí linky a rozdíl se čte bez cestování očima. */
.hero-main {
  grid-row: 2;
  display: flex; align-items: center; gap: 20px;
  min-width: 0; min-height: 0;
  padding: 0 24px;
}
/* Odsazení od švu je kvůli štítku s rozdílem: je vystředěný na lince, takže
   do každé poloviny zasahuje polovinou své šířky. Bez téhle rezervy by ho
   číslo překrylo. */
.hero-main.out { grid-column: 1; justify-content: flex-end;   padding-right: 60px; }
.hero-main.in  { grid-column: 3; justify-content: flex-start; padding-left: 60px; }

.hero-side {
  display: flex; flex-direction: column; align-items: flex-start;
  /* Popisky se nesmějí smršťovat — v pravo zarovnané polovině by se jinak
     ořízly na levém okraji. Když je těsno, ustoupí číslo, ne text. */
  flex: 0 0 auto;
  gap: 3px; min-width: 0;
  font-size: var(--fs-xs); color: var(--fg-dim);
  line-height: 1.2;
}
/* Venkovní polovina má popisky vlevo od čísla, aby číslo zůstalo u švu. */
.hero-main.out { flex-direction: row-reverse; }
.hero-main.out .hero-side { align-items: flex-end; }

.hero-side .row { display: flex; gap: 14px; white-space: nowrap; }
.hero-side .row-wide { align-items: center; gap: 16px; }
.hero-side b { color: var(--fg); font-weight: 700; }

.hero-seam {
  grid-column: 2; grid-row: 1 / 3;
  background: linear-gradient(180deg, transparent, var(--line) 18%, var(--line) 72%, transparent);
  position: relative;
}

/* Rozdíl teplot — malý údaj přímo na dělicí lince. V létě je to hodnota,
   podle které se rozhoduje o oknech. */
.delta {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: var(--fs-md); font-weight: 700;
  white-space: nowrap;
  color: var(--fg);
}

.temp {
  color: var(--t, var(--fg));
  white-space: nowrap;
  /* Nejširší případ je „−12.4°" — o znak delší než „12.4°". Mono číslice
     mají konstantní šířku, takže layout to nerozhodí. */
}
/* Šířka se rezervuje na nejširší případ („−12.4°" = 3,12 em v Digital Mono),
   aby se rozvržení nepřeskládalo, jakmile teplota spadne pod nulu. */
.temp.out { font-size: var(--temp-out); min-width: 3.12em; text-align: right; }
.temp.in  { font-size: var(--temp-in);  min-width: 3.12em; }
.temp .unit { font-size: .34em; vertical-align: .62em; margin-left: .04em; }
.temp .sign { font-size: .78em; }

.hero-icon { width: 76px; height: 76px; flex: 0 0 auto; }
.hero-icon svg { width: 100%; height: 100%; display: block; }

/* Verdikt větrání — drobná značka, ne titulek.
   Ikona nese stav, barva ho opakuje. Velikost je schválně pod úrovní popisků
   u teplot: hlavní informací stanice jsou obě teploty a jejich rozdíl. */
.verdict {
  grid-row: 4; grid-column: 1 / -1; justify-self: center;
  margin: 2px 0 6px;
  display: flex; align-items: center; gap: 10px;
  padding: 4px 16px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--v-color, var(--line));
  max-width: 94%;
  min-height: 38px;
}
.verdict .v-ico {
  display: inline-flex; font-size: 26px; line-height: 0;
  color: var(--v-color, var(--fg));
}
.verdict .v-label {
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .02em;
  color: var(--v-color, var(--fg));
  white-space: nowrap;
}
.verdict .v-detail {
  font-size: var(--fs-sm); color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.verdict .v-window {
  font-size: var(--fs-sm); color: var(--accent); white-space: nowrap;
  padding-left: 14px; border-left: 1px solid var(--line);
}
/* Nic k větrání → značka zmizí, ale místo drží (žádné poskakování). */
.verdict.is-off { visibility: hidden; }
.v-open    { --v-color: var(--good); }
.v-short   { --v-color: var(--cool); }
.v-closed,
.v-closed_humid { --v-color: var(--bad); }
.v-neutral { --v-color: var(--fg-dim); }
.v-unknown { --v-color: var(--line); }

/* Očekávané srážky v nejbližší hodině. Zobrazuje se jen když se něco čeká. */
.precip-note {
  display: inline-flex; align-items: center; gap: 8px;
  flex: 0 0 auto;
  color: var(--cool); font-size: var(--fs-sm); font-weight: 600;
}
.precip-note .pn-icon { width: 30px; height: 30px; flex: 0 0 auto; }

/* Bez očekávaných srážek zůstává jen nenápadná zkratka na radar — vedle
   velkých teplot nesmí soupeřit o pozornost, ale musí zůstat klepnutelná. */
.precip-note.is-idle { color: var(--fg-dim); font-weight: 500; }
.precip-note.is-idle .pn-icon { width: 22px; height: 22px; }

/* Na dotykovém displeji musí mít i tenhle úzký proužek plochu k trefení.
   Zvětšuje se neviditelným přesahem, ne paddingem — padding by posunul
   sousední bloky a hlavní obrazovka nemá ani pixel volný.
   Přesah jde POUZE do stran: svisle by se připočetl k výšce hlavičky, a ta
   je na pixely. Vodorovně je místa dost, řádek končí daleko před okrajem. */
.precip-note { position: relative; min-height: 34px; }
.precip-note::after {
  content: ""; position: absolute;
  top: 0; right: -20px; bottom: 0; left: -14px;
}

/* Pojistka: SVG bez explicitní velikosti se v HTML roztáhne na 300×150 a
   překryje sousední bloky. Ikony počasí proto mají výchozí rozměr vždy. */
#app svg:not([width]) { width: 1em; height: 1em; }
#app .hero-icon svg, #app .fc3 .d-icon svg, #app .radar-base { width: 100%; height: 100%; }
/* Ikona v sedmidenní předpovědi. Bez tohohle ji pojistka výš srazí na 1em. */
/* Popis dne a pod ním případná neshoda modelů jako číslo („MET Norway max
   17°"). Posouvající se text (marquee) by na displeji na zdi byl horší: nutil
   by čekat, až dojede, a to je pravý opak toho, k čemu displej je. Popis bez
   neshody smí na dva řádky, s ní na jeden. */
.f7-desc { min-width: 0; line-height: 1.2; }
.f7-text {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.f7-agree ~ .f7-text, .f7-desc:has(.f7-agree) .f7-text { -webkit-line-clamp: 1; }
.f7-agree {
  font-size: var(--fs-sm); color: var(--warn); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
}
.f7-agree.silna { color: var(--bad); }  /* ne .big — to je globální třída velkého čísla */

.f7-icon { width: 80px; height: 80px; }
#app .f7-icon svg { width: 100%; height: 100%; display: block; }

/* --- Předpověď na 3 dny --------------------------------------------------- */

.fc3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.fc3 .day {
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center; justify-items: center;
  gap: 0; padding: 4px 6px;
  border-right: 1px solid var(--line);
}
.fc3 .day:last-child { border-right: 0; }
.fc3 .d-name { font-size: var(--fs-lg); font-weight: 700; color: var(--fg); }
.fc3 .d-name b { color: var(--fg); }
.fc3 .d-mid { display: flex; align-items: center; gap: 14px; }
.fc3 .d-icon { width: 84px; height: 84px; }
.fc3 .d-icon svg { width: 100%; height: 100%; display: block; }
.fc3 .d-temps { font-size: 62px; white-space: nowrap; }
.fc3 .d-max { color: var(--tmax, var(--fg)); }
.fc3 .d-min { color: var(--tmin, var(--fg-dim)); font-size: .72em; }
.fc3 .d-sep { color: var(--fg-dim); font-size: .6em; margin: 0 .12em; }
.fc3 .d-note { font-size: var(--fs-md); color: var(--fg-dim); display: flex; gap: 16px; }
.fc3 .d-note .rain { color: var(--cool); }

/* --- Astro lišta ---------------------------------------------------------- */

.astrobar {
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  align-items: center;
  gap: 34px; padding: 0 22px;
  font-size: var(--fs-md); color: var(--fg-dim);
}
.astrobar .item { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.astrobar .num { font-size: var(--fs-2xl); color: var(--fg); }
.astrobar .moon-face { width: 46px; height: 46px; flex: 0 0 auto; }
.moon-big { display: block; }
.astrobar .arrow { font-size: var(--fs-lg); color: var(--fg-dim); }
.astrobar .daylen { justify-self: end; }
.astrobar .delta-day { margin-left: 8px; font-size: var(--fs-sm); }
.delta-day.plus  { color: var(--good); }
.delta-day.minus { color: var(--warn); }

/* --- Stavová lišta -------------------------------------------------------- */

.statusbar {
  display: flex; align-items: center; gap: 18px;
  padding: 0 18px;
  font-size: var(--fs-xs); color: var(--fg-dim);
  background: transparent; border: 0;
}
.statusbar .sep { opacity: .4; }
.statusbar .stale { color: var(--warn); }
.statusbar .offline { color: var(--bad); }
/* Upozornění na čidla doma nahradí ve stavové liště stáří čidla a stanici
   ČHMÚ — všechno by se na řádek nevešlo a položky by se zalomily. */
.statusbar > span { white-space: nowrap; }
.statusbar .st-cidla { color: var(--bad); font-weight: 600; }
.statusbar:not(.has-cidla) .st-cidla,
.statusbar:not(.has-cidla) .st-cidla-sep,
.statusbar.has-cidla #st-indoor,
.statusbar.has-cidla .st-indoor-sep,
.statusbar.has-cidla #st-station,
.statusbar.has-cidla .st-station-sep { display: none; }

/* --- Detailní obrazovky --------------------------------------------------- */

.detail { display: grid; grid-template-rows: auto 1fr; gap: var(--gap); }
.detail-head {
  display: flex; align-items: baseline; gap: 16px;
  padding: 6px 6px 0;
}
.detail-head h1 { font-size: var(--fs-2xl); margin: 0; font-weight: 700; letter-spacing: .02em; }
.detail-head .sub { font-size: var(--fs-sm); color: var(--fg-dim); }
.detail-head .sub.is-bad { color: var(--bad); font-weight: 600; }
#screen-indoor .detail-head h1, #screen-outdoor .detail-head h1 { white-space: nowrap; }
#indoor-sensors, #out-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.detail-body { display: grid; gap: var(--gap); min-height: 0; overflow: hidden; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
  min-height: 0;
  display: flex; flex-direction: column;
}
.card h2 {
  margin: 0 0 8px; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim);
}
.card .big { font-size: 40px; line-height: 1; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 0 18px; font-size: var(--fs-sm); line-height: 1.2; }
.kv dt { color: var(--fg-dim); white-space: nowrap; }
.kv dd { margin: 0; text-align: right; font-weight: 500; }

.chart { flex: 1; min-height: 0; position: relative; }

/* Přepínač rozsahu grafu — interaktivní prvek, tap na něj resetuje timeout. */
.rangepick { display: flex; gap: 8px; }
.rangepick button {
  min-width: 62px; min-height: var(--tap-min);
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-2); color: var(--fg-dim);
  font: 600 15px Inter, sans-serif;
  position: relative; overflow: hidden;
}
.rangepick button.is-on { color: var(--fg); border-color: var(--accent); }

/* --- Grafy (uPlot) -------------------------------------------------------- */

.uplot, .u-wrap { font-family: Inter, sans-serif !important; }
.u-legend { display: none !important; }        /* legenda zabírá místo, popisky jsou v kartě */
.u-axis { color: var(--fg-dim); }

/* --- Radar ---------------------------------------------------------------- */

/* Radar je jediná obrazovka, kde je obrázek to podstatné. Dostává celý displej:
   padding pryč, hlavička ven z mřížky a nad mapu jako plovoucí štítek. Jinak
   by nadpis a okraje sebraly ~70 px výšky, což se na šířce mapy projeví
   stonásobně — poměr stran 680×460 ji drží svázanou s výškou. */
#screen-radar { padding: 0; grid-template-rows: 1fr; gap: 0; }
/* Popisek vlevo dole. Nahoře by zasahoval do šluknovského výběžku — dole je
   pod ním jen kus Bavorska, tam nic nepřekryje. */
#screen-radar .detail-head {
  position: absolute; bottom: 14px; left: 16px; z-index: 20;
  padding: 6px 14px; gap: 12px;
  background: rgba(4, 7, 11, .72);
  border: 1px solid var(--line); border-radius: 12px;
}
#screen-radar .detail-head h1 { font-size: var(--fs-lg); }
#screen-radar .detail-head .sub { font-size: var(--fs-xs); }

.radar-stage {
  position: relative; width: 100%; height: 100%; min-height: 0;
  background: #070c12; overflow: hidden;
}

/* Výřez.
 *
 * Snímek ČHMÚ pokrývá 11,267–20,770° v. d. a 48,047–52,167° s. š. — tedy kus
 * Německa a Polska navíc. Kdyby se vešel celý, Česko by zabíralo asi třetinu
 * plochy a zbytek by byl cizí území. Snímek se proto zvětší a přeteklé okraje
 * se oříznou (stage má overflow: hidden).
 *
 * Hodnoty jsou spočítané, ne odhadnuté: výřez má obsáhnout 48,5–51,15° s. š.
 * (ČR je 48,55–51,06) a na to je potřeba 1,30× šířky displeje. Střed sedí na
 * 15,45° v. d. a 49,9° s. š. Svislý podíl je v Mercatorově projekci, ne
 * lineární — stejně jako značka domova, kterou umisťuje JS.
 *
 * Ladí se jen těmito třemi čísly; --radar-zoom: 1 vrátí celý snímek.
 */
:root {
  --radar-zoom: 1.30;
  --radar-cx: .440;
  --radar-cy: .579;
}
.radar-frame {
  --rw: calc(var(--screen-w) * var(--radar-zoom));
  --rh: calc(var(--rw) * 460 / 680);
  position: absolute;
  width: var(--rw); height: var(--rh);
  left: calc(var(--screen-w) / 2 - var(--rw) * var(--radar-cx));
  top:  calc(var(--screen-h) / 2 - var(--rh) * var(--radar-cy));
}

/* Ovládání plave nad mapou v pravém dolním rohu — mapa teď zabírá celou
   plochu, takže vedle ní žádný pruh nezbývá. */
.radar-side {
  position: absolute; right: 14px; bottom: 14px; z-index: 15;
  display: flex; flex-direction: column; gap: 10px; width: 136px;
}
.radar-base, .radar-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  image-rendering: auto;
}
.radar-img { opacity: 0; transition: opacity 120ms linear; }
.radar-img.is-on { opacity: 1; }
.radar-home {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(0,0,0,.6);
}
.radar-time {
  background: rgba(4,7,11,.72); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 10px; font-size: var(--fs-lg);
  text-align: center;
}
/* Rozlišení měření od extrapolace. Barva i text, ne jen barva — na displeji
   visícím na zdi se barevný odstín z dálky ztrácí. */
.radar-kind {
  text-align: center; padding: 5px 8px; border-radius: 8px;
  font-size: var(--fs-xs); font-weight: 600;
  border: 1px solid var(--line); color: var(--fg);
}
.radar-kind.is-now { color: var(--good); border-color: var(--good); }
.radar-kind.is-fct { color: var(--warn); border-color: var(--warn); }

/* Předpovědní snímky se kreslí lehce průsvitněji, aby i bez čtení popisky
   bylo poznat, že to není měření. */
.radar-img.is-fct { opacity: 0; }
.radar-img.is-fct.is-on { opacity: .82; }
.radar-stage.showing-fct .radar-base { opacity: .7; }

.radar-side .rangepick { width: 100%; }
.radar-side .rangepick button { width: 100%; }

/* Hláška „snímky se stahují" leží přes mapu, ne v mřížce — jinak by si
   vynutila vlastní sloupec a mapu zúžila. */
#radar-na {
  position: absolute; inset: 0; display: grid; place-items: center;
  z-index: 10;
}
#radar-na.hidden { display: none; }

/* --- Kvalita vzduchu, pyly ------------------------------------------------ */

.scale-chip {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 8px;
  padding: 4px 12px; border-radius: 999px;
  font-size: var(--fs-sm); font-weight: 600;
  background: color-mix(in srgb, var(--c) 22%, var(--surface-2));
  color: var(--c);
}
.bar { height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--c, var(--accent)); border-radius: 5px; }

.pollen-list { display: grid; gap: 10px; }
.pollen-row { display: grid; grid-template-columns: 108px 1fr auto; align-items: center; gap: 14px; font-size: var(--fs-sm); }

/* --- Kalendář ------------------------------------------------------------- */

/* Seznam vyplní kartu celou a řádky se rozloží rovnoměrně — jinak se dole
   hromadilo prázdno, kterého je na 1280×720 škoda. */
.nameday-list {
  display: grid; gap: 0; font-size: 31px;
  /* space-around rozprostře řádky do volné výšky, ale nevnucuje jim stejnou
     výšku — dlouhý název svátku se pak může normálně zalomit, aniž by kartu
     roztáhl mimo obrazovku. */
  /* space-between místo space-around: řádky se rozprostřou, ale bez mezer
     na krajích, které kartu opticky roztahovaly. */
  flex: 1; min-height: 0; align-content: space-between;
}
/* Sloupec s datem měl 132 px a „pondělí 21. září" se do něj nevešlo — lámalo
   se to na dva řádky a vedle jména zůstávalo prázdno. Teď se datum vejde vždy
   a jméno dostane zbytek šířky. */
.nameday-row {
  display: grid; grid-template-columns: 286px 1fr; gap: 10px;
  align-items: baseline;
  padding: 0; border-bottom: 1px solid var(--line);
}
.nameday-row .name, .nameday-row > span:last-child { font-weight: 600; }
.nameday-row.today { font-size: 1.06em; }
.nameday-row:last-child { border-bottom: 0; }
.nameday-row.today { color: var(--fg); font-weight: 600; }
/* Den je plnohodnotný údaj, ne popisek — bílý jako jméno vedle něj. */
.nameday-row .when { color: var(--fg); font-weight: 400; white-space: nowrap; }
.holiday-row .name { color: var(--warn); }
.nameday-row .in-days { font-size: .72em; font-weight: 400; color: var(--fg-dim); margin-left: .4em; }

/* --- Karta větrání (Doma podrobně) ---------------------------------------
   Bez nadpisu: verdikt ho nahradí. Těžiště jsou tři čísla — kolik je vlhkost
   teď, kam ji chceme dostat a kam se dostane po výměně vzduchu. */

.vent-verdict {
  display: flex; align-items: center; gap: 12px;
  font-size: var(--fs-lg); font-weight: 700;
  color: var(--v-color, var(--fg));
  margin-bottom: 8px;
}
.vent-verdict .v-ico { display: inline-flex; font-size: 34px; line-height: 0; }

.vent-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vent-nums .vn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-width: 0;
}
.vent-nums .vn-k { font-size: var(--fs-xs); color: var(--fg-dim); white-space: nowrap; }
.vent-nums .vn-v { font-size: 36px; white-space: nowrap; }
.vent-nums .vn-v .unit { font-size: .42em; }
.vent-nums .vn-v.good { color: var(--good); }
.vent-nums .vn-v.warn { color: var(--warn); }

.vent-note   { margin-top: 10px; font-size: var(--fs-sm); line-height: 1.3; color: var(--fg); }
.vent-warn   { margin-top: 10px; font-size: var(--fs-sm); color: var(--bad); font-weight: 600; }
.vent-window { margin-top: auto; padding-top: 10px; font-size: var(--fs-sm); color: var(--accent); }

/* --- Diagnostika ---------------------------------------------------------- */

.diag-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
/* Diagnostika je jediná obrazovka, kde jde o hustotu: sedmnáct řádků na jedné
   kartě a čte se zblízka, ne přes místnost. Dostává proto vlastní, menší škálu
   a sevřenější řádkování — pořád je to víc než původních 13–15 px. */
#screen-diag { --fs-xs: 18px; --fs-sm: 19px; --fs-md: 21px; --fs-lg: 24px; }
/* Hodinová předpověď na 24 h.
   Jeden pás o 24 dlaždicích dával 50 px na dlaždici — čísla se do toho vešla
   jen drobná a nad nimi zbýval prázdný pruh. Dvě řady po dvanácti dávají
   dvojnásobnou šířku i výšku na dlaždici. */
.hourly-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 1fr;
  gap: 2px 0;
  height: 100%;
}
.hourly-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; min-width: 0;
  border-right: 1px solid var(--line);
}
.hourly-cell:nth-child(12n) { border-right: 0; }
.hourly-cell .hh   { font-size: var(--fs-sm); color: var(--fg-dim); line-height: 1; }
/* Pojistka #app svg:not([width]) má vyšší specificitu kvůli ID, takže
   selektor musí být taky s #app — jinak ikona spadne na 1em. */
#app .hourly-cell svg { width: 40px; height: 40px; display: block; }
.hourly-cell .tt   { font-size: 34px; line-height: 1; }
.hourly-cell .pp   { font-size: var(--fs-xs); color: var(--cool); white-space: nowrap; line-height: 1; }

.src-list { display: grid; gap: 2px; font-size: var(--fs-xs); line-height: 1.25; }
.src-row { display: grid; grid-template-columns: 182px 84px 1fr; gap: 10px; align-items: center; padding: 0; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 8px; }
.dot.ok   { background: var(--good); }
.dot.bad  { background: var(--bad); }
.dot.idle { background: var(--fg-dim); }

/* --- Noční režim ---------------------------------------------------------- */

/* Po nastavitelném čase ztmavit na minimum a ukazovat jen čas a obě teploty —
   i tady vedle sebe na jednom řádku, ať platí stejný princip jako na hlavní
   obrazovce. Tap probudí do plné jasnosti. */
#screen-night {
  background: #000;
  display: grid; place-items: center;
  padding: 0;
}
#screen-night .night-inner { text-align: center; opacity: .34; }
#screen-night .n-clock { font-size: 92px; color: #cfd9e4; }
#screen-night .n-temps {
  display: flex; align-items: baseline; justify-content: center; gap: 56px;
  margin-top: 26px;
}
#screen-night .n-temp { font-size: 76px; color: var(--t, #cfd9e4); }
#screen-night .n-label { display: block; font-size: var(--fs-sm); letter-spacing: .18em; color: #56606b; margin-bottom: 6px; }

/* --- Animace ikon --------------------------------------------------------- */

/* Uměřeně a účelně. Mraky se pomalu posouvají, srážky padají. Nic nebliká,
   nepulzuje ani se netočí — tohle visí v místnosti a nesmí to otravovat. */

@keyframes wi-fall {
  0%   { transform: translateY(-4px); opacity: 0; }
  18%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { transform: translateY(9px); opacity: 0; }
}
@keyframes wi-drift {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(2.2px); }
}

.wi-drop, .wi-flake { animation: wi-fall 2.6s linear infinite; }
.wi-d0 { animation-delay: 0s; }
.wi-d1 { animation-delay: .55s; }
.wi-d2 { animation-delay: 1.1s; }
.wi-d3 { animation-delay: 1.65s; }
.wi-cloud { animation: wi-drift 19s ease-in-out infinite; }
.wi-fogbar { animation: wi-drift 13s ease-in-out infinite; }

/* Plynulá animace čísla při změně hodnoty — přechod, ne přeskok.
   Samotný dopočet mezikroků dělá JS, tady je jen jemné vyzdvižení barvy. */
.temp, .fc3 .d-temps { transition: color 600ms ease; }

@media (prefers-reduced-motion: reduce) {
  .wi-drop, .wi-flake, .wi-cloud, .wi-fogbar { animation: none; }
  .screen { transition: opacity 1ms; }
  .temp { transition: none; }
}

/* --- Stavy nedostupných dat ----------------------------------------------- */

.na {
  color: var(--fg-dim);
  font-size: var(--fs-md); font-style: normal;
  display: inline-flex; align-items: center; gap: 8px;
}
.na::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--fg-dim); opacity: .6;
}
.block-na {
  display: grid; place-items: center;
  height: 100%; color: var(--fg-dim); font-size: var(--fs-md);
  text-align: center; padding: 20px;
}