* {
    box-sizing: border-box;
}

:root {
    --panel-blue: #345f91;
    --panel-blue-dark: #183761;
    --panel-blue-light: #5f81a7;
    --header-blue: #162f62;
    --gold: #f3c35b;
    --cream: #fff4c9;
    --white: #ffffff;
    --shadow: #07132d;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    margin: 0;
    padding: 3vh 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family:
        "Courier New",
        Courier,
        monospace;

    color: var(--white);

    background:
        linear-gradient(
            to bottom,
            #050817 0%,
            #10183b 28%,
            #493978 54%,
            #ba625d 75%,
            #e6a058 100%
        );
}

.weather-screen {
    position: relative;

    width: min(1240px, 100%);
    overflow: hidden;

    border: 4px solid #121b45;
    border-radius: 4px;

    background: var(--panel-blue);

    box-shadow:
        0 0 0 2px #718ab0,
        0 18px 60px rgb(0 0 0 / 65%);
}

.weather-screen::after {
    position: absolute;
    inset: 0;

    pointer-events: none;
    content: "";

    background:
        repeating-linear-gradient(
            to bottom,
            rgb(255 255 255 / 2%) 0,
            rgb(255 255 255 / 2%) 1px,
            rgb(0 0 0 / 3%) 2px,
            rgb(0 0 0 / 3%) 4px
        );
}

.top-bar {
    position: relative;
    z-index: 1;

    min-height: 88px;
    padding: 8px 20px;

    display: grid;
    grid-template-columns: 125px 210px 1fr auto;
    align-items: center;
    gap: 16px;

    background:
        linear-gradient(
            to bottom,
            #273f81 0%,
            #14295d 55%,
            #07183f 100%
        );

    border-bottom: 4px solid var(--gold);
}

.station-badge {
    width: 112px;
    height: 68px;
    padding: 5px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    color: white;

    background:
        linear-gradient(
            to bottom,
            #4368b2,
            #10235d
        );

    border: 3px solid white;
    border-radius: 13px;

    box-shadow:
        inset 0 0 0 2px #152c68,
        3px 3px 0 rgb(0 0 0 / 35%);

    font-family: Arial, Helvetica, sans-serif;
    font-weight: 900;
    line-height: 0.95;
    text-align: center;
}

.badge-small {
    font-size: 0.58rem;
    letter-spacing: 0.08em;
}

.badge-large {
    margin: 2px 0;
    font-size: 0.88rem;
}

.section-title {
    color: var(--gold);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.15rem;
    line-height: 1.05;

    text-shadow: 2px 2px 0 #090e28;
}

.section-title span,
.section-title strong {
    display: block;
}

.section-title strong {
    color: var(--cream);
    font-size: 1.45rem;
}

.header-location {
    color: var(--cream);

    font-size: 1.35rem;
    font-weight: bold;
    text-align: center;

    text-shadow: 2px 2px 0 #090e28;
}

.date-time {
    min-width: 125px;

    color: white;
    font-size: 0.9rem;
    font-weight: bold;
    line-height: 1.25;
    text-align: right;

    text-shadow: 2px 2px 0 #0b1530;
}

.conditions-panel {
    position: relative;
    z-index: 1;

    min-height: 590px;
    padding: 28px 24px;

    display: grid;
    grid-template-columns:
        minmax(320px, 0.95fr)
        minmax(340px, 1.05fr)
        minmax(380px, 1.2fr);
    gap: 28px;

    background:
        radial-gradient(
            circle at 30% 15%,
            rgb(255 255 255 / 13%),
            transparent 35%
        ),
        linear-gradient(
            to bottom,
            var(--panel-blue-light),
            var(--panel-blue) 42%,
            var(--panel-blue-dark)
        );
}

.current-summary {
    min-height: 520px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border-right: 2px solid rgb(255 255 255 / 22%);
}

.temperature {
    color: white;

    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(5rem, 9vw, 7.8rem);
    font-weight: 700;
    line-height: 0.9;

    text-shadow:
        4px 4px 0 rgb(8 27 65 / 70%);
}

.description {
    margin-top: 20px;

    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;

    text-shadow: 2px 2px 0 #132b53;
}

.weather-symbol {
    min-height: 92px;
    margin-top: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 4.3rem;
    line-height: 1;

    filter: drop-shadow(4px 5px 0 rgb(0 0 0 / 30%));
}

