/* ═══════════════════════════════════════════════════════════════════
   Počasie Vranov nad Topľou — GARNI 2040 Arcus
   Dizajn: tmavomodrá meteorologická téma so sklenenými panelmi.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Premenné ── */
:root {
  --accent: #53b7ff;
  --accent-2: #8fd0ff;
  --good: #4ade80;
  --warn: #fbbf24;
  --bad: #f87171;
  --violet: #a78bfa;

  --bg-0: #081120;
  --bg-1: #0a1628;
  --bg-2: #10203c;
  --panel: rgba(255, 255, 255, 0.055);
  --panel-strong: rgba(13, 27, 51, 0.72);
  --panel-border: rgba(255, 255, 255, 0.09);
  --panel-hover: rgba(255, 255, 255, 0.085);
  --text: #eaf1ff;
  --text-soft: #c3d0e8;
  --muted: #8fa1c2;
  --hairline: rgba(255, 255, 255, 0.08);
  --shadow: 0 18px 44px rgba(2, 8, 20, 0.45);
  --shadow-soft: 0 8px 24px rgba(2, 8, 20, 0.3);
  --radius: 18px;
  --radius-sm: 12px;
  --header-h: 66px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
}

html[data-theme="light"] {
  --bg-0: #e8effa;
  --bg-1: #eef3fb;
  --bg-2: #dfe9f8;
  --panel: rgba(255, 255, 255, 0.78);
  --panel-strong: rgba(255, 255, 255, 0.92);
  --panel-border: rgba(30, 58, 110, 0.1);
  --panel-hover: rgba(255, 255, 255, 1);
  --text: #13223f;
  --text-soft: #33456b;
  --muted: #5a6c8f;
  --hairline: rgba(30, 58, 110, 0.1);
  --shadow: 0 18px 40px rgba(35, 60, 110, 0.14);
  --shadow-soft: 0 8px 20px rgba(35, 60, 110, 0.1);
  --accent: #1d7fe0;
  --accent-2: #56a8f0;
}

