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

body {
    font-family: Arial, sans-serif;
    background-color: #140c43;
    color: #e6e6e6;
    /* #121826 - original */
}

.header {
    background-image: url('images/header.jpg');
    padding: 20px;
    text-align: left;
}


main {
    padding: 20px 20px 100px;
    max-width: 1350px;
    margin: 0 auto;


}

.location-input {
        display: grid;
        grid-template-columns: 1fr auto 1fr; /* left spacer / content / right spacer */
        align-items: center;
        padding: 20px;
}

.data-credit {
    font-size: 0.6em;
    opacity: 0.6;
    margin: 1px 0 0;
}

.button-group {
    grid-column: 2;
    justify-self: center;
    display: flex;
    gap: 1px;
}

input {
    padding: 2px;
    border-radius: 2px;
    border: 1px solid #ccc;
    width: 100px;
}

.btn {
    display: inline-block; /* lets a link accept padding/width like a button */
    text-decoration: none;
    color: white;
    background-color: #295aac;
    padding: 10px 40px;

    cursor: pointer;
    transition: all 0.2s ease;
}

.btn:hover {
    background-color: #180d58;
}

hr {
    border: none;          /* removes the default 3D-beveled look */
    border-top: 1px solid #3a4358;  /* just a clean single line, matches your dark palette */
    margin: 1px 0;
}

button {
    padding: 2px 5px;
    border-radius: 2px;
    border: 1px solid #ccc;
    cursor: pointer;
}

.site-title a {
    color: inherit;
    text-decoration: none;
}

/* Forecast Card*/

.day-card{
    width: 150px;
    min-height: 170px;
    background-color: #C7C7C7;
    border: 2px solid transparent;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    border-radius: 15px;
    padding: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #1B1F3B;
    position: relative;
    }

.day-card:hover,
.day-card:focus-within,
.day-card.alert-open {
    z-index: 5;
}

.card-title {
    color: #4A5068;
     }

.card-header {
    text-align: center;
}



.card-image {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.card-body {
    display: flex;
    flex-direction: column;   /* stack items top to bottom */
    align-items: center;      /* center them horizontally */
    gap: 6px;                 /* space between each item */
}

.card-body p {
    margin: 0;                /* paragraphs have default margins; remove them so gap controls spacing */
}

.precip-chance {
    font-size: 0.8em;         /* smaller than the surrounding text */
    min-height: 1em;
    color: inherit;
}

#forecast-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, 150px);
    gap: 12px;
}


[hidden] {
    display: none !important;
}


/* only toggleable cards look clickable */
.toggleable {
    cursor: pointer;
}

/* only cards that can actually toggle react to the mouse */
.toggleable:hover {
    border-color: #16A677;                        /* the dark navy from the text */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);   /* soft shadow underneath */
    transform: translateY(-2px);                  /* lift the card slightly */
}

/* brief "pressed" feedback while clicking */
.toggleable:active {
    transform: translateY(0);
}

.temps {
    display: flex;
    align-items: baseline;   /* lines the numbers up along their text baseline */
    justify-content: center;
    gap: 8px;
    white-space: nowrap;     /* keeps both temps on one line */
}

