/* RadarČeska V5.9.25.1 — Unified Timeline UI + Wind Slider Fix
   Corrective successor to V5.9.24:
   - same bottom timeline geometry for Radar and Temperature
   - compact layer legend inside the timeline
   - speed restored on mobile
   - fixed round Play
   - no aggressive GPU warm patch (diagnose native renderer first)
*/

:root{
  --rc5925-green:#08a98f;
  --rc5925-green-dark:#078b78;
  --rc5925-blue:#4c8fd7;
  --rc5925-ink:#153d47;
  --rc5925-muted:#6f858c;
}

/* Shared shell */
#app.shared-timeline-active .timeline-shell.timeline-pro{
  background:rgba(255,255,255,.975)!important;
  border:1px solid rgba(20,71,78,.09)!important;
  border-radius:18px!important;
  box-shadow:0 10px 30px rgba(20,55,63,.11),0 2px 7px rgba(20,55,63,.035)!important;
  overflow:visible!important;
  transition:opacity .18s ease,background .18s ease,box-shadow .18s ease!important;
}
#app.shared-timeline-active .timeline-shell.timeline-pro.rc5925-idle{
  opacity:.90!important;
  background:rgba(255,255,255,.93)!important;
}
#app.shared-timeline-active .timeline-shell.timeline-pro.is-scrubbing,
#app.shared-timeline-active .timeline-shell.timeline-pro.is-playing,
#app.shared-timeline-active .timeline-shell.timeline-pro.rc-control-active{
  opacity:1!important;
  background:rgba(255,255,255,.985)!important;
}

/* Stable circular Play */
#app.shared-timeline-active .timeline-pro .play-btn{
  display:grid!important;
  place-items:center!important;
  flex:0 0 40px!important;
  width:40px!important;
  min-width:40px!important;
  max-width:40px!important;
  height:40px!important;
  min-height:40px!important;
  max-height:40px!important;
  aspect-ratio:1/1!important;
  padding:0!important;
  margin:0!important;
  box-sizing:border-box!important;
  border-radius:50%!important;
  overflow:hidden!important;
}
#app.shared-timeline-active .timeline-pro .play-btn svg{
  width:17px!important;
  height:17px!important;
}

/* Rail + cursor */
#app.shared-timeline-active .slider-wrap.timeline-pro-wrap{position:relative!important;overflow:visible!important}
#app.shared-timeline-active .radar-timeline{overflow:visible!important}
#app.shared-timeline-active .timeline-rail,
#app.shared-timeline-active .timeline-zone{height:4px!important;border-radius:999px!important}
#app.shared-timeline-active .timeline-rail{background:#dce7e9!important}
#app.shared-timeline-active .timeline-history-zone{background:rgba(8,169,143,.10)!important}
#app.shared-timeline-active .timeline-forecast-zone{
  background:linear-gradient(90deg,rgba(67,153,211,.10),rgba(81,116,213,.07))!important;
}
#app.shared-timeline-active .timeline-history-progress{
  height:6px!important;border-radius:999px!important;
  background:linear-gradient(90deg,#11b99d,#08a88f)!important;box-shadow:none!important;
}
#app.shared-timeline-active .timeline-forecast-progress{
  height:6px!important;border-radius:999px!important;
  background:linear-gradient(90deg,#46a8e2,#4f79d7)!important;box-shadow:none!important;
}
#app.shared-timeline-active .timeline-cursor{
  width:2px!important;overflow:visible!important;z-index:8!important;
  background:var(--rc5925-ink)!important;transform:translateX(-1px)!important;
}
#app.shared-timeline-active .timeline-cursor:after{
  width:17px!important;height:17px!important;top:6px!important;
  border:3px solid var(--rc5925-green)!important;background:#fff!important;
  box-shadow:0 2px 8px rgba(20,61,71,.18),0 0 0 4px rgba(255,255,255,.94)!important;
  transition:transform .11s ease,box-shadow .11s ease!important;
}
#app.shared-timeline-active .radar-timeline.is-scrubbing .timeline-cursor:after,
#app.shared-timeline-active .timeline-shell.is-scrubbing .timeline-cursor:after{
  transform:translate(-50%,-50%) scale(1.18)!important;
  box-shadow:0 4px 14px rgba(20,61,71,.22),0 0 0 8px rgba(8,169,143,.13)!important;
}
#app.shared-timeline-active .radar-timeline.is-forecasting .timeline-cursor:after{
  border-color:var(--rc5925-blue)!important;
}

