/* ============================================================
   slepk.lt — editorial-civic
   Deep navy + warm parchment + civil-defense red
   Display: Fraunces · Body: IBM Plex Sans · Numerals: IBM Plex Mono
   ============================================================ */

:root {
    /* Surface */
    --paper:        #F4EEDD;       /* warm parchment */
    --paper-2:      #EAE2CB;       /* second paper, cards */
    --paper-3:      #DCD2B5;       /* hairline tint */
    --ink:          #0B1220;       /* deep navy near-black */
    --ink-soft:     #1B263B;
    --mute:         #5C5645;
    --mute-2:       #877F66;
    --hairline:     rgba(11, 18, 32, 0.18);
    --hairline-2:   rgba(11, 18, 32, 0.08);

    /* Accents */
    --signal:       #C81D25;       /* civil-defense red */
    --signal-ink:   #FFFFFF;
    --gold:         #FDB81E;       /* Lithuanian yellow — live state only */
    --moss:         #2E6F4E;       /* "good" state */

    /* Typography */
    --font-display: 'Fraunces', 'Times New Roman', ui-serif, Georgia, serif;
    --font-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* Geometry */
    --rail-w:       300px;
    --bar-h:        76px;
    --foot-h:       36px;
    --gap:          16px;
    --radius:       2px;            /* near-zero — editorial, not bubbly */
}

[data-theme="dark"] {
    --paper:        #0A0F1A;
    --paper-2:      #111827;
    --paper-3:      #1A2436;
    --ink:          #F1ECDC;
    --ink-soft:     #D9D2BD;
    --mute:         #9AA3B5;
    --mute-2:       #6E7891;
    --hairline:     rgba(241, 236, 220, 0.16);
    --hairline-2:   rgba(241, 236, 220, 0.06);

    --signal:       #FF4554;
    --signal-ink:   #0A0F1A;
    --gold:         #FDB81E;
    --moss:         #66C497;
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Subtle topographic dot pattern as base, doesn't compete with map */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        radial-gradient(var(--hairline-2) 1px, transparent 1px);
    background-size: 22px 22px;
    background-position: 0 0;
    opacity: 0.6;
    mix-blend-mode: multiply;
}
[data-theme="dark"] body::before { mix-blend-mode: screen; }

a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--signal); }

::selection { background: var(--signal); color: var(--signal-ink); }

/* ---------- Masthead ---------- */

.masthead {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--bar-h);
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto auto;
    align-items: center;
    gap: 24px;
    padding: 0 22px;
    background: var(--paper);
    border-bottom: 1px solid var(--hairline);
    z-index: 1100;
}

.masthead__brand {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.masthead__mark {
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center; justify-content: center;
    color: var(--ink);
    border: 1px solid var(--hairline);
    background: var(--paper-2);
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.masthead__mark svg { width: 22px; height: 22px; }
.masthead__mark:hover { background: var(--ink); color: var(--paper); }
.masthead__mark:active { transform: translateY(1px); }

.masthead__words { min-width: 0; }
.masthead__eyebrow {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mute);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.masthead__title {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-weight: 600;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0;
    cursor: pointer;
    transition: color 160ms ease;
}
.masthead__title:hover { color: var(--signal); }

/* ---------- Status ribbon ---------- */

.masthead__ribbon {
    display: flex;
    align-items: stretch;
    gap: 0;
    border-left: 1px solid var(--hairline);
    border-right: 1px solid var(--hairline);
}
.ribbon__cell {
    padding: 6px 18px;
    border-right: 1px solid var(--hairline);
    min-width: 138px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ribbon__cell:last-child { border-right: 0; }
.ribbon__label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mute);
    display: flex; align-items: center; gap: 6px;
    white-space: nowrap;
}
.ribbon__value {
    font-family: var(--font-mono);
    font-feature-settings: 'tnum' 1, 'zero' 1;
    font-size: 18px;
    font-weight: 500;
    color: var(--ink);
    margin-top: 2px;
    letter-spacing: -0.01em;
}
.ribbon__cell--live .ribbon__value { color: var(--ink); }

.pulse-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 0 rgba(253, 184, 30, 0.6);
    animation: pulse 1.6s infinite;
    display: inline-block;
}
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(253, 184, 30, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(253, 184, 30, 0); }
    100% { box-shadow: 0 0 0 0 rgba(253, 184, 30, 0); }
}

