/**
 * Rapid alert page status strip (views/partials/alert-status-strip.php).
 *
 * One quiet row of labelled facts under the title and date line, closed by
 * the article header's own bottom rule. Colours come from the active theme's
 * variables, so dark and light themes both work; the only colour of its own
 * is the severity scale on the Level cell. Linked by alert-single.php
 * through $pageCss, which head.php prints after the theme and site
 * stylesheets.
 *
 * Wide screens: one row, thin dividers, long values wrap inside their cell.
 * Tablets (900px and under): three columns. Phones (600px and under): two.
 */

.alert-strip {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  margin: var(--space-3, 0.75rem) 0 var(--space-2, 0.5rem);
  padding: 0;
}

/* Cells shrink no narrower than their longest word (the flex default
   min-width), so a long value wraps between words, never inside one. */
.alert-strip__cell {
  flex: 0 1 auto;
  padding: 0 var(--space-4, 1rem);
  border-left: 1px solid var(--border-subtle, rgba(127, 127, 127, 0.2));
}

.alert-strip__cell:first-child {
  padding-left: 0;
  border-left: 0;
}

/* typography-polish.css gives every dt and dd page-level margins and colours. */
.alert-strip .alert-strip__label,
.alert-strip .alert-strip__value,
.alert-strip .alert-strip__note {
  margin: 0;
}

.alert-strip .alert-strip__label {
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, inherit);
}

.alert-strip .alert-strip__value {
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-primary, inherit);
  overflow-wrap: break-word;
}

.alert-strip .alert-strip__note {
  margin-top: 2px;
  font-size: var(--text-xs, 0.75rem);
  line-height: 1.4;
  color: var(--text-muted, inherit);
  overflow-wrap: break-word;
}

/* Links read as text with a quiet underline, not as accent-coloured prose
   links: two classes deep to match typography-polish.css's
   `.prose a:not([class])` (0,2,1), which this file follows in load order.
   min-height undoes reset.css's 44px touch height for inline links. */
.alert-strip .alert-strip__value a,
.alert-strip .alert-strip__note a {
  min-height: 0;
  color: inherit;
  border-bottom: 0;
  text-decoration: underline;
  text-decoration-color: var(--border-medium, currentColor);
  text-underline-offset: 2px;
}

.alert-strip .alert-strip__value a:hover,
.alert-strip .alert-strip__value a:focus-visible,
.alert-strip .alert-strip__note a:hover,
.alert-strip .alert-strip__note a:focus-visible {
  color: var(--accent-primary, inherit);
  text-decoration-color: currentColor;
}

/* Level: the strip's only colour, on the severity scale the rapid cards use
   (rapid-chip--sev-* in the site's rapid-alerts.css). */
.alert-strip__cell--sev-1,
.alert-strip__cell--sev-2 { --alert-strip-level: #fde047; }
.alert-strip__cell--sev-3 { --alert-strip-level: #fb923c; }
.alert-strip__cell--sev-4,
.alert-strip__cell--sev-5 { --alert-strip-level: #f87171; }

.alert-strip .alert-strip__cell--level .alert-strip__value {
  color: var(--alert-strip-level, var(--text-primary, inherit));
  font-weight: 600;
}

/* Narrower screens: a grid with no dividers and no sideways scrolling. */
@media (max-width: 900px) {
  .alert-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3, 0.75rem) var(--space-4, 1rem);
  }

  .alert-strip__cell {
    min-width: 0;
    padding: 0;
    border-left: 0;
  }
}

@media (max-width: 600px) {
  .alert-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}