/* The site's app layout, shared by every data, research and tool page
   (DESIGN.md): a side panel | the main panel, as flush panels sharing 1px
   rules (.ui-app, .ui-side, .ui-main, .ui-panel__head), and the parts they
   share: titles and labels, notices, buttons, pickers and fields, hints,
   readout lines, collapsible sections, the live/archive flight lists, the
   flight map (.flightmap: greyscale, barbs colored by category, --wind-cat-*
   in themes.css) and the telemetry plots (.tele-*). Generic names only: a
   page's own pieces go in its own stylesheet, under its own prefix.
   (This was data/hdob/hdob.css, with hdob- names, until 9 Oct 2026.) */

.ui-app {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    grid-template-areas:
        "notice notice"
        "side   main";
    /* Spare height (a short page under a tall window) goes to the panels, not the empty notice row */
    grid-template-rows: auto 1fr;
    border-block: 1px solid var(--color-border);
    font-family: var(--font-sans);
}

.ui-notice {
    grid-area: notice;
    margin: 0;
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    background-color: var(--color-info-bg);
    border-bottom: 1px solid var(--color-info-border);
    color: var(--color-info-text);
}

.ui-notice--error {
    background-color: var(--color-error-bg);
    border-bottom-color: var(--color-error-border);
    color: var(--color-error);
}

.ui-panel {
    padding: 1.25rem 1.5rem;
    min-width: 0;
}

.ui-side {
    grid-area: side;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    border-right: 1px solid var(--color-border);
}

.ui-main {
    grid-area: main;
    display: flex;
    flex-direction: column;
}

.ui-panel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.ui-main .ui-panel__head {
    margin-bottom: 0.6rem;
}

/* The page's name: its one big serif title */
.ui-label {
    margin: 0;
    font-family: var(--font-display);
    letter-spacing: -0.01em;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-heading);
}

.ui-sublabel {
    margin: 0 0 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* What's shown (a flight): serif, a step below the page title */
.ui-title {
    margin: 0;
    font-family: var(--font-display);
    letter-spacing: -0.01em;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-heading);
}

.ui-meta,
.ui-foot,
.ui-hint,
.ui-empty {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.ui-meta {
    font-family: var(--font-sans);
    font-variant-numeric: tabular-nums;
}

.ui-foot {
    margin-top: 0.6rem;
    font-size: 0.75rem;
    line-height: 1.45;
}

.ui-hint {
    margin: 0.4rem 0 0;
    font-size: 0.75rem;
}

.for-touch { display: none; }

@media (hover: none) and (pointer: coarse) {
    .for-mouse { display: none; }
    .for-touch { display: inline; }
}

/* ── Live flights ──────────────────────────────────────────────────────── */
.ui-live__list {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--color-border);
}

.ui-live__list li + li {
    border-top: 1px solid var(--color-border);
}

.ui-flight {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.1rem 0.75rem;
    width: 100%;
    padding: 0.55rem 0.75rem;
    font: inherit;
    text-align: left;
    color: var(--color-text);
    background: none;
    border: none;
    border-radius: 0;
    cursor: pointer;
}

.ui-flight:hover {
    background-color: var(--color-surface-hover);
}

.ui-flight[aria-current="true"] {
    background-color: var(--color-tag-bg);
    color: var(--color-tag-text);
}

.ui-flight:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.ui-flight__name {
    font-weight: 700;
}

