/* Status Pill Row — dedicated flex row carved out above the action bar
   for NPS / volcano / AQI / surf / weather pills. Scoped to .hg-status-pills.
   See _includes/status-pill-row.html and status-pill-row-v1.js for how this
   gets injected. Sized to match existing pill visuals (font-size 13/11px). */

.hg-status-pills{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  margin:8px 0 10px;
}

/* When the helper places a pill inside this row, the pill's own inline-block
   wrapper margins become excess — flex gap handles spacing. Kill the wrappers'
   legacy margins only when they land here. */
.hg-status-pills > .hg-nps-wrap,
.hg-status-pills > .hg-vstat-wrap,
.hg-status-pills > .hg-vog-wrap,
.hg-status-pills > .hg-surf-wrap,
.hg-status-pills > .hg-weather-pill-wrap,
.hg-status-pills > .hg-fees-pill-wrap{
  margin:0;
  display:inline-flex;
  align-items:center;
}

@media (max-width:600px){
  .hg-status-pills{gap:6px;margin:6px 0 8px}
}

@media print{
  .hg-status-pills{display:none}
}