/* The solar system: dark space in light and dark, the whole screen, drawn
   in big pixels. A card beside the planet in view (below it on a phone)
   says which gate and line it is in, and asks its question. The crystal is
   a gem in the corner of the scene; solar-system.js keeps the button over
   it. */

/* Everything around the scene follows one system: three levels of ink, one
   size of label, one edge margin, one square for a stop. The route sits in
   the site's footer, so the footer shares it. solar-system.js reads the edge
   for the crystal. */
.solar, body[data-view="solar-system"] .bottom-line {
  --solar-ink: #f2f2ee;
  --solar-ink-2: rgb(242 242 238 / 0.6);
  --solar-ink-3: rgb(242 242 238 / 0.35);
  --solar-pink: #ff47b6;
  --solar-space: #040406;
  --solar-panel: rgb(6 6 10 / 0.86);
  --solar-panel-border: 2px solid var(--solar-ink);
  --solar-label: 400 11px/1.4 "Departure Mono", "Courier New", monospace;
  --solar-tracking: 1px;
  --solar-edge: 16px;
  /* The band along the bottom that the route runs through, and the
     crystal's clear space in the top corner. */
  --solar-bar: 46px;
  --solar-crystal: 64px;
  /* A stop: its share of the line (narrower on a phone, so the route
     fits), its square, and the square when it is the stop in view.
     Planets are filled; everything else is hollow. */
  --solar-cell: 11px;
  --solar-mark: 4px;
  --solar-mark-current: 8px;
  --solar-leg: 12px;
  --solar-line: linear-gradient(var(--solar-ink-3), var(--solar-ink-3));
  --solar-dots: repeating-linear-gradient(to right, var(--solar-ink-3) 0 2px, transparent 2px 5px);
  --solar-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 5' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h1v1H4zM5 1h1v1H5zM0 2h7v1H0zM5 3h1v1H5zM4 4h1v1H4z'/%3E%3C/svg%3E");
}
@media (min-width: 600px) {
  .solar, body[data-view="solar-system"] .bottom-line { --solar-edge: 32px; --solar-cell: 14px; }
}

