/* Radar Česka V5.9.15 — Mock Alignment Polish
   Desktop-only finishing layer on top of V5.9.14.
   Goals:
   - move the left inspector slightly higher to align with the submenu gap,
   - bring the card closer to the approved mock,
   - soften hierarchy, reduce height, and make collapsed card fit better,
   - keep all functional logic untouched.
*/

@media (min-width:701px){
  /* Align the left card block under the submenu instead of too low above the timeline. */
  #placeCard.rc596-weather-detail,
  #modelPointCard.rc596-model-detail,
  .incident-card{
    top:162px!important;
    bottom:auto!important;
  }

  #placeCard.rc596-weather-detail{
    left:18px!important;
    width:min(352px,calc(100vw - 86px))!important;
    max-height:calc(100dvh - 186px)!important;
    padding:14px 14px 12px!important;
    border-radius:23px!important;
    border:1px solid rgba(20,61,72,.07)!important;
    background:rgba(255,255,255,.985)!important;
    box-shadow:0 20px 56px rgba(24,55,66,.11),0 2px 8px rgba(24,55,66,.04)!important;
  }

  #placeCard.rc596-weather-detail.is-expanded{
    width:min(374px,calc(100vw - 78px))!important;
    max-height:calc(100dvh - 178px)!important;
  }

  /* Header closer to the mock: still compact, but more elegant and less cramped. */
  #placeCard.rc596-weather-detail .place-kicker{
    font-size:7.6px!important;
    letter-spacing:.16em!important;
    color:#6f8a92!important;
  }
  #placeCard.rc596-weather-detail .place-dot{
    width:8px!important;height:8px!important;box-shadow:0 0 0 5px rgba(33,194,162,.11)!important;
  }
  #placeCard.rc596-weather-detail .place-title-heading{margin:6px 36px 1px 0!important}
  #placeCard.rc596-weather-detail h2{
    font-size:20px!important;
    line-height:1.02!important;
    letter-spacing:-.04em!important;
    color:#102f3d!important;
  }
  #placeCard.rc596-weather-detail .place-subtitle{
    font-size:8.8px!important;color:#8a9aa0!important;font-weight:700!important;
  }
  #placeCard.rc596-weather-detail .card-close{
    width:38px!important;height:38px!important;border-radius:13px!important;
    background:linear-gradient(180deg,#fbfdfe,#f4f7f8)!important;
    border:1px solid rgba(22,63,74,.08)!important;
    box-shadow:0 3px 12px rgba(24,55,66,.05)!important;
    color:#6c858d!important;font-size:20px!important;
  }

  #placeCard.rc596-weather-detail .place-current{
    grid-template-columns:46px minmax(90px,1fr) 118px!important;
    gap:9px!important;
    margin-top:10px!important;
    padding:10px 11px!important;
    border-radius:16px!important;
    border:1px solid rgba(28,86,98,.07)!important;
    background:linear-gradient(180deg,#fcfefe,#f6fafb)!important;
  }
  #placeCard.rc596-weather-detail .place-weather-icon{
    width:46px!important;height:46px!important;border-radius:14px!important;
    background:#eff6f8!important;border:1px solid rgba(28,86,98,.05)!important;
  }
  #placeCard.rc596-weather-detail .place-weather-icon svg{width:30px!important;height:30px!important}
  #placeCard.rc596-weather-detail .place-current-temp{font-size:30px!important;line-height:1!important}
  #placeCard.rc596-weather-detail .place-current-condition{font-size:10.2px!important;line-height:1.18!important}
  #placeCard.rc596-weather-detail .place-current-copy small{font-size:7.9px!important}

  /* Dnes/Zítra: give them a calmer structure and stop the cramped feeling. */
  #placeCard.rc596-weather-detail .place-day-ranges{
    grid-template-columns:40px 1px minmax(0,1fr)!important;
    gap:7px!important;
    align-items:center!important;
    min-width:0!important;
  }
  #placeCard.rc596-weather-detail .place-day-range{gap:3px!important;min-width:0!important}
  #placeCard.rc596-weather-detail .place-day-range>span{font-size:7px!important;color:#8da0a6!important;letter-spacing:.04em!important}
  #placeCard.rc596-weather-detail .place-day-range-values{gap:2px!important}
  #placeCard.rc596-weather-detail .place-day-range-values strong,
  #placeCard.rc596-weather-detail .place-day-range-values small{font-size:10.6px!important}
  #placeCard.rc596-weather-detail .place-day-separator{background:rgba(23,61,72,.08)!important}
  #placeCard.rc596-weather-detail .place-day-range-main{grid-template-columns:22px minmax(0,1fr)!important;gap:5px!important}
  #placeCard.rc596-weather-detail .place-day-weather-icon{width:22px!important;height:22px!important;border-radius:8px!important}
  #placeCard.rc596-weather-detail .place-day-weather-icon svg{width:16px!important;height:16px!important}
  #placeCard.rc596-weather-detail .place-day-range-copy em{font-size:6.6px!important;color:#80959b!important}

  /* Main insight card gets a slightly more premium spacing like the mock. */
  #placeCard.rc596-weather-detail .smart-now-card{
    margin-top:10px!important;
    padding:11px 11px 10px!important;
    border-radius:15px!important;
    background:linear-gradient(180deg,#fdfffe,#f5fbf9)!important;
  }
  #placeCard.rc596-weather-detail .smart-now-card>strong{font-size:12.2px!important;line-height:1.14!important}
  #placeCard.rc596-weather-detail .smart-now-card>p{font-size:8.8px!important;line-height:1.38!important;margin-top:4px!important}
  #placeCard.rc596-weather-detail .smart-now-head b{font-size:8.6px!important}
  #placeCard.rc596-weather-detail .smart-now-head em{font-size:7.1px!important;padding:3px 6px!important}
  #placeCard.rc596-weather-detail .smart-now-explain{font-size:7.8px!important}

  /* Make the short-range row feel lighter and less dashboard-like. */
  #placeCard.rc596-weather-detail .rc579-rain-strip>span,
  #placeCard.rc596-weather-detail .rc579-rain-strip>div{
    min-height:40px!important;
    border-radius:10px!important;
    background:#fbfcfd!important;
  }
  #placeCard.rc596-weather-detail .rc579-rain-strip strong{font-size:8px!important}
  #placeCard.rc596-weather-detail .rc579-rain-strip small{font-size:6.5px!important}

  #placeCard.rc596-weather-detail .rc596-glance{
    margin-top:9px!important;
    padding:8px 0!important;
  }
  #placeCard.rc596-weather-detail .rc596-glance small{font-size:6.6px!important}
  #placeCard.rc596-weather-detail .rc596-glance strong{font-size:9px!important}

  /* Following hours close to the mock: a bit more elegant spacing but still compact. */
  #placeCard.rc596-weather-detail .place-hourly-preview{margin-top:10px!important}
  #placeCard.rc596-weather-detail .weather-section-head strong{font-size:10px!important}
  #placeCard.rc596-weather-detail .hourly-strip{gap:6px!important}
  #placeCard.rc596-weather-detail .hourly-item{
    flex:0 0 52px!important;min-width:52px!important;
    padding:7px 4px 6px!important;border-radius:12px!important;
  }
  #placeCard.rc596-weather-detail .hourly-item>span{font-size:7.2px!important}
  #placeCard.rc596-weather-detail .hourly-item i,
  #placeCard.rc596-weather-detail .hourly-item i svg{width:21px!important;height:21px!important}
  #placeCard.rc596-weather-detail .hourly-item strong{font-size:10px!important}
  #placeCard.rc596-weather-detail .hourly-item small{font-size:6.4px!important}

  #placeCard.rc596-weather-detail .place-actions{margin-top:7px!important}
  #placeCard.rc596-weather-detail .place-forecast-toggle{
    height:34px!important;
    border-radius:12px!important;
    font-size:8.8px!important;
    background:#f5f9fa!important;
  }

  /* Expanded content: keep it visible without feeling like a giant dashboard. */
  #placeCard.rc596-weather-detail .place-expanded-details{padding-top:8px!important}
  #placeCard.rc596-weather-detail .place-detail-section-head strong{font-size:9.8px!important}
  #placeCard.rc596-weather-detail .weather-metrics{gap:5px!important}
  #placeCard.rc596-weather-detail .weather-metrics div{
    min-height:44px!important;
    padding:7px 6px 7px 30px!important;
    border-radius:10px!important;
  }
  #placeCard.rc596-weather-detail .weather-metrics div::before{left:8px!important;width:14px!important;height:14px!important;background-size:14px 14px!important}
  #placeCard.rc596-weather-detail .weather-metrics span{font-size:6.7px!important}
  #placeCard.rc596-weather-detail .weather-metrics strong{font-size:9.3px!important}
  #placeCard.rc596-weather-detail .meteo-detail-line{gap:4px!important}
  #placeCard.rc596-weather-detail .meteo-detail-line strong{font-size:8.4px!important}
  #placeCard.rc596-weather-detail .meteo-detail-line small{font-size:6.2px!important}

  #placeCard.rc596-weather-detail.is-expanded .place-expanded-details{gap:8px 10px!important}
  #placeCard.rc596-weather-detail.is-expanded .sun-summary{min-height:84px!important}
  #placeCard.rc596-weather-detail.is-expanded .place-expanded-details .daily-item{flex-basis:54px!important;min-height:86px!important}

  #placeCard.rc596-weather-detail .radar-place-head strong{font-size:9.8px!important}
  #placeCard.rc596-weather-detail .place-forecast-grid strong{font-size:8.6px!important}
  #placeCard.rc596-weather-detail .place-insight{font-size:7.6px!important}

  /* Align model cards with the same vertical rhythm. */
  #modelPointCard.rc596-model-detail{
    left:18px!important;
    width:min(332px,calc(100vw - 92px))!important;
    border-radius:22px!important;
    box-shadow:0 18px 52px rgba(24,55,66,.11),0 2px 8px rgba(24,55,66,.04)!important;
  }
}

@media (min-width:701px) and (max-width:1100px){
  #placeCard.rc596-weather-detail,
  #modelPointCard.rc596-model-detail,
  .incident-card{top:150px!important}

  #placeCard.rc596-weather-detail{width:min(342px,calc(100vw - 66px))!important}
  #placeCard.rc596-weather-detail.is-expanded{width:min(360px,calc(100vw - 60px))!important}
  #placeCard.rc596-weather-detail .place-current{grid-template-columns:42px minmax(84px,1fr) 112px!important;gap:7px!important}
  #placeCard.rc596-weather-detail .place-current-temp{font-size:28px!important}
  #placeCard.rc596-weather-detail .place-day-ranges{grid-template-columns:37px 1px minmax(0,1fr)!important;gap:6px!important}
  #placeCard.rc596-weather-detail .place-day-range-values strong,
  #placeCard.rc596-weather-detail .place-day-range-values small{font-size:10px!important}
}