/* flat/pages/architecture.css — local rules the system doesn't provide.
   Tokens only, prefix .pg-arch-, no shadows. Linked after flat/flat.css.
   cert-knowledge-graph-inspector's base display:block and its ≤800px
   min-width floor are now in flat.css; nothing page-local needed for either. */

/* The graph is pan/zoom, so its stage needs a fixed height; flat.css sizes frames by content only. */
.pg-arch-kg-stage { position: relative; height: 560px; }
.pg-arch-kg-stage .pg-arch-kg-svg { width: 100%; height: 100%; }

/* The drag affordance; no flat.css class carries a cursor. */
.pg-arch-kg-stage.panning { cursor: grabbing; }
.pg-arch-kg-stage { cursor: grab; }

/* Hover feedback before a click; flat.css has no SVG node states. Same token _select() uses for the halo. */
.pg-arch-kg-node { cursor: pointer; }
.pg-arch-kg-node:hover .pg-arch-kg-node-halo { opacity: 0.45; stroke: var(--yellow); }

/* The node detail panel floats over the stage; flat.css has no positioned overlay. */
.pg-arch-kg-detail { position: absolute; right: var(--sp-4); top: var(--sp-4); width: 280px; max-height: calc(100% - var(--sp-8)); overflow: auto; }

/* The panel stretches to the list beside it (.split--cards); the SVG box fills the panel and the
   drawing, held at its 520 px width, centres inside it via preserveAspectRatio meet. */
.pg-arch-layers-frame { display: flex; flex-direction: column; }
.pg-arch-layers { flex: 1; width: 100%; max-width: 520px; height: 100%; min-height: 0; margin-inline: auto; }
/* Linked hover: a row in the list lights its layer in the drawing and vice versa (architecture.js).
   Rows are paper on a cloud panel; the hot row turns green tint with a green stroke; the rest fade. */
.pg-arch-layer { cursor: pointer; transition: opacity 0.18s var(--ease); outline: 0; }
.pg-arch-layer-box { transition: fill 0.18s var(--ease), stroke 0.18s var(--ease), stroke-width 0.18s var(--ease); }
.pg-arch-layer-icon { transition: stroke 0.18s var(--ease); }
.pg-arch-layer.is-dim { opacity: 0.4; }
.pg-arch-layer.is-hot .pg-arch-layer-box { fill: var(--green-tint); stroke: var(--green); stroke-width: 2; }
.pg-arch-layer.is-hot .pg-arch-layer-icon { stroke: var(--green-text); }
.pg-arch-layer[data-layer="5"].is-hot .pg-arch-layer-box { fill: var(--fg-1); stroke: var(--green); }
.pg-arch-layer[data-layer="5"].is-hot .pg-arch-layer-icon { stroke: var(--on-solid); }
.pg-arch-layer:focus-visible .pg-arch-layer-box { stroke: var(--teal); stroke-width: 2.5; }
/* Callout — numbered disc paired with the row marker; the lit end turns bronze. */
.pg-arch-layer.is-hot .pg-arch-num, .pg-arch-layer:focus-visible .pg-arch-num { fill: var(--yellow); }
/* The list: a numbered column of plain rows, no boxes; the hot row takes the green tint. */
.pg-arch-layers-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-1); }
.pg-arch-layer-item { display: grid; grid-template-columns: 24px 1fr; gap: var(--sp-3); padding: 14px var(--sp-4); border-radius: var(--r-card); cursor: pointer; transition: background 0.15s var(--ease), opacity 0.15s var(--ease); }
.pg-arch-layer-item.is-hot { background: var(--green-tint); }
.pg-arch-layer-item.is-dim { opacity: 0.45; }
/* The callout sits at the row's cap-height, not centred on the whole row block. */
.pg-arch-layer-item .callout { margin-top: 3px; }
.pg-arch-layer-name { display: block; font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--green-text); }
.pg-arch-layer-head { margin-top: 4px; }
.pg-arch-layer-body { margin-top: 6px; font-size: var(--fs-sm); }

