.remote-observation{width:320px;max-height:calc(100svh - 255px);overflow:auto;overscroll-behavior:contain;scrollbar-width:none}
.remote-observation::-webkit-scrollbar{display:none}
.remote-observation .knowledge-summary:empty{display:none}
.remote-observation .observation-close{position:absolute;float:none;width:44px;height:44px;right:6px;top:6px}
.remote-observation h2{clear:none;font-size:14px;letter-spacing:.02em;padding-right:22px}
.remote-observation .knowledge-summary{line-height:1.5}
.remote-observation figure{margin:12px 0;display:flex;align-items:center;gap:14px}
.remote-observation [hidden]{display:none}
/* The card arrives over .7s and leaves over .6s (remote-observation-ui.mjs). */
.remote-observation:not([hidden]){animation:observation-arrive .7s ease-out}
.remote-observation.is-leaving{opacity:0;transition:opacity .6s ease;pointer-events:none}
.remote-observation .observation-lens{position:relative;flex:none;width:104px;height:104px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px #ffffff14}
.remote-observation :is(canvas,.observation-view){display:block;width:100%;height:100%;border-radius:50%;background:#080e15;object-fit:cover}
.remote-observation :is(canvas,.observation-view)[hidden]{display:none}
/* Timing: the image fades in over .9s; .8s later one scan line sweeps it over
   2.4s; the triage verdict then fades in over 1s (SCAN_MS = 3200 in the UI). */
.remote-observation figure:not([hidden]){animation:observation-arrive .9s ease-out}
@keyframes observation-arrive{from{opacity:0}}
.observation-scan{position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent 0 42%,#cfe9ef33 48%,#e4f2f577 50%,#cfe9ef33 52%,transparent 58% 100%);transform:translateY(-55%)}
.remote-observation figure.is-scanning .observation-scan{animation:observation-scan 2.4s ease-in-out .8s 1 both}
@keyframes observation-scan{0%{opacity:0;transform:translateY(-55%)}18%{opacity:1}82%{opacity:1}100%{opacity:0;transform:translateY(55%)}}
.remote-observation:not([data-triage]) .observation-triage{display:none}
/* The disposition block: a code in the scan's colour, then why and what next. */
.remote-observation .observation-triage{grid-template-columns:74px 1fr;gap:4px 10px;margin:0 0 4px;padding:6px 0 6px 10px;border-left:2px solid #ffffff26;color:#b9cbd4;opacity:0;visibility:hidden;transition:opacity 1s ease,visibility 0s 1s}
.observation-triage.is-ready{opacity:1;visibility:visible;transition:opacity 1s ease,visibility 0s}
.observation-triage dt{color:#8fa3b1}
.observation-triage .triage-code{color:#e4f2f5;font-weight:500}
.remote-observation[data-triage=queued] .observation-triage{border-left-color:#f3ddb880}
.remote-observation[data-triage=queued] .triage-code{color:#f3ddb8}
.remote-observation[data-triage=flagged] .observation-triage{border-left-color:#9adbe899}
.remote-observation[data-triage=flagged] .triage-code{color:#b8ecf4}
.remote-observation figcaption{font-size:10px;line-height:1.5;color:#91a6b5}
.remote-observation dl{grid-template-columns:105px 1fr;gap:7px 10px;margin-top:10px;font-size:11px;line-height:1.5}
.remote-observation details{border-top:1px solid #ffffff1a;margin-top:12px;padding-top:4px;font-size:12px;line-height:1.6}
.remote-observation .observation-more{margin:4px 0 10px}
.remote-observation summary{cursor:pointer;min-height:44px;align-content:center;color:#d5e6e8}
.remote-observation .observation-caveat,.remote-observation .observation-source{font-size:10px;line-height:1.6;color:#94a5b3}
.observation-source a{color:inherit;text-decoration-color:#94a5b355}
.observation-bands{display:grid;gap:5px}
.observation-bands span{display:block;font-size:10px;padding-left:6px;background:linear-gradient(90deg,#ae6a603b var(--band),transparent var(--band));border-left:2px solid #bd7e74}
.observation-bands span:nth-child(2){background:linear-gradient(90deg,#74b58b30 var(--band),transparent var(--band));border-color:#8eb69a}
.observation-bands span:nth-child(3){background:linear-gradient(90deg,#7198c642 var(--band),transparent var(--band));border-color:#8baad1}
body[data-survey-beat=wide] :is(#catalog-markers,#target),body[data-survey-beat=glance] :is(#catalog-markers,#target){display:none;visibility:hidden}
/* A passing glance: the ring locks on and the alias fades in over .7s on
   arrival; the verdict follows 1s later over .8s; all fade out over .7s. */
.survey-glance{position:absolute;left:0;top:0;z-index:2;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s .7s}
.survey-glance.is-visible{opacity:1;visibility:visible;transition:opacity .7s ease,visibility 0s}
.glance-ring{position:absolute;left:-15px;top:-15px;width:30px;height:30px;border-radius:50%;border:1.25px solid #ecf6f8d9;box-shadow:0 0 0 1px #00000070,0 0 10px #000000a0,inset 0 0 0 1px #00000050;transform:scale(1.35);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.survey-glance.is-visible .glance-ring{transform:scale(1)}
.glance-label{position:absolute;left:22px;top:-10px;white-space:nowrap;padding:1px 7px;border-radius:3px;background:#070b0fcc;color:#e4f2f5;font:400 10.5px/18px var(--mono)}
.glance-verdict{opacity:0;transition:opacity .8s ease}
.glance-verdict:not(:empty)::before{content:' · '}
@media(max-width:600px){.glance-label{line-height:16px;padding:2px 7px}.glance-verdict{display:block;min-height:16px}.glance-verdict:not(:empty)::before{content:none}}
.survey-glance.has-verdict .glance-verdict{opacity:1}
.survey-glance[data-triage=queued] .glance-verdict{color:#f3ddb8}
body[data-survey-beat=detection] .story-door{display:none;visibility:hidden}
@media(max-width:600px){
  .remote-observation{top:110px;left:16px;right:auto;width:min(300px,calc(100vw - 32px));padding:14px;max-height:calc(100svh - 300px)}
  .remote-observation figure{margin:10px 0}
  .remote-observation .observation-lens{width:72px;height:72px}
  .remote-observation .knowledge-summary{font-size:12px;margin:6px 0}
  .remote-observation dl{font-size:11px}
}
@media(max-height:360px){.remote-observation{position:relative;inset:auto;width:min(460px,calc(100% - 32px));max-height:none;margin:12px auto 0;overflow:visible}}
@media(prefers-reduced-motion:reduce){.remote-observation:not([hidden]),.remote-observation figure:not([hidden]),.remote-observation figure.is-scanning .observation-scan{animation:none}.observation-triage,.survey-glance,.glance-ring,.glance-verdict{transition:none}.glance-ring{transform:none}}
/* The instrument console (survey-console.mjs): log lines centred between the
   masthead and Charted area. Each line fades in over .9s; all leave over 1.2s. */
.survey-console{position:absolute;z-index:5;top:calc(22px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(440px,calc(100% - 760px));min-width:300px;text-align:center;pointer-events:none;font:400 10.5px/19px var(--mono);letter-spacing:.04em;color:#d3e4e8;text-shadow:0 1px 10px #000,0 0 3px #000}
.survey-console p{margin:0;opacity:0;transition:opacity .9s ease}
.survey-console p.is-shown{opacity:.86}
.survey-console p:first-child{color:#f0e3c8}
.survey-console[data-kind=note] p:first-child{color:#cfe2e6}
.survey-console.is-leaving p{opacity:0;transition:opacity 1.2s ease}
body[data-creation-pending=true] .survey-console,html[data-intro] .survey-console{visibility:hidden}
@media(max-width:900px){.survey-console{z-index:2;top:calc(196px + env(safe-area-inset-top));left:16px;right:16px;width:auto;min-width:0;transform:none;text-align:left}}
@media(prefers-reduced-motion:reduce){.survey-console p,.survey-console.is-leaving p{transition:none}}
/* The viewfinder: the sky seen through the instrument. Four 18px corner marks
   inset from the screen's edges; static, so it costs nothing per frame. It
   arrives with the map at the intro's handoff (creation-b.css). */
.viewfinder{--vf:#e2eef0a8;--vf-len:18px;filter:drop-shadow(0 0 1.5px #000d);position:absolute;inset:calc(9px + env(safe-area-inset-top)) calc(9px + env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom)) calc(9px + env(safe-area-inset-left));z-index:1;pointer-events:none;
  background:linear-gradient(var(--vf),var(--vf)) 0 0/var(--vf-len) 1px,linear-gradient(var(--vf),var(--vf)) 0 0/1px var(--vf-len),
    linear-gradient(var(--vf),var(--vf)) 100% 0/var(--vf-len) 1px,linear-gradient(var(--vf),var(--vf)) 100% 0/1px var(--vf-len),
    linear-gradient(var(--vf),var(--vf)) 0 100%/var(--vf-len) 1px,linear-gradient(var(--vf),var(--vf)) 0 100%/1px var(--vf-len),
    linear-gradient(var(--vf),var(--vf)) 100% 100%/var(--vf-len) 1px,linear-gradient(var(--vf),var(--vf)) 100% 100%/1px var(--vf-len);
  background-repeat:no-repeat;opacity:0;transition:opacity 1.6s ease}
body[data-ready=true] .viewfinder{opacity:1}
html[data-intro] .viewfinder,body[data-creation-pending=true] .viewfinder,body[data-charted-dimension="3d"] .viewfinder{opacity:0;transition:none}
@media(max-height:360px){.viewfinder{display:none}}