/* ---------- Masthead controls ---------- */

.masthead__controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 8px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--hairline);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
    line-height: 1;
}
.btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; }

.icon-btn {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--hairline);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    border-radius: var(--radius);
    transition: background 140ms ease, color 140ms ease;
}
.icon-btn:hover { background: var(--ink); color: var(--paper); }

.lang-select {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    padding: 8px 30px 8px 12px;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    appearance: none; -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%230B1220' stroke-width='1.2'%3E%3Cpath d='M2 4l3 3 3-3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: background-color 140ms ease;
}
[data-theme="dark"] .lang-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%23F1ECDC' stroke-width='1.2'%3E%3Cpath d='M2 4l3 3 3-3'/%3E%3C/svg%3E");
}
.lang-select:hover { background-color: var(--paper-2); }
.lang-select option {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
}

/* ---------- Stage ---------- */

.stage {
    position: fixed;
    top: var(--bar-h);
    left: 0; right: 0;
    bottom: var(--foot-h);
    overflow: hidden;
}

#map {
    position: absolute;
    inset: 0;
    background: var(--paper-2);
    z-index: 1;
}
#map.is-dark { background: #0a0f1a; }

/* ---------- Left rail ---------- */

.rail {
    position: absolute;
    top: 18px; left: 18px; bottom: 18px;
    width: var(--rail-w);
    z-index: 1000;
    background: color-mix(in oklab, var(--paper) 92%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rail__section {
    padding: 18px 18px 18px;
    position: relative;
}
.rail__section + .rail__section { padding-top: 18px; }

.rail__rule {
    border: 0;
    border-top: 1px solid var(--hairline);
    margin: 0 18px;
}

.rail__eyebrow {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mute);
    margin-bottom: 10px;
}

.rail__heading,
.filter-control h3,
.info-panel h3 {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 14px 0;
}

.stat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 6px 0;
    padding: 6px 0;
    border-bottom: 1px dotted var(--hairline);
}
.stat:last-child { border-bottom: 0; }
.stat__label {
    font-size: 12px;
    color: var(--mute);
    letter-spacing: 0.02em;
}
.stat__value {
    font-family: var(--font-mono);
    font-feature-settings: 'tnum' 1, 'zero' 1;
    font-size: 18px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.01em;
}

/* ---------- Filter select inside rail ---------- */

#municipalityFilter {
    width: 100%;
    appearance: none; -webkit-appearance: none;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--ink);
    padding: 10px 32px 10px 12px;
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%230B1220' stroke-width='1.2'%3E%3Cpath d='M2 4l3 3 3-3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color 140ms ease, background-color 140ms ease;
    box-shadow: none;
}
#municipalityFilter:hover { border-color: var(--ink); }
#municipalityFilter:focus {
    outline: none;
    border-color: var(--signal);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--signal) 25%, transparent);
}
[data-theme="dark"] #municipalityFilter {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%23F1ECDC' stroke-width='1.2'%3E%3Cpath d='M2 4l3 3 3-3'/%3E%3C/svg%3E");
}

/* ---------- QR ---------- */

.qr-code-container { padding-bottom: 18px; }
.qr-code-title {
    font-size: 12px;
    color: var(--mute);
    margin-bottom: 10px;
    letter-spacing: 0.02em;
}
.qr-code-image img {
    width: 100%;
    height: auto;
    image-rendering: pixelated;
    background: var(--paper);
    padding: 6px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
}
[data-theme="dark"] .qr-code-image img {
    background: var(--paper-2);
    /* QR libs render black-on-white; invert in dark mode for legibility */
    filter: invert(1) hue-rotate(180deg);
}

/* ---------- Custom zoom (bottom-right) ---------- */

