/* ==========================================================================
   "Our network" — origin → Germany → global markets.
   Designer Brief section 4, Section 6.

   September 2026 redesign. The band stated a three-stage route as three
   columns of loose text on the bare dark ground, with the only enclosed
   element — the evidence list — sitting at the bottom of each column. The
   result read as three footnotes under three paragraphs: nothing grouped a
   stage, and the heaviest box on screen was the least important part of it.

   Now each stage is one card, and the sequence is drawn where a sequence
   belongs — through the numbers, along the top edge. Three consequences:

   1. The stage is a single object. Region label, role, description, evidence
      and the onward link sit inside one boundary, so the eye can take a stage
      whole and compare it with the next.

   2. The numbered markers straddle the card's top edge and the rail runs
      between them, so the route is read once, across the top, instead of being
      restated by the arrows-and-bracket drawing this replaces.

   3. Evidence loses its own border and becomes the card's footer, separated by
      a rule. It stays distinct from the claim above it without being the
      loudest thing in the section, and the footer bottom-aligns, so the three
      onward links land on one line whatever the prose above them does.

   Layout and one accent only. Every colour is a token or a translucent white
   on the section's own dark ground, so a palette change lands here without
   this file being edited.
   ========================================================================== */

.nflow{--ngap:var(--s-6);--nmark:40px;--ncard:var(--s-5);
  --nsurface:rgba(232,245,233,.045);
  --nline:rgba(232,245,233,.14);
  --nline-strong:rgba(232,245,233,.28)}

/* --------------------------------------------------------------------------
   The track.

   auto-fit rather than repeat(3,…): the string table owns the stage count and
   the layout should follow it. The top padding is the half of the marker that
   sits above the cards.
   -------------------------------------------------------------------------- */
.nflow-track{
  list-style:none;margin:0;padding:calc(var(--nmark) / 2) 0 0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:var(--ngap);
  align-items:stretch;
}
.nflow-track > *{min-width:0}

/* --------------------------------------------------------------------------
   The card.
   -------------------------------------------------------------------------- */
.nflow-stop{
  position:relative;
  display:flex;flex-direction:column;
  padding:calc(var(--nmark) / 2 + var(--s-4)) var(--ncard) var(--ncard);
  border:1px solid var(--nline);border-radius:var(--radius);
  background:var(--nsurface);
  overflow-wrap:anywhere;
  transition:border-color .18s ease,background-color .18s ease;
}
.nflow-stop:hover{border-color:var(--nline-strong);background:rgba(232,245,233,.07)}

/* The rail. It starts after this card's marker and ends at the next card's
   marker, crossing the gutter — the negative inline-end is the only way to
   name the next column's edge without measuring anything. It sits on the
   card's own top border line, so it reads as one continuous route rather than
   a line floating above the row. Absent on the last stop. */
.nflow-stop::before{
  content:"";position:absolute;z-index:0;
  inset-inline-start:calc(var(--ncard) + var(--nmark) + var(--s-3));
  inset-inline-end:calc(-1 * var(--ngap) - 1px);
  top:-1px;
  height:1px;background:var(--nline-strong);
}
.nflow-stop:last-child::before{content:none}

/* --------------------------------------------------------------------------
   The marker, straddling the top edge.

   The number was previously printed inside the label text ("01 — Origin
   network"), where a screen reader read it as part of the heading. It is the
   marker now, and the heading carries only the words.

   Its background is the section ground rather than the card's, so the rail
   passes behind it cleanly.
   -------------------------------------------------------------------------- */
.nflow-marker{
  position:absolute;z-index:1;
  inset-inline-start:var(--ncard);top:calc(var(--nmark) / -2);
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--nmark);height:var(--nmark);border-radius:var(--radius-full);
  border:1px solid var(--nline-strong);background:var(--deep);
  font-family:var(--data);font-size:var(--fs-micro);font-weight:var(--fw-micro);
  letter-spacing:var(--ls-micro);font-variant-numeric:tabular-nums;
  color:var(--focus-on-dark);
}

.nflow-body{display:flex;flex-direction:column;flex:1 1 auto}

/* Geography demoted to a label, role promoted to the heading. The scan line
   used to read "India / Asia — Germany — Worldwide", which is a shipping
   route; it now reads as what each stage is accountable for. */
.nflow-place{
  margin:0 0 var(--s-2);
  font-family:var(--data);font-size:var(--fs-micro);font-weight:var(--fw-micro);
  letter-spacing:var(--ls-micro);line-height:var(--lh-micro);text-transform:uppercase;
  color:var(--focus-on-dark);
}
.nflow-stop h3{margin:0 0 var(--s-3);font-size:var(--fs-h3);color:var(--on-deep)}
.nflow-d{margin:0;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--on-deep-2);max-width:44ch}

