/* Everyday spotting: a clear location, one useful next plane, readable controls. */
:root{--muted:#A8B7CD;--faint:#8C9DB7}
html,body{font-size:16px}
#app{grid-template-rows:auto auto minmax(0,1fr)}
.top{gap:10px}
.brand{margin-right:auto}
.iconbtn{width:auto;min-width:56px;height:48px;padding:5px 10px;display:flex;flex-direction:column;justify-content:center;gap:2px}
.control-label{font-size:12px;line-height:1.1;font-weight:500}
.ib-lbl{font-size:12px;line-height:1.1;color:var(--text)}
.top .iconbtn{min-width:56px;height:48px;padding:5px 10px}
#v-soon{display:block}
#v-soon .heard-btn{width:100%;border-radius:12px;margin:0 0 14px;min-height:48px;font-size:15px}
#v-soon .sky-note{font-size:14px;padding:8px 12px;margin:0 0 12px}
#v-soon .rwy-box{font-size:14px}
.status{font-size:14px;margin-left:0;margin-right:12px}
.location-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px;background:var(--panel);border-bottom:1px solid var(--line);z-index:950}
.location-choice{display:flex;align-items:center;gap:10px;text-align:left;padding:2px 0;min-height:44px;min-width:0}
.location-choice>span:first-child{min-width:0}
.location-choice strong{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.location-choice small{display:block;font-size:12px;color:var(--muted)}
.location-choice small:empty{display:none}
.view-list .leaflet-control-attribution{display:none!important}
.change-label{color:var(--cyan);font-size:14px;text-decoration:underline;text-underline-offset:3px}
.view-switch{display:none;gap:4px;background:var(--ink);padding:3px;border-radius:12px;flex:none}
.view-switch button{min-height:42px;min-width:52px;padding:6px 10px;border-radius:9px;font-size:14px;font-weight:600}
.view-switch button[aria-pressed=true]{color:var(--amber-ink);background:var(--amber)}
.sheet{transition:none}
.pane{padding:0 18px 20px}
.tab{min-height:46px;font-size:14px;padding:10px 8px}
.tab .c{font-size:12px}
.watch-intro{margin:6px 0 12px}
.watch-intro h1{font-size:23px;line-height:1.2;margin:0 0 4px;letter-spacing:-.02em}
.watch-intro p{font-size:14px;color:var(--muted);margin:0}
.next-plane{display:flex;flex-direction:column;gap:8px;width:100%;padding:18px;text-align:left;background:linear-gradient(135deg,#213C59,#17243E);border:1px solid #507898;border-radius:18px;margin-bottom:12px}
.next-plane:disabled{cursor:default}
.next-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px;color:var(--cyan)}
.next-eta{color:var(--amber);font-weight:600;white-space:nowrap}
.next-name{font:600 24px/1.2 var(--sans);letter-spacing:-.03em}
.next-flight{color:var(--muted);font-size:14px}
.next-look{font-size:16px;line-height:1.45}
.next-detail{font-size:14px;color:var(--muted)}
.next-cta{font-size:14px;color:var(--cyan);font-weight:600;padding-top:6px}
.browse-planes{width:100%;min-height:44px;margin:8px 0 14px;text-align:left;color:var(--cyan);font-weight:600;font-size:14px}
.sky-note{font-size:14px;line-height:1.45;margin-bottom:12px}
.heard-btn{min-height:48px;font-size:15px;margin-bottom:14px}
.row{grid-template-columns:24px minmax(0,1fr) auto;gap:9px;min-height:76px;padding:12px 0}
.row .r1{font-size:15px;line-height:1.35;overflow-wrap:anywhere}
.row .r1 .ty{display:block;margin:3px 0 0;font-size:14px}
.row .r2{font-size:14px;line-height:1.4}
.row .rr{font-size:13px;max-width:110px}
.row .rr small{font-size:12px;margin-top:4px}
.t2,.t3{font-size:14px;line-height:1.5}
.eta-l,.miss-head{font-size:12px}
.empty{font-size:14px;padding:10px 0;text-align:left}
.empty b{font-family:var(--sans);font-size:17px}
.airport-details{margin:18px 0;border-top:1px solid var(--line);padding-top:4px}
.airport-details summary{cursor:pointer;min-height:44px;padding:12px 0;font-size:14px;color:var(--muted)}
.airport-details p{font-size:14px;color:var(--muted)}
.rwy-box{font-size:14px}
.filters button{min-height:44px;font-size:14px}
.back{min-height:44px;font-size:15px}
.see,.loud,.pass .small{font-size:14px}
.location-dialog{color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:20px;width:calc(100% - 32px);max-width:420px;padding:24px}
.location-dialog::backdrop{background:rgba(5,9,17,.78)}
.location-dialog h2{font-size:24px;line-height:1.2;margin:0 0 10px}
.location-dialog p{font-size:15px;color:var(--muted);line-height:1.5}
.location-dialog .btn{width:100%;min-height:48px;margin-top:8px}
.location-dialog .location-cancel{border:0;color:var(--muted);background:none}
.location-status:empty{display:none}
.map-picker{display:none;position:absolute;inset:0;z-index:920;pointer-events:none}
.map-picker::before,.map-picker::after{content:"";position:absolute;top:50%;left:50%;background:var(--amber);box-shadow:0 0 0 2px var(--ink);transform:translate(-50%,-50%)}
.map-picker::before{width:32px;height:3px}
.map-picker::after{width:3px;height:32px}
.pick-actions{position:absolute;bottom:22px;left:16px;right:16px;max-width:420px;margin:auto;padding:16px;border-radius:16px;background:var(--panel);border:1px solid var(--line);pointer-events:auto;text-align:center;box-shadow:0 8px 30px #0008}
.pick-actions p{margin:0 0 12px;font-size:15px}
.picking-location .map-picker{display:block}
.picking-location .sheet,.picking-location .map-btn,.picking-location .rw-bar{display:none}
.banner{font-size:14px;top:108px}
.map-btn{min-height:44px;font-size:14px}
#rewindBtn{top:60px}
.rw-bar{top:110px}
@media(min-width:900px){.sheet,.sheet.full{width:440px}.watch-intro{margin-top:10px}.toast{right:470px}.location-bar{padding-right:28px}}
@media(max-width:899px){
  .top{padding-left:12px;padding-right:12px;gap:6px}
  .brand{font-size:24px;gap:6px}
  .brand svg{width:22px;height:22px}
  .status{display:none}
  .iconbtn{min-width:48px;height:46px;padding:4px 7px}
  .top .iconbtn{min-width:48px;height:46px;padding:4px 7px}
  .ib-lbl{font-size:12px}
  .location-bar{padding:6px 12px;gap:8px}
  .view-switch{display:flex}
  .location-choice{flex:1;gap:8px}
  .change-label{font-size:12px}
  .sheet,.sheet.full{inset:0;height:100%;border-radius:0;border:0;box-shadow:none}
  .grab{display:none}
  .tabs{padding:10px 12px}
  .pane{padding:0 16px 24px}
  .view-map .sheet{display:none}
  .view-list .map-btn,.view-list .rw-bar{display:none}
  .view-list .banner{position:relative;top:0;left:0;transform:none;margin:8px 12px;max-width:calc(100% - 24px);width:auto;z-index:1000}
  .view-list .banner:not([hidden])~.sheet{top:84px;height:calc(100% - 84px)}
  .settings .btn.primary{position:sticky;bottom:0;box-shadow:0 -8px 16px var(--panel)}
}
@media(max-width:359px){.brand{font-size:22px}.location-choice strong{max-width:126px}.view-switch button{min-width:46px;padding:6px}.row .rr{max-width:90px}}
.header-settings{width:44px!important;min-width:44px!important;height:44px!important;padding:0!important;display:grid!important;place-items:center}
.header-settings svg{width:20px;height:20px}
.map-recenter{position:absolute;right:12px;bottom:18px;z-index:905;display:flex;align-items:center;gap:7px;min-height:44px;padding:9px 12px;border-radius:12px;background:rgba(17,28,48,.94);border:1px solid var(--line);font-weight:600;box-shadow:0 5px 18px #0006}
.map-recenter svg{width:19px;height:19px}
.context-action{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:46px;margin:-2px 0 10px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;color:var(--cyan);font-weight:600;background:var(--panel-2)}
.context-action svg{width:19px;height:19px}
.home-nav{display:flex;gap:8px;margin:0 0 14px}
.home-nav button{flex:1;min-height:44px;padding:8px 12px;border-radius:12px;background:transparent;border:1px solid var(--line);color:var(--muted);font-weight:600;text-align:center}
.home-nav .num{font-family:var(--mono);font-size:12px}
#app[data-tab="soon"] #tabs,.plane-detail #tabs{display:none}
#app[data-tab="soon"] #soonList,#app[data-tab="soon"] #soonEmpty,#app[data-tab="soon"] #missHead,#app[data-tab="soon"] #missList{display:none!important}
.filters-more{padding-top:2px}
#nearMoreToggle.has-filter{background:var(--cyan);border-color:var(--cyan);color:#06202E}
.demo-location .location-bar{background:rgba(255,181,71,.08);border-bottom-color:rgba(255,181,71,.35)}
.demo-location .location-choice strong{color:var(--amber)}
.demo-location .change-label{color:var(--amber);font-weight:600}
#skyNote{display:none!important}
.detail-more{display:none}
@media(max-width:899px){
  .view-switch{padding:0;background:transparent}
  .view-switch button[aria-pressed="true"]{display:none}
  .view-switch button{min-width:64px;border:1px solid var(--line);background:var(--panel-2)}
  .view-list .map-recenter{display:none}
  .view-map .map-recenter{display:flex}
  #app[data-tab="soon"] .pane{padding-top:10px}
  .watch-intro[hidden]{display:none}
  #v-detail .detail .back{order:0}
  #v-detail .detail .dh{order:1}
  #v-detail .detail .route{order:2}
  #v-detail .detail .pass{order:3}
  #v-detail .detail .photo-wrap{order:4}
  #v-detail .detail .detail-more{order:5;display:flex;align-items:center;justify-content:center;min-height:46px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;color:var(--cyan);font-weight:600;background:var(--panel-2)}
  #v-detail .detail .mini3d{order:6}
  #v-detail .detail .btn3d{order:7}
  #v-detail .detail .share-btn{order:8}
  #v-detail .detail .stats{order:9}
  #v-detail .detail .links{order:10}
  #v-detail .detail>.credit{order:11}
  #v-detail .detail .mini3d{order:4}
  #v-detail .detail .btn3d{order:4}
  #v-detail .detail .stats{order:4}
  #v-detail .detail:not(.more-open) .share-btn,#v-detail .detail:not(.more-open) .links,#v-detail .detail:not(.more-open)>.credit,#v-detail .detail:not(.more-open) .pass-extras{display:none!important}
}
@media(prefers-reduced-motion:reduce){.dot.live{animation:none}}

/* Phone home shows the sky: the live map with every plane fills the screen and the answer card docks at the bottom. */
@media(max-width:899px){
  #app.view-list[data-tab="soon"]:not(.plane-detail):not(.picking-location) .sheet{top:auto;right:0;bottom:0;left:0;height:auto;max-height:58%;overflow-y:auto;border-radius:18px 18px 0 0;border-top:1px solid var(--line);box-shadow:0 -12px 32px #000a}
  #app.view-list[data-tab="soon"]:not(.plane-detail) .pane{padding:12px 12px 10px}
  #app.view-list[data-tab="soon"]:not(.plane-detail) .watch-intro{display:none}
  #app.view-list[data-tab="soon"]:not(.plane-detail) .next-plane{gap:5px;padding:14px 16px;margin-bottom:10px}
  #app.view-list[data-tab="soon"]:not(.plane-detail) .next-name{font-size:22px}
  #app.view-list[data-tab="soon"]:not(.plane-detail) .next-look{font-size:15px;line-height:1.4}
  #app.view-list[data-tab="soon"]:not(.plane-detail) .next-cta{padding-top:2px}
  #app.view-list[data-tab="soon"]:not(.plane-detail) .home-nav{margin-bottom:6px}
  #app.view-list[data-tab="soon"]:not(.plane-detail) #v-soon .heard-btn{margin:4px 0 6px}
  #app.view-list[data-tab="soon"]:not(.plane-detail) .leaflet-control-attribution{display:block!important}
}