/* LunaMap — interface styles.
   Tokens sampled from NASA properties rather than chosen: #000 ground, three
   text tiers, one warm accent, one cool. No serif anywhere, which is also
   NASA's own practice. */

:root{
  --bg:#000; --panel:#141416;
  --t1:#fff; --t2:#c8c8cc; --t3:#8e8e97;
  --sun:#e0a94d; --sun-b:#9a7740; --sun-c:#6d5a3c; --earth:#7fb3e6; --earth-b:#52799c; --earth-c:#3d5770;
  --line:rgba(255,255,255,.14); --line-s:rgba(255,255,255,.28);
  --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --rail-w:min(26vw,440px);
}
*{box-sizing:border-box}
/* The browser's own [hidden]{display:none} loses to any author display rule,
   so #app, the globe controls and the period picker -- all display:flex --
   ignored their hidden attribute and kept rendering. That left the app shell
   visible behind the failure panel and the globe controls orphaned when the
   globe was absent, while el.hidden still reported true, which is why a test
   that read the property passed. This makes the attribute mean what it says
   for every element, rather than patching each one. */
[hidden]{display:none!important}
/* Type scales with the viewport. Fixed pixels read only at the width the
   design was built on. */
html{font-size:clamp(16px,0.70vw + 7px,23px)}
/* The page scrolls. It used to be one fixed screen, and every recurring
   layout fault -- the finding pushed below the fold, the rail with no slack,
   the cramped dock -- came from fitting everything into that one viewport. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--t1);font-family:var(--sans);
  font-size:1rem;line-height:1.5;min-height:100vh;max-width:1840px;margin-inline:auto;
  font-feature-settings:"tnum" 1}

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* The title never wraps; on a narrow window the period and provenance drop
   to a second row instead. */
header{display:flex;align-items:center;justify-content:space-between;gap:6px 16px;flex-wrap:wrap;
  padding:8px 26px;min-height:52px;position:relative;z-index:4}
.mark{font-weight:600;letter-spacing:-.01em;font-size:1rem;margin:0;white-space:nowrap}
.mark span{color:var(--t3);font-weight:400}
.prov{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--t3)}

/* The arrow is drawn by CSS because app.js rewrites the line's text. */
.provlink{color:var(--t2);text-decoration:none;border-bottom:1px solid var(--line);
  padding-bottom:2px}
.provlink::after{content:" →";color:var(--t3)}
.provlink:hover{color:var(--t1);border-color:var(--line-s)}
.provlink:focus-visible{outline:2px solid var(--sun);outline-offset:3px}
.navlink{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--t2);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;
  white-space:nowrap}
.navlink:hover{color:var(--t1);border-color:var(--line-s)}
.navlink:focus-visible{outline:2px solid var(--sun);outline-offset:3px}

#app{position:relative}

