/* Data by Storm (data/storms/): the page's own pieces, under bys-. Shared
   layout, fields, buttons and the map's palette and tags come from
   css/app.css (.ui-*, .flightmap*). */

.bys-app {
    border-block: 1px solid var(--color-border);
    font-family: var(--font-sans);
}

.bys-app > .ui-notice { border-bottom: 1px solid var(--color-info-border); }

/* ── Head: title, then the year and the share button ─────────────────── */
.bys-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.bys-head__tools {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.bys-year select { min-width: 7rem; }

/* The year box and the share button: one height, the button square */
.bys-year select,
.bys-share .ui-button {
    box-sizing: border-box;
    height: 2.25rem;
    min-height: 2.25rem;
}

.bys-share .ui-button { width: 2.25rem; padding: 0; }

@media (hover: none) and (pointer: coarse) {
    .bys-year select,
    .bys-share .ui-button { height: 2.5rem; min-height: 2.5rem; } /* touch size */
    .bys-share .ui-button { width: 2.5rem; }
}

/* ── Storm index: one chip per storm, to jump to it ──────────────────── */
.bys-index {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-height: 3.25rem;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.bys-index .skeleton-line { height: 1.75rem; }

.bys-chip {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    transition: background-color 0.15s;
}

.bys-chip:hover { background-color: var(--color-surface-hover); }
.bys-chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }

.bys-chip.is-active {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.bys-chip.is-live {
    color: var(--color-button-text);
    background-color: var(--color-button-bg);
    border-color: var(--color-button-bg);
}

.bys-chip.is-live:hover { background-color: var(--color-button-hover); }

/* ── Groups: Active storms, Past storms ──────────────────────────────── */
.bys-group {
    padding: 1.25rem 1.5rem 0;
}

.bys-group__label {
    margin: 0 0 0.6rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-heading);
}

.bys-empty { padding: 1rem 0; }

.bys-sources {
    margin: 0;
    padding: 0.75rem 1.5rem 1.25rem;
}

/* ── A storm: stacked groups sharing rules, chevron on the right ─────── */
.bys-storm {
    border: 1px solid var(--color-border);
    scroll-margin-top: 4.5rem; /* clear of the sticky header when jumped to */
}

.bys-storm + .bys-storm { border-top: none; }

.bys-storm__summary {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-height: 3.5rem;
    justify-content: center;
    padding: 0.6rem 3rem 0.6rem 1rem;
    cursor: pointer;
    list-style: none;
    transition: background-color 0.15s;
}

.bys-storm__summary::-webkit-details-marker { display: none; }

.bys-storm__summary::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1.15rem;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 1.5px solid var(--color-text-muted);
    border-bottom: 1.5px solid var(--color-text-muted);
    transform: translateY(-75%) rotate(45deg);
    transition: transform 0.15s;
}

.bys-storm[open] > .bys-storm__summary::after { transform: translateY(-25%) rotate(-135deg); }
.bys-storm__summary:hover { background-color: var(--color-surface-hover); }
.bys-storm__summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

.bys-storm__title { font-size: 1.1rem; }
.bys-storm__meta { margin: 0; }

.bys-storm--skel .bys-storm__summary { cursor: default; }
.bys-storm--skel .bys-storm__summary::after { display: none; }

/* "Active" in outline, "Flying now" solid (the "On station" chip's navy) */
.bys-storm__title .page-tag:not(.bys-tag--live) {
    color: var(--color-accent);
    background-color: transparent;
    border-color: currentColor;
}

/* Map | flights, side by side on wide screens */
.bys-storm__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    border-top: 1px solid var(--color-border);
}

.bys-storm__map {
    padding: 1rem;
    border-right: 1px solid var(--color-border);
}

/* Beside a long flight list, the map stays in view (under the sticky header) */
.bys-storm__sticky {
    position: sticky;
    top: 4.5rem;
}

.bys-storm__flights {
    padding: 1rem 1rem 1rem 1.25rem;
    min-width: 0;
}

