/* Architecture page: an inline SVG diagram in the style of a whiteboard tool
   (dotted canvas, tinted groups, icon nodes, labelled edges). Being inline, it
   takes the theme colours. reveal.js builds it group by group on first view;
   after that it stays still. */

.arch-page {
  padding-top: 2.5rem;
  padding-bottom: 3rem;
}

.arch-page .hint {
  margin-bottom: 1.75rem;
}

/* Diagram palette: one hue per kind of thing, lighter in dark mode. */
.arch {
  --d-blue: #2563eb;
  --d-green: #16a34a;
  --d-violet: #7c3aed;
  --d-amber: #d97706;
  --d-orange: #ea580c;
  --d-gray: #52525b;
  --d-edge: #a1a1aa;
  margin: 0;
}

:root[data-theme="dark"] .arch {
  --d-blue: #60a5fa;
  --d-green: #4ade80;
  --d-violet: #a78bfa;
  --d-amber: #fbbf24;
  --d-orange: #fb923c;
  --d-gray: #a1a1aa;
  --d-edge: #71717a;
}

.c-blue { color: var(--d-blue); }
.c-green { color: var(--d-green); }
.c-violet { color: var(--d-violet); }
.c-amber { color: var(--d-amber); }
.c-orange { color: var(--d-orange); }
.c-gray { color: var(--d-gray); }

/* The canvas. Below its minimum width it scrolls inside itself, not the page. */
.arch-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.arch svg {
  display: block;
  width: 100%;
  min-width: 760px;
  height: auto;
}

.arch .grid-dot {
  fill: var(--line);
}

.arch text {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 11px;
  fill: var(--muted);
}

/* Groups: a tinted box with its name in the group colour. */
.arch .g-box {
  fill: color-mix(in srgb, currentColor 4%, transparent);
  stroke: color-mix(in srgb, currentColor 50%, transparent);
  stroke-width: 1.25;
}

.arch .g-name {
  font-size: 12px;
  font-weight: 600;
  fill: currentColor;
}

.arch .mono {
  font-family: var(--mono);
  font-size: 10px;
}

.arch .g-icon {
  fill: none;
  stroke: currentColor;
}

/* Nodes: an icon tile, the name under it and the details in small print. */
.arch .tile {
  fill: color-mix(in srgb, currentColor 12%, var(--surface));
  stroke: color-mix(in srgb, currentColor 40%, transparent);
  stroke-width: 1.25;
}

.arch .icon,
.arch .g-icon {
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.arch .icon {
  fill: none;
  stroke: currentColor;
}

.arch .n-title {
  font-size: 12.5px;
  font-weight: 600;
  fill: var(--fg);
  text-anchor: middle;
}

.arch .n-sub {
  text-anchor: middle;
}

/* Edges: a plain line with an arrow, the label sitting on it. */
.arch .edge {
  fill: none;
  stroke: var(--d-edge);
  stroke-width: 1.25;
}

.arch .edge-link {
  stroke-dasharray: 2 3;
}

.arch .arch-head {
  fill: var(--d-edge);
}

/* A halo in the canvas colour keeps labels legible over the lines they cross. */
.arch .e-label {
  font-size: 10.5px;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 6px;
  stroke-linejoin: round;
}

.arch .blocked {
  fill: none;
  stroke: var(--danger);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

.arch .blocked-x {
  stroke: var(--danger);
  stroke-width: 2;
  stroke-linecap: round;
}

.arch .blocked-label {
  fill: var(--danger);
}

.arch.is-waiting .arch-step {
  opacity: 0;
}

.arch.is-in .arch-step {
  animation: fade-in 0.4s ease-out calc(var(--i) * 0.3s) both;
}

@media (prefers-reduced-motion: reduce) {
  .arch.is-in .arch-step {
    animation: none;
  }
}