/* Fig. 6, interactive: the concept-connections network (static/js/figs/network.js). Colours from the stage tokens of
   figs.css: the six query terms in the paper's blue (--fig-closure) with a glow, media bias itself warm (--fig-warm),
   the lit links and the selection in --fig-accent. */

[data-fig="network"] {
  --nw-q-fill: color-mix(in srgb, var(--fig-closure) 42%, var(--fig-panel));
  --nw-mb-fill: color-mix(in srgb, var(--fig-warm) 30%, var(--fig-panel));
  --nw-o-stroke: color-mix(in srgb, var(--fig-closure) 38%, transparent);
  --nw-hot: color-mix(in srgb, var(--fig-accent) 60%, #fff); /* the mark pointed at: the accent, brightened */
}

/* ------------------------------------------------------------ the chart's box (scrolls sideways on a phone) */
.nw-scroll {
  position: relative; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  margin: 0 -0.5rem; padding: 0.4rem 0.5rem; border-radius: 12px; /* room for the glow at the edges */
  background: radial-gradient(ellipse 24% 65% at 82% 50%, rgba(78, 163, 221, 0.08) 0%, rgba(78, 163, 221, 0) 70%),
    radial-gradient(ellipse 40% 60% at 40% 50%, rgba(255, 184, 107, 0.05) 0%, rgba(255, 184, 107, 0) 70%);
  scrollbar-color: var(--fig-line) transparent;
}
.nw-scroll:focus { outline: none; }
.nw-scroll.fade-l { -webkit-mask-image: linear-gradient(to right, transparent, #000 2.25rem); mask-image: linear-gradient(to right, transparent, #000 2.25rem); }
.nw-scroll.fade-r { -webkit-mask-image: linear-gradient(to left, transparent, #000 2.25rem); mask-image: linear-gradient(to left, transparent, #000 2.25rem); }
.nw-scroll.fade-l.fade-r {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 2.25rem, #000 calc(100% - 2.25rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 2.25rem, #000 calc(100% - 2.25rem), transparent);
}
.fig-body svg.nw-svg { max-width: none; overflow: visible; }
.nw-bg { fill: transparent; }

/* the one key line under the chart */
.nw-key { margin: 0.35rem 0 0; font-family: var(--fig-mono); font-size: 0.75rem; color: var(--fig-muted); }
.nw-off { color: var(--fig-warm); }

/* links: one path, a head, and a wide invisible path to point at. Pointing at a term lights its links ("on");
   pointing at an arrow makes it "hot": thicker and brighter, its head grown */
.nw-e {
  fill: none; stroke: var(--fig-muted); stroke-width: var(--w, 1px); stroke-linecap: round; opacity: var(--o, 0.5);
  transition: opacity 0.2s, stroke 0.2s, stroke-width 0.2s;
}
.nw-h { fill: var(--fig-muted); stroke: transparent; stroke-width: 0; stroke-linejoin: round; opacity: var(--o, 0.6); transition: opacity 0.2s, fill 0.2s, stroke 0.2s, stroke-width 0.2s; }
.nw-hit { fill: none; stroke: transparent; stroke-width: 12px; pointer-events: stroke; cursor: pointer; }
.nw-focus .nw-e:not(.on) { opacity: 0.07; }
.nw-focus .nw-h:not(.on) { opacity: 0.1; }
.nw-e.on { stroke: var(--fig-accent); opacity: 1; }
.nw-h.on { fill: var(--fig-accent); opacity: 1; }
.nw-e.hot { stroke: var(--nw-hot); stroke-width: calc(var(--w, 1px) + 1.8px); }
.nw-h.hot { fill: var(--nw-hot); stroke: var(--nw-hot); stroke-width: 2.4px; }
/* the entrance: the faint arrows the lines draw over (removed when it ends) */
.nw-u { fill: none; stroke: var(--fig-muted); stroke-width: var(--w, 1px); stroke-linecap: round; pointer-events: none; }

/* the numbers; a one-paper arrow's 1 only while it or one of its terms is lit */
.nw-pill { cursor: pointer; transition: opacity 0.2s; transform-box: fill-box; transform-origin: center; }
.nw-pill rect { fill: var(--fig-panel); stroke: var(--fig-line); stroke-width: 1; transition: fill 0.2s, stroke 0.2s; }
.nw-pill text { font-family: var(--fig-display); font-weight: 600; fill: var(--fig-ink); font-variant-numeric: tabular-nums; pointer-events: none; transition: fill 0.2s; }
.nw-pill.is-one text { fill: var(--fig-muted); font-weight: 500; }
.nw-pill.is-big text { fill: #fff; }
.nw-pill.is-big rect { stroke: color-mix(in srgb, var(--fig-ink) 35%, transparent); }
.nw-focus .nw-pill:not(.on) { opacity: 0.15; }
.nw-svg .nw-pill.is-one:not(.on):not(.picked) { opacity: 0; pointer-events: none; }
.nw-pill.on rect { stroke: var(--fig-accent); fill: color-mix(in srgb, var(--fig-accent) 18%, var(--fig-panel)); }
.nw-pill.on text { fill: #fff; }
.nw-pill.hot rect { stroke: var(--nw-hot); fill: color-mix(in srgb, var(--fig-accent) 34%, var(--fig-panel)); }
.nw-pill.picked rect { fill: var(--fig-accent); stroke: var(--fig-accent); }
.nw-pill.picked text { fill: var(--fig-panel); }

/* the terms; the six query terms glow, media bias warm. A lit term (a neighbour, an arrow's end) takes an accent
   edge; the term pointed at also glows in the accent */
.nw-node { cursor: pointer; transition: opacity 0.2s; }
.nw-node rect { fill: var(--fig-panel-2); stroke: var(--nw-o-stroke); stroke-width: 1.2; transition: stroke 0.2s, stroke-width 0.2s, fill 0.2s, filter 0.2s; }
.nw-node text, .nw-probe { font-family: var(--fig-display); font-weight: 500; fill: var(--fig-ink); pointer-events: none; }
.nw-node text { transition: fill 0.2s; }
.nw-node.is-q { --nw-glow: drop-shadow(0 0 9px color-mix(in srgb, var(--fig-closure) 55%, transparent)); }
.nw-node.is-mb { --nw-glow: drop-shadow(0 0 11px color-mix(in srgb, var(--fig-warm) 55%, transparent)); }
.nw-node.is-q rect { fill: var(--nw-q-fill); stroke: var(--fig-closure); stroke-width: 1.5; filter: var(--nw-glow); }
.nw-node.is-mb rect { fill: var(--nw-mb-fill); stroke: var(--fig-warm); }
.nw-node.is-q text, .nw-probe-q { font-weight: 600; fill: #fff; }
.nw-focus .nw-node:not(.on) { opacity: 0.28; }
.nw-focus .nw-node.on:not(.is-q) rect { stroke: color-mix(in srgb, var(--fig-accent) 75%, transparent); fill: color-mix(in srgb, var(--fig-accent) 10%, var(--fig-panel-2)); }
.nw-focus .nw-node.on text { fill: #fff; }
.nw-node.hot rect {
  stroke: var(--nw-hot); stroke-width: 2;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--fig-accent) 60%, transparent));
}
.nw-node.hot:not(.is-q) rect { fill: color-mix(in srgb, var(--fig-accent) 20%, var(--fig-panel-2)); }
.nw-node.picked rect { stroke: var(--fig-accent); stroke-width: 2.5; }
.nw-svg [tabindex]:focus { outline: none; }
.nw-svg .nw-node:focus-visible rect, .nw-svg .nw-pill:focus-visible rect { stroke: var(--nw-hot); stroke-width: 2.5; }

/* ------------------------------------------------------------ the panel under the chart, after a click */
.nw-detail {
  margin-top: 0.75rem; padding: 0.7rem 0.8rem 0.75rem 1rem; border-radius: 12px;
  background: var(--fig-panel-2); border: 1px solid var(--fig-grid);
  scroll-margin-bottom: 0.75rem;
}
.nw-detail[hidden] { display: none; }
.nw-detail-top { display: flex; align-items: center; gap: 0.6rem 0.9rem; flex-wrap: wrap; }
.nw-detail-h { flex: 1 1 18rem; min-width: 0; margin: 0; font-family: var(--fig-display); font-weight: 500; font-size: 1.15rem; line-height: 1.3; color: var(--fig-ink); }
.nw-detail-h b { font-weight: 600; color: #fff; }
.nw-detail-h i { color: #fff; }
.nw-muted { color: var(--fig-muted); font-size: 0.9em; }
.nw-ext { flex: none; }
.nw-close {
  appearance: none; flex: none; width: 1.9rem; height: 1.9rem; margin-left: auto; border-radius: 8px; cursor: pointer;
  font-size: 1.15rem; line-height: 1; color: var(--fig-muted); background: transparent; border: 1px solid var(--fig-line);
}
.nw-close:hover { color: var(--fig-ink); border-color: var(--fig-accent); }
.nw-close:focus-visible, .nw-mini:focus-visible, .nw-ext:focus-visible { outline: 2px solid var(--fig-accent); outline-offset: 2px; }
.nw-minis { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.nw-mini {
  appearance: none; flex: none; cursor: pointer; font: inherit; font-size: 0.82rem; display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.22rem 0.3rem 0.22rem 0.65rem; border-radius: 999px; color: var(--fig-ink);
  background: var(--fig-panel); border: 1px solid var(--fig-line);
}
.nw-mini b { font-family: var(--fig-display); font-weight: 600; min-width: 1.4rem; padding: 0 0.3rem; border-radius: 999px; text-align: center; color: #fff; background: rgba(165, 156, 255, 0.22); }
.nw-mini:hover { border-color: var(--fig-accent); }
.nw-row { display: flex; align-items: baseline; gap: 0.75rem; margin-top: 0.6rem; }
.nw-row-k {
  flex: none; width: 5.5rem; font-family: var(--fig-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fig-faint);
}
.nw-dot { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; flex: none; }
.nw-dot.is-seed { background: var(--fig-seed); }
.nw-dot.is-cited { background: var(--fig-closure); }
.nw-papers { list-style: none; margin: 0.55rem 0 0; padding: 0 0.25rem 0 0; max-height: 15rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: var(--fig-line) transparent; }
.nw-papers li { padding: 0.4rem 0; border-top: 1px solid var(--fig-grid); }
.nw-paper { display: flex; align-items: baseline; gap: 0.5rem; }
.nw-paper .nw-dot { align-self: flex-start; margin-top: 0.34rem; }
.nw-title { flex: 1 1 auto; min-width: 0; color: var(--fig-ink); font-size: 0.88rem; line-height: 1.4; }
.nw-year { flex: none; font-family: var(--fig-display); font-weight: 600; color: var(--fig-ink); font-variant-numeric: tabular-nums; }
.nw-kind { flex: none; width: 2.7rem; font-family: var(--fig-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fig-faint); }
.nw-words { margin: 0.1rem 0 0 1.05rem; font-size: 0.8rem; color: var(--fig-muted); }

@media screen and (max-width: 768px) {
  .nw-detail { position: relative; padding: 0.65rem 0.6rem 0.7rem 0.8rem; }
  .nw-detail .nw-close { position: absolute; top: 0.55rem; right: 0.55rem; }
  .nw-detail-h { font-size: 1.05rem; flex-basis: 100%; padding-right: 2.3rem; }
  .nw-row { flex-direction: column; gap: 0.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .nw-e, .nw-h, .nw-pill, .nw-pill rect, .nw-pill text, .nw-node, .nw-node rect, .nw-node text { transition: none; }
}