/* Shared visual language for every screen, including lazy-loaded pages. */
:root {
  color-scheme: dark;
  --hangar-navy: #14202B;
  --signal-amber: #E8912D;
  --off-white: #F5F3EE;
  --white: #FFFFFF;
  --bg: #202020;
  --surface: #202020;
  --surface-raised: #2B2B2B;
  --surface-hover: #353535;
  --border: #454545;
  --border-strong: #767676;
  --text: var(--off-white);
  --text-muted: #BDBDBD;
  --accent: var(--signal-amber);
  --accent-hover: #F2AD59;
  --accent-soft: #3D3227;
  --accent-border: #997044;
  --accent-glow: #E8912D12;
  --success: #8BD4AC;
  --success-soft: #253D2E;
  --success-border: #507E68;
  --danger: #FF929A;
  --danger-text: #FFC5C9;
  --danger-soft: #452F32;
  --danger-strong: #B83B47;
  --font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-small: 12px;
  --font-body: 13px;
  --font-subtitle: 16px;
  --font-heading: 20px;
  --font-title: 24px;
  --control-height: 36px;
  --radius-control: 8px;
  --radius-card: 12px;
}

html, body { font-family: var(--font-family); font-size: var(--font-body); line-height: 1.5; }
button, input, select, textarea { font-family: inherit; }
button { line-height: 1.35; }
:where(button) { background: var(--surface-raised); color: var(--text); border: 1px solid var(--border); cursor: pointer; }
/* These shared control metrics supersede legacy inline and lazy-page styles. */
#root button { font-family: var(--font-family); font-size: var(--font-body) !important; }
#root input:not([type=checkbox]):not([type=radio]):not([type=range]),
#root select, #root textarea {
  font-family: var(--font-family) !important;
  font-size: var(--font-body) !important;
  line-height: 1.4;
  min-height: var(--control-height);
  padding-block: 7px !important;
  padding-left: 12px !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-control) !important;
  background: var(--surface-raised) !important;
  color: var(--text) !important;
}
#root input::placeholder, #root textarea::placeholder { color: var(--text-muted); opacity: 1; }
#root input[type=checkbox], #root input[type=radio] {
  width: 16px; height: 16px; min-width: 16px; min-height: 16px;
  margin: 0; accent-color: var(--accent); vertical-align: middle; flex-shrink: 0;
}
#root :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#root input[aria-invalid=true] { border-color: var(--danger) !important; }
:where(button):disabled, input:disabled, select:disabled { opacity: .55; cursor: default; }
::selection { background: var(--accent); color: var(--hangar-navy); }
a { color: var(--accent-ink); }

/* Use classes for compact icon actions and cards so their layout stays distinct. */
#root button:not(:where(.ui-icon-button, .notification-dismiss, .app-navigation-button, .airplane-card, .route-filter-trigger, .routes-destination, [class*="mapboxgl-"])) {
  min-height: var(--control-height);
  padding: 7px 12px !important;
  border-radius: var(--radius-control) !important;
}
#root .ui-icon-button { flex-shrink: 0; }
#root .notification-dismiss { font-size: 22px !important; }
#root button:hover:not(:disabled) { filter: brightness(1.12); }
#root .primary-button { background: var(--accent) !important; color: var(--hangar-navy); border-color: var(--accent); font-weight: 600; }
#root .app-navigation-button[aria-current=page] { background: var(--signal-amber); color: var(--hangar-navy); box-shadow: none; }
#root .app-navigation { background: var(--bg); border-color: var(--border); --icon-accent: currentColor; }
#root .app-navigation-button { color: var(--off-white); }
#root .app-navigation-button:hover:not([aria-current=page]) { background: #333333; color: var(--off-white); }
.brand-logo { display: block; width: auto; height: 24px; }
.launch-brand { width: min(320px, 80vw); height: auto; margin-bottom: 32px; }

#root h1 { font-size: var(--font-title); line-height: 1.25; font-weight: 600; letter-spacing: -.4px; }
#root h2 { font-size: var(--font-heading); line-height: 1.3; font-weight: 600; letter-spacing: -.2px; }
#root h3 { font-size: var(--font-subtitle); line-height: 1.35; font-weight: 600; }
#root .airplanes-title h2 { font-size: var(--font-title); }
#root .airplane-card h3, #root .version-details h3, #root .scanner-review-body h3 { font-size: var(--font-subtitle); }
#root :is(.conflict-card, .review-dialog, .airplane-card, .notification-card, .routes-welcome, .routes-panel) { border-radius: var(--radius-card); }
#root :is(.manage-intro, .airplanes-toolbar, .page-toolbar) { padding: 16px 24px; background: var(--surface); border-bottom: 1px solid var(--border); }
#root :is(.scanner-review-toolbar, .conflict-filter-bar) { padding: 12px 24px; gap: 12px; }
#root .manage-tabs { margin-bottom: -16px; }
#root .manage-tabs button { border-radius: 0 !important; padding-inline: 0 !important; }
#root .airplanes-grid { padding: 24px; }
#root .settings-form { max-width: 1050px; }
#root .settings-form h1 { margin-bottom: 8px; }
#root .settings-form h2 { margin-top: 24px; }
#root .route-origin-search form > div { padding: 0; background: transparent; border: 0; }
#root .route-origin-search input { border: 1px solid var(--border-strong); background: var(--surface-raised); padding: 7px 12px; }
#root .route-airport-status select { width: 140px; padding: 7px 12px; }
#root .route-addon-strip .routes-toggle { min-height: var(--control-height); font-size: var(--font-body); border-radius: var(--radius-control); }
#root .route-filter-trigger { gap: 6px; }
#root .routes-welcome button { color: var(--hangar-navy); font-weight: 600; }
#root .route-origin-search form button { color: var(--accent-ink); }
#root .mapboxgl-ctrl-group { background: var(--surface-raised); border: 1px solid var(--border); }
#root .mapboxgl-ctrl-group button { border-radius: 0; }
#root .mapboxgl-ctrl-group button + button { border-color: var(--border); }
#root .mapboxgl-ctrl-group .mapboxgl-ctrl-icon { filter: invert(.95); }
#root .mapboxgl-popup-content { background: var(--surface); color: var(--text); font: var(--font-body)/1.5 var(--font-family); border-radius: var(--radius-card); }
#root .mapboxgl-ctrl-attrib { background: var(--surface); color: var(--text-muted); }
#root .mapboxgl-ctrl-attrib a { color: var(--text-muted); }
@media (max-width: 800px) {
  #root :is(.manage-intro, .airplanes-toolbar, .page-toolbar, .scanner-review-toolbar, .conflict-filter-bar) { padding: 12px 16px; }
  #root .manage-tabs { margin-bottom: -12px; }
}

/* Keep the dark wordmark and window controls on the mockup's charcoal chrome. */
.app-titlebar { --surface: #202020; --surface-raised: #333333; --text: var(--off-white); --text-muted: var(--off-white); }
/* Amber text remains legible on the charcoal surfaces. */
:root { --accent-ink: var(--signal-amber); }
a, #root .notification-action, #root .route-reset, #root .airplane-open, #root .eyebrow, #root .route-eyebrow { color: var(--accent-ink); }
#root .mapboxgl-popup-tip { border-top-color: var(--surface); border-bottom-color: var(--surface); }