/* ============================================================
   Fire Watch - Alert stack + banners (Stream C)
   Severity-colored, dismissible banners rendered into #alert-stack.

   Tokens come from css/base.css (:root) - same names as index.html.
   Each rule reads them with an inline var() fallback so this file
   still renders if base.css is absent (dev harness). We never
   REDEFINE the tokens, so Stream B's theme always wins.
   ============================================================ */

#alert-stack{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
  max-width:760px;
  margin:0 auto;
  padding:0 16px;
  font-family:"Barlow",system-ui,sans-serif;
}
#alert-stack:empty{padding:0}

/* mute toggle row (only shown once banners exist; alerts.js injects it) */
.alert-controls{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted,#9b9082);
  padding:2px 2px 0;
}
.alert-controls .count{color:var(--ember,#ff8a1f)}
/* collapsible header toggle */
.alert-toggle{
  appearance:none;-webkit-appearance:none;cursor:pointer;background:transparent;border:none;
  display:inline-flex;align-items:center;gap:9px;color:var(--muted,#9b9082);font:inherit;
  letter-spacing:.16em;text-transform:uppercase;padding:5px 2px;
}
.alert-toggle:hover{color:var(--ink,#f4ece0)}
.alert-toggle .chev{color:var(--ember,#ff8a1f);font-size:11px;width:11px;display:inline-block;transition:transform .15s}
/* collapsed: show only the header row, hide the banners */
#alert-stack.collapsed .fw-alert{display:none}
#alert-stack.collapsed{padding-bottom:6px}
.alert-mute{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;
  background:transparent;border:1px solid var(--line2,rgba(255,236,210,.18));border-radius:999px;
  color:var(--muted,#9b9082);padding:5px 11px;font:inherit;letter-spacing:.14em;text-transform:uppercase;
  transition:border-color .15s,color .15s;
}
.alert-mute:hover{border-color:var(--ember,#ff8a1f);color:var(--ink,#f4ece0)}
.alert-mute .led{width:7px;height:7px;border-radius:50%;background:var(--ok,#86d24a);box-shadow:0 0 7px 1px rgba(134,210,74,.6)}
.alert-mute[data-muted="true"] .led{background:var(--faint,#6c6358);box-shadow:none}

/* ---------- banner ---------- */
.fw-alert{
  position:relative;
  display:flex;align-items:flex-start;gap:14px;
  border-radius:14px;
  padding:14px 44px 14px 16px;
  background:linear-gradient(165deg,var(--panel2,#1d1924),var(--panel,#17141c));
  border:1px solid var(--line2,rgba(255,236,210,.18));
  box-shadow:0 18px 44px -28px rgba(0,0,0,.9);
  overflow:hidden;
  animation:fw-alert-in .42s cubic-bezier(.2,.7,.2,1) both;
}
.fw-alert.leaving{animation:fw-alert-out .28s ease forwards}
@keyframes fw-alert-in{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fw-alert-out{to{opacity:0;transform:translateX(16px);height:0;margin:0;padding-top:0;padding-bottom:0;border-width:0}}

/* left accent bar by severity */
.fw-alert::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--ember,#ff8a1f)}
.fw-alert.sev-critical::before{background:var(--crit,#ff3526)}
.fw-alert.sev-high::before{background:var(--high,#ff7a18)}
.fw-alert.sev-elevated::before{background:var(--elev,#ffc02e)}
.fw-alert.sev-info::before{background:var(--teal,#39c6b0)}

/* icon disc */
.fw-alert .ico{
  flex:0 0 auto;width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;
  font-family:"Anton",sans-serif;font-size:20px;line-height:1;
  background:rgba(255,255,255,.05);border:1px solid var(--line,rgba(255,236,210,.10));
  color:var(--ember,#ff8a1f);
}
.fw-alert.sev-critical .ico{color:var(--crit,#ff3526);background:rgba(255,53,38,.12);border-color:rgba(255,53,38,.3)}
.fw-alert.sev-high .ico{color:var(--high,#ff7a18);background:rgba(255,122,24,.12);border-color:rgba(255,122,24,.3)}
.fw-alert.sev-elevated .ico{color:var(--elev,#ffc02e);background:rgba(255,192,46,.12);border-color:rgba(255,192,46,.3)}
.fw-alert.sev-info .ico{color:var(--teal,#39c6b0);background:rgba(57,198,176,.12);border-color:rgba(57,198,176,.3)}

.fw-alert .body{min-width:0;flex:1}
.fw-alert .title{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;font-size:16.5px;line-height:1.1;color:var(--ink,#f4ece0);margin:1px 0 3px;
}
.fw-alert .tag{
  font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  padding:3px 7px;border-radius:999px;color:#1a1208;font-weight:600;
}
.fw-alert.sev-critical .tag{background:var(--crit,#ff3526)}
.fw-alert.sev-high .tag{background:var(--high,#ff7a18)}
.fw-alert.sev-elevated .tag{background:var(--elev,#ffc02e)}
.fw-alert.sev-info .tag{background:var(--teal,#39c6b0)}
.fw-alert .msg{
  font-size:13.5px;color:#cdc3b4;line-height:1.45;margin:0;
}
.fw-alert .meta{
  margin-top:6px;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;
  color:var(--faint,#6c6358);text-transform:uppercase;
}

/* dismiss */
.fw-alert .dismiss{
  position:absolute;top:8px;right:8px;
  width:28px;height:28px;border-radius:8px;cursor:pointer;
  display:grid;place-items:center;
  background:transparent;border:1px solid transparent;color:var(--muted,#9b9082);
  font-family:"Barlow",sans-serif;font-size:18px;line-height:1;
  transition:color .15s,border-color .15s,background .15s;
}
.fw-alert .dismiss:hover{color:var(--ink,#f4ece0);border-color:var(--line2,rgba(255,236,210,.18));background:rgba(255,255,255,.04)}

@media (prefers-reduced-motion:reduce){
  .fw-alert,.fw-alert.leaving{animation:none!important}
  .fw-alert.leaving{display:none}
}