/* ---------------------------------------------------------------------------
   loop-pop.css (2026-09-10)

   Chapter 03's loop, drawn as a figure instead of a sketch. Loaded last on
   purpose: preview.css carries three layered, minified loop blocks, and
   restating the finished values here is safer than surgery inside them.

   What changes: a soft green stage behind the ring, a solid dark ring with a
   mint dot at every join, white cards at 208 px with a dark line and a real
   shadow, and station art drawn at its natural 176 px width rather than scaled
   down. Geometry (cx, cy, rx, ry) lives in loop.js build(); this file owns the
   wrapper height the geometry is written against, so the two must move
   together: 640 px / cy 320 on a desktop, 400 px / cy 190 on a phone.

   Timing, the eight-second cycle and reduced motion are untouched.
   --------------------------------------------------------------------------- */

/* ---- the chapter column: 03, then the eyebrow, then the headline ---------- */

.flows .chapter-copy {
  padding: 126px 0 0;
}

.flows .eyebrow {
  display: block;
  font: 13px/1.4 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #29715e;
  margin: 0 0 18px;
}

@media (min-width: 1181px) {
  .flows .chapter-inner {
    grid-template-columns: minmax(240px, 0.62fr) minmax(0, 1.8fr);
  }
}

/* Below 1180 the bigger cards need the full width, so the chapter stacks. */
@media (max-width: 1180px) {
  .flows .chapter-inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .flows-animation .loopwrap {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 900px) {
  .flows .chapter-copy { padding: 128px 0 0; }
}

@media (max-width: 760px) {
  .flows .chapter-copy { padding: 96px 0 0; }
}

/* ---- the stage ------------------------------------------------------------ */

.flows-animation {
  --lp-stage: #e7f0e8;
  --lp-ring: #1e5240;
  --lp-ring-lit: #8fc7a8;
  --lp-mint: #7cbf9b;
  --lp-mint-soft: #dcebe2;
  --lp-hair: #cfd8d2;
  --lp-card-line: #1f3d35;
}

.flows-animation .loopwrap {
  height: 640px;
}

/* The stage reaches past the wrap, so its overhang is capped at the gutter that
   actually exists beside the chapter (32 px while stacked, 50 px in two
   columns, 20 px on a phone) — anything wider would scroll the page sideways. */
.flows-animation .loopwrap::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 320px;
  width: min(1120px, calc(100% + 64px));
  height: 700px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse closest-side at center, var(--lp-stage) 0 52%, rgba(231, 240, 232, 0) 100%);
  pointer-events: none;
}

/* Two columns leave a wider gutter beside the chapter, so the stage may reach
   further. This must follow the rule above, not precede it. */
@media (min-width: 1181px) {
  .flows-animation .loopwrap::before {
    width: min(1120px, calc(100% + 100px));
  }
}

/* The centre line is real markup now, so it can carry its own mint rule. */
.flows-animation .loopwrap::after {
  content: none;
}

.loop-centre {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 320px;
  transform: translate(-50%, -50%);
  text-align: center;
  font: 26px/1.34 var(--font-mono);
  letter-spacing: -0.03em;
  color: #173d33;
}

.loop-centre i {
  display: block;
  width: 56px;
  height: 3px;
  border-radius: 2px;
  margin: 14px auto 0;
  background: #9fd0b5;
}

/* ---- the ring ------------------------------------------------------------- */

.flows-animation .lw-track {
  stroke: var(--lp-ring);
  stroke-width: 3;
  stroke-dasharray: none;
}

.flows-animation .lw-glow {
  stroke: var(--lp-ring-lit);
  stroke-width: 3;
  stroke-linecap: round;
}

.flows-animation .lw-dot {
  r: 7;
  fill: var(--lp-mint);
  stroke: #fbfaf7;
  stroke-width: 3;
}

.flows-animation .loop-tok {
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  background: var(--green);
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(0, 89, 67, 0.25);
}

.flows-animation .loop-return {
  bottom: 6px;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

/* ---- the cards ------------------------------------------------------------ */

.flows-animation .lst {
  width: 208px;
  height: auto;
  margin: 0;
  transform: translate(-50%, -50%);
  gap: 10px;
  padding: 14px 16px;
  background: #fff;
  border: 1.5px solid var(--lp-card-line);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(11, 31, 29, 0.1);
}

.flows-animation .lst.is-active {
  border-color: var(--green);
  box-shadow: 0 18px 40px rgba(11, 31, 29, 0.18);
}

.flows-animation .lp-k {
  font: 15px/1.3 var(--font-mono);
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  color: var(--ink);
}

.flows-animation .lp-art {
  width: 176px;
  min-height: 0;
  transform: none;
  margin-bottom: 0;
}

.flows-animation #lst0 .lp-art,
.flows-animation #lst4 .lp-art { height: 92px; }

.flows-animation #lst1 .lp-art { height: 122px; }

.flows-animation #lst2 .lp-art { height: 100px; }

.flows-animation #lst3 .lp-art,
.flows-animation #lst5 .lp-art { height: 118px; }

/* ---- station 1 — the form ------------------------------------------------- */

.flows-animation .lp-lab {
  font-size: 12px;
  line-height: 16px;
  color: #46564f;
}

.flows-animation .lp-field {
  top: 22px;
  height: 30px;
  padding: 0 9px;
  border-color: var(--lp-hair);
  border-radius: 6px;
  background: #fff;
  font-size: 11px;
}

.lp-check {
  width: 16px;
  height: 16px;
  flex: none;
  margin-left: auto;
  opacity: 0;
}

.lp-field.is-done .lp-check {
  opacity: 1;
}

.flows-animation .lp-btn {
  top: 62px;
  height: 30px;
  border-radius: 6px;
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.1em;
}

.flows-animation .lp-btn.is-on {
  background: var(--green-2);
  border-color: var(--green-2);
}

/* ---- station 2 — the customer -------------------------------------------- */

.flows-animation .lp-rows {
  position: static;
  gap: 8px;
  overflow: visible;
}

.flows-animation .lp-row {
  height: 22px;
  padding: 0;
  gap: 10px;
  border-radius: 0;
  background: none;
}

.flows-animation .lp-row-head {
  height: 32px;
}

.flows-animation .lp-row b {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--lp-mint-soft);
  display: grid;
  place-items: center;
}

