/* ============================================================================
   HEOC Nepal — Emergency Events (public section)
   public/frontend/css/emergency-events.css

   Loaded only by resources/views/frontend/event/{index,document}.blade.php via
   @push('style'). Depends on nothing that is not already in the layout:
   Bootstrap 5.3.0-alpha1 (grid + .visually-hidden), Font Awesome 6 and Poppins
   are all pulled by frontend.layouts.partials.layoutHeader.

   style.css is almost entirely unscoped, so every selector here is namespaced
   .ee / .ee-*. Section 1 undoes the three global rules that would otherwise
   break this page (img aspect-ratio, a text-transform, p colour).

   Contents
     1  Tokens
     2  Defensive resets + focus rings
     3  Workspace layout
     4  Horizontal rails (year chips + event tabs)
     5  Status pills + live dot
     6  Event header, key figures, description, latest-update callout
     7  Document panel: filter, sort, groups, rows, badges
     8  Viewer: toolbar, stage state machine, panels, fullscreen
     9  Mobile sheet
    10  Empty state
    11  Small-screen padding
    12  Forced colours + reduced motion
    13  Print
   ========================================================================== */


/* =============== 1. TOKENS =============================================== */
/* Everything below reads from .ee, so the section root must carry the class. */
.ee {
    /* --- verbatim from public/frontend/css/style.css --- */
    --ee-blue: #007FE0;
    --ee-blue-tint: rgba(0, 127, 224, .05);
    --ee-blue-tint-2: rgba(0, 127, 224, .10);
    --ee-blue-soft: #B3D9F6;
    --ee-red: #E40A0A;
    --ee-green: #35BE53;
    --ee-ink: #2D2D2D;
    --ee-muted: #6C6C6C;
    --ee-bg: #F4F8FB;
    --ee-surface: #fff;
    --ee-line: #E1E1E1;
    --ee-line-soft: rgba(108, 108, 108, .20);
    --ee-shadow-sm: 0 2px 5px rgba(38, 51, 77, .03);
    --ee-shadow-md: 0 2px 4px rgba(38, 51, 77, .12);
    --ee-shadow-lg: 0 0 12px rgba(0, 0, 0, .10);
    --ee-r-sm: 4px;
    --ee-r: 8px;
    --ee-r-md: 12px;
    --ee-r-lg: 16px;
    --ee-r-pill: 28px;
    --ee-font: "Poppins", sans-serif;

    /* --- derived, declared honestly as new (WCAG AA on white/tint) --- */
    --ee-blue-ink: #0063AF;   /* #007FE0 on white is 3.6:1 and fails AA */
    --ee-green-ink: #1B6B31;
    --ee-red-ink: #B00707;
    --ee-grey-ink: #575757;
    --ee-focus: 0 0 0 3px rgba(0, 127, 224, .40);
    --ee-ease: 150ms cubic-bezier(.4, 0, .2, 1);
    --ee-sticky-top: 16px;
    --ee-shim: linear-gradient(90deg, #EDF2F7 25%, #F7FAFC 37%, #EDF2F7 63%);
}


/* =============== 2. DEFENSIVE RESETS + FOCUS ============================= */
/* style.css sets, globally and unscoped:
     img { aspect-ratio:1/1; object-fit:contain }
     a   { text-transform:capitalize }
     p   { color:#6C6C6C }
   Undo all three inside .ee only — the rest of the site depends on them. */
.ee img {
    aspect-ratio: auto;
    object-fit: initial;
}

.ee a {
    text-transform: none;
}

.ee p {
    color: inherit;
}

.ee *,
.ee *::before,
.ee *::after {
    box-sizing: border-box;
}

.ee button,
.ee input,
.ee select {
    font-family: var(--ee-font);
}

/* [hidden] must beat the display values this file sets on the same elements. */
.ee [hidden] {
    display: none !important;
}

/* .aboutUs ul li paints every list item 16px/32px #6C6C6C — not wanted in the
   rails or the document list, but kept for prose inside .ee-desc. */
.ee-rail__scroll > li,
.ee-group__body > li {
    font: inherit;
    color: inherit;
    line-height: normal;
}

/* Real focus rings. style.css deletes Bootstrap's (.form-control:focus and
   .page-link:focus both set box-shadow:0 0 0 0) — do not copy that.
   The :focus baseline keeps a ring on engines without :focus-visible; the
   :not(:focus-visible) rule is dropped as invalid by those same engines. */
.ee a:focus,
.ee button:focus,
.ee input:focus,
.ee select:focus,
.ee [tabindex]:focus {
    outline: 2px solid var(--ee-blue);
    outline-offset: 2px;
}

.ee a:focus:not(:focus-visible),
.ee button:focus:not(:focus-visible),
.ee input:focus:not(:focus-visible),
.ee select:focus:not(:focus-visible),
.ee [tabindex]:focus:not(:focus-visible) {
    outline: none;
}

.ee a:focus-visible,
.ee button:focus-visible,
.ee input:focus-visible,
.ee select:focus-visible,
.ee [tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--ee-focus);
}


