/* Shared CTA alignment: icon boxes never participate in a text baseline. */
button,.cta-with-icon{vertical-align:middle}
.cta-with-icon,#fleet-night.cta-with-icon{display:inline-flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;gap:8px}
.cta-icon{display:block;flex:none;width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
button>svg,button>.cta-icon,a>.cta-icon{flex-shrink:0;align-self:center}
.scene-tools button,.small-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1}
.small-icon{min-width:24px;min-height:24px;padding:0;flex-shrink:0}
.small-icon .cta-icon{width:16px;height:16px}
.scene-tools .cta-icon{width:18px;height:18px}
.flight-symbol,.chevron{display:inline-flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0}
button.cta-with-icon span{align-self:center}
.attribution button.cta-with-icon{padding:1px 0;border-top:1px solid transparent}
/* One silhouette for tail artwork; logos keep their original outline. */
img.tail-artwork{object-fit:fill;mask:url('/static/tail-mask.svg') center / 100% 100% no-repeat;-webkit-mask:url('/static/tail-mask.svg') center / 100% 100% no-repeat;border-radius:0;padding:0}
.airline-tail-badge img.tail-artwork{height:auto;aspect-ratio:5/4}
/* Header action buttons share one right-aligned cluster. */
.panel-heading #traffic-refresh{margin-left:auto}
.panel-heading #close-flights{margin-left:0}

.attribution .site-name{white-space:nowrap;font-weight:600}
@media(max-width:720px){.topbar .search-wrap{width:100%;margin-left:0}}

.topbar .search,.topbar .top-status{height:56px}
@media(max-width:720px){.topbar .search,.topbar .top-status{height:54px}}

