/* ============================================================================
   Flow diagrams (SITE-SPEC.md §9).

   Diagrams are rendered from structured data (src/lib/diagram.ts), never from
   uploaded artwork. This file owns every visual decision — colour, spacing,
   line treatment — the data itself only ever supplies step labels.

   The base panel/list/loop-arc treatment matches the accepted design in
   /v2/mockup.html (.flow, ol > li, the dashed loop arc). BRANCH and MULTI_ROW
   extend the same language: mono step rows, dashed accent connectors, small
   uppercase labels, no bespoke per-diagram styling.

   Every diagram is contained on its own column (container-type: inline-size
   on .diagram) rather than the viewport, so it looks the same wherever the
   CMS places it — inside a narrow project column or full width.

   The compact form — every step row stacked vertically, "A ↓ B ↓ C" — is the
   base, and the horizontal form ("A → B → C") is layered on top of it once
   the diagram's own column is wide enough to hold a row without wrapping it
   mid-chain. Written that way round, the safe layout is what you get by
   default: no container-query support, or a column too narrow, and the
   diagram stacks rather than overflowing.

   `.diagram--stacked` opts a diagram out of the horizontal form entirely.
   src/views/components/diagram.tsx sets it from the step data when the
   longest row is too long to fit horizontally at any column width the site
   ever gives it — see the note there.
   ========================================================================== */

.diagram {
  container-type: inline-size;
  margin: 0;
}

/* ---- panel ---------------------------------------------------------- */

.flow {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  padding: 26px 22px 22px;
}

/* ---- step rows: shared by every template ----------------------------
   A row is an <ol> of steps, mono, one step per line with "↓" between them.
   The horizontal "→" form is applied further down, where it fits. */

.flow ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--ink-70);
}
.flow li {
  white-space: normal;
  overflow-wrap: break-word;
}
.flow li + li::before {
  content: '↓';
  display: block;
  color: var(--faint);
  margin: 6px 0 6px 1px;
}

/* The final step is the destination the whole diagram is building toward —
   reserved for LINEAR and LOOP, whose single row *is* the whole diagram. */
.flow--linear > ol > li:last-child,
.flow--loop > ol > li:last-child {
  color: var(--accent);
}

/* ---- small mono labels (arm / row / loop labels) ---------------------- */

.flow .arm-label,
.flow .row-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ============================= LOOP ==================================== */

/* The arc sits on the left edge and points back up into the first step, per
   the mockup's vertical treatment; the horizontal branch below lays the same
   arc along the bottom instead. */
.flow--loop.loops {
  padding-bottom: 26px;
  padding-left: 38px;
}
.flow--loop.has-label.loops {
  padding-left: 46px;
}

.flow--loop .loop {
  position: absolute;
  left: 12px;
  right: auto;
  top: 34px;
  bottom: 26px;
  width: 14px;
  height: auto;
  border: 1px dashed var(--accent-soft);
  border-right: 0;
  border-bottom: 0;
}
.flow--loop .loop::before {
  content: '';
  position: absolute;
  left: 9px;
  top: -4.5px;
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-left-color: var(--accent);
}
.flow--loop .loop-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  background: var(--paper-2);
  padding: 0 8px;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ============================= BRANCH =================================== */

.flow--branch {
  display: flex;
  flex-direction: column;
}

.flow--branch > .branch-connector {
  margin: 3px 0 3px 6px;
}

.branch-arms {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 2px 0;
  padding-left: 20px;
}
/* the shared spine both arms branch off */
.branch-arms::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 4px;
  bottom: 4px;
  width: 0;
  border-left: 1px dashed var(--accent-soft);
}

.branch-arm {
  position: relative;
}
/* the stub connecting each arm back to the spine */
.branch-arm::before {
  content: '';
  position: absolute;
  left: -15px;
  top: 8px;
  width: 11px;
  height: 0;
  border-top: 1px dashed var(--accent-soft);
}
.branch-arm .arm-label {
  margin: 0 0 6px;
}
.branch-arm ol {
  margin: 0;
}

/* split / rejoin: a short vertical tick with an arrowhead into what follows */
.branch-connector {
  display: block;
  width: 0;
  height: 16px;
  border-left: 1px dashed var(--accent-soft);
  position: relative;
}
.branch-connector::after {
  content: '';
  position: absolute;
  left: -4px;
  bottom: -2px;
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-top-color: var(--accent);
}

/* ============================= MULTI_ROW ================================ */

.flow--multirow {
  display: flex;
  flex-direction: column;
}
.multirow-row + .multirow-row {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--rule-soft);
}
.multirow-row .row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 7px;
}
.multirow-row .row-connector {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent-soft);
  line-height: 1;
}
.multirow-row ol {
  margin: 0;
}

/* ============================================================================
   Wide enough for the horizontal form.

   The step rows lay out as "→" chains, and LOOP's arc moves from the left
   edge to along the bottom. Applies uniformly to every template, so
   LINEAR/LOOP, BRANCH arms and MULTI_ROW rows all flip together — the
   approach demonstrated in /v2/mockup.html, expressed here as the wide case
   rather than the narrow one.

   560px is the narrowest column that holds a full-length row comfortably; the
   evidence column is wider than that at desktop and tablet-stacked widths and
   narrower below. `.diagram--stacked` diagrams sit this out whatever their
   column width — their rows are too long for the horizontal form to fit at
   any width the site offers (see src/views/components/diagram.tsx).
   ========================================================================== */

@container (min-width: 560px) {
  /* Panel padding answers to the column, not to the row direction, so a
     stacked diagram in a wide column still gets the roomier inset. */
  .flow {
    padding: 30px 26px 26px;
  }

  .diagram:not(.diagram--stacked) .flow ol {
    flex-direction: row;
    align-items: center;
    gap: 0 11px;
  }
  .diagram:not(.diagram--stacked) .flow li {
    white-space: nowrap;
    overflow-wrap: normal;
  }
  .diagram:not(.diagram--stacked) .flow li + li::before {
    content: '→';
    display: inline;
    margin: 0 11px 0 0;
  }

  /* LOOP: the arc runs along the bottom of the panel and points back up into
     the first step. */
  .diagram:not(.diagram--stacked) .flow--loop.loops {
    padding-bottom: 52px;
    padding-left: 26px;
  }
  .diagram:not(.diagram--stacked) .flow--loop.has-label.loops {
    padding-bottom: 60px;
    padding-left: 26px;
  }
  .diagram:not(.diagram--stacked) .flow--loop .loop {
    left: 30px;
    right: 30px;
    top: auto;
    bottom: 24px;
    width: auto;
    height: 16px;
    border: 1px dashed var(--accent-soft);
    border-top: 0;
  }
  .diagram:not(.diagram--stacked) .flow--loop.has-label .loop {
    height: 22px;
  }
  .diagram:not(.diagram--stacked) .flow--loop .loop::before {
    left: -4.5px;
    top: -4px;
    border-left-color: transparent;
    border-bottom-color: var(--accent);
  }
  .diagram:not(.diagram--stacked) .flow--loop .loop-label {
    transform: translate(-50%, -50%);
  }

  /* BRANCH: the spine and stubs get a little more room to breathe. */
  .diagram:not(.diagram--stacked) .branch-arms {
    padding-left: 24px;
    gap: 16px;
  }
  .diagram:not(.diagram--stacked) .branch-arms::before {
    left: 6px;
  }
  .diagram:not(.diagram--stacked) .branch-arm::before {
    left: -18px;
    width: 14px;
  }
}