/* default (day view): high emphasized */
.temp-high { font-size: 1.25em; font-weight: bold; color: #B03A2E;}
.temp-low  { font-size: 1em; font-weight: normal; opacity: 0.85; color: #1F4FA0;}

/* night view: low emphasized, high steps back */
.night-view .temp-high { font-size: 1em; font-weight: normal; opacity: 0.85; }
.night-view .temp-low  { font-size: 1.25em; font-weight: bold; opacity: 1; }

.card-footer {
    margin: 1px -5px -5px;              /* negative margins cancel the card's 5px padding,
                                           so the tray reaches the card's edges */
    padding: 1px 1px;
    background-color: #B5B5B5;          /* a step darker than the card */
    border-top: 1px solid rgba(27, 31, 59, 0.25);   /* thin navy separator */
    border-radius: 0 0 13px 13px;       /* match the card's rounded bottom corners */
}

.card-footer-risks {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    height: 28px;                       /* fixed height: same on every card, empty or not */
}

.risk-symbol {
    display: inline-flex;
    width: 25px;
    height: 25px;
    filter: saturate(1) brightness(0.95);
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.risk-symbol svg {
    width: 100%;
    height: 100%;
}

/* search results */

.search-box {
    position: relative;        /* the dropdown positions itself against this box */
    display: inline-block;
}

.suggestions {
    position: absolute;        /* float over the page instead of pushing content down */
    top: 100%;                 /* start right below the input */
    left: 0;
    right: 0;
    z-index: 10;               /* sit above other content */
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    background: #FFFFFF;
    border: 1px solid #1B1F3B;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    max-height: 280px;
    overflow-y: auto;          /* scroll if the list is long */
}

.suggestions li {
    padding: 2px 3px;
    color: #1B1F3B;
    cursor: pointer;
}

.suggestions li.highlighted {
    background: #DCE3F0;
}

.suggestions li.status {
    color: #4A5068;
    font-style: italic;
    cursor: default;
}

.alert-area {
    position: absolute;
    top: 6px;
    right: 8px;
}

.alert-badge {
    width: 20px;
    height: 20px;
    padding: 0;                         /* undo the general button styles */
    border: 1px solid rgba(41, 24, 24, 0.6);
    border-radius: 50%;                 /* a circle */
    font-weight: bold;
    font-size: 13px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.alert-list {
    display: none;                      /* hidden until hovered, focused, or tapped */
    position: absolute;
    top: 100%;                          /* directly under the badge, no gap */
    right: 0;                           /* extends to the left, staying near the card */
    width: 220px;
    margin: 0;
    padding: 6px 8px;
    list-style: none;
    background: #FFFFFF;
    color: #1B1F3B;
    border: 1px solid #1B1F3B;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    text-align: left;
    font-size: 0.8em;
    z-index: 20;
}

.alert-area:hover .alert-list,
.alert-area:focus-within .alert-list,
.alert-area.open .alert-list {
    display: block;
}

.alert-list li {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    padding: 3px 0;
}

.alert-dot {
    flex: none;                         /* never shrink, even next to long names */
    width: 10px;
    height: 10px;
    margin-top: 2px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.4);
}

.alert-until {
    opacity: 0.7;
}

/* ===== detail panel ===== */

.detail-panel {
    margin-top: 0px;
    background-color: #C7C7C7;      /* same as the cards */
    color: #1B1F3B;
    border-radius: 15px;
    padding: 12px;
}



/* =====================================================================
   PANEL BUTTONS: CONTROL PANEL
   Change the values here; everything below uses them.
   ===================================================================== */

.detail-panel {
    /* ----- colors (shared by tabs, chart buttons, and arrows) ----- */
    --btn-bg:            #E2E2E2;   /* normal background */
    --btn-bg-hover:      #4167AB;   /* background under the mouse */
    --btn-text:          #1B1F3B;   /* normal text */
    --btn-border:        rgba(27, 31, 59, 0.3);
    --btn-selected-bg:   #295aac;   /* the chosen tab / chart */
    --btn-selected-text: #FFFFFF;

    /* ----- tabs (Hourly / Risks) ----- */
    --tab-padding:       12px 16px;  /* vertical horizontal */
    --tab-font-size:     1em;
    --tab-radius:        1px;
    --tab-gap:           2px;       /* space between tabs */

    /* ----- option buttons (Temperature / Precipitation / ...) ----- */
    --chart-btn-padding:   4px 10px;
    --chart-btn-font-size: 0.85em;
    --chart-btn-radius:    6px;
    --chart-btn-gap:       4px;

    /* ----- day arrows ( ‹ › ) ----- */
    --arrow-size:        32px;      /* width and height */
    --arrow-font-size:   1.3em;
    --arrow-radius:      50%;       /* 50% = circle, 6px = rounded square */

    /* ----- tab content ----- */
    --tab-content-height: 500px;    /* tall enough for the largest tab */
}


/* =====================================================================
   RULES (no need to edit below, unless changing the design itself)
   ===================================================================== */

/* ----- shared look for every panel button ----- */
.tab-option,
.panel-option,
.day-arrow {
    background-color: var(--btn-bg);
    color: var(--btn-text);
    border: 1px solid var(--btn-border);
    cursor: pointer;
}

.tab-option:hover,
.panel-option:hover,
.day-arrow:hover:not(:disabled) {
    background-color: var(--btn-bg-hover);
}

.tab-option.selected,
.panel-option.selected {
    background-color: var(--btn-selected-bg);
    border-color: var(--btn-selected-bg);
    color: var(--btn-selected-text);
}

/* ----- tabs: split the full width evenly ----- */
.detail-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--tab-gap);
    margin-bottom: 10px;
}

.tab-option {
    padding: var(--tab-padding);
    font-size: var(--tab-font-size);
    border-radius: var(--tab-radius);
}

/* ----- option buttons (Temperature / Precipitation / ..., Tornado / Hail / ...) ----- */
.panel-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--chart-btn-gap);
    margin-bottom: 8px;
}

