/* The network map (ticket 001040, js/netmap/): the estate as an HD-2D floating pyramid at the top of
   the landing page. `.netmap__view` is the picture (role="img") and gives its layers a perspective;
   `.netmap__world` keeps them in 3D so each pixel layer sits on its own plane. The glass chips, the
   legend, the card and the links over each node live in `.netmap__hud`, a sibling of the picture. The
   script writes places and the tilt through the CSSOM: the content security policy has no inline style. */

/* The holder reserves the band's space from the first paint, so the programs below never jump when
   the map arrives. The aspect ratio alone sizes the box (the canvases are 600x304): no max-height,
   which would stretch the pixels. */
.netmap-holder {
  width: 100%;
  max-width: 72rem;
  aspect-ratio: 75 / 38;
  margin: 0 auto 1.25rem;
}

.netmap-holder[hidden] {
  display: none;
}

.netmap,
.netmap__field {
  position: relative;
  width: 100%;
  height: 100%;
}

.netmap__view {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  perspective: 1200px;
  perspective-origin: 50% 40%;
  border-radius: var(--radius, 1rem);
  box-shadow:
    0 0 0 1px var(--border-strong, rgba(255, 255, 255, 0.11)),
    0 24px 60px -24px rgba(40, 60, 160, 0.55);
  background: #070b1a;
}