/* Native range = state/a11y. Transparent surface = touch/mouse. */
#app.shared-timeline-active #frameSlider.timeline-hit-input{
  opacity:0!important;
  pointer-events:none!important;
}
#app.shared-timeline-active .rc5925-scrub-surface{
  position:absolute;
  left:-10px;right:-10px;top:-12px;height:56px;
  z-index:30;display:block;background:transparent;
  cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
#app.shared-timeline-active .rc5925-scrub-surface.is-dragging{cursor:grabbing}

/* Bubble */
#app.shared-timeline-active .timeline-cursor-bubble{
  min-width:92px!important;bottom:29px!important;padding:7px 9px 6px!important;
  border:1px solid rgba(255,255,255,.16)!important;border-radius:10px!important;
  background:rgba(18,49,59,.97)!important;color:#fff!important;
  box-shadow:0 7px 20px rgba(18,49,59,.18)!important;text-align:center!important;
  line-height:1.05!important;white-space:nowrap!important;pointer-events:none!important;
}
#app.shared-timeline-active .rc5925-bubble-time{
  display:block;font-size:10px;font-weight:950;font-variant-numeric:tabular-nums;
}
#app.shared-timeline-active .rc5925-bubble-relative{
  display:block;margin-top:3px;color:#c9dadd;font-size:7px;font-weight:820;
}

/* One compact layer legend owned by Timeline UX. */
.rc5925-layer-legend{display:none}

