/* ALERTS — the red/orange bar under the header, the Alert screen (whose
   header takes the alert color), and the desktop Home badge. */

.alert-icon {
  flex: 0 0 auto;
  width: var(--alert-icon-size);
  height: var(--alert-icon-size);
  fill: currentColor;
}

/* ---------- Bar under the header ---------- */

.alert-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-1) var(--space-5);
  border: 0;
  border-bottom: var(--rule) solid var(--alert-warning-edge);
  color: var(--alert-text);
  font-size: var(--alert-bar-font);
  font-weight: var(--fw-heavy);
  text-align: left;
  text-shadow: var(--title-text-shadow);
}

.alert-bar--warning {
  background: var(--alert-warning-face);
}

.alert-bar--watch {
  background: var(--alert-watch-face);
  border-bottom-color: var(--alert-watch-edge);
}

.alert-bar-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alert-bar-more {
  flex: 0 0 auto;
  padding: var(--space-1) var(--space-3);
  border: var(--rule) solid var(--alert-more-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
}

.alert-bar:focus-visible {
  outline-color: var(--alert-text);
  outline-offset: calc(-1 * var(--focus-width) - var(--rule));
}

/* ---------- Header color while the Alert screen is open ---------- */

.frame-header--warning {
  background: var(--alert-warning-strip);
  border-bottom-color: var(--alert-warning-edge);
}

.frame-header--warning .frame-title-block {
  background: var(--alert-warning-face);
}

.frame-header--watch {
  background: var(--alert-watch-strip);
  border-bottom-color: var(--alert-watch-edge);
}

.frame-header--watch .frame-title-block {
  background: var(--alert-watch-face);
}

/* ---------- Alert list ---------- */

.alert-list {
  display: grid;
  gap: var(--space-3);
  max-width: var(--alert-list-width);
  list-style: none;
}

.alert-tile {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-2) var(--space-4);
  min-height: var(--alert-tile-height);
  padding: var(--space-3) var(--space-5);
  text-align: left;
  white-space: normal;
}

.alert-tile-event {
  font-size: var(--fs-lg);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-snug);
}

.alert-tile-until {
  margin-left: auto;
  color: var(--frame-btn-text-muted);
  font-size: var(--fs-sm);
}

.alert-tile:hover .alert-tile-until {
  color: var(--frame-btn-text-active);
}

/* severity badge */
.alert-sev {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--tracking-caps);
  text-shadow: none;
  text-transform: uppercase;
}

.alert-sev--warning { background: var(--sev-warning-bg); color: var(--sev-warning-text); }
.alert-sev--watch { background: var(--sev-watch-bg); color: var(--sev-watch-text); }
.alert-sev--advisory { background: var(--sev-advisory-bg); color: var(--sev-advisory-text); }
.alert-sev--statement { background: var(--sev-statement-bg); color: var(--sev-statement-text); }
.alert-sev--unknown { background: var(--sev-unknown-bg); color: var(--sev-unknown-text); }

/* ---------- Alert detail (solid panel, so nothing shows through) ---------- */

.alert-detail {
  max-width: var(--alert-detail-width);
}

.alert-detail-event {
  margin-bottom: var(--space-3);
  font-size: var(--fs-xl);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}

.alert-detail-event:focus {
  outline: none;
}

.alert-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-2);
  color: var(--alert-meta-text);
  font-weight: var(--fw-bold);
}

.alert-detail-office {
  margin-bottom: var(--space-4);
  color: var(--panel-text-soft);
  font-weight: var(--fw-bold);
}

.alert-detail-desc,
.alert-detail-instruction {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.alert-detail-instruction {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--alert-instruction-bg);
  border: var(--hairline) solid var(--alert-instruction-border);
  border-left: var(--alert-instruction-accent-width) solid var(--alert-instruction-accent);
  border-radius: var(--radius-md);
  font-weight: var(--fw-bold);
}

/* ---------- Desktop Home badge ---------- */

.home-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: var(--space-1) var(--space-4);
  border: var(--rule) solid var(--alert-more-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--badge-shadow);
  color: var(--alert-text);
  font-size: var(--fs-base);
  font-weight: var(--fw-heavy);
  text-shadow: var(--title-text-shadow);
}

.home-badge--warning {
  background: var(--alert-warning-face);
}

.home-badge--watch {
  background: var(--alert-watch-face);
}