/* Knowledge graph page: the canvas fills the screen below a slim title bar */
/* dvh = the visible height with mobile browser toolbars showing; vh is the fallback */
.graph-page { display: flex; flex-direction: column; height: calc(100vh - 4rem - env(safe-area-inset-top, 0px)); height: calc(100dvh - 4rem - env(safe-area-inset-top, 0px)); min-height: 26rem; }
.graph-bar { display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between; align-items: flex-end; padding-block: 1rem .9rem; }
.graph-bar .crumbs { margin-bottom: .4rem; }
.graph-bar h1 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin-bottom: .2rem; }
.graph-bar p { margin: 0; max-width: 36rem; }
.graph-find input { width: min(20rem, 100%); border-radius: 999px; }
@media (max-width: 760px) { .graph-find { width: 100%; } .graph-find input { width: 100%; } }
.graph-stage {
  position: relative; flex: 1; min-height: 22rem; border-top: 1px solid var(--line); overflow: hidden;
  background: radial-gradient(circle at 50% 45%, var(--surface), transparent 70%), var(--bg);
}
#gr-canvas { position: absolute; inset: 0; display: block; cursor: grab; touch-action: none; }
#gr-canvas:active { cursor: grabbing; }
#gr-canvas:focus-visible { outline: 3px solid var(--ember); outline-offset: -3px; }
.graph-zoom { position: absolute; top: .75rem; right: .75rem; display: grid; gap: .4rem; z-index: 3; }
.graph-zoom .icon-btn { font: 600 1.15rem/1 var(--sans); box-shadow: var(--shadow); }
.graph-legend {
  position: absolute; left: .75rem; right: 4rem; bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); z-index: 3; gap: .35rem;
}
.graph-legend .chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; min-height: 1.9rem; padding: .15rem .65rem; background: color-mix(in srgb, var(--surface) 88%, transparent); }
.graph-legend .chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.graph-legend .chip[aria-pressed="true"] .wing-dot { background: var(--on-accent); }
@media (max-width: 640px) { .graph-legend { flex-wrap: nowrap; overflow-x: auto; right: .75rem; padding-bottom: .2rem; } .graph-legend .chip { flex: none; } .graph-zoom { top: .5rem; right: .5rem; } }
.graph-tip {
  position: absolute; z-index: 5; max-width: 19rem; display: grid; gap: .25rem; padding: .75rem .9rem; pointer-events: none;
  background: var(--surface); border: 1px solid var(--line-strong); border-top: 4px solid var(--accent);
  border-radius: var(--r); box-shadow: 0 10px 30px rgb(0 0 0 / .2); font-size: .9rem;
}
.gt-wing { font: 650 .7rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.graph-tip strong { font: 600 1.02rem/1.25 var(--serif); }
.gt-sum { color: var(--ink-2); }
.gt-meta { color: var(--ink-3); font-size: .8rem; }
.graph-page ~ .site-footer { display: none; }
/* Short screens (phones in landscape): slim the title bar so the canvas fits without scrolling */
@media (max-height: 520px) {
  .graph-page { min-height: 0; }
  .graph-bar { padding-block: .4rem; align-items: center; }
  .graph-bar .crumbs, .graph-bar p { display: none; }
  .graph-bar h1 { font-size: 1.3rem; margin: 0; }
  .graph-stage { min-height: 10rem; }
  .graph-legend { flex-wrap: nowrap; overflow-x: auto; right: 4rem; padding-bottom: .2rem; }
  .graph-legend .chip { flex: none; }
}