@media(max-width:700px){
  /* Same bottom bar for every weather layer. */
  #app[data-rc-weather-core="v574"].shared-timeline-active .timeline-shell.timeline-pro{
    left:7px!important;right:7px!important;
    height:82px!important;min-height:82px!important;
    overflow:visible!important;
  }
  #app[data-rc-weather-core="v574"] .timeline-pro .timeline-main{
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr) auto!important;
    grid-template-rows:36px 36px!important;
    column-gap:5px!important;row-gap:0!important;
    height:82px!important;min-height:82px!important;
    padding:5px 6px 4px!important;box-sizing:border-box!important;
    align-items:center!important;
  }
  #app[data-rc-weather-core="v574"] .timeline-pro .play-btn{
    grid-column:1!important;grid-row:1!important;
    width:38px!important;min-width:38px!important;max-width:38px!important;
    height:38px!important;min-height:38px!important;max-height:38px!important;
    flex-basis:38px!important;
  }
  #app[data-rc-weather-core="v574"] .timeline-pro .play-btn svg{width:16px!important;height:16px!important}

  /* Existing mobile legends are replaced by a single compact dynamic legend. */
  #app[data-rc-weather-core="v574"] .rc574-legend,
  #app[data-rc-weather-core="v574"] #modelTemperatureV11Legend{
    display:none!important;
  }

  #app[data-rc-weather-core="v574"] .rc5925-layer-legend{
    grid-column:2!important;grid-row:1!important;
    display:grid!important;
    grid-template-rows:10px 5px 8px!important;
    gap:2px!important;
    min-width:0!important;height:29px!important;
    padding:3px 5px 2px!important;
    border:1px solid rgba(24,73,80,.06)!important;
    border-radius:9px!important;
    background:rgba(245,250,250,.73)!important;
    overflow:hidden!important;
  }
  .rc5925-layer-legend .rc5925-legend-head{
    display:flex;align-items:center;justify-content:space-between;gap:4px;min-width:0;
  }
  .rc5925-layer-legend .rc5925-legend-head strong{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    color:#173e47;font:900 6.4px/1 system-ui;
  }
  .rc5925-layer-legend .rc5925-legend-head span{
    color:#788d92;font:820 5.3px/1 system-ui;white-space:nowrap;
  }
  .rc5925-layer-legend .rc5925-legend-gradient{
    display:block;height:5px;border-radius:999px;
    box-shadow:inset 0 0 0 1px rgba(18,54,62,.06);
  }
  .rc5925-layer-legend .rc5925-legend-ticks{
    display:flex;align-items:center;justify-content:space-between;
    color:#70858a;font:760 5px/1 system-ui;font-variant-numeric:tabular-nums;
  }

  #app[data-rc-weather-core="v574"] .timeline-pro .timeline-now{display:none!important}

  /* IMPORTANT: speed is visible again on phone. */
  #app[data-rc-weather-core="v574"] .timeline-shell .rc-timeline-actions{
    grid-column:3!important;grid-row:1!important;
    display:flex!important;align-items:center!important;justify-content:flex-end!important;
    gap:3px!important;min-width:max-content!important;max-width:none!important;
    overflow:visible!important;padding:0!important;margin:0!important;
  }
  #app[data-rc-weather-core="v574"] #radarSharedTimelineSpeed{
    display:flex!important;
    width:36px!important;min-width:36px!important;height:28px!important;
    padding:0!important;margin:0!important;border:0!important;background:transparent!important;
  }
  #app[data-rc-weather-core="v574"] #radarSharedTimelineSpeed>span{display:none!important}
  #app[data-rc-weather-core="v574"] #radarSharedTimelineSpeed select{
    display:block!important;
    width:36px!important;min-width:36px!important;height:28px!important;
    padding:0 11px 0 5px!important;
    border:1px solid rgba(20,70,78,.09)!important;border-radius:8px!important;
    background:rgba(249,252,252,.97)!important;color:#274b53!important;
    font:900 7.2px/28px system-ui!important;
  }
  #app[data-rc-weather-core="v574"] #radarLightningToggle{
    width:27px!important;min-width:27px!important;height:28px!important;border-radius:8px!important;
  }
  #app[data-rc-weather-core="v574"] .rc574-live{
    min-width:47px!important;height:28px!important;padding:0 5px!important;
    border-radius:8px!important;font-size:6.5px!important;
  }

  #app[data-rc-weather-core="v574"] .slider-wrap.timeline-pro-wrap{
    grid-column:1/4!important;grid-row:2!important;
    width:100%!important;height:36px!important;min-height:36px!important;
    padding:0 3px 10px!important;margin:0!important;overflow:visible!important;
  }
  #app[data-rc-weather-core="v574"] .radar-timeline{
    left:3px!important;right:3px!important;top:7px!important;height:20px!important;overflow:visible!important;
  }
  #app[data-rc-weather-core="v574"] .timeline-rail,
  #app[data-rc-weather-core="v574"] .timeline-zone{top:9px!important;height:4px!important}
  #app[data-rc-weather-core="v574"] .timeline-history-progress,
  #app[data-rc-weather-core="v574"] .timeline-forecast-progress{top:8px!important;height:6px!important}
  #app[data-rc-weather-core="v574"] .timeline-cursor{height:20px!important}
  #app[data-rc-weather-core="v574"] .timeline-cursor:after{width:17px!important;height:17px!important;top:7px!important}
  #app[data-rc-weather-core="v574"] .rc5925-scrub-surface{
    left:-10px;right:-10px;top:-10px;height:58px;
  }
  #app[data-rc-weather-core="v574"] .timeline-ticks{
    left:3px!important;right:3px!important;bottom:0!important;height:10px!important;
  }
  #app[data-rc-weather-core="v574"] .timeline-ticks span{
    font-size:6px!important;font-weight:830!important;
  }

  /* Temperature controls: one compact row; legend moved to bottom timeline. */
  #app[data-rc-weather-core="v574"] #modelTemperatureV11Controls{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    align-items:center!important;
    gap:6px!important;
    min-height:43px!important;
    padding:5px 7px!important;
    border-radius:13px!important;
  }
  #app[data-rc-weather-core="v574"] #modelTemperatureV11Controls .mt10-head{
    display:flex!important;
    align-items:center!important;
    gap:4px!important;
    padding:0!important;
  }
  #app[data-rc-weather-core="v574"] #modelTemperatureV11Controls .mt10-head strong{
    font-size:9px!important;
  }
  #app[data-rc-weather-core="v574"] #modelTemperatureV11Controls .mt10-sub{
    font-size:6.5px!important;
  }
  #app[data-rc-weather-core="v574"] #modelTemperatureV11Controls .mt10-mini-legend{
    display:none!important;
  }
  #app[data-rc-weather-core="v574"] #modelTemperatureV11Controls .mt10-models{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:2px!important;
    padding:2px!important;
  }
  #app[data-rc-weather-core="v574"] #modelTemperatureV11Controls .mt10-models button{
    min-width:0!important;
    padding:7px 3px!important;
    font-size:7.6px!important;
  }
}

