/* RadarČeska V5.4.5 — UX POLISH LAB
   Frontend-only layer. V5.4.4 Film Fidelity renderer/backend stays untouched.
   Goals: mobile-first timeline, factual-observation marker, compact radar legend,
   and Ventusky-style desktop radar readout at the mouse cursor. */

/* ---------- Shared visual language ---------- */
#app[data-rc-ux="v5.4.5"] .timeline-shell.timeline-pro{
  --rc-ink:#173f49;
  --rc-muted:#71878e;
  --rc-live:#07977f;
  --rc-forecast:#4f87cf;
}

/* ---------- Radar legend: quieter and map-first ---------- */
#app.radar-engine-v5-active #radarV5Legend{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  position:fixed!important;
  right:16px!important;
  bottom:76px!important;
  width:218px!important;
  height:auto!important;
  box-sizing:border-box!important;
  padding:8px 10px 8px!important;
  border:1px solid rgba(20,63,72,.09)!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.91)!important;
  box-shadow:0 9px 26px rgba(18,52,61,.105)!important;
  backdrop-filter:blur(16px) saturate(1.04)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.04)!important;
  color:#17343b!important;
  pointer-events:none!important;
  z-index:90!important;
}
#radarV5Legend[hidden]{display:none!important}
#radarV5Legend .rv5-legend-head{display:flex!important;align-items:center!important;gap:6px!important;min-height:15px!important}
#radarV5Legend .rv5-legend-head strong{flex:1 1 auto!important;font:900 9.5px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important}
#radarV5Legend .rv5-legend-head>span{font:800 7.5px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;color:#72868d!important}
#radarV5Legend .rv5-legend-gradient{height:7px!important;margin-top:6px!important;border-radius:999px!important;box-shadow:inset 0 0 0 1px rgba(18,54,62,.055)!important}
#radarV5Legend .rv5-legend-ticks{display:flex!important;justify-content:space-between!important;margin-top:4px!important;color:#71858b!important;font:760 6.8px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;font-variant-numeric:tabular-nums!important}
#radarV5Legend small{display:block!important;margin-top:5px!important;color:#87989d!important;font:680 6.4px/1.28 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important}
#radarV5Legend .rv5-legend-toggle{display:none!important}

/* ---------- Last real radar observation marker ---------- */
#app.radar-engine-v5-active .slider-wrap.timeline-pro-wrap{position:relative!important}
.rc-v545-observation-marker{
  position:absolute!important;
  z-index:7!important;
  pointer-events:none!important;
  transform:translateX(-50%)!important;
  top:5px!important;
  height:19px!important;
  width:1px!important;
}
.rc-v545-observation-marker[hidden]{display:none!important}
.rc-v545-observation-marker>i{
  position:absolute!important;
  left:0!important;
  top:1px!important;
  width:2px!important;
  height:13px!important;
  border-radius:999px!important;
  background:#506a72!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.78)!important;
}
.rc-v545-observation-marker>i::after{
  content:"";
  position:absolute;
  left:50%;top:-2px;
  width:6px;height:6px;
  border-radius:50%;
  transform:translateX(-50%);
  background:#506a72;
  border:1.5px solid rgba(255,255,255,.98);
  box-sizing:border-box;
}
.rc-v545-observation-marker>b{
  position:absolute!important;
  left:50%!important;
  top:-14px!important;
  transform:translateX(-50%)!important;
  padding:2px 4px!important;
  border-radius:5px!important;
  background:rgba(255,255,255,.92)!important;
  box-shadow:0 1px 5px rgba(26,56,64,.07)!important;
  color:#5c737a!important;
  font:800 6.2px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  white-space:nowrap!important;
  font-variant-numeric:tabular-nums!important;
}