/* Time shares the attribution size; the search trigger sits beside the picker. */
.attribution #clock{display:inline-block;flex:0 0 56px;width:56px;white-space:nowrap;font-variant-numeric:tabular-nums;text-align:center}
.environment-panel{left:81px;right:auto;max-height:calc(100dvh - 130px - var(--operations-clearance))}
@media(max-width:720px){.environment-panel{left:65px;right:auto;top:132px;width:min(320px,calc(100vw - 79px));max-height:calc(100dvh - 145px - var(--operations-clearance))}}
/* Compact screens keep the follow strip below panels. */
@media(max-width:720px){body[data-airport="RCKH"]:has(#follow-status:not([hidden])) :is(.environment-panel,.flight-list,.detail,.layer-panel,.camera-panel){max-height:calc(100dvh - 209px - var(--operations-clearance))}}
/* Keep every attribution item at one explicit size on iOS, including buttons. */
.map-footer{position:fixed;left:24px;right:24px;bottom:10px;display:flex;align-items:center;gap:12px;pointer-events:none}.map-footer>*{pointer-events:auto}.map-footer .attribution{position:static;flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:7px 15px;font:9px/1.6 var(--sans);color:#fff;text-shadow:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}.attribution>*,.attribution button.cta-with-icon{font:inherit!important;line-height:inherit!important;letter-spacing:normal;-webkit-text-size-adjust:100%;text-size-adjust:100%}.attribution .scale{margin-left:auto}.search-trigger{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:0;border-radius:11px}.search-trigger svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.search-dialog{position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100dvh;max-height:none;padding:24px max(24px,calc((100vw - 900px)/2));border:0;border-radius:0;background:#101d2cfb;overflow:hidden;color:var(--text)}.search-dialog[open]{display:flex;flex-direction:column}.search-dialog::backdrop{background:#101d2c}.search-dialog-header{display:flex;align-items:center;justify-content:space-between;flex:none;margin-bottom:24px}.search-dialog-header h2{font-size:23px;font-weight:600;margin:0}.search-dialog-header button{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--border);border-radius:10px}.search-dialog .search-wrap{position:static;width:100%;min-height:0;flex:1;display:flex;flex-direction:column}.search-dialog .search{height:58px;flex:none;border-radius:12px}.search-dialog .search input{font-size:16px}.search-dialog #clear-search{font-size:12px;color:var(--muted);white-space:nowrap;padding:10px}.search-count{font-size:12px;margin:18px 0 10px;color:var(--muted)}#search-list-wrap{overflow:auto;overscroll-behavior:contain;flex:1;min-height:0}.search-dialog .search-results{position:static;max-height:none;overflow:visible;padding:0}.search-dialog .search-results button{padding:18px 14px;border-bottom:1px solid var(--border);border-radius:0;font-size:15px;gap:20px;text-align:left}.search-dialog .search-results button:hover{background:#b9d9f60c}.search-dialog .search-results small{font-size:11px;white-space:nowrap}.search-dialog .empty-search{font-size:14px;padding:25px 0}
@media(max-width:720px){.map-footer{left:14px;right:14px;bottom:max(7px,env(safe-area-inset-bottom));gap:10px}.map-footer .attribution{font-size:9px;gap:4px 10px}.attribution .scale{display:none}.search-dialog{padding:16px;padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom))}.search-dialog-header{margin-bottom:18px}.search-dialog-header h2{font-size:20px}}

/* Bottom annotations participate in layout instead of sharing fixed coordinates. */
.boarding-announcement{bottom:calc(var(--operations-clearance) + var(--follow-clearance,0px))}
.attribution .footer-metrics{margin-left:auto;display:inline-flex;flex-wrap:nowrap;align-items:center;gap:18px;white-space:nowrap;flex-shrink:0}
.footer-metrics .scale{margin-left:0;flex:none;white-space:nowrap}
.footer-metrics .scale i{flex:none}
.footer-metrics .scene-version{position:static;display:inline;white-space:nowrap;font:inherit;color:inherit;text-shadow:none}
.scene-hud{position:fixed;left:28px;right:81px;bottom:var(--operations-clearance);display:flex;align-items:flex-end;justify-content:space-between;gap:12px 24px;pointer-events:none}
.scene-hud .view-caption{position:static;min-width:0;flex:1;display:flex;flex-wrap:wrap;gap:5px 10px;align-items:center}
.scene-hud .view-caption #view-name{overflow-wrap:anywhere}
.scene-hud .view-caption small{display:block;flex:none;white-space:nowrap;margin:0}
.scene-hud .caption-line{flex:none}
.scene-hud .gesture-hint{position:static;flex:none;max-width:45%;text-align:right;line-height:1.5}
@media(max-width:1000px){.scene-hud .gesture-hint{display:none}}
@media(max-width:720px){.scene-hud{left:14px;right:65px;gap:8px}.scene-hud .view-caption{column-gap:8px}.footer-metrics .scene-version{display:none}.attribution .footer-metrics{display:none}}

/* Native select arrows do not follow text padding. Share an inset SVG instead. */
:root{--select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
:root[data-theme=light]{--select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352677a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
select:not([multiple]):not([size]),select[size="1"]:not([multiple]){appearance:none;-webkit-appearance:none;background-image:var(--select-chevron);background-repeat:no-repeat;background-position:right 12px center;background-size:16px 16px;padding-inline-end:40px}
@media(forced-colors:active){select:not([multiple]):not([size]),select[size="1"]:not([multiple]){appearance:auto;-webkit-appearance:auto;background-image:none}}

/* Disclosure controls use the solar palette from their first paint on iOS. */
.glass .chevron,.glass .detail-collapse,.glass #operations-toggle{color:var(--disclosure,#344e65);-webkit-text-fill-color:var(--disclosure,#344e65)}
.glass .chevron svg,.glass .detail-collapse svg,.glass #operations-toggle svg{color:var(--disclosure,#344e65);stroke:currentColor;fill:none}
.glass summary{display:flex;align-items:center;gap:8px;list-style:none!important}
.glass summary::-webkit-details-marker{display:none}
.glass summary::marker{content:''}
.glass summary::before{content:'';display:block;flex:0 0 7px;width:7px;height:7px;border-right:1.5px solid var(--disclosure,#344e65);border-bottom:1.5px solid var(--disclosure,#344e65);transform:rotate(-45deg);transition:transform .18s ease}
.glass details[open]>summary::before{transform:rotate(45deg)}
.brand-symbol .cta-icon{width:27px;height:27px}
.loading-symbol .cta-icon{width:42px;height:42px;margin:auto}
.airline-tail-badge.neutral .cta-icon{width:20px;height:20px}
.map-label.flight .cta-icon,.map-label.parked .cta-icon{display:inline-block;vertical-align:-2px;width:12px;height:12px;margin-right:5px}
@media(prefers-reduced-motion:reduce){.glass summary::before{transition:none}}

/* A single filled shape stays crisp without an external SVG fragment repaint. */
.cta-icon.plane-icon,.scene-tools svg.plane-icon{fill:currentColor;stroke:none}

/* Airport scenes return to the island homepage. Keep the hit area at least 44px. */
.airport-back{display:flex;align-items:center;gap:12px;flex:0 0 250px;min-width:0;height:56px;padding:0 17px;border:1px solid var(--border);border-radius:14px;color:#fff;text-decoration:none;font:600 16px var(--sans);letter-spacing:.04em}
.airport-back svg{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.airport-back span{display:flex;align-items:baseline;gap:10px;white-space:nowrap}.airport-back small{font-size:12px;color:#bdcddd;letter-spacing:.08em}
.airport-back:hover{background:rgba(32,54,77,.95)}.airport-back:focus-visible{outline:2px solid #91d9ff;outline-offset:3px}
@media(max-width:720px){.airport-back{flex:0 1 auto;width:auto;height:54px;gap:9px;padding:0 13px;font-size:14px;border-radius:10px}.airport-back svg{width:22px;height:22px}.airport-back span{gap:8px}.airport-back small{font-size:11px}.topbar{gap:8px}.topbar .search-trigger{margin-left:0}}
/* Camera presets and layer categories share the toolbar's panel placement. */
.camera-panel{position:fixed;left:81px;top:111px;width:330px;padding:18px;max-height:calc(100dvh - 130px - var(--operations-clearance));overflow:auto}
.layer-panel{max-height:calc(100dvh - 130px - var(--operations-clearance));overflow:auto}.layer-tabs{margin-bottom:12px}
.camera-preset-status,.camera-empty{font-size:11px;line-height:1.7;color:var(--muted);margin:0 0 14px}.camera-name-label{display:block;font-size:11px;margin-bottom:7px;color:var(--muted)}
.camera-save{display:flex;gap:8px}.camera-save input,.camera-preset input{min-width:0;width:100%;border:1px solid var(--border);border-radius:7px;padding:10px;background:#ffffff08;color:var(--text)}
.camera-save button{flex-shrink:0;border-radius:7px;padding:9px;background:var(--accent);color:var(--bg);font-size:11px}.camera-save button:disabled{cursor:default}
.camera-presets{margin-top:16px}.camera-preset{display:flex;align-items:center;gap:5px;border-top:1px solid var(--border);padding:8px 0}.camera-load{text-align:left;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:10px 0}.camera-rename,.camera-delete{flex-shrink:0;padding:10px 5px;font-size:10px;color:var(--muted)}
@media(max-width:720px){.camera-panel{left:65px;top:123px;width:min(330px,calc(100vw - 79px));padding:14px;max-height:calc(100dvh - 145px - var(--operations-clearance))}.layer-panel{max-height:calc(100dvh - 145px - var(--operations-clearance))}.camera-save{flex-wrap:wrap}.camera-save button{width:100%}}
.boarding-scheduled{display:block;font-size:10px;line-height:1.6;color:var(--muted);font-variant-numeric:tabular-nums}

.layer-storage-note{font-size:9px;color:var(--muted);line-height:1.5;margin:8px 0 0}
.khh-parking-preview{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.khh-parking-preview>h3,.khh-parking-preview>p,.khh-parking-preview>div{grid-column:1/-1;margin:0}
.khh-parking-preview>label{display:grid;gap:6px;font-size:11px;color:var(--muted);min-width:0}
.khh-parking-preview select{width:100%;min-height:36px;padding:7px 9px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);font:inherit}
.khh-parking-preview>div{display:flex;flex-wrap:wrap;gap:6px}
.khh-parking-preview button{min-height:36px;font-size:11px}

/* Keep source actions vertically centred, including wrapped airport names. */
.traffic-source.cta-with-icon{display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 12px;line-height:1.5;text-align:center}
.detail-actions>a{display:inline-flex;align-items:center;justify-content:center;gap:6px;text-align:center}
.khh-presence-actions{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.khh-presence-actions button{min-height:36px;padding:7px 10px;border:1px solid var(--border);border-radius:7px;font-size:11px}

.khh-flight-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.khh-flight-actions>*{display:flex;align-items:center;justify-content:center;width:100%;flex:1 1 0;min-width:0;min-height:36px;padding:9px 8px;font-size:10px;border:1px solid var(--border);border-radius:6px;text-align:center}

.khh-presence-actions label{display:flex;align-items:center;gap:7px;font-size:11px}.khh-presence-actions select{min-height:36px;padding:6px 20px 6px 9px;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:7px}

/* Medium and large screens keep follow controls above the right detail panel. */
@media(min-width:721px){
 .follow-status{left:auto;right:24px;top:22px;bottom:auto;width:280px;max-width:calc(100vw - 440px);min-height:56px;gap:10px}
 .follow-status>span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
 .follow-status #stop-follow{margin-left:auto}
}