
:root{color-scheme:dark;--bg:#101a23;--panel:#16242e;--line:#2b3e48;--lime:#b7f279;--text:#eef4ed;--muted:#a4b7bd}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px 'DM Sans',sans-serif}header{padding:25px 5%;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.brand{font:bold 23px 'Space Grotesk',sans-serif;letter-spacing:2px;text-decoration:none;color:var(--text)}.brand span{font-size:11px;color:var(--muted);letter-spacing:1px}.pill,.badge{font-size:10px;letter-spacing:1.5px;border:1px solid var(--line);border-radius:30px;padding:9px 12px;color:var(--lime)}main{max-width:1240px;margin:auto;padding:48px 30px 20px}.eyebrow{color:var(--lime);font-size:11px;letter-spacing:2px;font-weight:700}h1{font:600 clamp(40px,6vw,72px) 'Space Grotesk',sans-serif;letter-spacing:-3px;margin:12px 0}h1 em{font-style:normal;color:var(--lime)}p{color:var(--muted);line-height:1.7}.intro p{font-size:17px;max-width:600px}.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:22px 0 28px}.toolbar span{color:var(--muted);font-size:12px;margin-left:auto}button{font:600 13px 'DM Sans',sans-serif;border:1px solid var(--line);border-radius:9px;padding:12px 17px;color:var(--text);background:#1b2d37;cursor:pointer}button:hover{border-color:var(--lime)}button:disabled{opacity:.4;cursor:default}.primary,button.selected{background:var(--lime);color:#15211c;border-color:var(--lime)}button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--lime);outline-offset:4px}.workspace{display:grid;grid-template-columns:1.7fr 1fr;gap:22px}.radar-panel,.settings,.last-alert{border:1px solid var(--line);border-radius:17px;background:var(--panel);padding:25px}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:15px}h2{font:500 21px 'Space Grotesk',sans-serif;margin:0}.radar{max-width:520px;margin:14px auto}.radar svg{width:100%;display:block}.radar-caption{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;letter-spacing:1px}.radar-caption i{display:inline-block;background:var(--lime);width:6px;height:6px;border-radius:100%;margin-right:7px}#status{font-size:12px;margin-bottom:0;min-height:40px}.settings h2{margin-top:15px;font-size:28px}.settings p{font-size:13px}.modes{display:flex;gap:5px;margin:25px 0}.modes button{flex:1;padding:12px 6px;font-size:12px}label{display:block;font-size:13px;margin:18px 0 10px}label strong{float:right;color:var(--lime)}input[type=range]{width:100%;accent-color:var(--lime)}.hint{font-size:11px!important}details{margin-top:24px;border-top:1px solid var(--line);padding-top:20px}summary{cursor:pointer;color:var(--muted);font-size:13px}input[type=number]{display:block;width:100%;margin-top:8px;background:var(--bg);border:1px solid var(--line);padding:12px;border-radius:7px;color:var(--text)}.last-alert{margin-top:20px}#latest{font-size:14px}.flights-section{margin-top:38px}#count{font-size:13px;color:var(--lime);margin-left:10px}#updated{font-size:11px;color:var(--muted)}.flights{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}.flight{border:1px solid var(--line);border-radius:12px;padding:20px;background:var(--panel)}.flight.near{border-color:#86b45b}.flight-top{display:flex;justify-content:space-between;gap:8px}.flight h3{font:600 22px 'Space Grotesk',sans-serif;margin:0}.flight small{color:var(--muted)}.flight .distance{color:var(--lime);font-size:12px}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:22px 0 10px}.metrics span{display:block;color:var(--muted);font-size:10px;letter-spacing:1px;margin-bottom:6px}.metrics strong{font-size:17px;font-weight:500}.flight p{font-size:11px;margin-bottom:0}.empty{padding:35px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:12px;grid-column:1/-1}footer{margin-top:45px;padding:22px 0;border-top:1px solid var(--line);display:flex;gap:30px;justify-content:space-between;align-items:center}footer span{white-space:nowrap;font-size:11px;letter-spacing:1px;color:var(--lime)}footer p{font-size:11px;max-width:540px}a{color:var(--lime)}@media(max-width:780px){main{padding:30px 18px}.workspace{grid-template-columns:1fr}.flights{grid-template-columns:repeat(2,1fr)}header{padding:20px}.brand span{display:none}.toolbar span{width:100%;margin:8px 0 0}footer{display:block}.radar-panel,.settings{padding:20px}}@media(max-width:450px){.flights{grid-template-columns:1fr}.pill{font-size:8px}.panel-heading h2{font-size:18px}#updated{max-width:120px;text-align:right}}

:root{font-family:system-ui,-apple-system,'Segoe UI',sans-serif}[hidden]{display:none!important}.phone-section{display:grid;grid-template-columns:1fr 1.3fr;gap:35px;margin-top:35px;padding:28px;border:1px solid var(--line);border-radius:17px;background:var(--panel)}.phone-section h2{margin:12px 0}.phone-section p{font-size:13px}.phone-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}select{background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--text);padding:12px;font:inherit;max-width:100%}.phone-section #push-status{min-height:44px}.phone-section #watch-summary{color:var(--lime)}@media(max-width:780px){.phone-section{grid-template-columns:1fr;padding:20px;gap:18px}}

