/* ----------------------------------------------------------
   Signal Coverage Portal — refined technical aesthetic

   Color palette is a closed set (brand guideline) -- every color used
   anywhere in this file is one of these nine, or an alpha-blended
   variant of one of them:
     Purple:   #662E8F (dark/primary), #8E5FB7 (medium), #B392D6 (light)
     Lavender: #F0EAF4
     Gold:     #F5B01A (dark), #F4C669 (medium), #F4DDB0 (light)
     Neutral:  #FFFFFF, #000000
   There is no red/warm-alarm color in this palette, so error states use
   bold black instead of a hue-based signal.
   ---------------------------------------------------------- */

@font-face {
    font-family: 'Telenor';
    src: url('fonts/Telenor-Light.woff') format('woff'),
         url('fonts/Telenor-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Telenor';
    src: url('fonts/Telenor-Regular.woff') format('woff'),
         url('fonts/Telenor-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Telenor';
    src: url('fonts/Telenor-Bold.woff') format('woff'),
         url('fonts/Telenor-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg: #F0EAF4;
    --surface: rgba(255, 255, 255, 0.9);
    --surface-border: rgba(102, 46, 143, 0.14);
    --surface-border-strong: rgba(102, 46, 143, 0.28);
    --text: #000000;
    --text-dim: #662E8F;
    --text-faint: #8E5FB7;
    --accent: #662E8F;
    --accent-glow: rgba(102, 46, 143, 0.25);
    --accent-contrast: #ffffff;
    --accent-text: #662E8F;
    --accent-secondary: #F5B01A;
    --accent-secondary-contrast: #000000;
    --accent-secondary-glow: rgba(245, 176, 26, 0.3);
    /* No red in the palette -- errors read as bold black instead of a
       hue-based alarm color. */
    --danger: #000000;
    --danger-bg: rgba(0, 0, 0, 0.06);
    --danger-border: rgba(0, 0, 0, 0.35);
    --shadow: 0 28px 56px -14px rgba(102, 46, 143, 0.34),
              0 12px 24px -8px rgba(102, 46, 143, 0.22);
    --radius: 14px;
    --radius-sm: 8px;
    --footer-height: 44px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: 'Telenor', sans-serif;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

#map { position: absolute; inset: 0; z-index: 1; }

.topbar {
    position: fixed;
    top: 20px; left: 20px; right: 20px;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: var(--surface);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    max-width:1440px;
    margin: 0 auto;
}

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

.topbar__mark {
    flex-shrink: 0;
    height: 34px;
    width: auto;
    display: block;
}

/* Lets the subtitle truncate with an ellipsis instead of overflowing or
   forcing the topbar wider than the viewport on narrow phones. */
.topbar__title { min-width: 0; overflow: hidden; }

.topbar__title p {
    font-family: 'Telenor', sans-serif;
    font-size: 11px;
    color: var(--text-dim);
    letter-spacing: 0.02em;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lang-switch {
    flex-shrink: 0;
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 20px;
    border: 1px solid var(--surface-border-strong);
    background: rgba(102, 46, 143, 0.05);
}

.lang-switch__btn {
    font-family: 'Telenor', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-dim);
    background: transparent;
    border: none;
    border-radius: 16px;
    padding: 5px 10px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.lang-switch__btn:hover { color: var(--text); }

.lang-switch__btn.is-active {
    background: var(--accent);
    color: var(--accent-contrast);
}

.legend {
    position: fixed;
    bottom: calc(var(--footer-height) + 20px); right: 90px;
    z-index: 10;
    width: 300px;
    background: var(--surface);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    animation: legend-in 0.6s cubic-bezier(0.2, 0.9, 0.3, 1) 0.15s backwards;
}

@keyframes legend-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.legend__head {
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--surface-border);
}

.legend__eyebrow {
    font-family: 'Telenor', sans-serif;
    font-size: 10px; font-weight: 500;
    letter-spacing: 0.18em; color: var(--text-faint);
}

.legend__head h2 {
    margin-top: 6px;
    font-size: 17px; font-weight: 700;
    letter-spacing: -0.01em;
}

.legend__rows {
    padding: 8px 12px;
    max-height: 50vh;
    overflow-y: auto;
}

.legend-row {
    display: grid;
    grid-template-columns: 28px auto 1fr;
    align-items: center; gap: 12px;
    padding: 10px 8px;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}

.legend-row:hover { background: rgba(102, 46, 143, 0.05); }

.legend-row--toggle {
    cursor: pointer;
    user-select: none;
    outline: none;
}

.legend-row--toggle:focus-visible {
    box-shadow: 0 0 0 2px var(--accent-glow);
}

.legend-row--toggle.is-active .legend-row__swatch {
    background: var(--swatch-color);
    border-color: var(--swatch-color);
    box-shadow: 0 0 0 2px var(--accent-glow), 0 2px 4px rgba(0, 0, 0, 0.15);
}

.legend-row__swatch {
    width: 24px; height: 14px;
    border-radius: 4px;
    background: transparent;
    border: 1.5px solid var(--surface-border-strong);
    box-shadow: none;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.legend-row__speed { font-size: 13px; font-weight: 500; color: var(--text); }

.legend-row__tech {
    font-family: 'Telenor', sans-serif;
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.04em;
    padding: 3px 7px;
    border-radius: 4px;
    background: rgba(102, 46, 143, 0.06);
    border: 1px solid var(--surface-border-strong);
    color: var(--text-dim);
}

.legend__foot {
    padding: 14px 20px;
    border-top: 1px solid var(--surface-border);
    background: rgba(102, 46, 143, 0.04);
}

.opacity-control {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center; gap: 12px;
    font-family: 'Telenor', sans-serif;
    font-size: 11px; color: var(--text-dim);
    letter-spacing: 0.02em;
}

.opacity-control input[type="range"] {
    -webkit-appearance: none; appearance: none;
    height: 3px;
    background: rgba(102, 46, 143, 0.15);
    border-radius: 2px;
    cursor: pointer;
}

.opacity-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px rgba(102, 46, 143, 0.2), 0 2px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: box-shadow 0.15s;
}

.opacity-control input[type="range"]::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 5px rgba(102, 46, 143, 0.28), 0 2px 4px rgba(0, 0, 0, 0.25);
}

.opacity-control input[type="range"]::-moz-range-thumb {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--accent);
    border: none; cursor: pointer;
}

.opacity__value {
    color: var(--text);
    font-weight: 500;
    min-width: 36px;
    text-align: right;
}

.legend__note {
    font-family: 'Telenor', sans-serif;
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--text-faint);
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--surface-border);
}

