/* Shared product finish: readable controls, calm hierarchy and honest data context. */
:root {
  --product-bg: #071321;
  --product-surface: #101f31;
  --product-border: #2b4057;
  --product-text: #edf3fa;
  --product-muted: #aabbd0;
}
body { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select { font: inherit; }
body .nav-rail-btn, body .dock-btn { text-decoration: none; }
body .nav-rail-btn span { font-size: 9px; letter-spacing: 0; }
button, select, summary { touch-action: manipulation; }
:is(button, a, input, select, summary):focus-visible { outline: 2px solid #69b5ff; outline-offset: 3px; }
#dataContext { color: var(--product-muted); font-size: 13px; white-space: nowrap; }
body[data-data-mode="live"] #dataContext,
body:not([data-data-mode="live"]) #connectionStatus { display: none; }
body:not([data-data-mode="live"]) #liveStatusBar { display: none !important; }
body #statsBar { display: none !important; } /* Duplicates the live count and freshness strip. */
body #planeControls { bottom: 62px; max-width: min(360px, calc(100vw - 32px)); }
.map-appearance { background: rgba(8,22,38,.95); border: 1px solid var(--product-border); border-radius: 12px; padding: 0 12px; box-shadow: 0 12px 32px #0004; }
.map-appearance > summary { padding: 12px 6px; cursor: pointer; color: var(--product-text); font-size: 14px; font-weight: 600; }
.map-appearance[open] { padding-bottom: 12px; }
.map-appearance .plane-color-picker, .map-appearance .plane-style-picker { background: transparent; border: 0; box-shadow: none; margin: 8px 0; justify-content: flex-start; }
.map-appearance [hidden] { display: none !important; }
.map-appearance .plane-size-control { margin-top: 12px; }
body.layout-a #liveStatusBar { left: auto; right: 84px; transform: none; max-width: calc(100vw - 510px); flex-wrap: wrap; justify-content: flex-end; border-radius: 12px; gap: 8px; padding: 10px 14px; }
body #liveStatusBar .lsb-label { font-size: 11px; letter-spacing: .02em; }
body #liveStatusBar .lsb-value { font-size: 15px; }
body #liveStatusBar .lsb-sep { display: none; }
body #flightDetail .detail-actions { margin-top: 14px; }
.detail-disclosure { border-top: 1px solid var(--product-border); margin: 14px 0; }
.detail-disclosure > summary { padding: 16px 0; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--product-text); }
body.view-active-routes #flightDetail { display: none !important; }
body :is(.cv-header, .fv-header, .sv-header) { flex-wrap: wrap; gap: 14px; }
body :is(.cv-kpi-card, .fv-kpi-card, .otv-card) { border-radius: 12px; }
body :is(.fv-header-note, .fleet-scope-note, .otv-section-sub, .otv-card-sub) { color: var(--product-muted); font-size: 13px; line-height: 1.6; }
body .fv-header-controls { flex-wrap: wrap; }
body .fv-model-stat-lbl { font-size: 11px; }
body #fvCoverage { margin: 8px 0 20px; }
body #viewOps { --ov-mono: Inter, -apple-system, sans-serif; --ov-text-dim: #b4c3d4; --ov-text-mute: #a3b5ca; }
body #viewOps :is(.ov-card, .ov-panel) { border-radius: 12px; }
body #svRefreshBtn, body #routeExplorerPanel select {
  color: var(--product-text); background: var(--product-surface); border: 1px solid var(--product-border);
  border-radius: 8px; min-height: 40px; padding: 8px 12px; font-size: 13px;
}
body .route-filters { font-size: 13px; line-height: 1.5; gap: 12px; }
body .route-filters label { display: flex; gap: 7px; align-items: center; min-height: 32px; }
body .route-filters input { accent-color: #64afff; width: 16px; height: 16px; }
body #routeExplorerPanel h2 { font-weight: 600; }
body .otv svg text:not([fill]), body .otv svg text[fill="#334155"] { fill: #b6c7da; }
body .otv-pagehead h1 { font-size: clamp(26px, 3vw, 36px); }
body .otv-section-title { font-size: 24px; }
@media (max-width: 1150px) and (min-width: 769px) {
  body #liveStatusBar .lsb-label { display: none; }
  body #liveStatusBar { gap: 12px; }
  .header-right #showcaseBtn, .header-right #cameraModeBtn { display: none; }
}
@media (max-width: 768px) {
  body.layout-c .dock-bar .dock-center { position: static; transform: none; display: flex; width: 100%; justify-content: space-around; gap: 0; }
  body.layout-c .dock-bar .dock-btn, .dock-more > summary { min-width: 54px; min-height: 48px; padding: 6px; font-size: 10px; }
  body.layout-c .dock-bar .dock-btn span { display: block; }
  .dock-more { position: relative; }
  .dock-more > summary { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #b8c8da; cursor: pointer; list-style: none; }
  .dock-more > summary::-webkit-details-marker { display: none; }
  .dock-more-menu { position: absolute; bottom: 58px; right: 0; width: 180px; padding: 8px; background: #101f31; border: 1px solid #2b4057; border-radius: 12px; box-shadow: 0 10px 40px #0006; }
  body.layout-c .dock-more-menu .dock-btn { flex-direction: row; justify-content: flex-start; gap: 12px; font-size: 13px; }
  body.layout-c .dock-bar .dock-live-stats { display: none; }
  #layersPanel .map-appearance { margin: 12px; }
  body #planeControls { bottom: 110px; right: 12px; }
  body #liveStatusBar { max-width: calc(100vw - 24px); }
  body #dataContext { font-size: 11px; }
  body .fv-header-controls { width: 100%; }
  body .fv-header-controls :is(input, select) { max-width: 100%; }
  .map-appearance .plane-color-btn { padding: 8px; }
  .detail-disclosure > summary { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .map-appearance, .detail-disclosure { scroll-behavior: auto; } }