/* layout.css -- the 2026-09-28 layout: operational status chips (ui/statusChips.js), the Layers panel
   (ui/layersPanel.js), the right panel's view history (ui/infoPanel.js), the operations dock
   (ui/hubTimeline.js + ui/systemSummary.js), the timeline's "viewing" indicator (ui/timeline.js) and
   saved workspaces (ui/workspaces.js). Loaded after every panel's own CSS so the docked overrides win. */

/* ===============================
   Top bar: status chips + view buttons
   =============================== */
#statusChips {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 0 1 auto;
    overflow-x: auto;
    scrollbar-width: none;
}
/* Above phone width the chips are the top bar's whole second row, under a thin divider. */
@media (min-width: 761px) {
    #searchContainer { order: 1; }
    #topbarViews { order: 2; }
    #topbar-user-controls { order: 3; }
    #statusChips {
        order: 4;
        flex: 1 1 100%;
        margin: 0 -12px;
        padding: 4px 12px 0;
        border-top: 1px solid var(--panel-border);
    }
}
#statusChips::-webkit-scrollbar { display: none; }

.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 4px 9px;
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    background: var(--btn-bg);
    color: var(--text-light);
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
}
.status-chip:hover { background: var(--btn-hover); }
.status-chip[aria-expanded="true"] { border-color: var(--mint); }
/* The count: muted at zero, loud when there's something. "?" = the source failed (never a silent 0). */
.status-chip .chip-count {
    min-width: 18px;
    padding: 0 5px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 11px;
    line-height: 17px;
    text-align: center;
    background: rgba(255, 255, 255, 0.1);
    color: #a8b0bb;
}
.status-chip .chip-detail { color: #c8ced6; font-size: 11px; }
.status-chip .chip-short { display: none; font-weight: 600; letter-spacing: 0.02em; }
.status-chip.tone-warn { border-color: #eab308; }
.status-chip.tone-warn .chip-count { background: #eab308; color: #111; }
.status-chip.tone-active .chip-count { background: #f28c28; color: #111; }
.status-chip.tone-alert { border-color: #e34b4b; }
.status-chip.tone-alert .chip-count { background: #e34b4b; color: #111; }
.status-chip.tone-unknown .chip-count { background: transparent; border: 1px dashed #f28c28; color: #f28c28; }

/* The flight filter chip: mint when a filter is on, so a narrowed count is never mistaken for the whole picture. */
.status-chip-filter.is-on { border-color: var(--mint); color: var(--mint); }
.status-chip-filter.is-on .chip-detail { color: var(--mint); }
.status-chip-link { text-decoration: none; }
.status-filter-form { display: grid; grid-template-columns: auto 1fr; gap: 6px 8px; align-items: center; }
.status-filter-form label { color: #a8b0bb; font-size: 12px; }
.status-filter-form input, .status-filter-form select { font: inherit; font-size: 12px; text-transform: uppercase; }
.status-filter-actions { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; }
.status-pop-filter-note { color: var(--mint); }
.status-pop-status { font-size: 10px; padding: 0 5px; border-radius: 6px; border: 1px solid #5c6570; color: #c8ced6; margin-left: 4px; }

#topbarViews { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

/* A chip's popover (one per chip, each a transient surface). */
.status-popover {
    position: fixed;
    z-index: 100001;
    width: min(460px, calc(100vw - 16px));
    max-height: calc(100vh - var(--topbar-h) - var(--timeline-h, 0px) - 16px);
    display: flex;
    flex-direction: column;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.48);
    color: var(--text-light);
    font-size: 12px;
}
.status-popover[hidden] { display: none; }
.status-popover[data-chip="atc"] { width: min(560px, calc(100vw - 16px)); }
.status-pop-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--panel-border);
    flex: 0 0 auto;
}
.status-pop-title { font-weight: 700; font-size: 14px; flex: 1 1 auto; }
.status-pop-head select {
    background: var(--btn-bg); color: var(--text-light); border: 1px solid var(--panel-border);
    border-radius: 4px; font-size: 11px; padding: 2px 4px;
}
.status-pop-body { overflow-y: auto; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.status-pop-section { padding: 8px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.status-pop-section:last-child { border-bottom: 0; }
.status-pop-label { color: #9ea8b4; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 4px; }
.status-pop-note { color: #a8b0bb; font-size: 11px; line-height: 1.4; }
.status-pop-warn { color: #f28c28; }
.status-pop-empty { color: #a8b0bb; padding: 4px 0; }
/* Diversions list: a tag after the route (air return, inferred...) and the recovery-leg line under a row. */
.status-pop-tag {
    display: inline-block; margin-left: 4px; padding: 0 4px; border-radius: 3px; font-size: 10px;
    background: rgba(255, 255, 255, 0.08); color: #c8cfd8; white-space: nowrap;
}
.status-pop-sub { font-size: 11px; padding: 0 6px 4px 84px; line-height: 1.3; }
.status-pop-row {
    display: grid;
    grid-template-columns: 70px 1fr auto;
    gap: 8px;
    align-items: baseline;
    width: 100%;
    padding: 5px 6px;
    border: 0;
    border-radius: 4px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.status-pop-row:hover, .status-pop-row:focus-visible { background: rgba(255, 255, 255, 0.07); outline: none; }
.status-pop-row b { font-variant-numeric: tabular-nums; }
.status-pop-row .muted { color: #a8b0bb; font-size: 11px; white-space: nowrap; }
.status-pop-carrier { grid-template-columns: 50px 1fr auto; cursor: default; }
button.status-pop-carrier { cursor: pointer; }
div.status-pop-carrier:hover { background: none; }
.status-pop-carrier .muted { white-space: normal; }
.status-pop-airports { display: flex; flex-wrap: wrap; gap: 5px; }
.status-pop-airport {
    border: 1px solid var(--panel-border); border-radius: 12px; background: var(--btn-bg); color: inherit;
    font: inherit; padding: 2px 9px; cursor: pointer;
}
.status-pop-airport b { margin-left: 4px; }
.status-pop-hazard { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0; }
.status-pop-hazard button {
    background: var(--btn-bg); color: inherit; border: 1px solid var(--panel-border); border-radius: 4px;
    font: inherit; font-size: 11px; padding: 2px 8px; cursor: pointer;
}

/* The ATC Programs panel inside the chip popover: its own dropdown chrome is dropped, and it scrolls as one column
   within the popover's height (2026-10-08: with restrictions and advisories below, a list that only filled the
   leftover space was squeezed to a few rows and the panel ran off the bottom of the screen). */
.status-popover #atcProgramsPanel {
    position: static; width: auto; max-height: none; box-shadow: none; border: 0; border-radius: 0;
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
}
.status-popover #atcProgramsPanel > * { flex-shrink: 0; }
.status-popover #atcProgramsPanel .atc-programs-list { max-height: none; overflow: visible; }

/* The label for flights drawn from a status chip (map/opsFlightsLayer.js), top-left of the map. */
.ops-flights-chip {
    position: absolute; top: 10px; left: 10px; z-index: 5; display: flex; flex-direction: column; gap: 2px;
    padding: 4px 6px 4px 9px; border: 1px solid var(--panel-border); border-radius: 14px;
    background: rgba(27, 30, 35, 0.92); color: var(--text-light); font-size: 12px;
}
.ops-flights-chip[hidden] { display: none; }
.ops-flights-line { display: flex; align-items: center; gap: 6px; }
.ops-flights-chip i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ops-flights-chip button { background: none; border: 0; color: #c8ced6; cursor: pointer; font-size: 12px; padding: 0 3px; }

/* ===============================
   Left bar: the Layers panel
   =============================== */
#layers-header {
    padding: 12px;
    font-weight: bold;
    font-size: 15px;
    color: white;
    border-bottom: 1px solid var(--panel-border);
}
.layer-group { border-bottom: 1px solid var(--panel-border); }
.layer-group > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.03);
    user-select: none;
}
.layer-group > summary::-webkit-details-marker { display: none; }
.layer-group > summary::before {
    content: "\203A"; color: #a8b0bb; font-size: 16px; line-height: 10px; width: 8px;
    transition: transform 0.12s ease;
}
.layer-group[open] > summary::before { transform: rotate(90deg); }
.layer-group-title { flex: 1 1 auto; }
/* "2 on" -- how many of this group's layers are drawn, so a closed group still says what it's showing. */
.layer-group-count:empty { display: none; }
.layer-group-count {
    font-size: 11px; font-weight: 600; color: var(--mint); border: 1px solid rgba(111, 255, 210, 0.35);
    border-radius: 8px; padding: 0 6px; line-height: 16px;
}
.layer-group-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 12px; }
.layer-group-note { font-size: 11px; color: #a8b0bb; line-height: 1.35; }

/* Panels that used to be topbar dropdowns, now docked in a group: no dropdown chrome, always shown. */
#layers-panel .overlays-panel,
#layers-panel .nws-alerts-panel,
#layers-panel .advisories-panel,
#layers-panel .tropical-panel {
    position: static;
    width: auto;
    max-height: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 10px 12px;
}
#layers-panel .tropical-panel,
#layers-panel .advisories-panel { border-top: 1px solid rgba(255, 255, 255, 0.06); }
#layers-panel .nws-alerts-header,
#layers-panel .advisories-header,
#layers-panel .tropical-header,
#layers-panel .overlays-header { font-size: 12px; }
#layers-panel .nws-alerts-types { max-height: 260px; overflow-y: auto; }
/* The weather card list sits directly in its group. */
#layers-panel #weather-panel { border: 0; background: transparent; }
#layers-panel #weather-header { font-size: 13px; padding: 8px 12px; }
.layer-group .map-display-row {
    display: flex; flex-direction: column; gap: 4px; font-size: 12px;
}
.layer-group .map-display-row select {
    padding: 4px 6px; background: var(--btn-bg); color: var(--text-light);
    border: 1px solid var(--panel-border); border-radius: 4px; font-size: 12px;
}
.layer-group .map-display-note { font-size: 11px; color: var(--text-muted, #9aa3ad); line-height: 1.35; }

/* ===============================
   Right panel: view history
   =============================== */
.info-nav { display: flex; align-items: center; gap: 6px; min-width: 0; }
.info-back {
    background: var(--btn-bg); color: var(--text-light); border: 1px solid var(--panel-border);
    border-radius: 4px; padding: 1px 7px; cursor: pointer; font-size: 14px; line-height: 18px;
}
.info-back:disabled { opacity: 0.35; cursor: default; }
.info-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.info-kind { color: #9ea8b4; font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.03em; }
.info-view-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.info-view-actions button, .info-airport-link {
    background: var(--btn-bg); color: var(--text-light); border: 1px solid var(--panel-border);
    border-radius: 4px; padding: 3px 8px; cursor: pointer; font: inherit; font-size: 12px;
}
.info-airport-link { padding: 0 5px; }
.info-derived { color: #f2c36b; }

/* ===============================
   Operations dock (the hub timeline drawer, now with tabs)
   =============================== */
#hubTimelineDrawer { max-height: none; height: var(--ops-dock-h, 260px); min-height: 110px; }
#hubTimelineDrawer .hub-tl-body { flex: 1 1 auto; min-height: 0; }
.ops-dock-resize {
    position: absolute; left: 0; right: 0; top: -4px; height: 8px; cursor: ns-resize; z-index: 3;
}
.ops-dock-resize:hover, .ops-dock-resize.dragging { background: rgba(111, 255, 210, 0.25); }
.ops-dock-tabs { display: flex; gap: 2px; }
.hub-tl-bar .ops-dock-tab {
    background: none; border: 1px solid transparent; border-bottom: 2px solid transparent; color: #c8ced6;
    font: inherit; font-weight: 600; font-size: 12px; padding: 2px 8px; cursor: pointer; border-radius: 4px 4px 0 0;
}
.hub-tl-bar .ops-dock-tab[aria-selected="true"] { color: white; border-bottom-color: var(--mint); background: rgba(255, 255, 255, 0.05); }
#hubTimelineDrawer[data-tab="watchlist"] .hub-tl-timeline-only { display: none; }
.hub-tl-body[hidden], .ops-watchlist-pane[hidden] { display: none; }
.ops-watchlist-pane { overflow: auto; flex: 1 1 auto; min-height: 0; }
/* In the dock the Watchlist is a pane, not a popup: stations tile across the width. */
.ops-watchlist-pane .hub-watchlist {
    position: static; width: auto; max-height: none; box-shadow: none; border: 0; border-radius: 0;
    background: transparent; overflow: visible;
}
.ops-watchlist-pane .hub-watchlist-header { display: none; }
.ops-watchlist-pane .hub-watchlist-list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 7px; align-items: start;
}
.ops-watchlist-pane .hub-watchlist-row { margin-bottom: 0; }

/* ===============================
   Timeline: what time the map is showing
   =============================== */
/* One size whatever it says (2026-10-11, owner: it "resizes a lot and that makes the timeline bounce around"):
   the hidden sizer holds the longest text ("+00h 00m forecast"; 48 h and more read in days) in the same grid cell
   as the text, and the Now button keeps its space while Live. */
#timeOffset {
    flex: 0 0 auto;
    display: inline-grid;
    grid-template-columns: auto auto;
    align-items: center;
    column-gap: 6px;
    font-variant-numeric: tabular-nums;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid var(--panel-border);
    color: #c8ced6;
}
#timeOffset.offset-live { color: #35b86a; border-color: rgba(53, 184, 106, 0.5); }
#timeOffset.offset-past { color: #eab308; border-color: rgba(234, 179, 8, 0.5); }
#timeOffset.offset-future { color: #6fb7ff; border-color: rgba(111, 183, 255, 0.5); }
#timeOffset button {
    background: var(--btn-bg); color: var(--text-light); border: 1px solid var(--panel-border); border-radius: 8px;
    font: inherit; font-size: 10px; padding: 0 6px; cursor: pointer;
}
#timeOffset .time-offset-sizer, #timeOffset .time-offset-text { grid-area: 1 / 1; }
#timeOffset .time-offset-sizer { visibility: hidden; }
#timeOffset .time-offset-text { justify-self: center; }
#timeOffset button { grid-area: 1 / 2; }
#timeOffset.offset-live button { visibility: hidden; }

/* ===============================
   Map menu: saved workspaces
   =============================== */
.workspaces { border-top: 1px solid var(--panel-border); padding-top: 8px; }
.workspaces-row { display: flex; gap: 6px; align-items: center; }
.workspaces-row select, .workspaces-row input { flex: 1 1 auto; min-width: 0; }
.workspaces-row input {
    padding: 5px 7px; background: var(--btn-bg); color: var(--text-light);
    border: 1px solid var(--panel-border); border-radius: 4px; font-size: 12px;
}
.workspaces-row button {
    background: var(--btn-bg); color: var(--text-light); border: 1px solid var(--panel-border);
    border-radius: 4px; padding: 5px 8px; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.workspaces-row button:disabled { opacity: 0.45; cursor: default; }

.hub-tl-bar .ops-dock-tab, .hub-tl-bar .help-context { white-space: nowrap; }
.hub-tl-bar { min-width: 0; overflow: hidden; }
/* The legend keeps its room and the status line gives way (2026-10-11); a narrow dock shows the swatches only
   (css/hubTimeline.css container query). */
.hub-tl-legend { flex: none; }
.hub-tl-bar .hub-tl-status { flex: 1 1 0; }

/* Half a 2560/2880 widescreen (1280-1440 px). The chips have their own row, so they keep full names. */
@media (max-width: 1440px) {
    #topbar #airportSearch { width: 220px; }
    #topbar-user-controls .topbar-user-name { display: none; }
    .topbar-icon-btn { padding: 6px 8px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
    #topbar { column-gap: 6px; padding: 4px 8px; }
    #statusChips { margin: 0 -8px; padding: 4px 8px 0; gap: 5px; }
    .status-chip { gap: 4px; padding: 4px 7px; }
    #topbar #searchContainer { flex: 1 1 140px; min-width: 110px; max-width: 220px; }
    #topbar #airportSearch { width: 100%; }
    #topbarViews { gap: 4px; }
}
@media (max-width: 760px) {
    /* A phone: the ops shorthand (DIV, HOLD, CNX) and no detail text. */
    .status-chip .chip-label, .status-chip .chip-detail { display: none; }
    .status-chip .chip-short { display: inline; }
    /* No room in the phone timeline grid: float just above the bar, and only when NOT live. */
    #timeOffset { position: absolute; right: 8px; top: -28px; background: var(--panel-bg); }
    #timeOffset.offset-live { display: none; }
    /* Floated over the map here, so its size moves nothing: no need to reserve the longest text. */
    #timeOffset .time-offset-sizer { display: none; }
    #statusChips {
        flex: 1 1 100%;
        gap: 5px;
        order: 3;
    }
    .status-chip {
        font-size: 11px;
        min-height: 27px;
        padding: 3px 6px;
    }
    .status-chip .chip-count {
        font-size: 10px;
        line-height: 16px;
        min-width: 17px;
        padding: 0 4px;
    }
    #topbarViews {
        display: flex;
        flex: 1 1 100%;
        gap: 5px;
        min-width: 0;
        order: 4;
        overflow-x: auto;
        scrollbar-width: none;
    }
    #topbarViews::-webkit-scrollbar { display: none; }
    #topbarViews .topbar-icon-btn {
        min-height: 32px;
        padding: 5px 8px;
    }
    .ops-watchlist-pane .hub-watchlist-list { grid-template-columns: 1fr; }
}

/* Diversions chip: Airports board -- into / away from each airport, now and today (ui/diversionTotals.js). */
.div-views { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.div-view {
    background: var(--btn-bg); color: var(--text-light); border: 1px solid var(--panel-border); border-radius: 4px;
    font: inherit; font-size: 12px; padding: 3px 9px; cursor: pointer;
}
.div-view[aria-pressed="true"] { background: rgba(120, 170, 255, 0.22); border-color: rgba(120, 170, 255, 0.6); font-weight: 600; }
.div-views .div-today { margin: 0 0 0 auto; text-transform: none; letter-spacing: 0; }
.div-board { width: 100%; border-collapse: collapse; font-size: 12px; }
.div-board th { color: #a8b0bb; font-weight: 600; text-align: left; padding: 1px 4px 2px; font-size: 11px; white-space: nowrap; }
.div-board th.num { text-align: right; }
.div-board th.grp { text-align: center; border-bottom: 1px solid var(--panel-border); }
.div-board tbody tr { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.div-board tbody tr:hover { background: rgba(255, 255, 255, 0.04); }
.div-board td { padding: 2px 4px; }
.div-board td.num { text-align: right; font-variant-numeric: tabular-nums; width: 46px; white-space: nowrap; }
.div-board td.num b { color: #fff; }
.div-board td.muted { color: #5f6873; }
.div-board td:nth-child(3) { border-right: 1px solid rgba(255, 255, 255, 0.08); }
.div-board .div-quiet { opacity: 0.6; }
.div-board .div-ap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.div-board .div-airport { padding: 0 6px; }
.div-place { color: #a8b0bb; font-size: 11px; margin-left: 5px; }
.div-inbound { color: #f2b84b; font-size: 10px; margin-left: 3px; }
.div-sort { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0 4px; text-transform: uppercase; letter-spacing: 0.03em; }
.div-sort[aria-pressed="true"] { color: #fff; }
.div-sort:hover, .div-sort:focus-visible { color: #fff; text-decoration: underline; outline: none; }
.div-filter {
    background: none; border: 1px solid transparent; border-radius: 4px; color: #a8b0bb; font: inherit;
    font-size: 11px; padding: 1px 4px; cursor: pointer; line-height: 0; vertical-align: middle;
}
.div-filter:hover, .div-filter:focus-visible { color: #fff; border-color: var(--panel-border); outline: none; }
.div-today { margin-top: 4px; }
.div-today a { color: inherit; }
/* 2026-10-09: FAA ERAM holds (SFDPS) in the Holding list and a flight's detail. */
.status-pop-row .status-pop-faa-hold { color: #facc15; font-weight: 600; }
.flights-hold { color: #facc15; }
.flights-eram-events { margin: 4px 0 0; padding-left: 18px; }
/* 2026-10-09: the combined aircraft popup's link to the FAA flight. */
.flights-open-faa { margin-top: 4px; font: inherit; font-size: 12px; padding: 2px 8px; border-radius: 4px; border: 1px solid #5eead4;
    background: transparent; color: #5eead4; cursor: pointer; }
.flights-open-faa:hover, .flights-open-faa:focus-visible { background: rgba(94, 234, 212, 0.12); }