/* Planecast look layer (look.js), loaded last. Presentation only: the top of the app takes the color of the real
   sky over the watching spot, planes are drawn in colors that show on the daylight map, and the plane's own
   photo leads the home card and the plane page. Nothing here changes what the app knows or says. */
:root{
  --look-sky:linear-gradient(180deg,#0a4f7d 0%,#1a7bb0 100%);
  --look-num:'Barlow Condensed','Arial Narrow',var(--sans);
  --look-ink:#12324a;
}
:root[data-look-sky=golden]{--look-sky:linear-gradient(180deg,#1f3566 0%,#4d4f88 50%,#b0655a 100%)}
:root[data-look-sky=night]{--look-sky:radial-gradient(1.2px 1.2px at 18% 24%,#fffc 50%,#0000 51%),radial-gradient(1px 1px at 63% 15%,#fffa 50%,#0000 51%),radial-gradient(1.2px 1.2px at 84% 40%,#fff9 50%,#0000 51%),radial-gradient(1px 1px at 39% 48%,#fff8 50%,#0000 51%),linear-gradient(180deg,#07122a 0%,#14294f 100%)}

/* ---------- the sky band: the header and the location line sit on it ---------- */
#app::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(env(safe-area-inset-top,0px) + 140px);background:var(--look-sky);z-index:0;pointer-events:none}
.top{background:transparent;border-bottom:0;box-shadow:none}
.brand{color:#fff}
.brand svg circle{stroke:#ffffffb8}
.brand svg path{fill:#fff}
.status{color:#ffffffd9}
.header-settings{width:48px!important;min-width:48px!important;height:48px!important;background:#ffffff24;border-color:#ffffff4d;color:#fff}
.header-settings:hover{background:#ffffff3d}
.location-bar{background:transparent;border-bottom:0}
.location-choice strong{color:#fff}
.location-choice small{color:#ffffffd6}
.change-label{color:#fff;text-decoration:none;background:#ffffff24;border:1px solid #ffffff57;border-radius:999px;padding:5px 12px;font-weight:600;line-height:1.2}
.demo-location .location-bar{background:transparent;border-bottom:0}
.demo-location .location-choice strong{color:#ffe2a8}
.demo-location .change-label{color:#5c3600;background:#ffe2a8;border-color:#ffe2a8}
.top :focus-visible,.location-bar :focus-visible{outline-color:#fff}
.stage{border-radius:20px 20px 0 0;background:#e9eef2}

/* ---------- map ---------- */
.plain-now{border:0;border-radius:14px;background:#fffffff2;box-shadow:0 6px 20px #0f2c4224}
.guide-map-choice,.guide-maptools .kit-legend{border-color:#fff;border-radius:12px;box-shadow:0 4px 14px #0f2c4226}
/* Map tools belong to Map; Home keeps the plane and where to look. */
.view-list .map-btn,.view-list .rw-bar,.view-list .guide-maptools,.view-list .plain-now,.view-list .map-recenter{display:none}
.view-map #rewindBtn{top:66px}.view-map .rw-bar{top:122px}
.has-flight-nav .guide-maptools{gap:8px}
.location-choice,.flight-nav button,.home-nav button,.map-btn,.map-recenter,.kit-legend summary,.guide-map-choice{min-height:48px}
.silo path{stroke:#12324a;stroke-width:2.4;stroke-linejoin:round;paint-order:stroke}

/* ---------- home card: the plane's photo, or its shape on the sky, leads ---------- */
.next-plane{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:0!important;padding:0!important;overflow:hidden;border:0;border-radius:18px;background:#fff;box-shadow:0 0 0 1px #c5d9e5,0 8px 22px #0f2c4214}
.next-plane:hover{background:#fff;box-shadow:0 0 0 2px #075b8a,0 8px 22px #0f2c4214}
.look-hero{grid-area:1/1;position:relative;z-index:0;min-height:96px;background:var(--look-sky);overflow:hidden}
.look-hero-sil{position:absolute;right:-14px;top:50%;width:176px;height:176px;transform:translateY(-50%) rotate(38deg);opacity:.22}
.look-hero-sil path{fill:#fff}
.look-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease}
.look-hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,#0a243880 0%,#0a243800 42%,#0a243800 62%,#0a24388f 100%);opacity:0;transition:opacity .45s ease}
.look-hero.has-photo .look-hero-img,.look-hero.has-photo .look-hero-scrim{opacity:1}
.look-hero-credit{position:absolute;right:10px;bottom:7px;max-width:calc(100% - 20px);font:400 .6875rem/1.2 var(--sans);color:#ffffffe0;text-shadow:0 1px 2px #000b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.look-hero-credit:empty{display:none}
.next-plane .next-top{grid-area:1/1;z-index:1;align-self:start;align-items:flex-start;padding:12px 12px 0;color:#fff}
.next-plane #nextLabel{padding:5px 11px;border-radius:999px;background:#0a2438bd;color:#fff;font-weight:600;font-size:.8125rem;line-height:1.3}
.next-plane .next-eta{padding:5px 11px;border-radius:999px;background:#fff;color:#7a4400;font-weight:700;font-size:.8125rem;line-height:1.3;box-shadow:0 2px 8px #0a243840;max-width:52%}
.next-plane .guide-identity{grid-area:2/1;padding:14px 14px 0;width:auto}
.next-plane .guide-look{grid-area:3/1;width:auto;margin:12px 14px 0;padding-top:12px}
.next-plane .next-detail{grid-area:4/1;padding:8px 14px 0}
#v-soon .next-flight,#v-soon .next-detail{display:none}
.next-plane .next-cta{grid-area:5/1;margin:12px 14px 14px;border-radius:12px;font-size:.9375rem}
.next-plane:disabled .next-cta:empty,.next-plane .next-detail:empty{display:none}
.next-plane:disabled .guide-look{margin-bottom:14px}

/* ---------- home: two tools side by side, then the full list ---------- */
#v-soon:not([hidden]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#v-soon>*{grid-column:1/-1;order:3;margin:0!important}
#v-soon>.watch-intro{order:-1}
#v-soon>#nextPlane{order:0}
#v-soon>#skyBtn{order:1;grid-column:1}
#v-soon>#heardBtn{order:1;grid-column:2}
#v-soon>#skyBtn[hidden]~#heardBtn{grid-column:1/-1}
#v-soon:has(#heardBtn[hidden])>#skyBtn{grid-column:1/-1}
#v-soon>.home-nav{order:2}
#v-soon>.context-action,#v-soon>.heard-btn{flex-direction:column;gap:6px;width:auto;min-height:76px;padding:12px 10px;border-radius:14px;background:#f1f8fc;border:1px solid #cfe2ec;color:#0a5078;font:600 .8125rem/1.3 var(--sans);text-align:center}
#v-soon>.context-action svg,#v-soon>.heard-btn svg{width:24px;height:24px;color:#0a5078}
#v-soon>.home-nav button::after{content:"\203A";margin-left:6px;font-size:1.15em;line-height:1}
#v-soon>.airport-details{margin-top:4px!important}

/* ---------- Nearby: each plane is its own card ---------- */
#app[data-tab=near]:not(.plane-detail) .sheet,#app[data-tab=near]:not(.plane-detail) .near-tools{background:#f3f7fa}
#app[data-tab=near]:not(.plane-detail) .near-tools{border-bottom:0}
#nearList .row{grid-template-columns:46px minmax(0,1fr) auto;gap:12px;align-items:center;margin:0 0 8px;padding:12px 14px 12px 12px;min-height:78px;background:#fff;border:1px solid #d6e3eb;border-radius:16px;box-shadow:0 1px 2px #0f2c420a}
#nearList .row:hover,#nearList .row:focus-visible{background:#fff;border-color:#075b8a}
#nearList .row .row-shape{width:46px;height:46px;border-radius:13px;background:#edf5fa}
#nearList .row .row-shape .silo{width:32px;height:32px}
#nearList .row .rr{max-width:104px;font:600 1.375rem/1.05 var(--look-num);letter-spacing:.01em;color:var(--look-ink)}
#nearList .row .rr small{margin-top:3px;font:500 .75rem/1.35 var(--sans);letter-spacing:0;color:#4c6374}

/* ---------- plane page: the photo comes first ---------- */
.look-photo{position:relative;overflow:hidden;min-height:120px;border-radius:18px;background:var(--look-sky)}
.look-photo a{display:block}
.look-photo img.photo{display:block;width:100%;aspect-ratio:16/10;max-height:240px;object-fit:cover;border-radius:0;background:transparent}
.look-photo .credit{position:absolute;right:0;bottom:0;margin:0;padding:3px 10px;border-radius:10px 0 0 0;background:#0a2438c2;color:#fff;font-size:.6875rem;line-height:1.5}
.look-photo .credit a{display:inline;min-height:0;color:#fff}
.look-photo-sky{display:grid;place-items:center;min-height:156px;padding:12px 12px 34px}
.look-photo-sky svg{width:118px;height:118px}
.look-photo-sky svg path{fill:#fff}
.look-photo-sky span{position:absolute;left:12px;right:12px;bottom:9px;color:#ffffffe6;font:400 .75rem/1.35 var(--sans);text-align:center}
#app.look-photo-on #v-detail .detail .photo-wrap.photo-wrap{display:none!important}
.plain-head h2{font-size:1.625rem}
.plain-look{border-color:#c5dcea;border-radius:14px}
.plain-ask{border-color:#cfe0ea;border-radius:16px;box-shadow:0 2px 10px #0f2c420a}

@media(max-width:899px){
  #app.view-list[data-tab=soon]:not(.plane-detail):not(.picking-location) .sheet{border-radius:22px 22px 0 0}
}
@media(max-height:740px) and (max-width:899px){
  #app.view-list[data-tab=soon]:not(.plane-detail):not(.picking-location) .sheet{max-height:74%}
  #v-soon .look-hero{display:none}
  .next-plane .guide-identity{padding-top:10px}
}
@media(prefers-reduced-motion:reduce){.look-hero-img,.look-hero-scrim{transition:none}}
/* With stronger colors the other planes on the small home map need less fading to stay background. */
@media(max-width:899px){#app.view-list[data-tab=soon]:not(.plane-detail) .plane-icon:not(.soon):not(.sel):not(.tagged) .pl{opacity:.9}}
/* The credit belongs to the photo: it shows only once the photo itself is on screen. */
.look-hero:not(.has-photo) .look-hero-credit{display:none}
/* The status dot on the sky band uses lighter tones so it stays visible. */
.top .dot.live{background:#6fe3ae}
.top .dot.warn{background:#ffd27a}
.top .dot.bad{background:#ff9a9e}

/* ---------- the map line folds to its first sentence after a first visit (look.js sets .plain-short) ---------- */
#app.plain-short .plain-now-more{display:none}
@media(max-width:899px){#app.plain-short .plain-now{right:auto;max-width:calc(100% - 24px);padding:7px 14px;border-radius:999px}}
#segLookTheme button{min-width:96px}

/* ---------- dark: follows the night sky, or is held by the Light or dark setting (look.js sets data-look-theme) ---------- */
:root[data-look-theme=dark]{color-scheme:dark;--ink:#0b1322;--panel:#111c30;--panel-2:#17243e;--line:#2a3b5c;--text:#e7edf6;--muted:#a8b7cd;--faint:#8c9db7;--amber:#ffb547;--amber-ink:#2a1a00;--cyan:#7fd4ff;--red:#ff7a7f;--green:#5ad39b;--look-ink:#e7edf6}
/* map */
:root[data-look-theme=dark] #map,:root[data-look-theme=dark] .stage{background:#0a111e}
:root[data-look-theme=dark] #map .leaflet-tile-pane{filter:none}
:root[data-look-theme=dark] .leaflet-control-attribution{background:#0b1322c7!important;color:#8c9db7!important}
:root[data-look-theme=dark] .leaflet-control-attribution a{color:#a8b7cd!important}
:root[data-look-theme=dark] .plane-icon .pl svg path:first-child{fill:#dfe8f3;stroke:#dfe8f3}
:root[data-look-theme=dark] .plane-icon.guide-featured::before{border-color:#7fd4ff!important;background:#7fd4ff24;box-shadow:0 0 0 2px #0b1322}
:root[data-look-theme=dark] .plane-icon.guide-featured .tag{color:#e7edf6;background:#111c30;border-color:#2a3b5c}
:root[data-look-theme=dark] .plain-now{background:#111c30f2;color:#e7edf6;box-shadow:0 6px 20px #0008}
:root[data-look-theme=dark] .guide-map-choice,:root[data-look-theme=dark] .guide-maptools .kit-legend,:root[data-look-theme=dark] .kit-legend{background:#111c30;color:#e7edf6;border-color:#2a3b5c;box-shadow:0 4px 14px #0007}
:root[data-look-theme=dark] .guide-map-choice{color:#7fd4ff}
:root[data-look-theme=dark] .guide-map-choice:hover{background:#17243e}
:root[data-look-theme=dark] .kit-legend i{border-color:#e7edf6}
:root[data-look-theme=dark] .map-btn,:root[data-look-theme=dark] .map-recenter,:root[data-look-theme=dark] .rw-bar{background:#111c30f0;color:#e7edf6;border-color:#2a3b5c;box-shadow:0 3px 14px #0007}
:root[data-look-theme=dark] .map-btn.active,:root[data-look-theme=dark] .map-btn[aria-pressed=true]{background:#7fd4ff29;color:#7fd4ff}
:root[data-look-theme=dark] .has-flight-nav.earth-flat .earth-mode-btn{color:#7fd4ff;background:#111c30;border-color:#2a3b5c}
/* surfaces and navigation */
:root[data-look-theme=dark] .sheet{background:#111c30;border-color:#2a3b5c}
:root[data-look-theme=dark] .flight-nav{background:#111c30;border-color:#2a3b5c}
:root[data-look-theme=dark] .flight-nav button{color:#a8b7cd}
:root[data-look-theme=dark] .flight-nav button[aria-current=page]{color:#7fd4ff;background:#7fd4ff1f;box-shadow:none}
:root[data-look-theme=dark] .flight-nav button:hover{color:#7fd4ff;background:#7fd4ff14}
:root[data-look-theme=dark] :is(button,a,input,select,textarea,summary):focus-visible{outline-color:#7fd4ff}
:root[data-look-theme=dark] .top :focus-visible,:root[data-look-theme=dark] .location-bar :focus-visible{outline-color:#fff}
:root[data-look-theme=dark] .overlay,:root[data-look-theme=dark] .location-dialog::backdrop,:root[data-look-theme=dark] .kit-dialog::backdrop{background:#050911b8}
:root[data-look-theme=dark] .location-dialog,:root[data-look-theme=dark] .settings,:root[data-look-theme=dark] .kit-dialog{box-shadow:0 18px 60px #000a}
:root[data-look-theme=dark] .tab{background:#17243e}
/* home */
:root[data-look-theme=dark] .next-plane,:root[data-look-theme=dark] .next-plane:hover{background:#17243e;box-shadow:0 0 0 1px #2a3b5c,0 8px 22px #0006}
:root[data-look-theme=dark] .next-plane:hover{box-shadow:0 0 0 2px #7fd4ff,0 8px 22px #0006}
:root[data-look-theme=dark] .next-name,:root[data-look-theme=dark] .next-look{color:#e7edf6}
:root[data-look-theme=dark] .next-flight,:root[data-look-theme=dark] .next-detail{color:#a8b7cd}
:root[data-look-theme=dark] .guide-silhouette{color:#7fd4ff;background:#7fd4ff1f}
:root[data-look-theme=dark] .guide-look{border-top-color:#2a3b5c}
:root[data-look-theme=dark] .guide-dial{color:#7fd4ff}
:root[data-look-theme=dark] .guide-dial circle{fill:#0b1322;stroke:#2a3b5c}
:root[data-look-theme=dark] .guide-dial text{fill:#a8b7cd}
:root[data-look-theme=dark] .guide-dial .guide-needle{fill:#7fd4ff}
:root[data-look-theme=dark] .next-cta,:root[data-look-theme=dark] .plain-form button,:root[data-look-theme=dark] .near-reset,:root[data-look-theme=dark] .kit-journal-start,:root[data-look-theme=dark] .kit-detail-actions #kitSeen{background:#1479b0;border-color:#1479b0;color:#fff}
:root[data-look-theme=dark] .context-action,:root[data-look-theme=dark] #v-soon>.context-action,:root[data-look-theme=dark] #v-soon>.heard-btn{background:#17243e;border-color:#2a3b5c;color:#7fd4ff}
:root[data-look-theme=dark] #v-soon>.context-action svg,:root[data-look-theme=dark] #v-soon>.heard-btn svg{color:#7fd4ff}
:root[data-look-theme=dark] .home-nav button{background:transparent;color:#7fd4ff}
:root[data-look-theme=dark] .home-nav button:hover{background:#7fd4ff14}
/* lists */
:root[data-look-theme=dark] #app[data-tab=near]:not(.plane-detail) .sheet,:root[data-look-theme=dark] #app[data-tab=near]:not(.plane-detail) .near-tools{background:#0d1728}
:root[data-look-theme=dark] .row .r1{color:#e7edf6}
:root[data-look-theme=dark] .row .r2,:root[data-look-theme=dark] .row .r1 .ty{color:#a8b7cd}
:root[data-look-theme=dark] .row:hover,:root[data-look-theme=dark] .row:focus-visible,:root[data-look-theme=dark] .guide-traffic-row:hover{background:#7fd4ff12}
:root[data-look-theme=dark] #nearList .row,:root[data-look-theme=dark] #nearList .row:hover,:root[data-look-theme=dark] #nearList .row:focus-visible{background:#17243e;border-color:#2a3b5c;box-shadow:none}
:root[data-look-theme=dark] #nearList .row:hover,:root[data-look-theme=dark] #nearList .row:focus-visible{border-color:#7fd4ff}
:root[data-look-theme=dark] #nearList .row .row-shape,:root[data-look-theme=dark] .plain-head .silo{background:#0b1322}
:root[data-look-theme=dark] #nearList .row .rr small,:root[data-look-theme=dark] .plain-near{color:#a8b7cd}
:root[data-look-theme=dark] .guide-distance{color:#e7edf6}
:root[data-look-theme=dark] #nearSearch,:root[data-look-theme=dark] #collectionSearch,:root[data-look-theme=dark] .plain-form input,:root[data-look-theme=dark] .kit-dialog input:not([type=checkbox]),:root[data-look-theme=dark] .kit-dialog select,:root[data-look-theme=dark] .kit-dialog textarea{background:#0b1322;border-color:#3a4f76;color:#e7edf6}
:root[data-look-theme=dark] .filters button{background:#17243e;border-color:#2a3b5c;color:#a8b7cd}
:root[data-look-theme=dark] .filters button[aria-pressed=true],:root[data-look-theme=dark] #nearMoreToggle.has-filter{background:#1479b0!important;border-color:#1479b0;color:#fff!important}
:root[data-look-theme=dark] .silo path{stroke:#0b1322}
/* plane page */
:root[data-look-theme=dark] .plain-back,:root[data-look-theme=dark] .back,:root[data-look-theme=dark] .plain-aq,:root[data-look-theme=dark] .plain-more summary,:root[data-look-theme=dark] .kit-text-button,:root[data-look-theme=dark] .kit-journal-tools summary{color:#7fd4ff}
:root[data-look-theme=dark] .plain-head h2,:root[data-look-theme=dark] .plain-look b,:root[data-look-theme=dark] .plain-story,:root[data-look-theme=dark] .plain-ask h3,:root[data-look-theme=dark] .plain-aa,:root[data-look-theme=dark] .look-now,:root[data-look-theme=dark] .detail .dh .fl{color:#e7edf6}
:root[data-look-theme=dark] .plain-head p,:root[data-look-theme=dark] .plain-look span,:root[data-look-theme=dark] .pass .small,:root[data-look-theme=dark] .pass .prediction-note{color:#a8b7cd}
:root[data-look-theme=dark] .plain-look,:root[data-look-theme=dark] .plain-ask,:root[data-look-theme=dark] .pass,:root[data-look-theme=dark] #v-detail .detail .pass,:root[data-look-theme=dark] .route,:root[data-look-theme=dark] .kit-journal-empty{background:#17243e;border-color:#2a3b5c;box-shadow:none;color:#e7edf6}
:root[data-look-theme=dark] .kit-journal-empty p{color:#a8b7cd}
:root[data-look-theme=dark] .plain-answer{background:#0b1322;border-left-color:#7fd4ff}
:root[data-look-theme=dark] .plain-chips button{background:transparent;border-color:#3a4f76;color:#7fd4ff}
:root[data-look-theme=dark] .plain-chips button:hover{background:#7fd4ff14}
:root[data-look-theme=dark] .kit-button,:root[data-look-theme=dark] #v-detail .detail .detail-more{background:#17243e;color:#7fd4ff;border-color:#2a3b5c}
:root[data-look-theme=dark] .kit-button:hover,:root[data-look-theme=dark] .kit-button[aria-pressed=true]{background:#7fd4ff1f;border-color:#7fd4ff}
/* small pieces */
:root[data-look-theme=dark] .kit-badge,:root[data-look-theme=dark] .kit-record{background:#17243e;color:#a8b7cd;border-color:#2a3b5c}
:root[data-look-theme=dark] .kit-badge.earned,:root[data-look-theme=dark] .kit-record.observed,:root[data-look-theme=dark] .chip.newt{background:#123c2c;color:#8fe3bd;border-color:#1f6a4c}
:root[data-look-theme=dark] .kit-recovery{background:#3a2a08;border-color:#6b4e12;color:#ffe2a8}
:root[data-look-theme=dark] .kit-error{color:#ff9a9e!important}
:root[data-look-theme=dark] .chip.mil{background:#3b4a1f;color:#d8f28b}
:root[data-look-theme=dark] .chip.rare{background:#3a2b5c;color:#d9c8ff}
:root[data-look-theme=dark] .chip.phase{background:#7fd4ff24;color:#7fd4ff}
:root[data-look-theme=dark] .see.good{color:#5ad39b}
:root[data-look-theme=dark] .see.poor{color:#ff9a9e}

/* Settings: rows keep their full height (they were being squeezed until the words spilled out of their boxes), and the main button is the same blue as every other main button. */
.settings>*{flex:none}
.seg button[aria-pressed=true]{border-color:#006a9f}
.btn.primary{background:#075b8a;border-color:#075b8a;color:#fff}
:root[data-look-theme=dark] .btn.primary,:root[data-look-theme=dark] .seg button[aria-pressed=true],:root[data-look-theme=dark] .tab[aria-selected=true]{background:#1479b0;border-color:#1479b0;color:#fff}

/* Phone return action: keep the existing layout and navigation handler. */
.plain-plane > .plain-back { min-height: 48px; }