/* =============== 3. WORKSPACE LAYOUT ===================================== */
/* .row already carries the site's 30px gutters. At >=992px the document list
   (col-lg-4) sits left and the viewer (col-lg-8) right; below that they stack
   in source order so a no-JS reader meets the list first. */
.ee-workspace {
    margin-top: 24px;
}

@media screen and (max-width: 767.98px) {
    .ee-workspace {
        margin-top: 16px;
    }
}


/* =============== 4. HORIZONTAL RAILS ===================================== */
.ee-rail {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ee-rail + .ee-rail {
    border-top: 1px solid var(--ee-line-soft);
}

.ee-rail__label {
    flex: 0 0 auto;
    padding-right: 4px;
    font: 700 11px/16px var(--ee-font);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ee-muted);
}

@media screen and (max-width: 767.98px) {
    .ee-rail__label {
        display: none;
    }
}

.ee-rail__scroll {
    display: flex;
    align-items: stretch;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;                     /* lets the track shrink; no page overflow */
    margin: 0;
    padding: 10px 0;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ee-rail__scroll::-webkit-scrollbar {
    display: none;
}

.ee-rail__scroll > li {
    flex: 0 0 auto;
    display: flex;
    scroll-snap-align: center;
}

/* Edge fades. Opacity is driven by .is-start / .is-end, which the JS sets only
   when the track really overflows — no dead gradients on a short rail.
   A fade that follows .ee-rail__scroll in the DOM is the end fade; the
   --e / --end / --right modifiers say the same thing explicitly. */
.ee-rail__fade {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 56px;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(90deg, var(--ee-bg) 25%, rgba(244, 248, 251, 0));
    transition: opacity var(--ee-ease);
}

.ee-rail__scroll ~ .ee-rail__fade,
.ee-rail__fade--e,
.ee-rail__fade--end,
.ee-rail__fade--right {
    left: auto;
    right: 0;
    background: linear-gradient(270deg, var(--ee-bg) 25%, rgba(244, 248, 251, 0));
}

.ee-rail.is-start .ee-rail__fade:not(.ee-rail__fade--e):not(.ee-rail__fade--end):not(.ee-rail__fade--right) {
    opacity: 1;
}

.ee-rail.is-end .ee-rail__scroll ~ .ee-rail__fade,
.ee-rail.is-end .ee-rail__fade--e,
.ee-rail.is-end .ee-rail__fade--end,
.ee-rail.is-end .ee-rail__fade--right {
    opacity: 1;
}

.ee-rail__arrow {
    flex: 0 0 auto;
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--ee-line);
    border-radius: 50%;
    background: var(--ee-surface);
    color: var(--ee-muted);
    font-size: 13px;
    box-shadow: var(--ee-shadow-sm);
    cursor: pointer;
    transition: color var(--ee-ease), border-color var(--ee-ease), background var(--ee-ease);
}

.ee-rail.has-overflow .ee-rail__arrow {
    display: inline-flex;
}

.ee-rail__arrow:hover {
    color: var(--ee-blue-ink);
    border-color: var(--ee-blue-soft);
    background: var(--ee-blue-tint);
}

.ee-rail__arrow[disabled] {
    opacity: .35;
    cursor: default;
}

.ee-rail__arrow[disabled]:hover {
    color: var(--ee-muted);
    border-color: var(--ee-line);
    background: var(--ee-surface);
}

/* Thumbs already swipe; arrows would only steal width on a phone. */
@media screen and (max-width: 767.98px) {
    .ee-rail.has-overflow .ee-rail__arrow {
        display: none;
    }
}

/* ---- 4a. year chip ---- */
.ee-year {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid var(--ee-line);
    border-radius: var(--ee-r-pill);
    background: var(--ee-surface);
    color: var(--ee-muted);
    font: 600 15px/1 var(--ee-font);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--ee-ease), color var(--ee-ease), border-color var(--ee-ease);
}

.ee-year:hover {
    color: var(--ee-blue-ink);
    border-color: var(--ee-blue-soft);
    background: var(--ee-blue-tint);
}

.ee-year__n {
    padding: 2px 6px;
    border-radius: 20px;
    background: rgba(108, 108, 108, .12);
    color: var(--ee-grey-ink);
    font-size: 11px;
    font-weight: 700;
}

.ee-year[aria-current="page"],
.ee-year[aria-current="true"] {
    background: var(--ee-blue);
    border-color: var(--ee-blue);
    color: #fff;
    font-weight: 700;
}

.ee-year[aria-current="page"] .ee-year__n,
.ee-year[aria-current="true"] .ee-year__n {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}

