/* onlinepocasie.sk — mobile-first, svetlý aj tmavý režim */
:root {
  --bg: #e7eff7;
  --bg2: #d8e7f5;
  --card: #ffffff;
  --ink: #0f2233;
  --muted: #4e6579;
  --accent: #0f6ab4;
  --accent-ink: #ffffff;
  --line: #d5e2ed;
  --hero1: #2f86cf;
  --hero2: #0c4a86;
  --hero-ink: #ffffff;
  --hero-muted: #cfe4f6;
  --bar-cold: #4aa3e0;
  --bar-warm: #ffb347;
  --radius: 18px;
  --shadow: 0 1px 2px rgba(15, 34, 51, 0.04), 0 8px 24px rgba(15, 34, 51, 0.07);
  --shadow-sm: 0 1px 2px rgba(15, 34, 51, 0.06);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a141f;
    --bg2: #0e1c2b;
    --card: #142433;
    --ink: #e8f1f8;
    --muted: #8fa7bb;
    --accent: #5fa8dd;
    --accent-ink: #0a1826;
    --line: #24384c;
    --hero1: #1d5487;
    --hero2: #0c2c4f;
    --hero-ink: #f2f8fd;
    --hero-muted: #a8c8e2;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.35);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(180deg, var(--bg2) 0%, var(--bg) 320px);
  background-attachment: fixed;
  color: var(--ink);
  line-height: 1.55;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted); }
a { color: var(--accent); }

/* ---------- hlavička ---------- */
.app-header {
  background:
    radial-gradient(120% 180% at 12% -30%, rgba(255, 214, 102, 0.35) 0%, rgba(255, 214, 102, 0) 45%),
    linear-gradient(150deg, #1e6fb4 0%, #123a5c 100%);
  color: #fff;
  padding: calc(20px + env(safe-area-inset-top)) 0 40px;
  margin-bottom: -22px;
}
.app-header h1, .app-header .logo { margin: 0; font-size: 1.45rem; font-weight: 800; letter-spacing: -0.01em; }
.app-header .logo a { color: #fff; text-decoration: none; }
.app-header .muted { margin: 3px 0 0; color: #a9cbe6; font-size: 0.85rem; }

/* ---------- hlavná navigácia ---------- */
.main-nav { margin: -14px 0 12px; position: relative; z-index: 5; }
.mn-row { display: flex; gap: 6px; overflow-x: auto; padding: 2px 16px 6px; max-width: 720px; margin: 0 auto; scrollbar-width: none; }
.mn-row::-webkit-scrollbar { display: none; }
.mn-row a {
  flex: 0 0 auto; padding: 6px 13px; font-size: 0.84rem; font-weight: 600;
  border-radius: 999px; text-decoration: none; white-space: nowrap;
  background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm);
}
.mn-row a.active { background: linear-gradient(135deg, var(--hero1), var(--hero2)); color: #fff; }

/* ---------- pripnuté miesta ---------- */
.pins-title { margin: 2px 0 8px; font-size: 0.9rem; font-weight: 700; }
.pins { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; margin: 0 0 14px; }
.pin-card {
  position: relative; display: block; background: var(--card); border-radius: 14px;
  box-shadow: var(--shadow); padding: 12px 14px; text-decoration: none; color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.pin-card b { font-size: 0.9rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 16px; }
.pin-now { font-size: 1.35rem; font-weight: 800; margin-top: 2px; }
.pin-mm { font-size: 0.76rem; color: var(--muted); margin-top: 2px; }
.pin-x { position: absolute; top: 4px; right: 6px; border: 0; background: none; color: var(--muted); font-size: 1.05rem; cursor: pointer; padding: 4px; line-height: 1; }
.pin-btn {
  flex: 0 0 auto; border: 0; border-radius: 999px; padding: 6px 13px; font-size: 0.82rem; font-weight: 600;
  background: rgba(255, 255, 255, 0.16); color: var(--hero-ink); cursor: pointer; backdrop-filter: blur(4px);
}
.now-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }

/* ---------- pätička: mapa webu ---------- */
/* Štyri sekcie v troch stĺpcoch nechávali pod prvými dvomi obrovskú dieru:
   „Sprievodcovia" majú 16 položiek, ostatné 6 až 9, takže riadok bol vysoký
   podľa najdlhšieho zoznamu. Dva široké stĺpce a dlhý zoznam rozdelený do dvoch
   podstĺpcov spravia z pätičky vyrovnaný blok bez hluchých plôch. */
.foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2px 32px; margin: 18px 0 4px; align-items: start; }
.foot-cols h2 { font-size: 0.95rem; margin: 16px 0 8px; color: #e6f0f8; display: flex; align-items: center; gap: 8px; }
.foot-cols h2::before { content: ""; width: 3px; height: 14px; border-radius: 2px; background: #ffd76b; opacity: 0.8; flex: 0 0 auto; }
.foot-cols ul { list-style: none; margin: 0; padding: 0; }
.foot-cols li { margin: 3px 0; font-size: 0.88rem; break-inside: avoid; }
.foot-cols a { text-decoration: none; }
.foot-cols a:hover { text-decoration: underline; }
.foot-dlhy ul { columns: 2; column-gap: 24px; }
@media (max-width: 560px) { .foot-dlhy ul { columns: 1; } }

/* ---------- rekordy / peľ / zoznamy ---------- */
.rec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.rec-item { text-align: center; background: var(--bg); border-radius: 12px; padding: 14px 8px; }
.rec-item b { display: block; font-size: 1.45rem; letter-spacing: -0.02em; }
.rec-item span { font-size: 0.76rem; color: var(--muted); line-height: 1.35; display: block; margin-top: 4px; }
.hub-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 5px 12px; }
.hub-list a { text-decoration: none; font-size: 0.9rem; }
.pel-cal td { text-align: center; }

/* ---------- vyhľadávanie ---------- */
.search-box { position: relative; display: flex; gap: 8px; margin: 0 0 12px; }
.search-box input {
  flex: 1; padding: 12px 16px; font-size: 1rem;
  border: 1px solid transparent; border-radius: 14px;
  background: var(--card); color: var(--ink); outline: none;
  box-shadow: var(--shadow);
}
.search-box input::placeholder { color: var(--muted); }
.search-box input:focus { border-color: var(--accent); }
.search-box button {
  border: 1px solid transparent; border-radius: 14px; box-shadow: var(--shadow);
  background: var(--card); font-size: 1.15rem; padding: 0 15px; cursor: pointer;
  transition: transform 0.12s ease;
}
.search-box button:active { transform: scale(0.94); }
.search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); overflow: hidden;
}
.search-results button {
  display: block; width: 100%; text-align: left; padding: 11px 15px;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none;
  background: none; color: var(--ink); font-size: 0.95rem; cursor: pointer;
}
.search-results button:last-child { border-bottom: 0; }
.search-results button:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.sr-empty { padding: 11px 15px; color: var(--muted); font-size: 0.9rem; }

/* ---------- mestá ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 12px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.chips::-webkit-scrollbar { display: none; }
.chips.at-end, .chips:not(.scrollable) { -webkit-mask-image: none; mask-image: none; }
@media (min-width: 760px) {
  .chips { flex-wrap: wrap; overflow-x: visible; -webkit-mask-image: none; mask-image: none; }
}
.chips a {
  flex: 0 0 auto; padding: 7px 15px; font-size: 0.9rem; font-weight: 500; cursor: pointer;
  border: 0; border-radius: 999px; text-decoration: none;
  background: var(--card); color: var(--ink); white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s ease;
}
.chips a:active { transform: scale(0.95); }
.chips a.active {
  background: linear-gradient(135deg, var(--hero1), var(--hero2));
  color: #fff;
}

/* ---------- karty ---------- */
.card {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px; margin: 0 0 14px;
  border: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.card h2, .card h3 { margin: 0 0 12px; font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; }
.wx-note { color: var(--muted); font-size: 0.85rem; margin: 8px 0 20px; }

/* ---------- hero: aktuálne počasie ---------- */
.now-card {
  background:
    radial-gradient(140% 160% at 85% -40%, rgba(255, 213, 92, 0.34) 0%, rgba(255, 213, 92, 0) 50%),
    linear-gradient(150deg, var(--hero1) 0%, var(--hero2) 100%);
  color: var(--hero-ink);
  border: 0;
}
.now-card .wx-note, .now-card .muted { color: var(--hero-muted); }
.now-head h1, .now-head h2 { margin: 0 0 6px; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; }
.now-head .ele { color: var(--hero-muted); font-size: 0.78rem; font-weight: 500; }
.now-card .wx-summary { color: var(--hero-muted); font-size: 0.86rem; margin: 0 0 14px; }
.now-main { display: flex; align-items: center; gap: 16px; }
.now-ico { font-size: 3.6rem; line-height: 1; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25)); }
.now-temp { font-size: 3.2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.now-txt { font-size: 0.98rem; font-weight: 500; }
.now-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; font-size: 0.85rem; }
.now-card .now-meta span {
  background: rgba(255, 255, 255, 0.14); border-radius: 999px; padding: 4px 12px;
  backdrop-filter: blur(4px);
}

