/* ============================================================
   show-your-work — Portfolio graph theme (pg-*)
   Scoped to the graph surfaces rather than :root so the dark
   canvas palette never leaks into page chrome. graph/theme.mjs
   reads these through getComputedStyle on the nearest .pg-page /
   .work-graph-viewport ancestor, resolving any CSS color syntax
   (oklch included) via canvas readback.
   ============================================================ */

.pg-page,
.work-graph-viewport {
  --pg-canvas-bg: #050505;
  --pg-node: oklch(0.78 0.08 250);
  /* Distinct hues per node kind — pairs with the engine's node shapes. */
  --pg-pro: oklch(0.78 0.1 245);
  --pg-personal: oklch(0.8 0.08 75);
  --pg-skill: oklch(0.74 0.09 185);
  --pg-post: oklch(0.72 0.09 25);
  --pg-orphan: oklch(0.55 0.02 250);
  /* Dull charcoal edges — never light/white, or the hubs disappear. */
  --pg-link: rgb(88 92 100 / 0.42);
  /* Accent marks the current page node; shape still carries the kind. */
  --pg-here: var(--brand);
}

.pg-page .pg-host,
.work-graph-viewport.pg-host {
  width: 100%;
  height: min(70vh, 560px);
  min-height: 320px;
  margin-top: var(--space-4);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background: var(--pg-canvas-bg);
}

/* Embedded lens on content pages — shorter than the full-page graph, and it
   sits inside the reading column rather than taking over the viewport. */
.pg-page .pg-host--lens,
.work-graph-viewport.pg-host--lens {
  height: min(42vh, 320px);
  min-height: 220px;
}

.pg-host canvas {
  display: block;
}