/* ============================================================
 * POČASÍMETEO V2 — compact modern overlay
 * Loaded AFTER styles.css + styles-forecast.css. Everything below
 * overrides defaults to make the dashboard denser, more configurable,
 * and visually modern. Tweakables read CSS custom properties from
 * data-* attributes on <html>.
 * ============================================================ */

:root {
  /* Tweakable global tokens — written by app from Tweaks panel */
  --r-scale: 1;
  --gap-scale: 1;
  --font-scale: 1;
  --shadow-scale: 1;
  --tile-min: 280px;
  --grid-gap: 10px;
  --topbar-h: 34px;
  --chrome-alpha: 1;        /* 0..1 widget header visibility */
  --accent-h: 200;          /* hue */
  --accent-s: 90%;
  --accent-l: 60%;
  --rain: #6cb4ff;
  --temp-warm: #fb923c;
  /* Dashboard track count — collapses on narrow screens so a user-saved
     span 12 stays full-width without the grid carrying 12 empty narrow
     tracks. Reset back to 12 on desktop. JS reads this in Dashboard to
     compute an effective span per widget. */
  --dash-cols: 12;
}
@media (max-width: 1100px) { :root { --dash-cols: 12; } }
@media (max-width: 760px)  { :root { --dash-cols: 6; } }
@media (max-width: 480px)  { :root { --dash-cols: 4; } }

/* ─────────────────────────────────────────────────────────────
 * Compact app shell
 * ───────────────────────────────────────────────────────────── */
.app {
  /* Override max-width — let it breathe on ultra-wide */
  max-width: 1840px;
  padding: clamp(8px, 1.4vw, 18px);
  gap: calc(var(--grid-gap) * 1.4);
}

[data-density="ultra"] {
  --grid-gap: 6px;
  --pad-card: 8px;
  --gap-md: 6px;
  --gap-lg: 8px;
  --gap-xl: 10px;
  --r-scale: 0.7;
}
[data-density="compact"] {
  --grid-gap: 8px;
  --pad-card: 11px;
  --gap-md: 8px;
  --gap-lg: 12px;
  --gap-xl: 14px;
}
[data-density="comfortable"] {
  --grid-gap: 12px;
  --pad-card: 14px;
}
[data-density="spacious"] {
  --grid-gap: 18px;
  --pad-card: 22px;
}

/* Font scaling — runs alongside design system's --font-scale */
html { font-size: calc(16px * var(--font-scale)); }

/* Radius scaling */
:root {
  --r-sm: calc(6px * var(--r-scale));
  --r-md: calc(12px * var(--r-scale));
  --r-lg: calc(18px * var(--r-scale));
}

/* Temperature + accent background. Always on. Three overlapping radials:
   pure accent on the left, an accent×temp blend across the top centre, and
   temperature-leaning glow on the right. The temp bucket comes from
   <html data-temp> (frost / cold / cool / warm / hot), set by app.jsx from
   the station reading (fallback to forecast hour 0). The accent comes from
   the Tweaks panel. Both update live → gradient morphs whenever either
   changes. No toggle — this is part of the dashboard's identity. */
body::after {
  content: '';
  position: fixed; inset: 0;
  z-index: -1;                 /* aurora orbs use ::before at the same z */
  pointer-events: none;
  background:
    /* Left — pure accent */
    radial-gradient(ellipse 55% 65% at 12% 35%,
      color-mix(in oklab, var(--accent) 55%, transparent) 0%,
      transparent 65%),
    /* Top centre — explicit accent × temp blend */
    radial-gradient(ellipse 80% 50% at 50% -5%,
      color-mix(in oklab, var(--accent) 50%, var(--temp-tint-color, var(--accent))) 0%,
      transparent 60%),
    /* Right — temperature dominant with a touch of accent */
    radial-gradient(ellipse 55% 70% at 88% 25%,
      color-mix(in oklab, var(--temp-tint-color, var(--accent)) 75%, var(--accent)) 0%,
      transparent 65%);
  opacity: 0.55;
  transition: background 0.5s ease;
}
/* Temperature bucket colors — opacity tuned so each blends well with accent. */
[data-temp="frost"] { --temp-tint-color: rgba(96, 165, 250, 0.55); }
[data-temp="cold"]  { --temp-tint-color: rgba(56, 189, 248, 0.50); }
[data-temp="cool"]  { --temp-tint-color: rgba(74, 222, 128, 0.45); }
[data-temp="warm"]  { --temp-tint-color: rgba(250, 204, 21, 0.55); }
[data-temp="hot"]   { --temp-tint-color: rgba(251, 146, 60, 0.65); }
[data-theme="light"] body::after { opacity: 0.32; }

/* Animation kill-switch */
[data-animations="off"] *,
[data-animations="off"] *::before,
[data-animations="off"] *::after {
  animation-duration: 0.001ms !important;
  transition-duration: 0.001ms !important;
}

/* ─────────────────────────────────────────────────────────────
 * Slim topbar — single line, sticky optional
 * ───────────────────────────────────────────────────────────── */
.topbar {
  padding: 3px 10px;
  border: 1px solid color-mix(in oklab, var(--accent) 9%, var(--border));
  border-radius: var(--r-md);
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--accent) 7%, transparent),
      color-mix(in oklab, var(--card-strong) 26%, transparent));
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  backdrop-filter: blur(18px) saturate(165%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset,
              0 4px 16px color-mix(in oklab, var(--accent) 6%, transparent);
  flex-wrap: nowrap;
  gap: 8px;
  min-height: var(--topbar-h);
}
[data-sticky="on"] .topbar {
  position: sticky;
  top: 8px;
  z-index: 800;
}
.topbar .brand-mark {
  width: 28px; height: 28px;
  border-radius: calc(8px * var(--r-scale));
  background: transparent;
  border: none;
  overflow: visible;
}
.topbar .brand-mark img { padding: 0; }
/* Brand name + station name share one line and read as a single masthead */
.brand-text {
  flex-direction: row;
  align-items: baseline;
  gap: 7px;
  overflow: hidden;
}
.brand-title {
  font-size: calc(14px * var(--fs)); letter-spacing: 0.02em; font-weight: 800;
  color: var(--text); flex-shrink: 0;
}
.brand-locality {
  font-size: calc(13.5px * var(--fs)); font-weight: 500; color: var(--muted);
  max-width: 34vw;
}

.topbar-status {
  font-size: calc(11px * var(--fs));
  flex: 1; justify-content: center;
  min-width: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}
.topbar-status > span { white-space: nowrap; }
.topbar-status .status-label { font-size: calc(11px * var(--fs)); }
/* obnova pozastavená po nečinnosti (js/aktivita.js) – klepnutím pokračuje */
.topbar-status .status-pauza { display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 0;
  border: 0; background: none; font-size: 12px; line-height: 1; color: var(--muted); cursor: pointer; }
.topbar-status .status-pauza:hover, .topbar-status .status-pauza:focus-visible { color: var(--accent); outline: none; }

.topbar-btn {
  width: 30px; height: 30px;
  font-size: calc(13px * var(--fs));
}

/* Quick-access pills next to the actions */
.topbar-quick {
  display: flex; gap: 4px; align-items: center;
  padding: 0 6px;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  margin: 0 4px;
}
.topbar-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--border));
  color: var(--text);
  font-family: var(--mono);
  font-size: calc(10.5px * var(--fs));
  cursor: pointer;
  transition: all var(--t-fast);
  white-space: nowrap;
}
.topbar-pill:hover {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 18%, transparent);
}
.topbar-pill i { font-size: calc(11px * var(--fs)); opacity: 0.8; }
.topbar-pill strong { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Compact "live/offline" pulse dot at the very left of status */
.topbar-status .status-dot { width: 6px; height: 6px; }

/* ─────────────────────────────────────────────────────────────
 * Model picker dropdown — replaces the static model name in
 * topbar-status with a stylish clickable trigger + popup list.
 * ───────────────────────────────────────────────────────────── */
.model-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
}
/* Trigger = slabý text stavu („model Yr.no (auto) ⌄“) jako „měření 17:30“ na
   stránce stanice: bez rámečku, podkladu a podtržení, jen při najetí zesílí. */
.model-picker-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t-fast);
}
.model-picker-btn:hover,
.model-picker-btn[aria-expanded="true"] { color: var(--text); text-decoration: none; }
.model-picker-btn:focus-visible { outline: 2px solid color-mix(in oklab, var(--accent) 60%, transparent); outline-offset: 2px; }
.model-picker-btn i { font-size: calc(9px * var(--fs)); opacity: 0.75; }

.model-picker-pop {
  /* Position-fixed via JS so it escapes `.topbar-status { overflow: hidden }`
     clipping. Anchored under the picker button. */
  z-index: 9000;
  max-height: 70vh;
  overflow-y: auto;
  background: color-mix(in oklab, var(--card-strong) 96%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1.5px solid var(--accent);
  border-radius: var(--r-md);
  box-shadow:
    0 0 0 4px color-mix(in oklab, var(--accent) 14%, transparent),
    0 16px 40px rgba(0,0,0,0.4);
  padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  animation: configIn .15s cubic-bezier(.4,0,.2,1);
}
.model-picker-auto-row {
  appearance: none;
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px;
  background: transparent; border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit; font-size: calc(12px * var(--fs)); text-align: left;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t-fast);
}
.model-picker-auto-row:hover { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 10%, var(--card-hover)); }
.model-picker-auto-row.on {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 16%, var(--card-hover));
}
.model-picker-auto-row > i {
  font-size: calc(16px * var(--fs));
  color: var(--accent);
  flex-shrink: 0;
}
.model-picker-sep { height: 1px; background: var(--border); margin: 4px 4px; }