/* ---- 4b. event tab (real links, tab ergonomics) ---- */
.ee-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-height: 58px;
    max-width: 270px;
    padding: 8px 16px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: var(--ee-r) var(--ee-r) 0 0;
    background: transparent;
    color: var(--ee-muted);
    font-family: var(--ee-font);
    text-align: left;
    text-decoration: none;
    transition: background var(--ee-ease), color var(--ee-ease), border-color var(--ee-ease);
}

.ee-tab__name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    font: 600 15px/20px var(--ee-font);
}

.ee-tab__meta {
    font: 500 11px/15px var(--ee-font);
    white-space: nowrap;
    opacity: .9;
}

.ee-tab:hover {
    background: var(--ee-blue-tint);
    color: var(--ee-ink);
    border-bottom-color: var(--ee-blue-soft);
}

.ee-tab:focus-visible {
    border-radius: var(--ee-r);
}

.ee-tab[aria-current="page"],
.ee-tab[aria-current="true"] {
    background: var(--ee-surface);
    color: var(--ee-blue-ink);
    border-bottom-color: var(--ee-blue);
}

.ee-tab[aria-current="page"] .ee-tab__name,
.ee-tab[aria-current="true"] .ee-tab__name {
    font-weight: 700;
}

@media screen and (max-width: 767.98px) {
    .ee-tab {
        min-height: 52px;
        max-width: 210px;
        padding: 6px 12px;
    }

    .ee-tab__name {
        font-size: 14px;
    }
}

/* ---- 4c. jump-to select (supplement on phones, never the only path) ---- */
.ee-jump {
    display: none;
    padding: 0 0 10px;
}

.ee-rail.has-overflow ~ .ee-jump {
    display: block;
}

@media screen and (min-width: 768px) {
    .ee-jump {
        display: none !important;
    }
}

.ee-jump select {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--ee-line);
    border-radius: var(--ee-r);
    background: var(--ee-surface);
    color: var(--ee-ink);
    font: 600 15px/1 var(--ee-font);
}


/* =============== 5. STATUS PILLS + LIVE DOT ============================== */
.ee-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: var(--ee-r-pill);
    font: 700 11px/1 var(--ee-font);
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ee-status--active {
    background: var(--ee-red);
    color: #fff;
}

.ee-status--monitoring {
    background: var(--ee-blue-ink);
    color: #fff;
}

.ee-status--closed {
    background: rgba(53, 190, 83, .14);
    color: var(--ee-green-ink);
    border-color: rgba(53, 190, 83, .45);
}

/* Status is never colour alone: the pill always carries its own text label. */
.ee-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.ee-status--active .ee-dot {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, .7);
    animation: ee-pulse-light 2.4s infinite;
}

.ee-tab .ee-dot {
    margin-right: 6px;
    background: var(--ee-red);
    box-shadow: 0 0 0 0 rgba(228, 10, 10, .55);
    animation: ee-pulse 2.4s infinite;
}

@keyframes ee-pulse {
    0% { box-shadow: 0 0 0 0 rgba(228, 10, 10, .55); }
    70% { box-shadow: 0 0 0 7px rgba(228, 10, 10, 0); }
    100% { box-shadow: 0 0 0 0 rgba(228, 10, 10, 0); }
}

@keyframes ee-pulse-light {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); }
    70% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}


/* =============== 6. EVENT HEADER ========================================= */
.ee-header {
    padding: 32px;
    margin: 24px 0;
    border-radius: var(--ee-r-lg);
    background: var(--ee-surface);
    box-shadow: var(--ee-shadow-sm);
}

@media screen and (max-width: 767.98px) {
    .ee-header {
        padding: 20px;
        margin: 16px 0;
        border-radius: var(--ee-r-md);
    }
}

.ee-header__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

/* .ee img wins over .ee-header__cover on specificity, hence the qualifier. */
.ee img.ee-header__cover {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: var(--ee-r-md);
    background: var(--ee-bg);
}

.ee-header__title {
    margin: 8px 0 6px;
    font: 700 28px/38px var(--ee-font);
    color: var(--ee-ink);
    text-transform: none;
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

@media screen and (max-width: 767.98px) {
    .ee-header__title {
        font-size: 22px;
        line-height: 30px;
    }
}

.ee-header__dates {
    font: 600 14px/24px var(--ee-font);
    color: var(--ee-muted);
}

/* ---- 6a. key figures ---- */
.ee-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    margin: 20px 0 8px;
    border: 1px solid var(--ee-line);
    border-radius: var(--ee-r);
    background: var(--ee-line);
    overflow: hidden;
}

.ee-fact {
    padding: 14px 16px;
    background: var(--ee-surface);
}

.ee-fact__k {
    font: 700 11px/16px var(--ee-font);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ee-muted);
}

.ee-fact__v {
    margin-top: 2px;
    font: 700 22px/28px var(--ee-font);
    color: var(--ee-ink);
    word-break: break-word;
}

