/* HabitableZone: this site is based on the original Habitable Zone discussion board created by Robert Shepherd. */
/* HabitableZone was created by Robert Shepherd. This updated code: copyright © 2026 Robert Lafon, all rights reserved. */
/* 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 the board's own tokens (style.css is
   loaded first) and borrows its palette, so the viewer looks like part of the
   board rather than a visitor from another site. */

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 panel ------------------------------------------------------------ */
#skypanel {
  position: fixed;
  top: 40px; left: 12px; bottom: 12px;
  width: 258px;
  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; }
#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; }

/* --- the locator ---------------------------------------------------------- */
.locator label { display: block; font-size: 11px; color: var(--ink-dim); margin-bottom: 3px; }
.findwrap { position: relative; }
#skyuser {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 12px;
  padding: 5px 7px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
}
#skyuser:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
/* The suggestions sit IN the flow rather than floating over what follows: in a
   narrow panel a dropdown would land squarely on the Locate button, which is
   the one thing somebody is about to press. */
.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); }
#skylocate {
  margin-top: 7px;
  font: inherit;
  font-size: 12px;
  padding: 4px 10px;
  color: var(--ink);
  background: var(--panel-3);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
}
#skylocate:hover { border-color: var(--accent); color: var(--accent); }
.located { font-size: 11px; margin: 8px 0 0 0; line-height: 1.5; min-height: 1em; }
.located .readout { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.located .miss { color: var(--ink-dim); }

/* --- 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 board'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; }

/* --- the locator's arrow -------------------------------------------------- */
#skyarrow[hidden] { display: none; }
#skyarrow {
  position: fixed;
  top: 0; left: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  pointer-events: none;
  transform-origin: left center;
  transition: opacity .2s;
}
/* The shaft is tilted so it can approach Earth without lying across Earth's own
   label; the name is turned back the other way so it still reads level. */
#skyarrow .who { transform: rotate(38deg); transform-origin: left center; }
#skyarrow svg { flex: none; filter: drop-shadow(0 0 4px rgba(0,0,0,.8)); }
#skyarrow .who {
  font-size: 13px;
  font-weight: bold;
  color: var(--accent);
  text-shadow: 0 0 6px #000, 0 0 2px #000;
}

@media (prefers-reduced-motion: reduce) {
  #skyarrow { transition: none; }
}

/* --- phones --------------------------------------------------------------- */
@media (max-width: 760px) {
  #skypanelbtn { display: block; }
  #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; }
.golist .golabel { width: 100%; margin: 8px 0 2px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #8a93a6; }

/* 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; }
.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; }
#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.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; }