/* Alerts hub — event first, then everything that fires from it. */

.evrow{display:flex;gap:var(--s-2);flex-wrap:wrap;margin:0 0 var(--s-5)}

.evtab{
  background:linear-gradient(180deg, #232a37, #1b212c);
  border:1px solid var(--line);border-top-color:#3a4356;
  color:var(--text-2);border-radius:var(--radius-sm);
  padding:10px 18px;font-size:var(--t-body);font-weight:600;
  cursor:pointer;font-family:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.35);
  transition:all .14s;
}
.evtab:hover{background:linear-gradient(180deg,#2b3341,#232a37);color:var(--text)}
.evtab.on{
  background:linear-gradient(180deg,var(--rose-2),var(--rose));
  border-color:var(--rose);color:#180509;
  box-shadow:0 6px 18px rgba(255,77,109,.28);
}

/* Three channels side by side: it should be obvious at a glance that an
   event can do three things, and which of them are switched on. */
.chans{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
       gap:var(--s-4);margin-bottom:var(--s-5)}
.chan{margin-bottom:0;display:flex;flex-direction:column}

.chan-head{display:flex;align-items:flex-start;justify-content:space-between;
           gap:var(--s-3);margin-bottom:var(--s-4);
           padding-bottom:var(--s-3);border-bottom:1px solid var(--line-soft)}
.chan-head h2{margin:0 0 2px;font-size:var(--t-h2)}
.chan-head .hint{margin:0;font-size:var(--t-small);color:var(--muted)}

.state{
  flex:none;font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:5px 11px;border-radius:20px;
  border:1px solid transparent;
}
.state.on{background:var(--green-dim);color:var(--green);border-color:rgba(61,220,151,.35)}
.state.off{background:rgba(139,148,167,.1);color:var(--muted);border-color:var(--line)}
.state.na{background:transparent;color:var(--faint);border-color:var(--line-soft)}

.chan-body{
  flex:1;font-size:var(--t-small);color:var(--text-2);line-height:1.6;
  min-height:42px;margin-bottom:var(--s-4);
}
.chan-body.dim{color:var(--faint)}

.chan-go{
  align-self:flex-start;font-size:var(--t-small);font-weight:600;
  color:var(--rose-2);text-decoration:none;
}
.chan-go:hover{text-decoration:underline}

.foot{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap}
.foot .hint{margin:0;font-size:var(--t-small)}