.solar {
  position: relative;
  height: 100svh;
  overflow: hidden;
  background: var(--solar-space);
  color: var(--solar-ink);
}
.solar-pixels, .solar-text { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.solar-pixels { image-rendering: pixelated; touch-action: pan-y; cursor: grab; }
.solar-pixels.over { cursor: pointer; }
.solar-pixels.turning { cursor: grabbing; }
.solar-text { pointer-events: none; transition: opacity 0.3s ease-in; }
.solar.leaving .solar-text { opacity: 0; }

/* Beside the planet, between the crystal's corner and the route, an edge
   clear of the route's names. */
.solar-card {
  --below: calc(var(--solar-bar) + var(--solar-edge));
  position: absolute;
  top: calc(var(--solar-edge) + var(--solar-crystal));
  right: var(--solar-edge);
  bottom: var(--below);
  width: 320px;
  height: fit-content;
  max-height: calc(100% - var(--solar-edge) - var(--solar-crystal) - var(--below));
  margin-block: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 16px 16px;
  border: var(--solar-panel-border);
  background: var(--solar-panel);
  font-family: "Departure Mono", "Courier New", monospace;
  font-synthesis: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.solar-card.shown { opacity: 1; pointer-events: auto; }
.solar-card:focus { outline: none; }
.solar-planet + .solar-planet { margin-top: 12px; padding-top: 12px; border-top: 1px dotted var(--solar-ink-3); }
.solar-card p { margin: 0; }
.solar-name { font-size: 22px; line-height: 1.2; }
.solar-gate { margin-top: 4px; font-size: 15px; color: var(--solar-ink-2); }
.solar-retrograde { margin-top: 6px; color: var(--solar-pink); }
.solar-title { font-size: 20px; line-height: 1.3; }

/* What is measured, what is claimed, the question and its answers. A reply
   is pink: it is the card poking back. */
.solar-card .solar-label { margin-top: 14px; color: var(--solar-ink-2); }
.solar-card .solar-said { margin-top: 3px; font-size: 15px; line-height: 1.4; }
.solar-card .solar-question { margin-top: 16px; font-size: 17px; line-height: 1.3; }
.solar-answers { margin: 10px 0 0; padding: 0; list-style: none; }
.solar-answers li + li { margin-top: 6px; }
.solar-answer, .solar-pick, .solar-onward {
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
  background: none;
  cursor: pointer;
}
/* A choice: the number in a square, then the answer. Hover and the answer
   picked fill the square; the answers not picked fade. */
.solar-answer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 3px 0;
  color: var(--solar-ink-2);
  font-size: 15px;
  line-height: 20px;
  text-align: left;
}
.solar-key {
  flex: none;
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  font-size: 13px;
  line-height: 16px;
  text-align: center;
}
.solar-answer:hover:not(:disabled), .solar-answer:focus-visible, .solar-answer[aria-pressed="true"] { color: var(--solar-ink); }
.solar-answer:is(:hover:not(:disabled), [aria-pressed="true"]) .solar-key { background: var(--solar-ink); color: var(--solar-space); border-color: var(--solar-ink); }
.solar-answer:disabled { cursor: default; }
.solar-answer[aria-pressed="false"] { color: var(--solar-ink-3); }
.solar-gates { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin-top: 10px; }
.solar-pick { height: 30px; color: var(--solar-ink-2); font-size: 14px; }
.solar-pick:hover { background: var(--solar-ink); color: var(--solar-space); }
.solar-card .solar-poke { margin-top: 12px; font-size: 16px; line-height: 1.35; color: var(--solar-pink); }
.solar-card .solar-score { margin-top: 6px; font-size: 14px; color: var(--solar-ink-2); }
.solar-card .solar-today { margin-top: 0; }
.solar-corner { white-space: nowrap; }
.solar-card .solar-verdict { margin-top: 8px; font-size: 17px; line-height: 1.35; color: var(--solar-pink); }
/* The answers played back before the result, one line at a time. */
.solar-tally { margin: 8px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.35; }
.solar-tally li { display: flex; gap: 10px; animation: solar-tally 0.25s steps(3) both; }
.solar-tally li + li { margin-top: 4px; }
.solar-where { flex: none; width: 6.5em; color: var(--solar-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes solar-tally { from { opacity: 0; } }
.solar-card .solar-challenge { margin-top: 14px; padding-top: 12px; border-top: 1px dotted var(--solar-ink-3); }
/* A step on: a pixel arrow, then where it goes. */
.solar-onward {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 4px 0;
}
.solar-onward::before {
  content: "";
  flex: none;
  width: 14px;
  height: 10px;
  background: currentColor;
  -webkit-mask: var(--solar-arrow) center / 14px 10px no-repeat;
  mask: var(--solar-arrow) center / 14px 10px no-repeat;
}
.solar-onward:hover::before, .solar-onward:focus-visible::before { translate: 2px 0; }
.solar-choice { display: flex; gap: 20px; }
.solar-card button:focus-visible { outline: 1px dotted var(--solar-ink); outline-offset: 2px; }

/* How to move the scene, on the welcome card under its buttons. */
.solar-card .solar-hint { margin-top: 14px; color: var(--solar-ink-2); text-wrap: balance; }

.switch.solar-crystal {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--solar-crystal);
  height: var(--solar-crystal);
  border-radius: 50%;
}
.switch.solar-crystal:focus-visible { outline: 1px dotted var(--solar-ink); outline-offset: -4px; }

/* On a phone, and on any screen taller than it is wide, the card sits along
   the bottom, under the planet, above the route. */
@media (max-width: 599px), (max-aspect-ratio: 4/5) {
  .solar-card { top: auto; left: var(--solar-edge); width: auto; max-height: min(52svh, calc(100% - var(--solar-edge) - var(--solar-crystal) - var(--below))); }
  .solar-name { font-size: 20px; }
}

/* The whole view is Departure Mono, sharp at 11px and its multiples. Its
   small capitals, on the route and on the card, take the label's size and
   a whole pixel of tracking. */
body[data-view="solar-system"] .bottom-line, body[data-view="solar-system"] .bottom-line a {
  font: var(--solar-label);
  letter-spacing: var(--solar-tracking);
  text-transform: uppercase;
}
.solar-hint, .solar-retrograde, .solar-card .solar-label, .solar-onward {
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: var(--solar-tracking);
  text-transform: uppercase;
}

/* The footer is the tour's route, a line along the bottom over the scene,
   like a line on a transit map: a circle for each stop, the stop in view
   drawn bigger and pink. After the planets come the
   quiz and, at the right edge, Info, which opens the site's pages in a
   window over the scene. solar-system.js puts the route in the footer in
   place of the site's links. */
body[data-view="solar-system"] .bottom-line {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 31;
  display: block;
  margin: 0;
  padding: 0 var(--solar-edge);
  background: linear-gradient(to top, var(--solar-space) 55%, transparent) bottom / 100% var(--solar-bar) no-repeat;
  color: var(--solar-ink-2);
  pointer-events: none;
}
body[data-view="solar-system"] .bottom-line > :not(.solar-route) { display: none; }
.solar-route {
  display: flex;
  align-items: stretch;
  height: var(--solar-bar);
  margin: 0 calc((var(--solar-mark) - var(--solar-cell)) / 2);
  padding: 0;
  list-style: none;
  pointer-events: auto;
}
body:not([data-view="solar-system"]) .solar-route { display: none; }
.solar-route li { display: flex; align-items: center; }
.solar-route .solar-leg { gap: 3px; }
.solar-stop {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 22px;
  padding: 0;
  border: 0;
  color: var(--solar-ink-2);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  white-space: nowrap;
  cursor: pointer;
  background: var(--solar-line) center / 100% 1px no-repeat;
}
.solar-route li:first-child .solar-stop { background-size: 50% 1px; background-position: right center; }
.solar-stop[data-on] { color: var(--solar-ink); }
.solar-stop[aria-current] { color: var(--solar-pink); }
.solar-stop:hover { color: var(--solar-ink); }
.solar-stop:focus-visible { outline: 1px dotted var(--solar-ink); outline-offset: 0; }
/* The circle, on the route: a ring, or filled for a planet. */
.solar-stop::before {
  --size: var(--solar-mark);
  content: "";
  flex: none;
  width: var(--size);
  height: var(--size);
  margin-inline: calc((var(--solar-cell) - var(--size)) / 2);
  border-radius: 50%;
  background: var(--solar-space);
  box-shadow: inset 0 0 0 calc(var(--size) / 4) currentColor;
}
.solar-stop.planet::before { background: currentColor; }
.solar-stop:is([aria-current], [data-on])::before { --size: var(--solar-mark-current); }
/* A planet's name over its square, on hover and on keyboard focus. */
.solar-stop:not(.solar-named)::after {
  content: attr(data-name);
  position: absolute;
  left: 1px;
  bottom: calc(100% + 2px);
  display: none;
  padding: 0 4px;
  background: var(--solar-panel);
  color: var(--solar-ink);
}
.solar-stop:not(.solar-named):focus-visible::after { display: block; }
@media (hover: hover) {
  .solar-stop:not(.solar-named):hover::after { display: block; }
}
/* A stop with a name: the square, then the name. */
.solar-named { gap: 3px; background-size: var(--solar-cell) 1px; background-position: left center; }
.solar-route .solar-here { margin-left: 6px; width: calc(11ch + 11 * var(--solar-tracking)); line-height: 22px; white-space: nowrap; color: var(--solar-ink); }
/* The line carries on after the name, to the dotted leg. */
.solar-route .solar-here::after { content: ""; flex: auto; height: 1px; margin-left: 6px; background: var(--solar-line); }
/* A dotted leg of the line before the quiz and before Info. */
.solar-route .solar-leg::before {
  content: "";
  flex: none;
  width: var(--solar-leg);
  height: 1px;
  background: var(--solar-dots);
}
.solar-route .solar-end { flex: auto; }
.solar-route .solar-end::before { flex: auto; min-width: var(--solar-leg); }
/* Info: a name at the end of the line, without a square. */
.solar-route .solar-info {
  display: inline-flex;
  align-items: center;
  height: 22px;
  margin-right: calc((var(--solar-cell) - var(--solar-mark)) / 2);
  padding-left: 6px;
  color: var(--solar-ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.solar-route .solar-info:hover { color: var(--solar-ink); }
.solar-route .solar-info:focus-visible { outline: 1px dotted var(--solar-ink); outline-offset: 0; }
/* View, after Info. Opened, its list takes Info's place along the end of the
   line, the view in sight pink. Under 1100px there is no room beside the
   planets and the quiz: the list covers the route, in rows, with View kept
   at its right end. */
.solar-route .solar-info { order: 2; }
.solar-route .solar-view,
.solar-route .solar-view-option {
  display: inline-flex;
  align-items: center;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--solar-ink-2);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.solar-route .solar-view { position: relative; z-index: 1; order: 3; margin-right: calc((var(--solar-cell) - var(--solar-mark)) / 2); padding-left: 16px; }
.solar-route .solar-view[aria-expanded="true"] { color: var(--solar-ink); }
.solar-route .solar-views { display: flex; order: 1; gap: 0 var(--solar-edge); }
.solar-route .solar-views[hidden] { display: none; }
.solar-route .solar-end:has(.solar-views:not([hidden])) .solar-info { display: none; }
.solar-route .solar-view-option[aria-checked="true"] { color: var(--solar-pink); }
.solar-route :is(.solar-view, .solar-view-option):hover,
.solar-route .solar-view-option:focus-visible { color: var(--solar-ink); }
.solar-route .solar-view-option[aria-checked="true"]:is(:hover, :focus-visible) { color: var(--solar-pink); }
.solar-route :is(.solar-view, .solar-view-option):focus-visible { outline: 1px dotted var(--solar-ink); outline-offset: 0; }
@media (pointer: coarse) {
  .solar-route .solar-info { height: 40px; }
  .solar-route :is(.solar-view, .solar-view-option) { height: 40px; }
}
@media (max-width: 1099px) {
  .solar-route { position: relative; }
  .solar-route .solar-views {
    position: absolute;
    inset: auto 0 0 0;
    min-height: var(--solar-bar);
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-end;
    gap: 0 12px;
    padding-right: calc(4ch + 4 * var(--solar-tracking) + 16px + 5px);
    background: var(--solar-space);
  }
}
@media (max-width: 1099px) and (pointer: coarse) {
  .solar-viewing .solar-card { opacity: 0; pointer-events: none; }
}
/* On a phone the squares are too small to tell apart or hit: the route is
   the name of the stop in view, then the quiz and Info. The tour moves on by
   a tap in the scene or the card's own buttons. */
@media (max-width: 599px) {
  .solar-route li:not(.solar-here, .solar-leg) { display: none; }
  .solar-route .solar-here { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .solar-card { transition: none; }
  .solar-tally li { animation: none; }
}