/* Forecast-specific overlays on top of meteostanice styles.css
 * - Widget grid (drag/drop reorder, span, edit-mode chrome)
 * - Hero forecast comparison (station vs model)
 * - Hourly strip
 * - Daily list
 * - Models leaderboard
 * - Chart toggles + bars
 */

/* ── App scaffolding ─────────────────────────────────────────── */
/* .app stays transparent so the body's gradient (accent + temperature tint
   from styles-v2.css `body::after`) shows through every widget gap. The
   per-variant body background defined in styles.css supplies the base. */
.app { background: transparent; }

/* ── Topbar extensions ───────────────────────────────────────── */
.topbar .brand-mark {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--card);
  border: 1px solid var(--border);
  overflow: hidden;
}
.topbar .brand-mark img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.topbar-btn.wide {
  width: auto; padding: 0 12px; gap: 6px;
  font-size: calc(12px * var(--fs)); font-weight: 500;
}
.topbar-btn.wide i { font-size: calc(13px * var(--fs)); }
.topbar-btn[aria-pressed="true"].primary { background: var(--accent); color: #0b1020; border-color: var(--accent); }

/* ── Edit banner ─────────────────────────────────────────────── */
.edit-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  border-radius: var(--r-md);
  color: var(--text); font-size: calc(13px * var(--fs));
}
.edit-banner i { color: var(--accent); }

/* ── Dashboard grid (12-col masonry) ─────────────────────────── */
/* True masonry in BOTH view and edit mode (so editing looks exactly
   like the saved state). A fine `grid-auto-rows: var(--masonry-row)`
   track turns the grid into a pixel-ish canvas; the JS skyline packer
   in Dashboard writes an explicit `grid-column` + `grid-row` on every
   tile so a short widget tucks into the shortest column beside/under
   a taller one (deterministic — not the unreliable browser
   `grid-auto-flow: dense` heuristic). In edit mode the packer keeps
   running, so resizing a tile re-packs live (the tile may shift mid-
   drag — packing is prioritised over perfect handle smoothness).
   `align-self: start` keeps every tile at its natural content height
   so the row-span maths is exact and short tiles never balloon to a
   neighbour's height.

   Gaps: a 1px row track means a tile spans ≈ its exact pixel height
   (no quantisation slack). Native `row-gap` is therefore 0 — the
   packer inserts the configured gap itself between stacked tiles, so
   the vertical gap is EXACTLY the Tweaks value and matches the
   horizontal `column-gap`. */
.dash-grid {
  --masonry-row: 1px;
  display: grid;
  grid-template-columns: repeat(var(--dash-cols, 12), 1fr);
  grid-auto-rows: var(--masonry-row);
  grid-auto-flow: row;
  column-gap: var(--gap-md);
  row-gap: 0;
}
.widget {
  grid-column: span 12; min-width: 0;
  align-self: start;
}
@media (min-width: 720px) {
  /* Tablet (720-1100px): narrow widgets get a one-step boost so they
     don't read as awkwardly thin slivers. Wide widgets collapse to full
     row. Every integer 2-12 has an explicit rule — without one, the
     base `.widget { grid-column: span 12 }` would silently take over. */
  .widget.span-12 { grid-column: span 12; }
  .widget.span-11 { grid-column: span 12; }
  .widget.span-10 { grid-column: span 12; }
  .widget.span-9 { grid-column: span 12; }
  .widget.span-8 { grid-column: span 8; }
  .widget.span-7 { grid-column: span 8; }
  .widget.span-6 { grid-column: span 6; }
  .widget.span-5 { grid-column: span 6; }
  .widget.span-4 { grid-column: span 4; }
  .widget.span-3 { grid-column: span 6; }
  .widget.span-2 { grid-column: span 4; }
}
@media (min-width: 1100px) {
  /* Desktop: every column 2-12 is honored exactly. */
  .widget.span-12 { grid-column: span 12; }
  .widget.span-11 { grid-column: span 11; }
  .widget.span-10 { grid-column: span 10; }
  .widget.span-9 { grid-column: span 9; }
  .widget.span-8 { grid-column: span 8; }
  .widget.span-7 { grid-column: span 7; }
  .widget.span-6 { grid-column: span 6; }
  .widget.span-5 { grid-column: span 5; }
  .widget.span-4 { grid-column: span 4; }
  .widget.span-3 { grid-column: span 3; }
  .widget.span-2 { grid-column: span 2; }
}

/* ── Narrow-tile typography scaling ──────────────────────────── */
/* When the user shrinks a widget down to span 2-3, the default font sizes
   blow out the body and force ugly wraps. These selectors scale text by ~15-
   25 % within the narrow tile (without touching the same widget at wider
   sizes) and drop secondary chrome that doesn't fit. */
.widget.span-2, .widget.span-3 {
  --tile-narrow: 1;
}
.widget.span-2 .widget-title,
.widget.span-3 .widget-title { font-size: calc(11.5px * var(--fs)); }
.widget.span-2 .widget-sub,
.widget.span-3 .widget-sub { display: none; }
.widget.span-2 .widget-head .ico { display: none; }
.widget.span-2 .drag-handle { width: 18px; height: 18px; }

/* Wind tile — keep the compass-left / forecast-right row at EVERY span,
   including the thinnest (2 & 3). Just shrink the compass, headline and
   gaps so both still fit; flex-wrap on .wind-aside is the safety net if a
   tile is ever too tight to hold them side by side. */
.widget.span-2 .wind-aside,
.widget.span-3 .wind-aside { gap: 10px; }
.widget.span-2 .wind-forecast,
.widget.span-3 .wind-forecast { padding-left: 10px; }
/* svg width stays 100% (fills the flex-grown compass area); only cap the
   max so it doesn't dominate the narrow tile. */
.widget.span-2 .wind-compass svg { max-width: 120px; }
.widget.span-3 .wind-compass svg { max-width: 150px; }
.widget.span-2 .wind-aside .wind-compass,
.widget.span-3 .wind-aside .wind-compass { min-width: 72px; }
.widget.span-2 .wind-num,
.widget.span-3 .wind-num { font-size: clamp(30px, 9vw, 44px); }
.widget.span-2 .wind-extras,
.widget.span-3 .wind-extras { font-size: calc(10.5px * var(--fs)); }
.widget.span-2 .wind-label,
.widget.span-3 .wind-label { font-size: calc(10px * var(--fs)); }

/* Sun tile — strip + event cards + moon panel scale down */
.widget.span-2 .dn-strip,
.widget.span-3 .dn-strip { height: 22px; min-height: 22px; margin-top: 10px; }
.widget.span-2 .dn-tick span,
.widget.span-3 .dn-tick span { font-size: calc(8px * var(--fs)); }
.widget.span-2 .dn-marker i,
.widget.span-3 .dn-marker i { font-size: calc(12px * var(--fs)); }
.widget.span-2 .dn-now,
.widget.span-3 .dn-now { width: 18px; height: 18px; }
.widget.span-2 .dn-now i,
.widget.span-3 .dn-now i { font-size: calc(11px * var(--fs)); width: 16px; height: 16px; line-height: 16px; }
.widget.span-2 .sun-event,
.widget.span-3 .sun-event { padding: 6px 8px; gap: 6px; }
.widget.span-2 .sun-event i,
.widget.span-3 .sun-event i { font-size: calc(14px * var(--fs)); }
.widget.span-2 .sun-event-text strong,
.widget.span-3 .sun-event-text strong { font-size: calc(13px * var(--fs)); }
.widget.span-2 .sun-event-text .sub,
.widget.span-3 .sun-event-text .sub { font-size: calc(9px * var(--fs)); }
.widget.span-2 .sun-moon,
.widget.span-3 .sun-moon { padding: 6px 8px; gap: 8px; }
.widget.span-2 .sun-moon-text strong,
.widget.span-3 .sun-moon-text strong { font-size: calc(14px * var(--fs)); }

/* Widget chrome — translucent so the body gradient (accent + temperature
   tint) reads through, with backdrop-filter blurring whatever's behind for
   legibility. Variants override the opacity / blur per their design intent. */
