/* =========================================================================
   diagrams.css — diagram-specific style layer

   Augments `colors_and_type.css` (loaded by the page from the local
   `_dsa-tokens/` mirror) with diagram-only token additions per theme state,
   then defines the page chrome and SVG node/edge styles.

   Tier 1 + Tier 2 tokens, type families, fonts, and the light/dark theme
   bridge all come from `colors_and_type.css`. This file does not redefine
   them. design-system-ASK remains the visual authority.
   ========================================================================= */

/* ---------- Diagram-specific tokens (per theme state) ----------

   The diagram's scoped text roles (ink / muted / faint) ALIAS the foundation
   foreground ramp (--fg-1/-2/-3) rather than carry copied values — so the
   approved dark-purple foreground (#6A637F / #827399 / tertiary in light,
   lavender in dark) resolves through the foundation, and a future foreground
   change propagates here automatically. Because --fg-* already flips per
   theme, these three text roles need no separate dark-mode definition.

   The diagram keeps its own structural line tokens (line / line-soft) local:
   they use stronger white strokes than the foundation hairlines, so they are
   genuine diagram-scoped roles, not duplicates of --fg-* / --line-*. The
   foundational --fg-* / --line-* tokens are left untouched. */

:root {
  --node-fill: var(--ask-surface);
  --line-strong: rgba(255, 255, 255, 0.65);          /* corner ticks — white */
  --diagram-ink:       var(--fg-1);                   /* primary diagram text — foundation foreground */
  --diagram-muted:     var(--fg-2);                   /* secondary diagram text — foundation foreground */
  --diagram-faint:     var(--fg-3);                   /* tertiary text / separators — foundation foreground */
  --diagram-line:      rgba(255, 255, 255, 0.90);     /* box borders · edges · section rules — white */
  --diagram-line-soft: rgba(255, 255, 255, 0.55);     /* held / legacy strokes — soft white */
}

/* Dark theme: only the diagram-local structural tokens are redefined; the text
   roles (ink / muted / faint) inherit the foundation --fg-* flip automatically. */
:root[data-theme="dark"] {
  --node-fill: rgba(212, 198, 225, 0.06);
  --line-strong: rgba(212, 198, 225, 0.40);
  --diagram-line:      var(--ask-lavender-dark);
  --diagram-line-soft: rgba(212, 198, 225, 0.72);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --node-fill: rgba(212, 198, 225, 0.06);
    --line-strong: rgba(212, 198, 225, 0.40);
    --diagram-line:      var(--ask-lavender-dark);
    --diagram-line-soft: rgba(212, 198, 225, 0.72);
  }
}

/* =========================================================================
   Page chrome
   ========================================================================= */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

body {
  font-family: var(--font-sans);
  font-weight: 200;
  background: var(--bg-gradient);
  background-attachment: fixed;
  color: var(--diagram-ink);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.shell { position: fixed; inset: 0; display: grid; grid-template-rows: auto 1fr; }

/* ---------- Top bar (glass) ---------- */
.bar {
  display: flex; align-items: center; gap: 24px;
  padding: 16px 28px;
  border-bottom: 1px solid var(--line-1);
  background: var(--surface-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: relative; z-index: 5;
}
.bar .mark {
  font-weight: 500; font-size: 15px; letter-spacing: -0.01em; color: var(--diagram-ink);
}
.bar .mark .sep { color: var(--diagram-faint); font-weight: 200; padding: 0 6px; }
.bar .title-block { display: flex; flex-direction: column; gap: 2px; margin-left: 8px; }
.bar .title-block .t {
  font-size: 15px; font-weight: 400; letter-spacing: -0.01em;
}
.bar .title-block .s {
  font-family: var(--font-mono); font-size: 10px; color: var(--diagram-muted);
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 300;
}
.bar .spacer { flex: 1; }
.bar .stamp {
  display: flex; gap: 16px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--diagram-muted);
  font-weight: 300;
}
.bar .stamp .k { color: var(--diagram-ink); font-weight: 500; }
.bar .theme-tag {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--diagram-muted); font-weight: 400;
  padding: 4px 10px;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-sm);
}

/* ---------- Canvas region ---------- */
.canvas-wrap {
  position: relative; overflow: hidden;
  cursor: grab;
}
.canvas-wrap.dragging { cursor: grabbing; }
.canvas-wrap.dragging * { user-select: none; }

