:root {
    --surface: rgba(17, 27, 43, 0.86);   /* floating chrome over the map */
    --surface-solid: #16233a;            /* drawers and panels off the map */
    --ink: #eef3f9;
    --ink-dim: rgba(238, 243, 249, 0.62);
    --line: rgba(238, 243, 249, 0.18);
    --field: rgba(238, 243, 249, 0.08);  /* inputs on a surface */
    --accent: #ffb52e;                   /* selection, play, focus - nothing else */
    --on-accent: #251c06;
    --danger: #ff7a66;
    --radius: 12px;
}

html, body {
    font-family: "Barlow", system-ui, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
    width: auto;
    overflow: hidden;
    background: #0d1626;
    color: var(--ink);
    accent-color: var(--accent);
}

body {
    display: flex;
    flex-direction: column;
}

#status {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    pointer-events: none;
}
#loadingAnimation {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 3px solid rgba(238, 243, 249, 0.25);
    border-radius: 50%;
    border-top-color: var(--accent);
    animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

#offcanvas {
    max-width: 85vw;
}

#offcanvasContent {
    padding: 5px;
}

#content {
    flex: 1 1 auto;
    min-height: 0; /* This is important! Lets the scale shrink to remaining height */
    display: flex;
}
@media (orientation: landscape) {
    #content {
        flex-direction: row;
    }
}
@media (orientation: portrait) {
    #content {
        flex-direction: column;
    }
}

#map {
    flex: 1 1 auto;
    height: 100%;
    width: 100%;
}

#scale {
    flex: 0 0 auto;
    display: flex;
    white-space: nowrap;
}
@media (orientation: landscape) {
    #scale {
        width: 50px;
        height: 100%;
        flex-direction: column;
    }
}
@media (orientation: portrait) {
    #scale {
        width: 100%;
        height: 24px;
        flex-direction: row-reverse;
        align-items: center;
    }
}

#scale .scaleUnit, #scale .scaleMax, #scale .scaleMin {
    text-align: center;
}
@media (orientation: landscape) {
    #scale .scaleUnit, #scale .scaleMax, #scale .scaleMin {
        padding: 2px 0;
    }
}
@media (orientation: portrait) {
    #scale .scaleUnit, #scale .scaleMax, #scale .scaleMin {
        padding: 0 2px;
    }
}

.scaleUnit {
    font-weight: bold;
}

#scale .scaleColorbar {
    flex: 1 1 auto;
    position: relative;
    min-height: 0; /* I hate CSS */
    height: 100%;
}

.scaleColorbar canvas {
    width: 100%;
    height: 100%;
}

#scale .scaleIndicator {
    position: absolute;
    padding: 0 4px;
    bottom: 0;
    background-color: var(--surface-solid); /* opaque: the value must not fight the colour bar behind it */
    color: var(--ink);
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 1px rgba(13, 22, 38, 0.55), 0 1px 4px rgba(13, 22, 38, 0.5);
}
@media (orientation: landscape) {
    #scale .scaleIndicator {
        width: 100%;
        border-bottom: 2px solid var(--ink);
    }
}
@media (orientation: portrait) {
    #scale .scaleIndicator {
        height: 100%;
        border-left: 2px solid var(--ink);
        display: flex;
        align-items: center;
    }
}

#plot {
    display: flex;
    flex-direction: column;
    padding: 5px;
    background: #ffffff; /* soundings, cross-sections and meteogram pngs are drawn for white */
    color: #16233a;
}
@media (orientation: landscape) {
    #plot {
        height: 100%;
        aspect-ratio: 0.8;
        min-width: 40vw;
        max-width: 65vw;
    }
}
@media (orientation: portrait) {
    #plot {
        width: 100%;
        aspect-ratio: 1;
        min-height: 40vh;
        max-height: 55vh;
    }
}

/* The windgram is a wide chart (hours across), unlike the tall skew-T */
@media (orientation: landscape) {
    #plot.plot-wide {
        aspect-ratio: 1.25;
    }
}
@media (orientation: portrait) {
    #plot.plot-wide {
        aspect-ratio: 1.3;
        min-height: 45vh;
    }
}

#plot .plotHeader,
#plot .plotCaption {
    flex: 0 0 auto;
}

#plot .plotContent {
    flex: 0 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
}

/* Name of the plot, and the line under it that says which slice of the day it is */
.plotTitle {
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}
.plotSubtitle {
    margin-left: 0.5em;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: #5b6472;
}