.model-picker-item {
  appearance: none;
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 6px 10px;
  background: transparent; border: 1px solid transparent;
  color: var(--text);
  font-family: inherit; font-size: calc(12px * var(--fs)); text-align: left;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.model-picker-item:hover {
  background: color-mix(in oklab, var(--accent) 8%, var(--card-hover));
  border-color: color-mix(in oklab, var(--accent) 25%, var(--border));
}
.model-picker-item.active {
  background: color-mix(in oklab, var(--accent) 14%, var(--card-hover));
  border-color: color-mix(in oklab, var(--accent) 45%, var(--border));
}
.model-picker-item .mp-rank {
  font-family: var(--mono);
  font-size: calc(10px * var(--fs));
  color: var(--dim);
  width: 22px;
  flex-shrink: 0;
}
.model-picker-item .mp-text { flex: 1; min-width: 0; }
.model-picker-item .mp-name {
  font-weight: 600;
  font-size: calc(12.5px * var(--fs));
  display: inline-flex; align-items: center; gap: 6px;
}
.model-picker-item .mp-sub {
  font-size: calc(10.5px * var(--fs));
  color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.model-picker-item .mp-auto-badge {
  background: var(--accent);
  color: #0b1020;
  font-size: calc(8px * var(--fs));
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 1px 4px;
  border-radius: 99px;
  line-height: 1;
}
.model-picker-auto-row .mp-text,
.model-picker-auto-row .mp-name { font-weight: 600; }
.model-picker-auto-row .mp-desc {
  font-size: calc(10.5px * var(--fs));
  color: var(--muted);
  font-weight: 400;
  margin-top: 2px;
  white-space: normal;          /* multi-line description */
}
.model-picker-item .mp-dev {
  font-family: var(--mono);
  font-size: calc(11px * var(--fs));
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.model-picker-item .mp-dev.good { color: var(--ok); background: color-mix(in oklab, var(--ok) 14%, transparent); }
.model-picker-item .mp-dev.warn { color: var(--warn); background: color-mix(in oklab, var(--warn) 14%, transparent); }
.model-picker-item .mp-dev.bad  { color: var(--bad);  background: color-mix(in oklab, var(--bad) 14%, transparent); }

/* Mobile — collapse some status detail, stack onto two rows */
@media (max-width: 880px) {
  .topbar { flex-wrap: wrap; row-gap: 8px; }
  .brand { order: 1; }
  .topbar-actions { order: 2; }
  .topbar-status {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    justify-content: flex-start;
    font-size: calc(10px * var(--fs)); gap: 6px;
    padding-top: 8px;
    border-top: 1px solid color-mix(in oklab, var(--accent) 12%, var(--border));
  }
  .topbar-status > span:nth-of-type(n+4) { display: none; }
  .topbar .brand-mark { width: 26px; height: 26px; }
  .brand-title { font-size: calc(13px * var(--fs)); }
  .brand-locality { font-size: calc(12.5px * var(--fs)); max-width: 46vw; }
  .topbar-quick { display: none; }
}

/* ─────────────────────────────────────────────────────────────
 * Layout — uses the base 12-column masonry grid from styles-forecast.css.
 * (Autofit layout was removed — it added complexity with little benefit.)
 * ───────────────────────────────────────────────────────────── */
.dash-grid {
  column-gap: var(--grid-gap);
  /* row-gap stays 0 — the masonry skyline packer inserts the exact
     --grid-gap between stacked tiles itself (a native row-gap on the
     1px row track would add quantisation slack / a double gap). */
  row-gap: 0;
}

/* ─────────────────────────────────────────────────────────────
 * Compact widget chrome
 * ───────────────────────────────────────────────────────────── */
.widget {
  padding: var(--pad-card);
  gap: 8px;
  border-radius: var(--r-md);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.02) inset,
    0 calc(2px * var(--shadow-scale)) calc(8px * var(--shadow-scale))
      color-mix(in oklab, var(--accent) 4%, rgba(0,0,0,0.15));
  transition: transform .12s ease, border-color .12s ease, box-shadow .15s ease;
}
.widget:hover {
  border-color: color-mix(in oklab, var(--accent) 22%, var(--border));
}
.widget:hover .widget-actions button { opacity: 1; }

[data-theme="light"] .widget {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 calc(2px * var(--shadow-scale)) calc(8px * var(--shadow-scale))
      rgba(15,23,42,0.06);
}

.widget-head {
  padding-bottom: 0;
  gap: 6px;
  min-height: 22px;
  opacity: var(--chrome-alpha);
  transition: opacity .15s;
}
.widget-head .drag-handle { width: 18px; height: 18px; }
.widget-head .drag-handle i { font-size: calc(12px * var(--fs)); }
.widget-head .ico {
  width: 20px; height: 20px;
  font-size: calc(11px * var(--fs));
  background: transparent;
  color: var(--accent);
  opacity: 0.8;
}
.widget-title {
  font-size: calc(11.5px * var(--fs)); font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
  text-transform: uppercase;
  opacity: 0.85;
}
.widget-sub {
  font-size: calc(9.5px * var(--fs));
  font-weight: 500;
  letter-spacing: 0.06em;
  opacity: 0.55;
}

/* Inline action buttons — visible but subtle by default, brighten on hover.
   styles-forecast.css uses display:none on non-edit-mode widgets — that's
   the desired behaviour. All edit-only buttons (gear/move/×) stay hidden
   in view mode. */
.widget-actions { gap: 2px; }
.widget-actions button {
  width: 22px; height: 22px;
  font-size: calc(10.5px * var(--fs));
  opacity: 0.7;
  transition: opacity .12s, color .12s, border-color .12s, background .12s;
}
.widget[draggable="true"] .widget-actions button { opacity: 1; }

/* ─────────────────────────────────────────────────────────────
 * Compact hero / station
 * ───────────────────────────────────────────────────────────── */
.hero-row {
  padding: 0;
  gap: clamp(14px, 2vw, 26px);
  /* Col 1 = auto → temp-col se zúží na šířku obsahu (meta = nejširší
     řádek), ikona uvnitř flex-end pak končí přesně u pravé hrany meta
     textu. Col 2 = 1fr → graf hned za. */
  grid-template-columns: auto minmax(0, 1fr);
}
.hero-row.hero-with-webcam {
  grid-template-columns: auto minmax(0, 1fr) minmax(140px, 200px);
}
/* Info-only mode — spark and webcam are dedicated widgets now, so when the
   station widget renders just the meteostation info column it should fill
   the tile instead of leaving an empty 1fr track on the right. */
.hero-row.hero-info-only { grid-template-columns: 1fr; }
.hero-eyebrow { display: none; }
.hero-loc {
  font-size: clamp(14px, 1.4vw, 16px);
  margin-top: 0;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
/* BIG, prominent temperature reading — modern weather-app feel. */
.hero-temp-num {
  font-weight: 400;
  letter-spacing: -0.05em;
  align-items: baseline;
}
.hero-temp-num .num {
  /* Konzervativnější horní limit — předchozí 132 px tlačil temp sloupec
     do přetečení gridu na užších widgetech. */
  font-size: clamp(56px, 6.5vw, 88px);
  font-weight: 500;
  line-height: 0.85;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  /* Color gradient from temp class color → softer tone, makes the number pop */
  background: linear-gradient(160deg, currentColor 30%, color-mix(in oklab, currentColor 55%, var(--text)) 110%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-temp-num .unit {
  font-size: clamp(16px, 1.4vw, 22px);
  font-weight: 500;
  margin-top: 0;
  margin-left: 2px;
  color: var(--muted);
  letter-spacing: 0;
}
/* Ikona hned vedle teploty (flex-start), bez space-between, aby vizuálně
   tvořila pár s číslem a nezabírala celou šířku sloupce. */
.hero-temp-row {
  margin: 6px 0;
  gap: clamp(10px, 1.4vw, 18px);
  align-items: flex-end;
  justify-content: flex-start;
}
.hero-meta { font-size: calc(12px * var(--fs)); gap: 4px 10px; margin-top: 6px; }
.hero-meta .sep { display: none; }
.hero-meta-item { padding: 2px 7px; border-radius: 999px; background: color-mix(in oklab, var(--card-hover) 60%, transparent); }

/* Delta chip — appended to each meta item when "Porovnání s předpovědí"
   is on. Compact, sign-tinted; muted when within tolerance, bolder when the
   forecast missed by more than the per-metric `tol`. */
.hm-delta {
  display: inline-flex; align-items: center; gap: 2px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: calc(10.5px * var(--fs));
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  background: color-mix(in oklab, var(--card-hover) 50%, transparent);
  color: var(--muted);
}
.hm-delta-arrow { font-size: calc(8px * var(--fs)); opacity: 0.85; }
.hm-delta.zero { opacity: 0.55; }
.hm-delta.near { opacity: 0.8; }
.hm-delta.big.pos { color: #fb923c; background: color-mix(in oklab, #fb923c 14%, transparent); }
.hm-delta.big.neg { color: #38bdf8; background: color-mix(in oklab, #38bdf8 14%, transparent); }
[data-theme="light"] .hm-delta.big.pos { color: #c2410c; background: color-mix(in oklab, #fb923c 18%, transparent); }
[data-theme="light"] .hm-delta.big.neg { color: #0369a1; background: color-mix(in oklab, #38bdf8 18%, transparent); }

/* Temp delta sits below the unit, smaller than the big number — gives a
   "is it warmer/cooler than predicted" read at a glance. */
.hero-temp-delta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 8px;
  align-self: center;
}
.hero-temp-delta-lbl {
  font-size: calc(10px * var(--fs));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--mono);
}
@media (max-width: 720px) {
  .hero-temp-delta { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-left: 6px; }
  .hero-temp-delta-lbl { font-size: calc(9px * var(--fs)); letter-spacing: 0.14em; }
}

.hero-webcam { height: auto; }
.hero-webcam img { max-height: 130px; }

.hero-spark .spark-title { font-size: calc(10px * var(--fs)); margin-bottom: 6px; }
/* v2 už neforcuje výšku — aspect-ratio v styles-forecast.css drží proporci. */

/* ─────────────────────────────────────────────────────────────
 * Standalone WebcamWidget tile
 * ───────────────────────────────────────────────────────────── */
/* .webcam-w is the space in the tile (measured in JS); the button is the
   picture, sized to its proportions (never cropped); picture + link row are
   centred in the tile — the same size and level as the radar map (16:9 frame,
   40 px row) in a tile of the same size; the link to kamerypocasi.cz right
   under the picture (--wc-link = its row, 40 px). Alone in a row the
   tile is at least as tall as the picture at full width (100cqi = the tile's
   width, --wc-ar = picture's width / height). */
.webcam-w {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: calc(min(calc(100cqi / var(--wc-ar, 1.78)), 420px) + var(--wc-link, 0px));
}
.webcam-tile {
  appearance: none;
  position: relative;
  display: block; flex: none;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.webcam-fit {
  position: relative; display: block;
  width: 100%; height: 100%;
  border-radius: var(--r-md);           /* no frame line (Lukáš 22. 10.) */
  background: #0b1020;
  overflow: hidden;
  transition: filter var(--t-fast);
}
.webcam-tile:hover .webcam-fit { filter: brightness(1.06); }
.webcam-tile:focus-visible { outline: none; }
.webcam-tile:focus-visible .webcam-fit { outline: 2px solid var(--accent); outline-offset: 2px; }
.webcam-tile img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.webcam-link {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: calc(var(--wc-link, 40px) - 8px); margin-top: 8px; max-width: 100%;
  font-size: calc(11.5px * var(--fs)); font-weight: 600; color: var(--muted); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.webcam-link i { color: var(--accent); font-size: calc(11px * var(--fs)); }
.webcam-link i:last-child { color: inherit; opacity: .7; font-size: calc(10px * var(--fs)); }
.webcam-link:hover { color: var(--text); }
.webcam-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* a nearby Windy webcam lent by the API: source + invitation in one row */
.webcam-under {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex: none;
  height: calc(var(--wc-link, 40px) - 8px); margin-top: 8px; max-width: 100%; min-width: 0;
}
.webcam-under .webcam-link { margin-top: 0; height: auto; min-width: 0; }
.webcam-src { font-size: calc(11px * var(--fs)); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 1; }
@container tile (max-width: 340px) { .webcam-src { display: none; } }
/* no camera at this locality — invitation to add one */
.webcam-none { flex: 1 1 auto; justify-content: center; gap: 8px; padding: 18px 14px; min-height: 160px; }
.webcam-none > i { color: var(--accent); opacity: .8; font-size: calc(28px * var(--fs)); }
.webcam-none .wn-title { font-size: calc(13.5px * var(--fs)); font-weight: 650; color: var(--text); }
.webcam-none small { max-width: 34ch; font-size: calc(11.5px * var(--fs)); line-height: 1.45; opacity: .85; }
.webcam-none .wn-btn {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; max-width: 100%;
  height: 32px; padding: 0 14px; border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--accent) 55%, transparent);
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  color: var(--text); font: 600 calc(12px * var(--fs))/1 var(--sans); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.webcam-none .wn-btn i { font-size: calc(10.5px * var(--fs)); opacity: .75; }
.webcam-none .wn-btn:hover { background: color-mix(in oklab, var(--accent) 24%, transparent); }
.webcam-none .wn-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@container tile (max-width: 240px) { .webcam-none small { display: none; } }
.webcam-pill {
  position: absolute; top: 8px; left: 8px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(0,0,0,0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-family: var(--mono); font-size: calc(9.5px * var(--fs)); font-weight: 700;
  letter-spacing: 0.12em;
}
.webcam-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 0 #ef4444;
  animation: pulse 1.6s cubic-bezier(.4,0,.2,1) infinite;
}
.webcam-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 16px 10px 8px;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  display: flex; justify-content: space-between; align-items: baseline;
  color: #fff;
  font-size: calc(10.5px * var(--fs));
  font-family: var(--mono);
  letter-spacing: 0.02em;
}
.webcam-caption .loc { font-weight: 600; }
.webcam-caption .when { opacity: 0.85; }

/* ─────────────────────────────────────────────────────────────
 * Hourly matrix — one row per metric, columns are the hours.
 * Left gutter holds metric labels; each row reads as a horizontal
 * time series so trends jump out. Day-edge columns get a thin
 * accent line so day boundaries stay visible at 48–72 h.
 * ───────────────────────────────────────────────────────────── */
.hourly-matrix {
  display: grid;
  column-gap: 0;                  /* columns touch so column-tint is continuous */
  row-gap: 0;
  /* No `align-items: center` here — that would shrink each cell to its
     intrinsic size and center it in the row track, leaving uncoloured gaps
     above/below smaller cells. Stretch (default) makes every cell fill the
     full track height so the column tint reads as one solid bar. */
  width: 100%;
}
.hourly-matrix .hm-cell {
  /* Flex cell: fills the row track (no background gaps), centres its own
     content both axes. .hm-precip overrides flex-direction to column when it
     needs to stack probability + mm amount. */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding: 3px 2px;
  min-width: 0;
  position: relative;
  /* No per-cell border-radius so column-tints read as one continuous bar
     down through every metric row. */
}
/* Subtle alternating column tint — every other hour gets a wash so the
   eye can follow a single column down through all rows without confusing
   it with its neighbours. */
.hourly-matrix .hm-cell.is-odd {
  background: color-mix(in oklab, var(--card-hover) 60%, transparent);
}
/* Current hour: stronger accent tint spans every metric row, visually
   linking them as one "now" column. */
.hourly-matrix .hm-cell.is-now {
  background: color-mix(in oklab, var(--accent) 16%, transparent);
}
/* Day boundary: full-height vertical accent line. Sits inside the cell as
   a box-shadow on the left edge so it doesn't push content. */
.hourly-matrix .hm-cell.is-day-edge {
  box-shadow: inset 2px 0 0 color-mix(in oklab, var(--accent) 60%, transparent);
}
.hourly-matrix .hm-date {
  font-size: calc(9.5px * var(--fs));
  font-family: var(--mono);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hourly-matrix .hm-time {
  font-size: calc(11px * var(--fs));
  color: var(--muted);
  font-family: var(--mono);
}
.hourly-matrix .hm-cell.is-now.hm-time { color: var(--accent); font-weight: 700; }
.hourly-matrix .hm-icon img {
  width: 28px; height: 28px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.hourly-matrix .hm-temp {
  font-size: calc(14px * var(--fs));
  font-weight: 600;
  color: var(--text);
  line-height: 1.1;
}
.hourly-matrix .hm-precip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-size: calc(10px * var(--fs));
  font-family: var(--mono);
  color: var(--rain);
  line-height: 1.05;
  min-height: 14px;
}
/* Empty precip cells stay visually present (no content, but the column-tint
   from is-odd / is-now / is-day-edge still renders) so the column stays
   continuous from top to bottom — no holes mid-column. */
.hourly-matrix .hm-mm { opacity: 0.85; font-size: calc(9px * var(--fs)); }
.hourly-matrix .hm-wind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: calc(10px * var(--fs));
  font-family: var(--mono);
  color: var(--muted);
  line-height: 1;
}
.hourly-matrix .hm-wind i { font-size: calc(10px * var(--fs)); }

/* Density adjustments mirror the old card layout. */
[data-density="ultra"] .hourly-matrix .hm-icon img { width: 22px; height: 22px; }
[data-density="ultra"] .hourly-matrix .hm-temp { font-size: calc(12px * var(--fs)); }
[data-density="spacious"] .hourly-matrix .hm-icon img { width: 34px; height: 34px; }
[data-density="spacious"] .hourly-matrix .hm-temp { font-size: calc(16px * var(--fs)); }

/* Legacy `.hourly-v2 .hourly-grid` rules kept below — not used by the new
   matrix layout, but other code paths or future templates may revive cards. */
.hourly-v2 .hourly-grid {
  display: grid;
  gap: 4px;
  width: 100%;
}
.hourly-v2 .hcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px 7px;
  border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--card-hover) 60%, transparent);
  border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
  position: relative;
  transition: background var(--t-fast), border-color var(--t-fast);
  min-width: 0;
}
.hourly-v2 .hcard:hover {
  background: var(--card-hover);
  border-color: var(--border);
}
.hourly-v2 .hcard.is-now {
  background: color-mix(in oklab, var(--accent) 14%, var(--card-hover));
  border-color: color-mix(in oklab, var(--accent) 50%, var(--border));
}
.hourly-v2 .hcard.is-now .hcard-time {
  color: var(--accent); font-weight: 700;
}
/* Day-edge cards get a subtle accent rim on top so day boundaries stay
   visible when the grid wraps to multiple rows. */
.hourly-v2 .hcard.is-day-edge {
  box-shadow: inset 0 2px 0 color-mix(in oklab, var(--accent) 60%, transparent);
}

.hourly-v2 .hcard-date {
  font-size: calc(9px * var(--fs));
  font-family: var(--mono);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  min-height: 11px;          /* reserve space so cards align when only some have dates */
  line-height: 1;
}
.hourly-v2 .hcard-time {
  font-size: calc(11px * var(--fs));
  color: var(--muted);
  font-family: var(--mono);
  letter-spacing: 0.02em;
  line-height: 1;
}
.hourly-v2 .hcard-icon img {
  width: 30px; height: 30px;
  object-fit: contain;
  display: block;
}
.hourly-v2 .hcard-temp {
  font-size: calc(15px * var(--fs));
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1;
}
.hourly-v2 .hcard-pop {
  display: flex; align-items: center; gap: 2px;
  font-size: calc(10px * var(--fs)); color: var(--rain);
  font-family: var(--mono);
  line-height: 1;
  min-height: 11px;
}
.hourly-v2 .hcard-pop.empty { visibility: hidden; }
.hourly-v2 .hcard-pop i { font-size: calc(9px * var(--fs)); }
.hourly-v2 .hcard-mm {
  font-size: calc(9px * var(--fs));
  color: var(--rain);
  font-family: var(--mono);
  opacity: 0.85;
  line-height: 1;
}
.hourly-v2 .hcard-wind {
  display: flex; align-items: center; gap: 2px;
  font-size: calc(10px * var(--fs)); color: var(--muted);
  font-family: var(--mono);
  line-height: 1;
}
.hourly-v2 .hcard-wind i {
  display: inline-block;
  font-size: calc(10px * var(--fs));
  color: var(--muted);
}

/* Density adjustments — ultra makes everything tighter */
[data-density="ultra"] .hourly-v2 .hcard { padding: 4px 2px 5px; gap: 1px; }
[data-density="ultra"] .hourly-v2 .hcard-icon img { width: 22px; height: 22px; }
[data-density="ultra"] .hourly-v2 .hcard-temp { font-size: calc(13px * var(--fs)); }
[data-density="ultra"] .hourly-v2 .hcard-time { font-size: calc(10px * var(--fs)); }
[data-density="ultra"] .hourly-v2 .hcard-pop,
[data-density="ultra"] .hourly-v2 .hcard-wind,
[data-density="ultra"] .hourly-v2 .hcard-mm { font-size: calc(9px * var(--fs)); }

[data-density="spacious"] .hourly-v2 .hcard { padding: 10px 6px 12px; gap: 4px; }
[data-density="spacious"] .hourly-v2 .hcard-icon img { width: 36px; height: 36px; }
[data-density="spacious"] .hourly-v2 .hcard-temp { font-size: calc(17px * var(--fs)); }

/* ─────────────────────────────────────────────────────────────
 * Compact daily list
 * ───────────────────────────────────────────────────────────── */
.daily-list { gap: 2px; }
.daily-row {
  padding: 4px 6px;
  gap: 8px;
  grid-template-columns: 1.1fr auto 1.6fr auto;
}
.daily-row .d-day strong { font-size: calc(12px * var(--fs)); }
.daily-row .d-day small { font-size: calc(10px * var(--fs)); }
.daily-row .d-icon img { width: 26px; height: 26px; }
.daily-row .d-tmin, .daily-row .d-tmax { font-size: calc(11.5px * var(--fs)); min-width: 22px; }
.daily-row .d-bar { height: 4px; }
.daily-row .d-precip { font-size: calc(10px * var(--fs)); }

/* ─────────────────────────────────────────────────────────────
 * Compact sensor tiles — minimal chrome
 * ───────────────────────────────────────────────────────────── */
.sensors-grid {
  grid-template-columns: repeat(auto-fill, minmax(var(--sensor-min, 130px), 1fr));
  gap: 6px;
}
.sensor-tile {
  padding: 8px 10px;
  gap: 3px;
  border-radius: var(--r-sm);
}
.sensor-head { font-size: calc(9.5px * var(--fs)); gap: 4px; }
.sensor-icon { font-size: calc(12px * var(--fs)); }
.sensor-value { font-size: calc(17px * var(--fs)); }
.sensor-value small { font-size: calc(10px * var(--fs)); margin-left: 2px; }
.sensor-range { font-size: calc(9px * var(--fs)); gap: 6px; }
.sensor-spark { height: 24px; margin-top: 2px; }

/* ─────────────────────────────────────────────────────────────
 * Compact models leaderboard
 * ───────────────────────────────────────────────────────────── */
.model-row { padding: 5px 7px; }
.model-row .m-name, .model-row .model-name { font-size: calc(11.5px * var(--fs)); }
.model-row .m-score, .model-row .model-score { font-size: calc(10.5px * var(--fs)); }
.model-list.compact .model-row { padding: 4px 6px; gap: 8px; }
.model-row .model-rank { font-size: calc(10px * var(--fs)); width: 14px; }
.model-row .model-accuracy { height: 3px; }

/* ─────────────────────────────────────────────────────────────
 * Compact chart
 * ───────────────────────────────────────────────────────────── */
.chart-wrap { min-height: 220px; }
.chart-svg { min-height: 180px; }
.chip-toggle { padding: 3px 8px; font-size: calc(10px * var(--fs)); }
.chart-toolbar-header .chip-toggle { padding: 2px 6px; font-size: calc(9.5px * var(--fs)); }

/* Compact charts mode */
[data-charts="dense"] .chart-wrap { min-height: 160px; }
[data-charts="dense"] .chart-svg { min-height: 140px; }
[data-charts="dense"] .sensor-spark { height: 18px; }
[data-charts="dense"] .spark-widget.spark-compact .spark-svg { height: clamp(60px, 10vh, 100px); }

/* ─────────────────────────────────────────────────────────────
 * Compact wind & sun
 * ───────────────────────────────────────────────────────────── */
.wind-compass svg { width: 100%; height: auto; max-width: 240px; }
.wind-num { font-size: clamp(36px, 5vw, 60px); }
.wind-extras { font-size: calc(11px * var(--fs)); }
.wind-aside { gap: clamp(12px, 2vw, 20px); }

.dn-strip { height: 22px; min-height: 22px; margin-top: 10px; }
.dn-tick span { font-size: calc(8px * var(--fs)); }
.sun-event { padding: 6px 8px; gap: 6px; }
.sun-event-text strong { font-size: calc(13px * var(--fs)); }
.sun-event-text .sub { font-size: calc(9px * var(--fs)); }
.sun-event-text .lbl { font-size: calc(9px * var(--fs)); }
.sun-moon { padding: 5px 8px; gap: 8px; }
.sun-moon-text strong { font-size: calc(13px * var(--fs)); }
.sun-moon-text .lbl { font-size: calc(9px * var(--fs)); }

/* ─────────────────────────────────────────────────────────────
 * Per-widget config panel — floating popup anchored to the
 * widget's bottom edge (or top if there's no room below). The
 * widget itself stays fully visible above the popup, acting as
 * the live preview while the user toggles settings. Portaled to
 * <body> so widget overflow never clips it. Layout: size controls
 * on the first row, a full-width divider, then the option chips
 * wrapped onto the next row(s); scrolls vertically if tall.
 * ───────────────────────────────────────────────────────────── */
.widget-config-pop.floating {
  z-index: 9000;
  padding: 8px 10px;
  background: color-mix(in oklab, var(--card-strong) 96%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1.5px solid var(--accent);
  border-radius: var(--r-md);
  box-shadow:
    0 0 0 4px color-mix(in oklab, var(--accent) 14%, transparent),
    0 14px 36px rgba(0,0,0,0.42);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 10px;
  row-gap: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: min(70vh, 460px);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  animation: configIn .15s cubic-bezier(.4,0,.2,1);
}
.widget-config-pop.floating.above {
  animation: configInAbove .15s cubic-bezier(.4,0,.2,1);
}
@keyframes configIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes configInAbove {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Highlight the widget being configured so the user immediately sees which
   tile the floating popup controls. */
.widget.config-open {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  z-index: 5;
}

/* Resize handles — three per widget in edit mode. Generous grab zones so the
   user doesn't need pixel-perfect aim:
   • East edge: 10 px wide vertical strip, right side, ew-resize cursor
   • South edge: 10 px tall horizontal strip, bottom, ns-resize cursor
   • SE corner: 18 px square in the bottom-right, overlapping the edges,
     nwse-resize cursor (changes both)
   Only the corner shows a visible glyph (accent triangle); the edges are
   invisible interactive zones with a brief accent flash on hover.
*/
.widget-resize-edge,
.widget-resize-corner {
  position: absolute;
  z-index: 7;
  opacity: 0;
  /* Claim the gesture for resize so a finger-drag on the handle doesn't
     scroll the page before pointermove fires. */
  touch-action: none;
  transition: opacity 0.12s, background 0.12s;
}
.widget-resize-e {
  top: 8px; bottom: 8px; right: -5px;
  width: 10px;
  cursor: ew-resize;
}
.widget-resize-s {
  left: 8px; right: 8px; bottom: -5px;
  height: 10px;
  cursor: ns-resize;
}
.widget-resize-corner {
  right: -5px; bottom: -5px;
  width: 18px; height: 18px;
  cursor: nwse-resize;
  background:
    linear-gradient(135deg,
      transparent 0%, transparent 55%,
      color-mix(in oklab, var(--accent) 65%, transparent) 60%,
      var(--accent) 100%);
  border-bottom-right-radius: var(--r-md);
}
/* Edges: a short grip pill in the middle of each edge is always visible in
   edit mode (block "Táhla velikosti" near the edit toolbar), so the grab
   zones don't have to be found by hovering blindly. */
.dash-grid.editing .widget:hover .widget-resize-corner,
.dash-grid.editing .widget.config-open .widget-resize-corner { opacity: 0.9; }
.widget-resize-corner:hover { opacity: 1 !important; }

body.widget-resizing { user-select: none; }
body.widget-resizing * { pointer-events: none; }

/* Snap guideline — vertical accent line that appears at the X coordinate of
   any neighbouring widget edge the right-edge of the dragged tile is
   magnetised to. Mounted/unmounted by the resize handler in common.jsx. */
.widget-snap-guide {
  position: fixed;
  width: 2px;
  background: var(--accent);
  box-shadow: 0 0 10px color-mix(in oklab, var(--accent) 70%, transparent);
  pointer-events: none;
  z-index: 8000;
  display: none;
  transform: translateX(-1px);
  animation: snapPop .12s cubic-bezier(.4,0,.2,1);
}
@keyframes snapPop {
  from { opacity: 0; transform: translateX(-1px) scaleY(0.8); }
  to   { opacity: 1; transform: translateX(-1px) scaleY(1); }
}

/* Edit-mode hover — clearly indicates which widget the cursor is on so
   drag/resize/configure target is unambiguous. Subtle outline + small lift. */
.dash-grid.editing .widget {
  transition: outline 0.12s, transform 0.15s, box-shadow 0.15s;
}
.dash-grid.editing .widget:hover {
  outline: 2px solid color-mix(in oklab, var(--accent) 65%, transparent);
  outline-offset: 2px;
  transform: translateY(-1px);
  z-index: 4;
}

.widget-config-pop::-webkit-scrollbar { height: 4px; }
.widget-config-pop::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: calc(2px * var(--r-scale));
}
.widget-config-pop .cfg-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.widget-config-pop .cfg-toggles {
  gap: 4px;
}
.widget-config-pop .cfg-label {
  font-size: calc(9.5px * var(--fs));
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--mono);
  margin-right: 2px;
}
/* Full-width divider — its flex-basis:100% forces the option chips
   onto a fresh row below the size controls. */
.widget-config-pop .cfg-sep {
  width: 100%;
  flex-basis: 100%;
  height: 1px;
  background: var(--border);
  flex-shrink: 0;
}
.widget-config-pop .cfg-close {
  appearance: none;
  background: transparent; border: 0;
  color: var(--muted); cursor: pointer;
  font-size: calc(16px * var(--fs)); line-height: 1;
  padding: 2px 6px;
  margin-left: auto;
  flex-shrink: 0;
  position: sticky; top: 0;
  border-radius: calc(4px * var(--r-scale));
  transition: color var(--t-fast), background var(--t-fast);
}
.widget-config-pop .cfg-close:hover { color: var(--text); background: var(--card-hover); }

/* Unified chip style for every toggle (settings + sensor channels). */
.widget-config-pop .cfg-chip {
  appearance: none;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card-hover);
  color: var(--text);
  font: inherit; font-size: calc(10.5px * var(--fs));
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--t-fast);
}
.widget-config-pop .cfg-chip:hover { border-color: var(--accent); }
.widget-config-pop .cfg-chip.on {
  border-color: color-mix(in oklab, var(--accent) 50%, var(--border));
  background: color-mix(in oklab, var(--accent) 16%, var(--card-hover));
  color: var(--text);
}
.widget-config-pop .cfg-chip.off { opacity: 0.55; }
.widget-config-pop .cfg-chip i { font-size: calc(11px * var(--fs)); opacity: 0.85; }
/* Colored swatch on curve toggles — temp = orange dot, srážky = blue, etc.
   Replaces the icon when a curve is identified by its colour in the chart. */
.widget-config-pop .cfg-chip-swatch {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.widget-config-pop .head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: calc(10px * var(--fs)); font-family: var(--mono);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.widget-config-pop .row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; font-size: calc(11.5px * var(--fs));
}
.widget-config-pop .row .lbl { color: var(--muted); }
.widget-config-pop button.size-pick {
  appearance: none;
  padding: 4px 10px; border-radius: calc(6px * var(--r-scale));
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-family: var(--mono); font-size: calc(10px * var(--fs)); font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast);
}
/* Width picker: 11 inline numbered chips (2–12). Buttons up to the current
   span get a translucent "filled" tint so the row visually represents the
   chosen proportion. */
.widget-config-pop .size-chips {
  display: inline-flex;
  gap: 2px;
}
.widget-config-pop .size-chips .size-pick {
  appearance: none;
  padding: 3px 0;
  width: 20px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-family: var(--mono); font-size: calc(10px * var(--fs)); font-weight: 600;
  border-radius: calc(4px * var(--r-scale));
  cursor: pointer;
  transition: all var(--t-fast);
}
.widget-config-pop .size-chips .size-pick:hover { border-color: var(--accent); color: var(--accent); }
.widget-config-pop .size-chips .size-pick.filled:not(.on) {
  background: color-mix(in oklab, var(--accent) 22%, transparent);
  border-color: color-mix(in oklab, var(--accent) 35%, var(--border));
}
.widget-config-pop .size-chips .size-pick.on {
  background: var(--accent);
  color: #0b1020;
  border-color: var(--accent);
}

/* ── Tap-based size group (width chips + height stepper) ─────────
   The drag handles need a mouse; this group is the touch-friendly
   resize path and also a convenience on desktop. ─────────────── */
.widget-config-pop .cfg-size {
  flex-wrap: wrap;
  gap: 6px;
}
.widget-config-pop .size-step {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.widget-config-pop .size-step .size-pick {
  min-width: 26px;
  padding: 4px 8px;
  font-size: calc(12px * var(--fs));
  line-height: 1;
}
.widget-config-pop .size-step-val {
  font-family: var(--mono);
  font-size: calc(10.5px * var(--fs));
  color: var(--text);
  min-width: 46px;
  text-align: center;
  opacity: 0.85;
}
.widget-config-pop .size-step .size-pick.on {
  background: var(--accent);
  color: #0b1020;
  border-color: var(--accent);
}

/* ─────────────────────────────────────────────────────────────
 * Touch / coarse-pointer affordances
 * On touchscreens there is no hover and the native HTML5 drag used
 * for reordering doesn't fire from a finger. So in edit mode:
 *   • resize edge/corner handles become permanently visible + larger
 *   • header action buttons (gear / ↑ / ↓ / ×) get ≥40 px hit targets
 *   • the gear popover wraps to rows and scrolls vertically instead of
 *     being one long horizontal strip the user can't reach the end of
 * Reordering on touch is via the ↑/↓ buttons (drag is desktop-only).
 * ───────────────────────────────────────────────────────────── */
@media (hover: none), (pointer: coarse) {
  .dash-grid.editing .widget .widget-resize-e,
  .dash-grid.editing .widget .widget-resize-s {
    opacity: 0.55;
    background: color-mix(in oklab, var(--accent) 38%, transparent);
    border-radius: calc(4px * var(--r-scale));
  }
  .dash-grid.editing .widget .widget-resize-corner { opacity: 1; }
  /* Fat grab zones — a fingertip is ~9 mm, the 10 px mouse strips are
     unhittable. Keep them inside the tile so neighbours aren't covered. */
  .widget-resize-e { width: 22px; right: 0; }
  .widget-resize-s { height: 22px; bottom: 0; }
  .widget-resize-corner { width: 30px; height: 30px; right: 0; bottom: 0; }

  /* Header buttons only render in edit mode (draggable=true). Make them
     comfortable tap targets there. */
  .widget[draggable="true"] .widget-actions { gap: 4px; }
  .widget[draggable="true"] .widget-actions button {
    width: 40px; height: 40px;
    font-size: calc(16px * var(--fs));
    opacity: 1;
  }
  .widget[draggable="true"] .widget-actions .gear i,
  .widget[draggable="true"] .widget-actions button i { font-size: calc(16px * var(--fs)); }

  /* Bigger tappable chips throughout the popover. */
  .widget-config-pop .cfg-chip { padding: 7px 11px; font-size: calc(12px * var(--fs)); }
  .widget-config-pop .cfg-chip i { font-size: calc(13px * var(--fs)); }
  .widget-config-pop .size-chips .size-pick {
    width: 34px; padding: 9px 0; font-size: calc(12px * var(--fs));
  }
  .widget-config-pop .size-step .size-pick {
    min-width: 38px; padding: 9px 10px; font-size: calc(14px * var(--fs));
  }
  .widget-config-pop .cfg-close { font-size: calc(22px * var(--fs)); padding: 4px 10px; }
}

/* The wrapped popover layout (size row → divider → option chips on the
   next row, scrolling vertically) is now the default for every screen
   size — see `.widget-config-pop.floating` / `.cfg-sep` above — so the
   former small-screen-only override here is no longer needed. */

/* ─────────────────────────────────────────────────────────────
 * Adaptive widget content via [data-span="N"] attribute
 * Widgets read their *current* span and trim non-essential content
 * when the user shrinks them. Pairs with span-2/3 typography rules
 * in styles-forecast.css; this section handles span-4 and per-widget
 * structural hiding (hero meta, models accuracy bar, etc.).
 * ───────────────────────────────────────────────────────────── */
/* Station hero — adaptive layout per widget width. Span 2 is iconography-only
   (number above, icon below, no meta). Span 3 adds the essentials (vlhkost +
   vítr). Span 4 shows the full meta row. Spark always hides below span 6.
   Hero grid collapses to a single column at every cramped span. */
.widget[data-widget-id="station"][data-span="2"] .hero-row,
.widget[data-widget-id="station"][data-span="3"] .hero-row,
.widget[data-widget-id="station"][data-span="4"] .hero-row,
.widget[data-widget-id="station"][data-span="5"] .hero-row {
  grid-template-columns: 1fr !important;
}
.widget[data-widget-id="station"][data-span="2"] .hero-spark,
.widget[data-widget-id="station"][data-span="3"] .hero-spark,
.widget[data-widget-id="station"][data-span="4"] .hero-spark,
.widget[data-widget-id="station"][data-span="5"] .hero-spark { display: none; }

/* Span 2 — keep number + icon side-by-side (icon always at temp level), just
   shrink the icon so both fit the narrow column. Eyebrow + locality centred
   to balance the column. Pressure stays in meta — see "always visible" rule
   below. */
.widget[data-widget-id="station"][data-span="2"] .hero-cond-icon {
  width: clamp(48px, 18vw, 72px);
  height: clamp(48px, 18vw, 72px);
}
.widget[data-widget-id="station"][data-span="2"] .hero-meta {
  font-size: calc(11px * var(--fs));
  gap: 3px 8px;
}
.widget[data-widget-id="station"][data-span="2"] .hero-meta .sep,
.widget[data-widget-id="station"][data-span="2"] .hero-meta .hm-mm-max,
.widget[data-widget-id="station"][data-span="2"] .hero-meta .hm-mm-min { display: none; }

/* Span 3 — drop max/min only; humidity, wind, precip, pressure must all
   stay visible. meta wraps freely onto multiple lines. */
.widget[data-widget-id="station"][data-span="3"] .hero-meta {
  font-size: calc(11px * var(--fs));
  gap: 3px 8px;
}
.widget[data-widget-id="station"][data-span="3"] .hero-meta .sep,
.widget[data-widget-id="station"][data-span="3"] .hero-meta .hm-mm-max,
.widget[data-widget-id="station"][data-span="3"] .hero-meta .hm-mm-min { display: none; }

/* Span ≥4 — everything visible (humidity, wind, max/min, precip, pressure). */

/* Models leaderboard — accuracy bar duplicates the score number. At narrow
   spans the bar adds visual noise without info gain. */
.widget[data-span="2"] .model-accuracy,
.widget[data-span="3"] .model-accuracy,
.widget[data-span="4"] .model-accuracy,
.widget[data-span="2"] .model-row .m-bar,
.widget[data-span="3"] .model-row .m-bar,
.widget[data-span="4"] .model-row .m-bar { display: none; }

/* Indoor sensors — fixed 2-column grid wastes space when the widget is
   narrow and a user has 1-2 indoor channels. Auto-fit lets them stack, still
   honouring the global --sensor-min slider in Tweaks (clamped so very large
   values don't strand narrow widgets). */
.widget[data-span="2"] .sensors-grid,
.widget[data-span="3"] .sensors-grid,
.widget[data-span="4"] .sensors-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(var(--sensor-min, 130px), 160px), 1fr));
}