.netmap__world {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: 50% 45%;
  animation: netmap-fly-in 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes netmap-fly-in {
  from {
    opacity: 0;
    translate: 0 4%;
    scale: 1.12;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

.netmap__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 45%;
  pointer-events: none;
}

.netmap__layer--sky,
.netmap__layer--pyramid,
.netmap__layer--actors,
.netmap__layer--front {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Depth of field: the sky far back and soft, the pyramid sharp, the near branches big and blurred. Each
   scale() cancels the size change of its depth (1200 / (1200 + z)). */
.netmap__layer--sky {
  transform: translateZ(-360px) scale(1.3);
  filter: blur(1.2px) saturate(1.1);
}

.netmap__layer--pyramid,
.netmap__layer--actors {
  transform: translateZ(0);
}

.netmap__layer--light {
  transform: translateZ(0);
  mix-blend-mode: screen;
}

.netmap__layer--front {
  transform: translateZ(160px) scale(0.88);
  filter: blur(3px);
}

/* Tilt-shift: three stacked backdrop blurs at the top and at the bottom, each masked toward the edge. */
.netmap__shift {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
}

.netmap__shift--top {
  top: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
}

.netmap__shift--bottom {
  bottom: 0;
  -webkit-mask-image: linear-gradient(to top, #000, transparent);
  mask-image: linear-gradient(to top, #000, transparent);
}

.netmap__shift--a {
  height: 12%;
}

.netmap__shift--b {
  height: 7%;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.netmap__shift--c {
  height: 3.5%;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.netmap__vignette,
.netmap__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.netmap__vignette {
  z-index: 3;
  background: radial-gradient(ellipse at 50% 42%, transparent 50%, rgba(0, 0, 0, 0.6));
}

.netmap__grain {
  z-index: 4;
  background-image: var(--depth-grain);
  opacity: 0.8;
}

/* ---- the HUD over the picture ---- */

.netmap__hud {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  font-size: 0.75rem;
}

.netmap__title {
  position: absolute;
  top: 3.5%;
  left: 2.2%;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.netmap__eyebrow {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--fs-2xs);
  letter-spacing: 0.18em;
  color: #cfe9ff;
  text-shadow: 0 0 10px rgba(143, 243, 255, 0.7);
}

.netmap__demo {
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.65rem;
  color: #2a1d00;
  background: #ffd35a;
}

/* One row along the bottom edge (ticket 001093). Wrapped to two lines the box was about 80px tall and rose
   over the PLANTED wall's strip of counts; one row is about 28px, under the pyramid's base. */
.netmap__legend {
  position: absolute;
  right: 2%;
  bottom: 3.5%;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25rem 0.75rem;
  max-width: 96%;
  margin: 0;
  padding: 0.35rem 0.65rem;
  list-style: none;
  border-radius: 0.6rem;
  color: #cbd3f0;
  font-size: 0.66rem;
  background: rgba(10, 14, 38, 0.55) !important;
  border: 1px solid rgba(160, 190, 255, 0.18) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
}

.netmap__key {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--fs-2xs);
  white-space: nowrap;
}

.netmap__swatch {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}

.netmap__key--link .netmap__swatch {
  background: #9ad8ff;
  box-shadow: 0 0 6px #9ad8ff;
}

.netmap__key--site .netmap__swatch {
  background: #ffb84a;
  box-shadow: 0 0 6px #ffb84a;
}

.netmap__key--marker .netmap__swatch {
  background: #5ef2ff;
  box-shadow: 0 0 6px #5ef2ff;
}

.netmap__key--token .netmap__swatch {
  background: #ffd35a;
  box-shadow: 0 0 6px #ffd35a;
}

.netmap__key--file .netmap__swatch {
  background: #c79bff;
  box-shadow: 0 0 6px #c79bff;
}

.netmap__key--attack .netmap__swatch {
  background: #ff4a3d;
  box-shadow: 0 0 6px #ff4a3d;
}

.netmap__key--template .netmap__swatch {
  background: #7dff9a;
  box-shadow: 0 0 6px #7dff9a;
}

/* The links over each node: invisible boxes until focused. */
.netmap__hits {
  position: absolute;
  inset: 0;
}

.netmap__hit {
  position: absolute;
  pointer-events: auto;
  border-radius: 0.4rem;
  cursor: pointer;
}

.netmap__hit:focus-visible {
  outline: 2px solid #8ff3ff;
  outline-offset: 2px;
}

/* The card for the hovered node: a glass plate beside it. */
.netmap__tip {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 11rem;
  max-width: 17rem;
  margin-left: 0.6rem;
  padding: 0.5rem 0.7rem;
  border-radius: 0.7rem;
  color: #e9eeff;
  background: rgba(12, 16, 44, 0.72) !important;
  border: 1px solid rgba(170, 200, 255, 0.3) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
  backdrop-filter: blur(14px) saturate(1.4) !important;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: netmap-tip-in 140ms ease-out;
}

.netmap__tip--left {
  margin-left: 0;
  translate: calc(-100% - 0.6rem) 0;
}

.netmap__tip--up {
  translate: 0 -100%;
}

.netmap__tip--left.netmap__tip--up {
  translate: calc(-100% - 0.6rem) -100%;
}

@keyframes netmap-tip-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

.netmap__tip-title {
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.netmap__tip-sub {
  color: #9fb0e0;
  font-size: 0.68rem;
}

.netmap__tip-lines {
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.7rem;
  color: #d6dcf5;
}

.netmap__tip-lines li {
  overflow-wrap: anywhere;
}

.netmap__tip[hidden] {
  display: none;
}

/* Narrow screens: the chips and legend would cover the pyramid. Keep the picture, drop the counts. The
   legend's one row is about 720px wide, so it goes below 960px, where the picture is narrower than that. */
@media (max-width: 960px) {
  .netmap__legend {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .netmap__world,
  .netmap__tip {
    animation: none;
  }
}

@media (forced-colors: active) {
  .netmap__shift,
  .netmap__vignette,
  .netmap__grain {
    display: none;
  }
}


/* The Meeting Sites editor under the map (ticket 001126, js/netmap/sites_panel.js). */
.netmap-sites-host {
  width: 100%;
  max-width: 72rem;
  margin: -0.5rem auto 1.25rem;
}

.netmap-sites {
  padding: 1rem 1.25rem 1.25rem;
  border: 1px solid rgba(255, 184, 74, 0.35);
}

.netmap-sites[hidden] {
  display: none;
}

.netmap-sites__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.netmap-sites__title {
  margin: 0;
  font-size: 1.15rem;
}

.netmap-sites__sub,
.netmap-sites__hint {
  margin: 0.25rem 0 0.5rem;
  color: var(--text-secondary, #a9b0c8);
  font-size: 0.9rem;
}

.netmap-sites__group h3 {
  margin: 1rem 0 0.4rem;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.netmap-sites__list,
.netmap-sites__kinds {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.netmap-sites__kinds {
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.netmap-sites__row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.netmap-sites__row--focus {
  border-color: rgba(255, 184, 74, 0.8);
  box-shadow: 0 0 0 1px rgba(255, 184, 74, 0.35);
}

.netmap-sites__row--off .netmap-sites__name strong {
  opacity: 0.7;
}

.netmap-sites__lamp {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
}

.netmap-sites__lamp--on {
  background: #ffb84a;
  box-shadow: 0 0 8px #ffb84a;
}

.netmap-sites__lamp--off {
  background: #5a5a6a;
}

.netmap-sites__name {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.netmap-sites__meta {
  color: var(--text-secondary, #a9b0c8);
  font-size: 0.82rem;
}

.netmap-sites__state {
  font-size: 0.82rem;
  color: var(--text-secondary, #a9b0c8);
}

.netmap-sites__actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.netmap-sites__kind {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.7rem 0.8rem;
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.netmap-sites__kind .btn {
  align-self: flex-start;
  margin-top: 0.25rem;
}

.netmap-sites__note {
  margin: 0.5rem 0;
  font-size: 0.9rem;
}

.netmap-sites__note--ok {
  color: #3fdc6a;
}

.netmap-sites__note--error {
  color: #ff7a6e;
}

.netmap-sites__confirm,
.netmap-sites__restart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
  padding: 0.6rem 0.8rem;
  border-radius: 0.6rem;
  background: rgba(255, 184, 74, 0.08);
  border: 1px solid rgba(255, 184, 74, 0.3);
}

.netmap-sites__confirm p,
.netmap-sites__restart p {
  margin: 0;
  flex: 1 1 18rem;
}

@media (max-width: 40rem) {
  .netmap-sites__row {
    grid-template-columns: auto 1fr;
  }
  .netmap-sites__state,
  .netmap-sites__actions {
    grid-column: 2;
    justify-content: flex-start;
  }
}