/* LabVision — the procedure graph.
   Nine procedures and the visual cues they share, drawn as an inline SVG by graph.js.
   Consumes the tokens in style.css; adds nothing new to the palette. */

.pg { padding-top: var(--sp-96); }
.pg-head p.lede { color: var(--fg-2); max-width: 44rem; margin-top: var(--sp-16); }
.pg-panel {
  display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--sp-40);
  align-items: stretch; margin-top: var(--sp-40);
}
@media (max-width: 991px) { .pg-panel { grid-template-columns: 1fr; gap: var(--sp-32); } }

/* --- the graph --- */
.pg-graph { position: relative; min-width: 0; }
.pg-graph svg { width: 100%; height: auto; display: block; overflow: visible; font-family: var(--font); }
.pg-graph .pg-legend {
  display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-20);
  margin-top: var(--sp-16); font-size: var(--fs-xs); color: var(--fg-3);
}
.pg-legend span { display: inline-flex; align-items: center; gap: .45rem; }
.pg-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.pg-legend i.built { background: var(--teal); }
.pg-legend i.planned { background: var(--w10); box-shadow: inset 0 0 0 1px var(--w25); }
.pg-legend i.cue { background: var(--copper); width: 7px; height: 7px; }
.pg-legend i.stage { width: 16px; height: 0; border-top: 1px dashed var(--w55); border-radius: 0; }

.pg-edge { fill: none; stroke: rgba(255,255,255,.15); stroke-width: 1; transition: stroke var(--dur-base) linear, stroke-width var(--dur-base) linear; }
.pg-edge.stage { stroke-dasharray: 3 4; }
.pg-edge.lit { stroke: var(--teal-hi); stroke-width: 1.5; }
.pg-edge.dim { stroke: rgba(255,255,255,.06); }
.pg-arrow { fill: rgba(255,255,255,.25); }
.pg-arrow.lit { fill: var(--teal-hi); }

.pg-node { cursor: pointer; outline: none; }
.pg-node .body { transition: transform var(--dur-base) var(--ease-out); transform-box: fill-box; transform-origin: center; }
.pg-node:hover .body, .pg-node:focus-visible .body { transform: scale(1.12); }
.pg-node.proc circle { fill: var(--w10); stroke: var(--w25); stroke-width: 1; transition: fill var(--dur-base) linear, stroke var(--dur-base) linear; }
.pg-node.proc.built circle { fill: var(--teal); stroke: var(--teal-hi); }
.pg-node.proc:hover circle, .pg-node.proc.on circle { stroke: var(--teal-hi); stroke-width: 1.5; }
.pg-node.proc.on:not(.built) circle { fill: rgba(83,145,126,.28); }
.pg-node.cue circle { fill: var(--copper-mid); stroke: var(--copper); stroke-width: 1; transition: fill var(--dur-base) linear; }
.pg-node.cue:hover circle, .pg-node.cue.on circle { fill: var(--copper); }
.pg-node .ring { fill: none; stroke: var(--teal-hi); stroke-width: 1; opacity: 0; transition: opacity var(--dur-base) linear; }
.pg-node.on .ring { opacity: .7; }
.pg-node:focus-visible .ring { opacity: 1; stroke: var(--focus); }
.pg-node text { fill: var(--fg-2); font-size: 12px; pointer-events: none; paint-order: stroke; stroke: var(--black); stroke-width: 3px; stroke-linejoin: round; transition: fill var(--dur-base) linear; }
.pg-node.cue text { fill: var(--copper); font-size: 11px; }
.pg-node.proc text.rank { fill: var(--fg); font-size: 11px; font-family: var(--mono); stroke: none; }
.pg-node.proc.built text.rank { fill: var(--white); }
.pg-node:hover text, .pg-node.on text { fill: var(--fg); }
.pg-node.cue:hover text, .pg-node.cue.on text { fill: var(--copper); }
.pg-node.faded { opacity: .38; }
.pg-node.faded text { fill: var(--fg-3); }

/* --- the detail panel --- */
.pg-detail {
  display: flex; flex-direction: column; gap: var(--sp-16); min-width: 0;
  border-left: 1px solid var(--line); padding-left: var(--sp-40);
}
@media (max-width: 991px) { .pg-detail { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: var(--sp-32); } }
.pg-detail .row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); }
.pg-detail h3 { font-size: var(--fs-h6); line-height: var(--lh-lg); }
.pg-detail dl { margin: 0; display: grid; gap: var(--sp-12); }
.pg-detail dt, .pg-detail .k { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--teal-hi); }
.pg-detail dd { margin: .25rem 0 0; color: var(--fg-2); font-size: var(--fs-sm); line-height: var(--lh-xl); }
.pg-detail .sep { margin: var(--sp-4) 0; }
.pg-detail .shares { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.pg-detail .shares button {
  appearance: none; font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--fs-xs); line-height: var(--lh-xl); padding: .375rem .5rem;
  border-radius: var(--r-xs); background: transparent; border: 1px solid var(--line); color: var(--fg-2);
  transition: border-color var(--dur-base) linear, color var(--dur-base) linear, background var(--dur-base) linear;
}
.pg-detail .shares button:hover { border-color: var(--teal); color: var(--fg); }
.pg-detail .shares button.cue { color: var(--copper); }
.pg-detail .shares button.cue:hover { border-color: var(--copper); }
.pg-detail .shares button i { width: 7px; height: 7px; border-radius: 50%; background: var(--w25); display: inline-block; }
.pg-detail .shares button.built i { background: var(--teal); }
.pg-detail .shares button.cue i { background: var(--copper); }
.pg-detail .note { color: var(--fg-3); font-size: var(--fs-xs); line-height: var(--lh-xl); }
.pg-detail .btn { align-self: flex-start; margin-top: var(--sp-4); }