.ee-facts__note {
    margin-bottom: 16px;
    font: 500 12px/20px var(--ee-font);
    color: var(--ee-muted);
}

@media screen and (max-width: 399px) {
    .ee-facts {
        grid-template-columns: 1fr;
    }
}

/* ---- 6b. description ---- */
.ee-desc {
    font: 400 16px/32px var(--ee-font);
    color: var(--ee-ink);
}

.ee-desc p,
.ee-desc li {
    margin-bottom: 16px;
    color: var(--ee-ink);
}

.ee-desc p:last-child {
    margin-bottom: 0;
}

.ee-desc ul,
.ee-desc ol {
    padding-left: 22px;
    margin-bottom: 16px;
}

.ee-desc img {
    max-width: 100%;
    height: auto;
    border-radius: var(--ee-r);
}

.ee-desc a {
    color: var(--ee-blue-ink);
    text-decoration: underline;
}

.ee-desc.is-clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent);
    mask-image: linear-gradient(180deg, #000 62%, transparent);
}

@media screen and (max-width: 767.98px) {
    .ee-desc.is-clamped {
        -webkit-line-clamp: 3;
    }
}

.ee-desc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-top: 12px;
    padding: 10px 20px;
    border: 0;
    border-radius: var(--ee-r-pill);
    background: var(--ee-blue-tint);
    color: var(--ee-blue-ink);
    font: 600 15px/1 var(--ee-font);
    cursor: pointer;
    transition: background var(--ee-ease);
}

.ee-desc-toggle:hover {
    background: var(--ee-blue-tint-2);
}

.ee-desc-toggle .fa-chevron-down,
.ee-desc-toggle .fa-angle-down {
    transition: transform var(--ee-ease);
    font-size: 12px;
}

.ee-desc-toggle[aria-expanded="true"] .fa-chevron-down,
.ee-desc-toggle[aria-expanded="true"] .fa-angle-down {
    transform: rotate(180deg);
}

/* ---- 6c. latest-update callout: the single highest-value element here ---- */
.ee-latest {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin: 20px 0 0;
    padding: 16px 20px;
    border: 1px solid var(--ee-blue-soft);
    border-left: 4px solid var(--ee-blue);
    border-radius: var(--ee-r);
    background: var(--ee-blue-tint);
    color: var(--ee-ink);
}

.ee-latest__k {
    flex: 0 0 100%;
    font: 700 11px/16px var(--ee-font);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ee-blue-ink);
}

.ee-latest a {
    color: var(--ee-blue-ink);
    font: 700 16px/24px var(--ee-font);
    text-decoration: none;
}

.ee-latest a:hover {
    text-decoration: underline;
}

.ee-latest__meta,
.ee-latest time {
    font: 500 13px/20px var(--ee-font);
    color: var(--ee-muted);
}


/* =============== 7. DOCUMENT PANEL ======================================= */
.ee-docs {
    padding: 16px;
    border-radius: var(--ee-r-lg);
    background: var(--ee-surface);
    box-shadow: var(--ee-shadow-sm);
}

.ee-docs__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-bottom: 8px;
}

.ee-docs__scroll {
    min-height: 280px;
    max-height: calc(100vh - 240px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
}

@supports (height: 100dvh) {
    .ee-docs__scroll {
        max-height: calc(100dvh - 240px);
    }
}

@media screen and (max-width: 991.98px) {
    .ee-docs__scroll {
        min-height: 0;
        max-height: none;
        overflow: visible;
    }
}

/* ---- 7a. filter ---- */
.ee-filter {
    position: relative;
    margin-bottom: 12px;
}

.ee-filter input {
    width: 100%;
    height: 46px;
    padding: 0 40px;
    border: 1px solid var(--ee-line-soft);
    border-radius: var(--ee-r);
    background: var(--ee-surface);
    color: var(--ee-ink);
    font: 400 15px/1 var(--ee-font);
}

.ee-filter input:focus,
.ee-filter input:focus-visible {
    outline: none;
    border-color: var(--ee-blue);
    box-shadow: var(--ee-focus);
}

.ee-filter > .fa-magnifying-glass,
.ee-filter > i:first-child {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ee-muted);
    font-size: 14px;
    pointer-events: none;
}

.ee-filter__clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ee-muted);
    cursor: pointer;
    transition: background var(--ee-ease), color var(--ee-ease);
}

.ee-filter.has-value .ee-filter__clear {
    display: inline-flex;
}

.ee-filter__clear:hover {
    background: var(--ee-blue-tint);
    color: var(--ee-blue-ink);
}

/* ---- 7b. sort ---- */
.ee-sort {
    display: inline-flex;
    border: 1px solid var(--ee-line);
    border-radius: var(--ee-r);
    overflow: hidden;
}