/* The key under a plot: what the colours mean, plus the way into the long explanation */
.plotCaption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.7rem;
    padding: 0.35rem 0.15rem 0.1rem;
    font-size: 0.7rem;
    line-height: 1.2;
    color: #5b6472;
}
.plotCaption:empty {
    display: none;
}
.xsec-key {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    white-space: nowrap;
}
.xsec-swatch {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 2px;
    border: 1px solid rgba(22, 35, 58, 0.15);
}
.xsec-swatch-up { background: #b2182b; }
.xsec-swatch-down { background: #2166ac; }
.xsec-swatch-cloud { background: rgba(91, 100, 114, 0.55); }
.xsec-swatch-ground { background: #6b7280; }
.xsec-range {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.plot-caption-more {
    margin-left: auto;
    color: #16233a;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
    white-space: nowrap;
}

/* Cross-section endpoints: two lettered dots the plot's x axis refers back to */
.xsec-endpoint {
    background: none;
    border: none;
}
.xsec-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    border: 2px solid #ffffff;
    box-shadow: 0 1px 5px rgba(9, 14, 24, 0.5);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}

#plot img {
    object-fit: fill;
    width: 100%;
    height: 100%;
}

.leaflet-container .leaflet-control-attribution {
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.9);
}
.leaflet-control-layers {
    margin-right: 10px;
}
.leaflet-control-layers-expanded {
    padding: 5px;
}
.rasp-control {
    max-width: 350px;
}
.rasp-control .leaflet-control-layers-toggle {
    background-size: 26px 26px;
    background-image: url(img/rasp_control.svg);
}
.leaflet-container a.leaflet-control-collapse-button {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0;
    border: none;
    text-align: center;
    width: 18px;
    height: 14px;
    font: 16px/14px Tahoma, Verdana, sans-serif;
    font-weight: normal;
    color: #c3c3c3;
    text-decoration: none;
    font-weight: bold;
    background: transparent;
}
.leaflet-container a.leaflet-control-collapse-button:hover {
    color: #999;
}

.leaflet-grab {
    cursor: auto;
}

.leaflet-top {
    z-index: 1001;
}

/* Takeoff markers carrying the forecast wind (site-markers.js) */
.site-marker {
    background: none;
    border: none;
}
.site-dot {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 4px rgba(9, 14, 24, 0.45);
}
.site-dot svg {
    display: block;
}
.site-dot-unknown {
    background: #7d8794;
}
/* Wind outside the site's configured launch sector */
.site-dot-offsector {
    border-style: dashed;
    border-color: #16233a;
    opacity: 0.55;
}

/* Timeline scrubber (timeline-control.js) */
.timeline-bar {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1002;
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(92%, 560px);
    padding: 7px 14px;
    border-radius: 12px;
    background: rgba(17, 27, 43, 0.86);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 4px 18px rgba(9, 14, 24, 0.35);
    color: #eef3f9;
    user-select: none;
}
@media (max-width: 500px) {
    .timeline-bar {
        bottom: 46px;
        padding: 5px 10px;
        gap: 6px;
    }
}
.timeline-bar.tl-disabled {
    opacity: 0.45;
}
.tl-play {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: #ffb52e;
    color: #251c06;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.tl-play:hover {
    background: #ffc554;
}
.tl-play:disabled {
    background: #5a6474;
    color: #303948;
    cursor: default;
}
.tl-ticks {
    flex: 1 1 auto;
    display: flex;
    touch-action: none; /* pointer-capture drag needs the browser to keep its hands off */
}
.tl-tick {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    height: 36px;
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
}
.tl-tick:disabled {
    cursor: default;
}
.tl-tick-bar {
    display: block;
    width: 3px;
    height: 13px;
    border-radius: 2px;
    background: rgba(238, 243, 249, 0.4);
    transition: height 0.12s ease, background-color 0.12s ease;
}
.tl-tick:hover .tl-tick-bar {
    background: rgba(238, 243, 249, 0.75);
}
.tl-tick.tl-active .tl-tick-bar {
    background: #ffb52e;
    height: 19px;
}
.tl-tick-label {
    font-size: 10px;
    line-height: 1;
    min-height: 10px;
    color: rgba(238, 243, 249, 0.55);
    font-variant-numeric: tabular-nums;
}
.tl-time {
    flex: 0 0 auto;
    min-width: 42px;
    text-align: right;
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.tl-play:focus-visible, .tl-tick:focus-visible {
    outline: 2px solid #ffb52e;
    outline-offset: 1px;
}
@media (prefers-reduced-motion: reduce) {
    .tl-tick-bar {
        transition: none;
    }
}

/* --- Dark chrome theme: every floating control shares one surface language --- */

/* Leaflet chrome: attribution chips, bar buttons (zoomless bar, locate), layers control */
.leaflet-container .leaflet-control-attribution {
    background: var(--surface);
    color: var(--ink-dim);
    border-radius: 6px;
    margin: 0 4px 4px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.leaflet-container .leaflet-control-attribution a,
.leaflet-container a {
    color: #9cc4f5;
}
/* The build's commit, in the Info panel. Deliberately quiet - it answers "which
   version am I looking at?" for a bug report, and is not something a pilot reads. */
.buildStamp {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    opacity: 0.6;
}

.indicator-invalid {
    color: var(--danger) !important;
}

/* --- Map header: region, forecast moment, parameter title ---------------------
   Set straight on the map as type, not as chips: a layered shadow keeps it legible
   over a bright sea or a dark lava field, and the corner stays the map's. Nothing
   here is clickable, so the map still drags underneath. */
.map-header,
.map-title {
    position: relative;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0 0 0 4px;
    pointer-events: none;
    max-width: min(72vw, 460px);
    text-shadow: 0 1px 2px rgba(9, 14, 24, 0.95), 0 0 6px rgba(9, 14, 24, 0.85);
}
/* A feathered scrim rather than a chip: it has no edge to see, so the corner still
   reads as map, but pale farmland and bright sea stop swallowing the type. */
.map-header::before,
.map-title::before {
    content: "";
    position: absolute;
    left: -22px;
    right: -72px;
    z-index: -1;
    background: linear-gradient(to right,
        rgba(9, 14, 24, 0.82) 0%,
        rgba(9, 14, 24, 0.76) 58%,
        rgba(9, 14, 24, 0.52) 82%,
        rgba(9, 14, 24, 0) 100%);
}
/* The two halves abut exactly - the header's scrim reaches down across the title's
   top margin - so only the outer edges feather and the pair reads as one band. */
.map-header::before {
    top: -16px;
    bottom: -5px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 16px);
}
.map-title::before {
    top: 0;
    bottom: -18px;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent 100%);
}
.leaflet-top .map-header {
    margin-top: 10px;
}
.map-header + .leaflet-control,
.map-title {
    margin-top: 0;
}
/* beats the rule above, which would otherwise hold the title against the date line */
.map-header + .map-title {
    margin-top: 5px;
}

/* Line 1: which region, and how old the run is */
.mh-region {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1.4;
}
.mh-region-name {
    color: var(--accent);
}
.mh-region-name::before { /* a short accent rule anchors the whole stack */
    content: "";
    display: inline-block;
    width: 14px;
    height: 2px;
    margin-right: 7px;
    vertical-align: 0.22em;
    background: var(--accent);
    border-radius: 1px;
    box-shadow: none;
}
.mh-run {
    color: rgba(238, 243, 249, 0.82);
    font-weight: 600;
    letter-spacing: 0.08em;
}

/* Line 2: the moment on screen - date, local time, zulu */
.mh-when {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}
.mh-when > span + span::before {
    content: "\00b7";
    margin: 0 0.45em;
    opacity: 0.45;
}
.mh-zulu {
    color: rgba(238, 243, 249, 0.82);
    font-weight: 500;
}

/* Line 3: the parameter on the map. Line 4: the value under the pointer.
   The readout keeps a line of its own, whether or not it has anything to say. Beside
   the title it sat on the same line on a wide window and wrapped to its own on a narrow
   one, and it comes and goes with every mouse move - so the header, the day selector and
   the whole control stack below it stepped up and down a line as the pointer crossed the
   coast or the window changed width. The line is now always there and always that tall. */
.map-title {
    display: block;
    margin-top: 5px; /* 26px type overflows its own line box - keep it off the date line */
    margin-bottom: 8px;
    line-height: 1.2;
}
.mt-name {
    display: block;
    font-size: clamp(19px, 4.6vw, 26px);
    font-weight: 700;
    letter-spacing: -0.015em;
}
.mt-value {
    display: block;
    min-height: 1.3em; /* held open while empty - hidden, never removed */
    font-size: 13.5px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.leaflet-touch .leaflet-bar,
.leaflet-bar {
    border: 1px solid var(--line);
    box-shadow: 0 4px 18px rgba(9, 14, 24, 0.35);
}
.leaflet-bar a {
    background-color: var(--surface);
    color: var(--ink);
    border-bottom-color: var(--line);
}
.leaflet-bar a:hover, .leaflet-bar a:focus {
    background-color: #223349;
    color: var(--ink);
}
.leaflet-control-layers {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 4px 18px rgba(9, 14, 24, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.leaflet-touch .leaflet-control-layers {
    border: 1px solid var(--line);
}
.leaflet-control-layers-toggle {
    filter: invert(92%) hue-rotate(180deg); /* leaflet's dark icon, made light */
}
.rasp-control .leaflet-control-layers-toggle {
    filter: none; /* our own icon already reads on dark */
}
.leaflet-control-layers-expanded {
    padding: 10px;
    color: var(--ink);
}

/* The datetime control wraps its select in a transparent container */
.datetime-control {
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Bootstrap widgets on dark surfaces (panel, offcanvas drawer, day selector) */
.leaflet-control-layers-list .form-select,
#offcanvas .form-select,
.datetime-control .form-select {
    background-color: var(--field);
    color: var(--ink);
    border-color: var(--line);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23eef3f9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.datetime-control .form-select {
    background-color: rgba(17, 27, 43, 0.72);
    font-size: 14px;
    font-weight: 600;
    padding: 5px 30px 5px 11px;
    border-radius: 9px;
    border-color: rgba(238, 243, 249, 0.22);
    background-size: 13px 10px;
    box-shadow: 0 4px 18px rgba(9, 14, 24, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.datetime-control .form-select:hover,
.datetime-control .form-select:focus {
    border-color: var(--accent);
    background-color: rgba(17, 27, 43, 0.88);
}
.leaflet-control-layers-list .form-select option,
.leaflet-control-layers-list .form-select optgroup,
#offcanvas .form-select option,
#offcanvas .form-select optgroup,
.datetime-control .form-select option,
.datetime-control .form-select optgroup {
    color: #16233a; /* the native dropdown list is rendered on white */
    background: #ffffff;
}
.leaflet-control-layers-list .btn-outline-primary,
#offcanvas .btn-outline-primary {
    color: var(--ink-dim);
    border-color: var(--line);
}
.leaflet-control-layers-list .btn-outline-primary:hover,
#offcanvas .btn-outline-primary:hover {
    color: var(--ink);
    background-color: rgba(238, 243, 249, 0.08);
    border-color: var(--line);
}
.leaflet-control-layers-list .btn-check:checked + .btn-outline-primary,
.leaflet-control-layers-list .btn-outline-primary.active,
#offcanvas .btn-check:checked + .btn-outline-primary,
#offcanvas .btn-outline-primary.active {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}
.leaflet-control-layers-list .btn:focus-visible,
#offcanvas .btn:focus-visible {
    box-shadow: 0 0 0 2px var(--accent);
}
.leaflet-control-layers-list .input-group-text,
#offcanvas .input-group-text {
    background: transparent;
    border-color: var(--line);
    color: var(--ink);
}
.leaflet-control-layers-list .form-range::-webkit-slider-thumb,
#offcanvas .form-range::-webkit-slider-thumb {
    background: var(--accent);
}
.leaflet-control-layers-list .form-range::-moz-range-thumb,
#offcanvas .form-range::-moz-range-thumb {
    background: var(--accent);
}
.leaflet-control-layers-list .form-range::-webkit-slider-runnable-track,
#offcanvas .form-range::-webkit-slider-runnable-track {
    background-color: rgba(238, 243, 249, 0.25);
    border-radius: 2px;
}
.leaflet-control-layers-list .form-range::-moz-range-track,
#offcanvas .form-range::-moz-range-track {
    background-color: rgba(238, 243, 249, 0.25);
    border-radius: 2px;
}
.leaflet-control-layers-list img[src="img/opacity.svg"],
#offcanvas img[src="img/opacity.svg"] {
    filter: invert(92%);
}
.leaflet-control-layers-list .text-danger,
#offcanvas .text-danger {
    color: var(--danger) !important;
}
.leaflet-control-layers-list label,
#offcanvas label,
.leaflet-control-layers-list summary,
#offcanvas summary {
    cursor: pointer;
}
.parameterDescription {
    color: var(--ink-dim);
}