/* Now should read as the main temporal landmark. */
#app[data-rc-ux="v5.4.5"] .shared-timeline-active .timeline-now-marker{
  background:rgba(6,145,121,.48)!important;
}
#app[data-rc-ux="v5.4.5"] .shared-timeline-active .timeline-now-marker:before{
  box-shadow:0 0 0 4px rgba(9,180,151,.095)!important;
}
#app[data-rc-ux="v5.4.5"] .shared-timeline-active #leadBadge{
  font-weight:900!important;
  letter-spacing:.015em!important;
}
#app[data-rc-ux="v5.4.5"] .shared-timeline-active #leadBadge.is-current{
  background:#e8f8f4!important;
  color:#087b69!important;
  border-color:rgba(8,143,120,.14)!important;
}
#app[data-rc-ux="v5.4.5"] .shared-timeline-active #forecastLeadBtn{
  color:#4b79af!important;
  border-color:rgba(75,121,175,.12)!important;
  background:rgba(244,248,253,.96)!important;
}

/* ---------- Ventusky-style desktop mouse readout ---------- */
.rc-radar-pointer-mark,
.rc-radar-pointer-card{
  position:absolute;
  z-index:118;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .09s ease,visibility .09s ease;
}
.rc-radar-pointer-mark.is-visible,
.rc-radar-pointer-card.is-visible{opacity:1;visibility:visible}
.rc-radar-pointer-mark{
  width:15px;height:15px;
  margin:-7.5px 0 0 -7.5px;
}
.rc-radar-pointer-mark::before,
.rc-radar-pointer-mark::after{
  content:"";
  position:absolute;
  background:rgba(20,54,63,.62);
  box-shadow:0 0 0 .5px rgba(255,255,255,.75);
}
.rc-radar-pointer-mark::before{left:7px;top:1px;width:1px;height:13px}
.rc-radar-pointer-mark::after{left:1px;top:7px;width:13px;height:1px}
.rc-radar-pointer-mark>i{
  position:absolute;left:5px;top:5px;width:5px;height:5px;border-radius:50%;
  background:#fff;border:1.5px solid #173f49;box-sizing:border-box;
}
.rc-radar-pointer-card{
  min-width:112px;
  max-width:158px;
  box-sizing:border-box;
  padding:6px 8px 6px;
  border:1px solid rgba(20,58,67,.11);
  border-radius:10px;
  background:rgba(255,255,255,.94);
  box-shadow:0 7px 20px rgba(18,48,57,.13),0 1px 3px rgba(18,48,57,.04);
  backdrop-filter:blur(12px) saturate(1.05);
  -webkit-backdrop-filter:blur(12px) saturate(1.05);
  color:#173b44;
  transform:translate(13px,13px);
  font-variant-numeric:tabular-nums;
}
.rc-radar-pointer-card.is-left{transform:translate(calc(-100% - 13px),13px)}
.rc-radar-pointer-card.is-up{transform:translate(13px,calc(-100% - 13px))}
.rc-radar-pointer-card.is-left.is-up{transform:translate(calc(-100% - 13px),calc(-100% - 13px))}
.rc-radar-pointer-card .rcpi-main{display:flex;align-items:center;gap:6px;white-space:nowrap}
.rc-radar-pointer-card .rcpi-dot{display:block;flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:#9aa9ad;box-shadow:0 0 0 2px rgba(255,255,255,.9)}
.rc-radar-pointer-card strong{font:900 10px/1.1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#173a43}
.rc-radar-pointer-card .rcpi-rate{margin-left:auto;font:820 8.5px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#506a72}
.rc-radar-pointer-card .rcpi-sub{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px;color:#7c9096;font:720 6.6px/1.15 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;white-space:nowrap}
.rc-radar-pointer-card.is-loading .rcpi-dot{animation:rc-v545-pulse .8s ease-in-out infinite alternate}
.rc-radar-pointer-card.is-dry .rcpi-dot{background:#a9b8bc!important}
.rc-radar-pointer-card.is-error{opacity:.72}
@keyframes rc-v545-pulse{from{opacity:.35}to{opacity:1}}

/* ---------- Mobile timeline: compact glass dock, one clear temporal hierarchy ---------- */
@media(max-width:700px){
  #app.radar-engine-v5-active #radarV5Legend{
    right:7px!important;
    bottom:calc(137px + env(safe-area-inset-bottom))!important;
    width:146px!important;
    padding:6px 7px!important;
    border-radius:11px!important;
    background:rgba(255,255,255,.89)!important;
    box-shadow:0 7px 20px rgba(18,52,61,.095)!important;
    pointer-events:none!important;
  }
  #radarV5Legend .rv5-legend-head{min-height:18px!important;gap:5px!important}
  #radarV5Legend .rv5-legend-head strong{font-size:8.2px!important}
  #radarV5Legend .rv5-legend-head>span{font-size:6.5px!important}
  #radarV5Legend .rv5-legend-gradient{height:5px!important;margin-top:4px!important}
  #radarV5Legend .rv5-legend-ticks{font-size:5.6px!important;margin-top:3px!important}
  #radarV5Legend small{display:none!important}
  #radarV5Legend .rv5-legend-toggle{
    display:grid!important;
    place-items:center!important;
    flex:0 0 20px!important;
    width:20px!important;height:20px!important;
    margin:-2px -2px -2px 0!important;
    padding:0!important;
    border:1px solid rgba(20,70,78,.10)!important;
    border-radius:7px!important;
    background:rgba(247,250,250,.97)!important;
    color:#365b63!important;
    font:900 9px/1 system-ui!important;
    pointer-events:auto!important;
    cursor:pointer!important;
  }
  #radarV5Legend[data-mobile-expanded="1"]{
    width:min(238px,calc(100vw - 14px))!important;
    padding:8px 9px!important;
  }
  #radarV5Legend[data-mobile-expanded="1"] small{display:block!important;font-size:6.4px!important;margin-top:4px!important}

  #app[data-rc-ux="v5.4.5"].shared-timeline-active .timeline-shell.timeline-pro{
    left:6px!important;
    right:6px!important;
    bottom:calc(58px + env(safe-area-inset-bottom))!important;
    width:auto!important;
    min-height:66px!important;
    border-radius:16px!important;
    border:1px solid rgba(20,71,78,.09)!important;
    background:rgba(255,255,255,.945)!important;
    box-shadow:0 10px 30px rgba(19,54,63,.13),0 2px 6px rgba(19,54,63,.035)!important;
    backdrop-filter:blur(18px) saturate(1.05)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.05)!important;
    overflow:visible!important;
  }
  #app[data-rc-ux="v5.4.5"] .timeline-pro .timeline-main{
    min-height:66px!important;
    height:66px!important;
    grid-template-columns:32px 61px minmax(82px,1fr) auto!important;
    gap:5px!important;
    padding:5px 7px!important;
    align-items:center!important;
    box-sizing:border-box!important;
  }
  #app[data-rc-ux="v5.4.5"] .timeline-pro .play-btn{
    width:31px!important;height:31px!important;min-width:31px!important;border-radius:50%!important;
  }
  #app[data-rc-ux="v5.4.5"] .timeline-pro .play-btn svg{width:14px!important;height:14px!important}
  #app[data-rc-ux="v5.4.5"] .timeline-pro .timeline-now{min-width:0!important;overflow:hidden!important}
  #app[data-rc-ux="v5.4.5"] .timeline-pro .timeline-kind{font-size:5.7px!important;letter-spacing:.045em!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  #app[data-rc-ux="v5.4.5"] .timeline-pro .timeline-now strong,#app[data-rc-ux="v5.4.5"] #frameTime{font-size:8.8px!important;white-space:nowrap!important}
  #app[data-rc-ux="v5.4.5"] .slider-wrap.timeline-pro-wrap{
    min-width:0!important;width:100%!important;height:40px!important;min-height:40px!important;
    padding:0 1px 11px!important;overflow:visible!important;
  }
  #app[data-rc-ux="v5.4.5"] .radar-timeline{left:2px!important;right:2px!important;top:9px!important;height:19px!important}
  #app[data-rc-ux="v5.4.5"] #frameSlider.timeline-hit-input{
    left:-5px!important;right:-5px!important;top:-3px!important;width:calc(100% + 10px)!important;height:40px!important;
  }
  #app[data-rc-ux="v5.4.5"] .timeline-ticks{left:2px!important;right:2px!important;height:10px!important}
  #app[data-rc-ux="v5.4.5"] .timeline-ticks span{font-size:5.6px!important}
  #app[data-rc-ux="v5.4.5"] .timeline-cursor:after{width:11px!important;height:11px!important;top:7px!important}
  #app[data-rc-ux="v5.4.5"] .timeline-shell .rc-timeline-actions{
    display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:3px!important;
    min-width:0!important;max-width:118px!important;overflow-x:auto!important;overflow-y:hidden!important;
    overscroll-behavior-x:contain!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important;padding:2px 0!important;
  }
  #app[data-rc-ux="v5.4.5"] .timeline-shell .rc-timeline-actions::-webkit-scrollbar{display:none!important}
  #app[data-rc-ux="v5.4.5"] .timeline-shell .rc-timeline-actions>*{flex:0 0 auto!important}
  #app[data-rc-ux="v5.4.5"] #radarSharedTimelineSpeed{height:28px!important;min-width:45px!important;padding:0!important}
  #app[data-rc-ux="v5.4.5"] #radarSharedTimelineSpeed>span{display:none!important}
  #app[data-rc-ux="v5.4.5"] #radarSharedTimelineSpeed select{height:27px!important;width:43px!important;min-width:43px!important;padding:0 14px 0 7px!important;font-size:7.7px!important;border-radius:9px!important}
  #app[data-rc-ux="v5.4.5"] #radarLightningToggle{width:28px!important;min-width:28px!important;height:28px!important;border-radius:9px!important}
  #app[data-rc-ux="v5.4.5"] #forecastLeadBtn,#app[data-rc-ux="v5.4.5"] #leadBadge{height:28px!important;min-width:38px!important;padding:0 6px!important;border-radius:9px!important;font-size:7.2px!important}
  #app[data-rc-ux="v5.4.5"] #timelineCredit{display:none!important}
  .rc-v545-observation-marker{top:6px!important;height:17px!important}
  .rc-v545-observation-marker>i{height:12px!important}
  .rc-v545-observation-marker>b{display:none!important}
  .rc-radar-pointer-mark,.rc-radar-pointer-card{display:none!important}
}