.widget {
  background: color-mix(in oklab, var(--card) 55%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: var(--pad-card);
  display: flex; flex-direction: column; gap: var(--gap-sm);
  position: relative;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
/* Studio — solid panel feel, only mildly translucent so the gradient hints
   through edges without breaking the studio's flatness. */
[data-variant="studio"] .widget {
  background: color-mix(in oklab, var(--card) 88%, transparent);
  box-shadow: var(--shadow-card);
  border-width: 1.5px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Console — terminal opaque; the gradient still shows around tiles. */
[data-variant="console"] .widget {
  background: color-mix(in oklab, var(--card) 92%, transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Ledger — fully transparent (just hairline top border). Lets the body
   gradient shine through unchanged. */
[data-variant="ledger"] .widget {
  background: transparent;
  border: none; border-top: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.widget.dragging { opacity: 0.4; }
/* Drop indicator — thick accent line on the side the dragged tile will
   insert at. drop-before = left edge, drop-after = right edge. */
.widget.drag-over { transform: translateY(-1px); }
.widget.drag-over::before {
  content: '';
  position: absolute;
  top: -4px; bottom: -4px;
  width: 4px;
  border-radius: calc(2px * var(--r-scale, 1));
  background: var(--accent);
  box-shadow: 0 0 12px color-mix(in oklab, var(--accent) 70%, transparent);
  z-index: 100;
  pointer-events: none;
}
.widget.drag-over.drop-before::before { left: -8px; }
.widget.drag-over.drop-after::before  { right: -8px; }

.widget-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 4px;
  flex-wrap: wrap;
  min-width: 0;
}
.widget-head .drag-handle {
  background: transparent; border: none; padding: 0;
  width: 22px; height: 22px; display: grid; place-items: center;
  color: var(--dim); cursor: grab;
  border-radius: var(--r-sm);
}
.widget-head .drag-handle:hover { color: var(--text); background: var(--card-hover); }
.widget:not([draggable="true"]) .drag-handle { display: none; }
.widget-head .ico {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--accent) 18%, transparent);
  color: var(--accent);
  font-size: calc(13px * var(--fs));
}
.widget-title {
  font-size: calc(13px * var(--fs)); font-weight: 600; letter-spacing: -0.005em;
  color: var(--text);
}
.widget-sub {
  font-size: calc(11px * var(--fs)); color: var(--muted);
  font-family: var(--mono); letter-spacing: 0.04em;
  margin-left: 4px;
}
.widget-actions { margin-left: auto; display: flex; gap: 4px; }
.widget-header-extras { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.widget-header-extras + .widget-actions { margin-left: 8px; }

/* Tweak: skrýt nadpisy dlaždic. Schová ikonu + title + sub-label, ale
   nechá drag handle (v edit režimu), header-extras (range tabs, chart
   filter chips) a action buttons (resize/move/del) viditelné — funkční
   prvky zůstávají dostupné. */
.dash-grid.hide-titles .widget-head .ico,
.dash-grid.hide-titles .widget-head .widget-title,
.dash-grid.hide-titles .widget-head .widget-sub { display: none; }
/* Když v editu zůstaly v header pouze action buttons + drag handle, redukce
   spodního odsazení vytváří kompaktnější vzhled. */
.dash-grid.hide-titles .widget-head { padding-bottom: 0; }
/* View mode + skryté nadpisy + widget bez header-extras → cely header pryč,
   ať dlaždice nemají prázdné záhlaví. Edit mode header vždy ponechá (kvůli
   resize/move tlačítkům). */
.dash-grid.hide-titles:not(.editing) .widget-head:not(:has(.widget-header-extras)) {
  display: none;
}
.widget-actions button {
  background: transparent; border: 1px solid transparent; color: var(--dim);
  width: 26px; height: 26px; border-radius: var(--r-sm);
  display: grid; place-items: center; cursor: pointer;
  transition: all var(--t-fast); font-size: calc(12px * var(--fs));
}
.widget-actions button:hover { color: var(--text); border-color: var(--border); background: var(--card-hover); }
.widget-actions button.del:hover { color: var(--bad); border-color: var(--bad); }
/* flex:1 + justify-content:center → když masonry roztáhne widget na výšku
   souseda, obsah je svisle uprostřed místo "u headeru, prázdno dole". */
.widget-body { display: flex; flex-direction: column; gap: var(--gap-sm); min-width: 0; flex: 1; justify-content: center; }

/* hide reorder buttons unless in edit mode */
.widget:not([draggable="true"]) .widget-actions button:not(.del) { display: none; }
.widget:not([draggable="true"]) .widget-actions .del { display: none; }

/* ── Hero (original meteostanice look) ───────────────────────── */
/* Grid sloupce: teplota | ikona | graf | (webcam).
   Frakční jednotky, ne `auto` — `auto` brala šířku podle nejširšího řádku
   (meta) a graf pak dostal příliš málo místa. Fr jednotky drží proporci
   konzistentně bez ohledu na obsah; minmax(0, ...) povolí zmenšení pod
   intrinsic min-content, takže layout nepřetéká. */
.hero-row {
  display: grid;
  /* Sloupec 1 = auto → temp-col se zúží na šířku svého obsahu (typicky meta
     řádek je nejširší). Ikona uvnitř hero-temp-row je flex-start, takže sedí
     hned vedle teplotního čísla. Sloupec 2 = 1fr → webcam začíná za temp-col. */
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(14px, 2vw, 28px);
  align-items: center;
  padding: 4px 0;
}
.hero-row.hero-with-webcam {
  grid-template-columns: auto minmax(0, 1fr) minmax(140px, 220px);
}
/* Grid děti musí mít min-width: 0, jinak by intrinsic min-content rozbila
   minmax(0, ...) a sloupec by přetekl. */
.hero-row > .hero-temp-col,
.hero-row > .hero-spark { min-width: 0; }
@media (max-width: 1100px) {
  .hero-row, .hero-row.hero-with-webcam { grid-template-columns: 1fr; }
}


.hero-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: calc(10px * var(--fs)); letter-spacing: 0.18em; color: var(--muted); font-family: var(--mono); text-transform: uppercase; }
.hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 99px; background: var(--ok, #4ade80); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ok, #4ade80) 22%, transparent); }
.hero-loc { font-size: clamp(20px, 2.4vw, 28px); font-weight: 600; letter-spacing: -0.01em; margin-top: 2px; line-height: 1.05; }

/* Temperature + icon sit on one row. justify-content: flex-start → ikona
   sedí přímo za teplotním číslem, ne na pravém okraji sloupce. */
.hero-temp-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(8px, 1.4vw, 18px);
  margin: 8px 0 6px;
  min-width: 0;
}
.hero-temp-num {
  display: flex; align-items: flex-start; gap: 6px;
  font-variant-numeric: tabular-nums;
  font-weight: 200; line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--accent);
  min-width: 0;
}
.hero-temp-num .num { font-size: clamp(56px, 8vw, 104px); }
/* Unit resets the tight letter-spacing so °C doesn't collide with itself,
   and uses a small top inset so it visually sits at the cap height of the
   number rather than its ascender line. */
.hero-temp-num .unit {
  font-size: clamp(18px, 1.6vw, 24px);
  margin-top: 0.22em;
  color: var(--muted); font-weight: 300;
  letter-spacing: 0; line-height: 1;
}
.hero-cond-icon {
  /* Velikost = velikost teplotního čísla (clamp se shoduje s
     .hero-temp-num .num ve v2 override), aby ikona vizuálně sedla. */
  width: clamp(56px, 6.5vw, 88px);
  height: clamp(56px, 6.5vw, 88px);
  object-fit: contain;
  filter: drop-shadow(0 6px 16px color-mix(in oklab, var(--accent) 32%, transparent));
  flex-shrink: 0;
}
.temp-frost { color: #60a5fa; }
.temp-cold  { color: #38bdf8; }
.temp-cool  { color: #4ade80; }
.temp-warm  { color: #facc15; }
.temp-hot   { color: #fb923c; }

.hero-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  font-size: calc(13px * var(--fs)); color: var(--muted); font-family: var(--mono); letter-spacing: 0.01em;
}
.hero-meta strong { color: var(--text); font-weight: 600; }
.hero-meta i { opacity: 0.7; }
.hero-meta .mm-max { color: #fb923c; font-weight: 600; }
.hero-meta .mm-min { color: #38bdf8; font-weight: 600; }
.hero-meta .sep { opacity: 0.35; }

.hero-cond { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--text); }
.hero-cond img { width: 36px; height: 36px; object-fit: contain; }
.hero-cond span { font-size: calc(14px * var(--fs)); font-weight: 500; }

.hero-spark { min-width: 0; }
.hero-spark .spark-title { font-size: calc(10px * var(--fs)); letter-spacing: 0.18em; color: var(--muted); font-family: var(--mono); text-transform: uppercase; margin-bottom: 8px; }
/* Graf v hero: width 100% + aspect-ratio matching viewBox 800:280.
   Tím je výška vždy proporcionální k šířce sloupce — žádné stretching/
   shearing od preserveAspectRatio="none" v non-matching kontejnerech.
   max-height drží limit pro velmi široké hero sloupce. */
.spark-widget.spark-compact .spark-svg {
  width: 100%;
  height: auto;
  aspect-ratio: 800 / 280;
  max-height: 360px;
  display: block;
}

.hero-webcam {
  position: relative; display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: #0b1020;
  /* No forced aspect-ratio: when the webcam returns 4:3 / 3:2 / 16:10 etc.,
     a fixed 16:9 frame + object-fit clipped the image visibly. Letting the
     image dictate its own height keeps the entire frame readable regardless
     of source ratio; max-height caps unusually tall sources. */
  align-self: center;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  text-decoration: none;
}
.hero-webcam img {
  display: block;
  width: 100%; height: auto;
  max-height: 180px;
  object-fit: contain;
}
.hero-webcam:hover { transform: translateY(-1px); border-color: var(--accent); box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
.hero-webcam-badge {
  position: absolute; left: 8px; bottom: 8px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px; border-radius: 99px;
  background: rgba(0,0,0,0.65); color: #fff;
  font-size: calc(10px * var(--fs)); letter-spacing: 0.12em; font-weight: 600;
  font-family: var(--mono);
}
.hero-webcam-badge i { font-size: calc(12px * var(--fs)); }

/* ── Hero (Station / Now comparison) ─────────────────────────── */
.now-widget { display: flex; flex-direction: column; gap: var(--gap-md); }
.now-spark {
  margin-top: 4px;
  padding-top: var(--gap-md);
  border-top: 1px dashed var(--border);
}
.now-spark .widget-h { display: none; }
.now-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr);
  gap: var(--gap-lg);
  align-items: center;
}
@media (max-width: 760px) { .now-grid { grid-template-columns: 1fr; gap: var(--gap-md); } }

.now-hero { display: flex; align-items: center; gap: 18px; min-width: 0; }
.now-icon img { width: 110px; height: 110px; object-fit: contain; filter: drop-shadow(0 6px 24px rgba(56,189,248,0.18)); }
.now-temp {
  font-size: clamp(56px, 8vw, 96px);
  font-weight: 200; letter-spacing: -0.04em; line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
[data-variant="aurora"] .now-temp {
  background: linear-gradient(135deg, var(--text) 30%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.now-temp .deg { font-size: 0.45em; color: var(--muted); font-weight: 400; margin-left: 2px; }
.now-cond { font-size: calc(17px * var(--fs)); font-weight: 500; margin-top: 4px; color: var(--text); }
.now-feels { font-size: calc(12px * var(--fs)); color: var(--muted); font-family: var(--mono); letter-spacing: 0.02em; margin-top: 2px; }

.now-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-sm);
}
@media (max-width: 760px) { .now-details { grid-template-columns: repeat(2, 1fr); } }
.detail-tile {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--card-hover);
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.detail-tile .label {
  font-size: calc(11px * var(--fs)); color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  display: flex; align-items: center; gap: 5px;
  font-family: var(--mono);
}
.detail-tile .label i { opacity: 0.7; }
.detail-tile .value {
  font-size: calc(20px * var(--fs)); font-weight: 500; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.detail-tile .value small { font-size: calc(11px * var(--fs)); color: var(--muted); margin-left: 2px; font-weight: 400; }
.detail-tile .delta {
  font-size: calc(10px * var(--fs)); font-family: var(--mono); letter-spacing: 0.02em;
  padding: 1px 6px; border-radius: calc(4px * var(--r-scale, 1)); align-self: flex-start;
}
.delta.good { color: var(--ok); background: color-mix(in oklab, var(--ok) 12%, transparent); }
.delta.warn { color: var(--warn); background: color-mix(in oklab, var(--warn) 14%, transparent); }
.delta.bad  { color: var(--bad);  background: color-mix(in oklab, var(--bad)  14%, transparent); }

/* Station bar */
.station-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--card-hover);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: calc(12px * var(--fs)); color: var(--muted);
  font-family: var(--mono);
}
.station-bar .desc { color: var(--text); }
.station-bar .desc strong { color: var(--accent); font-weight: 500; letter-spacing: 0.04em; }
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok); flex-shrink: 0; position: relative;
  box-shadow: 0 0 0 0 var(--ok);
  animation: pulse 2s cubic-bezier(.4,0,.2,1) infinite;
}

/* ── Status strip ────────────────────────────────────────────── */
.status-strip {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--card);
  font-size: calc(12px * var(--fs)); color: var(--muted);
  font-family: var(--mono);
}
.status-strip strong { color: var(--text); font-weight: 500; }
.status-strip .sep { width: 1px; height: 12px; background: var(--border); }
.status-strip .auto-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 99px;
  background: color-mix(in oklab, var(--accent) 18%, transparent);
  color: var(--accent); font-weight: 600; font-size: calc(10px * var(--fs)); letter-spacing: 0.08em;
}

/* ── Range tabs / segmented ──────────────────────────────────── */
.range-tabs, .segmented {
  display: inline-flex; gap: 4px; padding: 3px;
  background: var(--card-hover); border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.range-tabs button, .segmented button {
  appearance: none; background: transparent; color: var(--muted);
  border: none; padding: 5px 10px; border-radius: calc(var(--r-sm) - calc(1px * var(--r-scale, 1)));
  font-family: inherit; font-size: calc(12px * var(--fs)); font-weight: 500; cursor: pointer;
  transition: all var(--t-fast);
}
.range-tabs button:hover, .segmented button:hover { color: var(--text); }
.range-tabs button.active, .segmented button.active { background: var(--text); color: var(--bg); }

/* ── Hourly strip ────────────────────────────────────────────── */
.hourly-scroller {
  display: flex; gap: 8px;
  overflow-x: auto; overflow-y: hidden;
  padding: 4px 2px 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.hourly-cell {
  flex: 0 0 auto;
  min-width: 72px;
  padding: 10px 8px;
  background: var(--card-hover);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-variant-numeric: tabular-nums;
}
.hourly-cell.is-now { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 10%, var(--card-hover)); }
.hourly-cell .h-time { font-size: calc(11px * var(--fs)); color: var(--muted); font-family: var(--mono); letter-spacing: 0.04em; }
.hourly-cell .h-time .badge { color: var(--accent); font-weight: 700; margin-left: 4px; font-size: calc(9px * var(--fs)); letter-spacing: 0.1em; }
.hourly-cell .h-icon img { width: 38px; height: 38px; object-fit: contain; }
.hourly-cell .h-temp { font-size: calc(16px * var(--fs)); font-weight: 500; }
.hourly-cell .h-precip { font-size: calc(10px * var(--fs)); color: #6cb4ff; font-family: var(--mono); }
.hourly-cell .h-wind { font-size: calc(10px * var(--fs)); color: var(--muted); font-family: var(--mono); display: flex; align-items: center; gap: 3px; }
.hourly-cell .h-arrow { display: inline-block; transform: rotate(var(--deg, 0deg)); font-size: calc(11px * var(--fs)); }
.day-divider {
  flex: 0 0 auto; width: 1px; background: var(--border); margin: 6px 4px;
  position: relative;
}
.day-divider::after {
  content: attr(data-label);
  position: absolute; top: 50%; left: 6px;
  transform: translateY(-50%) rotate(-90deg); transform-origin: 0 50%;
  font-size: calc(9px * var(--fs)); font-family: var(--mono); color: var(--muted);
  letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
}

/* ── Daily list ──────────────────────────────────────────────── */
.daily-list { display: flex; flex-direction: column; gap: 4px; }
.daily-row {
  display: grid;
  grid-template-columns: 1fr auto 1.4fr auto;
  gap: 12px; align-items: center;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  transition: background var(--t-fast);
  min-width: 0;
}
.daily-row:hover { background: var(--card-hover); }
.daily-row .d-day { display: flex; flex-direction: column; min-width: 0; }
.daily-row .d-day strong { font-size: calc(13px * var(--fs)); font-weight: 500; }
.daily-row .d-day small { font-size: calc(11px * var(--fs)); color: var(--muted); font-family: var(--mono); }
.daily-row .d-icon img { width: 32px; height: 32px; object-fit: contain; }
.daily-row .d-temp-bar { display: flex; align-items: center; gap: 8px; min-width: 0; }
.daily-row .d-tmin { font-size: calc(12px * var(--fs)); color: var(--muted); font-variant-numeric: tabular-nums; min-width: 26px; text-align: right; }
.daily-row .d-tmax { font-size: calc(13px * var(--fs)); color: var(--text); font-variant-numeric: tabular-nums; min-width: 26px; }
.daily-row .d-bar {
  flex: 1; height: 6px; border-radius: 999px; position: relative;
  background: var(--grid); min-width: 60px;
}
.daily-row .d-bar i {
  position: absolute; top: 0; bottom: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #4f9eff, var(--accent), #ffa84a);
}
.daily-row .d-precip { font-size: calc(11px * var(--fs)); color: #6cb4ff; font-family: var(--mono); }

/* ── Models leaderboard ──────────────────────────────────────── */
.models-list { display: flex; flex-direction: column; gap: 4px; }
.model-row {
  display: grid; grid-template-columns: auto 1fr auto auto;
  gap: 10px; align-items: center;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t-fast);
}
.model-row:hover { background: var(--card-hover); border-color: var(--border); }
.model-row.active { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 10%, transparent); }
.model-row.auto-pick { border-color: var(--accent); }
.model-row .m-rank { font-family: var(--mono); font-size: calc(11px * var(--fs)); color: var(--dim); width: 18px; }
.model-row .m-name { font-weight: 500; font-size: calc(13px * var(--fs)); }
.model-row .m-name small { font-weight: 400; color: var(--muted); margin-left: 6px; font-size: calc(11px * var(--fs)); }
.model-row .m-score { font-family: var(--mono); font-size: calc(12px * var(--fs)); color: var(--text); font-variant-numeric: tabular-nums; }
.model-row .m-tag {
  font-size: calc(9px * var(--fs)); padding: 2px 6px; border-radius: 99px;
  background: color-mix(in oklab, var(--accent) 18%, transparent);
  color: var(--accent); font-weight: 700; letter-spacing: 0.06em;
}
.model-row .m-bar {
  grid-column: 1 / -1; height: 3px; border-radius: 999px;
  background: var(--grid); margin-top: 6px; position: relative;
}
.model-row .m-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--accent); }

/* ── Chart widget ────────────────────────────────────────────── */
.chart-toggles {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-bottom: var(--gap-sm);
}
.chart-toggle {
  appearance: none; border: 1px solid var(--border);
  background: transparent; color: var(--muted);
  font-family: inherit; font-size: calc(11px * var(--fs)); padding: 4px 10px;
  border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  transition: all var(--t-fast);
}
.chart-toggle:hover { color: var(--text); border-color: var(--border-strong); }
.chart-toggle.active { background: var(--text); color: var(--bg); border-color: var(--text); }
.chart-canvas-wrap { position: relative; min-height: 220px; }
.chart-icons-row {
  display: flex; gap: 2px; margin-top: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.chart-icons-row::-webkit-scrollbar { display: none; }
.chart-icons-row .ci {
  flex: 1 0 auto; min-width: 36px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.chart-icons-row .ci img { width: 24px; height: 24px; object-fit: contain; }
.chart-icons-row .ci .lbl { font-size: calc(9px * var(--fs)); color: var(--muted); font-family: var(--mono); }

/* ── Extras (wind/sun/air/alerts) ────────────────────────────── */
.muted { color: var(--muted); font-size: calc(12px * var(--fs)); }
.shimmer {
  background: linear-gradient(90deg, var(--card) 0%, var(--card-hover) 50%, var(--card) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
  display: inline-block;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.compass {
  width: 140px; height: 140px; position: relative;
  margin: 0 auto;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: radial-gradient(circle, var(--card-hover), var(--card));
}
.compass .needle {
  position: absolute; left: 50%; top: 50%;
  width: 3px; height: 56px;
  background: linear-gradient(180deg, var(--accent), transparent);
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) rotate(var(--deg, 0deg));
  border-radius: calc(3px * var(--r-scale, 1));
}
.compass .marks { position: absolute; inset: 0; pointer-events: none; }
.compass .mark { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); font-size: calc(10px * var(--fs)); color: var(--muted); font-family: var(--mono); }
.compass .mark.e { left: auto; right: 4px; top: 50%; transform: translateY(-50%); }
.compass .mark.s { top: auto; bottom: 4px; }
.compass .mark.w { left: 4px; top: 50%; transform: translateY(-50%); }

.kv-list { display: flex; flex-direction: column; gap: 6px; }
.kv-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: calc(12px * var(--fs));
}
.kv-row:last-child { border-bottom: none; }
.kv-row .k { color: var(--muted); font-family: var(--mono); letter-spacing: 0.04em; text-transform: uppercase; font-size: calc(10px * var(--fs)); }
.kv-row .v { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 500; }

.alert-item {
  display: flex; gap: 10px; padding: 10px 12px;
  border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--warn) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--warn) 30%, transparent);
  font-size: calc(12px * var(--fs));
}
.alert-item.severe {
  background: color-mix(in oklab, var(--bad) 10%, transparent);
  border-color: color-mix(in oklab, var(--bad) 30%, transparent);
}
.alert-item i { color: var(--warn); font-size: calc(16px * var(--fs)); flex-shrink: 0; }
.alert-item.severe i { color: var(--bad); }
.alert-item .a-title { font-weight: 600; color: var(--text); }
.alert-item .a-desc { color: var(--muted); margin-top: 2px; }