.panel-option {
    padding: var(--chart-btn-padding);
    font-size: var(--chart-btn-font-size);
    border-radius: var(--chart-btn-radius);
}

/* an empty option row, kept only to hold its space (keepOptionSpace) */
.panel-options.empty {
    visibility: hidden;
}

/* an option that doesn't exist for this day (e.g. Tornado on day 5) */
.panel-option:disabled {
    background-color: var(--btn-bg);   /* no hover color */
    opacity: 0.4;
    cursor: default;
}

/* ----- day navigator: ‹ Fri, Oct 2 › ----- */
.day-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;            /* room for the note hanging below the label */
}

.day-arrow {
    width: var(--arrow-size);
    height: var(--arrow-size);
    padding: 0;
    border-radius: var(--arrow-radius);
    font-size: var(--arrow-font-size);
    line-height: 1;
}

.day-arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

.day-nav-text {
    position: relative;             /* the note positions itself against this */
    min-width: 120px;
    text-align: center;
}

.day-label {
    font-weight: bold;
}

.day-note {
    position: absolute;             /* out of the layout: never moves the label */
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 0.75em;
    opacity: 0.7;
}

/* ===== section headings ===== */

/* shared look for "Extended Forecast for ..." and "Details" */
#location-name,
.section-title {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 12px;
}

.details-section {
    margin-top: 40px;          /* space between the cards and the Details section */
}

/* ===== Risks tab ===== */

.risk-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.chart-wrap {
    position: relative;
    height: 450px;      /* ← the chart's height */
}

.risk-row {
    display: grid;
    grid-template-columns: 32px 170px 1fr;   /* icon | name | level */
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-bottom: 1px solid rgba(27, 31, 59, 0.12);
    opacity: 0.55;             /* rows without a risk step back... */
}

/* a row that's part of the one above (Tornado / Hail / Damaging wind under Severe storms):
   shifted right, with the name column narrowed by the same amount so the levels
   still line up with every other row */
.risk-row.sub {
    --risk-indent: 28px;        /* ← how far sub-rows are pushed in */
    padding-left: calc(8px + var(--risk-indent));
    grid-template-columns: 32px calc(170px - var(--risk-indent)) 1fr;
    font-size: 0.92em;
    border-bottom-style: dotted;
}

.risk-row.active {
    opacity: 1;                /* ...so active risks stand out */
}

.risk-row.focused {
    background-color: rgba(41, 90, 172, 0.15);   /* the row whose symbol was clicked */
    border-radius: 6px;
}

.risk-row-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
}

.risk-row-icon svg {
    width: 100%;
    height: 100%;
}

.risk-row-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(27, 31, 59, 0.5);   /* an empty ring when there's no risk */
}

.risk-row-name {
    font-weight: bold;
}

.risk-row.active .risk-row-level {
    font-weight: bold;
}

/* everything under the day navigator: option buttons + the tab's content.
   One fixed minimum height for every tab, so the page doesn't jump when switching. */
.panel-body {
    min-height: var(--tab-content-height);
}


/* ===== outlook maps (maps.html, drawn by outlook-map.js) ===== */

.outlook-map {
    max-width: 1000px;          /* ← the map's largest size */
    margin: 0 auto;
}

/* "Severe Storm Outlook"  ...  "Issued Fri 3:56 PM EDT · Valid ..." */
.map-heading {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 4px 16px;
    margin-bottom: 6px;
}

.map-title {
    font-weight: bold;
}

.map-times {
    font-size: 0.85em;
    opacity: 0.8;
}