.ui-flight__meta,
.ui-flight__data {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.ui-flight__data {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    text-align: right;
    font-family: var(--font-sans);
    font-variant-numeric: tabular-nums;
}

.ui-flight[aria-current="true"] :is(.ui-flight__meta, .ui-flight__data) {
    color: inherit;
}

.ui-empty {
    padding: 0.75rem;
    border: 1px solid var(--color-border);
}

/* Greyed while an archived flight is shown */
.ui-live.is-disabled {
    opacity: 0.45;
    filter: grayscale(1);
}

.ui-live.is-disabled .ui-flight {
    cursor: default;
}

.ui-back,
.ui-button {
    min-height: 2.25rem;
    padding: 0 0.8rem;
    font: inherit;
    font-size: 0.85rem;
    border-radius: 0;
    cursor: pointer;
}

.ui-back {
    margin-top: -0.5rem;
    color: var(--color-button-text);
    background-color: var(--color-button-bg);
    border: 1px solid var(--color-button-bg);
}

.ui-back:hover {
    background-color: var(--color-button-hover);
}

.ui-button {
    min-height: 2rem;
    font-size: 0.8rem;
    color: var(--color-button-neutral-text);
    background-color: var(--color-button-neutral-bg);
    border: 1px solid var(--color-button-neutral-border);
}

.ui-button:hover {
    background-color: var(--color-button-neutral-hover);
}

:is(.ui-back, .ui-button):focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

:is(.ui-back, .ui-button)[hidden] {
    display: none;
}

/* ── Archive pickers ───────────────────────────────────────────────────── */
.ui-pickers {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 0.5rem;
}

.ui-field--mission {
    grid-column: 1 / -1;
}

.ui-field label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.ui-field select {
    width: 100%;
    min-height: 2.25rem;
    padding: 0.35rem 0.5rem;
    font: inherit;
    font-size: 0.85rem;
    color: var(--color-text);
    background-color: var(--color-input-bg);
    border: 1px solid var(--color-border-strong);
    border-radius: 0;
}

.ui-field select:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -1px;
}

/* Find a mission by ID (data/hdob/) */
.ui-search { margin-top: 0.75rem; }

.ui-search label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.ui-search__row {
    display: flex;
    gap: 0.4rem;
}

.ui-search input {
    flex: 1;
    min-width: 0;
    min-height: 2.25rem;
    padding: 0.35rem 0.5rem;
    font: inherit;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    background-color: var(--color-input-bg);
    border: 1px solid var(--color-border-strong);
    border-radius: 0;
}

.ui-search input:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -1px;
}

.ui-search .ui-button { min-height: 2.25rem; }

