/* ────────────────────────────────────────────────────────────────────────────
   #sec-alerts — the Alerts & Overlays destination (dashboard redesign R4b).

   ITS OWN FILE, not a block in sections.css, for the same reason
   sec-moderation.css is: this page needs a table, a rail modal, a dense row list
   and a card grid, and every one of those shapes is already defined in
   sections.css scoped to ANOTHER page. Widening those selectors would silently
   couple three destinations. Every selector below is prefixed #sec-alerts and
   uses global design tokens only (DESIGN-GUIDELINES §3) — no page-local palette.
   ──────────────────────────────────────────────────────────────────────────── */

/* ── the page header's action slot ─────────────────────────────────────────── */
#sec-alerts .page-header { display: flex; align-items: flex-start; gap: var(--space-3); }
#sec-alerts .page-header .ph-actions { margin-left: auto; }

/* ── the ONE test bar (On stream) ──────────────────────────────────────────── */
/* No margin-bottom: the parent `.sec-body` gap owns the space under the bar
   (SPACING PRIMITIVES, sections.css). */
#sec-alerts .ao-testbar {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r); padding: var(--space-3);
}
#sec-alerts .ao-testbar-lbl {
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 700;
}
#sec-alerts .ao-testbar-note { font-size: 11.5px; margin-left: auto; }
#sec-alerts .ao-testbar-status { font-size: 11.5px; }

/* ── the inventory table ───────────────────────────────────────────────────── */
#sec-alerts .ao-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
#sec-alerts .ao-table th {
  color: var(--text-dim); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  text-align: left; padding: 7px 9px; border-bottom: 1px solid var(--border); font-weight: 600;
}
#sec-alerts .ao-table td {
  padding: 9px; border-bottom: 1px solid var(--border); color: var(--text-dim); vertical-align: middle;
}
#sec-alerts .ao-table tbody tr:last-child td { border-bottom: 0; }
#sec-alerts .ao-td-name { color: var(--text); font-weight: 600; min-width: 11rem; }
#sec-alerts .ao-row-sub { display: block; font-weight: 400; font-size: 11px; color: var(--text-dim); }
#sec-alerts .ao-tr-off .ao-td-name { opacity: .6; }
#sec-alerts .ao-td-type, #sec-alerts .ao-td-audio { white-space: nowrap; }
#sec-alerts .ao-td-actions { text-align: right; white-space: nowrap; }
#sec-alerts .ao-td-actions > .btn + .btn { margin-left: var(--space-1); }
#sec-alerts .ao-th-actions { width: 15rem; }
#sec-alerts .ao-tr-lane > td { padding-top: 0; }
#sec-alerts .ao-tr-lane .sec-copyrow { margin-bottom: var(--space-2); }

/* ── placement pills (shared by the inventory table AND the widget rows) ────── */
#sec-alerts .pill {
  display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; max-width: 16rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#sec-alerts .pill .dotk { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
#sec-alerts .pill--on { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
#sec-alerts .pill--off { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
#sec-alerts .pill--na { background: var(--surface-2); color: var(--text-dim); }

/* ── the Alerts tab: the Customize panel + the type rows ───────────────────── */
/* A .well, so it is already a gap column; this only widens the gap to the card
   rhythm because its children are whole sections (preset picker, style editor,
   two setting rows), not lines. The old `margin-bottom` here was ID-scoped
   (1,1,0) so it outranked the shared guard — removed at the source. */
#sec-alerts .ao-globals { gap: var(--space-4); }
#sec-alerts .ao-arow { display: flex; align-items: center; gap: var(--space-3); }
#sec-alerts .ao-arow-name { color: var(--text); font-weight: 600; min-width: 9rem; }
#sec-alerts .ao-arow-note { font-size: 11.5px; flex: 1 1 auto; min-width: 0; }
#sec-alerts .ao-arow .sec-item-actions { margin-left: auto; white-space: nowrap; }
#sec-alerts .ao-arow-off .ao-arow-name, #sec-alerts .ao-arow-off .ao-arow-note { opacity: .55; }

/* ── the rail modal (alerts) ───────────────────────────────────────────────── */
#sec-alerts .ao-rail-box { width: min(760px, 100%); }
#sec-alerts .ao-rail { display: flex; gap: var(--space-4); align-items: flex-start; }
#sec-alerts .ao-rail-nav {
  display: flex; flex-direction: column; gap: 2px; width: 9.5rem; flex: none;
}
#sec-alerts .ao-rail-tab {
  font: inherit; font-size: 12.5px; text-align: left; padding: 7px 10px; border: 0;
  border-radius: var(--r-sm); background: transparent; color: var(--text-dim); cursor: pointer;
}
#sec-alerts .ao-rail-tab.on { background: var(--surface-2); color: var(--text); }
#sec-alerts .ao-rail-tab:focus-visible { outline: 2px solid var(--border-accent); outline-offset: 2px; }
#sec-alerts .ao-rail-panes { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
#sec-alerts .ao-rail-pane { display: flex; flex-direction: column; gap: var(--space-3); }
@media (max-width: 720px) {
  #sec-alerts .ao-rail { flex-direction: column; }
  #sec-alerts .ao-rail-nav { width: 100%; flex-direction: row; flex-wrap: wrap; }
}

/* ── the Widgets tab: dense rows + the settings modal ──────────────────────── */
#sec-alerts .ao-wrow { display: flex; flex-direction: column; gap: var(--space-2); }
#sec-alerts .ao-wrow-main { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
#sec-alerts .ao-wrow-name { color: var(--text); font-weight: 600; min-width: 8rem; }
#sec-alerts .ao-wrow-place { flex: 1 1 auto; min-width: 0; }
#sec-alerts .ao-wrow-main .sec-item-actions { margin-left: auto; white-space: nowrap; }
#sec-alerts .ao-wmodal-box { width: min(720px, 100%); }

/* ── the Media tab ─────────────────────────────────────────────────────────── */
/* (no margin: the parent .sec-body gap owns the space under the filter chips) */
#sec-alerts .ao-media-chips .btn.is-active { border-color: var(--border-accent); color: var(--text); }
#sec-alerts .ao-media-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3);
}
#sec-alerts .ao-media {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r);
  padding: var(--space-3); font-size: 11.5px; min-width: 0;
}
#sec-alerts .ao-media-thumb {
  height: 64px; border-radius: var(--r-sm); background: var(--surface);
  display: grid; place-items: center; color: var(--text-dim); font-size: 20px;
  margin-bottom: var(--space-2); overflow: hidden;
}
#sec-alerts .ao-media-img { width: 100%; height: 100%; object-fit: cover; }
#sec-alerts .ao-media-nm { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sec-alerts .ao-media-use { font-size: 10.5px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sec-alerts .ao-media-actions { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }
#sec-alerts .ao-media-audio { max-width: 100%; height: 30px; }