.ee-sort button {
    min-height: 38px;
    padding: 8px 14px;
    border: 0;
    background: var(--ee-surface);
    color: var(--ee-muted);
    font: 600 13px/1 var(--ee-font);
    cursor: pointer;
    transition: background var(--ee-ease), color var(--ee-ease);
}

.ee-sort button + button {
    border-left: 1px solid var(--ee-line);
}

.ee-sort button:hover {
    background: var(--ee-blue-tint);
    color: var(--ee-blue-ink);
}

.ee-sort button[aria-checked="true"],
.ee-sort button[aria-pressed="true"],
.ee-sort button.is-active {
    background: var(--ee-blue-tint-2);
    color: var(--ee-blue-ink);
}

.ee-docs__count {
    font: 500 13px/20px var(--ee-font);
    color: var(--ee-muted);
}

/* ---- 7c. groups ---- */
.ee-group {
    border-top: 1px solid var(--ee-line-soft);
    padding-top: 8px;
    margin-top: 8px;
}

.ee-group:first-child {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

.ee-group__head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 10px 6px;
    border: 0;
    border-radius: var(--ee-r-sm);
    background: transparent;
    color: var(--ee-muted);
    font: 700 12px/18px var(--ee-font);
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    transition: color var(--ee-ease), background var(--ee-ease);
}

.ee-group__head:hover {
    color: var(--ee-blue-ink);
    background: var(--ee-blue-tint);
}

.ee-group__head > i:first-child {
    flex: 0 0 auto;
    width: 16px;
    font-size: 13px;
    text-align: center;
    color: var(--ee-blue);
}

.ee-group__count {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(108, 108, 108, .10);
    color: var(--ee-grey-ink);
    font-size: 11px;
    letter-spacing: 0;
    white-space: nowrap;
}

.ee-group__head .fa-chevron-down,
.ee-group__head .fa-angle-down {
    flex: 0 0 auto;
    font-size: 11px;
    transition: transform var(--ee-ease);
}

.ee-group__head[aria-expanded="false"] .fa-chevron-down,
.ee-group__head[aria-expanded="false"] .fa-angle-down {
    transform: rotate(-90deg);
}

.ee-group__body {
    display: block;
}

/* No-JS safety net: a group rendered collapsed stays collapsed. */
.ee-group__head[aria-expanded="false"] + .ee-group__body {
    display: none;
}

.ee-group__empty {
    margin: 4px 6px 8px;
    padding: 12px 14px;
    border: 1px dashed var(--ee-line);
    border-radius: var(--ee-r);
    font: 500 13px/20px var(--ee-font);
    color: var(--ee-muted);
}

/* ---- 7d. the document row ---- */
.ee-doc {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    width: 100%;
    min-height: 56px;
    padding: 10px 12px 10px 14px;
    margin-bottom: 2px;
    border: 1px solid transparent;
    border-radius: var(--ee-r);
    background: transparent;
    color: inherit;
    text-align: left;
    text-decoration: none;
    transition: background var(--ee-ease), border-color var(--ee-ease);
}

.ee-doc::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--ee-blue);
    opacity: 0;
    transition: opacity var(--ee-ease);
}

.ee-doc:hover {
    background: var(--ee-blue-tint);
    border-color: var(--ee-blue-soft);
}

.ee-doc[aria-current="true"],
.ee-doc[aria-current="page"] {
    background: var(--ee-blue-tint-2);
    border-color: var(--ee-blue-soft);
}

.ee-doc[aria-current="true"]::before,
.ee-doc[aria-current="page"]::before {
    opacity: 1;
}

.ee-doc[aria-current="true"] .ee-doc__title,
.ee-doc[aria-current="page"] .ee-doc__title {
    color: var(--ee-blue-ink);
}

.ee-doc__title {
    grid-column: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font: 600 15px/22px var(--ee-font);
    color: var(--ee-ink);
    text-transform: none;
    overflow-wrap: break-word;
}

.ee-doc__meta {
    grid-column: 2;
    font: 500 13px/18px var(--ee-font);
    color: var(--ee-muted);
}

.ee-doc__go {
    grid-column: 3;
    grid-row: 1 / 3;
    color: var(--ee-muted);
    font-size: 13px;
}

.ee-doc mark {
    padding: 0 1px;
    border-radius: 2px;
    background: rgba(0, 127, 224, .18);
    color: inherit;
}

@media screen and (max-width: 991.98px) {
    .ee-doc {
        min-height: 60px;
        padding: 12px 12px 12px 14px;   /* 44px+ tap target with room to spare */
    }
}

/* zero-results notice — created by emergency-events.js */
.ee-docs__none {
    margin: 8px 6px;
    padding: 16px;
    border: 1px dashed var(--ee-line);
    border-radius: var(--ee-r);
    font: 500 14px/22px var(--ee-font);
    color: var(--ee-muted);
    text-align: center;
}

