/* lasercom.app: copyright © 2026 Robert Lafon, all rights reserved. Imported by scripts/orrery-import.js: change that script, not this file. */
/* The solar system viewer.
   -----------------------
   Its own stylesheet, loaded only by /sky, so none of this weighs on a page
   somebody is reading. It sits on top of public/orrery-base.css (loaded
   first), which holds the colours and the few general rules it relies on. */

html, body.skybody { height: 100%; margin: 0; overflow: hidden; }
body.skybody {
  background: #05070d;
  background-image: none;          /* the starfield tile has no place here */
  color: var(--ink);
}

/* --- the view itself ------------------------------------------------------ */
#sky {
  position: fixed;
  inset: 0;
  touch-action: none;              /* we handle pinch and drag ourselves */
}
#sky canvas { display: block; width: 100%; height: 100%; }

/* --- the bar across the top ----------------------------------------------- */
#skytop {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 12px;
  padding-top: calc(7px + env(safe-area-inset-top, 0px));
  background: linear-gradient(to bottom, rgba(5,7,13,.92), rgba(5,7,13,0));
  font-size: 12px;
}
#skytop .back { font-weight: bold; text-decoration: none; }
#skytop .back:hover { color: var(--hover); }
#skyclock {
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
#skypanelbtn { display: none; margin-left: auto; font-size: 12px; }
/* The Find box (Finder in sky.js): anything in the Orrery by name. */
#skyfind { position: relative; }
#skyq {
  width: 190px; font: inherit; font-size: 12px; color: var(--ink);
  background: rgba(14, 20, 33, .86); border: 1px solid var(--line); border-radius: 4px; padding: 3px 7px;
}
#skyq:focus { outline: 2px solid var(--accent); outline-offset: -1px; width: 240px; }
#skyqres {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 30;
  width: 320px; max-width: calc(100vw - 24px); max-height: 60vh; overflow-y: auto;
  margin: 0; padding: 3px 0; list-style: none;
  background: rgba(10, 14, 24, .97); border: 1px solid var(--line); border-radius: 5px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
}
#skyqres li { padding: 5px 10px; cursor: pointer; line-height: 1.3; }
#skyqres li b { color: #fff; font-weight: 600; }
#skyqres li span { display: block; font-size: 11px; color: var(--ink-dim); }
#skyqres li.on, #skyqres li:hover { background: rgba(120, 150, 210, .18); }
#skyqres li.none { cursor: default; color: var(--ink-dim); font-size: 11.5px; }
#skyqres li.none:hover { background: none; }
/* The copyright notice, at the right of the top bar: always in view, never in the way. */
#skycopyright { margin-left: auto; font-size: 10.5px; color: var(--ink-dim); white-space: nowrap; }
@media (max-width: 640px) { #skycopyright .cpl { display: none; } }   /* a phone: just "© 2026" */
@media (max-width: 480px) { #skyclock { display: none; } }          /* room for the Find box */

/* --- the panel ------------------------------------------------------------ */
#skypanel {
  position: fixed;
  top: 40px; left: 12px; bottom: 12px;
  width: 320px;
  z-index: 15;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
}
#skypanel .box {
  background: rgba(14, 20, 33, .86);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 10px 12px;
}
#skypanel h1 { font-size: 13px; margin: 0 0 6px 0; color: #fff; }
/* The heading is the way home: back to the opening view (Orrery.home). */
#skypanel h1 #skyhome { font: inherit; color: inherit; text-decoration: none; padding: 0; cursor: pointer; }
#skypanel h1 #skyhome:hover { color: var(--hover); text-decoration: underline; }
#skypanel h2 { font-size: 11px; margin: 0 0 7px 0; color: var(--ink-dim);
  text-transform: uppercase; letter-spacing: .08em; }
#skypanel .note { font-size: 11px; color: var(--ink-dim); margin: 0 0 8px 0; line-height: 1.45; }
#skypanel .switch { font-size: 11px; display: block; }
.credits p { font-size: 10.5px; color: var(--ink-faint); margin: 0; line-height: 1.5; }

/* The facts for whatever is in focus. */
#skyfacts:empty { display: none; }
#skyfacts h2 { font-size: 15px; color: #fff; text-transform: none; letter-spacing: 0; margin-bottom: 8px; }
#skyfacts dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 10px; margin: 0; font-size: 11px; }
#skyfacts dt { color: var(--ink-faint); }
#skyfacts dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }

