/* graph.css: knowledge graph page components
   Same rules as the rest of the instrument: hairlines, 2px radius,
   variables only, phosphor strictly for live/interactive state.
   Both themes work automatically through the tokens in site.css. */

/* ── layout ─────────────────────────────────────────── */
.graphwrap{
  display:flex; align-items:flex-start; gap:1.6rem;
  max-width:1200px; margin:0 auto; padding:0 1.6rem;
}
#graphmount{flex:1 1 auto; min-width:0}
#gcanvas{width:100%; height:auto; display:block}

#gpanel{
  flex:0 0 300px; width:300px;
  position:sticky; top:4.2rem;
  max-height:calc(100vh - 5.4rem); overflow-y:auto;
  border-left:1px solid var(--line);
  padding:.35rem 0 1rem 1.15rem;
}
@media(max-width:900px){
  .graphwrap{flex-direction:column; gap:1rem}
  #gpanel{
    flex-basis:auto; width:100%;
    position:static; max-height:none;
    border-left:0; border-top:1px solid var(--line);
    padding:1rem 0 0;
  }
}

/* ── node and edge states ───────────────────────────── */
.gnode{cursor:pointer}
.gnode circle,.gnode text,.gedge line{
  transition:opacity .18s var(--ease), stroke .18s var(--ease);
}
.gnoanim .gnode circle,.gnoanim .gnode text,.gnoanim .gedge line,
.gnoanim #gpanel,.gnoanim .gchip{transition:none}
@media (prefers-reduced-motion: reduce){
  .gnode circle,.gnode text,.gedge line{transition:none}
}

.dim{opacity:.25}
.lit circle{stroke:var(--phos)}
.gnode.lit text{fill:var(--ink)}
.gnode:hover text{fill:var(--ink)}
.gnode:focus-visible circle,.gedge:focus-visible line{
  stroke:var(--phos);
}
.gedge{cursor:help}
.gedge.lit line{stroke:var(--phos);stroke-width:1.5}
.gedge line.hit{stroke:transparent !important}

/* ── panel typography ───────────────────────────────── */
#gpanel .glabel,#glist .glabel{
  display:block;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em;
  color:var(--muted); text-transform:uppercase;
  margin:1.1rem 0 .3rem;
}
#glist .glabel{display:inline; margin:0 0 0 .4rem}
#gpanel h3{
  font-family:var(--f-display); font-size:1.3rem; font-weight:420;
  color:var(--ink); line-height:1.2; margin:.1rem 0 .5rem;
}
#gpanel .gsummary{font-size:.92rem; line-height:1.65; color:var(--ink-soft)}
#gpanel .ghint{
  font-family:var(--f-mono); font-size:.72rem; line-height:1.7;
  color:var(--muted);
}
#gpanel ul,#gpanel ol{list-style:none; margin:.2rem 0 .8rem; padding:0}
#gpanel li{
  font-size:.85rem; line-height:1.55; color:var(--ink-soft);
  padding:.4rem 0; border-bottom:1px solid var(--line-soft);
}
#gpanel li:last-child{border-bottom:0}
#gpanel li strong{color:var(--ink); font-weight:600}
#gpanel .gnote,#gtip .gnote,#glist .gnote{color:var(--muted)}
#gpanel .glinks a{
  color:var(--ink-soft); border-bottom:1px solid var(--line);
}
#gpanel .glinks a:hover{color:var(--phos); border-bottom-color:var(--phos)}
#gpanel .gpath li{display:block}
#gpanel .gpath .gnote{display:block; margin-top:.15rem}

/* edge-type chips: 1px border mono pills */
.gchip{
  display:inline-block;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.1em;
  color:var(--muted);
  border:1px solid var(--line); border-radius:var(--r);
  padding:.1rem .45rem; margin:0 .35rem .2rem 0;
  white-space:nowrap; vertical-align:middle;
  background:var(--bg-raise);
}

/* ── tooltip ────────────────────────────────────────── */
#gtip{
  position:fixed; z-index:300;
  max-width:280px;
  background:var(--instrument);
  border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-soft);
  font-family:var(--f-mono); font-size:.7rem; line-height:1.55;
  color:var(--ink-soft);
  padding:.5rem .6rem;
  pointer-events:none;
}
#gtip[hidden]{display:none}

/* ── filter row + connect-the-dots controls ─────────── */
/* filter buttons inherit .chip from site.css; no restyle here */
.gcontrols{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  max-width:1200px; margin:0 auto 1.2rem; padding:0 1.6rem;
}
.gcontrols .gsep{flex:0 0 1px; height:1.2rem; background:var(--line); margin:0 .4rem}
#gfrom,#gto{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.04em;
  color:var(--ink-soft);
  background:var(--bg-raise);
  border:1px solid var(--line); border-radius:var(--r);
  padding:.3rem .5rem;
  max-width:12rem;
}
#gfrom:focus-visible,#gto:focus-visible{border-color:var(--phos)}

/* ── structured list alternative ────────────────────── */
#glist{
  max-width:1200px; margin:2.4rem auto 0; padding:0 1.6rem;
  border-top:1px solid var(--line-soft);
}
#glist details{border-bottom:1px solid var(--line-soft); padding:.55rem 0}
#glist summary{
  cursor:pointer;
  font-family:var(--f-display); font-size:1.02rem; color:var(--ink);
}
#glist summary:focus-visible{outline:1.5px solid var(--phos); outline-offset:2px}
#glist p{font-size:.9rem; line-height:1.65; color:var(--ink-soft); margin:.5rem 0}
#glist ul{list-style:none; margin:.3rem 0 .6rem; padding:0}
#glist li{font-size:.84rem; line-height:1.6; color:var(--ink-soft); padding:.2rem 0}
#glist a{color:var(--ink-soft); border-bottom:1px solid var(--line)}
#glist a:hover{color:var(--phos); border-bottom-color:var(--phos)}