/* AirGemba spatial presentation, loaded in place of the legacy theme only under
   Shell.SpatialOperations. Brand assets/palettes still come from the Operator record. */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Semi+Condensed:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
:root {
    --tenant-font-ui: 'Barlow', 'Segoe UI', sans-serif;
    --tenant-font-heading: 'Barlow Semi Condensed', 'Segoe UI', sans-serif;
    --tenant-font-data: 'JetBrains Mono', Consolas, monospace;
    --tenant-route-flown: var(--mud-palette-primary);
    --app-radius-sm: 2px; --app-radius-md: 2px; --app-radius-lg: 4px;
    --app-overlay-radius: 2px; --app-overlay-blur: 0px;
    --app-overlay-surface: var(--mud-palette-surface);
    --app-overlay-surface-strong: var(--mud-palette-surface);
    --app-overlay-shadow: none; --app-overlay-drawer-shadow: none;
    --app-shell-inset: 0px; --app-shell-frame-height: 48px;
}
.ag-shell {
    --ag-line: #c3c3c3; --ag-muted: #626262; --ag-ink: #292929;
    --ag-surface: #f7f7f7; --ag-water: #eeeeee; --ag-land: #d6d6d6;
    --app-overlay-border: var(--ag-line);
    --ag-accent: var(--mud-palette-primary);
}
.ag-shell.app-dark {
    --ag-line: #38494f; --ag-muted: #a0aeb2; --ag-ink: #dbe4e2;
    --ag-surface: #151d21; --ag-water: #0d181e; --ag-land: #223137;
}
.ag-shell .app-shell-appbar { border-radius: 0 !important; min-height: 48px; }
.ag-shell .app-shell-appbar::before { border-radius: 0 !important; }
.ag-shell .app-shell-logo { max-height: 25px; max-width: 145px; }
.ag-shell .app-shell-main { padding-top: 68px !important; }
.ag-shell .app-shell-main:has(.ag-workspace) { padding: 48px 0 0 !important; }
.ag-shell .app-shell-main:has(.ag-workspace) .app-version { display: none; }
.ag-shell .app-shell-drawer-surface { border: 1px solid var(--ag-line); border-radius: 0; background: var(--ag-surface); }
.ag-shell .app-shell-nav .mud-nav-link { border-radius: 2px; }
.ag-shell .app-shell-nav .mud-nav-link.active { background: color-mix(in srgb, var(--ag-ink) 7%, transparent); color: var(--ag-ink); }
.ag-shell .app-shell-nav-group { font: 11px var(--app-font-data); color: var(--ag-muted); }
.ag-workspace { position: relative; height: calc(100dvh - 48px); min-height: 400px; background: var(--ag-water); color: var(--ag-ink); isolation: isolate; }
.ag-workspace * { box-sizing: border-box; }
.ag-workspace .ag-map { position: absolute; inset: 0; background: var(--ag-water); direction: ltr; }
/* Static coastline artwork: no map runtime, labels or data. Keep geographic orientation in RTL. */
.ag-start-world { position: absolute; inset: 0; overflow: hidden; pointer-events: none; direction: ltr; mask-image: radial-gradient(ellipse at center, #000 38%, transparent 78%); }
.ag-start-world::before { content: ''; position: absolute; inset: 0; background: #737373; opacity: .32; mask: var(--ag-world-map) center / min(1600px, 96vw) auto no-repeat; }
.ag-shell.app-dark .ag-start-world::before { background: #d1d1d1; opacity: .2; }
.ag-start-world::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 34% 22% at center, var(--ag-water) 12%, transparent 100%); }
.ag-tools { position: absolute; top: 27px; inset-inline-start: 16px; width: 64px; z-index: 3; display: flex; flex-direction: column; border: 1px solid var(--ag-line); background: var(--ag-surface); }
.ag-workspace button, .ag-workspace select, .ag-workspace input { font: inherit; color: inherit; border-radius: 2px; }
.ag-workspace button { cursor: pointer; }
.ag-workspace button:focus-visible, .ag-workspace input:focus-visible, .ag-workspace select:focus-visible, .ag-workspace a:focus-visible { outline: 2px solid var(--ag-accent); outline-offset: 3px; }
.ag-tool { min-height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 0; border-block-end: 1px solid var(--ag-line); background: transparent; padding: 8px 3px; border-radius: 0 !important; }
.ag-tool:last-child { border-block-end: 0; }
.ag-tool .mud-icon-root { width: 19px; height: 19px; }
.ag-tool span { font-size: 11px; text-transform: uppercase; }
.ag-tool[aria-pressed=true], .ag-tool:hover { background: color-mix(in srgb, var(--ag-ink) 6%, var(--ag-surface)); }
.ag-tool[aria-pressed=true] .mud-icon-root { color: var(--ag-accent); }
.ag-eyebrow { font: 11px/1.4 var(--app-font-data); color: var(--ag-muted); letter-spacing: .025em; text-transform: uppercase; }
[dir=rtl] .ag-direction-arrow { display: inline-block; transform: scaleX(-1); }
.ag-detail-link { display: flex; align-items: center; gap: 5px; color: var(--ag-muted); font-size: 12px; }
.ag-detail-link .mud-icon-root { width: 13px; height: 13px; }
/* Search starts at the centre, then moves into the page's app-bar slot. The map has
   no permanent search card. The input stays available while the queue is open. */
.ag-start-search { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(640px, calc(100% - 210px)); z-index: 3; text-align: center; }
.ag-start-search > .ag-muted { display: block; margin-top: 12px; }
.ag-start-search .mud-progress-linear { margin-top: 12px; }
.ag-shell:has(.ag-start-search) .ag-appbar-search { display: none; }
.ag-tracking-search { display: flex; align-items: center; min-width: 0; border: 1px solid var(--ag-line); border-radius: 2px; background: var(--ag-surface); color: var(--ag-ink); }
.ag-tracking-search:focus-within { border-color: var(--ag-accent); outline: 1px solid var(--ag-accent); }
.ag-tracking-search input { flex: 1; width: 100%; min-width: 0; border: 0; padding: 0 10px; background: transparent; color: var(--ag-ink); font: 14px var(--app-font-ui); }
.ag-tracking-search input::placeholder { color: var(--ag-muted); opacity: 1; }
.ag-tracking-search input:focus-visible, .ag-workspace .ag-tracking-search input:focus-visible { outline: none; }
.ag-tracking-search input::-webkit-search-cancel-button { display: none; }
.ag-tracking-search button { display: flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; height: 32px; padding: 0 8px; border: 0; border-radius: 2px; background: transparent; color: inherit; cursor: pointer; }
.ag-tracking-search button:focus-visible { outline: 2px solid var(--ag-accent); outline-offset: 2px; }
.ag-tracking-search button .mud-icon-root { width: 18px; height: 18px; }
.ag-appbar-search { flex: 0 1 360px; height: 36px; margin-inline: 16px; }
.ag-appbar-search .ag-search-trigger { color: var(--ag-muted); }
.ag-search-shortcut { flex-shrink: 0; font: 10px var(--app-font-data); color: var(--ag-muted); padding: 3px 5px; margin-inline-end: 6px; border: 1px solid var(--ag-line); border-radius: 2px; white-space: nowrap; }
.ag-appbar-search[data-filled=false] .ag-search-submit { display: none; }
.ag-appbar-search[data-filled=true] .ag-search-shortcut { display: none; }
.ag-appbar-search .ag-search-close { display: none; }
.ag-hero-search { min-height: 64px; padding: 6px; }
.ag-hero-search .ag-search-icon { margin-inline: 12px 4px; width: 24px; height: 24px; color: var(--ag-muted); flex-shrink: 0; }
.ag-workspace .ag-hero-search input { font: 18px var(--app-font-ui); padding-inline: 12px; }
.ag-hero-search .ag-search-submit { height: 50px; padding-inline: 22px; background: var(--ag-accent); color: var(--mud-palette-primary-text); font: 500 16px var(--app-font-ui); }
.ag-hero-search .ag-search-submit:hover { filter: brightness(.94); }
.ag-queue { position: absolute; top: 27px; inset-inline-start: 90px; width: 390px; max-width: calc(100% - 112px); max-height: calc(100% - 55px); overflow-y: auto; background: var(--ag-surface); border: 1px solid var(--ag-line); border-top: 2px solid var(--ag-accent); z-index: 5; }
.ag-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--ag-line); }
.ag-panel-head h2 { margin: 0 0 5px; font: 500 24px/1.1 var(--app-font-heading); }
.ag-icon-button { display: grid; place-items: center; width: 32px; height: 32px; padding: 6px; border: 0; background: transparent; }
.ag-icon-button .mud-icon-root { width: 17px; }
.ag-queue-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 14px 16px; background: transparent; border: 0; border-bottom: 1px solid var(--ag-line); text-align: start; }
.ag-queue-row .mud-icon-root { width: 18px; height: 18px; color: var(--ag-muted); }
.ag-queue-row strong { display: block; font: 500 13px var(--app-font-data); overflow-wrap: anywhere; }
.ag-queue-row small { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; color: var(--ag-muted); font-size: 12px; overflow-wrap: anywhere; }
.ag-queue-mode { font-size: 11px; color: var(--ag-muted); }
.ag-queue-row:hover, .ag-queue-row[aria-current=true] { background: color-mix(in srgb, var(--ag-accent) 7%, var(--ag-surface)); }
.ag-queue-state { padding: 18px 16px; font-size: 13px; color: var(--ag-muted); }
.ag-queue-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px; font-size: 12px; }
.ag-queue-footer button { border: 1px solid var(--ag-line); background: transparent; padding: 5px 8px; }
.ag-workspace button:disabled { opacity: .45; cursor: default; }
.ag-alert { position: absolute; inset-inline-start: 90px; inset-inline-end: 65px; top: 32px; z-index: 6; }
.ag-alert:empty { display: none; }
.ag-console { position: absolute; inset-inline-start: 90px; inset-inline-end: 18px; bottom: 40px; z-index: 4; pointer-events: none; }
.ag-console > * { pointer-events: auto; }
.ag-monitor-strip { display: flex; align-items: stretch; min-height: 64px; background: var(--ag-surface); border: 1px solid var(--ag-line); }
.ag-record-context { flex: 0 1 240px; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 150px; padding: 10px 16px; }
.ag-record-reference { font: 500 12px/1.4 var(--app-font-data); overflow-wrap: anywhere; }
.ag-record-route { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 11px; color: var(--ag-muted); }
.ag-record-route .mud-icon-root { width: 13px; height: 13px; }
.ag-piece-label { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11px; color: var(--ag-muted); }
.ag-piece-label select { min-width: 0; max-width: 100%; flex: 1; border: 1px solid var(--ag-line); background: var(--mud-palette-background); padding: 2px 4px; }
.ag-details-toggle { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 14px; border: 0; border-inline-start: 1px solid var(--ag-line); border-radius: 0 !important; background: transparent; font-size: 12px !important; }
.ag-details-toggle .mud-icon-root { width: 16px; height: 16px; }
.ag-details-toggle[aria-expanded=true] { color: var(--ag-accent); }
.ag-inspector { width: min(760px, 100%); margin-inline-start: auto; margin-bottom: 8px; background: var(--ag-surface); border: 1px solid var(--ag-line); }
.ag-inspector-head { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 4px 8px 4px 16px; border-bottom: 1px solid var(--ag-line); }
.ag-inspector-head h2 { margin: 0; font: 500 16px/1.2 var(--app-font-heading); }
.ag-inspector-head time { color: var(--ag-muted); font: 10px var(--app-font-data); }
.ag-inspector-head .ag-status { font-size: 11px; color: var(--ag-muted); }
.ag-inspector-head .ag-detail-link { margin-inline-start: auto; }
.ag-inspector-head .ag-icon-button { margin-inline-start: auto; flex-shrink: 0; }
.ag-inspector-content, .ag-details-content { max-height: min(320px, 45dvh); overflow-y: auto; overscroll-behavior: contain; }
.ag-inspector-content { padding: 10px 16px 12px; }
.ag-details-content { display: flex; }
.ag-journey, .ag-events { min-width: 0; flex: 1; padding: 16px; }
.ag-journey + .ag-events { border-inline-start: 1px solid var(--ag-line); }
.ag-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 5px; }
.ag-section-head h2 { font: 500 17px/1.2 var(--app-font-heading); margin: 0; }
.ag-leg-chain { display: flex; flex-wrap: wrap; row-gap: 18px; margin-top: 24px; }
.ag-leg { position: relative; flex: 1 0 60px; min-width: 0; border-top: 1px solid var(--ag-line); padding: 11px 7px 0 0; }
.ag-leg::before { content: ''; position: absolute; top: -3px; inset-inline-start: 0; width: 5px; height: 5px; background: var(--ag-muted); }
.ag-leg.is-done::before { background: var(--ag-accent); }
.ag-leg:last-child { border-top-color: transparent; }
.ag-leg > bdi { display: block; font: 500 14px var(--app-font-heading); overflow-wrap: anywhere; }
.ag-leg > span { display: flex; align-items: center; gap: 3px; font-size: 11px; color: var(--ag-muted); margin-top: 6px; }
.ag-leg .mud-icon-root { width: 12px; height: 12px; }
.ag-next { display: grid; gap: 4px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--ag-line); }
.ag-next strong { display: flex; flex-wrap: wrap; gap: 4px; font: 500 17px var(--app-font-heading); overflow-wrap: anywhere; }
.ag-next > span:not(.ag-eyebrow), .ag-next time { font-size: 11px; color: var(--ag-muted); }
.ag-sensor-controls { display: flex; flex: 1; min-width: 0; }
.ag-sensor-tab { flex: 1; min-width: 0; border: 0; border-inline-start: 1px solid var(--ag-line); border-radius: 0 !important; background: transparent; font-size: 12px !important; color: var(--ag-muted) !important; box-shadow: inset 0 2px transparent; }
.ag-sensor-tab[aria-pressed=true] { color: var(--ag-ink) !important; box-shadow: inset 0 2px var(--ag-accent); background: color-mix(in srgb, var(--ag-accent) 7%, var(--ag-surface)); }
.ag-sensor-tab .mud-icon-root { width: 16px; height: 16px; flex-shrink: 0; }
.ag-sensor-reading { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; min-height: 62px; padding: 8px 14px; text-align: start; }
.ag-sensor-name { font-size: 11px; line-height: 1.2; overflow-wrap: anywhere; }
.ag-sensor-reading strong { font: 500 22px/1 var(--app-font-heading); font-variant-numeric: tabular-nums; color: var(--ag-ink); }
.ag-sensor-tab:hover { color: var(--ag-ink) !important; background: color-mix(in srgb, var(--ag-ink) 5%, var(--ag-surface)); }
.ag-welfare-tab { flex: 0 1 100px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; padding: 8px; font-size: 11px !important; }
.ag-signal-content .telemetry-chart-panel { padding: 0; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.ag-signal-content .telemetry-chart-panel::before { display: none; }
.ag-signal-content .chart-header { padding: 4px 0; gap: 6px; flex-wrap: wrap; }
.ag-signal-content .chart-title { font-size: 13px; }
.ag-signal-content .chart-subtitle { font-size: 11px; }
.ag-empty-signal, .ag-muted { font-size: 13px; color: var(--ag-muted); }
.ag-empty-signal { padding: 24px 0; }
.ag-event { display: grid; grid-template-columns: 72px 14px minmax(0,1fr); gap: 8px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--ag-line); }
.ag-event time { font: 11px var(--app-font-data); color: var(--ag-muted); }
.ag-event .mud-icon-root { width: 13px; height: 13px; color: var(--ag-muted); }
.ag-event > span { font-size: 12px; overflow-wrap: anywhere; }
.ag-coordinate-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; direction: ltr; }
.ag-coordinate-overlay text { font: 11px var(--app-font-data); fill: var(--ag-muted); paint-order: stroke; stroke: var(--ag-water); stroke-width: 3px; stroke-linejoin: round; }
.ag-coordinate-references line { stroke: var(--ag-muted); stroke-width: .75px; opacity: .35; }
.ag-coordinate-axis line { stroke: var(--ag-muted); stroke-width: 1px; opacity: .55; }
.ag-coordinate-guide { stroke: var(--ag-muted); stroke-width: .75px; opacity: .5; }
.ag-coordinate-active { stroke: var(--ag-accent); stroke-width: 2px; }
.ag-coordinate-probe circle { fill: var(--ag-accent); }
.ag-coordinate-probe rect { fill: var(--ag-surface); }
.ag-coordinate-probe text { fill: var(--ag-ink); stroke: none; }
.ag-coordinate-control button { font: 11px var(--app-font-data); color: var(--ag-ink); }
.ag-coordinate-control button[aria-pressed=true] { color: var(--ag-accent); }
/* Fullscreen and coordinate inspection sit below the tool rail. Panel height must never
   change their position; on phones they form a short row below the horizontal rail. */