.custom-zoom-control {
    position: absolute;
    right: 18px; bottom: 18px;
    z-index: 1000;
    display: flex; flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    overflow: hidden;
}
.zoom-button {
    appearance: none; border: 0; background: transparent;
    width: 36px; height: 36px;
    font-family: var(--font-mono);
    font-size: 18px; font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 120ms ease, color 120ms ease;
}
.zoom-button + .zoom-button { border-top: 1px solid var(--hairline); }
.zoom-button:hover { background: var(--ink); color: var(--paper); }

/* ---------- Footer ---------- */

.footline {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: var(--foot-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    background: var(--ink);
    color: color-mix(in oklab, var(--paper) 85%, transparent);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    z-index: 1100;
    border-top: 1px solid var(--hairline);
}
.footline a { color: var(--paper); text-decoration: none; border-bottom: 1px dotted color-mix(in oklab, var(--paper) 40%, transparent); }
.footline a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.footline__left, .footline__right { display: flex; align-items: center; gap: 10px; }
.footline__mark { font-weight: 600; letter-spacing: 0.18em; color: var(--gold); }
.footline__sep { color: color-mix(in oklab, var(--paper) 35%, transparent); }
.footline__build { color: color-mix(in oklab, var(--paper) 55%, transparent); }

/* ---------- Leaflet overrides ---------- */

.leaflet-container {
    background: var(--paper-2);
    font-family: var(--font-body);
}

.leaflet-control-attribution {
    background: color-mix(in oklab, var(--paper) 88%, transparent) !important;
    color: var(--mute) !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.04em;
    border: 1px solid var(--hairline) !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    padding: 3px 8px !important;
    border-radius: var(--radius) 0 0 0;
}
.leaflet-control-attribution a { color: var(--ink) !important; }

.leaflet-popup-content-wrapper {
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    box-shadow: 0 18px 40px -16px rgba(11, 18, 32, 0.35);
    padding: 0;
}
.leaflet-popup-content {
    margin: 0;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.45;
}
.leaflet-popup-tip {
    background: var(--paper);
    border: 1px solid var(--hairline);
    box-shadow: none;
}
.leaflet-popup-close-button {
    color: var(--mute) !important;
    font-size: 18px !important;
    padding: 6px 8px !important;
    width: auto !important; height: auto !important;
    font-family: var(--font-mono) !important;
}
.leaflet-popup-close-button:hover { color: var(--signal) !important; }

/* Popup content (rendered by map.js / aircraft.js) */
.popup-content {
    padding: 14px 16px 14px;
    min-width: 240px;
}
.popup-content h4 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 10px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--hairline);
}
.popup-content p {
    margin: 4px 0;
    display: flex; gap: 8px;
    font-size: 12px;
}
.popup-content p strong {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mute);
    font-weight: 500;
    min-width: 86px;
}
.view-street-btn {
    display: inline-block;
    margin-top: 12px;
    width: 100%;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border: 0;
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 0;
    transition: background 140ms ease, color 140ms ease;
}
.view-street-btn:hover { background: var(--signal); color: var(--signal-ink); }

/* Leaflet zoom (default control hidden — we use our own) */
.leaflet-control-zoom { display: none !important; }

/* ---------- Marker clusters (custom rings) ---------- */

.marker-cluster-custom {
    background: transparent !important;
    border: 0 !important;
}
.cluster-ring {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.cluster-ring::before, .cluster-ring::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid var(--ink);
    background: var(--paper);
    opacity: 0.65;
}
.cluster-ring::after {
    inset: 5px;
    background: var(--ink);
    opacity: 0.95;
    border-color: transparent;
}
.cluster-ring--lg::after { background: var(--signal); }
.cluster-ring__num {
    position: relative;
    z-index: 1;
    font-family: var(--font-mono);
    font-feature-settings: 'tnum' 1;
    font-weight: 600;
    font-size: 12px;
    color: var(--paper);
    letter-spacing: -0.02em;
}
.cluster-ring--lg .cluster-ring__num { color: var(--signal-ink); }