/* ── Add card / catalog ──────────────────────────────────────── */
.add-card {
  grid-column: span 12;
  align-self: start;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px; border-radius: var(--r-md);
  background: transparent; border: 1px dashed var(--border);
  color: var(--muted); font-size: calc(13px * var(--fs)); font-family: inherit;
  cursor: pointer; transition: all var(--t-fast);
}
.add-card:hover { color: var(--accent); border-color: var(--accent); background: var(--card-hover); }

.catalog-overlay {
  position: fixed; inset: 0; z-index: 8000;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.catalog {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px; max-width: 720px; width: 100%; max-height: 86vh; overflow-y: auto;
  position: relative;
}
.catalog h3 { margin: 0 0 4px; font-size: calc(18px * var(--fs)); font-weight: 600; }
.catalog .lead { color: var(--muted); margin: 0 0 16px; font-size: calc(13px * var(--fs)); }
.catalog-close { position: absolute; top: 14px; right: 14px; }
.catalog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (max-width: 600px) { .catalog-grid { grid-template-columns: 1fr; } }
.catalog-item {
  display: flex; gap: 12px; padding: 12px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--card); color: var(--text); text-align: left; cursor: pointer;
  font-family: inherit; transition: all var(--t-fast);
}
.catalog-item:disabled { opacity: 0.4; cursor: not-allowed; }
.catalog-item:not(:disabled):hover { border-color: var(--accent); transform: translateY(-1px); }
.catalog-item .ico {
  width: 36px; height: 36px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--accent) 16%, transparent);
  color: var(--accent); font-size: calc(16px * var(--fs));
}
.catalog-item .name { font-size: calc(13px * var(--fs)); font-weight: 600; margin-bottom: 2px; }
.catalog-item .desc { font-size: calc(11px * var(--fs)); color: var(--muted); }

