#links-canvas {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

#offscreen-indicators {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.offscreen-indicator {
  pointer-events: auto;
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 999px;
  color: #111;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
}

.offscreen-indicator:hover {
  background: #fffaf0;
}

.offscreen-indicator .label {
  font-family: "DM Serif Display", serif;
  font-weight: normal;
  font-variant: normal;
  font-size: 13px;
}

.offscreen-indicator.parent {
  border-color: goldenrod;
  box-shadow: 0 2px 8px rgba(218, 165, 32, 0.35);
}

.offscreen-indicator.child {
  border-color: #2a9d8f;
  box-shadow: 0 2px 8px rgba(42, 157, 143, 0.35);
}

/* Pinned chips: blue for the active primary, green for the secondaries
   (direct neighbors). Click a green chip to promote it to primary. */
.offscreen-indicator.pinned {
  color: white;
}
.offscreen-indicator.pinned.primary {
  background: steelblue;
  border-color: steelblue;
  box-shadow: 0 2px 8px rgba(70, 130, 180, 0.45);
}
.offscreen-indicator.pinned.primary:hover { background: #4178a8; }

.offscreen-indicator.pinned.secondary {
  background: #2a9d8f;
  border-color: #2a9d8f;
  box-shadow: 0 2px 8px rgba(42, 157, 143, 0.45);
}
.offscreen-indicator.pinned.secondary:hover { background: #1f7c70; }

#container {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.dag-dot {
  cursor: pointer;
}

.dag-dot.field-culture    { fill: hsl(var(--hs1), var(--lumin1)); }
.dag-dot.field-design     { fill: hsl(var(--hs2), var(--lumin1)); }
.dag-dot.field-general    { fill: hsl(var(--hs3), var(--lumin1)); }
.dag-dot.field-geography  { fill: hsl(var(--hs4), var(--lumin1)); }
.dag-dot.field-math       { fill: hsl(var(--hs5), var(--lumin1)); }
.dag-dot.field-science    { fill: hsl(var(--hs6), var(--lumin1)); }
.dag-dot.field-space      { fill: hsl(var(--hs7), var(--lumin1)); }
.dag-dot.field-war        { fill: hsl(var(--hs8), var(--lumin1)); }
.dag-dot.field-unknown    { fill: hsl(var(--hs9), var(--lumin1)); }

:root {
  --zoom: 1;
}

.dag-dot {
  r: calc(4px / var(--zoom));
  stroke: rgba(0, 0, 0, 0.35);
  stroke-width: calc(1px / var(--zoom));
}

.dag-dot:hover {
  stroke: goldenrod;
  stroke-width: calc(2px / var(--zoom));
}

.dag-label {
  cursor: pointer;
}

/* Labels added transiently on hover shouldn't capture pointer events
   themselves — otherwise hovering a neighbor label would re-trigger hover. */
.hover-labels .dag-label {
  pointer-events: none;
}

.dag-label-bg {
  fill: rgba(255, 255, 255, 0.95);
  stroke: rgba(0, 0, 0, 0.08);
  stroke-width: calc(1px / var(--zoom));
  /* Width comes from per-element --label-css-width; height is line-height + pad. */
  width: calc(var(--label-css-width, 80px) / var(--zoom));
  height: calc(20px / var(--zoom));
  x: calc(var(--label-css-width, 80px) / -2 / var(--zoom));
  y: calc(-2px / var(--zoom));
  rx: calc(3px / var(--zoom));
  ry: calc(3px / var(--zoom));
}

.dag-label-text {
  font-family: "DM Serif Display", serif;
  font-size: calc(13px / var(--zoom));
  fill: #111;
  text-anchor: middle;
  dominant-baseline: hanging;
}

.dag-lane-label {
  font-family: "DM Serif Display", serif;
  font-size: calc(clamp(32px, 64px / var(--zoom), 180px));
  fill: rgba(0, 0, 0, 0.08);
  font-variant: small-caps;
  letter-spacing: 2px;
  pointer-events: none;
  text-anchor: start;
  dominant-baseline: hanging;
}

.dag-axis-tick {
  stroke: rgba(0, 0, 0, 0.18);
  stroke-width: calc(1px / var(--zoom));
  stroke-dasharray: calc(4px / var(--zoom)) calc(4px / var(--zoom));
}

.dag-axis-label {
  font-family: "DM Serif Display", serif;
  font-size: calc(14px / var(--zoom));
  fill: rgba(0, 0, 0, 0.75);
  text-anchor: end;
  pointer-events: none;
}

/* Hover cards keep pointer events so cursor stays "on" the card after the
   user moves from the small underlying dot/label onto the larger card. */
.hover-cards { pointer-events: auto; }

/* Pinned cards behave like hover cards — clickable to unpin. */
.pinned-cards { pointer-events: auto; }

/* Cmd+F search overlay. Shown only while body has the .searching class. */
#search-input {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  padding: 6px 14px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 999px;
  font: 14px "DM Serif Display", serif;
  min-width: 320px;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  display: none;
}
#search-input:focus { outline: none; border-color: goldenrod; }
body.searching #search-input { display: block; }

/* Goldenrod glow around any card whose node matches the active search query. */
.card.search-match {
  filter: drop-shadow(0 0 6px goldenrod) drop-shadow(0 0 6px goldenrod);
}

/* Goldenrod fill on matched dots so they pop at the lowest zooms where the
   muted field colors are otherwise the only signal. */
.dag-dot.search-match {
  fill: goldenrod;
  stroke: goldenrod;
  stroke-width: calc(2px / var(--zoom));
}

/* While a query is active (>= MIN_SEARCH_CHARS), hide auto labels so matches
   stand out. Sticky labels (user-pinned) and search labels stay visible. */
body.search-active .labels .dag-label { display: none; }

/* Pill list of off-screen search matches, anchored under the search bar.
   Reuses .offscreen-indicator chip styling for visual consistency. */
#search-results {
  position: absolute;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  max-width: 80vw;
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  pointer-events: none;
}
body.searching #search-results:not(:empty) { display: flex; }
#search-results .offscreen-indicator { position: static; transform: none; }
#search-results .more {
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px dashed rgba(0, 0, 0, 0.25);
  border-radius: 999px;
  color: #555;
  font: 13px "DM Serif Display", serif;
  white-space: nowrap;
}

.offscreen-indicator.search {
  border-color: goldenrod;
  box-shadow: 0 2px 8px rgba(218, 165, 32, 0.35);
}