/* Kern Alert siren (kern-alert.js). Scoped under .ka- / #ka so the rest of the Radar is untouched.
   Flashing red while something new is assigned; steady red once the person says they're on it. */
:root{--ka-red:#c8102e;--ka-hot:#ff3b4e}
.ka-wrap{display:inline-flex;align-items:center;gap:10px;margin-left:12px;vertical-align:middle;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.ka-wrap.hidden,.ka-wrap .hidden{display:none}
/* Quiet: nothing waiting. Grey, still, there to click when you want to send one. */
.ka-wrap.quiet #kaSiren{background:#f1eee9;box-shadow:0 0 0 2px #b9b2a6}
.ka-wrap.quiet .ka-dome{fill:#9a9184}
.ka-wrap.quiet .ka-shine{stroke:#d9d3c9}
#kaSiren{position:relative;width:52px;height:52px;border-radius:50%;border:0;padding:0;background:#fff4f5;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px var(--ka-red);flex:0 0 auto}
#kaSiren:focus-visible{outline:3px solid #2a1e14;outline-offset:3px}
#kaSiren svg{display:block}
.ka-rays{opacity:0}
.ka-badge{position:absolute;top:-5px;right:-5px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--ka-red);color:#fff;font:700 12px/22px Inter,-apple-system,BlinkMacSystemFont,sans-serif;box-shadow:0 0 0 2px #fff}
.ka-label{color:#fff;background:var(--ka-red);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:700;white-space:nowrap;letter-spacing:.01em}

/* Flashing: a hard red pulse, the dome blinking bright, and the light rays strobing. */
.ka-wrap.flashing #kaSiren{animation:kaPulse 1s ease-out infinite}
.ka-wrap.flashing .ka-dome{animation:kaDome .5s steps(1) infinite}
.ka-wrap.flashing .ka-rays{animation:kaRays .5s steps(1) infinite}
.ka-wrap.flashing .ka-label{animation:kaLabel 1s steps(1) infinite}
@keyframes kaPulse{0%{box-shadow:0 0 0 3px var(--ka-red),0 0 0 0 rgba(255,59,78,.8),0 0 22px 6px rgba(255,59,78,.6)}
70%{box-shadow:0 0 0 3px var(--ka-red),0 0 0 20px rgba(255,59,78,0),0 0 36px 12px rgba(255,59,78,.35)}
100%{box-shadow:0 0 0 3px var(--ka-red),0 0 0 0 rgba(255,59,78,0),0 0 22px 6px rgba(255,59,78,.6)}}
@keyframes kaDome{0%{fill:var(--ka-hot)}50%{fill:#7a0a1c}}
@keyframes kaRays{0%{opacity:1}50%{opacity:0}}
@keyframes kaLabel{0%{background:var(--ka-red)}50%{background:#7a0a1c}}

/* The list in the drawer. */
.ka-item{border:1px solid var(--line,#e6e1d8);border-radius:12px;padding:12px 14px;margin:0 0 10px;background:var(--card,#fff)}
.ka-item.new{border:2px solid var(--ka-red)}
.ka-item-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ka-new{background:var(--ka-red);color:#fff;border-radius:999px;padding:2px 9px;font-size:11px;font-weight:700}
.ka-what{font-size:13px;color:var(--muted,#6b6459);margin-top:3px}
.ka-note{font-size:13px;margin-top:6px;padding:6px 9px;border-radius:8px;background:color-mix(in srgb,var(--ka-red) 7%,transparent)}

.ka-tabs{display:flex;gap:6px;margin:0 0 12px;border-bottom:1px solid var(--line,#e6e1d8)}
.ka-tabs button{border:0;background:none;padding:8px 10px;font:600 14px Inter,-apple-system,sans-serif;color:var(--muted,#6b6459);border-bottom:3px solid transparent;cursor:pointer}
.ka-tabs button[aria-selected="true"]{color:var(--ink,#1a1a1a);border-bottom-color:var(--ka-red)}
.ka-form{display:grid;gap:6px;max-width:520px}
.ka-form select,.ka-form textarea,.ka-form input{font:15px Inter,-apple-system,sans-serif;padding:9px 10px;border:1px solid var(--line,#d9d3c9);border-radius:8px;background:var(--card,#fff);color:inherit;width:100%;box-sizing:border-box}
.ka-form button{justify-self:start;margin-top:6px;min-height:44px}
.ka-flabel{font-size:13px;font-weight:600;margin-top:6px}
.ka-h{font:700 14px Inter,-apple-system,sans-serif;margin:18px 0 6px}
.ka-sent{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--line,#e6e1d8);font-size:13px}
.ka-sent span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:700px){.ka-label{display:none}.ka-wrap{margin-left:8px}}
@media (prefers-reduced-motion:reduce){
  .ka-wrap.flashing #kaSiren,.ka-wrap.flashing .ka-dome,.ka-wrap.flashing .ka-rays,.ka-wrap.flashing .ka-label{animation:none}
  .ka-wrap.flashing #kaSiren{box-shadow:0 0 0 5px var(--ka-hot)}
  .ka-wrap.flashing .ka-rays{opacity:1}
}