.ag-map .maplibregl-ctrl-bottom-left { top: 232px; bottom: auto; left: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; z-index: 5; }
.ag-map .maplibregl-ctrl-bottom-left > .maplibregl-ctrl { margin: 0; float: none; clear: none; }
[dir=rtl] .ag-map .maplibregl-ctrl-bottom-left { left: auto; right: 16px; }
/* Attribution stays at the geographic viewport's bottom-right; the dock leaves a fixed
   footer clearance so the button remains accessible without following inspector height. */
.ag-map .maplibregl-ctrl-bottom-right { bottom: 0; z-index: 5; }
.ag-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 1100px) {
    .ag-record-context { flex-basis: 200px; padding-inline: 12px; }
    .ag-sensor-reading { padding-inline: 10px; }
    .ag-details-toggle { padding-inline: 10px; }
}
@media (max-width: 760px) {
    .ag-start-world::before { mask-size: auto 72%; }
    .ag-map .maplibregl-ctrl-bottom-left { top: 76px; left: 12px; flex-direction: row; gap: 6px; }
    [dir=rtl] .ag-map .maplibregl-ctrl-bottom-left { left: auto; right: 12px; }
    .ag-tools { top: 22px; inset-inline-start: 12px; width: auto; flex-direction: row; }
    .ag-tool { flex-direction: row; gap: 6px; min-height: 42px; padding: 8px 12px; border-block-end: 0; border-inline-end: 1px solid var(--ag-line); }
    .ag-tool:last-child { border-inline-end: 0; }
    .ag-queue { top: 76px; inset-inline-start: 12px; width: min(360px, calc(100% - 24px)); max-width: none; max-height: calc(100% - 200px); overflow-y: auto; }
    .ag-start-search { width: calc(100% - 32px); }
    .ag-workspace .ag-hero-search input { font-size: 16px; padding-inline: 6px; }
    .ag-hero-search .ag-search-submit { padding-inline: 12px; }
    .ag-hero-search .ag-search-icon { margin-inline: 6px 0; width: 20px; }
    .ag-console { inset-inline: 12px; }
    .ag-monitor-strip { display: grid; grid-template-columns: minmax(0,1fr) auto; }
    .ag-record-context { min-width: 0; padding: 8px 10px; }
    .ag-record-reference { font-size: 11px; }
    .ag-piece-label { flex-wrap: wrap; }
    .ag-piece-label select { max-width: 190px; }
    .ag-details-toggle { grid-column: 2; grid-row: 1; }
    .ag-details-toggle > .mud-icon-root:first-child { display: none; }
    .ag-sensor-controls { grid-row: 2; grid-column: 1/-1; border-top: 1px solid var(--ag-line); }
    .ag-sensor-controls > :first-child { border-inline-start: 0; }
    .ag-sensor-reading { padding: 8px; }
    .ag-welfare-tab { flex: 0 0 38px; padding: 6px; }
    .ag-welfare-tab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .ag-inspector-head { gap: 8px; padding-inline-start: 10px; flex-wrap: wrap; }
    .ag-inspector-content { padding-inline: 10px; }
    .ag-details-content { flex-direction: column; }
    .ag-journey + .ag-events { border-inline-start: 0; border-top: 1px solid var(--ag-line); }
    .ag-alert { top: 76px; inset-inline: 12px; }
}
@media (max-width: 600px) {
    .ag-appbar-search { flex: 0 0 36px; width: 36px; margin-inline: 8px; border-color: transparent; background: transparent; }
    .ag-appbar-search:not(.is-expanded) :is(input, .ag-search-shortcut, .ag-search-submit) { display: none; }
    .ag-appbar-search.is-expanded { position: absolute; inset-inline: 48px 8px; top: 50%; transform: translateY(-50%); width: auto; height: 40px; margin: 0; z-index: 1; background: var(--ag-surface); border-color: var(--ag-line); }
    .ag-appbar-search.is-expanded .ag-search-close { display: flex; }
    .ag-appbar-search.is-expanded .ag-search-shortcut { display: none; }
    .ag-appbar-search input { font-size: 16px; }
    .ag-shell .app-shell-appbar:has(.ag-appbar-search.is-expanded) .mud-toolbar > :not(.ag-appbar-search):not(.app-shell-drawer-toggle) { visibility: hidden; }
}
@media (pointer: coarse) {
    .ag-workspace button, .ag-coordinate-control button { min-height: 44px; }
    .ag-workspace input, .ag-workspace select { min-height: 44px; font-size: 16px; }
    .ag-appbar-search, .ag-appbar-search.is-expanded { height: 44px; }
    .ag-tracking-search button { min-height: 44px; }
    .ag-search-shortcut { display: none; }
}