/* The list of places to go. */
.golist { display: flex; flex-wrap: wrap; gap: 4px; }
.golist .go {
  font: inherit; font-size: 11px;
  padding: 3px 7px;
  color: var(--link);
  background: var(--panel-3);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
}
.golist .go:hover { color: var(--hover); border-color: var(--ink-faint); }
.golist .go.on { color: var(--accent); border-color: var(--accent); font-weight: bold; }
.golist .go.kind-moon { font-size: 10px; opacity: .82; }
/* A body's moons, and the spacecraft, open on a row of their own under a
   small "▾" (GoList in sky.js): the row is a full-width flex item, so it
   drops below whatever line its button is on. */
.golist .gopair { display: inline-flex; }
.golist .gopair > .go:first-child { border-radius: 3px 0 0 3px; }
.golist .gopair > .gomore { border-left: none; border-radius: 0 3px 3px 0; }
.golist .go.gomore { padding: 3px 5px; color: var(--ink-dim); }
.golist .go.gomore.open { color: var(--accent); border-color: var(--accent); }
.golist .go.gomore.holds { color: var(--accent); }          /* the focused moon or craft is in here */
.golist .go.craftmenu { padding: 3px 8px; }
.golist .gorow {
  flex-basis: 100%;
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 1px 0 3px 3px; padding: 3px 0 3px 8px;
  border-left: 2px solid var(--line);
}
.golist .gorow[hidden] { display: none; }

/* --- type-ahead lists (the ISS place search) ----------------------------- */
.findwrap { position: relative; }
/* The suggestions sit IN the flow rather than floating over what follows. */
.suggests {
  margin-top: 3px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  max-height: 180px;
  overflow-y: auto;
}
.suggests .suggest {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 12px;
  padding: 4px 7px;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
}
.suggests .suggest:hover { background: var(--panel-3); color: var(--accent); }
.suggests .suggest b { color: var(--accent); }

/* --- a notice in the middle of the view ----------------------------------- */
.skymodal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(3, 5, 10, .62);
}
.skymodalbox {
  max-width: 340px;
  padding: 16px 18px 14px 18px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
  text-align: center;
}
.skymodalbox p { margin: 0 0 14px 0; font-size: 13px; line-height: 1.5; color: var(--ink); }
.skymodalok {
  font: inherit;
  font-size: 12px;
  padding: 4px 18px;
  color: var(--ink);
  background: var(--panel-3);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
}
.skymodalok:hover { border-color: var(--accent); color: var(--accent); }

/* --- labels on the sky ---------------------------------------------------- */
.pins { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
/* The label is placed so that its DOT lands exactly on the body: the element's
   left edge and vertical centre are the anchor (the script adds
   translateY(-50%)), the dot is pinned to that anchor absolutely, and the name
   is pushed clear of the body by padding rather than by margins on both the
   label and the dot — arithmetic that used to leave the dot a few pixels below
   and to the right of the planet it was naming. */
.pin {
  position: absolute;
  top: 0; left: 0;
  display: block;
  font: inherit;
  font-size: 11px;
  color: var(--ink-dim);
  background: none;
  border: none;
  /* --off is set per body: the name stands off by the body's own radius on
     screen, so it never sits on top of the thing it names. */
  padding: 2px 4px 2px var(--off, 8px);
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  transform-origin: left center;
  /* The site's stylesheet puts a margin on buttons, and a margin shifts an
     absolutely positioned element even when top/left are zero — which is what
     was dropping every label ten pixels below the body it names. */
  margin: 0;
}
.pin .dot {
  position: absolute;
  left: 0; top: 50%;
  width: 5px; height: 5px;
  margin: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}
.pin.big .dot { opacity: 0; }   /* the body itself is visible now; the name is
                                   already standing off by its radius */
.pin:hover { color: var(--hover); }
.pin.here { color: var(--accent); font-weight: bold; }
.pin.kind-moon { font-size: 10px; opacity: .8; }
.pin.kind-star { color: #ffe9b0; }
/* The stellar neighbourhood: star names a little quieter than the planets,
   distance-ring labels quieter still and not clickable. */
.pin.kind-nearstar { font-size: 10px; color: #d8dcf0; opacity: .85; padding-left: 7px; }
.pin.kind-nearstar .dot { width: 3px; height: 3px; box-shadow: none; opacity: 0; }
.pin.kind-nearstar:hover { opacity: 1; color: var(--hover); }
.pin.ringpin { font-size: 10px; color: #8aa0c0; opacity: .8; cursor: default; pointer-events: none; padding: 0; }

/* --- phones --------------------------------------------------------------- */
@media (max-width: 760px) {
  #skypanelbtn { display: block; }
  #skytop { gap: 8px; }
  #skyq, #skyq:focus { width: 130px; }
  #skyclock { font-size: 10.5px; }
  #skycopyright { margin-left: 4px; }
  #skypanel {
    top: auto; left: 0; right: 0; bottom: 0;
    width: auto;
    max-height: 62%;
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)) 12px;
    background: rgba(5, 7, 13, .94);
    border-top: 1px solid var(--line);
    transform: translateY(100%);
    transition: transform .22s ease;
  }
  #skypanel.open { transform: translateY(0); }
  #skypanel .box { background: none; border: none; padding: 0 0 8px 0; }
  .pin { font-size: 12px; }
  .pin.kind-moon { font-size: 11px; }
}

/* The habitable-zone switch carries a swatch of the ring's own colour. */
#skypanel .hzkey { display: inline-block; width: 10px; height: 10px; vertical-align: -1px;
  background: rgba(125, 255, 154, 0.45); border: 1px solid rgba(125, 255, 154, 0.8); border-radius: 2px; }
