/* Radar Česka V5.9.11 · Compact Header + Flat Rain Insight (derived from V5.7.9)
   Goals:
   - return 20–30 % vertical space to the map on desktop and mobile
   - keep primary mode navigation readable, but stop it looking like a card wall
   - make Radar and model precipitation point cards answer the same user question:
     what is happening here, at what exact time, and is rain strengthening/weakening/ending?
*/

/* ---------- DESKTOP / TABLET HEADER ---------- */
@media (min-width:701px){
  .top-shell{top:max(10px,env(safe-area-inset-top))!important;left:16px!important;right:16px!important}
  .brand-row{grid-template-columns:max-content minmax(210px,420px) 1fr max-content!important;gap:10px!important}
  .brand{gap:8px!important}
  .brand-mark{width:32px!important;height:32px!important}
  .brand-text{font-size:17px!important;letter-spacing:-.035em!important}
  .brand-domain{font-size:9px!important}
  .search-wrap{height:34px!important;max-width:420px!important;border-radius:11px!important;box-shadow:0 5px 16px rgba(34,62,72,.08)!important}
  .search-icon{width:15px!important;height:15px!important;margin-left:11px!important}
  .search-input{font-size:11.5px!important;padding:0 11px 0 8px!important}
  .search-suggestions{top:40px!important;border-radius:12px!important}
  .top-menu{width:34px!important;height:34px!important;border-radius:11px!important}

  /* Main product switcher: compact pills rather than a second hero row. */
  .layer-chips{margin-top:5px!important;gap:5px!important;max-width:min(700px,calc(100vw - 32px))!important;padding:0!important}
  .layer-chip{height:29px!important;padding:0 10px!important;border-radius:10px!important;font-size:10.2px!important;gap:6px!important;box-shadow:0 4px 13px rgba(34,62,72,.065)!important}
  .layer-chip .chip-icon{font-size:11px!important}

  /* Weather product switcher: ~25 % shorter while keeping title + descriptor. */
  #weatherViewNav,#trafficViewNav,#trainViewNav{margin-top:5px!important;border-radius:12px!important}
  .weather-view-nav.weather-navigation-v120{width:min(850px,calc(100vw - 32px))!important;min-height:36px!important;height:36px!important;padding:2px!important;gap:1px!important}
  .weather-view-nav.weather-navigation-v120 .weather-view-tab{flex:1 0 96px!important;min-width:90px!important;max-width:112px!important;height:32px!important;padding:3px 6px!important;border-radius:8px!important;grid-template-columns:20px minmax(0,1fr)!important;gap:5px!important}
  .weather-view-nav.weather-navigation-v120 .weather-tab-symbol{width:20px!important;height:20px!important;border-radius:7px!important;font-size:9px!important}
  .weather-view-nav.weather-navigation-v120 .weather-tab-copy{gap:1px!important}
  .weather-view-nav.weather-navigation-v120 .weather-tab-copy b{font-size:9px!important;line-height:1!important}
  .weather-view-nav.weather-navigation-v120 .weather-tab-copy small{display:none!important}
  .traffic-view-nav.traffic-legend-bar,.train-view-nav.train-legend-bar{min-height:36px!important;height:36px!important;padding:2px!important}
  .traffic-view-nav.traffic-legend-bar .traffic-tab,.train-view-nav.train-legend-bar .train-tab{height:32px!important;border-radius:8px!important}
}

/* ---------- MOBILE HEADER ---------- */
@media (max-width:700px){
  .top-shell{top:max(5px,env(safe-area-inset-top))!important;left:6px!important;right:6px!important}
  .brand-row{grid-template-rows:29px!important;gap:5px!important}
  .brand{height:29px!important;gap:4px!important}
  .brand-mark{width:24px!important;height:24px!important}
  .brand-text{font-size:12.5px!important}
  .brand-domain{font-size:6.8px!important}
  .search-wrap{height:28px!important;min-width:108px!important;max-width:174px!important;border-radius:9px!important;box-shadow:0 4px 12px rgba(34,62,72,.065)!important}
  .search-icon{width:12.5px!important;height:12.5px!important;margin-left:8px!important}
  .search-input{font-size:9.5px!important;padding:0 7px 0 5px!important}
  .search-suggestions{top:34px!important}
  .top-menu{width:29px!important;height:29px!important;border-radius:9px!important}

  /* The screenshot showed 47 px cards. 37 px is enough for icon + label and
     gives roughly a quarter of that row back to the map. */
  .layer-chips{margin-top:4px!important;gap:3px!important}
  .layer-chip,
  .layer-chip:nth-of-type(n+4),
  .layer-chip:nth-of-type(n+6),
  .rc-mobile-alert-chip{
    height:37px!important;
    padding:2px 1px!important;
    gap:1px!important;
    border-radius:10px!important;
    font-size:7.3px!important;
    line-height:1!important;
    box-shadow:0 3px 10px rgba(34,62,72,.055)!important;
  }
  .layer-chip .chip-icon{width:15px!important;height:15px!important;min-width:15px!important}
}