/* ── Legacy CSS-var aliases ──────────────────────────────────── */
:root {
  --text-dim: var(--dim);
  --text-muted: var(--muted);
  --surface-2: var(--card-hover);
  --rain: #6cb4ff;
  --good: var(--ok);
  --temp-warm: var(--accent);
  --border-strong: var(--border-strong, rgba(255,255,255,0.18));
}

/* ── Hourly widget (legacy classes) ──────────────────────────── */
.hourly-widget { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hourly-scroll {
  display: flex; gap: 6px;
  overflow-x: auto; overflow-y: hidden;
  padding: 4px 2px 8px;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.hourly-scroll::-webkit-scrollbar { height: 6px; }
.hourly-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: calc(3px * var(--r-scale, 1)); }
.hour-card {
  flex: 0 0 76px; width: 76px; box-sizing: border-box;
  padding: 8px 4px 14px;
  background: var(--card-hover);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: grid;
  grid-template-rows: 14px 14px 40px 20px 14px 14px 16px;
  justify-items: center; align-items: center;
  gap: 3px;
  font-variant-numeric: tabular-nums; position: relative;
  white-space: nowrap;
}
.hour-card .hour-date { font-size: calc(9px * var(--fs)); font-family: var(--mono); color: var(--accent); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; }
.hour-card .hour-date span:not(.date-label) { color: transparent; }
.hour-card .hour-time { font-size: calc(11px * var(--fs)); color: var(--muted); font-family: var(--mono); letter-spacing: 0.04em; line-height: 1; }
.hour-card.now { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, var(--card-hover)); }
.hour-card.now .hour-time { color: var(--accent); font-weight: 700; }
.hour-card .hour-pop { display: inline-flex; align-items: center; gap: 3px; font-size: calc(10px * var(--fs)); color: var(--rain); font-family: var(--mono); white-space: nowrap; line-height: 1; }
.hour-card .hour-pop.empty { visibility: hidden; }
.hour-card .hour-mm { font-size: calc(10px * var(--fs)); color: var(--rain); font-family: var(--mono); line-height: 1; opacity: 0.85; }
.hour-card .hour-mm.empty { visibility: hidden; }
.hour-card.now {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 12%, var(--card-hover));
}
.hour-card.day-edge { margin-left: 10px; }
.hour-card.day-edge::before {
  content: ''; position: absolute; left: -6px; top: 8px; bottom: 8px;
  width: 1px; background: var(--border-strong);
}
.hour-time {
  font-size: calc(11px * var(--fs)); color: var(--muted);
  font-family: var(--mono); letter-spacing: 0.04em;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.hour-time .date-label {
  font-size: calc(9px * var(--fs)); color: var(--accent); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.hour-icon img { width: 36px; height: 36px; object-fit: contain; }
.hour-temp { font-size: calc(16px * var(--fs)); font-weight: 500; color: var(--text); }
.hour-pop {
  font-size: calc(10px * var(--fs)); color: var(--rain); font-family: var(--mono);
  display: inline-flex; align-items: center; gap: 2px;
}
.hour-pop.hidden { visibility: hidden; }
.hour-wind {
  font-size: calc(10px * var(--fs)); color: var(--muted); font-family: var(--mono);
  display: inline-flex; align-items: center; gap: 3px;
}

/* ── Chart widget (legacy classes) ──────────────────────────── */
.chart-widget { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.chart-toolbar {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
/* Compact chip row used in the widget header next to the title. Pushed right
   so it shares the header space with the range tabs without competing for
   the title's spot. */
.chart-toolbar-header {
  margin-left: auto; gap: 4px; flex-wrap: nowrap;
}
.chart-toolbar-header .chip-toggle { padding: 3px 8px; font-size: calc(10.5px * var(--fs)); }
.chart-toolbar-header .chip-toggle .swatch { width: 7px; height: 7px; }
@media (max-width: 900px) {
  .chart-toolbar-header { flex-wrap: wrap; }
}
.chip-toggle {
  appearance: none;
  border: 1px solid var(--border); background: transparent;
  color: var(--muted); font: inherit; font-size: calc(11px * var(--fs));
  padding: 4px 10px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  transition: all var(--t-fast);
}
.chip-toggle:hover { color: var(--text); border-color: var(--border-strong); }
.chip-toggle.on { background: color-mix(in oklab, var(--accent) 14%, transparent); border-color: var(--accent); color: var(--text); }
.chip-toggle.off { opacity: 0.55; }
.chip-toggle .swatch { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.chart-wrap {
  position: relative;
  /* Stretches the chart vertically so the widget body lines up with the
     denser dashboard rows (7-day forecast + models leaderboard). Without
     this the chart was visibly shorter than its row neighbours. */
  min-height: 320px;
  display: flex; flex-direction: column;
  overflow: hidden;       /* keep icons/tooltips inside the widget body */
}
.chart-svg {
  width: 100%;
  flex: 1 1 auto;          /* let the SVG eat the available vertical space */
  min-height: 240px;
  display: block;
}
.chart-wrap .chart-icons-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 0; padding: 0 40px; margin-top: -8px;
  overflow: hidden;
}
.chart-wrap .chart-icons-row::-webkit-scrollbar { display: none; }
.chart-wrap .chart-icons-row img,
.chart-wrap .chart-icons-row span {
  /* `min-width: 0` lets cells shrink below their natural icon size, so dense
     time ranges (72 h) don't push the row wider than the widget. The icon
     itself stretches to fill its cell up to a 48 px cap — big enough to read
     on wide 12 / 24 h ranges without overflowing the narrow cells of 72 h.
     The `min(…)` height cap ties the icon to a square aspect tied to the
     cell width so wide cells don't paint a vertically-stretched icon. */
  min-width: 0;
  width: 100%; max-width: 48px;
  height: auto; max-height: 44px;
  object-fit: contain; display: block;
  margin: 0 auto;
}
.chart-xlabels-legacy {
  display: flex; gap: 0; padding: 0 36px;
  font-size: calc(10px * var(--fs)); color: var(--muted); font-family: var(--mono);
}
.chart-xlabels-legacy span { flex: 1 1 0; text-align: center; }
.chart-tip {
  position: absolute; transform: translateX(-50%);
  background: var(--card-strong); border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); padding: 8px 10px;
  font-size: calc(11px * var(--fs)); min-width: 130px; pointer-events: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3); z-index: 2;
  top: 4px;
}
/* BigSpark wrapper — positioned root for the absolute-positioned tooltip. */
.bigspark { position: relative; }
.bigspark-tip { top: 4px; }
.chart-tip .tip-time { font-weight: 600; color: var(--accent); margin-bottom: 4px; font-family: var(--mono); }
.chart-tip .tip-row { display: flex; justify-content: space-between; gap: 12px; padding: 1px 0; font-variant-numeric: tabular-nums; }
.chart-tip .tip-row .k { color: var(--muted); font-size: calc(10px * var(--fs)); }
.chart-tip .tip-row strong { color: var(--text); font-weight: 500; }
.chart-legend {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-size: calc(11px * var(--fs)); color: var(--muted); font-family: var(--mono); padding-top: 4px;
}
.chart-legend i.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px; }

/* ── Extras widgets (legacy classes) ────────────────────────── */
.wind-compass {
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.wind-compass svg {
  width: 100%; height: auto;
  max-width: 260px;
  position: relative; z-index: 2;
}

/* New wind widget root — relative container so the particle-flow canvas can
   stretch over the entire widget body and sit BEHIND the compass + stats.
   align-self + flex: 1 → vyplní celou výšku widget-body flex columnu (jinak
   by canvas dostal výšku jen .wind-content, což je málo). overflow:hidden
   ořízne stopy částic na zaoblené rohy karty. */
.wind-widget {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  align-self: stretch;
  flex: 1;
  display: flex; flex-direction: column;
}
.wind-widget .wind-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  justify-content: center;          /* obsah dlaždice svisle na střed */
  gap: clamp(10px, 1.6vw, 20px);
  height: 100%;
}

/* Canvas particle flow overlay (převzato z pocasimeteo_MS). Full-area,
   behind the content, non-interactive. opacity drží efekt decentní a
   zachovává průhlednost karty — canvas sám maže do průhledna, tady jen
   tlumíme celkovou sílu. */
.wind-flow-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.9;
}
.wind-flow-canvas-wrap {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
}
.wind-flow-canvas-wrap canvas {
  display: block;
  width: 100%; height: 100%;
}
/* Záměrně bez @media (prefers-reduced-motion) — tok je opt-in feature
   řízená přepínačem v Tweaks, ne dekorace. Skrývání přes OS reduce-motion
   bylo příčinou "na desktopu animace není, na mobilu ano". */