/* Mobile drawer */
#offcanvas {
    background: var(--surface-solid);
    color: var(--ink);
}
#offcanvas .btn-close {
    filter: invert(1) grayscale(100%) brightness(180%);
}

/* --- The control panel: a dense column of controls ---------------------------
   Every explanation lives behind one of the ? buttons, so the panel itself stays
   short enough to read at a glance over the map. */
.rasp-panel {
    font-size: 0.82rem;
    line-height: 1.3;
    padding-bottom: 1rem; /* room for the minimise arrow parked bottom-right */
}
.rasp-panel .panel-group + .panel-group {
    margin-top: 0.4rem;
}
/* Which category the icon row has selected - a caption, not a paragraph */
.rasp-panel .panel-caption {
    margin: 0.3rem 0 0.2rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-dim);
}
.rasp-panel .param-row {
    display: flex;
    align-items: center;
}
.rasp-panel .panel-label {
    flex: 0 0 auto;
    font-size: 0.78rem;
    color: var(--ink-dim);
}
.rasp-panel .panel-icon {
    flex: 0 0 auto;
    line-height: 0;
}
/* Transient one-liners: the cue while a tool is armed, the pressure level, an error */
.rasp-panel .panel-note {
    margin-top: 0.25rem;
    font-size: 0.74rem;
    color: var(--ink-dim);
}
.rasp-panel .panel-note:empty {
    display: none;
}
.rasp-panel .form-select-sm {
    font-size: 0.8rem;
    padding: 0.2rem 1.6rem 0.2rem 0.5rem;
    background-position: right 0.4rem center;
}
.rasp-panel .form-range {
    height: 1rem;
}
/* Category icons: recognisable at a glance, without owning a sixth of the panel */
.rasp-panel .btn-group .btn-outline-primary {
    padding: 0.25rem 0.2rem;
}
.rasp-panel .btn-group .btn-outline-primary svg {
    display: block;
    height: 1.6rem;
}
/* Cross section, sounding and windgram share one row whatever the language */
.rasp-panel .tool-buttons {
    min-width: 0; /* long labels shrink rather than push the ? out of the panel */
}
.rasp-panel .tool-buttons .btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.25rem 0.3rem;
    font-size: 0.74rem;
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: break-word;
}
/* The map toggles sit side by side */
.rasp-panel .panel-toggles {
    gap: 0.15rem 1rem;
    font-size: 0.78rem;
}
.rasp-panel .panel-toggles label {
    display: inline-flex;
    align-items: center;
}

