/* Shared interaction states and responsive layout; complements the base theme. */
:root { --header-height:60px; --text-muted:var(--muted); --text:var(--ink); --bg:var(--paper); }
.shell { min-height:0; grid-template-rows:var(--header-height) minmax(0,1fr); }
.header { gap:12px; }
.header-right, .brand { flex-shrink:0; }
.brand-radar-pill { display:none; }
.view-tabs { border-radius:10px; }
.view-tabs button { min-height:36px; font-size:12px; border-radius:7px; }
.tab-icon { font-size:15px; }
button.icon { width:36px; height:36px; min-height:36px; }
button, a, input, select { touch-action:manipulation; }
button:disabled:hover { box-shadow:none; transform:none; }
[aria-busy="true"] { cursor:progress; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; left:12px; top:-100px; z-index:3000; background:var(--paper); color:var(--ink); padding:12px 16px; border:2px solid var(--accent); border-radius:8px; }
.skip-link:focus { top:8px; }
:focus-visible { outline:2px solid var(--accent-hover); outline-offset:3px; }
.search { position:relative; }
.search input { padding-right:40px; font-size:14px; }
.search-clear { position:absolute; right:5px; top:50%; transform:translateY(-50%); border:0; background:transparent; color:var(--muted); width:32px; height:32px; padding:6px; border-radius:6px; }
.search-clear:hover { color:var(--ink); background:var(--panel-elevated); }
.search-help, .search-status, #archiveSearchStatus, #archiveRangeHint { font-size:12px; color:var(--muted); line-height:1.5; margin:5px 0; }
.filter-reset, .list-more-button { min-height:36px; border:1px solid var(--line-strong); border-radius:7px; padding:8px 12px; background:var(--panel); color:var(--ink); font-size:12px; }
.filter-reset:hover, .list-more-button:hover { border-color:var(--accent); }
.list-more-button { width:100%; margin:8px 0; }
.aircraft-row:focus-visible { outline-offset:-3px; }
.map-head { flex-wrap:wrap; gap:8px; }
.map-caption { flex:1 1 180px; min-width:0; }
.map-actions { flex-wrap:wrap; max-width:100%; margin-left:auto; }
.map-actions .chip, .map-actions .icon { min-height:36px; }
.map-actions .icon { width:36px; height:36px; }
.detail { width:min(380px,calc(100% - 36px)); top:var(--map-toolbar-bottom,76px); max-height:calc(100% - var(--map-toolbar-bottom,76px) - 32px); overflow-x:hidden; overscroll-behavior:contain; }
.detail-header-row { flex-wrap:wrap; gap:10px; }
.detail-header-row > :first-child { flex:1 1 135px; min-width:0; }
.detail-buttons { flex-wrap:wrap; margin-left:auto; }
.detail-buttons .icon { width:34px; height:34px; min-height:34px; }
.detail h2, .detail .subtitle, .service-class-banner, .detail-grid dd { overflow-wrap:anywhere; }
.detail .subtitle { line-height:1.5; }
.detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.detail-grid > div { min-width:0; }
.detail-grid dd { font-size:12px; line-height:1.5; white-space:normal; }
.detail-grid dt { font-size:10px; line-height:1.4; }
.detail-meta-row { flex-wrap:wrap; gap:6px; line-height:1.5; }
.detail-actions-row { flex-wrap:wrap; }
.detail-action-btn { min-height:38px; flex:1 1 120px; }
.detail-track-status { line-height:1.5; }
.photo-attribution { white-space:normal; line-height:1.4; gap:5px; }
.photo-attribution a { flex-shrink:0; }
.photo-empty, .photo-loading, .photo-context { padding:10px 14px; color:var(--muted); font-size:12px; line-height:1.5; margin:0; }
.photo-dots { min-height:28px; gap:0; }
.photo-dot, .photo-dot.active { width:24px; height:24px; border-radius:0; background:transparent; position:relative; }
.photo-dot::after { content:''; display:block; position:absolute; width:6px; height:6px; border-radius:50%; background:#94a3b8; top:9px; left:9px; }
.photo-dot.active::after { background:var(--accent); }
.legend { max-width:calc(100% - 30px); flex-wrap:wrap; row-gap:5px; pointer-events:none; }
.modal-backdrop { padding:16px; }
.modal { width:min(620px,100%); max-height:calc(100dvh - 32px); overscroll-behavior:contain; padding:26px; }
.modal h2 { padding-right:32px; }
.modal-close { width:36px!important; height:36px!important; min-height:36px!important; }
.modal p, .modal label { line-height:1.55; }
.modal input[type="search"], .modal input[type="text"], .modal select { min-height:38px; font-size:13px; }
.alert-inputs-row > div { min-width:0; }
.alert-form .search-result-item { display:flex; flex-direction:column; width:100%; text-align:left; border:0; background:var(--paper); color:var(--ink); font:inherit; }
.alert-form .search-result-item:hover { background:var(--panel-elevated); }
.alert-row-item { flex-wrap:wrap; }
.alerts-section-desc { font-size:12px; }
.alert-toggle-btn { min-height:34px; }
.form-feedback, .stats-status, #archiveRangeError { font-size:12px; line-height:1.5; padding:10px 12px; border-radius:7px; color:var(--ink-secondary); background:var(--panel); border:1px solid var(--line); }
.form-feedback.error, .stats-status.error, #archiveRangeError { color:var(--bos-red); border-color:color-mix(in srgb,var(--bos-red) 40%,var(--line)); }
.quick-help { padding:12px 14px; margin:12px 0 18px; border-radius:8px; background:var(--panel); }
.quick-help h3 { margin:0 0 8px; font-size:14px; }
.quick-help p { margin:8px 0; font-size:13px; color:var(--ink-secondary); }
.toast { max-width:min(520px,calc(100vw - 32px)); border-radius:10px; font-size:13px; line-height:1.5; text-align:center; }
.history-sidebar { min-width:0; overscroll-behavior:contain; }
.history-sidebar input, .history-sidebar select { min-height:38px; font-size:13px; }
.archive-intro > p:last-child { font-size:12px; }
.period-presets button, .speed-presets button { min-height:36px; font-size:12px; }
.archive-search-result { background:var(--paper); text-align:left; min-height:48px; }
.archive-search-result strong { font-size:13px; }
.archive-search-result span { font-size:11px; }
.archive-search-result:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.history-caption { background:var(--glass-bg); border:1px solid var(--glass-border); pointer-events:none; }
.history-caption h2 { font-size:15px; }
.history-message { background:var(--paper); color:var(--ink); border:1px solid var(--line-strong); border-radius:10px; padding:16px; max-width:calc(100% - 32px); box-shadow:var(--shadow-card); }
#historyRetry { margin-top:10px; min-height:36px; padding:7px 14px; border:1px solid var(--line-strong); border-radius:6px; color:var(--ink); background:var(--panel); }
.timeline-bottom { flex-wrap:wrap; gap:6px; }
.playback-controls { flex-wrap:wrap; justify-content:center; }
#archiveCursor { min-height:28px; cursor:ew-resize; accent-color:var(--accent); }
.archive-controls-toggle { display:none; }
.stats-overview-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.stats-card, .stats-panel { min-width:0; }
.stats-status { margin:0 0 16px; }
.stats-sort-group, .stats-service-group { flex-wrap:wrap; }
.stats-header { flex-wrap:wrap; gap:12px; }
.geofence-toolbar { max-width:calc(100vw - 24px); }
@media (max-width:1200px) {
  :root { --header-height:100px; }
  .header { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:52px 48px; column-gap:8px; row-gap:0; }
  .view-tabs { grid-column:1/-1; grid-row:2; justify-self:center; margin-bottom:6px; max-width:100%; }
  .header-right { grid-column:2; grid-row:1; }
  .brand { grid-column:1; grid-row:1; }
  .brand-radar-pill { display:none; }
}
@media (min-width:769px) and (max-width:1050px) {
  .shell { grid-template-columns:310px minmax(0,1fr); }
  .sidebar { min-width:0; max-width:310px; }
  .shell.sidebar-collapsed { grid-template-columns:0 minmax(0,1fr); }
  .archive-view { grid-template-columns:300px minmax(0,1fr); grid-template-rows:minmax(0,1fr) 170px; }
}
@media (max-width:768px) {
  .header { padding:0 10px; }
  .brand-logo { display:none; }
  .brand-text strong { display:block; font-size:14px; }
  .header-right { gap:4px; }
  .header-right .button-text, .connection { display:none!important; }
  .header-link { display:inline-flex!important; font-size:12px; padding:7px; }
  .header-right .icon { width:32px; height:36px; }
  .view-tabs { width:100%; justify-content:space-between; overflow-x:auto; scrollbar-width:none; border-radius:8px; }
  .view-tabs button { padding:7px 9px; font-size:11px; flex-shrink:0; }
  .tab-icon { display:none; }
  .shell, .shell.sidebar-collapsed { grid-template-columns:1fr; grid-template-rows:var(--header-height) minmax(0,1fr); }
  .sidebar, .sidebar-backdrop { top:var(--header-height); }
  .sidebar:not(.open) { visibility:hidden!important; pointer-events:none!important; }
  .map-caption { padding:8px 10px; }
  .map-caption h1 { font-size:13px; }
  .map-caption .subtitle { font-size:11px; }
  .map-actions { width:100%; justify-content:flex-start; }
  .map-head { gap:5px; }
  .map-actions .chip { font-size:11px; }
  .detail { left:8px; right:8px; top:auto; bottom:24px; width:auto; max-height:56%; }
  .detail-header-row > :first-child { flex-basis:125px; }
  .detail-buttons .icon { width:36px; height:36px; min-height:36px; }
  .detail-top, .detail-bottom { padding:12px; }
  .legend { font-size:10px; left:10px; bottom:5px; gap:6px; }
  .archive-view { display:flex; flex-direction:column; overflow-y:auto; min-height:0; overscroll-behavior:contain; }
  .archive-controls-toggle { display:block; order:0; width:100%; padding:12px 16px; min-height:44px; text-align:left; background:var(--paper); color:var(--accent); border:0; border-bottom:1px solid var(--line-strong); font-size:13px; font-weight:650; flex-shrink:0; }
  .history-sidebar { order:1; flex:0 0 auto; overflow:visible; border-right:0; }
  .archive-controls-collapsed .history-sidebar { display:none; }
  .history-stage { order:2; min-height:300px; flex:1 0 45dvh; }
  .timeline-panel { order:3; flex:0 0 auto; min-height:174px; padding:10px 12px; gap:10px; }
  .timeline-bottom { justify-content:space-between; }
  .playback-controls { order:3; width:100%; gap:8px; }
  .timeline-heading { gap:8px; }
  .timeline-heading > span { text-align:right; font-size:10px; }
  .history-caption { top:10px; left:10px; padding:8px 10px; }
  .history-caption h2 { font-size:13px; }
  .stats-overview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stats-view { padding:16px 12px; }
  .stats-title { font-size:23px; }
  .modal-backdrop { padding:10px; }
  .modal { padding:22px 16px; max-height:calc(100dvh - 20px); }
  .modal input[type="search"], .modal input[type="text"], .history-sidebar input, .history-sidebar select, .sidebar input[type="search"] { font-size:16px; }
  .alert-inputs-row { flex-wrap:wrap; }
  .alert-inputs-row > div { flex:1 1 130px; }
  .toast { bottom:16px; }
}
@media (pointer:coarse) {
  .filter-group button, .track-mode-group button, .setting-chip, .period-presets button, .speed-presets button, .playback-controls .icon { min-height:44px; }
  .photo-nav-btn { width:40px; height:40px; }
  .aircraft-row { min-height:64px; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

.search-box input { padding-right:42px; }
@media (min-width:769px) { .sidebar-close-btn { display:none!important; } }

.sidebar-collapse-btn[hidden] { display:none!important; }
.form-feedback[data-state="error"] { color:var(--bos-red); border-color:color-mix(in srgb,var(--bos-red) 40%,var(--line)); }

.detail { background:var(--paper); border:1px solid var(--line-strong); box-shadow:var(--shadow-card); }
.legend-mark.operator { background:linear-gradient(120deg,#f43f5e 0 25%,#3b82f6 25% 50%,#6b7d3a 50% 75%,#facc15 75%); }

@media (max-width:360px) { .header { padding:0 8px; } .brand { gap:6px; } .brand-text strong { font-size:13px; } .header-right { gap:3px; } }

/* Stable toolbar geometry across loading states and map styles. */
.map-actions { flex:0 0 auto; gap:4px 0; }
.map-action-group { display:inline-flex; align-items:center; flex:0 0 auto; gap:5px; padding:0 8px; min-height:36px; }
.map-action-group:first-child { padding-left:0; }
.map-action-group:last-child { padding-right:0; }
.map-action-group + .map-action-group { border-left:1px solid var(--line); }
.map-actions .map-action-group > button { flex:0 0 auto; justify-content:center; box-sizing:border-box; }
.map-actions #trafficToggle { width:82px; }
.map-actions #weatherToggle { width:78px; }
.map-actions #dispatchToggle { width:100px; }
.map-actions #hospitalsToggle { width:82px; }
.map-actions #pauseButton { width:108px; }
.map-actions .button-text { white-space:nowrap; }
.map-actions .map-select-control { display:inline-flex; align-items:center; gap:5px; height:36px; min-height:36px; padding:0 6px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel); color:var(--ink-secondary); font-size:11px; font-weight:600; white-space:nowrap; box-sizing:border-box; }
.map-actions .map-select-control select { flex:1; min-width:0; height:32px; padding:4px 18px 4px 2px; border:0; background:transparent; color:var(--ink); font:inherit; cursor:pointer; }
.map-actions .map-style-control { width:120px; }
.map-actions .airfields-control { width:150px; }
.map-actions .map-select-control select:focus-visible { outline:2px solid var(--accent-hover); outline-offset:-2px; }
.map-actions .map-pause-button[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:#fff; }
@media (max-width:600px) {
  .map-action-group { flex-wrap:wrap; max-width:100%; padding:3px 6px; }
  .map-action-group + .map-action-group { border-left:0; }
  .map-places-group { flex:1 1 100%; }
}
#mapSubtitle { font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.legend-mark.weather { background:linear-gradient(90deg,#38bdf8,#eab308,#ef4444); width:14px; border-radius:2px; }
#weatherToggle[data-error="true"] { border-color:var(--amber); }

.weather-radar-pane .leaflet-tile { background:transparent!important; }

.legend a { pointer-events:auto; color:inherit; }

/* Emergency messages must fit the map, including beside an open sidebar. */
.emergency-banner {
  box-sizing:border-box;
  width:max-content;
  max-width:min(640px, calc(100% - 24px));
  flex-wrap:wrap;
  gap:10px;
  padding:12px;
}
.emergency-body { flex:1 1 240px; min-width:0; }
.emergency-title-row { flex-wrap:wrap; gap:6px 8px; }
.emergency-badge, .emergency-code { flex:0 0 auto; white-space:nowrap; line-height:1.5; }
#emergencyCallsign { min-width:0; overflow-wrap:anywhere; line-height:1.4; }
.emergency-desc { margin-top:5px; line-height:1.5; overflow-wrap:anywhere; color:var(--ink-secondary); }
.emergency-actions { flex:0 0 auto; gap:8px; margin-left:auto; }
#emergencyFocusBtn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  height:auto;
  min-height:40px;
  padding:9px 14px;
  border:1px solid #fb7185;
  border-radius:var(--radius-sm, 8px);
  background:#be123c;
  color:#fff;
  font-size:12px;
  line-height:20px;
  font-weight:700;
  white-space:nowrap;
}
#emergencyFocusBtn:hover { background:#9f1239; }
#emergencyDismissBtn { flex:0 0 40px; width:40px; height:40px; min-height:40px; color:var(--ink); }
@media (pointer:coarse) {
  #emergencyFocusBtn, #emergencyDismissBtn { min-height:44px; }
  #emergencyDismissBtn { flex-basis:44px; width:44px; height:44px; }
}

.squawk-subscriptions { display:grid; gap:8px; }
.squawk-subscription-row { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel); }
.squawk-subscription-row > div { flex:1 1 180px; min-width:0; }
.squawk-subscription-row strong, .squawk-subscription-row span { display:block; line-height:1.5; }
.squawk-subscription-row span { font-size:12px; color:var(--muted); }
.squawk-subscription-row button { flex:0 0 112px; min-height:40px; justify-content:center; margin-left:auto; }
.squawk-subscription-row button.active { color:var(--accent); border-color:var(--accent); background:var(--accent-dim); }
.squawk-subscription-hint { margin:10px 0 0; }

.detail-altitude-chart { --profile-altitude:#22d3ee; --profile-speed:#fbbf24; }
[data-theme="light"] .detail-altitude-chart { --profile-altitude:#087f91; --profile-speed:#a65b00; }
.profile-legend { display:flex; flex-wrap:wrap; gap:4px 12px; font-size:10px; line-height:1.5; margin-bottom:4px; }
.profile-altitude { color:var(--profile-altitude); fill:var(--profile-altitude); }
.profile-speed { color:var(--profile-speed); fill:var(--profile-speed); }
.profile-legend .profile-altitude::before { content:""; display:inline-block; width:12px; border-top:2px solid; margin-right:4px; vertical-align:middle; }
.profile-legend .profile-speed::before { content:""; display:inline-block; width:12px; border-top:2px dashed; margin-right:4px; vertical-align:middle; }
.alt-chart-svg.profile-dual-axis { display:block; width:100%; height:auto; overflow:visible; }
.profile-dual-axis text { font-size:9px; font-family:var(--font-sans,sans-serif); }
.profile-grid { stroke:var(--line-strong); stroke-width:1; stroke-dasharray:2 4; }
.profile-axis-label { fill:var(--muted); }

.airfields-control select[aria-invalid="true"] { outline:1px solid var(--amber); }
.airfield-icon { border:0!important; background:transparent!important; }
.airfield-icon-body { display:grid; place-items:center; width:100%; height:100%; border:1.5px solid currentColor; border-radius:50%; background:var(--panel); box-shadow:0 2px 9px rgba(0,0,0,.65); }
.airfield-icon svg { width:17px; height:17px; fill:currentColor; }
.airport-icon { color:#20c9ef; }
.local-airfield-icon { color:#f0bd53; }
.local-airfield-icon svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.airfield-icon:hover .airfield-icon-body, .airfield-icon:focus-visible .airfield-icon-body { transform:scale(1.16); box-shadow:0 0 0 3px rgba(32,201,239,.2),0 2px 9px rgba(0,0,0,.65); }

.flight-choice { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:10px 0; }
.flight-choice label { font-size:10px; font-weight:700; text-transform:uppercase; color:var(--muted); }
.flight-choice select { flex:1 1 180px; min-width:0; max-width:100%; min-height:38px; padding:8px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel); color:var(--ink); font-size:12px; }
.aircraft-track, .history-track, .history-route-context { animation:none!important; transition:none!important; }

/* Front-view aircraft loader; the full wing surface represents loading progress. */
.map-loading { position:absolute; inset:0; z-index:900; display:grid; place-items:center; background:var(--paper); color:var(--ink); padding:24px; }
.map-loading[hidden], .map-loading-actions[hidden] { display:none; }
.map-loading-content { width:min(100%,380px); text-align:center; }
.loading-aircraft-orbit { width:100%; transform-origin:center center; animation:map-loading-orbit 36s linear infinite; }
.loading-aircraft-path { width:100%; animation:map-loading-eight 5.6s linear infinite; }
.loading-aircraft-upright { width:100%; transform-origin:center center; animation:map-loading-counterorbit 36s linear infinite; }
.loading-aircraft { display:block; width:100%; height:auto; overflow:visible; transform-origin:center center; }
.loading-plane-tail,.loading-plane-wing,.loading-plane-body { fill:var(--panel-elevated); stroke:var(--ink-secondary); stroke-width:1.5; stroke-linejoin:round; }
.loading-plane-body { fill:#74869a; stroke:#d9e5f0; stroke-width:1.7; }
.loading-plane-window { fill:#173b55; stroke:#a8def5; stroke-width:1; }
:root[data-theme="light"] .loading-plane-body { fill:#cbd5e1; stroke:#475569; }
:root[data-theme="light"] .loading-plane-window { fill:#23658d; stroke:#19445f; }
.loading-plane-gear { fill:none; stroke:var(--muted); stroke-width:4; }
.loading-plane-wheel { fill:#34465a; stroke:#b6c5d4; stroke-width:1; }
:root[data-theme="light"] .loading-plane-wheel { fill:#526579; stroke:#334155; }
.loading-wing-rail { fill:none; stroke:var(--ink-secondary); stroke-width:1.5; stroke-linecap:round; opacity:.7; }
.loading-wing-fill { fill:var(--accent); stroke:none; opacity:.92; }
.loading-propeller-disc { fill:var(--accent); opacity:.04; }
.loading-propeller { fill:#b0becd; opacity:.88; }
:root[data-theme="light"] .loading-propeller { fill:#526579; }
.loading-plane-hub { fill:var(--accent); stroke:var(--paper); stroke-width:2; }
.map-loading h2 { margin:12px 0 8px; font-size:18px; }
.map-loading p { margin:0 auto; max-width:32ch; color:var(--muted); font-size:13px; line-height:1.6; }
.map-loading-progress { margin-top:12px; color:var(--accent); font-size:13px; font-variant-numeric:tabular-nums; }
.map-loading-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:18px; }
.map-loading-actions button { min-height:40px; }
.map-empty-view { position:absolute; z-index:470; left:50%; bottom:22px; transform:translateX(-50%); display:flex; align-items:center; gap:14px; max-width:min(92%,520px); padding:12px 14px; border-radius:var(--radius-md); box-shadow:0 8px 28px rgba(0,0,0,.22); }
.map-empty-view[hidden] { display:none; }
.map-empty-view strong, .map-empty-view span { display:block; }
.map-empty-view strong { font-size:13px; }
.map-empty-view span { margin-top:2px; color:var(--muted); font-size:11px; }
.map-empty-view button { flex:none; }
@media(max-width:720px) { .map-empty-view { left:12px; right:12px; bottom:14px; transform:none; max-width:none; flex-wrap:wrap; justify-content:space-between; } }
@keyframes map-loading-eight {
  0%,50%,100% { transform:translate(0,0); }
  12.5% { transform:translate(4px,2.5px); }
  25% { transform:translate(6px,0); }
  37.5% { transform:translate(4px,-2.5px); }
  62.5% { transform:translate(-4px,2.5px); }
  75% { transform:translate(-6px,0); }
  87.5% { transform:translate(-4px,-2.5px); }
}
@keyframes map-loading-orbit { to { transform:rotate(360deg); } }
@keyframes map-loading-counterorbit { to { transform:rotate(-360deg); } }
@media(prefers-reduced-motion:reduce) { .loading-aircraft-orbit, .loading-aircraft-path, .loading-aircraft-upright { animation:none; } .loading-aircraft { transform:none!important; } }