/* MS-style headline readout — label spans the top, big speed number sits
   left, secondary stats stack to its right. The open layout lets the
   particle flow read clearly behind it (the old cramped compass-on-top
   layout hid the flow on narrow desktop columns). */
.wind-readout {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(14px, 2vw, 26px);
  row-gap: 6px;
  align-items: center;
}
.wind-label {
  grid-column: 1 / -1;
  font-size: calc(11px * var(--fs)); color: var(--muted);
  letter-spacing: 0.14em; text-transform: uppercase;
  font-family: var(--mono);
  display: inline-flex; align-items: center; gap: 6px;
}
.wind-label i { opacity: 0.7; }
.wind-speed { grid-row: 2; grid-column: 1; display: flex; align-items: baseline; gap: 6px; line-height: 1; }
.wind-num {
  font-size: clamp(40px, 5.5vw, 68px); font-weight: 300;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  color: var(--text);
}
.wind-unit { font-size: clamp(13px, 1.2vw, 16px); color: var(--muted); }
.wind-extras {
  grid-row: 2; grid-column: 2;
  display: flex; flex-direction: column; gap: 4px;
  font-size: calc(12px * var(--fs)); min-width: 0;
}
.wind-extras .dim { color: var(--muted); margin-right: 8px; }
.wind-extras b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