.ee-docs__none button {
    min-height: 40px;
    margin-top: 8px;
    padding: 8px 16px;
    border: 0;
    border-radius: var(--ee-r-pill);
    background: var(--ee-blue-tint);
    color: var(--ee-blue-ink);
    font: 600 14px/1 var(--ee-font);
    cursor: pointer;
}

.ee-docs__none button:hover {
    background: var(--ee-blue-tint-2);
}

/* ---- 7e. badges ---- */
.ee-badge {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 22px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: var(--ee-r-sm);
    font: 700 11px/1 var(--ee-font);
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ee-badge i {
    font-size: 11px;
}

.ee-badge--pdf {
    color: var(--ee-red-ink);
    background: rgba(228, 10, 10, .08);
    border-color: rgba(228, 10, 10, .25);
}

.ee-badge--html {
    color: var(--ee-blue-ink);
    background: rgba(0, 127, 224, .08);
    border-color: rgba(0, 127, 224, .25);
}

.ee-badge--image {
    color: var(--ee-green-ink);
    background: rgba(53, 190, 83, .12);
    border-color: rgba(53, 190, 83, .35);
}

.ee-badge--link,
.ee-badge--download {
    color: var(--ee-grey-ink);
    background: rgba(108, 108, 108, .08);
    border-color: var(--ee-line);
}


/* =============== 8. VIEWER =============================================== */
.ee-viewer {
    position: -webkit-sticky;
    position: sticky;
    top: var(--ee-sticky-top);
    display: flex;
    flex-direction: column;
    height: calc(100vh - 2 * 16px);
    max-height: 880px;
    min-height: 520px;
    border: 1px solid var(--ee-line);
    border-radius: var(--ee-r-md);
    background: var(--ee-surface);
    box-shadow: var(--ee-shadow-sm);
    overflow: hidden;
}

@supports (height: 100dvh) {
    .ee-viewer {
        height: calc(100dvh - 2 * 16px);
    }
}

.ee-viewer__bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--ee-line-soft);
    background: var(--ee-surface);
}

.ee-viewer__meta {
    flex: 1 1 auto;
    min-width: 0;
}

#ee-viewer-title {
    margin: 0;
    font: 700 15px/22px var(--ee-font);
    color: var(--ee-ink);
    text-transform: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    -webkit-line-clamp: unset;
}

.ee-viewer__sub {
    font: 500 12px/18px var(--ee-font);
    color: var(--ee-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ee-viewer__tools {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ee-viewer__bar [data-ee-action],
.ee-viewer__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 38px;
    height: 38px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: var(--ee-r);
    background: transparent;
    color: var(--ee-muted);
    font: 600 14px/1 var(--ee-font);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--ee-ease), color var(--ee-ease), border-color var(--ee-ease);
}

.ee-viewer__bar [data-ee-action]:hover,
.ee-viewer__back:hover {
    background: var(--ee-blue-tint);
    color: var(--ee-blue-ink);
    border-color: var(--ee-blue-soft);
}

.ee-viewer__bar [data-ee-action].is-copied {
    background: rgba(53, 190, 83, .14);
    color: var(--ee-green-ink);
    border-color: rgba(53, 190, 83, .45);
}

/* ---- 8a. stage state machine ---- */
.ee-viewer__stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    background: var(--ee-bg);
}

.ee-viewer__frame,
.ee img.ee-viewer__img,
.ee-viewer__placeholder,
.ee-viewer__card,
.ee-viewer__error {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.ee-viewer__frame {
    z-index: 1;
    border: 0;
    background: #fff;
}

.ee img.ee-viewer__img {
    z-index: 1;
    aspect-ratio: auto;
    object-fit: contain;
    background: #fff;
}

.ee-viewer__placeholder,
.ee-viewer__card,
.ee-viewer__error {
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px;
    overflow-y: auto;
    text-align: center;
    background: var(--ee-bg);
}

.ee-viewer__placeholder i,
.ee-viewer__card i,
.ee-viewer__error i {
    font-size: 40px;
    color: var(--ee-blue-soft);
}

.ee-viewer__error i {
    color: var(--ee-red);
}

.ee-viewer__placeholder h2,
.ee-viewer__placeholder h3,
.ee-viewer__card h2,
.ee-viewer__card h3,
.ee-viewer__error h2,
.ee-viewer__error h3 {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
    font: 700 18px/26px var(--ee-font);
    color: var(--ee-ink);
    text-transform: none;
}

.ee-viewer__placeholder p,
.ee-viewer__card p,
.ee-viewer__error p {
    max-width: 46ch;
    font: 400 14px/22px var(--ee-font);
    color: var(--ee-muted);
}

.ee-viewer__card__host,
.ee-viewer__host {
    font: 500 13px/20px var(--ee-font);
    color: var(--ee-muted);
    word-break: break-all;
}

/* Panel actions read as buttons, not toolbar icons. */
.ee-viewer__placeholder [data-ee-action],
.ee-viewer__card [data-ee-action],
.ee-viewer__error [data-ee-action] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 20px;
    border: 1px solid var(--ee-blue);
    border-radius: var(--ee-r-pill);
    background: var(--ee-blue);
    color: #fff;
    font: 600 15px/1 var(--ee-font);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--ee-ease), border-color var(--ee-ease);
}

