/* Bespoke CSS architecture figures — Zensical's mermaid driver renders blank
   (confirmed on the live site), so diagrams are built in CSS instead. Themed to
   kourai's gold/obsidian brand and the per-agent --agent-accent identity colors. */

.md-typeset .korch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  margin: 2rem 0 2.4rem;
  padding: 1.6rem 1rem;
  border: 1px solid var(--glass-border);
  border-radius: 1rem;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%,
      color-mix(in srgb, var(--gold-metallic) 8%, transparent), transparent 70%),
    color-mix(in srgb, var(--obsidian) 45%, transparent);
}

.korch-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 0.7rem;
  width: 100%;
}

.korch-flow {
  margin: 0.55rem 0;
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-align: center;
  color: color-mix(in srgb, var(--gold-light) 72%, transparent);
}

.korch-flow::before { content: "\2193\00a0"; } /* down arrow */

.md-typeset .kagent {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 6.6rem;
  padding: 0.5rem 0.8rem;
  text-align: center;
  border-radius: 0.55rem;
  border: 1px solid color-mix(in srgb, var(--agent-accent, var(--gold-mid)) 45%, transparent);
  border-top: 2px solid var(--agent-accent, var(--gold-mid));
  background: color-mix(in srgb, var(--agent-accent, var(--gold-mid)) 12%, transparent);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.md-typeset .kagent:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--agent-accent, var(--gold-mid)) 25%, transparent);
}

.kagent b {
  color: var(--gold-light);
  font-size: 0.84rem;
}

.kagent span {
  font-size: 0.64rem;
  line-height: 1.3;
  opacity: 0.78;
}

/* HEPHAESTUS — the orchestrator hub, deliberately prominent. */
.md-typeset .kagent.khub {
  min-width: 15rem;
  padding: 0.75rem 1.4rem;
  border-width: 1px;
  border-top-width: 3px;
  background: color-mix(in srgb, var(--agent-accent) 18%, transparent);
}

.kagent.khub b { font-size: 1.05rem; }

/* Agent group cluster (Core Specialists / Companion Spirits / Quality Validators). */
.md-typeset .kgroup {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.7rem 0.7rem 0.8rem;
  border-radius: 0.7rem;
  border: 1px dashed color-mix(in srgb, var(--gold-mid) 38%, transparent);
  background: color-mix(in srgb, var(--obsidian) 35%, transparent);
}

.kgroup-h {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gold-mid);
}

.kgroup .korch-row { gap: 0.4rem; }
.kgroup .kagent { min-width: 6rem; }

@media (max-width: 720px) {
  .md-typeset .kagent.khub { min-width: 12rem; }
  .kgroup .kagent { min-width: 5.4rem; }
}

/* Horizontal process row (refine loops, decision flows). */
.md-typeset .korch--row .korch-row { align-items: center; gap: 0.55rem; }

.korch-arrow {
  align-self: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--gold-light) 60%, transparent);
}

.md-typeset .kdecision {
  align-self: center;
  padding: 0.5rem 0.9rem;
  text-align: center;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--gold-light);
  border: 1px solid color-mix(in srgb, var(--gold-mid) 55%, transparent);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--gold-mid) 14%, transparent);
  transform: skewX(-8deg);
}
.kdecision > * { display: inline-block; transform: skewX(8deg); }

.md-typeset .kagent.kdone {
  border-color: color-mix(in srgb, #7fbc8c 55%, transparent);
  border-top-color: #7fbc8c;
  background: color-mix(in srgb, #7fbc8c 12%, transparent);
}

.korch-loop-note {
  margin-top: 0.5rem;
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  opacity: 0.72;
  color: var(--gold-light);
}
.korch-loop-note::before { content: "\21BA\00a0"; } /* loop arrow */

/* Interaction timeline — the sequence-diagram idiom as message rows (from -> to
   + message), a loop frame, and a note. Keeps the temporal/directional reading
   without a full lifeline grid. */
.md-typeset .kseq {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 2rem 0 2.4rem;
  padding: 1.2rem 1.1rem;
  border: 1px solid var(--glass-border);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--obsidian) 45%, transparent);
}

.md-typeset .kseq-step {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  padding: 0.3rem 0.45rem;
  border-radius: 0.4rem;
  font-size: 0.82rem;
}

.md-typeset .kseq-step:hover {
  background: color-mix(in srgb, var(--gold-metallic) 7%, transparent);
}

.kseq-route {
  flex: 0 0 10rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--gold-mid);
  white-space: nowrap;
}

.kseq-step.kseq-self .kseq-route {
  color: color-mix(in srgb, var(--gold-light) 55%, transparent);
  font-style: italic;
}

.kseq-msg { opacity: 0.9; }

.md-typeset .kseq-loop {
  margin: 0.4rem 0;
  padding: 0.5rem 0.6rem 0.6rem;
  border: 1px dashed color-mix(in srgb, var(--gold-mid) 42%, transparent);
  border-radius: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.kseq-loop-h {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-mid);
}
.kseq-loop-h::before { content: "\21BB\00a0"; } /* clockwise loop */

.md-typeset .kseq-note {
  margin-top: 0.45rem;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--gold-mid);
  border-radius: 0 0.4rem 0.4rem 0;
  background: color-mix(in srgb, var(--gold-metallic) 8%, transparent);
  font-size: 0.76rem;
  opacity: 0.92;
}
.kseq-note::before { content: "✎\00a0"; opacity: 0.7; }

@media (max-width: 640px) {
  .kseq-route { flex-basis: 7rem; white-space: normal; }
}