/* Units, map style and the site markers are set once and then forgotten, so they sit
   behind a quiet disclosure at the foot of the panel rather than in the working column. */
.rasp-panel .panel-options {
    border-top: 1px solid var(--line);
    padding-top: 0.4rem;
}
.rasp-panel .options-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-dim);
    cursor: pointer;
}
.rasp-panel .options-toggle:hover,
.rasp-panel .options-toggle[aria-expanded="true"] {
    color: var(--ink);
}
.rasp-panel .options-toggle::after { /* a chevron, drawn rather than shipped as a glyph */
    content: "";
    width: 0.32rem;
    height: 0.32rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-0.12em) rotate(45deg);
    transition: transform 0.15s ease;
}
.rasp-panel .options-toggle[aria-expanded="true"]::after {
    transform: translateY(0.06em) rotate(-135deg);
}
.rasp-panel .options-body {
    margin-top: 0.4rem;
}

/* The ? buttons that open an explanation - the help modal, or the map's own description.
   Deliberately quiet until hovered: they are an offer, not a warning. */
.help-button {
    flex: 0 0 auto;
    width: 1.7rem;
    height: 1.7rem;
    padding: 0;
    line-height: 1;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink-dim);
    background: var(--field);
    border: 1px solid var(--line);
    border-radius: 8px;
}
.help-button:hover,
.help-button:focus-visible,
.help-button.active {
    color: var(--on-accent);
    background: var(--accent);
    border-color: var(--accent);
}

