/* EOC Activation Status widget card. Ported from the EM Hub snippet (EM-Hub-dark2.0.html). */
.em-eoc {
    --eoc: #8d949b;
    --eoc-rgb: 141,148,155;
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 12px 18px 12px 16px;
    background: var(--hub-panel-active, #373737);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
    color: var(--hub-ink, #f1f1f1);
    font-family: inherit;
    transition: background-color .25s, border-color .25s;
}
/* Three-level scale: 3 is normal operations, 1 is full activation. Level 3 is blue: on the EM
   dashboards blue means "Normal Operations" while green means "Minimal impact / Activated". */
.em-eoc--l3 { --eoc: #339ee5; --eoc-rgb: 51,158,229; }
.em-eoc--l2 { --eoc: #ff8a3d; --eoc-rgb: 255,138,61; }
.em-eoc--l1 { --eoc: #ff5252; --eoc-rgb: 255,82,82; }

/* Every known level tints the module in its colour so the card stands out from its surroundings;
   the pulse (below) stays reserved for Levels 2 and 1. Loading and unknown stay neutral. */
.em-eoc--l3,
.em-eoc--l2,
.em-eoc--l1 {
    background: linear-gradient(rgba(var(--eoc-rgb), .10), rgba(var(--eoc-rgb), .10)), var(--hub-panel-active, #373737);
    border-color: rgba(var(--eoc-rgb), .45);
}

/* Full-width strip variant: add .em-eoc--banner and place it as a full-width banner */
.em-eoc--banner {
    width: 100%;
    margin: 0 0 22px;
    padding: 14px 18px;
}

.em-eoc__main {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1 1 auto;
}

/* Status dot. Pulses while the EOC is activated. */
.em-eoc__dot {
    position: relative;
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--eoc);
    box-shadow: 0 0 0 3px rgba(var(--eoc-rgb), .18), 0 0 14px rgba(var(--eoc-rgb), .45);
}
.em-eoc__dot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--eoc);
    opacity: 0;
}
.em-eoc--l2 .em-eoc__dot::after,
.em-eoc--l1 .em-eoc__dot::after {
    animation: em-eoc-pulse 1.8s ease-out infinite;
}
.em-eoc--l1 .em-eoc__dot::after { animation-duration: 1.2s; }
@keyframes em-eoc-pulse {
    0%   { transform: scale(.6); opacity: .9; }
    100% { transform: scale(1.9); opacity: 0; }
}

.em-eoc__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}
.em-eoc__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hub-muted, #a9b0b7);
}
.em-eoc__level {
    display: block;
    margin-top: 2px;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.em-eoc__level .em-eoc__num { color: var(--eoc); }
.em-eoc__sep { margin: 0 5px; color: var(--hub-muted, #a9b0b7); font-weight: 400; }
/* Bottom line: "Updated … · What do the levels mean?" */
.em-eoc__metarow {
    display: flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
    margin-top: 3px;
    font-size: 12px;
    color: var(--hub-muted, #a9b0b7);
}
.em-eoc__meta {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.em-eoc__metarow .em-eoc__sep { margin: 0; }

/* Level scale (one bar per level): taller bar = bigger response. Lit up to the current level. */
.em-eoc__scale {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    flex-shrink: 0;
    height: 26px;
    margin: 0 2px 0 auto;
    padding: 0;
    list-style: none;
}
.em-eoc__scale li {
    width: 7px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .14);
    transition: background-color .25s;
}
.em-eoc__scale li.is-lit { background: var(--eoc); }

/* Help link: opens the level explainer. A labeled link, not a lone "?" icon. */
.em-eoc__help {
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--hub-blue, #339ee5);
    font: inherit;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-color: rgba(51, 158, 229, .5);
    text-underline-offset: 2px;
    cursor: pointer;
    transition: color .15s;
}
.em-eoc__help:hover,
.em-eoc__help[aria-expanded="true"] {
    color: #fff;
    text-decoration-color: #fff;
}
.em-eoc__help:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Loading and unavailable states */
.em-eoc--loading .em-eoc__dot { background: rgba(255,255,255,.25); box-shadow: none; }
.em-eoc--loading .em-eoc__level,
.em-eoc--loading .em-eoc__metarow { color: var(--hub-muted, #a9b0b7); font-weight: 500; }
.em-eoc--loading .em-eoc__scale li { animation: em-eoc-shimmer 1.2s ease-in-out infinite; }
.em-eoc--loading .em-eoc__scale li:nth-child(2) { animation-delay: .15s; }
.em-eoc--loading .em-eoc__scale li:nth-child(3) { animation-delay: .3s; }
@keyframes em-eoc-shimmer {
    0%, 100% { background: rgba(255,255,255,.10); }
    50%      { background: rgba(255,255,255,.30); }
}
.em-eoc--unknown .em-eoc__dot { box-shadow: none; }
.em-eoc--unknown .em-eoc__level { color: #d6d9dc; }

/* Explainer popover */
.em-eoc__pop {
    position: fixed;
    z-index: 1050;
    width: min(460px, calc(100vw - 32px));
    padding: 18px 20px 16px;
    background: #262626;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 10px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
    color: var(--hub-ink, #f1f1f1);
    text-align: left;
    overflow: auto;   /* the script shortens it (max-height) when the screen is too low for the whole thing */
}
.em-eoc__pop[hidden] { display: none; }
/* Phones: the popover is a sheet along the bottom of the screen, whatever position the script gave it */
@media (max-width: 767px) {
    .em-eoc__pop {
        top: auto !important;
        bottom: 0;
        left: 0 !important;
        right: 0;
        width: auto;
        max-height: min(80vh, 80svh) !important;
        border-radius: 14px 14px 0 0;
        border-bottom: 0;
    }
}
.em-eoc__pop-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.em-eoc__pop h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}
.em-eoc__close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin: -4px -6px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--hub-muted, #a9b0b7);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.em-eoc__close:hover { color: #fff; background: rgba(255,255,255,.1); }
.em-eoc__close:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.em-eoc__pop-intro {
    margin: 6px 0 14px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--hub-muted, #a9b0b7);
}
.em-eoc__levels {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* One bordered card per level, with the level color down its left edge */
.em-eoc__lv {
    --lv: #8d949b; --lv-rgb: 141,148,155;
    padding: 11px 14px 12px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-left: 4px solid var(--lv);
    background: rgba(255, 255, 255, .04);
}
.em-eoc__lv--l3 { --lv: #339ee5; --lv-rgb: 51,158,229; }
.em-eoc__lv--l2 { --lv: #ff8a3d; --lv-rgb: 255,138,61; }
.em-eoc__lv--l1 { --lv: #ff5252; --lv-rgb: 255,82,82; }
/* The current level: solid colored border, stronger tint and a soft glow */
.em-eoc__lv.is-current {
    background: rgba(var(--lv-rgb), .14);
    border-color: var(--lv);
    box-shadow: 0 0 0 1px var(--lv), 0 0 18px rgba(var(--lv-rgb), .35);
}
.em-eoc__lv-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}
.em-eoc__lv-name .em-eoc__num { color: var(--lv); }
.em-eoc__lv-tag {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--lv);
    color: #111;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.em-eoc__lv p {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: #d6d9dc;
}
.em-eoc__lv-you { color: var(--hub-muted, #a9b0b7) !important; }
.em-eoc__lv-you strong { color: #fff; font-weight: 600; }
.em-eoc__pop-foot {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.12);
    font-size: 13px;
    color: var(--hub-muted, #a9b0b7);
}
.em-eoc__pop-foot a { color: var(--hub-blue, #339ee5); font-weight: 600; }
@media (max-width: 480px) {
    .em-eoc__scale { display: none; }
    .em-eoc__level { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
    .em-eoc *, .em-eoc *::after { animation: none !important; transition: none !important; }
}

/* Widget placement: right-aligned card up to 560px; full width below 992px or as a banner. */
.em-eoc { max-width: 560px; margin-left: auto; }
.em-eoc.em-eoc--banner { max-width: none; margin-left: 0; }
@media (max-width: 991px) {
    .em-eoc { max-width: none; margin-left: 0; }
}

/* Editor-only notice when Production is selected but not configured. */
.em-eoc__notice {
    margin: 0 0 8px;
    padding: 8px 12px;
    border: 1px dashed #ff8a3d;
    border-radius: 6px;
    background: rgba(255, 138, 61, .12);
    color: #ffd2b3;
    font-size: 13px;
}

/* The hub snippet relied on a page-wide border-box reset; make the widget independent of the host theme. */
.em-eoc, .em-eoc *, .em-eoc *::before, .em-eoc *::after { box-sizing: border-box; }

/* ---- Hero layout (Layout = "hero"): storm video, title, lede, the status card and the alert link ---- */

/* How far the hero runs on behind whatever the page puts under it: the Emergency Management hub pulls
   itself up by --em-hero-overlap and paints --em-page-bg below that line. The widget writes the three
   breakpoint values (--em-hero-overlap-lg/md/sm) from its "Hub overlap" setting. */
:root {
    --em-page-bg: #373737;
    --em-hero-overlap: var(--em-hero-overlap-lg, 360px);
}
@media (max-width: 1199px) { :root { --em-hero-overlap: var(--em-hero-overlap-md, 260px); } }
@media (max-width: 767px)  { :root { --em-hero-overlap: var(--em-hero-overlap-sm, 120px); } }

.em-eoc-hero {
    position: relative;
    overflow: hidden;
    padding: 56px 0 calc(var(--em-hero-overlap) + 36px);   /* 36px: room for the card's shadow before the hub strip */
    /* The poster (set inline by the view) doubles as the fallback background for phones, reduced motion and slow loads */
    background: #1b1f24 50% 50% / cover no-repeat;
    color: #fff;
    text-align: center;
}
.em-eoc-hero .em-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
}
/* Darkens the sky enough for white text, then fades to the page colour where the hub overlaps,
   so there is no hard edge under the hub and its tabs never land on a bright patch of cloud. */
.em-eoc-hero .em-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to bottom,
        rgba(10, 14, 18, .62) 0,
        rgba(10, 14, 18, .50) calc(100% - var(--em-hero-overlap) - 60px),
        var(--em-page-bg) 100%);
}
.em-eoc-hero .em-hero__copy {
    position: relative;
    z-index: 3;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 16px;
}
.em-eoc-hero .em-hero__title {
    margin: 0 0 14px;
    font-size: 34px;
    font-weight: 300;
    letter-spacing: .04em;
    line-height: 1.15;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .6);
}
.em-eoc-hero .em-hero__title .bold { font-weight: 700; color: #fff; }
.em-eoc-hero .em-hero__lede {
    max-width: 640px;
    margin: 0 auto 26px;
    font-size: 17px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .9);
    text-shadow: 0 1px 10px rgba(0, 0, 0, .6);
}

/* The status card, centred and opaque so the status reads steadily over video. No backdrop-filter:
   that would make the card the positioning box of the fixed popover. z-index 5 keeps the card above
   a hub that pulls itself up over the hero (the EM hub sits at 4). */
.em-eoc-hero .em-eoc {
    position: relative;
    z-index: 5;
    width: max-content;
    max-width: min(600px, calc(100% - 32px));
    margin: 0 auto;
    padding: 14px 20px 14px 18px;
    background: rgba(24, 26, 29, .93);
    border-color: rgba(255, 255, 255, .22);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .5);   /* short reach: it must not fall on the hub strip */
    text-align: left;
}
.em-eoc-hero .em-eoc--l3,
.em-eoc-hero .em-eoc--l2,
.em-eoc-hero .em-eoc--l1 {
    background: linear-gradient(rgba(var(--eoc-rgb), .14), rgba(var(--eoc-rgb), .14)), rgba(24, 26, 29, .93);
    border-color: rgba(var(--eoc-rgb), .6);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .5), 0 0 24px rgba(var(--eoc-rgb), .18);
}
.em-eoc-hero .em-eoc--loading,
.em-eoc-hero .em-eoc--unknown { border-color: rgba(255, 255, 255, .22); }

/* Alert sign-up. Wide screens get a tab docked to the right edge: it sits in the empty margin beside
   the page content, stays reachable while scrolling and never covers a dashboard. On phones anything
   docked would sit on top of the content, so the tab is hidden and the button under the card takes over. */
.em-eoc-hero .em-hero__cta {
    position: relative;
    z-index: 3;
    margin: 16px 0 0;
    padding: 0 16px;
}
.em-eoc-hero .em-hero__btn {
    margin: 0;
    color: #fff;
    border-color: rgba(255, 255, 255, .55);
    background: #be2929;   /* white text 5.93:1 */
    text-shadow: none;
}
.em-eoc-hero .em-hero__btn:hover,
.em-eoc-hero .em-hero__btn:focus {
    color: #fff;
    border-color: #fff;
    background: #a32222;   /* white text 7.48:1 */
}
.em-eoc-hero .em-hero__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
a.em-alert-tab.em-alert-tab {   /* doubled class: outranks the theme's .dark-theme a colour */
    position: fixed;
    top: 50%;
    right: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 10px 14px;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    border: 1px solid rgba(255, 255, 255, .45);
    border-right: 0;
    border-radius: 8px 0 0 8px;
    background: #be2929;
    box-shadow: -4px 6px 18px rgba(0, 0, 0, .4);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: padding-right .15s, background-color .15s;
}
a.em-alert-tab.em-alert-tab:hover,
a.em-alert-tab.em-alert-tab:focus {
    padding-right: 15px;
    background: #a32222;
    color: #fff;
    text-decoration: none;
}
.em-alert-tab:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }
@media (min-width: 768px) {
    .em-eoc-hero .em-hero__cta { display: none; }
}
@media (max-width: 767px) {
    a.em-alert-tab.em-alert-tab { display: none; }
    .em-eoc-hero { padding-top: 36px; }
    .em-eoc-hero .em-hero__title { font-size: 26px; }
    .em-eoc-hero .em-hero__lede { font-size: 15.5px; margin-bottom: 20px; }
    .em-eoc-hero .em-eoc { width: 100%; }
}
@media (max-width: 480px) {
    /* let "Updated … · What do the levels mean?" wrap instead of truncating */
    .em-eoc-hero .em-eoc__metarow { flex-wrap: wrap; }
    .em-eoc-hero .em-eoc__meta { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
    .em-eoc-hero .em-hero__video { display: none; }
    a.em-alert-tab.em-alert-tab { transition: none; }
}
@media print {
    a.em-alert-tab.em-alert-tab { display: none; }
}