/* Interactive knowledge network, scoped so articles and the readable explorer keep their layout. */
.knowledge-network { padding-top: .8rem; }
.knowledge-network .network-stage {
  height: clamp(540px, 76svh, 860px);
  isolation: isolate;
  border-radius: 14px;
  background: var(--surface);
}
.network-stage canvas { position: absolute; inset: 0; touch-action: none; }
.network-stage canvas:focus-visible { outline: 3px solid var(--accent); outline-offset: -4px; border-radius: 14px; }
.network-heading {
  position: absolute; top: 25px; left: 27px; z-index: 1;
  display: flex; flex-direction: column; gap: 7px; max-width: calc(100% - 50px);
  pointer-events: none; color: var(--text);
}
.network-kicker { color: var(--accent); font-size: .63rem; font-weight: 700; letter-spacing: .17em; }
.network-heading strong { font-size: clamp(1.1rem, 1.8vw, 1.5rem); letter-spacing: -.035em; font-weight: 550; }
.network-meta { color: var(--muted); font-size: .72rem; }
.knowledge-network .graph-controls {
  /* Reserve the live site's lower corner for its floating help/navigation buttons. */
  z-index: 4; left: 19px; right: auto; top: auto; bottom: 76px;
  padding: 5px; gap: 4px; border: 1px solid var(--line); border-radius: 30px;
  background: var(--surface); box-shadow: 0 3px 16px rgba(25,40,70,.05);
}
.knowledge-network .graph-controls button {
  min-width: 35px; min-height: 36px; height: 36px; border-color: transparent;
  color: var(--text); font-size: .77rem; font-weight: 550; padding-inline: .65rem;
}
.knowledge-network .graph-controls button:hover { background: var(--bg); border-color: var(--line); }
.knowledge-network .graph-controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.knowledge-network .graph-controls button:disabled { cursor: default; opacity: .55; }
.knowledge-network .network-pause { border-left-color: var(--line); border-radius: 0; }
.network-preview {
  position: absolute; z-index: 5; width: min(290px, calc(100% - 20px)); padding: 13px 15px;
  color: var(--text); background: var(--surface); border: 1px solid var(--line);
  border-radius: 9px; box-shadow: 0 8px 30px rgba(25,40,70,.12); pointer-events: none;
  font-size: .79rem; line-height: 1.5;
}
.network-preview strong { display: block; margin-bottom: 4px; font-size: .88rem; }
.network-preview span { color: var(--muted); display: block; }
.network-preview[hidden], .knowledge-network .graph-panel[hidden] { display: none; }
.network-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.knowledge-network .graph-panel {
  z-index: 3; top: 0; bottom: 0; right: 0; height: auto; max-height: none;
  width: min(350px, 38%); padding: 27px 25px; box-sizing: border-box;
  background: var(--surface); box-shadow: -10px 0 36px rgba(25,40,70,.035);
  animation: network-panel-in .25s ease-out; overscroll-behavior: contain;
}
.knowledge-network .graph-panel h3 { font-size: 1.65rem; line-height: 1.15; letter-spacing: -.035em; margin: 16px 0 13px; overflow-wrap: anywhere; }
.knowledge-network .graph-panel-def { font-size: .91rem; line-height: 1.65; margin-bottom: 17px; }
.knowledge-network .graph-panel-facts { border-top: 1px solid var(--line); padding-top: 14px; margin-bottom: 15px; font-size: .78rem; }
.knowledge-network .graph-panel-actions { display: grid; gap: 9px; margin: 15px 0 25px; }
.knowledge-network .network-article {
  display: block; padding: 10px 12px; border: 1px solid var(--accent-edge, var(--line)); border-radius: 6px;
  color: var(--accent); background: var(--accent-soft, var(--bg)); font-weight: 650; text-decoration: none; font-size: .84rem;
}
.knowledge-network .graph-explore { margin: 0; text-align: left; padding: 9px 12px; }
.knowledge-network .graph-panel-label { margin-bottom: 10px; font-size: .67rem; }
.knowledge-network .graph-panel-related { display: flex; flex-wrap: wrap; gap: 6px; }
.knowledge-network .graph-panel-related button { font-size: .75rem; min-height: 31px; padding: 5px 9px; white-space: normal; text-align: left; }
.knowledge-network .network-more { font-size: .75rem; color: var(--muted); margin-top: 12px; }
.knowledge-network .graph-panel-nav { margin-top: 25px; padding-top: 16px; }
.knowledge-network .graph-panel-nav button { font-size: .76rem; }
.knowledge-network .graph-hint { max-width: 1040px; font-size: .75rem; margin: .7rem 0 0; line-height: 1.6; }
@keyframes network-panel-in { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: translateX(0); } }
@media (max-width: 699px) {
  .knowledge-network .network-stage { height: 76svh; min-height: 550px; }
  .network-heading { left: 18px; top: 20px; gap: 6px; }
  .network-kicker { font-size: .58rem; }
  .network-meta { font-size: .67rem; }
  .knowledge-network .graph-controls { left: 10px; bottom: 72px; gap: 1px; padding: 3px; }
  .knowledge-network .graph-controls button { min-width: 32px; padding-inline: .5rem; font-size: .71rem; }
  .knowledge-network.network-selected .graph-controls { bottom: calc(43% + 9px); }
  .knowledge-network.network-selected .network-heading { display: none; }
  .knowledge-network .graph-panel {
    top: auto; bottom: 0; right: 0; width: 100%; height: 43%; max-height: none;
    padding: 20px; border-left: 0; border-top: 1px solid var(--line);
    border-radius: 15px 15px 0 0; box-shadow: 0 -8px 22px rgba(25,40,70,.05);
  }
  .knowledge-network .graph-panel h3 { font-size: 1.35rem; margin: 10px 0; padding-right: 25px; }
  .knowledge-network .graph-panel-actions { grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 20px; }
  .knowledge-network .network-article, .knowledge-network .graph-explore { font-size: .75rem; padding: 9px; }
  .network-preview { max-height: 126px; overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .knowledge-network .graph-panel { animation: none; }
}
/* Graph mode gives the moving map the viewport; reading modes retain the full introduction. */
.glossary.network-view > .breadcrumbs,
.glossary.network-view .glossary-hero .lede,
.glossary.network-view .glossary-facts { display: none; }
.glossary.network-view .glossary-hero { padding: .8rem 0 .3rem; }
.glossary.network-view .glossary-hero h1 { font-size: 1.6rem; margin: .2rem 0; letter-spacing: -.035em; }
.glossary.network-view .glossary-hero .eyebrow { display: none; }
.glossary.network-view .glossary-toolbar { padding: .55rem 0; gap: .25rem .8rem; }
.glossary.network-view .knowledge-network { padding-top: .25rem; }
.glossary.network-view .network-stage { height: max(420px, calc(100svh - 220px)); min-height: 420px; }
@media (max-width: 699px) {
  .glossary.network-view .glossary-hero { padding-top: .5rem; }
  .glossary.network-view .glossary-hero h1 { font-size: 1.4rem; }
  .glossary.network-view .network-stage { height: max(420px, calc(100svh - 320px)); min-height: 420px; }
  .glossary.network-view .glossary-toolbar { gap: .4rem; }
}