/* Active state for the gear button while panel is open */
.widget-actions .gear.on { color: var(--accent) !important; border-color: var(--accent) !important; opacity: 1 !important; background: color-mix(in oklab, var(--accent) 18%, transparent); }

/* (config-open styling lives near the floating-popover block above) */

/* In ultra density the head is collapsed — make sure the inline config panel
   doesn't squish against the (hidden) title row. */
[data-density="ultra"] .widget-config-pop { margin-top: 2px; }

/* Inline toggle (small custom switch) */
.mini-toggle {
  position: relative; width: 26px; height: 14px;
  border: 0; border-radius: 999px; padding: 0;
  background: rgba(255,255,255,0.15);
  cursor: pointer;
  transition: background .15s;
}
.mini-toggle[data-on="1"] { background: var(--accent); }
.mini-toggle i {
  position: absolute; top: 2px; left: 2px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff;
  transition: transform .15s;
}
.mini-toggle[data-on="1"] i { transform: translateX(12px); }

/* Position config gear inline in widget-actions */
.widget-actions .gear i { font-size: calc(11px * var(--fs)); }
.widget { position: relative; }

/* ─────────────────────────────────────────────────────────────
 * Command palette (⌘K)
 * ───────────────────────────────────────────────────────────── */
.cmd-backdrop {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
  animation: fadeIn .12s ease;
}
.cmd-panel {
  width: min(560px, 92vw);
  background: var(--card-strong);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 80px rgba(0,0,0,0.4);
  overflow: hidden;
  display: flex; flex-direction: column;
  animation: slideUp .2s cubic-bezier(.4,0,.2,1);
}
.cmd-input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.cmd-input-row i { color: var(--muted); font-size: calc(16px * var(--fs)); }
.cmd-input {
  flex: 1; border: 0; background: transparent;
  color: var(--text); font: inherit; font-size: calc(15px * var(--fs));
  outline: none;
}
.cmd-input::placeholder { color: var(--muted); }
.cmd-kbd {
  font-family: var(--mono); font-size: calc(10px * var(--fs));
  padding: 2px 6px; border-radius: calc(4px * var(--r-scale));
  border: 1px solid var(--border);
  color: var(--muted);
}
.cmd-list {
  max-height: 50vh; overflow-y: auto;
  padding: 6px;
}
.cmd-section {
  padding: 6px 10px 2px;
  font-family: var(--mono); font-size: calc(9px * var(--fs));
  color: var(--dim);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.cmd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--text);
  transition: background var(--t-fast);
  font-size: calc(13px * var(--fs));
}
.cmd-item:hover, .cmd-item.active {
  background: color-mix(in oklab, var(--accent) 14%, var(--card-hover));
}
.cmd-item .ico {
  width: 22px; height: 22px; border-radius: calc(6px * var(--r-scale));
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: calc(12px * var(--fs));
}
.cmd-item .desc { color: var(--muted); font-size: calc(11px * var(--fs)); margin-left: auto; }
.cmd-item .kbd {
  font-family: var(--mono); font-size: calc(10px * var(--fs));
  padding: 1px 5px; border-radius: calc(3px * var(--r-scale));
  border: 1px solid var(--border);
  color: var(--muted);
  margin-left: auto;
}

/* ─────────────────────────────────────────────────────────────
 * Density-aware overrides
 * ───────────────────────────────────────────────────────────── */
/* Ultra density — tightest possible, but titles stay: hiding them is only
   the „Skrýt nadpisy widgetů“ switch (hideTitles). The head is just lower. */
[data-density="ultra"] .widget { padding: 6px; gap: 4px; }
[data-density="ultra"] .widget-head {
  min-height: 16px;
  padding: 0;
  margin-bottom: 0;
}
[data-density="ultra"] .widget-actions button { width: 18px; height: 18px; font-size: calc(10px * var(--fs)); }
[data-density="ultra"] .hero-temp-num .num { font-size: clamp(36px, 5vw, 56px); }
[data-density="ultra"] .hour-card { flex-basis: 50px; width: 50px; padding: 4px 0 6px; }
[data-density="ultra"] .hour-card .hour-icon img { width: 22px; height: 22px; }
[data-density="ultra"] .hour-card .hour-temp { font-size: calc(12px * var(--fs)); }
[data-density="ultra"] .sensor-tile { padding: 5px 7px; }
[data-density="ultra"] .sensor-value { font-size: calc(14px * var(--fs)); }
[data-density="ultra"] .daily-row { padding: 4px 6px; }
[data-density="ultra"] .daily-row .d-icon img { width: 26px; height: 26px; }

/* "Hide titles" tightens further */
.dash-grid.hide-titles .widget { padding: calc(var(--pad-card) * 0.85); }
.dash-grid.hide-titles .widget-head { display: none; }
.dash-grid.hide-titles .widget-head:has(.widget-header-extras),
.dash-grid.editing.hide-titles .widget-head { display: flex; }

/* ─────────────────────────────────────────────────────────────
 * Edit banner — replaced with compact toast
 * ───────────────────────────────────────────────────────────── */
.edit-banner {
  padding: 6px 12px;
  font-size: calc(11px * var(--fs));
  border-radius: 999px;
  align-self: center;
}

/* ─────────────────────────────────────────────────────────────
 * Tweaks panel — wider and more sections
 * ───────────────────────────────────────────────────────────── */
.twk-panel {
  width: 320px !important;
}

/* ─────────────────────────────────────────────────────────────
 * Aurora variant — sharper modern glassmorphism
 * ───────────────────────────────────────────────────────────── */
[data-variant="aurora"] .widget {
  /* More glass: lower card opacity + stronger blur. The body gradient
     (accent + temp tint) shines through clearly. */
  background: color-mix(in oklab, var(--card) 38%, transparent);
  -webkit-backdrop-filter: blur(30px) saturate(170%);
  backdrop-filter: blur(30px) saturate(170%);
}

/* ─────────────────────────────────────────────────────────────
 * Snazzy accent halo on hovered widgets
 * ───────────────────────────────────────────────────────────── */
.widget::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 0%, transparent);
  transition: box-shadow .2s;
}
.widget:hover::after {
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 32%, transparent);
}

/* ─────────────────────────────────────────────────────────────
 * Empty state shimmer enhancements
 * ───────────────────────────────────────────────────────────── */
.skel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.skel-card {
  height: 140px;
  border-radius: var(--r-md);
  background: linear-gradient(90deg, var(--card) 0%, var(--card-hover) 50%, var(--card) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.8s ease-in-out infinite;
}

/* ─────────────────────────────────────────────────────────────
 * Background gradient — animated aurora orbs (subtle)
 * ───────────────────────────────────────────────────────────── */
[data-animations="on"][data-variant="aurora"] body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 50% 40% at 20% 20%, color-mix(in oklab, var(--accent) 24%, transparent), transparent 60%),
    radial-gradient(ellipse 40% 50% at 80% 80%, color-mix(in oklab, #a78bfa 18%, transparent), transparent 60%);
  filter: blur(60px);
  opacity: 0.6;
  animation: orb-drift 20s ease-in-out infinite alternate;
}
@keyframes orb-drift {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-3%, 4%); }
  100% { transform: translate(4%, -3%); }
}

/* Reduce motion: kill the orb animation but keep the gradient */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none !important; }
}

/* ─────────────────────────────────────────────────────────────
 * Toast notifications (used by tweaks like "Reset done")
 * ───────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 18px; left: 50%;
  transform: translateX(-50%);
  z-index: 9000;
  padding: 8px 14px;
  background: var(--card-strong);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text);
  font-size: calc(12px * var(--fs));
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  display: inline-flex; align-items: center; gap: 8px;
  animation: toastIn .25s cubic-bezier(.4,0,.2,1);
}
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Animated transitions during widget resize. JS still writes inline gridRow,
   but with a transition CSS attaches a smooth interpolation. min-height also
   eases so height-matched rows ease into their new bounds. Off by default
   because the ResizeObserver loop re-fires during transitions, which can
   amplify costs on slow devices. */
[data-grid-transitions="on"] .widget {
  transition:
    transform .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    min-height .25s cubic-bezier(.4,0,.2,1);
}

/* ─────────────────────────────────────────────────────────────
 * Preset dropdown (edit-mode topbar)
 * ───────────────────────────────────────────────────────────── */