/* The map: the Aircraft Data map's palette (.flightmap), recon in the nav's navy */
.bys-map {
    --map-recon: var(--header-bg, #0b3d5c);
    --map-recon-track: rgba(11, 61, 92, 0.6);
    height: 440px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .bys-map {
        --map-recon: hsl(203, 60%, 52%);
        --map-recon-track: rgba(45, 128, 180, 0.7);
    }
}

:root[data-theme="dark"] .bys-map {
    --map-recon: hsl(203, 60%, 52%);
    --map-recon-track: rgba(45, 128, 180, 0.7);
}

.bys-map svg { cursor: grab; }
.bys-map.skeleton svg { visibility: hidden; }

.bys-legend li svg { position: static; flex: none; cursor: auto; } /* not the map's own <svg> rule */

/* Best track: dotted, with fix dots (hollow TD, filled TS, larger HU) */
.bys-best__track {
    fill: none;
    stroke: var(--map-mark-soft);
    stroke-width: 1.5;
    stroke-dasharray: 0.5 4;
    stroke-linecap: round;
}

.bys-best__fix { stroke: var(--map-mark-soft); stroke-width: 1; }
.bys-best__fix--td { fill: var(--map-sea); }
.bys-best__fix--ts { fill: var(--map-mark-soft); }
.bys-best__fix--hu { fill: var(--map-mark); stroke: var(--map-mark); }

.bys-best__day {
    fill: var(--map-mark-soft);
    font-size: 10px;
    font-weight: 700;
    paint-order: stroke;
    stroke: var(--map-sea);
    stroke-width: 3;
}

/* The storm now (js/storm-symbols.js): currentColor with a thin sea edge */
.bys-best__now {
    color: var(--map-mark);
    stroke: var(--map-sea);
    stroke-width: 12;
    paint-order: stroke;
}

.bys-best__now.storm-marker--td { stroke: currentColor; }

.bys-best__now .storm-marker__spin { animation: bys-spin 9s linear infinite; }
.bys-best__now .storm-marker__spin.is-south { animation-direction: reverse; }

@keyframes bys-spin {
    to { transform: rotate(-360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .bys-best__now .storm-marker__spin { animation: none; }
}

/* Flights: recon blue; one still flying in the accent, with its arrow */
.bys-flight__track {
    fill: none;
    stroke: var(--map-recon-track);
    stroke-width: 1.5;
    stroke-linejoin: round;
}

.bys-flight__hit {
    fill: none;
    stroke: transparent;
    stroke-width: 12;
    cursor: pointer;
}

.bys-flight.is-live .bys-flight__track { stroke: var(--color-accent-hover); stroke-width: 2; }
.bys-flight.is-highlight .bys-flight__track { stroke: var(--map-recon); stroke-width: 2.75; }
.bys-flight.is-dim { opacity: 0.3; }

.bys-flight__plane {
    fill: var(--color-accent-hover);
    stroke: var(--map-sea);
    stroke-width: 1.25;
    stroke-linejoin: round;
    paint-order: stroke;
}

/* ── The storm's pages, then its flights ─────────────────────────────── */
.bys-storm__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.bys-button {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.25rem 0.7rem;
    font-size: 0.8rem;
    text-decoration: none;
}

.bys-flights {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.bys-flights th {
    padding: 0 0.4rem 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.bys-flights td {
    padding: 0.4rem 0.3rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--color-border);
}

.bys-flights :is(th, td):first-child { padding-left: 0; }
.bys-flights :is(th, td):last-child { padding-right: 0; }

.bys-flights tbody tr { transition: background-color 0.15s; }
.bys-flights tbody tr:hover,
.bys-flights tbody tr.is-hover { background-color: var(--color-surface-hover); }

/* A flight still flying: tinted, with an accent rule */
.bys-flights tbody tr.is-live { background-color: var(--color-highlight); }
.bys-flights tbody tr.is-live td:first-child { border-left: 3px solid var(--color-accent); padding-left: 0.6rem; }

.bys-flights__who { min-width: 6.5rem; }
.bys-flights__plan { font-size: 0.85rem; color: var(--color-text-muted); white-space: nowrap; }
.bys-flights tbody tr.is-scheduled:hover { background-color: transparent; }
.bys-flights__callsign { display: block; font-weight: 700; white-space: nowrap; }
.bys-flights__type { display: block; font-size: 0.75rem; color: var(--color-text-muted); }
.bys-flights__who .page-tag { margin-top: 0.2rem; display: inline-flex; }
.bys-flights__label { display: block; white-space: nowrap; }
.bys-flights__time { display: block; font-size: 0.75rem; color: var(--color-text-muted); white-space: nowrap; }
.bys-flights__data { padding-inline: 0.1rem; }

/* A data page's link: a small square button; greyed where there's nothing */
.bys-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 1.75rem;
    padding: 0 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--color-button-neutral-text);
    text-decoration: none;
    background-color: var(--color-button-neutral-bg);
    border: 1px solid var(--color-button-neutral-border);
    transition: background-color 0.15s, color 0.15s;
}

a.bys-link:hover {
    color: var(--color-button-text);
    background-color: var(--color-button-bg);
    border-color: var(--color-button-bg);
}

a.bys-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }

/* Nothing from this flight: the button stays (so the columns line up), but
   struck through on a hatched, washed-out ground, and it doesn't act */
.bys-link.is-off {
    color: var(--color-text-faint);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    background-color: transparent;
    background-image: repeating-linear-gradient(-45deg, transparent 0 4px, var(--color-border) 4px 5px);
    border-style: dashed;
    border-color: var(--color-border-strong);
    opacity: 0.75;
    cursor: not-allowed;
}

/* An active storm recon hasn't flown yet */
.bys-flights__none {
    padding: 0.9rem 0 !important;
    color: var(--color-text-muted);
}

.bys-flights tbody tr.is-empty:hover { background-color: transparent; }

/* ── Narrower screens ────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .bys-storm__body { grid-template-columns: minmax(0, 1fr); }
    .bys-storm__map { border-right: none; border-bottom: 1px solid var(--color-border); }
    .bys-storm__sticky { position: static; }
    .bys-storm__flights { padding-left: 1rem; }
}

@media (max-width: 700px) {
    /* Each flight on two lines: who, ID and times, then its links */
    .bys-flights,
    .bys-flights tbody { display: block; }
    .bys-flights thead { display: none; }
    .bys-flights tbody tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.3rem;
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--color-border);
    }
    .bys-flights td { padding: 0; border: none; }
    .bys-flights__who { grid-column: 1 / 2; min-width: 0; }
    .bys-flights__id { grid-column: 2 / 4; text-align: right; }
    .bys-flights__data { padding: 0; }
    .bys-link { min-height: 2.5rem; padding: 0 0.2rem; font-size: 0.72rem; } /* touch size */
    .bys-flights tbody tr.is-live td:first-child { border-left: none; padding-left: 0; }
    .bys-flights tbody tr.is-live { border-left: 3px solid var(--color-accent); padding-left: 0.6rem; }
    .bys-button { min-height: 2.5rem; }
}