/* Aside row under the station headline: compass on the left (when on),
   forecast pushed to the right edge. Centered as a group by .wind-content
   (justify-content:center) so the flow shows in equal bands. */
.wind-aside {
  display: flex; align-items: stretch;
  gap: clamp(12px, 2vw, 24px);
  flex-wrap: wrap;                 /* safety net if a tile is too tight */
  min-width: 0;
}
/* Compass grows into the free space left of the forecast (which is pinned
   right via margin-left:auto). flex:1 + the svg's max-width cap means it
   fills the gap without ballooning on very wide tiles. */
.wind-aside .wind-compass { flex: 1 1 auto; min-width: 96px; margin-top: 0; }
.wind-aside .wind-forecast { margin-left: auto; min-width: 0; flex-shrink: 0; }   /* předpověď doprava */

/* Forecast block — same markup/classes as the station readout extras, so
   the style matches exactly. Deliberately less prominent (dimmer + a touch
   smaller). Divider is a vertical hairline on its left edge (the "čára jako
   oddělovač", now that it sits to the right rather than below). */
.wind-forecast {
  border-left: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  padding-left: clamp(14px, 2.4vw, 26px);
  opacity: 0.92;
  display: flex; flex-direction: column; justify-content: center;
}
.wind-forecast .wind-label { margin-bottom: 6px; }
/* No font-size override here — forecast uses the same .wind-extras class as
   the station readout, so it inherits identical text sizing at every
   breakpoint (per request: stejná velikost jako u stanice). */

/* Phone — tile is full-width; keep the compass-left / forecast-right row
   (user wants it at every width). Just rebalance sizes for touch. */
@media (max-width: 600px) {
  .wind-widget .wind-content { gap: 12px; }
  .wind-readout { column-gap: 18px; }
  .wind-num { font-size: clamp(46px, 16vw, 72px); }
  .wind-extras { gap: 5px; font-size: calc(13px * var(--fs)); }
  .wind-aside { gap: clamp(12px, 4vw, 22px); }
  /* Phone: fixed small compass column — it was ballooning (flex:1) to fill
     the full-width tile. Explicit flex-basis keeps the svg from collapsing
     while staying compact next to the forecast. */
  .wind-aside .wind-compass { flex: 0 0 116px; max-width: 116px; min-width: 0; }
}

.wind-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.wind-stats .stat {
  padding: 10px;
  background: var(--card-hover); border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 2px;
}
.wind-stats .stat .label { font-size: calc(10px * var(--fs)); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--mono); }
.wind-stats .stat .value { font-size: calc(18px * var(--fs)); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text); }
.wind-stats .stat .value small { font-size: calc(10px * var(--fs)); color: var(--muted); margin-left: 2px; font-weight: 400; }

.sun-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.sun-time {
  font-size: calc(16px * var(--fs)); font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums;
  display: flex; flex-direction: column; line-height: 1.1;
}
.sun-time small { font-size: calc(10px * var(--fs)); color: var(--muted); font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 400; }
.sun-arc svg { width: 100%; height: 70px; }

/* ── Day / night strip (SunWidget refactor) ──────────────────── */
.sun-widget { display: flex; flex-direction: column; gap: 10px; }
/* Half-height compared to the original: strip body itself is ~28 px tall,
   tick hour numbers float ABOVE the strip so the body stays uncluttered. */
.dn-strip {
  position: relative;
  height: 28px; min-height: 28px;
  margin-top: 12px;          /* space above for tick numbers */
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  overflow: visible;          /* let the moon icon overhang the rim */
  /* The strip's own background paint is already clipped to its border-radius
     even with overflow:visible — that only changes how *children* overflow. */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.dn-tick {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px; background: rgba(255,255,255,0.20);
  pointer-events: none;
  z-index: 1;
}
.dn-tick span {
  position: absolute; bottom: 100%;
  left: 50%; transform: translateX(-50%);
  margin-bottom: 1px;
  font-size: calc(9px * var(--fs)); font-family: var(--mono);
  color: var(--muted);
  letter-spacing: 0.04em;
}
.dn-marker {
  position: absolute;
  top: 50%; left: 0;
  transform: translate(-50%, -50%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  pointer-events: none;
  z-index: 2;
}
.dn-marker i { font-size: calc(14px * var(--fs)); line-height: 1; }
.dn-now {
  position: absolute;
  top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  z-index: 3;
}
.dn-now::before {
  /* Vertical accent line spanning the strip's body — the moon/sun glyph
     overhangs it slightly on either side. */
  content: '';
  position: absolute;
  top: -3px; bottom: -3px;
  left: 50%; transform: translateX(-50%);
  width: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.dn-now i {
  position: relative;
  font-size: calc(13px * var(--fs));
  width: 18px; height: 18px; line-height: 18px;
  border-radius: 50%;
  text-align: center;
  background: var(--accent);
  color: #0b1020;
  box-shadow: 0 0 10px color-mix(in oklab, var(--accent) 60%, transparent);
}
.dn-now svg {
  position: relative;
  /* Slight glow so the moon stands out against the dark night gradient. */
  filter: drop-shadow(0 0 4px rgba(232,232,240,0.6));
}

/* Sunrise / sunset cards — identical structure for both so the labels,
   times, and countdown lines anchor on the same baseline. Inactive cards
   render a single space in the countdown row to reserve the same height
   as the active card; .sub never wraps (nowrap) so "za 4 h 23 min" stays
   on one line even on the narrowest span. */
.sun-events {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sun-event {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--card-hover);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  min-width: 0;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.sun-event i {
  font-size: calc(18px * var(--fs));
  color: var(--muted);
  transition: color var(--t-fast);
  flex-shrink: 0;
}
.sun-event-text {
  display: flex; flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}
.sun-event-text .lbl {
  font-size: calc(9px * var(--fs)); color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--mono);
}
.sun-event-text strong {
  font-size: calc(15px * var(--fs)); font-weight: 600;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.sun-event-text .sub {
  font-size: calc(10px * var(--fs));
  color: var(--accent); font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  margin-top: 1px;
  white-space: nowrap;
  min-height: 1em;          /* reserves the line height when empty */
}
.sun-event.active {
  border-color: color-mix(in oklab, var(--accent) 55%, var(--border));
}
.sun-event.active i { color: var(--accent); }
@media (max-width: 360px) {
  .sun-events { grid-template-columns: 1fr; gap: 6px; }
}

/* Moon phase — a single compact row replacing the old KPI grid. Icon left,
   percentage right, phase name as a label-styled prefix. */
.sun-moon {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--card-hover); border: 1px solid var(--border);
  border-radius: var(--r-md);
  min-width: 0;
}
.sun-moon-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; flex: 1; }
.sun-moon-text .lbl {
  font-size: calc(10px * var(--fs)); color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--mono);
}
.sun-moon-text strong {
  font-size: calc(16px * var(--fs)); font-weight: 500; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
/* Moonrise / moonset — compact two-line readout pinned to the right of the
   moon row, mirroring the .sun-event time treatment. */
.sun-moon-rs {
  display: flex; flex-direction: column; gap: 2px;
  flex-shrink: 0; text-align: right;
  font-size: calc(12px * var(--fs)); font-weight: 500; color: var(--text);
  font-variant-numeric: tabular-nums; line-height: 1.25;
}
.sun-moon-rs div { display: inline-flex; align-items: center; gap: 4px; }
.sun-moon-rs i { font-size: calc(14px * var(--fs)); color: var(--muted); }
@media (max-width: 600px) {
  .dn-marker small { font-size: calc(8px * var(--fs)); }
}

.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kpi {
  padding: 10px 12px;
  background: var(--card-hover); border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;
}
.kpi .label {
  font-size: calc(10px * var(--fs)); color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--mono);
  display: inline-flex; align-items: center; gap: 4px;
}
.kpi .label i { opacity: 0.7; }
.kpi .value {
  font-size: calc(20px * var(--fs)); font-weight: 500; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.kpi .value small { font-size: calc(11px * var(--fs)); color: var(--muted); font-weight: 400; margin-left: 2px; }
.kpi .trend { font-size: calc(10px * var(--fs)); color: var(--muted); font-family: var(--mono); margin-top: 1px; }

.auto-info {
  display: flex; gap: 10px; padding: 10px 12px;
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 25%, transparent);
  border-radius: var(--r-md);
  font-size: calc(12px * var(--fs)); color: var(--text); margin-top: 8px;
}
.auto-info i { color: var(--accent); font-size: calc(14px * var(--fs)); flex-shrink: 0; }
.auto-info strong { color: var(--accent); font-weight: 600; }

/* ── Models widget (compact leaderboard) ─────────────────────── */
/* Tuned so the ~9 model rows occupy roughly the same vertical space as the
   7-day forecast widget rendered next to it. Smaller padding + tighter font
   + thinner accuracy bar give the eye a calm comparison without scrolling. */
.models-widget { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.models-head { display: flex; align-items: center; }
.models-head .segmented { font-size: calc(11px * var(--fs)); }
.models-head .segmented button { padding: 3px 10px; }

.model-list { display: flex; flex-direction: column; gap: 2px; }
.model-list.compact .model-row {
  padding: 3px 8px;
  grid-template-columns: 14px minmax(0, 1fr) minmax(50px, 1.2fr) 26px;
  gap: 8px;
  border-radius: var(--r-sm);
}
.model-row {
  display: grid;
  grid-template-columns: auto 1fr minmax(80px, 1.4fr) auto;
  gap: 10px; align-items: center;
  padding: 8px 10px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast);
}
.model-row:hover { background: var(--card-hover); border-color: var(--border); }
.model-row.active { background: color-mix(in oklab, var(--accent) 12%, transparent); border-color: var(--accent); }
.model-row.auto-pick { border-color: var(--accent); }
.model-list.compact .model-rank {
  font-family: var(--mono); font-size: calc(10px * var(--fs)); color: var(--dim);
  width: auto; text-align: right;
}
.model-list.compact .model-name {
  font-size: calc(12px * var(--fs)); font-weight: 500; color: var(--text);
  letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.model-list.compact .model-accuracy { height: 3px; }
.model-list.compact .model-score { font-size: calc(11px * var(--fs)); min-width: 24px; }

.model-rank { font-family: var(--mono); font-size: calc(11px * var(--fs)); color: var(--dim); width: 22px; }
.model-name {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-size: calc(13px * var(--fs)); font-weight: 500; color: var(--text); min-width: 0;
}
.model-name small { font-size: calc(10px * var(--fs)); color: var(--muted); font-weight: 400; }
.model-accuracy {
  height: 4px; border-radius: 999px;
  background: var(--grid); position: relative; overflow: hidden;
}
.model-accuracy .fill {
  position: absolute; inset: 0 auto 0 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--bad), var(--warn) 50%, var(--ok));
  transition: width var(--t-med);
}
.model-score { font-family: var(--mono); font-size: calc(12px * var(--fs)); color: var(--text); font-variant-numeric: tabular-nums; min-width: 28px; text-align: right; }

