/* The landing page's network: everything she is, for anybody.
 *
 * Its own copy of what the panel's Nexus looks like, beside the rest of
 * the landing page's look and never the panel's: the colours of the kinds,
 * the names over the points, the card. On the page it sits in the flow
 * like the record and the questions, head on the left; opened, the box it
 * is drawn in takes the whole window, over the mast and everything else.
 *
 * States, each a class nexus.js puts on the section:
 *
 *   is-loading  a thin line in the middle of the box, as long as the part
 *               that has arrived (`--part`)
 *   is-ready    the network fades in
 *   is-refused  a sentence in its place
 *
 * and on <html>: `is-nexus-open` while it covers the window, which is
 * also what stops the page scrolling underneath it, and `is-nexus-over`
 * while the pointer is on a point that can be picked up.
 *
 * Sealed parts are greyer and named in noise; that is the stage's and
 * the script's doing, and the one rule here is that noise is set in the
 * mono face, so it keeps its width while it changes.
 */

.nexus {
  --nexus-core:        #F2F5FF;
  --nexus-body:        #7596F3;
  --nexus-client:      #8FE3FF;
  --nexus-workspace:   #7FEBD9;
  --nexus-skill:       #8EF0A8;
  --nexus-schedule:    #D4F08A;
  --nexus-memory:      #FFD98A;
  --nexus-self:        #FFB58A;
  --nexus-personality: #FFA8E0;
  --nexus-feature:     #E0A8FF;
  --nexus-mind:        #A99CFF;
  --nexus-guard:       #A7B1C9;
  --nexus-halo: .9;

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  width: min(100%, 76rem);
  margin: 0 auto;
  padding: clamp(4rem, 9vh, 6.5rem) max(24px, env(safe-area-inset-right, 0px)) 0 max(24px, env(safe-area-inset-left, 0px));
}

.nexus__head { align-self: center; }

.nexus__lede {
  margin: 1.1rem 0 0;
  max-width: 24rem;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink);
}

.nexus__figures {
  margin: 1.4rem 0 0;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.nexus__figures:empty { display: none; }

/* The hubs by colour, each a way straight to its hub - built by nexus.js
 * once the network is there, and the chips of the card in every other
 * respect. Then the two looks a point can have that are not a colour. */
.nexus__legend {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  max-width: 24rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.nexus__legend:empty { display: none; }

.nexus__hub::before { box-shadow: 0 0 8px var(--c); }
.nexus__hub.is-sealed::before { box-shadow: none; }

.nexus__keys {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  max-width: 24rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}

.nexus__key {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.nexus__key::before {
  content: "";
  flex: none;
  align-self: center;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
}
.nexus__key--sealed::before { background: var(--ink-faint); }
.nexus__key--planned::before { border: 1px solid var(--light); }

.nexus__key span {
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-faint);
}

/* --- how to handle it, under the picture ----------------------------------- */

.nexus__how {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem;
  margin: 0;
  padding: 1.3rem .2rem 0;
  border-top: 1px solid var(--line);
}

.nexus__how dt {
  margin: 0 0 .45rem;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--light);
}

.nexus__how dd {
  margin: 0;
  font-size: .8rem;
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* --- the box it is drawn in ------------------------------------------------ */

.nexus__box {
  position: relative;
  height: clamp(24rem, 68vh, 42rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}

.nexus__box.is-open {
  position: fixed;
  inset: 0;
  z-index: 60;
  height: auto;
  border-radius: 0;
  background: var(--ground);
  animation: nexus-open var(--t-slow) var(--ease-out);
}

@keyframes nexus-open {
  from { opacity: 0; }
}

html.is-nexus-open,
html.is-nexus-open body { overflow: hidden; }

.nexus__stage {
  position: absolute;
  inset: 0;
  cursor: zoom-in;
}
.nexus__box.is-open .nexus__stage { cursor: grab; }
.nexus__box.is-open .nexus__stage:active { cursor: grabbing; }
html.is-nexus-over .nexus__box.is-open .nexus__stage { cursor: pointer; }

.nexus__stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  opacity: 0;
  transition: opacity var(--t-reveal) var(--ease-out);
}
.nexus.is-ready .nexus__stage canvas { opacity: 1; }

/* The two ways in and out: the corner of the picture, and the corner of
 * the window once it is open. */
.nexus__open,
.nexus__close {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-soft);
  background: var(--box-bg);
  -webkit-backdrop-filter: var(--box-blur);
          backdrop-filter: var(--box-blur);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out),
    transform var(--t-fast) var(--ease-out);
}
.nexus__open:hover,
.nexus__open:focus-visible,
.nexus__close:hover,
.nexus__close:focus-visible {
  color: var(--light);
  border-color: var(--line-strong);
  outline: none;
}
.nexus__open:active,
.nexus__close:active { transform: scale(.92); }
.nexus__open .glyph,
.nexus__close .glyph { width: 1.1rem; height: 1.1rem; }

