/* The existing grid cell keeps its width/height and containment.
   No rules target the map, canvas, legends, dates or page geometry. */
#hazard-notification-slot.has-weather-promo{
  box-sizing:border-box;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;gap:10px;padding:10px 2px 3px 8px;
}
#hazard-notification-slot.has-weather-promo .notification-optin-wrap{
  position:relative;inset:auto;flex:0 0 auto;min-height:0;
  width:100%;margin:0;padding:0;justify-content:flex-start;
}
#hazard-notification-slot .hazard-thavma-promo{
  display:block;flex:1 1 0;width:100%;min-width:0;min-height:0;
  max-height:100%;aspect-ratio:2/3;align-self:stretch;
  border-radius:10px;overflow:hidden;text-decoration:none;
}
#hazard-notification-slot .hazard-thavma-promo img{
  /* Remove only the supplied artwork's wide side margins. The full height,
     lettering and rounded blue frame remain inside the existing rail. */
  display:block;width:132%;height:100%;max-width:none;max-height:100%;margin-left:-16%;
  object-fit:contain;object-position:center top;
}
#hazard-notification-slot .hazard-thavma-promo:focus-visible{
  outline:2px solid #7be5ff;outline-offset:-2px;
}
/* Reserve room for the advert without crowding the phone's permission controls.
   The compact button still opens the existing Settings dialog. */
@container wg-notifications (max-height:600px){
  #hazard-notification-slot.has-weather-promo .notification-prompt,
  #hazard-notification-slot.has-weather-promo .notification-status{display:none}
  #hazard-notification-slot.has-weather-promo .hazard-notification-compact{display:flex}
  #hazard-notification-slot.has-weather-promo .notification-phone-only .hazard-notification-compact{display:none}
}
/* Phones already use a shallow bottom-left cell. Use that same space,
   side by side, rather than adding a row or making the map smaller. */
@media(max-width:760px),(max-height:500px){
  #hazard-notification-slot.has-weather-promo{
    flex-direction:row;align-items:center;gap:5px;padding:2px;
  }
  #hazard-notification-slot.has-weather-promo .notification-optin-wrap{
    flex:1 1 0;min-width:0;width:auto;
  }
  #hazard-notification-slot.has-weather-promo .hazard-thavma-promo{
    flex:0 1 40%;width:40%;height:100%;max-height:100%;
    align-self:stretch;aspect-ratio:auto;border-radius:5px;
  }
  #hazard-notification-slot.has-weather-promo .hazard-thavma-promo img{width:100%;max-width:100%;margin-left:0;object-position:center}
  #hazard-notification-slot.has-weather-promo .notification-optin-wrap.hidden + .hazard-thavma-promo{flex-basis:100%;width:100%}
  #hazard-notification-slot.has-weather-promo .notification-phone-only-message strong{font-size:10px}
  #hazard-notification-slot.has-weather-promo .hazard-notification-compact{font-size:11px;padding:4px 2px}
}

/* Slightly larger desktop legend. Only the right rail changes; the canvas
   keeps its existing row, aspect ratio and contain sizing. */
@media(min-width:901px){
  body.wg-hazard-view .hazard-map-stage,
  body:has(#page-hazard-map.active-page) .hazard-map-stage{
    grid-template-columns:minmax(118px,148px) minmax(0,1fr) minmax(176px,204px)!important;
  }
  body.wg-hazard-view .hazard-legend-box,
  body:has(#page-hazard-map.active-page) .hazard-legend-box{padding:7px!important}
  body.wg-hazard-view .hazard-side-title,
  body:has(#page-hazard-map.active-page) .hazard-side-title{font-size:.5rem!important;margin-bottom:5px!important}
  body.wg-hazard-view .hazard-risk-list>div,
  body:has(#page-hazard-map.active-page) .hazard-risk-list>div{min-height:28px!important;padding:3px 5px!important}
  body.wg-hazard-view .hazard-risk-list strong,
  body:has(#page-hazard-map.active-page) .hazard-risk-list strong{font-size:.52rem!important}
  body.wg-hazard-view .hazard-risk-list small,
  body:has(#page-hazard-map.active-page) .hazard-risk-list small{font-size:.4rem!important}
  body.wg-hazard-view .hazard-phenomena-list>div,
  body:has(#page-hazard-map.active-page) .hazard-phenomena-list>div{min-height:25px!important;padding:2px 5px!important;grid-template-columns:22px minmax(0,1fr)!important}
  body.wg-hazard-view .hazard-phenomena-list b,
  body:has(#page-hazard-map.active-page) .hazard-phenomena-list b{width:21px!important;height:21px!important}
  body.wg-hazard-view .hazard-phenomena-list span,
  body:has(#page-hazard-map.active-page) .hazard-phenomena-list span{font-size:.47rem!important;line-height:1.1!important}
}