/* ==========================================================================
   Alert Map: styles (duck.st design language)
   ========================================================================== */

* { font-family: 'Heebo', ui-sans-serif, system-ui, sans-serif; }

.header-bar { background: linear-gradient(90deg, #ef4444 0%, #FBBF24 100%); height: 3px; }
.dark .header-bar { background: linear-gradient(90deg, #ef4444 0%, #CA8A04 100%); }

/* Tailwind's h-screen is 100vh, which on a phone includes the space under the
   browser bar; dvh is the height that is actually visible. */
.am-page { height: 100vh; height: 100dvh; }

.am-map {
    width: 100%;
    height: 100%;
    direction: ltr;
    z-index: 1;
}

/* The one line under the timeline: where the data is from and what this page is not. */
.am-foot {
    margin: 0;
    padding: 5px 14px calc(5px + env(safe-area-inset-bottom));
    font-size: 11px;
    line-height: 1.45;
    color: #64748b;
    border-top: 1px solid #f1f5f9;
}
.dark .am-foot { border-top-color: #1e293b; color: #94a3b8; }

/* ── Leaflet overrides ───────────────────────────────────────────────────── */

.am-map .leaflet-popup-content-wrapper {
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    font-family: 'Heebo', sans-serif;
}
.dark .am-map .leaflet-popup-content-wrapper {
    background: #1e293b;
    color: #f1f5f9;
    border: 1px solid #334155;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.am-map .leaflet-popup-tip { background: white; }
.dark .am-map .leaflet-popup-tip { background: #1e293b; }
.am-map .leaflet-popup-content {
    margin: 10px 14px;
    font-family: 'Heebo', sans-serif;
    line-height: 1.5;
    font-size: 14px;
}
.am-map .leaflet-popup-close-button { color: #94a3b8; font-size: 18px; }
.am-map .leaflet-popup-close-button:hover { color: #1e293b; }
.dark .am-map .leaflet-popup-close-button:hover { color: #f1f5f9; }

.dark .am-map .leaflet-control-attribution {
    background: rgba(15,23,42,0.8) !important;
    color: #94a3b8;
    font-size: 10px;
}
.am-map .leaflet-tooltip {
    font-family: 'Heebo', sans-serif;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 14px;
    font-weight: 600;
    direction: rtl;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.dark .am-map .leaflet-tooltip {
    background: #1e293b;
    color: #f1f5f9;
    border: 1px solid #334155;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.dark .am-map .leaflet-tooltip-top::before { border-top-color: #334155; }

/* ── Feed banner: the server has not heard from Pikud HaOref for a while ── */

.am-feed-banner {
    background: #fef3c7;
    color: #78350f;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    text-align: center;
}
.dark .am-feed-banner {
    background: #422006;
    color: #fde68a;
}

/* ── Fatal banner: the map or its data did not load ──────────────────────── */

.am-fatal {
    background: #fee2e2;
    color: #7f1d1d;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 16px;
    text-align: center;
}
.dark .am-fatal {
    background: #450a0a;
    color: #fecaca;
}
.am-fatal button {
    font: inherit;
    font-weight: 700;
    margin-inline-start: 10px;
    padding: 3px 12px;
    border: 0;
    border-radius: 8px;
    background: #7f1d1d;
    color: #fff;
    cursor: pointer;
}
.dark .am-fatal button {
    background: #fecaca;
    color: #450a0a;
}

/* ── Filter buttons ──────────────────────────────────────────────────────── */

.am-fbtn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid transparent;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.4;
}
.am-fbtn:hover {
    background: rgba(148,163,184,0.1);
}
.am-fbtn.active {
    background: rgba(148,163,184,0.08);
    border-color: rgba(148,163,184,0.15);
    color: #334155;
}
.dark .am-fbtn.active {
    background: rgba(148,163,184,0.06);
    border-color: rgba(148,163,184,0.12);
    color: #e2e8f0;
}
.am-fbtn:not(.active) {
    opacity: 0.45;
}

.am-fdot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.am-fdot[data-state="red"] { background: #ef4444; }
.am-fdot[data-state="orange"] { background: #8b5cf6; }
.am-fdot[data-state="purple"] { background: #3b82f6; }
.am-fdot[data-state="earthquake"] { background: #f59e0b; }
.am-fdot[data-state="tsunami"] { background: #06b6d4; }
.am-fdot[data-state="hazmat"] { background: #ec4899; }
.am-fdot[data-state="radiological"] { background: #d946ef; }
.am-fdot[data-state="prealert"] { background: #fbbf24; }
.am-fdot[data-state="green"] { background: #22c55e; }
.am-fdot[data-state="gray"] { background: #94a3b8; }

/* ── Control buttons ─────────────────────────────────────────────────────── */

.am-ctrl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    border: none;
    cursor: pointer;
}
.dark .am-ctrl-btn { color: #94a3b8; }
.am-ctrl-btn:hover {
    background: rgba(148,163,184,0.1);
    color: #475569;
}
.dark .am-ctrl-btn:hover {
    background: rgba(148,163,184,0.08);
    color: #e2e8f0;
}

/* ── Timeline scrollbar ──────────────────────────────────────────────────── */

.am-timeline::-webkit-scrollbar { width: 3px; }
.am-timeline::-webkit-scrollbar-track { background: transparent; }
.am-timeline::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 2px; }
.dark .am-timeline::-webkit-scrollbar-thumb { background: #1e293b; }

/* ── Map toolbar ─────────────────────────────────────────────────────────── */

.am-tb-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: transparent;
    color: #64748b;
    border: none;
    cursor: pointer;
}
.am-tb-btn:hover {
    background: rgba(148,163,184,0.12);
    color: #1e293b;
}
.dark .am-tb-btn {
    color: #94a3b8;
}
.dark .am-tb-btn:hover {
    background: rgba(148,163,184,0.1);
    color: #f1f5f9;
}
.am-tb-sep {
    height: 1px;
    background: #e2e8f0;
    margin: 0 6px;
}
.dark .am-tb-sep {
    background: #334155;
}

/* Positions the prebuilt Tailwind file has no utilities for. */
#layer-ctrl-wrap { bottom: 28px; }
#search-wrap { width: 160px; }
@media (min-width: 640px) { #search-wrap { width: 208px; } }
.am-push-results { bottom: 100%; margin-bottom: 4px; max-height: 12rem; z-index: 30; }

/* ── Toolbar popovers: layers, push, stats ───────────────────────────────── */

.am-popover {
    bottom: 0;
    right: calc(100% + 8px);
    max-width: calc(100vw - 72px);
}
.am-push-panel { width: 290px; }
.am-stats-panel { width: 310px; }

/* ── Search dropdown ─────────────────────────────────────────────────────── */

.am-search-results { display: none; }
.am-search-results.show { display: block; }

/* ── Animations (toasts and the live dot) ────────────────────────────────── */

@keyframes am-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
@keyframes am-toast-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes am-toast-out {
    from { opacity: 1; }
    to { opacity: 0; transform: translateY(12px); }
}

.am-toast { animation: am-toast-in 0.2s ease-out; }
.am-toast.leaving { animation: am-toast-out 0.15s ease-in forwards; }
.am-live-pulse { animation: am-pulse 1.5s ease-in-out infinite; }

/* ── Live button states ──────────────────────────────────────────────────── */

/* White text needs 4.5:1, which red-500 (#ef4444) does not give: red-600 does. */
#live-btn.am-src-server  { background: #dc2626; }
#live-btn.am-src-server:hover { background: #b91c1c; }
#live-btn.am-src-offline  { background: #64748b; }
#live-btn.am-src-offline:hover { background: #475569; }

/* ── Fullscreen ──────────────────────────────────────────────────────────── */

body.am-fullscreen .am-topbar,
body.am-fullscreen .am-panel-wrap { display: none !important; }
body.am-fullscreen .am-main-grid { height: 100vh !important; height: 100dvh !important; }
/* The exit button and its separator exist only inside fullscreen. */
.am-fs-only { display: none !important; }
body.am-fullscreen .am-tb-btn.am-fs-only { display: flex !important; }
body.am-fullscreen .am-tb-sep.am-fs-only { display: block !important; }

/* ── Hide scrollbar utility ──────────────────────────────────────────────── */

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Mobile ──────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .am-panel-wrap.minimized {
        max-height: 48px !important;
        min-height: 48px !important;
        overflow: hidden;
    }
    .am-fbtn {
        font-size: 12px;
        padding: 2px 9px;
        min-height: 36px;
    }
    .am-ctrl-btn {
        width: 36px;
        height: 36px;
    }
    /* The chip row scrolls; a fade marks the side with more chips. */
    #filter-scroll[data-fade="end"] { -webkit-mask-image: linear-gradient(to right, transparent, #000 24px); mask-image: linear-gradient(to right, transparent, #000 24px); }
    #filter-scroll[data-fade="start"] { -webkit-mask-image: linear-gradient(to left, transparent, #000 24px); mask-image: linear-gradient(to left, transparent, #000 24px); }
    #filter-scroll[data-fade="both"] { -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
    .am-fdot {
        width: 6px;
        height: 6px;
    }
    .am-tb-btn {
        width: 40px;
        height: 40px;
    }
    .am-toolbar {
        border-radius: 10px;
    }
}

@media (max-width: 480px) {
    .am-fbtn {
        font-size: 11px;
        padding: 2px 7px;
        gap: 3px;
    }
}

/* Timeline paging: day dividers and the footer that opens the next page */
.am-tl-day { position: sticky; top: 0; z-index: 2; padding: 5px 16px 4px; font-size: 12px; font-weight: 800; letter-spacing: .03em; color: #64748b; background: rgba(255,255,255,.96); border-bottom: 1px solid #f1f5f9; }
.dark .am-tl-day { color: #94a3b8; background: rgba(15,23,42,.96); border-bottom-color: #1e293b; }
.am-tl-more { padding: 14px 16px 18px; text-align: center; font-size: 13px; color: #64748b; }
.dark .am-tl-more { color: #94a3b8; }
.am-tl-more button { font: inherit; font-weight: 700; color: #64748b; background: #f1f5f9; border: 0; border-radius: 8px; padding: 6px 14px; cursor: pointer; }
.am-tl-more button:hover { background: #e2e8f0; }
.dark .am-tl-more button { color: #cbd5e1; background: #1e293b; }
.dark .am-tl-more button:hover { background: #273449; }
.am-tl-end { color: #64748b; }
.dark .am-tl-end { color: #94a3b8; }

/* Tailwind's own [hidden] rule loses to any display set here; this one does not. */
[hidden] { display: none !important; }

/* ── Screen-reader only ──────────────────────────────────────────────────── */

.am-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── Focus rings ─────────────────────────────────────────────────────────── */

.am-fbtn:focus-visible, .am-ctrl-btn:focus-visible, .am-tb-btn:focus-visible, .am-tl-item:focus-visible,
.am-pop-btn:focus-visible, .am-push-btn:focus-visible, .am-chip-x:focus-visible, .am-tl-new:focus-visible,
#live-btn:focus-visible, #panel-toggle:focus-visible, #daily-summary:focus-visible, .am-datewrap:focus-within {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}
.am-tl-item:focus-visible { outline-offset: -2px; }

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .am-live-pulse, .am-toast, .am-toast.leaving { animation: none; }
}

/* ── City popup ──────────────────────────────────────────────────────────── */

.am-pop { direction: rtl; width: min(320px, 82vw); color: #0f172a; }
.dark .am-pop { color: #f1f5f9; }
.am-pop-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.am-pop-name { font-weight: 800; font-size: 16px; }
.am-pop-reg { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 13px; font-weight: 600; }
.am-pop-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid rgba(148,163,184,0.2); }
.am-pop-row:last-of-type { border-bottom: 0; }
.am-pop-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.am-pop-time { font-size: 13px; font-weight: 700; white-space: nowrap; }
.am-pop-label { font-size: 14px; flex: 1; color: #334155; }
.dark .am-pop-label { color: #cbd5e1; }
.am-pop-age { font-size: 12px; white-space: nowrap; color: #64748b; }
.dark .am-pop-age { color: #94a3b8; }
.am-pop-empty { margin: 4px 0 0; font-size: 14px; color: #64748b; }
.dark .am-pop-empty { color: #94a3b8; }
.am-pop-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(148,163,184,0.2); }
.am-pop-btn {
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
    min-height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(148,163,184,0.35);
    background: rgba(148,163,184,0.12);
    color: #334155;
    cursor: pointer;
}
.am-pop-btn:hover { background: rgba(148,163,184,0.22); }
.am-pop-btn:disabled { opacity: 0.5; cursor: default; }
.dark .am-pop-btn { color: #e2e8f0; }
.am-pop-btn-danger { color: #b91c1c; border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.1); }
.dark .am-pop-btn-danger { color: #fca5a5; }
.am-home-pop { width: min(240px, 78vw); }
.am-pop-lbl { display: block; font-size: 12px; font-weight: 700; color: #64748b; margin-bottom: 4px; }
.dark .am-pop-lbl { color: #94a3b8; }
.am-pop-input {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    font-size: 14px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #0f172a;
}
.dark .am-pop-input { background: #0f172a; color: #f1f5f9; border-color: #475569; }
.am-pop-input:focus { outline: 2px solid #60a5fa; outline-offset: 1px; }

/* ── Chips: followed cities and the timeline filters ─────────────────────── */

.am-chips { display: flex; flex-wrap: wrap; gap: 5px; min-height: 22px; }
.am-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px;
    padding-inline-start: 9px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    background: rgba(148,163,184,0.16);
    color: #334155;
    white-space: nowrap;
    max-width: 100%;
    line-height: 1.3;
}
.dark .am-chip { color: #e2e8f0; }
.am-chip > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.am-chip-x {
    font: inherit;
    font-size: 16px;
    line-height: 1;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: 0.7;
}
.am-chip-x:hover { opacity: 1; background: rgba(148,163,184,0.25); }
.am-chip-none { font-size: 13px; color: #64748b; }
.dark .am-chip-none { color: #94a3b8; }

/* ── Push panel ──────────────────────────────────────────────────────────── */

.am-push-status { margin: 0; font-size: 13px; line-height: 1.45; color: #475569; }
.dark .am-push-status { color: #cbd5e1; }
.am-push-ios { margin: 0; font-size: 12px; line-height: 1.5; color: #475569; background: rgba(148,163,184,0.14); border-radius: 8px; padding: 6px 8px; }
.dark .am-push-ios { color: #cbd5e1; }
.am-push-input {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    font-size: 14px;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #0f172a;
}
.dark .am-push-input { background: #0f172a; color: #f1f5f9; border-color: #475569; }
.am-push-input:focus { outline: 2px solid #60a5fa; outline-offset: 1px; }
.am-push-btn {
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    padding: 8px 14px;
    min-height: 40px;
    border-radius: 10px;
    border: 0;
    cursor: pointer;
    flex: 1;
}
.am-push-btn:disabled { opacity: 0.45; cursor: default; }
.am-push-on { background: #dc2626; color: #fff; }
.am-push-on:hover:not(:disabled) { background: #b91c1c; }
.am-push-off { background: rgba(148,163,184,0.18); color: #334155; }
.dark .am-push-off { color: #e2e8f0; }
.am-tb-btn.is-on { color: #ef4444; }
.dark .am-tb-btn.is-on { color: #f87171; }
.am-tb-btn.is-busy { opacity: 0.5; }
.am-tb-btn[aria-expanded="true"] { background: rgba(148,163,184,0.18); }

/* ── Search options ──────────────────────────────────────────────────────── */

.am-opt.is-active { background: rgba(148,163,184,0.2); }

/* ── Stats panel ─────────────────────────────────────────────────────────── */

.am-stats-sum { margin: 0 0 6px; font-size: 14px; font-weight: 800; color: #0f172a; }
.dark .am-stats-sum { color: #f1f5f9; }
.am-stats-svg { display: block; width: 100%; height: auto; }
.am-bar { fill: #ef4444; }
.am-bar.is-today { fill: #fbbf24; }
.am-stats-x { display: flex; justify-content: space-between; font-size: 11px; color: #64748b; margin-top: 2px; }
.dark .am-stats-x { color: #94a3b8; }
.am-stats-h { margin: 10px 0 4px; font-size: 12px; font-weight: 800; color: #64748b; }
.dark .am-stats-h { color: #94a3b8; }
.am-stats-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 34px; align-items: center; gap: 6px; font-size: 13px; padding: 2px 0; }
.am-stats-city { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #334155; }
.dark .am-stats-city { color: #cbd5e1; }
.am-stats-bar { height: 8px; border-radius: 4px; background: rgba(148,163,184,0.18); overflow: hidden; }
.am-stats-bar i { display: block; height: 100%; border-radius: 4px; background: #ef4444; }
.am-stats-n { text-align: left; font-weight: 700; color: #334155; font-variant-numeric: tabular-nums; }
.dark .am-stats-n { color: #e2e8f0; }
.am-stats-msg { margin: 0; font-size: 13px; color: #64748b; }
.dark .am-stats-msg { color: #94a3b8; }

/* ── Timeline tools row ──────────────────────────────────────────────────── */

.am-tl-tools { display: flex; align-items: center; gap: 6px; padding: 4px 12px 4px 8px; border-bottom: 1px solid #f1f5f9; min-height: 34px; }
.dark .am-tl-tools { border-bottom-color: #1e293b; }
.am-tl-tools-label { font-size: 12px; font-weight: 800; letter-spacing: .04em; color: #64748b; }
.dark .am-tl-tools-label { color: #94a3b8; }
.am-tl-new { font: inherit; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; border: 0; background: #dc2626; color: #fff; cursor: pointer; }
.am-datewrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 28px;
    border-radius: 8px;
    color: #64748b;
    cursor: pointer;
}
.am-datewrap:hover { background: rgba(148,163,184,0.15); }
.dark .am-datewrap { color: #94a3b8; }
.am-date-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* ── Coloured words ──────────────────────────────────────────────────────── */

/* A region's name, an alert's time, a countdown: the hue the map paints, carried
   in --c. Dots and the map keep the raw colour. Words take it darkened on light
   and lightened on dark, which holds every region and alert colour at 4.5:1 or
   better against its own tint (amber and lime were under 2:1 before). A browser
   without color-mix() gets the neutral tint and the ordinary text colour rather
   than an unreadable hue: with var() inside, a color-mix() it does not know would
   not fall back to an earlier declaration, it would drop the property outright. */
.am-tint { background: rgba(100,116,139,0.12); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .am-tint { background: color-mix(in srgb, var(--c) 12%, transparent); }
    .am-tint, .am-ink { color: color-mix(in srgb, var(--c) 55%, #000); }
    .dark .am-tint, .dark .am-ink { color: color-mix(in srgb, var(--c) 75%, #fff); }
}

/* ── Skip links ──────────────────────────────────────────────────────────── */

/* Clipped rather than parked off-screen, so no zoom, scroll or capture can
   bring one into view until it has focus. */
.am-skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.am-skip:focus {
    position: fixed;
    top: 6px;
    right: 6px;
    z-index: 1000;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    padding: 8px 14px;
    border-radius: 10px;
    background: #0f172a;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}
.dark .am-skip { background: #f8fafc; color: #0f172a; }

/* ── Footer link and the push panel's note ───────────────────────────────── */

.am-foot a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.am-foot a:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; border-radius: 2px; }
.am-push-note { margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: #475569; max-width: 290px; white-space: normal; }
.dark .am-push-note { color: #94a3b8; }

/* ── The narrowest phones ────────────────────────────────────────────────── */

/* At 320px (WCAG's reflow width, and a 1280px screen at 400% zoom) the title,
   the live button and the three controls add up to 12px more than the bar has,
   and the fullscreen button was cut in half. Below 360px the title text steps
   out of sight, still read by a screen reader, and the icon beside it stays. */
@media (max-width: 359px) {
    .am-topbar h1 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
}