@media(max-width:390px){
  #app[data-rc-weather-core="v574"] .timeline-pro .timeline-main{
    grid-template-columns:40px minmax(58px,1fr) auto!important;
    column-gap:3px!important;padding-left:5px!important;padding-right:5px!important;
  }
  #app[data-rc-weather-core="v574"] .timeline-pro .play-btn{
    width:36px!important;min-width:36px!important;max-width:36px!important;
    height:36px!important;min-height:36px!important;max-height:36px!important;
  }
  #app[data-rc-weather-core="v574"] #radarSharedTimelineSpeed,
  #app[data-rc-weather-core="v574"] #radarSharedTimelineSpeed select{
    width:34px!important;min-width:34px!important;
  }
  #app[data-rc-weather-core="v574"] .rc574-live{min-width:43px!important;padding:0 4px!important}
}

@media(prefers-reduced-motion:reduce){
  #app.shared-timeline-active .timeline-shell.timeline-pro,
  #app.shared-timeline-active .timeline-cursor:after{transition:none!important}
}


/* RADARCESKA_DESKTOP_WIND_TIMELINE_V228
   The visual rail/cursor is the UI; a broad transparent surface owns pointer input.
   Keep this explicit because older shared-timeline CSS also contains retired range rules. */
#app.shared-timeline-active .slider-wrap.timeline-pro-wrap{
  min-height:42px!important;
  height:42px!important;
  padding:0 5px 12px!important;
  display:flex!important;
  align-items:center!important;
}
#app.shared-timeline-active .radar-timeline{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  position:absolute!important;
  left:5px!important;
  right:5px!important;
  top:9px!important;
  height:22px!important;
  pointer-events:none!important;
}
#app.shared-timeline-active .timeline-ticks{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  left:5px!important;
  right:5px!important;
  bottom:0!important;
  height:11px!important;
}
#app.shared-timeline-active .timeline-ticks span{
  color:#6d838a!important;
  font-size:7.4px!important;
  font-weight:820!important;
}
#app.shared-timeline-active .timeline-ticks span.is-now{color:#087f6d!important;font-weight:950!important}
#app.shared-timeline-active .timeline-rail,
#app.shared-timeline-active .timeline-zone{top:10px!important;height:4px!important}
#app.shared-timeline-active .timeline-history-progress,
#app.shared-timeline-active .timeline-forecast-progress{top:9px!important;height:6px!important}
#app.shared-timeline-active .timeline-cursor{
  top:1px!important;
  height:22px!important;
  width:2px!important;
  transition:none!important;
}
#app.shared-timeline-active .timeline-cursor:after{
  width:18px!important;
  height:18px!important;
  top:10px!important;
  border-width:3px!important;
  box-shadow:0 2px 8px rgba(20,61,71,.18),0 0 0 5px rgba(255,255,255,.96)!important;
}
#app.shared-timeline-active .radar-timeline.is-scrubbing .timeline-cursor:after,
#app.shared-timeline-active .timeline-shell.is-scrubbing .timeline-cursor:after{
  transform:translate(-50%,-50%) scale(1.14)!important;
  box-shadow:0 4px 14px rgba(20,61,71,.22),0 0 0 10px rgba(8,169,143,.13)!important;
}
#app.shared-timeline-active .rc5925-scrub-surface{
  left:-12px!important;
  right:-12px!important;
  top:-10px!important;
  height:62px!important;
  z-index:40!important;
  cursor:grab!important;
  touch-action:none!important;
}
#app.shared-timeline-active .rc5925-scrub-surface.is-dragging{cursor:grabbing!important}
#app.shared-timeline-active #frameSlider.timeline-hit-input{
  opacity:0!important;
  pointer-events:none!important;
}
#app.shared-timeline-active .timeline-cursor-bubble{
  bottom:31px!important;
  min-width:98px!important;
}

