/* The text pages open in a window over the scene, on the view's grid: the
   edge margin is the unit for its insets, its padding and its columns.
   It keeps a whole margin clear below the crystal's corner and above the
   route, and lines up with the crystal and the card on the right edge.
   Along its top, the pages and a close X; clicking outside the window
   closes it too. */
.solar-legal-overlay {
  position: fixed;
  inset: 0;
  z-index: 32;
  background: rgba(4, 4, 6, 0.42);
  color: #f2f2ee;
}
.solar-legal-overlay[hidden] { display: none; }
.solar-legal-window {
  position: absolute;
  top: calc(2 * var(--solar-edge) + var(--solar-crystal));
  bottom: calc(var(--solar-bar) + var(--solar-edge));
  left: 50%;
  display: flex;
  flex-direction: column;
  width: min(1216px, calc(100% - 2 * var(--solar-edge)));
  border: 2px solid #f2f2ee;
  background: rgb(6 6 10 / 0.94);
  transform: translateX(-50%);
}
.solar-legal-bar {
  display: flex;
  flex: none;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--solar-edge);
  padding: calc(var(--solar-edge) / 2) var(--solar-edge) 0;
}
.solar-legal-body {
  flex: 1;
  min-height: 0;
  display: flex;
  padding: calc(var(--solar-edge) / 2) var(--solar-edge) var(--solar-edge);
}
.solar-legal-body > .solar-legal { flex: 1; }
/* The pages by name, the open page in full ink. */
.solar-legal-pages { display: flex; flex-wrap: wrap; gap: 0 var(--solar-edge); }
.solar-legal-pages a {
  display: inline-flex;
  align-items: center;
  min-height: 33px;
  color: rgb(242 242 238 / 0.6);
  font: 400 11px/1.4 "Departure Mono", "Courier New", monospace;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
}
.solar-legal-pages a:is(:hover, [aria-current]) { color: #f2f2ee; }
.solar-legal-close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
  margin-right: -9.5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgb(242 242 238 / 0.6);
  cursor: pointer;
}
.solar-legal-close svg { display: block; fill: currentColor; }
.solar-legal-close:hover { color: #f2f2ee; }
.solar-legal-pages a:focus-visible,
.solar-legal-close:focus-visible { outline: 1px dotted #f2f2ee; outline-offset: 2px; }
.solar-crystal { z-index: 36; }
body.solar-legal-open { overflow: hidden; }
@media (pointer: coarse) {
  .solar-legal-pages a { min-height: 40px; }
  .solar-legal-close { width: 40px; height: 40px; margin-right: -13px; }
}
@media (max-width: 899px) {
  .solar-legal-overlay { background: rgba(4, 4, 6, 0.58); }
  .solar-legal-window { left: var(--solar-edge); width: auto; right: var(--solar-edge); transform: none; }
  .solar-legal-body { display: block; overflow: auto; overscroll-behavior: contain; }
}