.flows-animation .lp-row-head b {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.flows-animation .lp-row b svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: #1f5240;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flows-animation .lp-row-head b svg {
  width: 17px;
  height: 17px;
}

.flows-animation .lp-row s {
  height: 7px;
  border-radius: 4px;
  background: #e4e9e5;
}

.flows-animation .lp-row-head s {
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: none;
}

.flows-animation .lp-row-head s i {
  height: 7px;
  border-radius: 4px;
  background: #e4e9e5;
}

.flows-animation .lp-row.is-new {
  background: none;
}

.flows-animation .lp-row.is-new b {
  background: var(--green);
}

.flows-animation .lp-row.is-new b svg {
  stroke: #fff;
}

/* ---- station 3 — the segment --------------------------------------------- */

.flows-animation .segment-scene text {
  font: 20px Cabin, Arial, sans-serif;
  fill: #1f3d35;
}

.flows-animation .segment-scene .segment-count {
  font: 17px var(--font-mono);
}

.flows-animation .segment-scene .segment-result {
  font-size: 19px;
}

.flows-animation #lst2 .segment-scene {
  height: 100%;
}

/* ---- station 4 — the flow ------------------------------------------------ */

.flows-animation .lp-node {
  height: 30px;
  padding: 0 8px;
  gap: 8px;
  border-radius: 8px;
  border-color: var(--lp-hair);
  background: #fff;
  font-size: 10px;
  color: #3b4b45;
}

.flows-animation .lp-node .lp-tile {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 6px;
  background: var(--lp-mint-soft);
  display: grid;
  place-items: center;
}

.flows-animation .lp-node .lp-tile svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: #1f5240;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flows-animation .lp-node .lp-tile svg.lp-fill {
  fill: #1f5240;
  stroke: none;
}

.flows-animation .lp-node.is-on {
  border-color: var(--green);
  color: var(--green);
}

.flows-animation .lp-node.is-on .lp-tile {
  background: #c7e3d3;
}

.lp-arrow {
  position: absolute;
  left: 50%;
  margin-left: -5px;
  width: 10px;
  height: 14px;
  fill: none;
  stroke: #1f5240;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The pulse rail sits in the card's own padding, clear of the icon tiles. */
.flows-animation .lp-flowsvg {
  left: -10px;
  top: 0;
  width: 12px;
  height: 118px;
}

/* ---- station 5 — the e-mail ---------------------------------------------- */

.flows-animation .lp-envsvg {
  height: 92px;
}

.flows-animation .lp-trail {
  height: 2px;
}

/* ---- station 6 — the week ------------------------------------------------ */

.lp-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 8px;
  font: 9px/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--muted);
}

.flows-animation .lp-art-book .lp-slots {
  position: static;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 22px;
  gap: 4px;
  max-width: none;
}

.flows-animation .lp-slot {
  border-radius: 3px;
  background: var(--track);
}

.flows-animation .lp-slot.is-taken { background: #bfd3c7; }
.flows-animation .lp-slot.is-fresh { background: var(--green); }

/* ---- the phone ------------------------------------------------------------
   The ring survives, but six 208 px cards cannot: at a 393 px frame the two
   upper cards would run into the top one. 100 px is the widest card that keeps
   0.866*rx >= card width there, so the art is drawn at 176 and scaled to fit,
   its scaled height reclaimed by the negative margin as before.
   --------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .flows-animation .loopwrap {
    height: 400px;
    max-width: 440px;
  }

  .flows-animation .loopwrap::before {
    top: 190px;
    width: min(532px, calc(100% + 40px));
    height: 386px;
  }

  .loop-centre {
    top: 190px;
    font-size: 12px;
  }

  .loop-centre i {
    width: 36px;
    height: 2px;
    margin-top: 9px;
  }

  .flows-animation .lst {
    width: 100px;
    gap: 6px;
    padding: 8px;
    border-width: 1.2px;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(11, 31, 29, 0.1);
  }

  .flows-animation .lst.is-active {
    box-shadow: 0 10px 22px rgba(11, 31, 29, 0.18);
  }

  .flows-animation .lp-k {
    font-size: 11px;
  }

  .flows-animation .lp-art {
    transform: scale(0.48);
    transform-origin: left top;
  }

  .flows-animation #lst0 .lp-art,
  .flows-animation #lst4 .lp-art { margin-bottom: -48px; }

  .flows-animation #lst1 .lp-art { margin-bottom: -63px; }

  .flows-animation #lst2 .lp-art { margin-bottom: -52px; }

  .flows-animation #lst3 .lp-art,
  .flows-animation #lst5 .lp-art { margin-bottom: -61px; }

  .flows-animation .lw-track,
  .flows-animation .lw-glow {
    stroke-width: 2.5;
  }

  .flows-animation .lw-dot {
    r: 5;
    stroke-width: 2.5;
  }

  .flows-animation .loop-tok {
    width: 11px;
    height: 11px;
    margin: -5.5px 0 0 -5.5px;
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(0, 89, 67, 0.25);
  }

  .flows-animation .loop-return {
    bottom: 0;
    font-size: 10px;
  }
}