.ee-viewer__placeholder [data-ee-action]:hover,
.ee-viewer__card [data-ee-action]:hover,
.ee-viewer__error [data-ee-action]:hover {
    background: var(--ee-blue-ink);
    border-color: var(--ee-blue-ink);
    color: #fff;
}

.ee-viewer__card [data-ee-action="download"],
.ee-viewer__error [data-ee-action="download"] {
    background: var(--ee-surface);
    border-color: var(--ee-line);
    color: var(--ee-ink);
}

.ee-viewer__card [data-ee-action="download"]:hover,
.ee-viewer__error [data-ee-action="download"]:hover {
    background: var(--ee-bg);
    border-color: var(--ee-grey-ink);
    color: var(--ee-ink);
}

.ee-viewer__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

/* Safety net for the no-JS render: data-state alone puts the right panel on
   top. With JS the [hidden] attribute does the same job more precisely. */
.ee-viewer__stage[data-state="empty"] .ee-viewer__frame,
.ee-viewer__stage[data-state="empty"] .ee-viewer__img,
.ee-viewer__stage[data-state="empty"] .ee-viewer__card,
.ee-viewer__stage[data-state="empty"] .ee-viewer__error,
.ee-viewer__stage[data-state="error"] .ee-viewer__placeholder,
.ee-viewer__stage[data-state="error"] .ee-viewer__card,
.ee-viewer__stage[data-state="ready"] .ee-viewer__placeholder,
.ee-viewer__stage[data-state="ready"] .ee-viewer__error {
    display: none;
}

/* Loading: one shimmering skeleton over the stage, plus the escalating label
   the JS writes into data-loading-label. Never a blank white frame. */
.ee-viewer__stage[data-state="loading"]::after {
    content: attr(data-loading-label);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: var(--ee-shim);
    background-size: 400% 100%;
    animation: ee-shimmer 1.4s ease infinite;
    font: 600 14px/22px var(--ee-font);
    color: var(--ee-grey-ink);
    text-align: center;
}

@keyframes ee-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ---- 8b. fullscreen (CSS fallback; the JS prefers the Fullscreen API) ---- */
.ee-viewer.is-fs {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1080;
    width: 100%;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
}

.ee-viewer:-webkit-full-screen,
.ee-viewer:fullscreen {
    max-height: none;
    border-radius: 0;
}

body.ee-lock {
    overflow: hidden !important;
}


/* =============== 9. MOBILE SHEET ========================================= */
/* 768-991px: the viewer stops sticking and stacks under the list. */
@media screen and (max-width: 991.98px) {
    .ee-viewer {
        position: static;
        height: 55vh;
        min-height: 340px;
        margin-bottom: 16px;
    }

    @supports (height: 100dvh) {
        .ee-viewer {
            height: 55dvh;
        }
    }
}

/* Below 768px the viewer is a full-screen sheet. .ee-sheet is added by the JS
   only on the workspace page, so the standalone document page keeps its
   inline viewer and a no-JS reader simply follows the row's real link. */
@media screen and (max-width: 767.98px) {
    .ee-viewer.ee-sheet {
        display: none;
    }

    .ee-viewer.ee-sheet.is-open {
        display: flex;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1070;
        height: 100%;
        max-height: none;
        margin: 0;
        border: 0;
        border-radius: 0;
    }

    .ee-viewer__bar {
        flex-wrap: wrap;
        z-index: 1;
        box-shadow: var(--ee-shadow-md);
    }

    .ee-viewer__tools {
        width: 100%;
        padding-top: 6px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .ee-viewer__tools::-webkit-scrollbar {
        display: none;
    }

    .ee-viewer__bar [data-ee-action],
    .ee-viewer__back {
        min-width: 44px;
        height: 44px;
    }
}

.ee-viewer__back {
    display: none;
}

@media screen and (max-width: 767.98px) {
    .ee-viewer.ee-sheet.is-open .ee-viewer__back {
        display: inline-flex;
    }
}


/* =============== 10. EMPTY STATE ========================================= */
.ee-empty {
    padding: 56px 24px;
    border-radius: var(--ee-r-lg);
    background: var(--ee-surface);
    box-shadow: var(--ee-shadow-sm);
    text-align: center;
}

.ee-empty i {
    font-size: 48px;
    color: var(--ee-blue-soft);
}

.ee-empty h2,
.ee-empty h3 {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
    margin: 16px 0 8px;
    font: 700 22px/32px var(--ee-font);
    color: var(--ee-ink);
    text-transform: none;
}

.ee-empty p {
    max-width: 52ch;
    margin: 0 auto;
    font: 400 15px/26px var(--ee-font);
    color: var(--ee-muted);
}

.ee-empty__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 24px;
}