/* ---- v1.3: layouts, plane details, flight paths, install guide ---- */
.header-right{display:flex;align-items:center;gap:12px}.layout-switch{display:flex;border:1px solid var(--line);border-radius:30px;padding:3px}.layout-switch button{border:0;border-radius:30px;padding:6px 11px;font-size:11px;background:none;color:var(--muted)}.layout-switch button[aria-pressed=true]{background:#24414a;color:var(--text)}
.panel-tools{display:flex;align-items:center;gap:8px}.toggle{padding:8px 12px;font-size:11px;border-radius:30px}.toggle.selected{background:#24414a;color:var(--lime);border-color:#3c6a5a}
.radar{position:relative}.plane{cursor:pointer;outline:none}.plane .hit{fill:transparent}.plane .shape{fill:#92bbc6;transition:fill .15s}.plane.near .shape{fill:var(--lime)}.plane.hover .shape,.plane.selected .shape,.plane:focus-visible .shape{fill:#fff}.plane .ring{fill:none;stroke:var(--lime);stroke-width:2}.plane:focus-visible .hit{stroke:var(--lime);stroke-dasharray:3 3}.plane-label{fill:var(--text);font-size:13px;font-weight:700;paint-order:stroke;stroke:#101a23;stroke-width:4px;pointer-events:none}
.trail{fill:none;stroke:#92bbc6;stroke-width:2;stroke-opacity:.4;stroke-linejoin:round;stroke-linecap:round}.trail.selected{stroke:var(--lime);stroke-opacity:.9;stroke-width:3}.heading-line{stroke:#92bbc6;stroke-width:2;stroke-dasharray:5 5;stroke-opacity:.7}.heading-line.selected{stroke:var(--lime);stroke-opacity:1}
.radar-caption{flex-wrap:wrap;gap:6px 14px}.legend{display:flex;align-items:center;gap:6px}body[data-layout=phone] .legend{order:3;flex-basis:100%;justify-content:center}.legend b{display:inline-block;width:16px;margin-left:6px}.trail-key{height:2px;background:#92bbc6}.heading-key{border-top:2px dashed #92bbc6}
.tip{position:absolute;z-index:5;transform:translate(-50%,calc(-100% - 20px));background:#0b141b;border:1px solid #3a5560;border-radius:11px;padding:10px 13px;display:grid;gap:3px;min-width:190px;max-width:260px;font-size:12px;color:var(--muted);pointer-events:none;box-shadow:0 8px 24px #0008}.tip.below{transform:translate(-50%,22px)}.tip strong{font:600 16px 'Space Grotesk',system-ui,sans-serif;color:var(--text)}.tip .tip-route{color:var(--lime);font-weight:600}.tip em{font-style:normal;font-size:10px;letter-spacing:1px;color:var(--lime);margin-top:3px;text-transform:uppercase}
.flight{cursor:pointer;transition:border-color .15s,background .15s}.flight.hover{border-color:#4f7480}.flight.selected{border-color:var(--lime);background:#1a2e2c}.flight:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.detail{position:relative;border:1px solid var(--line);border-radius:17px;background:var(--panel);overflow:hidden}.detail-close{position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;padding:0;border-radius:50%;background:#0b141bcc;font-size:15px}.detail:not(.open) .detail-close{display:none}
.detail-empty{padding:28px}.detail-empty h2{font-size:26px;margin:12px 0 4px}.detail-empty p{font-size:13px;margin:0}
.photo{position:relative;aspect-ratio:3/2;background:#0f1a21;display:grid;place-items:center;color:var(--muted);font-size:13px}.photo a{display:block;width:100%;height:100%}.photo img{width:100%;height:100%;object-fit:cover;display:block}.photo .credit{position:absolute;left:0;right:0;bottom:0;padding:16px 12px 7px;font-size:10px;color:#dfe8e4;background:linear-gradient(transparent,#000a)}.photo.none{background:#0f1a21 url(icon.svg) center 42%/88px no-repeat}.photo.none span{position:absolute;bottom:16px;font-size:12px}.photo.loading{background:linear-gradient(100deg,#0f1a21 30%,#16262f 50%,#0f1a21 70%);background-size:300% 100%;animation:shimmer 1.4s linear infinite}@keyframes shimmer{to{background-position:-150% 0}}
.detail-head{padding:18px 22px 4px}.detail-title{font:600 32px 'Space Grotesk',system-ui,sans-serif;margin:8px 0 2px;letter-spacing:-1px}.detail-type{margin:0;font-size:14px;color:var(--text)}
.route{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:10px 22px}.leg{display:grid}.leg strong{font:600 24px 'Space Grotesk',system-ui,sans-serif;color:var(--lime)}.leg span{font-size:11px;color:var(--muted)}.route .arrow{font-size:20px;color:var(--muted)}.route-note{flex-basis:100%;font-size:11px;color:var(--muted)}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;padding:12px 22px 6px}.facts span{display:block;color:var(--muted);font-size:10px;letter-spacing:1px;margin-bottom:3px}.facts strong{font-size:14px;font-weight:600;word-break:break-word}.facts .gone{grid-column:1/-1;margin:0;color:#f2c879;font-size:12px}
.links{display:flex;flex-wrap:wrap;gap:8px;padding:14px 22px 22px}.links a{font-size:12px;text-decoration:none;border:1px solid var(--line);border-radius:30px;padding:7px 12px}.links a:hover{border-color:var(--lime)}
.install-guide{margin-top:14px;border:1px solid var(--line);border-radius:12px;padding:14px 18px;background:#122029;font-size:13px}.install-guide h3{margin:0 0 6px;font-size:14px}.install-guide ol{margin:6px 0 0;padding-left:20px;color:var(--muted);line-height:1.8}.install-guide b{color:var(--text)}

/* Desk: big radar, details and the list beside it */
body[data-layout=desk] main{max-width:1520px;padding-top:28px}
body[data-layout=desk] .intro{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap}body[data-layout=desk] h1{font-size:44px;letter-spacing:-2px;margin:4px 0}body[data-layout=desk] .intro p{margin:0;font-size:15px}
body[data-layout=desk] .toolbar{padding:14px 0 20px}
body[data-layout=desk] .workspace{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(380px,.9fr);grid-template-areas:"radar flights";gap:20px;align-items:start}body[data-layout=desk] .detail{display:none}
body[data-layout=desk] .radar-panel{grid-area:radar}body[data-layout=desk] .flights-section{grid-area:flights;margin-top:0;border:1px solid var(--line);border-radius:17px;background:var(--panel);padding:20px 16px 16px}
body[data-layout=desk] .radar{max-width:min(780px,calc(100vh - 210px))}
body[data-layout=desk] .flights{grid-template-columns:1fr;max-height:calc(100vh - 150px);min-height:420px;overflow:auto;gap:8px;margin-top:12px;padding-right:4px}
body[data-layout=desk] .lower{display:grid;grid-template-columns:minmax(300px,1fr) 2fr;gap:20px;margin-top:28px}body[data-layout=desk] .phone-section{margin-top:0}
@media(max-width:900px){body[data-layout=desk] .workspace{grid-template-columns:1fr;grid-template-areas:"radar" "flights"}body[data-layout=desk] .flights{max-height:none}body[data-layout=desk] .lower{grid-template-columns:1fr}}

/* Phone: radar first, list below, details slide up as a sheet */
body[data-layout=phone] .workspace{display:flex;flex-direction:column;gap:18px}body[data-layout=phone] .flights-section{margin-top:6px}body[data-layout=phone] .flights{grid-template-columns:1fr}
body[data-layout=phone] .detail{position:fixed;left:0;right:0;bottom:0;z-index:20;max-width:640px;margin:0 auto;max-height:84vh;overflow-y:auto;overscroll-behavior:contain;border-radius:20px 20px 0 0;border-bottom:0;transform:translateY(105%);transition:transform .25s ease;box-shadow:0 -12px 40px #000a;padding-bottom:env(safe-area-inset-bottom)}
body[data-layout=phone] .detail.open{transform:none}body[data-layout=phone] .detail:not(.open){visibility:hidden;transition:transform .25s ease,visibility 0s .25s}
body[data-layout=phone] .detail::before{content:"";position:absolute;top:8px;left:50%;width:44px;height:4px;margin-left:-22px;border-radius:4px;background:#ffffff55;z-index:3}
body[data-layout=phone] .lower{display:block;margin-top:24px}body[data-layout=phone] .tip{display:none}
@media(max-width:600px){.pill{display:none}.layout-switch button{padding:6px 9px}header{padding:14px 16px}main{padding:22px 16px}.detail-title{font-size:26px}}
@media(max-width:780px){body[data-layout=phone] .toolbar button{flex:1 1 auto}}

/* ---- v1.4: satellite, range, expandable flight cards, more flight info ---- */
.panel-heading{flex-wrap:wrap}.panel-tools{flex-wrap:wrap;margin-top:12px}.range{display:flex;border:1px solid var(--line);border-radius:30px;padding:2px}.range button{border:0;border-radius:30px;padding:6px 10px;font-size:11px;background:none;color:var(--muted)}.range button[aria-pressed=true]{background:#24414a;color:var(--lime)}
.map-labels{opacity:.95}.map-credit{flex-basis:100%;text-align:right;font-size:9px;letter-spacing:.5px}
body.satellite #rings{stroke:#ffffff70}body.satellite #ring-text{fill:#fff;paint-order:stroke;stroke:#000a;stroke-width:3px}body.satellite #alert-ring{fill:#b7f2792a}body.satellite .plane .shape{stroke:#0b141b;stroke-width:1.2px}body.satellite .trail{stroke:#d9eef5;stroke-opacity:.75}body.satellite .heading-line{stroke:#ffffff;stroke-opacity:.85}
.plane.emergency .shape{fill:#ff6b5a!important}
.flights{position:relative}.flight{padding:0;overflow:hidden}.flight-summary{display:grid;grid-template-columns:76px 1fr;gap:14px;align-items:center;padding:12px 14px;outline:none}.flight-summary:focus-visible{outline:2px solid var(--lime);outline-offset:-2px;border-radius:12px}
.thumb{width:76px;height:52px;border-radius:8px;overflow:hidden;background:#0f1a21 url(icon.svg) center/30px no-repeat}.thumb.has-photo{background:#0f1a21}.thumb img{width:100%;height:100%;object-fit:cover;display:block}.thumb.wait{background:linear-gradient(100deg,#0f1a21 30%,#1a2c35 50%,#0f1a21 70%);background-size:300% 100%;animation:shimmer 1.4s linear infinite}
.flight-text{min-width:0}.flight .flight-top h3{font-size:18px}.flight-type{display:block;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.flight-line{font-size:12px;margin-top:4px;color:var(--text)}
.flight.expanded{border-color:var(--lime);background:#14231f}.flight.gone{opacity:.75}.flight.emergency{border-color:#ff6b5a}
.card-detail{border-top:1px solid var(--line);cursor:default}.card-detail .photo{aspect-ratio:16/10}
.fact-group{padding:4px 0}.fact-group h4{margin:14px 22px 2px;font-size:10px;letter-spacing:1.5px;color:var(--lime);font-weight:700;text-transform:uppercase}
.progress{margin:6px 22px 0;height:6px;border-radius:6px;background:#0f1a21;overflow:hidden}.progress i{display:block;height:100%;background:var(--lime);border-radius:6px}.progress-text{margin:6px 22px 0;font-size:12px}
.alarm{margin:10px 22px 0;padding:10px 12px;border-radius:9px;background:#3a1714;color:#ffb4aa;font-weight:600;font-size:13px}.live .gone{margin:10px 22px 0;color:#f2c879;font-size:12px}
@media(max-width:600px){.flight-summary{grid-template-columns:64px 1fr;gap:12px}.thumb{width:64px;height:46px}.panel-tools .toggle{padding:7px 10px}}
.card-detail .detail-head{display:none}.card-detail .route{padding-top:16px}

/* Satellite sky view: azimuth and elevation, independent of aircraft ground range. */
.location-tools{margin:-10px 0 20px}.manual-location{margin:0;padding:0;border:0}.manual-location form{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;max-width:660px}.manual-location label{margin:12px 0 0}.manual-location button{margin-bottom:0}
.sky-switch{display:flex;gap:8px;margin:0 0 20px}.sky-switch button[aria-pressed=true]{background:var(--lime);color:#15211c;border-color:var(--lime)}
.satellite-workspace{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.9fr);gap:20px;align-items:start}body[data-layout] .satellite-workspace>.radar-panel{grid-area:auto}.sat-list-panel{padding:20px 16px;border:1px solid var(--line);border-radius:17px;background:var(--panel)}
.sat-controls{display:flex;gap:14px;align-items:end;flex-wrap:wrap;margin-top:12px}.sat-controls label{display:grid;gap:6px;margin:0;font-size:11px;color:var(--muted)}.sat-controls select{padding:8px 10px;font-size:12px}.sat-controls button{margin-bottom:1px}.sat-controls button[aria-pressed=true]{color:var(--lime);border-color:var(--lime);background:#24414a}
.sat-radar{max-width:min(780px,calc(100vh - 260px))}#sat-status{font-size:12px;min-height:40px;margin-bottom:0}#sat-updated{color:var(--muted);font-size:11px}#sat-count{font-size:13px;color:var(--lime);margin-left:8px}
.sky-grid .minor{stroke:#243942}.sky-grid .major{stroke:#34505b}.sky-grid .ticks{stroke:#87a5ad}.sky-labels text{fill:#87a5ad;font-size:14px}.sky-labels .intercardinal text{font-size:11px;fill:#6c8992}.sky-labels .elevation text{font-size:10px;fill:#5f7c85}
.sat-ahead{fill:none;stroke:#92bbc6;stroke-width:1.5;stroke-dasharray:3 4;opacity:.55}.sat-ahead.visible{stroke:var(--lime);opacity:.7}.sat-pass{fill:none;stroke:var(--lime);stroke-width:2;stroke-dasharray:6 5}.sat-pass.behind{stroke:#87a5ad;stroke-dasharray:none;opacity:.45}.sat-sets{fill:#101a23;stroke:var(--lime);stroke-width:2}
.sky-legend{flex-wrap:wrap;gap:6px 14px}.sky-legend .key{display:inline-block;width:9px;height:9px;margin-right:6px;transform:rotate(45deg);vertical-align:0}.key.visible{background:var(--lime)}.key.sunlit{background:#92bbc6}.key.shadow{background:#4f6a73}.key.plane{background:#f2c879;transform:none;border-radius:2px}
.sky-plane{cursor:pointer;outline:none}.sky-plane .hit{fill:transparent}.sky-plane .shape{fill:#f2c879;stroke:#111f29;stroke-width:1.5}.sky-plane.selected .shape,.sky-plane:focus-visible .shape{fill:#fff}.sky-plane.selected .hit,.sky-plane:focus-visible .hit{stroke:#f2c879;stroke-width:2;fill:#f2c87918}.sky-plane text{fill:#f2c879;font-size:12px;paint-order:stroke;stroke:#101a23;stroke-width:4px;pointer-events:none}.sky-plane-ahead{stroke:#f2c879;stroke-width:1.5;stroke-dasharray:3 3;opacity:.6}
.sky-plane-section{margin-bottom:22px;padding-bottom:6px;border-bottom:1px solid var(--line)}.sky-plane-list{max-height:300px}.sky-plane-card strong{color:#f2c879}#sky-plane-count{font-size:13px;color:#f2c879;margin-left:8px}#sky-plane-updated{color:var(--muted);font-size:11px}
.sat-marker text.quiet,.sky-plane text.quiet{font-size:11px;opacity:.8}.sat-details .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
.sat-marker{cursor:pointer;outline:none}.sat-marker .hit{fill:transparent}.sat-marker .shape{fill:#92bbc6;stroke:#111f29;stroke-width:2}.sat-marker.shadow .shape{fill:#4f6a73}.sat-marker.visible .shape{fill:var(--lime)}.sat-marker.selected .shape,.sat-marker:focus-visible .shape{fill:#fff}.sat-marker.selected .hit,.sat-marker:focus-visible .hit{stroke:var(--lime);stroke-width:2;fill:#b7f27918}.sat-marker text{fill:var(--text);font-size:13px;paint-order:stroke;stroke:#101a23;stroke-width:4px;pointer-events:none}
.sat-list{display:grid;gap:8px;margin-top:14px;max-height:450px;overflow:auto}.sat-card{text-align:left;display:grid;gap:5px;background:#122029;padding:14px}.sat-card[aria-pressed=true]{border-color:var(--lime);background:#1a2e2c}.sat-card strong{font-size:15px;overflow-wrap:anywhere}.sat-card span{font-size:12px;color:var(--muted)}.sat-card .sat-visibility{color:var(--lime)}
.sat-details{border-top:1px solid var(--line);margin-top:18px;padding-top:18px}.sat-details h3{margin:0;font-size:21px;overflow-wrap:anywhere}.sat-details p{font-size:12px}.sat-details .facts{padding:10px 0}.sat-details button{padding:8px 12px;font-size:12px}.sat-details .pass-result{padding:10px 12px;border-radius:8px;background:#122029}.sat-details .orbit-age{font-size:11px}
body[data-sky-view=satellites] .lower aside{display:none}body[data-sky-view=satellites] .lower{grid-template-columns:1fr}
@media(max-width:900px){.satellite-workspace{grid-template-columns:1fr}.sat-radar{max-width:520px}.sat-list{max-height:none}}body[data-layout=phone] .satellite-workspace{grid-template-columns:1fr}body[data-layout=phone] .sat-list{max-height:none}
@media(max-width:600px){.manual-location form{grid-template-columns:1fr 1fr}.manual-location button{grid-column:1/-1}.sat-list-panel{padding:20px}.sat-controls{gap:10px}.sky-switch button{flex:1}}
@media(max-width:600px){.sat-marker text,.sky-plane text{font-size:20px;stroke-width:5px}.sat-marker text.quiet,.sky-plane text.quiet{font-size:17px}.sky-labels text{font-size:22px}.sky-labels .intercardinal text{font-size:17px}.sky-labels .elevation text{font-size:15px}}