/* ---------- výstrahy ---------- */
.alerts-card h2, .alerts-card h3 { margin-bottom: 8px; }
.alert {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px;
  border-radius: 12px; margin: 6px 0; font-size: 0.92rem;
  border-left: 4px solid transparent; background: color-mix(in srgb, var(--line) 38%, transparent);
}
.alert .a-ico { font-size: 1.4rem; line-height: 1.2; }
.alert .a-body { min-width: 0; }
.alert .a-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 0.95rem; }
.alert .a-meta { color: var(--muted); font-size: 0.82rem; margin-top: 2px; }
.a-lvl {
  display: inline-block; padding: 1px 9px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.03em;
}
.a-lvl.sev-yellow { background: #d9ad00; color: #221a00; }
.a-lvl.sev-orange { background: #e07b00; }
.a-lvl.sev-red { background: #cf2b1e; }
.alert.sev-yellow { border-left-color: #e0b400; background: color-mix(in srgb, #e0b400 12%, transparent); }
.alert.sev-orange { border-left-color: #e07b00; background: color-mix(in srgb, #e07b00 12%, transparent); }
.alert.sev-red { border-left-color: #cf2b1e; background: color-mix(in srgb, #cf2b1e 12%, transparent); }
.alerts-more summary { color: var(--muted); font-size: 0.85rem; margin-top: 8px; }
.alerts-more .wx-note { margin: 6px 0 0; }

/* ---------- hodinový pás + graf (spoločný scroll) ---------- */
.h-wrap { position: relative; }
.h-wrap::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 8px; width: 44px;
  pointer-events: none; border-radius: 0 14px 14px 0;
  background: linear-gradient(to left, var(--card), transparent);
  opacity: 1; transition: opacity 0.2s;
}
.h-wrap:has(.h-scroll.at-end)::after { opacity: 0; }
.h-scroll { overflow-x: auto; scrollbar-width: thin; padding-bottom: 6px; cursor: grab; scroll-snap-type: x proximity; }
.h-scroll.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.h-strip { display: flex; gap: 4px; width: max-content; }
.h-cell {
  flex: 0 0 64px; width: 64px; box-sizing: border-box; text-align: center; padding: 10px 4px;
  border-radius: 14px; display: flex; flex-direction: column; gap: 3px;
}
.h-cell.now {
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent) 7%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}
.h-t { font-size: 0.74rem; color: var(--muted); }
.h-ico { font-size: 1.45rem; }
.h-temp { font-weight: 700; font-size: 0.98rem; }
.h-rain { font-size: 0.72rem; color: var(--accent); min-height: 1em; }

/* ---------- graf teploty ---------- */
.t-chart { display: block; margin-top: 10px; max-width: 100%; height: auto; }
.c-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.c-area { opacity: 0.9; }
.c-dot { fill: var(--accent); stroke: var(--card); stroke-width: 2; }
.c-pt { font-size: 11px; font-weight: 700; fill: var(--ink); }
.c-xl { font-size: 10px; fill: var(--muted); }

/* ---------- kvalita ovzdušia a peľ ---------- */
.aqi-row { display: flex; align-items: center; gap: 13px; }
.aqi-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 50px; height: 50px; border-radius: 14px; padding: 0 8px;
  font-size: 1.3rem; font-weight: 800; color: #fff;
  box-shadow: var(--shadow-sm);
}
.aqi-1 { background: linear-gradient(150deg, #3d9463, #2e7d4f); }
.aqi-2 { background: linear-gradient(150deg, #8ec44e, #6da33a); }
.aqi-3 { background: linear-gradient(150deg, #eec311, #d1a900); }
.aqi-4 { background: linear-gradient(150deg, #ef8f1c, #d97400); }
.aqi-5 { background: linear-gradient(150deg, #dd4335, #c02417); }
.aqi-6 { background: linear-gradient(150deg, #9d35b5, #7c1f92); }
.air-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 0.88rem; color: var(--muted); }
.pollen-row { display: flex; flex-wrap: wrap; gap: 5px 14px; margin-top: 10px; font-size: 0.85rem; }
.pollen-item { color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.pl-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.pl-0 { background: var(--line); } .pl-1 { background: #3d9463; } .pl-2 { background: #eec311; } .pl-3 { background: #dd4335; }

/* ---------- 7 dní: range-bary ---------- */
.d7-row {
  display: grid; grid-template-columns: 5.6em 2.8em 2.6em 1fr 2.6em;
  align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
.d7-row:last-child { border-bottom: 0; }
.d7-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d7-ico { font-size: 1.35rem; text-align: center; position: relative; line-height: 1.2; }
.d7-ico i { display: block; font-style: normal; font-size: 0.64rem; color: var(--accent); }
.d7-min { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.d7-max { text-align: left; font-weight: 700; font-variant-numeric: tabular-nums; }
.d7-bar {
  position: relative; height: 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--line) 70%, transparent);
}
.d7-bar i {
  position: absolute; top: 0; bottom: 0; border-radius: 999px; min-width: 10px;
  background: linear-gradient(90deg, var(--bar-cold), var(--bar-warm));
}

/* predgenerovaná 7-dňová tabuľka (nahradí ju živé UI) */
.d-scroll { overflow-x: auto; }
.d-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.d-table caption { text-align: left; color: var(--muted); font-size: 0.8rem; padding-bottom: 6px; }
.d-table th, .d-table td { padding: 7px 6px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.d-table th:first-child, .d-table td:first-child,
.d-table th:nth-child(2), .d-table td:nth-child(2) { text-align: left; }
.d-table thead th { color: var(--muted); font-weight: 600; font-size: 0.78rem; }
.d-table tbody tr:last-child th, .d-table tbody tr:last-child td { border-bottom: 0; }

/* ---------- multi-model tabuľka ---------- */
details summary { cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary h2, details summary h3 { display: inline; }
details summary::after { content: " ▸"; color: var(--muted); }
details[open] summary::after { content: " ▾"; }
.w24-day { font-weight: 700; margin: 12px 0 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.w24-day:first-child { border-top: 0; margin-top: 6px; }
.w24-row {
  display: grid; grid-template-columns: 3.2em 2em 5.5em 1fr 5.5em;
  align-items: baseline; gap: 6px; font-size: 0.88rem; padding: 2px 0;
}
.w24-t { color: var(--muted); font-variant-numeric: tabular-nums; }
.w24-ico { text-align: center; }
.w24-temp { font-weight: 700; }
.w24-range { color: var(--muted); font-weight: normal; font-size: 0.8em; margin-left: 4px; }
.w24-rain { color: var(--accent); }
.w24-wind { color: var(--muted); text-align: right; }
.w24-wind i { font-style: normal; font-size: 0.75em; margin-left: 1px; }

/* ---------- mapa počasia (SVG fallback + živá OSM) ---------- */
/* `isolation: isolate` nie je kozmetika — drží Leaflet vnútri mapy.
   Leaflet dáva svojim vrstvám pevné z-indexy: dlaždice 200, značky 600,
   bubliny 700, ovládanie 800 a rohy 1000. Kým žiadny predok mapy netvoril
   stacking kontext, všetkých pätnásť žilo v KOREŇOVOM kontexte, teda nad
   prilepenou navigáciou (z-index 50) — pri odrolovaní na mapu jej lupa
   a prepínač Heatmapa/Značky prekryli položky menu.
   Toto z mapy urobí jeden kontext, takže sa jej vnútorné poradie nemieša
   do stránky. Celoobrazovkový režim nižšie si z-index 4000 nastavuje sám,
   takže ten navigáciu prekryje aj naďalej — a má.
   Prečo nie vyšší z-index na navigácii: proti 1000 by sme len prihadzovali
   ďalšie číslo a rovnaký súboj by sa vrátil pri každej ďalšej knižnici. */
.wx-map-holder { border-radius: 12px; overflow: hidden; isolation: isolate; }
/* Mapa vypĺňa kartu od okraja po okraj. Bez toho mala vlastné zaoblenie vnútri
   zaoblenej karty a pôsobilo to ako rám v ráme; na domovskej stránke k tomu
   pribudol ešte rozbaľovací obal, teda tri rámy v sebe. */
.map-card { overflow: hidden; }
.map-card > .wx-map-holder { margin-inline: -18px; border-radius: 0; }
.map-card > .wx-map-holder > .svgmap { border-radius: 0; }
.map-card > .wx-note { margin: 12px 0 0; }
.wx-map-holder.live { height: clamp(420px, 55vh, 580px); }
/* na mobile mapa vyplní kartu od okraja po okraj a je vyššia */
@media (max-width: 640px) {
  .wx-map-holder.live { height: min(62vh, 520px); margin: 0 -12px -2px; border-radius: 0; }
}
/* celá obrazovka (natívne aj CSS fallback) */
.wx-map-holder.map-fs {
  position: fixed !important; inset: 0; z-index: 4000;
  height: 100dvh !important; width: 100vw; margin: 0 !important; border-radius: 0;
}
.wx-map-holder:fullscreen { height: 100% !important; width: 100%; margin: 0 !important; border-radius: 0; }
body.map-fs-open { overflow: hidden; }
.map-fs-ctl button { font-size: 15px; line-height: 1; padding: 6px 9px; }
.tmh {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 24px; padding: 0 6px; border-radius: 999px;
  color: #fff; font-weight: 700; font-size: 12.5px; font-family: system-ui, sans-serif;
  border: 2px solid #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35); cursor: pointer;
}
.tmh.tm-x { background: #8a9aa8; } .tmh.tm-0 { background: #5c6bc0; } .tmh.tm-1 { background: #339af0; }
.tmh.tm-2 { background: #37a24c; } .tmh.tm-3 { background: #f2a516; } .tmh.tm-4 { background: #ef6c00; } .tmh.tm-5 { background: #d32f2f; }
.leaflet-popup-content { font-family: system-ui, sans-serif; }

/* heatmapa: jemné popisky a legenda */
.tml {
  display: inline-block; width: 34px; text-align: center;
  font: 800 12.5px system-ui, sans-serif; color: #142433; cursor: pointer;
  text-shadow: 0 0 4px #fff, 0 0 3px #fff, 0 1px 2px #fff;
}
.heat-canvas { mix-blend-mode: multiply; }
.heat-legend {
  background: rgba(255, 255, 255, 0.88); border-radius: 8px; padding: 5px 9px 6px;
  font: 600 10px system-ui, sans-serif; color: #333; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.heat-legend i {
  display: block; width: 150px; height: 8px; border-radius: 4px; margin-bottom: 3px;
  background: linear-gradient(90deg, #5c6bc0, #339af0, #37a24c, #f2a516, #ef6c00, #d32f2f);
}
.heat-legend span { display: inline-block; width: 30px; }

/* ---------- mapa počasia (vlastné SVG) ---------- */
.svgmap {
  width: 100%; height: auto; display: block; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 14%, var(--bg));
}
.map-land { fill: color-mix(in srgb, var(--card) 72%, var(--line)); stroke: var(--muted); stroke-opacity: 0.4; stroke-width: 0.6; }
.mb { stroke: #fff; stroke-width: 1.4; }
.mb-t { fill: #fff; font: 700 12px system-ui, sans-serif; pointer-events: none; }
.md { stroke: #fff; stroke-width: 1; }
.svgmap a { cursor: pointer; }
.svgmap a:hover .mb, .svgmap a:hover .md { filter: brightness(1.15); }
.tm-x { fill: #8a9aa8; } .tm-0 { fill: #5c6bc0; } .tm-1 { fill: #339af0; }
.tm-2 { fill: #37a24c; } .tm-3 { fill: #f2a516; } .tm-4 { fill: #ef6c00; } .tm-5 { fill: #d32f2f; }

/* ---------- dlhodobá predpoveď ---------- */
.s-chart { width: 100%; height: auto; display: block; margin: 6px 0 0; }
.sg-band { fill: var(--accent); opacity: 0.16; }
.sg-norm { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-dasharray: 5 4; }
.sg-grid { stroke: var(--line); stroke-width: 0.7; }
details.card > summary h2, details.card > summary h3 { display: inline; }

/* ---------- radar ---------- */
.radar-frame { width: 100%; height: 420px; border: 0; border-radius: 12px; margin-top: 10px; }

/* ---------- počasie v okolí ---------- */
.nearby h2 { font-size: 1.02rem; margin: 20px 0 10px; }
.near-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
/* Obce v okolí: pri odľahlých regiónoch ich je aj 34 (každá obec musí byť
   uvedená na troch najbližších stránkach, inak ju Google neobjaví), takže
   inline odsek by bol stena textu. Mriežka to udrží prehľadné. */
.obce-mriezka { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 14px; }
.obce-mriezka li { font-size: .94rem; line-height: 1.5; }
.near-card {
  display: block; background: var(--card); border-radius: 13px; padding: 11px 13px;
  box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  transition: transform 0.12s ease;
}
.near-card:active { transform: scale(0.97); }
.near-card b { display: block; font-size: 0.86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.near-card .near-t { display: inline-block; font-size: 1.1rem; font-weight: 700; margin-top: 3px; }
.near-card .near-d { float: right; margin-top: 8px; font-size: 0.74rem; color: var(--muted); }

/* ---------- zhrnutie a FAQ ---------- */
.wx-summary, .wx-summary p { font-size: 0.88rem; color: var(--muted); margin: 0 0 12px; }
.faq h2 { font-size: 1.05rem; margin: 22px 0 8px; }
.faq-item h3 { font-size: 0.95rem; margin: 14px 0 2px; }
.faq-item p { font-size: 0.9rem; color: var(--muted); margin: 0; }

/* ---------- pätička ---------- */
.city-links h2, .about h2 { font-size: 1rem; margin: 20px 0 8px; }
.cl-more { margin: 12px 0 0; font-size: 0.9rem; }
.cl-more a { text-decoration: none; font-weight: 600; }

/* hub Európa */
.hub-title { font-size: 1.35rem; margin: 6px 0 4px; letter-spacing: -0.01em; }
.hub-group { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; margin: 0 0 12px; border: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.hub-group h2 { font-size: 0.98rem; margin: 0 0 8px; }
.hub-group ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 5px 12px; }
.hub-group a { text-decoration: none; font-size: 0.9rem; }
.hub-group a:hover { text-decoration: underline; }
.city-links ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 5px 12px; }
.city-links a { text-decoration: none; font-size: 0.88rem; }
.city-links a:hover { text-decoration: underline; }
.about p { font-size: 0.85rem; color: var(--muted); margin: 0 0 12px; }
.app-footer {
  background: linear-gradient(165deg, #14395c 0%, #0b2038 100%);
  color: #b9cfe2; margin-top: 36px;
  padding: 0 0 calc(26px + env(safe-area-inset-bottom));
  font-size: 0.85rem;
  /* jemný svetelný lem hore oddelí pätičku od obsahu bez tvrdej čiary */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.app-footer a { color: #9cc6e8; }
.app-footer .muted { color: #7e9ab3; }

/* ---------- pätička: značka ---------- */
.foot-brand { display: flex; align-items: flex-start; gap: 14px; padding: 22px 0 6px; }
.fb-mark { flex: 0 0 40px; height: 40px; display: grid; place-items: center; }
.fb-mark svg { width: 40px; height: 40px; fill: #ffd76b; stroke: #ffd76b; stroke-width: 3.4; stroke-linecap: round; }
.fb-name { margin: 2px 0 4px; font-size: 1.06rem; font-weight: 700; color: #f2f8ff; letter-spacing: -0.01em; }
.fb-claim { margin: 0; max-width: 56ch; color: #a9c3da; font-size: 0.87rem; line-height: 1.5; }
/* ---------- domovská stránka: Dnes na Slovensku + dlaždice ---------- */
.home-dnes { margin-top: 4px; }
.home-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 14px 0 6px; }
.tile {
  display: flex; flex-direction: column; gap: 3px; padding: 14px 16px;
  background: var(--card); border-radius: 16px; box-shadow: var(--shadow-sm);
  text-decoration: none; color: var(--ink); transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.tile:hover { transform: translateY(-2px); text-decoration: none; }
.tile b { font-size: 0.98rem; }
.tile .muted { font-size: 0.82rem; }
.tile-ico { font-size: 1.5rem; }
.tile-warn { box-shadow: inset 0 0 0 2px color-mix(in srgb, #e2a400 55%, transparent), var(--shadow-sm); }

/* ---------- klíma hub ---------- */
.kl-mesiace { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 8px; }
.kl-mesiac { background: var(--card); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow-sm); }
.kl-mesiac h3 { margin: 0 0 8px; font-size: 1.02rem; }
.kl-mesiac ul { margin: 0; padding: 0; list-style: none; }
.kl-mesiac li { padding: 3px 0; font-size: 0.92rem; }
.kl-teraz { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent), var(--shadow-sm); }
.kl-badge { font-size: 0.7rem; font-weight: 700; color: #fff; background: var(--accent); border-radius: 999px; padding: 2px 9px; vertical-align: middle; }
.kl-more td.more-ok { background: color-mix(in srgb, var(--accent) 14%, transparent); font-weight: 700; }
.kl-rizika { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; margin-bottom: 8px; }
.kl-riziko { background: var(--card); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow-sm); }
.kl-riziko h3 { margin: 0 0 6px; font-size: 1rem; }
.kl-riziko p { margin: 0; font-size: 0.92rem; color: var(--muted); }
.kl-tipy { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.kl-tip { display: flex; gap: 14px; background: var(--card); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow-sm); }
.kl-tip-n { flex: 0 0 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.kl-tip h3 { margin: 0 0 4px; font-size: 1rem; }
.kl-tip p { margin: 0; font-size: 0.92rem; color: var(--muted); }

/* Sociálne odkazy boli riadok textu oddelený bodkami — na mobile sa lámal
   uprostred názvov a nedalo sa doň poriadne trafiť prstom. Teraz sú to pilulky
   s vlastnou plochou; oddeľovače „·" sa skryjú, aby sa nemuselo meniť HTML. */
.foot-social { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; font-size: 0.86rem; color: #8fb0cb; align-items: center; }
.foot-social a {
  font-weight: 600; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
  text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.foot-social a:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(156, 198, 232, 0.5); text-decoration: none; transform: translateY(-1px); }
.fs-ico { width: 16px; height: 16px; fill: currentColor; flex: 0 0 auto; }
.brand-link { color: inherit; text-decoration: none; }
.brand-link:hover { text-decoration: none; opacity: 0.9; }
.fs-label { color: #8fb0cb; margin-right: 2px; }
.foot-bottom { color: #7e9ab3; font-size: 0.78rem; margin: 0; }

/* ---------- pätička: spodný pás so stavom ---------- */
.foot-meta {
  display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: space-between; align-items: baseline;
  margin-top: 22px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* kedy sa stránky zostavili — aby bolo na prvý pohľad vidieť, či obsah nezamrzol */
.foot-stav { margin: 0; color: #7e9ab3; font-size: 0.76rem; display: inline-flex; align-items: center; gap: 7px; cursor: help; }
.foot-stav code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; color: #9cc6e8; }
.fs-dot { width: 7px; height: 7px; border-radius: 50%; background: #5bc98a; box-shadow: 0 0 0 3px rgba(91, 201, 138, 0.18); flex: 0 0 auto; }
.foot-acc summary {
  cursor: pointer; font-weight: 700; color: #e6f0f8; padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12); list-style: none;
}
.foot-acc summary::-webkit-details-marker { display: none; }
.foot-acc summary::after { content: " ▸"; color: #7e9ab3; }
.foot-acc[open] summary::after { content: " ▾"; }
.app-footer .city-links a, .app-footer .about a { color: #9cc6e8; }
.app-footer .about p { color: #b9cfe2; }

/* ---------- stránka Nástroje ---------- */
.tools-title { font-size: 1.3rem; margin: 20px 0 4px; letter-spacing: -0.01em; }
.tools-p { font-size: 0.92rem; margin: 0 0 12px; }
.tools-label { display: block; font-size: 0.8rem; color: var(--muted); margin: 10px 0 4px; }
.tools-select {
  font-size: 0.95rem; padding: 9px 12px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); min-width: 200px;
}
.tools-preview { margin: 12px 0; }
.tools-code {
  width: 100%; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.78rem;
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); resize: none;
}
.tools-btn {
  display: inline-block; margin-top: 8px; padding: 9px 16px; font-size: 0.9rem; font-weight: 600; cursor: pointer;
  border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--hero1), var(--hero2));
  color: #fff; text-decoration: none; box-shadow: var(--shadow-sm);
}

/* nemé body na heatmape (lokality bez čísla, klikateľné) */
.tmd {
  display: block; width: 8px; height: 8px; margin: 2px auto; border-radius: 50%;
  background: rgba(255, 255, 255, 0.9); border: 1.5px solid rgba(20, 36, 51, 0.5); cursor: pointer;
}

/* prepínač režimu mapy */
.map-toggle {
  background: rgba(255, 255, 255, 0.92); border-radius: 10px; padding: 3px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); display: flex; gap: 2px;
}
.map-toggle button {
  border: 0; background: none; padding: 5px 11px; border-radius: 8px;
  font: 600 12px system-ui, sans-serif; color: #333; cursor: pointer;
}
.map-toggle button.active { background: #0f6ab4; color: #fff; }
.heat-legend span { width: 50px; }

/* ---------- vizuálne doladenie: mobilná hustota a mikrointerakcie ---------- */
@media (max-width: 640px) {
  .wrap { padding: 0 10px; }
  .card { padding: 14px 12px; border-radius: 14px; margin-bottom: 8px; }
  .map-card > .wx-map-holder { margin-inline: -12px; }
  .mn-row, .app-header .wrap { padding-left: 10px; padding-right: 10px; }
  .now-temp { font-size: 2.9rem; }
  .now-ico { font-size: 3.1rem; }
  .h-cell { flex-basis: 64px; }
  .now-meta { margin-top: 10px; gap: 6px; }
}
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.h-cell { scroll-snap-align: start; }
.pin-card { transition: transform 0.12s ease, box-shadow 0.15s ease; }
.pin-card:active { transform: scale(0.97); }
.near-card, .chips a, .mn-row a { transition: transform 0.12s ease; }
.mn-row a:active, .near-card:active { transform: scale(0.96); }

/* ---------- hlboká vizuálna revízia (júl 2026) ---------- */

/* hero sa prefarbuje podľa aktuálneho počasia a dennej doby */
.now-card.wx-sunny {
  background:
    radial-gradient(150% 170% at 85% -40%, rgba(255, 205, 66, 0.55) 0%, rgba(255, 205, 66, 0) 55%),
    linear-gradient(150deg, #2e8fd8 0%, #0b4c8d 100%);
}
.now-card.wx-cloudy {
  background:
    radial-gradient(140% 160% at 85% -40%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(150deg, #5d7fa0 0%, #2b4a68 100%);
}
.now-card.wx-rain {
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 14px),
    linear-gradient(150deg, #4d6f8f 0%, #223b52 100%);
}
.now-card.wx-storm {
  background:
    radial-gradient(130% 150% at 80% -30%, rgba(255, 220, 110, 0.18) 0%, rgba(255, 220, 110, 0) 45%),
    linear-gradient(150deg, #4d4d78 0%, #1c1c33 100%);
}
.now-card.wx-snow {
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, 0.8) 50%, transparent 51%),
    radial-gradient(2px 2px at 70% 15%, rgba(255, 255, 255, 0.7) 50%, transparent 51%),
    radial-gradient(2px 2px at 45% 60%, rgba(255, 255, 255, 0.6) 50%, transparent 51%),
    linear-gradient(150deg, #7ea6c8 0%, #3f6689 100%);
}
.now-card.wx-fog {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(150deg, #7b8ea0 0%, #46586a 100%);
}
.now-card.wx-night {
  background:
    radial-gradient(1.5px 1.5px at 18% 22%, rgba(255, 255, 255, 0.9) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 62% 12%, rgba(255, 255, 255, 0.7) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 84% 38%, rgba(255, 255, 255, 0.8) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 38% 45%, rgba(255, 255, 255, 0.5) 50%, transparent 51%),
    radial-gradient(120% 140% at 80% -30%, rgba(180, 200, 255, 0.14) 0%, transparent 50%),
    linear-gradient(150deg, #26315e 0%, #0a0f26 100%);
}

/* akcentová linka pod nadpismi kariet — vizuálna identita */
.card > h3, .card > h2, .alerts-card > h3, .alerts-card > h2 { position: relative; padding-bottom: 9px; }
.card > h3::after, .card > h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 30px; height: 3px;
  border-radius: 3px; background: linear-gradient(90deg, var(--hero1), var(--bar-warm));
}
.now-card .now-head h2::after { display: none; }
.card > h2 { margin: 0 0 12px; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }

/* FAQ ako akordeóny */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 0; }
.faq-item summary { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 11px 0; }
.faq-item summary h3 { margin: 0; font-size: 0.95rem; display: inline; }
.faq-item summary::after { flex: 0 0 auto; }
.faq-item p { font-size: 0.9rem; margin: 0 0 12px; color: var(--muted); }

/* výstrahy — kompaktné okresné pilulky */
.vys-count { font-size: 0.78rem; font-weight: 600; color: var(--muted); margin-left: 6px; }
.vys-meta { color: var(--muted); font-size: 0.8rem; margin: -2px 0 10px; }
.vys-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vys-chip {
  padding: 4px 11px; border-radius: 999px; font-size: 0.84rem; font-weight: 600; cursor: default;
}
.vys-chip.sev-yellow { background: color-mix(in srgb, #e0b400 16%, transparent); border: 1px solid color-mix(in srgb, #b89200 45%, transparent); }
.vys-chip.sev-orange { background: color-mix(in srgb, #e07b00 16%, transparent); border: 1px solid color-mix(in srgb, #e07b00 50%, transparent); }
.vys-chip.sev-red { background: color-mix(in srgb, #cf2b1e 16%, transparent); border: 1px solid color-mix(in srgb, #cf2b1e 50%, transparent); }

/* tabuľky sa na užších obrazovkách posúvajú, nie orezávajú */
.d-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }

/* hlavná navigácia sa na širších obrazovkách zalamuje namiesto orezania */
@media (min-width: 700px) { .mn-row { flex-wrap: wrap; row-gap: 6px; } }

/* čísla v tabuľkách a teplotách sa zarovnávajú */
.d-table, .now-temp, .h-temp, .pin-now, .d7, .rec-item b, .tmh, .tml { font-variant-numeric: tabular-nums; }

/* výraznejšie titulky sekcií */
.hub-title { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; margin: 8px 0 6px; }

/* ---------- drag & drop pripnutých miest ---------- */
.pins-hint { font-weight: 500; font-size: 0.74rem; color: var(--muted); margin-left: 8px; }
.pin-drag {
  position: absolute; top: 4px; left: 4px; border: 0; background: none;
  color: var(--muted); font-size: 0.95rem; line-height: 1; padding: 4px 5px;
  cursor: grab; touch-action: none;
}
.pin-drag:active { cursor: grabbing; }
.pin-card b { padding-left: 18px; }
.pin-card.dragging {
  opacity: 0.9; transform: scale(1.05); z-index: 10;
  box-shadow: 0 10px 30px rgba(15, 34, 51, 0.28); cursor: grabbing;
}

/* ---------- fluid layout: kompaktná hlavička, hustejší rytmus, širší desktop ---------- */
.app-header { padding: calc(12px + env(safe-area-inset-top)) 0 36px; }
.head-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; row-gap: 0; }
.app-header h1, .app-header .logo { font-size: 1.25rem; }
.app-header .muted { margin: 0; font-size: 0.78rem; }

/* navigácia sa prilepí hore a podfarbí, nech je vždy poruke ako v natívnej appke */
.main-nav { position: sticky; top: 0; z-index: 50; margin: -18px 0 8px; padding: 6px 0 2px; }
.main-nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transition: opacity 0.2s ease;
}
.main-nav.stuck::before { opacity: 1; box-shadow: 0 2px 12px rgba(15, 34, 51, 0.08); }

.search-box { margin: 0 0 8px; }
.search-box input { padding: 11px 15px; }
.chips { padding: 2px 2px 8px; gap: 6px; }
.card { margin-bottom: 10px; }
.pins { gap: 8px; margin: 0 0 10px; }
.pin-card { padding: 10px 12px; }
.pins-title { margin: 0 0 6px; }
.wx-note { margin: 6px 0 14px; }

/* desktop: obsah dýcha na väčšej šírke, husté gridy */
@media (min-width: 900px) {
  .wrap, .mn-row { max-width: 860px; }
  .pins { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
  .near-grid { grid-template-columns: repeat(3, 1fr); }
  .wx-map-holder.live { height: clamp(460px, 58vh, 620px); }
}

/* výraznejšia úchytka + dlhé podržanie celej karty */
.pin-card { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.pin-drag {
  top: 6px; left: 6px; font-size: 1.02rem; padding: 5px 7px; border-radius: 8px;
  background: color-mix(in srgb, var(--line) 50%, transparent); color: var(--muted);
}
.pin-card b { padding-left: 24px; }

/* výstrahy: ťuknutie na okres ukáže detail */
.vys-chip { cursor: pointer; font-family: inherit; }
.vys-chip.active { outline: 2px solid var(--accent); outline-offset: 1px; }
.vys-detail {
  margin: 10px 0 0; padding: 9px 12px; border-radius: 10px; font-size: 0.88rem;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-left: 3px solid var(--accent);
}

/* ---------- návody na vloženie widgetu ---------- */
.nav-kod { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px; font-size: 12px; white-space: pre-wrap; word-break: break-all; line-height: 1.5; }
.nav-kroky { padding-left: 22px; margin: 0; }
.nav-kroky li { margin: 8px 0; font-size: 0.93rem; }

/* ---------- per-pohorie stránky ---------- */
.crumbs { font-size: 0.82rem; color: var(--muted); margin-bottom: 4px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ---------- upozornenie na staré dáta (offline) ---------- */
.stale-note { background: #8a5a00; color: #fff; border-radius: 10px; padding: 10px 14px; font-size: 0.85rem; margin-bottom: 12px; }

/* ---------- hodinový pás bez scrollu (3 h intervaly) + graf po hodine ---------- */
.h-grid { display: flex; gap: 2px; }
.h-grid .h-cell { flex: 1 1 0; width: auto; min-width: 0; padding: 8px 2px; }
.h-grid .h-t { font-size: 0.7rem; white-space: nowrap; }
.h-grid .h-temp { font-size: 0.92rem; }
.h-grid .h-rain { font-size: 0.66rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 759px) {
  .h-grid .h-cell:nth-child(n+9) { display: none; } /* mobil: najbližších 24 h */
}
.c-grid { stroke: color-mix(in srgb, var(--muted) 22%, transparent); stroke-width: 1; }
.c-mid { stroke: color-mix(in srgb, var(--muted) 30%, transparent); stroke-width: 1; stroke-dasharray: 3 4; }
.c-gl { font-size: 9px; fill: var(--muted); }
.obce-dyn { font-size: 0.88rem; line-height: 1.9; color: var(--muted); }
.obce-dyn a { white-space: nowrap; }

/* lišta súhlasu s meraním — fixed, aby nespôsobovala posun obsahu (CLS = 0) */
.suhlas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -8px 28px rgba(8, 20, 34, .18); animation: suhlas-in .22s ease-out; }
@keyframes suhlas-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
.suhlas-in { max-width: 860px; margin: 0 auto; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.suhlas p { margin: 0; flex: 1 1 320px; font-size: .92rem; line-height: 1.45; color: var(--ink); }
.suhlas a { color: var(--accent); }
.suhlas-btn { display: flex; gap: 8px; flex: 0 0 auto; }
.suhlas-btn button { font: inherit; font-weight: 700; font-size: .92rem; padding: 10px 18px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }
.suhlas-btn button[data-v="ano"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.suhlas-btn button:hover { filter: brightness(1.08); }
.suhlas-btn button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 520px) { .suhlas-btn { flex: 1 1 100%; } .suhlas-btn button { flex: 1; } }

/* newsletter: bočná záložka namiesto vyskakovacieho okna */
.nl-zalozka { position: fixed; right: 0; bottom: 22%; z-index: 880; display: flex; align-items: flex-start; }
.nl-tab { display: flex; align-items: center; gap: 7px; font: inherit; font-size: .86rem; font-weight: 700; color: #fff;
  background: var(--accent); border: 0; border-radius: 12px 0 0 12px; padding: 11px 12px 11px 13px; cursor: pointer;
  box-shadow: 0 4px 18px rgba(8, 20, 34, .25); }
.nl-tab:hover { filter: brightness(1.08); }
.nl-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.nl-ico { font-size: 1.05rem; line-height: 1; }
.nl-panel { position: absolute; right: 0; bottom: 0; width: min(330px, calc(100vw - 24px));
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 18px 16px;
  box-shadow: 0 10px 34px rgba(8, 20, 34, .28); transform: translateX(calc(100% + 24px)); opacity: 0;
  pointer-events: none; transition: transform .24s ease, opacity .18s ease; }
.nl-otv .nl-panel { transform: translateX(0); opacity: 1; pointer-events: auto; }
.nl-otv .nl-tab { opacity: 0; pointer-events: none; }
.nl-panel h2 { margin: 0 0 6px; font-size: 1.02rem; }
.nl-panel p { margin: 0 0 12px; font-size: .88rem; line-height: 1.45; color: var(--muted); }
.nl-zavri { position: absolute; top: 6px; right: 8px; font: inherit; font-size: 1.3rem; line-height: 1;
  background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px 8px; }
.nl-zavri:hover { color: var(--ink); }
@media (max-width: 520px) { .nl-zalozka { bottom: 16%; } .nl-tab .nl-txt { display: none; } }
@media (prefers-reduced-motion: reduce) { .nl-panel { transition: none; } }

/* Nadpis domovskej stránky. Značka v hlavičke prestala byť H1 (patrí obsahu),
   takže stránka potrebuje vlastný nadpis — držaný nízko, aby neodtláčal kartu
   s počasím pod ohyb obrazovky. */
.home-h1 { font-size: 1.15rem; font-weight: 700; margin: 0 0 10px; letter-spacing: -.01em; }
@media (min-width: 700px) { .home-h1 { font-size: 1.35rem; } }