.status-toast {
    position: fixed;
    bottom: calc(var(--footer-height) + 20px); left: 20px;
    z-index: 20;
    padding: 12px 18px;
    background: var(--surface);
    backdrop-filter: blur(18px);
    border: 1px solid var(--surface-border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    font-family: 'Telenor', sans-serif;
    font-size: 12px;
    color: var(--text-dim);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    max-width: 360px;
}

.status-toast.is-visible { opacity: 1; transform: translateY(0); }
.status-toast.is-error {
    border-color: var(--danger-border);
    background: var(--danger-bg);
    color: var(--danger);
    font-weight: 700;
}

.maplibregl-ctrl-bottom-right { bottom: calc(380px + var(--footer-height)) !important; }
.maplibregl-ctrl-attrib {
    background: var(--surface) !important;
    backdrop-filter: blur(8px);
    color: var(--text-dim) !important;
}
.maplibregl-ctrl-attrib a { color: var(--text) !important; }

.disclaimer-footer {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 15;
    /* No fixed height -- it's however tall the disclaimer text needs to
       be (varies by language and by how many lines it wraps to on a
       narrow screen). --footer-height is measured from this element's
       real rendered height by updateFooterHeight() in app.js and used
       via calc() by everything that needs to clear it, so that stays
       correct no matter how long the text is. */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    background: var(--surface);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 2px solid var(--accent-secondary);
    box-shadow: 0 -12px 28px -10px rgba(102, 46, 143, 0.3);
    text-align: center;
}

.disclaimer-footer p {
    font-family: 'Telenor', sans-serif;
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--text-dim);
    white-space: pre-line;
}

/* Round show/hide toggle for the legend -- desktop has room to show the
   legend permanently, so this only ever appears under the mobile
   breakpoint below. */
.legend-fab {
    display: none;
    position: fixed;
    z-index: 16;
    bottom: calc(var(--footer-height) + 20px);
    right: 20px;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-contrast);
    border: none;
    box-shadow: var(--shadow);
    font-family: 'Telenor', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 0.1s;
}

.legend-fab:active { transform: scale(0.95); }

@media (max-width: 600px) {
    .topbar { padding: 10px 14px; }
    .topbar__title p { font-size: 10px; }

    /* Permanently visible on desktop; on a phone it would cover most of
       the map, so it starts collapsed and the round button below toggles
       it. Bottom offset clears the button (64px) plus its own gaps. */
    .legend {
        display: none;
        width: calc(100% - 40px);
        bottom: calc(var(--footer-height) + 20px + 64px + 12px);
        right: 20px; left: 20px;
    }
    .legend.is-open { display: block; }
    .legend__rows { max-height: 38vh; }

    .legend-fab { display: flex; align-items: center; justify-content: center; }

    .maplibregl-ctrl-bottom-right { bottom: calc(340px + var(--footer-height)) !important; }

    .disclaimer-footer p { font-size: 10px; }
}