.preset-menu-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 900;
  min-width: 260px;
  max-width: 340px;
  background: var(--card-strong);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  animation: configIn .15s cubic-bezier(.4,0,.2,1);
}
.preset-menu-head {
  font-size: calc(9.5px * var(--fs)); font-family: var(--mono);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dim);
  padding: 6px 10px 4px;
}
.preset-menu-item {
  appearance: none;
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px;
  background: transparent; border: 1px solid transparent;
  color: var(--text);
  font-family: inherit; font-size: calc(12px * var(--fs)); text-align: left;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.preset-menu-item:hover {
  background: color-mix(in oklab, var(--accent) 12%, var(--card-hover));
  border-color: color-mix(in oklab, var(--accent) 30%, var(--border));
}
.preset-menu-item > i {
  font-size: calc(14px * var(--fs)); color: var(--accent);
  width: 18px; text-align: center; flex-shrink: 0;
}
.preset-menu-item .pm-text { flex: 1; min-width: 0; }
.preset-menu-item .pm-name { font-weight: 600; font-size: calc(12.5px * var(--fs)); }
.preset-menu-item .pm-desc {
  font-size: calc(10.5px * var(--fs)); color: var(--muted);
  margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.preset-menu-item.save { color: var(--accent); }
.preset-menu-item .pm-del {
  appearance: none;
  background: transparent; border: 0;
  color: var(--muted); cursor: pointer;
  padding: 4px; border-radius: calc(4px * var(--r-scale));
  font-size: calc(12px * var(--fs));
  transition: color var(--t-fast), background var(--t-fast);
}
.preset-menu-item .pm-del:hover { color: var(--bad); background: color-mix(in oklab, var(--bad) 14%, transparent); }
.preset-menu-sep {
  height: 1px; background: var(--border);
  margin: 4px 6px;
}

/* Toast action button (e.g. "Vrátit" undo on widget hide). Sits to the right
   of the message inside the same pill — same visual weight as a tweak pill. */
.toast-action {
  appearance: none;
  border: 1px solid color-mix(in oklab, var(--accent) 50%, var(--border));
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  color: var(--accent);
  font-family: inherit;
  font-size: calc(11px * var(--fs)); font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 999px;
  cursor: pointer;
  margin-left: 4px;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.toast-action:hover {
  background: color-mix(in oklab, var(--accent) 28%, transparent);
  border-color: var(--accent);
}

/* ─────────────────────────────────────────────────────────────
 * Unit display
 * ───────────────────────────────────────────────────────────── */
.unit-hint { color: var(--muted); font-size: 0.6em; margin-left: 0.15em; font-weight: 500; }

/* ============================================================
 * VARIANT OVERRIDES for v2-era components
 * ------------------------------------------------------------
 * Older surfaces (.gauge, .hero, .sensor-group) already have
 * variant treatments in styles.css. These rules extend the same
 * design intent to the new components added in v2: hourly matrix,
 * floating gear popover, chip/pill controls.
 *
 * Per-variant intent (must stay consistent with styles.css):
 *   • aurora   — glass + blur, accent gradient on highlights
 *   • studio   — solid surfaces, 1.5px borders, no blur
 *   • console  — terminal mono, sharp corners (radius 0)
 *   • ledger   — serif italic, no fills, hairline borders
 * ============================================================ */

/* ---------- AURORA ---------- */
[data-variant="aurora"] .widget-config-pop.floating {
  background: color-mix(in oklab, var(--card) 72%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
}
[data-variant="aurora"] .topbar-pill {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ---------- STUDIO ---------- */
[data-variant="studio"] .widget-config-pop.floating {
  background: var(--card-strong);
  border-width: 1.5px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  border-radius: calc(4px * var(--r-scale));
}
[data-variant="studio"] .topbar,
[data-variant="studio"] .topbar-pill,
[data-variant="studio"] .cfg-chip,
[data-variant="studio"] .size-pick {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-radius: calc(4px * var(--r-scale));
}
[data-variant="studio"] .topbar-pill,
[data-variant="studio"] .cfg-chip,
[data-variant="studio"] .size-pick { border-width: 1.5px; }
[data-variant="studio"] .hourly-matrix .hm-temp { font-weight: 700; letter-spacing: -0.02em; }

/* ---------- CONSOLE ---------- */
[data-variant="console"] .widget-config-pop.floating {
  background: var(--card);
  border-radius: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  font-family: var(--mono);
}
[data-variant="console"] .topbar,
[data-variant="console"] .topbar-pill,
[data-variant="console"] .cfg-chip,
[data-variant="console"] .size-pick {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-radius: 0;
  font-family: var(--mono);
}
[data-variant="console"] .hourly-matrix,
[data-variant="console"] .hourly-matrix .hm-cell {
  font-family: var(--mono);
}
[data-variant="console"] .hourly-matrix .hm-temp { font-weight: 500; }

/* ---------- LEDGER ---------- */
[data-variant="ledger"] .widget-config-pop.floating {
  background: var(--card-strong);
  border: 1px solid var(--border);
  border-radius: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 6px 18px rgba(60,30,15,0.12);
  font-family: var(--serif);
}
[data-variant="ledger"] .topbar-pill {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  font-family: var(--serif);
  font-style: italic;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
[data-variant="ledger"] .cfg-chip,
[data-variant="ledger"] .size-pick {
  border-radius: 0;
  font-family: var(--serif);
  font-style: italic;
}
[data-variant="ledger"] .hourly-matrix,
[data-variant="ledger"] .hourly-matrix .hm-cell { font-family: var(--serif); }
[data-variant="ledger"] .hourly-matrix .hm-temp { font-style: italic; font-weight: 600; }
[data-variant="ledger"] .hourly-matrix .hm-date { font-family: var(--serif); font-style: italic; }
[data-variant="ledger"] .hourly-matrix .hm-cell.is-day-edge {
  box-shadow: inset 1px 0 0 var(--border);          /* hairline, not accent */
}
[data-variant="ledger"] .hourly-matrix .hm-cell.is-now {
  background: color-mix(in oklab, var(--accent) 8%, transparent);
}

/* Extend .now-temp gradient to all variants (was aurora-only) so the hero
   stays visually weighty regardless of theme. Studio keeps it bold solid;
   console flat mono; ledger serif italic. */
[data-variant="studio"] .now-temp { font-weight: 800; letter-spacing: -0.03em; }
[data-variant="console"] .now-temp { font-family: var(--mono); font-weight: 500; }
[data-variant="ledger"] .now-temp { font-family: var(--serif); font-style: italic; font-weight: 600; }

/* ─────────────────────────────────────────────────────────────
 * Site nav — "Stanice | Předpověď" pill, identical on the station
 * page (/ms) so the two pages read as one product.
 * ───────────────────────────────────────────────────────────── */
.site-nav {
  display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0;
  padding: 2px; margin-left: 4px; border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--card-strong) 40%, transparent);
}
.site-nav-item {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: calc(11.5px * var(--fs)); font-weight: 600; line-height: 1.3;
  color: var(--muted); text-decoration: none; white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.site-nav-item i { font-size: calc(12px * var(--fs)); }
a.site-nav-item:hover { color: var(--text); background: color-mix(in oklab, var(--accent) 12%, transparent); }
.site-nav-item.active {
  color: var(--text);
  background: color-mix(in oklab, var(--accent) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 45%, transparent);
}
/* Mobile topbar (≤880 px) wraps brand / actions / status — keep the pill
   right after the brand instead of jumping to the very start. */
@media (max-width: 880px) {
  .site-nav { order: 1; }
}
@media (max-width: 640px) {
  .site-nav-item span { display: none; }
  .site-nav-item { padding: 4px 8px; }
}

/* ─────────────────────────────────────────────────────────────
 * Instruments — wind rose, barometer, 24 h extremes (instruments.jsx)
 * ───────────────────────────────────────────────────────────── */
.ins-empty { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 120px; color: var(--muted); font-size: calc(12px * var(--fs)); }
.ins-rose, .ins-baro { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 100%; }
.ins-rose-svg { width: 100%; max-width: 230px; height: auto; display: block; overflow: visible; }
.ins-rose-svg path { transition: fill-opacity var(--t-fast); }
.ins-rose-svg g:hover > path { fill-opacity: 1; }
.ins-rose-foot { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: calc(11px * var(--fs)); color: var(--muted); }
.ins-rose-prev b { color: var(--text); font-weight: 700; }
.ins-rose-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 8px; font-family: var(--mono); font-size: calc(9.5px * var(--fs)); }
.ins-rose-legend span { display: inline-flex; align-items: center; gap: 3px; }
.ins-rose-legend i { width: 9px; height: 9px; border-radius: calc(2px * var(--r-scale)); }
.ins-unit { opacity: .7; }
.ins-baro-svg { width: 100%; max-width: 250px; height: auto; display: block; overflow: visible; }
.ins-baro-foot { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.ins-trend { display: inline-flex; align-items: center; gap: 5px; font-size: calc(12px * var(--fs)); color: var(--text); }
.ins-trend i { color: var(--accent); }
.ins-note { font-size: calc(11px * var(--fs)); color: var(--muted); font-family: var(--mono); }
.ins-ext { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; }
.ins-ext-item {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: 8px 10px; border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--accent) 5%, transparent);
  border: 1px solid var(--border);
}
.ins-ext-k { display: inline-flex; align-items: center; gap: 5px; font-size: calc(10.5px * var(--fs)); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.ins-ext-k i { color: var(--accent); font-size: calc(12px * var(--fs)); }
.ins-ext-v { font-size: calc(16px * var(--fs)); font-weight: 700; color: var(--text); white-space: nowrap; }
.ins-ext-t { font-size: calc(10.5px * var(--fs)); color: var(--muted); font-family: var(--mono); }

/* ─────────────────────────────────────────────────────────────
 * Panel „Vzhled a rozložení" — in app colours. The shell
 * (tweaks-panel.jsx) injects its own light styles inline; the
 * [data-theme] prefix out-ranks them. Same block lives in the station
 * page's styles.css — keep both in sync.
 * ───────────────────────────────────────────────────────────── */
[data-theme] .twk-panel {
  width: 340px !important;
  max-width: calc(100vw - 24px);
  background: color-mix(in oklab, var(--card-strong) 94%, transparent);
  color: var(--text);
  border: 1px solid color-mix(in oklab, var(--accent) 20%, var(--border));
  border-radius: var(--r-md);
  box-shadow: 0 18px 50px rgba(0,0,0,.32), 0 1px 0 rgba(255,255,255,.04) inset;
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  font: calc(12.5px * var(--fs))/1.45 var(--sans);
}
[data-theme] .twk-hd { padding: 11px 8px 10px 16px; border-bottom: 1px solid var(--border); }
[data-theme] .twk-hd b { font-size: calc(13px * var(--fs)); font-weight: 700; letter-spacing: .01em; color: var(--text); }
[data-theme] .twk-x { color: var(--muted); cursor: pointer; }
[data-theme] .twk-x:hover { background: var(--card-hover); color: var(--text); }
[data-theme] .twk-body { padding: 12px 16px 16px; gap: 10px; scrollbar-color: var(--border-strong) transparent; }
[data-theme] .twk-lbl { color: var(--text); }
[data-theme] .twk-lbl > span:first-child { font-weight: 500; }
[data-theme] .twk-val { color: var(--muted); font-family: var(--mono); font-size: calc(11px * var(--fs)); }
[data-theme] .twk-sect { color: var(--muted); }
[data-theme] .twk-field { background: var(--card); border: 1px solid var(--border); color: var(--text); }
[data-theme] .twk-slider { background: var(--grid); height: 4px; }
[data-theme] .twk-slider::-webkit-slider-thumb {
  width: 15px; height: 15px; background: var(--accent);
  border: 2px solid var(--card-strong); box-shadow: 0 1px 4px rgba(0,0,0,.3); cursor: pointer;
}
[data-theme] .twk-slider::-moz-range-thumb {
  width: 13px; height: 13px; background: var(--accent);
  border: 2px solid var(--card-strong); box-shadow: 0 1px 4px rgba(0,0,0,.3); cursor: pointer;
}
[data-theme] .twk-toggle { background: var(--grid); cursor: pointer; box-shadow: inset 0 0 0 1px var(--border); }
[data-theme] .twk-toggle[data-on="1"] { background: var(--accent); box-shadow: none; }
[data-theme] .twk-chips { gap: 5px; }
[data-theme] .twk-chip { height: 30px; border-radius: 999px; cursor: pointer; box-shadow: 0 0 0 1px var(--border); }
[data-theme] .twk-chip[data-on="1"] { box-shadow: 0 0 0 2px var(--card-strong), 0 0 0 4px var(--text); }
[data-theme] .twk-chip svg { top: 50%; left: 50%; transform: translate(-50%, -50%); }

.vz-sect { display: flex; flex-direction: column; gap: 9px; padding-top: 12px; border-top: 1px solid var(--border); }
.vz-sect:first-child { padding-top: 0; border-top: 0; }
.vz-sect-h {
  display: flex; align-items: center; gap: 7px;
  font-size: calc(11px * var(--fs)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.vz-sect-h i { color: var(--accent); font-size: calc(12px * var(--fs)); }
.vz-hint { font-size: calc(11px * var(--fs)); color: var(--muted); margin-top: -5px; line-height: 1.35; }
.vz-choices { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 6px; }
.vz-choice, .vz-preset {
  appearance: none; position: relative; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 7px 4px; border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--card) 70%, transparent);
  color: var(--muted); font: 600 calc(11.5px * var(--fs))/1.2 var(--sans); cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.vz-choice > span, .vz-preset > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.vz-choice i, .vz-preset > i { font-size: calc(15px * var(--fs)); }
.vz-choice small { font-weight: 500; font-size: calc(10px * var(--fs)); opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.vz-choice:hover, .vz-preset:hover { color: var(--text); border-color: var(--border-strong); }
.vz-choice[aria-checked="true"], .vz-preset[aria-pressed="true"] {
  color: var(--text); border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 16%, transparent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.vz-choice[aria-checked="true"] i, .vz-preset[aria-pressed="true"] > i { color: var(--accent); }
/* own drawings from the page switch (Výchozí stránka) instead of an icon */
.vz-choice > svg { width: calc(18px * var(--fs)); height: calc(18px * var(--fs)); flex-shrink: 0; }
.vz-choice[aria-checked="true"] > svg { color: var(--accent); }
.vz-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.vz-preset { padding: 8px 4px 7px; }
.vz-preset-del {
  position: absolute; top: 2px; right: 2px; width: 16px; height: 16px;
  display: grid; place-items: center; border-radius: 50%;
  color: var(--muted); font-size: calc(12px * var(--fs)); opacity: 0; transition: opacity var(--t-fast);
}
.vz-preset:hover .vz-preset-del, .vz-preset-del:focus { opacity: 1; }
.vz-preset-del:hover { color: var(--bad); background: var(--card-hover); }
.vz-actions { display: flex; gap: 6px; }
.vz-btn {
  appearance: none; flex: 1; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 8px; border-radius: var(--r-sm);
  border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--border));
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  color: var(--text); font: 600 calc(11.5px * var(--fs))/1.2 var(--sans); cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.vz-btn i { color: var(--accent); font-size: calc(13px * var(--fs)); }
.vz-btn:hover { background: color-mix(in oklab, var(--accent) 22%, transparent); border-color: var(--accent); }
.vz-btn-quiet { border-color: var(--border); background: transparent; color: var(--muted); }
.vz-btn-quiet i { color: var(--muted); }
.vz-btn-quiet:hover { color: var(--text); background: var(--card-hover); border-color: var(--border-strong); }
@media (max-width: 480px) {
  [data-theme] .twk-panel { right: 12px !important; bottom: 12px !important; }
  .vz-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ─────────────────────────────────────────────────────────────
 * Station hero extras — feels-like line + 24 h range bar, same as
 * the station page (/ms) hero. Keep both in sync.
 * ───────────────────────────────────────────────────────────── */
.hero-sub { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; margin-top: 4px; font-size: calc(13px * var(--fs)); color: var(--muted); }
.hero-sub b { color: var(--text); font-weight: 600; }
.hero-sub .sep { color: var(--dim); }
.trange { display: flex; align-items: center; gap: 10px; margin-top: 10px; max-width: 360px; font-family: var(--mono); font-size: calc(11.5px * var(--fs)); color: var(--muted); }
.trange-val { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.trange-track { position: relative; flex: 1; height: 6px; border-radius: 99px; }
.trange-scale { position: absolute; inset: 0; border-radius: 99px; opacity: .18; }
.trange-span { position: absolute; inset: 0; border-radius: 99px; }
.trange-now {
  position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--text); border: 2px solid var(--card-strong); box-shadow: 0 0 0 1px var(--border-strong);
}
.trange-zero { position: absolute; top: -3px; bottom: -3px; width: 1px; margin-left: -.5px; background: var(--muted); opacity: .45; }
.widget[data-widget-id="station"][data-span="2"] .trange,
.widget[data-widget-id="station"][data-span="2"] .hero-sub { display: none; }

/* ═════════════════════════════════════════════════════════════
 * Záhlaví — společné pro stránku stanice (/ms) i předpovědi (index2).
 * Stejný blok je v obou projektech (index2: styles-v2.css, stanice:
 * styles.css) — držet shodný. Vlevo logo + lokalita, uprostřed
 * přepínač Stanice | Předpověď, vpravo stav dat a akce.
 * Na mobilu dva řádky: logo + akce / přepínač + stav.
 * ═════════════════════════════════════════════════════════════ */
.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px 16px;
  min-height: 56px;
  padding: 8px 10px 8px 9px;
  border: 1px solid color-mix(in oklab, var(--accent) 12%, var(--border));
  border-radius: calc(var(--r-md) + calc(2px * var(--r-scale)));
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--text) 4%, transparent), transparent 75%),
    color-mix(in oklab, var(--card-strong) 64%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 1px 0 color-mix(in oklab, var(--text) 6%, transparent) inset,
              0 12px 28px -16px rgba(0, 0, 0, .55);
}
[data-theme="light"] .topbar {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 10px 24px -16px rgba(15, 23, 42, .28);
}

/* logo = ikona aktuálního počasí na dlaždici v barvě akcentu */
.topbar .brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.topbar a.brand { color: inherit; text-decoration: none; }   /* logo = odkaz na mapu stanic /lokalita/ */
.topbar a.brand:hover .brand-title { color: var(--text); }
.topbar .brand-mark {
  width: 38px; height: 38px; flex-shrink: 0;
  display: grid; place-items: center; overflow: hidden;
  border-radius: calc(11px * var(--r-scale));
  background: radial-gradient(120% 120% at 30% 20%,
    color-mix(in oklab, var(--accent) 32%, transparent),
    color-mix(in oklab, var(--accent) 8%, transparent));
  border: 1px solid color-mix(in oklab, var(--accent) 32%, transparent);
}
.topbar .brand-mark img { width: 30px; height: 30px; padding: 0; object-fit: contain; display: block; }
.topbar .brand-text {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px; line-height: 1.15; min-width: 0; overflow: hidden;
}
.topbar .brand-title { font-size: calc(10px * var(--fs)); font-weight: 700; letter-spacing: .16em; color: var(--muted); }
.topbar .brand-locality {
  font-size: calc(16.5px * var(--fs)); font-weight: 700; letter-spacing: -.01em; color: var(--text);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* přepínač Stanice | Předpověď = hlavní navigace, uprostřed */
.topbar .site-nav {
  justify-self: center; margin: 0; padding: 3px; gap: 2px;
  border-radius: calc(12px * var(--r-scale)); border: 1px solid var(--border);
  background: color-mix(in oklab, var(--text) 5%, transparent);
}
.topbar .site-nav-item {
  justify-content: center; gap: 7px;
  min-width: 118px; height: 32px; padding: 0 16px;
  border-radius: calc(9px * var(--r-scale)); font-size: calc(13px * var(--fs)); font-weight: 600; color: var(--muted);
}
.topbar .site-nav-item i { font-size: calc(14px * var(--fs)); }
.topbar a.site-nav-item:hover { color: var(--text); background: color-mix(in oklab, var(--text) 7%, transparent); }
.topbar .site-nav-item.active {
  color: var(--text);
  background: color-mix(in oklab, var(--accent) 22%, var(--card-strong));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 50%, transparent),
              0 3px 10px -4px color-mix(in oklab, var(--accent) 55%, transparent);
}
.topbar .site-nav-item.active i { color: var(--accent); }

/* vpravo: stav dat | akce */
.topbar-right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
.topbar .topbar-status {
  flex: 0 1 auto; justify-content: flex-end; min-width: 0; overflow: hidden;
  gap: 6px; padding: 0; border: 0;
  font-family: var(--mono); font-size: calc(11px * var(--fs)); color: var(--muted);
}
.topbar .topbar-status .status-dot { width: 7px; height: 7px; }
.topbar .topbar-quick { border: 0; margin: 0; padding: 0; }
.topbar .topbar-actions {
  display: flex; align-items: center; gap: 2px; flex-shrink: 0;
  padding-left: 10px; border-left: 1px solid var(--border);
}
.topbar .topbar-btn {
  width: 34px; height: 34px; display: inline-grid; place-items: center;
  border: 1px solid transparent; border-radius: calc(9px * var(--r-scale));
  background: transparent; color: var(--muted);
}
.topbar .topbar-btn i { font-size: calc(15px * var(--fs)); line-height: 1; }
.topbar .topbar-btn:hover { color: var(--text); background: color-mix(in oklab, var(--text) 8%, transparent); border-color: transparent; }
.topbar .topbar-btn[aria-pressed="true"] {
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 15%, transparent);
  border-color: color-mix(in oklab, var(--accent) 35%, transparent);
}
.topbar .topbar-btn.primary[aria-pressed="true"] { background: var(--accent); color: #0b1020; border-color: var(--accent); }
.topbar .topbar-btn-wide { width: auto; padding: 0 10px; gap: 6px; grid-auto-flow: column; }
.topbar .topbar-btn-label { font-family: var(--mono); font-size: calc(11.5px * var(--fs)); font-weight: 600; letter-spacing: .01em; }
.topbar .topbar-btn-donate { color: var(--muted); background: transparent; border-color: transparent; }
.topbar .topbar-btn-donate i { color: #f472b6; }
.topbar .topbar-btn-donate:hover { color: var(--text); background: color-mix(in oklab, #f472b6 14%, transparent); border-color: transparent; }
[data-theme="light"] .topbar .topbar-btn-donate i { color: #db2777; }

/* varianty */
[data-variant="studio"] .topbar {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: var(--card-strong); border-radius: calc(6px * var(--r-scale));
}
[data-variant="studio"] .topbar .brand-mark,
[data-variant="studio"] .topbar .site-nav { border-radius: calc(6px * var(--r-scale)); }
[data-variant="studio"] .topbar .site-nav-item,
[data-variant="studio"] .topbar .topbar-btn { border-radius: calc(4px * var(--r-scale)); }

[data-variant="console"] .topbar {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: var(--card); border-radius: 0; box-shadow: none;
}
[data-variant="console"] .topbar .brand-mark,
[data-variant="console"] .topbar .site-nav,
[data-variant="console"] .topbar .site-nav-item,
[data-variant="console"] .topbar .topbar-btn { border-radius: 0; }
[data-variant="console"] .topbar .brand-locality,
[data-variant="console"] .topbar .site-nav-item { font-family: var(--mono); font-weight: 500; letter-spacing: 0; }

[data-variant="ledger"] .topbar {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: color-mix(in oklab, var(--bg) 94%, transparent);
  border: 0; border-bottom: 3px double var(--border-strong);
  border-radius: 0; box-shadow: none;
}
[data-variant="ledger"] .topbar .brand-mark { border-radius: 50%; background: transparent; border-color: var(--border); }
[data-variant="ledger"] .topbar .brand-title { font-family: var(--serif); font-style: normal; letter-spacing: .22em; }
[data-variant="ledger"] .topbar .brand-locality { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: calc(19px * var(--fs)); letter-spacing: 0; }
[data-variant="ledger"] .topbar .site-nav { background: transparent; border: 0; border-radius: 0; }
[data-variant="ledger"] .topbar .site-nav-item { border-radius: 0; font-family: var(--serif); font-style: italic; font-size: calc(14.5px * var(--fs)); font-weight: 500; }
[data-variant="ledger"] .topbar .site-nav-item.active { background: transparent; box-shadow: inset 0 -2px 0 var(--text); }
[data-variant="ledger"] .topbar .site-nav-item.active i { color: inherit; }
[data-variant="ledger"] .topbar .topbar-btn { border-radius: 0; }

/* tablet a mobil: logo + akce / přepínač + stav */
@media (max-width: 880px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand actions" "nav status";
    gap: 8px 10px; min-height: 0; padding: 8px;
  }
  .topbar .brand { grid-area: brand; }
  .topbar-right { display: contents; }
  .topbar .site-nav { grid-area: nav; justify-self: stretch; display: flex; }
  .topbar .site-nav-item { flex: 1; min-width: 0; height: 30px; padding: 0 10px; font-size: calc(12.5px * var(--fs)); }
  .topbar .topbar-status {
    grid-area: status; width: auto; flex: none;
    padding: 0; border: 0; font-size: calc(10.5px * var(--fs)); justify-content: flex-end;
  }
  .topbar .topbar-actions { grid-area: actions; padding-left: 0; border-left: 0; }
  .topbar .topbar-btn { width: 32px; height: 32px; }
  .topbar .brand-mark { width: 34px; height: 34px; border-radius: calc(10px * var(--r-scale)); }
  .topbar .brand-mark img { width: 26px; height: 26px; }
  .topbar .brand-locality { font-size: calc(15px * var(--fs)); max-width: none; }
  [data-variant="ledger"] .topbar .brand-locality { font-size: calc(17px * var(--fs)); }
  .topbar .topbar-quick { display: none; }
}
@media (max-width: 640px) {
  .topbar .site-nav-item span { display: inline; }
  .topbar .site-nav-item { padding: 0 8px; gap: 5px; }
  .topbar .topbar-btn-donate { width: 32px; padding: 0; }
  .topbar .topbar-btn-donate .topbar-btn-label,
  .topbar .status-age { display: none; }
}
/* only index2: on phones the status is just the dot + model picker (when the
   model is in the header — with the preset bar it lives there, status keeps its text) */
@media (max-width: 640px) {
  .topbar .topbar-status:has(> .model-picker) > span:not(.status-dot) { display: none; }
}
/* Podpořit — same modal as the station page (account + QR /qr.png) */
.chart-modal.donate-modal { max-width: 380px; }
.donate-modal-body { color: var(--muted); line-height: 1.55; }
.donate-modal-body p { margin: 0 0 12px; }
.donate-account {
  text-align: center; font-size: calc(20px * var(--fs)); font-weight: 600; color: var(--text);
  font-family: var(--mono); letter-spacing: 0.02em; margin: 16px 0 !important;
}
.donate-qr { display: block; margin: 16px auto 4px; max-width: 200px; width: 100%; height: auto; border-radius: var(--r-md); }
.donate-qr-popis { text-align: center; font-size: calc(13px * var(--fs)); margin: 10px 0 0 !important; }

/* puntík stavu svítí klidně (bez pulzování) — obě stránky */
.topbar .status-dot i { animation: none; box-shadow: none; opacity: 1; }
.topbar .status-dot.live i,
.topbar .status-dot.recent-fresh i { box-shadow: 0 0 0 3px color-mix(in oklab, var(--ok) 22%, transparent); }

/* Plynulý přechod mezi stránkou stanice a předpovědi (View Transitions mezi
   dokumenty — Chrome, Edge, Safari 18.2+; jinde obyčejné načtení). Záhlaví má
   na obou stránkách stejné jméno, takže při přechodu stojí na místě. */
@view-transition { navigation: auto; }
.topbar { view-transition-name: zahlavi; }
::view-transition-group(*) { animation-duration: .28s; }
/* „Omezit pohyb“ (Lukášův Windows ho má zapnutý): přechod zůstává, jen jako
   čisté prolnutí bez posunu — proto jen animation-name: none. `animation: none`
   vynulovalo i délku, kterou prolnutí dědí, a stránka se přepnula naráz na
   kostru a pak na obsah = bliknutí (opraveno 21. 10. 2026). A nekonečné
   animace se přehrají jen jednou — globální pravidlo je zkracuje na 0,01 ms,
   takže by jinak zběsile blikaly. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) { animation-name: none; }
  *, *::before, *::after { animation-iteration-count: 1 !important; }
}

/* ─────────────────────────────────────────────────────────────
 * Preset bar — layout presets right on the page (PresetBar in app.jsx).
 * Managing them is in the Vzhled panel (.vz-plist below).
 * ───────────────────────────────────────────────────────────── */
.preset-bar { display: flex; align-items: center; gap: 10px; min-width: 0; margin: -2px 0; }
.preset-bar-lbl {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-size: calc(10px * var(--fs)); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.preset-bar-lbl i { color: var(--accent); font-size: calc(12px * var(--fs)); }
.preset-bar-list {
  display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none;
  padding: 2px; margin: -2px;
}
.preset-bar-list::-webkit-scrollbar { display: none; }
.preset-chip {
  appearance: none; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--card) 55%, transparent);
  color: var(--muted); font: 600 calc(12.5px * var(--fs))/1 var(--sans); white-space: nowrap; cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.preset-chip i { font-size: calc(13px * var(--fs)); }
.preset-chip:hover { color: var(--text); border-color: var(--border-strong); }
.preset-chip[aria-pressed="true"] {
  color: var(--text);
  background: color-mix(in oklab, var(--accent) 20%, var(--card));
  border-color: color-mix(in oklab, var(--accent) 55%, transparent);
}
.preset-chip[aria-pressed="true"] i { color: var(--accent); }
[data-variant="aurora"] .preset-chip { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
[data-variant="studio"] .preset-chip { border-radius: calc(4px * var(--r-scale)); border-width: 1.5px; background: var(--card); }
[data-variant="console"] .preset-chip { border-radius: 0; font-family: var(--mono); font-weight: 500; }
[data-variant="ledger"] .preset-chip {
  border: 0; border-radius: 0; background: transparent; padding: 0 8px;
  font-family: var(--serif); font-style: italic; font-size: calc(14px * var(--fs)); font-weight: 500;
}
[data-variant="ledger"] .preset-chip[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--text); }
[data-variant="ledger"] .preset-chip[aria-pressed="true"] i { color: inherit; }
@media (max-width: 640px) {
  .preset-bar-lbl { display: none; }
  .preset-chip { height: 28px; padding: 0 10px; font-size: calc(12px * var(--fs)); }
}

/* Vzhled panel — preset management rows */
.vz-plist { display: flex; flex-direction: column; gap: 2px; }
.vz-prow {
  display: flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 2px 0 8px;
  border-radius: var(--r-sm);
}
.vz-prow:hover { background: color-mix(in oklab, var(--text) 5%, transparent); }
.vz-prow-ico { color: var(--accent); font-size: calc(13px * var(--fs)); width: 18px; flex-shrink: 0; }
.vz-prow-name { flex: 1; min-width: 0; font-size: calc(12.5px * var(--fs)); font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vz-prow.is-off .vz-prow-name, .vz-prow.is-off .vz-prow-ico { color: var(--muted); opacity: .6; }
/* the row itself switches the layout (the preset bar may be off) */
.vz-prow-pick {
  appearance: none; flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; align-self: stretch;
  padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.vz-prow-pick[aria-pressed="true"] { cursor: default; }
.vz-prow-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
.vz-prow.is-now { background: color-mix(in oklab, var(--accent) 12%, transparent); }
.vz-prow.is-now .vz-prow-name { color: var(--text); }
.vz-prow-now {
  font-size: calc(9.5px * var(--fs)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); padding: 2px 6px; border-radius: 99px;
  background: color-mix(in oklab, var(--accent) 14%, transparent);
}
.vz-ibtn {
  appearance: none; width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center;
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--muted); cursor: pointer; font-size: calc(13px * var(--fs));
}
.vz-ibtn:hover { color: var(--text); background: var(--card-hover); }
.vz-ibtn.danger:hover { color: var(--bad); }
.vz-ibtn[aria-pressed="true"] { color: var(--text); }

/* ═════════════════════════════════════════════════════════════
 * Dashboard v5 — predictable rows, calm edit mode, settings panel
 * (dashboard.jsx, widgets/common.jsx Widget, widget-config.jsx).
 *
 * • Tiles flow in reading order in 12 columns; a row is as tall as its
 *   tallest tile and every tile in it stretches, so rows end evenly and
 *   nothing reshuffles when content loads (the old masonry packer is gone).
 * • A tile never lets content out: overflow is clipped as a last resort,
 *   and the body is a size container so widgets scale down with
 *   @container rules instead of overflowing.
 * • Edit mode adds an overlay bar and handles — no element changes size,
 *   so entering/leaving edit mode moves nothing.
 * ═════════════════════════════════════════════════════════════ */
.dash-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: auto;
  grid-auto-flow: row;
  align-items: stretch;
  column-gap: var(--grid-gap);
  row-gap: var(--grid-gap);
}
.dash-grid > .widget {
  align-self: stretch;
  grid-row: auto;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  transform: none;
}
.dash-grid > .widget:hover { transform: none; }
.widget-body {
  container-type: inline-size;
  container-name: tile;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
}

/* Head — same language as the station page cards: accent icon + small
   uppercase title, quiet sub on the right. */
.widget-head { gap: 8px; padding-bottom: 2px; min-height: 20px; flex-wrap: nowrap; min-width: 0; }
.widget-head .ico { width: auto; height: auto; background: none; color: var(--accent); font-size: calc(13px * var(--fs)); border-radius: 0; }
.widget-title {
  font-size: calc(11px * var(--fs)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.widget-sub {
  margin-left: auto; padding-right: 30px;
  font-size: calc(10.5px * var(--fs)); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.dash-grid.hide-titles .widget-head,
.dash-grid.editing.hide-titles .widget-head { display: none; }
.dash-grid.hide-titles .widget-head:has(.widget-header-extras) { display: flex; }

/* Tile tools — rendered in edit mode only (view mode can't change a tile) */
.widget-tools {
  position: absolute; top: 6px; right: 6px; z-index: 6;
  display: flex; align-items: center; gap: 4px;
  opacity: 0; pointer-events: none;
  transition: opacity .15s ease;
}
.dash-grid > .widget:hover > .widget-tools,
.dash-grid > .widget.config-open > .widget-tools,
.widget-tools:focus-within { opacity: 1; pointer-events: auto; }
.wt-btn {
  appearance: none; width: 28px; height: 28px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: calc(8px * var(--r-scale));
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--card-strong) 88%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--muted); font-size: calc(13px * var(--fs)); cursor: pointer;
}
.wt-btn:hover { color: var(--text); border-color: var(--border-strong); }
.wt-btn.on { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 55%, transparent); }
@media (hover: none) { .dash-grid:not(.editing) > .widget > .widget-tools { display: none; } }

/* Edit mode — overlay bar across the top, content is a preview only */
.dash-grid.editing > .widget {
  cursor: grab; user-select: none; -webkit-user-select: none;
  outline: 1px dashed color-mix(in oklab, var(--accent) 40%, transparent);
  outline-offset: -1px;
}
.dash-grid.editing > .widget:hover { outline: 2px solid color-mix(in oklab, var(--accent) 70%, transparent); outline-offset: -2px; z-index: 2; }
.dash-grid.editing .widget-body { pointer-events: none; }
.dash-grid.editing > .widget > .widget-tools {
  opacity: 1; pointer-events: auto;
  top: 0; left: 0; right: 0; height: 38px; padding: 0 5px 0 4px; gap: 4px;
  background: color-mix(in oklab, var(--card-strong) 90%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  cursor: grab; touch-action: none;
}
.wt-grip { width: 22px; display: grid; place-items: center; color: var(--muted); font-size: calc(16px * var(--fs)); flex-shrink: 0; }
.wt-title {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px;
  font-size: calc(11px * var(--fs)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wt-title i { color: var(--accent); font-size: calc(13px * var(--fs)); }

/* Reorder: placeholder in the grid + floating copy under the pointer */
.dash-grid > .widget.is-placeholder {
  outline: 2px dashed var(--accent); outline-offset: -2px;
  background: color-mix(in oklab, var(--accent) 7%, transparent);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
.dash-grid > .widget.is-placeholder > * { opacity: .12; }
.widget-ghost {
  position: fixed !important; left: 0; top: 0; margin: 0 !important;
  z-index: 9000; pointer-events: none; overflow: hidden;
  display: flex; flex-direction: column;
  opacity: .94; border-radius: var(--r-md);
  box-shadow: 0 26px 60px -14px rgba(0, 0, 0, .6), 0 0 0 2px var(--accent);
}
.widget-ghost .widget-resize-edge, .widget-ghost .widget-resize-corner { display: none; }
body.dash-dragging, body.dash-dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }

/* Resize handles sit inside the tile (tiles clip their overflow) */
.dash-grid .widget-resize-e { top: 44px; bottom: 16px; right: 0; width: 12px; }
.dash-grid .widget-resize-s { left: 16px; right: 16px; bottom: 0; height: 12px; }
.dash-grid .widget-resize-corner { right: 0; bottom: 0; width: 22px; height: 22px; opacity: .85; border-bottom-right-radius: inherit; }
.dash-grid.show-cols::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(to right,
    color-mix(in oklab, var(--accent) 10%, transparent) 0 var(--col-w),
    transparent var(--col-w) calc(var(--col-w) + var(--col-gap)));
}
.wt-size {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 7;
  padding: 7px 13px; border-radius: 999px; pointer-events: none;
  background: var(--accent); color: #0b1020; font: 700 calc(13px * var(--fs))/1 var(--mono); white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}

/* Edit toolbar — floating pill at the bottom */
.edit-pill {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 8500;
  display: flex; align-items: center; gap: 6px; max-width: calc(100vw - 24px);
  padding: 6px 6px 6px 16px; border-radius: 999px;
  background: color-mix(in oklab, var(--card-strong) 94%, transparent);
  border: 1px solid var(--border-strong);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 18px 44px -12px rgba(0, 0, 0, .55);
}
.edit-pill-hint { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: calc(12px * var(--fs)); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.edit-pill-hint i { color: var(--accent); }
.edit-pill button {
  appearance: none; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  height: 36px; padding: 0 15px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--border); background: transparent; color: var(--text); font: 600 calc(12.5px * var(--fs))/1 var(--sans);
}
.edit-pill button:hover { background: var(--card-hover); }
.edit-pill button.primary { background: var(--accent); border-color: var(--accent); color: #0b1020; }
.edit-pill button.primary:hover { filter: brightness(1.08); }
@media (max-width: 640px) { .edit-pill { padding-left: 6px; } .edit-pill-hint { display: none; } }
.edit-banner { display: none; }
/* Zpět / Znovu (icons), labels drop on phones */
.edit-pill .ep-group { display: inline-flex; gap: 2px; flex-shrink: 0; }
.edit-pill button.ep-icon { width: 36px; padding: 0; justify-content: center; }
.edit-pill button:disabled { opacity: .35; cursor: default; background: transparent; }
@media (max-width: 640px) {
  .edit-pill .ep-lbl { display: none; }
  .edit-pill button:has(.ep-lbl) { width: 36px; padding: 0; justify-content: center; }
}

/* Táhla velikosti — a grip pill in the middle of every edge (left edge only
   where there is a neighbour on the left), accent on the tile under the
   pointer, tinted strip on the handle itself. */
.dash-grid.editing > .widget > .widget-resize-edge { opacity: 1; background: none; }
.dash-grid .widget-resize-w { top: 44px; bottom: 16px; left: 0; width: 12px; cursor: ew-resize; }
.widget-resize-edge::after {
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  border-radius: 99px; background: var(--muted); opacity: .4; transition: opacity .12s, background .12s;
}
.widget-resize-e::after, .widget-resize-w::after { width: 4px; height: min(34px, 50%); }
.widget-resize-s::after { width: min(44px, 40%); height: 4px; }
.dash-grid.editing > .widget:hover > .widget-resize-edge::after { opacity: .85; background: var(--accent); }
.dash-grid.editing > .widget > .widget-resize-edge:hover {
  background: color-mix(in oklab, var(--accent) 20%, transparent) !important;
  border-radius: calc(4px * var(--r-scale));
}
.dash-grid.editing > .widget > .widget-resize-edge:hover::after { opacity: 1; background: var(--accent); }
.dash-grid.editing > .widget:hover { transform: none; }
/* horizontal guide when the bottom edge snaps to another tile's bottom */
.dash-guide-h {
  position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 8; pointer-events: none; display: none;
  border-top: 2px dashed var(--accent); transform: translateY(-1px);
}
.dash-guide-h.on { display: block; }
.widget-ghost { transform-origin: 0 0; }
/* grip = drag handle + keyboard handle */
.wt-grip {
  appearance: none; border: 0; padding: 0; height: 28px; background: transparent;
  border-radius: calc(7px * var(--r-scale)); cursor: grab;
}
.wt-grip:hover { color: var(--text); }
.wt-grip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; color: var(--accent); }
/* a widget just added from the catalog: highlighted for a moment */
.dash-grid > .widget.is-new {
  outline: 2px solid var(--accent); outline-offset: -2px;
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--accent) 24%, transparent);
}
/* row chips that wouldn't change anything */
.wcp-seg button.is-dim:not([aria-pressed="true"]) { opacity: .45; }

/* Settings panel (WidgetConfigPop) */
.wcp {
  position: fixed; z-index: 9200; display: flex; flex-direction: column; min-height: 0;
  border-radius: calc(14px * var(--r-scale)); border: 1px solid var(--border-strong);
  background: color-mix(in oklab, var(--card-strong) 97%, transparent);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 20px 50px -14px rgba(0, 0, 0, .55);
  color: var(--text); overflow: hidden;
}
.wcp.is-sheet { left: 8px; right: 8px; bottom: 8px; max-height: 78vh; border-radius: calc(18px * var(--r-scale)); }
.wcp-backdrop { position: fixed; inset: 0; z-index: 9100; background: rgba(0, 0, 0, .4); }
.wcp-head {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 8px 6px 4px 14px;
  font-size: calc(11px * var(--fs)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.wcp-head > i { color: var(--accent); font-size: calc(14px * var(--fs)); }
.wcp-head > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wcp-x {
  appearance: none; width: 32px; height: 32px; border-radius: calc(9px * var(--r-scale)); border: 0; flex-shrink: 0;
  background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; font-size: calc(14px * var(--fs));
}
.wcp-x:hover { background: var(--card-hover); color: var(--text); }
.wcp-scroll { overflow: auto; min-height: 0; padding: 0 14px 12px; display: flex; flex-direction: column; gap: 6px; overscroll-behavior: contain; }
.wcp-label { margin-top: 6px; font-size: calc(10.5px * var(--fs)); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.wcp-label small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.wcp-seg { display: flex; gap: 2px; padding: 3px; border-radius: calc(10px * var(--r-scale)); background: color-mix(in oklab, var(--text) 6%, transparent); }
.wcp-seg button {
  appearance: none; flex: 1 1 0; min-width: 0; height: 30px; border: 0; border-radius: calc(7px * var(--r-scale));
  background: transparent; color: var(--muted); font: 600 calc(12px * var(--fs))/1 var(--sans); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px;
}
.wcp-seg button:hover { color: var(--text); }
.wcp-seg button[aria-pressed="true"] {
  background: var(--card-strong); color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 0 0 1px color-mix(in oklab, var(--accent) 60%, transparent);
}
.wcp-togs { display: flex; flex-wrap: wrap; gap: 6px; }
.wcp-tog {
  appearance: none; display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  height: 30px; padding: 0 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--muted); font: 600 calc(12px * var(--fs))/1 var(--sans);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wcp-tog i { font-size: calc(12px * var(--fs)); }
.wcp-tog:hover { color: var(--text); border-color: var(--border-strong); }
.wcp-tog[aria-pressed="true"] {
  color: var(--text); border-color: color-mix(in oklab, var(--accent) 55%, transparent);
  background: color-mix(in oklab, var(--accent) 16%, transparent);
}
.wcp-tog[aria-pressed="true"] i { color: var(--accent); }
.wcp-swatch { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.wcp-foot { display: flex; gap: 6px; padding: 10px 14px 12px; border-top: 1px solid var(--border); flex-shrink: 0; }
.wcp-foot button {
  appearance: none; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; border-radius: calc(9px * var(--r-scale)); border: 1px solid var(--border); background: transparent;
  color: var(--text); font: 600 calc(12px * var(--fs))/1 var(--sans); cursor: pointer; white-space: nowrap;
}
.wcp-foot button:hover:not(:disabled) { background: var(--card-hover); }
.wcp-foot button:disabled { opacity: .35; cursor: default; }
.wcp-foot .danger { color: var(--bad); }
@media (pointer: coarse) {
  .wcp-seg button, .wcp-tog, .wcp-foot button { height: 40px; }
  .dash-grid.editing > .widget > .widget-tools { height: 44px; }
  .dash-grid.editing .wt-btn { width: 36px; height: 36px; }
  .dash-grid .widget-resize-e { width: 22px; }
  .dash-grid .widget-resize-s { height: 22px; }
  .dash-grid .widget-resize-corner { width: 30px; height: 30px; }
}
[data-variant="studio"] .wcp, [data-variant="studio"] .edit-pill { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--card-strong); }
[data-variant="console"] .wcp, [data-variant="console"] .wcp-seg, [data-variant="console"] .wcp-seg button,
[data-variant="console"] .wcp-tog, [data-variant="console"] .wcp-foot button, [data-variant="console"] .wt-btn { border-radius: 0; }
[data-variant="ledger"] .wcp { border-radius: 0; font-family: var(--serif); }

/* ═════════════════════════════════════════════════════════════
 * Widgets scale with their tile — @container tile (.widget-body).
 * Nothing may overflow the tile; content shrinks, regroups or drops
 * secondary detail instead. Same rules in every style (Aurora,
 * Studio, Konzole, Papír).
 * ═════════════════════════════════════════════════════════════ */

/* Station-page class names reused inside widgets must not pick up the
   station page's card look from the style rules (double frame). */
[data-variant] .widget .hero {
  background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* Lists start at the top, the rest is centred in a tall row */
.widget-body:has(> .models-widget),
.widget-body:has(> .fit-widget) { justify-content: flex-start; }

/* ── Aktuálně ── */
.widget .hero-temp-num .num { font-size: clamp(42px, 19cqw, 104px); padding-bottom: .08em; }
.widget .hero-cond-icon { width: clamp(40px, 15cqw, 84px); height: auto; }
.widget .hero-loc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget .hero-meta { flex-wrap: wrap; row-gap: 2px; }
@container tile (max-width: 300px) {
  .widget .hero-meta .sep { display: none; }
  .widget .hero-meta { column-gap: 10px; }
  .widget .trange { gap: 6px; }
}

/* ── Hodinová předpověď (grouped columns never get thinner than 38 px) ── */
.hourly-matrix { min-width: 0; }
.hourly-matrix .hm-cell { min-width: 0; overflow: hidden; }

/* ── Denní přehled: rows from the top of the tile (a taller tile leaves the
   space below, rows never spread apart) ── */
.daily-list { flex: 0 0 auto; justify-content: flex-start; min-height: 0; }
.dash-grid > .widget[data-widget-id="daily"] > .widget-body { justify-content: flex-start; }
.daily-row { min-width: 0; }
.daily-row > * { min-width: 0; }
.daily-row .d-day strong, .daily-row .d-day small, .daily-row .d-precip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container tile (max-width: 360px) {
  .daily-row .d-precip { display: none; }
  .daily-row .d-day small { display: none; }
}
@container tile (max-width: 260px) {
  .daily-row .d-bar { display: none; }
  .daily-row .d-temp-bar { justify-content: flex-end; gap: 8px; }
  .daily-row .d-prob { display: none; }
}

/* ── Slunce a Měsíc: blocks spread over the tile ── */
.sun-widget { flex: 1 1 auto; justify-content: space-evenly; min-width: 0; }
@container tile (max-width: 300px) {
  .sun-events { grid-template-columns: 1fr; gap: 6px; }
  .sun-moon-rs { display: none; }
}

/* ── Modely ── */
.model-list.compact .model-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container tile (max-width: 280px) { .model-list.compact .model-accuracy { display: none; } }

/* ── Vítr: number + rows like the station card, compass beside or below ── */
.wind-widget { min-width: 0; }
.wind-num { font-size: clamp(36px, 15cqw, 68px); padding-bottom: .06em; }
.wind-readout { min-width: 0; }
.wind-extras { min-width: 0; }
.wind-extras > div { display: flex; justify-content: space-between; gap: 10px; min-width: 0; }
.wind-extras > div b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wind-extras .dim { margin-right: 0; white-space: nowrap; }
@container tile (max-width: 460px) {
  .wind-aside { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .wind-aside .wind-compass { flex: none; width: min(62cqw, 170px); align-self: center; min-width: 0; }
  .wind-aside .wind-forecast {
    margin-left: 0; border-left: 0; padding-left: 0;
    border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent); padding-top: 8px;
  }
}
@container tile (max-width: 300px) {
  .wind-readout { grid-template-columns: 1fr; }
  .wind-extras { grid-row: 3; grid-column: 1; }
  .wind-aside .wind-forecast { display: none; }
}

/* ── Webkamera ── */
.widget .webcam-wrap { max-width: 100%; }

/* ── Soulad s předpovědí ── */
.fit-widget { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fit-verdict {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--fit-c) 13%, transparent);
  border: 1px solid color-mix(in oklab, var(--fit-c) 35%, transparent);
}
.fit-verdict > i { font-size: calc(20px * var(--fs)); color: var(--fit-c); flex-shrink: 0; }
.fit-verdict-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fit-verdict-txt b { font-size: calc(14px * var(--fs)); color: var(--text); }
.fit-verdict-txt small { font-size: calc(11px * var(--fs)); color: var(--muted); }
.fit-verdict.is-great, .fit-verdict.is-good { --fit-c: var(--ok); }
.fit-verdict.is-fair { --fit-c: var(--warn); }
.fit-verdict.is-poor { --fit-c: var(--bad); }
.fit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fit-row {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; align-items: center;
  column-gap: 10px; padding: 7px 2px; border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
}
.fit-row:first-child { border-top: 0; }
.fit-ico { color: var(--accent); font-size: calc(14px * var(--fs)); }
.fit-name { display: flex; flex-direction: column; min-width: 0; font-size: calc(13px * var(--fs)); font-weight: 600; color: var(--text); }
.fit-name small { font-size: calc(11px * var(--fs)); font-weight: 400; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fit-val { font-size: calc(18px * var(--fs)); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; text-align: right; }
.fit-val em { font-style: normal; font-size: calc(11px * var(--fs)); color: var(--muted); margin-left: 3px; }
.fit-badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap;
  min-width: 64px; padding: 3px 8px; border-radius: 999px; font-size: calc(11px * var(--fs)); font-weight: 600;
}
.fit-badge.is-ok { color: var(--ok); background: color-mix(in oklab, var(--ok) 14%, transparent); }
.fit-badge.is-up { color: #fb923c; background: color-mix(in oklab, #fb923c 15%, transparent); }
.fit-badge.is-down { color: #38bdf8; background: color-mix(in oklab, #38bdf8 15%, transparent); }
[data-theme="light"] .fit-badge.is-up { color: #c2410c; }
[data-theme="light"] .fit-badge.is-down { color: #0369a1; }
.fit-badge.is-na { color: var(--muted); background: color-mix(in oklab, var(--text) 6%, transparent); }
.fit-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--muted); font-size: calc(13px * var(--fs)); padding: 12px; }
.fit-empty i { font-size: calc(24px * var(--fs)); opacity: .6; }
/* Narrow tiles: still one line per quantity — the widget gets smaller, not taller */
.fit-badge .fb-short { display: none; }
@container tile (max-width: 380px) {
  .fit-widget { gap: 8px; }
  .fit-row { column-gap: 8px; padding: 6px 0; }
  .fit-badge { min-width: 0; padding: 3px 7px; }
  .fit-badge.is-up .fb-long, .fit-badge.is-down .fb-long { display: none; }
  .fit-badge .fb-short { display: inline; font-variant-numeric: tabular-nums; }
  .fit-val { font-size: calc(17px * var(--fs)); }
  .fit-verdict { padding: 8px 10px; gap: 8px; }
  .fit-verdict-txt b { font-size: calc(13px * var(--fs)); }
}
@container tile (max-width: 300px) {
  .fit-row { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 6px; }
  .fit-ico { display: none; }
  .fit-name { font-size: calc(12px * var(--fs)); }
  .fit-name small { font-size: calc(10.5px * var(--fs)); }
  .fit-val { font-size: calc(15px * var(--fs)); }
  .fit-val em { font-size: calc(10px * var(--fs)); margin-left: 2px; }
  .fit-badge { padding: 3px 6px; gap: 3px; font-size: calc(10.5px * var(--fs)); }
  .fit-badge.is-ok .fb-long { display: none; }
  .fit-verdict > i { font-size: calc(17px * var(--fs)); }
  .fit-verdict-txt b { font-size: calc(12.5px * var(--fs)); }
  .fit-verdict-txt small { font-size: calc(10.5px * var(--fs)); }
}
@container tile (max-width: 260px) {
  .fit-verdict-txt small { display: none; }
}
@container tile (max-width: 220px) {
  .fit-name small { display: none; }
}
[data-variant="console"] .fit-badge, [data-variant="console"] .fit-verdict { border-radius: 0; }
[data-variant="ledger"] .fit-val { font-family: var(--serif); font-style: italic; }

/* Dials (wind rose, barometer) grow with the tile in both directions — the
   SVG keeps its proportions and fits the smaller side, no empty margins. */
.widget-body:has(> .ins-rose), .widget-body:has(> .ins-baro) { justify-content: stretch; }
.ins-rose, .ins-baro { flex: 1 1 auto; min-height: 0; height: auto; }
.ins-rose-svg, .ins-baro-svg { flex: 1 1 0; min-height: 120px; width: 100%; max-width: none; height: auto; }

/* Panel Vzhled na telefonu = spodní panel přes celou šířku, nejvýš 85 % viditelné
   výšky (dvh — lišta prohlížeče se nepočítá), hlavička s velkým tlačítkem Zavřít
   je vždy na obrazovce; ztmavené pozadí zavírá klepnutím. */
.twk-backdrop { display: none; }
@media (max-width: 640px) {
  html[data-theme] .twk-backdrop { display: block; position: fixed; inset: 0; z-index: 2147483645; background: rgba(0, 0, 0, .45); }
  html[data-theme] .twk-panel {
    left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: auto !important; max-width: none !important;
    max-height: 85vh !important; max-height: 85dvh !important;
    border-radius: calc(18px * var(--r-scale)) calc(18px * var(--r-scale)) 0 0 !important; transform: none !important;
  }
  html[data-theme] .twk-hd { cursor: default; padding: 10px 8px 8px 16px; }
  html[data-theme] .twk-x { width: 40px; height: 40px; font-size: calc(18px * var(--fs)); border-radius: calc(10px * var(--r-scale)); }
}

/* Teplota ±24 h — the four numbers under the chart go 2 × 2 on narrow tiles */
.temp-chart-widget .spark-stat { min-width: 0; }
.temp-chart-widget .spark-stat strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container tile (max-width: 440px) { .temp-chart-widget .spark-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ═════════════════════════════════════════════════════════════
 * Data charts — Teplota ±24 h (.tc) and Graf předpovědi (.fc).
 * Real-pixel SVG that fills the tile; the station page's chart language:
 * solid hairline grid, axis text in text colours, quantity colours as on the
 * station page (precipitation #3b82f6, wind #14b8a6, humidity #22c55e,
 * temperature on the temperature scale), forecast continuation dashed.
 * ═════════════════════════════════════════════════════════════ */
.widget-body:has(> .tc), .widget-body:has(> .fc) { justify-content: stretch; }
.tc, .fc { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; }
.tc-plot, .fc-plot { position: relative; flex: 1 1 auto; min-width: 0; min-height: 170px; }
.fc-plot { min-height: 230px; }
.tc-svg, .fc-svg { position: absolute; inset: 0; display: block; overflow: visible; cursor: crosshair; }
.tc-grid, .fc-grid { stroke: var(--border); stroke-width: 1; opacity: .6; shape-rendering: crispEdges; }
.tc-midnight, .fc-midnight { stroke: var(--border-strong); stroke-width: 1; shape-rendering: crispEdges; }
.tc-axis, .fc-axis { font: 500 calc(10.5px * var(--fs)) var(--mono); fill: var(--muted); }
.tc-day { fill: var(--text); font-weight: 700; }
.tc-past-bg, .fc-night { fill: var(--text); opacity: .035; }
.tc-now { stroke: var(--accent); stroke-width: 1.5; }
.tc-now-t { font: 700 calc(10px * var(--fs)) var(--mono); fill: var(--accent); letter-spacing: .08em; }
.tc-chip { fill: var(--card-strong); stroke: var(--border-strong); stroke-width: 1; }
.tc-chip-t { font: 700 calc(11px * var(--fs)) var(--mono); fill: var(--text); }
.tc-rain, .fc-rain { fill: #3b82f6; }
.tc-rain.past { opacity: .55; }
.tc-cross, .fc-cross { stroke: var(--text); stroke-opacity: .45; stroke-width: 1; }
.tc-tip, .fc-tip { position: absolute; top: 4px; transform: translateX(-50%); pointer-events: none; z-index: 3; white-space: nowrap; }
.tc-tip .tip-time small, .fc-tip .tip-time small { margin-left: 6px; font-weight: 400; opacity: .7; }

.tc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; flex-shrink: 0; }
.tc-stats > div {
  display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 6px 10px;
  border-radius: var(--r-sm); border: 1px solid var(--border);
  background: color-mix(in oklab, var(--text) 4%, transparent);
}
.tc-stats small { font-size: calc(10px * var(--fs)); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-stats b { font-size: calc(16px * var(--fs)); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tc-stats .is-now { border-color: color-mix(in oklab, var(--accent) 50%, transparent); }
.tc-stats b.up { color: #fb923c; }
.tc-stats b.down { color: #38bdf8; }
[data-theme="light"] .tc-stats b.up { color: #c2410c; }
[data-theme="light"] .tc-stats b.down { color: #0369a1; }
@container tile (max-width: 440px) { .tc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.fc-day { font: 700 calc(11px * var(--fs)) var(--sans); fill: var(--text); }
.fc-lane { font: 700 calc(10px * var(--fs)) var(--mono); fill: var(--muted); letter-spacing: .06em; }
.fc-ext { font: 600 calc(10.5px * var(--fs)) var(--mono); fill: var(--text); paint-order: stroke; stroke: var(--card-strong); stroke-width: 3px; stroke-linejoin: round; }
.fc-base { stroke: var(--border-strong); stroke-width: 1; shape-rendering: crispEdges; }
.fc-wind { stroke: #14b8a6; stroke-width: 2; stroke-linejoin: round; }
.fc-gust { fill: #14b8a6; opacity: .2; }
.fc-hum { stroke: #22c55e; stroke-width: 2; stroke-linejoin: round; }
.fc-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: calc(11px * var(--fs)); color: var(--muted); flex-shrink: 0; }
.fc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fc-key { display: inline-block; width: 16px; height: 3px; border-radius: calc(2px * var(--r-scale)); }
.fc-key-temp { background: linear-gradient(90deg, #3b82f6, #7dd3fc, #cbd5e1, #fdba74, #f97316); }
.fc-key-rain { width: 9px; height: 9px; background: #3b82f6; }
.fc-key-wind { background: #14b8a6; }
.fc-key-gust { width: 12px; height: 9px; background: #14b8a6; opacity: .3; margin-left: 6px; }
.fc-key-hum { background: #22c55e; }
[data-theme="light"] .tc-rain, [data-theme="light"] .fc-rain, [data-theme="light"] .fc-key-rain { fill: #2563eb; background: #2563eb; }
[data-theme="light"] .fc-wind { stroke: #0d9488; }
[data-theme="light"] .fc-gust, [data-theme="light"] .fc-key-wind, [data-theme="light"] .fc-key-gust { fill: #0d9488; background: #0d9488; }
[data-theme="light"] .fc-hum { stroke: #16a34a; }
[data-theme="light"] .fc-key-hum { background: #16a34a; }
[data-variant="ledger"] .fc-day, [data-variant="ledger"] .tc-day { font-family: var(--serif); font-style: italic; }
.fc-sum { font: 600 calc(10.5px * var(--fs)) var(--mono); fill: var(--text); opacity: .8; }
.fc-lane { fill: var(--muted); }

/* ── Aktuálně — same language as the station page hero (stanice: blok
   „Aktuálně“ v mstest src/styles.css = levá část hlavního panelu). Držet shodný. ── */
.now { display: flex; flex-direction: column; gap: 8px; min-width: 0; --moon-lit: #e8ecf4; --moon-dark: rgba(148,163,184,.18); }
[data-theme="light"] .now { --moon-lit: #fdf6d8; --moon-dark: rgba(71,85,105,.18); }
.now-cond { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; font-size: calc(13.5px * var(--fs)); font-weight: 600; color: var(--text); }
.now-age { font-size: calc(12px * var(--fs)); font-weight: 400; color: var(--muted); }
.now-moon { display: inline-flex; align-items: center; align-self: center; gap: 5px; margin-left: 2px; font-size: calc(12px * var(--fs)); font-weight: 400; color: var(--muted); white-space: nowrap; }
.now-moon svg { flex-shrink: 0; }
.now-main { display: flex; align-items: center; gap: clamp(8px, 4cqw, 22px); min-width: 0; }
.now-temp { display: flex; align-items: flex-start; line-height: .9; min-width: 0; }
.now-num { font-size: clamp(54px, 27cqw, 132px); font-weight: 200; letter-spacing: -.04em; color: var(--text); padding-bottom: .09em; white-space: nowrap; }
.now-unit { font-size: clamp(15px, 5cqw, 26px); color: var(--muted); margin: .3em 0 0 4px; }
.now-icon { width: clamp(50px, 23cqw, 118px); height: auto; flex-shrink: 0; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
.now-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: calc(13px * var(--fs)); color: var(--muted); }
.now-sub b { color: var(--text); font-weight: 600; }
.now-sub .sep { color: var(--dim); }
.now .trange { margin-top: 2px; max-width: none; }
.now-fc { font-size: calc(12px * var(--fs)); color: var(--muted); }
.now-fc b { color: var(--text); }
.now-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 5px 18px;
  margin: 2px 0 0; padding-top: 9px; border-top: 1px solid var(--border);
}
.now-grid > div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; font-size: calc(12.5px * var(--fs)); }
.now-grid dt { display: flex; align-items: center; gap: 6px; color: var(--muted); white-space: nowrap; }
.now-grid dt i { color: var(--accent); font-size: calc(12px * var(--fs)); }
.now-grid dd { margin: 0; display: flex; align-items: baseline; gap: 5px; font-weight: 600; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.now-grid dd small { font-weight: 400; color: var(--muted); font-size: calc(11px * var(--fs)); }
.now-trend { color: var(--accent); font-size: calc(12px * var(--fs)); }
.now-offline { display: flex; align-items: center; gap: 8px; font-size: calc(12px * var(--fs)); color: var(--warn); }
[data-variant="studio"] .now-num { font-weight: 800; letter-spacing: -.03em; }
[data-variant="console"] .now-num { font-family: var(--mono); font-weight: 700; letter-spacing: -.05em; }
[data-variant="ledger"] .now-num { font-family: var(--serif); font-style: italic; font-weight: 600; letter-spacing: -.02em; padding-top: .06em; }
/* wind (and an odd last reading) on a row of its own in narrow tiles, where the
   readings are in two columns — wide tiles keep them all on one line */
@container tile (max-width: 640px) {
  .now-grid { grid-template-columns: 1fr 1fr; }
  .now-grid > .now-wide { grid-column: 1 / -1; }
}
/* Narrow tiles: everything a step smaller; ≤ 300 px the readings stay in two
   columns with just their icon (the name is the tooltip) instead of four
   rows, so the tile gets smaller rather than taller */
@container tile (max-width: 340px) {
  .now { gap: 6px; }
  .now-cond { font-size: calc(12.5px * var(--fs)); }
  .now-age, .now-moon { font-size: calc(11px * var(--fs)); }
  .now-num { font-size: clamp(44px, 25cqw, 132px); }
  .now-icon { width: clamp(40px, 22cqw, 118px); }
  .now-sub { font-size: calc(12px * var(--fs)); gap: 1px 6px; }
  .now .trange { gap: 7px; font-size: calc(10.5px * var(--fs)); }
}
@container tile (max-width: 300px) {
  .now-grid { grid-template-columns: 1fr 1fr; gap: 4px 12px; padding-top: 7px; }
  .now-grid > div { justify-content: flex-start; gap: 6px; font-size: calc(12px * var(--fs)); }
  .now-grid .now-lbl, .now-grid dd small { display: none; }
}
@container tile (max-width: 200px) { .now-grid { grid-template-columns: 1fr; } }

/* ── Modely: rank · name (AUTO) · difference in plain units · bar · score ── */
.models-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.models-hint { font-size: calc(11px * var(--fs)); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.model-list.compact { gap: 2px; }
.model-list.compact .model-row {
  appearance: none; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto minmax(40px, 70px) 26px; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: var(--r-sm); border: 1px solid transparent; background: transparent;
}
.model-list.compact .model-row:hover { background: color-mix(in oklab, var(--text) 5%, transparent); }
.model-list.compact .model-row.active { border-color: color-mix(in oklab, var(--accent) 50%, transparent); background: color-mix(in oklab, var(--accent) 10%, transparent); }
.model-list.compact .model-rank { font: 600 calc(10.5px * var(--fs)) var(--mono); color: var(--muted); text-align: right; }
.model-list.compact .model-name { display: flex; align-items: center; gap: 6px; font-size: calc(12.5px * var(--fs)); font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.model-name em { font-style: normal; font: 800 calc(8.5px * var(--fs)) var(--sans); letter-spacing: .08em; padding: 2px 5px; border-radius: 99px; background: var(--accent); color: #0b1020; }
.model-diff { font: 500 calc(10.5px * var(--fs)) var(--mono); color: var(--muted); white-space: nowrap; }
.model-list.compact .model-accuracy { position: relative; height: 4px; border-radius: 99px; background: color-mix(in oklab, var(--text) 8%, transparent); overflow: hidden; display: block; }
.model-accuracy i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--accent); }
.model-list.compact .model-score { font: 700 calc(12px * var(--fs)) var(--mono); color: var(--text); text-align: right; }
/* „4/5“ = quantities in agreement with the station (the first ordering key) */
.model-ok { font: 600 calc(10.5px * var(--fs)) var(--mono); color: var(--muted); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.model-ok.is-all { color: var(--ok); }
@container tile (max-width: 420px) { .model-list.compact .model-row { grid-template-columns: 18px minmax(0, 1fr) auto auto 26px; } .model-list.compact .model-accuracy { display: none; } }
@container tile (max-width: 300px) { .model-diff { display: none; } .model-list.compact .model-row { grid-template-columns: 18px minmax(0, 1fr) auto 26px; } }

/* ── Denní přehled ── */
.daily-list { gap: 1px; }
.daily-row { align-items: center; column-gap: 10px; padding: 7px 8px; border-radius: calc(9px * var(--r-scale)); }
.daily-row.is-today { background: color-mix(in oklab, var(--accent) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 18%, transparent); }
.daily-row .d-day { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.daily-row .d-day strong { font-size: calc(13px * var(--fs)); font-weight: 650; color: var(--text); letter-spacing: -.01em; }
.daily-row .d-day small { font-size: calc(10.5px * var(--fs)); color: var(--muted); font-family: var(--sans); font-variant-numeric: tabular-nums; }
.daily-row .d-day small.is-wkend { color: color-mix(in oklab, var(--accent) 70%, var(--muted)); }
.daily-row .d-icon { position: relative; width: 34px; display: flex; flex-direction: column; align-items: center; }
.daily-row .d-icon img { width: 30px; height: 30px; display: block; object-fit: contain; }
.daily-row .d-prob { margin-top: -3px; font: 700 calc(9.5px * var(--fs))/1 var(--sans); color: #60a5fa; white-space: nowrap; font-variant-numeric: tabular-nums; }
[data-theme="light"] .daily-row .d-prob { color: #2563eb; }
.daily-row .d-temp-bar { display: flex; align-items: center; gap: 9px; min-width: 0; }
.daily-row .d-tmin, .daily-row .d-tmax { font-size: calc(13px * var(--fs)); min-width: 26px; font-variant-numeric: tabular-nums; }
.daily-row .d-tmin { color: var(--muted); text-align: right; }
.daily-row .d-tmax { color: var(--text); font-weight: 650; }
.daily-row .d-bar { position: relative; flex: 1; height: 6px; min-width: 40px; border-radius: 99px; background: color-mix(in oklab, var(--text) 9%, transparent); }
.daily-row .d-bar i { position: absolute; top: 0; bottom: 0; border-radius: 99px; min-width: 6px; }
/* the temperature measured now on today's bar */
.daily-row .d-bar .d-now {
  position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  border: 2px solid var(--card-strong); box-shadow: 0 0 0 1px color-mix(in oklab, var(--text) 35%, transparent);
}
.daily-row .d-precip { min-width: 48px; display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 3px; font: 650 calc(12px * var(--fs)) var(--sans); color: #60a5fa; white-space: nowrap; font-variant-numeric: tabular-nums; }
.daily-row .d-precip i { font-size: calc(10px * var(--fs)); }
.daily-row .d-precip small { font-weight: 500; font-size: calc(10px * var(--fs)); opacity: .8; }
.daily-row .d-precip.is-zero { color: var(--dim); font-weight: 500; }
.daily-row .d-precip.is-zero i { opacity: .5; }
.daily-row .d-precip .d-gust { color: var(--warn); margin-right: 3px; }
[data-theme="light"] .daily-row .d-precip { color: #2563eb; }
[data-theme="light"] .daily-row .d-precip.is-zero { color: var(--dim); }
/* days continued from MASTER */
.daily-sep {
  display: flex; align-items: center; gap: 8px; margin: 6px 8px 2px;
  font: 700 calc(9.5px * var(--fs))/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
}
.daily-sep::before, .daily-sep::after { content: ''; flex: 1; height: 1px; background: color-mix(in oklab, var(--text) 10%, transparent); }
.daily-sep::before { flex: 0 0 10px; }

/* ── Slunce: délka dne ── */
.sun-daylen { display: flex; flex-wrap: wrap; gap: 2px 6px; font-size: calc(12px * var(--fs)); color: var(--muted); }
.sun-daylen b { color: var(--text); font-weight: 600; }

/* ── Meteostanice 24 h / Vnitřní čidla: tiles share the full width ── */
.sensors-grid { grid-template-columns: repeat(auto-fit, minmax(min(var(--sensor-min, 140px), 100%), 1fr)); }
.widget[data-span] .sensors-grid { grid-template-columns: repeat(auto-fit, minmax(min(var(--sensor-min, 140px), 100%), 1fr)); }

/* Vítr: label – value rows stay together like the station card */
.wind-readout .wind-extras, .wind-forecast .wind-extras { max-width: 230px; }

/* Chart hover layer (ChartHover) — sits over the chart, owns the pointer */
.ch-layer { position: absolute; inset: 0; z-index: 2; cursor: crosshair; touch-action: pan-y; }
.ch-svg { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.ch-cross { stroke: var(--text); stroke-opacity: .45; stroke-width: 1; }
.ch-tip { position: absolute; top: 4px; transform: translateX(-50%); pointer-events: none; z-index: 3; white-space: nowrap; }
.ch-tip .tip-time small { margin-left: 6px; font-weight: 400; opacity: .7; }

/* Extrémy: labels never leave their card (wide fonts, narrow tiles) */
.ins-ext-item { min-width: 0; }
.ins-ext-k { min-width: 0; overflow: hidden; text-overflow: ellipsis; display: block; }
.ins-ext-k i { margin-right: 5px; }

/* Táhla okrajů jen na plné šířce — nápověda podle šířky */
.edit-pill-hint .eph-narrow { display: none; }
@media (max-width: 1099.98px) { .edit-pill-hint .eph-desk { display: none; } .edit-pill-hint .eph-narrow { display: inline; } }

/* ── Slunce a Měsíc (den a noc): graf výšky nad obzorem + čísla ── */
.sw { --sw-sun: #f59e0b; --sw-moon: #a5b4fc; flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }
[data-theme="light"] .sw { --sw-sun: #d97706; --sw-moon: #6366f1; }
.sw-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; font-size: calc(12.5px * var(--fs)); color: var(--muted); }
.sw-state { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; color: var(--text); }
.sw-state b { font-size: calc(13px * var(--fs)); font-weight: 700; }
.sw-state.day i { color: var(--sw-sun); font-size: calc(15px * var(--fs)); }
.sw-next { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.sw-legend { margin-left: auto; display: inline-flex; gap: 10px; flex-shrink: 0; font-size: calc(10.5px * var(--fs)); }
.sw-legend span { display: inline-flex; align-items: center; gap: 5px; }
.sw-key { display: inline-block; width: 12px; height: 3px; border-radius: calc(2px * var(--r-scale)); }
.sw-key.sun { background: var(--sw-sun); }
.sw-key.moon { background: var(--sw-moon); }
.sw-plot { position: relative; flex: 1 1 auto; min-width: 0; min-height: 96px; }
.sw-svg { position: absolute; inset: 0; display: block; overflow: visible; }
.sw-band.day { fill: var(--sw-sun); opacity: .08; }
.sw-band.twi { fill: var(--sw-sun); opacity: .035; }
.sw-grid { stroke: var(--border); stroke-width: 1; opacity: .6; shape-rendering: crispEdges; }
.sw-horizon { stroke: var(--muted); stroke-opacity: .55; stroke-width: 1; shape-rendering: crispEdges; }
.sw-axis { font: 500 calc(10px * var(--fs)) var(--mono); fill: var(--muted); }
.sw-peak { font: 600 calc(10.5px * var(--fs)) var(--mono); fill: var(--text); }
.sw-sun-line { fill: none; stroke: var(--sw-sun); stroke-width: 2; stroke-linejoin: round; }
.sw-moon-line { fill: none; stroke: var(--sw-moon); stroke-width: 1.6; stroke-linejoin: round; }
.sw-sun-line.under, .sw-moon-line.under { opacity: .3; }
.sw-now { stroke: var(--accent); stroke-width: 1.5; }
.sw-sun-dot { fill: var(--sw-sun); stroke: var(--card-strong); stroke-width: 2; }
.sw-sun-dot.under { opacity: .6; }
.sw-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; flex-shrink: 0; }
.sw-stats > div, .sw-moon {
  min-width: 0; padding: 6px 10px; border-radius: var(--r-sm); border: 1px solid var(--border);
  background: color-mix(in oklab, var(--text) 4%, transparent);
}
.sw-stats > div { display: flex; flex-direction: column; gap: 1px; }
.sw-stats small { font-size: calc(10px * var(--fs)); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-stats b { font-size: calc(16px * var(--fs)); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-stats span { font-size: calc(11px * var(--fs)); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-stats .is-next { border-color: color-mix(in oklab, var(--accent) 50%, transparent); }
.sw-moon { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.sw-moon > svg { flex-shrink: 0; }
.sw-moon-main { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.sw-moon-main b { font-size: calc(13.5px * var(--fs)); font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-moon-main span { font-size: calc(11px * var(--fs)); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-moon-rs { display: flex; flex-direction: column; flex-shrink: 0; font: 600 calc(12px * var(--fs)) var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.sw-moon-rs span { display: inline-flex; align-items: center; }
.sw-moon-rs i { font-size: calc(15px * var(--fs)); color: var(--muted); }
@container tile (max-width: 380px) {
  .sw-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sw-stats .sw-len { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
  .sw-stats .sw-len b { font-size: calc(14px * var(--fs)); }
}
@container tile (max-width: 260px) {
  .sw-stats b { font-size: calc(14px * var(--fs)); }
  .sw-moon-rs { display: none; }
}
[data-variant="console"] .sw-stats > div, [data-variant="console"] .sw-moon { border-radius: 0; }

/* ── Tooltip grafů (ChartHover): vedle kurzoru, ikona, barevné klíče ── */
.chart-tip.ch-tip {
  transform: none; top: 8px; min-width: 160px; padding: 8px 11px 9px; font-size: calc(12px * var(--fs));
  border-radius: calc(10px * var(--r-scale)); background: color-mix(in oklab, var(--card-strong) 94%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}
[data-theme="light"] .chart-tip.ch-tip { box-shadow: 0 10px 28px rgba(15, 23, 42, .14); }
.ch-tip .tip-head { display: flex; align-items: center; gap: 8px; margin: -2px 0 6px; }
.ch-tip .tip-head img { flex-shrink: 0; margin-left: -3px; }
.ch-tip .tip-head .tip-time { margin: 0; color: var(--text); }
.ch-tip .tip-time { font: 600 calc(12px * var(--fs)) var(--mono); color: var(--text); }
.ch-tip .tip-cond { font-size: calc(11px * var(--fs)); color: var(--muted); }
.ch-tip .tip-row { align-items: center; gap: 16px; padding: 2px 0; }
.ch-tip .tip-row .k { display: inline-flex; align-items: center; gap: 6px; font-size: calc(11px * var(--fs)); }
.ch-tip .tip-row strong { display: inline-flex; align-items: center; font-weight: 600; white-space: nowrap; }
.ch-tip .tip-row strong small { margin-left: 6px; font-weight: 400; color: var(--muted); }
.ch-tip .tip-sw { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ch-tip .tip-dir { display: inline-block; margin: 0 2px 0 6px; font-size: calc(11px * var(--fs)); color: var(--muted); }
.ch-tip .tip-foot { margin-top: 6px; padding-top: 5px; border-top: 1px solid var(--border); font-size: calc(10.5px * var(--fs)); color: var(--muted); white-space: nowrap; }
/* Graf předpovědi: výška roste se šířkou dlaždice (na plné šířce nebývá placatý) */
.fc-plot { min-height: clamp(230px, 30cqi, 620px); }

/* ── Teplota ±24 h: noci, naměřeno | předpověď, trend, rozpětí ── */
.tc-night { fill: var(--text); opacity: .04; }
.tc-side { font: 600 calc(10px * var(--fs)) var(--mono); fill: var(--muted); letter-spacing: .04em; }
.tc-plot { min-height: clamp(170px, 24cqi, 440px); }
.tc-stats b { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; overflow: hidden; }
.tc-trend { display: inline-flex; align-items: center; gap: 2px; font: 600 calc(11px * var(--fs)) var(--mono); color: var(--muted); }
.tc-trend.up { color: #fb923c; }
.tc-trend.down { color: #38bdf8; }
[data-theme="light"] .tc-trend.up { color: #c2410c; }
[data-theme="light"] .tc-trend.down { color: #0369a1; }
.tc-range { gap: 0 !important; }
.tc-range span { margin: 0 5px; font-size: calc(11px * var(--fs)); font-weight: 500; color: var(--muted); }
@container tile (max-width: 300px) { .tc-trend { display: none; } }

/* ── Bez dlaždic (sdílené se stanicí): widgety bez podkladu, rámečku a stínu ── */
[data-tiles="off"] .dash-grid > .widget {
  background: transparent !important; border-color: transparent !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
[data-tiles="off"] .dash-grid > .widget::before,
[data-tiles="off"] .dash-grid > .widget::after { display: none !important; }

/* Bez dlaždic je ploché i záhlaví: bez podkladu, rámečku a stínu. Je přilepené
   nahoře, takže si nechá jen rozmazání obsahu, který pod ním projíždí. */
[data-tiles="off"] .topbar {
  background: transparent !important; border-color: transparent !important; box-shadow: none !important;
  -webkit-backdrop-filter: blur(16px) !important; backdrop-filter: blur(16px) !important;
}

/* ── Graf předpovědi: tlak (barva jako na stanici) ── */
.fc-pres { stroke: #8b5cf6; stroke-width: 2; stroke-linejoin: round; }
[data-theme="light"] .fc-pres { stroke: #7c3aed; }

/* ── Upozornění na starou předpověď a patička se zdrojem dat (jako původní index) ── */
.fc-stale {
  display: flex; align-items: center; gap: 8px; margin: 0 0 var(--grid-gap, 10px);
  padding: 9px 12px; border-radius: var(--r-sm); font-size: calc(13px * var(--fs)); color: var(--text);
  border: 1px solid color-mix(in oklab, #f59e0b 55%, transparent);
  background: color-mix(in oklab, #f59e0b 14%, transparent);
}
.fc-stale i { color: #f59e0b; }
.site-foot {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px;
  margin: 22px 0 8px; font-size: calc(12px * var(--fs)); color: var(--muted); text-align: center;
}
.site-foot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.site-foot a:hover { color: var(--text); }

/* ── Denní přehled: den rozkliknout → hodinová předpověď (jako „Dnes ◀ ▶“ původní stránky) ── */
.daily-row.is-clickable { cursor: pointer; border-radius: var(--r-sm); transition: background var(--t-fast); }
.daily-row.is-clickable:hover { background: color-mix(in oklab, var(--text) 6%, transparent); }
.daily-row.is-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.chart-modal.day-modal { max-height: 92vh; overflow-y: auto; }
.chart-modal.day-modal .chart-modal-head { margin-bottom: 14px; }
.dd-nav { display: inline-flex; align-items: center; gap: 10px; }
.dd-nav button {
  appearance: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 999px;
  border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; font-size: calc(14px * var(--fs));
}
.dd-nav button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.dd-nav button:disabled { opacity: .3; cursor: default; }
.dd-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-bottom: 12px; }
.dd-sum > img { flex-shrink: 0; }
.dd-sum > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dd-sum small { font-size: calc(10px * var(--fs)); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.dd-sum b { font-size: calc(15px * var(--fs)); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.dd-sum span { font-size: calc(11px * var(--fs)); color: var(--muted); }
.dd-sum .dd-cond { margin-right: auto; }
.dd-chart { display: flex; min-height: 260px; margin-bottom: 12px; container-type: inline-size; container-name: tile; }
.dd-chart .fc-plot { min-height: 260px; }
.dd-hours { container-type: inline-size; container-name: tile; }
@media (max-width: 640px) { .dd-sum { gap: 8px 14px; } .dd-sum b { font-size: calc(14px * var(--fs)); } }
.fc-plot { min-height: max(var(--fc-min, 230px), clamp(230px, 30cqi, 620px)); }

/* ── Lišta předvoleb: v režimu úprav křížek „skrýt z lišty“ u každé předvolby ── */
.preset-chip-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.preset-bar.is-editing .preset-chip { padding-right: 30px; }
.preset-chip-x {
  appearance: none; position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; padding: 0; border: 0; border-radius: 999px; display: grid; place-items: center;
  background: color-mix(in oklab, var(--text) 10%, transparent); color: var(--muted); font-size: calc(15px * var(--fs)); cursor: pointer;
}
.preset-chip-x:hover { background: color-mix(in oklab, #ef4444 22%, transparent); color: var(--text); }

/* ═════════════════════════════════════════════════════════════
 * Výběr modelu (záhlaví) — AUTO zvýrazněné, seznam s dnešní předpovědí a shodou
 * ═════════════════════════════════════════════════════════════ */
.mp2-auto-badge {
  display: inline-flex; align-items: center; margin-left: 7px; padding: 2px 7px; border-radius: 999px; vertical-align: 1px;
  background: var(--accent); color: #06121f; font: 800 calc(9.5px * var(--fs))/1.2 var(--mono); letter-spacing: .12em;
  box-shadow: 0 0 10px color-mix(in oklab, var(--accent) 50%, transparent);
}
.mp2 {
  position: fixed; z-index: 9000; display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  background: color-mix(in oklab, var(--card-strong) 97%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid color-mix(in oklab, var(--accent) 45%, var(--border)); border-radius: calc(14px * var(--r-scale));
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 10%, transparent), 0 20px 48px rgba(0, 0, 0, .38);
  animation: configIn .15s cubic-bezier(.4, 0, .2, 1);
}
[data-theme="light"] .mp2 { box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 10%, transparent), 0 20px 48px rgba(15, 23, 42, .18); }
.mp2.is-sheet { left: 0; right: 0; bottom: 0; max-height: 85dvh; border-radius: calc(18px * var(--r-scale)) calc(18px * var(--r-scale)) 0 0; animation: sheetUp .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes sheetUp { from { transform: translateY(24px); opacity: 0 } to { transform: none; opacity: 1 } }
.mp2-backdrop { position: fixed; inset: 0; z-index: 8999; background: rgba(0, 0, 0, .45); }
.mp2-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px 6px; }
.mp2-head > span { display: inline-flex; align-items: center; gap: 8px; font: 700 calc(11px * var(--fs)) var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mp2-head > span i { color: var(--accent); font-size: calc(13px * var(--fs)); }
.mp2-x { appearance: none; border: 0; background: transparent; color: var(--muted); width: 32px; height: 32px; border-radius: 999px; cursor: pointer; }
.mp2-auto {
  appearance: none; display: flex; align-items: center; gap: 12px; margin: 2px 10px 8px; padding: 10px 12px; text-align: left;
  border-radius: calc(12px * var(--r-scale)); border: 1px solid var(--border); background: color-mix(in oklab, var(--text) 3%, transparent);
  color: var(--text); font: inherit; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast);
}
.mp2-auto:hover { border-color: color-mix(in oklab, var(--accent) 55%, var(--border)); }
.mp2-auto.on { border-color: color-mix(in oklab, var(--accent) 65%, transparent); background: color-mix(in oklab, var(--accent) 12%, transparent); }
.mp2-auto-ico { flex-shrink: 0; width: 34px; height: 34px; display: grid; place-items: center; border-radius: calc(10px * var(--r-scale)); font-size: calc(17px * var(--fs)); color: var(--accent); background: color-mix(in oklab, var(--accent) 16%, transparent); }
.mp2-auto-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.mp2-auto-text b { font-size: calc(14px * var(--fs)); font-weight: 700; }
.mp2-auto-text small { font-size: calc(11.5px * var(--fs)); color: var(--muted); line-height: 1.35; }
.mp2-auto-text strong { color: var(--text); font-weight: 600; }
.mp2-toggle { flex-shrink: 0; width: 36px; height: 21px; border-radius: 999px; position: relative; background: color-mix(in oklab, var(--text) 18%, transparent); transition: background var(--t-fast); }
.mp2-toggle i { position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform var(--t-fast); }
.mp2-auto.on .mp2-toggle { background: var(--accent); }
.mp2-auto.on .mp2-toggle i { transform: translateX(15px); }
.mp2-cols, .mp2-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 138px 74px; align-items: center; column-gap: 10px; }
.mp2-cols { padding: 2px 22px 4px; font: 700 calc(9.5px * var(--fs)) var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mp2-cols span:first-child { grid-column: 1 / 3; }
.mp2-cols span:last-child:not(:nth-child(2)) { text-align: right; }
.mp2-list { overflow-y: auto; min-height: 0; padding: 0 10px 6px; display: flex; flex-direction: column; gap: 2px; }
.mp2-row {
  appearance: none; width: 100%; padding: 7px 10px; border-radius: calc(10px * var(--r-scale)); border: 1px solid transparent; background: transparent;
  color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast);
}
.mp2-row:hover, .mp2-row:focus-visible { background: color-mix(in oklab, var(--text) 6%, transparent); outline: none; }
.mp2-row:focus-visible { border-color: color-mix(in oklab, var(--accent) 60%, transparent); }
.mp2-row.active { background: color-mix(in oklab, var(--accent) 14%, transparent); border-color: color-mix(in oklab, var(--accent) 45%, transparent); }
.mp2-rank { font: 600 calc(11px * var(--fs)) var(--mono); color: var(--muted); text-align: center; }
.mp2-row.active .mp2-rank { color: var(--accent); font-size: calc(15px * var(--fs)); }
.mp2-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.mp2-name b { font-size: calc(13px * var(--fs)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp2-name small { font-size: calc(11px * var(--fs)); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp2-today { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.mp2-today img { width: 26px; height: 26px; flex-shrink: 0; }
.mp2-t { font-size: calc(12.5px * var(--fs)); font-weight: 600; white-space: nowrap; }
.mp2-r { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; font: 500 calc(11px * var(--fs)) var(--mono); color: #3b82f6; white-space: nowrap; }
.mp2-r i { font-size: calc(9px * var(--fs)); }
.mp2-r.is-zero { color: var(--muted); opacity: .6; }
.mp2-fit { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-variant-numeric: tabular-nums; }
.mp2-fit b { font-size: calc(12.5px * var(--fs)); font-weight: 700; }
.mp2-fit small { font: 500 calc(10px * var(--fs)) var(--mono); color: var(--muted); }
.mp2-bar { width: 52px; height: 4px; border-radius: calc(2px * var(--r-scale)); background: color-mix(in oklab, var(--text) 10%, transparent); overflow: hidden; }
.mp2-bar i { display: block; height: 100%; border-radius: calc(2px * var(--r-scale)); background: var(--muted); }
.mp2-fit.good .mp2-bar i { background: var(--ok); } .mp2-fit.good b { color: var(--ok); }
.mp2-fit.warn .mp2-bar i { background: var(--warn); }
.mp2-fit.bad .mp2-bar i { background: var(--bad); }
.mp2-foot { padding: 8px 16px 11px; border-top: 1px solid var(--border); font-size: calc(10.5px * var(--fs)); line-height: 1.4; color: var(--muted); }
@media (max-width: 559px) {
  .mp2-cols, .mp2-row { grid-template-columns: 20px minmax(0, 1fr) 112px 58px; column-gap: 8px; }
  .mp2-bar { width: 44px; }
  .mp2-row { padding: 9px 8px; }
}
[data-variant="console"] .mp2, [data-variant="console"] .mp2-row, [data-variant="console"] .mp2-auto { border-radius: 0; }

/* ═════════════════════════════════════════════════════════════
 * Přepínač Stanice | Předpověď — dvě stejné poloviny, jezdec pod aktivní
 * (view-transition-name: prepinac → při přechodu mezi stránkami se přesune);
 * ikona počasí v záhlaví bez rámečku. Shodné ve styles.css stanice.
 * ═════════════════════════════════════════════════════════════ */
.topbar .site-nav { position: relative; display: grid; grid-template-columns: 1fr 1fr; isolation: isolate; }
.topbar .site-nav.is-single { grid-template-columns: 1fr; }
.topbar .site-nav-item { position: relative; z-index: 1; min-width: 126px; transition: color .2s; }
.topbar .site-nav .site-nav-item.active,
[data-variant] .topbar .site-nav .site-nav-item.active { background: transparent; box-shadow: none; }
.site-nav-thumb {
  position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 4px); border-radius: calc(9px * var(--r-scale));
  background: color-mix(in oklab, var(--accent) 22%, var(--card-strong));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 50%, transparent),
              0 3px 10px -4px color-mix(in oklab, var(--accent) 55%, transparent);
  view-transition-name: prepinac; pointer-events: none;
}
.site-nav-thumb.is-right { left: calc(50% + 1px); }
.site-nav.is-single .site-nav-thumb { width: auto; right: 3px; }
::view-transition-group(prepinac) { animation-duration: .34s; animation-timing-function: cubic-bezier(.3, .7, .2, 1); }
.topbar .site-nav-item .sn-ico { width: 18px; height: 18px; flex-shrink: 0; }
.topbar .site-nav-item.active .sn-ico { color: var(--accent); }
.topbar a.site-nav-item:hover .sn-ico { color: var(--text); }
[data-variant="studio"] .site-nav-thumb { border-radius: calc(4px * var(--r-scale)); }
[data-variant="console"] .site-nav-thumb { border-radius: 0; }
[data-variant="ledger"] .site-nav-thumb { top: auto; height: 2px; bottom: 0; border-radius: 0; background: var(--text); box-shadow: none; }
[data-variant="ledger"] .topbar .site-nav-item.active .sn-ico { color: inherit; }
/* ikona počasí v záhlaví: bez dlaždice a rámečku */
.topbar .brand-mark, [data-variant] .topbar .brand-mark { background: none; border: 0; border-radius: 0; box-shadow: none; width: 40px; height: 40px; overflow: visible; }
.topbar .brand-mark img { width: 40px; height: 40px; }
@media (max-width: 880px) { .topbar .brand-mark, [data-variant] .topbar .brand-mark, .topbar .brand-mark img { width: 34px; height: 34px; } }

/* ═════════════════════════════════════════════════════════════
 * Lišta předvoleb: uprostřed, jako segment ve stylu přepínače stránek
 * ═════════════════════════════════════════════════════════════ */
.preset-bar { justify-content: center; }
.preset-bar .preset-bar-lbl { display: none; }
.preset-bar .preset-bar-list {
  gap: 2px; padding: 3px; margin: 0; max-width: 100%; border-radius: calc(12px * var(--r-scale));
  border: 1px solid var(--border); background: color-mix(in oklab, var(--text) 4%, transparent);
}
.preset-bar .preset-chip, [data-variant] .preset-bar .preset-chip {
  height: 30px; padding: 0 13px; border: 0; border-radius: calc(9px * var(--r-scale)); background: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--muted); font-size: calc(12.5px * var(--fs));
}
.preset-bar .preset-chip:hover { color: var(--text); background: color-mix(in oklab, var(--text) 7%, transparent); }
.preset-bar .preset-chip[aria-pressed="true"], [data-variant] .preset-bar .preset-chip[aria-pressed="true"] {
  color: var(--text); background: color-mix(in oklab, var(--accent) 22%, var(--card-strong));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 50%, transparent);
}
.preset-bar.is-editing .preset-chip, [data-variant] .preset-bar.is-editing .preset-chip { padding-right: 30px; }
[data-variant="studio"] .preset-bar .preset-bar-list, [data-variant="studio"] .preset-bar .preset-chip { border-radius: calc(6px * var(--r-scale)); }
[data-variant="console"] .preset-bar .preset-bar-list, [data-variant="console"] .preset-bar .preset-chip { border-radius: 0; }
[data-variant="ledger"] .preset-bar .preset-bar-list { background: transparent; border: 0; }
[data-variant="ledger"] .preset-bar .preset-chip[aria-pressed="true"] { background: transparent; box-shadow: inset 0 -2px 0 var(--text); }
@media (max-width: 640px) { .preset-bar .preset-chip, [data-variant] .preset-bar .preset-chip { height: 28px; padding: 0 10px; } }
.mp2 :focus { outline: none; }
.mp2 .mp2-auto:focus-visible, .mp2 .mp2-row:focus-visible { outline: 2px solid color-mix(in oklab, var(--accent) 70%, transparent); outline-offset: 1px; }

/* ═════════════════════════════════════════════════════════════
 * Záhlaví + lišta rozložení = jedna karta (dokud se neroluje; přilepené
 * záhlaví se pak oddělí — data-stuck na <html>, nastavuje App)
 * ═════════════════════════════════════════════════════════════ */
.app > .topbar:has(+ .preset-bar) { transition: border-radius .2s, box-shadow .2s; }
:root:not([data-stuck]) .app > .topbar:has(+ .preset-bar),
:root[data-sticky="off"] .app > .topbar:has(+ .preset-bar) {
  border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: none;
  border-bottom-color: color-mix(in oklab, var(--text) 7%, transparent);
}
.app > .topbar + .preset-bar {
  margin: calc(var(--grid-gap) * -1.4) 0 0; padding: 6px 10px 8px;
  border: 1px solid color-mix(in oklab, var(--accent) 12%, var(--border)); border-top: 0;
  border-radius: 0 0 calc(var(--r-md) + 2px) calc(var(--r-md) + 2px);
  background: color-mix(in oklab, var(--card-strong) 64%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 12px 28px -16px rgba(0, 0, 0, .55);
}
[data-theme="light"] .app > .topbar + .preset-bar { box-shadow: 0 10px 24px -16px rgba(15, 23, 42, .28); }
[data-variant="studio"] .app > .topbar + .preset-bar {
  -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--card-strong);
  border-radius: 0 0 calc(6px * var(--r-scale)) calc(6px * var(--r-scale));
}
[data-variant="console"] .app > .topbar + .preset-bar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--card); border-radius: 0; box-shadow: none; }
[data-variant="ledger"] .app > .topbar + .preset-bar {
  -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in oklab, var(--bg) 94%, transparent);
  border: 0; border-bottom: 3px double var(--border-strong); border-radius: 0; box-shadow: none;
}
:root[data-variant="ledger"]:not([data-stuck]) .app > .topbar:has(+ .preset-bar) { border-bottom: 1px solid var(--border); }
[data-tiles="off"] .app > .topbar + .preset-bar { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Štítek AUTO: čitelný v obou motivech i s akcentem podle teploty — text barvou
   textu, podklad a obrys z akcentu, bez záře. */
.mp2-auto-badge {
  display: inline-flex; align-items: center; padding: 2px 7px 2px; border-radius: 999px;
  background: color-mix(in oklab, var(--accent) 24%, var(--card-strong));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 70%, transparent);
  color: var(--text); font: 800 calc(10px * var(--fs))/1.25 var(--sans); letter-spacing: .08em;
}

/* ═════════════════════════════════════════════════════════════
 * Vítr — stanice × předpověď (wv-*)
 * ═════════════════════════════════════════════════════════════ */
.wv .wv-content { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; height: 100%; min-width: 0; }
.wv-top { display: flex; align-items: center; gap: 14px; min-width: 0; }
.wv-now { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wv-label { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font: 700 calc(10.5px * var(--fs)) var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.wv-label > i { color: var(--accent); font-size: calc(13px * var(--fs)); }
.wv-bft {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; text-transform: none; letter-spacing: 0;
  font: 600 calc(11px * var(--fs)) var(--sans); color: var(--text);
  background: color-mix(in oklab, var(--bft) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--bft) 55%, transparent);
}
.wv-speed { display: flex; align-items: baseline; gap: 6px; line-height: 1; }
.wv-num { font-size: clamp(34px, 14cqw, 60px); font-weight: 300; letter-spacing: -.03em; font-variant-numeric: tabular-nums; padding-bottom: .06em; color: var(--text); }
.wv-unit { font-size: calc(14px * var(--fs)); color: var(--muted); }
.wv-sub { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: calc(12.5px * var(--fs)); color: var(--muted); font-variant-numeric: tabular-nums; }
.wv-sub b { color: var(--text); font-weight: 600; }
.wv-compass { flex: 0 0 auto; width: clamp(96px, 34cqw, 160px); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wv-compass svg { width: 100%; height: auto; }
.wv-legend { display: flex; gap: 10px; font-size: calc(10.5px * var(--fs)); color: var(--muted); white-space: nowrap; }
.wv-legend span, .wv-head span { display: inline-flex; align-items: center; gap: 5px; }
.wv-key { display: inline-block; width: 14px; height: 0; border-top: 2.5px solid var(--accent); border-radius: 2px; }
.wv-key-fc { border-top: 2px dashed var(--muted); }
.wv-cmp {
  display: flex; flex-direction: column; gap: 7px; padding: 10px 12px; min-width: 0;
  border-radius: var(--r-sm); border: 1px solid var(--border);
  background: color-mix(in oklab, var(--card-strong) 55%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.wv-cmp-empty { font-size: calc(12px * var(--fs)); color: var(--muted); line-height: 1.45; }
.wv-cmp-empty b { color: var(--text); }
.wv-verdict { display: flex; align-items: flex-start; gap: 7px; font-size: calc(13px * var(--fs)); font-weight: 600; color: var(--text); line-height: 1.3; }
.wv-verdict i { margin-top: 1px; color: var(--muted); }
.wv-verdict.good i { color: #22c55e; } .wv-verdict.warn i { color: #f59e0b; } .wv-verdict.bad i { color: #ef4444; }
.wv-head, .wv-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 74px; align-items: center; column-gap: 10px; }
.wv-head { font: 600 calc(9.5px * var(--fs)) var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.wv-head > span:nth-child(2) { gap: 6px; flex-wrap: wrap; }
.wv-head small { font-size: inherit; opacity: .7; text-transform: none; margin-right: 8px; }
.wv-head > span:last-child { text-align: right; justify-content: flex-end; }
.wv-k { font-size: calc(12px * var(--fs)); color: var(--muted); white-space: nowrap; }
.wv-bars { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wv-bar { position: relative; display: flex; align-items: center; gap: 6px; height: 12px; min-width: 0; }
.wv-bar i { display: block; height: 6px; border-radius: 3px; flex: 0 0 auto; transition: width .5s cubic-bezier(.4, 0, .2, 1); }
.wv-bar.wv-st i { background: var(--accent); }
.wv-bar.wv-fc i { background: repeating-linear-gradient(90deg, var(--muted) 0 5px, transparent 5px 8px); opacity: .8; }
.wv-bar b { font: 600 calc(11px * var(--fs)) var(--mono); color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wv-bar.wv-fc b { color: var(--muted); font-weight: 500; }
.wv-d {
  justify-self: end; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  font: 700 calc(11px * var(--fs)) var(--mono); font-variant-numeric: tabular-nums; color: var(--muted);
  background: color-mix(in oklab, var(--text) 7%, transparent);
}
.wv-d.good { color: #16a34a; background: color-mix(in oklab, #22c55e 16%, transparent); }
.wv-d.warn { color: #d97706; background: color-mix(in oklab, #f59e0b 18%, transparent); }
.wv-d.bad  { color: #dc2626; background: color-mix(in oklab, #ef4444 16%, transparent); }
[data-theme="dark"] .wv-d.good { color: #4ade80; } [data-theme="dark"] .wv-d.warn { color: #fbbf24; } [data-theme="dark"] .wv-d.bad { color: #f87171; }
.wv-dirs { font-size: calc(12px * var(--fs)); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.wv-vs { color: var(--muted); margin: 0 3px; }
@container tile (max-width: 380px) {
  .wv-top { gap: 10px; }
  .wv-compass { width: clamp(84px, 38cqw, 130px); }
  .wv-legend { flex-direction: column; gap: 1px; align-items: flex-start; }
  .wv-head, .wv-row { grid-template-columns: 46px minmax(0, 1fr) 66px; column-gap: 7px; }
  .wv-d { padding: 2px 6px; font-size: calc(10px * var(--fs)); }
  .wv-cmp { padding: 8px 9px; }
}
@container tile (max-width: 280px) {
  .wv-top { flex-direction: column; align-items: stretch; }
  .wv-compass { align-self: center; width: min(140px, 70cqw); }
  .wv-head { display: none; }
}
[data-variant="console"] .wv-cmp, [data-variant="console"] .wv-bft, [data-variant="console"] .wv-d { border-radius: 0; }
[data-tiles="off"] .wv-cmp { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ═════════════════════════════════════════════════════════════
 * Detail kamery — časosběr 24 h + video (WebcamPlayer, obě stránky)
 * ═════════════════════════════════════════════════════════════ */
.webcam-modal-body:has(> .wtl) { display: block; }
.wtl { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wtl-view { position: relative; align-self: center; max-width: 100%; }
.wtl-view img {
  display: block; width: auto; height: auto; max-width: min(1600px, 92vw); max-height: 66vh; max-height: 66dvh;
  object-fit: contain; border-radius: var(--r-md);
}
.wtl-stamp {
  position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px; border-radius: 999px; background: rgba(8, 12, 20, .62); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 600 calc(13px * var(--fs, 1)) var(--mono); font-variant-numeric: tabular-nums;
}
.wtl-stamp b { padding: 1px 7px; border-radius: 999px; background: var(--accent); color: #06121f; font: 800 calc(10px * var(--fs, 1)) var(--sans); letter-spacing: .04em; }
.wtl-spin {
  position: absolute; right: 12px; top: 12px; width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: wtlspin .8s linear infinite;
}
@keyframes wtlspin { to { transform: rotate(360deg); } }
.wtl-note { font-size: calc(12px * var(--fs, 1)); color: var(--muted); text-align: center; }
.wtl-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.wtl-btns { display: inline-flex; align-items: center; gap: 4px; }
.wtl-b {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; min-width: 34px; padding: 0 10px;
  border-radius: 999px; border: 1px solid var(--border); background: color-mix(in oklab, var(--text) 5%, transparent);
  color: var(--text); font: 600 calc(12.5px * var(--fs, 1)) var(--sans); cursor: pointer; white-space: nowrap;
  transition: border-color .15s, background .15s;
}
.wtl-b:hover:not(:disabled) { border-color: var(--accent); }
.wtl-b:disabled { opacity: .4; cursor: default; }
.wtl-b i { font-size: 15px; }
.wtl-play { width: 42px; height: 42px; padding: 0; background: var(--accent); border-color: var(--accent); color: #06121f; }
.wtl-play i { font-size: 20px; }
.wtl-track { position: relative; flex: 1 1 260px; min-width: 200px; padding-bottom: 16px; }
.wtl-track input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 8px 0 0; border-radius: 3px; cursor: pointer;
  background: linear-gradient(90deg, var(--accent) 0 var(--p), color-mix(in oklab, var(--text) 14%, transparent) var(--p) 100%);
}
.wtl-track input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--card-strong);
  border: 3px solid var(--accent); box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.wtl-track input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--card-strong); border: 3px solid var(--accent); }
.wtl-track input[type="range"]:focus-visible { outline: 2px solid color-mix(in oklab, var(--accent) 60%, transparent); outline-offset: 4px; }
.wtl-ticks { position: absolute; left: 9px; right: 9px; bottom: 0; height: 14px; pointer-events: none; }
.wtl-ticks span { position: absolute; transform: translateX(-50%); font: 500 calc(10px * var(--fs, 1)) var(--mono); color: var(--muted); }
.wtl-ticks span.is-day { color: var(--text); font-weight: 700; }
.wtl-seg { display: inline-flex; padding: 2px; border-radius: 999px; border: 1px solid var(--border); background: color-mix(in oklab, var(--text) 4%, transparent); }
.wtl-seg button {
  appearance: none; border: 0; background: transparent; color: var(--muted); height: 28px; padding: 0 10px; border-radius: 999px;
  font: 600 calc(12px * var(--fs, 1)) var(--mono); cursor: pointer;
}
.wtl-seg button[aria-pressed="true"] { background: color-mix(in oklab, var(--accent) 22%, var(--card-strong)); color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 50%, transparent); }
.wtl-video.busy i { animation: wtlspin 1.2s linear infinite; }
.wtl-video.err { border-color: #ef4444; }
@media (max-width: 640px) {
  .wtl-track { order: -1; flex-basis: 100%; }
  .wtl-live span { display: none; }
}

/* tooltip: patička i v ostatních grafech předpovědi */
.ch-tip .tip-foot b { color: var(--text); font-weight: 600; }
.ch-tip .tip-row .k { color: var(--muted); }

/* ── Pruh teplot za 24 h: vlastní tooltip (najetí / klepnutí) — obě stránky ── */
.trange { position: relative; cursor: help; outline: none; border-radius: 6px; }
.trange:focus-visible { box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 55%, transparent); }
.trange-tip {
  position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 30; width: max-content; max-width: min(300px, 100%);
  padding: 9px 12px 10px; border-radius: 10px; border: 1px solid var(--border-strong);
  background: color-mix(in oklab, var(--card-strong) 96%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28); color: var(--text);
  font-family: var(--sans); font-size: calc(12px * var(--fs, 1)); text-align: left;
  opacity: 0; visibility: hidden; transform: translateY(4px); pointer-events: none;
  transition: opacity .15s, transform .15s, visibility .15s;
}
[data-theme="light"] .trange-tip { box-shadow: 0 10px 28px rgba(15, 23, 42, .16); }
.trange:hover .trange-tip, .trange:focus .trange-tip { opacity: 1; visibility: visible; transform: none; }
.trange-tip .tt-h { font: 700 calc(10px * var(--fs, 1)) var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.trange-tip .tt-row { display: grid; grid-template-columns: 8px auto auto 1fr; align-items: center; column-gap: 8px; padding: 2px 0; white-space: nowrap; }
.trange-tip .tt-row i { width: 8px; height: 8px; border-radius: 50%; }
.trange-tip .tt-row span { color: var(--muted); font-size: calc(11.5px * var(--fs, 1)); min-width: 44px; }
.trange-tip .tt-row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.trange-tip .tt-row small { justify-self: end; padding-left: 10px; color: var(--muted); font: 500 calc(10.5px * var(--fs, 1)) var(--mono); }
.trange-tip .tt-foot { margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--border); color: var(--muted); font-size: calc(10.5px * var(--fs, 1)); line-height: 1.4; white-space: normal; }
[data-variant="console"] .trange-tip { border-radius: 0; }

/* Studio: pomocné čáry v grafech (mřížka, půlnoc, obzor, základna) jemně
   čárkované a šedé — plné černé linky Studia graf přetěžovaly */
[data-variant="studio"] :is(.fc-grid, .tc-grid, .sw-grid, .fc-midnight, .tc-midnight, .fc-base, .sw-horizon),
[data-variant="studio"] svg line:is([stroke="var(--border)"], [stroke="var(--grid)"]) {
  stroke: var(--muted); stroke-opacity: .5; stroke-dasharray: 2 4; opacity: 1;
}
[data-variant="studio"] :is(.fc-midnight, .tc-midnight) { stroke-opacity: .7; stroke-dasharray: 4 4; }

/* ═════════════════════════════════════════════════════════════
 * Tooltip grafů — JEDEN pro stanici i předpověď (.pm-tip, stejný blok v obou
 * stylech; čas přes window.fmtTipTime)
 * ═════════════════════════════════════════════════════════════ */
.pm-tip {
  position: absolute; z-index: 3; pointer-events: none; white-space: nowrap; min-width: 160px; text-align: left;
  padding: 8px 11px 9px; border-radius: 10px; border: 1px solid var(--border-strong);
  background: color-mix(in oklab, var(--card-strong) 95%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28); color: var(--text);
  font: 400 calc(12px * var(--fs, 1))/1.35 var(--sans);
}
[data-theme="light"] .pm-tip { box-shadow: 0 10px 28px rgba(15, 23, 42, .16); }
.pm-tip .tip-head { display: flex; align-items: center; gap: 8px; margin: -2px 0 6px; }
.pm-tip .tip-head img { flex-shrink: 0; margin-left: -3px; }
.pm-tip .tip-time { font: 600 calc(12px * var(--fs, 1)) var(--mono); color: var(--text); margin-bottom: 5px; }
.pm-tip .tip-head .tip-time { margin: 0; }
.pm-tip .tip-time small { margin-left: 6px; font: 500 calc(10.5px * var(--fs, 1)) var(--sans); color: var(--muted); }
.pm-tip .tip-cond { font-size: calc(11px * var(--fs, 1)); color: var(--muted); }
.pm-tip .tip-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 2px 0; }
.pm-tip .tip-row .k { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: calc(11px * var(--fs, 1)); }
.pm-tip .tip-row strong { display: inline-flex; align-items: center; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.pm-tip .tip-row strong small { margin-left: 6px; font-weight: 400; color: var(--muted); }
.pm-tip .tip-sw { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pm-tip .tip-dir { display: inline-block; margin: 0 2px 0 6px; font-size: calc(11px * var(--fs, 1)); color: var(--muted); }
.pm-tip .tip-foot { margin-top: 6px; padding-top: 5px; border-top: 1px solid var(--border); font-size: calc(10.5px * var(--fs, 1)); color: var(--muted); white-space: nowrap; }
.pm-tip .tip-foot b { color: var(--text); font-weight: 600; }
[data-variant="console"] .pm-tip { border-radius: 0; }

/* Aktuálně (první widget): horní část — stav, teplota s ikonou, pocitově — na střed */
.now-cond, .now-main, .now-sub { justify-content: center; text-align: center; }

/* Aurora: záhlaví (i spojená lišta rozložení) průsvitné jako dlaždice — záře
   akcentu v pozadí jím prosvítá stejně jako na stránce stanice */
[data-variant="aurora"] .topbar,
[data-variant="aurora"] .app > .topbar + .preset-bar {
  background: color-mix(in oklab, var(--card) 38%, transparent);
  -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%);
}

/* ═════════════════════════════════════════════════════════════
 * Záhlaví + lišta rozložení: JEDEN podklad pro obě části, ať přechod (a záře
 * akcentu pod rozmazáním) navazuje — kreslí ho lišta (::before), sahá o výšku
 * záhlaví (--hdr-h) nahoru pod průhledné záhlaví. Přilepené záhlaví (při
 * rolování) má zase vlastní podklad.
 * ═════════════════════════════════════════════════════════════ */
.app > .topbar + .preset-bar {
  --hdr-bg: color-mix(in oklab, var(--card-strong) 64%, transparent);
  --hdr-filter: blur(20px) saturate(160%);
  --hdr-r: calc(var(--r-md) + calc(2px * var(--r-scale)));
  position: relative; z-index: 799; isolation: isolate;
  background: transparent !important; border-color: transparent !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
[data-variant="aurora"] .app > .topbar + .preset-bar { --hdr-bg: color-mix(in oklab, var(--card) 38%, transparent); --hdr-filter: blur(30px) saturate(170%); }
[data-variant="studio"] .app > .topbar + .preset-bar { --hdr-bg: var(--card-strong); --hdr-filter: none; --hdr-r: calc(6px * var(--r-scale)); }
[data-variant="console"] .app > .topbar + .preset-bar { --hdr-bg: var(--card); --hdr-filter: none; --hdr-r: 0px; }
[data-variant="ledger"] .app > .topbar + .preset-bar { --hdr-bg: color-mix(in oklab, var(--bg) 94%, transparent); --hdr-filter: none; --hdr-r: 0px; }
.app > .topbar + .preset-bar::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 0; right: 0; bottom: 0; top: calc(-1 * var(--hdr-h, 0px));
  border: 1px solid color-mix(in oklab, var(--accent) 12%, var(--border)); border-radius: var(--hdr-r);
  background: var(--hdr-bg); -webkit-backdrop-filter: var(--hdr-filter); backdrop-filter: var(--hdr-filter);
  box-shadow: 0 12px 28px -16px rgba(0, 0, 0, .55);
}
[data-theme="light"] .app > .topbar + .preset-bar::before { box-shadow: 0 10px 24px -16px rgba(15, 23, 42, .28); }
[data-variant="ledger"] .app > .topbar + .preset-bar::before { border: 0; border-bottom: 3px double var(--border-strong); box-shadow: none; }
[data-variant="console"] .app > .topbar + .preset-bar::before { box-shadow: none; }
/* záhlaví nad společným podkladem průhledné (jen tenká dělicí čára) */
:root:not([data-stuck]) .app > .topbar:has(+ .preset-bar),
:root[data-sticky="off"] .app > .topbar:has(+ .preset-bar) {
  background: transparent !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border-color: transparent !important; border-bottom-color: color-mix(in oklab, var(--text) 7%, transparent) !important;
}
/* přilepené záhlaví má vlastní podklad → lišta kreslí jen svou část */
:root[data-stuck]:not([data-sticky="off"]) .app > .topbar + .preset-bar::before {
  top: 0; border-top: 0; border-radius: 0 0 var(--hdr-r) var(--hdr-r);
}
[data-tiles="off"] .app > .topbar + .preset-bar::before { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Záhlaví na telefonu (≤ 640 px): logo + tlačítka / přepínač přes celou šířku /
   stav a model — nic se nepřekrývá (přepínač měl min. šířku 126 px na položku) */
@media (max-width: 640px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand actions" "nav nav" "status status";
    row-gap: 6px;
  }
  .topbar .site-nav-item { min-width: 0; }
  .topbar .topbar-status { justify-content: center; min-height: 20px; }
  .topbar .topbar-actions { gap: 2px; }
  .topbar .topbar-btn, .topbar .topbar-btn-donate { width: 30px; height: 30px; }
  .topbar .brand { gap: 8px; }
  .topbar .brand-mark, [data-variant] .topbar .brand-mark, .topbar .brand-mark img { width: 30px; height: 30px; }
}

/* Radar na telefonu: mapa přes celou šířku dlaždice (ve správném poměru stran),
   ovládání pod ní, dlaždice se jí přizpůsobí výškou — ne malá mapa vepsaná do nízké dlaždice */
@media (max-width: 719.98px) {
  .radar { container-type: inline-size; flex: none; min-height: 0; }
  .radar .radar-map, .radar > .radar-bar { width: 100%; }
}

@media (max-width: 380px) {
  .topbar .brand-locality, [data-variant] .topbar .brand-locality { font-size: calc(14px * var(--fs)); }
  .topbar .brand-title { letter-spacing: .12em; }
  .topbar .topbar-actions { gap: 0; }
}

.topbar .brand-locality { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ═════════════════════════════════════════════════════════════
 * Přepínač Stanice | Předpověď | Statistiky — tři stejné díly, jezdec
 * pod aktivní položkou (--i = pořadí, --n = počet). Stejný blok je ve
 * styles.css stanice a /_statistiky/statistiky.css — držet shodný.
 * ═════════════════════════════════════════════════════════════ */
.topbar .site-nav.is-multi { grid-template-columns: repeat(var(--n, 3), 1fr); }
.topbar .site-nav.is-multi .site-nav-thumb {
  left: calc(3px + var(--i, 0) * (100% - 6px) / var(--n, 3));
  width: calc((100% - 6px) / var(--n, 3) - 2px);
}
@media (max-width: 640px) { .topbar .site-nav.is-multi .site-nav-item { padding: 0 4px; gap: 4px; } }
@media (max-width: 400px) { .topbar .site-nav.is-multi .sn-ico { display: none; } }

/* ═════════════════════════════════════════════════════════════
 * Výběr modelu v liště rozložení (Lukáš 21. 10. 2026): předvolby uprostřed
 * pod přepínačem stránek (mřížka 1fr | předvolby | 1fr jako záhlaví), model
 * vpravo jako slabý text stavu. Bez předvoleb jen model vpravo; s vypnutou
 * lištou je model v záhlaví za stavem.
 * ═════════════════════════════════════════════════════════════ */
.preset-bar:has(> .preset-bar-model) {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, max-content) minmax(max-content, 1fr);
  column-gap: 12px;
}
.preset-bar > .preset-bar-list { grid-column: 2; }
.preset-bar > .preset-bar-model {
  grid-column: 3; justify-self: end; display: flex; align-items: center; min-width: 0; padding-right: 8px;
  font-family: var(--mono); font-size: calc(11px * var(--fs)); color: var(--muted);
}
/* telefon: model na vlastním řádku pod předvolbami, uprostřed jako stav nad ním */
@media (max-width: 640px) {
  .preset-bar:has(> .preset-bar-model) { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .preset-bar > .preset-bar-list { grid-column: 1; justify-self: center; }
  .preset-bar > .preset-bar-model { grid-column: 1; justify-self: center; padding: 0; min-height: 20px; }
}

/* Podpořit (a další široká tlačítka) mezi 641 a 880 px: šířka podle popisku —
   pevných 32 px nechávalo „Podpořit“ přetékat přes vedlejší tlačítka. */
@media (min-width: 641px) and (max-width: 880px) { .topbar .topbar-btn-wide { width: auto; } }

/* Úzká pravá část záhlaví (zhruba 881–1100 px): nejdřív jen srdíčko bez
   „Podpořit“, pak jen tečka stavu (text v popisku) — nic se neořízne napůl. */
.topbar-right { container: zahlavi-vpravo / inline-size; }
@container zahlavi-vpravo (max-width: 320px) {
  .topbar .topbar-btn-donate .topbar-btn-label { display: none; }
  .topbar .topbar-btn-donate { width: 34px; padding: 0; }
}
@container zahlavi-vpravo (max-width: 250px) {
  .topbar .topbar-status > span:not(.status-dot) { display: none; }
}

/* Kliknutí do textu neukáže blikající kurzor (Chrome: procházení s kurzorem,
   F7); ve formulářových polích zůstává. */
html { caret-color: transparent; }
input, textarea, select, [contenteditable]:not([contenteditable="false"]) { caret-color: auto; }

/* Vlastní kresba u předvolby (Meteostanice = anemometr z přepínače stránek):
   velikost a barvy jako ikona Bootstrap vedle ní. */
.preset-chip .pi-ico { width: calc(15px * var(--fs)); height: calc(15px * var(--fs)); flex-shrink: 0; }
.preset-chip[aria-pressed="true"] .pi-ico { color: var(--accent); }
[data-variant="ledger"] .preset-chip[aria-pressed="true"] .pi-ico { color: inherit; }
svg.vz-prow-ico { height: calc(15px * var(--fs)); }

/* Toast s více tlačítky (např. „Uložit do předvolby?“ po skončení úprav):
   na úzké obrazovce se zalomí, druhé tlačítko tišší, křížek zavře. */
.toast { max-width: calc(100vw - 24px); box-sizing: border-box; }
.toast.has-actions { flex-wrap: wrap; justify-content: center; row-gap: 6px; border-radius: calc(14px * var(--r-scale)); padding: 8px 8px 8px 14px; }
.toast.has-actions > span { flex: 1 1 auto; min-width: 0; }
.toast-action.is-secondary { color: var(--muted); background: transparent; border-color: var(--border); }
.toast-action.is-secondary:hover { color: var(--text); border-color: var(--border-strong); background: color-mix(in oklab, var(--text) 6%, transparent); }
.toast-x {
  appearance: none; border: 0; background: transparent; color: var(--muted); cursor: pointer;
  width: 24px; height: 24px; display: inline-grid; place-items: center; border-radius: 999px; padding: 0;
  font-size: calc(15px * var(--fs));
}
.toast-x:hover { color: var(--text); background: color-mix(in oklab, var(--text) 8%, transparent); }

/* Odznak podporovatele na rohu loga: window.PM_PODPORA = {uroven, nazev} vkládá server
   (routes.py podpora_js) jen u stanice s darem (Lukáš 22. 10. 2026). Kresba a barva úrovně jako
   hlavní stránka /lokalita/: u1 srdce, u2 srdce s jiskrou, u3 koruna. Stejný blok je na stanici,
   v Počasí i ve statistikách — držet shodný. */
.topbar .brand-mark { position: relative; }
.topbar .brand-mark:has(.podpora-odznak) { overflow: visible; }
.podpora-odznak {
  position: absolute; right: -6px; bottom: -5px; z-index: 2;
  width: 17px; height: 17px; border-radius: 50%;
  display: grid; place-items: center;
  background: #ec4899; color: #fff; font-style: normal;
  box-shadow: 0 0 0 2px var(--card-strong, #0b1020), 0 2px 6px rgba(0, 0, 0, .35);
  cursor: help;
}
.podpora-odznak.u2 { background: #8b5cf6; }
.podpora-odznak.u3 { background: #f59e0b; }
.topbar .brand-mark .podpora-odznak svg { display: block; width: 11px; height: 11px; }