.nexus__open { right: 1rem; bottom: 1rem; opacity: 0; transition-property: color, border-color, transform, opacity; }
.nexus.is-ready .nexus__open { opacity: 1; }
.nexus__box.is-open .nexus__open { display: none; }

.nexus__close {
  top: max(1rem, env(safe-area-inset-top, 0px));
  right: max(1rem, env(safe-area-inset-right, 0px));
}
.nexus__close[hidden] { display: none; }

/* The same, over the network while it is open, until it is touched. */
.nexus__hint {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: max(1.2rem, env(safe-area-inset-bottom, 0px));
  width: max-content;
  max-width: calc(100% - 2rem);
  margin: 0;
  padding: .6rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--box-bg);
  -webkit-backdrop-filter: var(--box-blur);
          backdrop-filter: var(--box-blur);
  font-family: var(--mono);
  font-size: .62rem;
  line-height: 1.9;
  letter-spacing: .1em;
  text-align: center;
  color: var(--ink-soft);
  transform: translate(-50%, .4rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out),
    visibility 0s linear var(--t-slow);
}

.nexus__box.is-open .nexus__hint.is-on {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.nexus__hint b { font-weight: 400; color: var(--ink-bright); }
.nexus__hint i { font-style: normal; color: var(--ink-faint); margin: 0 .45em; }

/* --- the names over the points ------------------------------------------- */

.nexus__labels {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.nexus__label {
  position: absolute;
  left: 0;
  top: 0;
  padding-top: 1px;
  white-space: nowrap;
  font-size: .68rem;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--ink);
  text-shadow: 0 0 6px rgba(0, 0, 0, .95), 0 0 2px rgba(0, 0, 0, .9);
  opacity: 0;
  will-change: transform, opacity;
}

.nexus__label--hub {
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c, var(--ink));
}

.nexus__label--core {
  font-size: .82rem;
  letter-spacing: .4em;
  color: var(--ink-bright);
}

.nexus__label--leaf { font-size: .62rem; }
.nexus__label--planned { font-style: italic; }
.nexus__label--sealed {
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: none;
  color: var(--ink-soft);
}
.nexus__label.is-picked { color: var(--ink-bright); }

/* --- how much of it is here, and why not ---------------------------------- */

.nexus__load {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(12rem, 50%);
  height: 2px;
  border-radius: 1px;
  overflow: hidden;
  transform: translate(-50%, -50%);
  background: var(--line);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t) var(--ease-out);
}
.nexus__load i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--light);
  box-shadow: 0 0 10px var(--light);
  transform: scaleX(var(--part, 0));
  transform-origin: left;
  transition: transform 150ms linear;
}
.nexus.is-loading .nexus__load { opacity: 1; }

.nexus__line {
  position: absolute;
  left: 1rem;
  right: 1rem;
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
  text-align: center;
  color: var(--warn-ink);
  pointer-events: none;
}
.nexus__line:empty { display: none; }

/* --- the card -------------------------------------------------------------- */