.location-column {
    align-self: center;
}

.weather-details {
    margin: 0;
}

.weather-details > div {
    min-height: 48px;
    padding: 10px 2px;

    display: grid;
    grid-template-columns: 145px 1fr;
    align-items: center;
    gap: 18px;

    border-bottom: 1px solid rgb(255 255 255 / 18%);
}

.weather-details dt {
    color: var(--cream);
    font-weight: bold;
}

.weather-details dd {
    margin: 0;

    color: white;
    font-weight: bold;
    text-align: right;

    text-shadow: 2px 2px 0 #13254b;
}

.air-quality-section {
    margin-top: 28px;
}

.air-quality-section h2 {
    margin: 0 0 12px;

    color: var(--cream);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.15rem;
    text-align: center;
    text-transform: uppercase;

    text-shadow: 2px 2px 0 #13254b;
}

.aqi-card {
    min-height: 96px;
    padding: 10px 16px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border: 3px solid rgb(255 255 255 / 75%);
    border-radius: 4px;

    color: #111;

    box-shadow:
        inset 0 0 0 2px rgb(0 0 0 / 18%),
        3px 4px 0 rgb(0 0 0 / 25%);

    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

.aqi-number {
    font-size: 2.6rem;
    font-weight: 900;
    line-height: 1;
}

.aqi-category {
    margin-top: 6px;

    font-size: 0.95rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.aqi-health-message {
    max-width: 520px;
    margin: 8px auto 0;

    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.particle-readings {
    margin-top: 12px;

    display: flex;
    justify-content: center;
    gap: 28px;

    color: white;
    font-size: 0.85rem;
}

.aqi-legend {
    margin-top: 16px;
    padding-top: 12px;

    border-top: 1px solid rgb(255 255 255 / 20%);
}

.legend-item {
    min-height: 26px;

    display: grid;
    grid-template-columns: 18px 1fr auto;
    align-items: center;
    gap: 9px;

    color: white;
    font-size: 0.75rem;
}

.legend-color {
    width: 14px;
    height: 14px;

    display: inline-block;

    border: 1px solid rgb(255 255 255 / 75%);
    box-shadow: 1px 1px 0 rgb(0 0 0 / 30%);
}

.aqi-good {
    background: #00e400;
}

.aqi-moderate {
    background: #ffff00;
}

.aqi-sensitive {
    background: #ff7e00;
}

.aqi-unhealthy {
    color: white;
    background: #ff0000;
}

.aqi-very-unhealthy {
    color: white;
    background: #8f3f97;
}

.aqi-hazardous {
    color: white;
    background: #7e0023;
}

.aqi-unavailable {
    color: white;
    background: #777;
}

.legend-active {
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 700;
}

.legend-active .legend-color {
    outline: 2px solid white;
    outline-offset: 2px;
}

/* Live radar */

.radar-panel {
    width: 100%;
    margin-top: 18px;

    display: flex;
    flex-direction: column;
    align-items: center;

    transform: translateX(-11px);
}

.radar-panel h2 {
    margin: 0 0 7px;

    color: var(--cream);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
    text-align: center;
    text-transform: uppercase;

    text-shadow: 2px 2px 0 #13254b;
}

.radar-map-wrap {
    position: relative;
    overflow: hidden;

    width: 300px;
    height: 235px;

    border: 2px solid rgb(220 235 255 / 80%);
    border-radius: 6px;

    background: #15294e;

    box-shadow:
        inset 0 0 12px rgb(255 255 255 / 8%),
        3px 4px 0 rgb(0 0 0 / 22%);
}

#radarMap {
    width: 100%;
    height: 100%;
}

.radar-loading {
    position: absolute;
    inset: 0;
    z-index: 700;

    display: grid;
    place-items: center;
    padding: 18px;

    color: white;
    background: rgb(10 28 57 / 78%);

    font-size: 0.75rem;
    font-weight: bold;
    text-align: center;
}

.radar-loading[hidden] {
    display:none;
}

.radar-time-bar {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 650;

    min-height: 31px;
    padding: 4px 6px 4px 10px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    color: white;
    background: rgb(7 20 45 / 82%);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
}

#radarPlayButton {
    width: 31px;
    height: 23px;
    padding: 0;

    color: white;
    background: #264f82;

    border: 1px solid rgb(255 255 255 / 60%);
    border-radius: 3px;

    cursor: pointer;

    font-size: 0.65rem;
    line-height: 1;
}

#radarPlayButton:hover {
    background: #356ca8;
}

