/* ─────────────────────────────────────────────────────────────
   In-article figures.
   ─────────────────────────────────────────────────────────────

   The same visual language as the diagrams in motion.css, built as HTML rather
   than as SVG, because a figure inside a blog post has a different job to a
   diagram on a feature page.

   The feature-page diagrams are laid out in a 1000-unit viewBox and hold their
   labels legible by refusing to render below 1125px, scrolling sideways on a
   phone instead. That is the right trade for a full-bleed figure a reader has
   arrived at deliberately. It is the wrong trade here: single.php holds the
   article column to 780px, so every one of those diagrams would scroll
   horizontally in a post, and an SVG that scaled to fit the column instead
   would take its labels down to about 8px on a 360px screen. Text in an SVG
   scales with the drawing; text in HTML does not.

   So these are boxes of real text that reflow: a row on a wide screen, a stack
   on a narrow one, at the same font size either way. That also means no
   geometry is computed anywhere. The generator that emits this markup writes
   labels, never coordinates, so a label nobody measured cannot overflow a box
   it was drawn to fit.

   Nothing here animates. motion.js already treats every direct child of
   .rakt-prose as a reveal target and staggers side-by-side children, so a
   figure gets the same entrance as the diagrams do, decided in one place. Steps
   that have stacked on a phone are no longer side by side, so they reveal as one
   block, which is what that code already does for a card row.

   Class names are a contract with the renderer in the rakt-marketing-pipeline
   repo (src/rakt_marketing/figures.py). Renaming one here silently unstyles
   every published figure, so change both together. */

