/* ============================================================
   Harla architecture diagrams — COMPONENT STYLES ONLY
   ------------------------------------------------------------
   Dark theme. No :root tokens, no @font-face, no page resets.
   Consumes variables the host page already defines:
     --fg --fg-muted --fg-subtle --fg-faint
     --gold --gold-line --gold-wash
     --glass-bg --glass-border --glass-top --glass-blur
     --shadow-glass --shadow-lg --divider --border --border-strong
     --r-sm --r-md --font-display --font-body --font-label --font-mono
     --ease --dur
   Stages are 720px wide and scale down automatically below that.
   ============================================================ */

/* ---- figure + caption ---------------------------------------- */
.hd-figure { margin: 0 0 64px; }
.hd-figure:last-child { margin-bottom: 0; }

.hd-cap {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 24px;
}
.hd-cap .num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  color: var(--gold);
  letter-spacing: 0.02em;
  flex: none;
  padding-top: 3px;
}
.hd-cap h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  font-size: 22px;
  line-height: 1.1;
  margin: 0;
  color: var(--fg);
}
.hd-cap p {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-subtle);
  margin: 5px 0 0;
  max-width: 64ch;
}

/* ---- responsive scaler + stage ------------------------------- */
.hd-scaler { width: 100%; overflow: hidden; }
.hd-stage {
  position: relative;
  transform-origin: top left;
  margin: 0 auto;
}

/* ---- connector overlay --------------------------------------- */
.hd-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}
.hd-wires path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wire      { stroke: var(--fg); stroke-opacity: 0.4;  stroke-width: 1.5; }
.wire-gold { stroke: var(--gold); stroke-opacity: 0.85; stroke-width: 1.8; }
.wire-dash { stroke: var(--fg); stroke-opacity: 0.34; stroke-width: 1.4; stroke-dasharray: 2 5; }
.mk      { stroke: var(--fg); stroke-opacity: 0.45; }
.mk-gold { stroke: var(--gold); stroke-opacity: 0.85; }

/* ---- band (layer grouping panel) ----------------------------- */
.hd-band {
  position: relative;
  z-index: 1;
  border: 1px solid var(--divider);
  border-radius: var(--r-md);
  background: rgba(255, 249, 232, 0.025);
  padding: 38px 22px 22px;
}
.hd-band > .hd-band-label {
  position: absolute;
  z-index: 3;
  top: 14px;
  left: 20px;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hd-band > .hd-band-label .ix { font-family: var(--font-mono); color: var(--fg-faint); }

/* the gold layer — AI / orchestration spotlight */
.hd-band.is-core {
  border-color: var(--gold-line);
  background: var(--gold-wash);
}
.hd-band.is-core > .hd-band-label,
.hd-band.is-core > .hd-band-label .ix { color: var(--gold); }

/* ---- node card (glass primitive) ----------------------------- */
.hd-node {
  position: relative;
  z-index: 3;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-glass);
  padding: 13px 15px;
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.hd-node .t {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--fg);
  text-wrap: balance;
}
.hd-node .c {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--fg-subtle);
  margin-top: 5px;
}
.hd-node:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg), inset 0 1px 0 0 var(--glass-top);
}

/* gold node variant */
.hd-node.is-gold {
  background: rgba(212, 163, 94, 0.14);
  border-color: var(--gold-line);
}
.hd-node.is-gold .t { color: var(--gold); }
.hd-node.is-gold .c { color: rgba(212, 163, 94, 0.78); }
.hd-node.is-gold:hover { border-color: var(--gold); }

/* orchestration bar / hero node */
.hd-node.is-bar { text-align: center; padding: 15px 18px; }
.hd-node.is-gold.is-bar { background: rgba(212, 163, 94, 0.18); }
.hd-node.is-gold.is-bar .t {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--fg);
}

/* ============================================================
   Diagram 1 — platform overview (stage = 720px)
   ============================================================ */
#d1 { width: 672px; }
#d1 .hd-band + .hd-band { margin-top: 52px; }
.d1-row   { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.d1-bar   { margin-bottom: 16px; }
.d1-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.d1-data  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.d1-data .span-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  grid-column: 1 / -1;
  margin-top: 14px;
}
.d1-iface { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hd-node.is-wide { padding: 11px 14px; }
.hd-node.is-wide .t { font-size: 12.5px; font-weight: 500; }

/* ============================================================
   Diagram 2 — AI pipeline detail (stage = 720px)
   ============================================================ */
#d2 { width: 672px; }
.d2-flow {
  display: grid;
  grid-template-columns: 180px 1fr 200px;
  align-items: center;
}
.d2-col { display: flex; flex-direction: column; gap: 16px; }
.d2-col.inputs   { padding-right: 48px; }
.d2-col.products { padding-left: 48px; gap: 12px; }
.d2-mid  { display: flex; justify-content: center; }
.d2-orch { width: 100%; max-width: 190px; padding: 18px; text-align: center; }
.d2-orch .t { font-size: 16px; }
.d2-orch .c { margin-top: 7px; }
.d2-orch .c + .c { margin-top: 2px; }

.d2-shared {
  margin-top: 56px;
  border: 1px solid var(--divider);
  border-radius: var(--r-md);
  background: rgba(255, 249, 232, 0.025);
  padding: 36px 22px 22px;
  position: relative;
  z-index: 1;
}
.d2-shared > .hd-band-label {
  position: absolute;
  z-index: 3;
  top: 14px;
  left: 20px;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.d2-services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.d2-services .hd-node { text-align: center; padding: 13px 12px; }
.d2-services .hd-node .t { font-size: 13px; font-weight: 500; }