/* Extend the site's existing dark/peach tokens; no global style changes. */
.sa-block { min-width:0; padding:1rem; background:var(--panel); color:var(--text);
  border:1px solid var(--border); border-top:3px solid var(--accent);
  border-radius:var(--r-card, 10px); text-align:left; margin-bottom:1rem; }
.sa-block[hidden], .sa-item[hidden] { display:none !important; }
.sa-heading { display:flex; align-items:center; flex-wrap:wrap; gap:.6rem; }
.sa-heading h2 { font-size:1rem; margin:0; color:var(--text); }
.sa-heading a { margin-left:auto; color:var(--accent); font-size:.875rem; }
.sa-tier { font-size:.75rem; font-weight:700; border:1px solid var(--border);
  border-radius:var(--r-chip, 4px); padding:.1rem .4rem; }
.sa-intro, .sa-status { font-size:.875rem; line-height:1.45; color:var(--muted); margin:.6rem 0; }
.sa-list { display:grid; grid-template-columns:minmax(0, 1fr); gap:.65rem; }
.sa-premium .sa-list { grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.sa-item { min-width:0; padding:.8rem; border:1px solid var(--border);
  border-radius:var(--r-card, 8px); background:var(--bg, var(--panel)); overflow-wrap:anywhere; }
.sa-label { font-size:.875rem; color:var(--accent); font-weight:700; }
.sa-title { display:block; font-size:1rem; line-height:1.4; font-weight:700;
  color:var(--text); margin:.35rem 0; text-decoration:none; }
.sa-title:hover { text-decoration:underline; }
.sa-title:focus-visible, .sa-heading a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.sa-metric { font-size:1rem; font-weight:700; font-variant-numeric:tabular-nums; }
.sa-detail, .sa-caveat { font-size:.875rem; line-height:1.45; margin:.4rem 0; }
.sa-caveat, .sa-time { color:var(--muted); }
.sa-time { font-size:.75rem; line-height:1.5; display:block; }
.home-hero > .sa-block { width:100%; max-width:62rem; box-sizing:border-box; }
.home-hero .sa-list { grid-template-columns:repeat(2, minmax(0, 1fr)); }
/* events-alerts-placement-2: on /events the feed is a direct band child in column 1,
   under the cross-venue card; the band's 12px row gap spaces it, and a margin here
   would reserve 16px of empty column under it. */
.departures-band > .sa-block { margin:0; }
@media (max-width:600px) {
  .home-hero .sa-list { grid-template-columns:minmax(0, 1fr); }
  .sa-block { padding:.8rem; }
}
/* NO EMPTY BOXES - alerts twin of style.css:8911 (hot/cv), stacked from the rules
   and render reviews (.937): the band carries the mobile Alerts tab so the alerts
   card can live in it, but its heatmap/board children are untagged and the band
   chrome is unconditional - with an EMPTY feed the Alerts tab painted an 18px amber
   frame around nothing (measured 375x812, no snapshot). The feed is hidden
   client-side until rows arrive; live :has(), so the band appears the moment the
   poller unhides the card. events-alerts-placement-2: the feed is a direct band
   child now (column 1), and the column-2 stack carries data-mtab="board", so the
   Alerts tab shows the feed alone with no rule of its own for the heatmap. */
@media (max-width:768px) {
  body[data-mtab="alerts"] .departures-band:not(:has(> .sa-block:not([hidden]))) { display:none !important; }
}