#skypanel .hzrange { color: var(--ink-faint, #8a93a6); }

.golist .go.kind-zone { color: #ffe9b0; }

/* Hovering a star: a card by the cursor and a ring round the star. */
.startip { position: absolute; top: 0; left: 0; z-index: 12; width: 230px; pointer-events: auto; cursor: pointer;
  background: rgba(10, 14, 24, 0.92); border: 1px solid #2b3550; border-radius: 4px;
  padding: 6px 8px; font-size: 11px; line-height: 1.45; color: #d8dcf0; }
.startip b { display: block; font-size: 12px; color: #fff; }
.startip span { display: block; }
.startip i { font-style: normal; }
.startip .hint { color: #8a93a6; font-style: italic; }
.starmark { position: absolute; top: 0; left: 0; z-index: 11; width: 16px; height: 16px; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.75); border-radius: 50%; }
#skypanel .cls { font-size: 12px; }
/* The key to the star colours, under the Nearby stars switch. */
#skypanel .starkey { list-style: none; margin: 4px 0 0 22px; padding: 0; font-size: 10px; color: #a9b1c4; }
#skypanel .starkey li { white-space: nowrap; }
#skypanel .starkey i { font-style: normal; display: inline-block; width: 1.2em; }
#skypanel .starkeybox { margin: 2px 0 0 22px; font-size: 10px; color: #a9b1c4; }
#skypanel .starkeybox summary { cursor: pointer; }
#skypanel .starkeybox .starkey { margin-left: 0; }

/* Objects beyond Neptune: labels a size down from the planets. */
.pin.kind-tno, .pin.kind-dwarf { font-size: 10px; color: #c9b8a6; }
.golist .go.kind-tno, .golist .go.kind-dwarf { font-size: 10px; }
.pin.oortpin { font-size: 11px; font-style: italic; color: #9fbfe0; opacity: .85; padding: 0; }

/* Planets of a nearby star, in the panel. */
#skyfacts .planets h2 { margin-top: 10px; }
#skyfacts .planet { border-top: 1px solid #2b3550; padding-top: 4px; margin-top: 6px; }
#skyfacts .planet h3 { font-size: 12px; margin: 2px 0 3px; color: #fff; }
#skyfacts .hzbadge { font-size: 9px; font-weight: normal; color: #0b1a10; background: #5fe08a; border-radius: 3px; padding: 0 4px; vertical-align: 1px; }
#skyfacts .disputed { font-size: 9px; font-weight: normal; color: #2a1408; background: #ffa552; border-radius: 3px; padding: 0 4px; vertical-align: 1px; }
.startip .hasplanets { color: #ffe9b0; }
#skypanel .starkey .pulsekey { color: #ffe9b0; animation: hzpulse 1s ease-in-out infinite; }
@keyframes hzpulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { #skypanel .starkey .pulsekey { animation: none; } }

/* The two habitable-zone bands, keyed under their switch. */
#skypanel .hzlegend { list-style: none; margin: 0 0 2px 22px; padding: 0; font-size: 10px; color: #a9b1c4; }
#skypanel .hzlegend .hzkey.opt { background: rgba(125, 255, 154, 0.16); border-color: rgba(125, 255, 154, 0.4); }

/* The Galactic Centre's label: warm, like its glow. */
.pin.gcpin { color: #f3d59c; font-size: 11px; }
.pin.gcpin .dot { opacity: 0; }

/* Names of the spiral arms: quiet, blue-white like the arms. */
.pin.armpin { font-size: 10px; font-style: italic; color: #b9c8ec; opacity: .85; padding: 0; }
.pin.armpin:hover { opacity: 1; color: var(--hover); }

/* Threat to Earth of a CME (NOAA storm scale; see CME_THREATS in sky.js):
   a coloured dot on its label, in its panel, and in the key. */
.threat { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px;
  vertical-align: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6); }
.threat0 { background: #4fd27a; }
.threat1 { background: #ffe14d; }
.threat2 { background: #ff9a2e; }
.threat3 { background: #ff3b30; }
.threat4 { background: #ff3b30; animation: hzextreme 0.8s steps(1) infinite; }
.threatx { background: #8a93a6; }
@keyframes hzextreme { 0% { background: #ff3b30; } 50% { background: #ffffff; } }
.pin.cmepin.extreme { animation: hzextremetext 0.8s steps(1) infinite; }
@keyframes hzextremetext { 0% { color: #ff3b30; } 50% { color: #ffffff; } }
@media (prefers-reduced-motion: reduce) {
  .threat4 { animation: none; box-shadow: 0 0 0 2px #fff; }
  .pin.cmepin.extreme { animation: none; color: #ff3b30; }
}
#skypanel .threatkey li { margin-bottom: 1px; }

/* Sunspot region labels on the Sun: small and dark-haloed, over a bright disc. */
.pin.sunpin { font-size: 10px; color: #fff3d6; padding: 0; }
.pin.sunpin:hover { color: var(--hover); }

/* Asteroids: the hover card is for reading only (clicks go to the asteroid
   itself), and the label on the chosen one. */
.startip.asttip { pointer-events: none; cursor: default; }
.pin.astpin { font-size: 11px; color: #ffc2b0; padding: 0 0 0 8px; }

/* Spacecraft: cyan, small, and grouped under their own heading in the list. */
.pin.kind-craft { font-size: 10px; color: #8fe3ff; }
.pin.kind-craft .dot { background: #8fe3ff; width: 4px; height: 4px; }
.golist .go.kind-craft { font-size: 10px; color: #8fe3ff; }

/* CME labels: warm, like the cones. */
.pin.cmepin { font-size: 10px; color: #ffb36b; padding: 0; }
.pin.cmepin:hover { color: var(--hover); }
/* Every label in the viewer gets a dark halo, so it stays readable over the
   bright parts of the Galaxy and over the CME cones. */
.pin { text-shadow: 0 0 3px #000, 0 0 6px #000, 0 0 10px rgba(0, 0, 0, 0.8); }

/* --- the arrow to the Galactic Centre (GalacticArrow in sky.js) ----------- */
.gcarrow {
  position: absolute; top: 0; left: 0; margin: 0; padding: 1px 4px;
  font: inherit; font-size: 10px; color: #8fb8ff; background: none; border: none;
  white-space: nowrap; cursor: pointer; pointer-events: auto;
}
.gcarrow:hover { color: var(--hover); }

/* --- beyond the Milky Way (Galaxies in sky.js) ---------------------------- */
.pin.xgpin { font-size: 10px; color: #b9c8ec; text-shadow: 0 0 3px #05070d, 0 0 6px #05070d, 0 0 9px #05070d; }
.pin.xgpin .dot { opacity: 0; }
.pin.xgpin.xg-cluster { font-size: 11px; color: #d7def0; }
.pin.xgpin.xg-lani { font-size: 12px; color: #ffcf8a; letter-spacing: .02em; }
/* The farthest known object: bold, flashing gold and white (steady with reduced motion). */
.pin.xgpin.xg-record { font-weight: 700; animation: xgrecord 2s ease-in-out infinite; }
.pin.xgpin.xg-record .dot { opacity: 1; background: #ffcf8a; box-shadow: 0 0 6px 2px rgba(255, 207, 138, .8); }
@keyframes xgrecord { 0%, 100% { color: #ffcf8a; } 50% { color: #ffffff; } }
@media (prefers-reduced-motion: reduce) { .pin.xgpin.xg-record { animation: none; } }
.pin.xgpin.xg-zoa { font-size: 10px; font-style: italic; color: #9aa6c4; }
.pin.xgpin:hover { color: var(--hover); }
#skypanel .galkey .gk { display: inline-block; width: 12px; margin-right: 3px; font-style: normal; text-align: center; }
#skypanel .galkey .gk.in { color: #ffcc85; }
#skypanel .galkey .gk.out { color: #9ebdff; }
#skypanel .galkey .gk.shell { height: 8px; border: 1px solid rgba(255, 199, 115, .8); border-radius: 50%; background: rgba(255, 199, 115, .12); vertical-align: -1px; }
#skypanel .galkey .gk.zoa { height: 6px; background: rgba(135, 150, 184, .45); vertical-align: 1px; }
#skypanel .galkey .gk.web { height: 10px; border-radius: 50%; background: radial-gradient(circle, #f2f6ff 0, #7fb0ff 35%, rgba(40, 70, 160, .5) 65%, transparent 72%); vertical-align: -1px; }
#skypanel .galslice { margin: 2px 0 4px 22px; font-size: 10px; color: #a9b1c4; }
#skypanel .galslice[hidden] { display: none; }
#skypanel .galslice label { display: block; margin-bottom: 2px; }
#skypanel .galslice input[type=range] { display: block; width: 100%; max-width: 200px; margin: 1px 0 0; accent-color: #ffb357; }
#skypanel .galslice span { color: #d7def0; }
#skypanel .galslice button { font-size: 10px; }

/* The crewed space stations: always labelled (Satellites, STATIONS in sky.js). */
.pin.stationpin { color: #ffd25a; font-weight: 600; font-size: 11px; text-shadow: 0 0 3px #05070d, 0 0 6px #05070d; }
#skypanel .satfind { margin: 0 0 3px 22px; font-size: 10px; color: #a9b1c4; }
#skypanel .satfind button { font-size: 10px; }
#skypanel .satsearch { margin: 4px 0 6px 22px; }
#skypanel .satsearch input { width: 100%; box-sizing: border-box; font-size: 11px; padding: 3px 6px; background: #0d1220; color: #e6e9f2; border: 1px solid #39425a; border-radius: 4px; }
#skypanel .satsearch input:focus { outline: none; border-color: #ffd25a; }
#skypanel .satsearchnote { margin: 3px 0 0; font-size: 10px; color: #a9b1c4; }
#skypanel .satsearchnote:empty { display: none; }
#skypanel .satsearchnote button { font-size: 10px; }
#skypanel .satresults { list-style: none; margin: 3px 0 0; padding: 0; max-height: 180px; overflow-y: auto; }
#skypanel .satresults:empty { display: none; }
#skypanel .satresults li { margin: 0; }
#skypanel .satresults button { display: block; width: 100%; text-align: left; font-size: 10.5px; padding: 2px 3px; border-radius: 3px; text-decoration: none; }
#skypanel .satresults button:hover, #skypanel .satresults button:focus { background: #1b2336; }
#skypanel .satresults button span { color: #8c95aa; font-size: 9.5px; }
.satpin.satfound { animation: satfound 1.2s ease-out 4; }
@keyframes satfound { 0% { box-shadow: 0 0 0 0 rgba(255, 210, 90, 0.9); } 100% { box-shadow: 0 0 0 14px rgba(255, 210, 90, 0); } }
@media (prefers-reduced-motion: reduce) { .satpin.satfound { animation: none; outline: 2px solid #ffd25a; } }

/* --- What's happening (Happening in sky.js) -------------------------------- */
#skypanel .feed h2 { font-size: 12px; margin: 10px 0 4px; letter-spacing: .02em; text-transform: uppercase; color: #9aa6c4; }
#skypanel .feed h3 { font-size: 11px; font-weight: 600; margin: 8px 0 3px 6px; color: #c8d2ea; }
#skypanel .feedlist { list-style: none; margin: 0; padding: 0; }
#skypanel .feeditem button { display: grid; grid-template-columns: 16px 1fr; column-gap: 6px; width: 100%; text-align: left;
  margin: 0 0 2px; padding: 4px 6px; border: 1px solid transparent; border-radius: 5px; background: none; color: inherit; font: inherit; cursor: pointer; }
#skypanel .feeditem button:hover { border-color: #2c3550; background: rgba(120, 140, 190, .08); }
#skypanel .feeditem i { grid-row: span 2; font-style: normal; color: #9fb4e0; text-align: center; line-height: 1.5; }
#skypanel .feeditem b { font-size: 12px; font-weight: 600; color: #e6eaf4; }
#skypanel .feeditem span { font-size: 10.5px; color: #98a2b8; }
#skypanel .feeditem.now i { color: #8fe3a5; }
#skypanel .feeditem.now b::after { content: ' · now'; color: #8fe3a5; font-weight: 400; font-size: 10px; }
#skypanel .feeditem.hot i, #skypanel .feeditem.hot b::after { color: #ff8a6a; }
#skypanel .feedwait { font-size: 11px; color: #8d97ac; padding: 2px 6px; list-style: none; }
#skypanel .feedmore { font-size: 11px; margin: 2px 0 0 6px; }

/* The layer sections: shut, they are one line each; open, their switches and keys. */
#skypanel .layers { padding-top: 4px; }
#skypanel details.layersec { border-top: 1px solid #222a3c; padding: 2px 0; }
#skypanel details.layersec:first-child { border-top: none; }
#skypanel details.layersec > summary { cursor: pointer; padding: 6px 0; font-size: 12.5px; font-weight: 600; color: #dfe5f2; list-style: none; }
#skypanel details.layersec > summary::-webkit-details-marker { display: none; }
#skypanel details.layersec > summary::before { content: '▸'; display: inline-block; width: 14px; color: #8d97ac; }
#skypanel details.layersec[open] > summary::before { content: '▾'; }
#skypanel details.layersec .secsum { font-weight: 400; font-size: 10.5px; color: #8d97ac; }
/* The panel follows the scale (PanelScale in sky.js): the sections for other
   scales sit, closed, inside "Other layers". */
#skypanel details.othersec > summary { font-weight: 400; color: #aeb7ca; }
#skypanel #skyotherlayers { padding-left: 10px; border-left: 2px solid #222a3c; margin-left: 4px; }
#skypanel #skyotherlayers details.layersec:first-child { border-top: none; }
#skypanel .scalenote { margin: 0 0 6px 0; font-style: italic; }
#skypanel .scalenote button { font: inherit; font-style: normal; padding: 0; }
#skypanel .suntitle { margin-top: 8px; }
#skypanel .oortnote { margin-top: 6px; }
/* The top box: "The solar system, now", or, out among the stars, just the way home. */
#skyhome .homeback { display: none; }
body[data-scale="deep"] #skyhome .homeback { display: inline; }
body[data-scale="deep"] #skyhome .hometitle,
body[data-scale="deep"] #skynote,
body[data-scale="deep"] #skyfeedlocal { display: none; }
#skypanel .switch.sub { margin-left: 18px; font-size: 11.5px; }
/* A layer's status on its own line under its switch, so the switch itself stays plain to see. */
#skypanel .substatus { margin: -1px 0 4px 22px; font-size: 10px; line-height: 1.35; }
#skypanel .substatus:empty { display: none; }
#skypanel .isspass { margin: 2px 0 6px 22px; font-size: 11px; }
#skypanel .isspass label { display: block; color: #a9b1c4; margin-bottom: 2px; }
#skypanel .isspass input { width: 100%; max-width: 210px; }
#skypanel .passes { margin: 4px 0 0; padding-left: 16px; font-size: 11px; color: #c9d2e6; }
#skypanel .passes b { color: #ffd25a; font-weight: 600; }
#skypanel .passnote { font-size: 9.5px; margin: 3px 0 0; }

/* Labels for what the feed draws. */
.pin.evpin { font-size: 10.5px; padding: 0 0 0 8px; text-shadow: 0 0 3px #05070d, 0 0 6px #05070d; }
.pin.evpin.evfly { color: #ff9a80; }
.pin.evpin.evca { color: #ffffff; font-weight: 700; pointer-events: none; margin-top: 15px; }   /* below the asteroid's own label, which is often beside it */
.pin.evpin.evpathlab { color: #ffb8a6; font-style: italic; pointer-events: none; }
.pin.evpin.evshower { color: #a9d8ff; font-style: italic; }
.pin.evpin.evtr { color: #ffe0a6; }
.pin.evpin.ev-comet, .pin.evpin.ev-interstellar { color: #d8f0ff; }
#skypanel .showers { margin: 2px 0 4px; }
#skypanel .showershead { margin: 4px 0 2px; font-size: 12px; }
#skypanel .showerlist { list-style: none; margin: 0 0 0 22px; padding: 0; font-size: 11px; columns: 1; }
#skypanel .showerlist li { margin: 0 0 1px; }
#skypanel .showerlist input { margin: 0 4px 0 0; vertical-align: -1px; }
#skypanel .translist { margin: 0 0 4px 22px; font-size: 11px; }
#skypanel .translist > summary { cursor: pointer; color: var(--link, #8ab4ff); }
#skypanel .trlist { list-style: none; margin: 2px 0 0; padding: 0; max-height: 220px; overflow-y: auto; }
#skypanel .trpick { display: block; width: 100%; text-align: left; background: none; border: 0; margin: 0; padding: 2px 0; color: inherit; font: inherit; line-height: 1.35; cursor: pointer; }
#skypanel .trpick:hover .trname, #skypanel .trpick:focus-visible .trname { text-decoration: underline; }
#skypanel .trpick .tricon { display: inline-block; width: 1.2em; text-align: center; }
#skypanel .trpick.unplaced { opacity: .6; }
#skypanel .trpick[aria-pressed="true"] { background: rgba(120, 140, 190, .16); border-radius: 3px; }
#skypanel .trpick[aria-pressed="true"] .trname { color: #fff; font-weight: 600; }
/* The transient being shown: bold, flashing gold and red once a second. */
@keyframes trflash { 0%, 49.9% { color: #ffcf4a; } 50%, 100% { color: #ff3b30; } }
.pin.evpin.trflash { font-weight: 700; animation: trflash 1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .pin.evpin.trflash { animation: none; color: #ff5a4a; } }
#skypanel .galslice .webswitch { margin: 2px 0 5px; font-size: 11px; color: #d7def0; }
#skypanel .galslice .webswitch input { vertical-align: -2px; margin: 0 4px 0 0; }

/* The asteroid size filter, and the note on remembered settings (rememberLayers in sky.js). */
#skypanel .astmin { display: block; margin: 0 0 4px 22px; font-size: 11px; color: #c9d2e6; }
#skypanel .astmin select { font-size: 11px; padding: 0 2px; margin-left: 2px; }
#skypanel .layersnote { margin: 8px 0 0; font-size: 10px; line-height: 1.4; color: var(--ink-dim); }
#skypanel .layersnote button { font-size: 10px; }

/* A star's planets, close up (StarSystem in sky.js): one marker per planet,
   at its distance from the star. Not clickable: the details are in the panel. */
.pin.sysplanet { color: #d9dfec; font-size: 10.5px; pointer-events: none; cursor: default; }
.pin.sysplanet.hz { color: #7dff9a; }
.pin.sysplanet.crowded .nm { display: none; }
.pin.sysstar { font-size: 11.5px; font-weight: 600; pointer-events: none; cursor: default; }
.pin.sysstar .dot { width: 9px; height: 9px; }

/* The night sky and constellations (NightSky, Constellations in sky.js). */
#skypanel .conbox { margin-top: 8px; }
#skypanel .conpick { font-size: 11px; display: block; margin: 4px 0; }
#skypanel .conpick select { font: inherit; margin-left: 4px; max-width: 170px; }
#skypanel #con3d { font-size: 11px; }
.pin.conpin { opacity: 1; color: #bcd3ff; }
.pin.conname { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #86b4ff; pointer-events: none; }
.pin.conhere { font-size: 11px; color: #ffd98a; pointer-events: none; }