.map-frame {
    position: relative;         /* the message centers itself on this */
    border: 1px solid rgba(27, 31, 59, 0.3);
    border-radius: 10px;
    overflow: hidden;           /* keeps the map inside the rounded corners */
}

.map-frame svg {
    display: block;
    width: 100%;
    height: auto;
}

.map-frame .water   { fill: #C9D6E3; }
.map-frame .land    { fill: #F2F2EE; }
.map-frame .borders { fill: none; stroke: rgba(27, 31, 59, 0.45); stroke-width: 0.8; }
.map-frame .coast   { fill: none; stroke: rgba(27, 31, 59, 0.85); stroke-width: 1.2; }
.map-frame .counties  { fill: none; stroke: rgba(27, 31, 59, 0.22); stroke-width: 0.5; }  /* zoomed maps only */
.map-frame .neighbors { fill: #E0E0DA; stroke: rgba(27, 31, 59, 0.45); stroke-width: 0.8; }  /* Canada, Mexico (zoomed maps) */

/* Alaska / Hawaii insets on U.S. maps (Hazards, Temperature). Their size, position
   and padding are settings at the top of outlook-map.js (INSETS). */
.map-frame .inset-frame { fill: none; stroke: rgba(27, 31, 59, 0.55); stroke-width: 1; rx: 4px; }
.map-frame .inset-label { font: bold 13px Arial, sans-serif; fill: #1B1F3B; opacity: 0.75; }

/* the location's dot on zoomed maps (its size is r="3.5" in outlook-map.js) */
.map-frame .location-dot { fill: #000000; }

/* zoomed maps (the Forecast page's Maps section) */
.outlook-map.zoomed {
    max-width: 1000px;          /* ← the zoomed map's largest size */
}

/* fade the old map while the next one loads */
.outlook-map.loading svg {
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

/* "Loading map...", "Predictability Too Low", etc., in the middle of the map */
.map-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(27, 31, 59, 0.3);
    border-radius: 6px;
    font-weight: bold;
    text-align: center;
}

/* "This outlook doesn't cover Alaska." sits at the top, clear of the location's dot */
.map-message.top {
    top: 12px;
    transform: translateX(-50%);
}

.map-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    font-size: 0.85em;
}

.map-legend li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.map-swatch {
    width: 22px;
    height: 14px;
    border: 1px solid rgba(27, 31, 59, 0.5);
    border-radius: 3px;
}

/* ----- bar legends: a scale as one bar of colors (outlook-map.js, legendBar) ----- */
.map-legend li.map-bar-item {
    flex-basis: 100%;
    flex-direction: column;
    gap: 3px;
    min-width: 0;           /* never wider than the map */
    max-width: 100%;
}
.map-bar-title { opacity: 0.85; }
.map-bar-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    width: 100%;
}
.map-bar-end {
    font-weight: bold;
    line-height: 18px;
    white-space: nowrap;
}
.map-bar-body {
    max-width: 100%;
    min-width: 0;           /* lets the bar shrink on narrow screens */
    flex-shrink: 1;
}
.map-bar {
    display: flex;
    height: 16px;
    border: 1px solid rgba(27, 31, 59, 0.55);
    border-radius: 4px;
    overflow: hidden;
}
.map-bar span { flex: 1; }
/* labels inside the colors (short scales, e.g. the chance maps) */
.map-bar.inside { height: 20px; }
.map-bar.inside span {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1B1F3B;
    font-size: 0.9em;
    white-space: nowrap;
    overflow: hidden;
}
.map-bar.inside span.on-dark { color: #FFFFFF; }
/* numbers under the bar, each on its line between colors */
.map-bar-ticks {
    position: relative;
    height: 18px;
}
.map-bar-ticks b {
    position: absolute;
    top: 5px;
    transform: translateX(-50%);
    font-weight: normal;
    white-space: nowrap;
}
.map-bar-ticks b::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -5px;
    height: 4px;
    border-left: 1px solid currentColor;
}
/* phones: every other number, and the end words under the bar's two ends */
@media (max-width: 640px) {
    .map-bar-ticks b.minor { display: none; }
    .map-bar.inside span { font-size: 0.8em; }
    .map-bar.inside span.minor { color: transparent; }
    .map-bar-row { flex-wrap: wrap; gap: 2px 10px; }
    .map-bar-body { order: 0; flex-basis: 100%; }
    .map-bar-end { order: 1; flex: 1; font-size: 0.9em; }
    .map-bar-end:last-child { text-align: right; }
}

/* ----- SPC intensity hatching (tornado / hail / wind maps) -----
   Level 1 dashed diagonal lines, level 2 solid lines, level 3 crosshatch, all black,
   drawn over the colored percentages. The line spacing is set in outlook-map.js
   (the patterns' width/height, 7). */
.map-frame .hatch line   { stroke: #000; stroke-width: 1.4; }
.map-frame .hatch-1 line { stroke-dasharray: 2.5 2; }
.map-frame .hatched-area { stroke: #000; stroke-width: 1.2; }
.map-frame .hatched-1    { stroke-dasharray: 5 3; }     /* level 1 has a dashed outline too */

/* legend swatches for the same */
.map-swatch.hatched-1 {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 6L6 0' stroke='%23000' stroke-width='1.3' stroke-dasharray='2 1.5'/%3E%3C/svg%3E");
}
.map-swatch.hatched-2 {
    background: repeating-linear-gradient(-45deg, transparent 0 3px, #000 3px 4.3px, transparent 4.3px 6px);
}
.map-swatch.hatched-3 {
    background:
        repeating-linear-gradient(-45deg, transparent 0 3px, #000 3px 4.3px, transparent 4.3px 6px),
        repeating-linear-gradient(45deg, transparent 0 3px, #000 3px 4.3px, transparent 4.3px 6px);
}

.map-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
    margin-top: 8px;
    font-size: 0.75em;
}

.map-credit {
    margin-left: auto;          /* stays on the right even when there's no warning */
    opacity: 0.7;
}

.map-stale {
    color: #8B0000;
    font-weight: bold;
}

/* ===== Record Watch (homepage) ===== */

:root {
    /* ← dot colors: used on the map and in its legend */
    --rw-warm-near:   #FDAE61;   /* within a few degrees of a warm record (high, warm low) */
    --rw-warm-record: #D7191C;   /* ties or beats the record for the date */
    --rw-warm-month:  #FF4FD8;   /* ties or beats the record for the whole month (bright pink, so it stands apart from the red) */
    --rw-cold-near:   #ABD9E9;   /* within a few degrees of a cold record (low, cold high) */
    --rw-cold-record: #2C7BB6;   /* ties or beats the record for the date */
    --rw-cold-month:  #6A3D9A;   /* ties or beats the record for the whole month (purple) */
    --rw-x:           #FFFFFF;   /* the × on all-time records */
}

.page-intro {
    margin: -4px 0 14px;
    font-size: 0.9em;
    opacity: 0.85;
}

/* station dots on the map */
.map-frame .map-point {
    r: 5px;                          /* ← dot size */
    stroke: #1B1F3B;
    stroke-width: 1;
}
.map-frame .map-point-group.has-popup { cursor: pointer; }
.map-frame .map-point-group:hover .map-point { r: 7px; }
.map-frame .map-point.warm-near   { fill: var(--rw-warm-near); }
.map-frame .map-point.warm-record { fill: var(--rw-warm-record); }
.map-frame .map-point.warm-month  { fill: var(--rw-warm-month); }
.map-frame .map-point.cold-near   { fill: var(--rw-cold-near); }
.map-frame .map-point.cold-record { fill: var(--rw-cold-record); }
.map-frame .map-point.cold-month  { fill: var(--rw-cold-month); }

/* the × on an all-time record */
.map-frame .map-point-x {
    stroke: var(--rw-x);
    stroke-width: 1.6;
    stroke-linecap: round;
    fill: none;
    pointer-events: none;            /* clicks go to the dot underneath */
}

/* round legend swatches for dots */
.map-swatch.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid #1B1F3B;
    box-sizing: border-box;
}
.map-swatch.dot.warm-near   { background-color: var(--rw-warm-near); }
.map-swatch.dot.warm-record { background-color: var(--rw-warm-record); }
.map-swatch.dot.warm-month  { background-color: var(--rw-warm-month); }
.map-swatch.dot.cold-near   { background-color: var(--rw-cold-near); }
.map-swatch.dot.cold-record { background-color: var(--rw-cold-record); }
.map-swatch.dot.cold-month  { background-color: var(--rw-cold-month); }
/* "All-time record": a dark dot with the white × */
.map-swatch.dot.alltime {
    position: relative;
    background-color: #555;
}
.map-swatch.dot.alltime::before,
.map-swatch.dot.alltime::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 1.5px;
    background-color: var(--rw-x);
    transform: translate(-50%, -50%) rotate(45deg);
}
.map-swatch.dot.alltime::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* the box that opens when a dot is clicked */
.map-popup {
    position: absolute;
    z-index: 5;
    transform: translate(12px, -50%);         /* to the right of the dot */
    min-width: 190px;
    max-width: 260px;
    padding: 8px 26px 8px 10px;
    background: #FFFFFF;
    color: #1B1F3B;
    border: 1px solid rgba(27, 31, 59, 0.25);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    font-size: 0.85em;
    line-height: 1.4;
}
.map-popup.flip-x { transform: translate(calc(-100% - 12px), -50%); }   /* to the left */
.map-popup.flip-y { transform: translate(12px, calc(-100% + 16px)); }   /* above */
.map-popup.flip-x.flip-y { transform: translate(calc(-100% - 12px), calc(-100% + 16px)); }

.map-popup-title {
    display: block;
    margin-bottom: 3px;
    font-size: 1.05em;
}
.map-popup-line:first-of-type { opacity: 0.75; }    /* the date */
.map-popup-link {
    display: inline-block;
    margin-top: 5px;
    color: #295AAC;
    text-decoration: none;
}
.map-popup-link:hover { text-decoration: underline; }
.map-popup-close {
    position: absolute;
    top: 3px;
    right: 5px;
    border: none;
    background: none;
    font-size: 1.2em;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
}
.map-popup-close:hover { opacity: 1; }

/* the "download as PNG" button in the top-right corner of every map */
.map-download {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    padding: 6px;
    border: 1px solid rgba(27, 31, 59, 0.3);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    opacity: 0.75;
}
.map-download:hover { opacity: 1; background: #FFFFFF; }
.map-download:disabled { cursor: wait; opacity: 0.4; }
.map-download[hidden] { display: none; }
.map-download svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #1B1F3B;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ===== Compared to normal (Forecast page, no place chosen) ===== */

#normals-section { margin-top: 0; }    /* right under the page heading */

:root {
    /* ← dot colors, in 5° steps (forecast minus the 1991-2020 normal) */
    --dep-m20: #313695;   /* 20°+ below */
    --dep-m15: #4575B4;   /* 15–19° below */
    --dep-m10: #74ADD1;   /* 10–14° below */
    --dep-m5:  #C6E3EF;   /* 5–9° below */
    --dep-0:   #F7F7F7;   /* within 4° */
    --dep-p5:  #FDD7A6;   /* 5–9° above */
    --dep-p10: #F99B5A;   /* 10–14° above */
    --dep-p15: #E0482C;   /* 15–19° above */
    --dep-p20: #A50026;   /* 20°+ above */
}
.map-frame .map-point.dep-m20, .map-swatch.dot.dep-m20 { fill: var(--dep-m20); background-color: var(--dep-m20); }
.map-frame .map-point.dep-m15, .map-swatch.dot.dep-m15 { fill: var(--dep-m15); background-color: var(--dep-m15); }
.map-frame .map-point.dep-m10, .map-swatch.dot.dep-m10 { fill: var(--dep-m10); background-color: var(--dep-m10); }
.map-frame .map-point.dep-m5,  .map-swatch.dot.dep-m5  { fill: var(--dep-m5);  background-color: var(--dep-m5); }
.map-frame .map-point.dep-0,   .map-swatch.dot.dep-0   { fill: var(--dep-0);   background-color: var(--dep-0); }
.map-frame .map-point.dep-p5,  .map-swatch.dot.dep-p5  { fill: var(--dep-p5);  background-color: var(--dep-p5); }
.map-frame .map-point.dep-p10, .map-swatch.dot.dep-p10 { fill: var(--dep-p10); background-color: var(--dep-p10); }
.map-frame .map-point.dep-p15, .map-swatch.dot.dep-p15 { fill: var(--dep-p15); background-color: var(--dep-p15); }
.map-frame .map-point.dep-p20, .map-swatch.dot.dep-p20 { fill: var(--dep-p20); background-color: var(--dep-p20); }

/* ===== panel menus (the Maps page's Map Type / Map / Region dropdowns) =====
   Built by detail-panel.js when a panel has "menus". */

.panel-menus {
    --menu-width:        250px;      /* ← each box's width (narrower screens: as wide as fits) */
    --menu-bg:           #FFFFFF;    /* ← the box: white, so it's clearly something to click */
    --menu-border:       #1B1F3B;
    --menu-hover-bg:     #E6E9F2;    /* ← under the mouse */
    --menu-selected-bg:  #D6DCEC;    /* ← the current choice in an open list */
    --menu-label-color:  #3A3F5C;

    display: flex;
    flex-wrap: wrap;                 /* stack on narrow screens */
    justify-content: center;         /* centered above the map */
    gap: 16px;
    margin-bottom: 14px;             /* space before the day arrows */
}
.panel-menus[hidden] { display: none; }

/* a label stacked on its box */
.menu-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: var(--menu-width);
    max-width: 100%;
}

.menu-label {
    font-size: 14px;
    color: var(--menu-label-color);
}

/* the box */
.menu {
    position: relative;
    background: var(--menu-bg);
    border: 2px solid var(--menu-border);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);   /* lifts it off the panel a little */
}

/* the part you click */
.menu summary {
    padding: 9px 10px;
    cursor: pointer;
    font-weight: bold;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    border-radius: 2px;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover { background: var(--menu-hover-bg); }

/* the arrow, flipped while the list is open */
.menu summary::after {
    content: "▼";
    font-size: 11px;
    transition: transform 0.2s;
}
.menu[open] summary::after { transform: rotate(180deg); }

/* the list that drops down (over the map, so nothing moves) */
.menu ul {
    list-style: none;
    position: absolute;
    top: 100%;
    left: -2px;                      /* lined up with the box's outer border */
    width: calc(100% + 4px);
    margin: 0;
    padding: 2px;
    box-sizing: border-box;
    z-index: 10;
    background: var(--menu-bg);
    border: 2px solid var(--menu-border);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.menu-choice {
    display: block;
    width: 100%;
    padding: 9px 14px;
    border: none;
    background: none;
    color: #1B1F3B;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.menu-choice:hover { background: var(--menu-hover-bg); }
.menu-choice.selected { font-weight: bold; background: var(--menu-selected-bg); }
.menu-choice:disabled { color: #9A9DAF; cursor: default; background: none; }   /* e.g. Tornado on day 3 */

/* ----- small controls in a map's corner (e.g. High | Low and Region on the station maps),
   left of the download button. Built by outlook-map.js (info.tools). ----- */
.map-tools {
    position: absolute;
    top: 8px;
    right: 46px;                     /* just left of the download button */
    display: flex;
    gap: 6px;
    z-index: 4;
}

.map-tool {
    font-size: 13px;
    color: #1B1F3B;
}

/* High | Low: two buttons joined into one */
.map-switch {
    display: flex;
    height: 30px;                    /* same height as the download button */
    border: 1px solid rgba(27, 31, 59, 0.3);
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.9);
}
.map-switch button {
    padding: 0 10px;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.map-switch button + button { border-left: 1px solid rgba(27, 31, 59, 0.25); }
.map-switch button:hover { background: #E6E9F2; }
.map-switch button.selected {
    background: #295AAC;             /* ← the chosen one (same blue as the site's buttons) */
    color: #FFFFFF;
    cursor: default;
}

/* Region: a small button showing the current region; click for the list */
.map-picker { position: relative; }
.map-picker summary {
    height: 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    border: 1px solid rgba(27, 31, 59, 0.3);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}
.map-picker summary::-webkit-details-marker { display: none; }
.map-picker summary::after { content: "▾"; font-size: 11px; }
.map-picker summary:hover { background: #FFFFFF; }
.map-picker ul {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 100%;
    margin: 0;
    padding: 3px;
    list-style: none;
    background: #FFFFFF;
    border: 1px solid rgba(27, 31, 59, 0.3);
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
.map-picker li button {
    display: block;
    width: 100%;
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}
.map-picker li button:hover { background: #E6E9F2; }
.map-picker li button.selected { font-weight: bold; background: #D6DCEC; }