@media(max-width:700px){
  #app.shared-timeline-active .slider-wrap.timeline-pro-wrap{
    min-height:36px!important;height:36px!important;padding:0 3px 10px!important;
  }
  #app.shared-timeline-active .radar-timeline{left:3px!important;right:3px!important;top:7px!important;height:20px!important}
  #app.shared-timeline-active .timeline-rail,
  #app.shared-timeline-active .timeline-zone{top:9px!important;height:4px!important}
  #app.shared-timeline-active .timeline-history-progress,
  #app.shared-timeline-active .timeline-forecast-progress{top:8px!important;height:6px!important}
  #app.shared-timeline-active .timeline-cursor{height:20px!important}
  #app.shared-timeline-active .timeline-cursor:after{width:17px!important;height:17px!important;top:8px!important}
  #app.shared-timeline-active .rc5925-scrub-surface{left:-10px!important;right:-10px!important;top:-11px!important;height:58px!important}
  #app.shared-timeline-active .timeline-cursor-bubble{bottom:27px!important;min-width:86px!important}
}

/* RADARCESKA v2.4.4 · compact controls are owned by app.css */

/* RADARCESKA v2.4.4 · final mobile ownership (loaded after app.css) */
@media(max-width:700px){
  #app[data-rc-weather-core="v574"][data-mode="weather"] #modelTemperatureV11Controls{
    display:flex!important;grid-template-columns:none!important;align-items:center!important;
    left:8px!important;right:auto!important;width:max-content!important;max-width:calc(100vw - 16px)!important;
    min-height:28px!important;padding:3px 5px!important;gap:4px!important;border-radius:9px!important;
  }
  #app[data-rc-weather-core="v574"][data-mode="weather"] #modelTemperatureV11Controls .mt10-head{display:flex!important;gap:3px!important;padding:0 2px 0 1px!important}
  #app[data-rc-weather-core="v574"][data-mode="weather"] #modelTemperatureV11Controls .mt10-head strong{font-size:8.6px!important}
  #app[data-rc-weather-core="v574"][data-mode="weather"] #modelTemperatureV11Controls .mt10-sub{font-size:6px!important}
  #app[data-rc-weather-core="v574"][data-mode="weather"] #modelTemperatureV11Controls .mt10-mini-legend{display:none!important}
  #app[data-rc-weather-core="v574"][data-mode="weather"] #modelTemperatureV11Controls .mt10-models{width:auto!important;display:flex!important;grid-template-columns:none!important;gap:1px!important;padding:2px!important}
  #app[data-rc-weather-core="v574"][data-mode="weather"] #modelTemperatureV11Controls .mt10-models button{min-width:48px!important;min-height:21px!important;padding:4px 5px!important;font-size:6.4px!important}
  #app[data-rc-weather-core="v574"][data-mode="weather"] #modelTemperatureV11Controls .mt10-unit{display:none!important}
}