/* Single shelter marker (custom DivIcon) */
.shelter-pin {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--signal);
    border: 2px solid var(--paper);
    box-shadow: 0 1px 4px rgba(11,18,32,0.3);
    transition: transform 120ms ease;
}
.shelter-pin:hover { transform: scale(1.25); }

/* ---------- Modals ---------- */

.modal {
    display: none;
    position: fixed; inset: 0;
    z-index: 2000;
    background: color-mix(in oklab, var(--ink) 70%, transparent);
    backdrop-filter: blur(4px);
}
.modal-content {
    background: var(--paper);
    color: var(--ink);
    margin: 8% auto;
    padding: 28px 32px 32px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    width: 92%;
    max-width: 560px;
    position: relative;
    box-shadow: 0 30px 80px -20px rgba(11,18,32,0.45);
}
.modal-content h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 26px;
    margin: 0 0 12px 0;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.modal-body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-soft);
}
.modal-body p { margin: 8px 0; }
.modal-body ul {
    margin: 10px 0 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--hairline);
}
.modal-body li {
    padding: 8px 0;
    border-bottom: 1px dotted var(--hairline);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.02em;
    color: var(--ink);
}
.modal-body li::before {
    content: '·';
    color: var(--signal);
    margin-right: 10px;
    font-weight: 700;
}
.close {
    position: absolute;
    top: 14px; right: 18px;
    font-family: var(--font-mono);
    font-size: 22px;
    line-height: 1;
    color: var(--mute);
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 4px;
}
.close:hover { color: var(--signal); }

.alert {
    background: color-mix(in oklab, var(--signal) 12%, var(--paper));
    border: 1px solid color-mix(in oklab, var(--signal) 35%, var(--hairline));
    color: var(--ink);
    font-size: 13px;
    padding: 10px 12px;
    border-radius: var(--radius);
}

/* ---------- Street View modal ---------- */

.street-view-modal {
    position: fixed; inset: 0;
    z-index: 2100;
    background: color-mix(in oklab, var(--ink) 80%, transparent);
}
.street-view-modal-content {
    position: relative;
    margin: 4% auto;
    width: 92%;
    height: 86%;
    background: var(--ink);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    overflow: hidden;
}
#street-view-container {
    width: 100%; height: 100%;
    min-height: 400px;
    background: var(--ink);
}
.street-view-close {
    position: absolute;
    right: 14px; top: 14px;
    color: var(--paper);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    z-index: 10000;
    background: rgba(11, 18, 32, 0.7);
    width: 36px; height: 36px;
    border: 1px solid rgba(241, 236, 220, 0.2);
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono);
}
.street-view-close:hover { background: var(--signal); border-color: var(--signal); }

/* ---------- Aircraft (style is set inline in aircraft.js, but popups use shared classes) ---------- */

.aircraft-popup .popup-content { min-width: 260px; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    :root { --rail-w: 280px; }
    .masthead__ribbon { display: none; }
}

@media (max-width: 720px) {
    :root { --bar-h: 60px; --foot-h: 32px; }
    .masthead { grid-template-columns: 1fr auto; padding: 0 14px; gap: 8px; }
    .masthead__eyebrow { display: none; }
    .masthead__title { font-size: 20px; }
    .info-button { display: none; }

    .rail {
        top: auto;
        left: 0; right: 0; bottom: var(--foot-h);
        width: auto;
        max-height: 50vh;
        border-radius: 0;
        border-left: 0; border-right: 0; border-bottom: 0;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .rail__section { flex: 0 0 auto; min-width: 240px; }
    .rail__rule { display: none; }
    .qr-code-container { display: none; }

    .custom-zoom-control { right: 12px; bottom: calc(50vh + var(--foot-h) + 12px); }

    .footline {
        font-size: 9px;
        padding: 0 10px;
    }
    .footline__right span:not(.footline__sep):not(.footline__build) { display: none; }
}

/* ---------- A11y: focus rings ---------- */

button:focus-visible,
select:focus-visible,
a:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 2px;
}