.status-bar {
  width: 100%;
  background: var(--color-status-bar-bg);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-sm);
}

.status-bar__inner {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: 0.8125rem;
}
@media (min-width: 768px) {
  .status-bar__inner { flex-direction: row; }
}

.status-pill {
  min-height: 2.75rem; /* ~44px comfortable touch target, not just the 24px WCAG minimum — this pill is a link */
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-emerald-tint-text);
  transition: box-shadow 0.15s ease;
}
.status-pill--green { color: var(--color-live-green); border-color: #a7d8b8; }
.status-pill--red { color: var(--color-primary); border-color: #f0b3b3; }

/* Both pills now link to the location section — a visible hover/focus
   affordance so that reads as clickable, not just decorative status text. */
.status-pill:hover,
.status-pill:focus-visible {
  box-shadow: var(--shadow-md);
}
.status-pill [data-testid="status-banner-text"] {
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.15s ease;
}
.status-pill:hover [data-testid="status-banner-text"],
.status-pill:focus-visible [data-testid="status-banner-text"] {
  text-decoration-color: currentColor;
}

.status-pill__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background: currentColor;
}
/* Gated behind prefers-reduced-motion, same as html's scroll-behavior in
   reset.css — people who've asked their OS for less motion get a solid
   dot instead of an infinite pulse. */
@media (prefers-reduced-motion: no-preference) {
  .status-pill__dot {
    animation: status-pulse 2s ease-in-out infinite;
  }
}
@keyframes status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.vacation-pill {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 2.75rem; /* ~44px comfortable touch target, not just the 24px WCAG minimum — this pill is a link */
  background: var(--color-red-tint-bg);
  border: 1px solid var(--color-red-tint-border);
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  color: var(--color-charcoal);
  transition: box-shadow 0.15s ease;
}
.vacation-pill .icon { color: var(--color-primary); }
/* --color-primary-hover, not --color-primary: measured ~4.2:1 here,
   under WCAG AA's 4.5:1 minimum for this text size. */
.vacation-pill strong { color: var(--color-primary-hover); }
.vacation-pill:hover,
.vacation-pill:focus-visible {
  box-shadow: var(--shadow-sm);
}
.vacation-pill:hover > span,
.vacation-pill:focus-visible > span {
  text-decoration: underline;
}