.ee-empty__actions a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 22px;
    border: 1px solid var(--ee-blue-soft);
    border-radius: var(--ee-r-pill);
    background: var(--ee-blue-tint);
    color: var(--ee-blue-ink);
    font: 600 15px/1 var(--ee-font);
    transition: background var(--ee-ease);
}

.ee-empty__actions a:hover {
    background: var(--ee-blue-tint-2);
}


/* =============== 11. SMALL-SCREEN PADDING ================================ */
/* .container keeps only 12px of inset below 576px, so 32px card padding eats
   the screen. Mirrors the .welcome-box precedent (48px -> 20px at <=499px). */
@media screen and (max-width: 575px) {
    .ee-header {
        padding: 16px;
    }

    .ee-docs {
        padding: 12px;
    }

    .ee-latest {
        padding: 14px 16px;
    }

    .ee-empty {
        padding: 40px 16px;
    }

    .ee-fact {
        padding: 12px 14px;
    }

    .ee-fact__v {
        font-size: 20px;
        line-height: 26px;
    }
}


/* =============== 12. FORCED COLOURS + REDUCED MOTION ===================== */
@media (forced-colors: active) {
    .ee-tab[aria-current="page"],
    .ee-tab[aria-current="true"] {
        border-bottom-color: Highlight;
        color: Highlight;
    }

    .ee-year[aria-current="page"],
    .ee-year[aria-current="true"] {
        border-color: Highlight;
    }

    .ee-doc[aria-current="true"],
    .ee-doc[aria-current="page"] {
        outline: 2px solid Highlight;
    }

    .ee-badge,
    .ee-status {
        border-color: CanvasText;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ee *,
    .ee *::before,
    .ee *::after {
        transition-duration: 1ms !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
    }

    .ee-dot,
    .ee-status--active .ee-dot,
    .ee-tab .ee-dot {
        animation: none;
        box-shadow: none;
    }

    .ee-viewer__stage[data-state="loading"]::after {
        animation: none;
        background: #EDF2F7;
    }
}


/* =============== 13. PRINT =============================================== */
/* A printed event page is an actionable index: no chrome, every group open,
   the clamp released, and the real URL after each document link. The site
   chrome selectors are unavoidably global but are confined to @media print,
   and this file only ever loads on the two event views. */
@media print {
    .navbar,
    .header-logo,
    .alerts,
    footer,
    .ee-rail,
    .ee-jump,
    .ee-filter,
    .ee-sort,
    .ee-docs__none,
    .ee-viewer__bar,
    .ee-viewer__tools,
    .ee-viewer__back,
    .ee-desc-toggle,
    .ee-doc__go,
    .ee-rail__arrow,
    .ee-rail__fade {
        display: none !important;
    }

    .ee,
    .aboutUs {
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    .ee-header,
    .ee-docs,
    .ee-latest {
        padding: 12px !important;
        border: 1px solid #ccc;
        border-radius: 0;
        box-shadow: none !important;
        background: #fff !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .ee img.ee-header__cover {
        max-height: 120px;
        width: auto;
    }

    .ee-desc.is-clamped {
        display: block !important;
        overflow: visible !important;
        -webkit-line-clamp: unset !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    .ee-docs__scroll {
        max-height: none !important;
        overflow: visible !important;
    }

    /* every group prints expanded, whatever its aria-expanded state */
    .ee-group__body,
    .ee-group__head[aria-expanded="false"] + .ee-group__body {
        display: block !important;
    }

    .ee-doc {
        border: 0;
        border-bottom: 1px solid #eee;
        border-radius: 0;
        background: none !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .ee-doc::before {
        display: none;
    }

    /* the resolved URL keeps a paper copy usable */
    .ee-doc[href]::after {
        content: " — " attr(href);
        grid-column: 1 / -1;
        font-size: 10px;
        color: #555;
        word-break: break-all;
    }

    .ee-viewer {
        position: static !important;
        display: block !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        border: 0;
        box-shadow: none;
        overflow: visible;
    }

    .ee-viewer__stage {
        position: static;
        height: auto;
    }

    .ee-viewer__stage[data-state="loading"]::after {
        display: none;
    }

    .ee-viewer__frame {
        position: static;
        height: 900px;
        page-break-before: always;
    }

    .ee-viewer__placeholder,
    .ee-viewer__card,
    .ee-viewer__error,
    .ee img.ee-viewer__img {
        position: static;
        height: auto;
    }

    @page {
        margin: 14mm;
    }
}