.ui-search__hint {
    margin: 0.3rem 0 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.ui-search__hint.is-error { color: var(--color-warn, var(--color-text)); }

@media (max-width: 768px) {
    .ui-search input { font-size: 16px; } /* no zoom on focus (iOS) */
}

/* ── Wind key (on the map, top left) ───────────────────────────────────── */
.flightmap__legend {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: var(--z-overlay);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.6rem;
    max-width: calc(100% - 16px);
    margin: 0;
    padding: 0.3rem 0.5rem;
    list-style: none;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    color: var(--map-mark);
    background-color: var(--map-tag-bg);
    border: 1px solid var(--map-tag-border);
}

.flightmap__legend li {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.flightmap__legend-title {
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--map-mark-soft);
}

.ui-swatch {
    width: 0.7rem;
    height: 0.7rem;
    flex: none;
    background-color: var(--swatch);
}

.cat-0 { --swatch: var(--wind-cat-0, #1c2530); }
.cat-1 { --swatch: var(--wind-cat-1, #1f6fd1); }
.cat-2 { --swatch: var(--wind-cat-2, #2a9d3a); }
.cat-3 { --swatch: var(--wind-cat-3, #ef8a00); }
.cat-4 { --swatch: var(--wind-cat-4, #d62828); }
.cat-5 { --swatch: var(--wind-cat-5, #e0529c); }

/* (The fallbacks above keep the colors right if a browser still has a
   themes.css from before these tokens existed.) */

/* ── Map ───────────────────────────────────────────────────────────────── */
.flightmap {
    --map-sea: #bfcfdf;   /* JTWC's chart colors: grey-blue sea, sand land, brown coast */
    --map-land: #efdf8f;
    --map-coast: #9f5f00;
    --map-grid: rgba(95, 95, 95, 0.28);
    --map-label: #5f5f5f;
    --map-mark: #1f2328;
    --map-mark-soft: #5b6168;
    --map-track: rgba(31, 35, 40, 0.55);
    --map-tag-bg: rgba(255, 255, 255, 0.9);
    --map-tag-border: #9aa0a6;

    position: relative;
    height: clamp(420px, calc(100vh - 17rem), 900px);
    border: 1px solid var(--color-border);
    background-color: var(--map-sea);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .flightmap {
        --map-sea: #1c2733;
        --map-land: #3b3523;
        --map-coast: #7a5420;
        --map-grid: rgba(255, 255, 255, 0.09);
        --map-label: #8a9098;
        --map-mark: #e8eaed;
        --map-mark-soft: #a9afb6;
        --map-track: rgba(232, 234, 237, 0.5);
        --map-tag-bg: rgba(21, 24, 28, 0.88);
        --map-tag-border: #5b6168;
    }
}

:root[data-theme="dark"] .flightmap {
    --map-sea: #1c2733;
    --map-land: #3b3523;
    --map-coast: #7a5420;
    --map-grid: rgba(255, 255, 255, 0.09);
    --map-label: #8a9098;
    --map-mark: #e8eaed;
    --map-mark-soft: #a9afb6;
    --map-track: rgba(232, 234, 237, 0.5);
    --map-tag-bg: rgba(21, 24, 28, 0.88);
    --map-tag-border: #5b6168;
}

.flightmap svg {
    position: absolute;
    inset: 0;
    display: block;
    font-family: var(--font-sans);
    font-size: 11px;
    cursor: grab;
    touch-action: pan-y; /* one finger scrolls the page; drags and pinches come to the map */
    user-select: none;
}

.flightmap svg.is-dragging { cursor: grabbing; }

.flightmap__sea { fill: var(--map-sea); }
.flightmap__land { fill: var(--map-land); stroke: var(--map-coast); stroke-width: 0.75; }
.flightmap__grid { fill: none; stroke: var(--map-grid); stroke-width: 1; }
.flightmap__label { fill: var(--map-label); font-size: 10px; }
.flightmap__scale { fill: none; stroke: var(--map-mark-soft); stroke-width: 1.25; }

.flightmap__storm circle { fill: none; stroke: var(--map-mark); stroke-width: 2; }
.flightmap__storm.is-invest circle { stroke: var(--map-mark-soft); stroke-dasharray: 3 2; }
.flightmap__storm text { fill: var(--map-mark-soft); font-size: 10px; font-weight: 700; }

.flightmap__track {
    fill: none;
    stroke: var(--map-track);
    stroke-width: 1.5;
    stroke-linejoin: round;
}

.flightmap__flight.is-selected .flightmap__track {
    stroke: var(--map-mark);
    stroke-width: 2;
}

/* Companion flights (a P-3's UAS, a UAS's P-3): faint, dashed, and links */
.flightmap__flight.is-context {
    opacity: 0.55;
}

.flightmap__flight.is-context .flightmap__track {
    stroke-dasharray: 5 3;
}

.flightmap__flight.is-context :is(.flightmap__plane, .flightmap__tag) {
    cursor: pointer;
}

.flightmap__flight.is-context:hover {
    opacity: 0.9;
}

.flightmap__flight.is-dim {
    opacity: 0.4;
}

.flightmap__barb line,
.flightmap__barb path,
.flightmap__barb circle {
    fill: none;
    stroke: var(--barb);
    stroke-width: 1.2;
    stroke-linecap: round;
}

.flightmap__barb .flightmap__pennant { fill: var(--barb); stroke-linejoin: round; }
.flightmap__barb.cat-0 { --barb: var(--wind-cat-0, #1c2530); }
.flightmap__barb.cat-1 { --barb: var(--wind-cat-1, #1f6fd1); }
.flightmap__barb.cat-2 { --barb: var(--wind-cat-2, #2a9d3a); }
.flightmap__barb.cat-3 { --barb: var(--wind-cat-3, #ef8a00); }
.flightmap__barb.cat-4 { --barb: var(--wind-cat-4, #d62828); }
.flightmap__barb.cat-5 { --barb: var(--wind-cat-5, #e0529c); }

/* The track colored by wind category instead of barbs (ROARS). The .cat-N
   classes set --swatch; the plain track stays underneath where there's no wind */
.flightmap__wind {
    fill: none;
    stroke: var(--swatch);
    stroke-width: 3.5;
    stroke-linecap: butt;
    stroke-linejoin: round;
}

.flightmap__start {
    fill: var(--map-sea);
    stroke: var(--map-mark);
    stroke-width: 1.5;
}

.flightmap__plane { cursor: pointer; }
.flightmap__plane path {
    fill: var(--map-mark);
    stroke: var(--map-sea);
    stroke-width: 1.25;
    stroke-linejoin: round;
    paint-order: stroke;
}

.flightmap__plane:focus-visible { outline: none; }
.flightmap__plane:focus-visible path { stroke: var(--color-accent); stroke-width: 2.5; }

.flightmap__tag rect {
    fill: var(--map-tag-bg);
    stroke: var(--map-tag-border);
    stroke-width: 1;
}

.flightmap__tag text {
    fill: var(--map-mark-soft);
    font-size: 11px;
}

.flightmap__tag text.is-first {
    fill: var(--map-mark);
    font-weight: 700;
}

.flightmap__leader {
    stroke: var(--map-tag-border);
    stroke-width: 1;
}

.flightmap__flight.is-dim .flightmap__tag { display: none; }

/* The hover point and its tag only show; clicks go through to what's under them */
.flightmap__hover {
    pointer-events: none;
}

.flightmap__hover-dot {
    fill: var(--color-accent);
    stroke: var(--map-sea);
    stroke-width: 1.5;
}

.flightmap__tag--hover rect { stroke: var(--color-accent); }
.flightmap__tag--hover { pointer-events: none; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.flightmap__track--future {
    fill: none;
    stroke: var(--map-track);
    stroke-width: 1.25;
    stroke-dasharray: 2 3;
    opacity: 0.6;
}

/* ── Collapsible sections (right panel): stacked, sharing rules, chevron
   on the right (DESIGN.md "Collapsible groups") ─────────────────────── */
.ui-section {
    border: 1px solid var(--color-border);
}

.ui-section + .ui-section {
    border-top: none;
}

.replay + .ui-section {
    margin-top: 0.6rem;
}

.ui-section > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2.5rem;
    padding: 0 0.75rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-heading);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.ui-section > summary::-webkit-details-marker { display: none; }

.ui-section > summary::after {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    margin-right: 0.15rem;
    border-right: 1.5px solid var(--color-text-muted);
    border-bottom: 1.5px solid var(--color-text-muted);
    transform: translateY(-25%) rotate(45deg);
    transition: transform 0.15s;
}

.ui-section[open] > summary::after {
    transform: translateY(25%) rotate(-135deg);
}

.ui-section > summary:hover {
    background-color: var(--color-surface-hover);
}

.ui-section > summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.ui-section__body {
    padding: 0 0.75rem 0.75rem;
}

.ui-section .flightmap {
    margin-inline: -0.75rem;
    border-inline: none;
}

.ui-section .tele-empty {
    margin: 0 0 0.25rem;
}

.tele-empty[hidden] {
    display: none;
}

/* Map zoom reset: an overlay box, top right */
.flightmap__reset {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: var(--z-overlay);
}

/* ── Telemetry plots ───────────────────────────────────────────────────── */
.tele-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.5rem;
}

.tele-pick {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.tele-chip {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0 0.6rem;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    background-color: var(--color-button-neutral-bg);
    border: 1px solid var(--color-button-neutral-border);
    cursor: pointer;
    user-select: none;
}

.tele-chip:hover {
    background-color: var(--color-button-neutral-hover);
}

.tele-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tele-chip:has(input:checked) {
    color: var(--color-button-text);
    background-color: var(--color-button-bg);
    border-color: var(--color-button-bg);
}

.tele-chip:has(input:focus-visible) {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

.tele-plots {
    display: flex;
    flex-direction: column;
}

.tele-plot {
    margin: 0;
    padding: 0.5rem 0 0.25rem;
    border-top: 1px solid var(--color-border);
}

.tele-plot[hidden] {
    display: none;
}

.tele-plot figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.5rem;
    margin-bottom: 0.2rem;
    font-size: 0.72rem;
}

.tele-plot__title {
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-heading);
}

.tele-plot__unit {
    font-family: var(--font-sans);
    color: var(--color-text-muted);
}

.tele-plot__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.75rem;
    margin-left: auto;
    color: var(--color-text-muted);
}

.tele-key {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.tele-key__swatch {
    width: 0.9rem;
    height: 2px;
}

/* A series colored by wind category: its own color, then Cat 1–5 */
.tele-key__swatch--wind {
    width: 1.8rem;
    height: 3px;
}

.tele-plot__area {
    position: relative;
}

.tele-plot canvas {
    display: block;
    width: 100%;
    height: 150px;
}

/* The cursor layer takes the pointer */
.tele-plot .tele-plot__overlay {
    position: absolute;
    inset: 0;
    cursor: crosshair;
    touch-action: pan-y; /* one finger scrolls the page; sideways drags and pinches come to the plot */
    user-select: none;
}

.tele-plot .tele-plot__overlay.is-dragging {
    cursor: grabbing;
}

/* ── Readout lines under the map ───────────────────────────────────────── */
.ui-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin: 0;
    padding: 0.5rem 0;
    border-top: 1px solid var(--color-border);
}

/* The pointer readout: a fixed grid of label-over-value cells, "—" when
   nothing is picked, so it never changes size (DESIGN.md "Readouts") */
.ui-line.ui-line--point {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr));
    gap: 0.35rem 1rem;
    margin-top: 0.5rem;
}

.ui-line.ui-line--point > div {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.1rem;
    min-width: 0;
}

.ui-line--point :is(dt, dd) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ui-line--point dd {
    line-height: 1.3;
}

.ui-line[hidden],
.ui-line:empty {
    display: none;
}

.ui-line > div {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

.ui-line dt {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.ui-line dd {
    margin: 0;
    font-family: var(--font-sans);
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
}

.ui-line dd a {
    color: var(--color-accent);
}

/* Stand-ins for the live list and an empty subtitle while they load */
.ui-live__skeleton {
    height: 3.1rem;
}

.ui-meta.skeleton:empty {
    width: min(20rem, 70%);
    height: 1em;
}

/* Temperature and dewpoint readouts: the Skew-T's (and the plots') red and green */
.ui-temp { color: var(--skewt-temp); }
.ui-dew { color: var(--skewt-dew); }

.ui-cat {
    display: inline-block;
    width: 0.65rem;
    height: 0.65rem;
    margin-right: 0.3rem;
    vertical-align: -1px;
    background-color: var(--swatch);
}


/* ── Smaller screens ───────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .ui-app { grid-template-columns: 280px minmax(0, 1fr); }
}

@media (max-width: 900px) {
    /* One column, with the map straight after the live list: the side
       panel's sections become items of the page column so they can go
       either side of it */
    .ui-app {
        display: flex;
        flex-direction: column;
    }

    .ui-side {
        display: contents;
    }

    .ui-side > * {
        margin-inline: 1.5rem;
    }

    .ui-side > .ui-panel__head { order: 1; margin-top: 1.25rem; }
    .ui-live { order: 2; margin-top: 0.75rem; }
    .ui-back { order: 3; margin-top: 0.75rem; }
    .ui-main { order: 4; margin-top: 1rem; border-top: 1px solid var(--color-border); }
    .ui-archive { order: 5; margin-block: 1.25rem; }

    .flightmap {
        height: auto;
        aspect-ratio: 1 / 1;
        max-height: 75vh;
    }
}

@media (max-width: 480px) {
    .ui-panel { padding: 1rem; }
    .ui-side > * { margin-inline: 1rem; }
    .ui-notice { padding-inline: 1rem; }
    .ui-field select { font-size: 16px; }
    .ui-flight { min-height: 2.75rem; }
    .tele-bar { flex-direction: column; }
    .tele-plot__legend { margin-left: 0; width: 100%; }
}

/* A committed flight plan (tools/mission-planner/) around the storm's center */
.flightmap__plan { pointer-events: none; }
.flightmap__plan-leg { fill: none; stroke: var(--map-mark); stroke-width: 1.5; stroke-dasharray: 6 4; }
.flightmap__plan-mark { fill: var(--map-mark); }
.flightmap__plan-mid { fill: var(--map-sea); stroke: var(--map-mark); stroke-width: 1; }
.flightmap__plan-extra { fill: var(--map-sea); stroke: var(--map-mark); stroke-width: 1.25; }
.flightmap__plan-drop { fill: none; stroke: var(--map-mark); stroke-width: 1.1; }
.flightmap__plan-label {
    fill: var(--map-mark);
    font-size: 10px;
    font-weight: 700;
    paint-order: stroke;
    stroke: var(--map-sea);
    stroke-width: 3px;
    stroke-linejoin: round;
}