/* Akcent podľa aktuálneho počasia */
body[data-condition="clear"]      { --cond: #ffd166; }
body[data-condition="partly"]     { --cond: #8ec9ff; }
body[data-condition="cloudy"]     { --cond: #9fb3d1; }
body[data-condition="overcast"]   { --cond: #8b9bb8; }
body[data-condition="rain"]       { --cond: #4da3ff; }
body[data-condition="rain-heavy"] { --cond: #3d84f0; }
body[data-condition="snow"]       { --cond: #b9e0ff; }
body[data-condition="sleet"]      { --cond: #7fd0d8; }
body[data-condition="night"]      { --cond: #93a2ff; }
body[data-condition="fog"]        { --cond: #a9b6c9; }
body { --cond: var(--cond, var(--accent)); }

/* ── Základ ── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(1100px 700px at 12% -8%, color-mix(in srgb, var(--cond) 16%, transparent), transparent 62%),
    radial-gradient(900px 600px at 108% 4%, rgba(83, 183, 255, 0.14), transparent 60%),
    linear-gradient(178deg, var(--bg-1) 0%, var(--bg-0) 55%, var(--bg-2) 130%);
  background-attachment: fixed;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .3s ease, color .3s ease;
}

#fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

main, .site-header, .site-footer, .status-banners { position: relative; z-index: 1; }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 650; letter-spacing: -0.01em; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--text); }

.wrap { width: min(1200px, 100% - 2.4rem); margin-inline: auto; }

.ic {
  width: 1.15em; height: 1.15em;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  flex: none;
}
.ic-lg { width: 2.6rem; height: 2.6rem; stroke-width: 1.4; }

.muted { color: var(--muted); }
.small { font-size: .84rem; }

/* ── Hlavička ── */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg-1);
  border-bottom: 1px solid var(--hairline);
}
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .site-header {
    background: color-mix(in srgb, var(--bg-1) 78%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}
.header-inner {
  display: flex; align-items: center; gap: 1.2rem;
  min-height: var(--header-h);
}
.brand {
  display: flex; align-items: center; gap: .7rem;
  color: var(--text); text-decoration: none; min-width: 0;
}
.brand:hover { text-decoration: none; }
.brand-icon {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 8%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--accent-2);
}
.brand-icon .ic { width: 22px; height: 22px; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-text strong { font-size: 1.02rem; letter-spacing: -0.01em; white-space: nowrap; }
.brand-text small { color: var(--muted); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.main-nav { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.nav-link {
  position: relative; padding: .5rem .78rem;
  color: var(--text-soft); font-size: .92rem; font-weight: 550;
  border-radius: 10px; text-decoration: none; white-space: nowrap;
  transition: color .15s ease, background-color .15s ease;
}
.nav-link:hover { color: var(--text); background: var(--panel); text-decoration: none; }
.nav-link.is-active { color: var(--text); }
.nav-link.is-active::after {
  content: ""; position: absolute; left: .78rem; right: .78rem; bottom: .18rem;
  height: 2px; border-radius: 2px; background: var(--accent);
}
.lbl-short { display: none; }

.icon-btn {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px; cursor: pointer;
  background: var(--panel); color: var(--text-soft);
  border: 1px solid var(--panel-border);
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.icon-btn:hover { background: var(--panel-hover); color: var(--text); transform: translateY(-1px); }
.icon-btn .ic { width: 20px; height: 20px; }

/* prepínač témy: v tmavom režime svieti slnko, v svetlom mesiac */
#themeToggle .ic-sun { display: none; }
html[data-theme="light"] #themeToggle .ic-sun { display: block; }
html[data-theme="light"] #themeToggle .ic-moon { display: none; }

/* ── Bannery (DEMO / zastarané / offline) ── */
.status-banners { display: flex; flex-direction: column; }
.banner {
  display: flex; align-items: center; gap: .6rem;
  padding: .62rem clamp(1.2rem, 4vw, 2.4rem);
  font-size: .9rem; font-weight: 550;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.banner .ic { width: 18px; height: 18px; }
.banner-demo { background: linear-gradient(90deg, #8a5a00, #b97c12); color: #fff7e6; }
.banner-warn { background: linear-gradient(90deg, #7a4d00, #a8700a); color: #fff7e6; }
.banner-err  { background: linear-gradient(90deg, #7f1d1d, #b91c1c); color: #ffecec; }
.banner-ok   { background: linear-gradient(90deg, #14532d, #166534); color: #ecfdf5; }
.banner-text { flex: 1; }
.banner-close {
  background: rgba(255,255,255,.14); color: inherit; border: 0;
  border-radius: 8px; padding: .15rem .5rem; cursor: pointer; font-size: .95rem;
}
.banner-close:hover { background: rgba(255,255,255,.25); }

/* ── Sekcie ── */
.section { padding: clamp(1.2rem, 2.5vw, 1.8rem) 0 0; scroll-margin-top: calc(var(--header-h) + 10px); }
.section:last-of-type { padding-bottom: 1.6rem; }

.section-head { margin-bottom: .8rem; }
.section-head h2 { font-size: clamp(1.2rem, 2vw, 1.4rem); }
.section-sub { color: var(--muted); max-width: 62ch; margin: .2rem 0 0; font-size: .95rem; }
.section-sub strong { color: var(--text-soft); }

.panel {
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 96%, rgba(255,255,255,.05)) 0%, var(--panel) 100%);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ── Hero ── */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: .7rem;
  margin-top: .6rem;
}
.hero-main { padding: clamp(.9rem, 1.8vw, 1.3rem); }
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--muted); font-size: .86rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.eyebrow .ic { width: 16px; height: 16px; }

.hero-now { display: flex; align-items: center; gap: clamp(.7rem, 1.8vw, 1.2rem); margin: .6rem 0 .5rem; flex-wrap: wrap; }
.hero-icon {
  display: grid; place-items: center;
  width: clamp(72px, 9vw, 96px); height: clamp(72px, 9vw, 96px);
  border-radius: 20px;
  color: var(--cond);
  background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--cond) 26%, transparent), color-mix(in srgb, var(--cond) 6%, transparent) 70%);
  border: 1px solid color-mix(in srgb, var(--cond) 30%, transparent);
  box-shadow: 0 12px 34px color-mix(in srgb, var(--cond) 18%, transparent);
}
.hero-icon .ic { width: 58%; height: 58%; stroke-width: 1.4; }
.hero-temp-line { display: flex; align-items: flex-start; gap: .35rem; }
.hero-temp-value {
  font-family: var(--font-num);
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 250; line-height: .95; letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  text-shadow: 0 0 34px color-mix(in srgb, var(--cond) 40%, transparent);
}
.hero-temp-unit { font-size: clamp(1.3rem, 3vw, 2rem); color: var(--muted); font-weight: 400; margin-top: .45em; }
.hero-cond { color: var(--text-soft); font-size: clamp(1rem, 2vw, 1.2rem); font-weight: 600; margin-top: .2rem; }

.hero-meta { display: flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: center; color: var(--text-soft); font-size: .93rem; }
.meta-item { display: inline-flex; align-items: center; gap: .35rem; }
.meta-item .ic { width: 15px; height: 15px; color: var(--muted); }
.meta-dot { color: var(--muted); }
.live-clock { font-variant-numeric: tabular-nums; }

.hero-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .6rem; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .38rem .72rem; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--panel-border);
  font-size: .86rem; color: var(--text-soft);
}
.chip .ic { width: 15px; height: 15px; color: var(--muted); }
.chip strong { color: var(--text); font-variant-numeric: tabular-nums; }

.hero-side { padding: 1rem 1.15rem; display: flex; flex-direction: column; gap: .55rem; }
.side-title { display: flex; align-items: center; gap: .5rem; font-size: 1rem; margin: 0; }
.side-title .ic { width: 18px; height: 18px; color: var(--accent); }
.station-status { display: flex; flex-direction: column; gap: .45rem; }
.status-row { display: flex; align-items: center; gap: .55rem; font-size: .95rem; }
.status-row.small { color: var(--muted); font-size: .86rem; justify-content: space-between; }
.status-row.small strong { color: var(--text-soft); font-weight: 600; font-variant-numeric: tabular-nums; }
.status-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--muted); flex: none; }
.status-dot[data-state="ok"]   { background: var(--good); box-shadow: 0 0 0 0 rgba(74,222,128,.5); animation: pulse 2.2s infinite; }
.status-dot[data-state="stale"]{ background: var(--warn); animation: pulse 1.6s infinite; }
.status-dot[data-state="off"]  { background: var(--bad); }
.status-dot[data-state="demo"] { background: var(--warn); }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); }
  70% { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.side-link { margin-top: auto; font-size: .9rem; font-weight: 600; }

/* ── Odznaky ── */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem .72rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.badge-live { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); border: 1px solid color-mix(in srgb, var(--good) 40%, transparent); }
.badge-live.is-demo { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.badge-forecast { background: color-mix(in srgb, var(--violet) 16%, transparent); color: var(--violet); border: 1px solid color-mix(in srgb, var(--violet) 40%, transparent); margin-top: .5rem; }

/* ── Karty s meraniami ── */
.cards-grid {
  display: grid; gap: .65rem;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  margin-top: .7rem;
}
.card {
  padding: .8rem .9rem;
  border-radius: var(--radius-sm);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-2px); background: var(--panel-hover); border-color: color-mix(in srgb, var(--accent) 28%, var(--panel-border)); }
.card-top { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.card-top .ic { width: 17px; height: 17px; color: var(--cond); }
.card-label { color: var(--muted); font-size: .8rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.card-value {
  display: flex; align-items: baseline; gap: .3rem;
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: clamp(1.35rem, 2.2vw, 1.6rem); font-weight: 550; letter-spacing: -0.02em;
}
.card-value .u { font-size: .85rem; color: var(--muted); font-weight: 500; }
.card-value-time { font-size: 1.25rem; }
.card-sub { color: var(--muted); font-size: .8rem; margin-top: .15rem; }
.card.na .card-value .v { color: var(--muted); }
.card.na .card-sub { font-style: italic; }

.wind-sub { display: flex; align-items: center; gap: .35rem; }
.wind-arrow {
  display: inline-block; font-size: 1rem; line-height: 1;
  color: var(--accent); transition: transform .5s ease;
}

/* ── Grafy ── */
.charts-grid {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.chart-card { padding: .85rem .95rem .95rem; }
.chart-card-wide { grid-column: 1 / -1; }
.chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.chart-head h3 { font-size: 1rem; margin: 0; color: var(--text-soft); }
.chart-unit { color: var(--muted); font-weight: 500; font-size: .85rem; }
.chart-stats { display: flex; gap: .8rem; flex-wrap: wrap; color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; }
.chart-stats b { color: var(--text-soft); font-weight: 650; }
.chart-box { position: relative; height: 210px; }
.chart-card-wide .chart-box { height: 195px; }
.chart-box canvas { width: 100% !important; height: 100% !important; }

/* ── Podrobná predpoveď ── */
.detail-panel { padding: .85rem .95rem .9rem; }
.detail-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap; margin-bottom: .5rem;
}
.detail-head h3 { margin: 0; font-size: 1rem; color: var(--text-soft); }
.detail-canvas { position: relative; width: 100%; height: 300px; }
.detail-canvas canvas { width: 100% !important; height: 100% !important; }
.detail-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.detail-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-top: .5rem;
}
.detail-legend {
  display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
  color: var(--muted); font-size: .82rem;
}
.detail-legend-item { display: inline-flex; align-items: center; gap: .4rem; }
.detail-swatch {
  width: 16px; height: 11px; border-radius: 3px; display: inline-block;
  border: 1px solid transparent;
}
.detail-swatch-conv {
  background: repeating-linear-gradient(45deg, #7fb2ef, #7fb2ef 2px, rgba(127,178,239,.35) 2px, rgba(127,178,239,.35) 4px);
  border-color: #5b9be6;
}
.detail-swatch-rain { background: #2f7fe0; border-color: #2f7fe0; }

/* ── Podrobná predpoveď: na mobile scroll do strany ── */
@media (max-width: 760px) {
  .detail-panel { overflow-x: auto; padding: .6rem .7rem; }
  .detail-head, .detail-foot { min-width: 480px; }
  .detail-canvas { height: 300px; min-width: 480px; }
  .detail-head h3 { font-size: .85rem; }
  .detail-head span { font-size: .75rem !important; }
  .detail-legend { gap: .6rem; font-size: .72rem; }
  .detail-foot { gap: .5rem; font-size: .75rem; }
}

/* ── Úzky mobil: ešte kompaktnejšie ── */
@media (max-width: 460px) {
  .detail-canvas { height: 260px; }
}

.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .52rem 1rem; border-radius: 12px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--panel-border); color: var(--text);
  font-family: inherit; font-size: .9rem; font-weight: 600;
  transition: all .15s ease;
}
.btn:hover { background: var(--panel-hover); transform: translateY(-1px); }
.btn-primary { background: color-mix(in srgb, var(--accent) 26%, transparent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.btn .ic { width: 16px; height: 16px; }
.btn:disabled { opacity: .5; cursor: default; transform: none; }

.hist-totals { display: flex; gap: .5rem; flex-wrap: wrap; margin: .6rem 0 .7rem; }
.hist-totals .chip { font-size: .87rem; }

.table-scroll { max-height: 320px; overflow: auto; border-radius: 10px; border: 1px solid var(--hairline); }
.data-table { width: 100%; border-collapse: collapse; font-size: .86rem; font-variant-numeric: tabular-nums; }
.data-table th, .data-table td { white-space: nowrap; }
.data-table th {
  position: sticky; top: 0; z-index: 1;
  background: var(--panel-strong); backdrop-filter: blur(8px);
  color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em;
  text-align: right; padding: .5rem .7rem; border-bottom: 1px solid var(--hairline);
}
.data-table th:first-child { text-align: left; }
.data-table td { padding: .42rem .7rem; text-align: right; border-bottom: 1px solid var(--hairline); color: var(--text-soft); }
.data-table td:first-child { text-align: left; color: var(--muted); }
.data-table tbody tr:hover { background: var(--panel); }
.data-table tbody tr:last-child td { border-bottom: 0; }

/* ── Predpoveď ── */
.fc-now {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .9rem 1.1rem; margin-top: .6rem;
}
.fc-now-loading { color: var(--muted); padding: .4rem 0; }
.fc-now-icon {
  display: grid; place-items: center; width: 72px; height: 72px; border-radius: 18px;
  color: var(--violet);
  background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--violet) 24%, transparent), transparent 70%);
  border: 1px solid color-mix(in srgb, var(--violet) 35%, transparent);
}
.fc-now-icon .ic { width: 40px; height: 40px; }
.fc-now-icon .ic[data-tone="sun"],
.fc-hour .ic[data-tone="sun"],
.fc-day .ic[data-tone="sun"] { color: #facc15; }
.fc-now-icon .ic[data-tone="moon"],
.fc-hour .ic[data-tone="moon"],
.fc-day .ic[data-tone="moon"] { color: #c4b5fd; }
.fc-now-temp { font-family: var(--font-num); font-size: 2.1rem; font-weight: 300; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.fc-now-desc { color: var(--text-soft); font-weight: 600; }
.fc-now-meta { display: flex; gap: .45rem 1rem; flex-wrap: wrap; color: var(--muted); font-size: .9rem; margin-top: .3rem; }
.fc-now-meta b { color: var(--text-soft); }

.fc-subtitle { margin: 1rem 0 .5rem; font-size: 1rem; color: var(--text-soft); }

.fc-hourly {
  display: flex; gap: .5rem; overflow-x: auto; padding: .25rem .15rem .6rem;
  scroll-snap-type: x proximity;
}
.fc-hourly::-webkit-scrollbar { height: 8px; }
.fc-hourly::-webkit-scrollbar-thumb { background: var(--panel-border); border-radius: 8px; }
.fc-hour {
  flex: 0 0 auto; width: 92px; padding: .7rem .5rem;
  border-radius: var(--radius-sm); text-align: center;
  background: var(--panel); border: 1px solid var(--panel-border);
  scroll-snap-align: start;
}
.fc-hour-time { font-size: .78rem; color: var(--muted); }
.fc-hour .ic { width: 26px; height: 26px; margin: .35rem auto .2rem; display: block; color: var(--accent-2); }
.fc-hour-temp { font-weight: 650; font-variant-numeric: tabular-nums; }
.fc-hour-sub { font-size: .72rem; color: var(--muted); margin-top: .2rem; line-height: 1.35; }

.fc-daily {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(180deg, #164e63 0%, #0e3a4a 60%, #0b3240 100%);
  border: 1px solid var(--panel-border);
}
.fc-strip-col {
  text-align: center; padding: .7rem .3rem .8rem;
  border-left: 1px solid rgba(255,255,255,.06);
}
.fc-strip-col:first-child { border-left: 0; }
.fc-strip-day { color: #38bdf8; font-weight: 600; font-size: .92rem; margin-bottom: .35rem; }
.fc-strip-icon { width: 58px; height: 48px; display: block; margin: 0 auto .3rem; }
.fc-strip-max { color: #fff; font-weight: 700; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.fc-strip-min { color: rgba(255,255,255,.75); font-size: 1.02rem; margin-top: .05rem; font-variant-numeric: tabular-nums; }
.fc-strip-prob { color: #fff; font-weight: 700; font-size: 1.05rem; margin-top: .3rem; font-variant-numeric: tabular-nums; }
.fc-day {
  display: grid; grid-template-columns: minmax(120px, 1.2fr) 44px minmax(140px, 2fr) auto;
  gap: .8rem; align-items: center;
  padding: .6rem .95rem; border-radius: var(--radius-sm);
  background: var(--panel); border: 1px solid var(--panel-border);
}
.fc-day-name { font-weight: 650; }
.fc-day-name small { display: block; color: var(--muted); font-weight: 500; }
.fc-day .ic { width: 26px; height: 26px; color: var(--accent-2); }
.fc-day-desc { color: var(--text-soft); font-size: .9rem; }
.fc-day-desc small { display: block; color: var(--muted); }
.fc-day-temps { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.fc-day-temps .tmax { font-weight: 700; }
.fc-day-temps .tmin { color: var(--muted); margin-left: .35rem; }

/* ── O stanici ── */
.about-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: .7rem; margin-top: .6rem; }
.about-photo { padding: .85rem; display: flex; flex-direction: column; gap: .6rem; }
.photo-frame {
  position: relative; border-radius: var(--radius-sm); overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--panel-strong);
  border: 1px dashed color-mix(in srgb, var(--accent) 35%, var(--panel-border));
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
  text-align: center; color: var(--muted); padding: 1rem;
}
.photo-placeholder p { margin: 0; }
.photo-placeholder code { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 6px; padding: .1rem .4rem; font-size: .82rem; }
.photo-caption { font-size: .9rem; color: var(--text-soft); }

.about-info { display: flex; flex-direction: column; gap: .7rem; }
.about-card { padding: .9rem 1.05rem; }
.about-card h3 { display: flex; align-items: center; gap: .5rem; font-size: 1.02rem; }
.about-card h3 .ic { width: 19px; height: 19px; color: var(--accent); }
.about-card p { margin: .3rem 0 .6rem; color: var(--text-soft); font-size: .93rem; }

.spec-list { list-style: none; margin: .4rem 0 .8rem; padding: 0; }
.spec-list li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .38rem 0; border-bottom: 1px solid var(--hairline); font-size: .9rem; color: var(--text-soft);
}
.spec-list li:last-child { border-bottom: 0; }
.spec-ok { color: var(--good); font-weight: 650; font-size: .82rem; white-space: nowrap; }
.spec-na { color: var(--warn); font-weight: 650; font-size: .82rem; white-space: nowrap; }

.status-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .5rem; margin-top: .5rem; }
.status-grid .sg-item {
  padding: .55rem .8rem; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--panel-border);
  font-size: .84rem; color: var(--muted);
}
.status-grid .sg-item b { display: block; color: var(--text-soft); font-size: .95rem; font-variant-numeric: tabular-nums; }

/* ── Pätička ── */
.site-footer { border-top: 1px solid var(--hairline); margin-top: 1.6rem; background: color-mix(in srgb, var(--bg-1) 65%, transparent); }
.footer-inner { padding: 1.1rem 0 1.4rem; display: flex; flex-direction: column; gap: .6rem; }
.footer-title { font-weight: 700; margin: 0; font-size: 1rem; }
.footer-main p { margin: .2rem 0 0; }
.footer-nav { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.footer-nav a { color: var(--text-soft); font-size: .9rem; }
.footer-note { margin: 0; }

.noscript {
  position: fixed; inset: auto 1rem 1rem 1rem; z-index: 100;
  background: var(--bad); color: #fff; padding: .8rem 1rem; border-radius: 12px;
  text-align: center; font-weight: 600;
}

/* ── Responzívne ── */
@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; }
  .hero-side { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .hero-side .station-status { flex: 1 1 100%; }
  .about-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  /* navigácia natrvalo viditeľná: len riadok dlaždíc (bez názvu stránky), téma na konci */
  .header-inner { flex-wrap: wrap; row-gap: 0; padding-bottom: .5rem; min-height: 54px; }
  .brand { display: none; }
  .main-nav .icon-btn { width: 36px; height: 36px; border-radius: 10px; }
  .main-nav .icon-btn .ic { width: 18px; height: 18px; }
  .main-nav {
    order: 3; flex: 1 0 100%; margin: 0;
    flex-wrap: wrap; gap: .3rem .35rem;
  }
  .nav-link {
    padding: .4rem .52rem; font-size: .82rem;
    border: 1px solid transparent; border-radius: 8px;
  }
  .nav-link.is-active { background: var(--panel); border-color: var(--panel-border); }
  .nav-link.is-active::after { display: none; }
  .lbl-long { display: none; }
  .lbl-short { display: inline; }
  .brand-text small { display: none; }
  .section { scroll-margin-top: calc(var(--header-h) + 34px); }
}

@media (max-width: 760px) {
  /* ── Kompaktné sekcie na mobile ── */
  .section { padding-top: 1.4rem; }
  .section:last-of-type { padding-bottom: 1.6rem; }
  .section-head { margin-bottom: .7rem; }
  .section-head h2 { font-size: 1.2rem; }

  /* ── Hero bez zbytočných medzier ── */
  .hero { margin-top: .6rem; gap: .6rem; }
  .hero-main { padding: .9rem 1rem; }
  .hero-now { margin: .6rem 0 .5rem; gap: .8rem; }
  .hero-icon { width: 64px; height: 64px; border-radius: 16px; }
  .hero-temp-value { font-size: 2.9rem; }
  .hero-temp-unit { font-size: 1.1rem; }
  .hero-cond { font-size: .95rem; margin-top: .1rem; }
  .hero-chips { margin-top: .7rem; gap: .4rem; }
  .chip { padding: .3rem .6rem; font-size: .8rem; }
  .hero-side { padding: .85rem 1rem; gap: .5rem; }
  .hero-meta { font-size: .85rem; }

  /* ── Karty meraní: 2 vedľa seba, menšie ── */
  .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin-top: .7rem; }
  .card { padding: .65rem .75rem; }
  .card-top { margin-bottom: .25rem; }
  .card-value { font-size: 1.3rem; }

  .charts-grid { grid-template-columns: 1fr; gap: .6rem; }
  .chart-card { padding: .75rem .85rem .85rem; }
  .chart-box { height: 200px; }

  /* ── Predpoveď: kompaktný 7-stĺpcový pás BEZ scrollu ── */
  .fc-now { gap: .9rem; padding: .9rem 1rem; margin-top: .6rem; }
  .fc-now-icon { width: 56px; height: 56px; border-radius: 14px; }
  .fc-now-icon .ic { width: 32px; height: 32px; }
  .fc-now-temp { font-size: 2rem; }
  .fc-subtitle { margin: 1rem 0 .5rem; font-size: .95rem; }
  .fc-hour { width: 78px; padding: .55rem .4rem; }
  .fc-hourly { gap: .45rem; padding-bottom: .5rem; }
  .fc-daily { grid-template-columns: repeat(7, minmax(0, 1fr)); overflow-x: visible; }
  .fc-strip-col { padding: .6rem .15rem .7rem; }
  .fc-strip-day { font-size: .78rem; margin-bottom: .3rem; }
  .fc-strip-icon { width: 40px; height: 34px; }
  .fc-strip-max { font-size: 1.02rem; }
  .fc-strip-min { font-size: .9rem; }
  .fc-strip-prob { font-size: .88rem; margin-top: .25rem; }
  .fc-day { grid-template-columns: minmax(96px, 1fr) 34px auto; gap: .6rem; padding: .55rem .7rem; }
  .fc-day-desc { display: none; }
  .fc-day .ic { width: 22px; height: 22px; }

  /* ── Ovzdušie / ostatné kompaktnejšie ── */
  .hist-totals { margin: .6rem 0 .7rem; }
  .aq-hero { padding: .9rem 1rem; gap: 1rem; }
  .aq-value { font-size: 2.2rem; }
  .about-card { padding: .9rem 1rem; }

  /* ── Päta kompaktnejšie ── */
  .site-footer { margin-top: 1.6rem; }
  .footer-inner { padding: 1.1rem 0 1.4rem; gap: .6rem; }
}

@media (max-width: 460px) {
  .wrap { width: calc(100% - 1.6rem); }
  .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .hero-temp-value { font-size: 2.7rem; }
  .hero-icon { width: 60px; height: 60px; }
  .hero-side { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .hero-side .station-status { flex: 0 0 auto; }
  /* 7-dňový pás aj na úzkom mobile bez scrollu */
  .fc-strip-col { padding: .5rem .05rem .6rem; }
  .fc-strip-day { font-size: .68rem; white-space: nowrap; overflow: hidden; }
  .fc-strip-icon { width: 34px; height: 30px; }
  .fc-strip-max { font-size: .95rem; }
  .fc-strip-min { font-size: .82rem; }
  .fc-strip-prob { font-size: .8rem; }
}

/* ── Prístupnosť ── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
  #fx { display: none; }
}

/* ── Kvalita ovzdušia ── */
.aq-hero {
  --band: var(--accent);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .9rem 1.1rem; margin-top: .6rem;
}
.aq-hero-icon {
  display: grid; place-items: center; width: 72px; height: 72px; border-radius: 18px;
  color: var(--band);
  background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--band) 24%, transparent), transparent 70%);
  border: 1px solid color-mix(in srgb, var(--band) 35%, transparent);
}
.aq-hero-icon .ic { width: 38px; height: 38px; }
.aq-main { min-width: 0; flex: 1 1 260px; }
.aq-value {
  font-family: var(--font-num); font-size: 2.4rem; font-weight: 300; line-height: 1.05;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--text);
  text-shadow: 0 0 34px color-mix(in srgb, var(--band) 45%, transparent);
}
.aq-value small { font-size: .95rem; color: var(--muted); margin-left: .5rem; font-weight: 500; letter-spacing: 0; }
.aq-cat {
  display: inline-flex; align-items: center; margin-top: .35rem; padding: .26rem .7rem;
  border-radius: 999px; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: color-mix(in srgb, var(--band) 18%, transparent);
  color: color-mix(in srgb, var(--band) 78%, var(--text));
  border: 1px solid color-mix(in srgb, var(--band) 45%, transparent);
}
.aq-advice { color: var(--text-soft); font-size: .95rem; margin: .5rem 0 0; max-width: 62ch; }
.aq-meta { display: flex; gap: .35rem 1.2rem; flex-wrap: wrap; color: var(--muted); font-size: .9rem; margin-top: .4rem; }
.aq-meta b { color: var(--text-soft); }

:is(.aq-hero, .aq-day)[data-band="1"] { --band: var(--good); }
:is(.aq-hero, .aq-day)[data-band="2"] { --band: #a3e635; }
:is(.aq-hero, .aq-day)[data-band="3"] { --band: var(--warn); }
:is(.aq-hero, .aq-day)[data-band="4"] { --band: #fb923c; }
:is(.aq-hero, .aq-day)[data-band="5"] { --band: var(--bad); }
:is(.aq-hero, .aq-day)[data-band="6"] { --band: var(--violet); }

.aq-days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
.aq-day {
  --band: var(--accent);
  padding: .6rem .75rem; border-radius: var(--radius-sm);
  background: var(--panel); border: 1px solid var(--panel-border);
}
.aq-day-name { font-weight: 650; font-size: .9rem; }
.aq-day-name small { display: block; color: var(--muted); font-weight: 500; font-size: .78rem; }
.aq-day-max { font-family: var(--font-num); font-size: 1.7rem; font-weight: 500; color: var(--band); font-variant-numeric: tabular-nums; margin-top: .25rem; }
.aq-day-note { color: var(--muted); font-size: .8rem; }

@media (max-width: 900px) {
  .aq-value { font-size: 2.5rem; }
  .aq-day { padding: .5rem .6rem; }
}

@media (max-width: 560px) {
  .aq-days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Rekordy a štatistiky ── */
.records-grid { margin-top: 0; }
.records-grid .rec-card .card-value { font-size: clamp(1.4rem, 2.2vw, 1.7rem); }
.tables-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: .8rem; margin-top: 1rem; }
.table-panel { padding: 1rem 1.1rem 1.1rem; }
.table-panel .chart-head { margin-bottom: .6rem; }
.table-panel .table-scroll { max-height: 300px; }
.table-panel .data-table { font-size: .8rem; }
.table-panel .data-table th, .table-panel .data-table td { padding-left: .5rem; padding-right: .5rem; }
.chip-warn { border-color: color-mix(in srgb, var(--warn) 55%, transparent); color: var(--warn); }

.report-panel { margin-top: 1.1rem; padding: 1rem 1.1rem 1.1rem; }
.report-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.report-month { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .9rem; }
.report-month select {
  background: var(--panel); color: var(--text); border: 1px solid var(--panel-border);
  border-radius: 10px; padding: .45rem .6rem; font: inherit; font-size: .9rem; cursor: pointer;
}

@media (max-width: 900px) {
  .tables-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .report-actions .btn { width: 100%; justify-content: center; }
}

/* ── Saharský piesok ── */
.dust-map-panel { padding: 1rem 1.1rem 1.1rem; }
.dust-map-box {
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-2);
  margin-top: .6rem;
}
.dust-map-box iframe {
  display: block;
  width: 100%;
  height: 450px;
  border: 0;
}
.dust-map-foot {
  margin-top: .5rem;
  color: var(--muted);
  font-size: .82rem;
}
.dust-map-foot a { color: var(--accent); text-decoration: none; }
.dust-map-foot a:hover { text-decoration: underline; }
.dust-info-grid { margin-top: 1rem; }
.dust-info-grid .card-sub {
  color: var(--text-soft);
  font-size: .88rem;
  padding-top: .3rem;
}

@media (max-width: 560px) {
  .dust-map-box iframe { height: 300px; }
}