/* CodeUniverse — star map, package list and package pages.
   Builds on multiverse.css and observatory.css; this file only adds what the
   20-package evidence needs. */

/* ---------- star map ---------- */
.code-star-map {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.code-sector-map {
  position: relative;
  width: 100%;
}

.planet-field {
  position: absolute;
  inset: 0;
}

.planet {
  position: absolute;
  left: calc(var(--px) / 900 * 100%);
  top: calc(var(--py) / 500 * 100%);
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: .35rem;
  padding: .4rem .2rem;
  text-decoration: none;
  color: inherit;
  border-radius: .75rem;
}

.planet-dot {
  width: calc(var(--pr) * 1px);
  height: calc(var(--pr) * 1px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d9f2ea 0%, #7fc6b4 45%, rgba(63, 116, 105, .35) 100%);
  box-shadow: 0 0 12px rgba(150, 220, 203, .35);
  transition: transform .25s ease, box-shadow .25s ease;
}

.planet-name {
  font-size: .78rem;
  letter-spacing: .02em;
  color: #cfe6e0;
  white-space: nowrap;
}

.planet-ratio {
  font-family: var(--font-mono, monospace);
  font-size: .68rem;
  color: #8fb7ae;
}

.planet:hover .planet-dot,
.planet:focus-visible .planet-dot {
  transform: scale(1.25);
  box-shadow: 0 0 20px rgba(180, 240, 224, .6);
}

.planet:focus-visible {
  outline: 1px solid #a8d8ca;
  outline-offset: 2px;
}

.return-bar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }

.map-toggle {
  font: inherit;
  margin-left: auto;
  color: #cfe6e0;
  background: transparent;
  border: 1px solid rgba(168, 216, 202, .45);
  border-radius: 999px;
  padding: .45rem 1rem;
  cursor: pointer;
}

.map-toggle:hover,
.map-toggle:focus-visible {
  border-color: #a8d8ca;
  color: #eafaf4;
}

/* the map gives way to the list without losing the content underneath */
/* With scripting the first screen holds still: nothing scrolls and the map is
   sized to fit it, so the star field cannot slide away from its stars. */
html.code-entry:not(.is-listing),
html.code-entry:not(.is-listing) body {
  overflow: hidden;
}

html.code-entry:not(.is-listing) .code-star-map {
  min-height: auto;
  padding-block: clamp(.75rem, 2svh, 1.75rem) .75rem;
}

html.code-entry:not(.is-listing) .code-sector-map {
  max-height: calc(100svh - 21rem);
  min-height: 0;
  margin-block: 0;
}

/* With scripting, the first screen is the star map alone. The list is laid out in
   the same region while the stars travel, so each star lands on its own row
   without the page shifting. Without scripting both bands are present and the
   map's planets remain real links. */
.code-stage {
  position: relative;
}

html.code-entry:not(.is-listing):not(.is-morphing) #list-view,
html.code-entry:not(.is-listing) .code-overview-band {
  display: none;
}

/* While the stars travel, the map keeps only the names: the dots have lifted off
   and are the same elements now flying. */
html.js.is-flying .planet-dot {
  opacity: 0;
}

html.js.is-flying .planet-name,
html.js.is-flying .planet-ratio {
  transition: opacity .9s ease;
}

html.js.is-morphing #list-view {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  pointer-events: none;
}

html.js.is-listing #map-view {
  display: none;
}

html.js.is-listing #list-view {
  opacity: 1;
}

.flight-layer {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.flight-star {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e8fbf5 0%, #7fc6b4 42%, rgba(63, 116, 105, .3) 100%);
  box-shadow: 0 0 14px rgba(180, 240, 224, .5);
  will-change: transform;
}

/* ---------- package list ---------- */
.code-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.package-row {
  border-top: 1px solid #bfd0ba2a;
  padding: 25px 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 190px;
  gap: 22px;
  align-items: center;
}

.row-star {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d9f2ea 0%, #7fc6b4 45%, rgba(63, 116, 105, .35) 100%);
  box-shadow: 0 0 12px rgba(150, 220, 203, .35);
  opacity: 0;
  transition: opacity .5s ease;
}

.is-listing .row-star { opacity: 1; }

html.js.is-morphing .row-star { opacity: 0; }

.package-row h3 {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 430;
  line-height: 1.4;
  margin: 0 0 8px;
}

.package-row h3 a {
  color: #dff3ec;
  text-decoration: none;
  border-bottom: 1px solid rgba(168, 216, 202, .35);
}

.package-row h3 a:hover,
.package-row h3 a:focus-visible {
  border-bottom-color: #a8d8ca;
}

.row-scenario {
  color: #99aeb0;
  font-size: 13px;
  line-height: 1.8;
  margin: 0;
  max-width: 880px;
}

.row-metrics {
  margin: 0;
  text-align: right;
  display: grid;
  gap: .3rem;
}

.row-ratio {
  font-family: var(--mono, monospace);
  font-size: 19px;
  color: #e6f6f1;
}

.row-detail {
  font-size: 11px;
  color: #8fb7ae;
}

/* the star field dims as the packages move into the list */
.skyfield.is-dimmed {
  opacity: .16;
  transition: opacity .9s ease;
}

.flying-star {
  position: fixed;
  z-index: 5;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d9f2ea 0%, #7fc6b4 45%, rgba(63, 116, 105, .35) 100%);
  box-shadow: 0 0 14px rgba(180, 240, 224, .55);
  transition: transform 1.05s cubic-bezier(.4, 0, .2, 1), opacity .55s ease .5s;
}

@media (max-width: 760px) {
  .package-row {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 14px;
  }

  .row-metrics {
    grid-column: 2;
    text-align: left;
  }
}

/* ---------- shared bands ---------- */
.band-code {
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}

.chart-grid-code {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.chart-wide {
  grid-column: 1 / -1;
}

.code-qualifications {
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  padding: 0 0 0 1.1rem;
  display: grid;
  gap: .6rem;
  color: #b9d3cc;
  font-size: .95rem;
  line-height: 1.6;
  max-width: 62rem;
}

.code-list .num,
.code-package-main .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono, monospace);
}

.code-list td:first-child a {
  color: #dff3ec;
  text-decoration: none;
  border-bottom: 1px solid rgba(168, 216, 202, .35);
}

.code-list td:first-child a:hover,
.code-list td:first-child a:focus-visible {
  border-bottom-color: #a8d8ca;
}

/* ---------- package pages ---------- */
.code-package-main {
  padding-bottom: clamp(2rem, 5vw, 4rem);
}

.code-package-main .package-head {
  padding: clamp(2rem, 5vw, 3.5rem) 0 1rem;
}

.code-package-main .data-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin-top: 1.25rem;
}

.code-package-main .data-meta span {
  font-size: .9rem;
  color: #b9d3cc;
}

.code-package-main .data-meta strong {
  color: #e6f6f1;
  margin-right: .35rem;
}

.code-back-link {
  display: inline-block;
  margin-top: 1.5rem;
  color: #cfe6e0;
}

.code-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  margin-top: .75rem;
  font-size: .82rem;
  color: #9fbdb6;
}

.code-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.code-chart-legend i {
  width: .7rem;
  height: .7rem;
  border-radius: 2px;
  display: inline-block;
}

.accel-line {
  margin-top: 1.25rem;
  font-size: 1.05rem;
  color: #dff3ec;
  letter-spacing: .01em;
}

.accel-line strong {
  color: #b9d3cc;
  font-weight: 400;
  margin-right: .5rem;
}