/* What the map means, opened from the ? beside the parameter select */
.parameterInfo {
    margin-top: 0.35rem;
    padding: 0.45rem 0.55rem;
    border-left: 2px solid var(--accent);
    border-radius: 0 6px 6px 0;
    background: var(--field);
}
.parameterShort {
    color: var(--ink);
    font-size: 0.8rem;
    line-height: 1.35;
}
.parameterDescription {
    display: block;
    margin-top: 0.35rem;
    max-height: 9em;
    overflow-y: auto;
    font-size: 0.76rem;
    line-height: 1.4;
}

/* "How to read this forecast" */
.help-modal .modal-content {
    background: var(--surface-solid);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.help-modal .modal-header,
.help-modal .modal-footer {
    border-color: var(--line);
}
.help-modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(180%);
}
.help-modal .modal-body {
    font-size: 0.92rem;
    line-height: 1.5;
}
.help-modal section + section {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}
.help-modal h6 {
    color: var(--accent);
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-bottom: 0.5rem;
}
.help-modal p:last-child,
.help-modal ul:last-child {
    margin-bottom: 0;
}
.help-modal ul {
    padding-left: 1.1rem;
}
.help-modal li {
    margin-bottom: 0.35rem;
}
.help-modal b {
    color: var(--ink);
    font-weight: 600;
}
.help-modal .help-footnote {
    margin-top: 1.25rem;
    color: var(--ink-dim);
    font-size: 0.85rem;
}