.stage { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.stage svg { display: block; }

/* ---------- Corner ticks ---------- */
.corner-tick {
  position: absolute; width: 14px; height: 14px;
  border: 1px solid var(--line-strong); pointer-events: none; z-index: 3;
}
.corner-tick.tl { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.corner-tick.tr { top: 12px; right: 12px; border-left: none; border-bottom: none; }
.corner-tick.bl { bottom: 12px; left: 12px; border-right: none; border-top: none; }
.corner-tick.br { bottom: 12px; right: 12px; border-left: none; border-top: none; }

/* ---------- Glass panel base ---------- */
.glass {
  background: var(--surface-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-lg);
}

/* ---------- Legend ---------- */
.legend {
  position: absolute; top: 18px; right: 18px;
  padding: 16px 18px 14px; font-size: 11px; color: var(--diagram-ink);
  z-index: 4; min-width: 248px;
  font-weight: 300;
}
.legend .h {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--diagram-muted);
  margin-bottom: 12px; display: flex; justify-content: space-between;
  font-weight: 400;
}
.legend .h .fig { color: var(--diagram-ink); font-weight: 500; }
.legend .row {
  display: grid; grid-template-columns: 28px 1fr; gap: 10px;
  align-items: center; padding: 4px 0;
}
.legend .row .lbl { color: var(--diagram-ink); }
.legend .row .sub {
  color: var(--diagram-muted); font-family: var(--font-mono);
  font-size: 9px; margin-left: 6px; letter-spacing: 0.04em;
  font-weight: 300;
}
.legend .sw {
  width: 24px; height: 14px;
  display: flex; align-items: center; justify-content: center;
}
.legend .sw .box-solid {
  width: 22px; height: 12px;
  border: 1px solid var(--diagram-line); background: var(--node-fill);
  border-radius: 2px;
}
.legend .sw .box-dashed {
  width: 22px; height: 12px;
  border: 1px dashed var(--diagram-line-soft); background: transparent;
  border-radius: 2px;
}
.legend .sw .legacy-txt {
  font-style: italic; color: var(--diagram-muted);
  font-size: 11px; font-weight: 200;
}

/* ---------- Zoom HUD ---------- */
.hud {
  position: absolute; bottom: 18px; left: 18px;
  display: flex; align-items: center;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.04em; color: var(--diagram-ink);
  z-index: 4;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.hud button {
  appearance: none; background: transparent; border: none;
  border-right: 1px solid var(--line-1);
  color: var(--diagram-ink); font-family: inherit; font-size: 13px;
  width: 32px; height: 32px; cursor: pointer;
  transition: background 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hud button:hover { background: var(--surface-glass-2); }
.hud button:last-child { border-right: none; }
.hud .pct {
  padding: 0 12px; height: 32px;
  display: flex; align-items: center;
  border-right: 1px solid var(--line-1);
  min-width: 56px; justify-content: center;
  color: var(--diagram-muted); font-weight: 400;
}

/* ---------- Caption ---------- */
.caption {
  position: absolute; top: 18px; left: 18px;
  padding: 14px 18px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.06em; color: var(--diagram-muted);
  z-index: 4; max-width: 360px; line-height: 1.55;
  font-weight: 300;
}
.caption b {
  color: var(--diagram-ink); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 11px;
}

/* =========================================================================
   SVG node + edge styles — driven by CSS variables so theme flips.
   TEXT uses --diagram-ink / --diagram-muted; STROKES use --diagram-line /
   --diagram-line-soft (white in light, lavender in dark).
   ========================================================================= */

.node-box {
  fill: var(--node-fill);
  stroke: var(--diagram-line);
  stroke-width: 1;
}
.node-box.held { stroke: var(--diagram-line-soft); stroke-dasharray: 4 3; fill: transparent; }
.node-box.legacy { fill: transparent; stroke: var(--diagram-line-soft); }
.node-box.section { fill: transparent; stroke: none; }

.node-label {
  font-family: var(--font-sans); font-weight: 400; font-size: 13px;
  fill: var(--diagram-ink); dominant-baseline: middle;
}
.node-label.held { fill: var(--diagram-muted); font-weight: 300; }
.node-label.legacy { fill: var(--diagram-muted); font-weight: 300; font-style: italic; }
.node-label.root { font-weight: 500; font-size: 14px; }
.node-label.section {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  fill: var(--diagram-ink); font-weight: 500;
}

.node-note {
  font-family: var(--font-mono); font-size: 10px;
  fill: var(--diagram-muted); letter-spacing: 0.02em;
  dominant-baseline: middle; font-weight: 300;
}
.node-note.legacy { font-style: italic; }

.section-rule { stroke: var(--diagram-line); stroke-width: 1; }
.section-tag {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase;
  fill: var(--diagram-muted); dominant-baseline: middle; font-weight: 300;
}

.edge { fill: none; stroke: var(--diagram-line); stroke-width: 1; }
.edge.held { stroke: var(--diagram-line-soft); stroke-dasharray: 4 3; }
.edge.legacy { stroke: var(--diagram-line-soft); }

/* Sequence connectors (diagram-static-SEQ): explicit arrowhead triangles —
   not SVG markers, which rasterize unreliably through the PNG export path. */
.edge-arrowhead { fill: var(--diagram-line); stroke: none; }

/* =========================================================================
   Convergence-flow additions (diagram-static-FLOW).

   The FLOW pattern reuses the whole shared vocabulary above (node-box,
   node-label, node-note, edge, edge-arrowhead, section tags) and adds the
   classes below for the parts of a convergence flow the trees and sequence
   do not have: a grouped source field, a lateral relation rail, secondary
   cross-stage evaluation edges, and an optional return edge. All strokes are
   theme-driven (no new color), and dash patterns differ from the held/legacy
   dashes so the relation reads as a relation, not a state.

   This FLOW copy is therefore a SUPERSET of the byte-identical H/V/SEQ
   diagrams.css. The base above is unchanged; only this block is appended.
   ========================================================================= */

/* Grouped source field — a labelled frame around the convergence inputs. */
.flow-group {
  fill: none;
  stroke: var(--diagram-line-soft);
  stroke-width: 1;
}

/* Small mono tag for a region (field label, rail label, band label).
   Same family/treatment as .section-tag; positioned by the engine. */
.flow-tag {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase;
  fill: var(--diagram-muted); dominant-baseline: middle; font-weight: 300;
}

/* Lateral relation rail — a carrier participates across the whole source
   field through this rail (it is not a peer source branch). Solid, with
   small diamond end-caps drawn by the engine. */
.edge-rail { fill: none; stroke: var(--diagram-line); stroke-width: 1; }
.edge-rail-cap { fill: var(--diagram-line); stroke: none; }

/* Secondary cross-stage evaluation edges — a source operating a second time,
   evaluating a realized result (NOT feeding it back upstream). Fine dash,
   soft stroke; distinct from the held/legacy 4 3 dash. */
.edge-eval { fill: none; stroke: var(--diagram-line-soft); stroke-width: 1; stroke-dasharray: 2 3; }

/* Optional styled return edge — a governed output later reused as a carrier.
   Dotted, soft, round caps; clearly not a primary process edge. */
.edge-return { fill: none; stroke: var(--diagram-line-soft); stroke-width: 1; stroke-dasharray: 1 4; stroke-linecap: round; }

/* Hierarchy tiers — weight/contrast only, no new color (DS rule).
   anchor = the load-bearing nodes (resolved spec, governed asset): heavier stroke + 400 label.
   recede = source-field inputs: soft stroke + muted label, so the flow reads over them. */
.node-box.anchor   { stroke: var(--diagram-line); stroke-width: 1.75; }
.node-label.anchor { font-weight: 400; }
.node-box.recede   { stroke: var(--diagram-line); fill: var(--node-fill); }
.node-label.recede { fill: var(--diagram-muted); }

/* Contained dimensions ribbon — one measured strip carrying the dimension
   inventory as text (not floating pills). Context, not a process stage. */
.flow-ribbon     { fill: var(--node-fill); stroke: var(--diagram-line-soft); stroke-width: 1; }
.flow-ribbon-txt { font-family: var(--font-mono); font-size: 9px; fill: var(--diagram-muted); letter-spacing: 0.04em; dominant-baseline: middle; }

/* Short taps — rail-stub and conformance-rail→node. Soft, fine dash. */
.edge-tap { fill: none; stroke: var(--diagram-line-soft); stroke-width: 1; stroke-dasharray: 2 2.5; }

/* Convergence — the load-bearing many-to-one merge. Visible, solid; this is the
   central event, so it must read (NOT the invisible undefined class it replaces). */
.converge { fill: none; stroke: var(--diagram-line); stroke-width: 1.1; }

/* Rail lane — typed-reference rail rendered as a light label lane (no divider line). */
.flow-railband { fill: none; stroke: none; }

/* Return loop — the long dotted feedback curve from the future-reference-carrier
   chip back up to the reference carrier. Soft, dashed, clearly secondary. */
.edge-loop { fill: none; stroke: var(--diagram-line-soft); stroke-width: 1.1; stroke-dasharray: 2 5; stroke-linecap: round; }

/* ---- interactive/explanatory mode: hover hit-areas, highlight, side panel ---- */
.hit-layer .node-hit { fill: transparent; cursor: pointer; }
/* highlight = weight/contrast only (DS rule), never a new hue */
.node-box.hi    { stroke-width: 2.4; }
.flow-ribbon.hi { stroke-width: 2; }

/* explanatory side panel — repo-native view; absent/ignored in static export */
.flow-panel {
  position: absolute; bottom: 24px; right: 22px; width: 300px; max-width: 38vw;
  padding: 16px 18px; border-radius: 10px;
  background: var(--node-fill); border: 1px solid var(--diagram-line-soft);
  color: var(--diagram-ink); font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  box-shadow: 0 6px 24px rgba(0,0,0,0.10); pointer-events: none; z-index: 5;
}
.flow-panel .fp-hint { color: var(--diagram-muted); font-size: 12px; line-height: 1.5; }
.flow-panel .fp-title { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 8px; color: var(--diagram-ink); }
.flow-panel .fp-def { font-size: 12.5px; line-height: 1.55; color: var(--diagram-ink); }
.flow-panel .fp-eg, .flow-panel .fp-not { margin-top: 9px; font-size: 11.5px; line-height: 1.5; color: var(--diagram-muted); }
.flow-panel .fp-k { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; margin-right: 6px; color: var(--diagram-muted); }