/* ── Předpověď vs. stanice ────────────────────────────────────
   Compact 4-col table (veličina | předpověď | stanice | Δ) plus a
   24 h max wind/gust band. The unit sits ONCE next to the metric
   label, so the Předpověď/Stanice columns are pure tabular numbers
   that line up to the decimal across every row, and the Δ column is
   a fixed width so the chips align and the grid never reflows as
   values change. Δ chips reuse the shared .hm-delta look. */
.compare-widget { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cmp-grid { display: flex; flex-direction: column; gap: 3px; }
.cmp-head, .cmp-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(40px, 0.78fr) minmax(40px, 0.78fr) 66px;
  gap: 10px; align-items: center;
}
.cmp-head {
  font-family: var(--mono); font-size: calc(9.5px * var(--fs)); letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted);
  padding: 0 8px 5px; margin-bottom: 1px;
  border-bottom: 1px solid var(--border);
}
.cmp-head .cmp-h-f, .cmp-head .cmp-h-s, .cmp-head .cmp-h-d { text-align: right; }
.cmp-row {
  padding: 6px 8px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.cmp-row:hover { background: var(--card-hover); border-color: var(--border); }
.cmp-metric {
  display: flex; align-items: baseline; gap: 7px; min-width: 0;
  font-size: calc(12.5px * var(--fs)); font-weight: 500; color: var(--text);
}
.cmp-metric i {
  font-size: calc(13px * var(--fs)); color: var(--accent); opacity: 0.85;
  flex: none; align-self: center;
}
.cmp-m-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-m-unit {
  flex: none; font-family: var(--mono); font-size: calc(9.5px * var(--fs)); font-weight: 400;
  color: var(--dim); letter-spacing: 0.02em;
}
.cmp-f, .cmp-s {
  text-align: right; font-family: var(--mono); white-space: nowrap;
  font-variant-numeric: tabular-nums; font-size: calc(13px * var(--fs));
}
.cmp-f { color: var(--muted); }
.cmp-s { color: var(--text); font-weight: 600; }
.cmp-na { color: var(--dim); font-weight: 400; }
.cmp-d { display: flex; justify-content: flex-end; min-width: 0; }
.cmp-d .hm-delta {
  margin-left: 0; min-width: 58px;
  justify-content: flex-end; gap: 3px;
}
.cmp-d .hm-delta-arrow { width: 8px; text-align: center; flex: none; }
.cmp-d .hm-delta-num { font-variant-numeric: tabular-nums; }
.cmp-d-empty {
  width: 100%; text-align: right;
  color: var(--dim); font-family: var(--mono); font-size: calc(11px * var(--fs));
}

.cmp-max-band { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 2px; }
.cmp-max {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 11px; border-radius: var(--r-md);
  background: linear-gradient(155deg,
              color-mix(in oklab, var(--accent) 7%, var(--card-hover)) 0%,
              var(--card-hover) 70%);
  border: 1px solid color-mix(in oklab, var(--accent) 14%, var(--border));
}
.cmp-max small {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: calc(9.5px * var(--fs)); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted);
}
.cmp-max small i { font-size: calc(11px * var(--fs)); color: var(--accent); }
.cmp-max strong {
  font-size: clamp(18px, 3.4vw, 22px); font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.cmp-max strong em {
  font-size: calc(11px * var(--fs)); font-weight: 500; color: var(--muted);
  font-style: normal; margin-left: 3px;
}
.cmp-max-fc { font-family: var(--mono); font-size: calc(10px * var(--fs)); color: var(--dim); }

.cmp-note { display: flex; align-items: center; gap: 6px; font-size: calc(11px * var(--fs)); }
.cmp-note i { color: var(--accent); }

/* Narrow tile: drop the forecast-peak line, tighten the grid + labels.
   Units stay (now a compact mono suffix by the label, not per value). */
.widget.span-2 .cmp-max-fc, .widget.span-3 .cmp-max-fc { display: none; }
.widget.span-2 .cmp-head, .widget.span-3 .cmp-head,
.widget.span-2 .cmp-row, .widget.span-3 .cmp-row {
  grid-template-columns: minmax(0, 1.2fr) minmax(36px, 0.7fr) minmax(36px, 0.7fr) 58px;
  gap: 7px;
}
.widget.span-2 .cmp-metric, .widget.span-3 .cmp-metric { font-size: calc(11px * var(--fs)); gap: 5px; }
.widget.span-2 .cmp-metric i, .widget.span-3 .cmp-metric i { font-size: calc(11px * var(--fs)); }
.widget.span-2 .cmp-m-unit, .widget.span-3 .cmp-m-unit { font-size: calc(9px * var(--fs)); }
.widget.span-2 .cmp-d .hm-delta, .widget.span-3 .cmp-d .hm-delta { min-width: 50px; }

/* ── Phone overrides ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .widget { padding: 14px; }
  .topbar-btn.wide .pill-text { display: none; }
  /* View mode only: keep tile chrome clean on phones. In EDIT mode the
     gear (settings/size) and ↑/↓ (reorder) buttons MUST stay visible —
     they're the only way to configure/move widgets on touch (no hover,
     no native drag). Scoped to :not(.editing) so it no longer clobbers
     edit mode the way the old unconditional !important rule did. */
  .dash-grid:not(.editing) .widget-actions button:not(.del) { display: none !important; }
  .hourly-cell { min-width: 64px; }
  .now-icon img { width: 80px; height: 80px; }
}