@media (max-width:370px){
  .layer-chip,.rc-mobile-alert-chip{height:35px!important;font-size:6.9px!important}
  .layer-chip .chip-icon{width:14px!important;height:14px!important;min-width:14px!important}
}

/* ---------- SHARED PROFESSIONAL RAIN LANGUAGE ---------- */
.rc579-rain-strip{margin-top:7px;padding:7px 0 0;border:0;border-top:1px solid rgba(26,99,127,.075);border-radius:0;background:transparent}
.rc579-rain-strip-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.rc579-rain-strip-head span{display:grid;gap:2px;min-width:0}
.rc579-rain-strip-head small{font-size:6.8px;font-weight:860;letter-spacing:.08em;text-transform:uppercase;color:#7a939b}
.rc579-rain-strip-head strong{font-size:10.5px;line-height:1.1;color:#254953;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc579-rain-badge{flex:0 0 auto;padding:4px 7px;border-radius:999px;background:#eaf7f4;color:#137966;font-size:6.8px;font-weight:900;text-transform:lowercase}
.rc579-rain-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
.rc579-rain-cell{min-width:0;padding:5px 4px;border:0;border-radius:7px;background:transparent}
.rc579-rain-cell.is-now{background:rgba(237,249,246,.78)}
.rc579-rain-cell small,.rc579-rain-cell strong,.rc579-rain-cell em{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc579-rain-cell small{font-size:6.8px;font-weight:820;color:#718a92;font-variant-numeric:tabular-nums}
.rc579-rain-cell strong{margin-top:4px;font-size:8.7px;line-height:1.12;color:#294b55}
.rc579-rain-cell em{margin-top:3px;font-style:normal;font-size:6.7px;line-height:1.12;color:#6e8790}
.rc579-rain-foot{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-top:5px;padding-top:5px;border-top:1px solid rgba(25,61,72,.045)}
.rc579-rain-foot p{margin:0;max-width:78%;font-size:7.8px;line-height:1.38;color:#57747c}
.rc579-rain-foot small{font-size:6.5px;line-height:1.3;color:#8a9da3;text-align:right;font-variant-numeric:tabular-nums}

/* Radar card: the short-term timeline is now the primary evidence row. */
@media (min-width:701px){
  .smart-now-card .rc579-rain-strip{margin-left:0;margin-right:0}
  .smart-now-card[data-rc579-rain="1"] .smart-now-signals{margin-top:8px;opacity:.82}
  .smart-now-card[data-rc579-rain="1"] .smart-now-signals>span{padding:6px 8px}
  .smart-now-card[data-rc579-rain="1"] .smart-now-signals small{font-size:6.2px}
  .smart-now-card[data-rc579-rain="1"] .smart-now-signals b{font-size:7.8px}

  /* Model precipitation gets the same hierarchy as radar: user meaning first,
     then exact clock times. The old generic trend row would duplicate it. */
  .model-point-card[data-layer="precip"] .model-point-primary{padding-bottom:9px}
  .model-point-card[data-layer="precip"] .model-point-primary>span{font-size:7px;letter-spacing:.075em;font-weight:900;text-transform:uppercase}
  .model-point-card[data-layer="precip"] .model-point-primary>strong{font-size:26px!important;color:#2367a5}
  .model-point-card[data-layer="precip"] .model-point-primary>small{font-size:10px!important;font-weight:820;color:#294e59}
  .model-point-card[data-layer="precip"] .rc579-rain-strip{margin:0 12px 8px}
  .model-point-card[data-layer="precip"] .model-point-trend{display:none!important}
  .model-point-card[data-layer="precip"] .model-point-extras{margin-top:4px}
  .model-point-card[data-layer="precip"] .model-point-note{padding-top:7px}
}