/* One visual language for every diagram in the hub, built from real HTML text.
   Nothing here scales a coordinate system, so nothing here shrinks on a phone.
   Every value below is one of the tokens already defined in style.css: no new
   colour, font size, radius, shadow or easing is introduced by this file.
   Class prefix is dg- so it can never be confused with the retired SVG-era
   d- classes. A dg- class is only ever styling; direction and status live in
   which classes an author combines, not in one-off inline styles. */

/* Core: every diagram is a <figure class="dg"> with a real <figcaption>. */
.dg { margin: 2rem 0; }
.dg > :first-child { margin-top: 0; }
.dg-caption { font-size: var(--t-2); line-height: 1.5; color: var(--ink-3); margin: 1rem 0 0; }

/* Node: the box for one step, section or item. Combine with a state modifier
   below to mark it accented, quiet, current, done or waiting. */
.dg-node {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  padding: 1rem 1.15rem;
}
.dg-title { font: 700 var(--t-3)/1.25 var(--font-display); color: var(--ink); margin: 0; overflow-wrap: anywhere; }
.dg-desc { font: 500 var(--t-2)/1.4 var(--font-text); color: var(--ink-2); margin: 0; overflow-wrap: anywhere; }
.dg-note { font: 500 var(--t-1)/1.4 var(--font-text); color: var(--ink-3); margin: 0; overflow-wrap: anywhere; }

/* State and emphasis modifiers. Combine with .dg-node, .dg-badge or
   .dg-pipeline-step; the same five words mean the same thing everywhere. */
.dg-accent.dg-node { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); }
.dg-quiet.dg-node { border: none; background: var(--surface); box-shadow: none; }
.dg-current.dg-node { border-color: var(--accent); border-width: 2px; box-shadow: var(--sh-2); }
.dg-done.dg-node { border-color: var(--ok); }
.dg-waiting.dg-node { border-style: dashed; background: var(--surface); box-shadow: none; }

/* Badge: a small pill for a status word, e.g. "You are here", "Done", "Waiting". */
.dg-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font: 700 var(--t-1)/1 var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.65rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.dg-accent.dg-badge, .dg-current.dg-badge { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.dg-done.dg-badge { border-color: var(--ok); color: var(--ok); background: transparent; }
.dg-waiting.dg-badge { border-style: dashed; color: var(--ink-3); background: transparent; }

/* Stack: a vertical, centred column. Used for a map with a root and branches. */
.dg-stack { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.dg-stack .dg-node { text-align: center; }
.dg-stack > .dg-row { width: 100%; }

/* Row: a wrapping horizontal group of nodes with no sequence of its own.
   Used for a map's branches and for a before-and-after pair. */
.dg-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.1rem; }
.dg-row > .dg-node { flex: 1 1 13rem; max-width: 20rem; }

/* Flow: an ordered sequence of nodes. Reads left to right on a wide screen
   and stacks top to bottom on a narrow one; its arrows turn with it. */
.dg-flow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1rem; }
.dg-flow .dg-node { flex: 1 1 11rem; max-width: 16rem; text-align: center; }
.dg-flow .dg-arrow { flex: 0 0 auto; }
@media (max-width: 40rem) {
  .dg-flow { flex-direction: column; align-items: stretch; }
  /* flex-basis is a main-axis size. In the row layout above, the main axis is
     width, so 11rem sizes the node's width. Once flex-direction flips to
     column here, the main axis becomes height, and that same 11rem would set
     the node's height instead, leaving dead space below its text. Reset the
     basis to auto and drop the grow factor so a stacked node sizes to its
     own content, the same as every other stacked node in this file. */
  .dg-flow .dg-node { flex: 0 1 auto; max-width: none; }
  .dg-flow .dg-arrow { align-self: center; transform: rotate(90deg); }
}

/* Arrow: an explicit connector, always marked aria-hidden by its author.
   Its glyph carries the direction (for example an ordinary right or down
   arrow character); .dg-flow is the only context that ever rotates it. */
.dg-arrow { display: inline-flex; align-items: center; justify-content: center; font: 700 var(--t-4)/1 var(--font-display); color: var(--ink-3); }

/* Timeline: a vertical list of dated events along a rail. */
.dg-timeline { display: flex; flex-direction: column; gap: 1.5rem; list-style: none; margin: 0; padding: 0 0 0 1.6rem; border-left: 2px solid var(--line); }
.dg-timeline-item { position: relative; display: flex; flex-direction: column; gap: 0.3rem; }
.dg-timeline-dot { position: absolute; top: 0.3rem; left: -1.95rem; width: 0.7rem; height: 0.7rem; border-radius: var(--r-pill); background: var(--accent); border: 2px solid var(--bg); }
.dg-timeline-date { font: 700 var(--t-1)/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }

/* Pipeline: a vertical, numbered list of many steps, each markable done,
   current ("you are here") or waiting via the same state modifiers above. */
.dg-pipeline { display: flex; flex-direction: column; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.dg-pipeline-step { display: flex; align-items: flex-start; gap: 1rem; }
.dg-pipeline-step .dg-node { flex: 1 1 auto; }
.dg-pipeline-index {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font: 700 var(--t-2)/1 var(--font-display);
}
.dg-current.dg-pipeline-step .dg-pipeline-index { background: var(--accent); color: var(--on-accent); }
.dg-done.dg-pipeline-step .dg-pipeline-index { background: var(--ok); color: var(--on-accent); }
.dg-waiting.dg-pipeline-step .dg-pipeline-index { background: var(--surface); color: var(--ink-3); }