/* Hub timeline drawer (static/js/ui/hubTimeline.js): sits between the side bars, just above the main
   timeline; #map's bottom edge includes its height (--hub-drawer-h). Level colors match the
   Watchlist (systemSummary.css). */
#hubTimelineDrawer {
    position: fixed;
    left: var(--leftbar-offset);
    right: var(--rightbar-offset);
    bottom: var(--timeline-h);
    max-height: 40vh;
    display: flex;
    flex-direction: column;
    background: var(--panel-bg);
    border-top: 2px solid var(--panel-border);
    color: #e6e9ee;
    font-size: 12px;
    z-index: 600;
    transition: left 0.2s ease, right 0.2s ease;
}
#hubTimelineDrawer[hidden] { display: none; }
#hubTimelineDrawer { container: opsdock / inline-size; }
/* A narrow dock (side panels open, half a screen): the legend's swatches without their names (each has a
   tooltip, and the Key has them all). */
@container opsdock (max-width: 700px) {
    .hub-tl-legend { gap: 4px; }
    .hub-tl-legend .lbl { display: none; }
    .hub-tl-legend .sw { margin-right: 0; }
}
@media (max-width: 760px) {
    #hubTimelineDrawer { left: 0; right: 0; }
}

.hub-tl-bar { display: flex; align-items: center; gap: 10px; padding: 4px 10px; border-bottom: 1px solid var(--panel-border); }
.hub-tl-title { font-weight: 700; font-size: 13px; }
.hub-tl-status { flex: 1 1 auto; color: #a8b0bb; font-size: 11px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-tl-status.error { color: #f28c28; }
.hub-tl-legend { display: flex; gap: 8px; align-items: center; color: #c8ced6; font-size: 11px; white-space: nowrap; }
.hub-tl-legend .sw { display: inline-block; width: 12px; height: 10px; border-radius: 2px; vertical-align: -1px; margin-right: 3px; }
.hub-tl-bar button { background: var(--btn-bg, #2a2f37); color: inherit; border: 1px solid var(--panel-border); border-radius: 4px; padding: 2px 8px; cursor: pointer; }
.hub-tl-body { overflow: auto; }
.hub-tl-empty { padding: 10px; color: #a8b0bb; }

.hub-tl-grid { --name-w: 92px; --now-w: 40px; min-width: calc(var(--name-w) + var(--now-w) + var(--hours) * 12px); }
.hub-tl-row { display: grid; grid-template-columns: var(--name-w) var(--now-w) 1fr; align-items: stretch; height: 20px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.hub-tl-head { position: sticky; top: 0; z-index: 2; background: var(--panel-bg); height: 18px; color: #a8b0bb; font-size: 10px; }
.hub-tl-name { display: flex; align-items: center; gap: 5px; padding: 0 6px; background: none; border: none; color: inherit; font: inherit; text-align: left; cursor: pointer; position: sticky; left: 0; z-index: 1; background: var(--panel-bg); }
.hub-tl-head .hub-tl-name { cursor: default; }
.hub-tl-name:hover .hub-tl-icao { text-decoration: underline; }
.hub-tl-icao { font-weight: 600; font-variant-numeric: tabular-nums; }
.hub-tl-worst { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.hub-tl-trop { font-size: 11px; }
.hub-tl-now-head { display: flex; align-items: center; justify-content: center; font-weight: 700; color: #e6e9ee; }
.hub-tl-hours { position: relative; display: grid; grid-template-columns: repeat(var(--hours), 1fr); }
.hub-tl-hour-label { font-size: 10px; white-space: nowrap; overflow: visible; padding-left: 1px; line-height: 18px; }
.hub-tl-hour-label.day { color: #e6e9ee; font-weight: 700; border-left: 1px solid #6b7684; }

.hub-tl-cell { position: relative; margin: 2px 0; margin-right: 1px; border-radius: 1px; cursor: default; outline: none; }
.hub-tl-cell:focus-visible, .hub-tl-cell:hover { box-shadow: 0 0 0 1px #fff inset; }
.hub-tl-cell.day { margin-left: 1px; box-shadow: -1px 0 0 #6b7684; }
.hub-tl-nowcell { margin: 2px 4px; border: 1px solid rgba(255,255,255,0.35); }

/* Level fills are for the timeline's own cells and dots only. The Watchlist rows share this drawer and the
   level-* class names, and must keep their dark background (their text is light). */
.hub-tl-cell.level-green, .hub-tl-worst.level-green { background-color: #35b86a; } .hub-tl-cell.level-yellow, .hub-tl-worst.level-yellow { background-color: #eab308; }
.hub-tl-cell.level-orange, .hub-tl-worst.level-orange { background-color: #f28c28; } .hub-tl-cell.level-red, .hub-tl-worst.level-red { background-color: #e34b4b; }
.hub-tl-cell.level-gray { background-color: #4a525c; }
.hub-tl-worst.level-gray { background-color: #84909e; }
/* The same colours for the legend swatches, the popup's chips and dots, and the hour view (2026-10-11: the
   legend's swatches had none -- the fills above are scoped to cells, and "level-*" alone is the Watchlist's). */
.hub-tl-legend .sw.level-green, .hub-tl-chip.level-green, .hub-tl-dot.level-green { background-color: #35b86a; }
.hub-tl-legend .sw.level-yellow, .hub-tl-chip.level-yellow, .hub-tl-dot.level-yellow { background-color: #eab308; }
.hub-tl-legend .sw.level-orange, .hub-tl-chip.level-orange, .hub-tl-dot.level-orange { background-color: #f28c28; }
.hub-tl-legend .sw.level-red, .hub-tl-chip.level-red, .hub-tl-dot.level-red { background-color: #e34b4b; }
.hub-tl-legend .sw.level-gray, .hub-tl-chip.level-gray, .hub-tl-dot.level-gray { background-color: #4a525c; }
/* model-only hours: hatched, and a touch dimmer -- a model can raise an hour to yellow at most */
.hub-tl-cell.cov-model { background-image: repeating-linear-gradient(135deg, rgba(20,22,24,0.55) 0 2px, transparent 2px 5px); opacity: 0.85; }
.hub-tl-cell.cov-none.level-gray { background-image: none; }
/* TEMPO/PROB-driven hour */
.hub-tl-cell.conditional::after { content: ""; position: absolute; top: 1px; right: 1px; width: 4px; height: 4px; border-radius: 50%; background: #141618; }

.hub-tl-trop.level-text-yellow { color: #eab308; } .hub-tl-trop.level-text-orange { color: #f28c28; } .hub-tl-trop.level-text-red { color: #f27474; }
.hub-tl-arrival { position: absolute; top: -3px; transform: translateX(-50%); font-size: 10px; line-height: 10px; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; pointer-events: auto; cursor: default; }
.hub-tl-arrival.likely { color: transparent; -webkit-text-stroke: 1px #fff; }

.hub-tl-tip { position: fixed; z-index: 100002; max-width: min(520px, calc(100vw - 16px)); padding: 7px 9px; background: #0f1216; border: 1px solid var(--panel-border); border-radius: 5px; box-shadow: 0 4px 14px rgba(0,0,0,0.5); font-size: 12px; line-height: 1.4; color: #e6e9ee; pointer-events: none; }
.hub-tl-tip[hidden] { display: none; }
.hub-tl-tip-title { font-weight: 700; margin-bottom: 2px; }
.hub-tl-tip-line { white-space: normal; }

/* The short hour popup (ui/hubTimeline.js showSummaryTip): level chip, one coloured line per reason. */
.hub-tl-tip-summary { max-width: min(360px, calc(100vw - 16px)); }
.hub-tl-tip-summary .hub-tl-tip-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.hub-tl-chip { display: inline-block; padding: 0 6px; border-radius: 8px; font-size: 11px; font-weight: 700; line-height: 16px; color: #111; white-space: nowrap; }
.hub-tl-chip.level-red, .hub-tl-chip.level-gray { color: #fff; }
.hub-tl-reason { display: flex; align-items: baseline; gap: 6px; padding: 1px 0 1px 6px; border-left: 3px solid; }
.hub-tl-reason.level-yellow { border-color: #eab308; } .hub-tl-reason.level-orange { border-color: #f28c28; }
.hub-tl-reason.level-red { border-color: #e34b4b; } .hub-tl-reason.level-green { border-color: #35b86a; }
.hub-tl-reason b { font-weight: 600; color: #c8ced6; white-space: nowrap; }
.hub-tl-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; }
.hub-tl-tip-more, .hub-tl-tip-note { color: #a8b0bb; font-size: 11px; margin-top: 2px; }
.hub-tl-tip-hint { color: #8d96a3; font-size: 10px; margin-top: 4px; }
.hub-tl-hours .hub-tl-cell, .hub-tl-nowcell { cursor: pointer; }

/* The Key (ui/hubTimeline.js buildKey): samples use the grid's own classes inside a fixed-size box. */
.hub-tl-key-btn { font-weight: 600; }
.hub-tl-key-btn[aria-expanded="true"] { border-color: #e6e9ee !important; }
.hub-tl-key { position: fixed; z-index: 100002; width: min(400px, calc(100vw - 16px)); max-height: 70vh; overflow: auto; padding: 8px 10px;
    background: #0f1216; border: 1px solid var(--panel-border); border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,0.55);
    color: #e6e9ee; font-size: 12px; line-height: 1.35; }
.hub-tl-key-head { font-weight: 700; margin: 6px 0 3px; color: #c8ced6; }
.hub-tl-key-head:first-child { margin-top: 0; }
.hub-tl-key-row { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 8px; padding: 2px 0; }
.hub-tl-key-sample { position: relative; display: flex; justify-content: center; width: 28px; height: 18px; }
.hub-tl-key-sample > .hub-tl-cell { display: block; width: 14px; height: 16px; margin: 1px 0; }
.hub-tl-key-sample > .hub-tl-nowcell { width: 22px; height: 14px; margin: 1px 0; }
.hub-tl-key-sample > .hub-tl-worst { margin-top: 5px; }
.hub-tl-key-sample > .hub-tl-trop { line-height: 18px; }
.hub-tl-key-sample > .hub-tl-key-day { width: 1px; height: 18px; background: #6b7684; }
.hub-tl-key-sample > .hub-tl-key-arrow { position: relative; width: 14px; height: 18px; }
.hub-tl-key-sample .hub-tl-arrival { top: 4px; left: 50%; }
.hub-tl-key-sample > .hub-tl-flights-cell { width: 14px; height: 14px; margin-top: 2px; }
.hub-tl-key-foot { margin-top: 8px; color: #a8b0bb; }
.hub-tl-key-foot .help-context { margin-left: 4px; }

/* TFMS flights row under each station (ui/hubTimeline.js flightsRow): bar height = departures + arrivals
   relative to the station's busiest hour; red cap = cancellations; amber dot = EDCT/CTA; hatched = the hour
   may be missing flights (beyond TFMS's ~24 h list, or the feed connected less than a day before). */
.hub-tl-flights-toggle { display: flex; align-items: center; gap: 4px; color: #c8ced6; font-size: 11px; white-space: nowrap; cursor: pointer; }
.hub-tl-flights-row { height: 14px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.hub-tl-flights-name { font-size: 10px; color: #8d96a3; cursor: default; padding-left: 18px; }
.hub-tl-flights-name.bad { color: #f28c28; }
.hub-tl-flights-cell { position: relative; margin-right: 1px; display: flex; align-items: flex-end; outline: none; }
.hub-tl-flights-cell.day { margin-left: 1px; box-shadow: -1px 0 0 #6b7684; }
.hub-tl-flights-cell:hover, .hub-tl-flights-cell:focus-visible { box-shadow: 0 0 0 1px #fff inset; }
.hub-tl-flights-cell.incomplete { background-image: repeating-linear-gradient(135deg, rgba(160,170,180,0.22) 0 2px, transparent 2px 4px); }
.hub-tl-flights-bar { width: 100%; background: #7aa7d8; border-radius: 1px 1px 0 0; }
.hub-tl-flights-bar.h1 { height: 25%; } .hub-tl-flights-bar.h2 { height: 50%; }
.hub-tl-flights-bar.h3 { height: 75%; } .hub-tl-flights-bar.h4 { height: 100%; }
.hub-tl-flights-bar.cancelled { box-shadow: inset 0 2px 0 #e34b4b; }
.hub-tl-flights-edct { position: absolute; top: 0; right: 0; width: 4px; height: 4px; border-radius: 50%; background: #eab308; }
/* A program, restriction or blocked RAPT route in effect that hour (violet), or flights due above the rate set now
   (orange) -- ui/hourConstraints.js; details in the popup. */
.hub-tl-flights-cell.constrained::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #a78bfa; }
.hub-tl-flights-cell.over-rate::before { background: #f97316; }
.hub-tl-flights-msg { grid-column: 1 / -1; font-size: 10px; color: #f28c28; line-height: 14px; padding-left: 4px; }
.hub-tl-flights-msg.loading { color: #8d96a3; }

/* The right panel's hour view (ui/hourDetailView.js). */
.hour-view, #infoPanelBody .hour-view ~ .info-section { font-size: 13px; line-height: 1.4; }
.hour-view-head { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.hour-view-level-name { margin: 4px 0 6px; color: #c8ced6; }
.hour-view-reason { display: grid; grid-template-columns: 8px auto 1fr auto; align-items: baseline; gap: 6px; padding: 3px 0 3px 6px; margin: 3px 0; }
.hour-view-text { min-width: 0; overflow-wrap: anywhere; }
.hour-view-level { font-size: 11px; color: #a8b0bb; white-space: nowrap; }
.hour-view-none, .hour-view-note { color: #a8b0bb; margin-top: 4px; }
.hour-view-note { font-size: 11px; }
.hour-view-guidance { margin: 4px 0 8px; font-size: 12px; }
.hour-view-guidance-label { font-weight: 600; color: #c8ced6; }
.hour-view-guidance ul { margin: 2px 0 0; padding-left: 18px; }
.hour-view-guidance li { margin: 1px 0; }