/* --------------------------------------------------------------------------
   Evidence, as the card's footer.

   The rule separates what the stage CLAIMS (the prose above) from what it can
   SHOW (the rows below) — the separation the old inset panel was carrying,
   at a fraction of its weight. margin-top:auto pushes the footer down, so the
   three onward links sit on one line across the row.
   -------------------------------------------------------------------------- */
.nflow-foot{
  margin-top:auto;padding-top:var(--s-5);
  border-top:1px solid var(--nline);
}
.nflow-body > .nflow-foot{margin-top:var(--s-5)}
.nflow-body > .nflow-foot:not(:only-child){margin-top:auto}

.nflow-ev-h{
  margin:0 0 var(--s-3);
  font-family:var(--data);font-size:var(--fs-micro);font-weight:var(--fw-micro);
  letter-spacing:var(--ls-micro);line-height:var(--lh-micro);text-transform:uppercase;
  color:var(--on-deep-3);
}
.nflow-ev{
  list-style:none;margin:0 0 var(--s-5);padding:0;
  display:flex;flex-direction:column;gap:var(--s-3);
}
.nflow-ev:last-child{margin-bottom:0}
.nflow-ev-row{
  display:flex;align-items:flex-start;gap:var(--s-3);
  font-size:var(--fs-small);line-height:var(--lh-small);color:var(--on-deep-2);
}
/* The mark is a fixed-width state column, so row text starts on one vertical
   line whether or not the row carries a mark. An unmarked row pads by the same
   amount instead of drawing one. */
.nflow-ev-row .prov-mark{flex:0 0 auto;margin-top:2px}
.nflow-ev-row[data-state="plain"]{padding-inline-start:calc(12px + var(--s-3))}
.nflow-ev-t{min-width:0}

/* A confirmed row is the site's evidence claim, so it takes the readable
   weight; a pending row stays quieter without being greyed into illegibility
   (--on-deep-2 is 6.92:1 on --deep). */
.nflow-ev-row[data-state="confirmed"] .nflow-ev-t{color:var(--on-deep)}

/* --------------------------------------------------------------------------
   The onward link. One per stage, and the only interactive thing in the card,
   so it carries the arrow the rest of the site uses for "this continues
   somewhere".
   -------------------------------------------------------------------------- */
.nflow-more{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-family:var(--data);font-size:var(--fs-small);line-height:var(--lh-small);
  font-weight:var(--fw-micro);color:var(--on-deep);text-decoration:none;
  border-bottom:1px solid var(--line-on-deep-2);padding-bottom:2px;
  transition:border-color .18s ease,color .18s ease;
}
.nflow-more .en-icon{width:15px;height:15px;flex:0 0 auto;transition:transform .18s ease}
.nflow-more:hover,.nflow-more:focus-visible{color:#fff;border-bottom-color:var(--focus-on-dark)}
.nflow-more:hover .en-icon,.nflow-more:focus-visible .en-icon{transform:translateX(3px)}

/* --------------------------------------------------------------------------
   The closing caption — the client's own sentence, which the Brief puts here.
   Set between two rules rather than inside a pill: the pill read as a button
   nobody could press.
   -------------------------------------------------------------------------- */
.nflow-cap{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s-5);
  margin:var(--s-7) 0 0;
  font-family:var(--data);font-size:var(--fs-small);letter-spacing:var(--ls-micro);
  text-align:center;color:var(--on-deep);
}
.nflow-cap::before,.nflow-cap::after{content:"";height:1px;background:var(--nline)}

/* --------------------------------------------------------------------------
   One column. 820px is where this band already collapsed, so the page reflows
   at the width it always did.

   The rail turns 90°: same pseudo-element, same absence on the last stop, now
   running down the marker's centre line from this card's bottom edge into the
   next card's marker, so the stacked cards still read as one route.
   -------------------------------------------------------------------------- */
@media (max-width:820px){
  .nflow-track{grid-template-columns:1fr;gap:var(--s-7)}

  .nflow-stop::before{
    inset-inline-start:calc(var(--ncard) + var(--nmark) / 2);
    inset-inline-end:auto;
    top:100%;height:calc(var(--s-7) - var(--nmark) / 2);width:1px;
  }
}

@media (max-width:560px){
  .nflow{--ngap:var(--s-5);--ncard:var(--s-4)}
  .nflow-cap{grid-template-columns:1fr;gap:var(--s-4)}
  .nflow-cap::before,.nflow-cap::after{display:none}
}

@media (prefers-reduced-motion:reduce){
  .nflow-stop,.nflow-more,.nflow-more .en-icon{transition:none}
}