/* Navigation keeps its quiet opacity during hover, focus and interaction. */
.quiet-navigation{--edge:clamp(16px,3vw,42px);--overlay-surface:#080e15d9;--overlay-line:#b7c6ce2b;--overlay-ink:#edf0ed;--overlay-muted:#bdc9ce;--record-bottom:196px}
.quiet-navigation .masthead{left:var(--edge);right:auto;top:calc(12px + env(safe-area-inset-top));max-width:calc(100% - 2 * var(--edge));display:flex;justify-content:flex-start;align-items:center;gap:15px;padding:3px 12px;pointer-events:none;z-index:6}
.quiet-navigation .masthead,.quiet-navigation .navigation,.quiet-navigation .record{background:#080e158c;border:1px solid var(--overlay-line);border-radius:8px;box-shadow:0 2px 14px #0002;backdrop-filter:blur(10px) brightness(.65);-webkit-backdrop-filter:blur(10px) brightness(.65)}
.quiet-navigation .masthead,.quiet-navigation .story-door{opacity:.7}
.quiet-navigation .navigation{opacity:.7}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.quiet-navigation .masthead,.quiet-navigation .navigation,.quiet-navigation .record{background:#080e15c7}}
.quiet-navigation .name{font:400 26px/1.25 var(--serif);letter-spacing:-.025em;white-space:nowrap;color:var(--overlay-ink);text-shadow:none}
.quiet-navigation .masthead .personal-nav{display:flex;align-items:center;gap:5px;pointer-events:auto}
.quiet-navigation .personal-nav button{min-height:44px;min-width:44px;padding:0 5px;font:400 12px var(--mono);color:var(--overlay-muted);text-shadow:none;border-radius:4px}
.quiet-navigation .personal-nav button:hover{color:#f0ece4}
.quiet-navigation .shade{background:linear-gradient(180deg,#05080c26,transparent 22%,transparent 64%,#05080c86);z-index:1}
.quiet-navigation #poster{object-position:76% 35%;opacity:1}
/* A 2 KB blur of the poster paints with the first frame, until andromeda.webp arrives. */
.quiet-navigation #poster{background:url(data:image/webp;base64,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) 76% 35%/cover no-repeat}
.quiet-navigation .story-door{inset:auto;display:block;position:absolute;width:max-content;max-width:calc(100% - 24px);transform:translate(-8px,-50%);z-index:3;transition:none}
.quiet-navigation .story-door[data-flip=true]{transform:translate(calc(-100% + 8px),-50%)}
.quiet-navigation .story-door[data-flip=true] .story-invitation{flex-direction:row-reverse}
.quiet-navigation .story-call{font-size:14px;text-shadow:0 1px 5px #000,0 0 9px #000}
.quiet-navigation .story-resume{font-size:10px;text-shadow:0 1px 5px #000}
.quiet-navigation .story-invitation>span:last-child{padding:7px 10px;background:var(--overlay-surface);border:1px solid var(--overlay-line);border-radius:5px;color:var(--overlay-ink)}
.quiet-navigation .story-resume{color:var(--overlay-muted)}
.quiet-navigation .navigation{position:absolute;z-index:5;left:50%;bottom:calc(32px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(460px,calc(100% - 32px));padding:8px 12px;color:var(--overlay-ink);text-shadow:none}
.quiet-navigation .navigation button{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:6px;background:transparent;border:1px solid transparent;border-radius:4px;color:inherit;font:400 12px/1.4 var(--mono)}
.quiet-navigation .navigation svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.quiet-navigation .navigation button:hover:not(:disabled),.quiet-navigation .personal-nav button:hover{color:#fff;background:#ffffff16;border-color:var(--overlay-line)}
.quiet-navigation :is(.navigation,.masthead,.record) :is(button,select):focus-visible{outline:2px solid #efd6a9;outline-offset:2px}
.quiet-navigation .navigation button:disabled{cursor:default;opacity:.32}
.quiet-navigation .navigation-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.quiet-navigation .navigation-actions button{position:relative;flex-direction:column;gap:6px;min-height:56px;padding:5px 0;white-space:nowrap}
.quiet-navigation .navigation-actions button[aria-pressed=true]{color:#f3ddb8;background:#c4a47521;border-color:#c4a47570}
.quiet-navigation .navigation-actions button[aria-pressed=true]:after{content:'';position:absolute;bottom:0;width:12px;height:1px;background:currentColor;opacity:.65}
.quiet-navigation .navigation-readouts{position:absolute;bottom:calc(100% + 8px);right:12px;display:flex;align-items:center;gap:14px;pointer-events:none;color:var(--overlay-muted);font:400 11px/1.5 var(--mono);text-shadow:0 1px 4px #000,0 0 8px #000}
.quiet-navigation[data-navigation=overview]:not([data-search-open=true]) .navigation-readouts{display:none}
/* Until the sky can move, say so instead of leaving the controls dim and silent.
   Once an opening starts, its own caption and skip take this place. */
html:not([data-intro]) .quiet-navigation[data-mode=loading]:not([data-search-open=true]) .navigation-readouts{display:flex}
.quiet-navigation .navigation-readouts #status{display:inline}
.quiet-navigation .navigation-readouts #status:empty{display:none}
.quiet-navigation #navigation-context{padding:0 0 6px;margin-bottom:6px;border-bottom:1px solid var(--overlay-line)}
.quiet-navigation .navigation-instructions{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 16px;margin:2px 0 4px;color:var(--overlay-muted);font:400 12px/1.5 var(--mono)}
.quiet-navigation .navigation-instructions span{white-space:nowrap}
.quiet-navigation .navigation-readouts #zoom-level{position:static;display:block;min-width:0;margin:0;font:inherit;color:inherit;opacity:1}
/* Detail tiles come from a third-party CDN. Their loss is a quiet readout, stacked above the status line. */
.quiet-navigation .detail-note{position:absolute;right:12px;bottom:calc(100% + 26px);margin:0;pointer-events:none;color:var(--overlay-muted);font:400 11px/1.5 var(--mono);text-shadow:0 1px 4px #000,0 0 8px #000;white-space:nowrap}
.quiet-navigation .detail-note:empty,html[data-intro] .detail-note{display:none}
.quiet-navigation[data-navigation=overview]:not([data-search-open=true]) .detail-note{bottom:calc(100% + 8px)}
@media(max-height:500px) and (min-width:600px){.quiet-navigation .detail-note{bottom:calc(100% + 8px)}}
.quiet-navigation #survey-controls{display:flex;align-items:center;justify-content:space-between;gap:12px}
.quiet-navigation .navigation-transport{display:flex;gap:6px}
.quiet-navigation .navigation-speed select{min-width:72px;min-height:44px;padding:4px 6px;border:1px solid var(--overlay-line);border-radius:4px;background:#111c26;color:var(--overlay-ink);font:400 16px var(--mono);color-scheme:dark}
.quiet-navigation .navigation-speed option{background:#0c1219;color:#e1e4e5}
.quiet-navigation .navigation-transport #play-pause{color:#e1d3bd}
.quiet-navigation .image-credit{left:auto;right:var(--edge);bottom:calc(5px + env(safe-area-inset-bottom));padding:2px 0;background:transparent;color:#aeb8bf;font-size:9px;opacity:.6;transition:opacity 1.4s ease,color .2s;z-index:4}
.quiet-navigation[data-chrome-idle=true] .image-credit{opacity:0;pointer-events:none}
.quiet-navigation .image-credit:hover,.quiet-navigation .image-credit:focus-visible{color:#d2d9dd;opacity:.9;pointer-events:auto}
@media(prefers-reduced-motion:reduce){.quiet-navigation .image-credit{transition:none}}
.quiet-navigation .hint,.quiet-navigation .survey-study-links{display:none}
/* The gesture hint stays hidden; a prompt is one line just above the dock. */
.quiet-navigation .hint[data-prompt]{display:block;left:50%;bottom:calc(114px + env(safe-area-inset-bottom));transform:translateX(-50%);max-width:calc(100% - 2 * var(--edge));z-index:5;color:var(--overlay-muted);font:400 11px/1.5 var(--mono);letter-spacing:0;text-align:center;white-space:nowrap;text-shadow:0 1px 4px #000,0 0 8px #000}
@media(orientation:landscape) and (max-height:500px){.quiet-navigation .hint[data-prompt]{bottom:calc(92px + env(safe-area-inset-bottom))}}
.quiet-navigation .record{z-index:3;bottom:calc(var(--record-bottom) + env(safe-area-inset-bottom));left:var(--edge);max-width:min(350px,calc(100% - 2 * var(--edge)));max-height:calc(100svh - var(--record-bottom) - 90px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;padding:18px;color:var(--overlay-ink);text-shadow:none;pointer-events:auto}
.quiet-navigation .record-eyebrow{padding-right:24px;font-size:10px;flex-wrap:wrap;gap:7px;color:#e7c998}
.quiet-navigation .record-title{padding-right:16px}
.quiet-navigation .record-title h1{font-size:34px}
.quiet-navigation .record .system-detail{font-size:11px;color:var(--overlay-muted)}
/* Four lines at most, ending in an ellipsis rather than a hidden scroll box that reads as clipped. */
.quiet-navigation .record .system-story{font-size:12px;line-height:1.75;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}
.quiet-navigation .record .system-open{min-height:44px;max-width:100%;margin-top:12px;padding:10px 12px;font-size:11px;color:var(--overlay-ink);background:#ffffff0a;border:1px solid var(--overlay-line);border-radius:4px}
.quiet-navigation .record .system-open:hover{background:#ffffff16;border-color:#c4a47590}
.quiet-navigation .record-close{top:3px;right:3px;color:var(--overlay-muted);opacity:1}
.quiet-navigation .target #target-label:not(:empty){padding:3px 7px;background:var(--overlay-surface);border:1px solid var(--overlay-line);border-radius:4px;color:var(--overlay-ink);font-size:11px;text-shadow:none}
.quiet-navigation .target{z-index:3}
.quiet-navigation #catalog-markers{position:absolute;inset:0;z-index:2;pointer-events:none}
.quiet-navigation .catalog-marker{position:absolute;display:grid;place-items:center;width:44px;height:44px;min-height:44px;transform:translate(-50%,-50%);padding:0;background:none;border:0;pointer-events:auto}
.quiet-navigation .catalog-marker:before{content:'';width:6px;height:6px;border:1px solid #e3d8bd9e;border-radius:50%;box-shadow:0 0 4px #0006}
.quiet-navigation .catalog-marker:hover:before,.quiet-navigation .catalog-marker:focus-visible:before{border-color:#fff0ce;box-shadow:0 0 7px #e8d6ae55}
@media(min-width:760px){.quiet-navigation .navigation{bottom:calc(32px + env(safe-area-inset-bottom))}.quiet-navigation .record-title h1{font-size:40px}.quiet-navigation .story-call{font-size:15px}}
@media(min-width:1100px){.quiet-navigation .record{bottom:110px;max-height:calc(100svh - 200px - env(safe-area-inset-top));max-width:min(350px,calc((100vw - 510px)/2 - var(--edge)))}}
@media(max-width:350px){.quiet-navigation .masthead{gap:10px;padding-left:9px;padding-right:9px}.quiet-navigation .name{font-size:23px}.quiet-navigation .masthead .personal-nav{gap:2px}.quiet-navigation .navigation{width:calc(100% - 28px);padding-left:8px;padding-right:8px}.quiet-navigation .record-title h1{font-size:29px}.quiet-navigation .navigation-actions{gap:4px}.quiet-navigation .navigation-actions button{font-size:11px}}
@media(max-height:620px){.quiet-navigation .record .system-story{display:none}.quiet-navigation .record-title h1{font-size:29px}.quiet-navigation .record .system-detail{margin-bottom:4px}}
@media(prefers-reduced-motion:reduce){.quiet-navigation .navigation{transition:none}}
/* Explore keeps single-pointer pan and zoom one tap away, behind Map controls.
   The bottom-anchored dock grows upward, so the controls open above their
   toggle and the toggle stays under the pointer (the tab order is unchanged). */
.quiet-navigation #exploration-controls{display:flex;flex-direction:column-reverse}
.quiet-navigation .navigation-explore{display:flex;align-items:center;gap:8px}
.quiet-navigation .navigation-explore .navigation-instructions{flex:1;min-width:0;justify-content:flex-start;margin:0}
.quiet-navigation .navigation-instructions span{white-space:normal}
.quiet-navigation .navigation #map-controls-toggle{flex:none;padding:6px 10px;border-color:var(--overlay-line);white-space:nowrap}
.quiet-navigation .navigation #map-controls-toggle[aria-expanded=true]{color:#f3ddb8;background:#c4a47521;border-color:#c4a47570}
.quiet-navigation .navigation-manual{display:flex;gap:4px;margin-bottom:6px}
.quiet-navigation .navigation .navigation-manual button{flex:1;min-width:0;font-size:20px}
.quiet-navigation[data-map-controls=true]{--record-bottom:236px}
@media(max-width:350px){.quiet-navigation .navigation-manual{gap:2px}}
/* Short viewports (landscape phones, 400% zoom) keep the map, masthead and dock
   on the first screen. The record, observation and coverage panels follow below
   the map instead of collapsing behind the dock; the page scrolls to them. */
@media(max-height:360px){
  html{height:auto;overflow-x:hidden;overflow-y:auto}
  body{height:auto;overflow:visible}
  #survey{overflow:visible;overflow-x:clip;padding-top:100svh}
  .quiet-navigation .record{position:relative;inset:auto;width:min(460px,calc(100% - 32px));max-width:none;max-height:none;margin:12px auto 0;overflow:visible}
  .quiet-navigation .record:not(.is-visible){display:none}
  /* A hidden target keeps following its point, often off the map, where it would lengthen the page. */
  .quiet-navigation .target:not(.is-visible){display:none}
  .quiet-navigation .navigation-actions button{min-height:44px;gap:2px;padding:2px 0}
  /* The dock's panels stop below the masthead (app.js measures it; it wraps to two rows on some pages). */
  .quiet-navigation #navigation-context{max-height:calc(100svh - var(--masthead-bottom,64px) - 95px);overflow-y:auto;overscroll-behavior:contain;padding-bottom:4px;margin-bottom:4px}
  /* A panel with more below its visible end fades there (navigation-ui marks it). */
  .quiet-navigation #navigation-context[data-overflow=true]{mask-image:linear-gradient(#000 calc(100% - 16px),#0000)}
  .quiet-navigation .navigation-manual{margin-bottom:4px}
  .quiet-navigation[data-search-open=true] .navigation-readouts{display:none}
  .quiet-navigation .navigation .navigation-search{max-height:calc(100svh - var(--masthead-bottom,64px) - 101px);overflow-y:auto}
}
/* Phones: the record card spans the same width as the dock beneath it. */
@media(max-width:520px){.quiet-navigation .record{max-width:none;right:var(--edge)}}
