/* Colors summarize only observed METAR conditions. They are decision support,
   not an operational clearance or an ATC/network status. */
.hub-watchlist { position: fixed; top: calc(var(--topbar-h) + 8px); right: 12px; z-index: 100001; width: min(470px, calc(100vw - 24px)); max-height: min(720px, calc(100vh - var(--topbar-h) - 24px)); overflow: auto; padding: 0; border: 1px solid var(--panel-border); border-radius: 7px; background: var(--panel-bg); color: var(--text-light); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.48); }
.hub-watchlist-header { padding: 12px 14px 9px; border-bottom: 1px solid var(--panel-border); }
.hub-watchlist-title { font-size: 15px; font-weight: 700; }
.hub-watchlist-subtitle { margin-top: 4px; color: #a8b0bb; font-size: 11px; line-height: 1.35; }
.hub-watchlist-legend { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 14px; font-size: 11px; color: #c8ced6; border-bottom: 1px solid var(--panel-border); }
.hub-watchlist-legend span { display: inline-flex; align-items: center; gap: 4px; }
.hub-watchlist-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.hub-watchlist-dot.green { color: #35b86a; } .hub-watchlist-dot.yellow { color: #eab308; } .hub-watchlist-dot.orange { color: #f28c28; } .hub-watchlist-dot.red { color: #e34b4b; } .hub-watchlist-dot.gray { color: #84909e; }
.hub-watchlist-list { padding: 8px; }
.hub-watchlist-row { border: 1px solid var(--panel-border); border-left: 4px solid #84909e; border-radius: 4px; margin-bottom: 7px; background: rgba(255,255,255,0.025); }
.hub-watchlist-row:last-child { margin-bottom: 0; }
.hub-watchlist-row.level-green { border-left-color: #35b86a; } .hub-watchlist-row.level-yellow { border-left-color: #eab308; } .hub-watchlist-row.level-orange { border-left-color: #f28c28; } .hub-watchlist-row.level-red { border-left-color: #e34b4b; }
.hub-watchlist-row > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 9px; list-style: none; }
.hub-watchlist-row > summary::-webkit-details-marker { display: none; }
.hub-watchlist-row > summary::before { content: "›"; color: #a8b0bb; font-size: 18px; line-height: 12px; transform: rotate(0deg); }
.hub-watchlist-row[open] > summary::before { transform: rotate(90deg); }
.hub-watchlist-hub { width: 34px; font-weight: 700; color: #fff; } .hub-watchlist-status { flex: 1; font-size: 12px; } .hub-watchlist-age { color: #a8b0bb; font-size: 11px; white-space: nowrap; }
.hub-watchlist-detail { padding: 0 12px 11px 25px; font-size: 12px; }.hub-watchlist-factor { margin-top: 7px; color: #d6dbe1; }.hub-watchlist-factor-label { color: #9ea8b4; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; }
.hub-watchlist-raw { margin-top: 3px; padding: 6px 7px; border-radius: 3px; background: rgba(255,255,255,0.06); color: #e7ebef; font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }.hub-watchlist-muted { color: #a8b0bb; }.hub-watchlist-error { color: #f3b2b2; }
@media (max-width: 700px) {
    #hubWatchlistBtn { padding-inline: 7px; }
    .hub-watchlist {
        left: 6px;
        max-height: calc(100vh - var(--topbar-h) - var(--timeline-h) - 18px);
        right: 6px;
        width: auto;
    }
}

/* Radar / crosswind / model-outlook detail rows (ui/watchlistInputs.js). Same level colors as the dots above. */
.hub-watchlist-factor.level-text-yellow, .hub-watchlist-outlook .level-text-yellow { color: #eab308; }
.hub-watchlist-factor.level-text-orange, .hub-watchlist-outlook .level-text-orange { color: #f28c28; }
/* Red as text is lightened (the fill red is 4.3:1 on the panel, under the 4.5:1 minimum for small text). */
.hub-watchlist-factor.level-text-red, .hub-watchlist-outlook .level-text-red { color: #f27474; }
.hub-watchlist-outlook .level-text-gray { color: #84909e; }
.hub-watchlist-outlook-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 3px; font-size: 11px; }
.hub-watchlist-outlook-when { flex: 0 0 62px; font-weight: 600; color: #d6dbe1; }
.hub-watchlist-outlook-model { cursor: help; }
.hub-watchlist-outlook-agree { color: #a8b0bb; font-style: italic; }
.hub-watchlist-outlook-agree.disagree { color: #eab308; }

/* "Custom rules" (ui/systemSummary.js): the user's own impact rules colour some stations (2026-10-10). */
.hub-watchlist-custom { margin-left: 6px; font-size: 11px; padding: 1px 7px; border-radius: 9px; cursor: pointer;
    border: 1px solid var(--mint); background: transparent; color: var(--mint); }
.hub-watchlist-custom[hidden] { display: none; }