/* ---- Explore: the first screen is the map and nothing else ---- */
.stage{position:relative;overflow:hidden;height:calc(100vh - var(--chrome,100px));min-height:520px}
.space{position:absolute;inset:0;background:
  radial-gradient(circle .8px at 12% 22%,rgba(255,255,255,.5) 0 100%,transparent 0),
  radial-gradient(circle .7px at 27% 9%,rgba(255,255,255,.35) 0 100%,transparent 0),
  radial-gradient(circle 1.1px at 8% 61%,rgba(255,255,255,.45) 0 100%,transparent 0),
  radial-gradient(circle .6px at 19% 78%,rgba(255,255,255,.3) 0 100%,transparent 0),
  radial-gradient(circle .9px at 34% 88%,rgba(255,255,255,.4) 0 100%,transparent 0),
  radial-gradient(circle .7px at 44% 16%,rgba(255,255,255,.3) 0 100%,transparent 0),
  radial-gradient(circle 1.2px at 58% 73%,rgba(255,255,255,.4) 0 100%,transparent 0),
  radial-gradient(circle .6px at 66% 28%,rgba(255,255,255,.28) 0 100%,transparent 0),
  radial-gradient(circle .8px at 5% 40%,rgba(255,255,255,.33) 0 100%,transparent 0),
  radial-gradient(ellipse 60% 55% at 34% 50%,#111318 0%,#06070a 60%,#000 100%)}

/* The globe's canvas covers the whole stage. The sphere is drawn inside it
   with a real limb; there is no CSS circle clipping it, because a clipped
   canvas is exactly what made the old Moon read as a cut-out photograph. */
.moon-host{position:absolute;inset:0;touch-action:none;cursor:grab;outline:none}
.moon-host:active{cursor:grabbing}
.moon-host:focus-visible{box-shadow:inset 0 0 0 2px rgba(224,169,77,.55)}
.moon-host canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Labels are laid out in two columns with leader lines back to their sites,
   so neighbouring sites never share a label position at any zoom. */
.pin-label{position:absolute;z-index:2;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.1em;color:var(--t2);white-space:nowrap;cursor:pointer;
  background:rgba(6,7,10,.72);border:1px solid rgba(255,255,255,.14);border-radius:3px;
  padding:3px 8px;text-shadow:none;transition:background .12s,color .12s}
.pin-label.side-l{transform:translate(-100%,-50%)}
.pin-label.side-r{transform:translate(0,-50%)}
.pin-label.on{color:var(--t1);font-weight:500;border-color:rgba(224,169,77,.7)}
.pin-label.hot{color:#000;background:var(--sun);border-color:var(--sun)}
.pin-label:focus-visible{outline:2px solid var(--sun);outline-offset:2px}

/* Under a lens the label carries rank, site and total. First place is set
   heavier and its figures take the body's colour. */
.pin-label .rk{color:var(--t3);margin-right:7px}
.pin-label .dv{margin-left:9px;color:var(--t2);letter-spacing:.04em}
.pin-label .ld{display:block;margin-top:2px;font-size:.64rem;letter-spacing:.06em;color:var(--t1)}
.pin-label.r1{color:var(--t1);font-weight:500}
.pin-label.by-sun.r1 .rk,.pin-label.by-sun.r1 .dv{color:var(--sun)}
.pin-label.by-earth.r1 .rk,.pin-label.by-earth.r1 .dv{color:var(--earth)}
.pin-label.by-both.r1 .rk,.pin-label.by-both.r1 .dv{color:#fff}
/* No objective stated: a label is the place and its name, and nothing else. */
.pin-label .nm{margin-left:8px;color:var(--t3);letter-spacing:.04em}
.pin-label.on .nm{color:var(--t2)} .pin-label.hot .nm{color:#000}
.pin-label.hot .rk,.pin-label.hot .dv,.pin-label.hot .ld{color:#000!important}

.layer-ctl{position:absolute;z-index:3;left:26px;top:162px;display:flex;gap:6px;
  flex-wrap:wrap;align-items:center;max-width:min(360px,calc(100% - var(--rail-w) - 52px))}
.layer-label{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--t3);margin-right:4px}
.layer-ctl button{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--t2);background:rgba(10,11,15,.7);
  border:1px solid var(--line);border-radius:4px;padding:6px 10px;cursor:pointer}
.layer-ctl button:hover{color:var(--t1);border-color:var(--line-s)}
.layer-ctl button:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
.layer-ctl button[aria-pressed="true"]{color:#000;font-weight:500}
.layer-ctl{flex-direction:column;align-items:flex-start;gap:5px}
.layer-ctl .layer-label{margin:0 0 2px}
/* Kept narrow so it wraps beside the disc instead of running across it. */
.layer-note{flex-basis:100%;margin:2px 0 0;font-size:.62rem;line-height:1.5;color:var(--t3);
  max-width:27ch;text-shadow:0 0 4px #000,0 0 8px #000}

.framing{position:absolute;z-index:3;left:26px;top:20px;font-family:var(--mono);
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);
  pointer-events:none}
.framing b{color:var(--t2);font-weight:400;display:block;margin-bottom:5px}
.framing .exp{display:block;margin-top:5px;color:var(--sun);letter-spacing:.08em}
.framing .exp:empty{display:none}

.globe-ctl{position:absolute;z-index:3;left:26px;top:98px;display:flex;gap:6px;flex-wrap:wrap}
.globe-ctl button{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--t2);background:rgba(10,11,15,.7);
  border:1px solid var(--line);border-radius:4px;padding:6px 10px;cursor:pointer;
  min-width:30px}
.globe-ctl button:hover{color:var(--t1);border-color:var(--line-s)}
.globe-ctl button:focus-visible{outline:2px solid var(--sun);outline-offset:2px}

.stamp{position:absolute;z-index:3;left:26px;bottom:18px;
  margin:0;font-family:var(--mono);font-size:.64rem;letter-spacing:.09em;color:#9a9aa3;
  line-height:1.8;max-width:46ch;text-transform:uppercase;pointer-events:none}

.earth{position:absolute;z-index:3;left:26px;bottom:26px;margin:0}
.earth .ball{width:clamp(92px,7.6vw,150px);aspect-ratio:1;border-radius:50%;position:relative;
  overflow:hidden;background:#17304a;
  box-shadow:inset -12px -7px 30px rgba(0,0,0,.82),
    inset 1px 1px 2px rgba(195,225,255,.32),
    0 0 22px rgba(110,170,235,.26),0 0 56px rgba(90,150,220,.13)}
.earth .sub{position:absolute;width:7px;aspect-ratio:1;border-radius:50%;background:var(--earth);
  box-shadow:0 0 0 3px rgba(127,179,230,.35);transform:translate(-50%,-50%)}
.earth .ring{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;
  border:1px dashed rgba(127,179,230,.5);transform:translate(-50%,-50%);left:50%;top:50%}
.earth figcaption{margin-top:9px;font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;
  color:#a9a9b2;line-height:1.7;max-width:26ch;text-transform:uppercase}
.earth figcaption b{color:var(--t2);font-weight:400}

.scalekey{position:absolute;z-index:3;right:calc(var(--rail-w) + 40px);bottom:26px;margin:0;
  text-align:right}
.pairkey{display:flex;align-items:center;justify-content:flex-end;gap:8px;height:26px}
.k-earth{width:26px;aspect-ratio:1;border-radius:50%;background:#44648a;flex:none}
.k-moon{width:7.1px;aspect-ratio:1;border-radius:50%;background:#9a968f;flex:none}
.scalekey figcaption{margin-top:7px;font-family:var(--mono);font-size:.64rem;letter-spacing:.09em;
  color:#a9a9b2;line-height:1.7;text-transform:uppercase}

/* ---- rail: information overlay ---- */
.rail{position:absolute;z-index:3;right:0;top:0;bottom:0;width:var(--rail-w);
  padding:20px 30px 16px 34px;display:flex;flex-direction:column;
  gap:clamp(9px,1.15vh,16px);overflow:hidden;
  background:linear-gradient(to right,transparent 0%,rgba(0,0,0,.55) 22%,
    rgba(0,0,0,.82) 60%,rgba(0,0,0,.9) 100%)}
.rail>*{flex:none}

.pairpick{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pick{display:flex;align-items:center;gap:7px;flex:1 1 9em;min-width:0}
.pick span{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--accent)}
.pick.a{--accent:var(--sun)} .pick.b{--accent:var(--t2)}
.pick select{flex:1;min-width:0;font-family:var(--sans);font-size:.86rem;font-weight:500;
  color:var(--t1);background:rgba(255,255,255,.06);border:1px solid var(--line);
  border-radius:4px;padding:6px 8px;cursor:pointer}
.pick select:focus-visible{outline:2px solid var(--sun);outline-offset:3px}
.swap{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--t2);background:rgba(255,255,255,.06);border:1px solid var(--line);
  border-radius:4px;padding:4px 9px;cursor:pointer;white-space:nowrap}
.swap:hover{color:var(--t1);border-color:var(--line-s)}
.swap:focus-visible{outline:2px solid var(--sun);outline-offset:3px}

.headright{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:flex-end}
.periodpick{display:flex;align-items:center;gap:10px}
.periodpick label{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--t3)}
.periodpick select{flex:1;font-family:var(--sans);font-size:.88rem;font-weight:500;
  color:var(--t1);background:rgba(255,255,255,.06);border:1px solid var(--line);
  border-radius:4px;padding:6px 9px;cursor:pointer}
.periodpick select:focus-visible{outline:2px solid var(--sun);outline-offset:3px}

/* The decision block: one row per priority, then the line that follows from
   the two. The rows are the evidence (leader and margin); the closing line
   is the only sentence, and it is computed. */
.decision{display:flex;flex-direction:column;gap:6px;margin:4px 0 2px}
.decision{gap:10px}
.dc{margin:0;font-family:var(--mono);font-size:.74rem;letter-spacing:.04em}
.dc .pr{display:block;letter-spacing:.12em;text-transform:uppercase;font-size:.64rem;margin-bottom:2px}
.dc .ar{margin-right:9px}
.dc-sun .pr{color:var(--sun)} .dc-earth .pr{color:var(--earth)}
.dc .ar{color:var(--t3)}
.dc .vl{color:var(--t2);font-size:.92rem;white-space:nowrap}
.dc .vl b{color:var(--t1);font-weight:500}
.dc .m{color:var(--t1)} .dc .pc{color:var(--t3)}
.dsum{margin:8px 0 0;font-size:.98rem;font-weight:500;line-height:1.35;color:var(--t1);
  letter-spacing:-.01em}

.nextsteps{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px 20px;margin-top:6px;
  padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}
/* Short laptop screens: the card has to fit a stage about 490 px tall. */
@media (max-height:860px){
  .rail{gap:8px;padding-top:12px;padding-bottom:10px}
  .decision{gap:7px} .dsum{margin-top:5px}
  .jumpblock{margin-top:2px;padding-top:10px}
  .nextsteps{margin-top:2px;padding-top:9px}
  .finding{margin-top:6px;line-height:1.5}
}
.nextsteps a{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--t2);text-decoration:none;padding:4px 0;border-bottom:1px solid transparent}
.nextsteps a:hover{color:var(--t1);border-bottom-color:var(--line-s)}
.nextsteps a:focus-visible{outline:2px solid var(--sun);outline-offset:3px}

/* Section bar: follows the reader down the page. */
.views{position:sticky;top:0;z-index:7;display:flex;justify-content:center;gap:2px;padding:6px 12px;
  background:rgba(0,0,0,.86);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08);white-space:nowrap;overflow-x:auto}
.views a{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--t2);border-radius:5px;padding:7px 13px;text-decoration:none;line-height:1.2}
.views a:hover{color:var(--t1);background:rgba(255,255,255,.07)}
.views a[aria-current="page"]{color:#000;background:#fff;font-weight:500}
.views a:focus-visible{outline:2px solid var(--sun);outline-offset:2px}

/* ---- sections below the map: each with room ---- */
.sec{border-top:1px solid rgba(255,255,255,.08);padding:clamp(44px,8vh,92px) 0;scroll-margin-top:40px}
#explore{scroll-margin-top:140px}
.sec-inner{max-width:1200px;margin-inline:auto;padding-inline:26px}
.sec-inner.narrow{max-width:820px}
.sec-title{font-size:clamp(1.5rem,2.3vw,2.2rem);font-weight:600;letter-spacing:-.03em;
  line-height:1.1;margin:0 0 12px}
.sec-lede{color:var(--t2);max-width:62ch;margin:0 0 26px}
.sec-note{margin:22px 0 0;font-size:.8rem;color:var(--t3)}
.sec a{color:var(--t2);text-decoration-color:var(--line-s);text-underline-offset:3px}
.sec a:hover{color:var(--t1)}
.ctl-hint{flex-basis:100%;font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;
  text-transform:uppercase;color:#64646c;text-shadow:0 0 4px #000}

/* Compare view */
.cmp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 44px}
.cmp-hint{margin:8px 0 0;font-size:.74rem;color:var(--t3)}
.cmp-block{margin-top:34px}
.sec h3{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--t3);font-weight:400;margin:0 0 10px;padding-top:12px;
  border-top:1px solid rgba(255,255,255,.1)}
.cmp-block .finding{max-width:70ch;font-size:.9rem;margin:0 0 8px}
.cmp-block .curvebtn{margin-top:6px}
.wintable{border-collapse:collapse;width:100%;font-family:var(--mono);font-size:.8rem;color:var(--t2)}
.wintable th{font-weight:400;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--t3);text-align:left;padding:0 18px 8px 0;border-bottom:1px solid var(--line)}
.wintable td{padding:8px 18px 8px 0;border-bottom:1px solid rgba(255,255,255,.06);white-space:nowrap}
.wintable .num{text-align:right;padding-right:0}
.wintable td:first-child{color:var(--t1)}
.wintable .w-sun td:nth-child(2){color:var(--sun)} .wintable .w-earth td:nth-child(2){color:var(--earth)}
.tablewrap{overflow-x:auto}
.cmp-links{margin:34px 0 0;display:flex;gap:26px;flex-wrap:wrap;align-items:baseline}
.cmp-links a{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--t2);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.cmp-links a:hover{color:var(--t1)}

/* Key moments view */
.momentlist{list-style:none;margin:0;padding:0}
.mi{display:grid;grid-template-columns:11.5em 1fr auto;gap:16px;align-items:center;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.mi time{font-family:var(--mono);font-size:.8rem;color:var(--t2)}
.mi .mn{font-size:.95rem;color:var(--t1)}
.mi-sun .mn::before,.mi-earth .mn::before,.mi-contrast .mn::before{content:"";display:inline-block;
  width:8px;height:8px;border-radius:50%;margin-right:10px;vertical-align:.05em;background:var(--c)}
.mi-sun{--c:var(--sun)} .mi-earth{--c:var(--earth)}
.mi-contrast{--c:#fff} .mi-contrast .mn{font-weight:600}
.mi-contrast .mn::before{border-radius:1px;transform:rotate(45deg)}
.mi .curvebtn{padding:6px 11px;font-size:.62rem}
@media (max-width:640px){
  .cmp-grid{grid-template-columns:1fr}
  .mi{grid-template-columns:1fr auto} .mi time{grid-column:1/-1}
  .views button,.views a{padding:7px 8px;letter-spacing:.06em}
}

.group{margin:0}
.group h2,.group h3{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--t3);margin:0 0 7px;font-weight:400}
.rank{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:2.1em 1fr auto;gap:12px;align-items:baseline;
  padding:5px 0;border:0;border-bottom:1px solid rgba(255,255,255,.055);background:none;
  color:var(--t3);font:inherit;font-size:1.02rem;text-align:left;cursor:pointer;width:100%;
  letter-spacing:-.01em}
.row:last-child{border-bottom:0}
.row:hover{color:var(--t2)}
.row:focus-visible{outline:2px solid var(--sun);outline-offset:2px;border-radius:3px}
.row .n{font-family:var(--mono);font-size:.72rem;color:#5e5e66}
.row .v{font-family:var(--mono);font-size:1.02rem;color:var(--t3)}
/* Window count, shown only where a series in view is actually split. */
.row .wc{font-style:normal;font-size:.7rem;color:#5e5e66;letter-spacing:.04em}
.row.on{color:var(--t1);font-weight:500}
.row.on .v{color:var(--t1)}
.row.on .n{color:var(--accent)}
.row.a{--accent:var(--sun)} .row.b{--accent:var(--t2)}
.row .slot{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:var(--accent);
  margin-left:9px;vertical-align:.15em}

.hr{height:1px;background:linear-gradient(to right,rgba(255,255,255,.16),transparent)}

.jumpblock{display:flex;flex-direction:column;margin-top:6px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.1)}
.jump{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--t1);background:none;border:0;
  padding:0;cursor:pointer;text-align:left}
.jump:disabled{color:var(--t3);cursor:not-allowed}
.jump:focus-visible{outline:2px solid var(--sun);outline-offset:3px}
.jump .arrow{color:var(--sun)}
.jump:disabled .arrow{display:none}
.jump time{color:var(--t3);letter-spacing:.09em}

.finding{font-size:.82rem;color:var(--t3);line-height:1.65;margin:10px 0 0;max-width:32ch}
.finding.lead{color:var(--t2)}
.finding:empty{display:none}
/* The one place overflow may land. Everything above is flex:none, so the
   headline, both rankings and the jump stay visible for any string length. */
.findingwrap{flex:1 1 auto;min-height:0;overflow-y:auto;
  mask-image:linear-gradient(to bottom,#000 calc(100% - 18px),transparent)}

/* ---- dock ---- */
.dock{flex:none;padding:10px 26px 12px;position:relative;z-index:4;
  background:linear-gradient(to bottom,rgba(0,0,0,.55),#000 60%)}
.dockgrid{display:grid;grid-template-columns:minmax(300px,.85fr) 1.7fr;gap:30px;align-items:center}
@media (max-width:900px){.dockgrid{grid-template-columns:1fr}}

}

.clockline{display:flex;align-items:baseline;gap:18px;margin:6px 0 22px;min-width:0;flex-wrap:wrap}
.clock{font-family:var(--mono);font-size:1.5rem;letter-spacing:.04em;white-space:nowrap}
.timeline{margin-top:36px}
.moment-name{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:var(--sun);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* Local horizon view: one sky per selected site, A beside B, drawn to the
   same scale so equal heights are equal angles across the two. */
.states{display:grid;grid-template-columns:1fr 1fr;gap:18px 44px}
.sky{min-width:0}
.sky.a{--accent:var(--sun)} .sky.b{--accent:var(--t2)}
.sky-head{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;color:var(--t1);
  margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sky-head i{font-style:normal;color:var(--accent);margin-right:8px}
.sky-head span{color:var(--t3);letter-spacing:.04em}
.sky-svg{display:block;margin-bottom:2px}
.sky-svg .ground{fill:rgba(255,255,255,.055)}
.sky-svg .hz{stroke:rgba(255,255,255,.6);stroke-width:1}
.sky-svg .grid{stroke:rgba(255,255,255,.14);stroke-dasharray:2 3}
.sky-svg .tk{font:8.5px var(--mono);fill:#74747d}
.sky-svg .tk.z{fill:var(--t2)}
.sky-svg .trail{fill:none;stroke-width:1;opacity:.3}
.sky-svg .t-sun{stroke:var(--sun)} .sky-svg .t-earth{stroke:var(--earth)}
.sky-svg .mk{stroke-width:1.5}
.sky-svg .mk-sun{fill:var(--sun);stroke:var(--sun)}
.sky-svg .mk-earth{fill:var(--earth);stroke:var(--earth)}
.sky-svg .mk.below{fill:#08080a}
.sky-svg .lb{font:500 13px var(--mono);paint-order:stroke;stroke:#000;
  stroke-width:3px;stroke-linejoin:round}
.sky-svg .lb-sun{fill:#f0c477} .sky-svg .lb-earth{fill:#a6cdf2}
.sky-svg .lb.below{fill-opacity:.62}
.st{padding:6px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:.8rem;line-height:1.4}
.st:last-child{border-bottom:0}
.st b{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;color:var(--c);font-weight:400}
.st.s{--c:var(--sun)} .st.e{--c:var(--earth)}
.st .vd{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;color:var(--t2);margin-left:8px}
.st.off .vd{color:var(--t3)}
.st .rm{font-size:.8rem;color:#8a8a93;margin-left:11px}

.lanes{display:grid;gap:9px}
.lane{display:grid;grid-template-columns:7.4em 1fr;gap:14px;align-items:center}
.lane .nm{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;color:var(--t3);
  text-align:right;text-transform:uppercase}
.track{position:relative;height:16px;background:rgba(255,255,255,.045);border-radius:7px}
.win{position:absolute;top:1px;bottom:1px;border-radius:6px;box-shadow:0 0 16px -3px currentColor}
/* Waypoints: a rise or a set is a tick through its lane at the crossing;
   the key contrast is a diamond on its own row. Each is a button that puts
   the cursor there. */
.wp{position:absolute;top:-4px;bottom:-4px;width:14px;margin-left:-7px;padding:0;border:0;
  background:none;cursor:pointer;z-index:1}
.wp::before{content:"";position:absolute;left:6px;top:0;bottom:0;width:2px;border-radius:1px;
  background:#fff;opacity:.75}
.wp:hover::before{opacity:1;box-shadow:0 0 8px #fff}
.wp:focus-visible{outline:2px solid var(--sun);outline-offset:1px;border-radius:2px}
.lane.flagrow .track.bare{background:none;height:14px}
.wp.flag::before{left:3px;top:50%;bottom:auto;width:8px;height:8px;margin-top:-4px;
  border-radius:1px;transform:rotate(45deg);background:var(--sun);opacity:1}
.flag-none{position:absolute;left:0;top:-2px;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.08em;color:#64646c;text-transform:uppercase;white-space:nowrap}
.stepper{display:inline-flex;align-items:center;gap:6px}
.stepper .curvebtn{padding:9px 10px}
.stepper .curvebtn:disabled{opacity:.35;cursor:not-allowed}
.stepper-label{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--t3)}
.pin-label .mo{display:block;margin-top:2px;font-size:.64rem;letter-spacing:.06em;color:var(--sun)}
.pin-label.hot .mo{color:#000}
.cur{position:absolute;top:-5px;bottom:-5px;width:1px;background:#fff;
  box-shadow:0 0 10px rgba(255,255,255,.8)}
input[type=range]{width:100%;accent-color:#fff;height:22px;margin:4px 0 0}
input[type=range]:focus-visible{outline:2px solid var(--sun);outline-offset:4px}
.ends{display:flex;justify-content:space-between;align-items:center;gap:14px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:#64646c;
  text-transform:uppercase}
.curvebtn{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--t2);background:none;border:1px solid var(--line);border-radius:4px;
  padding:9px 15px;cursor:pointer;white-space:nowrap}
.curvebtn:hover{color:var(--t1);border-color:var(--line-s)}
.curvebtn:focus-visible{outline:2px solid var(--sun);outline-offset:3px}

/* ---- inspection drawers: curves, terrain ---- */
.endbtns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
/* A drawer covers the dock and its own trigger, so it carries its own close
   control; Escape alone left a pointer user with no visible way out. */
.drawer-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-bottom:18px}
.drawer-title{margin:0;font-size:1.1rem;font-weight:600;letter-spacing:-.01em}
.drawer-close{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--t2);background:rgba(255,255,255,.06);
  border:1px solid var(--line);border-radius:4px;padding:7px 13px;cursor:pointer}
.drawer-close:hover{color:var(--t1);border-color:var(--line-s)}
.drawer-close:focus-visible{outline:2px solid var(--sun);outline-offset:3px}

.terrain-label{margin:0 0 20px;font-size:.92rem;color:var(--t1);
  border-left:2px solid var(--sun);padding:4px 0 4px 14px}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;max-width:1060px}
.tile{margin:0}
.tile .frame{position:relative}
.tile img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px;
  border:1px solid var(--line);background:#111}
/* The capture is centred on the site; the ring marks that centre. */
.tile .at{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;
  border-radius:50%;border:2px solid var(--accent);box-shadow:0 0 0 1px rgba(0,0,0,.6)}
.tile figcaption{margin-top:9px;font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;
  color:var(--t2)}
.tile figcaption i{font-style:normal;color:var(--accent);margin-right:8px}
.tile figcaption b{color:var(--t1);font-weight:400}
.tile.a{--accent:var(--sun)} .tile.b{--accent:var(--t2)}
.terrain-note{margin:18px 0 0;font-size:.8rem;line-height:1.6;color:var(--t3);max-width:70ch}
.terrain-note.bad{color:#e07a6a}
@media (max-width:640px){.tiles{grid-template-columns:1fr}}

/* ---- curves drawer ---- */
.chart{margin-bottom:22px}
.chart-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:10px}
.chart-title{font-weight:600}
.chart-title em{font-style:normal;color:var(--t3);font-weight:400;font-size:.82rem;
  font-family:var(--mono);letter-spacing:.06em}
.legend{display:flex;gap:16px;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;
  color:var(--t3)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.swatch{width:16px;border-top-width:2px;border-top-style:solid;flex:none}
svg.plot{display:block;width:100%;height:auto;overflow:visible}
.axis-label{font-family:var(--mono);font-size:10px;fill:var(--t3)}
.grid-line{stroke:var(--line);stroke-width:1}
.zero-line{stroke:rgba(255,255,255,.55);stroke-width:1}
.zero-tag{font-family:var(--mono);font-size:10px;letter-spacing:.06em;fill:var(--t2)}
.cursor-line{stroke:#fff;stroke-width:1;opacity:.85}
.lane-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;fill:var(--t3)}
.method{color:var(--t3);font-size:.84rem;line-height:1.7;max-width:80ch}

.fail{margin:70px auto;max-width:60ch;border:1px solid var(--line-s);border-radius:10px;
  padding:24px;background:var(--panel)}
.fail h2{font-size:1.1rem;margin:0 0 10px}
.fail p{color:var(--t2)}
.fail code{font-family:var(--mono);font-size:.85rem;color:var(--t1)}

@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;
  transition-duration:.001ms!important}}

/* ---- narrow screens: the map, then the card, stacked ----
   Beside the map the card has a quarter of the width, which on a phone is a
   column a few words wide. Below about 900 px everything on the first screen
   is laid out in reading order instead: controls, the Moon, then the card. */
@media (max-width:900px){
  .stage{height:auto;min-height:0;overflow:visible;display:flex;flex-direction:column}
  .framing,.globe-ctl,.layer-ctl{position:static;margin:12px 16px 0;max-width:none}
  .framing{order:1} .globe-ctl{order:2} .layer-ctl{order:3}
  .moon-host{position:relative;inset:auto;order:4;height:min(96vw,62vh);margin-top:6px}
  .stamp{position:static;order:5;margin:8px 16px 0;max-width:none}
  .rail{position:static;order:6;width:auto;background:none;padding:22px 16px 26px;overflow:visible}
  .sec-inner{padding-inline:16px}
  .states{grid-template-columns:1fr;gap:26px}
  .lane{grid-template-columns:5.6em 1fr;gap:8px}
  .ends{flex-wrap:wrap;justify-content:center}
  header{padding-inline:16px}
  .headright{width:100%;justify-content:flex-start}
  .periodpick{flex:1 1 100%;min-width:0}
  .periodpick select{min-width:0;width:100%}
  .views{justify-content:flex-start}
}

/* Labels over the map sit on their own dark backing. With exposure raised, a
   close view puts bright sunlit ground behind them, and grey type on grey
   regolith is not legible however it is shadowed. */
.framing,.stamp,.layer-ctl{background:rgba(5,6,9,.66);border-radius:5px;padding:8px 10px;
  backdrop-filter:blur(3px)}
.framing{left:16px;top:12px} .globe-ctl{left:16px} .layer-ctl{left:16px} .stamp{left:16px;bottom:12px}
.ctl-hint{background:rgba(5,6,9,.66);border-radius:3px;padding:2px 6px;flex-basis:auto;color:#8a8a93}
@media (max-width:900px){
  .framing,.stamp,.layer-ctl{background:none;padding:0;backdrop-filter:none}
  .ctl-hint{background:none;padding:0}
}

/* ---- Inspect time: the two skies, and the Earth beside them ---- */
.inspect-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 48px;align-items:start}
.earthview{margin:0;width:260px;max-width:100%}
.earth-host{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.earth-host canvas{display:block;border-radius:50%;box-shadow:0 0 34px -6px rgba(127,179,230,.5)}
.earthview figcaption{margin-top:12px;font-size:.76rem;line-height:1.55;color:var(--t2)}
.earthview figcaption b{display:block;font-family:var(--mono);font-size:.68rem;font-weight:400;
  letter-spacing:.12em;text-transform:uppercase;color:var(--t1);margin-bottom:5px}
.earthview figcaption span{display:block}
.earthview figcaption em{font-style:normal;font-family:var(--mono);color:var(--earth);white-space:nowrap}
.earthview figcaption .lim{margin-top:6px;color:var(--t3)}
@media (max-width:1000px){
  .inspect-grid{grid-template-columns:1fr}
  .earthview{width:auto;display:grid;grid-template-columns:minmax(120px,200px) 1fr;gap:18px;align-items:center}
  .earthview figcaption{margin-top:0}
}

/* ---- views: one on screen at a time ---- */
.sec.view{border-top:0;min-height:calc(100vh - var(--chrome,100px));padding:clamp(28px,5vh,56px) 0 64px}
.sec-title:focus{outline:none}
.cmp-block.first{margin-top:6px}
.group h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--t3);font-weight:400;margin:0 0 7px}

/* Compare: the change from A to B */
.change{display:flex;flex-direction:column;gap:12px;margin:18px 0 6px;max-width:760px}
.chg{margin:0;display:grid;grid-template-columns:11em auto 1fr;gap:6px 20px;align-items:baseline;
  padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.08)}
.chg .cl{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase}
.chg-sun .cl{color:var(--sun)} .chg-earth .cl{color:var(--earth)}
.chg .cv{font-family:var(--mono);font-size:1.5rem;color:var(--t1);white-space:nowrap}
.chg .cv b{font-weight:500} .chg .cv .pc{font-size:.9rem;color:var(--t3)}
.chg .ct{font-family:var(--mono);font-size:.8rem;color:var(--t2);text-align:right;white-space:nowrap}
.chg-sum{margin:4px 0 0;font-size:1.05rem;font-weight:500;color:var(--t1)}
@media (max-width:700px){.chg{grid-template-columns:1fr} .chg .ct{text-align:left}}

/* Site card */
.poi{background:rgba(10,11,15,.9);border:1px solid var(--line-s);border-radius:7px;
  padding:14px 16px 12px;outline:none}
.poi:focus-visible{border-color:var(--sun)}
.poi-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.poi-name{margin:0;font-size:1.05rem;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.poi-close{font-size:1.2rem;line-height:1;color:var(--t2);background:none;border:0;cursor:pointer;
  padding:0 2px}
.poi-close:hover{color:var(--t1)}
.poi-close:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
.poi-coord{margin:4px 0 10px;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--t3)}
.poi-facts{margin:0 0 12px;display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:.8rem}
.poi-facts dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  align-self:baseline}
.poi-facts .pf-sun{color:var(--sun)} .poi-facts .pf-earth{color:var(--earth)}
.poi-facts dd{margin:0;color:var(--t2)} .poi-facts dd b{color:var(--t1);font-weight:500;font-family:var(--mono)}
.poi-actions{display:flex;gap:8px}
.poi-actions .curvebtn{padding:7px 12px;font-size:.64rem;flex:1}
.poi-actions .curvebtn:disabled{opacity:.45;cursor:default}
.poi-links{margin:10px 0 0;display:flex;gap:18px;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase}
.poi-links a{color:var(--t2);text-decoration:none;border-bottom:1px solid var(--line)}
.poi-links a:hover{color:var(--t1)}
.paircard{display:flex;flex-direction:column;gap:clamp(9px,1.15vh,16px)}

/* ---- Sun + Earth overlap ---- */
.cmp-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 36px}
@media (max-width:1000px){.cmp-grid{grid-template-columns:1fr}}
.chg-both{margin-top:14px}
.chg-both .cl{color:var(--t1)}
.chg .cn{grid-column:1/-1;font-family:var(--mono);font-size:.78rem;color:var(--t2)}
.chg-def{margin:0;font-size:.8rem;color:var(--t3);max-width:62ch}
.wintable .w-both td{color:var(--t1);border-bottom-color:rgba(255,255,255,.14)}
.wintable .w-both td:nth-child(2){color:var(--t1)}
.poi-facts .pf-both{color:var(--t1)}

/* ================= site-first pass ================= */

/* Selected sites: the tray beside the map. */
.tray{display:flex;flex-direction:column;gap:10px}
.tray-title{margin:0;font-family:var(--mono);font-size:.7rem;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;color:var(--t3);display:flex;justify-content:space-between}
.tray-title span{color:var(--t2);letter-spacing:.06em}
.tray-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.tray-item{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:5px;
  background:rgba(255,255,255,.04);padding:2px 4px 2px 0}
.tray-item::before{content:"";width:3px;align-self:stretch;border-radius:5px 0 0 5px;background:var(--tone)}
.tray-item.s0{--tone:var(--t1)} .tray-item.s1{--tone:var(--t2)} .tray-item.s2{--tone:var(--t3)}
.tray-site{flex:1;min-width:0;text-align:left;background:none;border:0;color:var(--t2);font:inherit;
  font-size:.9rem;padding:7px 4px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tray-site b{color:var(--t1);font-weight:600;margin-right:4px}
.tray-site:hover{color:var(--t1)}
.tray-rm{background:none;border:0;color:var(--t3);font-size:1.1rem;line-height:1;padding:4px 8px;cursor:pointer}
.tray-rm:hover{color:var(--t1)} .tray-rm:disabled{opacity:.3;cursor:default}
.tray-site:focus-visible,.tray-rm:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
/* A picture of the place: terrain context with the site at its centre. */
.tfig{margin:0;position:relative}
.tfig img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:5px;
  border:1px solid var(--line);background:#111}
.tfig .at{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;
  border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.6)}
.tfig .km{position:absolute;right:8px;bottom:6px;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.08em;color:#fff;text-shadow:0 0 3px #000,0 0 6px #000}
.poi-img:empty{display:none}
.poi-img{margin:-14px -16px 10px}
.poi-img .tfig img{border-radius:6px 6px 0 0;border:0;aspect-ratio:16/8}
.poi-cap{display:block;font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t3);padding:5px 16px 0}

/* Mission priority */
.priority{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:14px 0 10px}
.priority button{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t2);background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:4px;
  padding:7px 11px;cursor:pointer}
.priority button:hover{color:var(--t1);border-color:var(--line-s)}
/* One priority, set in two places: the pressed state looks the same in both,
   and takes the colour of the body it ranks by. */
button[data-priority][aria-pressed="true"]{color:#000;background:#fff;border-color:#fff;font-weight:500}
button[data-priority="sun"][aria-pressed="true"]{background:var(--sun);border-color:var(--sun)}
button[data-priority="earth"][aria-pressed="true"]{background:var(--earth);border-color:var(--earth)}
button[data-priority="none"][aria-pressed="true"]{color:var(--t1);background:rgba(255,255,255,.16);border-color:var(--line-s)}
.priority button:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
.bestmatch{margin:0 0 18px;min-height:1.6em;font-size:1rem;color:var(--t2);display:flex;
  flex-wrap:wrap;align-items:center;gap:6px 10px}
.bestmatch b{color:var(--t1);font-weight:600;font-size:1.15rem}
.bestmatch .bm-l{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--t3)}
.bestmatch .curvebtn{padding:5px 10px;font-size:.62rem}

/* Compare: one card per selected site. The card is the unit; a stated
   priority orders them, brings the one in first place forward and lets the
   others step back. Depth and motion carry that, not more text. */
.cmp-notes p{margin:0 0 8px;font-size:.84rem;color:var(--t2);border-left:2px solid var(--line-s);padding-left:12px}
.cards{--pc:#fff;display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:34px;
  margin-top:30px;align-items:start}
.cards[data-pri="sun"]{--pc:var(--sun)} .cards[data-pri="earth"]{--pc:var(--earth)}
.cards[data-n="1"]{grid-template-columns:minmax(0,600px)}
.cards[data-n="3"]{gap:26px}
.scard{position:relative;min-width:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:linear-gradient(180deg,#17181c 0%,#0d0e11 100%);
  box-shadow:0 14px 34px -22px #000;transform-origin:50% 40%}
.scard[data-state="lead"]{scale:1.04;z-index:2;border-color:var(--pc);
  box-shadow:0 34px 80px -26px #000,0 0 0 1px rgba(255,255,255,.1),0 0 60px -30px var(--pc)}
.scard[data-state="recede"]{scale:.97;opacity:.72;transition:opacity .2s}
.scard[data-state="recede"]:hover,.scard[data-state="recede"]:focus-within{opacity:1}
.sc-top{position:relative;background:#0a0a0c}
.sc-top .tfig img{aspect-ratio:2/1;max-height:34vh;border:0;border-radius:0}
.cards[data-n="3"] .sc-top .tfig img{aspect-ratio:4/3}
.sc-cap{position:absolute;left:10px;bottom:7px;font-family:var(--mono);font-size:.54rem;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;text-shadow:0 0 3px #000,0 0 6px #000;max-width:62%}
.sc-rank{display:flex;align-items:baseline;gap:9px;padding:9px 16px 0;font-family:var(--mono);
  font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}
.sc-top .tfig + .sc-cap + .sc-rank{position:absolute;left:10px;top:10px;padding:5px 11px 5px 9px;
  background:rgba(6,7,10,.82);border:1px solid var(--line);border-radius:6px;color:var(--t2)}
.sc-rank b{font-size:1.5rem;font-weight:500;line-height:1;color:var(--t1)}
.scard[data-state="lead"] .sc-rank b{color:var(--pc)}
.sc-body{padding:16px 20px 16px}
.sc-body h3{margin:0;font-family:var(--sans);font-size:1.35rem;font-weight:600;letter-spacing:-.015em;
  text-transform:none;color:var(--t1);border:0;padding:0}
.sc-coord{margin:3px 0 0;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--t3)}
.sc-metrics{margin:16px -8px 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.sm{padding:9px 8px 10px;border-radius:7px;border-top:2px solid transparent;min-width:0}
.sm dt{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;line-height:1.35;
  min-height:2.7em;color:var(--t3)}
.sm-sun dt{color:var(--sun)} .sm-earth dt{color:var(--earth)} .sm-both dt{color:var(--t1)}
.sm dd{margin:2px 0 0;font-family:var(--mono);color:var(--t2);white-space:nowrap}
.sm dd b{font-size:2.1rem;font-weight:400;letter-spacing:-.03em;line-height:1.05;color:var(--t1)}
.cards[data-n="3"] .sm dd b{font-size:1.7rem}
.sm dd small{font-size:.8rem;color:var(--t3)}
.sm .hi{display:block;margin-top:3px;font-style:normal;font-family:var(--mono);font-size:.52rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--t2);white-space:normal}
.sm .hi::before{content:"● ";color:var(--sun)}
.sm-earth .hi::before{color:var(--earth)} .sm-both .hi::before{color:#fff}
/* With a priority stated, its metric is the one the eye lands on. */
.cards:not([data-pri="none"]) .sm:not(.pri) dd b{color:var(--t2);font-size:1.5rem}
.cards[data-n="3"]:not([data-pri="none"]) .sm:not(.pri) dd b{font-size:1.3rem}
.sm.pri{background:rgba(255,255,255,.06);border-top-color:var(--pc)}
.sm.pri dd b{font-weight:500}
.scard[data-state="lead"] .sm.pri dd b{color:var(--pc)}
.sc-note{margin:8px 0 0;font-size:.74rem;color:var(--t3)}
.sc-block{margin-top:14px;padding-top:11px;border-top:1px solid rgba(255,255,255,.08);font-size:.86rem;
  line-height:1.45;color:var(--t2)}
.sc-block h4{margin:0 0 5px;font-family:var(--mono);font-size:.6rem;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;color:var(--t3)}
.sc-block ul{margin:0;padding:0;list-style:none}
.sc-block li{padding:2px 0 2px 16px;position:relative}
.sc-block.adv li::before{content:"+";position:absolute;left:0;color:var(--t1);font-family:var(--mono)}
.sc-block.risk li::before{content:"–";position:absolute;left:0;color:#e07a6a;font-family:var(--mono)}
.sc-block .none{margin:0;color:var(--t3)}
.sc-more{margin-top:14px;border-top:1px solid rgba(255,255,255,.08);padding-top:6px}
.sc-more summary{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--t2);cursor:pointer;padding:6px 0}
.sc-more summary:hover{color:var(--t1)}
.sc-more summary:focus-visible{outline:2px solid var(--sun);outline-offset:3px}
.sc-more dl{margin:6px 0 0;display:grid;grid-template-columns:1fr;gap:1px 0;font-size:.8rem}
.sc-more dt{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);
  margin-top:7px}
.sc-more dd{margin:0;color:var(--t2)}
.sc-links{margin:12px 0 2px;display:flex;gap:18px;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase}
.sc-links a{color:var(--t2);text-decoration:none;border-bottom:1px solid var(--line)}
.sc-links a:hover{color:var(--t1)}
.limits{margin:30px 0 0;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;color:#6c6c75}
@media (max-width:900px){
  .cards,.cards[data-n]{grid-template-columns:1fr;gap:22px}
  .scard[data-state="lead"],.scard[data-state="recede"]{scale:1}
  .sc-top .tfig img,.cards[data-n="3"] .sc-top .tfig img{aspect-ratio:16/8}
}

/* The priority metric, set forward wherever a selected site is shown. */
.tray-site{display:flex;align-items:baseline;gap:5px}
.tray-nm{min-width:0;overflow:hidden;text-overflow:ellipsis}
.tray-v{flex:none;margin-left:auto;padding-left:10px;font-family:var(--mono);font-size:.8rem;color:var(--t1)}
.tray-v.pv-sun{color:var(--sun)} .tray-v.pv-earth{color:var(--earth)}
.poi-facts dt.pri{font-weight:500}
.poi-facts dd.pri b{font-size:1.05rem}
.poi-facts dt.pri::before{content:"▸ "}

/* Key contrast as figures */
.kc{margin-top:26px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1)}
.kc-title{margin:0 0 4px;font-family:var(--mono);font-size:.7rem;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;color:var(--t3);border:0;padding:0}
.kc-time{margin:0 0 8px;font-family:var(--mono);font-size:1rem;color:var(--t1)}
.kc-none{margin:0;color:var(--t2);font-size:.9rem}
.kc-grid{display:grid;grid-template-columns:auto auto auto;justify-content:start;gap:4px 22px;
  font-family:var(--mono);font-size:.9rem;margin-bottom:12px}
.kc-grid b{font-weight:500;color:var(--t1)}
.kc-grid i{font-style:normal;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;margin-right:4px}
.kc-sun{color:var(--sun)} .kc-earth{color:var(--earth)} .kc-grid .down{opacity:.6}

/* Local skies: one per selected site. */
.states[data-n="1"]{grid-template-columns:minmax(0,640px)}
.states[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 28px}
.sky.s0{--accent:var(--t1)} .sky.s1{--accent:var(--t2)} .sky.s2{--accent:var(--t3)}
@media (max-width:900px){.states[data-n]{grid-template-columns:1fr}}

/* Key moments timeline */
.timeline.first{margin-top:8px}
.lanes.big{gap:14px}
.lanes.big .track{height:22px}
.lanes.big .lane{grid-template-columns:9em 1fr}
.lanes.big .nm{font-size:.72rem}
.lanes.big .wp{top:-6px;bottom:-6px;width:18px;margin-left:-9px}
.lanes.big .wp::before{left:8px}
.lanes.big .wp.flag::before{left:4px;width:10px;height:10px;margin-top:-5px}
.mo-hint{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#6c6c75}
.mo-details{margin-top:30px}
.mo-details summary{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--t2);cursor:pointer;padding:6px 0}
.mo-details summary:focus-visible{outline:2px solid var(--sun);outline-offset:3px}

/* Geometry: the scene and the local horizon, side by side, on one clock. */
#geometry .sec-inner{max-width:1500px}
.geo-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 28px;margin-bottom:14px}
.geo-head .sec-title{margin-bottom:0}
.geo-head .clockline{margin:0}
.scene-note{position:absolute;z-index:1;left:12px;bottom:9px;right:12px;pointer-events:none;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);
  text-shadow:0 0 4px #000,0 0 8px #000}
.geo-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:26px 40px;align-items:start}
.geo-grid[data-scene="on"]{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.geo-grid[data-scene="on"] .states,.geo-grid[data-scene="on"] .states[data-n]{grid-template-columns:minmax(0,1fr);gap:18px}
.geo-grid[data-scene="on"] .earthview{width:auto;margin-top:22px;display:grid;
  grid-template-columns:minmax(96px,132px) 1fr;gap:16px;align-items:center}
.geo-grid[data-scene="on"] .earthview figcaption{margin-top:0}
.hz-hint{margin:0 0 12px;display:flex;flex-wrap:wrap;gap:3px 16px;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--t3)}
.hz-hint b{font-weight:400;color:var(--t1);flex-basis:100%}
@media (max-width:1000px){.geo-grid[data-scene="on"]{grid-template-columns:minmax(0,1fr)}}
/* The clock stays within reach of the scene: the timeline holds to the
   bottom of the window while the view above it scrolls. */
#geometry .timeline{position:sticky;bottom:0;z-index:4;margin:26px -26px 0;padding:12px 26px 12px;
  background:linear-gradient(to bottom,rgba(0,0,0,.82),#000 30%);border-top:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(6px)}
@media (max-height:640px),(max-width:900px){#geometry .timeline{position:static;margin-inline:0;padding-inline:0}}
.tl-now{margin:8px 0 0;display:flex;align-items:baseline;gap:10px;font-family:var(--mono)}
.tl-now span{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t3)}
.tl-now b{font-size:.92rem;font-weight:400;color:var(--t1);letter-spacing:.04em}
.curvebtn.play{min-width:6.2em;color:#000;background:#fff;border-color:#fff}
.curvebtn.play[aria-pressed="true"]{color:var(--t1);background:rgba(255,255,255,.14);border-color:var(--line-s)}
.scene3d{margin:0}
.scene-host{width:100%;height:clamp(300px,calc(100vh - var(--chrome,100px) - 23.5rem),660px);border:1px solid var(--line);
  border-radius:6px;background:radial-gradient(ellipse at 50% 50%,#0c0d12 0%,#000 75%);cursor:grab;
  touch-action:none;position:relative;overflow:hidden}
.scene-host:focus-visible{outline:2px solid var(--sun);outline-offset:3px}
.scene-host canvas{display:block;width:100%;height:100%}
.scene-focus{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.scene-focus button{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--t2);
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:4px;padding:6px 11px;cursor:pointer}
.scene-focus button[aria-pressed="true"]{color:#000;background:#fff;border-color:#fff}
.scene-focus button:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
.scene3d figcaption{margin-top:10px;font-size:.84rem;color:var(--t2)}
.scene3d figcaption span{display:block}
.scene3d figcaption .lim{margin-top:4px;color:var(--t3);font-size:.76rem}

.row.static{cursor:default}
.row.static:hover{color:var(--t3)} .row.static.on:hover{color:var(--t1)}
.poi-actions .curvebtn{flex:1}
.sec-lede{margin:0 0 18px}

/* Context places: a different kind of thing from an analysis site. */
.pin-label.ctx{font-size:.6rem;letter-spacing:.06em;color:var(--t3);background:rgba(6,7,10,.6);
  border-color:rgba(255,255,255,.1);padding:2px 6px}
.pin-label.ctx.hot{color:#000;background:#fff;border-color:#fff}
.poi-facts .pf-ctx{color:var(--t3)}

/* The rail holds a site card and up to three selected sites. Where that is
   taller than the stage, it scrolls rather than hiding the way on to Compare. */
.rail{overflow-y:auto}
@media (max-height:860px){.poi-img .tfig img{aspect-ratio:16/5}}


/* ================= the list of places ================= */

/* Beside the map, under the selection: every place the Moon shows. It takes
   the room the rail has left and scrolls inside itself, so the selection and
   the way on to Compare stay where they are. */
.rail .cat{flex:1 1 0;min-height:340px;display:flex;flex-direction:column;gap:8px;
  padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}
.cat-search{font-family:var(--sans);font-size:.86rem;color:var(--t1);background:rgba(255,255,255,.05);
  border:1px solid var(--line);border-radius:5px;padding:7px 10px;width:100%}
.cat-search::placeholder{color:var(--t3)}
.cat-search:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
.cat-list{list-style:none;margin:0;padding:0 4px 0 0;flex:1 1 0;min-height:0;overflow-y:auto;
  display:flex;flex-direction:column;gap:2px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.cat-group{display:flex;justify-content:space-between;margin-top:8px;padding:0 2px 3px;font-family:var(--mono);
  font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t3)}
.cat-group:first-child{margin-top:0}
.cat-row{display:flex;align-items:stretch;gap:4px;border:1px solid transparent;border-radius:5px;
  transition:background .12s,border-color .12s}
.cat-row.hot{background:rgba(255,255,255,.09);border-color:var(--line)}
.cat-row.open{border-color:var(--line-s);background:rgba(255,255,255,.06)}
.cat-go{flex:1;min-width:0;display:flex;align-items:baseline;gap:7px;text-align:left;background:none;border:0;
  color:var(--t2);font:inherit;font-size:.84rem;padding:6px 6px;cursor:pointer;border-radius:5px}
.cat-go:hover{color:var(--t1)}
.cat-go::before{content:"";flex:none;align-self:center;width:8px;height:8px;border:1.5px solid rgba(210,214,222,.85);
  border-radius:50%}
.cat-site.on .cat-go::before{border-color:var(--sun);background:var(--sun)}
.cat-ref .cat-go::before{border-radius:0;transform:rotate(45deg);width:7px;height:7px}
.cat-imp .cat-go::before{border-radius:0;width:7px;height:7px}
.cat-go b{color:var(--t1);font-weight:600;font-family:var(--mono);font-size:.76rem;letter-spacing:.04em}
.cat-nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-rk{font-family:var(--mono);font-size:.72rem;color:var(--t3);min-width:1.6em}
.cat-v{margin-left:auto;font-family:var(--mono);font-size:.78rem;color:var(--t1);white-space:nowrap}
.cat-v.pv-sun{color:var(--sun)} .cat-v.pv-earth{color:var(--earth)}
.cat-k{margin-left:auto;font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--t3);white-space:nowrap}
.cat-add{flex:none;width:30px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:5px;
  color:var(--t2);font-size:.95rem;line-height:1;cursor:pointer}
.cat-add:hover{color:var(--t1);border-color:var(--line-s)}
.cat-add[aria-pressed="true"]{color:#000;background:var(--sun);border-color:var(--sun)}
.cat-add:disabled{opacity:.4;cursor:default}
.cat-go:focus-visible,.cat-add:focus-visible,.cat-io button:focus-visible{outline:2px solid var(--sun);outline-offset:1px}
.cat-none{padding:10px 4px;font-size:.84rem;color:var(--t3)}
.cat-io{display:flex;gap:6px;flex-wrap:wrap}
.cat-io button{flex:1 1 auto;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t2);background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:4px;
  padding:6px 8px;cursor:pointer;white-space:nowrap}
.cat-io button:hover{color:var(--t1);border-color:var(--line-s)}
.io-msg{margin:0;font-size:.72rem;line-height:1.45;color:var(--t2)}
.io-msg:empty{display:none}
/* A place from a file is drawn apart from the ones this product cites. */
.pin-label.ctx.imp{border-style:dashed;border-color:rgba(255,255,255,.35)}
@media (max-height:760px){.rail .cat{min-height:280px}}
@media (max-width:900px){
  .rail .cat{flex:none;min-height:0}
  .cat-list{max-height:52vh;flex:none}
}
@media (max-width:900px){.stepper{flex-wrap:wrap;justify-content:center}}

/* ================= map-first Explore =================
   The Moon is the product. What stays on it is small and sits at its edges:
   search top left, the objective and what the picture is bottom left, the
   comparison tray bottom centre, the camera bottom right. The list of
   places, a place's card and the menus are there while they are in use.
   These rules are scoped to #explore and come last, so they stand in for
   the earlier rail-and-stack layout at every width. */
#explore.stage{display:block;height:calc(100vh - var(--chrome,100px));height:calc(100svh - var(--chrome,100px));
  min-height:460px;overflow:hidden}
#explore .moon-host{position:absolute;inset:0;height:auto;margin:0}
.glass{background:rgba(9,10,14,.78);border:1px solid var(--line);border-radius:9px;backdrop-filter:blur(10px)}

/* Search, and the list that opens under it */
.mapsearch{position:absolute;z-index:6;left:16px;top:14px;width:min(390px,calc(100% - 32px));
  display:flex;flex-direction:column;gap:6px}
.ms-bar{display:flex;align-items:stretch;background:rgba(9,10,14,.8);border:1px solid var(--line-s);
  border-radius:22px;backdrop-filter:blur(10px);box-shadow:0 8px 28px -14px #000;overflow:hidden}
.ms-bar:focus-within{border-color:rgba(255,255,255,.6)}
#explore .cat-search{flex:1;min-width:0;width:auto;background:none;border:0;border-radius:0;
  padding:10px 6px 10px 18px;font-size:.9rem;color:var(--t1);outline:none}
#explore .cat-search::-webkit-search-cancel-button{filter:invert(1);opacity:.6}
.ms-more{flex:none;width:46px;background:none;border:0;border-left:1px solid var(--line);color:var(--t2);
  font-size:.9rem;letter-spacing:.1em;cursor:pointer}
.ms-more:hover,.ms-more[aria-expanded="true"]{color:var(--t1);background:rgba(255,255,255,.08)}
.ms-more:focus-visible{outline:2px solid var(--sun);outline-offset:-3px}
.cat-panel,.io-menu,.obj-menu,.mwin-panel{background:rgba(9,10,14,.93);border:1px solid var(--line-s);
  border-radius:10px;backdrop-filter:blur(12px);box-shadow:0 18px 44px -18px #000}
.cat-panel{padding:10px 8px 8px;max-height:min(58vh,480px);display:flex;flex-direction:column}
#explore .cat-list{flex:1 1 auto;max-height:none;padding:0 2px}
.pop-h{margin:0 0 6px;padding:0 6px;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--t3)}
.io-menu{align-self:flex-end;min-width:220px;padding:10px 6px 6px;display:flex;flex-direction:column}
.io-menu button,#explore .obj-menu button,.mwin-list button{text-align:left;background:none;border:0;border-radius:6px;
  color:var(--t2);font:inherit;font-size:.86rem;text-transform:none;letter-spacing:0;padding:8px 10px;cursor:pointer}
.io-menu button:hover,.obj-menu button:hover,.mwin-list button:hover{color:var(--t1);background:rgba(255,255,255,.08)}
.io-menu button:focus-visible,.obj-menu button:focus-visible,.mwin-list button:focus-visible,
.obj-btn:focus-visible,.mwin-btn:focus-visible,.tray-go:focus-visible{outline:2px solid var(--sun);outline-offset:1px}
#explore .io-msg{padding:8px 12px;font-size:.76rem;background:rgba(9,10,14,.86);border:1px solid var(--line);
  border-radius:8px}

/* A place's card, on the right while a place is open */
#explore .poi{position:absolute;z-index:5;right:16px;top:14px;width:min(350px,calc(100% - 32px));
  max-height:calc(100% - 100px);overflow-y:auto;border-radius:10px;background:rgba(10,11,15,.92);
  backdrop-filter:blur(10px);box-shadow:0 22px 50px -22px #000}
.poi-facts.tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:2px -6px 8px}
.pm{padding:7px 6px 8px;border-top:2px solid transparent;border-radius:6px;min-width:0}
.poi-facts.tiles dt{font-size:.54rem;line-height:1.35;min-height:2.7em;color:var(--t3)}
.pm-sun dt{color:var(--sun)!important} .pm-earth dt{color:var(--earth)!important} .pm-both dt{color:var(--t1)!important}
.pm dd{font-family:var(--mono);white-space:nowrap}
.pm dd b{font-size:1.45rem!important;font-weight:400!important;letter-spacing:-.03em;color:var(--t1)}
.pm dd small{font-size:.72rem;color:var(--t3)}
.pm dd i{display:block;margin-top:2px;font-style:normal;font-size:.54rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--t2);white-space:normal}
.pm.pri{background:rgba(255,255,255,.07);border-top-color:#fff}
.pm-sun.pri{border-top-color:var(--sun)} .pm-earth.pri{border-top-color:var(--earth)}
.pm.pri dd b{font-weight:500!important}
.poi-limits,.map-limits{margin:0 0 10px;font-family:var(--mono);font-size:.52rem;letter-spacing:.08em;
  line-height:1.6;text-transform:uppercase;color:#7d7d86}
#explore .poi-actions{flex-wrap:wrap}
#explore .poi-actions .curvebtn{flex:1 1 auto;text-align:center;text-decoration:none}
#explore .poi-actions #poi-toggle{flex-basis:100%;color:#000;background:#fff;border-color:#fff}
#explore .poi-actions #poi-toggle:disabled{color:var(--t2);background:none;border-color:var(--line)}

/* Bottom left: the objective, then what the picture is */
.mapfoot{position:absolute;z-index:4;left:16px;bottom:12px;max-width:min(430px,42%);display:flex;
  flex-direction:column;align-items:flex-start;gap:7px;pointer-events:none}
.mapfoot>*{pointer-events:auto}
#explore .layer-ctl{position:relative;left:auto;top:auto;max-width:none;padding:0;background:none;
  backdrop-filter:none;display:block}
#explore .obj-btn{display:flex;align-items:baseline;gap:9px;font:inherit;text-transform:none;letter-spacing:0;color:var(--t1);cursor:pointer;
  background:rgba(9,10,14,.8);border:1px solid var(--line-s);border-radius:20px;padding:8px 14px 8px 16px;
  backdrop-filter:blur(10px)}
.obj-btn span{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t3)}
.obj-btn b{font-size:.88rem;font-weight:500}
.obj-btn i{font-style:normal;font-size:.7rem;color:var(--t3)}
.layer-ctl[data-pri="sun"] .obj-btn b{color:var(--sun)} .layer-ctl[data-pri="earth"] .obj-btn b{color:var(--earth)}
.obj-menu{position:absolute;left:0;bottom:calc(100% + 6px);min-width:260px;padding:6px;display:flex;flex-direction:column}
#explore .obj-menu button[aria-pressed="true"]{color:var(--t1);background:rgba(255,255,255,.12);font-weight:500;
  border:0}
#explore .obj-menu button[data-priority="sun"][aria-pressed="true"]{color:var(--sun)}
#explore .obj-menu button[data-priority="earth"][aria-pressed="true"]{color:var(--earth)}
#explore .map-limits{margin:0;padding:3px 8px;background:rgba(5,6,9,.6);border-radius:4px}
#explore .stamp{position:static;margin:0;max-width:none;padding:3px 8px;font-size:.52rem;line-height:1.55;
  letter-spacing:.08em;color:#8a8a93;background:rgba(5,6,9,.6);border-radius:4px;backdrop-filter:none}

/* Bottom centre: the comparison tray */
#explore .tray{position:absolute;z-index:4;left:50%;bottom:14px;transform:translateX(-50%);
  flex-direction:row;align-items:center;gap:10px;max-width:calc(100% - 32px);padding:6px 8px 6px 16px;
  background:rgba(9,10,14,.82);border:1px solid var(--line-s);border-radius:24px;backdrop-filter:blur(10px);
  box-shadow:0 10px 30px -14px #000}
#explore .tray[data-n="0"]{padding:6px 16px;border-color:var(--line);background:rgba(9,10,14,.6)}
#explore .tray-title{display:block;font-size:.58rem;letter-spacing:.12em;white-space:nowrap;color:var(--t3)}
#explore .tray-title span{color:var(--t2)}
#explore .tray-list{flex-direction:row;gap:6px}
#explore .tray-list:empty{display:none}
#explore .tray-item{gap:0;padding:0;border-radius:16px;background:rgba(255,255,255,.08);border-color:var(--line-s)}
#explore .tray-item::before{display:none}
#explore .tray-item.new{animation:chip-in .5s cubic-bezier(.2,.9,.3,1.2)}
@keyframes chip-in{from{opacity:0;transform:translateY(-26px) scale(.7)}to{opacity:1;transform:none}}
#explore .tray-site{padding:5px 2px 5px 12px;font-size:.8rem;gap:7px}
#explore .tray-site b{margin:0;font-family:var(--mono);font-size:.76rem;letter-spacing:.04em}
#explore .tray-v{margin:0;padding:0;font-size:.72rem}
#explore .tray-rm{padding:4px 10px 4px 6px;font-size:1rem}
.tray-go{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  white-space:nowrap;color:#000;background:#fff;border-radius:16px;padding:7px 14px}
.tray-go:hover{background:var(--t2)}

/* Bottom right: the camera, and what the view is */
.mapnav{position:absolute;z-index:4;right:16px;bottom:12px;display:flex;flex-direction:column;align-items:flex-end;
  gap:7px;pointer-events:none}
.mapnav>*{pointer-events:auto}
#explore .framing{position:static;padding:4px 9px;text-align:right;font-size:.56rem;letter-spacing:.1em;
  background:rgba(5,6,9,.6);border-radius:4px;backdrop-filter:none}
#explore .framing b{display:inline;margin:0 8px 0 0}
#explore .framing .exp{margin-top:2px}
#explore .globe-ctl{position:static;gap:0;flex-wrap:nowrap;background:rgba(9,10,14,.8);border:1px solid var(--line-s);
  border-radius:20px;overflow:hidden;backdrop-filter:blur(10px)}
#explore .globe-ctl button{background:none;border:0;border-left:1px solid var(--line);border-radius:0;
  padding:8px 13px;font-size:.6rem}
#explore .globe-ctl button:first-child{border-left:0}
#explore .globe-ctl button[data-zoom]{font-size:.9rem;padding:5px 14px}
#explore .globe-ctl button:hover{background:rgba(255,255,255,.1)}

/* The mission window, in the header */
.mwin{position:relative}
.mwin-btn{display:flex;align-items:baseline;gap:10px;font:inherit;color:var(--t1);cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:18px;padding:6px 14px}
.mwin-btn:hover,.mwin-btn[aria-expanded="true"]{border-color:var(--line-s);background:rgba(255,255,255,.09)}
.mwin-k{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t3)}
.mwin-btn b{font-size:.88rem;font-weight:500;white-space:nowrap}
.mwin-name{font-size:.8rem;color:var(--t2);white-space:nowrap}
.mwin-btn i{font-style:normal;font-size:.7rem;color:var(--t3)}
.mwin-panel{position:absolute;z-index:30;right:0;top:calc(100% + 8px);min-width:300px;padding:12px 8px 8px}
.mwin-list{display:flex;flex-direction:column}
.mwin-list button{display:flex;justify-content:space-between;align-items:baseline;gap:18px}
.mwin-list button b{font-weight:500;color:var(--t1);white-space:nowrap}
.mwin-list button span{font-size:.78rem;color:var(--t3);white-space:nowrap}
.mwin-list button[aria-pressed="true"]{background:rgba(255,255,255,.12)}
.mwin-list button[aria-pressed="true"] b::before{content:"● ";color:var(--sun);font-size:.6em;vertical-align:.25em}
/* EXPERIMENTAL (experiment/mission-window): start, end, Apply. */
.mwin-tag{font-family:var(--mono);font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;color:var(--t2);
  border:1px solid var(--line-s);border-radius:9px;padding:1px 7px;align-self:center}
.mwin-panel{min-width:392px;padding:14px 12px 8px}
/* The open panel sits over the view tabs and the map search. */
header:has(.mwin-btn[aria-expanded="true"]){z-index:9}
/* The dates are the name of the window; the season is in the panel. */
.mwin-btn .mwin-name{display:none}
.mw-fields{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:10px;padding:0 2px}
.mw-fields label{display:flex;flex-direction:column;gap:5px;min-width:0}
.mw-fields label span{font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t3)}
.mw-fields input{width:100%;min-width:0;font-family:var(--mono);font-size:.95rem;letter-spacing:.03em;color:var(--t1);
  background:rgba(255,255,255,.05);border:1px solid var(--line-s);border-radius:6px;padding:8px 10px}
.mw-fields input:focus-visible{outline:2px solid var(--sun);outline-offset:1px}
.mw-fields i{font-style:normal;color:var(--t3);padding-bottom:9px}
/* The validated windows along the year, and the range in the fields on top
   of them: solid when it is one of them, dashed when it is not. */
.mw-strip{position:relative;height:38px;margin:14px 2px 0;border-bottom:1px solid var(--line)}
.mw-block{position:absolute;top:8px;height:8px;border-radius:2px;background:rgba(255,255,255,.3)}
.mw-block.is-loaded{background:#fff}
.mw-mark{position:absolute;top:2px;height:20px;border-radius:3px;pointer-events:none}
.mw-mark.is-valid{border:1px solid #fff}
.mw-mark.is-partial{border:1px dashed #fff;background:rgba(255,255,255,.14)}
.mw-status[data-kind="partial"] b::before{content:"◐ "}
.mw-head{margin:0 2px 10px;display:flex;align-items:baseline;gap:10px;font-size:.86rem}
.mw-head b{font-weight:500}
.mw-head span{font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--t3)}
.mw-mark.is-custom{border:1px dashed var(--sun);background:rgba(224,169,77,.12)}
.mw-tick{position:absolute;bottom:2px;transform:translateX(-50%);font-family:var(--mono);font-size:.5rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--t3);white-space:nowrap}
.mw-status{margin:10px 2px 0;min-height:2.9em;font-size:.8rem;line-height:1.45;color:var(--t2)}
.mw-status b{display:block;font-family:var(--mono);font-size:.6rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--t1)}
.mw-status[data-kind="validated"] b::before{content:"● ";color:#fff}
.mw-status[data-kind="custom"] b{color:var(--sun)}
.mw-status[data-kind="custom"] b::before{content:"◌ "}
.mw-actions{display:flex;flex-wrap:wrap;gap:8px;margin:10px 2px 14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.mw-apply{font:inherit;font-size:.82rem;font-weight:500;color:#000;background:#fff;border:1px solid #fff;border-radius:6px;
  padding:7px 16px;cursor:pointer}
.mw-apply:disabled{color:var(--t3);background:none;border-color:var(--line);cursor:not-allowed}
.mw-near{font:inherit;font-size:.78rem;color:var(--t1);background:none;border:1px solid var(--line-s);border-radius:6px;
  padding:7px 12px;cursor:pointer;text-align:left}
.mw-near:hover{background:rgba(255,255,255,.08)}
.mw-apply:focus-visible,.mw-near:focus-visible{outline:2px solid var(--sun);outline-offset:1px}

/* Nothing selected: the views about selected sites say so, and show nothing
   else. */
.needs-sites{display:none;padding:9vh 0 12vh;max-width:46ch}
.needs-sites h2{margin:0 0 10px;font-size:clamp(1.5rem,2.3vw,2.2rem);font-weight:600;letter-spacing:-.03em}
.needs-sites h2:focus{outline:none}
.needs-sites p{margin:0 0 22px;color:var(--t2)}
.ns-actions{display:flex;gap:10px;flex-wrap:wrap}
.ns-actions .curvebtn{text-decoration:none}
.ns-actions a.curvebtn{color:#000;background:#fff;border-color:#fff}
body[data-sel="0"] .sec:not(.free) .sec-inner>*{display:none!important}
body[data-sel="0"] .sec:not(.free) .sec-inner>.needs-sites{display:block!important}

#explore .layer-ctl,#explore .framing,#explore .globe-ctl,#explore .stamp{margin:0}
#explore .obj-btn{white-space:nowrap}
@media (max-width:900px){
  .mapsearch{left:10px;top:10px;width:calc(100% - 20px)}
  #explore .poi{left:8px;right:8px;top:auto;bottom:8px;width:auto;max-height:64%;z-index:7}
  /* A phone has no room for a row of four camera buttons beside the
     objective, so the camera stands up the right edge under the search, as it does
     on any phone map, and the tray sits above the objective. */
  .mapfoot{left:10px;right:10px;bottom:8px;max-width:none}
  .mapnav{right:10px;top:60px;bottom:auto;flex-direction:column-reverse}
  #explore .globe-ctl{flex-direction:column-reverse;border-radius:16px}
  #explore .globe-ctl button{border-left:0;border-top:1px solid var(--line);padding:9px 10px;font-size:.52rem}
  #explore .globe-ctl button:last-child{border-top:0}
  #explore .globe-ctl button[data-zoom]{padding:6px 10px}
  #explore .framing{max-width:150px}
  #explore .tray{left:10px;right:auto;bottom:126px;transform:none;max-width:calc(100% - 20px);flex-wrap:wrap;
    border-radius:16px;padding:6px 10px}
  #explore .tray-title{font-size:.52rem}
  #explore .stamp,#explore .map-limits{font-size:.46rem}
  .mwin{flex:1 1 100%}
  .mwin-btn{width:100%;flex-wrap:wrap;gap:4px 10px}
  .mwin-panel{left:0;right:0;min-width:0}
}

/* ================= mission brief (experimental) =================
   State what the mission needs, see what qualifies, look into why. One
   question at the top, one answer under it, one way on. Everything else is
   a step away. Few boxes: hierarchy is carried by size and space. */
.exp-tag{margin-left:10px;padding:3px 8px;border:1px solid var(--line-s);border-radius:10px;font-family:var(--mono);
  font-size:.56rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--t2);vertical-align:.5em}
#brief[data-off] .sec-inner>:not(.sec-title){display:none}
#brief .b-page{max-width:820px}
.b-form{margin:26px 0 12px}
.b-ask{display:block;margin:0 0 12px;font-size:clamp(1.4rem,2.2vw,2rem);font-weight:600;letter-spacing:-.02em;color:var(--t1)}
.b-ask-row{display:flex;gap:10px;flex-wrap:wrap}
.b-ask-row input{flex:1 1 380px;min-width:0;font:inherit;font-size:1.08rem;color:var(--t1);background:rgba(255,255,255,.06);
  border:1px solid var(--line-s);border-radius:10px;padding:14px 16px}
.b-ask-row input::placeholder{color:var(--t3)}
.b-ask-row input:focus-visible,.b-add select:focus-visible,.b-add input:focus-visible,#brief-objective:focus-visible{
  outline:2px solid var(--sun);outline-offset:2px}
.curvebtn.solid{color:#000;background:#fff;border-color:#fff}
.b-ask-row .curvebtn{padding:0 22px;border-radius:10px;font-size:.7rem}
.b-examples{display:flex;flex-wrap:wrap;gap:4px 18px;margin-bottom:8px}
.b-examples::before{content:"Try";font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t3);
  align-self:center}
.b-examples button{font:inherit;font-size:.84rem;color:var(--t2);background:none;border:0;border-bottom:1px solid var(--line);
  padding:3px 0;cursor:pointer;text-align:left}
.b-examples button:hover{color:var(--t1);border-bottom-color:var(--t1)}
.b-examples button:focus-visible,.bchip button:focus-visible,.b-link:focus-visible,.b-fold summary:focus-visible,
.br-more summary:focus-visible{outline:2px solid var(--sun);outline-offset:3px}
#brief h3{margin:0 0 8px;font-family:var(--mono);font-size:.62rem;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;color:var(--t3);border:0;padding:0}

/* What it was read as: a short list, no box. */
.b-read{margin-top:22px}
.b-terms{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-wrap:wrap;gap:6px 28px}
.bt{font-size:1.08rem;color:var(--t1);padding-left:16px;position:relative}
.bt::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--t2)}
.bt-sun::before{background:var(--sun)} .bt-earth::before{background:var(--earth)} .bt-both::before{background:#fff}
.bt-none{color:var(--t2);font-size:.95rem;padding-left:0} .bt-none::before{display:none}
.bn{margin:6px 0 0;font-size:.82rem;color:var(--t2);border-left:2px solid var(--line-s);padding-left:10px;max-width:70ch}
.bn.unread{border-left-color:#e07a6a}
.b-link{margin-top:10px;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--t2);
  background:none;border:0;border-bottom:1px solid var(--line);padding:2px 0;cursor:pointer}
.b-link:hover{color:var(--t1);border-bottom-color:var(--t1)}
.b-edit{margin-top:14px;padding:14px 16px;border-radius:10px;background:rgba(255,255,255,.04)}
.b-chips{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.bchip{display:flex;align-items:center;border:1px solid var(--line-s);border-radius:16px;background:rgba(255,255,255,.07);
  font-size:.88rem;color:var(--t1)}
.bchip span{padding:5px 4px 5px 13px}
.bchip button{background:none;border:0;color:var(--t3);font-size:1rem;padding:4px 11px 4px 6px;cursor:pointer}
.bchip button:hover{color:var(--t1)}
.bchip.bc-sun{border-color:var(--sun-b)} .bchip.bc-earth{border-color:var(--earth-b)}
.bchip.bc-obj{background:#fff;border-color:#fff;color:#000} .bchip.bc-obj button{color:#444}
.bchip-none{color:var(--t3);font-size:.88rem}
.b-add{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 4px;font-size:.84rem;color:var(--t2)}
.b-k{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--t3)}
.b-add select,.b-add input,#brief-objective{font:inherit;font-size:.84rem;color:var(--t1);background:rgba(255,255,255,.06);
  border:1px solid var(--line);border-radius:5px;padding:6px 8px}
.b-add input{width:5.2em}
.b-add .curvebtn{padding:7px 12px;font-size:.6rem}
.b-obj{display:flex;align-items:center;gap:8px;flex-basis:100%;margin-top:4px}

/* The answer. */
.b-result{margin-top:26px}
.b-head{margin:0;font-size:clamp(1.8rem,3.2vw,2.7rem);font-weight:600;letter-spacing:-.03em;line-height:1.12;color:var(--t1)}
.b-head.none{color:#f0a195}
.b-best{margin:10px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;color:var(--t2)}
.b-best span{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--t3)}
.b-best b{font-size:1.3rem;font-weight:600;color:var(--t1)}
.b-best i{font-style:normal;font-size:1rem}
.b-sub{margin:10px 0 0;color:var(--t2);font-size:.95rem}
/* A compact row of sites: picture, name, verdict, one figure. It scrolls
   sideways when there is not room, so it would sit in a drawer as it is. */
.b-cards{list-style:none;margin:22px 0 0;padding:4px 2px 8px;display:flex;gap:12px;overflow-x:auto;
  scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.bcard{flex:1 0 168px;max-width:240px;min-width:0;display:flex;scroll-snap-align:start;transition:opacity .2s}
.bcard.no{opacity:.62}
.bcard.no[data-hot],.bcard.no:focus-within{opacity:1}
.bcard-btn{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;font:inherit;color:var(--t2);cursor:pointer;
  background:#101115;border:1px solid var(--line);border-radius:10px;padding:0 0 11px;overflow:hidden;
  transition:border-color .18s,box-shadow .18s,transform .18s}
.bcard[data-hot] .bcard-btn{border-color:var(--line-s);transform:translateY(-2px)}
.bcard.best .bcard-btn{border-color:rgba(255,255,255,.75);box-shadow:0 0 0 1px rgba(255,255,255,.14),0 14px 34px -18px rgba(255,255,255,.35)}
.bcard-btn[aria-expanded="true"]{border-color:#fff}
.bcard-btn:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
.bcard-img{position:relative;display:block;aspect-ratio:2/1;background:#0a0a0d;overflow:hidden;margin-bottom:8px}
.bcard-img.none{background:repeating-linear-gradient(135deg,#101115 0 8px,#0b0c0f 8px 16px)}
.bcard-img img{display:block;width:100%;height:100%;object-fit:cover;transition:filter .2s,transform .3s}
.bcard[data-hot] .bcard-img img{filter:brightness(.32);transform:scale(1.04)}
.bcard-cap{position:absolute;left:8px;bottom:5px;font-family:var(--mono);font-size:.48rem;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;text-shadow:0 0 3px #000,0 0 6px #000;transition:opacity .15s}
.bcard[data-hot] .bcard-cap{opacity:0}
/* The other totals, over the picture, while the card is pointed at. */
.bcard-over{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);align-items:center;gap:2px;padding:0 8px;
  opacity:0;transform:translateY(6px);transition:opacity .18s,transform .18s;font-family:var(--mono)}
.bcard[data-hot] .bcard-over{opacity:1;transform:none}
.bcard-over span{display:flex;flex-direction:column;gap:2px;min-width:0}
.bcard-over i{font-style:normal;font-size:.48rem;letter-spacing:.1em;text-transform:uppercase;color:var(--t2)}
.bo-sun i{color:var(--sun)} .bo-earth i{color:var(--earth)}
.bcard-over b{font-size:.84rem;font-weight:500;color:#fff}
.bcard-name,.bcard-state,.bcard-fig{padding:0 11px}
.bcard-name{font-size:.92rem;font-weight:600;color:var(--t1);line-height:1.25}
.bcard-state{font-family:var(--mono);font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;color:var(--t2)}
.bcard.ok .bcard-state::before{content:"✓ ";color:#fff} .bcard.no .bcard-state::before{content:"✗ ";color:#e07a6a}
.bcard.no .bcard-state{color:#f0a195}
.bcard-fig{margin-top:3px;font-size:.84rem}
.bcard-fig b{font-family:var(--mono);font-weight:500;color:var(--t1)}
.bcard-fig em{display:block;font-style:normal;font-size:.74rem;color:var(--t3)}
/* The chosen site's detail: grows open, does not jump. */
.b-detail{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.b-detail[data-open="1"]{grid-template-rows:1fr}
.b-detail-in{overflow:hidden;min-height:0}
.b-detail[data-open="1"] .b-detail-in{padding:14px 2px 4px}
.b-detail h4{margin:0 0 2px;font-size:1.02rem;font-weight:600;color:var(--t1)}
.bd-state{margin:0 0 6px;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--t2)}
.bd-state.no{color:#f0a195}
.bd-note{margin:10px 0 0;font-size:.76rem;line-height:1.5;color:var(--t3);max-width:74ch}
.b-detail .bm{max-width:420px}
.br-more{margin-top:12px}
.br-more summary{font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);cursor:pointer}
.br-more summary:hover{color:var(--t1)}
.bs-why{margin:8px 0 0;padding:0;list-style:none;font-size:.82rem;color:var(--t2)}
.bs-why li{padding:1px 0 1px 14px;position:relative}
.bs-why li::before{content:"–";position:absolute;left:0;color:#e07a6a}
.bm{margin:8px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;font-family:var(--mono)}
.bm span{display:flex;flex-direction:column;min-width:0}
.bm i{font-style:normal;font-size:.5rem;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);min-height:2.6em}
.bm-sun i{color:var(--sun)} .bm-earth i{color:var(--earth)} .bm-both i{color:var(--t1)}
.bm b{font-size:.95rem;font-weight:400;color:var(--t1)}
.bm em{font-style:normal;font-size:.52rem;letter-spacing:.06em;text-transform:uppercase;color:var(--t2)}
.b-acts{margin:20px 0 0;display:flex;gap:10px;flex-wrap:wrap}
.b-acts .curvebtn{text-decoration:none;padding:12px 18px}
.b-acts .curvebtn.solid{font-size:.72rem}

/* Evidence, folded away. */
.b-fold{margin-top:0;border-top:1px solid var(--line)}
.b-result + .b-fold{margin-top:30px}
.b-fold:last-of-type{border-bottom:1px solid var(--line)}
.b-fold summary{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:15px 0;cursor:pointer;list-style:none}
.b-fold summary::-webkit-details-marker{display:none}
.b-fold summary span{font-size:1rem;color:var(--t1)}
.b-fold summary i{font-style:normal;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);white-space:nowrap}
.b-fold summary i::after{content:" +"} .b-fold[open] summary i::after{content:" −"}
.b-fold summary:hover i{color:var(--t1)}
.b-fold.b-quiet summary span{font-size:.86rem;color:var(--t3)}
.b-fold-body{padding:2px 0 22px}
.b-tradepick{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:14px;font-size:.86rem;color:var(--t2)}
.b-tradepick input{accent-color:#fff;margin-right:5px}
.b-trade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:20px 34px;align-items:start}
.b-front{margin:0 0 10px;font-size:.92rem;color:var(--t2)} .b-front b{color:var(--t1);font-weight:600}
.b-dom{margin:0 0 8px;font-size:.84rem;color:var(--t2);border-left:2px solid #e07a6a;padding-left:10px}
.b-plot{width:100%;height:auto;border-radius:8px;background:#0b0c10}
.b-plot .ax{stroke:rgba(255,255,255,.3);stroke-width:1}
.b-plot .al{font-family:var(--mono);font-size:9px;letter-spacing:.08em;fill:var(--t3)}
.b-plot .al-sun{fill:var(--sun)} .b-plot .al-earth{fill:var(--earth)} .b-plot .al-both{fill:#fff}
.b-plot .tk{font-family:var(--mono);font-size:9px;fill:var(--t3)}
.b-plot .pt.front{fill:#fff;stroke:#fff} .b-plot .pt.dom{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.5}
.b-plot .pl{font-family:var(--mono);font-size:10px;fill:var(--t3)} .b-plot .pl.front{fill:#fff}
/* The same brief along the year: one cell per validated window. */
.bw-cap{margin:0 0 12px;font-size:.98rem;color:var(--t1)}
.b-timeline{list-style:none;margin:0;padding:2px 2px 8px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.25) transparent}
.b-timeline li{flex:1 0 98px;min-width:0}
.bw{display:flex;flex-direction:column;gap:5px;width:100%;height:100%;text-align:left;font:inherit;color:var(--t2);cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-top:2px solid var(--line-s);border-radius:8px;padding:9px 9px 10px;
  transition:border-color .18s,background .18s,transform .18s}
.bw:hover{border-color:var(--line-s);background:rgba(255,255,255,.08);transform:translateY(-2px)}
.bw:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
.bw.now{border-top-color:var(--sun);background:rgba(255,255,255,.09);cursor:default} .bw.now:hover{transform:none}
.bw-date{font-size:.76rem;font-weight:500;color:var(--t1);line-height:1.25}
.bw-date small{display:block;margin-top:1px;font-size:.6rem;font-weight:400;color:var(--t3)}
.bw-dots{display:flex;gap:4px;margin-top:2px}
.bw-dots i{width:8px;height:8px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3)}
.bw-dots i.on{background:#fff;border-color:#fff}
.bw-count{font-family:var(--mono);font-size:.78rem;color:var(--t1)}
.bw.none .bw-count{color:#f0a195}
.bw-best{font-family:var(--mono);font-size:.54rem;letter-spacing:-.01em;color:var(--t2);line-height:1.35;white-space:nowrap}
.bw:disabled{opacity:.5;cursor:default}
.b-across-wrap{overflow-x:auto;margin:10px 0}
.b-across{border-collapse:collapse;font-size:.78rem;min-width:100%}
.b-across th,.b-across td{padding:7px 10px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left;vertical-align:top;white-space:nowrap}
.b-across thead th{font-weight:400;color:var(--t2)}
.b-across thead th b{display:block;font-weight:500;color:var(--t1)}
.b-across thead th span{font-size:.7rem;color:var(--t3)}
.b-across tbody th{font-family:var(--mono);font-weight:500;color:var(--t1)}
.b-across td b{margin-right:6px} .b-across td span{font-family:var(--mono);font-size:.72rem;color:var(--t2)}
.b-across td.ok b{color:#fff} .b-across td.no b{color:#e07a6a} .b-across td.no{color:var(--t3)}
.b-across td.best{background:rgba(255,255,255,.08)}
.b-across .now{box-shadow:inset 0 2px 0 var(--sun)}
.b-across .sum b{display:block;color:var(--t1)} .b-across .sum span{font-size:.7rem;color:var(--t3)}
.b-across .na{color:var(--t3);font-style:italic}
.b-record{margin:0;padding:14px;max-height:340px;overflow:auto;font-family:var(--mono);font-size:.7rem;line-height:1.5;
  color:var(--t2);background:#0b0c10;border-radius:8px}
#brief .limits{margin-top:40px}
@media (max-width:900px){.b-trade{grid-template-columns:1fr} .b-ask-row .curvebtn{padding:12px 18px}}
/* On the Moon: a brief in force, and each analysis site's verdict under it. */
.brief-pill{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  color:#000;background:#fff;border-radius:14px;padding:6px 12px}
.pin-label .vd{display:block;margin-top:2px;font-size:.62rem;letter-spacing:.04em;color:var(--t1)}
.pin-label.v-fails{opacity:.62} .pin-label.v-fails .vd{color:#f0a195}
.pin-label.v-best{border-color:#fff}
.pin-label.hot .vd{color:#000}

/* Motion for the brief. An evaluated answer arrives in reading order and a
   fold opens by sliding in. Short, and only ever towards the resting state:
   with motion reduced, or no frame run, the page is simply as it should be. */
@keyframes b-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#brief-answer.anim .b-read{animation:b-in .3s ease both}
#brief-answer.anim .b-head{animation:b-in .34s .07s ease both}
#brief-answer.anim .b-best,#brief-answer.anim .b-sub{animation:b-in .3s .14s ease both}
#brief-answer.anim .b-acts{animation:b-in .3s .2s ease both}
#brief-answer.anim .bcard{animation:b-in .32s calc(.26s + var(--i,0) * 70ms) ease both}
#brief-answer.anim .bcard.no{animation-name:b-in-dim}
@keyframes b-in-dim{from{opacity:0;transform:translateY(10px)}to{opacity:.62;transform:none}}
#brief-answer.anim .b-fold{animation:b-in .3s .55s ease both}
.b-fold[open] .b-fold-body{animation:b-in .26s ease both}
.b-timeline li{animation:b-in .28s calc(var(--i,0) * 45ms) ease both}
.b-edit:not([hidden]){animation:b-in .22s ease both}

/* ================= system view (experimental) =================
   Geometry reads left to right: the three bodies, then the Moon and the
   site, then the site's own horizon. The step labels are shown only when the
   system panel is there to be step one. */
.geo-step{display:none;margin:0 0 10px;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--t2);align-items:center;gap:9px}
.geo-step b{display:inline-flex;align-items:center;justify-content:center;width:1.7em;height:1.7em;border-radius:50%;
  border:1px solid var(--line-s);font-weight:500;color:var(--t1)}
.geo-step i{margin-left:auto;font-style:normal;color:var(--t3);font-size:.9rem}
.geo-grid[data-system="on"] .geo-step{display:flex}
/* The system is the large picture; the Moon and the site, and the local
   horizon, are the two narrower steps beside it. */
.geo-grid[data-system="on"][data-scene="on"]{grid-template-columns:minmax(0,1.55fr) minmax(0,1.1fr) minmax(0,.95fr);gap:26px 28px}
.geo-grid[data-system="on"] .scene-focus{margin-bottom:8px}
.sysview{margin:0}
.sys-frame{border:1px solid var(--line);border-radius:6px;overflow:hidden;
  background:radial-gradient(ellipse at 45% 50%,#0c0d12 0%,#000 78%)}
.system-host{cursor:grab;touch-action:none;position:relative}
.system-host canvas{display:block}
.system-host:focus-visible{outline:2px solid var(--sun);outline-offset:-2px}
/* The honesty note has its own strip under the picture, never on top of it. */
.sys-note{margin:0;padding:8px 12px;border-top:1px solid var(--line);background:#000;font-family:var(--mono);
  font-size:.58rem;line-height:1.55;letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}
.sys-note b{font-weight:500;color:var(--t2)}
.sysview figcaption{margin-top:10px;font-size:.9rem;line-height:1.5;color:var(--t2)}
.sy-v{font-family:var(--mono);font-weight:500;color:var(--t1);white-space:nowrap}
.sy-sunv{color:var(--sun)} .sy-earthv{color:var(--earth)}

/* ---- one step at a time ---- */
.geo-guide{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;margin:0 0 10px}
.geo-guide[hidden],.geo-now[hidden]{display:none}
.geo-rail{display:flex;flex-wrap:wrap;gap:4px}
.geo-rail button{font:inherit;font-size:.82rem;color:var(--t3);background:none;border:0;border-bottom:2px solid transparent;
  padding:6px 12px 7px 4px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.geo-rail button b{display:inline-flex;align-items:center;justify-content:center;width:1.55em;height:1.55em;border-radius:50%;
  border:1px solid var(--line-s);font-family:var(--mono);font-size:.68rem;font-weight:500}
.geo-rail button:hover{color:var(--t1)}
.geo-rail button[aria-current="step"]{color:var(--t1);border-bottom-color:#fff}
.geo-rail button[aria-current="step"] b{background:#fff;color:#000;border-color:#fff}
.geo-nav{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px}
.geo-nav .curvebtn{padding:8px 12px;text-transform:none;letter-spacing:.02em;font-size:.74rem}
.geo-nav .geo-next{color:#000;background:#fff;border-color:#fff}
.geo-all{font:inherit;font-size:.74rem;color:var(--t3);background:none;border:0;text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;padding:6px 2px}
.geo-all:hover{color:var(--t1)}
.geo-rail button:focus-visible,.geo-all:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
/* The site's own figures, always in words above the picture. */
.geo-now{margin:0 0 12px;font-size:.86rem;line-height:1.5;color:var(--t2)}
.geo-now i{font-style:normal;margin-left:10px;font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--t3);white-space:nowrap}
#geo-grid[data-mode="guide"]{grid-template-columns:minmax(0,1fr)}
#geo-grid[data-mode="guide"] .geo-step{display:none}
#geo-grid[data-mode="guide"][data-step="1"] > :not(#geo-system),
#geo-grid[data-mode="guide"][data-step="2"] > :not(#geo-scene),
#geo-grid[data-mode="guide"][data-step="3"] > :not(#geo-horizon){display:none}
#geo-grid[data-mode="guide"] > *{max-width:1040px;width:100%;margin-inline:auto}
#geo-grid[data-mode="guide"] .scene-host{height:clamp(300px,calc(100vh - var(--chrome,100px) - 19rem),620px)}
#geo-grid[data-mode="guide"][data-step="3"] .states{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px 28px}

/* ---- the time bar: one row; the lanes open on request ---- */
#geometry .timeline[data-compact="on"]{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding-top:10px;padding-bottom:10px}
#geometry .timeline[data-compact="on"] .ends,
#geometry .timeline[data-compact="on"] .stepper{display:contents}
#geometry .timeline[data-compact="on"] #range-start,
#geometry .timeline[data-compact="on"] #range-end{display:none}
#geometry .timeline[data-compact="on"] .lanes{order:0;flex:1 1 100%}
#geometry .timeline[data-compact="on"][data-lanes="closed"] .lanes{display:none}
#geometry .timeline[data-compact="on"] #btn-play{order:1}
#geometry .timeline[data-compact="on"] #cursor{order:2;flex:1 1 260px;min-width:0;margin:0}
#geometry .timeline[data-compact="on"] .tl-now{order:3;margin:0;min-width:15.5em}
#geometry .timeline[data-compact="on"] .tl-now span{display:none}
#geometry .timeline[data-compact="on"] #btn-prev-moment{order:4}
#geometry .timeline[data-compact="on"] .stepper-label{order:5}
#geometry .timeline[data-compact="on"] #btn-next-moment{order:6}
#geometry .timeline[data-compact="on"] #btn-contrast{order:7}
#geometry .timeline[data-compact="on"] #btn-contrast time{display:none}
#geometry .timeline[data-compact="on"] .tl-more{order:8}
#geometry .timeline[data-compact="on"] .curvebtn{padding:8px 10px}
.tl-more[hidden]{display:none}
@media (max-width:900px){
  #geometry .timeline[data-compact="on"] #cursor{order:0;flex-basis:100%}
  #geometry .timeline[data-compact="on"] .tl-now{flex:1 1 auto;min-width:0}
  #geometry .timeline[data-compact="on"] .stepper-label{display:none}
  .geo-now i{display:block;margin:2px 0 0}
  .geo-rail button{padding-right:8px;font-size:.78rem}
}
@media (max-width:1180px){
  .geo-grid[data-system="on"][data-scene="on"]{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .geo-grid[data-system="on"][data-scene="on"] #geo-system{grid-column:1 / -1}
}
@media (max-width:1000px){
  .geo-grid[data-system="on"][data-scene="on"]{grid-template-columns:minmax(0,1fr)}
  .geo-step i{display:none}
}
@media (max-width:520px){
  .geo-head{gap:2px 16px}
  .geo-head .clock{font-size:1.1rem}
}

/* EXPERIMENT (experiment/moon-surface): the relief label, beside the exposure label. */
.framing .relief{display:block;margin-top:2px;color:var(--sun);max-width:34em;white-space:normal}
.framing .relief:empty{display:none}

/* ================= integration (experimental) =================
   One product: the brief is a drawer on the map, terrain is a model inside
   Compare. Few borders; hierarchy by size, space and one accent. */
.brief-open{position:absolute;z-index:6;left:16px;top:64px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  font:inherit;color:var(--t1);text-align:left;cursor:pointer;background:rgba(9,10,14,.78);border:1px solid var(--line);
  border-radius:12px;padding:9px 14px 10px;max-width:min(390px,calc(100% - 32px));backdrop-filter:blur(8px)}
.brief-open[hidden]{display:none}
.brief-open:hover{border-color:var(--line-s);background:rgba(20,22,28,.9)}
.brief-open span{font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t3)}
.brief-open b{font-size:.9rem;font-weight:500;color:var(--t2)}
.brief-open.is-set{border-color:var(--line-s)} .brief-open.is-set b{color:var(--t1)}
.brief-open:focus-visible,.drawer-x:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
.brief-drawer{position:absolute;z-index:8;left:16px;top:64px;bottom:64px;width:min(430px,calc(100% - 32px));overflow:auto;
  background:rgba(8,9,12,.9);border:1px solid var(--line);border-radius:14px;backdrop-filter:blur(14px);
  padding:18px 20px 16px;animation:drawer-in .22s ease both}
.brief-drawer[hidden]{display:none}
@keyframes drawer-in{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.brief-drawer{animation:none}}
.brief-drawer .sec-inner{padding:0;max-width:none;margin:0}
#brief.brief-drawer .b-page{max-width:none}
.drawer-title{margin:0 0 4px;font-family:var(--mono);font-size:.58rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--t3)}
.drawer-x{position:absolute;right:10px;top:8px;width:30px;height:30px;font-size:1.1rem;line-height:1;color:var(--t2);background:none;
  border:0;border-radius:50%;cursor:pointer}
.drawer-x:hover{color:var(--t1);background:rgba(255,255,255,.1)}
#brief[data-off] .sec-inner>:not(.drawer-title){display:none}
.brief-drawer .b-form{margin:8px 0 10px}
.brief-drawer .b-ask{font-size:1.15rem;margin-bottom:10px}
.brief-drawer .b-ask-row input{flex-basis:100%;font-size:.95rem;padding:11px 13px}
.brief-drawer .b-ask-row .curvebtn{padding:10px 18px}
.brief-drawer .b-cards{flex-direction:column;overflow:visible;gap:8px;margin-top:14px}
.brief-drawer .b-cards>li{width:auto;max-width:none;flex:none}
/* While the brief is open the search and the place card step back. */
#explore[data-brief="open"] .mapsearch{opacity:.0;pointer-events:none}
@media (max-width:760px){
  .brief-drawer{left:8px;right:8px;width:auto;top:auto;bottom:8px;max-height:62%}
  .brief-open{top:58px;left:10px}
}

/* The verdicts on the Moon: matches stand out, rejected sites step back. */
.pin-label.v-fails{opacity:.5}
.pin-label.v-meets{border-color:rgba(255,255,255,.55)}
.pin-label.v-best{border-color:#fff;box-shadow:0 0 0 1px #fff, 0 0 18px rgba(255,255,255,.25)}

/* The visibility model, in Compare. */
.vmodel{display:flex;flex-wrap:wrap;align-items:center;gap:6px 6px;margin:10px 0 4px}
.vmodel .layer-label{margin-right:8px}
.vmodel button{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--t2);
  background:none;border:1px solid var(--line);border-radius:14px;padding:6px 12px;cursor:pointer}
.vmodel button:hover{color:var(--t1);border-color:var(--line-s)}
.vmodel button[aria-pressed="true"]{color:#000;background:#fff;border-color:#fff}
.vmodel button:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
.vmodel-note{margin-left:10px;font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}
.cards[data-model="terrain"] .vmodel-note{color:var(--sun)}
.vm{margin:12px 0 14px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:left}
.vm-row{grid-template-columns:auto 1fr 1fr !important;align-items:baseline;column-gap:14px !important}
.vm-k{min-width:8.5em}
.vm-h{margin:0 0 8px;font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sun)}
.vm-none{margin:0;font-size:1.05rem;font-weight:500;color:var(--t2)}
.vm-sub{margin:3px 0 0;font-size:.78rem;color:var(--t3)}
.vm-row{display:grid;grid-template-columns:1fr;gap:1px;margin-top:8px}
.vm-k{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--t3)}
.vm-g{font-size:.84rem;color:var(--t3)} .vm-g b{font-weight:400;color:var(--t2)}
.vm-t{font-size:.84rem;color:var(--t2)} .vm-t b{font-size:1.15rem;font-weight:600;color:var(--t1)}
.vm-why{margin-top:4px;font-size:.78rem;color:var(--t2)}
.vm-why summary{cursor:pointer;color:var(--t2);text-decoration:underline;text-underline-offset:3px;width:fit-content}
.vm-why summary:hover{color:var(--t1)}
.vm-why p{margin:6px 0 0;line-height:1.45}
.vm-why .vm-ev{color:var(--t3)}
.vm-why img{display:block;width:100%;margin-top:8px;border-radius:4px;background:#fff}
/* The brief is reached from the map, not from a tab of its own. */
.views a[data-view-tab="brief"]{display:none !important}
.vm-caveat{margin:10px 0 0;padding-left:10px;border-left:2px solid var(--sun);font-size:.8rem;line-height:1.45;color:var(--t1)}

/* ================= mission window: a calendar (experimental) ================= */
.mwin-panel{min-width:0;width:min(600px,calc(100vw - 24px));padding:16px 16px 12px}
.cal-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 4px 12px}
.cal-sum{margin:0;font-size:1rem;font-weight:500;color:var(--t1)}
.cal-chip{font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  border:1px solid var(--line-s);border-radius:10px;padding:2px 9px;color:var(--t2)}
.cal-chip:empty{display:none}
.cal-chip[data-kind="validated"]{color:#000;background:#fff;border-color:#fff}
.cal-chip[data-kind="ready"],.cal-chip[data-kind="analysing"]{color:var(--sun);border-color:var(--sun)}
.cal-chip[data-kind="failed"],.cal-chip[data-kind="toolong"]{color:#f0a195;border-color:#f0a195}
.cal-nav{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:4px}
.cal-nav>button{font:inherit;font-size:1.2rem;line-height:1;width:30px;height:30px;color:var(--t2);background:none;border:0;
  border-radius:50%;cursor:pointer}
.cal-nav>button:hover{color:var(--t1);background:rgba(255,255,255,.1)}
.cal-months{display:grid;grid-template-columns:1fr 1fr;gap:6px 26px}
.cal-title{margin:4px 0 8px;text-align:center;font-size:.86rem;font-weight:500;color:var(--t1)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:2px}
.cal-dow{text-align:center;font-family:var(--mono);font-size:.54rem;letter-spacing:.1em;color:var(--t3);padding-bottom:4px}
.cal-day{position:relative;font:inherit;font-size:.8rem;color:var(--t2);background:none;border:0;height:32px;cursor:pointer;
  border-radius:50%;padding:0}
.cal-day:hover{background:rgba(255,255,255,.12);color:var(--t1)}
/* A day inside a validated window carries a small mark; it is not a control of its own. */
.cal-day.is-valid::after{content:"";position:absolute;left:50%;bottom:4px;width:4px;height:4px;margin-left:-2px;border-radius:50%;
  background:rgba(255,255,255,.55)}
.cal-day.in-range,.cal-day.in-preview{background:rgba(255,255,255,.13);border-radius:0;color:var(--t1)}
.cal-day.in-preview{background:rgba(255,255,255,.07)}
.cal-day.is-start,.cal-day.is-end{background:#fff;color:#000;font-weight:600}
.cal-day.is-start::after,.cal-day.is-end::after{background:#000}
.cal-day.is-start.has-right{border-radius:50% 0 0 50%}
.cal-day.is-end.has-left{border-radius:0 50% 50% 0}
.cal-day:focus-visible,.cal-nav>button:focus-visible{outline:2px solid var(--sun);outline-offset:1px}
.cal-key{margin:10px 4px 0;display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.54rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--t3)}
.cal-key i{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.55)}
.cal-key span{margin-left:auto}
.mwin-panel .mw-status{margin:12px 4px 0;min-height:2.9em}
.mwin-panel .mw-actions{margin:10px 4px 12px}
.mw-apply[data-kind="ready"]:not(:disabled),.mw-apply[data-kind="failed"]:not(:disabled){background:var(--sun);border-color:var(--sun)}
.mw-apply[data-kind="analysing"]{color:var(--sun);border-color:var(--sun)}
/* The validated windows: small presets under the calendar, not a list to read. */
.mwin-list.cal-presets{flex-direction:row;flex-wrap:wrap;gap:6px;padding:0 2px 2px}
.mwin-list.cal-presets button{padding:5px 10px;border:1px solid var(--line);border-radius:14px;display:inline-flex}
.mwin-list.cal-presets button b{font-size:.74rem;font-weight:400;color:var(--t2)}
.mwin-list.cal-presets button[aria-pressed="true"]{background:rgba(255,255,255,.14);border-color:var(--line-s)}
.mwin-list.cal-presets button[aria-pressed="true"] b{color:var(--t1)}
.mwin-list.cal-presets button[aria-pressed="true"] b::before{content:none}
@media (max-width:640px){
  .cal-months{grid-template-columns:1fr;row-gap:14px}
  .cal-day{height:38px;font-size:.9rem}
}

/* ================= Geometry: time changes data, never layout =================
   The name of a key moment and the countdowns ("sunset in ...") come and go
   as the clock moves. Each has its place reserved, so nothing below it
   moves when it appears, changes width or goes. */
#geometry .clockline{align-items:baseline}
#geo-horizon .st{height:32px;display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden}
#geo-horizon .st > *{flex:none}
#geo-horizon .st .rm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
#geo-horizon .st .vd{margin-left:0}
#geo-horizon .sky-head{height:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Terrain-aware selected: its figures stand where the geometric ones stood.
   What is said only of the geometric model steps out of the card. */
.cards[data-model="terrain"] .sc-metrics:not(.vm-metrics),
.cards[data-model="terrain"] .sc-note,
.cards[data-model="terrain"] .sc-block{display:none}
.cards[data-model="terrain"] .vm{margin:0;padding:0;border:0}
.vm-metrics dd{flex-wrap:wrap}
.vm-delta{display:block;flex-basis:100%;margin-top:4px;font-style:normal;font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--t3);white-space:nowrap}
.vm-delta.down{color:#f0a195} .vm-delta.up{color:var(--t2)}
.vm-metrics b.vm-na{font-size:.95rem;font-weight:500;color:var(--t3);letter-spacing:0}
.cards[data-model="terrain"] .vm-why{margin-top:12px}
.cards[data-model="terrain"] .vm-why .vm-k{display:block;margin-top:10px}
.cards[data-model="terrain"] .vm-caveat{margin-top:12px}
.vm-delta{white-space:normal;line-height:1.5;max-width:9em}
.vm-metrics b.vm-na{display:block;font-family:var(--mono);font-size:.62rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;
  line-height:1.5;white-space:normal;padding-top:6px}
.sc-metrics.vm-metrics dd b.vm-na{display:block;font-family:var(--mono);font-size:.6rem;font-weight:400;letter-spacing:.08em;
  text-transform:uppercase;line-height:1.5;white-space:normal;color:var(--t3);padding-top:8px;max-width:6.5em}
.vm-flag{display:block;flex-basis:100%;margin-top:3px;font-style:normal;font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--sun);line-height:1.5;max-width:9em}
.cards[data-model="terrain"] .vm-caveat{font-size:.76rem}
.vm-caveat b{font-weight:500}
.vm-note{margin-top:4px;color:var(--t2)} .vm-note summary{cursor:pointer;text-decoration:underline;text-underline-offset:3px;width:fit-content;color:var(--t2)}
.vm-note p{margin:4px 0 0}
.vm-metrics .sm{min-width:0}
.vm-metrics .vm-flag,.vm-metrics .vm-delta{max-width:100%;white-space:normal;overflow-wrap:anywhere}

/* ================= convergence cleanup (experimental) ================= */
/* The key-moment slot in the time control: one fixed cell. The idle label
   and the event name share it, so filling or emptying it moves nothing. */
.tl-event{display:inline-grid;width:15em;height:1.6rem;align-items:center;justify-items:center;text-align:center}
.tl-event > *{grid-area:1 / 1;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-event .moment-name{margin:0;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sun)}
.tl-event:has(.moment-name:not(:empty)) .stepper-label{visibility:hidden}
#geometry .timeline[data-compact="on"] .tl-event{order:5}
#geometry .timeline[data-compact="on"] .tl-event .stepper-label{order:0;display:inline}
@media (max-width:900px){
  #geometry .timeline[data-compact="on"] .tl-event{order:9;flex:1 1 100%;width:auto}
  #geometry .timeline[data-compact="on"] .tl-event .stepper-label{display:inline}
}
/* The terrain-aware model says what it is wherever its figures are. */
.vmodel-exp{margin-left:8px;font-style:normal;font-size:.5rem;letter-spacing:.14em;padding:2px 6px;border-radius:8px;
  color:#000;background:var(--sun)}
.vmodel button[aria-pressed="true"] .vmodel-exp{background:#000;color:var(--sun)}
.vmodel-banner{margin:14px 0 4px;padding:12px 16px;border:1px solid var(--sun);border-radius:8px;background:rgba(224,169,77,.1);
  font-size:.86rem;line-height:1.5;color:var(--t1)}
.vmodel-banner[hidden]{display:none}
.vmodel-banner b{display:block;font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sun);margin-bottom:3px}
.vm-tag{margin:0 0 8px;display:inline-block;font-family:var(--mono);font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;
  color:#000;background:var(--sun);border-radius:8px;padding:2px 8px}
/* The brief says which model it reasons with. */
.b-scope{margin:0 0 12px;font-size:.78rem;line-height:1.45;color:var(--t2);padding-left:10px;border-left:2px solid var(--line-s)}

/* ================= release polish (experimental) ================= */
.cal-recent{flex-basis:100%;margin:6px 4px 0;font-family:var(--mono);font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t3)}
.mwin-list.cal-presets button[aria-pressed="true"]{background:#fff;border-color:#fff}
.mwin-list.cal-presets button[aria-pressed="true"] b{color:#000}
/* The picked range reads at a glance: solid ends, a clear band between. */
.cal-day.in-range{background:rgba(255,255,255,.2)}
.cal-day.is-start,.cal-day.is-end{box-shadow:0 0 0 2px rgba(255,255,255,.25)}
/* Phone: the time bar in three tidy rows -- scrubber; play and time; then
   the key-moment stepper with its label between the arrows, and the rest. */
@media (max-width:900px){
  #geometry .timeline[data-compact="on"]{gap:8px 8px}
  #geometry .timeline[data-compact="on"] .tl-now{flex:1 1 55%}
  #geometry .timeline[data-compact="on"] #btn-prev-moment{order:4}
  #geometry .timeline[data-compact="on"] .tl-event{order:5;flex:1 1 0;width:auto;min-width:9em}
  #geometry .timeline[data-compact="on"] #btn-next-moment{order:6}
  #geometry .timeline[data-compact="on"] #btn-contrast{order:7;flex:1 1 40%}
  #geometry .timeline[data-compact="on"] .tl-more{order:8;flex:1 1 40%}
}
/* The brief's headline, at drawer size. */
.brief-drawer .b-result h3,.brief-drawer .br-head,.brief-drawer .b-headline{font-size:1.35rem;line-height:1.2}
.vm-metrics .vm-flag{letter-spacing:.06em}
.brief-drawer .b-head{font-size:1.35rem;line-height:1.2;margin-top:14px}
.brief-drawer .b-head b{font-size:inherit}
.vm-flag span{display:block;white-space:nowrap;text-transform:none;letter-spacing:.04em;font-size:.66rem}
.vm-delta{text-transform:none !important;letter-spacing:.03em !important;font-size:.62rem !important}
/* Phone time bar as a grid: scrubber / play + time / arrow, event, arrow / the two jumps. */
@media (max-width:900px){
  #geometry .timeline[data-compact="on"]{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px}
  #geometry .timeline[data-compact="on"] .lanes{grid-column:1 / -1}
  #geometry .timeline[data-compact="on"] #cursor{grid-column:1 / -1;width:100%}
  #geometry .timeline[data-compact="on"] #btn-play{grid-column:1}
  #geometry .timeline[data-compact="on"] .tl-now{grid-column:2 / -1}
  #geometry .timeline[data-compact="on"] #btn-prev-moment{grid-column:1;justify-self:start}
  #geometry .timeline[data-compact="on"] .tl-event{grid-column:2;width:auto;min-width:0}
  #geometry .timeline[data-compact="on"] #btn-next-moment{grid-column:3;justify-self:end}
  #geometry .timeline[data-compact="on"] #btn-contrast{grid-column:1 / 3}
  #geometry .timeline[data-compact="on"] .tl-more{grid-column:3}
  .tl-event .moment-name{font-size:.62rem;letter-spacing:.06em}
}
@media (max-width:900px){
  #geometry .timeline[data-compact="on"] .tl-event{display:grid;width:100%;justify-self:stretch;grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  #geometry .timeline[data-compact="on"]{grid-template-columns:repeat(4,minmax(0,1fr))}
  #geometry .timeline[data-compact="on"] #btn-play{grid-column:1}
  #geometry .timeline[data-compact="on"] .tl-now{grid-column:2 / -1}
  #geometry .timeline[data-compact="on"] #btn-prev-moment{grid-column:1}
  #geometry .timeline[data-compact="on"] .tl-event{grid-column:2 / 4}
  #geometry .timeline[data-compact="on"] #btn-next-moment{grid-column:4}
  #geometry .timeline[data-compact="on"] #btn-contrast{grid-column:1 / 3}
  #geometry .timeline[data-compact="on"] .tl-more{grid-column:3 / -1}
}

/* The opener carries the brief's summary; the older pill would say it twice. */
.brief-pill{display:none !important}
@media (max-width:760px){
  #explore .framing{max-width:58vw}
  .framing .relief{max-width:none;font-size:.5rem;letter-spacing:.06em}
}
/* In the drawer a site is a compact row: a thumbnail, then its name, state
   and the one figure that matters. The larger card belongs to Compare. */
.brief-drawer .bcard-btn{display:grid;grid-template-columns:84px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:12px;
  align-items:center;width:100%;text-align:left;padding:8px}
.brief-drawer .bcard-img{grid-row:1 / 4;width:84px;height:64px;border-radius:5px;overflow:hidden}
.brief-drawer .bcard-img img{width:100%;height:100%;object-fit:cover}
.brief-drawer .bcard-cap,.brief-drawer .bcard-over{display:none}
.brief-drawer .bcard-name,.brief-drawer .bcard-state,.brief-drawer .bcard-fig{grid-column:2;padding:0;margin:0}

/* The search's list opens over the place where the brief's button rests, so
   the button sits under it and steps out while the list is open. */
.brief-open{z-index:5}
#explore:has(#cat-panel:not([hidden])) .brief-open{visibility:hidden}
/* Mid-width desktops: the note under the objective keeps clear of the comparison tray. */
@media (min-width:901px) and (max-width:1400px){ .mapfoot{max-width:min(400px,29%)} }
/* The drawer stops above the note under the map, which is three lines when relief is on. */
@media (min-width:761px){ .brief-drawer{bottom:92px} }

/* ================= a place on the map (experimental) =================
   Coordinates of a point pressed on open ground. Small, beside the point,
   and plainly not an analysis. */
.locard{position:absolute;z-index:6;width:min(270px,calc(100% - 20px));padding:11px 13px 12px;background:rgba(9,10,14,.94);
  border:1px solid var(--line-s);border-radius:10px;backdrop-filter:blur(8px);font-size:.8rem;line-height:1.45;color:var(--t2)}
.locard[hidden]{display:none}
.locard::before{content:"";position:absolute;left:calc(var(--px,0px) - 5px);top:calc(var(--py,0px) - 5px);width:10px;height:10px;
  border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #000;pointer-events:none}
.locard p{margin:0}
.locard-k{font-family:var(--mono);font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t3)}
.locard-ll{font-family:var(--mono);font-size:1rem;color:var(--t1);margin:2px 0 8px !important;letter-spacing:.02em}
.locard-near button{font:inherit;color:var(--t1);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.locard-none{margin-top:8px !important;padding-top:8px;border-top:1px solid var(--line);font-size:.74rem;color:var(--t3)}
.locard-x{position:absolute;right:6px;top:4px;width:24px;height:24px;font-size:1rem;line-height:1;color:var(--t3);background:none;border:0;cursor:pointer;border-radius:50%}
.locard-x:hover{color:var(--t1);background:rgba(255,255,255,.1)}
.locard button:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
.locard-ll.locard-coarse{font-family:inherit;font-size:.86rem;letter-spacing:0;color:var(--t2)}

/* ================= map experience (experimental) ================= */
/* The left column under the search: what this is, then the brief. */
.leftstack{position:absolute;z-index:5;left:16px;top:64px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  max-width:min(390px,calc(100% - 32px));pointer-events:none}
.leftstack > *{pointer-events:auto}
.leftstack .brief-open{position:static;max-width:100%}
#explore:has(#cat-panel:not([hidden])) .leftstack{visibility:hidden}
#explore[data-brief="open"] .intro{display:none}
.intro{position:relative;padding:2px 26px 2px 2px;text-shadow:0 1px 10px #000,0 0 3px #000}
.intro[hidden]{display:none}
.intro h2{margin:0 0 6px;font-size:clamp(1.25rem,2vw,1.7rem);font-weight:600;letter-spacing:-.02em;line-height:1.15;color:var(--t1)}
.intro p{margin:0;font-size:.86rem;line-height:1.45;color:var(--t2);max-width:34ch}
.intro-x{position:absolute;right:0;top:0;width:24px;height:24px;font-size:1rem;line-height:1;color:var(--t3);background:none;border:0;border-radius:50%;cursor:pointer}
.intro-x:hover{color:var(--t1);background:rgba(255,255,255,.12)}
@media (max-width:760px){
  .leftstack{left:10px;top:58px;max-width:calc(100% - 110px)}
  .intro h2{font-size:1.1rem} .intro p{font-size:.76rem}
}
/* Compare: the way back to the Moon, beside the site's coordinates. */
.sc-moon{margin-left:10px;font:inherit;font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--t2);
  background:none;border:1px solid var(--line-s);border-radius:10px;padding:2px 8px;cursor:pointer}
.sc-moon:hover{color:#000;background:#fff;border-color:#fff}
/* Coordinates typed into the search. */
.cat-coord{padding:8px 10px 10px;margin:0 0 6px;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.cat-coord button{font:inherit;font-family:var(--mono);font-size:.86rem;color:#000;background:#fff;border:0;border-radius:6px;padding:6px 10px;cursor:pointer}
.cat-coord span{font-family:var(--mono);font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;color:var(--t3)}
.cat-coord-err{margin:0;font-size:.78rem;line-height:1.45;color:#f0a195}
/* Layers. */
.lay-panel{position:absolute;z-index:9;width:min(310px,calc(100% - 16px));padding:8px;background:rgba(9,10,14,.95);border:1px solid var(--line-s);
  border-radius:10px;backdrop-filter:blur(8px)}
.lay-panel[hidden]{display:none}
.lay-row{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;padding:7px 6px;border-radius:6px;cursor:pointer}
.lay-row:hover{background:rgba(255,255,255,.06)}
.lay-row input{margin-top:3px;accent-color:#fff}
.lay-txt b{font-size:.84rem;font-weight:500;color:var(--t1);margin-right:8px}
.lay-kind{font-style:normal;font-family:var(--mono);font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line-s);border-radius:8px;padding:1px 6px;color:var(--t2);white-space:nowrap}
.lay-kind.lay-experimental{color:var(--sun);border-color:var(--sun)}
.lay-kind.lay-validated{color:#000;background:#fff;border-color:#fff}
.lay-txt small{display:block;margin-top:2px;font-size:.7rem;line-height:1.4;color:var(--t3)}
/* The scale bar, in the framing note. */
.scalebar{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:5px;color:var(--t2)}
.scalebar[hidden]{display:none}
.scalebar i{display:block;height:5px;border:1px solid var(--t1);border-top:0}
.scalebar b{font-weight:400;white-space:nowrap}
/* Phone: the question alone; the header and the brief below it say the rest. */
@media (max-width:480px){ .intro p{display:none} .intro h2{margin-bottom:0} }

/* The introduction keeps its own backing, so it reads over lit ground too. */
.intro{padding:10px 30px 11px 12px;background:rgba(9,10,14,.72);border:1px solid var(--line);border-radius:12px;backdrop-filter:blur(8px);text-shadow:none}
.intro-x{right:4px;top:4px}
.sc-how{margin-left:10px;font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);text-underline-offset:3px}
.sc-how:hover,.poi-limits a:hover,.vmodel-banner a:hover{color:var(--t1)}
.poi-limits a{color:inherit;text-underline-offset:3px}
.vmodel-banner a{color:var(--sun);text-underline-offset:3px}

/* ---------------- Explore: the time the Moon is lit for ------------------ */
.moon-host canvas.moon-ghost{pointer-events:none;z-index:0}
#explore .lightbar{display:flex;flex-direction:column;gap:6px;width:290px;max-width:100%;padding:7px 11px 8px;
  background:rgba(9,10,14,.82);border:1px solid var(--line-s);border-radius:8px;backdrop-filter:blur(10px)}
#explore .lightbar[hidden]{display:none}
#explore .lightbar label{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}
#explore .lightbar label b{font-weight:500;color:var(--t1);letter-spacing:.04em;font-variant-numeric:tabular-nums;white-space:nowrap}
#explore .lightbar .light-note{margin:0;font-family:var(--mono);font-size:.58rem;line-height:1.5;letter-spacing:.06em;
  text-transform:uppercase;color:#8a8a93}
#explore .lightbar input[type=range]{width:100%;margin:0;height:14px;accent-color:#e9e9ee;cursor:pointer}
@media (max-width:700px){
  #explore .lightbar{width:178px;padding:6px 9px 7px}
  #explore .lightbar label{font-size:.5rem}
  #explore .lightbar .light-note{font-size:.5rem}
}

/* ---------------- first-visit welcome and tour (tour.js) ---------------- */
.intro-tour{margin-top:8px;padding:0;background:none;border:0;font:inherit;font-size:.8rem;color:var(--sun);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-shadow:inherit}
.intro-tour:hover{color:var(--t1)}
.intro-tour:focus-visible{outline:2px solid var(--sun);outline-offset:2px;border-radius:3px}
.tour-layer{position:fixed;inset:0;z-index:1000}
.tour-layer[popover]{margin:0;padding:0;border:0;background:transparent;color:inherit;
  width:auto;height:auto;max-width:none;max-height:none;overflow:visible;inset:0}
.tour-layer.no-hole{background:rgba(0,0,0,.42)}
.tour-layer.fade-in{animation:tour-in .5s ease-out both}
@keyframes tour-in{from{opacity:0}to{opacity:1}}
.tour-hole{position:fixed;border-radius:8px;pointer-events:none;
  box-shadow:0 0 0 3px #fff,0 0 0 6px rgba(0,0,0,.6),0 0 0 200vmax rgba(0,0,0,.42);
  transition:left .2s ease,top .2s ease,width .2s ease,height .2s ease}
.tour-hole[hidden]{display:none}
.tour-card{position:fixed;width:min(360px,calc(100vw - 24px));box-sizing:border-box;background:#0c0c10;
  border:1px solid var(--line-s);border-radius:10px;padding:16px 18px 14px;color:var(--t1);
  box-shadow:0 18px 44px -18px #000;font-family:var(--sans)}
.tour-card.center{left:50% !important;top:50% !important;transform:translate(-50%,-50%)}
.tour-card.side{left:auto !important;right:28px;top:50% !important;transform:translateY(-50%)}
.tour-card h2{font-size:1.05rem;margin:0 0 6px;font-weight:600;letter-spacing:-.01em}
.tour-card p{margin:0;font-size:.86rem;line-height:1.5;color:var(--t2)}
.tour-card .tour-count{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);margin-bottom:6px}
.tour-card .tour-hint{margin-top:8px;font-size:.78rem;color:var(--t3)}
.tour-foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:14px;flex-wrap:wrap}
.tour-off{display:flex;align-items:center;gap:6px;flex:1 0 100%;margin-bottom:2px;font-size:.76rem;color:var(--t3);cursor:pointer}
.tour-foot button{font:inherit;font-size:.8rem;border-radius:6px;padding:6px 13px;border:1px solid var(--line-s);
  background:none;color:var(--t1);cursor:pointer}
.tour-foot button:hover{background:rgba(255,255,255,.08)}
.tour-foot button.primary{background:#fff;color:#000;border-color:#fff;font-weight:500}
.tour-foot button:focus-visible,.tour-off input:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
.tour-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tour-layer.still .tour-hole,.tour-layer.still .tour-card{transition:none}
@media (prefers-reduced-motion:reduce){.tour-hole,.tour-card{transition:none}.tour-layer.fade-in{animation:none}}