/* Radar Česka V5.7.12 · Nav Alignment + Real Mobile Gap
   Small visual correction over V5.7.11:
   - desktop weather deck returns to its original left anchor;
   - icon + title are centered as one group inside each equal-width desktop cell;
   - mobile primary cards use a real 4px transparent gap and are slightly narrower,
     so five controls clearly read as five separate modern buttons.
   - sticky live-follow V5.5.3 is untouched.
*/

/* ---------- DESKTOP: left deck, centered content in every cell ---------- */
@media (min-width:701px){
  #weatherViewNav.weather-view-nav.weather-navigation-v120{
    margin-left:0!important;
    margin-right:0!important;
  }

  #weatherViewNav.weather-view-nav.weather-navigation-v120 .weather-view-tab{
    /* V5.7.10 keeps all eight cells equal. Center the icon+title pair inside it. */
    grid-template-columns:18px max-content!important;
    justify-content:center!important;
    justify-items:center!important;
    align-items:center!important;
    text-align:center!important;
  }
  #weatherViewNav.weather-view-nav.weather-navigation-v120 .weather-tab-symbol{
    justify-self:center!important;
  }
  #weatherViewNav.weather-view-nav.weather-navigation-v120 .weather-tab-copy{
    width:auto!important;
    min-width:0!important;
    justify-self:center!important;
    text-align:center!important;
  }
  #weatherViewNav.weather-view-nav.weather-navigation-v120 .weather-tab-copy b{
    display:block!important;
    width:auto!important;
    text-align:center!important;
    white-space:nowrap!important;
  }
}

/* ---------- MOBILE: visible separation, not a white strip ---------- */
@media (max-width:700px){
  .layer-chips{
    max-width:min(360px,calc(100vw - 12px))!important;
    gap:4px!important;
    row-gap:4px!important;
    column-gap:4px!important;
    padding-left:2px!important;
    padding-right:2px!important;
    background:transparent!important;
    justify-content:flex-start!important;
  }

  .layer-chip,
  .layer-chip:nth-of-type(n+4),
  .layer-chip:nth-of-type(n+6),
  .rc-mobile-alert-chip{
    flex:0 0 clamp(62px,16.8vw,67px)!important;
    width:clamp(62px,16.8vw,67px)!important;
    min-width:clamp(62px,16.8vw,67px)!important;
    max-width:67px!important;
    margin:0!important;
    border-radius:11px!important;
    background-clip:padding-box!important;
  }
}

@media (max-width:370px){
  .layer-chips{
    gap:3px!important;
    column-gap:3px!important;
  }
  .layer-chip,
  .layer-chip:nth-of-type(n+4),
  .layer-chip:nth-of-type(n+6),
  .rc-mobile-alert-chip{
    flex-basis:61px!important;
    width:61px!important;
    min-width:61px!important;
    max-width:61px!important;
  }
}