/* ── Webcam widget ─────────────────────────────────────────── */
.webcam-wrap { position: relative; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); aspect-ratio: 16/9; background: var(--card-hover); }
.webcam-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.webcam-badge { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: rgba(0,0,0,0.65); color: #fff; font-size: calc(10px * var(--fs)); font-family: var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.webcam-empty { padding: 32px 16px; text-align: center; color: var(--muted); display: flex; flex-direction: column; gap: 6px; align-items: center; border: 1px dashed var(--border); border-radius: var(--r-md); }
.webcam-empty i { font-size: calc(32px * var(--fs)); opacity: 0.5; }
.webcam-empty small { font-size: calc(11px * var(--fs)); opacity: 0.6; }
.webcam-empty code { font-family: var(--mono); background: var(--card-hover); padding: 1px 4px; border-radius: calc(3px * var(--r-scale, 1)); }

/* ── Sparkline widget ─────────────────────────────────────── */
.spark-widget { display: flex; flex-direction: column; gap: 12px; position: relative; }
.spark-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.spark-stat { display: flex; flex-direction: column; padding: 8px 10px; background: var(--card-hover); border: 1px solid var(--border); border-radius: var(--r-sm); }
.spark-stat small { font-size: calc(10px * var(--fs)); color: var(--muted); font-family: var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.spark-stat strong { font-size: calc(18px * var(--fs)); font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; margin-top: 2px; }
.spark-stat strong.big { font-size: calc(24px * var(--fs)); color: var(--accent); }
.spark-stat strong.up { color: var(--bad); }
.spark-stat strong.down { color: var(--accent); }
.spark-svg { width: 100%; height: auto; display: block; }

/* TempChartWidget — same skeleton as the sparkline plus a row of forecast
   icons positioned absolutely at their time-X percentage. The wrap has
   `position: relative` (inherited from .spark-widget) so the row anchors
   correctly under it. */
.spark-icons-row {
  position: relative;
  height: 28px;
  margin-bottom: -6px;       /* tuck close to the SVG top */
}
.spark-icons-row img {
  position: absolute;
  top: 0;
  width: 24px; height: 24px;
  transform: translateX(-50%);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.3));
}

/* ── Výškově zmenšitelný graf ─────────────────────────────────
   The Widget shell sets an explicit `height` + `.has-fixed-height`
   when the user drags the resize handle. Without these rules the
   SVG's intrinsic 800:280 ratio (`height:auto`) keeps the content
   tall, so dragging shorter did nothing — "graf to blokuje".
   Letting the body + chart flex-shrink fixes it; the SVG already
   uses preserveAspectRatio="none" so the vertical squash is fine.

   FLOOR: `min-height: min-content` means the pinned height can never
   push the widget below what its content actually needs — for the
   temp chart that minimum is small (the SVG flex-shrinks to 70 px),
   for non-flexible widgets it's their natural content height, so
   they simply stop shrinking instead of clipping. No `overflow:
   hidden` — clipping content was wrong (it would hide data, and a
   scroll container also zeroes out the min-content floor). */
.widget.has-fixed-height { min-height: min-content; }
.widget.has-fixed-height .widget-body { min-height: 0; }
.widget.has-fixed-height .temp-chart-widget { flex: 1 1 auto; min-height: 0; }
.widget.has-fixed-height .temp-chart-widget .spark-svg {
  flex: 1 1 0;
  min-height: 70px;
  height: auto;
}
/* Keep the stats row a fixed-size band so all the shrink goes into
   the chart, not the numbers. */
.widget.has-fixed-height .temp-chart-widget .spark-stats { flex: 0 0 auto; }

/* ── Teplota 24 h — atraktivnější statistiky ──────────────────
   Scoped to .temp-chart-widget so the hero spark (TempSparkWidget)
   keeps its compact look. Colors echo the chart's MIN/MAX markers
   (#fb923c warm / #38bdf8 cool) so the panel reads as one piece. */
/* Kompaktní pruh pod grafem — label a hodnota na jednom řádku, nízká
   výška, bez hover „nadskakování“ (sedí pod grafem jako shrnutí). */
.temp-chart-widget .spark-stats { gap: 6px; }
.temp-chart-widget .spark-stat {
  position: relative;
  overflow: hidden;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 5px 9px 5px 11px;
  background: linear-gradient(155deg,
              color-mix(in oklab, var(--accent) 7%, var(--card-hover)) 0%,
              var(--card-hover) 65%);
  border: 1px solid color-mix(in oklab, var(--accent) 14%, var(--border));
  border-radius: var(--r-sm);
  transition: border-color .14s ease;
}
.temp-chart-widget .spark-stat::before {
  content: "";
  position: absolute; inset: 0 auto 0 0; width: 2px;
  background: var(--border);
  transition: background .14s ease;
}
.temp-chart-widget .spark-stat:hover {
  border-color: color-mix(in oklab, var(--accent) 28%, var(--border));
}
.temp-chart-widget .spark-stat small {
  font-size: calc(9px * var(--fs)); letter-spacing: 0.08em; opacity: 0.8; margin: 0;
}
.temp-chart-widget .spark-stat strong {
  font-size: clamp(13px, 1.6vw, 15px);
  font-weight: 600; letter-spacing: -0.01em; margin: 0 0 0 auto;
}
/* "teď" — zvýrazněná hodnota, jen mírně větší (kompaktní) */
.temp-chart-widget .spark-stat:nth-child(2)::before { background: var(--accent); }
.temp-chart-widget .spark-stat strong.big {
  font-size: clamp(15px, 2vw, 18px); font-weight: 700;
  background: linear-gradient(180deg, var(--accent),
              color-mix(in oklab, var(--accent) 55%, var(--text)));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* change cell — arrow glyph + warm/cool coding, strip matches */
.temp-chart-widget .spark-stat strong.up,
.temp-chart-widget .spark-stat strong.down,
.temp-chart-widget .spark-stat strong.flat {
  display: inline-flex; align-items: center; gap: 5px;
}
.temp-chart-widget .spark-stat strong.up   { color: #fb923c; }
.temp-chart-widget .spark-stat strong.down { color: #38bdf8; }
.temp-chart-widget .spark-stat strong.flat { color: var(--muted); }
.temp-chart-widget .spark-stat strong.up::before   { content: "\25B2"; font-size: 0.62em; }
.temp-chart-widget .spark-stat strong.down::before { content: "\25BC"; font-size: 0.62em; }
.temp-chart-widget .spark-stat strong.flat::before { content: "\2014"; font-size: 0.8em; }
.temp-chart-widget .spark-stat:has(strong.up)::before   { background: #fb923c; }
.temp-chart-widget .spark-stat:has(strong.down)::before { background: #38bdf8; }

/* ── Highlight widget ─────────────────────────────────────── */
.highlight-widget { display: flex; flex-direction: column; gap: 8px; padding: 6px 4px; }
.hl-head { display: flex; align-items: center; gap: 6px; font-size: calc(11px * var(--fs)); color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--mono); }
.hl-head i { font-size: calc(14px * var(--fs)); color: var(--accent); }
.hl-value { font-size: clamp(40px, 5vw, 60px); font-weight: 200; letter-spacing: -0.03em; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.hl-value small { font-size: 0.4em; color: var(--muted); margin-left: 4px; font-weight: 400; }
.hl-meta { display: flex; gap: 12px; font-size: calc(11px * var(--fs)); color: var(--muted); font-family: var(--mono); flex-wrap: wrap; }
.hl-mm i { font-size: calc(10px * var(--fs)); margin: 0 1px; opacity: 0.6; }
.hl-trend.up { color: var(--bad); }
.hl-trend.down { color: var(--accent); }
.hl-trend.flat { color: var(--dim); }