.radar-credit {
    margin-top: 5px;

    color: rgb(255 255 255 / 78%);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.62rem;
    text-align: center;
}

.radar-credit a {
    color: var(--cream);
}

.radar-panel .leaflet-control-attribution {
    font-size: 7px;
}

.radar-panel .leaflet-control-zoom a {
    width: 24px;
    height: 24px;
    line-height: 24px;
}


.radar-expand-button {
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 750;

    width: 29px;
    height: 29px;
    padding: 0;

    display: grid;
    place-items: center;

    color: white;
    background: rgb(20 48 89 / 88%);

    border: 1px solid rgb(255 255 255 / 72%);
    border-radius: 4px;

    box-shadow: 2px 2px 0 rgb(0 0 0 / 28%);

    cursor: pointer;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 1;
}

.radar-expand-button:hover {
    background: #356ca8;
}

.radar-expand-button:focus-visible,
.radar-modal-close:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}

.radar-modal[hidden] {
    display: none;
}

.radar-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;

    padding: 32px;

    display: grid;
    place-items: center;

    background: rgb(2 8 22 / 76%);
    backdrop-filter: blur(3px);
}

.radar-modal-dialog {
    width: min(1120px, 94vw);
    max-height: 94vh;
    overflow: hidden;

    border: 3px solid rgb(190 212 240 / 72%);
    border-radius: 8px;

    background:
        linear-gradient(
            to bottom,
            #254f82,
            #122f59
        );

    box-shadow:
        0 0 0 2px #14284f,
        0 24px 80px rgb(0 0 0 / 72%);
}

.radar-modal-header {
    min-height: 52px;
    padding: 10px 12px 10px 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    border-bottom: 2px solid var(--gold);

    background:
        linear-gradient(
            to bottom,
            #273f81,
            #14295d
        );
}

.radar-modal-header h2 {
    margin: 0;

    color: var(--cream);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    text-transform: uppercase;

    text-shadow: 2px 2px 0 #090e28;
}

.radar-modal-close {
    width: 34px;
    height: 30px;
    padding: 0;

    color: white;
    background: #264f82;

    border: 1px solid rgb(255 255 255 / 65%);
    border-radius: 4px;

    cursor: pointer;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 1;
}

.radar-modal-close:hover {
    background: #356ca8;
}

.radar-modal-body {
    padding: 14px;

    display: grid;
    place-items: center;
}

.radar-map-wrap-expanded {
    width: 100%;
    height: min(74vh, 760px);

    border-radius: 4px;

    transform: none;
}

body.radar-modal-open {
    overflow: hidden;
}

@media (max-width: 700px) {
    .radar-modal {
        padding: 12px;
    }

    .radar-modal-dialog {
        width: 100%;
        max-height: 96vh;
    }

    .radar-modal-body {
        padding: 8px;
    }

    .radar-map-wrap-expanded {
        height: 74vh;
    }
}

/* Forecast panel */

.forecast-panel {
    height: 100%;
    min-height: 520px;
    overflow: hidden;

    align-self: stretch;

    display: flex;
    flex-direction: column;

    border: 2px solid rgb(190 212 240 / 48%);
    border-radius: 7px;

    background:
        linear-gradient(
            to bottom,
            rgb(26 61 110 / 78%),
            rgb(18 48 89 / 88%)
        );

    box-shadow:
        inset 0 0 18px rgb(255 255 255 / 5%),
        3px 4px 0 rgb(0 0 0 / 20%);
}

.forecast-panel h2 {
    min-height: 45px;
    margin: 0;
    padding: 12px;

    color: white;

    border-bottom: 1px solid rgb(255 255 255 / 22%);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    text-align: center;
    text-transform: uppercase;

    text-shadow: 2px 2px 0 #10254a;
}

.forecast-rows {
    flex: 1;

    display: flex;
    flex-direction: column;

    padding: 0 14px;
}

