/* Radar widget (js/widgets/radar.jsx) — the pocasimeteo map animated over 1–3 h.
   The map and its controls are ONE block centred in the tile, the controls
   right under the map, and the block always fits. Same size as the webcam
   picture beside it in a tile of the same size (Lukáš 22. 10.): without the
   legend the frame is 16:9 like the webcam and the map fills its whole width
   (Luděk 24. 10.: „stejná šířka jako obrázek kamery“; until then ~4 % clear
   margin left and right) and the row under it is 40 px like the webcam's
   link row, so both pictures are equally big and on the same level: .radar is a size container
   and the map's width is the largest that fits both the tile's width and its
   height minus the controls (--radar-w, resolved in the children). Alone in a
   row the tile is as tall as the map at full width needs (≤ 460 px; 100cqi =
   the tile's width). The frame keeps the map's aspect ratio and the
   rounded corners (no frame line since 22. 10.). Background is transparent — the map image has its own
   alpha, the tile shows through (Lukáš: „pozadí radaru průhledné, ne černé“).
   .radar-crop hides the legend band at the top of the image (152 of 969 px)
   so the map fills smaller tiles. */
.radar {
  --radar-r: 1.3715;                        /* 1329 / 969 */
  --radar-bar: 32px;                        /* height of the controls row */
  --radar-gap: 8px;
  /* first frame only — radar.jsx then sets the width in px from the measured box */
  --radar-w: min(100cqw, calc((100cqh - var(--radar-bar) - var(--radar-gap)) * var(--radar-r)));
  flex: 1 1 auto;
  min-width: 0;
  min-height: max(160px, min(calc(100cqi / var(--radar-r) + var(--radar-bar) + var(--radar-gap)), 460px));
  container-type: size;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--radar-gap);
}
.radar.radar-crop { --radar-r: 1.7778; }   /* 16:9 frame, like the webcam picture */
.radar-map {
  appearance: none;
  position: relative;
  flex: none;
  width: var(--radar-w);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.radar-map:focus-visible { outline: none; }
.radar-map:focus-visible .radar-frame { outline: 2px solid var(--accent); outline-offset: 2px; }
.radar-frame {
  position: relative; display: block; overflow: hidden;
  box-sizing: border-box;
  aspect-ratio: 1329 / 969;
  width: 100%;
  border-radius: var(--r-md);               /* no frame line (Lukáš 22. 10.) */
  background: transparent;                  /* the map image has its own alpha */
  transition: filter var(--t-fast);
}
.radar-map:hover .radar-frame { filter: brightness(1.06); }
.radar-crop .radar-frame { aspect-ratio: 16 / 9; }
.radar-frame img {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  display: block;
  user-select: none; -webkit-user-drag: none;
}
/* map without the legend band at the full width of the 16:9 frame (Luděk 24. 10.):
   the image is (969/1329) × (16/9) = 129.630 % of the frame tall and shows rows
   170–917 of 969 — the whole of Czechia (rows ~197–895) with the label above
   Liberec; cropped are the legend band and the bottom strip with the date and
   „© App Počasí Meteo“ (the time is in the controls, the © goes back as text
   below); 170/969 × 129.630 % = 22.743 % */
.radar-crop .radar-frame img { top: -22.743%; height: 129.630%; width: 100%; left: 0; }
.radar-crop .radar-frame::after {
  content: "© App Počasí Meteo";
  position: absolute; right: 7px; bottom: 5px;
  font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: .02em;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 0 2px rgba(11, 16, 32, .9), 0 1px 3px rgba(11, 16, 32, .7);
  pointer-events: none;
}
/* The legend band (top 152 of 969 px) is transparent in the image with WHITE
   text — on a light theme it vanished. A dark translucent band under it (the
   image's own background shows through its transparent pixels) keeps it
   readable on any theme, fading out just above the map (Lukáš 22. 10.).
   With the legend cropped away the band is outside the frame. */
.radar-frame img, .radar-modal-body > img {
  background: linear-gradient(180deg, rgba(11, 16, 32, .82) 0, rgba(11, 16, 32, .82) 13.8%, rgba(11, 16, 32, 0) 15.7%);
}

/* controls as wide as the map (never narrower than ~240 px while the tile allows) */
.radar > .radar-bar { width: var(--radar-w); min-width: min(100cqw, 240px); height: var(--radar-bar); }
/* Controls kept quiet (Lukáš 22. 10.: „subtilnější a méně rušivé“): a bare
   play glyph, a hairline timeline with a small knob (the played part a touch
   stronger, --p from radar.jsx), muted small time — full strength only while
   the pointer is over the radar or a control has focus. */
.radar-bar {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto; min-width: 0;
  opacity: .7; transition: opacity var(--t-fast);
}
.radar:hover > .radar-bar, .radar-bar:focus-within, .radar-modal-body .radar-bar { opacity: 1; }
@media (hover: none) { .radar-bar { opacity: .85; } }   /* touch: no hover to bring it up */
.radar-play {
  appearance: none; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  border: 0; padding: 0;
  background: transparent;
  color: var(--muted);
  font-size: calc(14px * var(--fs));
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
}
.radar-play:hover:not(:disabled) { color: var(--text); background: color-mix(in oklab, var(--text) 8%, transparent); }
.radar-play:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.radar-play:disabled { opacity: 0.4; cursor: default; }
.radar-seek {
  --track: color-mix(in oklab, var(--text) 16%, transparent);
  --done: color-mix(in oklab, var(--text) 42%, transparent);
  -webkit-appearance: none; appearance: none;
  flex: 1 1 auto; min-width: 60px; height: 16px; margin: 0;
  background: transparent; cursor: pointer;
}
.radar-seek:focus-visible { outline: none; }
.radar-seek::-webkit-slider-runnable-track {
  height: 3px; border-radius: 99px;
  background: linear-gradient(90deg, var(--done) var(--p, 100%), var(--track) var(--p, 100%));
}
.radar-seek::-moz-range-track { height: 3px; border-radius: 99px; background: var(--track); }
.radar-seek::-moz-range-progress { height: 3px; border-radius: 99px; background: var(--done); }
.radar-seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 10px; height: 10px; margin-top: -3.5px; border-radius: 50%; border: 0;
  background: var(--muted); transition: background var(--t-fast), transform var(--t-fast);
}
.radar-seek::-moz-range-thumb {
  width: 10px; height: 10px; border-radius: 50%; border: 0;
  background: var(--muted); transition: background var(--t-fast);
}
.radar-seek:hover::-webkit-slider-thumb, .radar-seek:focus-visible::-webkit-slider-thumb { background: var(--accent); transform: scale(1.15); }
.radar-seek:hover::-moz-range-thumb, .radar-seek:focus-visible::-moz-range-thumb { background: var(--accent); }
.radar-seek:disabled { cursor: default; opacity: .5; }
.radar-time {
  font-family: var(--mono); font-size: calc(11px * var(--fs)); color: var(--dim);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.radar-time b { color: var(--muted); font-weight: 600; }
.radar-time.radar-stale, .radar-time.radar-stale b { color: var(--warn); }
.radar-loading {
  display: grid; place-items: center;
  height: 100%; min-height: 160px;
  color: var(--muted); font-size: 13px;
}

@container tile (max-width: 300px) {
  .radar-rel { display: none; }
  .radar-bar { gap: 6px; }
}

/* Full-size modal — the whole map incl. legend, capped by the viewport. */
.chart-modal.radar-modal {
  width: fit-content; max-width: 96vw;
  min-width: min(420px, 90vw);
  max-height: 92vh; max-height: 92dvh;
}
.radar-modal-body { display: flex; flex-direction: column; gap: 10px; }
.radar-modal-body > img {
  display: block; margin: 0 auto;
  width: auto; height: auto;
  max-width: min(1329px, 92vw);
  max-height: 75vh; max-height: 75dvh;
  border-radius: var(--r-md);
}