@media(max-width:430px){
  #app[data-rc-ux="v5.4.5"] .timeline-pro .timeline-main{grid-template-columns:30px 56px minmax(70px,1fr) auto!important;gap:4px!important;padding:5px 6px!important}
  #app[data-rc-ux="v5.4.5"] .timeline-shell .rc-timeline-actions{max-width:105px!important}
  /* Speed is secondary on a narrow phone; preserve lightning, forecast-end and TEĎ. */
  #app[data-rc-ux="v5.4.5"] #radarSharedTimelineSpeed{display:none!important}
  #app[data-rc-ux="v5.4.5"] #forecastLeadBtn,#app[data-rc-ux="v5.4.5"] #leadBadge{min-width:35px!important;padding:0 5px!important;font-size:6.8px!important}
}

@media(max-width:360px){
  #app[data-rc-ux="v5.4.5"] .timeline-pro .timeline-main{grid-template-columns:29px 52px minmax(64px,1fr) auto!important;gap:3px!important;padding:5px!important}
  #app[data-rc-ux="v5.4.5"] .timeline-shell .rc-timeline-actions{max-width:98px!important}
  #app[data-rc-ux="v5.4.5"] #radarLightningToggle{width:26px!important;min-width:26px!important;height:26px!important}
  #app[data-rc-ux="v5.4.5"] #forecastLeadBtn,#app[data-rc-ux="v5.4.5"] #leadBadge{height:26px!important;min-width:33px!important;padding:0 4px!important}
}

/* No hover readout on touch/coarse-pointer devices, even on wide tablets. */
@media(hover:none),(pointer:coarse){.rc-radar-pointer-mark,.rc-radar-pointer-card{display:none!important}}

@media(prefers-reduced-motion:reduce){
  .rc-radar-pointer-mark,.rc-radar-pointer-card,#radarV5Legend{transition:none!important;animation:none!important}
  .rc-radar-pointer-card.is-loading .rcpi-dot{animation:none!important}
}