/* The retrieval illustrations are drawn at 280 x 200; shown at that scale, centred, not stretched. */
.pg-arch-r-frame { display: flex; align-items: center; justify-content: center; min-height: 100%; }
.pg-arch-r-svg { max-width: 300px; overflow: visible; }
/* Calm loops: the vector rings turn, the graph edges draw in, the hybrid routes flow. */
.pg-arch-spin { transform-origin: 140px 100px; animation: pg-arch-spin 24s linear infinite; }
.pg-arch-spin--slow { animation-duration: 48s; animation-direction: reverse; }
@keyframes pg-arch-spin { to { transform: rotate(360deg); } }
.pg-arch-draw line { stroke-dasharray: 120; stroke-dashoffset: 120; animation: pg-arch-draw 4.8s var(--ease) infinite; }
.pg-arch-draw line:nth-child(n+5) { animation-delay: 0.9s; }
@keyframes pg-arch-draw { 0% { stroke-dashoffset: 120; } 35%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.pg-arch-dash path { stroke-dasharray: 6 6; animation: pg-arch-dash 1.6s linear infinite; }
@keyframes pg-arch-dash { to { stroke-dashoffset: -24; } }

/* Graph inspector state changes ease instead of snapping; the intro fades nodes in once. */
.pg-arch-kg-node, .pg-arch-kg-edge { transition: opacity 0.18s var(--ease); }
.pg-arch-kg-node .pg-arch-kg-node-c { transition: stroke-width 0.15s var(--ease); }
.pg-arch-kg-node .pg-arch-kg-node-label-r { transition: stroke 0.15s var(--ease); }
.pg-arch-kg-edge path { transition: stroke 0.15s var(--ease), stroke-width 0.15s var(--ease); }
.pg-arch-kg-edge-label { transition: opacity 0.15s var(--ease); }
.pg-arch-kg-node-halo { transition: opacity 0.18s var(--ease); }
.pg-arch-kg-svg.is-intro .pg-arch-kg-node { animation: pg-arch-kg-in 0.5s var(--ease) both; animation-delay: calc(var(--i, 0) * 28ms); }
@keyframes pg-arch-kg-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .pg-arch-spin, .pg-arch-draw line, .pg-arch-dash path, .pg-arch-kg-svg.is-intro .pg-arch-kg-node { animation: none; }
  .pg-arch-draw line { stroke-dashoffset: 0; }
}

/* On phones the floating panel would cover the graph. */
@media (max-width: 800px) {
  .pg-arch-kg-stage { height: auto; }
  .pg-arch-kg-stage .pg-arch-kg-svg { height: 800px; }
  .pg-arch-kg-detail { position: static; width: auto; max-height: none; margin-top: var(--sp-4); }
}

/* PROMOTE: flat.css's .ticks li sets color: var(--fg-2) and .ticks .icon reads
   var(--_hue, var(--fg-accent)) — both fixed to the light-surface palette, so on
   a .solid panel (§07 air-gapped) they render ink-2 text and teal-on-green icons,
   both near-unreadable on the dark hue. Any .solid panel using a .ticks list
   needs the same on-solid treatment flat.css already gives .solid p/.caption.
   Guarded the way flat.css pairs .solid .tint p/.caption/.meta (line ~530) with
   .solid: a .tint nested inside a .solid (§07 panel 3's paper viz-frame) must
   re-light back to page colours, or the first .ticks list in a nested tint on
   any page — this is promoting site-wide — renders on-solid-muted on white. */
.solid .ticks li { color: var(--on-solid-muted); }
.solid .ticks .icon { color: var(--on-solid); }
.solid .tint .ticks li { color: var(--fg-2); }
.solid .tint .ticks .icon { color: var(--_hue, var(--fg-accent)); }