.forecast-row {
    flex: 1;
    min-height: 74px;
    padding: 6px 4px;

    display: grid;
    grid-template-columns:
        minmax(74px, 0.9fr)
        72px
        58px
        58px
        minmax(62px, 0.8fr);
    align-items: center;
    gap: 5px;

    border-bottom: 1px solid rgb(255 255 255 / 17%);
}

.forecast-date strong,
.forecast-date span {
    display: block;
}

.forecast-date strong {
    color: white;
    font-size: 1rem;
}

.forecast-date span {
    margin-top: 3px;

    color: var(--cream);
    font-size: 0.67rem;
    font-weight: bold;
}

.forecast-icon {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.6rem;
    line-height: 1;
    text-align: center;

    filter: drop-shadow(2px 3px 0 rgb(0 0 0 / 30%));
}

.forecast-high {
    color: white;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.45rem;
    font-weight: 900;
    text-align: center;

    text-shadow: 2px 2px 0 #11264c;
}

.forecast-low {
    color: #8fc1ff;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    text-align: center;

    text-shadow: 2px 2px 0 #11264c;
}

.forecast-rain {
    color: white;
    font-size: 0.78rem;
    font-weight: bold;
    text-align: right;
}

.rain-drop {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.85rem;
}

.forecast-footer {
    min-height: 40px;
    padding: 10px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;

    color: white;

    border-top: 1px solid rgb(255 255 255 / 12%);

    font-size: 0.72rem;
    font-weight: bold;
    text-align: center;
}

.forecast-footer span {
    color: #9dc5f5;
}

.ticker {
    position: relative;
    z-index: 1;

    min-height: 62px;
    padding: 0 18px;

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;

    color: white;

    background:
        linear-gradient(
            to bottom,
            #214e89,
            #17376b
        );

    border-top: 3px solid #7694b9;

    font-size: 0.85rem;
    font-weight: bold;
}

.ticker > span:first-child {
    color: var(--cream);
}

.ticker-message {
    overflow: hidden;

    white-space: nowrap;
    text-align: center;
}

.ticker-indicator {
    width: 26px;
    height: 26px;

    display: grid;
    place-items: center;

    color: #13244a;
    background: #66df58;
    border: 2px solid #18385f;

    font-family: Arial, Helvetica, sans-serif;
}

.empty-state {
    min-height: 400px;
    padding: 60px 30px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            to bottom,
            var(--panel-blue-light),
            var(--panel-blue-dark)
        );

    text-align: center;
}

@media (max-width: 1050px) {
    .top-bar {
        grid-template-columns: 115px 190px 1fr auto;
    }

    .conditions-panel {
        grid-template-columns:
            minmax(210px, 0.8fr)
            minmax(330px, 1.2fr);
    }

    .forecast-panel {
        grid-column: 1 / -1;

        width: min(650px, 100%);
        height: auto;
        min-height: auto;

        align-self: center;
        justify-self: center;
    }

    .forecast-row {
        flex: none;
        min-height: 74px;
    }
}

@media (max-width: 700px) {
    body {
        padding: 12px;
        align-items: flex-start;
    }

    .top-bar {
        grid-template-columns: 100px 1fr;
    }

    .station-badge {
        width: 94px;
    }

    .header-location {
        grid-column: 1 / -1;
    }

    .date-time {
        grid-column: 1 / -1;

        width: 100%;
        text-align: center;
    }

    .conditions-panel {
        padding: 28px 18px;
        grid-template-columns: 1fr;
    }

    .current-summary {
        min-height: 340px;
        padding-bottom: 28px;

        border-right: 0;
        border-bottom: 2px solid rgb(255 255 255 / 22%);
    }

    .weather-details > div {
        grid-template-columns: 120px 1fr;
    }

    .forecast-panel {
        grid-column: auto;
    }

    .forecast-row {
        grid-template-columns:
            minmax(65px, 0.9fr)
            55px
            48px
            48px
            minmax(56px, 0.8fr);
    }

    .forecast-icon {
        font-size: 1.8rem;
    }

    .forecast-high,
    .forecast-low {
        font-size: 1.1rem;
    }

    .ticker {
        grid-template-columns: 1fr auto;
    }

    .ticker > span:first-child {
        display: none;
    }

    .ticker-message {
        text-align: left;
    }

    .radar-panel {
        width: min(330px, 100%);
    }
}