/* ============================================================
   MFD Blueprint System — shared visual language for inline-SVG
   engineering diagrams. Layered on each page's existing accent.
   Motion classes are transform/opacity/stroke-offset only and
   collapse to their final state under prefers-reduced-motion.
   Pair with js/diagrams.js for viewport gating + SMIL control.
   ============================================================ */

:root {
  /* Each page defines its own --diagram-accent; fall back to the
     site's blueprint orange so the system works unconfigured. */
  --diagram-accent: #ff6b35;
  --diagram-blue: #4a90d9;
  --diagram-ink: #0a0e14;
  --diagram-line: rgba(255, 255, 255, 0.18);
  --diagram-line-faint: rgba(255, 255, 255, 0.06);
  --diagram-grid: rgba(74, 144, 217, 0.10);
  --diagram-label: rgba(255, 255, 255, 0.55);
  --diagram-corner: rgba(255, 255, 255, 0.25);
  --diagram-mono: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  --diagram-draw-dur: 1200ms;
  --diagram-fade-dur: 520ms;
  --diagram-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Blueprint grid background helper ---------- */
.dgm-grid-bg {
  background-image:
    linear-gradient(var(--diagram-grid) 0.5px, transparent 0.5px),
    linear-gradient(90deg, var(--diagram-grid) 0.5px, transparent 0.5px);
  background-size: 40px 40px;
}

/* Registration-mark corners on a figure/container */
.dgm-corners { position: relative; }
.dgm-corners::before,
.dgm-corners::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid var(--diagram-corner);
  pointer-events: none;
}
.dgm-corners::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.dgm-corners::after { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

/* ---------- Leader / dimension line styles (for SVG groups) ---------- */
.dgm-leader { stroke: var(--diagram-accent); stroke-width: 0.8; fill: none; opacity: 0.78; }
.dgm-dim { stroke: color-mix(in srgb, var(--diagram-blue) 60%, transparent); stroke-width: 0.6; fill: none; }
.dgm-tick { stroke: color-mix(in srgb, var(--diagram-blue) 60%, transparent); stroke-width: 0.6; }
/* Arrowheads / ticks are drawn as marker refs in the SVG; these classes
   just carry the shared stroke so a page needn't restate it. */
.dgm-arrowhead { fill: var(--diagram-accent); }

/* ---------- Label chip + value (HTML or foreignObject) ---------- */
.dgm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--diagram-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--diagram-label);
}
.dgm-value {
  font-family: var(--diagram-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #fff;
}

/* Honest hedge value — "Documented per project" reads as intentional */
.dgm-doc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border: 1px solid color-mix(in srgb, var(--diagram-accent) 45%, transparent);
  border-radius: 999px;
  font-family: var(--diagram-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--diagram-accent) 85%, #fff);
  background: color-mix(in srgb, var(--diagram-accent) 10%, transparent);
  white-space: nowrap;
}
.dgm-doc-chip::before { content: '◇'; font-size: 9px; opacity: 0.8; }

/* ---------- HTML label overlay (avoids SVG <text>; positioned over a
   position:relative diagram stage using % coords that track the SVG) ---------- */
.dgm-stage { position: relative; }
.dgm-ov {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--diagram-mono);
  font-size: clamp(9px, 0.9vw, 13px);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.25;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
}
.dgm-ov small {
  display: block;
  font-size: 0.82em;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--diagram-label);
}
.dgm-ov-accent { color: color-mix(in srgb, var(--diagram-accent) 82%, #fff); }
.dgm-ov-blue { color: color-mix(in srgb, var(--diagram-blue) 55%, #fff); }
.dgm-ov-quiet { color: var(--diagram-label); font-weight: 500; letter-spacing: 0.08em; }
.dgm-ov-l { transform: translate(0, -50%); }
.dgm-ov-r { transform: translate(-100%, -50%); }
.dgm-ov-box {
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--diagram-accent) 55%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--diagram-accent) 10%, transparent);
  white-space: normal;
  text-align: center;
}

/* ---------- Legend row ---------- */
.dgm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-family: var(--diagram-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--diagram-label);
}
.dgm-legend-item { display: inline-flex; align-items: center; gap: 7px; }
.dgm-legend-swatch { width: 14px; height: 3px; background: currentColor; border-radius: 1px; }

/* ---------- Figure caption (matches site figcaption convention) ---------- */
.dgm-caption {
  margin-top: 18px;
  font-family: var(--diagram-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--diagram-label);
  text-align: center;
}

/* ============================================================
   STAGED-REVEAL ANIMATION CLASSES
   Idle state = pre-animation. The [data-diagram] container gets
   .dgm-in added by js/diagrams.js when it scrolls into view;
   descendants then transition to their final state.
   ============================================================ */

/* Stroke draw-on. Element must set its own pathLength or dasharray
   sizing via inline style (--dgm-len) if geometry differs; default
   covers most single-stroke paths up to 2000 units. */
.dgm-draw {
  stroke-dasharray: var(--dgm-len, 2000);
  stroke-dashoffset: var(--dgm-len, 2000);
  transition: stroke-dashoffset var(--diagram-draw-dur) var(--diagram-ease);
}
[data-diagram].dgm-in .dgm-draw { stroke-dashoffset: 0; }

/* Label fade + rise */
.dgm-fade-up {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--diagram-fade-dur) var(--diagram-ease),
    transform var(--diagram-fade-dur) var(--diagram-ease);
}
[data-diagram].dgm-in .dgm-fade-up { opacity: 1; transform: translateY(0); }

/* Simple fade (no movement) */
.dgm-fade {
  opacity: 0;
  transition: opacity var(--diagram-fade-dur) var(--diagram-ease);
}
[data-diagram].dgm-in .dgm-fade { opacity: 1; }

/* Stagger delays — apply alongside .dgm-draw / .dgm-fade-up */
.dgm-stage-1 { transition-delay: 0ms; }
.dgm-stage-2 { transition-delay: 260ms; }
.dgm-stage-3 { transition-delay: 520ms; }
.dgm-stage-4 { transition-delay: 780ms; }

/* ============================================================
   UNIVERSAL REDUCED-MOTION BLOCK
   Every .dgm-* animation resolves INSTANTLY to its final state.
   SMIL is handled in js/diagrams.js (never begun under reduce);
   this covers all CSS-driven motion regardless of .dgm-in.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .dgm-draw,
  [data-diagram] .dgm-draw {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
  .dgm-fade-up,
  [data-diagram] .dgm-fade-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .dgm-fade,
  [data-diagram] .dgm-fade {
    opacity: 1 !important;
    transition: none !important;
  }
  .dgm-stage-1,
  .dgm-stage-2,
  .dgm-stage-3,
  .dgm-stage-4 { transition-delay: 0ms !important; }
}