.rakt-fig {
  --fig-ink: var(--rakt-ink, #0B1220);
  --fig-body: var(--rakt-body, #475569);
  --fig-muted: var(--rakt-muted, #64748B);
  --fig-line: var(--rakt-line, #E3E8EF);
  --fig-primary: var(--rakt-primary, #D0243C);
  --fig-surface: var(--rakt-surface, #F7F9FC);
  --fig-check: var(--rakt-check, #0F7B4F);
  --fig-refuse: #9B1C2E;

  margin: var(--rakt-space-lg, 2rem) 0;
  font-family: var(--rakt-font-primary, sans-serif);
}

/* A short line above the figure, when the surrounding prose does not already
   introduce it. Sized as a label rather than a heading: putting an h3 here would
   add a rung to the article's heading outline for something that is not a
   section, which the heading-structure check in the pipeline reads as a defect. */
.rakt-fig__lead {
  margin: 0 0 var(--rakt-space-sm, 1rem);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--fig-ink);
}

/* Matches .rakt-dgm__cap exactly, so a caption reads the same whether it sits
   under a diagram on a feature page or under a figure in a post. */
.rakt-fig__cap {
  margin: 14px 0 0;
  font-size: 0.84375rem;
  line-height: 1.5;
  color: var(--fig-muted);
}

/* ── Steps ────────────────────────────────────────────────────
   A sequence: what happens, in the order it happens.

   An ol because that is what it is, which also means a screen reader announces
   the count and the position instead of reading a row of unrelated nouns. The
   list styling from prose.css has to be undone, since these carry their own
   numbering in the eyebrow when they are numbered at all. */

.rakt-fig__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;

  /* Clips the connector on a step that ends a wrapped row. See the chevron below: the whole
     reason that works is that the chevron sits entirely outside this box when there is no gap to
     its right, so it disappears rather than being cut in half. Without this the figure scrolled
     sideways at every width where five steps wrapped to four and one, measured at 620px, which
     is the exact defect these figures exist to avoid. */
  overflow: hidden;
}

.rakt-fig__step {
  /* Grow to share the row, but never narrower than a two-word label can sit on
     one line. Below that the flex container wraps, which is the reflow: four
     steps become two and two, then one and one, with no breakpoint to maintain
     and no width at which the text is squeezed. */
  flex: 1 1 132px;
  min-width: 0;
  margin: 0;
  padding: 14px 16px;
  background: #FFFFFF;
  border: 1px solid var(--fig-line);
  border-radius: 10px;
  position: relative;
}

/* First and last carry the same tint the diagrams use: the starting state is a
   surface panel, the finished one reads as done. */
.rakt-fig__step--start { background: var(--fig-surface); }
.rakt-fig__step--done  { background: #F1F8F4; border-color: #C6E3D2; }

/* The connector: a chevron occupying the gap between two steps, pointing the way
   the sequence runs, echoing the arrowheads in the SVG diagrams.

   Two things make the geometry exact, and both matter. It fills the gap precisely
   rather than approximately: 10px wide at right:-10px puts it between the two
   boxes and nowhere else, so on a step that ends a wrapped row it lies wholly
   outside the container and the overflow rule above removes it. And it is
   clip-path rather than a rotated bordered square, because rotating a square
   grows its bounding box past the gap on both sides, which left a sliver of
   chevron poking over the container edge and kept the figure scrollable.

   :not(:last-child) covers the final step, which has nothing to point at. */
.rakt-fig__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: var(--fig-primary);
  clip-path: polygon(25% 0, 75% 50%, 25% 100%, 0 100%, 50% 50%, 0 0);
}

/* 12px, matching .rakt-dgm .t-step in motion.css. That is the size the diagrams
   treat as their legibility floor, and the whole min-width rule on the SVG
   figures exists to stop the eyebrow going below it. */
.rakt-fig__eyebrow {
  margin: 0 0 6px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fig-primary);
}

.rakt-fig__label {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--fig-ink);
}

.rakt-fig__note {
  margin: 5px 0 0;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--fig-muted);
}

/* A word longer than its column overflows the card instead of wrapping, because there is nowhere
   for the line to break. Five steps in a 780px article column leave each note about 103px, and
   "acknowledgement" wants 113px, so it spilled past the border at every width above the point
   where the steps stack. Hyphenation breaks it where English allows; break-word is the backstop
   for anything hyphenation will not split, such as a long identifier. The alternative was widening
   the flex basis so five steps wrap sooner, which trades this defect for the orphaned fifth step
   the chevron rule above already had to work around. */
.rakt-fig__label,
.rakt-fig__note,
.rakt-fig__cond,
.rakt-fig__verdict {
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* The exception, off to the side of the happy path.
   Dashed to match n-link--dash, because in both places it means the same thing:
   a route that is a normal outcome rather than the one the sequence describes. */
.rakt-fig__exception {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 10px 0 0;
  padding: 12px 16px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--fig-body);
  background: var(--fig-surface);
  border: 1px dashed #CBD5E1;
  border-radius: 10px;
}

.rakt-fig__exception::before {
  content: "↳";
  flex: none;
  font-size: 0.9375rem;
  line-height: 1;
  color: var(--fig-primary);
}

/* ── Decision ─────────────────────────────────────────────────
   A condition, and what follows from it. The release-gate diagram in the same
   language: the verdict is the point, so it is a word and a mark, not a colour
   alone. */

.rakt-fig__rows {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rakt-fig__row {
  display: grid;
  /* Condition takes the slack, mark is fixed, verdict sizes to its text. On a
     narrow column the condition and the verdict stack, which keeps the verdict
     on one line: "Issued, exception recorded" wrapped mid-phrase reads as two
     different verdicts. */
  grid-template-columns: 1fr auto auto;
  gap: 4px 12px;
  align-items: center;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--fig-line);
  border-radius: 10px;
  background: #FFFFFF;
}

.rakt-fig__row--refused  { background: #FDF2F4; border-color: #F3C6CE; }
.rakt-fig__row--allowed  { background: #F1F8F4; border-color: #C6E3D2; }
.rakt-fig__row--recorded { background: var(--fig-surface); }

.rakt-fig__cond {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--fig-ink);
  min-width: 0;
}

/* Decorative: the verdict beside it says the same thing in words, which is what
   a screen reader reads and what survives being printed in black and white. */
.rakt-fig__mark {
  flex: none;
  display: block;
  width: 17px;
  height: 17px;
}

.rakt-fig__mark path {
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rakt-fig__verdict {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.rakt-fig__row--refused  .rakt-fig__mark path { stroke: var(--fig-refuse); }
.rakt-fig__row--refused  .rakt-fig__verdict    { color: var(--fig-refuse); }
.rakt-fig__row--allowed  .rakt-fig__mark path { stroke: var(--fig-check); }
.rakt-fig__row--allowed  .rakt-fig__verdict    { color: var(--fig-check); }
.rakt-fig__row--recorded .rakt-fig__mark path { stroke: var(--rakt-warning, #F4A623); }
.rakt-fig__row--recorded .rakt-fig__verdict    { color: var(--fig-body); }

/* A reason under the verdict, spanning the full width so it reads as prose
   about the row rather than as a fourth column. */
.rakt-fig__because {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--fig-muted);
}

/* ── Narrow columns ───────────────────────────────────────────
   One breakpoint, and only for the things flex and grid cannot do on their own:
   turning the step chevrons to point down once the steps have stacked, and
   letting a decision row put its verdict under its condition.

   440px rather than a device width. It is the point at which a three-column
   decision row starts breaking "Issued, exception recorded" across lines, which
   is a property of the content and not of anybody's phone. */
@media (max-width: 440px) {
  .rakt-fig__step {
    flex: 1 1 100%;
  }
  .rakt-fig__step:not(:last-child)::after {
    top: auto;
    bottom: -10px;
    right: auto;
    left: 50%;
    margin: 0 0 0 -5px;
    clip-path: polygon(0 25%, 50% 75%, 100% 25%, 100% 0, 50% 50%, 0 0);
  }
  .rakt-fig__row {
    grid-template-columns: auto 1fr;
  }
  .rakt-fig__cond {
    grid-column: 1 / -1;
  }
}

/* ── Print ────────────────────────────────────────────────────
   Compliance guidance gets printed and put in a folder. Tints drop out on a
   mono printer and take the verdict with them, so the borders have to carry it. */
@media print {
  .rakt-fig__step,
  .rakt-fig__row {
    background: none !important;
    border-color: #999 !important;
  }
  .rakt-fig {
    break-inside: avoid;
  }
}