/* Live global alerts strip, shared by the home page and the About page. Markup and behaviour: alerts.js */
:root{--al-live:#A32D2D;--al-surface2:#f4f6fb}
[data-theme="dark"]{--al-live:#ff6b5e;--al-surface2:#1b2438}
/* --- live global alerts strip --- */
.alerts{display:flex;align-items:center;gap:0;height:0;margin:0;opacity:0;overflow:hidden;border:1px solid var(--border);border-width:0;border-radius:14px;background:var(--surface);box-shadow:0 1px 2px var(--shadow);transition:height .45s cubic-bezier(.2,.8,.2,1),margin .45s cubic-bezier(.2,.8,.2,1),opacity .45s ease}
.alerts.is-in{height:48px;margin:0 0 32px;opacity:1;border-width:1px}
.al-label{display:flex;align-items:center;gap:8px;flex-shrink:0;height:100%;padding:0 16px 0 14px;border-right:1px solid var(--border)}
.al-dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--live,var(--al-live));flex-shrink:0}
.al-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--live,var(--al-live));opacity:0;animation:alPulse 2s ease-out infinite}
@keyframes alPulse{0%{transform:scale(.5);opacity:.7}100%{transform:scale(1.35);opacity:0}}
.al-live{font-size:10.5px;font-weight:800;letter-spacing:.09em;color:var(--live,var(--al-live))}
.al-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap}
.al-track{flex:1;min-width:0;height:100%;overflow:hidden;position:relative}
.al-run{position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;white-space:nowrap;will-change:transform}
.al-item{display:inline-flex;align-items:center;gap:8px;height:100%;padding:0 22px 0 0;color:var(--text);text-decoration:none;font-size:13px;font-weight:500;transition:color .15s}
.al-item::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ac,#6b7385);flex-shrink:0;margin-left:22px;box-shadow:0 0 0 3px color-mix(in srgb,var(--ac,#6b7385) 18%,transparent)}
.al-cat{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ac,var(--text-faint))}
[data-theme="dark"] .al-cat{color:color-mix(in srgb,var(--ac,#9aa5b8) 55%,#fff)}
.al-item:hover .al-txt{text-decoration:underline;text-underline-offset:3px}
.al-lvl{font-size:9.5px;font-weight:800;letter-spacing:.07em;padding:2px 6px;border-radius:5px;line-height:1.3}
.al-lvl.red{background:color-mix(in srgb,#c62828 14%,transparent);color:#b3261e}
.al-lvl.orange{background:color-mix(in srgb,#ef6c00 16%,transparent);color:#b34700}
[data-theme="dark"] .al-lvl.red{background:color-mix(in srgb,#ff6b5e 20%,transparent);color:#ff9a90}
[data-theme="dark"] .al-lvl.orange{background:color-mix(in srgb,#ff9f43 20%,transparent);color:#ffbe7d}
.al-ctl{display:flex;align-items:center;gap:6px;flex-shrink:0;height:100%;padding:0 12px 0 10px;border-left:1px solid var(--border)}
.al-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text-muted);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.al-btn:hover{background:var(--surface-2,var(--al-surface2));color:var(--text)}
.al-btn svg{width:13px;height:13px;display:block}
.al-link{display:inline-flex;align-items:center;gap:5px;padding:0 6px;height:28px;border-radius:8px;color:var(--text);font-size:12.5px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .15s}
.al-link:hover{background:var(--surface-2,var(--al-surface2))}
.al-link svg{width:13px;height:13px;transition:transform .15s}
.al-link:hover svg{transform:translateX(2px)}
.alerts :focus-visible{outline:2px solid #4f7dd9;outline-offset:2px;border-radius:8px}
@media(prefers-reduced-motion:reduce){.al-dot::after{animation:none}.alerts{transition:none}.al-track{overflow-x:auto}.al-run{position:static}}
@media(max-width:620px){.alerts.is-in{height:44px;margin:0 0 26px}.al-name{display:none}.al-label{padding:0 12px 0 12px}.al-link span{display:none}.al-link{padding:0 4px}.al-ctl{padding:0 8px 0 8px}.al-item{font-size:12.5px}}
@media(max-width:380px){.al-live{display:none}.al-label{padding:0 10px 0 12px}}