.nexus__card {
  --dot: var(--nexus-core);
  position: absolute;
  z-index: 3;
  top: calc(4.4rem + env(safe-area-inset-top, 0px));
  right: max(1rem, env(safe-area-inset-right, 0px));
  width: min(23rem, calc(100% - 2rem));
  max-height: calc(100% - 6rem - env(safe-area-inset-top, 0px));
  overflow: auto;
  overscroll-behavior: contain;
  isolation: isolate;
  padding: 1.05rem 1.15rem 1.15rem;
  border: 1px solid var(--box-line);
  border-radius: var(--radius-lg);
  background: var(--box-bg-still);
  -webkit-backdrop-filter: var(--box-blur);
          backdrop-filter: var(--box-blur);
  -webkit-user-select: text;
  user-select: text;
  animation: nexus-card var(--t) var(--ease-out);
}
.nexus__card[hidden] { display: none; }

/* What it is a part of shows as one hairline of its colour along the top,
 * rather than as a tint over the card. */
.nexus__card::before {
  content: "";
  position: absolute;
  left: 1.15rem;
  right: 1.15rem;
  top: 0;
  height: 1px;
  background: var(--dot);
  opacity: .8;
  pointer-events: none;
}

@keyframes nexus-card {
  from { opacity: 0; transform: translateY(.4rem); }
}

.nexus__trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem .35rem;
  margin-bottom: .55rem;
  font-size: .68rem;
  letter-spacing: .06em;
}
.nexus__trail:empty { display: none; }
.nexus__trail button + button::before {
  content: "›";
  margin-right: .35rem;
  color: var(--ink-faint);
}

.nexus__step,
.nexus__chip {
  font: inherit;
  color: var(--ink-soft);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease-out);
}
.nexus__step:hover,
.nexus__step:focus-visible { color: var(--ink-bright); }
.nexus__step.is-sealed,
.nexus__chip.is-sealed { font-family: var(--mono); letter-spacing: .06em; }

.nexus__head-row {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.nexus__dot {
  flex: none;
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: var(--dot);
  box-shadow: 0 0 12px var(--dot);
}
.nexus__card.is-planned .nexus__dot {
  background: transparent;
  border: 1.5px solid var(--dot);
  box-shadow: none;
}
.nexus__card.is-sealed .nexus__dot {
  background: var(--ink-faint);
  box-shadow: none;
}

.nexus__name {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--sans);
  font-style: normal;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink-bright);
  overflow-wrap: anywhere;
}
.nexus__card.is-sealed .nexus__name {
  font-family: var(--mono);
  letter-spacing: .08em;
  color: var(--ink-soft);
}

.nexus__count {
  flex: none;
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--ink-soft);
}

.nexus__about {
  margin: .6rem 0 0;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.nexus__about:empty { display: none; }

.nexus__facts {
  margin: .55rem 0 0;
  font-family: var(--mono);
  font-size: .72rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.nexus__facts:empty { display: none; }

.nexus__near {
  margin: .85rem 0 0;
  padding: .75rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.nexus__near:empty { display: none; }

.nexus__chip {
  --c: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .28rem .6rem .28rem .5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .72rem;
  color: var(--ink);
}
.nexus__chip::before {
  content: "";
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: var(--c);
}
.nexus__chip.is-planned::before { background: transparent; border: 1px solid var(--c); }
.nexus__chip.is-sealed { color: var(--ink-soft); }
.nexus__chip.is-sealed::before { background: var(--ink-faint); }
.nexus__chip:hover,
.nexus__chip:focus-visible {
  color: var(--ink-bright);
  border-color: var(--line-strong);
}

.nexus__more {
  align-self: center;
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--ink-faint);
}

/* Narrow: the head over the picture, and the card a sheet at the bottom. */
@media (max-width: 860px) {
  .nexus { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
  .nexus__box { height: clamp(22rem, 62vh, 34rem); margin-inline: -8px; }
  .nexus__how { grid-column: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 470px) {
  .nexus__how { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
}

@media (max-width: 700px) {
  .nexus__card {
    top: auto;
    left: .75rem;
    right: .75rem;
    bottom: max(.75rem, env(safe-area-inset-bottom, 0px));
    width: auto;
    max-height: 46%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nexus__box.is-open,
  .nexus__card { animation: none; }
  .nexus__stage canvas { transition: none; }
}