@media (max-width: 480px) {
    .bys-index,
    .bys-group,
    .bys-sources { padding-inline: 1rem; }
    .bys-group { padding-top: 1rem; }
    .bys-storm__map,
    .bys-storm__flights { padding: 0.75rem; }
    .bys-map { height: 320px; }
    .bys-storm__summary { padding-left: 0.75rem; }
    .bys-year select { font-size: 16px; } /* no zoom on focus (iOS) */
}

/* ── Satellite background (js/main.js: Map / Satellite) ─────────────────
   GOES GeoColor under the map. The drawn land goes (a faint coastline
   stays), and the marks switch to colors that read on dark imagery and
   white cloud. (html:root: outranks the dark theme's map colors) */
html:root .flightmap.is-satellite {
    --map-sea: #0b141c;
    --map-grid: rgba(255, 255, 255, 0.2);
    --map-label: rgba(255, 255, 255, 0.85);
    --map-mark: #ffffff;
    --map-mark-soft: #dfe6ee;
    --map-tag-bg: rgba(11, 20, 28, 0.86);
    --map-tag-border: rgba(255, 255, 255, 0.4);
    --map-recon: #ffc93c;
    --map-recon-track: rgba(255, 201, 60, 0.8);
}

.flightmap.is-satellite .flightmap__land {
    fill: none;
    stroke: rgba(255, 255, 255, 0.35);
}

.flightmap.is-satellite .bys-legend {
    color: #e8eaed;
}

.bys-legend__sat {
    flex-basis: 100%;
}

/* Map / Satellite, beside the year */
.bys-base {
    display: inline-flex;
    align-self: flex-end;
}

.bys-base button {
    min-height: 2.25rem;
    padding: 0 0.75rem;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-button-neutral-text);
    background-color: var(--color-button-neutral-bg);
    border: 1px solid var(--color-button-neutral-border);
    border-radius: 0;
    cursor: pointer;
}

.bys-base button + button {
    border-left: none;
}

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

.bys-base button[aria-pressed="true"] {
    color: var(--color-button-text);
    background-color: var(--color-button-bg);
    border-color: var(--color-button-bg);
}

.bys-base button:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}